/* ==========================================================================
   Domain123 — Panel UI preview
   Design system: modern · minimal · RTL
   This file is part of a STATIC PREVIEW. It is not the application stylesheet.
   ========================================================================== */

/* ---------- Fonts ---------------------------------------------------------
   IRANSansX is embedded as base64 in assets/fonts.css (four weights) so the
   preview renders identically from file:// and over HTTP, with no external
   request. The system stack remains as a fallback.                            */
@import url('fonts.css');

/* ---------- Tokens --------------------------------------------------------- */
:root{
  --bg:#f5f7fa;
  --surface:#ffffff;
  --surface-2:#fafbfd;
  --surface-3:#f2f5f9;
  --line:#e9edf3;
  --line-soft:#f1f4f8;
  --line-strong:#dce3ec;

  --ink:#0f172a;
  --ink-2:#334155;
  /* contrast ratios measured against #ffffff / #f5f7fa; target WCAG AA (4.5:1) */
  --muted:#5b6879;            /* 5.67 / 5.29 */
  --muted-2:#697586;          /* 4.68 / 4.36 — small text on white surfaces */

  --brand:#1e88e5;            /* decorative fills, icons, tints (not small text) */
  --brand-600:#1976d2;        /* 4.60 with white text */
  --brand-700:#1361ab;        /* 6.31 — links and small coloured text */
  --brand-tint:rgba(30,136,229,.08);
  --brand-tint-2:rgba(30,136,229,.14);
  --grad:linear-gradient(135deg,#2b93ec 0%,#1e88e5 45%,#1361ab 100%);
  /* balance / hero panel — deep enough for white text on every stop */
  --grad-deep:linear-gradient(135deg,#1976d2 0%,#1868b7 45%,#14549e 100%);

  /* Public-site accent. #ff4b3e is 3.32 with white, so it stays decorative:
     interactive surfaces use the darker tonal steps below. */
  --accent:#ff4b3e;
  --accent-strong:#d93a2b;    /* 4.57 with white text */
  --accent-deep:#c2352a;      /* 5.47 with white text */
  --accent-tint:rgba(255,75,62,.10);
  --cta-bg:#d93a2b;  --cta-ink:#ffffff;  --cta-bg-hover:#c2352a;

  /* primary button: 4.60 with white in BOTH themes (colour-independent pair) */
  --btn-bg:#1976d2; --btn-bg-hover:#1361ab; --btn-ink:#ffffff;
  --focus:#1361ab;            /* 5.88 on --bg / 6.31 on white */

  --ok:#0f7a55;         --ok-tint:rgba(18,153,106,.10);
  --warn:#a35f00;       --warn-tint:rgba(199,119,0,.10);
  --danger:#c62828;     --danger-tint:rgba(220,47,54,.09);
  --info:#0e7490;       --info-tint:rgba(14,116,144,.09);
  --violet:#6d43c8;     --violet-tint:rgba(109,67,200,.09);
  --slate-tint:rgba(100,116,139,.10);

  --r-xs:8px; --r-sm:12px; --r:14px; --r-lg:18px; --r-xl:22px; --r-pill:999px;
  --sh-xs:0 1px 2px rgba(15,23,42,.05);
  --sh-sm:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
  --sh-md:0 10px 24px -14px rgba(15,23,42,.22);
  --sh-lg:0 28px 60px -30px rgba(15,23,42,.34);
  --ring:0 0 0 3px rgba(30,136,229,.16);
  --ease:cubic-bezier(.22,.61,.36,1);
  --t:.18s var(--ease);
  --sidebar-w:264px;
  --topbar-h:64px;
  --font:'IRANSansX','Vazirmatn','Segoe UI',Tahoma,system-ui,sans-serif;
}
html[data-theme="dark"]{
  --bg:#080d18; --surface:#0f1626; --surface-2:#131c2f; --surface-3:#182135;
  --line:#1f2a41; --line-soft:#1a2438; --line-strong:#2a3854;
  --ink:#e8edf7; --ink-2:#c3cddf;
  --muted:#a8b4c8; --muted-2:#8b99b3;      /* 8.62 / 6.28 on the dark surface */
  --brand-tint:rgba(30,136,229,.16); --brand-tint-2:rgba(30,136,229,.24);
  --brand-600:#1976d2; --brand-700:#8dc2f5; /* 9.60 on the dark surface */
  --accent-strong:#ff9b8c; --accent-deep:#ffb3a6;
  --accent-tint:rgba(255,75,62,.18);
  --cta-bg:#ff9b8c; --cta-ink:#0f172a; --cta-bg-hover:#ffb3a6; /* 8.77 with dark ink */
  --btn-bg:#1976d2; --btn-bg-hover:#1565c0; --btn-ink:#ffffff;
  --focus:#77b6f0;                          /* 9.00 against the dark page */
  /* status text needs lighter tones on a dark surface */
  --ok:#22c08a; --warn:#e0a13a; --danger:#ff6b6b; --info:#38bdf8; --violet:#a78bfa;
  --ok-tint:rgba(18,153,106,.18); --warn-tint:rgba(199,119,0,.18);
  --danger-tint:rgba(220,47,54,.18); --info-tint:rgba(14,116,144,.20);
  --violet-tint:rgba(109,67,200,.20); --slate-tint:rgba(148,163,184,.14);
  --sh-md:0 12px 28px -16px rgba(0,0,0,.6);
  --sh-lg:0 30px 64px -32px rgba(0,0,0,.7);
}

/* ---------- Base ----------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:14.5px;font-weight:400;line-height:1.75;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6,p,figure{margin:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
svg{display:block}
::selection{background:var(--brand-tint-2)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-xs)}
.skip-link{position:absolute;inset-inline-start:-9999px;top:8px;z-index:99;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 14px;font-size:13px;font-weight:600}
.skip-link:focus{inset-inline-start:12px;outline:2px solid var(--focus);outline-offset:2px}
.num{direction:ltr;unicode-bidi:embed;font-variant-numeric:tabular-nums;letter-spacing:0}
.muted{color:var(--muted)}
.dim{color:var(--muted-2)}
.strong{font-weight:600}
.ink2{color:var(--ink-2)}
.nowrap{white-space:nowrap}
.center{text-align:center}
.hidden{display:none!important}
.ic{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.ic--sm{width:16px;height:16px}
.ic--lg{width:24px;height:24px}
.row{display:flex;align-items:center;gap:10px}
.row--between{justify-content:space-between}
.row--wrap{flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:6px}
.grow{flex:1 1 auto;min-width:0}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:14px}.mt-3{margin-top:20px}.mt-4{margin-top:28px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:14px}.mb-3{margin-bottom:20px}

/* ---------- App layout ----------------------------------------------------- */
.app{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-height:100vh;transition:grid-template-columns var(--t)}
.app.is-collapsed{grid-template-columns:80px minmax(0,1fr)}
.main{min-width:0;display:flex;flex-direction:column}
.content{padding:26px 30px 56px;max-width:1400px;width:100%;margin-inline:auto;animation:fade .35s var(--ease) both}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Sidebar ------------------------------------------------------- */
.sidebar{
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  background:var(--surface);border-inline-end:1px solid var(--line);z-index:30;
}
.brand{display:flex;align-items:center;gap:11px;padding:18px 18px 16px;min-height:var(--topbar-h)}
.brand__mark{
  width:38px;height:38px;border-radius:12px;background:var(--grad);color:#fff;
  display:grid;place-items:center;box-shadow:0 8px 18px -10px rgba(19,97,171,.9);flex:0 0 auto;
}
.brand__name{font-weight:700;font-size:15px;letter-spacing:-.01em}
.brand__sub{font-size:11.5px;color:var(--muted);line-height:1.4}
.app.is-collapsed .brand__name,.app.is-collapsed .brand__sub,
.app.is-collapsed .nav__label,.app.is-collapsed .nav__link span,
.app.is-collapsed .nav__badge,.app.is-collapsed .sidebar-foot{display:none}
.app.is-collapsed .brand{justify-content:center;padding-inline:0}
.app.is-collapsed .nav__link{justify-content:center;padding-inline:0}

/* brand card: the real Domain123 logo lives in the panel's top-right corner */
.brand{
  display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-height:auto;
  margin:12px 12px 4px;padding:13px 14px;border-radius:var(--r);
  background:var(--grad-deep);box-shadow:0 14px 28px -20px rgba(19,97,171,.95);
}
.brand__logo{display:block;width:147px;height:30px}
.brand__sub{font-size:11.5px;color:rgba(255,255,255,.9);line-height:1.4}
/* the globe icon is only the compact mark of the collapsed rail */
.brand__mark--rail{display:none;background:rgba(255,255,255,.16);box-shadow:none;color:#fff}
.app.is-collapsed .brand{margin:10px 8px 4px;padding:10px;align-items:center}
.app.is-collapsed .brand__logo{display:none}
.app.is-collapsed .brand__mark--rail{display:grid}

.nav{flex:1 1 auto;overflow-y:auto;padding:6px 12px 18px;scrollbar-width:thin}
.nav::-webkit-scrollbar{width:6px}
.nav::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}
.nav__label{font-size:11px;font-weight:600;color:var(--muted-2);padding:16px 10px 7px}
.nav__link{
  position:relative;display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r-sm);
  color:var(--ink-2);font-size:13.5px;font-weight:500;transition:background var(--t),color var(--t);cursor:pointer;
}
.nav__link+.nav__link{margin-top:2px}
.nav__link:hover{background:var(--surface-3);color:var(--ink)}
.nav__link.is-active{background:var(--brand-tint);color:var(--brand-700);font-weight:600}
.nav__link.is-active::before{
  content:"";position:absolute;inset-inline-start:-12px;top:50%;translate:0 -50%;
  width:3px;height:20px;border-radius:0 4px 4px 0;background:var(--brand);
}
.nav__badge{
  margin-inline-start:auto;font-size:11px;font-weight:600;color:var(--muted);
  background:var(--surface-3);padding:1px 8px;border-radius:var(--r-pill);
}
.nav__link.is-active .nav__badge{background:var(--brand-tint-2);color:var(--brand-700)}
/* A deferred capability is a plain span (never a link or a button), so it is not focusable and has no
   activation handler at all. The rules below make that visible AND make a stray pointer event a no-op. */
.nav__link.is-deferred{opacity:.6;cursor:not-allowed;pointer-events:none}
.nav__link.is-deferred:hover{background:transparent;color:var(--ink-2)}
.seg__off{opacity:.55;cursor:not-allowed;pointer-events:none;padding:6px 12px;border-radius:var(--r-pill);font-size:12.5px;color:var(--muted)}
.shell-logout{display:contents}
.sidebar-foot{padding:14px;border-top:1px solid var(--line-soft)}
.sidebar-foot .kpi-mini{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--muted)}
.sidebar-foot b{font-size:14px;color:var(--ink)}

