/* ============================================================
   IMPALA KIDS — COMPONENT LAYER
   Requires impala-tokens.css + bootstrap.rtl.min.css loaded first.
   Naming convention: every custom class is prefixed `ik-` so it
   never collides with Bootstrap's own class names, and it's
   instantly obvious in markup which classes are "ours" vs "bs-".
   Rule: extend Bootstrap components with ik- utility/addon
   classes; never redefine .btn, .card, .badge etc. from scratch.
   ============================================================ */

/* ---------- Base / RTL ---------- */
html[dir="rtl"] body {
  font-family: var(--ik-font-family);
  letter-spacing: normal; /* Tajawal must never get negative tracking */
}

h1, h2, h3, .h1, .h2, .h3 { font-weight: 700; color: var(--ik-text); }
h1, .h1 { font-size: var(--ik-fs-h1); line-height: var(--ik-lh-h1); }
h2, .h2 { font-size: var(--ik-fs-h2); line-height: var(--ik-lh-h2); }
h3, .h3 { font-size: var(--ik-fs-h3); line-height: var(--ik-lh-h3); font-weight: 600; }
.ik-display { font-size: var(--ik-fs-display); line-height: var(--ik-lh-display); font-weight: 700; }
.text-muted { color: var(--ik-text-muted) !important; }
small, .ik-caption { font-size: var(--ik-fs-caption); line-height: var(--ik-lh-caption); color: var(--ik-text-muted); }

/* Always visible focus ring — never remove */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ik-primary-500);
  outline-offset: 2px;
}

/* ---------- Buttons (extend .btn, don't replace) ---------- */
.btn { min-height: 44px; padding-inline: var(--ik-space-5); transition: background var(--ik-duration-fast) var(--ik-easing); }
.btn-sm { min-height: 36px; }
.btn-primary { color: #fff; }
.btn-primary:hover { background-color: var(--ik-primary-600); border-color: var(--ik-primary-600); }
.btn-primary:active { background-color: var(--ik-primary-700); border-color: var(--ik-primary-700); }
.btn-outline-primary { color: var(--ik-primary-600); border-color: var(--ik-primary-500); }
.btn-ghost { background: transparent; border: none; color: var(--ik-primary-600); }
.btn-ghost:hover { background: var(--ik-primary-50); }
.btn-danger, .btn-outline-danger.ik-destructive { --bs-btn-color:#fff; }
.btn.ik-loading { pointer-events: none; opacity: .75; position: relative; color: transparent !important; }
.btn.ik-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%;
  animation: ik-spin .6s linear infinite;
}
.btn-outline-primary.ik-loading::after { border-color: rgba(15,110,106,.35); border-top-color: var(--ik-primary-600); }
@keyframes ik-spin { to { transform: rotate(360deg); } }

/* ---------- Forms ---------- */
.form-label { font-size: var(--ik-fs-label); font-weight: var(--ik-fw-label); color: var(--ik-text); margin-bottom: var(--ik-space-2); }
.form-label .ik-required { color: var(--ik-error); margin-inline-start: 2px; }
.form-control, .form-select {
  min-height: 44px; border-color: var(--ik-border-strong); font-size: var(--ik-fs-body);
}
.form-control:focus, .form-select:focus {
  border-color: var(--ik-primary-500); box-shadow: 0 0 0 3px rgba(15,110,106,.15);
}
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--ik-error); }
.form-control.is-valid, .form-select.is-valid { border-color: var(--ik-success); }
.invalid-feedback { color: var(--ik-error); font-size: var(--ik-fs-small); display: flex; align-items: center; gap: 4px; }
.valid-feedback { color: var(--ik-success); font-size: var(--ik-fs-small); }
.form-text { color: var(--ik-text-muted); font-size: var(--ik-fs-small); }
.form-control:disabled, .form-select:disabled { background: var(--ik-surface-alt); color: var(--ik-text-disabled); }
/* Never use placeholder as the label */
.form-control::placeholder { color: var(--ik-text-disabled); opacity: 1; }

