/* ==========================================================================
   OUR FUTURE — Academy dashboard (app shell)
   The signed-in control panel for an academy owner. Loaded only on
   dashboard.html. Reuses the design tokens; RTL-native via logical properties
   (sidebar lands on the right in Arabic, left in English, with no overrides).
   ========================================================================== */

.app {
  display: grid;
  grid-template-columns: 268px 1fr;   /* sidebar first → inline-start (right in RTL) */
  min-height: 100vh;
  background: var(--bg-subtle);
}

/* ----- Sidebar --------------------------------------------------------- */
.dash-sidebar {
  position: sticky; inset-block-start: 0; align-self: start;
  height: 100vh; overflow-y: auto;
  background: linear-gradient(180deg, var(--brand-900), var(--brand-950));
  color: rgba(255,255,255,.82);
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-5) var(--s-4);
  border-inline-end: 1px solid rgba(255,255,255,.06);
}
.dash-brand { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-2) var(--s-5); }
.dash-brand .logo__mark { width: 34px; height: 34px; }
.dash-brand b { color: #fff; font-family: var(--font-display); font-weight: var(--weight-extra); font-size: 1.18rem; letter-spacing: -.02em; }

.dash-nav { display: flex; flex-direction: column; gap: 2px; }
.dash-nav__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: rgba(255,255,255,.4); padding: var(--s-4) var(--s-3) var(--s-2); font-weight: var(--weight-bold); }
.dash-link {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 0.65rem var(--s-3); border-radius: var(--r-md);
  color: rgba(255,255,255,.78); font-size: var(--fs-sm); font-weight: var(--weight-medium);
  transition: background-color var(--dur-2), color var(--dur-2);
}
.dash-link svg { width: 19px; height: 19px; flex: none; opacity: .9; }
.dash-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.dash-link.is-active { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.dash-link .badge-soft { margin-inline-start: auto; font-size: 0.68rem; background: var(--accent-500); color: var(--brand-950); border-radius: var(--r-pill); padding: 0.05rem 0.4rem; font-weight: var(--weight-bold); }

.dash-plan { margin-top: auto; padding: var(--s-4); border-radius: var(--r-lg); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.dash-plan small { color: rgba(255,255,255,.6); font-size: var(--fs-xs); }
.dash-plan b { display: block; color: #fff; margin-block: 2px var(--s-3); }
.dash-plan .btn { width: 100%; }

/* ----- Topbar ---------------------------------------------------------- */
.dash-topbar {
  position: sticky; inset-block-start: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) clamp(1rem, .5rem + 2vw, 2rem);
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border);
}
.dash-url {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-sm); color: var(--ink-600); font-family: var(--font-mono);
  background: var(--surface-2); border: 1px solid var(--color-border);
  border-radius: var(--r-pill); padding: 0.4rem 0.9rem;
}
.dash-url svg { width: 15px; height: 15px; color: var(--brand-500); }
.dash-topbar__spacer { margin-inline-start: auto; }
.dash-topbar__actions { display: flex; align-items: center; gap: var(--s-3); }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-md); border: 1px solid var(--color-border); background: var(--surface); color: var(--ink-600); transition: border-color var(--dur-2), color var(--dur-2); position: relative; }
.icon-btn:hover { border-color: var(--brand-300); color: var(--brand-700); }
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn .dot { position: absolute; inset-block-start: 8px; inset-inline-end: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--state-danger); border: 2px solid var(--surface); }
.dash-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-brand); color: #fff; font-weight: var(--weight-bold); font-size: var(--fs-sm); }

/* sidebar toggle (mobile) */
.dash-burger { display: none; }

/* ----- Main ------------------------------------------------------------ */
.dash-main { min-width: 0; }
.dash-content { padding: clamp(1.25rem, .75rem + 2vw, 2.25rem); display: grid; gap: var(--s-6); max-width: 1180px; }

.welcome h1 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); }
.welcome p { color: var(--color-text-soft); margin-top: var(--s-2); }