/* ---------- Sign-in bridge page (approved reference `login.html`) ----------
   The page that tells the customer, before anything else, that the account is authenticated by ePanel:
   the Domain123 logo and the ePanel logo with the transfer arrow between them. Reproduced from the
   reviewed reference; only the real actions differ (they start the existing Service/OIDC entry or the
   ePanel client area — never a local credential form). */
.auth-page{
  display:grid;place-items:center;min-height:100vh;padding:24px;background:
    radial-gradient(1100px 520px at 88% -10%,rgba(30,136,229,.16),transparent 60%),
    radial-gradient(760px 420px at 6% 108%,rgba(19,97,171,.14),transparent 62%),var(--bg);
}
.auth{width:min(960px,100%);display:grid;grid-template-columns:1.05fr .95fr;background:var(--surface);
  border:1px solid var(--line);border-radius:26px;box-shadow:var(--sh-lg);overflow:hidden}
.auth__side{background:var(--grad);color:#fff;padding:38px 34px;display:flex;flex-direction:column;gap:18px}
.auth__side h2{font-size:22px;font-weight:700;letter-spacing:-.02em}
.auth__side p{font-size:13.5px;color:rgba(255,255,255,.86);line-height:1.9}
.auth__feat{display:flex;flex-direction:column;gap:11px;margin-top:6px}
.auth__feat div{display:flex;align-items:center;gap:10px;font-size:13px;color:rgba(255,255,255,.95)}
.auth__feat .ic{color:#fff;opacity:.95}
.auth__body{padding:38px 34px}
.auth__logo{width:170px;height:35px;display:block}
.auth__foot{margin-top:auto;font-size:12px;color:rgba(255,255,255,.75)}
.bridge{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px;padding:13px 14px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r)}
.bridge__side{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:10px 12px;border-radius:var(--r-sm)}
.bridge__side--d123{background:var(--grad-deep)}
.bridge__side--epanel{background:#fff;border:1px solid var(--line)}
.bridge__side--epanel .bridge__cap{color:#5b6879}
.bridge__logo{display:block;width:147px;height:30px}
.bridge__logo--epanel{width:auto;height:34px}
.bridge__cap{font-size:11px;color:var(--muted)}
.bridge__side--d123 .bridge__cap{color:rgba(255,255,255,.9)}
.bridge__arrow{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r-pill);
  background:var(--brand-tint);border:1px solid var(--brand-tint-2);color:var(--brand-700)}
@media (max-width:840px){.auth{grid-template-columns:1fr}.auth__side{padding:26px 24px}.auth__body{padding:26px 22px}}

/* ---------- ePanel account services (shared partial) ----------------------- *//* The partial is rendered both by the legacy placeholder page (which styles it inline) and inside the
   approved shell, so the shell supplies the styling here. Markup and validation live in one place. */
.service-links{margin-top:20px}
.service-links h2{font-size:14.5px;font-weight:700;letter-spacing:-.01em;margin-bottom:10px}
.service-links ul{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.service-links a{
  display:inline-flex;align-items:center;height:38px;padding-inline:14px;border:1px solid var(--line);
  border-radius:var(--r-pill);font-size:13px;color:var(--ink-2);background:var(--surface);transition:all var(--t)
}
.service-links a:hover{background:var(--surface-3);border-color:var(--line-strong);color:var(--brand-700)}
.service-links .hint{margin-top:10px}

/* ---------- Topbar -------------------------------------------------------- */
.topbar{
  position:sticky;top:0;z-index:20;height:var(--topbar-h);display:flex;align-items:center;gap:14px;
  padding-inline:22px;background:var(--surface);border-bottom:1px solid var(--line);
  flex-wrap:nowrap;overflow:hidden;
}
.icon-btn{
  width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);background:var(--surface);
  border-radius:var(--r-sm);color:var(--ink-2);cursor:pointer;transition:all var(--t);position:relative;
}
.icon-btn:hover{background:var(--surface-3);border-color:var(--line-strong);color:var(--ink)}
.icon-btn__dot{position:absolute;top:8px;inset-inline-end:8px;width:7px;height:7px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 2px var(--surface)}
.search{
  position:relative;flex:1 1 260px;min-width:0;max-width:420px;
}
.search .ic{position:absolute;inset-inline-start:12px;top:50%;translate:0 -50%;color:var(--muted-2)}
.search input{
  width:100%;height:40px;border:1px solid var(--line);background:var(--surface-2);border-radius:var(--r-sm);
  padding-inline:38px 62px;transition:all var(--t);
}
.search input::placeholder{color:var(--muted-2)}
.search input:focus{background:var(--surface);border-color:var(--brand);box-shadow:var(--ring)}
.search kbd{
  position:absolute;inset-inline-end:10px;top:50%;translate:0 -50%;font-size:11px;color:var(--muted-2);
  border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:1px 6px;font-family:var(--font);
}
.seg{display:flex;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:3px;gap:2px}
.seg a{padding:5px 12px;border-radius:9px;font-size:12.5px;font-weight:500;color:var(--muted);transition:all var(--t)}
.seg a:hover{color:var(--ink)}
.seg a.is-active{background:var(--surface);color:var(--brand-700);font-weight:600;box-shadow:var(--sh-xs)}
.user-chip{display:flex;align-items:center;gap:9px;padding:5px 6px 5px 10px;border:1px solid var(--line);border-radius:var(--r-pill);transition:all var(--t);flex:0 0 auto}
.user-chip:hover{background:var(--surface-3)}
.user-chip>span:last-child{display:flex;flex-direction:column;min-width:0}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;flex:0 0 auto}
.user-chip__name{font-size:13px;font-weight:600;line-height:1.35;white-space:nowrap}
.user-chip__role{font-size:11px;color:var(--muted);line-height:1.2;white-space:nowrap}

/* ---------- Preview bar --------------------------------------------------- */
.preview-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:linear-gradient(90deg,rgba(30,136,229,.07),rgba(30,136,229,.03));
  border:1px solid var(--brand-tint-2);color:var(--brand-700);
  border-radius:var(--r);padding:9px 14px;font-size:12.5px;font-weight:500;margin-bottom:20px;
}
.preview-bar .ic{color:var(--brand)}
.preview-bar code{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:1px 7px;font-size:11.5px;direction:ltr;color:var(--ink-2)}

