/* =====================================================================
   Tarsido — design tokens + application shell
   Source: Tarsido brand foundation (TARSIDO_BRAND_FOUNDATION.md).
   Tokens are semantic (brand / accent / surface / text / status), never
   named after a colour, so themes and future rebrands only touch this file.
   Light is the default workspace; dark uses the brand's dark direction.
   Logical properties only — RTL is the default, LTR needs no overrides.
   ===================================================================== */

:root{
  /* Brand */
  --brand:#0f6b5b;          /* Ledger Emerald — primary actions, active states */
  --brand-strong:#103b35;   /* Deep Emerald — hover / pressed */
  --brand-soft:#ddf3ed;     /* Primary Light — selected rows, soft fills */
  --brand-text:#0f6b5b;     /* brand-coloured text & icons on surfaces (6.4:1 on white) */
  --accent:#2bc9a8;         /* Mint — highlights, never body text on light */
  --accent-ink:#103b35;     /* text placed on --accent */
  --accent-text:#0f6b5b;    /* small accent labels on surfaces */
  --warm:#eee9e1;           /* Warm Neutral */

  /* Surfaces & text (light) */
  --bg:#f6f8f7;
  --bg-2:#eef3f1;
  --surface:#ffffff;
  --surface-2:#f9fbfa;
  --heading:#172522;
  --text:#23332f;
  --muted:#4e5e58;          /* 6.6:1 on white */
  --faint:#63746e;          /* 4.9:1 on white */
  --hair:#e3e9e7;
  --hair-2:#edf1ef;
  --glass:rgba(15,107,91,.045);
  --nav-bg:rgba(255,255,255,.9);
  --scrim:rgba(16,59,53,.45);

  /* Sidebar — Deep Emerald in both themes (brand: dark sidebar, light workspace) */
  --side-bg:#103b35;
  --side-text:rgba(255,255,255,.74);
  --side-heading:#ffffff;
  --side-faint:rgba(255,255,255,.5);
  --side-hair:rgba(255,255,255,.09);
  --side-hover:rgba(255,255,255,.06);
  --side-active:rgba(255,255,255,.11);
  --side-icon:#2bc9a8;

  /* Status */
  --success:#16a34a; --success-bg:#e7f6ec; --success-ink:#11783a;
  --warning:#d97706; --warning-bg:#fdf1e0; --warning-ink:#9a5405;
  --danger:#dc2626;  --danger-bg:#fdeaea;  --danger-ink:#b21e1e;
  --info:#2563eb;    --info-bg:#e8effd;    --info-ink:#1d4fc4;

  /* Type & shape */
  --sans:"Inter","IBM Plex Sans Arabic","IBM Plex Sans Arabic Fallback",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --radius:14px; --radius-sm:10px; --radius-xs:8px;
  --shadow-sm:0 1px 2px rgba(23,37,34,.05);
  --shadow:0 1px 2px rgba(23,37,34,.04),0 6px 20px -8px rgba(23,37,34,.12);
  --focus:0 0 0 3px rgba(15,107,91,.28);
  --side-w:256px;
}

:root[data-theme="dark"]{
  --brand:#14806d;
  --brand-strong:#0f6b5b;
  --brand-soft:rgba(56,197,166,.14);
  --brand-text:#38c5a6;
  --accent-text:#38c5a6;
  --warm:#2a2620;

  --bg:#0d1715;
  --bg-2:#0a1311;
  --surface:#14211e;
  --surface-2:#1b2c28;
  --heading:#f2f7f5;
  --text:#dfe8e5;
  --muted:#9baea9;
  --faint:#83958f;
  --hair:rgba(255,255,255,.09);
  --hair-2:rgba(255,255,255,.055);
  --glass:rgba(255,255,255,.04);
  --nav-bg:rgba(13,23,21,.86);
  --scrim:rgba(0,0,0,.55);

  --side-bg:#0a1311;

  --success-bg:rgba(22,163,74,.16);  --success-ink:#4ade80;
  --warning-bg:rgba(217,119,6,.16);  --warning-ink:#fbbf24;
  --danger-bg:rgba(220,38,38,.16);   --danger-ink:#f87171;
  --info-bg:rgba(37,99,235,.18);     --info-ink:#93b4ff;

  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -10px rgba(0,0,0,.5);
  --focus:0 0 0 3px rgba(56,197,166,.4);
}

/* ---------- base ---------- */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
:lang(en) body{line-height:1.6}
img{max-width:100%}
.num{font-family:"Inter",var(--sans);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;direction:ltr;display:inline-block;unicode-bidi:isolate}

/* ---------- application shell ---------- */
.app{display:grid;grid-template-columns:var(--side-w) 1fr;min-height:100vh}
.scrim2{display:none}

