/* ═══════════════════════════════════════════════════════════════════════════
   NOOR · Command Couture — shared design system
   The single source of visual truth for every Noor OS screen.

   Hard rules — enforced by design review, never broken:
     · 7 sizes (11/13/14/16/20/28/40), 3 weights (400/500/600)
     · 1 accent colour (Noor blue). Semantics red/amber/green only for data.
     · 0 box-shadow. Section dividers via 1px border.
     · border-radius max 6px. No gradients. No decoration.
     · Spacing on the 4-step scale: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64
     · Motion 120/200/280ms, linear easing.
     · Skeletons (never spinners). tabular-nums on every number.
     · One live update = one 400ms accent flash, no layout shift.

   References: Linear · Stripe · Vercel · Attio. Anti-refs: Salesforce,
   Zoho, SAP Fiori, any Bootstrap-cards-in-grid.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Surface */
  --bg:            #FAFAFA;
  --surface:       #FFFFFF;
  --surface-2:     #F4F4F5;
  --border:        #E4E4E7;
  --border-strong: #D4D4D8;

  /* Text */
  --text-1: #09090B;
  --text-2: #52525B;
  --text-3: #A1A1AA;
  --text-4: #D4D4D8;

  /* Accent */
  --accent:       #2563EB;
  --accent-2:     #1D4ED8;
  --accent-faint: #EFF4FF;

  /* Semantics — only used when data state demands it */
  --danger:  #DC2626;
  --warn:    #D97706;
  --success: #059669;
  --info:    #0891B2;
  --danger-faint:  #FEF2F2;
  --warn-faint:    #FFFBEB;
  --success-faint: #ECFDF5;

  /* Spacing scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* Radius */
  --r-sm: 4px;
  --r-md: 6px;

  /* Motion */
  --dur-fast: 120ms;
  --dur-med:  200ms;
  --dur-slow: 280ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Fonts */
  --font-body: 'Inter','IBM Plex Sans Arabic',system-ui,-apple-system,sans-serif;
  --font-num:  'Inter','IBM Plex Sans Arabic',ui-monospace,sans-serif;

  /* Heights */
  --h-pulse: 56px;
  --h-row:   40px;

  /* Typography scale — single source of truth */
  --fs-xs: 11px;   /* meta, chip labels, timestamps */
  --fs-sm: 13px;   /* body, table cells, buttons */
  --fs-md: 14px;   /* default */
  --fs-h3: 16px;   /* panel titles, modal headers */
  --fs-h2: 20px;   /* page section titles */
  --fs-h1: 28px;   /* page title, one per screen */
  --lh-body: 1.45;
  --lh-head: 1.25;
}

/* ─── Global motion polish (Linear/Stripe-grade micro-interactions) ────
   These rules make EVERY screen feel instant without adding script.
   - List rows fade-in 160ms from 0 opacity on first paint.
   - Buttons scale imperceptibly on active press for tactile feedback.
   - Focus rings are 2px accent (not browser default) for accessibility.
   - Skeleton shimmer runs continuously until replaced.
   These costs are zero on GPU; the feel gain is large. */
@keyframes cc-fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes cc-slide-in  { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cc-shimmer   { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } }

.cc-row, .cc-feed-item, .cc-rail, .cc-table tbody tr {
  animation: cc-slide-in 160ms var(--ease) both;
}
.cc-btn:active, .cc-ibtn:active, .cc-sel:active { transform: scale(0.98); }

*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
button:focus:not(:focus-visible), a:focus:not(:focus-visible), input:focus:not(:focus-visible) {
  outline: none;
}

/* Upgraded skeleton — shimmer feels more alive than static pulse */
.cc-skel {
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--border) 50%, var(--surface-2) 100%);
  background-size: 400px 100%;
  animation: cc-shimmer 1.4s linear infinite;
}