/* ---------- Page head ----------------------------------------------------- */
.page-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.page-title{font-size:21px;font-weight:700;letter-spacing:-.015em}
.page-sub{font-size:13px;color:var(--muted);margin-top:3px}
.page-actions{margin-inline-start:auto;display:flex;gap:8px;flex-wrap:wrap}
.crumbs{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted-2);margin-bottom:9px}
.crumbs a:hover{color:var(--brand)}
.crumbs .sep{opacity:.6}

/* ---------- Cards --------------------------------------------------------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-xs)}
.card--flat{box-shadow:none}
.card__head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line-soft)}
.card__title{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.card__sub{font-size:12px;color:var(--muted);font-weight:400;margin-top:2px}
.card__body{padding:20px}
.card__body--tight{padding:14px 20px}
.card__foot{padding:14px 20px;border-top:1px solid var(--line-soft);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.grid{display:grid;gap:16px}
.grid>*{min-width:0}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.grid--sidebar{grid-template-columns:minmax(0,1.6fr) minmax(280px,.9fr)}
@media (max-width:1200px){.grid--4,.grid--5{grid-template-columns:repeat(2,minmax(0,1fr))}.grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1024px){.grid--sidebar{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){.grid--2,.grid--3,.grid--4,.grid--5{grid-template-columns:minmax(0,1fr)}}

/* ---------- KPI ----------------------------------------------------------- */
.kpi{display:flex;align-items:flex-start;gap:14px;padding:18px}
.kpi__ic{width:42px;height:42px;border-radius:var(--r-sm);display:grid;place-items:center;flex:0 0 auto;background:var(--brand-tint);color:var(--brand-700)}
.kpi__ic--ok{background:var(--ok-tint);color:var(--ok)}
.kpi__ic--warn{background:var(--warn-tint);color:var(--warn)}
.kpi__ic--violet{background:var(--violet-tint);color:var(--violet)}
.kpi__label{font-size:12.5px;color:var(--muted)}
.kpi__value{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.35}
.kpi__unit{font-size:12px;color:var(--muted);font-weight:400;margin-inline-start:4px}
.kpi__foot{font-size:11.5px;color:var(--muted-2);margin-top:4px}
a.kpi-link{display:block;border-radius:var(--r-lg);transition:all var(--t)}
a.kpi-link:hover{transform:translateY(-2px)}
a.kpi-link:hover .card{box-shadow:var(--sh-md);border-color:var(--line-strong)}