.side{background:var(--side-bg);color:var(--side-text);padding:20px 14px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;overflow-y:auto}
/* Children never shrink: the sidebar scrolls instead (overflow:hidden items would collapse). */
.side>*{flex-shrink:0}
.side .grp{font-size:11px;letter-spacing:.08em;color:var(--side-faint);padding:16px 12px 6px;font-weight:600}
.side a,.side .nav-i{color:var(--side-text)}
.nav-i{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--radius-sm);font-size:14px;font-weight:500;transition:background .15s,color .15s;cursor:pointer}
.nav-i:hover{background:var(--side-hover);color:var(--side-heading)}
.nav-i.on{background:var(--side-active);color:var(--side-heading);font-weight:600}
.nav-i .ic{color:var(--side-icon);opacity:.85}
.nav-i.on .ic{opacity:1}
.role-tag{font-size:11.5px;font-weight:600;color:var(--side-icon);border:1px solid var(--side-hair);border-radius:100px;padding:3px 10px;margin:0 10px 10px;align-self:flex-start}

.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;padding:14px 26px;background:var(--nav-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--hair)}
.top .menu{display:none}
.top .grow{flex:1}
.top .tsearch{background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius-sm);padding:8px 14px;color:var(--heading);font-family:inherit;font-size:14px;outline:0;min-width:200px}
.top .tsearch::placeholder{color:var(--faint)}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--brand);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;flex:0 0 auto}
.bell{position:relative}
.bell::after{content:"";position:absolute;top:8px;inset-inline-end:9px;width:7px;height:7px;border-radius:50%;background:var(--accent);border:2px solid var(--surface)}
.content{padding:26px;display:grid;gap:20px}

/* ---------- KPIs ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kpi{background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius);padding:18px 20px}
.kpi .lab{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px}
.kpi .lab .d{width:32px;height:32px;border-radius:9px;background:var(--brand-soft);display:flex;align-items:center;justify-content:center;color:var(--brand-text);font-size:15px}
.kpi .val{font-size:26px;font-weight:700;color:var(--heading);margin-top:10px}
.kpi .val .cur{font-size:13px;color:var(--faint);font-weight:600}
.kpi .delta{font-size:12.5px;font-weight:600;margin-top:4px}
.kpi .delta.up{color:var(--success)}.kpi .delta.down{color:var(--danger)}
@media(max-width:1050px){.kpis{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.kpis{grid-template-columns:1fr}}

.cols{display:grid;grid-template-columns:1.7fr 1fr;gap:20px}
.cols.even{grid-template-columns:1fr 1fr}
@media(max-width:980px){.cols,.cols.even{grid-template-columns:1fr}}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
table.data th,table.data td{text-align:start;padding:12px 14px;border-bottom:1px solid var(--hair-2);white-space:nowrap}
table.data th{font-size:12px;color:var(--faint);font-weight:600;background:var(--surface-2)}
table.data tbody tr:hover{background:var(--glass)}
table.data td.mono{font-family:var(--mono)}

/* ---------- status pills ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:100px;color:var(--muted);background:var(--bg-2)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.paid,.pill.ok,.pill.approved,.pill.active{color:var(--success-ink);background:var(--success-bg)}
.pill.pending,.pill.review{color:var(--warning-ink);background:var(--warning-bg)}
.pill.refund,.pill.rejected,.pill.blocked{color:var(--danger-ink);background:var(--danger-bg)}
.pill.info{color:var(--info-ink);background:var(--info-bg)}
.u-av{display:inline-flex;align-items:center;gap:10px}
.u-av .c{width:30px;height:30px;border-radius:50%;background:var(--brand);flex:0 0 auto}

/* ---------- row actions / toolbar ---------- */
.act-row{display:flex;gap:8px}
.iact{border:1px solid var(--hair);background:transparent;color:var(--muted);border-radius:var(--radius-xs);width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s}
.iact:hover{border-color:var(--brand);color:var(--brand-text)}
.iact.ok:hover{border-color:var(--success);color:var(--success)}
.iact.no:hover{border-color:var(--danger);color:var(--danger)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.toolbar .tsearch{min-width:180px}

/* ---------- mobile drawer ---------- */
@media(max-width:820px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;inset-inline-start:0;top:0;z-index:60;width:var(--side-w);transform:translateX(110%);transition:transform .3s var(--ease);box-shadow:0 0 60px rgba(0,0,0,.35)}
  :root[dir="ltr"] .side{transform:translateX(-110%)}
  .side.open{transform:translateX(0)!important}
  .top .menu{display:inline-flex}
  .scrim2{position:fixed;inset:0;background:var(--scrim);z-index:55;display:none}
  .scrim2.on{display:block}
}