/* ---------- Cards ---------- */
.card { border-color: var(--ik-border); box-shadow: var(--ik-shadow-xs); }
.card.ik-interactive { cursor: pointer; transition: box-shadow var(--ik-duration-base) var(--ik-easing), transform var(--ik-duration-base) var(--ik-easing); }
.card.ik-interactive:hover { box-shadow: var(--ik-shadow-md); transform: translateY(-2px); }
.card-header { background: var(--ik-surface); border-bottom-color: var(--ik-border); font-weight: 600; }

/* Stats Card (KPI) — used across Admin + Parent dashboards */
.ik-stat-card { background: var(--ik-surface); border: 1px solid var(--ik-border); border-radius: var(--ik-radius-lg); padding: var(--ik-space-5); }
.ik-stat-card .ik-stat-label { font-size: var(--ik-fs-small); color: var(--ik-text-muted); margin-bottom: var(--ik-space-1); }
.ik-stat-card .ik-stat-value { font-size: 28px; font-weight: 700; color: var(--ik-text); line-height: 1.2; }
.ik-stat-card .ik-stat-delta { font-size: var(--ik-fs-caption); display: inline-flex; align-items: center; gap: 4px; margin-top: var(--ik-space-2); }
.ik-stat-delta.up { color: var(--ik-success); }
.ik-stat-delta.down { color: var(--ik-error); }

/* ---------- Tables ---------- */
.table { --bs-table-color: var(--ik-text); font-size: var(--ik-fs-small); }
.table thead th { font-size: var(--ik-fs-caption); text-transform: none; color: var(--ik-text-muted); font-weight: 600; border-bottom-width: 1px; }
.table > :not(caption) > * > * { padding: var(--ik-space-3) var(--ik-space-4); }
/* Mobile: table -> stacked cards. Apply class ik-table-responsive-cards on <table>. */
@media (max-width: 767.98px) {
  table.ik-table-responsive-cards thead { display: none; }
  table.ik-table-responsive-cards, table.ik-table-responsive-cards tbody, table.ik-table-responsive-cards tr, table.ik-table-responsive-cards td { display: block; width: 100%; }
  table.ik-table-responsive-cards tr { border: 1px solid var(--ik-border); border-radius: var(--ik-radius-md); margin-bottom: var(--ik-space-3); padding: var(--ik-space-3); }
  table.ik-table-responsive-cards td { display: flex; justify-content: space-between; gap: var(--ik-space-3); border: none; padding: var(--ik-space-1) 0; }
  table.ik-table-responsive-cards td::before { content: attr(data-label); font-weight: 600; color: var(--ik-text-muted); font-size: var(--ik-fs-caption); }
}

/* ---------- Badges (status = color + icon + text, never color alone) ---------- */
.ik-badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ik-fs-caption); font-weight: 600; padding: 4px 10px; border-radius: var(--ik-radius-full); }
.ik-badge svg, .ik-badge i { width: 14px; height: 14px; }
.ik-badge-success { color: var(--ik-success); background: var(--ik-success-bg); }
.ik-badge-warning { color: var(--ik-warning); background: var(--ik-warning-bg); }
.ik-badge-error   { color: var(--ik-error);   background: var(--ik-error-bg); }
.ik-badge-info    { color: var(--ik-info);    background: var(--ik-info-bg); }
.ik-badge-neutral { color: var(--ik-text-muted); background: var(--ik-surface-alt); }

/* ---------- Alerts / Toasts ---------- */
.alert { border: 1px solid transparent; border-radius: var(--ik-radius-md); font-size: var(--ik-fs-small); }
.alert-success { color: var(--ik-success); background: var(--ik-success-bg); border-color: var(--ik-success-bg); }
.alert-warning { color: var(--ik-warning); background: var(--ik-warning-bg); border-color: var(--ik-warning-bg); }
.alert-danger  { color: var(--ik-error);   background: var(--ik-error-bg);   border-color: var(--ik-error-bg); }
.alert-info    { color: var(--ik-info);    background: var(--ik-info-bg);   border-color: var(--ik-info-bg); }
.toast { border-color: var(--ik-border); box-shadow: var(--ik-shadow-lg); }
.toast-container { z-index: var(--ik-z-toast); }