/* ---------- Buttons ------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding-inline:16px;
  border:1px solid transparent;border-radius:var(--r-sm);font-size:13.5px;font-weight:600;cursor:pointer;
  transition:all var(--t);white-space:nowrap;background:var(--surface);color:var(--ink-2);
}
.btn:active{transform:translateY(1px)}
.btn--sm{height:32px;padding-inline:11px;font-size:12.5px;gap:5px}
.btn--lg{height:46px;padding-inline:22px;font-size:14.5px}
.btn--primary{background:var(--btn-bg);color:var(--btn-ink);box-shadow:0 8px 18px -12px rgba(19,97,171,.9)}
.btn--primary:hover{background:var(--btn-bg-hover)}
.btn--cta{background:var(--cta-bg);color:var(--cta-ink);box-shadow:0 8px 18px -12px rgba(194,53,42,.55)}
.btn--cta:hover{background:var(--cta-bg-hover)}
.btn--accent-ghost{border-color:var(--accent);color:var(--accent-deep)}
.btn--accent-ghost:hover{background:var(--accent-tint)}
.btn--soft{background:var(--brand-tint);color:var(--brand-700)}
.btn--soft:hover{background:var(--brand-tint-2)}
.btn--ghost{border-color:var(--line);color:var(--ink-2)}
.btn--ghost:hover{background:var(--surface-3);border-color:var(--line-strong)}
.btn--danger{background:var(--danger-tint);color:var(--danger)}
.btn--danger:hover{background:rgba(220,47,54,.16)}
.btn--warn{background:var(--warn-tint);color:var(--warn)}
.btn--warn:hover{background:rgba(199,119,0,.16)}
.btn--ok{background:var(--ok-tint);color:var(--ok)}
.btn--ok:hover{background:rgba(18,153,106,.16)}
.btn[disabled],.btn.is-disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- Badges / chips ------------------------------------------------ */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:var(--r-pill);background:var(--slate-tint);color:var(--ink-2);white-space:nowrap}
.badge--ok{background:var(--ok-tint);color:var(--ok)}
.badge--warn{background:var(--warn-tint);color:var(--warn)}
.badge--danger{background:var(--danger-tint);color:var(--danger)}
.badge--info{background:var(--info-tint);color:var(--info)}
.badge--brand{background:var(--brand-tint);color:var(--brand-700)}
.badge--violet{background:var(--violet-tint);color:var(--violet)}
.badge i{width:6px;height:6px;border-radius:50%;background:currentColor;display:block}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 12px}
.chip b{font-weight:700}