/* Global link underline removal + hover underline — consistent everywhere */
.cc-link { color: var(--accent); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.cc-link:hover { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }

/* ─── Reset ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  font-feature-settings: "cv11","ss01","ss03";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html[lang="ar"] body { font-family: 'IBM Plex Sans Arabic','Inter',system-ui,sans-serif; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: 0; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ─── Numeric shorthand ─────────────────────────────────────────────────── */
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ─── Shell ────────────────────────────────────────────────────────────── */
/* .cc-shell uses width: 100% (not 100vw) so it composes cleanly with the
   fixed-position noor-sidebar rail, which adds `body.ns-has-rail { padding-left: 240px }`.
   Using 100vw was pushing total body width to 100vw + 240px = overflow. */
.cc-shell { display: flex; min-height: 100vh; width: 100%; overflow-x: hidden; }
.cc-main  { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* ─── Pulse bar (sticky top, 56px) ─────────────────────────────────────── */
.cc-pulse {
  position: sticky; top: 0; z-index: 40;
  height: var(--h-pulse);
  display: flex; align-items: center; gap: var(--s-4);
  padding: 0 var(--s-5);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.cc-pulse .brand { display: flex; align-items: center; gap: var(--s-2); font-weight: 600; font-size: 14px; }
.cc-pulse .brand-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.cc-pulse h1 { font-size: 14px; font-weight: 500; color: var(--text-1); }

.cc-sel {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 6px var(--s-3); border: 1px solid var(--border);
  border-radius: var(--r-md); font-size: 13px; color: var(--text-2);
  background: var(--surface); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.cc-sel:hover { border-color: var(--border-strong); background: var(--surface-2); }
.cc-sel .chev { width: 12px; height: 12px; opacity: .5; }

.cc-pulse-mid { flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--s-5); min-width: 0; overflow: hidden; }
.cc-token    { display: inline-flex; align-items: center; gap: var(--s-2); font-size: 13px; color: var(--text-2); white-space: nowrap; }
.cc-token .k { color: var(--text-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.cc-token .v { color: var(--text-1); font-weight: 500; }
.cc-token .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
.cc-token .dot.ok     { background: var(--success); }
.cc-token .dot.warn   { background: var(--warn); }
.cc-token .dot.danger { background: var(--danger); }
.cc-sep { width: 1px; height: 16px; background: var(--border); }

.cc-pulse-right { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
.cc-ibtn {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-md); color: var(--text-2); position: relative;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cc-ibtn:hover { background: var(--surface-2); color: var(--text-1); }
.cc-ibtn .badge {
  position: absolute; top: 4px; right: 4px; min-width: 14px; height: 14px; padding: 0 3px;
  border-radius: 8px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.cc-kbd {
  font-size: 11px; color: var(--text-3); border: 1px solid var(--border);
  padding: 2px 6px; border-radius: var(--r-sm); font-family: var(--font-num);
}
.cc-me {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 4px 10px 4px 4px; border: 1px solid var(--border); border-radius: var(--r-md);
  font-size: 13px; color: var(--text-1); cursor: pointer;
}
.cc-me:hover { border-color: var(--border-strong); background: var(--surface-2); }
.cc-me .ava { width: 24px; height: 24px; border-radius: 50%; background: var(--accent-faint); color: var(--accent); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }

@keyframes cc-flash { 0% { color: var(--accent); } 100% { color: inherit; } }
.cc-token.flash .v { animation: cc-flash 400ms var(--ease); }

/* ─── Page + Section ───────────────────────────────────────────────────── */
.cc-page {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--s-5);
  padding: var(--s-5);
  max-width: 1920px; width: 100%;
  margin: 0 auto;
}
.cc-page-main { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
.cc-page-side { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
.cc-page-full { grid-template-columns: 1fr; }

.cc-sec { display: flex; flex-direction: column; gap: var(--s-3); }
.cc-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.cc-sec-title { font-size: 13px; font-weight: 600; color: var(--text-2); letter-spacing: 0.02em; text-transform: uppercase; }
.cc-sec-meta  { font-size: 12px; color: var(--text-3); }
.cc-sec-link  { font-size: 12px; color: var(--accent); font-weight: 500; }
.cc-sec-link:hover { color: var(--accent-2); }

/* ─── Cards / panels (no shadow, border only) ─────────────────────────── */
.cc-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.cc-panel-h {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  font-size: 12px; color: var(--text-2); font-weight: 500;
  letter-spacing: 0.02em; text-transform: uppercase;
}
.cc-panel-h .count { color: var(--text-1); font-variant-numeric: tabular-nums; }

/* ─── Rows (unified across list views) ─────────────────────────────────── */
.cc-row {
  display: flex; align-items: center; gap: var(--s-3);
  height: 48px; padding: 0 var(--s-4);
  border-bottom: 1px solid var(--border);
  font-size: 13px; color: var(--text-1);
  transition: background var(--dur-fast) var(--ease);
}
.cc-row:hover { background: var(--surface-2); }
.cc-row:last-child { border-bottom: 0; }
.cc-row .urg { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.cc-row .urg.red    { background: var(--danger); }
.cc-row .urg.orange { background: var(--warn); }
.cc-row .urg.yellow { background: #EAB308; }
.cc-row .urg.green  { background: var(--success); }
.cc-row .name  { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.cc-row .meta  { color: var(--text-3); font-size: 12px; white-space: nowrap; }
.cc-row .why   { color: var(--text-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.cc-row .val   { color: var(--text-1); font-weight: 500; font-variant-numeric: tabular-nums; }
.cc-row .go    { margin-left: auto; font-size: 12px; color: var(--text-3); padding: 4px 8px; border-radius: var(--r-sm); opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.cc-row:hover .go { opacity: 1; color: var(--accent); background: var(--accent-faint); }

.cc-row-empty {
  padding: var(--s-5) var(--s-4);
  color: var(--text-3); font-size: 13px; text-align: center;
  border-bottom: 1px solid var(--border);
}
.cc-row-empty:last-child { border-bottom: 0; }
.cc-row-skel {
  height: 48px; display: flex; align-items: center; padding: 0 var(--s-4);
  gap: var(--s-3); border-bottom: 1px solid var(--border);
}
.cc-row-skel:last-child { border-bottom: 0; }
.cc-skel {
  height: 8px; background: var(--surface-2); border-radius: var(--r-sm);
  animation: cc-skel-pulse 1.2s infinite var(--ease);
}
@keyframes cc-skel-pulse { 50% { opacity: .55; } }

/* ─── Rails (pipeline / trend) ─────────────────────────────────────────── */
.cc-rails { display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.cc-rail  { background: var(--surface); display: grid; grid-template-columns: 1fr auto; align-items: center; padding: var(--s-4); gap: var(--s-4); }
.cc-rail-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cc-rail-label { font-size: 12px; color: var(--text-2); font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; }
.cc-rail-nums  { display: flex; align-items: baseline; gap: var(--s-3); }
.cc-rail-count { font-size: 28px; font-weight: 600; color: var(--text-1); font-variant-numeric: tabular-nums; line-height: 1.1; }
.cc-rail-sub   { font-size: 13px; color: var(--text-2); }
.cc-rail-sub .muted { color: var(--text-3); }
.cc-rail-cta {
  font-size: 12px; font-weight: 500; color: var(--accent);
  padding: 6px var(--s-3); border: 1px solid var(--border); border-radius: var(--r-md);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.cc-rail-cta:hover { border-color: var(--accent); background: var(--accent-faint); }
.cc-rail-spark { grid-column: 1 / -1; padding-top: var(--s-2); }
.cc-rail-spark svg { width: 100%; height: 20px; display: block; }
.cc-rail-spark path { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.cc-rail-spark .fill { fill: var(--accent-faint); stroke: none; }

/* ─── Feed list (side rail) ────────────────────────────────────────────── */
.cc-feed-list { max-height: 520px; overflow: auto; }
.cc-feed-item { display: grid; grid-template-columns: 60px 1fr; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border); font-size: 13px; }
.cc-feed-item:last-child { border-bottom: 0; }
.cc-feed-t { color: var(--text-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.cc-feed-x { color: var(--text-1); overflow: hidden; text-overflow: ellipsis; }
.cc-feed-x .who   { font-weight: 500; }
.cc-feed-x .money { color: var(--success); font-variant-numeric: tabular-nums; }

/* ─── KV lists (deep dives) ────────────────────────────────────────────── */
.cc-list { display: flex; flex-direction: column; gap: var(--s-2); }
.cc-li   { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.cc-li .l { color: var(--text-1); }
.cc-li .r { color: var(--text-2); font-variant-numeric: tabular-nums; }
.cc-big   { font-size: 28px; font-weight: 600; color: var(--text-1); font-variant-numeric: tabular-nums; line-height: 1.1; }
.cc-sub   { font-size: 12px; color: var(--text-3); }
.cc-h3    { font-size: 12px; font-weight: 500; color: var(--text-2); letter-spacing: 0.02em; text-transform: uppercase; }

/* ─── Badges ───────────────────────────────────────────────────────────── */
.cc-badge        { display: inline-flex; align-items: center; gap: var(--s-2); padding: 4px 8px; border-radius: var(--r-sm); font-size: 12px; background: var(--surface-2); color: var(--text-2); }
.cc-badge.ok     { background: var(--success-faint); color: var(--success); }
.cc-badge.warn   { background: var(--warn-faint);    color: var(--warn); }
.cc-badge.danger { background: var(--danger-faint);  color: var(--danger); }
.cc-badge.accent { background: var(--accent-faint);  color: var(--accent); }

/* ─── Buttons ──────────────────────────────────────────────────────────── */
.cc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 8px var(--s-3); border: 1px solid var(--border); border-radius: var(--r-md);
  font-size: 13px; font-weight: 500; color: var(--text-1); background: var(--surface);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.cc-btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
.cc-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.cc-btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.cc-btn.ghost { border: 0; padding: 6px var(--s-2); color: var(--text-2); }
.cc-btn.ghost:hover { background: var(--surface-2); color: var(--text-1); }
.cc-btn.danger { color: var(--danger); }
.cc-btn.danger:hover { background: var(--danger-faint); border-color: var(--danger); color: var(--danger); }

/* ─── Inputs ───────────────────────────────────────────────────────────── */
.cc-input, .cc-select, .cc-textarea {
  width: 100%; padding: 8px var(--s-3); font-size: 13px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text-1);
  transition: border-color var(--dur-fast) var(--ease);
}
.cc-input:focus, .cc-select:focus, .cc-textarea:focus { outline: none; border-color: var(--accent); }
.cc-label { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--s-1); display: block; }

/* ─── Table ────────────────────────────────────────────────────────────── */
.cc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cc-table th {
  text-align: start; padding: var(--s-2) var(--s-4);
  border-bottom: 1px solid var(--border);
  font-size: 11px; font-weight: 500; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.cc-table td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border); color: var(--text-1); }
.cc-table tr:last-child td { border-bottom: 0; }
.cc-table tr:hover td { background: var(--surface-2); }

/* ─── Tabs ─────────────────────────────────────────────────────────────── */
.cc-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); }
.cc-tab  {
  padding: var(--s-3) var(--s-4); font-size: 13px; color: var(--text-2);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.cc-tab:hover  { color: var(--text-1); }
.cc-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ─── Command palette (⌘K) ─────────────────────────────────────────────── */
.cc-cmdk-bg { position: fixed; inset: 0; background: rgba(9,9,11,0.45); z-index: 90; display: none; }
.cc-cmdk-bg.open { display: flex; align-items: flex-start; justify-content: center; padding-top: 10vh; }
.cc-cmdk { width: min(640px, 92vw); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.cc-cmdk input { width: 100%; padding: var(--s-4) var(--s-5); font-size: 16px; border-bottom: 1px solid var(--border); outline: none; }
.cc-cmdk-list { max-height: 50vh; overflow: auto; }
.cc-cmdk-item { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-5); cursor: pointer; font-size: 14px; }
.cc-cmdk-item:hover, .cc-cmdk-item.sel { background: var(--surface-2); }
.cc-cmdk-item .k { color: var(--text-3); font-size: 12px; margin-left: auto; }
.cc-cmdk-sec { padding: var(--s-2) var(--s-5); font-size: 11px; text-transform: uppercase; color: var(--text-3); letter-spacing: 0.04em; }

/* ─── Drawer (lead detail / product detail slide-over) ─────────────────── */
.cc-drawer-bg { position: fixed; inset: 0; background: rgba(9,9,11,0.35); z-index: 85; display: none; }
.cc-drawer-bg.open { display: block; }
.cc-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(640px, 100vw);
  background: var(--surface); border-inline-start: 1px solid var(--border);
  transform: translateX(100%); transition: transform var(--dur-slow) var(--ease);
  z-index: 86; display: flex; flex-direction: column;
}
.cc-drawer-bg.open .cc-drawer { transform: translateX(0); }
.cc-drawer-h { display: flex; align-items: center; justify-content: space-between; padding: var(--s-4); border-bottom: 1px solid var(--border); }
.cc-drawer-b { flex: 1; overflow: auto; padding: var(--s-5); }

/* ─── Mobile bottom tab bar ────────────────────────────────────────────── */
.cc-bottom-tabs { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — real breakpoints, not cosmetic
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1279px) {
  .cc-page { grid-template-columns: 1fr; }
  .cc-page-side { flex-direction: row; flex-wrap: wrap; }
  .cc-page-side > * { flex: 1 1 340px; min-width: 0; }
}

@media (max-width: 767px) {
  .cc-pulse { padding: 0 var(--s-4); gap: var(--s-2); }
  .cc-pulse .brand { display: none; }
  .cc-pulse-mid { gap: var(--s-3); justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .cc-pulse-mid::-webkit-scrollbar { display: none; }
  .cc-kbd, .cc-sep { display: none; }
  .cc-sel { padding: 4px var(--s-2); font-size: 12px; }

  .cc-page { padding: var(--s-3); gap: var(--s-4); padding-bottom: calc(var(--s-7) + var(--s-4)); }

  .cc-row { padding: 0 var(--s-3); }
  .cc-row .name { max-width: 120px; }
  .cc-row .go { opacity: 1; }

  .cc-drawer { width: 100%; }

  .cc-bottom-tabs {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    background: var(--surface); border-top: 1px solid var(--border);
    height: 56px; padding-bottom: env(safe-area-inset-bottom);
  }
  .cc-bottom-tabs .t {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; font-size: 11px; color: var(--text-3); transition: color var(--dur-fast) var(--ease);
    position: relative;
  }
  .cc-bottom-tabs .t.active { color: var(--accent); }
  .cc-bottom-tabs .t i { width: 20px; height: 20px; }
  .cc-bottom-tabs .t.active::before { content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 2px; background: var(--accent); }
}

/* ─── Role visibility (driven by body[data-role]) ──────────────────────── */
body[data-role="employee"]       .cc-only-owner,
body[data-role="employee"]       .cc-only-manager-plus,
body[data-role="branch_manager"] .cc-only-owner        { display: none !important; }

body[data-role="owner"]          .cc-only-employee,
body[data-role="branch_manager"] .cc-only-employee     { display: none !important; }

/* ─── RTL polish for Arabic ────────────────────────────────────────────── */
html[dir="rtl"] .cc-row .go { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .cc-pulse-right { margin-left: 0; margin-right: auto; }

/* ═══════════════════════════════════════════════════════════════════════
   Phase A — Consolidated components (filter bar, chips, empty, skeleton,
   button modifiers). These are the single, canonical implementations;
   per-screen local copies must defer to these classes.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Filter bar (one bordered container, label/chipgroup rows) ───────── */
.cc-filterbar {
  display: grid; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  position: relative;
}
.cc-filterbar__row {
  display: grid; grid-template-columns: 72px 1fr;
  align-items: center; gap: var(--s-3);
}
.cc-filterbar__label {
  font-size: var(--fs-xs); color: var(--text-3);
  letter-spacing: 0.04em; text-transform: uppercase;
  font-weight: 500;
  text-align: start;
}
.cc-chipgroup {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
}
.cc-filterbar__sort {
  position: absolute; top: var(--s-3); inset-inline-end: var(--s-4);
}

/* ─── Chips (unified pill) ────────────────────────────────────────────── */
.cc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--fs-xs);
  color: var(--text-2);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  user-select: none;
}
.cc-chip:hover { background: var(--surface-2); border-color: var(--border-strong); }
.cc-chip.active {
  background: var(--accent-faint);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 500;
}
.cc-chip__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.6; }
.cc-chip__count { font-size: 10px; opacity: 0.6; margin-inline-start: 2px; }

/* ─── Empty state (single component for every screen) ─────────────────── */
.cc-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--s-7) var(--s-4);
  color: var(--text-2);
  text-align: center;
}
.cc-empty__icon { width: 28px; height: 28px; color: var(--text-3); margin-bottom: var(--s-3); opacity: 0.8; }
.cc-empty__title { font-size: var(--fs-md); font-weight: 600; color: var(--text-1); margin-bottom: 4px; }
.cc-empty__body { font-size: var(--fs-sm); color: var(--text-2); max-width: 320px; line-height: 1.5; }
.cc-empty__cta { margin-top: var(--s-4); }

/* ─── Skeleton helpers (complement existing .cc-skel) ─────────────────── */
.cc-skel-row {
  height: 14px; border-radius: 4px;
  background: var(--surface-2); overflow: hidden; position: relative;
}
.cc-skel-row::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.05), transparent);
  transform: translateX(-100%);
  animation: cc-skel-shimmer 1.4s ease-in-out infinite;
}
@keyframes cc-skel-shimmer { 100% { transform: translateX(100%); } }
.cc-skel-list { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); }

/* ─── Button modifier variants (BEM-style, coexist with legacy .primary) ─ */
.cc-btn--primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.cc-btn--primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.cc-btn--ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.cc-btn--ghost:hover { background: var(--surface-2); color: var(--text-1); }
.cc-btn--danger { background: var(--danger-faint); color: var(--danger); border-color: transparent; }