/* ---------- Modals / Drawers ---------- */
.modal-content { border-radius: var(--ik-radius-modal); border: none; box-shadow: var(--ik-shadow-lg); }
.modal-header { border-bottom-color: var(--ik-border); }
.modal-footer { border-top-color: var(--ik-border); }
.modal-backdrop.show { opacity: .5; } /* 40-60% scrim per spec */
/* Drawer = Bootstrap Offcanvas, restyled */
.offcanvas { box-shadow: var(--ik-shadow-lg); }

/* ---------- Dropdowns ---------- */
.dropdown-menu { border-color: var(--ik-border); box-shadow: var(--ik-shadow-md); border-radius: var(--ik-radius-md); padding: var(--ik-space-2); }
.dropdown-item { border-radius: var(--ik-radius-sm); font-size: var(--ik-fs-small); }
.dropdown-item:active, .dropdown-item.active { background: var(--ik-primary-50); color: var(--ik-primary-700); }

/* ---------- Tabs / Pills ---------- */
.nav-tabs { border-bottom-color: var(--ik-border); }
.nav-tabs .nav-link { color: var(--ik-text-muted); border: none; border-bottom: 2px solid transparent; font-weight: 500; }
.nav-tabs .nav-link.active { color: var(--ik-primary-600); border-bottom-color: var(--ik-primary-500); background: transparent; }

/* ---------- Pagination ---------- */
.page-link { color: var(--ik-text); border-color: var(--ik-border); min-width: 40px; text-align: center; }
.page-item.active .page-link { background: var(--ik-primary-500); border-color: var(--ik-primary-500); }

/* ---------- Breadcrumb ---------- */
.breadcrumb { font-size: var(--ik-fs-small); }
.breadcrumb-item + .breadcrumb-item::before { content: "\\"; } /* RTL-safe neutral separator, avoid literal > or < */

/* ---------- Admin Shell: Sidebar + Header ---------- */
.ik-sidebar {
  width: 260px; background: var(--ik-surface); border-inline-start: 1px solid var(--ik-border);
  position: fixed; inset-inline-end: 0; top: 0; bottom: 0; z-index: var(--ik-z-sidebar);
  overflow-y: auto; transition: transform var(--ik-duration-base) var(--ik-easing);
}
.ik-sidebar .ik-nav-group-title { font-size: var(--ik-fs-caption); color: var(--ik-text-muted); text-transform: uppercase; padding: var(--ik-space-4) var(--ik-space-4) var(--ik-space-1); }
.ik-sidebar .nav-link { color: var(--ik-text); border-radius: var(--ik-radius-sm); padding: var(--ik-space-2) var(--ik-space-3); margin: 2px var(--ik-space-2); display: flex; align-items: center; gap: var(--ik-space-2); min-height: 44px; }
.ik-sidebar .nav-link.active { background: var(--ik-primary-50); color: var(--ik-primary-700); font-weight: 600; }
.ik-sidebar .nav-link:hover:not(.active) { background: var(--ik-surface-alt); }
@media (max-width: 1023.98px) {
  .ik-sidebar { transform: translateX(100%); } /* off-canvas by default on tablet/mobile, RTL-aware */
  html[dir="rtl"] .ik-sidebar { transform: translateX(100%); }
  .ik-sidebar.ik-open { transform: translateX(0); }
}
.ik-header {
  height: 64px; background: var(--ik-surface); border-bottom: 1px solid var(--ik-border);
  position: sticky; top: 0; z-index: var(--ik-z-sticky); display: flex; align-items: center;
  padding-inline: var(--ik-space-5); gap: var(--ik-space-4);
}
.ik-main { padding: var(--ik-space-6); }
@media (min-width: 1024px) { .ik-main { margin-inline-end: 260px; } }

/* Bottom nav — Parent Portal mobile, max 5 items */
.ik-bottom-nav {
  position: fixed; inset-inline: 0; bottom: 0; z-index: var(--ik-z-sticky);
  background: var(--ik-surface); border-top: 1px solid var(--ik-border);
  display: flex; justify-content: space-around; padding: var(--ik-space-1) 0;
  padding-bottom: env(safe-area-inset-bottom);
}
.ik-bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--ik-text-muted); min-width: 44px; min-height: 44px; justify-content: center; }
.ik-bottom-nav a.active { color: var(--ik-primary-600); font-weight: 600; }