/* ---------- Tables -------------------------------------------------------- */
.table-wrap{overflow-x:auto;border-radius:0 0 var(--r-lg) var(--r-lg)}
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
.table th{
  text-align:start;font-size:12px;font-weight:600;color:var(--muted);background:var(--surface-2);
  padding:12px 16px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.table td{padding:14px 16px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.table tbody tr{transition:background var(--t)}
.table tbody tr:hover{background:var(--surface-2)}
.table tbody tr:last-child td{border-bottom:0}
.table__actions{display:flex;gap:6px;flex-wrap:wrap}
.table--compact td{padding:11px 16px}
.t-main{font-weight:600}
.t-sub{font-size:11.5px;color:var(--muted-2)}
.link{color:var(--brand-700);font-weight:600}
.link:hover{text-decoration:underline}
.mono{direction:ltr;unicode-bidi:embed;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px}

/* ---------- Filters / toolbar -------------------------------------------- */
.toolbar{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.toolbar .field{min-width:190px}

/* ---------- Forms -------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:6px}
.label{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.hint{font-size:11.5px;color:var(--muted-2)}
.input,.select,.textarea{
  width:100%;height:42px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);
  padding-inline:13px;transition:all var(--t);color:var(--ink);
}
.textarea{height:auto;min-height:104px;padding:11px 13px;line-height:1.7;resize:vertical}
.select{appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(0% + 16px) calc(50% + 1px),calc(0% + 21px) calc(50% + 1px);background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.input:focus,.select:focus,.textarea:focus{border-color:var(--brand);box-shadow:var(--ring);background:var(--surface)}
.input::placeholder,.textarea::placeholder{color:var(--muted-2)}
.input[readonly],.input[disabled],.select[disabled]{background:var(--surface-3);color:var(--muted);cursor:not-allowed}
.input--ltr{direction:ltr;text-align:left}
.form-grid{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
.form-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.field--full{grid-column:1/-1}
@media (max-width:820px){.form-grid,.form-grid--3{grid-template-columns:minmax(0,1fr)}}
.check{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--ink-2);cursor:pointer}
.check input{width:17px;height:17px;margin-top:3px;accent-color:var(--brand);flex:0 0 auto}
.switch{display:inline-flex;align-items:center;gap:9px;font-size:13px;cursor:pointer}
.switch input{appearance:none;width:38px;height:22px;border-radius:99px;background:var(--line-strong);position:relative;transition:background var(--t);cursor:pointer;flex:0 0 auto}
.switch input::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:all var(--t);box-shadow:var(--sh-xs)}
.switch input:checked{background:var(--brand)}
.switch input:checked::after{inset-inline-start:19px}
.role-picker{display:flex;gap:10px;flex-wrap:wrap}
.role-picker label{
  flex:1 1 200px;display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:12px;cursor:pointer;transition:all var(--t);
}
.role-picker label:hover{border-color:var(--line-strong);background:var(--surface-2)}
.role-picker input{margin-top:4px;accent-color:var(--brand)}
.role-picker input:checked+span{color:var(--brand-700)}
.role-picker span{font-size:13px;font-weight:600}
.role-picker em{display:block;font-style:normal;font-size:11.5px;color:var(--muted);font-weight:400}

/* ---------- Alerts / notes ------------------------------------------------ */
.alert{display:flex;gap:11px;align-items:flex-start;border-radius:var(--r);padding:13px 15px;font-size:13px;border:1px solid transparent}
.alert .ic{margin-top:2px}
.alert b{font-weight:700}
.alert--info{background:var(--brand-tint);border-color:var(--brand-tint-2);color:var(--brand-700)}
.alert--warn{background:var(--warn-tint);border-color:rgba(199,119,0,.2);color:var(--warn)}
.alert--danger{background:var(--danger-tint);border-color:rgba(220,47,54,.2);color:var(--danger)}
.alert--ok{background:var(--ok-tint);border-color:rgba(18,153,106,.2);color:var(--ok)}
.alert--muted{background:var(--surface-2);border-color:var(--line);color:var(--ink-2)}
.alert ul{margin:6px 0 0;padding-inline-start:18px}
.alert li{margin-top:2px}

/* ---------- Tabs ---------------------------------------------------------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);padding-inline:20px;overflow-x:auto}
.tab{
  padding:12px 14px;font-size:13.5px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;
  margin-bottom:-1px;cursor:pointer;transition:all var(--t);white-space:nowrap;background:none;border-inline:0;border-top:0;
}
.tab:hover{color:var(--ink)}
.tab.is-active{color:var(--brand-700);border-bottom-color:var(--brand)}
.tab-panel{display:none;padding:20px}
.tab-panel.is-active{display:block;animation:fade .25s var(--ease) both}

/* ---------- Stat list / description list --------------------------------- */
.dl{display:grid;gap:0}
.dl__row{display:flex;gap:16px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.dl__row:last-child{border-bottom:0}
.dl__k{width:190px;flex:0 0 auto;color:var(--muted);font-size:12.5px}
.dl__v{font-weight:600;font-size:13.5px;min-width:0}
@media (max-width:600px){.dl__row{flex-direction:column;gap:3px}.dl__k{width:auto}}

/* ---------- Chart --------------------------------------------------------- */
.chart{display:flex;align-items:flex-end;gap:9px;height:180px;padding-top:10px;overflow-x:auto;overflow-y:hidden}
.chart__col{flex:1 1 0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:7px;height:100%}
.chart__bars{display:flex;gap:4px;align-items:flex-end;height:100%;width:100%;justify-content:center}
.chart__bar{width:11px;border-radius:5px 5px 3px 3px;background:var(--brand-tint-2);transition:height .4s var(--ease),background var(--t)}
.chart__bar--b{background:var(--brand)}
.chart__bar:hover{filter:brightness(.95)}
.chart__x{font-size:10.5px;color:var(--muted-2)}
@media (max-width:560px){.chart{gap:5px}.chart__bars{gap:3px}.chart__bar{width:7px}}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-inline-end:5px}
.legend .a{background:var(--brand-tint-2)}.legend .b{background:var(--brand)}
.meter{height:8px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.meter span{display:block;height:100%;border-radius:99px;background:var(--grad)}

/* ---------- Empty state -------------------------------------------------- */
.empty{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:38px 20px;border:1px dashed var(--line-strong);border-radius:var(--r);color:var(--muted);background:var(--surface-2)}
.empty .ic{color:var(--muted-2)}
.empty b{color:var(--ink-2);font-weight:600}

/* ---------- Pagination -------------------------------------------------- */
.pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pager a,.pager span{min-width:34px;height:34px;display:grid;place-items:center;padding-inline:8px;border:1px solid var(--line);border-radius:10px;font-size:12.5px;color:var(--ink-2);background:var(--surface)}
.pager .is-active{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}
.pager .is-off{opacity:.45}

/* ---------- Modal / toast ---------------------------------------------- */
.modal{position:fixed;inset:0;z-index:80;display:none;place-items:center;padding:20px;background:rgba(15,23,42,.45);backdrop-filter:blur(3px)}
.modal.is-open{display:grid;animation:fade .2s var(--ease) both}
.modal__box{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-lg);width:min(540px,100%);border:1px solid var(--line)}
.modal__head{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line-soft);font-weight:700}
.modal__body{padding:20px}
.modal__foot{display:flex;gap:8px;justify-content:flex-start;padding:14px 20px;border-top:1px solid var(--line-soft);background:var(--surface-2);border-radius:0 0 var(--r-lg) var(--r-lg)}
.toast{position:fixed;inset-block-end:22px;inset-inline-start:22px;z-index:90;display:flex;flex-direction:column;gap:8px}
.toast__item{
  display:flex;align-items:center;gap:9px;background:var(--ink);color:#fff;border-radius:var(--r-sm);
  padding:11px 15px;font-size:13px;box-shadow:var(--sh-lg);animation:fade .2s var(--ease) both;
}
html[data-theme="dark"] .toast__item{background:var(--surface-3);color:var(--ink)}

/* ---------- Print helper ------------------------------------------------ */
@media print{.sidebar,.topbar,.preview-bar,.page-actions{display:none!important}.app{grid-template-columns:1fr}.content{padding:0}}

/* ---------- Responsive shell (RTL: sidebar sits on the right) ---------- */
@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr)}
  .sidebar{
    position:fixed;top:0;bottom:0;right:0;width:min(300px,86vw);height:100%;
    transform:translateX(100%);transition:transform .22s var(--ease);box-shadow:var(--sh-lg);border-radius:0;
  }
  .app.is-mobile-open .sidebar{transform:translateX(0)}
  .app.is-mobile-open::after{content:"";position:fixed;inset:0;background:rgba(15,23,42,.42);z-index:25}
  .content{padding:18px 16px 48px}
  .topbar{padding-inline:14px;gap:10px}
}
@media (max-width:1000px){
  .grid--sidebar{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){
  .search{display:none}
}
@media (max-width:560px){
  .seg a{padding:5px 9px;font-size:11.5px}
  .user-chip__name,.user-chip__role{display:none}
  .page-title{font-size:18px}
  .kpi__value{font-size:21px}
  .card__body{padding:16px}
  .card__head{padding:14px 16px}
  .table th,.table td{padding:11px 12px}
  .grid{gap:12px}
}

/* ---------- Theme control (single two-state button) --------------------- */
/* The theme is chosen with one click on the topbar button: light <-> dark. There is no dropdown, so no
   positioning, z-index or clipping rules are needed; the button reuses .icon-btn. */

/* ---------- Balance / wallet hero (blue panel from the public brand) ----- */
.wallet-hero{
  position:relative;overflow:hidden;border-radius:var(--r-lg);padding:22px 24px;color:#fff;
  background:var(--grad-deep);box-shadow:0 18px 40px -26px rgba(19,97,171,.85);
}
.wallet-hero::after{
  content:"";position:absolute;top:-70px;inset-inline-end:-50px;width:220px;height:220px;
  border-radius:50%;background:rgba(255,255,255,.10);pointer-events:none;
}
.wallet-hero__label{font-size:12.5px;color:rgba(255,255,255,.9)}
.wallet-hero__value{font-size:31px;font-weight:700;letter-spacing:-.02em;line-height:1.32}
.wallet-hero__unit{font-size:13px;font-weight:400;color:rgba(255,255,255,.88);margin-inline-start:5px}
.wallet-hero__meta{font-size:12px;color:rgba(255,255,255,.88);margin-top:5px}
.wallet-hero__actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px;position:relative;z-index:1}
.wallet-hero .btn--light{background:#fff;color:var(--brand-700)}
.wallet-hero .btn--light:hover{background:rgba(255,255,255,.9)}
.wallet-hero .btn--hero-ghost{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.wallet-hero .btn--hero-ghost:hover{background:rgba(255,255,255,.16)}
.wallet-hero__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px;position:relative;z-index:1}
.wallet-hero__stat{background:rgba(255,255,255,.13);border-radius:var(--r-sm);padding:11px 13px}
a.wallet-hero__stat{color:#fff;text-decoration:none;transition:background var(--t)}
a.wallet-hero__stat:hover{background:rgba(255,255,255,.22)}
.wallet-hero__stat b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.01em}
.wallet-hero__stat span{font-size:11.5px;color:rgba(255,255,255,.88)}
@media (max-width:760px){.wallet-hero__grid{grid-template-columns:minmax(0,1fr)}.wallet-hero__value{font-size:26px}}

/* ---------- Sample-data marker (keeps policy out of the sample numbers) -- */
.sample-note{
  display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  color:var(--violet);background:var(--violet-tint);border-radius:var(--r-pill);padding:3px 10px;
}
/* sentence-length note: same colour language, but allowed to wrap */
.sample-note--block{
  display:flex;align-items:flex-start;font-weight:500;line-height:2;border-radius:var(--r-sm);
  padding:8px 12px;max-width:100%;
}

/* ---------- utility ------------------------------------------------------- */
/* [hidden] must beat component display rules (.alert{display:flex}, .row, …) */
[hidden]{display:none!important}

/* ---------- Modal accessibility ------------------------------------------ */
body.modal-open{overflow:hidden}
.modal__box{outline:none}
.modal__foot .btn{flex:0 0 auto}
.input:focus-visible,.select:focus-visible,.textarea:focus-visible{outline:none}