/* ----- Onboarding journey --------------------------------------------- */
.journey { background: var(--surface); border: 1px solid var(--color-border); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); overflow: hidden; }
.journey__head { padding: var(--s-6); background: linear-gradient(135deg, var(--brand-50), var(--surface)); border-bottom: 1px solid var(--color-border); }
.journey__head .pill { background: var(--brand-600); color: #fff; border: none; }
.journey__title { font-size: 1.3rem; font-weight: var(--weight-extra); margin-top: var(--s-3); }
.journey__sub { color: var(--color-text-soft); margin-top: var(--s-1); font-size: var(--fs-sm); }
.journey__bar { margin-top: var(--s-4); height: 9px; border-radius: var(--r-pill); background: var(--ink-100); overflow: hidden; }
.journey__bar i { display: block; height: 100%; width: 0%; background: var(--grad-brand); border-radius: var(--r-pill); transition: width var(--dur-4) var(--ease-out); }
.journey__count { font-size: var(--fs-sm); font-weight: var(--weight-semibold); color: var(--brand-700); margin-top: var(--s-2); }

.journey__steps { display: flex; flex-direction: column; }
.journey__step {
  display: flex; align-items: flex-start; gap: var(--s-4); width: 100%;
  padding: var(--s-4) var(--s-6); text-align: start;
  border-block-end: 1px solid var(--color-border); transition: background-color var(--dur-2);
}
.journey__step:last-child { border-block-end: none; }
.journey__step:hover { background: var(--surface-2); }
.journey__check {
  flex: none; width: 26px; height: 26px; border-radius: 50%; margin-top: 2px;
  border: 2px solid var(--line-strong); display: grid; place-items: center;
  color: transparent; transition: background-color var(--dur-2), border-color var(--dur-2), color var(--dur-2);
}
.journey__check svg { width: 14px; height: 14px; }
.journey__step.is-done .journey__check { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.journey__step.is-done .journey__step-title { text-decoration: line-through; color: var(--color-text-muted); }
.journey__step-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.journey__step-title { font-weight: var(--weight-semibold); color: var(--color-heading); }
.journey__step-desc { font-size: var(--fs-sm); color: var(--color-text-soft); margin-top: 2px; }
.journey__step-cta { flex: none; align-self: center; color: var(--ink-300); }
.journey__step-cta svg { width: 20px; height: 20px; }
[dir="rtl"] .journey__step-cta svg { transform: scaleX(-1); }

/* ----- KPI cards ------------------------------------------------------- */
.kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
@media (max-width: 1080px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .kpi-grid { grid-template-columns: 1fr; } }
.kpi { background: var(--surface); border: 1px solid var(--color-border); border-radius: var(--r-lg); padding: var(--s-5); display: flex; align-items: center; gap: var(--s-4); box-shadow: var(--shadow-xs); transition: box-shadow var(--dur-2), transform var(--dur-2); }
.kpi:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.kpi__icon { width: 46px; height: 46px; border-radius: var(--r-md); display: grid; place-items: center; flex: none; background: var(--brand-50); color: var(--brand-600); }
.kpi__icon svg { width: 23px; height: 23px; }
.kpi__icon.amber { background: color-mix(in srgb, var(--accent-500) 16%, white); color: var(--accent-600); }
.kpi__icon.teal { background: color-mix(in srgb, var(--teal-400) 16%, white); color: #0e7d92; }
.kpi__label { font-size: var(--fs-sm); color: var(--color-text-soft); }
.kpi__value { font-family: var(--font-display); font-size: 1.7rem; font-weight: var(--weight-extra); letter-spacing: -.02em; line-height: 1.1; color: var(--color-heading); }
.kpi__value .cur { font-size: .9rem; color: var(--color-text-muted); font-weight: var(--weight-semibold); }

/* ----- Quick actions --------------------------------------------------- */
.quick-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ----- Panels / chart -------------------------------------------------- */
.dash-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--s-5); align-items: start; }
@media (max-width: 980px) { .dash-grid { grid-template-columns: 1fr; } }
.panel { background: var(--surface); border: 1px solid var(--color-border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); }
.panel__head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-5) var(--s-5) 0; }
.panel__head h3 { font-size: 1.05rem; }
.panel__body { padding: var(--s-5); }
.bars { display: flex; align-items: flex-end; gap: var(--s-3); height: 200px; padding-top: var(--s-4); }
.bars .bar { flex: 1; background: var(--brand-100); border-radius: 8px 8px 0 0; position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.bars .bar i { display: block; background: var(--grad-brand); border-radius: 8px 8px 0 0; transition: height var(--dur-5) var(--ease-out); }
.bars .bar span { position: absolute; inset-block-end: -22px; inset-inline: 0; text-align: center; font-size: var(--fs-xs); color: var(--color-text-muted); }
.bars-wrap { padding-bottom: var(--s-6); }

.feed { display: flex; flex-direction: column; }
.feed__item { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) 0; border-block-end: 1px solid var(--color-border); }
.feed__item:last-child { border-block-end: none; }
.feed__dot { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-600); }
.feed__dot svg { width: 17px; height: 17px; }
.feed__txt { font-size: var(--fs-sm); color: var(--color-text); }
.feed__txt time { display: block; font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 1px; }

/* ----- Responsive: off-canvas sidebar --------------------------------- */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .dash-sidebar {
    position: fixed; inset-block: 0; inset-inline-start: 0; width: 270px; z-index: var(--z-modal);
    transform: translateX(-100%); transition: transform var(--dur-3) var(--ease-out);
  }
  [dir="rtl"] .dash-sidebar { inset-inline-start: auto; inset-inline-end: 0; transform: translateX(100%); }
  .dash-sidebar.is-open { transform: none; }
  .dash-burger { display: grid; }
  .dash-backdrop { position: fixed; inset: 0; background: rgba(10,26,23,.5); z-index: var(--z-overlay); opacity: 0; visibility: hidden; transition: opacity var(--dur-2); }
  .dash-backdrop.is-open { opacity: 1; visibility: visible; }
}