/* ---------- Empty / Loading / Error / Confirmation states ---------- */
.ik-empty-state { text-align: center; padding: var(--ik-space-12) var(--ik-space-6); color: var(--ik-text-muted); }
.ik-empty-state .ik-empty-icon { width: 56px; height: 56px; margin: 0 auto var(--ik-space-4); color: var(--ik-primary-300); }
.ik-empty-state h3 { color: var(--ik-text); margin-bottom: var(--ik-space-2); }

.ik-skeleton { background: linear-gradient(90deg, var(--ik-surface-alt) 25%, #ECEAE6 37%, var(--ik-surface-alt) 63%); background-size: 400% 100%; animation: ik-shimmer 1.4s ease infinite; border-radius: var(--ik-radius-sm); }
@keyframes ik-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .ik-skeleton { animation: none; } }

.ik-state-panel { text-align: center; padding: var(--ik-space-10) var(--ik-space-6); border-radius: var(--ik-radius-lg); }
.ik-state-panel.error { background: var(--ik-error-bg); }
.ik-state-panel.success { background: var(--ik-success-bg); }
.ik-state-panel .ik-state-icon { width: 48px; height: 48px; margin-bottom: var(--ik-space-3); }

/* ---------- File / Image Upload ---------- */
.ik-upload {
  border: 2px dashed var(--ik-border-strong); border-radius: var(--ik-radius-lg);
  padding: var(--ik-space-8); text-align: center; background: var(--ik-surface-alt);
  cursor: pointer; transition: border-color var(--ik-duration-base);
}
.ik-upload:hover, .ik-upload.ik-dragover { border-color: var(--ik-primary-500); background: var(--ik-primary-50); }
.ik-upload input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ik-upload-preview { display: flex; flex-wrap: wrap; gap: var(--ik-space-3); margin-top: var(--ik-space-4); }
.ik-upload-thumb { width: 72px; height: 72px; border-radius: var(--ik-radius-md); overflow: hidden; position: relative; border: 1px solid var(--ik-border); }
.ik-upload-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ik-upload-thumb .ik-remove { position: absolute; top: 2px; inset-inline-end: 2px; width: 20px; height: 20px; border-radius: 50%; background: rgba(30,36,34,.7); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; }

/* ---------- Date / Time controls ---------- */
.ik-date-input, .ik-time-input { min-height: 44px; }
/* Native <input type=date/time> inherits .form-control; RTL fix so calendar icon sits correctly */
html[dir="rtl"] input[type="date"], html[dir="rtl"] input[type="time"] { text-align: right; }
input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(38%) sepia(9%) saturate(383%) hue-rotate(118deg); }

