/* Shared tokens and primitives. Color values belong here, never in component styles. */
@font-face { font-family: 'Plex Arabic'; src: url(../assets/fonts/IBMPlexSansArabic-Regular.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Plex Arabic'; src: url(../assets/fonts/IBMPlexSansArabic-Medium.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Plex Arabic'; src: url(../assets/fonts/IBMPlexSansArabic-SemiBold.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Plex Arabic'; src: url(../assets/fonts/IBMPlexSansArabic-Bold.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Plex'; src: url(../assets/fonts/IBMPlexSans-Regular-Latin1.woff2) format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0000-024F; }
@font-face { font-family: 'Plex'; src: url(../assets/fonts/IBMPlexSans-Medium-Latin1.woff2) format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0000-024F; }
@font-face { font-family: 'Plex'; src: url(../assets/fonts/IBMPlexSans-SemiBold-Latin1.woff2) format('woff2'); font-weight: 600; font-display: swap; unicode-range: U+0000-024F; }
@font-face { font-family: 'Plex'; src: url(../assets/fonts/IBMPlexSans-Bold-Latin1.woff2) format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+0000-024F; }
@font-face { font-family: 'Readex'; src: url(../assets/fonts/ReadexPro-wght-subset.woff2) format('woff2'); font-weight: 160 700; font-display: swap; }
:root {
  --font: 'Plex', 'Plex Arabic', system-ui, sans-serif; --font-display: 'Readex', 'Plex Arabic', system-ui, sans-serif;
  --bg: #fbfbfc; --bg-sidebar: #f4f5f8; --surface: #fff; --surface-2: #f7f8fa; --hover: #eef0f4; --active: #e7e9f0;
  --line: #e6e8ee; --control: #7b8091; --line-strong: var(--control);
  --ink: #1c2030; --ink-2: #4b5165; --ink-3: #626779; --ink-4: #b2b6c3;
  --brand: #4f46e5; --brand-2: #6366f1; --brand-soft: #eef0ff; --brand-ink: #3730a3;
  --primary: #4f46e5; --primary-hover: #4338ca; --on-primary: #fff; --focus: #4338ca;
  --pos: #166534; --pos-graphic: #059669; --attn: #8a5606; --attn-graphic: #d97706;
  --danger: #bc2935; --danger-fill: #b91c1c; --danger-hover: #991b1b; --danger-soft: #fff1f2; --danger-line: #e7a5ad;
  --info: #0369a1; --info-graphic: #0284c7; --urgent: #c2410c;
  --due-over: var(--danger); --due-soon: var(--attn); --money-owed: var(--attn); --money-overdue: var(--danger); --money-ok: var(--pos);
  --attention-soft: #fff7e6; --attention-line: #d9b77b; --role-ink: #0f766e; --role-soft: #ccfbf1; --whatsapp: #15803d;
  --status-slate: #64748b; --status-indigo: #6366f1; --status-violet: #8b5cf6; --status-pink: #db2777; --status-red: #dc2626;
  --status-orange: #c2410c; --status-amber: #b45309; --status-sky: #0284c7; --status-teal: #0d9488; --status-emerald: #059669;
  --on-status: #fff; --shade: #efe2c4; --shade-line: #b8a57b;
  --demo-bg: #16181f; --demo-ink: #d6d8e0; --demo-muted: #a8adbf; --demo-line: #777d90; --demo-active: #2d3040; --demo-hover: #22252f; --demo-badge: #f59e0b; --demo-badge-ink: #1b1300;
  --frame-start: #d9dbe4; --frame-end: #b7bac6; --frame-edge: #111318; --frame-line: #3a3d48;
  --print-paper: #fff; --print-ink: #1c2030; --print-muted: #4b5165; --print-surface: #f7f8fa; --print-line: #d5d8e1;
  --scrim: rgb(15 17 25 / .32); --shadow-color: rgb(28 32 48 / .25);
  --shadow-pop: 0 10px 30px -8px var(--shadow-color), 0 0 0 1px var(--line);
  --shadow-panel: 0 0 0 1px var(--line), 0 12px 30px -18px var(--shadow-color);
  --shadow-low: 0 1px 2px var(--shadow-color); --shadow-frame: 0 0 0 10px var(--frame-edge), 0 0 0 11px var(--frame-line), 0 30px 80px -20px var(--shadow-color);
  --radius-xs: 4px; --radius-sm: 6px; --radius: 8px; --radius-frame: 10px; --radius-lg: 12px; --radius-sheet: 16px; --radius-pill: 999px;
  --sp-0-5: 2px; --sp-1: 4px; --sp-1-5: 6px; --sp-2: 8px; --sp-2-5: 10px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px;
  --z-content: 1; --z-overlay: 2; --z-header: 10; --z-bulk: 20; --z-peek: 30; --z-sidebar: 40; --z-dialog: 50; --z-menu: 60; --z-toast: 70;
  --ease: cubic-bezier(.2,.7,.3,1); --dur-1: 120ms; --dur-2: 160ms; --dur-3: 200ms;
  --row-h: 36px; --sidebar-w: 236px; --peek-w: 520px; --demo-h: 34px;
  --fs-2xs: 10.5px; --fs-xs: 11.5px; --fs-sm: 12.5px; --fs: 13.5px; --fs-lg: 15px; --fs-h3: 18px; --fs-h2: 20px; --fs-h1: 24px; --fs-xl: var(--fs-h2); --fs-num-xl: 26px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #121318; --bg-sidebar: #0e0f13; --surface: #17181e; --surface-2: #1c1d24; --hover: #23252e; --active: #2a2c36;
  --line: #30323e; --control: #777c90; --ink: #e7e8ee; --ink-2: #b4b7c4; --ink-3: #9a9fb2; --ink-4: #545866;
  --brand: #a5a8ff; --brand-2: #8b8eff; --brand-soft: #24264a; --brand-ink: #c7c9ff;
  --primary: #5457e6; --primary-hover: #4a4dd6; --focus: #a5a8ff;
  --pos: #4ade80; --pos-graphic: #34d399; --attn: #f0b44c; --attn-graphic: #fbbf24; --danger: #ff8a94; --danger-soft: #3a1620; --danger-line: #a15463;
  --info: #7dd3fc; --info-graphic: #38bdf8; --urgent: #fdba74;
  --attention-soft: #2a2114; --attention-line: #876b38; --role-ink: #5eead4; --role-soft: #12322e; --whatsapp: #4ade80;
  --status-slate: #94a3b8; --status-indigo: #a5a8ff; --status-violet: #c4b5fd; --status-pink: #f472b6; --status-red: #fb7185;
  --status-orange: #fb923c; --status-amber: #fbbf24; --status-sky: #38bdf8; --status-teal: #2dd4bf; --status-emerald: #34d399; --on-status: #17181e;
  --frame-start: #2a2c36; --frame-end: #0b0c10; --scrim: rgb(0 0 0 / .5); --shadow-color: rgb(0 0 0 / .6);
  color-scheme: dark;
}
:lang(ar) { --fs-2xs: 12px; --fs-xs: 12.5px; --fs-sm: 13.5px; --fs: 15px; --fs-lg: 16px; --fs-h3: 19px; --fs-h2: 21px; --fs-h1: 26px; }
* { box-sizing: border-box; }
html, body { margin: 0; block-size: 100%; }
body { font: 400 var(--fs)/1.5 var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
:lang(ar) body { line-height: 1.65; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
/* A single outline also overrides local input resets; the list cursor remains independent. */
:focus-visible, input:focus, textarea:focus, select:focus, [contenteditable="true"]:focus { outline: 2px solid var(--focus) !important; outline-offset: 2px; }
.ltr, bdi[dir="ltr"] { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.btn { display: inline-flex; align-items: center; gap: var(--sp-1-5); block-size: 30px; padding-inline: var(--sp-2-5); border-radius: var(--radius-sm); border: 1px solid var(--control); background: var(--surface); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; }
.btn:hover { background: var(--hover); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn.danger { color: var(--danger); border-color: var(--danger); }
.btn.danger:hover { background: var(--danger-soft); }
.btn.danger.solid { background: var(--danger-fill); color: var(--on-primary); border-color: var(--danger-fill); }
.btn.danger.solid:hover { background: var(--danger-hover); }
button:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
button[aria-busy="true"] { cursor: wait; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--hover); }
.btn.sm { block-size: 26px; padding-inline: var(--sp-2); font-size: var(--fs-xs); }
.icon-btn { display: inline-grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: var(--radius-sm); color: var(--ink-3); }
.icon-btn:hover { background: var(--hover); color: var(--ink); }
.kbd { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); min-inline-size: 18px; block-size: 18px; padding-inline: var(--sp-1); border-radius: var(--radius-xs); border: 1px solid var(--control); background: var(--surface-2); font: 500 var(--fs-2xs)/1 var(--font); color: var(--ink-2); direction: ltr; unicode-bidi: isolate; }
.kbd .ar-k { color: var(--ink-3); }
.chip { display: inline-flex; align-items: center; gap: var(--sp-1-5); min-block-size: 22px; padding-inline: var(--sp-2); border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface); font-size: var(--fs-xs); color: var(--ink-2); white-space: nowrap; }
.chip .dot { inline-size: 7px; block-size: 7px; border-radius: var(--radius-pill); background: currentColor; }
/* Initials scale with their decorative circle, not the Arabic body-text floor. */
.avatar { --avatar-size: 20px; display: inline-grid; place-items: center; inline-size: var(--avatar-size); block-size: var(--avatar-size); border-radius: var(--radius-pill); color: var(--on-primary); font: 600 calc(var(--avatar-size) / 2)/1 var(--font); white-space: nowrap; flex: none; }
.avatar.lg { --avatar-size: 28px; }
.status-icon { inline-size: 14px; block-size: 14px; flex: none; }
.ic[data-mirror]:dir(rtl) { transform: scaleX(-1); }
.input { block-size: 32px; padding-inline: var(--sp-2-5); border: 1px solid var(--control); border-radius: var(--radius-sm); background: var(--surface); inline-size: 100%; }
[aria-invalid="true"] { border-color: var(--danger) !important; }
.field-error { margin-block: var(--sp-1) 0; color: var(--danger); font-size: var(--fs-sm); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.divider { block-size: 1px; background: var(--line); margin-block: var(--sp-2); }
.popover { position: fixed; z-index: var(--z-menu); min-inline-size: 220px; max-inline-size: calc(100vw - 16px); background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: var(--sp-1); }
.menu-item { display: flex; align-items: center; gap: var(--sp-2); inline-size: 100%; block-size: 30px; padding-inline: var(--sp-2); border-radius: var(--radius-sm); text-align: start; font-size: var(--fs-sm); }
.menu-item:hover, .menu-item[aria-selected="true"] { background: var(--hover); }
.toast { position: fixed; inset-block-end: var(--sp-5); inset-inline: 0; margin-inline: auto; inline-size: fit-content; max-inline-size: calc(100% - 32px); z-index: var(--z-toast); background: var(--ink); color: var(--bg); padding: var(--sp-2) var(--sp-4); border-radius: var(--radius); font-size: var(--fs-sm); box-shadow: var(--shadow-pop); }
.toast[hidden] { display: none; }
.empty { display: grid; place-items: center; gap: var(--sp-2); padding: var(--sp-12) var(--sp-4); text-align: center; color: var(--ink-3); }
.privacy-lock { display: flex; align-items: center; gap: var(--sp-2); color: var(--ink-3); font-size: var(--fs-sm); padding: var(--sp-3); border: 1px dashed var(--control); border-radius: var(--radius); }
.privacy-lock.large { flex-direction: column; justify-content: center; padding: var(--sp-6); text-align: center; }
@media (pointer: coarse) {
  :root { --demo-h: 48px; }
  :is(button, .btn, .icon-btn, input:not([type="checkbox"]):not([type="radio"]), select, .tab, .sb-item, .menu-item, .phone-slot, [role="button"]) { min-block-size: 44px !important; min-inline-size: 44px; }
  :is(.row, .flow-list-button, .md-row) { min-block-size: 56px; }
  input, textarea, select { font-size: 16px !important; }
  input[type="checkbox"], input[type="radio"] { min-inline-size: 24px; min-block-size: 24px; margin: 10px; }
  .kbd { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: opacity var(--dur-1) linear !important; scroll-behavior: auto !important; }
}