/* ---------- QR Components ---------- */
.ik-qr-card { background: var(--ik-surface); border: 1px solid var(--ik-border); border-radius: var(--ik-radius-lg); padding: var(--ik-space-5); text-align: center; box-shadow: var(--ik-shadow-sm); }
.ik-qr-card .ik-qr-code { width: 180px; height: 180px; margin: var(--ik-space-4) auto; background: #fff; padding: var(--ik-space-2); border-radius: var(--ik-radius-md); border: 1px solid var(--ik-border); }
.ik-qr-card .ik-qr-code img, .ik-qr-card .ik-qr-code canvas { width: 100%; height: 100%; }

.ik-scanner-frame { position: relative; aspect-ratio: 1/1; max-width: 360px; margin-inline: auto; border-radius: var(--ik-radius-lg); overflow: hidden; background: #000; }
.ik-scanner-frame video, .ik-scanner-frame canvas { width: 100%; height: 100%; object-fit: cover; }
.ik-scanner-frame .ik-scan-guide { position: absolute; inset: 12%; border: 3px solid rgba(255,255,255,.85); border-radius: var(--ik-radius-md); pointer-events: none; }

/* QR scan result: color + icon + text + status label, per spec never color alone */
.ik-scan-result { border-radius: var(--ik-radius-lg); padding: var(--ik-space-6); display: flex; gap: var(--ik-space-4); align-items: center; }
.ik-scan-result .ik-scan-icon { width: 48px; height: 48px; flex: none; }
.ik-scan-result .ik-scan-title { font-size: var(--ik-fs-h3); font-weight: 700; margin-bottom: 2px; }
.ik-scan-result.success { background: var(--ik-success-bg); color: var(--ik-success); }
.ik-scan-result.warning { background: var(--ik-warning-bg); color: var(--ik-warning); }
.ik-scan-result.error   { background: var(--ik-error-bg);   color: var(--ik-error); }
.ik-scan-result .ik-scan-meta { color: var(--ik-text); font-size: var(--ik-fs-small); }

/* ---------- Prerequisite Gate State ----------
   NEW in Phase 6, added to the shared Design System (not a portal-only
   one-off) because "you must complete X before Y" is a generic product
   pattern (e.g. add a child before subscribing, before registering for a
   workshop) that other flows may need later. Purely additive — does not
   change any existing class. */
.ik-gate-state {
  text-align: center; padding: var(--ik-space-16) var(--ik-space-6);
  background: var(--ik-surface); border: 1px dashed var(--ik-border-strong);
  border-radius: var(--ik-radius-lg); max-width: 480px; margin-inline: auto;
}
.ik-gate-state .ik-gate-icon {
  width: 64px; height: 64px; margin: 0 auto var(--ik-space-4);
  color: var(--ik-primary-500); background: var(--ik-primary-50);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.ik-gate-state h3 { margin-bottom: var(--ik-space-2); }
.ik-gate-state p { color: var(--ik-text-muted); margin-bottom: var(--ik-space-5); }
.ik-gate-banner {
  display: flex; align-items: center; gap: var(--ik-space-4); flex-wrap: wrap;
  background: var(--ik-warning-bg); border: 1px solid var(--ik-warning); border-radius: var(--ik-radius-lg);
  padding: var(--ik-space-4) var(--ik-space-5); margin-bottom: var(--ik-space-6);
}
.ik-gate-banner .ik-gate-banner-icon { color: var(--ik-warning); flex: none; }
.ik-gate-banner strong { color: var(--ik-text); }

/* ---------- Workshop capacity + weekly schedule ----------
   NEW in the Workshops Module rebuild. Capacity meter moved here from the
   Portal-only file because Admin needs the identical pattern (list +
   create/edit preview) — a genuine cross-surface reuse gap, not a
   portal-only concern. Schedule grid is new: a fixed 4-period x 5-day
   (Sun-Thu) editable table used on Admin create/edit, and shown read-only
   on Admin schedule overview, Public workshop details, and Portal workshop
   details — same markup/classes in all three so it never drifts. */
.ik-capacity-meter { display: flex; align-items: center; gap: 8px; font-size: var(--ik-fs-caption); color: var(--ik-text-muted); }
.ik-capacity-meter .bar { flex: 1; height: 6px; border-radius: var(--ik-radius-full); background: var(--ik-surface-alt); overflow: hidden; }
.ik-capacity-meter .bar > span { display: block; height: 100%; background: var(--ik-primary-500); }

.ik-schedule-grid { min-width: 720px; }
.ik-schedule-grid th, .ik-schedule-grid td { vertical-align: top; text-align: center; }
.ik-schedule-grid td:nth-child(n+4) { text-align: start; }
.ik-schedule-grid textarea { min-height: 64px; font-size: var(--ik-fs-caption); resize: vertical; }
.ik-schedule-grid input[type="time"] { min-width: 100px; }
.ik-schedule-grid.readonly textarea, .ik-schedule-grid.readonly input { background: var(--ik-surface-alt); }

.ik-workshop-thumb { width: 96px; height: 72px; border-radius: var(--ik-radius-md); object-fit: cover; flex: none; background: var(--ik-surface-alt); }
.ik-gallery-thumbs { display: flex; flex-wrap: wrap; gap: var(--ik-space-3); }

/* ---------- Utility ---------- */
.ik-touch-target { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.visually-hidden-focusable:not(:focus):not(:focus-within) { /* Bootstrap default already covers this; kept as documentation anchor */ }