:root {
  /* ══ SOVEREIGN EMERALD DNA (الزمرّد السيادي) — daylight ══ */
  --p-bg:        #EAF3EE;
  --p-surface:   #FFFFFF;
  --p-band-1:    #FBF5EB;
  --p-band-2:    #FDF6E3;
  --p-band-3:    #EEF7EF;
  /* "navy" tokens now carry the deep-emerald identity (kept name to avoid breaking refs) */
  --p-navy:      #14342C;
  --p-navy-d:    #0C2238;
  --p-navy-l:    #1A7F64;
  --p-navy-bg:   #E6F4F1;

  /* Signature gold accent — distinction / emphasis (not primary actions) */
  --p-gold:      #C5970A;
  --p-gold-d:    #9C7A08;
  --p-gold-bg:   #FDF6E3;
  /* Emerald primary */
  --p-emerald:   #1A7F64;
  --p-emerald-d: #145F4C;
  --p-emerald-bg:#E6F4F1;
  /* Signature header gradient (the fingerprint) — lighter daylight variant + deep variant */
  --p-hd-grad:   linear-gradient(135deg, #2F5D53 0%, #3A7D68 45%, #1A9E78 100%);
  --p-hd-grad-deep: linear-gradient(135deg, #1A202C 0%, #2D3748 50%, #1A7F64 100%);

  /* DECISIVE SYSTEM COLORS — for alerts, warnings, status */
  --p-red:       #DC2626;
  --p-red-d:     #B91C1C;
  --p-red-bg:    #FEE2E2;
  --p-amber:     #D97706;
  --p-amber-d:   #B45309;
  --p-amber-bg:  #FEF3C7;
  --p-green:     #16A34A;
  --p-green-d:   #15803D;
  --p-green-bg:  #DCFCE7;
  --p-teal:      #1A7F64;
  --p-teal-d:    #145F4C;
  --p-teal-bg:   #E6F4F1;
  --p-info:      #1E40AF;
  --p-info-d:    #1E3A8A;
  --p-info-bg:   #DBEAFE;

  --p-text:      #0F172A;
  --p-text-2:    #475569;
  --p-text-3:    #8A9AB0;
  --p-text-4:    #B5C0CF;
  --p-border:    #DCE5DF;
  --p-border-2:  #BFCEC2;
  --fs-base:     15px;
  --fs-sm:       13px;
  --fs-xs:       11px;
  --fs-lbl:      13px;
  --fs-xl:       22px;
  --r-sm:        8px;
  --r-md:        12px;
  --r-lg:        18px;
  --r-pill:      999px;

  /* SHADOW SCALE — softer, with subtle teal undertone */
  --sh-sm:       0 1px 2px rgba(15, 110, 86, 0.04);
  --sh-md:       0 2px 8px rgba(15, 110, 86, 0.06);
  --sh-pop:      0 8px 24px rgba(15, 110, 86, 0.12);
  --sh-card:     0 4px 14px rgba(15, 110, 86, 0.08), 0 1px 3px rgba(20, 51, 79, 0.04);
  --sh-modal:    0 20px 50px rgba(20, 51, 79, 0.20), 0 4px 12px rgba(15, 110, 86, 0.10);
  --sh-toast:    0 12px 30px rgba(20, 51, 79, 0.18), 0 2px 6px rgba(15, 110, 86, 0.10);
  --sh-hover:    0 8px 20px rgba(15, 110, 86, 0.14), 0 2px 6px rgba(20, 51, 79, 0.06);
}

/* Wazara mode no longer changes the base palette — mode is signaled
   only by the badge + logo + form-section accents. The page background
   stays fresh and alive in both modes. */
body.mode-wazara {
  /* intentionally empty — keeps default token values */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: "Tajawal", "Inter", sans-serif;
  background: linear-gradient(160deg, #EAF3EE 0%, #F3F0E6 100%);
  background-attachment: fixed;
  color: var(--p-text);
  font-size: var(--fs-base);
  height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s ease;
}
/* B087 §2 ROOT FIX — form controls do NOT inherit the page font by default, so any <button>/input/select/
   textarea with no explicit font falls back to the system font and renders Arabic wrong. One global reset
   pins them to the inherited Tajawal stack. (Icon-only buttons keep their glyph: the .ti/.ti-* icon font wins
   on the glyph span, not the button's own text.) */
button, input, select, textarea { font-family: inherit; }
/* B089 — placeholders are UI text (often Arabic) and must read in the Arabic font even on inputs whose typed VALUE
   is intentionally a Latin/monospace stack (e.g. the ministry-number / SD / code fields). A directly-set
   ::placeholder font beats the inherited input font, so the digits stay monospace while the hint reads in Tajawal. */
input::placeholder, textarea::placeholder { font-family: "Tajawal", "Inter", sans-serif; }

/* TOPBAR */
.topbar {
  background: var(--p-surface);
  border-bottom: 1px solid var(--p-border);
  padding: 0 24px; height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 100;
  box-shadow: var(--sh-sm);
}
.tp-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 10px 4px 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
  position: relative;
}
.tp-brand:hover { background: var(--p-band-1); }
.tp-brand-logo {
  width: 36px; height: 36px;
  border-radius: 7px;
  object-fit: contain;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  padding: 3px;
}
.tp-brand-edit {
  opacity: 0;
  font-size: 12px;
  color: var(--p-text-3);
  transition: opacity 0.15s ease;
  margin-right: 2px;
}
.tp-brand:hover .tp-brand-edit { opacity: 1; }
.tp-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.tp-brand-name {
  font-family: "Inter", sans-serif; font-weight: 700; font-size: 15px;
  color: var(--p-text); letter-spacing: -0.2px;
}
.tp-brand-sub { font-size: 11px; color: var(--p-text-3); }
.tp-pagename-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: 4px;
}
.tp-pagename-sep {
  color: var(--p-text-3);
  font-size: 18px;
  font-weight: 300;
}
.tp-pagename {
  font-size: 20px;
  font-weight: 800;
  color: var(--p-navy);
}
.tp-pagename-info {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--p-band-1);
  color: var(--p-text-3);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  border: 1px solid var(--p-border);
}
.tp-pagename-info::before { content: 'i'; font-style: italic; }
.tp-actions { display: flex; align-items: center; gap: 8px; }
.tp-btn {
  padding: 7px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--p-border); background: var(--p-surface);
  color: var(--p-text-2); font-family: inherit;
  font-size: 12px; font-weight: 500; cursor: pointer;
  transition: all 0.15s ease;
}
.tp-btn:hover { background: var(--p-band-1); border-color: var(--p-border-2); color: var(--p-text); }
.tp-btn.tp-logout { color: var(--p-red); }

/* APP LAYOUT */
.app { display: flex; height: calc(100vh - 56px); }
/* TopNav: the nav is a DROPDOWN PANEL dropped from a top-centre handle — NOT a persistent rail and NOT
   a side ☰ drawer. It is always position:fixed (out of .app flow → .main takes the full width) and is
   hidden by default via transform+opacity; `body.ops-nav-open .sidebar` (theme.css) reveals it. */
.sidebar {
  /* left:50% (physical) is intentional: horizontal centering is direction-neutral and identical in
     RTL/LTR; inset-inline-start would fight the physical translateX(-50%) and shift it off-centre. */
  position: fixed; top: 0; left: 50%;
  transform: translateX(-50%) translateY(-112%);
  opacity: 0; pointer-events: none;
  z-index: 1500;
  width: 300px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 16px);
  background: var(--nav-surface);
  border: 1px solid var(--nav-line); border-top: 0;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 20px 48px -18px rgba(0, 0, 0, 0.5);
  padding: 24px 12px 12px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transition: transform 0.24s ease, opacity 0.24s ease;
}
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }
/* Panel header (TopNav) — search field removed per Sajed 2026-06-13 (role-filtered list is short). */
.sb-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 8px; }
.sb-panel-title { font-size: 13px; font-weight: 800; color: var(--nav-ink); }

.sb-bottom {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--nav-line);
}
.sb-bottom-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--p-text-2);
  transition: all 0.15s ease;
}
.sb-bottom-link:hover { background: var(--p-band-1); color: var(--p-text); }
.sb-bottom-logo {
  width: 28px; height: 28px;
  border-radius: 6px;
  object-fit: contain;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  padding: 2px;
}
.sb-bottom-text { display: flex; flex-direction: column; line-height: 1.15; }
.sb-bottom-name {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--p-text);
}
.sb-bottom-sub {
  font-size: 10px;
  color: var(--p-text-3);
  font-family: "Inter", sans-serif;
}

/* TOPBAR USER */
.tp-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  background: var(--p-band-1);
  border: 1px solid var(--p-border);
  border-radius: 999px;
}
.tp-user-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--p-navy), var(--p-navy-l));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 12px;
}
.tp-user-text { display: flex; flex-direction: column; line-height: 1.1; }
.tp-user-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--p-text);
}
.tp-user-role {
  font-size: 10px;
  color: var(--p-text-3);
}

/* Part 1: visual state for a button locked while its save/create request is in flight. */
.is-saving { opacity: 0.65 !important; cursor: progress !important; pointer-events: none !important; }

.tp-version {
  font-family: "Inter", monospace;
  font-size: 10px;
  color: var(--p-text-4);
  opacity: 0.7;
  letter-spacing: 0.3px;
}
.sb-group { margin-bottom: 16px; }
.sb-label {
  font-size: 10px; font-weight: 700; color: var(--nav-ink3);
  text-transform: uppercase; letter-spacing: 0.6px;
  padding: 0 10px; margin-bottom: 6px;
}
.sb-item {
  position: relative;   /* anchors the active start-accent (::before) */
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-sm);
  font-size: 13px; color: var(--nav-ink);
  cursor: pointer; transition: all 0.15s ease;
  font-weight: 500;
  margin-bottom: 1px;
}
/* mockup: hover = light-green tint (Sajed); ACTIVE = light-green + green text + bold + green start-accent */
.sb-item:hover { background: var(--nav-greenbg); color: var(--nav-ink); }
.sb-item.active { background: var(--nav-greenbg); color: var(--nav-green); font-weight: 700; }
.sb-item.active::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 7px; bottom: 7px;
  width: 3px; border-radius: 2px; background: var(--nav-green);
}
.sb-icon {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.sb-unread-badge {
  margin-inline-start: auto;
  background: #DC2626;
  color: white;
  font-size: 11px;
  font-weight: 800;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.4);
  animation: sbBadgePulse 2s ease-in-out infinite;
}
@keyframes sbBadgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
.sb-divider {
  height: 1px;
  background: var(--p-border);
  margin: 8px 6px;
}
.sb-sub-label {
  font-size: 10px; font-weight: 700; color: var(--p-text-3);
  text-transform: uppercase; letter-spacing: 0.6px;
  padding: 0 10px; margin-bottom: 4px; margin-top: 4px;
}
.sb-sub {
  padding-right: 14px;
}
.sb-sub .sb-item {
  font-size: 12px;
  padding: 6px 10px;
}
.sb-has-sub .sb-sub-chevron {
  margin-right: auto;
  font-size: 10px;
  color: var(--p-text-3);
  transition: transform 0.2s ease;
}
.sb-has-sub.open .sb-sub-chevron {
  transform: rotate(180deg);
}

.main {
  flex: 1;
  padding: 18px 28px;
  min-width: 0;
  height: calc(100vh - 56px);
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;
}

/* PAGE CONTAINER — all pages share the same width, centered via margin */
.page { display: none; width: 100%; max-width: 1180px; margin: 0 auto; }
.page.active { display: block; }
/* Clients page only — fills the full content area (the small ~28px side gutter from .main padding stays,
   so the edge never feels clipped). The 1180px cap is too narrow and wastes side space for this wide table. */
#page-clients { max-width: none; }

/* COMPACT PAGE HEADER */
.page-head-compact {
  margin-bottom: 12px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
/* Slim toolbar — replaces the old title+subtitle header block.
   Holds only action buttons, right-aligned, minimal vertical footprint. */
.page-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.page-toolbar:empty { display: none; margin: 0; }

/* (FORM CARD HEADER removed — B107: the intake's double-header chrome was deleted; the mock's single
   `.intake-popup-head.ik-hd` is the only header now. No element uses .form-card-header/.fch-title anymore.) */

/* PAGE HEADER (old style — kept for translation manager page) */
.page-head {
  margin-bottom: 18px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.page-title {
  font-size: var(--fs-xl); font-weight: 800;
  color: var(--p-emerald-d); margin-bottom: 2px;
  letter-spacing: -0.5px;
}
.page-sub { font-size: 12px; color: var(--p-text-3); }

/* MODE BADGE + LOGO */
.mode-cluster {
  display: flex; align-items: center; gap: 10px;
}
.mode-logo {
  height: 60px;
  min-width: 80px;
  max-width: 200px;
  border-radius: 10px;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  padding: 4px 8px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-sm);
  transition: all 0.3s ease;
}
.mode-logo img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
}
.mode-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
  background: var(--p-navy-bg); color: var(--p-navy);
  border: 1px solid var(--p-navy-l);
  transition: all 0.2s ease;
}
.mode-badge.company {
  background: var(--p-green-bg); color: var(--p-green);
  border-color: var(--p-green);
}
.mode-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* FORM CARD */
.form-card { box-sizing: border-box; width: 100%; max-width: 100%;

  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-card);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
body.mode-wazara .form-card { box-sizing: border-box;
 border-color: var(--p-border-2); }

/* === Intake SOURCE-based colour (Intake_Merge_Spec §«لون الانتيك حسب المصدر») ===
   عادي = platform green (header gradient unchanged) · وزارة = burgundy «الأخفّ» gradient.
   Switches live with body.mode-wazara; accent applied to header · section titles · field star · badge.
   Sajed refines the exact propagation on the LIVE result. */
#page-intake { --intake-accent:#0F6E56; --intake-soft:#E1F5EE; --intake-hdr:linear-gradient(180deg,#F3F9F6,#FBFDFC); --intake-hdr-ink:var(--p-text); }
html[data-theme="night"] #page-intake { --intake-accent:#4FD8AC; --intake-soft:#173026; }
body.mode-wazara #page-intake { --intake-accent:#B8665E; --intake-soft:#FAEFED; --intake-hdr:linear-gradient(95deg,#c0726a,#934a43); --intake-hdr-ink:#fff; }
html[data-theme="night"] body.mode-wazara #page-intake { --intake-accent:#EAACA6; --intake-soft:#2A1715; }
/* higher specificity (.form-card) so the accent beats the base #page-intake .intake-sec-title rule. */
#page-intake .form-card .intake-sec-title { color: var(--intake-accent); }
#page-intake .form-card .field-label .req { color: var(--intake-accent); }
body.mode-wazara #page-intake .mode-badge { background: var(--intake-soft); color: var(--intake-accent); border-color: var(--intake-accent); }
/* the intake-popup title strip flips with the source too (green عادي stays --p-hd-grad · burgundy وزارة);
   the convert-prefilled variant keeps its own strong amber/teal signal. */
body.mode-wazara #page-intake .intake-popup:not(.intake-from-convert) .intake-popup-head { background: linear-gradient(95deg,#c0726a,#934a43); }

/* Intake §«هوية الحاج/المبلّغ — سطرٌ واحدٌ أفقيّ»: title + small inline field boxes; compact so they fit
   one (or at most two) rows even in the ~920px popup → the form stays short, no scroll. */
.intake-identity-row { display: flex; align-items: flex-end; gap: 5px 7px; flex-wrap: wrap; }
.intake-id-title { font-size: 11.5px; font-weight: 800; color: var(--intake-accent); white-space: nowrap; align-self: center; flex: 0 0 auto; }
.intake-id-f { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 70px; }
.intake-id-f > label.field-label { font-size: 9.5px; color: var(--p-text-3); white-space: nowrap; margin: 0; overflow: hidden; text-overflow: ellipsis; }
.intake-id-f .inp { font-size: 11px; padding: 3px 5px; width: 100%; min-width: 0; }
.intake-id-f #ss-nationality-waz-wrap { min-width: 0; }
.intake-id-f #ss-nationality-waz-wrap .ss-inp { font-size: 11px; padding: 3px 5px; min-width: 0; }
.intake-entity-badge { font-size: 11px; padding: 3px 7px; border: 1px solid var(--p-border); border-radius: 7px; background: var(--p-band-1); color: var(--p-text-2); cursor: pointer; white-space: nowrap; text-align: center; font-family: inherit; }
.intake-entity-badge:hover { background: var(--p-surface); border-color: var(--intake-accent); }

/* Intake §«خلل تقني SD»: floating overlay over the form (position:fixed → never grows the form). */
.sd-float { position: fixed; inset: 0; z-index: 120; }
.sd-float-bd { position: absolute; inset: 0; background: rgba(0,0,0,0.25); }
.sd-float-card { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(560px,92vw); max-height: 86vh; overflow: auto; background: var(--p-surface); border: 1px solid var(--p-border); border-radius: 12px; box-shadow: 0 24px 70px rgba(0,0,0,0.4); }
.sd-float-hd { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: linear-gradient(95deg,#c0726a,#934a43); color: #fff; font-weight: 800; font-size: 14px; }
.sd-float-x { border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.12); color: #fff; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; font-size: 12px; }
.sd-float-body { padding: 14px; }

/* ── B060 intake redesign — rotating chips · category-image side panel · inline SD roll-down ── */
.intake-rotpill { display: inline-flex; align-items: center; gap: 6px; width: 100%; justify-content: center;
  background: var(--p-band-1, #E1F5EE); border: 1px solid var(--p-border-2, #BFE6D7); color: var(--p-green-d, #0B5240);
  border-radius: 8px; font-size: 13px; font-weight: 600; padding: 7px 14px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.intake-rotpill:hover { background: var(--p-band-2, #D5EFE6); }
.intake-catimg { flex: 0 0 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--p-border, #E4DECF); border-radius: 10px; background: var(--p-band-1, #F8FBF9); padding: 10px; }
.intake-catimg-pic { width: 104px; height: 104px; border-radius: 12px; background: var(--p-surface, #fff);
  border: 1px solid var(--p-border, #E4DECF); display: flex; align-items: center; justify-content: center; font-size: 52px; overflow: hidden; }
.intake-catimg-cap { font-size: 11px; color: var(--p-text-3, #64748B); text-align: center; }
.intake-sd-toggle { width: 100%; background: var(--p-amber-bg, #FBF1D6); border: 1px solid var(--p-amber, #E8CE7A);
  color: #7a5b00; border-radius: 8px; font-size: 12.5px; padding: 8px 12px; cursor: pointer; font-family: inherit; text-align: center; }
.intake-sd-panel { margin-top: 8px; border: 1px solid var(--p-amber, #E8CE7A); background: var(--p-amber-bg, #FFFDF5); border-radius: 10px; padding: 10px; }

/* ═══ B107 intake-v4 surface (structure from Pathway360_Intake_Redesign_Mock_v4.html, colours theme-aware
   via --p-* tokens + night overrides; all scoped to #page-intake so nothing drifts onto other screens) ═══ */
/* §0 — centered mode toggle pill (وزارة / كول سنتر) */
#page-intake .ik-modetog { display:inline-flex; border:1px solid rgba(255,255,255,.55); border-radius:8px; overflow:hidden;
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; }
#page-intake .ik-modetog button { border:0; background:transparent; color:#fff; padding:6px 16px; font-size:12.5px; font-weight:800; cursor:pointer; font-family:inherit; white-space:nowrap; }
body.mode-wazara #page-intake .ik-modetog .ik-mt-waz { background:#fff; color:var(--intake-accent,#934a43); }
body:not(.mode-wazara) #page-intake .ik-modetog .ik-mt-aadi { background:#fff; color:var(--intake-accent,#15803D); }
/* §0 — call-center (company) green accent, mirroring the wazara burgundy accent block above */
body:not(.mode-wazara) #page-intake { --intake-accent:#15803D; --intake-soft:#E6F4EC; --intake-hdr:linear-gradient(180deg,#16A34A,#15803D); --intake-hdr-ink:#fff; }
html[data-theme="night"] body:not(.mode-wazara) #page-intake { --intake-accent:#7FD8AA; --intake-soft:#123020; }
/* §0 — the SINGLE intake header = the mock's .hd (title · CENTERED toggle · badge · logo). The old
   .intake-popup-head chrome («فتح بلاغ جديد» + ✕ + edit) was DELETED; this is now the only header.
   Title at start · toggle absolutely centered (rule above) · badge+logo pushed to the end. */
#page-intake .intake-popup-head.ik-hd { position:relative; justify-content:flex-start; align-items:center; gap:12px; padding:12px 16px; flex-wrap:wrap; }
/* company (call-center) = green gradient · wazara burgundy is set at the §«لون الانتيك» block above (:not from-convert) */
body:not(.mode-wazara) #page-intake .intake-popup:not(.intake-from-convert) .intake-popup-head { background:linear-gradient(180deg,#16A34A,#15803D); }
#page-intake .ik-hd-title { margin:0; font-size:16px; font-weight:800; color:#fff; white-space:nowrap; }
#page-intake .intake-popup-head.ik-hd .mode-badge { margin-inline-start:auto; background:rgba(255,255,255,.22); color:#fff; border:0; border-radius:8px; padding:4px 12px; font-size:12px; font-weight:800; }
#page-intake .intake-popup-head.ik-hd .mode-badge .dot { background:#fff; }
#page-intake .intake-popup-head.ik-hd .mode-logo { height:auto; min-width:0; max-width:none; background:transparent; border:0; padding:0; box-shadow:none; }
#page-intake .intake-popup-head.ik-hd .mode-logo img { height:46px; width:auto; max-width:180px; object-fit:contain; border-radius:6px; display:block; }
/* §2a title-row — tighter padding (id beats the ops-active compact !important) so all six fields
   (رقم · من المبلّغ · شريحة · القناة · نوع · أهمية) sit on ONE row like the mock, no wrap. */
#page-intake #intake-titlerow-sec { padding:11px 13px !important; }

/* §2/§3 — two-party cards (المبلّغ blue · الحاجّ green) */
#page-intake .ik-party { border-radius:9px; padding:10px 11px; border:1px solid var(--p-border); background:var(--p-band-1); }
#page-intake .ik-party.caller { border-color:#C7DBF0; background:color-mix(in srgb, var(--p-navy,#284B82) 6%, var(--p-surface)); }
#page-intake .ik-party.bene { border-color:var(--p-border-2,#BFE6D7); background:color-mix(in srgb, var(--p-green,#16A34A) 6%, var(--p-surface)); }
#page-intake .ik-party-h { font-size:12px; font-weight:800; margin-bottom:9px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
#page-intake .ik-party.caller .ik-party-h { color:var(--p-navy,#185FA5); }
#page-intake .ik-party.bene .ik-party-h { color:var(--p-green-d,#0B5240); }
#page-intake .ik-copied { font-size:10.5px; color:var(--p-green-d,#0B5240); background:var(--p-band-1,#E1F5EE); border:1px solid var(--p-border-2,#BFE6D7); border-radius:6px; padding:2px 8px; display:none; }
#page-intake .ik-parties-head { display:flex; align-items:center; gap:8px; cursor:pointer; margin-bottom:8px; user-select:none; font-weight:800; }
#page-intake .ik-chev { transition:transform .25s; display:inline-block; font-size:12px; }
#page-intake .ik-parties-body { overflow:hidden; transition:max-height .3s ease, opacity .25s; }

/* §2a — segmented single-select (نوع/أهمية/شريحة/الحالة) — selected = platform navy */
#page-intake .ik-seg { display:inline-flex; border:1px solid var(--p-border,#CBD5E1); border-radius:7px; overflow:hidden; width:100%; }
/* each button keeps a PERSISTENT per-option tint; selected = inset ring (not a fill). Tints via
   color-mix on --p-surface so they adapt day↔night; ink is the fixed hue. */
#page-intake .ik-seg button { flex:1; border:0; padding:8px 4px; font-size:11.5px; font-weight:700; cursor:pointer; border-inline-start:1px solid var(--p-border,#E2E8F0); font-family:inherit; white-space:nowrap; color:var(--tone-ink,#334155); background:var(--tone-bg, var(--p-surface,#fff)); }
#page-intake .ik-seg button:first-child { border-inline-start:0; }
#page-intake .ik-seg button.on { box-shadow: inset 0 0 0 2px var(--tone-ink,#334155); font-weight:800; }
#page-intake .ik-segc button { padding:7px 2px; font-size:10.5px; }
/* أهمية (4): light red · orange · green · blue */
#page-intake .tone-prihigh { --tone-bg:color-mix(in srgb,#e24b4a 14%,var(--p-surface)); --tone-ink:#A32D2D; }
#page-intake .tone-primid  { --tone-bg:color-mix(in srgb,#f59e0b 16%,var(--p-surface)); --tone-ink:#9A5B00; }
#page-intake .tone-prilow  { --tone-bg:color-mix(in srgb,#16A34A 14%,var(--p-surface)); --tone-ink:#0B5240; }
#page-intake .tone-prinone { --tone-bg:color-mix(in srgb,#185FA5 12%,var(--p-surface)); --tone-ink:#185FA5; }
/* شريحة (3, order B2B·B2C·B2G) = purple · slate · fuchsia + نوع (2) = brown · teal — all distinct from أهمية */
#page-intake .tone-b2b { --tone-bg:color-mix(in srgb,#7C3AED 12%,var(--p-surface)); --tone-ink:#6B21A8; }
#page-intake .tone-b2c { --tone-bg:color-mix(in srgb,#475569 12%,var(--p-surface)); --tone-ink:#334155; }
#page-intake .tone-b2g { --tone-bg:color-mix(in srgb,#C026D3 12%,var(--p-surface)); --tone-ink:#A21CAF; }
#page-intake .tone-report { --tone-bg:color-mix(in srgb,#92400E 14%,var(--p-surface)); --tone-ink:#7C4A2D; }
#page-intake .tone-complaint { --tone-bg:color-mix(in srgb,#0E7490 12%,var(--p-surface)); --tone-ink:#0E7490; }

/* §2 — lifecycle ball attachments + step numbers */
#page-intake .ik-ball { width:17px; height:17px; border-radius:50%; flex-shrink:0; box-shadow:0 1px 2px rgba(0,0,0,.28), inset 0 -2px 3px rgba(0,0,0,.20); }
#page-intake .ik-ball.red { background:radial-gradient(circle at 33% 28%,#ffd9d8,#e24b4a 55%,#a32d2d); }
#page-intake .ik-ball.grn { background:radial-gradient(circle at 33% 28%,#b9efd7,#3a9b6f 55%,#1d7a52); }
#page-intake .ik-ball.gld { background:radial-gradient(circle at 33% 28%,#ffe9b0,#d6a73a 55%,#9c7a08); }
#page-intake .ik-stepnum { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; color:#fff; font-weight:800; font-size:12px; flex-shrink:0; box-shadow:0 2px 5px -1px rgba(0,0,0,.32); border:2px solid #fff; }
#page-intake .ik-stepnum.sn1 { background:#e24b4a; } #page-intake .ik-stepnum.sn2 { background:#3a9b6f; } #page-intake .ik-stepnum.sn3 { background:#d6a73a; }

/* §6 — match-suspicion candidate cards */
#page-intake .ik-mcalert { font-size:10.5px; font-weight:800; color:var(--p-red,#A32D2D); margin:8px 0 6px; }
#page-intake .ik-mcards { display:flex; gap:9px; flex-wrap:wrap; }
#page-intake .ik-mcard { flex:0 0 202px; background:var(--p-surface,#fff); border:1.5px solid var(--p-border,#CBD5E1); border-radius:10px; padding:10px; cursor:pointer; transition:.15s; }
#page-intake .ik-mcard:hover { border-color:var(--p-green,#16A34A); }
#page-intake .ik-mcard.sel { border-color:var(--p-green,#16A34A); box-shadow:0 0 0 3px var(--p-band-1,#E1F5EE); }
#page-intake .ik-mcard.newc { border-style:dashed; border-color:var(--p-amber,#E8CE7A); background:var(--p-amber-bg,#FBF7EC); flex:0 0 120px; display:flex; flex-direction:column; justify-content:center; text-align:center; }
#page-intake .ik-mcnm { font-size:12.5px; font-weight:800; }
#page-intake .ik-mcnat { font-size:10.5px; color:var(--p-text-3,#64748B); }
#page-intake .ik-mcid { font-size:10.5px; color:var(--p-text-3,#64748B); margin-top:3px; }
#page-intake .ik-mcid b { color:var(--p-text,#0F172A); font-weight:700; font-family:ui-monospace,Consolas,monospace; }
#page-intake .ik-mcwhy { display:inline-block; font-size:9.5px; font-weight:800; background:#FDECE9; color:#A32D2D; border:1px solid #F3C7BF; border-radius:20px; padding:2px 8px; margin-top:6px; }
#page-intake .ik-mcfull { font-size:10px; color:var(--p-green-d,#15803D); margin-top:6px; font-weight:700; }
#page-intake .ik-mchint { font-size:10.5px; color:var(--p-text-3,#64748B); margin-top:7px; }

/* §6 — filtered-clients overlay (below the shared p360 dialog z-scale 10000) */
#page-intake .ik-fovl { position:fixed; inset:0; background:rgba(15,40,30,.45); display:none; align-items:center; justify-content:center; z-index:9500; padding:20px; }
#page-intake .ik-fovl.open { display:flex; }
#page-intake .ik-fbox { background:var(--p-surface,#fff); border-radius:12px; max-width:660px; width:100%; overflow:hidden; box-shadow:0 26px 60px -20px rgba(0,0,0,.5); }
#page-intake .ik-fhd { background:linear-gradient(180deg,var(--p-green,#16A34A),var(--p-green-d,#15803D)); color:#fff; padding:11px 15px; font-size:13px; font-weight:800; display:flex; justify-content:space-between; }
#page-intake .ik-fhd .ik-fx { cursor:pointer; opacity:.85; }
#page-intake .ik-ftbl { width:100%; border-collapse:collapse; font-size:11.5px; }
#page-intake .ik-ftbl th { background:var(--p-band-1,#FBF8F0); color:var(--p-text-3,#64748B); text-align:start; padding:8px 11px; font-weight:700; }
#page-intake .ik-ftbl td { padding:9px 11px; border-top:1px solid var(--p-border,#E4DECF); }
#page-intake .ik-fmono { font-family:ui-monospace,Consolas,monospace; }
#page-intake .ik-fyes { background:var(--p-green-d,#15803D); color:#fff; border:none; border-radius:6px; font-size:11px; padding:5px 12px; cursor:pointer; font-family:inherit; }
#page-intake .ik-fnew { padding:11px; text-align:center; font-size:12px; font-weight:800; color:#9a6a00; background:var(--p-amber-bg,#FBF7EC); cursor:pointer; border-top:1px solid var(--p-border,#E4DECF); }

/* §3e — auto-link suggestion strip */
#page-intake .ik-autolink { border:1px solid var(--p-border-2,#BFE6D7); background:color-mix(in srgb, var(--p-green,#16A34A) 6%, var(--p-surface)); border-radius:10px; padding:9px 11px; }

/* §1 — draft «بلاغ معلّق» button (pulsing + spinning hourglass) — the button itself is display-toggled by JS */
#page-intake .ik-draftrow { display:flex; justify-content:center; margin-bottom:10px; }
#page-intake .ik-draftbtn { background:#FDECE9; border:1px solid #E7A9A2; color:#A32D2D; border-radius:8px; font-size:12px; font-weight:800; padding:7px 14px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; animation:ik-draftPulse 1.5s infinite; font-family:inherit; }
@keyframes ik-draftPulse { 0%{box-shadow:0 0 0 0 rgba(226,75,74,.55)} 70%{box-shadow:0 0 0 10px rgba(226,75,74,0)} 100%{box-shadow:0 0 0 0 rgba(226,75,74,0)} }
@keyframes ik-hgFlip { 0%{transform:rotate(0deg)} 45%{transform:rotate(0deg)} 55%{transform:rotate(180deg)} 100%{transform:rotate(180deg)} }
#page-intake .ik-hg-flip { animation:ik-hgFlip 2s ease-in-out infinite; display:inline-block; }

.form-section {
  padding: 8px 22px;
  border-bottom: 1px solid var(--p-border);
  transition: background 0.3s ease;
}
.form-section:last-of-type { border-bottom: none; }
.form-section.band-1 { background: var(--p-band-1); }
.form-section.band-2 { background: var(--p-band-2); }
.form-section.band-3 { background: var(--p-band-3); }

/* INLINE SECTION: label on left, fields on right */
.inline-section {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
}
.inline-section .section-mini-label {
  font-size: 11px; font-weight: 700;
  color: var(--p-text-3);
  text-transform: uppercase; letter-spacing: 0.8px;
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
  min-width: 110px;
}
.inline-section .section-mini-label::before {
  content: ''; width: 3px; height: 12px;
  background: var(--p-navy); border-radius: 2px;
}
.inline-section .inline-fields {
  flex: 1;
  display: flex; gap: 10px; flex-wrap: wrap;
  align-items: center;
}

/* SECTION LABEL (block-style, used when grid is below) */
.section-label {
  font-size: 11px; font-weight: 700; color: var(--p-text-3);
  text-transform: uppercase; letter-spacing: 0.8px;
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 6px;
}
.section-label::before {
  content: ''; width: 3px; height: 12px;
  background: var(--p-navy); border-radius: 2px;
}

.grid { display: grid; gap: 12px; }
.grid.cols-2 { grid-template-columns: 1fr 1fr; }
.grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.grid.cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

/* Contact-info row: phone 2fr, nationality 1fr, duplicate 1fr */
.contact-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
  align-items: start;
}
.contact-row .field-duplicate {
  display: flex; flex-direction: column; gap: 5px;
  justify-content: flex-start;
}

/* Classification row: category + department in two equal columns (company mode);
   Wazara: nationality + category + duplicate */
.classification-row-company { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.classification-row-wazara  { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

.field { display: flex; flex-direction: column; gap: 4px; }
.field.span-2 { grid-column: span 2; }
.field.span-all { grid-column: 1 / -1; }

.field-label {
  font-size: var(--fs-lbl); font-weight: 600; color: var(--p-text);
  display: flex; align-items: center; gap: 4px;
}
.field-label .req { color: var(--p-red); font-weight: 700; }
.field-hint { font-size: 11px; color: var(--p-text-3); margin-top: 2px; }

/* INPUTS */
.inp {
  width: 100%; padding: 8px 12px;
  background: var(--p-surface);
  border: 1.5px solid var(--p-border);
  border-radius: var(--r-md);
  font-family: inherit; font-size: var(--fs-sm);
  color: var(--p-text); outline: none;
  transition: all 0.15s ease; direction: rtl;
}
.inp:focus {
  border-color: var(--p-emerald);
  box-shadow: 0 0 0 3px rgba(26, 127, 100, 0.10);
}
.inp.readonly, .inp[readonly] {
  background: var(--p-band-1); color: var(--p-text-2);
  cursor: default; font-family: inherit;   /* B087 §2.5: was "Inter",monospace — broad rule mis-fonted any Arabic read-only .inp */
  letter-spacing: 0.3px; font-weight: 600;
}
.inp::placeholder { color: var(--p-text-4); }
textarea.inp { resize: vertical; min-height: 60px; line-height: 1.55; }
.inp[type="date"], .inp[type="time"] { font-family: "Inter", sans-serif; }

/* TKT NUMBER PREFIX */
.tn-wrap { position: relative; }
.tn-pfx {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-sm);
  color: var(--p-navy);
  font-weight: 700;
  font-family: "Inter", monospace;
  pointer-events: none;
  z-index: 1;
  letter-spacing: 0.3px;
}
.tn-inp {
  padding-right: 68px !important;
  font-family: "Inter", monospace !important;
  font-weight: 600;
}
.tn-pfx.sd-pfx { color: var(--p-amber); }

/* SEARCHABLE DROPDOWN */
.search-select { position: relative; }
.search-select-input {
  width: 100%; padding: 8px 32px 8px 12px;
  background: var(--p-surface);
  border: 1.5px solid var(--p-border);
  border-radius: var(--r-sm);
  font-family: inherit; font-size: var(--fs-sm);
  color: var(--p-text); outline: none;
  transition: all 0.15s ease; direction: rtl; cursor: pointer;
}
.search-select-input:focus {
  border-color: var(--p-navy);
  box-shadow: 0 0 0 3px rgba(20, 51, 79, 0.08);
}
.search-select::after {
  content: '▾'; position: absolute;
  left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--p-text-3); font-size: 11px; pointer-events: none;
}
.search-select-dropdown {
  display: none; position: absolute;
  top: calc(100% + 4px); right: 0; left: 0;
  background: var(--p-surface);
  border: 1px solid var(--p-border-2);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-pop);
  max-height: 220px; overflow-y: auto; z-index: 50;
}
.search-select.open .search-select-dropdown { display: block; }
.search-select-option {
  padding: 7px 12px; font-size: var(--fs-sm);
  color: var(--p-text); cursor: pointer;
  transition: background 0.1s ease;
}
.search-select-option:hover { background: var(--p-band-1); }
.search-select-option.selected { background: var(--p-navy-bg); color: var(--p-navy); font-weight: 600; }

/* TOGGLE BUTTONS */
.tog-group { display: flex; gap: 6px; flex-wrap: wrap; }
.tog-group.inline-tight { gap: 5px; }
.tog-btn {
  flex: 1; min-width: 0;
  padding: 8px 10px;
  background: var(--p-surface);
  border: 1.5px solid var(--p-border);
  border-radius: var(--r-sm);
  font-family: inherit; font-size: var(--fs-sm);
  font-weight: 600; color: var(--p-text-2);
  cursor: pointer; transition: all 0.12s ease;
  text-align: center; white-space: nowrap;
}
.tog-btn:hover { border-color: var(--p-border-2); background: var(--p-band-1); color: var(--p-text); }
.tog-btn.on-red   { background: var(--p-red-bg);   border-color: var(--p-red);   color: var(--p-red); }
.tog-btn.on-amber { background: var(--p-amber-bg); border-color: var(--p-amber); color: var(--p-amber); }
.tog-btn.on-green { background: var(--p-green-bg); border-color: var(--p-green); color: var(--p-green); }
.tog-btn.on-navy  { background: var(--p-navy-bg);  border-color: var(--p-navy);  color: var(--p-navy); }

/* DUPLICATE TOGGLE */
/* DUPLICATE TOGGLE — inline pair (toggle + input side-by-side) */
.dup-inline-wrap {
  display: flex;
  gap: 6px;
  align-items: stretch;
  width: 100%;
}
.dup-inline-wrap .chk-toggle {
  flex: 0 0 auto;
  width: auto;
  white-space: nowrap;
}
.dup-inline-wrap .dup-inline-input {
  flex: 1;
  min-width: 0;
}
.dup-inline-wrap .dup-inline-input .tn-wrap { width: 100%; }
.dup-inline-wrap .dup-inline-input .inp { width: 100%; }

.chk-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1.5px dashed var(--p-border-2);
  border-radius: var(--r-sm); background: transparent;
  font-family: inherit; font-size: var(--fs-sm);
  font-weight: 600; color: var(--p-text-2);
  cursor: pointer; transition: all 0.15s ease;
  width: 100%;
  justify-content: center;
}
.chk-toggle:hover { border-color: var(--p-navy-l); background: var(--p-navy-bg); color: var(--p-navy); }
.chk-toggle.active {
  border-style: solid; border-color: var(--p-navy);
  background: var(--p-navy-bg); color: var(--p-navy);
}

/* SD SECTION */
.sd-trigger {
  width: 100%; padding: 10px 14px;
  background: var(--p-amber-bg);
  border: 1.5px dashed var(--p-amber);
  border-radius: var(--r-sm);
  color: var(--p-amber); font-family: inherit;
  font-size: var(--fs-sm); font-weight: 700;
  cursor: pointer; display: flex;
  align-items: center; justify-content: center; gap: 8px;
  transition: all 0.15s ease;
}
.sd-trigger:hover, .sd-trigger.active {
  background: var(--p-amber); color: #fff; border-style: solid;
}
.sd-panel {
  display: none; margin-top: 10px; padding: 14px;
  background: var(--p-surface);
  border: 1px solid var(--p-amber);
  border-radius: var(--r-sm);
}
.sd-panel.open { display: block; }

/* PHONE LOOKUP */
.phone-lookup {
  display: none;
  margin-top: 6px;
  background: var(--p-surface);
  border: 1px solid var(--p-navy-l);
  border-radius: var(--r-sm);
  overflow: hidden;
  animation: slideDown 0.22s ease;
}
.phone-lookup.show { display: block; }
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.phone-lookup-head {
  padding: 7px 12px;
  background: var(--p-navy-bg);
  color: var(--p-navy);
  font-size: 11px; font-weight: 700;
  display: flex; justify-content: space-between; align-items: center;
}
.phone-lookup-head .count {
  background: var(--p-navy); color: #fff;
  padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700;
}
.phone-lookup-row {
  padding: 7px 12px;
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 1fr 0.7fr 0.8fr;   /* tkt · اسم العميل · cat · status · date */
  gap: 10px;
  font-size: 12px;
  border-top: 1px solid var(--p-border);
  align-items: center;
}
.phone-lookup-row:hover { background: var(--p-band-1); cursor: pointer; }
.phone-lookup-row .pl-tkt {
  font-family: "Inter", monospace; font-weight: 600; color: var(--p-navy);
}
.phone-lookup-row .pl-name { color: var(--p-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-lookup-row .pl-cat { color: var(--p-text-2); }
.phone-lookup-row .pl-status {
  font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  width: fit-content;
}
.pl-status.open    { background: var(--p-amber-bg); color: var(--p-amber); }
.pl-status.closed  { background: var(--p-green-bg); color: var(--p-green); }
.pl-status.urgent  { background: var(--p-red-bg);   color: var(--p-red); }
.phone-lookup-row .pl-date { color: var(--p-text-3); font-size: 11px; }

/* VOICE BUTTON */
.desc-wrap { position: relative; }
.voice-btn {
  position: absolute; top: 26px; left: 8px;
  width: 28px; height: 28px;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 13px;
  color: var(--p-text-3);
  transition: all 0.15s ease; z-index: 2;
}
.voice-btn:hover { border-color: var(--p-navy); color: var(--p-navy); background: var(--p-navy-bg); }
.voice-btn.recording {
  background: var(--p-red); border-color: var(--p-red);
  color: #fff; animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.field-with-voice .inp { padding-left: 40px; }

/* ATTACHMENTS */
.attach-grid-wazara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.attach-slot {
  position: relative;
  border: 2px dashed var(--p-border-2);
  border-radius: var(--r-md);
  background: var(--p-surface);
  padding: 16px 12px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; transition: all 0.15s ease;
  min-height: 96px; text-align: center;
}
.attach-slot:hover { border-color: var(--p-navy); background: var(--p-navy-bg); }
/* B017-D: drag-over state for the intake capture slots (wazara + aadi) — visible while a file hovers the slot */
.attach-slot.cap-dragover,
.attach-single.cap-dragover { border-color: var(--p-green); background: var(--p-green-bg); border-style: solid; }
.attach-slot .plus {
  width: 30px; height: 30px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; color: #fff;
}
.attach-slot.required .plus  { background: var(--p-red); }
.attach-slot.suggested .plus { background: var(--p-amber); }
.attach-slot.optional .plus  { background: var(--p-green); }
.attach-slot .lbl { font-size: 12px; font-weight: 600; color: var(--p-text-2); }
.attach-slot .req-dot {
  position: absolute; top: 8px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--p-red);
}
/* Intake §«النقطة الزاويّة ملوّنة بمرحلتها»: الفتح=أحمر(req-dot) · الرد=أخضر · الإغلاق=أصفر. */
.attach-slot .stage-dot { position: absolute; top: 8px; inset-inline-end: 8px; width: 8px; height: 8px; border-radius: 50%; }
.attach-slot .stage-dot.dot-green { background: var(--p-green); }
.attach-slot .stage-dot.dot-yellow { background: var(--p-amber); }
.attach-single {
  border: 2px dashed var(--p-border-2);
  border-radius: var(--r-md);
  background: var(--p-surface);
  padding: 24px 16px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; transition: all 0.15s ease;
  text-align: center;
}
.attach-single:hover { border-color: var(--p-navy); background: var(--p-navy-bg); }
.attach-single .plus {
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--p-navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700;
}
.attach-single .lbl { font-size: 13px; font-weight: 700; color: var(--p-text); }
.attach-single .sub { font-size: 11px; color: var(--p-text-3); }
.attach-hint { font-size: 11px; color: var(--p-text-3); text-align: center; margin-top: 6px; }

/* FORM ACTIONS */
.form-actions {
  padding: 14px 22px;
  background: linear-gradient(180deg, #FBFDFC, #F3F9F6);
  border-top: 1px solid #DCEEE6;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.btn {
  padding: 9px 18px;
  border-radius: var(--r-md);
  border: 1.5px solid transparent;
  font-family: inherit; font-size: var(--fs-sm);
  font-weight: 700; cursor: pointer;
  transition: all 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.1);
  display: inline-flex; align-items: center; gap: 7px;
}
.btn:active { transform: translateY(0) !important; }
.btn-primary {
  background: linear-gradient(135deg, #1A7F64, #145F4C);
  color: #fff;
  box-shadow: 0 2px 6px rgba(26, 127, 100, 0.22);
}
.btn-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(26, 127, 100, 0.30);
}
.btn-success {
  background: linear-gradient(135deg, #1A7F64, #145F4C);
  color: #fff;
  box-shadow: 0 4px 12px rgba(26, 127, 100, 0.30);
}
.btn-success:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(26, 127, 100, 0.38);
}
.btn-ghost { background: transparent; border-color: var(--p-border-2); color: var(--p-text-2); }
.btn-ghost:hover {
  background: var(--p-band-1);
  color: var(--p-text);
  border-color: var(--p-text-3);
}
.btn-warn { background: transparent; border-color: var(--p-gold); color: var(--p-gold-d); }
.btn-warn:hover {
  background: linear-gradient(135deg, #C5970A, #9C7A08);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(197, 151, 10, 0.32);
}

.last-ticket { font-size: 11px; color: var(--p-text-3); font-family: "Inter", monospace; }
.last-ticket strong { color: var(--p-text-2); font-weight: 600; }

/* GLOBAL FOOTER */
.global-footer {
  border-top: 1px solid var(--p-border);
  background: var(--p-surface);
  padding: 10px 32px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; color: var(--p-text-3);
}
.gf-left, .gf-right { font-family: "Inter", sans-serif; }

/* MODE VISIBILITY */
.wazara-only { display: none; }
.wazara-only.show { display: flex; flex-direction: column; gap: 4px; }
/* Wazara extraction: amber tint on a field just filled by «استخرج» (a suggestion to confirm). */
.extract-suggested { background: #FEF9C3 !important; box-shadow: inset 0 0 0 1px #FACC15; }
.wazara-only.show.block-show { display: block; }
.wazara-only.show.grid-show { display: grid; }
.company-only { display: none; }
.company-only.show { display: flex; flex-direction: column; gap: 4px; }
.company-only.show.grid-show { display: grid; }

/* ════ Intake redesign (Action List §14) — layout-only restyle of the Wazara intake ════ */
/* Softer (less rounded) corners — ~6px, scoped to the intake page only. */
#page-intake .inp, #page-intake .tog-btn, #page-intake .btn, #page-intake .chk-toggle,
#page-intake .tn-wrap, #page-intake .lc-col, #page-intake .attach-slot, #page-intake .sd-chip,
#page-intake .intake-sec, #page-intake .ss-inp, #page-intake .ss-drop { border-radius: 6px !important; }
/* Section header titles (kept for now — Sajed reviews live). */
#page-intake .intake-sec-title { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:800;
  color: var(--p-text-2); margin: 0 0 10px; letter-spacing:.2px; }
#page-intake .intake-collapser { cursor:pointer; justify-content:space-between; user-select:none; }
#page-intake .intake-collapse-chev { font-size:12px; color: var(--p-text-3); }
/* Lifecycle: three equal-height parallel stage columns. */
#page-intake .lifecycle-grid { display:grid; gap:10px; align-items:stretch; }
#page-intake .lc-col { display:flex; flex-direction:column; gap:6px; padding:8px;
  background: var(--p-surface); border:1px solid var(--p-border); }
/* lc-col carries .wazara-only/.company-only — its id-level display:flex would otherwise beat the
   single-class .wazara-only{display:none}; re-assert the hide at higher specificity. */
#page-intake .lc-col.wazara-only:not(.show), #page-intake .lc-col.company-only:not(.show) { display:none; }
/* Stage header: name + «استخراج» on ONE line, vertically consistent across the 3 columns.
   .lc-head also carries .wazara-only.show, whose helper sets flex-direction:column — re-assert ROW
   here (id specificity) so the header text + extract button share one line, not stack. */
#page-intake .lc-head { display:flex; flex-direction:row; align-items:center; justify-content:space-between;
  font-size:12.5px; font-weight:800; color: var(--p-text-2); gap:6px; flex-wrap:nowrap; min-height:26px; }
#page-intake .lc-head > span { white-space:nowrap; }
#page-intake .lc-extract-btn { padding:3px 9px; font-size:11px; font-weight:700; font-family:inherit; white-space:nowrap;
  flex:0 0 auto; cursor:pointer; color:#145F4C; background:#E6F4F1; border:1.5px solid #B7E0D2; border-radius:6px; }
#page-intake .lc-extract-btn:disabled { opacity:.6; cursor:default; }
#page-intake .lc-datetime { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
#page-intake .lc-dt { display:flex; flex-direction:column; gap:3px; }
/* B060: the open date/time row + the «✨ استخراج» header are WAZARA-ONLY. Their ID-level display rules above
   beat the single-class .wazara-only{display:none}, so re-assert the hide at ID specificity for عادي mode. */
#page-intake .lc-head.wazara-only:not(.show), #page-intake .lc-datetime.wazara-only:not(.show) { display:none; }
/* B060: عادي auto-capture chip — «وقت وتاريخ الفتح يُسجَّلان تلقائيًّا» (no manual date/time in عادي). */
.intake-autocap-chip { display:inline-flex; align-items:center; gap:6px; margin-top:9px; background:var(--p-band-1,#E1F5EE);
  color:var(--p-green-d,#0F6E56); border:1px solid var(--p-border-2,#9FE1CB); border-radius:7px; padding:5px 11px; font-size:11px; font-weight:700; }
#page-intake .lc-dt-lbl { font-size:10.5px; color: var(--p-text-3); margin:0; }

/* ── B044 — field-agent MOBILE app-shell (full-screen overlay; shown ONLY for cc_field_agent on mobile).
   Theme-token based (adapts day/night). The cockpit is untouched — this overlays it for the field role only. ── */
#field-shell { position:fixed; inset:0; z-index:9000; display:none; flex-direction:column; background:var(--p-bg, #EAF3EE); }
#field-shell.on { display:flex; }
.fsh-bar { background:linear-gradient(180deg, var(--p-green), var(--p-green-d)); color:#fff; padding:calc(14px + env(safe-area-inset-top, 0px)) 14px 12px; display:flex; align-items:center; gap:9px; flex-shrink:0; }
.fsh-brand { font-weight:900; font-size:15px; display:flex; align-items:center; gap:8px; }
.fsh-brand .lg { width:24px; height:24px; border-radius:6px; background:#fff; color:var(--p-green-d); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:13px; }
.fsh-burger { margin-inline-start:auto; font-size:18px; opacity:.92; background:none; border:0; color:#fff; cursor:pointer; }
.fsh-body { flex:1; overflow:auto; -webkit-overflow-scrolling:touch; padding:14px 13px; display:flex; flex-direction:column; gap:13px; }
.fsh-page { display:none; flex-direction:column; gap:13px; }
.fsh-page.on { display:flex; }
.fsh-nav { flex-shrink:0; background:var(--p-surface, #fff); border-top:1px solid var(--p-border); display:flex; padding:7px 4px calc(9px + env(safe-area-inset-bottom, 0px)); }
.fsh-tab { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10px; font-weight:700; color:var(--p-text-3); background:none; border:0; cursor:pointer; font-family:inherit; }
.fsh-tab .i { font-size:20px; }
.fsh-tab.on { color:var(--p-green); }
.fsh-cta { background:linear-gradient(150deg, var(--p-green), var(--p-green-d)); color:#fff; border-radius:18px; padding:20px 16px; text-align:center; box-shadow:0 12px 26px -12px rgba(15,110,86,.6); cursor:pointer; border:0; width:100%; font-family:inherit; }
.fsh-cta .ic { font-size:34px; } .fsh-cta .t { font-size:17px; font-weight:900; margin-top:6px; } .fsh-cta .s { font-size:11.5px; opacity:.9; margin-top:3px; }
.fsh-secthd { font-size:12.5px; font-weight:900; color:var(--p-text-2); display:flex; align-items:center; gap:6px; }
.fsh-secthd .all { margin-inline-start:auto; font-size:11px; color:var(--p-green); font-weight:700; cursor:pointer; }
.fsh-stats { display:flex; gap:9px; }
.fsh-stat { flex:1; background:var(--p-surface, #fff); border:1px solid var(--p-border); border-radius:13px; padding:11px 8px; text-align:center; }
.fsh-stat .n { font-size:20px; font-weight:900; } .fsh-stat .l { font-size:10px; color:var(--p-text-3); font-weight:700; margin-top:1px; }
.fsh-stat.open .n { color:var(--p-gold, #C5970A); } .fsh-stat.prog .n { color:var(--p-green); } .fsh-stat.done .n { color:var(--p-text-3); }
.fsh-tk { background:var(--p-surface, #fff); border:1px solid var(--p-border); border-radius:13px; padding:11px 12px; display:flex; flex-direction:column; gap:7px; }
.fsh-tk .top { display:flex; align-items:center; gap:8px; }
.fsh-tk .id { font-size:11px; font-weight:800; color:var(--p-text-3); direction:ltr; }
.fsh-tk .ttl { font-size:12.5px; font-weight:800; color:var(--p-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fsh-pill { font-size:10px; font-weight:800; border-radius:999px; padding:3px 9px; margin-inline-start:auto; white-space:nowrap; }
.fsh-pill.open { background:var(--p-gold-bg, #FBF1D6); color:var(--p-amber, #BA7517); border:1px solid var(--p-gold, #E8CE7A); }
.fsh-pill.prog { background:var(--p-band-1, #E1F5EE); color:var(--p-green-d); border:1px solid var(--p-border-2, #BFE6D7); }
.fsh-pill.done { background:var(--p-band-2, #EEF0EC); color:var(--p-text-3); border:1px solid var(--p-border); }
.fsh-tk .meta { display:flex; align-items:center; gap:9px; font-size:10px; color:var(--p-text-3); flex-wrap:wrap; }
.fsh-tk .dep { background:var(--p-info-bg, #E5F0F6); color:var(--p-info, #2A6F97); border:1px solid var(--p-info-line, #bcd9e8); border-radius:6px; padding:1px 6px; font-weight:700; }
.fsh-empty { text-align:center; color:var(--p-text-3); font-size:12px; padding:18px; }
.fsh-filter { display:flex; gap:6px; }
.fsh-fbtn { font-size:11.5px; font-weight:700; border:1.3px solid var(--p-border); background:var(--p-surface, #fff); border-radius:999px; padding:6px 11px; color:var(--p-text-2); cursor:pointer; font-family:inherit; }
.fsh-fbtn.on { border-color:var(--p-green); background:var(--p-band-1, #E1F5EE); color:var(--p-green-d); }
/* B069 item 5 — field ticket-detail view */
.fsh-tk { cursor:pointer; }
.fsh-tkv-hd { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.fsh-tkv-hd .id { font-weight:900; font-size:15px; color:var(--p-text); }
.fsh-tkv-sub { font-size:14px; font-weight:700; color:var(--p-text); margin-bottom:10px; }
.fsh-tkv-kv { display:flex; gap:8px; font-size:13px; padding:5px 0; border-bottom:1px solid var(--p-border, rgba(15,110,86,.12)); }
.fsh-tkv-kv .k { color:var(--p-text-2); min-width:64px; font-weight:700; }
.fsh-tkv-kv .v { color:var(--p-text); flex:1; }
.fsh-tkv-desc { margin-top:10px; font-size:13px; line-height:1.6; color:var(--p-text); white-space:pre-wrap; background:var(--p-band-1,#F6F2E8); border-radius:10px; padding:10px 12px; }
.fsh-tkv-attlbl { font-size:12px; font-weight:800; color:var(--p-text-2); margin:12px 0 6px; }
.fsh-tkv-atts { margin-top:6px; }
.fsh-soon { text-align:center; color:var(--p-text-3); font-size:12.5px; padding:26px 14px; line-height:1.8; }
.fsh-acc { display:flex; flex-direction:column; gap:8px; }
.fsh-acc .it { display:flex; align-items:center; gap:9px; padding:11px 13px; border:1px solid var(--p-border); border-radius:11px; background:var(--p-surface, #fff); color:var(--p-text); font-size:13px; cursor:pointer; font-family:inherit; text-align:start; width:100%; }
.fsh-acc .it .ar { margin-inline-start:auto; color:var(--p-text-3); }
/* B044 Stage 2-4 — slim report form */
.fsh-fhd { font-size:14px; font-weight:900; color:var(--p-green-d); }
.fsh-auto { display:flex; align-items:center; gap:7px; background:var(--p-info-bg, #E5F0F6); border:1px solid var(--p-info-line, #bcd9e8); border-radius:11px; padding:9px 12px; font-size:12px; font-weight:800; color:var(--p-info, #2A6F97); }
.fsh-auto.s2 { background:var(--p-band-2, #F4EFE2); border-color:var(--p-border); color:var(--p-text-2); }
.fsh-autotag { margin-inline-start:auto; font-size:9.5px; font-weight:800; background:var(--p-surface, #fff); border:1px solid var(--p-info-line, #bcd9e8); border-radius:5px; padding:1px 6px; }
.fsh-fld { display:flex; flex-direction:column; gap:6px; }
.fsh-fld > label { font-size:11.5px; font-weight:800; color:var(--p-text-2); }
.fsh-req { color:var(--p-red, #B5462F); font-weight:900; }
.fsh-hint { font-weight:600; color:var(--p-text-3); font-size:10px; }
.fsh-input { width:100%; background:var(--p-surface, #fff); border:1.4px solid var(--p-border); border-radius:11px; padding:11px 12px; font-size:16px; font-family:inherit; color:var(--p-text); }
/* B066 item 2: iOS Safari auto-zooms (and never restores) when a focused input's font-size is < 16px.
   Force EVERY field-shell input/select/textarea to ≥16px so focusing a field never zooms. (We do NOT
   disable user zoom on the viewport — that harms accessibility and isn't needed.) */
#field-shell input, #field-shell select, #field-shell textarea { font-size:16px; }
/* B063 item 3: a blocked-submit (missing mandatory field) highlights the field + shows an inline message. */
.fsh-input.fsh-err { border-color:var(--p-red, #C0392B); box-shadow:0 0 0 3px rgba(192,57,43,.16); }
.fsh-fielderr { display:none; font-size:11.5px; font-weight:800; color:var(--p-red, #C0392B); margin-top:2px; }
.fsh-fielderr.on { display:block; }
.fsh-ta { min-height:58px; resize:none; }
.fsh-deps { display:flex; flex-wrap:wrap; gap:6px; }
.fsh-dep { font-size:11.5px; font-weight:700; border:1.3px solid var(--p-border); background:var(--p-surface, #fff); border-radius:999px; padding:6px 11px; color:var(--p-text-2); cursor:pointer; font-family:inherit; }
.fsh-dep.on { border-color:var(--p-info, #2A6F97); background:var(--p-info-bg, #E5F0F6); color:var(--p-info, #2A6F97); }
/* B062 item 4 — collapsed party picker: removable selected chips + a dashed «＋ أضف جهة» select */
.fsh-dep .x { cursor:pointer; color:var(--p-info, #2A6F97); margin-inline-start:3px; font-weight:800; }
.fsh-dep-add { border:1.3px dashed var(--p-border-2, #BFE6D7); background:var(--p-band-1, #E1F5EE); color:var(--p-green-d); border-radius:999px; padding:6px 11px; font-size:11.5px; font-weight:700; font-family:inherit; cursor:pointer; }
/* B062 item 5 — the standalone «اختر موقعًا آخر» control (banner removed) */
.fsh-locpick-full { width:100%; text-align:center; margin-inline-start:0; }
.fsh-locline { display:flex; align-items:center; gap:8px; background:var(--p-band-1, #E1F5EE); border:1px solid var(--p-border-2, #BFE6D7); border-radius:11px; padding:9px 11px; font-size:11.5px; color:var(--p-green-d); font-weight:700; }
.fsh-locline .pin { font-size:14px; }
.fsh-locpick { margin-inline-start:auto; background:var(--p-surface, #fff); border:1px solid var(--p-border-2, #BFE6D7); border-radius:8px; padding:5px 9px; font-size:11px; font-weight:800; color:var(--p-green-d); white-space:nowrap; cursor:pointer; font-family:inherit; }
.fsh-media { display:flex; gap:8px; }
.fsh-mbtn { flex:1; border:1.6px dashed var(--p-border-2, #BFE6D7); background:var(--p-band-1, #E1F5EE); border-radius:13px; padding:12px 4px; text-align:center; color:var(--p-green-d); cursor:pointer; }
.fsh-mbtn .i { font-size:22px; } .fsh-mbtn .l { font-size:10px; font-weight:800; margin-top:4px; }
.fsh-mthumbs { display:flex; gap:7px; flex-wrap:wrap; }
.fsh-mthumb { width:50px; height:50px; border-radius:9px; background:linear-gradient(135deg,#cfe3da,#9ec3b3); position:relative; display:flex; align-items:center; justify-content:center; font-size:17px; color:#fff; }
.fsh-mthumb .x { position:absolute; top:-5px; inset-inline-end:-5px; background:var(--p-red, #B5462F); color:#fff; width:16px; height:16px; border-radius:50%; font-size:9px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.fsh-mthumb .geo { position:absolute; bottom:-3px; inset-inline-start:-3px; background:var(--p-green); color:#fff; font-size:8px; border-radius:50%; width:15px; height:15px; display:flex; align-items:center; justify-content:center; }
/* B064 item 2a — audio-note chip + its inline play control. */
.fsh-mthumb.aud { background:linear-gradient(135deg,#0E7C5C,#0B5240); }
.fsh-mthumb .play { position:absolute; bottom:-3px; inset-inline-end:-3px; background:#fff; color:var(--p-green-d); font-size:8px; border-radius:50%; width:16px; height:16px; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.3); }
/* B064 item 2a — record button while recording (pulsing red). */
.fsh-rec { font-family:inherit; }
.fsh-rec.rec-on { border-style:solid; border-color:var(--p-red,#C0392B); background:rgba(192,57,43,.12); color:var(--p-red,#C0392B); animation:fshRecPulse 1.1s ease-in-out infinite; }
@keyframes fshRecPulse { 0%,100%{ box-shadow:0 0 0 0 rgba(192,57,43,.45);} 50%{ box-shadow:0 0 0 6px rgba(192,57,43,0);} }
/* B064 item 2b — dictation button anchored inside the description textarea. */
.fsh-desc-wrap { position:relative; }
.fsh-dictate { position:absolute; inset-inline-end:8px; bottom:8px; background:var(--p-band-1,#E1F5EE); border:1.4px solid var(--p-border-2,#BFE6D7); border-radius:9px; width:34px; height:34px; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; }
.fsh-dictate.rec-on { border-color:var(--p-red,#C0392B); background:rgba(192,57,43,.12); animation:fshRecPulse 1.1s ease-in-out infinite; }
/* B064 item 1 — dismissible install hint bar (field shell only). */
.fsh-install { display:flex; align-items:center; gap:8px; background:var(--p-band-3,#F1ECDD); border-bottom:1px solid var(--p-border,rgba(15,110,86,.16)); padding:8px 12px; flex-shrink:0; }
.fsh-install-txt { flex:1; font-size:11.5px; font-weight:800; color:var(--p-text,#1f3a31); line-height:1.35; }
.fsh-install-btn { background:linear-gradient(150deg, var(--p-green), var(--p-green-d)); color:#fff; font-weight:900; font-size:12px; border:0; border-radius:9px; padding:7px 14px; cursor:pointer; font-family:inherit; white-space:nowrap; }
.fsh-install-x { background:none; border:0; color:var(--p-text-2,#5a6b63); font-size:13px; cursor:pointer; padding:2px 4px; line-height:1; }
/* B066 item 1 — field map picker (Leaflet). */
.fsh-map { width:100%; height:300px; border-radius:12px; border:1.4px solid var(--p-border); overflow:hidden; margin-top:8px; }
.fsh-mapsearch { display:flex; gap:8px; align-items:center; margin-top:6px; }
.fsh-mapsearch .fsh-input { flex:1; }
.fsh-mapsearch .fsh-install-btn { flex-shrink:0; }
.fsh-map-addr { font-size:12px; color:var(--p-text-2,#5a6b63); margin-top:6px; min-height:14px; line-height:1.4; }
.leaflet-container { font-family:inherit; }
.fsh-submit { background:linear-gradient(150deg, var(--p-green), var(--p-green-d)); color:#fff; font-size:15px; font-weight:900; border:0; border-radius:14px; padding:15px; text-align:center; cursor:pointer; font-family:inherit; box-shadow:0 10px 22px -10px rgba(15,110,86,.6); }
.fsh-submit:disabled { opacity:.6; }
.fsh-lnote { font-size:11.5px; color:var(--p-text-2); background:var(--p-band-2, #F4EFE2); border:1px solid var(--p-border); border-radius:11px; padding:10px 12px; line-height:1.6; }
.fsh-portalflag { font-size:11px; color:var(--p-amber, #BA7517); background:var(--p-gold-bg, #FBF1D6); border:1px dashed var(--p-gold, #E8CE7A); border-radius:10px; padding:9px 11px; line-height:1.6; }
#page-intake .lc-col textarea.inp { flex:1; min-height:110px; }
#page-intake .lc-attach .attach-slot { margin-top:2px; }

/* ===== Intake polish FINAL — narrow tall column · no center scroll · calm attachments ===== */
/* 1) Narrow, centered reading column (the mockup). Caps width in plain AND cockpit layouts. */
#page-intake .form-card { max-width: 820px; margin-inline: auto; }
/* Under the ops cockpit: scroll the CENTER COLUMN as one (no mid-card scrollbar); the card sizes to
   its CONTENT (kills the dead space that the old flex:1 1 auto growth left below the form). */
body.ops-active #page-intake .ops-center { overflow-y: auto; }
body.ops-active #page-intake .ops-center > .form-card { flex: 0 0 auto; height: auto; max-height: none; overflow: visible; max-width: 820px; margin-inline: auto; }
/* 5+6) Attachment slots ~40% shorter, label INLINE with «+», ONE calm colour (navy). Required keeps
   only the small red dot (.req-dot). */
#page-intake .attach-slot { min-height: 57px; padding: 8px 10px; flex-direction: row; justify-content: flex-start; gap: 8px; text-align: start; }
#page-intake .attach-slot .plus { width: 22px; height: 22px; font-size: 14px; border-radius: 6px; background: var(--p-navy) !important; flex: 0 0 auto; }
#page-intake .attach-slot .lbl { font-size: 11.5px; }
/* 9) «رقم تذكرة الوزارة» (and the duplicate-of) ticket-number inputs are short, not a full cell. */
#page-intake .tn-wrap { max-width: 165px; }
/* 10) Departments: chips render BESIDE the label inline (not stacked underneath it). */
#page-intake #waz-dept-field { flex-direction: row; align-items: flex-start; gap: 10px; }
#page-intake #waz-dept-field > .field-label { flex: 0 0 auto; margin-top: 9px; white-space: nowrap; }
#page-intake #waz-dept-field > #ss-dept-waz-wrap { flex: 1 1 auto; min-width: 0; }
#page-intake #ss-dept-waz-wrap .ss-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
#page-intake #ss-dept-waz-wrap .dept-ms-chips { margin: 0 !important; }
#page-intake #ss-dept-waz-wrap .ss-inp { flex: 1 1 140px; min-width: 120px; }
/* Two-titles leak fix: an id-specificity .intake-sec-title{display:flex} was overriding the
   single-class .company-only/.wazara-only{display:none}; re-assert the hide at higher specificity so
   only the correct lifecycle title shows per mode. */
#page-intake .intake-sec-title.company-only:not(.show), #page-intake .intake-sec-title.wazara-only:not(.show) { display: none; }

/* ===== Cockpit 1/5 — intake POPUP shell (tracker .modal structure, Pathway360 colours) ===== */
/* Theme-aware dimmed veil (same family as the chat popup): near-white day / soft-dark night. */
.intake-popup { position: fixed; inset: 0; z-index: 120; display: none; align-items: center; justify-content: center;
  padding: 2vh 2vw; background: rgba(248,250,252,0.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
html[data-theme="night"] .intake-popup { background: rgba(15,23,42,0.55); }
.intake-popup.open { display: flex; }
.intake-popup-card { width: min(960px,94vw); max-height: min(90vh,940px); display: flex; flex-direction: column; overflow: hidden;
  background: var(--p-surface); border: 1px solid var(--p-border); border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,0.45); }
.intake-popup-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 16px;
  background: var(--p-hd-grad); border-bottom: 1px solid var(--p-border); flex-shrink: 0; }
/* A-4 (§8.10): a convert-prefilled intake popup signals its mode STRONGLY — عادي = teal,
   وزارة = ministry amber. Driven by body.mode-wazara, which flips live as the agent toggles mode. */
.intake-popup.intake-from-convert .intake-popup-head { background: linear-gradient(135deg,#0F766E,#0B5C55); }
body.mode-wazara .intake-popup.intake-from-convert .intake-popup-head { background: linear-gradient(135deg,#B45309,#92400E); }
.intake-popup.intake-from-convert .intake-popup-card { box-shadow: 0 0 0 3px #0F766E, 0 24px 70px rgba(0,0,0,0.45); }
body.mode-wazara .intake-popup.intake-from-convert .intake-popup-card { box-shadow: 0 0 0 3px #B45309, 0 24px 70px rgba(0,0,0,0.45); }
/* PART B (Tracker close-out) — live-lock view-only banner (intake popup + chat popup). */
.ck-lock-banner { display:flex; align-items:center; gap:8px; padding:7px 14px; flex-shrink:0; font-size:12.5px; font-weight:700;
  background:#FEF3C7; color:#92400E; border-bottom:1px solid #FCD34D; }
html[data-theme="night"] .ck-lock-banner { background:rgba(217,119,6,.20); color:#FCD34D; border-color:rgba(217,119,6,.42); }
.ck-lock-banner .ck-lock-ic { font-size:15px; }
.ck-lock-force { margin-inline-start:auto; background:#dc2626; color:#fff; border:none; border-radius:7px; padding:4px 12px; font-weight:700; font-size:11.5px; cursor:pointer; white-space:nowrap; }
.ck-lock-force:hover { filter:brightness(1.1); }
/* F4 — shared lock-warning overlay (copied from the tracker, themed --p-*). z 9999 stays BELOW the p360 dialogs (10000). */
#lockWarningOverlay { position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); }
#lockWarningOverlay.show { display:flex; }
.lock-warning-box { background:var(--p-surface); border:2px solid var(--p-red); border-radius:16px; padding:40px 48px; text-align:center; max-width:520px; animation:lockPop .2s ease; }
@keyframes lockPop { from { transform:scale(.85); opacity:0; } to { transform:scale(1); opacity:1; } }
.lock-warning-icon { font-size:64px; display:block; margin-bottom:16px; }
.lock-warning-msg { font-size:28px; font-weight:800; color:var(--p-red-d); line-height:1.4; }
.lock-warning-sub { font-size:16px; color:var(--p-text-3); margin-top:10px; }
@media (prefers-reduced-motion: reduce) { .lock-warning-box { animation:none; } }
/* PART F: gaps banner + filled capture slot */
.intake-gaps-banner { background:var(--p-amber-bg, #fef3c7); color:var(--p-amber-d, #92400e); border-bottom:1px solid var(--p-amber, #f59e0b); padding:8px 16px; font-size:12px; font-weight:700; }
.attach-slot.cap-filled { border-color:var(--p-green, #16a34a) !important; background:var(--p-green-bg, #dcfce7) !important; }
.attach-slot.cap-filled .plus { background:var(--p-green, #16a34a) !important; }
.ck-idle-warn { position:fixed; inset:0; z-index:130; display:flex; align-items:center; justify-content:center; background:rgba(15,23,42,0.45); }
.ck-idle-card { background:var(--p-surface); border:1px solid var(--p-border); border-radius:14px; box-shadow:0 24px 70px rgba(0,0,0,0.45);
  padding:22px 26px; text-align:center; display:flex; flex-direction:column; gap:14px; max-width:380px; }
.ck-idle-msg { font-size:14px; font-weight:800; color:var(--p-text-2); }
.ck-idle-stay { background:var(--p-teal); color:#fff; border:none; border-radius:9px; padding:9px 20px; font-weight:800; font-size:13px; cursor:pointer; }
.ck-idle-stay:hover { filter:brightness(1.07); }
/* PART A — category MERGE modal */
.ck-merge-modal { position:fixed; inset:0; z-index:135; display:flex; align-items:center; justify-content:center; background:rgba(15,23,42,0.5); padding:2vh 2vw; }
.ck-merge-card { width:min(720px,96vw); max-height:92vh; display:flex; flex-direction:column; overflow:hidden; background:var(--p-surface); border:1px solid var(--p-border); border-radius:14px; box-shadow:0 24px 70px rgba(0,0,0,0.45); }
.ck-merge-hd { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:var(--p-hd-grad); color:#fff; font-weight:800; font-size:15px; flex-shrink:0; }
.ck-merge-x { border:1px solid rgba(255,255,255,0.3); background:rgba(255,255,255,0.12); color:#fff; width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:13px; }
.ck-merge-body { padding:14px 16px; overflow-y:auto; display:flex; flex-direction:column; gap:12px; }
.ck-merge-level { display:flex; gap:8px; }
.ck-merge-lvl { flex:1; padding:8px; border-radius:9px; border:1px solid var(--p-border); background:var(--p-surface); color:var(--p-text-2); font-weight:800; font-size:12.5px; cursor:pointer; }
.ck-merge-lvl.on { background:var(--p-teal-bg); color:var(--p-teal); border-color:var(--p-teal); }
.ck-merge-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ck-merge-panel { border:1px solid var(--p-border); border-radius:10px; padding:10px; display:flex; flex-direction:column; gap:6px; }
.ck-merge-panel label { font-size:10.5px; font-weight:700; color:var(--p-text-3); }
.ck-merge-panel .inp { width:100%; }
.ck-merge-panel.from { border-color:#F5A3A3; background:rgba(220,38,38,.05); }
.ck-merge-panel.to { border-color:#B3D995; background:rgba(21,128,61,.05); }
.ck-merge-ptitle { font-size:12px; font-weight:800; margin-bottom:2px; }
.ck-merge-panel.from .ck-merge-ptitle { color:#B91C1C; } .ck-merge-panel.to .ck-merge-ptitle { color:#15803d; }
.ck-merge-mapping { border:1px solid var(--p-border); border-radius:10px; padding:10px; display:flex; flex-direction:column; gap:7px; max-height:34vh; overflow:auto; }
.ck-merge-maprow { display:grid; grid-template-columns:1fr auto 1.4fr; gap:8px; align-items:center; }
.ck-merge-maprow .src { font-size:11.5px; font-weight:700; color:var(--p-text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ck-merge-maprow .arr { color:var(--p-text-3); }
.ck-merge-maprow select { width:100%; font-size:11px; }
.ck-merge-preview { border:1px solid var(--p-border); border-radius:10px; padding:10px; background:var(--p-band-1); font-size:12px; color:var(--p-text-2); min-height:40px; }
.ck-merge-preview .cnt { font-weight:900; }
.ck-merge-preview .o { color:var(--p-amber); } .ck-merge-preview .c { color:var(--p-green); }
.ck-merge-del { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--p-text-2); }
.ck-merge-ft { display:flex; justify-content:flex-end; gap:8px; padding:11px 16px; border-top:1px solid var(--p-border); flex-shrink:0; }
.cat-act-btn { background:none; border:none; cursor:pointer; font-size:13px; padding:2px 5px; opacity:.7; }
.cat-act-btn:hover { opacity:1; }
/* The popup BODY scrolls internally; the page never does. */
.intake-popup-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
/* The relocated form fills the popup cleanly — the popup card is the frame now (no double frame/cap). */
.intake-popup-body .form-card { max-width: none !important; margin: 0 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; }
.intake-popup .intake-back-btn { display: none; }   /* the ✕ replaces the in-form back button */

/* ══════════ A-3 (Phase 2): intake popup — calmer, uniform, breathing-room restyle ══════════
   LAYOUT-ONLY. Scoped to .intake-popup-body so the cockpit-inline compact mode + the global band
   tokens are untouched. The structural sections + progressive disclosure (identity collapse,
   lifecycle stages, SD panel) were already built (ca2fd8e/c87ba63) — this only quiets the colours,
   makes the grid uniform, and gives the roomy popup back its breathing room (it scrolls internally
   by design — see above — so taller fields are fine). No field id / mode / extraction / save touched. */
/* B107 — sections rendered 1:1 with the mock: WHITE box + green border + green inset shadow (the mock's
   `.sec` = #fff / 1px #9FE1CB / inset 0 0 0 2px #E1F5EE). Replaces the calm beige bands. Popup-scoped;
   night keeps a themed dark surface so it never looks broken. */
.intake-popup-body .form-section,
.intake-popup-body .form-section.band-1,
.intake-popup-body .form-section.band-2,
.intake-popup-body .form-section.band-3 {
  background:#fff; border:1px solid #9FE1CB; border-radius:10px;
  box-shadow:0 0 0 2px #E1F5EE inset; margin-bottom:13px;
}
html[data-theme="night"] .intake-popup-body .form-section,
html[data-theme="night"] .intake-popup-body .form-section.band-1,
html[data-theme="night"] .intake-popup-body .form-section.band-2,
html[data-theme="night"] .intake-popup-body .form-section.band-3 {
  background:var(--p-surface); border-color:var(--p-border-2); box-shadow:none;
}
/* breathing room — must out-specify the body.ops-active #page-intake (id-level) compact squeeze, so
   every popup override below carries #page-intake too. Scoped to .intake-popup-body = popup only. */
.intake-popup-body .form-section,
body.ops-active #page-intake .intake-popup-body .form-section { padding: 16px 24px !important; }
.intake-popup-body .intake-sec-title { font-size: 13px; font-weight: 800; margin: 0 0 10px; padding-bottom: 0;
  border-bottom: 0; }
/* uniform grid — one consistent gap everywhere, regardless of each grid's inline column template */
.intake-popup-body .form-section .grid,
body.ops-active #page-intake .intake-popup-body .form-section .grid { gap: 14px 16px !important; }
/* lifecycle stage columns: a touch more room + comfortable textareas (the ops-active rule squeezed
   them to ~48px; the popup can afford full height and still scroll internally) */
.intake-popup-body .lifecycle-grid { gap: 14px; }
.intake-popup-body .lc-col { padding: 12px; gap: 9px; }
body.ops-active #page-intake .intake-popup-body .field-label { font-size: 11.5px; margin-bottom: 4px; }
body.ops-active #page-intake .intake-popup-body .inp { padding: 7px 10px; font-size: 12.5px; }
body.ops-active #page-intake .intake-popup-body .tog-btn { padding: 7px 11px; font-size: 11.5px; }
body.ops-active #page-intake .intake-popup-body textarea.inp { min-height: 96px; max-height: none; resize: vertical; }
/* Cockpit centre placeholder (the tickets table arrives in block 2). */
.ops-center-placeholder { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  border: 1.5px dashed var(--p-border); border-radius: 12px; background: var(--p-band-1); color: var(--p-text-3); padding: 28px; text-align: center; }
.ops-center-placeholder .ops-ph-ic { font-size: 40px; opacity: .8; }
.ops-center-placeholder .ops-ph-tx { font-size: 13px; font-weight: 700; color: var(--p-text-2); }

/* ===== Cockpit 2/5 — tickets TABLE (.ck-tt = tracker .utbl mechanics, Pathway360 colours, day/night) =====
   Replicates the tracker's colgroup/min-width horizontal scroll, sticky header + filter row, click-sort,
   per-column filters, SLA heart timer, attachment dots, column chooser + pagination. Colours are OURS. */
.ck-tt-wrap { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:6px; }
.ck-tt-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; flex-shrink:0; }
.ck-tt-toolbar .ck-tt-spacer { flex:1 1 auto; }
.ck-tt-btn { font-family:inherit; font-size:12px; font-weight:700; padding:6px 11px; border-radius:8px; cursor:pointer;
  background:var(--p-surface); color:var(--p-text-2); border:1px solid var(--p-border); white-space:nowrap; display:inline-flex; align-items:center; gap:5px; }
.ck-tt-btn:hover { background:var(--p-band-1); }
.ck-tt-btn.on { background:var(--p-teal-bg); color:var(--p-teal); border-color:var(--p-teal); }
.ck-tt-count { font-size:11.5px; color:var(--p-text-3); font-weight:700; white-space:nowrap; }
/* ════ B025 PART F — SHARED SMART FILTER BAR (theme tokens, day+night; one row that wraps gracefully) ════ */
.ck-smartbar { display:flex; gap:6px; align-items:center; flex-wrap:wrap; min-height:34px; margin:6px 0 2px; }
.ck-sb-search { flex:1 1 160px; min-width:140px; height:34px; display:flex; align-items:center; gap:7px; padding:0 11px;
  border:1px solid var(--p-border); border-radius:8px; background:var(--p-surface); color:var(--p-text-3); }
.ck-sb-search input { flex:1; border:0; outline:0; background:transparent; font-family:inherit; font-size:13px; color:var(--p-text); min-width:0; }
.ck-sb-seg { display:inline-flex; height:34px; border:1px solid var(--p-border); border-radius:8px; overflow:hidden; background:var(--p-surface); }
.ck-sb-seg > button { display:inline-flex; align-items:center; gap:5px; padding:0 11px; font-size:15px; cursor:pointer; line-height:1;
  border:0; border-inline-start:1px solid var(--p-border); background:transparent; color:var(--p-text-3); font-family:inherit; transition:.12s; }
.ck-sb-seg > button:first-child { border-inline-start:0; }
.ck-sb-seg > button:hover { background:var(--p-band-1); }
.ck-sb-ax .ck-sb-t, .ck-sb-grp .ck-sb-t { font-size:11px; font-weight:800; }
.ck-sb-ax.sel-all { background:var(--p-green); color:#fff; }
.ck-sb-ax.sel-waz { background:var(--p-red-d); color:#fff; }
.ck-sb-ax.sel-com { background:var(--p-green); color:#fff; }
.ck-sb-st.on { background:var(--p-green); color:#fff; }
.ck-sb-sep { width:1px; height:24px; background:var(--p-border); margin:0 3px; }
.ck-sb-grp { display:inline-flex; align-items:center; gap:5px; height:34px; padding:0 8px; font-size:14px; border-radius:8px; border:1px dashed; }
.ck-sb-grp.waz { color:var(--p-red-d); border-color:color-mix(in srgb, var(--p-red) 40%, var(--p-border)); }
.ck-sb-grp.com { color:var(--p-green-d); border-color:color-mix(in srgb, var(--p-green) 40%, var(--p-border)); }
.ck-sb-dd { height:34px; min-width:42px; border:1px solid var(--p-border); border-radius:8px; background:var(--p-surface);
  display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:0 9px; font-size:15px; color:var(--p-text);
  cursor:pointer; font-family:inherit; line-height:1; transition:.12s; }
.ck-sb-dd:hover { background:var(--p-band-1); }
.ck-sb-dd .car { font-size:9px; color:var(--p-text-3); }
.ck-sb-dd .ck-sb-v { font-size:12px; font-weight:800; }
.ck-sb-dd .ck-sb-x { font-size:11px; font-weight:800; color:var(--p-red-d); margin-inline-start:2px; }
.ck-sb-dd.waz { border-color:color-mix(in srgb, var(--p-red) 32%, var(--p-border)); background:color-mix(in srgb, var(--p-red) 8%, var(--p-surface)); }
.ck-sb-dd.com { border-color:color-mix(in srgb, var(--p-green) 32%, var(--p-border)); background:color-mix(in srgb, var(--p-green) 7%, var(--p-surface)); }
.ck-sb-dd.on { outline:2px solid var(--p-gold); outline-offset:1px; font-weight:800; }
.ck-sb-clr { height:34px; width:38px; border:1px solid var(--p-border); border-radius:8px; background:var(--p-surface);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-size:15px; }
.ck-sb-clr:hover { background:var(--p-band-1); }
/* The scroll FRAME — vertical AND horizontal scroll live here; the PAGE never scrolls. */
.ck-tt-scroll { flex:1 1 auto; min-height:0; overflow:auto; border:1px solid var(--p-border); border-radius:10px; background:var(--p-surface); }
/* B027 §17.3 — mirrored TOP horizontal scrollbar (synced with .ck-tt-scroll via syncTopScroll). */
.ck-tt-topscroll { overflow-x:auto; overflow-y:hidden; }
.ck-tt-topscroll-inner { height:1px; }
/* MIRRORED-ELEMENT LAW: BOTH bars share ONE rule list — same 14px height + gold thumb that stays IDENTICAL
   in every state (default = hover = active = --p-gold, NO colour/width change). The global gold scrollbar
   gives them arrows + transparent track; this pins the thumb colour so the two bars are 1:1. NEVER add
   scrollbar-width to only one (that switches it to the default model → the 80%-match defect). */
.ck-tt-scroll::-webkit-scrollbar, .ck-tt-topscroll::-webkit-scrollbar { width:14px; height:14px; }
.ck-tt-scroll::-webkit-scrollbar-thumb, .ck-tt-topscroll::-webkit-scrollbar-thumb,
.ck-tt-scroll::-webkit-scrollbar-thumb:hover, .ck-tt-topscroll::-webkit-scrollbar-thumb:hover,
.ck-tt-scroll::-webkit-scrollbar-thumb:active, .ck-tt-topscroll::-webkit-scrollbar-thumb:active {
  background:var(--p-gold, #C5970A); border-radius:999px; border:3px solid transparent; background-clip:padding-box; }
.ck-tt-scroll::-webkit-scrollbar-track, .ck-tt-topscroll::-webkit-scrollbar-track,
.ck-tt-scroll::-webkit-scrollbar-corner { background:transparent; }
table.ck-tt { border-collapse:separate; border-spacing:0; width:max-content; min-width:100%; font-size:13px; font-variant-numeric:tabular-nums; }   /* phase-1 A3: match .cl-table (13px) */
/* Cockpit 5/5 — PART A: green «نسك» sticky header (replaces the blue), white dividers, day/night. */
/* B027 §17.3: CENTRED headers · ZEBRA-ONLY (no vertical divider, no header underline). */
table.ck-tt thead th { position:sticky; top:0; z-index:3; background:linear-gradient(180deg,#15835a,#0f6e4b); color:#fff; font-weight:800; font-size:12px;   /* phase-1 A3: header proportional to the 13px body */
  padding:5px 8px; white-space:nowrap; text-align:center; cursor:pointer; user-select:none; }
html[data-theme="night"] table.ck-tt thead th { background:linear-gradient(180deg,#13724f,#0b5238); }
table.ck-tt thead tr.ck-tt-filters th { z-index:2; background:var(--p-band-2,var(--p-band-1)); padding:3px 5px; cursor:default; border-inline-end:1px solid var(--p-border); }
table.ck-tt thead th .ck-srt { margin-inline-start:4px; opacity:.55; font-size:9px; }
table.ck-tt thead th.srt .ck-srt { opacity:1; }
/* phase-1 A6: column drag-drop on the tickets header (mirrors the clients RTL-safe drop marks). */
/* phase-1 A7: shared channel-icon marks (local assets). circle = prominent single; glyph = dense/multiple. */
.ch-ic { vertical-align:middle; display:inline-block; flex:0 0 auto; }
.ch-ic-circle { width:20px; height:20px; }
.ch-ic-glyph { width:16px; height:16px; margin-inline-end:3px; }
.ck-th[draggable="true"] { cursor:grab; }
.ck-th[draggable="true"]:active { cursor:grabbing; }
.ck-th-dragging { opacity:.45; }
.ck-th-drop-before { box-shadow:inset -4px 0 0 var(--p-gold,#f6c94e); }
.ck-th-drop-after  { box-shadow:inset 4px 0 0 var(--p-gold,#f6c94e); }
/* B027 §17.3: ZEBRA-ONLY — no horizontal row divider (row separation is the beige zebra alone). */
table.ck-tt tbody td { padding:3px 8px; white-space:nowrap; color:var(--p-text-2);
  max-width:240px; overflow:hidden; text-overflow:ellipsis; }
table.ck-tt tbody tr { cursor:pointer; }
table.ck-tt tbody tr:nth-child(even) { background:var(--p-band-1); }
table.ck-tt tbody tr:hover { background:var(--p-teal-bg); }
.ck-tt-empty { padding:30px; text-align:center; color:var(--p-text-3); font-weight:700; font-size:13px; }
.ck-cf-inp { width:100%; box-sizing:border-box; font-family:inherit; font-size:11px; padding:3px 6px; border-radius:6px;
  border:1px solid var(--p-border); background:var(--p-surface); color:var(--p-text-2); }
.ck-cf-btn { width:100%; box-sizing:border-box; font-family:inherit; font-size:11px; font-weight:700; padding:3px 6px; border-radius:6px;
  cursor:pointer; background:var(--p-surface); color:var(--p-text-3); border:1px solid var(--p-border); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ck-cf-btn.has-filter { background:var(--p-teal-bg); color:var(--p-teal); border-color:var(--p-teal); }
.ck-cf-btn.reversed { background:#FEF3C7; color:#B45309; border-color:#FCD34D; }
/* shared popover (column filter dropdown + column chooser) */
.ck-pop { position:fixed; z-index:140; background:var(--p-surface); border:1px solid var(--p-border); border-radius:10px;
  box-shadow:0 14px 44px rgba(0,0,0,.32); padding:8px; min-width:210px; max-height:62vh; overflow:auto; }
.ck-pop-row { display:flex; align-items:center; gap:7px; padding:4px 6px; border-radius:6px; cursor:pointer; font-size:12px; color:var(--p-text-2); }
.ck-pop-row:hover { background:var(--p-band-1); }
.ck-pop-row input { cursor:pointer; accent-color:var(--p-teal); }
.ck-pop-search { width:100%; box-sizing:border-box; margin-bottom:6px; font-family:inherit; font-size:12px; padding:5px 7px;
  border-radius:7px; border:1px solid var(--p-border); background:var(--p-surface); color:var(--p-text-2); }
.ck-pop-actions { display:flex; gap:6px; margin-top:8px; position:sticky; bottom:0; background:var(--p-surface); padding-top:6px; }
.ck-pop-actions .ck-tt-btn { flex:1 1 auto; justify-content:center; font-size:11px; padding:5px; }
/* PART A3 — مستوى الالتزام = live SLA PROGRESS BAR (style ③): fills from the trailing edge + recolors
   green→amber→red toward breach, with the live count text underneath in the same colour. */
.ck-slabar { display:inline-flex; flex-direction:column; gap:2px; min-width:88px; vertical-align:middle; }
.ck-slabar-track { height:7px; border-radius:999px; background:var(--p-band-1); border:1px solid var(--p-border); overflow:hidden; }
.ck-slabar-fill { display:block; height:100%; width:0; border-radius:999px; transition:width .35s linear, background .35s; }
.ck-slabar-txt { font-size:9.5px; font-weight:800; white-space:nowrap; line-height:1; }
/* B077: live SLA-counter heartbeat (ported from Docs/Tracker_REFERENCE.html) — a 💗 that pulses every ~1.2s
   on LIVE (not-yet-sealed) counters; sealed cells show the final value with NO heart. */
@keyframes heartbeat { 0%,100%{transform:scale(1)} 14%{transform:scale(1.3)} 28%{transform:scale(1)} 42%{transform:scale(1.2)} 70%{transform:scale(1)} }
.sla-heart { display:inline-block; animation:heartbeat 1.2s ease infinite; margin-inline-start:4px; }
/* attachment dots (tracker .tbl-imgs-cell / .tbl-img-dot mechanics, our colours) */
.ck-imgs { display:inline-flex; gap:3px; align-items:center; justify-content:center; }
.ck-dot { font-size:13px; line-height:1; width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; }
.ck-dot.empty { opacity:.26; font-size:9px; }
/* Area 3: المرفقات holder — wazara = 3 lifecycle circles, company = one wide «أشرطة» pill (same width). Mock palette (table_attachments_holder_mock). */
.ck-att-dots { display:inline-flex; gap:7px; align-items:center; justify-content:center; min-width:64px; }
/* 3D glossy «ball»: radial-gradient sphere (top-left highlight → colour body → darker edge) + soft drop shadow. Theme tokens adapt day/night. */
.ck-att-dot { width:12px; height:12px; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,.28); transition:transform .12s ease; cursor:default; }
.ck-att-dot:hover { transform:scale(1.25); }
.ck-att-dot.r { background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.85) 0%, var(--p-red) 42%, var(--p-red-d) 100%); }   /* الفتح / مطلوب */
.ck-att-dot.g { background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.85) 0%, var(--p-green) 42%, var(--p-green-d) 100%); }   /* الرد */
.ck-att-dot.a { background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.85) 0%, var(--p-gold) 42%, var(--p-gold-d) 100%); }   /* الإغلاق */
/* empty = faded outline RING, no fill */
.ck-att-dot.off { background:transparent; box-shadow:none; border:1.5px solid var(--p-border); opacity:.55; }
.ck-att-bars { display:inline-flex; align-items:center; justify-content:center; gap:4px; height:22px; min-width:64px;
  background:#E1F5EE; border:1px solid #0F6E56; border-radius:7px; color:#0F6E56; font-size:11.5px; font-weight:700; padding:0 9px; cursor:default; }
.ck-att-bk { display:inline-flex; gap:2px; }
.ck-att-bk i { width:3px; height:11px; background:#0F6E56; border-radius:1px; opacity:.6; }
.ck-att-clip { font-size:11px; line-height:1; }
.ck-att-n { line-height:1; }
.ck-att-empty { color:var(--p-text-3); font-size:11px; }
/* night: gradient keeps using the --p-* tokens (theme.css overrides them), so no flat-colour override needed — only soften the highlight */
html[data-theme="night"] .ck-att-dot.r,
html[data-theme="night"] .ck-att-dot.g,
html[data-theme="night"] .ck-att-dot.a { box-shadow:0 1px 2px rgba(0,0,0,.5); }
html[data-theme="night"] .ck-att-bars { background:#173026; border-color:#4FD8AC; color:#4FD8AC; }
html[data-theme="night"] .ck-att-bk i { background:#4FD8AC; }
.ck-pill { padding:2px 8px; border-radius:6px; font-weight:700; font-size:11px; white-space:nowrap; display:inline-block; }
/* pager */
.ck-pager { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.ck-pager button { font-family:inherit; font-size:12px; font-weight:700; padding:4px 10px; border-radius:7px; cursor:pointer;
  background:var(--p-surface); color:var(--p-text-2); border:1px solid var(--p-border); }
.ck-pager button:disabled { opacity:.4; cursor:default; }
.ck-pager .ck-pg-now { font-size:11.5px; color:var(--p-text-3); font-weight:700; white-space:nowrap; }
/* B125: server-mode fetch — dim the table body while the next page loads (subtle, non-blocking). */
.ck-tt-loading .ck-tt tbody { opacity:.5; transition:opacity .12s ease; }
/* B086 (architect 2026-06-29): the old «إظهار التلميحات» column-usage hint banner (.ck-tt-hint) was removed —
   it is replaced by the row tooltip (System A). Orphan rule deleted (PROVE-ZERO no .ck-tt-hint left). */

/* SD chip beside الجهات + its amber inline panel. */
#page-intake .sd-chip { display:inline-flex; align-items:center; gap:6px; padding:8px 12px; white-space:nowrap;
  font-family:inherit; font-size:13px; font-weight:700; cursor:pointer; color:#B45309;
  background:#FFFBEB; border:1.5px solid #FDE68A; }
#page-intake #intake-sd-body { background:#FFFBEB; border:1px solid #FDE68A; border-radius:6px; padding:8px; }

/* TRANSLATION MANAGER PAGE */
.tm-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; gap: 12px; flex-wrap: wrap;
}
.tm-actions { display: flex; gap: 8px; align-items: center; }
.tm-search {
  padding: 8px 12px;
  background: var(--p-surface);
  border: 1.5px solid var(--p-border);
  border-radius: var(--r-sm);
  font-family: inherit; font-size: var(--fs-sm);
  color: var(--p-text); outline: none;
  width: 280px;
}
.tm-search:focus { border-color: var(--p-navy); box-shadow: 0 0 0 3px rgba(20, 51, 79, 0.08); }

.tm-card {
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  overflow: hidden;
}
.tm-add-row {
  padding: 14px 20px;
  background: var(--p-band-2);
  border-bottom: 1px solid var(--p-border);
  display: grid;
  grid-template-columns: 200px 1fr 1fr auto;
  gap: 10px;
  align-items: center;
}
.tm-table {
  width: 100%;
  border-collapse: collapse;
}
.tm-table thead th {
  background: var(--p-band-1);
  padding: 10px 16px;
  text-align: right;
  font-size: 11px;
  font-weight: 700;
  color: var(--p-text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--p-border);
  position: sticky; top: 0; z-index: 5;
}
.tm-table tbody td {
  padding: 8px 16px;
  border-bottom: 1px solid var(--p-border);
  font-size: var(--fs-sm);
  vertical-align: top;
}
.tm-table tbody tr:hover { background: var(--p-band-1); }
.tm-table tbody tr.group-header td {
  background: var(--p-navy-bg);
  color: var(--p-navy);
  font-weight: 700;
  font-size: 12px;
  padding: 8px 16px;
}
.tm-key {
  font-family: "Inter", monospace;
  font-weight: 600;
  color: var(--p-navy);
  font-size: 12px;
}
.tm-input {
  width: 100%;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: inherit; font-size: var(--fs-sm);
  color: var(--p-text); outline: none;
  transition: all 0.1s ease;
}
.tm-input:hover { background: var(--p-surface); border-color: var(--p-border); }
.tm-input:focus { background: var(--p-surface); border-color: var(--p-navy); box-shadow: 0 0 0 2px rgba(20,51,79,0.08); }
.tm-input.changed { background: #FFFAEB; border-color: var(--p-amber); }
.tm-cell-ar { direction: rtl; text-align: right; }
.tm-cell-en { direction: ltr; text-align: left; }
.tm-footer {
  padding: 14px 20px;
  background: var(--p-band-1);
  border-top: 1px solid var(--p-border);
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
}
.tm-stats { font-size: 12px; color: var(--p-text-3); }
.tm-stats strong { color: var(--p-text-2); }
.tm-hint {
  background: var(--p-amber-bg);
  border: 1px solid var(--p-amber);
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--p-text);
  margin-bottom: 16px;
}
.tm-hint strong { color: var(--p-amber); }

/* ============================================================
   DEPARTMENTS PAGE
   ============================================================ */
.dept-search-bar {
  margin-bottom: 12px;
}
.dept-search-bar .inp { width: 100%; }

.dept-explorer {
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  overflow: hidden;
}
.dept-group {
  border-bottom: 1px solid var(--p-border);
}
.dept-group:last-child { border-bottom: none; }
.dept-group-hd {
  display: grid;
  grid-template-columns: 14px 24px 1fr 90px 130px 56px 56px 56px 90px;
  gap: 10px;
  align-items: center;
  padding: 12px 18px;
  background: var(--p-band-1);
  cursor: pointer;
  user-select: none;
  transition: background 0.12s ease;
  direction: rtl;
}
.dept-group-hd > div {
  display: flex;
  align-items: center;
  min-width: 0;
}
.dept-hd-name {
  overflow: hidden;
}
.dept-hd-status, .dept-hd-phone, .dept-hd-kpi-total, .dept-hd-kpi-open, .dept-hd-users {
  justify-content: center;
}
.dept-hd-actions {
  justify-content: flex-end;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.dept-group-hd:hover .dept-hd-actions { opacity: 1; }
.dept-group-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--p-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .dept-group-hd {
    grid-template-columns: 14px 24px 1fr 56px 56px 56px;
  }
  .dept-hd-status, .dept-hd-phone, .dept-hd-actions { display: none; }
}
.dept-group-hd:hover { background: var(--p-band-2); }
.dept-group.open .dept-group-hd { background: var(--p-navy-bg); }
.dept-group-chevron {
  font-size: 0;  /* hide the ▶ text glyph */
  color: var(--p-navy);
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--p-navy);
  border-radius: 4px;
  line-height: 1;
}
.dept-group-chevron::before {
  content: '+';
  font-size: 14px;
  font-weight: 700;
  color: var(--p-navy);
}
.dept-group.open .dept-group-chevron::before { content: '−'; }
.dept-group-icon { font-size: 18px; flex-shrink: 0; }
.dept-group-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--p-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dept-group-count {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--p-navy);
  padding: 2px 9px;
  border-radius: 999px;
  justify-self: center;
}
.dept-group-actions {
  display: flex;
  gap: 4px;
  justify-self: end;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.dept-group-hd .dept-group-status-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  text-align: center;
  justify-self: end;
  white-space: nowrap;
}
.dept-kpi-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--p-teal-bg);
  color: var(--p-teal-d);
  font-family: 'Inter', monospace;
  white-space: nowrap;
}
/* Dept open-tickets = a plain state-count → neutral(teal) per the shared rule (tokens; day/night). */
.dept-kpi-badge.open {
  background: var(--p-teal-bg);
  color: var(--p-teal-d);
}
.dept-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: var(--p-text-2);
  padding: 2px 8px;
  border-radius: 999px;
  background: #F1F5F9;
  white-space: nowrap;
  font-family: inherit;   /* B087 §2.1: was 'Inter' — it holds Arabic («بلا مدير» + segment labels) */
  direction: ltr;
}
.dept-group-hd:hover .dept-group-actions { opacity: 1; }
.dept-act {
  width: 26px; height: 26px;
  border-radius: 5px;
  border: 1px solid var(--p-border);
  background: var(--p-surface);
  cursor: pointer;
  font-size: 12px;
  color: var(--p-text-2);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.12s ease;
}
.dept-act:hover { background: var(--p-navy-bg); color: var(--p-navy); border-color: var(--p-navy); }
.dept-act.del:hover { background: var(--p-red-bg); color: var(--p-red); border-color: var(--p-red); }

.dept-group-body {
  display: none;
  background: var(--p-surface);
}
.dept-group.open .dept-group-body { display: block; }

/* Coverage Timeline */
.coverage-block {
  padding: 14px 18px;
  border-bottom: 1px solid var(--p-border);
  background: #FBFAF7;
}
.coverage-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--p-text-3);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
  display: flex; align-items: center; justify-content: space-between;
}
.coverage-day-selector {
  display: flex; gap: 4px; align-items: center;
  font-size: 11px;
  color: var(--p-text-2);
  text-transform: none;
  letter-spacing: 0;
}
.coverage-day-selector select {
  font-size: 11px;
  padding: 3px 8px;
  border: 1px solid var(--p-border);
  border-radius: 4px;
  background: var(--p-surface);
  font-family: inherit;
}
.heatmap-row {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.heatmap-row-label {
  font-size: 10px;
  color: var(--p-text-3);
  text-align: left;
  font-family: "Inter", monospace;
}
.heatmap-cells {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 2px;
  direction: ltr;
}
.heatmap-cell {
  height: 22px;
  border-radius: 4px;
  background: #FED7AA;
  position: relative;
  cursor: default;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.heatmap-cell:hover { transform: scaleY(1.18) scaleX(1.05); z-index: 2; box-shadow: 0 2px 6px rgba(15, 110, 86, 0.22); }
.heatmap-cell[data-count="0"] { background: #FED7AA; }
.heatmap-cell[data-count="1"] { background: #E0F2EA; }
.heatmap-cell[data-count="2"] { background: #A7E0C8; }
.heatmap-cell[data-count="3"] { background: #5CC9A1; }
.heatmap-cell[data-count="4"], .heatmap-cell[data-count="5"], .heatmap-cell[data-count="6"], .heatmap-cell[data-count="7"], .heatmap-cell[data-count="8"], .heatmap-cell[data-count="9"], .heatmap-cell[data-count="10"] { background: var(--p-emerald-d); }
.heatmap-axis {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 8px;
  margin-top: 6px;
  font-size: 9px;
  color: var(--p-text);
  font-family: "Inter", monospace;
  font-weight: 600;
}
.heatmap-axis-numbers {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 2px;
  direction: ltr;
}
.heatmap-axis-numbers span {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.gantt-row {
  display: grid;
  grid-template-columns: 140px 1fr 48px;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
  font-size: 12px;
}
.gantt-row-name {
  color: var(--p-text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
  padding-right: 8px;
}
.gantt-row-name .role-tag {
  font-size: 9px;
  color: var(--p-text-3);
  margin-right: 4px;
}
.gantt-track {
  position: relative;
  height: 22px;
  max-height: 22px;
  direction: ltr;
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: 22px;
  grid-auto-rows: 0;
  align-items: stretch;
  background: linear-gradient(to bottom, transparent 8px, rgba(20, 51, 79, 0.06) 10px, rgba(20, 51, 79, 0.06) 12px, transparent 14px);
  border-radius: 4px;
  overflow: visible;
}
.gantt-bar {
  position: relative;
  border-radius: 5px;
  height: 22px;
  min-height: 22px;
  max-height: 22px;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(15, 110, 86, 0.25);
  transition: box-shadow 0.18s ease, filter 0.18s ease;
}
.gantt-bar:hover { filter: brightness(1.08); box-shadow: 0 4px 12px rgba(15, 110, 86, 0.38); }

/* DRAG GUIDE LINES — appear during drag, connect bar edges to heatmap above */
.coverage-block { position: relative; }
.drag-guide {
  position: absolute;
  width: 2px;
  background: linear-gradient(180deg, var(--p-navy) 0%, var(--p-navy-l) 50%, var(--p-navy) 100%);
  box-shadow: 0 0 8px rgba(20, 51, 79, 0.40);
  z-index: 1000;
  pointer-events: none;
  border-radius: 1px;
  animation: guide-pulse 1.2s ease-in-out infinite;
}
@keyframes guide-pulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1.0; }
}
.drag-guide-label {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--p-navy);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  font-family: "Inter", monospace;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 12px rgba(20, 51, 79, 0.35);
}
.drag-guide-label::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--p-navy);
}

/* Big floating employee name + hours during drag — sits between guide lines, raised high */
.drag-name-float {
  position: absolute;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--p-navy), var(--p-navy-d));
  color: #fff;
  padding: 10px 22px;
  border-radius: var(--r-lg);
  white-space: nowrap;
  box-shadow: 0 14px 30px rgba(20, 51, 79, 0.45);
  pointer-events: none;
  z-index: 1002;
  text-align: center;
  animation: name-pop 0.20s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.drag-name-main {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.2px;
  line-height: 1.15;
}
.drag-name-hours {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 3px;
  letter-spacing: 0.2px;
}
@keyframes name-pop {
  from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.85); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* SHIFT-FILL — soft yellowish overlay highlighting the working hours during drag */
.drag-shift-fill {
  position: absolute;
  background: linear-gradient(180deg, rgba(254, 240, 138, 0.60), rgba(254, 240, 138, 0.30));
  border-left: 1px solid rgba(217, 119, 6, 0.20);
  border-right: 1px solid rgba(217, 119, 6, 0.20);
  pointer-events: none;
  z-index: 999;
  animation: fill-fade-in 0.18s ease;
}
@keyframes fill-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.coverage-stats {
  margin-top: 10px;
  display: flex; gap: 12px;
  font-size: 11px;
  color: var(--p-text-2);
}
.coverage-stats .stat {
  display: inline-flex; align-items: center; gap: 4px;
}
.coverage-stats .stat-dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.coverage-stats .stat-dot.ok { background: var(--p-green); }
.coverage-stats .stat-dot.gap { background: var(--p-red); }

/* Users list under each department */
.users-list-head {
  padding: 10px 18px 6px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--p-text-3);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.user-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 0.8fr auto;
  gap: 12px;
  padding: 10px 18px;
  border-top: 1px solid var(--p-border);
  align-items: center;
  font-size: 13px;
  transition: background 0.1s ease;
}
.user-row:hover { background: var(--p-band-1); }
.user-name-cell {
  display: flex; align-items: center; gap: 10px;
}
.user-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--p-navy), var(--p-navy-l));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.user-name-text {
  display: flex; flex-direction: column; line-height: 1.2;
}
.user-name-text .full { font-weight: 600; color: var(--p-text); }
.user-name-text .display { font-size: 11px; color: var(--p-text-3); }
.user-contact { color: var(--p-text-2); font-family: "Inter", monospace; font-size: 12px; }
.user-shift { color: var(--p-text-2); font-size: 12px; }
.user-role-badge {
  display: inline-block;
  padding: 2px 9px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.user-role-badge.head { background: var(--p-amber-bg); color: var(--p-amber); }
.user-role-badge.supervisor { background: var(--p-navy-bg); color: var(--p-navy); }
.user-role-badge.member { background: var(--p-green-bg); color: var(--p-green); }
.user-actions { display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s ease; }
.user-row:hover .user-actions { opacity: 1; }

.dept-group-footer {
  padding: 8px 18px 12px;
  background: var(--p-surface);
}
.dept-add-user-btn {
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 1.5px dashed var(--p-border-2);
  border-radius: var(--r-sm);
  color: var(--p-text-2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.dept-add-user-btn:hover {
  border-style: solid;
  border-color: var(--p-navy);
  background: var(--p-navy-bg);
  color: var(--p-navy);
}

/* MODALS */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 51, 79, 0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: fadeIn 0.18s ease;
}
/* LAYERING RULE: every shared p360 dialog (confirm · prompt · cascade · deleteGuard) MUST sit ABOVE
   every other overlay (import wizard 1600, chat 9300, …). Otherwise it renders BEHIND them — invisible —
   and the awaiting action hangs silently (the "تعارض طبقات" / z-index layering bug). */
#p360-confirm-backdrop, #p360-cascade-backdrop { z-index: 10000; }
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.modal {
  background: var(--p-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-modal);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  display: flex; flex-direction: column;
  animation: slideUp 0.22s ease;
  overflow: hidden;
}
.modal-lg { max-width: 760px; }
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.modal-head {
  padding: 16px 22px;
  border-bottom: 1px solid var(--p-border);
  display: flex; justify-content: space-between; align-items: center;
  border-top-left-radius: var(--r-lg);
  border-top-right-radius: var(--r-lg);
}
.modal-title {
  font-size: 17px; font-weight: 800;
  color: var(--p-text);
  letter-spacing: -0.3px;
}
.modal-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--p-text-3);
  cursor: pointer;
  font-size: 16px;
  transition: all 0.12s ease;
}
.modal-close:hover { background: var(--p-band-1); color: var(--p-text); }
.modal-body {
  padding: 18px 22px;
  overflow-y: auto;
  flex: 1;
}
.modal-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--p-border);
  display: flex; justify-content: flex-end; gap: 8px;
  background: var(--p-band-1);
  border-bottom-left-radius: var(--r-lg);
  border-bottom-right-radius: var(--r-lg);
}

/* USER FORM */
.user-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.user-form-grid .field { display: flex; flex-direction: column; gap: 4px; }

/* Identity hint banner inside user modal (shown when modal is in dept context) */
.uf-identity-hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 16px;
  background: var(--p-info-bg);
  border: 1px solid var(--p-info);
  border-radius: var(--r-md);
  font-size: 12px;
  color: var(--p-info-d);
  line-height: 1.5;
}
.uf-identity-hint-icon { font-size: 14px; flex-shrink: 0; }
.uf-identity-hint strong { color: var(--p-info-d); font-weight: 700; }

/* Read-only field styling — visually muted */
.inp.readonly-field, select.inp.readonly-field {
  background: var(--p-band-1);
  color: var(--p-text-2);
  cursor: default;
  pointer-events: none;
  opacity: 0.85;
}
.checkbox-row {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px;
  color: var(--p-text-2);
  cursor: pointer;
  user-select: none;
}
.checkbox-row input { cursor: pointer; }

/* SCHEDULE */
.schedule-section {
  margin-top: 18px;
  padding: 14px;
  background: var(--p-band-3);
  border-radius: var(--r-md);
  border: 1px solid var(--p-border);
}
.schedule-section .section-label {
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--p-text);
}

/* DEFAULT SHIFT — one row, big and central */
.default-shift-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin-bottom: 12px;
}
.ds-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--p-text);
}
.ds-icon { font-size: 16px; }
.ds-times {
  display: flex; align-items: center; gap: 8px;
}
.ds-time {
  font-family: "Inter", monospace;
  font-size: 13px;
  padding: 7px 10px;
  width: 110px;
  text-align: center;
}
.ds-arrow { color: var(--p-text-3); font-weight: 700; }

/* WORKING DAYS — 7 toggle pills */
.working-days-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  padding: 12px 14px;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--r-md);
  flex-wrap: wrap;
}
.wd-label {
  font-size: 13px; font-weight: 600; color: var(--p-text);
  flex-shrink: 0;
}
.wd-pills {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.wd-pill {
  padding: 7px 14px;
  border: 1.5px solid var(--p-border);
  border-radius: 999px;
  background: var(--p-surface);
  font-size: 12px;
  font-weight: 600;
  color: var(--p-text-2);
  cursor: pointer;
  user-select: none;
  transition: all 0.14s ease;
  min-width: 70px;
  text-align: center;
}
.wd-pill:hover { border-color: var(--p-emerald-d); }
.wd-pill.active {
  background: var(--p-emerald-d);
  border-color: var(--p-emerald-d);
  color: #fff;
  box-shadow: 0 2px 6px rgba(15, 110, 86, 0.25);
}

/* EXCEPTIONS ACCORDION */
.exceptions-accordion {
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--r-md);
  margin-bottom: 10px;
}
.exceptions-accordion > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--p-text-2);
  transition: background 0.12s ease;
}
.exceptions-accordion > summary::-webkit-details-marker { display: none; }
.exceptions-accordion > summary::before {
  content: "▸";
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.18s ease;
  color: var(--p-text-3);
  font-size: 10px;
}
.exceptions-accordion[open] > summary::before {
  transform: rotate(90deg);
}
.exceptions-accordion > summary:hover { background: var(--p-band-1); }
.ex-summary-text { display: flex; align-items: center; gap: 8px; flex: 1; }
.ex-hint { font-size: 11px; color: var(--p-text-3); font-weight: 400; }
.ex-count {
  background: #FED7AA;
  color: #9A3412;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.exceptions-body {
  padding: 0 14px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.ex-empty-note { font-size: 12px; color: var(--p-text-3); font-style: italic; }
.ex-row {
  display: grid;
  grid-template-columns: 100px 1fr 90px 1fr 30px;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  background: var(--p-band-1);
  border-radius: var(--r-sm);
}
.ex-row select.inp, .ex-row input.inp {
  padding: 6px 8px;
  font-size: 12px;
  height: auto;
}
.ex-row-day { font-size: 12px; font-weight: 600; color: var(--p-text); }
.ex-row-remove {
  background: transparent;
  border: none;
  color: var(--p-red);
  cursor: pointer;
  font-size: 16px;
  padding: 2px 6px;
  border-radius: 4px;
}
.ex-row-remove:hover { background: var(--p-red-bg); }
.ex-add-btn {
  margin: 0 14px 12px;
  width: calc(100% - 28px);
}
.schedule-hint {
  margin-top: 10px;
  font-size: 11px;
  color: var(--p-text-3);
  font-style: italic;
  line-height: 1.5;
}

/* STATUS TOGGLE — active/blocked */
.status-toggle {
  display: flex;
  gap: 0;
  border: 1.5px solid var(--p-border);
  border-radius: 999px;
  background: var(--p-surface);
  padding: 2px;
}
.status-toggle-opt {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: var(--p-text-3);
  cursor: pointer;
  border-radius: 999px;
  transition: all 0.14s ease;
  font-family: inherit;
}
.status-toggle-opt:hover { color: var(--p-text); }
.status-toggle-opt.active[data-status="active"] {
  background: #DCFCE7;
  color: #15803D;
  box-shadow: 0 1px 3px rgba(22, 163, 74, 0.15);
}
.status-toggle-opt.active[data-status="blocked"] {
  background: #FEE2E2;
  color: #B91C1C;
  box-shadow: 0 1px 3px rgba(220, 38, 38, 0.15);
}
.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.status-dot.ok { background: #16A34A; }
.status-dot.blocked { background: #DC2626; }

.btn-danger {
  background: transparent;
  border-color: var(--p-red);
  color: var(--p-red);
}
.btn-danger:hover {
  background: var(--p-red);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(220, 38, 38, 0.30);
}

/* ============================================================
   WEEK HEATMAP (overview grid)
   ============================================================ */
.week-legend {
  display: flex; gap: 10px;
  font-size: 10px;
  color: var(--p-text-3);
  text-transform: none;
  letter-spacing: 0;
  align-items: center;
}
.week-legend > span {
  display: inline-flex; align-items: center; gap: 4px;
}
.lg-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
}

.week-heatmap {
  margin: 8px 0 16px;
}
.week-row {
  display: grid;
  grid-template-columns: 140px 1fr 48px;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.12s ease;
}
.week-row:hover { background: rgba(20, 51, 79, 0.04); }
.week-row.active {
  background: var(--p-navy-bg);
  box-shadow: inset 2px 0 0 var(--p-navy);
}
.week-row-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--p-text);
  text-align: right;
  padding-right: 8px;
}
.week-row.active .week-row-label { color: var(--p-navy); font-weight: 700; }
.week-row-stat {
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  padding: 2px 6px;
  border-radius: 999px;
}
.week-row-stat.ok { background: #DCFCE7; color: #15803D; }
.week-row-stat.has-gap { background: #FED7AA; color: #9A3412; }

.week-heatmap .heatmap-axis {
  grid-template-columns: 140px 1fr 48px;
  margin-top: 2px;
}

/* Every-hour axis (24 numbers, slightly smaller text) */
.heatmap-axis-numbers span {
  font-size: 8px;
}

/* ============================================================
   TEMPLATE HEATMAP (single row showing typical-day coverage)
   ============================================================ */
.template-heatmap {
  margin: 8px 0 14px;
}
.template-row {
  display: grid;
  grid-template-columns: 140px 1fr 48px;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
}
.template-row > .template-row-spacer { /* empty placeholder for the 140px name column */ }
.template-heatmap .heatmap-axis {
  grid-template-columns: 140px 1fr 48px;
}

/* Big status pill — sits at the bottom of the coverage block */
.coverage-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 4px;
  white-space: nowrap;
  box-shadow: var(--sh-sm);
}
.coverage-status-pill.ok {
  background: var(--p-green-bg);
  border: 1px solid var(--p-green);
  color: var(--p-green-d);
}
.coverage-status-pill.has-gap {
  background: var(--p-red-bg);
  border: 1px solid var(--p-red);
  color: var(--p-red-d);
}
.coverage-bottom-bar {
  display: flex;
  justify-content: flex-start;
  padding: 12px 0 4px;
  margin-top: 8px;
}
.ex-week-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 12px;
  background: var(--p-amber-bg);
  border: 1px solid var(--p-amber);
  color: var(--p-amber-d);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}
.user-ex-marker {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
  padding: 1px 6px;
  background: var(--p-amber-bg);
  border: 1px solid var(--p-amber);
  color: var(--p-amber-d);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
}

/* ============================================================
   DRILL SECTION (Gantt for selected day)
   ============================================================ */
.drill-section {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px dashed var(--p-border);
}
.drill-label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--p-text-3);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 10px;
}
.drill-hint {
  font-size: 10px;
  color: var(--p-navy);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  background: var(--p-navy-bg);
  padding: 3px 9px;
  border-radius: 999px;
}
.gantt-off-note {
  font-size: 11px;
  color: var(--p-text-3);
  font-style: italic;
  padding: 6px 0 2px;
}

/* ============================================================
   GANTT BARS — interactive (drag to resize/move)
   ============================================================ */
.gantt-bar {
  cursor: grab;
  user-select: none;
}
.gantt-bar:active { cursor: grabbing; }

.gantt-handle {
  position: absolute;
  top: 0; bottom: 0;
  width: 6px;
  cursor: ew-resize;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 2px;
  transition: background 0.12s ease;
}
.gantt-handle:hover {
  background: rgba(255, 255, 255, 0.75);
}
.gantt-handle-left  { left: 0; }
.gantt-handle-right { right: 0; }

.gantt-bar-label {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  font-family: "Inter", monospace;
  pointer-events: none;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  overflow: hidden;
}

/* ============================================================
   USER FORM — per-day schedule rows
   ============================================================ */
.schedule-template {
  background: var(--p-surface);
  border: 1px solid var(--p-navy-l);
  border-radius: var(--r-md);
  padding: 12px;
  margin-bottom: 14px;
}
.schedule-template-head {
  font-size: 11px;
  font-weight: 700;
  color: var(--p-navy);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}
.schedule-template-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.schedule-template-row .time-field { flex: 0 0 130px; }
.schedule-template-row .btn { padding: 7px 12px; font-size: 12px; }

.schedule-days-list {
  display: flex; flex-direction: column;
  gap: 4px;
}
.schedule-day-row {
  display: grid;
  grid-template-columns: 130px 1fr 90px 36px;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  transition: all 0.12s ease;
}
.schedule-day-row.day-active {
  background: var(--p-band-1);
  border-color: var(--p-navy-l);
}
.schedule-day-toggle {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer;
  user-select: none;
}
.schedule-day-toggle input { cursor: pointer; }
.schedule-day-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--p-text);
}
.schedule-day-times {
  display: flex; align-items: center; gap: 6px;
}
.schedule-day-times .inp {
  padding: 5px 8px;
  font-size: 12px;
  font-family: "Inter", monospace;
}
.schedule-day-arrow {
  color: var(--p-text-3);
  font-weight: 700;
}
.schedule-day-status {
  font-size: 11px;
  text-align: center;
  font-family: "Inter", monospace;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
}
.schedule-day-status.on {
  background: var(--p-green-bg);
  color: var(--p-green);
}
.schedule-day-status.off {
  background: var(--p-band-2);
  color: var(--p-text-3);
  font-style: italic;
  font-family: inherit;
}
.day-copy-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--p-border);
  background: var(--p-surface);
  color: var(--p-text-2);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.12s ease;
}
.day-copy-btn:hover {
  border-color: var(--p-navy);
  background: var(--p-navy);
  color: #fff;
  transform: scale(1.05);
}

/* ============================================================
   TOAST SYSTEM (replaces alert)
   ============================================================ */
.toast-container {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  /* B063 item 3: toasts must sit ABOVE full-screen overlays (field shell z9000, chat z9300) so a
     blocked-submit warning is actually visible — was z2000 (hidden behind the field shell on mobile).
     Stays BELOW the shared p360 dialogs (z10000), which is correct (a toast under a modal dialog). */
  z-index: 9990;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--p-surface);
  border: 1.5px solid var(--p-border);
  box-shadow: var(--sh-toast);
  font-size: 13px;
  font-weight: 700;
  color: var(--p-text);
  min-width: 260px;
  max-width: 480px;
  animation: toast-in 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.toast.fade-out { animation: toast-out 0.2s ease-in forwards; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-16px) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-12px) scale(0.95); }
}
.toast-icon {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
}
.toast.toast-error {
  background: var(--p-red-bg);
  border-color: var(--p-red);
  color: var(--p-red-d);
}
.toast.toast-error .toast-icon { background: var(--p-red); color: #fff; }
.toast.toast-warn {
  background: var(--p-amber-bg);
  border-color: var(--p-amber);
  color: var(--p-amber-d);
}
.toast.toast-warn .toast-icon { background: var(--p-amber); color: #fff; }
.toast.toast-success {
  background: var(--p-green-bg);
  border-color: var(--p-green);
  color: var(--p-green-d);
}
.toast.toast-success .toast-icon { background: var(--p-green); color: #fff; }
.toast.toast-info {
  background: var(--p-info-bg);
  border-color: var(--p-info);
  color: var(--p-info-d);
}
.toast.toast-info .toast-icon { background: var(--p-info); color: #fff; }

/* Themed confirm modal — danger variant */
.modal.modal-danger .modal-head {
  background: var(--p-red-bg);
  border-bottom-color: var(--p-red);
}
.modal.modal-danger .modal-title { color: var(--p-red-d); }

/* Cascade delete children list */
.cascade-children {
  background: var(--p-red-bg);
  border: 1px solid var(--p-red);
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-size: 12px;
  color: var(--p-text);
  max-height: 180px;
  overflow-y: auto;
}
.cascade-children-head {
  font-size: 11px;
  font-weight: 700;
  color: var(--p-red);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.cascade-children ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cascade-children li {
  padding: 3px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cascade-children li::before {
  content: "↳";
  color: var(--p-red);
  font-weight: 700;
}
/* Deletion-guard impact panel */
.dg-impact {
  border-radius: var(--r-md);
  font-size: 12.5px;
  margin-bottom: 12px;
}
.dg-impact-head {
  font-size: 11px;
  font-weight: 800;
  color: #92400E;
  margin-bottom: 6px;
}
.dg-impact ul {
  list-style: none; padding: 0; margin: 0;
  background: #FEF3C7;
  border: 1px solid #F0C674;
  border-radius: var(--r-md);
  padding: 10px 14px;
}
.dg-impact-head + ul { margin-top: 0; }
.dg-impact li {
  padding: 3px 0;
  color: #78350F;
  display: flex; align-items: center; gap: 6px;
}
.dg-impact li::before { content: "↳"; color: #B45309; font-weight: 700; }
.dg-impact-clean {
  background: #DCFCE7;
  border: 1px solid #86EFAC;
  color: #15803D;
  border-radius: var(--r-md);
  padding: 8px 12px;
  font-weight: 600;
  font-size: 12.5px;
}
.dg-reassign-wrap { margin-top: 12px; }
.btn-navy {
  background: var(--p-navy);
  color: white;
  border: 1px solid var(--p-navy);
}
.btn-navy:hover { background: #14324F; }

/* Filter bar (per-column dropdowns + column chooser) */
.cl-filter-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 6px;   /* round-2 #9: trim wasted space above «الأعمدة» */
  font-family: 'Tajawal', 'Inter', sans-serif;
}
.cl-filter-label { font-size: 12px; font-weight: 700; color: var(--p-text-2); }
.cl-filter-select {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1.5px solid var(--p-border);
  background: var(--p-surface);
  color: var(--p-text);
  cursor: pointer;
  max-width: 180px;
}
.cl-filter-select.active { border-color: var(--p-teal); background: #F2F8F5; font-weight: 600; }
.cl-filter-clear {
  font-size: 12px; font-weight: 700; padding: 5px 12px;
  border-radius: 999px; border: 1.5px solid var(--p-red);
  background: transparent; color: var(--p-red); cursor: pointer;
}
.cl-cols-btn {
  font-size: 12px; font-weight: 700; padding: 5px 12px;
  border-radius: 8px; border: 1.5px solid var(--p-navy);
  background: transparent; color: var(--p-navy); cursor: pointer;
  margin-inline-start: auto;
}
/* Column chooser */
.cl-col-choose-list { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.cl-col-choose-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 8px; cursor: pointer; font-size: 13px;
}
.cl-col-choose-item:hover { background: #F2F8F5; }
.cl-col-choose-item input { width: 16px; height: 16px; }
/* Ticket icon used in category/department counts */
.p-ticket-ico {
  width: 14px; height: 14px;
  vertical-align: -2px;
  display: inline-block;
  color: var(--p-teal);
}
.cat-sub-tkt {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 700; color: var(--p-teal);
  background: var(--p-emerald-bg); padding: 1px 8px; border-radius: 999px;
  margin-inline-start: 8px;
}
.ux-bc-tag {
  font-size: 9px;
  font-weight: 700;
  background: var(--p-info-bg);
  border: 1px solid var(--p-info);
  color: var(--p-info-d);
  padding: 1px 6px;
  border-radius: 4px;
  margin-inline-start: 4px;
}
.btn-danger:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}


/* Shared permission-description floating tooltip — Roles matrix + cards.
   ONE reused body-level node, position:fixed so the matrix's horizontal
   overflow:auto scroll container can never CLIP it. z-index stays BELOW the
   shared p360 dialogs (10000). Theme via --p-* tokens only (day + night
   inherited from the token overrides) — no hardcoded hex. */
.p-permtip {
  position: fixed;
  z-index: 9000;
  display: none;
  width: 300px;
  max-width: calc(100vw - 24px);
  background: var(--p-surface);
  color: var(--p-text-2);
  border: 1px solid var(--p-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-pop);
  padding: 11px 13px;
  font-size: 12.5px;
  line-height: 1.65;
  text-align: start;
  pointer-events: none;
}
.p-permtip.show { display: block; }
.p-permtip .pt-name { font-weight: 700; color: var(--p-text); margin-bottom: 3px; }
.p-permtip .pt-desc { color: var(--p-text-2); }
.p-permtip .pt-def  {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--p-border);
  color: var(--p-text-3);
  font-size: 11.5px;
}
.p-permtip .pt-desc:empty,
.p-permtip .pt-def:empty { display: none; }
/* The permission cell/item is a tooltip target — keep the NORMAL cursor (no
   help question-mark); just give a subtle keyboard-focus ring (logical, token). */
.rm-perm-cell[data-permtip]:focus-visible {
  outline: 2px solid var(--p-emerald);
  outline-offset: -2px;
}

/* ============================================================
   TICKETS ROADMAP — list page (filters + table + pagination)
   ============================================================ */
.intake-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  background: none;
  border: none;
  border-radius: 0;
  color: var(--p-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 10px;
  margin-top: 8px;
  margin-right: 4px;
  transition: color 0.12s ease;
}
.intake-back-btn:hover { color: var(--p-emerald-d); }
/* B027 PART 4: .tt-filters (old quick-filter bar container) removed — replaced by .ck-smartbar (B025 F). */
.tt-filter-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 8px;
}
.tt-filter-row:last-child { margin-bottom: 0; }
.tt-filter-label {
  font-size: 11px;
  color: var(--p-text-2);
  font-weight: 600;
  margin-inline-end: 4px;
  min-width: 60px;
}
.tt-chip {
  padding: 5px 11px;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--r-pill);
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
  font-family: inherit;
  color: var(--p-text);
}
.tt-chip:hover { border-color: var(--p-border-2); }
.tt-chip.on {
  background: #1A7F64;
  color: white;
  border-color: #1A7F64;
}
.tt-chip .cnt {
  font-size: 10px;
  opacity: 0.7;
  font-family: 'Inter', monospace;
}
.tt-chip.on .cnt { opacity: 1; }

.tt-search-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 4px;
}
.tt-search-row input, .tt-search-row select {
  padding: 6px 10px;
  border: 1px solid var(--p-border);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 12px;
  background: var(--p-surface);
  color: var(--p-text);
}
.tt-search-row input { flex: 1; min-width: 140px; }
.tt-search-row select { min-width: 140px; }

.tt-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 4px 10px;
  font-size: 12px;
  color: var(--p-text-2);
  flex-wrap: wrap;
  gap: 8px;
}
.tt-toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.tt-columns-chooser { position: relative; }
.tt-cc-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 12px;
  color: var(--p-text);
  cursor: pointer;
}
.tt-cc-btn:hover { border-color: var(--p-border-2); }
.tt-cc-menu {
  position: absolute;
  top: calc(100% + 4px);
  inset-inline-end: 0;
  background: var(--p-surface);
  border: 1px solid var(--p-border-2);
  border-radius: var(--r-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  padding: 8px 0;
  z-index: 1000;
  min-width: 200px;
}
.tt-cc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 12px;
  color: var(--p-text);
  cursor: pointer;
}
.tt-cc-item:hover { background: var(--p-band-1); }
.tt-cc-item input { cursor: pointer; }
.tt-cc-reset {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--p-teal);
  cursor: pointer;
  border-top: 1px solid var(--p-border);
  margin-top: 4px;
}
.tt-cc-reset:hover { background: var(--p-band-1); }
/* Column drag-to-relocate visual states */
.tt-row-head .col[draggable="true"] { cursor: grab; }
.tt-row-head .col.col-dragging { opacity: 0.4; }
.tt-row-head .col.col-drop-target {
  box-shadow: inset 2px 0 0 var(--p-teal);
  background: rgba(15,110,86,0.06);
}

/* Horizontal scroll wrapper for the table */
.tt-table-scroll {
  overflow-x: auto;
  overflow-y: visible;
}
#page-tickets { min-width: 900px; max-width: none; }
.tt-table-scroll .tt-table {
  width: max-content;
  min-width: 100%;
}

/* Sort arrows on column headers — headers fill full column width so alignment matches body cells */
.tt-row-head .col {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.tt-sort-arrow {
  font-size: 9px;
  color: var(--p-text-3);
  opacity: 0.6;
}
.tt-row-head .col.sorted .tt-sort-arrow {
  color: var(--p-emerald-d);
  opacity: 1;
}
.tt-rows-per-page {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.tt-rows-per-page select {
  padding: 3px 6px;
  border: 1px solid var(--p-border);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 11px;
  background: var(--p-surface);
}
.tt-toolbar-info strong { color: var(--p-text); font-weight: 600; }

.tt-table {
  background: var(--p-surface);
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--p-border-2);
  box-shadow: var(--sh-sm);
  --tt-grid: 32px 110px 1fr 130px 95px 80px; /* default, overridden by JS */
}
.tt-row-head, .tt-row {
  display: grid;
  grid-template-columns: var(--tt-grid);
  gap: 10px;
  align-items: center;
  padding: 7px 14px;
  font-size: 12px;
  border-bottom: 0;   /* grid-clean: no dividers / header underline (zebra carries the rows) */
  min-height: 36px;
}
/* grid-clean zebra for the div-grid rows (beige --p-band, day+night). JS-classed so it is robust;
   hover + idle/closed state backgrounds (defined later) override it by source order. */
.tt-row.tt-zeb-a { background: var(--p-band-1); }
.tt-row.tt-zeb-b { background: var(--p-band-2); }
.tt-row-head {
  background: var(--p-hd-grad);
  font-size: 11px;
  font-weight: 700;
  color: #ffffff !important;
  padding-top: 9px;
  padding-bottom: 9px;
}
.tt-row-head .col { color: #ffffff !important; cursor: pointer; user-select: none; }
.tt-row-head .col:hover { color: #C8EFE0 !important; }
.tt-row { transition: background 0.1s ease; }
.tt-row:hover { background: #F3F9F6; cursor: pointer; }
.tt-row:last-child { border-bottom: none; }

/* Single-line enforcement — no wrapping, truncate with ellipsis */
.tt-row > div, .tt-row-head > div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.tt-row .tt-title {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 5px;
  overflow: hidden;
}
.tt-row .tt-title > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.tt-row .tt-badges {
  display: inline-flex;
  gap: 4px;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.tt-edge {
  height: 28px;
  border-radius: 2px;
}
.tt-edge.red {
  background: var(--p-red);
  animation: ttPulseRed 1.4s infinite;
}
.tt-edge.amber {
  background: var(--p-amber);
  animation: ttPulseAmber 2s infinite;
}
.tt-edge.green { background: var(--p-green); }
.tt-edge.grey { background: #CBD5E1; }
@keyframes ttPulseRed {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5); }
  50% { opacity: 0.65; box-shadow: 0 0 0 4px rgba(220, 38, 38, 0); }
}
@keyframes ttPulseGold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(197, 151, 10, .55); }
  50% { box-shadow: 0 0 0 5px rgba(197, 151, 10, 0); }
}
@keyframes ttPulseAmber {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.tt-num {
  font-family: 'Inter', monospace;
  font-weight: 600;
  font-size: 12px;
}
.tt-num.wazara { color: var(--p-red); }
.tt-num.company { color: var(--p-text); }
.tt-cell-text {
  font-size: 12px;
  color: var(--p-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tt-desc { color: var(--p-text-2); }
.tt-pri {
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
}
.tt-pri.is-high { background: rgba(220,38,38,0.10); color: #DC2626; }
.tt-pri.is-med  { background: rgba(217,119,6,0.14); color: #D97706; }
.tt-pri.is-low  { background: rgba(22,163,74,0.12); color: #16A34A; }

.tt-title {
  color: var(--p-text);
  line-height: 1.4;
  font-weight: 500;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}
.tt-badges {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
}
.tt-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}
.tt-badge.source-wazara { background: var(--p-red-bg); border: 1px solid var(--p-red); color: var(--p-red-d); }
.tt-badge.routed { background: #EEDDFE; color: #5B21B6; border-radius: 4px; } /* no --p-* token for this hue; corners 4px, color kept pending token decision */
.tt-badge.missing-data { background: var(--p-amber-bg); border: 1px solid var(--p-amber); color: var(--p-amber-d); }
.tt-badge.reopened { background: #E2E8F0; color: #334155; border-radius: 4px; } /* no --p-* token for this hue; corners 4px, color kept pending token decision */
.tt-badge.rtc-internal { background: var(--p-info-bg); border: 1px solid var(--p-info); color: var(--p-info-d); }
.tt-badge.rtc-external { background: var(--p-info-bg); border: 1px solid var(--p-info); color: var(--p-info-d); }

.tt-pri {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  text-align: center;
  display: inline-block;
}
.tt-pri.high { background: var(--p-red-bg); border: 1px solid var(--p-red); color: var(--p-red-d); }
.tt-pri.medium { background: var(--p-amber-bg); border: 1px solid var(--p-amber); color: var(--p-amber-d); }
.tt-pri.low { background: var(--p-green-bg); border: 1px solid var(--p-green); color: var(--p-green-d); }
.tt-pri.important { background: var(--p-amber-bg); border: 1px solid var(--p-amber); color: var(--p-amber-d); }
.tt-pri.normal { background: var(--p-info-bg); border: 1px solid var(--p-info); color: var(--p-info-d); }

.tt-sla-cell {
  font-family: 'Inter', monospace;
  font-size: 11px;
  font-weight: 600;
}
.tt-sla-cell.over { color: var(--p-red); }
.tt-sla-cell.near { color: var(--p-amber); }
.tt-sla-cell.fine { color: var(--p-green); }
.tt-sla-cell.closed { color: #94A3B8; }
.tt-sla-cell.none { color: #94A3B8; }
/* B3.7: no service agreement — a distinct, flagged badge (purple/amber), never a phantom budget. */
.tt-sla-cell.noagr { color: #7C3AED; background: #F3E8FF; border: 1px dashed #C4B5FD; border-radius: 4px; padding: 1px 6px; white-space: nowrap; } /* no --p-* token for this hue; corners 4px, color kept pending token decision (dashed border kept = deliberate no-agreement indicator) */
/* B3.8: exempt from SLA — neutral, clearly out of the computation. */
.tt-sla-cell.exempt { color: #64748B; background: #F1F5F9; border: 1px solid #E2E8F0; border-radius: 4px; padding: 1px 6px; white-space: nowrap; } /* no --p-* token for this hue; corners 4px, color kept pending token decision */

.tt-dept {
  font-size: 11px;
  color: var(--p-text-2);
}

.tt-procs {
  text-align: start;
  font-size: 11px;
  color: var(--p-text-2);
}
.tt-procs strong {
  font-weight: 600;
  color: var(--p-text);
  font-family: 'Inter', monospace;
}

.tt-row.closed { opacity: 0.55; }
.tt-row.idle {
  background: #F4F1F8;
}
.tt-row.idle:hover { background: #EDE7F4; }

/* Role preview bar (admin testing aid) */
.rp-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 12px;
  background: linear-gradient(90deg, #FEF3C7 0%, #FDE68A 100%);
  border: 1px dashed #D97706;
  border-radius: var(--r-md);
  margin: 14px 0 8px;
  font-size: 11px;
}
.rp-label {
  color: #92400E;
  font-weight: 700;
  font-size: 11px;
  margin-inline-end: 4px;
}
.rp-btn {
  padding: 4px 10px;
  border: 1px solid #D97706;
  background: var(--p-surface);
  color: #92400E;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.12s ease;
}
.rp-btn:hover { background: #FEF3C7; }
.rp-btn.on {
  background: #D97706;
  color: white;
  font-weight: 600;
}

/* Pulsing SLA icons (over / near / fine) */
.tt-sla-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tt-pulse-heart {
  font-size: 14px;
  animation: pulseHeart 0.9s ease-in-out infinite;
  line-height: 1;
}
.tt-pulse-heart.over { color: #DC2626; }
.tt-pulse-heart.fine { color: #16A34A; }
.tt-flip-hourglass {
  color: #D97706;
  font-size: 13px;
  display: inline-block;
  line-height: 1;
  animation: flipHourglass 4s ease-in-out infinite;
  transform-origin: center;
}
@keyframes pulseHeart {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.25); opacity: 0.75; }
}
@keyframes flipHourglass {
  0%, 35%   { transform: rotate(0deg); }
  60%, 95%  { transform: rotate(180deg); }
  100%      { transform: rotate(360deg); }
}

/* Procs cell — attachment chip */
.tt-proc-attach {
  display: inline-block;
  font-family: 'Inter', monospace;
  font-size: 10px;
  color: #5F5E5A;
  margin-inline-start: 4px;
  white-space: nowrap;
}

/* Report Type pill */
.tt-rt {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.tt-rt.is-report    { background: #E6F4F1; color: #145F4C; }
.tt-rt.is-complaint { background: #FEE2E2; color: #B91C1C; }

/* Data Quality pill */
.tt-dq {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}
.tt-dq.is-complete { background: #DCFCE7; color: #15803D; }
.tt-dq.is-partial  { background: #FEF3C7; color: #92400E; }
.tt-dq.is-wrong    { background: #FEE2E2; color: #B91C1C; }

/* Quality-pending badge */
.tt-badge.quality-pending {
  background: #F0EDFE;
  color: #6D28D9;
}

/* Closure approved badge */
.tt-badge.closure-approved {
  background: #DCFCE7;
  color: #15803D;
}

/* Status cell pill */
.tt-status {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.tt-status.is-open   { background: #DCFCE7; color: #15803D; }
.tt-status.is-closed { background: #E2E8F0; color: #475569; }

/* Opened-at cell */
.tt-opened-cell {
  font-family: 'Inter', monospace;
  font-size: 10px;
  color: var(--p-text-2);
  white-space: nowrap;
}

.tt-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 4px 0;
  font-size: 12px;
  color: var(--p-text-2);
  flex-wrap: wrap;
  gap: 8px;
}
.tt-pages {
  display: flex;
  gap: 3px;
  justify-content: center;
  align-items: center;
  margin: 14px auto 0;
}
.tt-page-btn {
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: var(--r-sm);
  border: 1px solid var(--p-border);
  background: var(--p-surface);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  color: var(--p-text);
}
.tt-page-btn.tt-page-edge {
  font-size: 12px;
  color: var(--p-teal);
  font-weight: 700;
}
.tt-page-btn.current {
  background: var(--p-emerald-d);
  color: white;
  border-color: var(--p-emerald-d);
}
.tt-page-btn:not(.current):hover { background: #F1F5F9; }
.tt-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 900px) {
  .tt-row-head, .tt-row {
    grid-template-columns: 4px 100px 1fr 90px 80px 38px;
  }
  .tt-row-head .col-dept, .tt-row-head .col-procs,
  .tt-row .tt-dept, .tt-row .tt-procs { display: none; }
}
@media (max-width: 640px) {
  .tt-row-head, .tt-row {
    grid-template-columns: 4px 90px 1fr 75px 38px;
    padding: 9px 10px;
    gap: 7px;
    font-size: 11px;
  }
  .tt-row-head .col-priority,
  .tt-row .tt-pri-cell { display: none; }
  .tt-badges { display: none; }
}

/* ============================================================
   ROLES PAGE — composable role management
   ============================================================ */
.rvt-btn {
  border: none;
  background: transparent;
  padding: 6px 14px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--p-text-2);
  cursor: pointer;
}
.rvt-btn.on { background: var(--p-surface); color: var(--p-navy); box-shadow: var(--sh-sm); }
.rm-hint {
  font-size: 11.5px;
  color: var(--p-text-3);
  margin-bottom: 8px;
}
.rm-scroll {
  overflow: auto;
  max-height: 72vh;
  border: 1px solid var(--p-border-2);
  border-radius: var(--r-md);
}
.roles-matrix {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
  min-width: 100%;
}
.roles-matrix th, .roles-matrix td {
  border-right: 1px solid var(--p-border);
  border-bottom: 1px solid var(--p-border);
  padding: 8px 12px;
  background: var(--p-surface);
}
.roles-matrix thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: linear-gradient(180deg, var(--p-emerald), var(--p-emerald-d));
  color: white;
  text-align: center;
  vertical-align: middle;
}
.rm-corner {
  position: sticky;
  inset-inline-start: 0;
  top: 0;
  z-index: 5 !important;
  min-width: 240px;
  text-align: start !important;
}
.rm-role-col { min-width: 110px; }
.rm-role-name { font-weight: 700; font-size: 12px; }
.rm-role-meta { font-size: 10px; opacity: 0.85; font-weight: 400; margin-top: 2px; }
.rm-perm-cell, .rm-group-cell {
  position: sticky;
  inset-inline-start: 0;
  z-index: 2;
  background: var(--p-surface);
  min-width: 240px;
  max-width: 320px;
}
.rm-group-row { cursor: pointer; }
.rm-group-row td { background: var(--p-band-3); font-weight: 700; }
.rm-group-cell { display: flex; align-items: center; gap: 8px; }
.rm-group-chev {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--p-navy);
  border-radius: 4px;
  font-size: 12px; font-weight: 700; color: var(--p-navy);
  flex-shrink: 0;
}
.rm-group-title { color: var(--p-navy); }
.rm-group-id { font-size: 10px; color: var(--p-text-3); font-weight: 400; }
.rm-group-count { text-align: center; font-size: 11px; color: var(--p-text-2); background: var(--p-band-3); font-weight: 700; }
.rm-perm-label { display: block; color: var(--p-text); }
.rm-perm-id { display: block; font-size: 10px; color: var(--p-text-3); font-family: 'Inter', monospace; margin-top: 1px; }
.rm-cell { text-align: center; }
.rm-chk { cursor: pointer; width: 16px; height: 16px; }
.rm-chk:disabled { cursor: not-allowed; }
/* Beige ZEBRA on permission rows (theme tokens, day+night). Both the cell and the
   sticky perm-cell get the SAME opaque band so the frozen column matches the row. */
.roles-matrix tr.rm-perm-row td { background: var(--p-band-1); }
.roles-matrix tr.rm-perm-row.rm-zb td { background: var(--p-band-2); }
.roles-matrix tr.rm-perm-row:hover td { background: var(--p-emerald-bg); }
/* Clickable role headers (everything except the perm-name column + the locked admin). */
.roles-matrix thead th.rm-role-head { cursor: pointer; }
.roles-matrix thead th.rm-role-lock { cursor: default; }
.rm-head-tap { font-size: 10px; font-weight: 400; opacity: 0.9; display: block; margin-top: 2px; }
/* «إعدادات الدور» = a SETTING block, visually distinct from permission groups (bluish tint). */
/* B002 FIX 3: the channel-row accent stripe is GREEN (was a blue tint invisible at night).
   Theme token (--p-green-bg) with a night override below — never hardcoded hex. */
.roles-matrix tr.rm-setrow td { background: color-mix(in srgb, var(--p-green-bg) 60%, var(--p-surface)); }
.roles-matrix tr.rm-setrow td.rm-perm-cell { font-weight: 600; background: color-mix(in srgb, var(--p-green-bg) 60%, var(--p-surface)); }
html[data-theme="night"] .roles-matrix tr.rm-setrow td { background: color-mix(in srgb, var(--p-green) 22%, var(--p-surface)); }
html[data-theme="night"] .roles-matrix tr.rm-setrow td.rm-perm-cell { background: color-mix(in srgb, var(--p-green) 22%, var(--p-surface)); }
/* the column-selection highlight when a role popup is open */
.roles-matrix thead th.rm-col-sel { outline: 3px solid var(--p-gold); outline-offset: -3px; }
.roles-matrix td.rm-col-sel { box-shadow: inset 3px 0 0 var(--p-gold), inset -3px 0 0 var(--p-gold); }
/* channel control chip (role-default row + member rows) */
.rm-chctl {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--p-border); border-radius: 7px;
  padding: 3px 9px; background: var(--p-surface); color: var(--p-text);
  font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.rm-chctl:hover { border-color: var(--p-emerald); }
.rm-chctl.is-inherit { border-style: dashed; color: var(--p-text-3); }
/* Owner column channel = display-only (the owner tier has no editable role default here). */
.rm-chctl.is-locked { cursor: default; opacity: 0.7; }
.rm-ch-ph  { color: var(--p-red); }
.rm-ch-mute { color: var(--p-gold); }
.rm-ch-tx { font-size: 12px; }
/* floating list menu (the copy-permissions role picker; the channel selector no longer uses it — B054) */
.rm-chmenu {
  position: fixed; z-index: 9100; min-width: 180px;
  background: var(--p-surface); border: 1px solid var(--p-border);
  border-radius: 9px; box-shadow: var(--sh-pop); overflow: hidden;
}
.rm-chmenu button {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 8px 12px; border: 0; background: none; color: var(--p-text);
  font: inherit; font-size: 13px; cursor: pointer; text-align: start;
}
.rm-chmenu button:hover { background: var(--p-emerald-bg); }
/* B055: role-axis chips = SOLID FILLED pills, WHITE text — matching the approved mock (Scope_RootSolution_Mock).
   These are FIXED semantic axis colours, deliberately theme-INDEPENDENT: the white text must stay readable in BOTH
   day and night, but the --p-* colour tokens flip LIGHT in night (white-on-light), so the mock's vivid fills are
   used as fixed values here (the mock wins per the block). The plain channel chip rm-chctl stays outlined. */
.rm-axctl { color: #fff; border: 1px solid transparent; font-weight: 700; }
.rm-axctl.rm-ax-all            { background: #16A34A; }   /* كل الشركة — green */
.rm-axctl.rm-ax-own_department { background: #1E66C7; }   /* إدارته — blue */
.rm-axctl.rm-ax-b2c            { background: #C5970A; }   /* قطاع الأفراد — gold */
.rm-axctl.rm-ax-yes            { background: #1E66C7; }   /* نعم — blue (same as إدارته) */
.rm-axctl.rm-ax-no             { background: #9AA6A0; }   /* لا — grey */
.rm-axctl.rm-mgr-manager       { background: #1E66C7; }   /* B085 §2.E مدير — blue */
.rm-axctl.rm-mgr-supervisor    { background: #0E8C7A; }   /* B106 مشرف — teal (middle rank) */
.rm-axctl.rm-mgr-employee      { background: #9AA6A0; }   /* B085 §2.E موظّف — grey */
.rm-axctl.rm-mgr-na            { background: #9AA6A0; }
.rm-axctl.is-ro { cursor: default; opacity: .8; }
/* B085 §2.E — soft, non-blocking «no manager» dept notice (gentle amber, never alarming). */
.dept-meta-pill.dept-no-mgr { background: color-mix(in srgb, var(--p-amber) 16%, transparent); color: var(--p-amber-d, #9C7A08); border: 1px solid color-mix(in srgb, var(--p-amber) 32%, transparent); }
/* B084 — per-capability AUTHORITY-MODE chips: rotating, one solid colour per mode (same pill look as the axis
   chips; fixed semantic colours, theme-independent so white text stays readable day+night). Ascending intensity. */
.rm-pmctl { color: #fff; border: 1px solid transparent; font-weight: 700; }
.rm-pmctl.rm-pm-none      { background: #9AA6A0; }   /* بدون صلاحية — grey  */
.rm-pmctl.rm-pm-use       { background: #16A34A; }   /* لنفسه فقط — green */
.rm-pmctl.rm-pm-admin     { background: #C5970A; }   /* لغيره فقط — gold  */
.rm-pmctl.rm-pm-use_admin { background: #1E66C7; }   /* لنفسه ولغيره — blue */
.rm-pmctl.is-ro { cursor: default; opacity: .8; }
/* role member popup (anchored under the clicked header; fixed → never clipped) */
.rm-pop {
  position: fixed; z-index: 9000; width: 372px; max-width: calc(100vw - 24px);
  background: var(--p-surface); border: 1px solid var(--p-border);
  border-radius: 11px; box-shadow: var(--sh-pop); overflow: hidden; display: none;
}
.rm-pop.show { display: block; }
.rm-pop-hd {
  background: linear-gradient(180deg, var(--p-green), var(--p-green-d));
  color: #fff; display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; font-weight: 600; font-size: 13.5px;
}
.rm-pop-hd .rm-pop-x { margin-inline-start: auto; cursor: pointer; font-size: 15px; line-height: 1; }
/* HEADER STANDARD: object headers switch to the emerald gradient in night (green==green-d there). */
html[data-theme="night"] .rm-pop-hd { background: linear-gradient(180deg, var(--p-emerald), var(--p-emerald-d)); }
.rm-pop-sub { font-size: 11.5px; color: var(--p-text-3); padding: 8px 12px 3px; text-align: start; }
/* B042 Part 2: team-kind picker row in the role popup */
/* B054: the role-axis controls moved to rotating matrix rows; the old member-popover axis CSS is retired. */
.rm-pop-mlist { max-height: 220px; overflow: auto; padding: 0 8px; }
.rm-pop-mem {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 4px; border-bottom: 1px dashed var(--p-border); font-size: 13px;
}
.rm-pop-mem .rm-pop-who { font-weight: 500; color: var(--p-text); }
.rm-pop-mem .rm-chctl { margin-inline-start: auto; }
.rm-pop-mem .rm-pop-rm { cursor: pointer; color: var(--p-red); font-size: 14px; background: none; border: 0; padding: 0 2px; }
.rm-pop-empty { color: var(--p-text-3); font-size: 13px; padding: 12px 6px; text-align: start; }
.rm-pop-add {
  display: block; width: calc(100% - 16px); margin: 8px;
  border: 1px dashed var(--p-green); color: var(--p-green); background: none;
  border-radius: 8px; padding: 7px; font: inherit; font-size: 13px; cursor: pointer;
}
.rm-pop-ft { display: flex; gap: 6px; align-items: center; border-top: 1px solid var(--p-border); padding: 8px 10px; }
.rm-pop-ft button { border: 1px solid transparent; border-radius: 7px; padding: 6px 10px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: filter .15s, transform .12s; }
.rm-pop-ft button:hover { filter: brightness(1.05); transform: translateY(-1px); }
.rm-pop-ft .rm-pop-cancel { background: transparent; border-color: var(--p-border-2); color: var(--p-text-2); }
.rm-pop-ft .rm-pop-rename, .rm-pop-ft .rm-pop-copy { background: var(--p-green-bg); border-color: var(--p-green); color: var(--p-green-d); }
.rm-pop-ft .rm-pop-del { margin-inline-start: auto; background: linear-gradient(135deg, var(--p-red), var(--p-red-d)); color: #fff; border-color: var(--p-red-d); }

/* ============================================================
   SHARED TABLE PRIMITIVES (Part 5) — ONE pagination + top-bar + clean-grid for EVERY table.
   Theme tokens (--p-*), day+night. The clients-table gold pager is the visual reference.
   ============================================================ */
/* top bar (start side): rows-per-page + column selector + show-all */
.p360-tbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.p360-tbar-ctrl { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--p-text-2); }
.p360-tbar select,
.p360-tbar-btn {
  font-family: inherit; font-size: 12px; padding: 5px 10px;
  border: 1px solid var(--p-border); border-radius: var(--r-sm);
  background: var(--p-surface); color: var(--p-text); cursor: pointer;
}
.p360-tbar-btn:hover { border-color: var(--p-emerald); }
.p360-tbar-btn.on { background: var(--p-gold); color: #fff; border-color: var(--p-gold-d); }
/* column-selector menu (fixed → never clipped; z-index below the 10000 dialogs) */
.p360-colmenu {
  position: fixed; z-index: 9100; min-width: 190px; max-height: 320px; overflow: auto;
  background: var(--p-surface); border: 1px solid var(--p-border);
  border-radius: 9px; box-shadow: var(--sh-pop); padding: 6px;
}
.p360-colmenu label {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  font-size: 13px; color: var(--p-text); cursor: pointer; border-radius: 6px; text-align: start;
}
.p360-colmenu label:hover { background: var(--p-band-1); }
.p360-colmenu input[type="checkbox"] { accent-color: var(--p-emerald); width: 15px; height: 15px; }
.p360-colmenu label.locked { opacity: 0.5; cursor: not-allowed; }
/* pagination — gold, centered below the table; direction-aware chevrons via logical markup */
.p360-pager { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 12px 0 4px; }
.p360-pager button {
  min-width: 32px; height: 32px; padding: 0 9px;
  border: 1px solid var(--p-gold); border-radius: var(--r-sm);
  background: var(--p-surface); color: var(--p-gold-d);
  font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.p360-pager button:hover:not(:disabled) { background: var(--p-gold); color: #fff; }
.p360-pager button.active { background: var(--p-gold); color: #fff; }
.p360-pager button:disabled { opacity: 0.4; cursor: not-allowed; }
.p360-pager .p360-ellipsis { color: var(--p-text-3); padding: 0 2px; }
/* clean grid: remove ALL borders/dividers/header underline; KEEP beige zebra (band tokens). */
.p360-grid-clean,
.p360-grid-clean thead th,
.p360-grid-clean tbody td,
.p360-grid-clean tbody tr { border: 0 !important; }
.p360-grid-clean tbody tr:nth-child(odd) > td { background: var(--p-band-1); }
.p360-grid-clean tbody tr:nth-child(even) > td { background: var(--p-band-2); }
.p360-col-hidden { display: none !important; }

.roles-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 14px 0 10px;
}
.roles-toolbar-left {
  flex: 1;
  max-width: 320px;
}
.roles-toolbar-left .inp {
  width: 100%;
}
.roles-toolbar-right {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

/* User picker modal for role */
/* B002 FIX 4: the add-member picker must sit ABOVE the role-management popup (rm-pop z-index 9000)
   but BELOW the shared p360 dialogs (10000), per the layering standard. */
#role-user-picker-backdrop { z-index: 9500; }
.role-user-picker-modal { max-width: 440px; }
/* B005: grouped multi-select add-member picker */
.rup-group { margin-bottom: 10px; }
.rup-group-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--p-band-2); border-radius: 8px; font-weight: 700; cursor: pointer; }
.rup-group-name { flex: 1; }
.rup-group-count { font-size: 11px; color: var(--p-text-3); background: var(--p-band-1); border-radius: 999px; padding: 1px 8px; }
.rup-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.rup-item:hover { background: var(--p-band-1); }
.rup-item-main { display: flex; flex-direction: column; min-width: 0; }
.rup-item-name { font-weight: 600; }
.rup-item-email { font-size: 11px; color: var(--p-text-3); }
.rup-chk, .rup-group-chk { width: 16px; height: 16px; accent-color: var(--p-green); cursor: pointer; flex-shrink: 0; }
.rmm-chk, .rmm-group-chk { width: 16px; height: 16px; accent-color: var(--p-green); cursor: pointer; flex-shrink: 0; }
.rm-pop-removesel { width: 100%; margin-top: 6px; border: 1px solid var(--p-red); background: var(--p-red-bg); color: var(--p-red-d); border-radius: 7px; padding: 6px 9px; font: inherit; font-size: 12px; cursor: pointer; }
.rm-pop-removesel:disabled { opacity: .5; cursor: not-allowed; }
.role-user-picker-list {
  max-height: 360px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.role-user-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border: 1px solid var(--p-border);
  border-radius: 6px;
  background: var(--p-surface);
  cursor: pointer;
  font-size: 13px;
}
.role-user-picker-item:hover { background: var(--p-band-3); border-color: var(--p-green); }
.role-user-picker-item.in-role { opacity: 0.5; cursor: not-allowed; }
.role-user-picker-item .meta { font-size: 11px; color: var(--p-text-3); }

/* Translation Edit Mode button + indicator */
.tp-tedit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--p-surface);
  border: 1px solid var(--p-border-2);
  border-radius: var(--r-pill);
  color: var(--p-text-2);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.tp-tedit-btn:hover { border-color: var(--p-navy); color: var(--p-navy); }
.tp-tedit-btn.on {
  background: #FEF3C7;
  border-color: #D97706;
  color: #92400E;
  font-weight: 600;
}
body.tedit-mode [data-i18n]:not(input):not(textarea):not(option) {
  outline: 1px dashed rgba(217, 119, 6, 0.4);
  outline-offset: 2px;
  cursor: text;
}
body.tedit-mode [data-i18n]:not(input):not(textarea):not(option):hover {
  outline-color: #D97706;
  background: rgba(254, 243, 199, 0.4);
}
.tedit-active {
  outline: 2px solid #D97706 !important;
  background: white !important;
  cursor: text !important;
}

/* ============================================================
   SETTINGS PAGE — empty shell (coming soon)
   ============================================================ */
.settings-tabs-nav {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--p-surface);
  border-radius: var(--r-md);
  margin: 14px 0 14px;
  border: 1px solid var(--p-border);
  flex-wrap: nowrap;
}
/* Settings nav — single horizontal TOP tab bar (icon + name), flat; panels full-width below it.
   Replaces the old vertical icon rail. Scrolls horizontally on narrow screens (no wrap). */
.settings-shell { position:relative; }
.settings-panels { min-width:0; }
.settings-tabs-nav { position:static; flex-direction:row; flex-wrap:nowrap; width:auto; gap:6px; padding:5px 6px;
   align-items:center; overflow-x:auto; overflow-y:hidden; background:#F4EFE2; border:0.5px solid #E4DECF; }   /* DAY cream strip; night overridden below */
.settings-tabs-nav::-webkit-scrollbar { height:6px; }
.settings-tab { flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.settings-tab .ti { font-size:24px; flex:0 0 auto; }   /* ~+50% larger icons */
.settings-tab .st-label { font-size:14px; display:inline; }
html[data-theme="night"] .settings-tabs-nav { background:var(--p-surface); border-color:var(--p-border); }
.settings-tab {
  position: relative;            /* anchor for the ::before divider */
  padding: 8px 14px;             /* compact */
  background: transparent;       /* inactive = no fill */
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 13px;
  color: #3C5A4D;                /* DAY inactive text; night overridden in theme.css */
  cursor: pointer;
  transition: all 0.12s ease;
}
.settings-tab:hover {
  color: var(--p-text);
  background: rgba(255,255,255,0.6);
}
.settings-tab.on {
  background: var(--p-emerald-d);
  color: white;
  font-weight: 600;
  border-color: var(--p-emerald-d);
}
/* Per-tab inactive icon colors (DAY; night in theme.css). */
.settings-tab[data-settings-tab="general"] i     { color:#6B5BD2; }
.settings-tab[data-settings-tab="tables"] i       { color:#1D9E75; }
.settings-tab[data-settings-tab="chat"] i         { color:#D85A30; }
.settings-tab[data-settings-tab="translation"] i  { color:#378ADD; }
.settings-tab[data-settings-tab="companies"] i    { color:#BA7517; }
/* Active green pill — FORCE white label + icon (id-scoped so it beats per-tab colors in BOTH themes). */
#page-settings .settings-tab.on .st-label { color:#fff; }
#page-settings .settings-tab.on i         { color:#fff; }
/* Small vertical divider in the gap BEFORE every tab except the first; logical inset-inline-start (RTL/LTR-correct).
   Suppressed for the active pill and the tab right after it. A display:none tab drops its own leading divider. */
.settings-tab::before { content:""; position:absolute; inset-inline-start:-3px; top:50%; transform:translateY(-50%);
   width:1px; height:20px; background:#E4DECF; }   /* DAY; night in theme.css */
.settings-tab:first-child::before { display:none; }
.settings-tab.on::before, .settings-tab.on + .settings-tab::before { display:none; }
/* A-9: visual SECTION grouping inside the settings tabs nav. Section labels are NOT .settings-tab,
   so the generic panel-toggle click handler ignores them. force-break to a new flex row before each. */
.settings-tab-group {
  flex-basis: 100%;
  width: 100%;
  margin: 6px 0 1px;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--p-text-3);
  text-transform: none;
  border-top: 1px solid var(--p-border);
  padding-top: 7px;
}
.settings-tab-group:first-child { border-top: none; margin-top: 0; padding-top: 2px; }
/* A-9: NAVIGATE-OUT entries (categories/translations/companies) — styled like a tab but they leave
   the settings page via showPage(). They carry NO data-settings-tab, so the panel-toggle skips them. */
.settings-tab.settings-tab-link::after { content: " ↗"; font-size: 10px; opacity: .6; }
.settings-tab-panel { display: none; }
.settings-tab-panel.on { display: block; }
/* Glossary manager (Cluster 3 Part B) — token-based so it themes day/night; RTL-friendly. */
.glossary-box { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--p-border); max-width: 760px; }
.glossary-hd { margin-bottom: 10px; }
.glossary-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.glossary-table th { text-align: start; font-size: 11px; font-weight: 700; color: var(--p-text-3); padding: 4px 8px; border-bottom: 1px solid var(--p-border); }
.glossary-table td { padding: 7px 8px; border-bottom: 1px solid var(--p-border); color: var(--p-text); }
.gl-base-badge { font-size: 10px; font-weight: 700; color: var(--p-text-3); background: var(--p-band-1); border: 1px solid var(--p-border); border-radius: 4px; padding: 2px 8px; }
.gl-mini { border: 1px solid var(--p-border); background: var(--p-surface); color: var(--p-text-2); border-radius: 6px; padding: 3px 7px; cursor: pointer; font-size: 12px; margin-inline-start: 4px; }
.gl-mini.gl-del:hover { color: var(--p-red); border-color: var(--p-red); }
.gl-mini.gl-edit:hover { color: var(--p-teal); border-color: var(--p-teal); }
.glossary-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.glossary-add .inp { min-width: 120px; }
.glossary-add select.inp { min-width: 70px; flex: 0 0 auto; }
.glossary-arrow { color: var(--p-text-3); font-weight: 700; }
/* System Health rows (Cluster 3 addendum) — token-based, themes day/night; RTL-friendly. */
.sh-row { display: grid; grid-template-columns: 1.4fr 1.6fr auto auto auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--p-border); border-radius: var(--r-md, 12px); background: var(--p-surface); margin-bottom: 10px; max-width: 900px; }
@media (max-width: 760px) { .sh-row { grid-template-columns: 1fr 1fr; } }
.sh-name { font-size: 13.5px; font-weight: 700; color: var(--p-text); }
.sh-target { font-size: 12px; color: var(--p-text-2); direction: ltr; text-align: start; word-break: break-word; }
.sh-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; text-align: center; }
.sh-loc-kingdom { background: var(--p-green-bg); color: var(--p-green-d); }
.sh-loc-external { background: var(--p-amber-bg); color: var(--p-amber-d); }
.sh-health { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.sh-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.sh-up   .sh-dot { background: var(--p-green); box-shadow: 0 0 0 3px var(--p-green-bg); }
.sh-up   { color: var(--p-green-d); }
.sh-down .sh-dot { background: var(--p-red); box-shadow: 0 0 0 3px var(--p-red-bg); }
.sh-down { color: var(--p-red-d); }
.sh-serving { font-size: 11.5px; color: var(--p-text-2); white-space: nowrap; }
.sh-serving b { color: var(--p-text); }

.settings-panel-intro {
  font-size: 13px;
  color: var(--p-text-2);
  margin: 0 0 16px;
  padding: 0 4px;
}
.settings-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  margin-bottom: 10px;
}
.settings-row-info {
  flex: 1;
  min-width: 0;
}
.settings-row-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--p-text);
  margin-bottom: 3px;
}
.settings-row-desc {
  font-size: 11px;
  color: var(--p-text-3);
  line-height: 1.55;
}
.settings-coming-soon {
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--r-md);
  padding: 40px;
  text-align: center;
  color: var(--p-text-3);
}
.settings-coming-soon .cs-icon { font-size: 42px; margin-bottom: 8px; }
.settings-coming-soon .cs-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--p-text);
  margin-bottom: 6px;
}
.settings-coming-soon .cs-text { font-size: 12px; }

.lookup-tables-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.lookup-table-card {
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  box-shadow: var(--sh-sm);
}
.lookup-table-card h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--p-text);
  margin: 0 0 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lookup-table-card .lt-desc {
  font-size: 11px;
  color: var(--p-text-3);
  margin: 0 0 10px;
  line-height: 1.5;
}
.lookup-table-card .lt-count {
  font-size: 10px;
  color: var(--p-text-2);
  background: var(--p-band-3);
  padding: 2px 7px;
  border-radius: 4px;
  font-family: 'Inter', monospace;
}
.lookup-table-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
  max-height: 220px;
  overflow-y: auto;
}
.lookup-table-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: #FAFCFB;
  border: 1px solid var(--p-border);
  border-radius: 6px;
  font-size: 12px;
}
.lookup-table-item .lt-val { color: var(--p-text); }
.lookup-table-item .lt-rm {
  background: transparent;
  border: none;
  color: var(--p-red);
  font-size: 13px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.lookup-add-row {
  display: flex;
  gap: 6px;
}
.lookup-add-row input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--p-border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
}
.lookup-add-row button {
  padding: 6px 12px;
  background: var(--p-emerald-d);
  color: white;
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}

/* (legacy empty-shell styles retained below for backward compatibility) */
.settings-empty-shell {
  max-width: 720px;
  margin: 40px auto;
  padding: 48px 40px;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  text-align: center;
}
.settings-empty-icon {
  font-size: 56px;
  margin-bottom: 12px;
  display: inline-block;
  animation: gentle-rotate 12s linear infinite;
}
@keyframes gentle-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.settings-empty-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--p-text);
  margin-bottom: 10px;
}
.settings-empty-text {
  font-size: 14px;
  color: var(--p-text-2);
  line-height: 1.7;
  margin-bottom: 22px;
}
.settings-tabs-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 24px;
}
.settings-tab-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--p-band-1);
  border: 1px solid var(--p-border);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--p-text-2);
  cursor: not-allowed;
  opacity: 0.7;
}
.settings-empty-note {
  font-size: 12px;
  color: var(--p-text-3);
  font-style: italic;
  line-height: 1.6;
  padding-top: 18px;
  border-top: 1px dashed var(--p-border);
}
.settings-empty-note strong {
  color: var(--p-navy);
  font-style: normal;
  font-weight: 700;
}

/* ============================================================
   WAZ_CATEGORIES PAGE
   ============================================================ */
.cat-info-banner {

  margin-bottom: 12px;
  padding: 10px 14px;
  background: var(--p-amber-bg);
  border: 1px solid var(--p-amber);
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--p-text);
  display: flex; align-items: flex-start; gap: 8px;
  line-height: 1.5;
}
.cat-info-banner strong { color: var(--p-amber); font-weight: 700; }

.cat-sla-mode-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--p-navy-bg);
  color: var(--p-navy);
  border: 1.5px solid var(--p-navy-l);
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s ease;
}
.cat-sla-mode-badge:hover {
  background: var(--p-navy);
  color: #fff;
  border-color: var(--p-navy);
  transform: translateY(-1px);
}
.cat-sla-mode-badge.mode-category {
  background: var(--p-amber-bg);
  color: var(--p-amber);
  border-color: var(--p-amber);
}
.cat-sla-mode-badge.mode-category:hover {
  background: var(--p-amber);
  color: #fff;
}

/* Wazara-only scope label */
.cat-scope-label {

  margin-bottom: 10px;
  padding: 8px 14px;
  background: var(--p-band-2);
  border-right: 3px solid var(--p-navy);
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--p-text-2);
  display: flex; align-items: center; gap: 8px;
}
.cat-scope-label .scope-icon { font-size: 14px; }
.cat-scope-label strong { color: var(--p-navy); font-weight: 700; }

/* SLA mode 2-card chooser */
.sla-mode-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.sla-mode-card {
  border: 2px solid var(--p-border);
  border-radius: var(--r-md);
  padding: 16px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: var(--p-surface);
}
.sla-mode-card:hover {
  border-color: var(--p-navy-l);
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}
.sla-mode-card.selected {
  border-color: var(--p-navy);
  background: var(--p-navy-bg);
  box-shadow: 0 0 0 3px rgba(20, 51, 79, 0.08);
}
.sla-mode-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.sla-mode-card-icon {
  font-size: 28px;
  line-height: 1;
}
.sla-mode-card-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--p-text);
  margin-bottom: 4px;
}
.sla-mode-card-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--p-green-bg);
  color: var(--p-green);
}
.sla-mode-card-badge.legacy {
  background: var(--p-band-2);
  color: var(--p-text-3);
}
.sla-mode-card-desc {
  font-size: 12px;
  color: var(--p-text-2);
  margin-bottom: 10px;
}
.sla-mode-card-list {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.sla-mode-card-list li {
  font-size: 12px;
  color: var(--p-text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sla-mode-card-note {
  font-size: 11px;
  color: var(--p-text-3);
  padding-top: 10px;
  border-top: 1px dashed var(--p-border);
  font-style: italic;
}
.sla-mode-card-note strong { color: var(--p-text); font-style: normal; }

/* SLA column states */
.cat-badge-sla.disabled {
  background: var(--p-band-2);
  color: var(--p-text-4);
  border-color: var(--p-border);
  text-decoration: line-through;
  font-style: italic;
}

.cat-sub-row {
  display: grid;
  grid-template-columns: 14px 24px 1fr 90px 130px 56px 90px;   /* B047: 7 cols — chev·icon·name·pri·sla·tkt·actions (notif col removed in B046) */
  gap: 10px;
  padding: 10px 18px;
  border-top: 1px solid var(--p-border);
  align-items: center;
  font-size: 13px;
  transition: background 0.1s ease;
  cursor: pointer;
  direction: rtl;
}
.cat-sub-row > div { display: flex; align-items: center; min-width: 0; }
.cat-sub-icon-spacer { color: var(--p-text-3); justify-content: center; }
.cat-sub-pri-col, .cat-sub-sla-col, .cat-sub-tkt-col { justify-content: center; }
.cat-sub-actions { justify-content: flex-end; gap: 4px; }
.cat-sub-row:hover { background: var(--p-band-1); }
.cat-sub-name-col {
  color: var(--p-text);
  font-weight: 500;
}
.cat-notif-toggle {
  padding: 4px 11px;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid;
  white-space: nowrap;
  transition: all 0.12s ease;
}
.cat-notif-toggle.on  { background: #DCFCE7; color: #15803D; border-color: #86EFAC; }
.cat-notif-toggle.off { background: #F1F5F9; color: #64748B; border-color: #CBD5E1; }
.cat-notif-toggle:hover { transform: scale(1.04); }
.cat-badge {
  display: inline-block;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  text-align: center;
}
.cat-badge-sla {
  background: var(--p-amber-bg);
  color: var(--p-amber);
  border: 1px solid var(--p-amber);
  font-family: "Inter", monospace;
  font-size: 10px;
}
.cat-badge-pri-high { background: var(--p-red-bg); color: var(--p-red); border: 1px solid var(--p-red); }
.cat-badge-pri-med { background: var(--p-amber-bg); color: var(--p-amber); border: 1px solid var(--p-amber); }
.cat-badge-pri-low { background: var(--p-green-bg); color: var(--p-green); border: 1px solid var(--p-green); }
.cat-badge-empty {
  color: var(--p-text-4);
  font-size: 11px;
  font-style: italic;
}

/* ============================================================
   B048 — category settings: master–detail tables (ministry + normal).
   Reproduces Docs/Pathway360_Categories_Settings_Final.html through the shared
   --p-* theme tokens (themes day/night for free). The ministry header is maroon
   — Sajed's INTENTIONAL exception to the all-green object-header rule.
   ============================================================ */
.catm-wrap { display: flex; flex-direction: column; gap: 20px; }
.catm-panel { background: var(--p-band-1); border: 1px solid var(--p-border); border-radius: 4px; overflow: hidden; }
.catm-ph { padding: 11px 16px; color: #fff; display: flex; align-items: center; gap: 9px; background: linear-gradient(180deg, var(--p-green), var(--p-green-d)); }
.catm-panel.catm-waz .catm-ph { background: linear-gradient(180deg, #A23A45, #6E2531); }   /* intentional maroon */
.catm-ph .catm-ph-ic { font-size: 18px; }
.catm-ph .catm-t { font-size: 15px; font-weight: 800; }
.catm-ph .catm-tools { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.catm-add { background: #fff; border: 0; border-radius: 4px; padding: 7px 13px; font-size: 12px; font-weight: 800; cursor: pointer; color: var(--p-emerald-d); }
.catm-waz .catm-add { color: #6E2531; }
.catm-search { width: 100%; background: var(--p-surface); border: 1px solid var(--p-border); border-radius: 4px; padding: 7px 10px; font-size: 11.5px; color: var(--p-text); margin-bottom: 8px; }
.catm-search::placeholder { color: var(--p-text-3); }
.catm-md { display: grid; grid-template-columns: 262px 1fr; }
.catm-left { background: var(--p-band-2); border-inline-end: 1px solid var(--p-border); padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.catm-m { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 4px; font-size: 13px; font-weight: 700; color: var(--p-text-2); cursor: pointer; }
.catm-m:hover { background: var(--p-band-3); }
.catm-m .catm-ico { font-size: 17px; }
.catm-m .catm-tkt { margin-inline-start: auto; font-size: 11px; font-weight: 800; color: var(--p-text-2); background: var(--p-band-3); border: 1px solid var(--p-border); border-radius: 4px; padding: 1px 7px; white-space: nowrap; }
.catm-com .catm-m.on { background: var(--p-green-bg); color: var(--p-green-d); }
.catm-waz .catm-m.on { background: rgba(162,58,69,.12); color: #6E2531; }
.catm-right { padding: 10px 16px 14px; }
.catm-rhd { display: flex; align-items: center; gap: 9px; padding: 6px 4px 9px; margin-bottom: 6px; border-bottom: 1px solid var(--p-border); }
.catm-rhd .catm-rico { font-size: 18px; }
.catm-rhd .catm-rt { font-size: 14px; font-weight: 800; color: var(--p-emerald-d); }
.catm-waz .catm-rhd .catm-rt { color: #6E2531; }
.catm-rhd .catm-rmeta { margin-inline-start: auto; display: flex; gap: 10px; }
.catm-ic { cursor: pointer; color: var(--p-text-3); font-size: 13px; }
.catm-subrow { display: grid; gap: 8px; align-items: center; padding: 5px 12px; font-size: 13px; }
.catm-subrow:nth-child(odd) { background: var(--p-band-1); }
.catm-subrow:nth-child(even) { background: var(--p-band-2); }
.catm-subrow:hover { background: var(--p-band-3); }
.catm-waz .catm-subrow { grid-template-columns: 1fr 84px 64px 46px 50px; }   /* B048: ministry = name only, no icon column */
.catm-com .catm-subrow { grid-template-columns: 22px 1fr 58px 58px 46px 50px; }
.catm-sico { font-size: 15px; text-align: center; }
.catm-snm { font-weight: 600; color: var(--p-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catm-pri { font-size: 10.5px; font-weight: 800; border-radius: 4px; padding: 2px 7px; text-align: center; justify-self: center; border: 1px solid; }
.catm-pri.high { background: rgba(220,38,38,.14); border-color: var(--p-red); color: var(--p-red-d); }
.catm-pri.med { background: rgba(217,119,6,.14); border-color: var(--p-amber); color: var(--p-amber-d); }
.catm-pri.low { background: rgba(22,163,74,.14); border-color: var(--p-green); color: var(--p-green-d); }
.catm-sla { font-size: 11px; color: var(--p-text-3); text-align: center; }
.catm-pz { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 11px; font-weight: 800; border-radius: 4px; padding: 3px 7px; border: 1px solid var(--p-border-2); color: var(--p-text-3); background: transparent; cursor: pointer; justify-self: center; min-width: 50px; }
.catm-pz.on.c { background: rgba(30,64,175,.14); border-color: var(--p-info); color: var(--p-info-d); }
.catm-pz.on.b { background: rgba(197,151,10,.14); border-color: var(--p-gold); color: var(--p-gold-d); }
.catm-pz .catm-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.catm-stkt { font-size: 10.5px; font-weight: 800; color: var(--p-text-2); background: var(--p-band-3); border: 1px solid var(--p-border); border-radius: 4px; padding: 1px 6px; justify-self: center; white-space: nowrap; }
.catm-acts { display: flex; gap: 9px; justify-content: flex-end; }
.catm-addsub { margin: 6px 12px 4px; font-size: 12px; font-weight: 800; padding: 8px; border: 1px dashed; border-radius: 4px; text-align: center; cursor: pointer; color: var(--p-emerald-d); border-color: var(--p-emerald); }
.catm-waz .catm-addsub { color: #6E2531; border-color: #C98A92; }
.catm-empty { padding: 24px; text-align: center; color: var(--p-text-3); font-size: 13px; }

@media (max-width: 1024px) {
  .contact-row { grid-template-columns: 1fr 1fr; }
  .contact-row .field-duplicate { grid-column: 1 / -1; }
  .classification-row-wazara { grid-template-columns: 1fr 1fr; }
  .user-form-grid { grid-template-columns: 1fr; }
  .schedule-row { grid-template-columns: 1fr; }
  .user-row { grid-template-columns: 1.5fr 1fr 0.8fr auto; }
  .user-row .user-shift { display: none; }
}
@media (max-width: 768px) {
  /* TopNav: the nav panel is a fixed dropdown (not a rail) — it must stay available on mobile,
     so it is NOT display:none here; it just fits to the viewport via max-width on .sidebar. */
  .main { padding: 14px; }
  .contact-row, .classification-row-company, .classification-row-wazara { grid-template-columns: 1fr; }
  .attach-grid-wazara { grid-template-columns: 1fr; }
  .phone-lookup-row { grid-template-columns: 1fr 1fr; }
  .tm-add-row { grid-template-columns: 1fr; }
  .user-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 14px; }
  .user-row .user-shift, .user-row .user-contact { font-size: 11px; }
  .heatmap-row { grid-template-columns: 36px 1fr; }
  .gantt-row { grid-template-columns: 100px 1fr; }
}

/* ============================================================
   USERS PAGE — flat table with filters
   ============================================================ */
.users-filters {
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin-bottom: 14px;
  box-shadow: var(--sh-sm);
}
.users-search-wrap {
  margin-bottom: 10px;
}
.users-search-wrap .inp { font-size: 13px; }
.users-filter-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.users-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--p-text-2);
  font-weight: 600;
}
.users-filter-pill .inp-sm {
  font-size: 12px;
  padding: 5px 10px;
  height: auto;
  width: auto;
  min-width: 130px;
}
.users-filter-pill.checkbox-pill {
  cursor: pointer;
  padding: 5px 10px;
  border: 1px solid var(--p-border);
  border-radius: var(--r-pill);
  background: var(--p-band-1);
  transition: all 0.15s ease;
}
.users-filter-pill.checkbox-pill:hover {
  background: var(--p-navy-bg);
  border-color: var(--p-navy-l);
}
.users-filter-pill.checkbox-pill input { cursor: pointer; }

.users-table-wrap {
  background: var(--p-surface);
  border: 1px solid var(--p-border-2);
  border-radius: var(--r-lg);
  overflow: hidden;
  overflow-x: auto;
  box-shadow: var(--sh-card);
}
.users-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.users-table thead th {
  background: var(--p-emerald-d);
  background: linear-gradient(180deg, var(--p-emerald), var(--p-emerald-d));
  padding: 11px 14px;
  text-align: start;
  font-weight: 700;
  font-size: 12px;
  color: #ffffff;
  border-right: 1px solid #1F2937;
  border-bottom: 1px solid #1F2937;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}
.users-table thead th.sortable {
  cursor: pointer;
  user-select: none;
  transition: background 0.12s ease, color 0.12s ease;
}
.users-table thead th.sortable:hover {
  background: #0C5945;
  color: #fff;
}
.users-table thead th .sort-arrow {
  display: inline-block;
  margin-right: 4px;
  font-size: 10px;
  color: rgba(255,255,255,0.7);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.users-table thead th.sortable.sorted-asc .sort-arrow,
.users-table thead th.sortable.sorted-desc .sort-arrow {
  opacity: 1;
  color: #fff;
}
.users-table thead th.sortable.sorted-asc .sort-arrow::before { content: "▲"; }
.users-table thead th.sortable.sorted-desc .sort-arrow::before { content: "▼"; }
.users-table tbody td {
  padding: 12px 14px;
  border-right: 1px solid #E2E8F0;
  border-bottom: 1px solid #E2E8F0;
  vertical-align: middle;
  white-space: nowrap;
}
.users-table tbody tr {
  cursor: pointer;
  transition: background 0.1s ease;
}
.users-table tbody tr:hover { background: var(--p-band-1); }
.users-table tbody tr.row-inactive { /* no grey-out; status pill carries the signal */ }
.users-table tbody tr:last-child td { border-bottom: none; }
.users-table .ut-name-cell {
  display: flex; align-items: center; gap: 10px;
}
.users-table .ut-name-text { display: flex; flex-direction: column; line-height: 1.2; }
.users-table .ut-name-text .full { font-weight: 700; color: var(--p-text); }
.users-table .ut-name-text .display { font-size: 11px; color: var(--p-text-3); }
.users-table .ut-dept {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--p-navy-bg);
  color: var(--p-navy);
}
.users-table .ut-dept.unassigned {
  background: var(--p-band-1);
  color: var(--p-text-3);
}
.users-table .ut-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--r-pill);
}
.users-table .ut-status.active { background: var(--p-green-bg); color: var(--p-green-d); }
.users-table .ut-status.blocked { background: var(--p-red-bg); color: var(--p-red-d); }
.users-table .ut-actions { display: flex; gap: 4px; justify-content: flex-end; }
.users-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--p-text-3);
  font-size: 13px;
}

/* Departments page — flat users table at the bottom of each dept group */
.dept-users-table {
  margin-top: 14px;
  border: 1px solid var(--p-border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--p-surface);
}
.dept-users-table-head {
  display: grid;
  grid-template-columns: 2fr 1.3fr 1.6fr 80px;
  gap: 8px;
  padding: 9px 14px;
  background: var(--p-band-1);
  font-size: 11px;
  font-weight: 700;
  color: var(--p-text-2);
  border-bottom: 1px solid var(--p-border);
}
.dept-user-row {
  display: grid;
  grid-template-columns: 2fr 1.3fr 1.6fr 80px;
  gap: 8px;
  padding: 10px 14px;
  align-items: center;
  cursor: pointer;
  transition: background 0.1s ease;
  border-bottom: 1px solid var(--p-border);
}
.dept-user-row:last-child { border-bottom: none; }
.dept-user-row:hover { background: var(--p-band-1); }
.dept-user-name-cell {
  display: flex; align-items: center; gap: 10px;
}
.dept-user-contact { font-size: 12px; color: var(--p-text-2); font-family: "Inter", monospace; }
.dept-user-shift { font-size: 12px; color: var(--p-text); font-weight: 600; }
.dept-user-shift.shift-none { color: var(--p-text-3); font-style: italic; font-weight: 400; }
.dept-user-shift .shift-days { font-size: 10px; color: var(--p-text-3); font-weight: 400; }
.dept-user-actions { display: flex; gap: 4px; justify-content: flex-end; }

/* User picker modal */
.user-picker-list {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--p-border);
  border-radius: var(--r-md);
}
.user-picker-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--p-border);
  transition: background 0.1s ease;
}
.user-picker-item:last-child { border-bottom: none; }
.user-picker-item:hover { background: var(--p-navy-bg); }
.user-picker-item .upi-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.user-picker-item .upi-name { font-weight: 700; font-size: 14px; color: var(--p-text); }
.user-picker-item .upi-meta { font-size: 11px; color: var(--p-text-3); }
.user-picker-item .upi-role-badge {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-weight: 700;
  background: var(--p-band-1);
  color: var(--p-text-2);
}
.user-picker-empty {
  padding: 32px 18px;
  text-align: center;
  color: var(--p-text-3);
  font-size: 12px;
}

/* ============================================================
   NEW DASHBOARD — KPI strip + Tables (operational overview)
   ============================================================ */

/* KPI strip */
.kpi-strip {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 14px 0 18px;
}
.kpi-row {
  display: grid;
  grid-template-columns: 130px repeat(4, 1fr);
  gap: 10px;
  align-items: stretch;
}
.kpi-rail {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px;
}
.kpi-rail-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.kpi-rail.tickets .kpi-rail-icon {
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  color: #92400E;
  box-shadow: 0 1px 3px rgba(217, 119, 6, 0.18);
}
.kpi-rail.chats .kpi-rail-icon {
  background: linear-gradient(135deg, var(--p-emerald-bg), #CCEDDC);
  color: var(--p-emerald-d);
  box-shadow: 0 1px 3px rgba(15, 110, 86, 0.18);
}
.kpi-rail-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--p-text);
  font-family: 'Tajawal', 'Inter', sans-serif;
}
.kpi-row.placeholder .kpi-rail-name {
  color: var(--p-text-3);
}
.kpi-tile {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: stretch;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}
.kpi-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(15, 110, 86, 0.10);
  border-color: var(--p-border-2);
}
.kpi-num-block {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', monospace;
  font-size: 24px;
  font-weight: 700;
  color: white;
  letter-spacing: -0.5px;
  position: relative;
}
/* Dashboard number-blocks consume the SHARED .p-stat tone vocabulary (theme tokens only,
   no hardcoded hex). Day = bold solid tile; night tinted treatment lives in theme.css. */
.kpi-num-block.tone-neutral   { background: linear-gradient(135deg, var(--p-teal),  var(--p-teal-d)); }
.kpi-num-block.tone-done      { background: linear-gradient(135deg, var(--p-green), var(--p-green-d)); }
.kpi-num-block.tone-progress  { background: linear-gradient(135deg, var(--p-amber), var(--p-amber-d)); }
.kpi-num-block.tone-attention { background: linear-gradient(135deg, var(--p-red),   var(--p-red-d)); }
.kpi-num-block.tone-primary   { background: linear-gradient(135deg, var(--p-gold),  var(--p-gold-d)); }
.kpi-num-block.placeholder { opacity: 0.45; filter: saturate(0.6); }
.kpi-label-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 14px;
  background: var(--p-band-1);
}
.kpi-label-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--p-text);
  line-height: 1.2;
}
.kpi-label-sub {
  font-size: 10px;
  color: var(--p-text-3);
  margin-top: 2px;
}
.kpi-placeholder-note {
  font-size: 10px;
  color: var(--p-text-3);
  padding: 0 6px;
  margin-top: 4px;
}

/* Tables section */
.dash-tables {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 28px;
}
.dash-table-group {
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
.dash-table-group-hd {
  padding: 12px 16px;
  background: linear-gradient(90deg, var(--p-navy-bg) 0%, var(--p-band-3) 100%);
  border-bottom: 1px solid var(--p-border);
  font-size: 14px;
  font-weight: 700;
  color: var(--p-text);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.dash-table-tabs {
  display: inline-flex;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--r-pill);
  padding: 3px;
  gap: 2px;
}
.dash-table-tab {
  padding: 5px 12px;
  border: none;
  background: transparent;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--p-text-2);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.dash-table-tab:hover { color: var(--p-text); }
.dash-table-tab.on {
  background: var(--p-emerald-d);
  color: white;
  box-shadow: 0 1px 3px rgba(15, 110, 86, 0.25);
}
.dash-table-group-hd-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--p-emerald-bg), #CCEDDC);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.dash-table-block {
  border-bottom: 1px solid var(--p-border);
}
.dash-table-block:last-child { border-bottom: none; }
.dash-table-block-title {
  padding: 8px 16px;
  background: #FAFCFB;
  font-size: 11px;
  font-weight: 700;
  color: var(--p-text-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--p-border);
}
.dash-table-wrap { overflow-x: auto; }
.dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.dash-table thead th {
  background: var(--p-band-2);
  color: var(--p-text-2);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 7px 12px;
  border-bottom: 2px solid #1F2937;
  white-space: nowrap;
}
.dash-table thead th.col-total  { background: #E0F2FE; color: #075985; }
.dash-table thead th.col-open   { background: #FEE2E2; color: #B91C1C; }
.dash-table thead th.col-closed { background: #DCFCE7; color: #15803D; }
.dash-table thead th.col-label  { text-align: end; width: 100%; }
.dash-table tbody tr {
  cursor: pointer;
  transition: background 0.12s ease;
}
.dash-table tbody tr:hover { background: var(--p-band-1); }
.dash-table tbody tr.total-row {
  background: #F8FAFB;
  font-weight: 700;
}
.dash-table tbody tr.total-row td { color: var(--p-text); }
.dash-table tbody td {
  padding: 7px 12px;
  border-bottom: 1px solid #F1F5F9;
  font-family: 'Inter', monospace;
  text-align: center;
  white-space: nowrap;
}
.dash-table tbody td.col-label {
  font-family: 'Tajawal', 'Inter', sans-serif;
  text-align: start;
  color: var(--p-text);
  font-weight: 500;
  width: 100%;
}
.dash-table tbody tr:last-child td { border-bottom: none; }

@media (max-width: 1024px) {
  .kpi-row { grid-template-columns: 110px 1fr 1fr; }
  .kpi-row .kpi-tile:nth-child(n+4) { grid-column: span 1; }
  .dash-tables { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .kpi-row { grid-template-columns: 1fr 1fr; }
  .kpi-rail { grid-column: span 2; }
  .kpi-tile { grid-template-columns: 60px 1fr; }
  .kpi-num-block { font-size: 19px; }
}

/* ============================================================
   DASHBOARD — CCTV-wall layout with handmade SVG charts
   ============================================================ */
.dash-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.dash-layout-control {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--r-sm);
  padding: 3px;
}
.dash-layout-label {
  font-size: 11px;
  color: var(--p-text-3);
  padding: 0 6px;
}
.dash-layout-btn {
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 5px;
  font-family: inherit;
  font-size: 14px;
  color: var(--p-text-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dash-layout-btn:hover { background: var(--p-band-1); }
.dash-layout-btn.on {
  background: #1A7F64;
  color: white;
  border-color: #1A7F64;
}
.dash-reset-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--p-border);
  background: var(--p-surface);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 14px;
  color: var(--p-text-2);
  cursor: pointer;
}
.dash-reset-btn:hover { color: var(--p-text); border-color: var(--p-border-2); }
.dash-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: #DCFCE7;
  color: #15803D;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
}
.dash-live-dot {
  width: 7px;
  height: 7px;
  background: #15803D;
  border-radius: 50%;
  animation: dashPulse 1.4s ease-in-out infinite;
}
@keyframes dashPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}

/* B040 — Charts page: widen (drop the 1180px cap; ~1cm side margins on top of .main's 28px gutter is
   wasteful) and use the freed width for both the wall and the report tables. Responsive cap stays. */
#page-charts { max-width: none; padding-inline: 10px; }

/* B040 — two relocatable collapsible folds (charts / tables). Header uses the theme object-header gradient. */
.dash-fold { margin-bottom: 12px; }
.dash-fold-hd {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 4px; color: #fff;
  background: linear-gradient(180deg, var(--p-green), var(--p-green-d));
}
html[data-theme="night"] .dash-fold-hd { background: linear-gradient(180deg, var(--p-emerald), var(--p-emerald-d)); }
.dash-fold-title { font-weight: 700; font-size: 14px; }
.dash-fold-toggle, .dash-fold-move {
  background: rgba(255,255,255,.16); border: none; color: #fff; cursor: pointer; border-radius: 4px;
  padding: 2px 9px; font-size: 13px; line-height: 1.4; font-family: inherit;
}
.dash-fold-toggle:hover, .dash-fold-move:hover { background: rgba(255,255,255,.28); }
.dash-fold-move { margin-inline-start: auto; }
.dash-fold-body { padding-top: 10px; }
.dash-fold.collapsed .dash-fold-body { display: none; }
.dash-fold.collapsed .dash-fold-toggle { transform: scaleX(-1); }   /* glyph set per state in JS too */

/* The wall grid */
.dash-wall {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  min-height: 600px;
}
.dash-wall[data-layout="2x2"] {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.dash-wall[data-layout="3x3"] {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
.dash-wall[data-layout="1+5"] {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
.dash-wall[data-layout="1+5"] .dash-tile:first-child {
  grid-column: span 2;
  grid-row: span 2;
}
.dash-wall[data-layout="4x4"] {
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(220px, 1fr);
}

.dash-tile {
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 220px;
  transition: box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease, border-color 0.15s ease;
  position: relative;
  cursor: grab;
}
.dash-tile:active { cursor: grabbing; }
.dash-tile.dragging {
  opacity: 0.4;
  transform: scale(0.97);
  cursor: grabbing;
}
.dash-tile.drag-over {
  border: 2px dashed var(--p-emerald-d);
  background: linear-gradient(135deg, var(--p-emerald-bg) 0%, #F2F8F5 100%);
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(15, 110, 86, 0.15);
}
.dash-tile.drag-over::after {
  content: '↔ أفلت هنا للتبديل';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--p-emerald-d);
  background: rgba(225, 245, 238, 0.85);
  border-radius: var(--r-md);
  pointer-events: none;
  z-index: 5;
}
.dash-tile:hover {
  box-shadow: 0 6px 20px rgba(15, 110, 86, 0.08);
}
.dash-tile-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--p-band-1);
  border-bottom: 1px solid var(--p-border);
  font-size: 12px;
  font-weight: 700;
  color: var(--p-text);
}
.dash-tile-actions {
  display: inline-flex;
  gap: 4px;
}
.dash-tile-act {
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--p-text-3);
  font-family: inherit;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-user-drag: none;
}
.dash-tile-act:hover {
  background: var(--p-surface);
  color: var(--p-text);
}
.dash-tile-hd { -webkit-user-drag: none; user-drag: none; }
.dash-tile-hd { cursor: grab; }
.dash-tile-hd:active { cursor: grabbing; }
.dash-tile-act { cursor: pointer !important; -webkit-user-drag: none; }
.dash-tile-body { cursor: default; }
.dash-tile-body {
  flex: 1;
  padding: 12px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, #F7FBF9 0%, #FBF9F3 100%);
}
.dash-tile-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  color: var(--p-text-3);
  cursor: pointer;
  font-size: 12px;
}
.dash-tile-empty:hover { color: var(--p-emerald-d); }
.dash-tile-empty .empty-icon { font-size: 32px; margin-bottom: 6px; opacity: 0.45; }

/* Maximize modal */
.dash-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dash-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
}
.dash-modal-content {
  position: relative;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
  width: 92vw;
  height: 88vh;
  max-width: 1400px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dash-modal-close {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--p-border);
  background: var(--p-surface);
  border-radius: 50%;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  z-index: 10;
}
.dash-modal-body {
  flex: 1;
  padding: 24px;
  overflow: hidden;
}

/* Drill-down drawer */
.dash-drawer {
  position: fixed;
  inset: 0;
  z-index: 1900;
  display: flex;
  justify-content: flex-end;
}
.dash-drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
}
.dash-drawer-panel {
  position: relative;
  width: 420px;
  max-width: 95vw;
  height: 100%;
  background: var(--p-surface);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  animation: drawerSlideIn 0.25s ease-out;
}
[dir="rtl"] .dash-drawer-panel,
body:not([dir]) .dash-drawer-panel {
  box-shadow: 10px 0 40px rgba(0, 0, 0, 0.15);
}
@keyframes drawerSlideIn {
  from { transform: translateX(20%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.dash-drawer-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--p-border);
  background: var(--p-band-1);
}
.dash-drawer-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--p-text);
  line-height: 1.4;
}
.dash-drawer-close {
  width: 28px;
  height: 28px;
  border: 1px solid var(--p-border);
  background: var(--p-surface);
  border-radius: 50%;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  color: var(--p-text-2);
}
.dash-drawer-close:hover { color: var(--p-red); border-color: var(--p-red); }
.dash-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}
.dash-drawer-ft {
  padding: 12px;
  border-top: 1px solid var(--p-border);
  display: flex;
  gap: 8px;
}
.dd-ticket-row {
  padding: 10px 12px;
  border-bottom: 1px solid #F1F5F9;
  cursor: pointer;
  transition: background 0.12s ease;
}
.dd-ticket-row:hover { background: var(--p-band-1); }
.dd-tk-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.dd-tk-num {
  font-family: 'Inter', monospace;
  font-weight: 700;
  font-size: 12px;
  color: var(--p-text);
}
.dd-tk-num.wazara { color: var(--p-red); }
.dd-tk-sla {
  font-family: 'Inter', monospace;
  font-size: 11px;
  font-weight: 600;
}
.dd-tk-title {
  font-size: 12px;
  color: var(--p-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dd-tk-meta {
  font-size: 10px;
  color: var(--p-text-3);
  margin-top: 3px;
}
.dd-empty {
  padding: 30px;
  text-align: center;
  color: var(--p-text-3);
  font-size: 12px;
}

@media (max-width: 700px) {
  .dash-drawer-panel { width: 100vw; }
}

/* Chart picker popover */
.dash-picker {
  position: absolute;
  z-index: 1500;
  background: var(--p-surface);
  border: 1px solid var(--p-border-2);
  border-radius: var(--r-md);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  min-width: 280px;
  max-width: 360px;
}
.dash-picker-hd {
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--p-text);
  background: var(--p-band-1);
  border-bottom: 1px solid var(--p-border);
  border-top-left-radius: var(--r-md);
  border-top-right-radius: var(--r-md);
}
.dash-picker-list {
  padding: 6px;
  max-height: 320px;
  overflow-y: auto;
}
.dash-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--p-text);
  cursor: pointer;
  border-radius: 6px;
}
.dash-picker-item:hover { background: var(--p-band-1); }
.dash-picker-item.in-use {
  opacity: 0.5;
  cursor: not-allowed;
}
.dash-picker-item .pi-icon { font-size: 16px; }

/* ===== Chart-specific styles ===== */
/* Live Pulse */
.chart-live-pulse {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  height: 100%;
  align-content: center;
}
.cp-cell {
  background: var(--p-band-1);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  border-inline-start: 3px solid;
  transition: background 0.3s ease;
}
/* Live-Pulse SLA cells — theme tokens only (day/night correct; the old hardcoded light backgrounds
   broke in night). The 4 SLA-severity cells map to the shared tone vocabulary: bleeding=attention(red)
   · near=progress(amber) · fine=done(green) · closed=neutral(muted). The 2 process states (idle /
   awaiting-quality) have no violet in the 5-tone model, so they use the --p-info (blue) family. */
.cp-cell.bleeding   { border-color: var(--p-red);    background: var(--p-red-bg); }
.cp-cell.near       { border-color: var(--p-amber);  background: var(--p-amber-bg); }
.cp-cell.fine       { border-color: var(--p-green);  background: var(--p-green-bg); }
.cp-cell.idle       { border-color: var(--p-info);   background: var(--p-info-bg); }
.cp-cell.qa-pending { border-color: var(--p-info-d); background: var(--p-info-bg); }
.cp-cell.closed     { border-color: var(--p-text-3); background: var(--p-band-2); }
.cp-num {
  font-family: 'Inter', monospace;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.3s ease, color 0.3s ease;
}
.cp-cell.bleeding .cp-num   { color: var(--p-red-d); }
.cp-cell.near .cp-num       { color: var(--p-amber-d); }
.cp-cell.fine .cp-num       { color: var(--p-green-d); }
.cp-cell.idle .cp-num       { color: var(--p-info-d); }
.cp-cell.qa-pending .cp-num { color: var(--p-info-d); }
.cp-cell.closed .cp-num     { color: var(--p-text-2); }
.cp-num.bump { animation: cpBump 0.4s ease-out; }
@keyframes cpBump {
  0% { transform: scale(1); }
  50% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.cp-label {
  font-size: 10px;
  color: var(--p-text-2);
  margin-top: 4px;
  font-weight: 600;
}

/* SVG charts smooth transitions */
.chart-svg-wrap {
  width: 100%;
  height: 100%;
  position: relative;
}
.chart-svg-wrap svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.chart-svg-wrap svg .chart-bar,
.chart-svg-wrap svg .chart-line,
.chart-svg-wrap svg .chart-heat-cell {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.chart-tooltip {
  position: fixed;
  background: rgba(15, 23, 42, 0.94);
  color: white;
  padding: 6px 11px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  pointer-events: none;
  white-space: nowrap;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.12s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.chart-tooltip.show { opacity: 1; }

.dash-tile.filter-mode .dash-tile-hd {
  background: linear-gradient(90deg, var(--p-emerald-bg) 0%, #F2F8F5 100%);
}
.dash-tile.filter-mode .dash-tile-body {
  cursor: pointer;
}
.dash-tile.filter-mode .chart-clickable:hover {
  filter: brightness(1.15);
  transform-origin: center;
}
.dash-mode-toggle {
  font-size: 13px !important;
}

/* Mobile */
@media (max-width: 1024px) and (min-width: 701px) {
  .dash-wall[data-layout="3x3"] {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
  .dash-wall[data-layout="1+5"] {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
  .dash-wall[data-layout="1+5"] .dash-tile:first-child {
    grid-column: span 2;
    grid-row: span 1;
  }
  .dash-wall[data-layout="4x4"] {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(200px, auto);
  }
}
@media (max-width: 700px) {
  .dash-wall[data-layout="2x2"], .dash-wall[data-layout="3x3"] {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .dash-wall[data-layout="4x4"] {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(200px, auto);
  }
  .dash-wall[data-layout="1+5"] {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .dash-wall[data-layout="1+5"] .dash-tile:first-child {
    grid-column: span 1;
    grid-row: span 1;
  }
  .dash-tile { min-height: 200px; }
  .dash-modal-content { width: 96vw; height: 92vh; }
  .dash-toolbar { gap: 8px; }
  .dash-layout-control { padding: 2px; }
  .dash-layout-btn { width: 26px; height: 26px; }
}


/* ============================================================
   UNIVERSAL ERROR PAGE — calm, premium, expressive
   One shell, swapped content per error type (404 / 403 / 500 / Network).
   ============================================================ */
.err-wrap {
  max-width: 580px;
  margin: 4vh auto 40px;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: 18px;
  box-shadow:
    0 1px 2px rgba(15, 110, 86, 0.04),
    0 12px 40px rgba(15, 110, 86, 0.08);
  padding: 48px 36px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Decorative soft gradient bar at top */
.err-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--p-emerald) 0%, var(--p-emerald-d) 50%, var(--p-emerald) 100%);
}

.err-hero {
  margin-bottom: 28px;
}
.err-icon-ring {
  width: 124px;
  height: 124px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  position: relative;
  background: linear-gradient(135deg, var(--p-emerald-bg) 0%, #F2F8F5 100%);
  border: 1px solid rgba(15, 110, 86, 0.12);
  transition: all 0.5s ease;
}
/* Per-error tinting (set via JS) */
.err-icon-ring.err-tint-warning {
  background: linear-gradient(135deg, #FEF3C7 0%, #FEFAF0 100%);
  border-color: rgba(217, 119, 6, 0.18);
}
.err-icon-ring.err-tint-danger {
  background: linear-gradient(135deg, #FEE2E2 0%, #FEF6F6 100%);
  border-color: rgba(220, 38, 38, 0.18);
}
.err-icon-ring.err-tint-info {
  background: linear-gradient(135deg, #DDEEFE 0%, #EFF6FE 100%);
  border-color: rgba(30, 64, 175, 0.18);
}
.err-icon-ring.err-tint-mint {
  background: linear-gradient(135deg, var(--p-emerald-bg) 0%, #F2F8F5 100%);
  border-color: rgba(15, 110, 86, 0.12);
}
/* Subtle breathing pulse on the ring */
.err-icon-ring::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0.08;
  animation: errPulse 3s ease-in-out infinite;
}
@keyframes errPulse {
  0%, 100% { transform: scale(1); opacity: 0.08; }
  50%      { transform: scale(1.06); opacity: 0.04; }
}
.err-icon {
  font-size: 56px;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.06));
}

.err-headline {
  font-family: "Tajawal", "Inter", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--p-text);
  margin: 0 0 8px;
  line-height: 1.35;
  letter-spacing: -0.2px;
}
.err-body {
  font-size: 14px;
  color: var(--p-text-2);
  line-height: 1.65;
  max-width: 420px;
  margin: 0 auto 14px;
}
.err-code-chip {
  display: inline-block;
  font-family: 'Inter', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--p-text-3);
  background: #F1F5F9;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}

.err-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.err-btn {
  padding: 10px 22px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--p-border);
  background: var(--p-surface);
  color: var(--p-text);
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.err-btn:hover {
  border-color: var(--p-border-2);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.err-btn.primary {
  background: var(--p-emerald-d);
  color: white;
  border-color: var(--p-emerald-d);
}
.err-btn.primary:hover {
  background: #0E5E48;
  box-shadow: 0 6px 16px rgba(15, 110, 86, 0.25);
}
.err-btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--p-text-2);
}
.err-btn.ghost:hover {
  background: var(--p-band-1);
  color: var(--p-text);
}

/* Technical details accordion */
.err-details {
  margin: 0 auto 20px;
  max-width: 480px;
  text-align: start;
  background: #FAFCFB;
  border: 1px solid var(--p-border);
  border-radius: 8px;
}
.err-details summary {
  padding: 10px 14px;
  font-size: 11px;
  color: var(--p-text-2);
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.err-details summary::-webkit-details-marker { display: none; }
.err-details summary::before {
  content: '▸';
  display: inline-block;
  margin-inline-end: 8px;
  font-size: 9px;
  transition: transform 0.15s ease;
}
.err-details[open] summary::before { transform: rotate(90deg); }
.err-details-body {
  padding: 0 14px 14px;
  border-top: 1px solid var(--p-border);
}
.err-details-body pre {
  font-family: 'Inter', monospace;
  font-size: 10px;
  color: var(--p-text-2);
  background: var(--p-surface);
  padding: 10px;
  border-radius: 6px;
  border: 1px solid var(--p-border);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 180px;
  overflow-y: auto;
  margin-top: 10px;
  direction: ltr;
  text-align: left;
}

/* Promise line — silent embodiment of DNA traits */
.err-promise {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid var(--p-border);
  font-size: 10px;
  color: var(--p-text-3);
  letter-spacing: 0.02em;
}
.err-promise-line { white-space: nowrap; }
.err-dot { color: var(--p-border-2); }

/* Mobile */
@media (max-width: 600px) {
  .err-wrap { padding: 36px 22px 24px; margin: 2vh 10px; }
  .err-icon-ring { width: 100px; height: 100px; }
  .err-icon { font-size: 46px; }
  .err-headline { font-size: 18px; }
  .err-body { font-size: 13px; }
}

/* Error preview menu (admin testing aid) */
.err-preview-wrap { position: relative; }
.err-preview-btn { padding: 7px 10px; font-size: 14px; }
.err-preview-menu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  background: var(--p-surface);
  border: 1px solid var(--p-border-2);
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  z-index: 1000;
  min-width: 240px;
}
.err-preview-hd {
  font-size: 10px;
  color: var(--p-text-3);
  font-weight: 700;
  padding: 6px 10px 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.err-preview-menu button {
  display: block;
  width: 100%;
  text-align: start;
  padding: 7px 10px;
  background: transparent;
  border: none;
  border-radius: 5px;
  font-family: inherit;
  font-size: 12px;
  color: var(--p-text);
  cursor: pointer;
}
.err-preview-menu button:hover { background: var(--p-band-1); }

/* ============================================================
   UNIFIED INBOX — agent-side chat with customers
   Uses Pathway360 mint/teal palette (NOT Contact Us warm tones)
   ============================================================ */
.ux-online-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(22, 163, 74, 0.10);
  border: 1px solid rgba(22, 163, 74, 0.25);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #16A34A;
}
.ux-online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16A34A;
  animation: uxPulse 1.5s ease-in-out infinite;
}
@keyframes uxPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

.ux-app {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 0;
  height: calc(100vh - 200px);
  min-height: 540px;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(15, 110, 86, 0.08);
}
@media (max-width: 900px) {
  .ux-app {
    grid-template-columns: 1fr;
    height: calc(100vh - 180px);
  }
  .ux-side { display: none; }
  .ux-side.mobile-active { display: flex; position: absolute; inset: 0; z-index: 50; background: var(--p-surface); }
}

/* === Side: customer list === */
.ux-side {
  background: var(--p-surface);
  border-inline-end: 1px solid var(--p-border);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.ux-side-search {
  padding: 12px;
  border-bottom: 1px solid var(--p-border);
  background: var(--p-surface);
}
.ux-search-input {
  width: 100%;
  padding: 9px 14px;
  border: 1.5px solid var(--p-border);
  border-radius: 999px;
  background: var(--p-band-3);
  font-size: 13px;
  font-family: inherit;
  color: var(--p-text);
  transition: all 0.15s;
}
.ux-search-input:focus {
  outline: none;
  border-color: var(--p-teal);
  background: var(--p-surface);
  box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.12);
}
.ux-side-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}
/* Zone C: reserved footer strip (3rd band of the conversation-list column). Fixed at the bottom,
   aligned with the composer row; the list above scrolls within its own band and never overlaps it.
   Keeps the surrounding surface colour. Collapses cleanly when no conversation is selected. */
.ux-side-docstrip {
  flex-shrink: 0;
  border-top: 1px solid var(--p-border);
  background: var(--p-surface);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ux-side-docstrip:empty { padding: 0; border-top: 0; }
.ux-docstrip-btn {
  width: 100%;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 9px 11px;
  border-radius: 9px;
  cursor: pointer;
  background: var(--p-band-2, #EEF3F1);
  color: var(--p-text);
  border: 1px solid var(--p-border);
  text-align: start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.14s, border-color 0.14s;
}
.ux-docstrip-btn:hover { border-color: var(--p-teal); background: var(--p-surface); }
/* Zone C — merge page-reorder strip (draggable thumbnails, vertical = RTL-safe). */
.ck-reorder-wrap { margin-bottom: 12px; }
.ck-reorder-h { font-size: 11.5px; color: var(--p-text-3); margin-bottom: 6px; }
.ck-reorder-strip { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.ck-reorder-thumb { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid var(--p-border); border-radius: 8px; background: var(--p-band-1); cursor: grab; }
.ck-reorder-thumb.dragging { opacity: 0.5; }
.ck-reorder-num { width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; background: var(--p-teal); color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.ck-reorder-thumb img { width: 40px; height: 40px; object-fit: cover; border-radius: 5px; flex-shrink: 0; }
.ck-reorder-noimg { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.ck-reorder-name { font-size: 11.5px; color: var(--p-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-reorder-handle { margin-inline-start: auto; color: var(--p-text-3); font-size: 14px; cursor: grab; flex-shrink: 0; }
/* Glossy-light raised cards (approved Option 2). Subtle white→light-gray-green gradient, a glossy
   top sheen (::before, pointer-events:none over the top ~46%), and a 3D bevel (outer drop +
   inset top highlight + faint inset bottom). Theme-aware: a dark glossy variant for night below.
   Content (name/preview/time/pills/dot) sits above the sheen via z-index. */
.ux-customer-card {
  position: relative;
  overflow: hidden;
  padding: 12px 14px;
  border-radius: 14px;
  cursor: pointer;
  transition: box-shadow 0.14s ease, transform 0.14s ease;
  margin-bottom: 3px;   /* very small gap between stacked cards (per correction) */
  background: linear-gradient(180deg, #FFFFFF 0%, #EFF3F2 100%);
  border: 1px solid rgba(20,52,44,0.10);
  box-shadow: 0 3px 6px rgba(20,52,44,0.12), inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -2px 5px rgba(20,52,44,0.06);
}
.ux-customer-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 46%;
  background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0));
  pointer-events: none;
}
.ux-customer-card > * { position: relative; z-index: 1; }
.ux-customer-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgba(20,52,44,0.18), inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -2px 5px rgba(20,52,44,0.06);
}
/* Zone A: the ACTIVE/selected conversation card is a FULL green fill (not a faint border).
   Day = ~#2AA877 fill + white text (mock active_conversation_card_mock «أخضر»). */
.ux-customer-card.active {
  background: #2AA877;
  border-color: #1f8a5f;
  box-shadow: 0 0 0 2px rgba(31,138,95,0.38), 0 4px 10px rgba(20,52,44,0.22), inset 0 1px 0 rgba(255,255,255,0.18);
}
.ux-customer-card.active::before { background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0)); }
.ux-customer-card.active .ux-cust-name,
.ux-customer-card.active .ux-cust-preview { color: #ffffff; }
.ux-customer-card.active .ux-cust-time { color: rgba(255,255,255,0.82); }
.ux-customer-card.active .ux-state-badge { background: rgba(255,255,255,0.22); color: #ffffff; border-color: rgba(255,255,255,0.30); }
.ux-customer-card.active .ux-id-chip { background: rgba(255,255,255,0.25); color: #ffffff; }
/* NIGHT — dark glossy raised card (deep surface gradient + faint top highlight + bevel). */
html[data-theme="night"] .ux-customer-card {
  background: linear-gradient(180deg, #1A4034 0%, #0F2A22 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 3px 7px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.07), inset 0 -2px 6px rgba(0,0,0,0.35);
}
html[data-theme="night"] .ux-customer-card::before {
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0));
}
html[data-theme="night"] .ux-customer-card:hover {
  box-shadow: 0 5px 13px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.09), inset 0 -2px 6px rgba(0,0,0,0.35);
}
/* Zone A night: light-green fill with dark-green text (mock «أخضر فاتح» option). */
html[data-theme="night"] .ux-customer-card.active {
  background: #CFEDDF;
  border-color: #76c6a3;
  box-shadow: 0 0 0 2px rgba(118,198,163,0.45), 0 4px 11px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.25);
}
html[data-theme="night"] .ux-customer-card.active::before { background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0)); }
html[data-theme="night"] .ux-customer-card.active .ux-cust-name,
html[data-theme="night"] .ux-customer-card.active .ux-cust-preview { color: #0c4a39; }
html[data-theme="night"] .ux-customer-card.active .ux-cust-time { color: #3c7a64; }
html[data-theme="night"] .ux-customer-card.active .ux-state-badge { background: #ffffff; color: #0F6E56; border-color: transparent; }
html[data-theme="night"] .ux-customer-card.active .ux-id-chip { background: #ffffff; color: #0c4a39; }
.ux-cust-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.ux-cust-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--p-teal-d);   /* dark teal (day) / light teal (night) — glossy-card name accent */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}
.ux-cust-time {
  font-size: 10px;
  color: var(--p-text-3);
  flex-shrink: 0;
  margin-inline-start: 6px;
}
.ux-cust-preview {
  font-size: 11.5px;
  color: var(--p-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ux-cust-channels {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
}
.ux-cust-channels img {
  width: 14px;
  height: 14px;
  vertical-align: middle;
}
.ux-cust-unread {
  background: var(--p-teal);
  color: white;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 7px;
  margin-inline-start: 6px;
}

/* === Center: thread === */
.ux-center {
  display: flex;
  flex-direction: column;
  background: var(--p-surface);
  min-height: 0;
}
.ux-thread-hd {
  padding: 12px 18px;
  border-bottom: 1px solid var(--p-border);
  display: flex;
  align-items: center;
  flex-wrap: wrap;            /* let the client-info strip wrap to its own full-width row */
  gap: 12px;
  background: var(--p-hd-grad);
  min-height: 56px;
}
.ux-thread-hd .ux-hd-top { flex: 1 1 auto; }
/* The client-info strip is always its OWN full-width row (folded or unfolded) */
/* Item 3: cap the panel height + let it scroll internally. The header is a flex item with the
   default min-height:auto, so an OPEN panel would otherwise refuse to shrink and squeeze the
   thread (.ux-thread, flex:1) down to ~0px — and .ux-app's overflow:hidden then clips it, so the
   thread couldn't scroll. Capping the mount keeps the thread tall and scrollable, panel open or not. */
.ux-thread-hd #ux-ci-mount { flex: 1 0 100%; width: 100%; margin: 8px -18px -12px; max-height: min(200px, 32vh); overflow-y: auto; }
.ux-thread-hd .ux-hd-name {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
}
.ux-thread-hd .ux-hd-meta {
  font-size: 11px;
  color: rgba(255,255,255,0.82);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ux-thread-hd .ux-hd-meta span { display: inline-flex; align-items: center; gap: 3px; }
.ux-hd-status.closed { color: #FCD34D; font-weight: 700; }
.ux-hd-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.ux-hd-close-btn {
  border: 1px solid #f0c2bd; background: #fff5f4; color: #b42318;
  font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 8px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.ux-hd-close-btn:hover { background: #fdecea; border-color: #e89b93; }
/* Green "أُنجزت" (Done) button in the compose row — closing = goal achieved, a positive act. */
.ux-done-btn {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  border: none; background: linear-gradient(135deg, #1A7F64, #145F4C); color: #fff; font-size: 13px; font-weight: 800;
  padding: 0 14px; height: 40px; border-radius: 12px; cursor: pointer;
  box-shadow: 0 3px 10px rgba(26,127,100,0.32); transition: filter 0.15s, transform 0.15s;
}
.ux-done-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
/* 5E: neutral short-undo toast (no danger styling). */
.ux-undo-toast { position:fixed; bottom:22px; inset-inline-start:50%; transform:translateX(-50%); z-index:1200; display:flex; align-items:center; gap:14px; background:var(--p-text,#1f2937); color:#fff; padding:10px 16px; border-radius:10px; box-shadow:0 8px 28px rgba(0,0,0,0.3); font-size:13px; }
html[data-theme="night"] .ux-undo-toast { background:var(--p-surface); border:1px solid var(--p-border); color:var(--p-text); }
.ux-undo-btn { background:transparent; border:none; color:var(--p-teal-d,#34d399); font-weight:800; font-size:13px; cursor:pointer; font-family:inherit; padding:2px 4px; }
.ux-undo-btn:hover { text-decoration:underline; }
.ux-done-btn i { font-size: 17px; }
/* ════ B027 §17.5 — CONTENT-FOLLOWS-LANGUAGE (corrected 2026-06-20) ════
   The page FRAME + TABLES stay FIXED RTL (html stays dir=rtl in both languages — see applyDocDir()).
   ONLY this curated list of self-contained CONTENT widgets flips its INTERNAL direction to LTR in English
   (icons on the LEFT, text reads left-to-right). FIX-ONCE: keyed on html[lang="en"], so it covers
   dynamically-created widgets too and needs no per-render JS. NEVER add the TABLE («.ck-tt»/«.cl-table»)
   or the page chrome here — those stay RTL. */
html[lang="en"] .toast,
html[lang="en"] .toast-container,
html[lang="en"] .p360-dialog,
html[lang="en"] .ck-pop,
html[lang="en"] .search-select,
html[lang="en"] .search-select-input,
html[lang="en"] .p360-pager,
html[lang="en"] .ck-pager,
html[lang="en"] .s-toggle,
html[lang="en"] .p-stat,
html[lang="en"] .ck-smartbar,
html[lang="en"] select.inp,
html[lang="en"] .inp { direction: ltr; }
/* p360Dialog (confirm/alert/prompt) — was UNSTYLED, so it rendered off-screen at the bottom
   of the page (position:static) and looked like "nothing happened" on click. Make it a
   centered fixed overlay above everything. */
.p360-dialog-backdrop { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background: rgba(15,23,42,0.45); }
.p360-dialog { background: #fff; border-radius: 14px; padding: 22px 24px; width: min(440px, 92vw); box-shadow: 0 20px 60px rgba(0,0,0,0.30); text-align: center; font-family: inherit; direction: rtl; }
.p360-dialog-icon { font-size: 34px; margin-bottom: 8px; }
.p360-dialog-title { font-size: 17px; font-weight: 800; color: var(--p-navy, #16302b); margin-bottom: 8px; }
.p360-dialog-msg { font-size: 14px; color: #475569; line-height: 1.6; margin-bottom: 18px; white-space: pre-wrap; }
.p360-dialog-btns { display: flex; gap: 10px; justify-content: center; }
.p360-dialog-btn { padding: 9px 20px; border-radius: 10px; font-weight: 700; font-size: 13.5px; cursor: pointer; border: 1px solid #d8e0dd; background: #f4f8f6; color: var(--p-navy, #16302b); }
.p360-dialog-btn.primary { background: #16a34a; color: #fff; border-color: #16a34a; }
.p360-dialog-btn.danger { background: #dc2626; color: #fff; border-color: #dc2626; }
.p360-dialog-input { width: 100%; padding: 9px 12px; border: 1px solid #d8e0dd; border-radius: 10px; margin-bottom: 16px; font-family: inherit; box-sizing: border-box; }
/* Client-info header strip (fixed in the thread header) — RTL, FULL width, distinct bg, 3-col */
/* Brand cream/gold palette (Pathway), full width folded or unfolded, compact rows */
.ux-ci { margin: 0; border: 0; border-bottom: 2px solid #d9b96a; border-radius: 0; background: #fbf6ea; overflow: hidden; direction: rtl; text-align: right; width: 100%; box-sizing: border-box; }
.ux-ci-head { display: flex; align-items: center; gap: 8px; padding: 8px 16px; cursor: pointer; font-weight: 800; color: #145F4C; background: linear-gradient(180deg, #F3F9F6, #FBFDFC); border-bottom: 1px solid #DCEEE6; }
.ux-ci-title { flex: 1; font-size: 13px; }
.ux-ci-copy { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #C4E6DA; background: #E6F4F1; color: #145F4C; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 8px; cursor: pointer; }
.ux-ci-copy:hover { background: #d4ebe3; }
.ux-ci-copy i { font-size: 14px; }
.ux-ci-chev { color: #1A7F64; }
.ux-ci-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 18px; padding: 7px 16px 9px; background: #FBFDFC; }
@media (max-width: 980px) { .ux-ci-body { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ux-ci-body { grid-template-columns: 1fr; } }
.ux-ci-row { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; line-height: 1.3; padding: 1px 0; border-bottom: 1px dashed #DCEEE6; }
.ux-ci-k { color: #5A6B66; font-weight: 600; white-space: nowrap; }
.ux-ci-v { color: #14342C; font-weight: 700; text-align: end; word-break: break-word; }
/* A8: inline editable adhoc-client name (auto-saves on blur). */
.ux-ci-nameinp { flex:1; min-width:0; font-family:inherit; font-size:11.5px; font-weight:700; text-align:end; color:var(--p-text); border:1px solid var(--p-border); border-radius:6px; padding:2px 6px; background:var(--p-surface); }
.ux-ci-nameinp:focus { outline:none; border-color:var(--p-teal); }
/* R3 — preferred-channel row in the client-info panel (RTL/LTR via logical props; day+night). */
.ux-ci-pref-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ux-ci-pref-cur { display:inline-flex; align-items:center; gap:5px; font-weight:700; color:var(--p-text); }
.ux-ci-pref-cur .ch-ic { width:16px; height:16px; }
.ux-ci-pref-lbl { font-size:11.5px; }
.ux-ci-pref-none { color:var(--p-text-3, #8a9a94); font-weight:600; }
.ux-ci-pref-sel { margin-inline-start:auto; font-family:inherit; font-size:11px; font-weight:700; color:var(--p-text); border:1px solid var(--p-border); border-radius:4px; padding:2px 6px; background:var(--p-surface); cursor:pointer; }
.ux-ci-pref-sel:focus { outline:none; border-color:var(--p-teal, #14b8a6); }
/* R4 — send-channel switcher in the thread header (sits on the green object-header bar). */
.ux-sendch { position:relative; display:inline-flex; align-items:center; }
.ux-sendch-trig { display:inline-flex; align-items:center; gap:5px; font-family:inherit; font-size:11px; font-weight:700; color:var(--p-text); background:var(--p-surface); border:1px solid var(--p-border); border-radius:4px; padding:2px 7px; cursor:pointer; white-space:nowrap; }
.ux-sendch-trig:hover { border-color:var(--p-green, #1FA06B); }
.ux-sendch-trig .ch-ic { width:15px; height:15px; }
.ux-sendch-pre { color:var(--p-text-2, #5A6B66); font-weight:600; }
.ux-sendch-caret { font-size:9px; color:var(--p-text-2, #5A6B66); }
.ux-sendch-menu { position:absolute; top:calc(100% + 4px); inset-inline-end:0; z-index:1200; min-width:170px; background:var(--p-surface, #fff); border:1px solid var(--p-border); border-radius:4px; box-shadow:0 6px 18px rgba(0,0,0,.18); overflow:hidden; padding:4px; }
.ux-sendch-menu-h { font-size:10.5px; font-weight:800; color:#fff; background:linear-gradient(180deg, var(--p-green, #1FA06B), var(--p-green-d, #157a52)); padding:5px 9px; margin:-4px -4px 4px; }
html[data-theme="night"] .ux-sendch-menu-h { background:linear-gradient(180deg, var(--p-emerald), var(--p-emerald-d)); }
.ux-sendch-item { display:flex; align-items:center; gap:7px; width:100%; font-family:inherit; font-size:12px; font-weight:600; color:var(--p-text); background:transparent; border:0; border-radius:4px; padding:6px 8px; cursor:pointer; text-align:start; }
.ux-sendch-item:hover { background:var(--p-band-1, #eef6f2); }
html[data-theme="night"] .ux-sendch-item:hover { background:var(--p-band-3, #205C47); }
.ux-sendch-item.active { background:var(--p-band-2, #e2f0ea); font-weight:800; }
.ux-sendch-item .ch-ic { width:17px; height:17px; }
.ux-thread-hd-empty {
  flex: 1;
  text-align: center;
  color: var(--p-text-3);
  font-size: 13px;
}
/* In-chat ticket indicator strip */
.ux-tkt-strip {
  align-self: stretch;
  background: #FFF8E7;
  border: 1px solid #F0DCA0;
  border-radius: 10px;
  margin-bottom: 6px;
  overflow: hidden;
  direction: rtl;
}
.ux-tkt-strip-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; cursor: pointer; user-select: none;
}
.ux-tkt-strip-ico { font-size: 15px; }
.ux-tkt-strip-title { font-weight: 700; font-size: 12px; color: #7A5C00; flex: 1; }
.ux-tkt-strip-count {
  background: #DC2626; color: #fff; font-size: 11px; font-weight: 700;
  min-width: 20px; height: 20px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 6px;
}
.ux-tkt-strip-chev { color: #7A5C00; font-size: 11px; }
.ux-tkt-strip-body { padding: 0 8px 8px; display: flex; flex-direction: column; gap: 5px; }
.ux-tkt-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--p-surface); border: 1px solid #EADFBE; border-radius: 8px;
  padding: 7px 10px; cursor: pointer; transition: background 0.12s;
}
.ux-tkt-row:hover { background: #FFFBF0; }
.ux-tkt-num { font-family: 'Inter', monospace; font-size: 11px; font-weight: 700; color: var(--p-navy); white-space: nowrap; }
.ux-tkt-title { flex: 1; font-size: 12px; color: var(--p-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ux-tkt-pri { font-size: 10px; color: var(--p-text-2); background: var(--p-band-1); padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.ux-tkt-status { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.ux-tkt-status.open { background: rgba(22,163,74,0.12); color: #15803D; }
.ux-tkt-status.closed { background: rgba(100,116,139,0.15); color: #475569; }
.ux-tkt-date { font-size: 10px; color: var(--p-text-3); white-space: nowrap; }
.ux-thread {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: linear-gradient(180deg, white, #FAFCFB);
  min-height: 0;
  direction: ltr;
}
/* Chat stays WARM/LIGHT per the Sovereign Emerald rule: luxe frame outside, calm comfort inside */
.ux-thread {
  background-color: #F4FAF0;
  background-image: radial-gradient(rgba(26,127,100,0.05) 1px, transparent 1px);
  background-size: 18px 18px;
}
.ux-thread-empty {
  margin: auto;
  text-align: center;
  color: var(--p-text-3);
  font-size: 13px;
  max-width: 320px;
  line-height: 1.5;
}
.ux-thread-empty .empty-icon {
  font-size: 42px;
  margin-bottom: 10px;
  opacity: 0.5;
}
.ux-msg-row {
  display: flex;
  flex-direction: column;
  max-width: 72%;
}
/* Physical sides regardless of page direction:
   customer (in) = LEFT, agent (out) = RIGHT.
   Thread forced LTR so flex-start is always physical-left; bubble text uses its own dir. */
.ux-thread { direction: ltr; }
.ux-msg-row.in  { align-self: flex-start; }
.ux-msg-row.out { align-self: flex-end; }
/* Bubbles keep plaintext bidi for mixed AR/EN content; author/time rows are
   positioned LTR (like the thread) so flex-start = physical-left always. */
.ux-msg-bubble { direction: rtl; unicode-bidi: plaintext; }
.ux-msg-author, .ux-msg-time { direction: ltr; }
.ux-msg-author {
  font-size: 11px;
  font-weight: 700;
  color: var(--p-navy);
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.ux-channel-icon {
  width: 14px;
  height: 14px;
  vertical-align: middle;
  display: inline-block;
}
.ux-msg-author img.ux-channel-icon {
  width: 14px;
  height: 14px;
}
.ux-hd-meta img.ux-channel-icon {
  width: 15px;
  height: 15px;
}
.ux-msg-author .ux-headset-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--p-emerald-d);
  vertical-align: middle;
  flex-shrink: 0;
}
.ux-msg-author .ux-headset-badge svg {
  width: 20px;
  height: 20px;
}
.ux-msg-bubble {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  line-height: 1.45;
  word-wrap: break-word;
  box-shadow: 0 1px 1px rgba(0,0,0,0.08);
}
/* Customer (incoming, left) — white bubble */
.ux-msg-row.in .ux-msg-bubble {
  background: #FFFFFF;
  color: #111B21;
  border-top-left-radius: 2px;
}
/* Agent (outgoing, right) — Sovereign Emerald light-green bubble */
.ux-msg-row.out .ux-msg-bubble {
  background: #DCF3E4;
  color: #1A3A2A;
  border: 1px solid #B7E3C6;
  border-top-right-radius: 2px;
}
.ux-msg-time {
  font-size: 9.5px;
  color: #667781;
  margin-top: 3px;
}
.ux-msg-row.out .ux-msg-time { text-align: right; }
.ux-msg-row.out .ux-msg-author { justify-content: flex-end; flex-direction: row; }
.ux-msg-row.in .ux-msg-time { text-align: left; }
/* Phase-1 chat-send: «لم تُرسَل» badge + «إعادة المحاولة» under a failed staff message. */
.ux-msg-failed { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.ux-msg-row.in .ux-msg-failed { justify-content: flex-start; }
.ux-failed-badge { font-size: 10.5px; font-weight: 800; color: var(--p-red-d, #B91C1C); background: var(--p-red-bg, #FEE2E2); border: 1px solid var(--p-red, #DC2626); border-radius: 999px; padding: 1px 8px; }
.ux-retry-btn { font-size: 10.5px; font-weight: 700; color: var(--p-red-d, #B91C1C); background: transparent; border: 1px solid var(--p-red, #DC2626); border-radius: 7px; padding: 2px 8px; cursor: pointer; }
.ux-retry-btn:hover { background: var(--p-red, #DC2626); color: #fff; }
.ux-retry-btn[disabled] { opacity: .5; cursor: default; }
.ux-msg-row.in .ux-msg-author { justify-content: flex-start; flex-direction: row; }
/* System messages — centered banner, tagged as SYSTEM (not an agent) */
.ux-msg-system {
  align-self: center;
  max-width: 90%;
  margin: 4px 0;
  text-align: center;
}
.ux-sys-pill {
  display: inline-block;
  background: #FFF4D6;
  color: #7A5C00;
  border: 1px solid #F0DCA0;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12px;
  line-height: 1.4;
}
/* Conversation card bottom row + state badges */
.ux-cust-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}
.ux-unread-dot {
  display: inline-block;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #DC2626;
  vertical-align: middle;
  animation: ttPulseRed 1.4s infinite;   /* Zone B: STRONG platform pulse standard (was the weak ux-dot-pulse) */
  flex-shrink: 0;
}
.ux-cust-bottom-right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ux-state-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.ux-state-badge.st-waiting { background: rgba(220,38,38,0.10); color: #DC2626; }
.ux-state-badge.st-active  { background: rgba(22,163,74,0.12); color: #16A34A; }
.ux-state-badge.st-closing { background: rgba(217,119,6,0.14); color: #D97706; }
.ux-state-badge.st-idle    { background: rgba(217,119,6,0.14); color: #D97706; }   /* 5D idle */
.ux-state-badge.st-closed  { background: rgba(100,116,139,0.14); color: #64748B; }
.ux-customer-card.ux-state-closed, .ux-customer-card.ux-state-ended { opacity: 0.7; }

/* === Compose === */
/* Zone D point 7 — gentle pre-close heads-up strip (sits between the thread and the composer).
   Theme-adaptive amber tokens so it reads correctly in BOTH day + night by construction. Logical
   alignment (start) so it works in RTL + LTR; takes zero height when hidden (display:none inline). */
.ux-preclose {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 16px;
  background: var(--p-amber-bg);
  color: var(--p-amber-d);
  border-top: 1px solid color-mix(in srgb, var(--p-amber) 35%, var(--p-border));
  font-size: 12px;
  font-weight: 600;
  text-align: start;
}
.ux-preclose .ux-preclose-ic { font-size: 13px; line-height: 1; flex-shrink: 0; }
.ux-compose {
  padding: 12px 16px;
  border-top: 1px solid var(--p-border);
  background: var(--p-surface);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;            /* never overflow/clip the action buttons on a narrow window */
}
.ux-compose .ux-input { min-width: 120px; }   /* allow the input to shrink so buttons stay reachable */
.ux-compose .ux-send-btn, .ux-compose .ux-done-btn { flex-shrink: 0; }
.ux-attach-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--p-border);
  background: var(--p-surface);
  font-size: 15px;
  color: var(--p-text-2);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.ux-attach-btn:hover { background: #F2F8F5; color: var(--p-teal); }
/* ===== Attachments / replies / voice (cockpit) ===== */
#ux-voice-btn.recording {
  background: var(--p-red) !important;
  color: #fff !important;
  border-color: var(--p-red) !important;
  animation: ux-rec-pulse 1s infinite;
}
@keyframes ux-rec-pulse { 0%,100%{ box-shadow:0 0 0 0 rgba(220,38,38,0.5);} 50%{ box-shadow:0 0 0 6px rgba(220,38,38,0);} }
.ux-attach-tray {
  padding: 8px 16px;
  border-top: 1px solid var(--p-border);
  background: #F8FAFB;
}
.ux-att-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ux-att-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--p-surface); border: 1px solid var(--p-border);
  border-radius: 8px; padding: 4px 8px; font-size: 11px;
}
.ux-att-thumb { width: 28px; height: 28px; object-fit: cover; border-radius: 4px; }
.ux-att-ico { font-size: 18px; }
.ux-att-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ux-att-size { color: var(--p-text-3); font-size: 10px; }
.ux-att-x { border: none; background: transparent; cursor: pointer; color: var(--p-red); font-size: 12px; }
/* Reply strip (composer) */
.ux-reply-strip {
  display: flex; align-items: stretch; gap: 8px;
  background: var(--p-surface); border-radius: 8px; padding: 6px 10px; margin-bottom: 8px;
  border: 1px solid var(--p-border);
}
.ux-reply-bar { width: 3px; background: var(--p-teal); border-radius: 2px; flex-shrink: 0; }
.ux-reply-body { flex: 1; min-width: 0; }
.ux-reply-author { font-size: 10px; font-weight: 700; color: var(--p-teal); }
.ux-reply-text { font-size: 11px; color: var(--p-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ux-reply-cancel { border: none; background: transparent; cursor: pointer; color: var(--p-text-3); }
/* Quote snippet inside a bubble */
.ux-quote {
  display: flex; gap: 6px; align-items: stretch;
  background: rgba(0,0,0,0.05); border-radius: 6px; padding: 4px 8px; margin-bottom: 5px; cursor: pointer;
}
.ux-quote-bar { width: 3px; background: var(--p-teal); border-radius: 2px; flex-shrink: 0; }
.ux-quote-author { font-size: 10px; font-weight: 700; color: var(--p-teal); }
.ux-quote-text { font-size: 11px; color: var(--p-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Attachments in bubble */
.ux-msg-atts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.ux-msg-img { max-width: 220px; max-height: 200px; border-radius: 8px; display: block; }
.ux-msg-audio { max-width: 240px; height: 38px; }
.ux-msg-video { max-width: 240px; border-radius: 8px; }
.ux-att-file {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.6); border: 1px solid var(--p-border);
  border-radius: 8px; padding: 8px 10px; text-decoration: none; color: inherit; max-width: 240px;
}
.ux-att-file-ico { font-size: 22px; flex-shrink: 0; }
.ux-att-file-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ux-att-file-name { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--p-text); }
.ux-att-file-size { font-size: 10px; color: var(--p-text-3); }
.ux-att-dl { color: var(--p-teal); font-size: 14px; }
.ux-msg-reply-btn {
  position: absolute; top: 2px; opacity: 0;
  border: none; background: rgba(255,255,255,0.85); border-radius: 50%;
  width: 22px; height: 22px; cursor: pointer; font-size: 11px; transition: opacity 0.12s;
}
[dir="rtl"] .ux-msg-reply-btn { left: 2px; }
[dir="ltr"] .ux-msg-reply-btn { right: 2px; }
.ux-msg-bubble { position: relative; }
.ux-msg-bubble:hover .ux-msg-reply-btn { opacity: 1; }
.ux-msg-flash { animation: ux-flash 1.2s ease; }
@keyframes ux-flash { 0%,100%{ background: transparent;} 30%{ background: rgba(15,110,86,0.12);} }
/* Drag-over state */
.ux-center.ux-drag-over { outline: 2px dashed var(--p-teal); outline-offset: -8px; background: rgba(15,110,86,0.03); }
.ux-input {
  flex: 1;
  border: 1.5px solid var(--p-border);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 14px;
  background: #F2F8F5;
  font-family: inherit;
  transition: all 0.15s;
}
.ux-input:focus {
  outline: none;
  border-color: var(--p-teal);
  background: var(--p-surface);
  box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.12);
}
.ux-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--p-border);
  background: var(--p-surface);
  color: var(--p-text-2);
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ux-icon-btn:hover { background: #F2F8F5; color: var(--p-teal); border-color: var(--p-teal); }
.ux-icon-btn.recording {
  background: #DC2626;
  color: white;
  border-color: #DC2626;
  animation: uxRecord 1s ease-in-out infinite;
}
@keyframes uxRecord {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6); }
  50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}
.ux-convert-btn {
  background: transparent;
  color: #D97706;
  border: none;
  font-size: 32px;
  width: 48px;
  height: 48px;
}
.ux-convert-btn:hover {
  background: transparent;
  color: #B45309;
  border: none;
  transform: scale(1.1);
}
.ux-send-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #2F5D53, #1A9E78);
  color: white;
  font-size: 17px;
  box-shadow: 0 3px 10px rgba(26, 127, 100, 0.30);
  cursor: pointer;
  flex-shrink: 0;
}
.ux-send-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(26, 127, 100, 0.42); }
/* The ➤ glyph is physically right-pointing; in RTL the send direction is left,
   so mirror the glyph. Logical-direction rule applied visually. */
.ux-send-glyph { display: inline-block; }
[dir="rtl"] .ux-send-glyph { transform: scaleX(-1); }

/* ============================================================
   CLIENTS PAGE — registered customers table
   ============================================================ */
.cl-count-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  background: var(--p-navy-bg);
  color: var(--p-navy);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}
.cl-search-bar {
  margin-bottom: 8px;   /* round-2 #9: trim wasted space above «الأعمدة» */
}
/* ===== Phase-1 B: clients top section — import corner · action row · tracker toolbar · hint · columns popup ===== */
.cl-import-corner { display: flex; justify-content: flex-end; margin-bottom: 6px; }   /* B3: inline-end corner */
.cl-action-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }            /* B4 */
.cl-action-row .btn { white-space: nowrap; }
.cl-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0; }   /* B5 */
.cl-tb-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cl-tb-side { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }   /* trailing edge */
.cl-tb-count { font-size: 15px; font-weight: 800; color: var(--p-text); white-space: nowrap; }
.cl-tb-count b { color: var(--p-emerald, #1A7F64); }
.cl-tb-filterdesc { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.cl-fd-seg { font-size: 11px; font-weight: 700; color: var(--p-text-2); background: var(--p-band-2, var(--p-band-1)); border: 1px solid var(--p-border); border-radius: 999px; padding: 2px 9px; }
.cl-tb-btn { font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 8px; border: 1.5px solid var(--p-border); background: var(--p-surface); color: var(--p-text); cursor: pointer; white-space: nowrap; }
.cl-tb-btn:hover { border-color: var(--p-emerald, #1A7F64); }
.cl-tb-btn.on { background: var(--p-emerald-bg, #E6F4F1); border-color: var(--p-emerald, #1A7F64); color: var(--p-emerald-d, #145F4C); }
.cl-tb-clearall { border-color: var(--p-red, #DC2626); color: var(--p-red-d, #B91C1C); }
.cl-tb-search { width: 220px; max-width: 46vw; font-size: 13px; padding: 7px 12px; border: 1.5px solid var(--p-border); border-radius: 10px; background: var(--p-surface); color: var(--p-text); font-family: inherit; }   /* B10: compact */
.cl-hint { font-size: 12px; color: var(--p-text-2); background: var(--p-band-1); border: 1px solid var(--p-border); border-radius: 8px; padding: 6px 12px; margin-bottom: 8px; }
/* B9: columns popup — anchored, constrained (own scroll), opens inline-end */
.cl-cols-pop { z-index: 1500; background: var(--p-surface); border: 1px solid var(--p-border); border-radius: 12px; box-shadow: 0 12px 34px rgba(0,0,0,.22); padding: 8px; max-height: 70vh; overflow-y: auto; display: flex; flex-direction: column; }
.cl-cols-pop-hd { font-size: 13px; font-weight: 800; color: var(--p-text-2); padding: 4px 6px 8px; }
.cl-cols-pop-list { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }
.cl-cols-pop-foot { display: flex; gap: 6px; padding-top: 8px; border-top: 1px solid var(--p-border); margin-top: 6px; }
.cl-search-bar .inp {
  width: 100%;
  max-width: 420px;
  padding: 10px 16px;
  border: 1.5px solid var(--p-border);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
}
.cl-search-bar .inp:focus {
  outline: none;
  border-color: var(--p-teal);
  box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.12);
}
/* Registration funnel stat card (clients page) */
#clients-funnel-card { margin-bottom: 8px; }   /* round-2 #9: trim wasted space above «الأعمدة» */
.cl-funnel {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.cl-funnel-stat {
  flex: 1; min-width: 120px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: var(--p-surface); border: 1px solid var(--p-border);
  border-radius: 12px; padding: 12px 16px; cursor: pointer;
  font-family: inherit; text-align: start;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cl-funnel-stat.static { cursor: default; }
/* Funnel tiles ARE solid .p-stat tone tiles now → selection = a GOLD RING (so the tone shows through),
   and hover = a brightness lift (like the cockpit ribbon), NOT a background/border swap. */
.cl-funnel-stat.p-stat.on { outline: 3px solid var(--p-gold-d); outline-offset: 1px; }
.cl-funnel-stat.p-stat:not(.static):hover { filter: brightness(1.06); }
.cl-funnel-num { font-size: 22px; font-weight: 800; color: var(--p-teal); line-height: 1; }
.cl-funnel-lbl { font-size: 11px; color: var(--p-text-2); font-weight: 600; }
/* Client / prospect ID cells — monospace, muted */
.cl-id-cell { font-family: 'Inter', monospace; font-size: 11px; color: var(--p-text-2); white-space: nowrap; }
.cl-id-cell.prospect { color: var(--p-text-3); }

.cl-table-wrap {
  background: var(--p-surface);
  border: 1px solid var(--p-border-2);
  border-radius: 12px;
  overflow: auto;
  max-height: calc(100vh - 240px);
}
/* Top horizontal scrollbar, synced with the table's bottom scroll (clients_syncDualScroll). */
.cl-top-scroll { overflow-x: auto; overflow-y: hidden; margin-bottom: 4px; }
.cl-top-scroll-inner { height: 1px; }

/* ── Gold floating scrollbars (round-2 #2/#4/#5) ──
   Theme-gold thumb + gold end-arrows; the track is transparent so the page background shows through
   (the "floating" look) and it adapts to day/night automatically. Applies to the table's own vertical
   + bottom-horizontal bars AND the synced top horizontal bar. Firefox gets thumb+track via
   scrollbar-color (no arrows there — graceful). Scrollbar arrows are genuinely-physical browser
   chrome (left/right on a horizontal bar regardless of text direction), so they don't flip with RTL. */
/* ── GOLD FLOATING SCROLLBAR — PLATFORM-WIDE STANDARD (CLAUDE.md, قاعدة عامّة) ──
   Every scrollbar everywhere: gold thumb · transparent floating track · gold end-arrows · theme-adaptive. */
* { scrollbar-color: var(--p-gold, #C5970A) transparent; }
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--p-gold, #C5970A); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--p-gold-d, #9C7A08); background-clip: padding-box; }
::-webkit-scrollbar-button { background: transparent no-repeat center; }
::-webkit-scrollbar-button:single-button { display: block; }
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement,
::-webkit-scrollbar-button:horizontal:start:increment,
::-webkit-scrollbar-button:horizontal:end:decrement { display: none; }
::-webkit-scrollbar-button:vertical:start:decrement { height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M7 4L11 10L3 10Z' fill='%23C5970A'/%3E%3C/svg%3E"); }
::-webkit-scrollbar-button:vertical:end:increment { height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M3 4L11 4L7 10Z' fill='%23C5970A'/%3E%3C/svg%3E"); }
::-webkit-scrollbar-button:horizontal:start:decrement { width: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M4 7L10 3L10 11Z' fill='%23C5970A'/%3E%3C/svg%3E"); }
::-webkit-scrollbar-button:horizontal:end:increment { width: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M10 7L4 3L4 11Z' fill='%23C5970A'/%3E%3C/svg%3E"); }

#page-clients .cl-table-wrap, #page-clients .cl-top-scroll { scrollbar-color: var(--p-gold, #C5970A) transparent; }
#page-clients .cl-table-wrap::-webkit-scrollbar,
#page-clients .cl-top-scroll::-webkit-scrollbar { width: 14px; height: 14px; }
#page-clients .cl-table-wrap::-webkit-scrollbar-track,
#page-clients .cl-top-scroll::-webkit-scrollbar-track,
#page-clients .cl-table-wrap::-webkit-scrollbar-corner { background: transparent; }
#page-clients .cl-table-wrap::-webkit-scrollbar-thumb,
#page-clients .cl-top-scroll::-webkit-scrollbar-thumb {
  background: var(--p-gold, #C5970A);
  border-radius: 999px;
  border: 3px solid transparent;          /* inset → the gold thumb floats inside the transparent track */
  background-clip: padding-box;
}
#page-clients .cl-table-wrap::-webkit-scrollbar-thumb:hover,
#page-clients .cl-top-scroll::-webkit-scrollbar-thumb:hover { background: var(--p-gold-d, #9C7A08); background-clip: padding-box; }
/* End arrows: one gold triangle at each end, on a transparent (floating) base. */
#page-clients .cl-table-wrap::-webkit-scrollbar-button,
#page-clients .cl-top-scroll::-webkit-scrollbar-button { background: transparent no-repeat center; }
#page-clients .cl-table-wrap::-webkit-scrollbar-button:single-button,
#page-clients .cl-top-scroll::-webkit-scrollbar-button:single-button { display: block; }
/* hide the unwanted (wrong-end) buttons so exactly one arrow shows at each end */
#page-clients .cl-table-wrap::-webkit-scrollbar-button:vertical:start:increment,
#page-clients .cl-table-wrap::-webkit-scrollbar-button:vertical:end:decrement,
#page-clients .cl-table-wrap::-webkit-scrollbar-button:horizontal:start:increment,
#page-clients .cl-table-wrap::-webkit-scrollbar-button:horizontal:end:decrement,
#page-clients .cl-top-scroll::-webkit-scrollbar-button:horizontal:start:increment,
#page-clients .cl-top-scroll::-webkit-scrollbar-button:horizontal:end:decrement { display: none; }
#page-clients .cl-table-wrap::-webkit-scrollbar-button:vertical:start:decrement { height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M7 4L11 10L3 10Z' fill='%23C5970A'/%3E%3C/svg%3E"); }
#page-clients .cl-table-wrap::-webkit-scrollbar-button:vertical:end:increment { height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M3 4L11 4L7 10Z' fill='%23C5970A'/%3E%3C/svg%3E"); }
#page-clients .cl-table-wrap::-webkit-scrollbar-button:horizontal:start:decrement,
#page-clients .cl-top-scroll::-webkit-scrollbar-button:horizontal:start:decrement { width: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M4 7L10 3L10 11Z' fill='%23C5970A'/%3E%3C/svg%3E"); }
#page-clients .cl-table-wrap::-webkit-scrollbar-button:horizontal:end:increment,
#page-clients .cl-top-scroll::-webkit-scrollbar-button:horizontal:end:increment { width: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M10 7L4 3L4 11Z' fill='%23C5970A'/%3E%3C/svg%3E"); }
/* Client Records PART 3 — antique table polish (sticky green «نسك» header) + family chips, KYC badge,
   package/ticket links, member indent, the documents-queue side panel + toolbar count. */
.cl-table-wrap .cl-table thead th { position: sticky; top: 0; z-index: 3; }
.cl-type-chip { display:inline-block; padding:1px 8px; border-radius:7px; font-size:10px; font-weight:800; white-space:nowrap; }
.cl-type-chip.cl-main   { background:var(--p-teal-bg, #d1faf0); color:var(--p-teal-d, #0f766e); border:1px solid var(--p-teal, #14b8a6); }
.cl-type-chip.cl-member { background:var(--p-band-1); color:var(--p-text-3); border:1px solid var(--p-border); }
.cl-member-row td[data-member="1"]::before { content:"↲"; position:absolute; inset-inline-start:9px; top:50%; transform:translateY(-50%); color:var(--p-green-d, #15803D); }   /* phase-1 C3: ↳→↲ (RTL companion indent) */
/* Companion (member) rows get their OWN green zebra — distinct from the main table's zebra. */
/* #page-clients prefix REQUIRED: the main cream zebra is ID-scoped (#page-clients … nth-child),
   specificity (1,2,3). These must beat it → prefix to (1,3,3). Greens deepened so the stripe reads clearly green. */
#page-clients .cl-table tbody tr.cl-member-row.cl-mem-a td { background: color-mix(in srgb, var(--p-green, #16A34A) 18%, var(--p-surface)); }
#page-clients .cl-table tbody tr.cl-member-row.cl-mem-b td { background: color-mix(in srgb, var(--p-green, #16A34A) 30%, var(--p-surface)); }
#page-clients .cl-table tbody tr.cl-member-row:hover td { background: color-mix(in srgb, var(--p-green, #16A34A) 38%, var(--p-surface)); }

/* Family display: a BIG, CLEAR (+)/(−) marker on the MAIN row opens/hides its companions.
   (+)/(−) is non-directional → correct in RTL and LTR by construction (no arrow to flip). */
.cl-fam-toggle { display:inline-flex; align-items:center; gap:6px; cursor:pointer; user-select:none; margin-inline-end:8px; vertical-align:middle; background:var(--p-surface); border:1.5px solid var(--p-emerald, #1A7F64); border-radius:8px; padding:2px 9px 2px 5px; line-height:1; }
.cl-fam-toggle:hover { background:var(--p-emerald-bg, #E6F4F1); }
.cl-fam-toggle.static { cursor:default; border-style:dashed; border-color:var(--p-border-2, #cbd5e1); background:var(--p-surface); }
.cl-fam-sign { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:6px; background:var(--p-emerald, #1A7F64); color:#fff; font-size:19px; font-weight:700; }
.cl-fam-toggle.is-open .cl-fam-sign { background:var(--p-gold, #C5970A); }
.cl-fam-count { min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--p-emerald-bg, #E6F4F1); color:var(--p-emerald-d, #145F4C); font-size:11px; font-weight:800; line-height:18px; text-align:center; }

/* Phase-1 B2: .cl-kindbar/.cl-kind-box removed — أساسيون/تابعون are now .cl-funnel-stat boxes in the funnel row. */
.cl-verif-badge.on  { color:var(--p-green, #16a34a); font-weight:800; }
.cl-verif-badge.off { color:var(--p-text-3); }
/* Identity 2b — multi-value «+N» indicator in phone/email cells */
.cl-more-badge { display:inline-block; font-size:10px; font-weight:800; padding:1px 6px; border-radius:999px; background:var(--p-teal, #14b8a6); color:#fff; vertical-align:middle; margin-inline-start:4px; }
/* Identity Phase 5 — «عملاء محتملون» leads recovery surface (reuses the unified ttPulseRed attention pulse) */
.cl-funnel-stat.cl-attention { border-color:#dc2626 !important; animation: ttPulseRed 1.5s ease-in-out infinite; }
.cl-lead-sub { display:flex; align-items:center; gap:5px; margin-top:3px; font-size:11px; color:var(--p-text-3); }
.cl-lead-sub img, .cl-lead-sub svg { width:13px; height:13px; flex:0 0 auto; }
.cl-lead-snip { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:240px; }
.cl-lead-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#dc2626; margin-inline-start:5px; vertical-align:middle; animation: ttPulseRed 1.5s ease-in-out infinite; }
.cl-lead-sub[role="button"]:hover { color:var(--p-teal,#14b8a6); }
.cl-lead-open { font-weight:800; color:var(--p-teal,#14b8a6); margin-inline-start:2px; }
.cl-pkg-link, .cl-ticket-link { color:var(--p-teal-d, #0f766e); cursor:pointer; text-decoration:none; font-weight:700; }
.cl-pkg-link:hover, .cl-ticket-link:hover { text-decoration:underline; }
.cl-queue-count { background:var(--p-red); color:#fff; border-radius:999px; padding:0 6px; font-size:10px; font-weight:800; margin-inline-start:4px; }
.cl-doc-queue { position:fixed; inset-inline-end:0; top:0; bottom:0; width:340px; z-index:9100; background:var(--p-surface); border-inline-start:1px solid var(--p-border); box-shadow:-10px 0 40px rgba(0,0,0,.18); display:flex; flex-direction:column; }
.cl-dq-head { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; background:linear-gradient(180deg,var(--p-green),var(--p-green-d)); color:#fff; }
.cl-dq-title { font-weight:800; font-size:14px; display:flex; align-items:center; gap:8px; }
.cl-dq-badge { background:#fff; color:var(--p-teal-d, #0f766e); border-radius:999px; padding:1px 9px; font-size:12px; font-weight:800; }
.cl-dq-close { background:transparent; border:none; color:#fff; font-size:18px; cursor:pointer; }
.cl-dq-list { flex:1 1 auto; overflow:auto; padding:8px; }
.cl-dq-empty { padding:36px 16px; text-align:center; color:var(--p-text-3); font-weight:700; }
.cl-dq-item { border:1px solid var(--p-border); border-radius:10px; padding:9px 11px; margin-bottom:8px; background:var(--p-band-1); }
.cl-dq-main { display:flex; align-items:baseline; gap:8px; margin-bottom:5px; }
.cl-dq-name { font-weight:800; font-size:13px; color:var(--p-teal-d, #0f766e); cursor:pointer; }
.cl-dq-name:hover { text-decoration:underline; }
.cl-dq-reg { font-size:11px; color:var(--p-text-3); }
.cl-dq-meta { display:flex; gap:10px; font-size:11px; color:var(--p-text-2); margin-bottom:7px; }
.cl-dq-actions { display:flex; gap:6px; }
.cl-dq-btn { flex:1; padding:5px 8px; border:1px solid var(--p-border); background:var(--p-surface); border-radius:6px; cursor:pointer; font-family:inherit; font-size:12px; }
.cl-dq-btn.on { background:var(--p-teal, #14b8a6); color:#fff; border-color:var(--p-teal, #14b8a6); }
/* Client Records PART 4 — the 3-column add/edit form */
.cf-card { background:var(--p-surface); color:var(--p-text); border:1px solid var(--p-border); border-radius:14px; width:680px; max-width:94vw; max-height:92vh; display:flex; flex-direction:column; box-shadow:var(--sh-modal,0 18px 50px rgba(0,0,0,.3)); overflow:hidden; direction:rtl; }
.cf-head { background:linear-gradient(180deg,var(--p-green),var(--p-green-d)); color:#fff; font-weight:800; font-size:15px; padding:13px 18px; }
.cf-body { padding:14px 18px; overflow:auto; }
.cf-foot { display:flex; gap:8px; justify-content:flex-end; padding:12px 18px; border-top:1px solid var(--p-border); }
.cf-sec { margin-bottom:14px; }
.cf-sec-h { font-size:13px; font-weight:800; color:var(--p-teal-d, #0f766e); margin-bottom:7px; padding-bottom:4px; border-bottom:1px solid var(--p-border); }
.cf-grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px; }
.cf-lab { display:block; font-size:11px; color:var(--p-text-2); margin-bottom:3px; }
.cf-inp { width:100%; border:1px solid var(--p-border); border-radius:7px; padding:6px 8px; font-family:inherit; font-size:13px; }
.cf-seg { display:flex; gap:6px; }
.cf-seg-btn { flex:1; padding:6px 10px; border:1px solid var(--p-border); background:var(--p-surface); color:var(--p-text); border-radius:7px; cursor:pointer; font-family:inherit; font-size:13px; font-weight:700; }
.cf-seg-btn.on { background:var(--p-teal, #14b8a6); color:#fff; border-color:var(--p-teal, #14b8a6); }
.cf-verif { color:var(--p-green, #16a34a); font-weight:800; margin-inline-start:4px; }
/* Identity 2b — multi-value contact-handle manager (edit modal) */
.cf-h-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:6px 8px; border:1px solid var(--p-border); border-radius:8px; background:var(--p-surface); margin-bottom:6px; }
.cf-h-kind { font-size:15px; flex:0 0 auto; }
.cf-h-val { flex:1 1 140px; min-width:120px; font-size:13px; font-weight:700; color:var(--p-text); unicode-bidi:plaintext; }
.cf-h-label { font-weight:400; color:var(--p-text-3); font-size:12px; }
.cf-h-badge { font-size:11px; font-weight:800; padding:2px 7px; border-radius:999px; flex:0 0 auto; }
.cf-h-primary { background:var(--p-teal, #14b8a6); color:#fff; }
.cf-h-active { background:transparent; color:var(--p-green, #16a34a); font-size:13px; padding:0; }
.cf-h-btn { font-size:11px; font-weight:700; padding:3px 8px; border:1px solid var(--p-border); background:var(--p-bg, #fff); color:var(--p-text-2); border-radius:7px; cursor:pointer; font-family:inherit; flex:0 0 auto; }
.cf-h-btn:hover { border-color:var(--p-teal, #14b8a6); color:var(--p-text); }
.cf-h-btn.cf-h-ok { color:var(--p-green, #16a34a); border-color:var(--p-green, #16a34a); }
.cf-h-btn.cf-h-del:hover { color:#dc2626; border-color:#dc2626; }
.cf-h-empty { font-size:12px; color:var(--p-text-3); padding:8px; text-align:center; }
.cf-h-add { display:flex; gap:6px; align-items:center; margin-top:8px; }
.cf-h-add #cf-h-kind { flex:0 0 110px; }
.cf-h-add #cf-h-val { flex:1 1 auto; }
.cf-h-addbtn { flex:0 0 auto; white-space:nowrap; }
@media (max-width:640px){ .cf-grid3 { grid-template-columns:1fr; } .cf-h-add { flex-wrap:wrap; } }
/* Identity Phase 3 — smart-merge modal (drag-to-merge tray + golden record) */
.smerge-ov { position:fixed; inset:0; background:rgba(15,23,42,.5); display:flex; align-items:flex-start; justify-content:center; z-index:1600; padding:24px; overflow:auto; }
.smerge-card { background:var(--p-surface); color:var(--p-text); border:1px solid var(--p-border); border-radius:16px; width:900px; max-width:96vw; box-shadow:var(--sh-modal,0 18px 50px rgba(0,0,0,.35)); display:flex; flex-direction:column; max-height:92vh; }
.smerge-head { font-weight:800; font-size:16px; padding:14px 18px; border-bottom:1px solid var(--p-border); display:flex; align-items:center; justify-content:space-between; }
.smerge-x { background:transparent; border:none; color:var(--p-text-3); font-size:18px; cursor:pointer; line-height:1; }
.smerge-note { font-size:12px; color:var(--p-text-2); padding:9px 18px; background:var(--p-band-1); border-bottom:1px solid var(--p-border); }
.smerge-tray { margin:14px 18px; border:2px dashed var(--p-blue,#2563eb); border-radius:12px; padding:12px; min-height:84px; animation:smergePulse 1.9s ease-in-out infinite; transition:background .15s; }
.smerge-tray.empty { display:flex; align-items:center; justify-content:center; }
.smerge-tray.drag-over { background:rgba(37,99,235,.10); border-style:solid; }
@keyframes smergePulse { 0%,100%{ box-shadow:0 0 0 0 rgba(37,99,235,.28);} 50%{ box-shadow:0 0 0 7px rgba(37,99,235,.05), 0 0 16px 2px rgba(37,99,235,.40);} }
.smerge-tray-hint { color:var(--p-blue,#2563eb); font-weight:700; font-size:13px; }
.smerge-tray-h, .smerge-sub { font-size:12px; font-weight:700; color:var(--p-text-2); margin-bottom:6px; }
.smerge-body { padding:0 18px 8px; overflow:auto; }
.smerge-sub { margin:4px 0 10px; }
.smerge-loading, .smerge-empty, .smerge-fnone { font-size:13px; color:var(--p-text-3); padding:18px; text-align:center; }
.smerge-cluster { border:1px solid var(--p-border); border-radius:10px; padding:10px; margin-bottom:12px; background:var(--p-bg,#fff); }
.smerge-cl-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.smerge-score { font-size:11px; font-weight:800; padding:2px 9px; border-radius:999px; color:#fff; }
.smerge-high { background:#dc2626; } .smerge-mid { background:var(--p-amber,#d97706); } .smerge-low { background:var(--p-text-3,#94a3b8); }
.smerge-why { font-size:11px; padding:2px 8px; border-radius:999px; background:var(--p-band-2); color:var(--p-text-2); }
.smerge-flag { font-size:12px; font-weight:700; color:#b91c1c; background:rgba(220,38,38,.08); border:1px solid rgba(220,38,38,.35); border-radius:8px; padding:7px 10px; margin-bottom:8px; }
.smerge-tbl { width:100%; }
.smerge-tr { cursor:grab; }
.smerge-tr:active { cursor:grabbing; }
.smerge-grip { color:var(--p-text-3); cursor:grab; width:22px; text-align:center; }
.smerge-ctrl { width:36px; text-align:center; }
.smerge-up, .smerge-rm { border:1px solid var(--p-border); background:var(--p-surface); border-radius:7px; cursor:pointer; font-weight:800; width:26px; height:26px; line-height:1; }
.smerge-up { color:var(--p-blue,#2563eb); } .smerge-up:hover { background:rgba(37,99,235,.12); }
.smerge-rm:hover { color:#dc2626; border-color:#dc2626; }
.smerge-foot { display:flex; gap:8px; justify-content:flex-end; padding:12px 18px; border-top:1px solid var(--p-border); }
.smerge-gsec { margin-bottom:14px; }
.smerge-gh { font-size:13px; font-weight:800; color:var(--p-teal-d,#0f766e); margin-bottom:7px; }
.smerge-survrow, .smerge-fopts, .smerge-handles { display:flex; gap:8px; flex-wrap:wrap; }
.smerge-survbtn, .smerge-fopt { border:1px solid var(--p-border); background:var(--p-surface); color:var(--p-text); border-radius:9px; padding:6px 11px; cursor:pointer; font-family:inherit; font-size:12px; }
.smerge-survbtn.on, .smerge-fopt.on { border-color:var(--p-teal,#14b8a6); background:rgba(20,184,166,.12); font-weight:700; }
.smerge-fopt-src { color:var(--p-text-3); font-weight:400; }
.smerge-frow { display:flex; gap:10px; align-items:flex-start; padding:7px 0; border-bottom:1px dashed var(--p-border); }
.smerge-flab { flex:0 0 130px; font-size:12px; font-weight:700; color:var(--p-text-2); padding-top:6px; }
.smerge-fopts { flex:1 1 auto; }
.smerge-hchip { font-size:12px; font-weight:700; padding:3px 9px; border-radius:999px; background:var(--p-band-2); border:1px solid var(--p-border); }
.smerge-forcewrap { margin-top:6px; }
.smerge-forcelab { display:inline-flex; align-items:center; gap:6px; cursor:pointer; margin-inline-start:6px; font-weight:700; }
@media (max-width:720px){ .smerge-frow { flex-direction:column; } .smerge-flab { flex-basis:auto; } }
/* Identity Phase 4 — in-chat identity-guard bar */
.ux-idbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px; padding:8px 12px; border-radius:10px; background:rgba(217,119,6,.10); border:1px solid var(--p-amber,#d97706); }
.ux-idbar-ic { font-size:15px; color:var(--p-amber,#d97706); }
.ux-idbar-txt { flex:1 1 200px; font-size:12.5px; font-weight:700; color:var(--p-text); }
.ux-idbar-acts { display:flex; gap:6px; flex-wrap:wrap; }
.ux-idbar-btn { font-size:11.5px; font-weight:700; padding:4px 10px; border:1px solid var(--p-border); background:var(--p-surface); color:var(--p-text); border-radius:7px; cursor:pointer; font-family:inherit; }
.ux-idbar-btn:hover { border-color:var(--p-amber,#d97706); }
.ux-idbar-btn.primary { background:var(--p-teal,#14b8a6); color:#fff; border-color:var(--p-teal,#14b8a6); }
/* Correction 2 — re-homed «ignore client» action: GOLD + strong pulse */
.ux-idbar-btn.ignore-gold { background:var(--p-gold,#C5970A); color:#fff; border-color:var(--p-gold-d,#9C7A08); animation: ttPulseGold 1.4s infinite; }
.ux-idbar-btn.ignore-gold:hover { background:var(--p-gold-d,#9C7A08); border-color:var(--p-gold-d,#9C7A08); }
.ux-id-chip { display:inline-block; margin-inline-start:6px; font-size:9.5px; font-weight:800; padding:1px 6px; border-radius:999px; background:rgba(217,119,6,.15); color:var(--p-amber,#b45309); border:1px solid var(--p-amber,#d97706); vertical-align:middle; }
/* Phase 6 — Excel import wizard (rides the .smerge-ov/.smerge-card shell) */
.ci-h { font-weight:800; font-size:15px; margin-bottom:8px; }
.ci-note { font-size:12px; color:var(--p-text-2); margin:8px 0; }
.ci-prevwrap { max-height:38vh; overflow:auto; border:1px solid var(--p-border); border-radius:8px; margin:8px 0; }
.ci-prevtbl th, .ci-prevtbl td, .ci-revtbl th, .ci-revtbl td { font-size:11.5px; padding:5px 7px; white-space:nowrap; }
.ci-maps { display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; margin-top:6px; }
.ci-maprow { display:flex; align-items:center; gap:8px; }
.ci-maplbl { flex:0 0 130px; font-size:12px; font-weight:700; color:var(--p-text-2); }
.ci-mapsel { flex:1 1 auto; }
.ci-counts { display:flex; gap:8px; flex-wrap:wrap; margin:6px 0; }
.ci-cbadge { font-size:12px; font-weight:800; padding:3px 10px; border-radius:999px; color:#fff; }
.ci-tag { font-size:10.5px; font-weight:800; padding:1px 7px; border-radius:999px; color:#fff; }
/* Import-preview count badges = shared tone vocabulary (theme tokens only): new=neutral(teal) ·
   merge=progress(amber, caution: merge MODIFIES existing records — not a safe "go" green) ·
   conflict=attention(red) · skip=muted. */
.ci-new { background:var(--p-teal); } .ci-merge { background:var(--p-amber); }
.ci-conflict { background:var(--p-red); } .ci-skip { background:var(--p-text-3); }
.ci-why { font-size:10.5px; color:var(--p-text-3); }
.ci-rowsel, .ci-skiplab { font-size:11px; font-family:inherit; }
.ci-result { display:flex; gap:22px; font-size:15px; padding:10px 0; }
.ci-new-t { color:var(--p-teal-d,#0f766e); } .ci-merge-t { color:#b45309; }
@media (max-width:640px){ .ci-maps { grid-template-columns:1fr; } }
/* Client Records PART 5a — chat image «save to client files» + the panel documents section */
.ux-att-imgwrap { position:relative; display:inline-block; }
.ux-att-save { position:absolute; bottom:6px; inset-inline-start:6px; background:rgba(15,110,75,.92); color:#fff; border:none; border-radius:6px; padding:3px 8px; font-size:11px; font-weight:700; cursor:pointer; font-family:inherit; }
.ux-att-save:hover { background:#0f6e4b; }
.ux-ci-docs { margin-top:8px; border-top:1px dashed var(--p-border); padding-top:7px; }
.ux-ci-docs-h { font-size:12px; font-weight:800; color:var(--p-teal-d, #0f766e); margin-bottom:5px; }
.ux-ci-doc-row { display:flex; align-items:center; gap:8px; padding:3px 0; font-size:12px; }
.ux-ci-doc-name { flex:1; color:var(--p-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ux-ci-doc-st { font-size:11px; font-weight:700; padding:1px 7px; border-radius:6px; }
.ux-ci-doc-st.ok { background:var(--p-teal-bg, #d1faf0); color:var(--p-teal-d, #0f766e); }
.ux-ci-doc-st.pending { background:var(--p-amber-bg, #fef3c7); color:var(--p-amber-d, #92400e); }
.ux-ci-doc-st.none { background:var(--p-band-1); color:var(--p-text-3); }
.ux-ci-verify { background:var(--p-teal, #14b8a6); color:#fff; border:none; border-radius:6px; padding:2px 8px; font-size:11px; font-weight:700; cursor:pointer; font-family:inherit; }
/* B033 F4: internal document reject (verifier → agent), red, beside the green verify */
.ux-ci-reject { background:var(--p-red, #DC2626); color:#fff; border:none; border-radius:6px; padding:2px 8px; font-size:11px; font-weight:700; cursor:pointer; font-family:inherit; margin-inline-start:4px; }
/* PART 5b — multiselect, candidate prompt, doc-request buttons, merge bar */
.ux-hd-docbtn { background:var(--p-band-1); border:1px solid var(--p-border); color:var(--p-text-2); border-radius:6px; padding:2px 8px; font-size:11px; font-weight:700; cursor:pointer; font-family:inherit; white-space:nowrap; }
.ux-hd-docbtn:hover { background:var(--p-teal-bg, #d1faf0); color:var(--p-teal-d, #0f766e); }
.ux-att-pick { position:absolute; top:6px; inset-inline-start:6px; background:rgba(255,255,255,.92); border-radius:6px; padding:2px 7px; font-size:11px; font-weight:700; color:#0f172a; cursor:pointer; display:flex; align-items:center; gap:4px; }
.ux-att-cand { position:absolute; bottom:0; inset-inline-start:0; inset-inline-end:0; background:rgba(146,64,14,.92); color:#fff; font-size:11px; font-weight:700; padding:5px 7px; display:flex; align-items:center; justify-content:space-between; gap:6px; }
.ux-att-cand-btns button { background:#fff; color:#92400e; border:none; border-radius:5px; padding:1px 8px; font-size:11px; font-weight:800; cursor:pointer; margin-inline-start:3px; }
.ck-merge-bar { position:fixed; bottom:18px; inset-inline-start:50%; transform:translateX(-50%); background:var(--p-surface); border:1px solid var(--p-teal, #14b8a6); border-radius:999px; box-shadow:var(--sh-modal,0 10px 30px rgba(0,0,0,.2)); padding:7px 12px; z-index:9200; display:flex; align-items:center; gap:10px; font-size:12px; font-weight:700; direction:rtl; }
.ck-merge-bar .btn { padding:4px 12px; font-size:12px; }
#ck-docreq-badge { background:var(--p-red); color:#fff; border-radius:8px; padding:0 5px; font-size:9px; font-weight:800; }
.cl-table {
  /* B027 1.8: AUTO width — columns hug content (parity with table.ck-tt); fills the container when narrower. */
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.cl-table thead th,
.cl-table thead th.cl-th,
.cl-table thead th.cl-th-check {
  background: var(--p-emerald-d);
  background: linear-gradient(180deg, var(--p-emerald), var(--p-emerald-d));
  color: #ffffff !important;
  font-weight: 700;
  padding: 12px 14px;
  text-align: center;   /* B027 1.8: centred headers (parity with the ck table standard) */
  white-space: nowrap;
  /* B027 1.8: ZEBRA-ONLY — no grid lines (removed the #1F2937 vertical/horizontal rules). */
  position: sticky;
  top: 0;
  z-index: 2;
}
.cl-th-check { width: 40px; text-align: center !important; padding: 8px !important; }
.cl-td-check { width: 40px; text-align: center !important; padding: 4px 8px !important; }   /* round-2 #8: match denser body rows */
.cl-th-check input, .cl-td-check input { width: 16px; height: 16px; cursor: pointer; }
.cl-row-selected { background: var(--p-emerald-bg) !important; }
.cl-cell-text { white-space: nowrap; }
.cl-table thead th:last-child { border-right: none; }
/* Per-column filter row, sitting under the column titles (sticky just below the header row).
   Phase-1 #2: matches the TICKETS filter row (ck-tt-filters / ck-cf-inp) — light --p-band-2 bg, subtle
   --p-border (no dark #1F2937 ruling), short 3px padding. */
/* #page-clients prefix + !important REQUIRED: theme.css sets the header bg with
   `#page-clients .cl-table thead th { background:var(--a2-hd) !important }` (1,1,2 !important) — this
   filter-row rule must beat it for background → 1,3,3 + !important. --p-band-2 is theme-aware (cream
   day / dark night), same source the tickets filter row uses. */
#page-clients .cl-table thead tr.cl-filter-row th.cl-fth { background: var(--p-band-2, var(--p-band-1)) !important; padding: 3px 5px; border-inline-end: 1px solid var(--p-border); border-bottom: 1px solid var(--p-border); position: sticky; top: 44px; z-index: 2; }
.cl-filter-row .cl-filter-select { width: 100%; box-sizing: border-box; font-size: 11px; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--p-border); background: var(--p-surface); color: var(--p-text-2); }
.cl-filter-row .cl-filter-select.active { border-color: var(--p-emerald); font-weight: 700; }
/* Column sort: clickable header (phase-1 #3 removed the arrow / active-column indicator — the row
   order itself shows direction). */
.cl-th-sortable { cursor: pointer; }
/* B033 PART H: sort-direction indicator (vertical ▲/▼ = direction-neutral). Gold, small, beside the label. */
.cl-sort-ind { font-size: 9px; margin-inline-start: 4px; color: var(--p-gold-d); vertical-align: middle; }
.cl-th-sorted { color: var(--p-gold-d); }
/* Pagination bar (round-2 #6/#7) — rows-per-page selector + first/prev/numbers/next/last below the table. */
.cl-pager { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; padding: 8px 2px; font-family: 'Tajawal', 'Inter', sans-serif; }
.cl-pg-size { display: flex; align-items: center; gap: 6px; }
.cl-pg-size label { font-size: 12px; color: var(--p-text-2); font-weight: 700; }
.cl-pg-size select { font-size: 12px; padding: 4px 8px; border-radius: 8px; border: 1.5px solid var(--p-border); background: var(--p-surface); color: var(--p-text); cursor: pointer; }
.cl-pg-info { font-size: 12px; color: var(--p-text-2); margin-inline-start: auto; }
.cl-pg-nav { display: flex; align-items: center; gap: 4px; }
.cl-pg-btn, .cl-pg-num { min-width: 30px; height: 30px; padding: 0 8px; border-radius: 8px; border: 1.5px solid var(--p-border); background: var(--p-surface); color: var(--p-text); cursor: pointer; font-size: 13px; font-weight: 700; line-height: 1; }
.cl-pg-btn:hover:not([disabled]), .cl-pg-num:hover { border-color: var(--p-gold, #f6c94e); }
.cl-pg-btn[disabled] { opacity: 0.4; cursor: default; }
.cl-pg-num.on { background: var(--p-gold, #f6c94e); border-color: var(--p-gold, #f6c94e); color: #3a2e00; }
.cl-pg-ellipsis { padding: 0 4px; color: var(--p-text-3); }
/* Drag-to-reorder column headers */
.cl-th[draggable="true"] { cursor: grab; }
.cl-th[draggable="true"]:active { cursor: grabbing; }
.cl-th-dragging { opacity: 0.45; }
.cl-th-drop-before { box-shadow: inset -4px 0 0 var(--p-gold, #f6c94e); }
.cl-th-drop-after  { box-shadow: inset 4px 0 0 var(--p-gold, #f6c94e); }
.cl-table tbody td {
  padding: 6px 14px;   /* round-2 #8: denser rows — vertical padding cut ~45% (was 11px) */
  /* B027 1.8: ZEBRA-ONLY — removed the #1F2937 grid lines; beige zebra alone separates rows. */
  color: var(--p-text);
  vertical-align: middle;
}
/* B027 1.8: beige zebra on the main (non-family) rows — family/member rows keep their green zebra
   (higher-specificity #page-clients rules above), so this never overrides them. */
#page-clients .cl-table tbody tr:not(.cl-member-row):nth-child(even) td { background: var(--p-band-1); }
.cl-table tbody tr {
  cursor: pointer;
  transition: background 0.12s;
}
.cl-table tbody tr:hover { background: #F2F8F5; }
.cl-name-cell { font-weight: 700; color: var(--p-navy); }
.cl-email-cell { font-family: 'Inter', monospace; font-size: 12px; color: var(--p-text-2); }
.cl-channels-cell img { width: 16px; height: 16px; vertical-align: middle; margin-inline-end: 3px; }
.cl-pref-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  background: var(--p-navy-bg);
  color: var(--p-navy);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.cl-pref-badge img { width: 13px; height: 13px; }
.cl-status-chip {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
}
.cl-status-chip.complete { background: rgba(22,163,74,0.12); color: #16A34A; }
.cl-status-chip.partial  { background: rgba(217,119,6,0.14); color: #D97706; }
.cl-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--p-text-3);
  font-size: 13px;
}

/* Client detail modal */
.cl-modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(15, 35, 28, 0.5);
  backdrop-filter: blur(3px);
  z-index: 1400;   /* was 400 → rendered behind the clients table; lift it above page content (still below the shared dialogs at 10000) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cl-modal {
  width: 100%;
  max-width: 640px;
  max-height: 86vh;
  overflow-y: auto;
  background: var(--p-surface);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  animation: clModalIn 0.25s cubic-bezier(0.16,1,0.3,1);
}
@keyframes clModalIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.cl-modal-hd {
  padding: 20px 24px;
  border-bottom: 1px solid var(--p-border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  background: linear-gradient(90deg, #F2F8F5, white);
}
.cl-modal-hd-name { font-size: 19px; font-weight: 800; color: var(--p-navy); }
.cl-modal-hd-email { font-size: 12px; color: var(--p-text-3); font-family: 'Inter', monospace; margin-top: 2px; }
.cl-modal-close {
  border: none;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
  color: var(--p-text-3);
  line-height: 1;
}
.cl-modal-close:hover { color: var(--p-text); }
.cl-modal-body { padding: 20px 24px; }
.cl-section-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--p-text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 18px 0 10px;
}
.cl-section-title:first-child { margin-top: 0; }
.cl-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
}
@media (max-width: 540px) { .cl-field-grid { grid-template-columns: 1fr; } }
/* Item 5: tinted group behind the two classification fields (التصنيف + الجهة المكلّفة) so they
   read as one related pair now that the heading is gone. Token-based → correct in day & night. */
.cv-class-group {
  background: var(--p-band-1);
  border: 1px solid var(--p-border);
  border-radius: var(--r-md, 12px);
  padding: 12px 14px;
  margin-top: 4px;
}
.cl-field-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cl-field-label { font-size: 11px; color: var(--p-text-3); font-weight: 600; }
.cl-field-value { font-size: 14px; color: var(--p-text); font-weight: 500; }
.cl-field-value.empty { color: var(--p-text-3); font-style: italic; font-weight: 400; }
.cl-modal-channel-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: #F2F8F5;
  border-radius: 8px;
  margin-bottom: 6px;
}
.cl-modal-channel-row img { width: 18px; height: 18px; }
.cl-modal-channel-name { flex: 1; font-size: 13px; font-weight: 600; }
.cl-modal-channel-id { font-size: 11px; color: var(--p-text-3); font-family: 'Inter', monospace; }
.cl-modal-channel-status {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
}
.cl-modal-channel-status.verified { background: rgba(22,163,74,0.12); color: #16A34A; }
.cl-modal-channel-status.pending  { background: rgba(217,119,6,0.14); color: #D97706; }

/* ============================================================
   AGENT COCKPIT — slim KPI ribbon + inbox in dashboard
   ============================================================ */
.cockpit-ribbon {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 640px) {
  .cockpit-ribbon { grid-template-columns: repeat(2, 1fr); }
}
/* ============================================================
   SHARED STAT BOX — .p-stat (platform-wide content-coloured count tile).
   ONE component for every KPI/stat/count tile. A box declares a TYPE (its MEANING) and the
   component picks the tone from THEME TOKENS only — day/night aware, ZERO hardcoded hex:
     neutral  = teal   (plain counts: total, open…)
     done     = green  (closed · verified · resolved · delivered)
     progress = amber  (in-progress / قيد المعالجة)
     attention= red>0 / green=0  (waiting · overdue · errors · failed · pending)
     primary  = gold   (the headline box)
   `.cockpit-kpi` + the legacy tone-{teal|green|amber|red|navy} names are kept as ALIASES so
   existing consumers (e.g. the ops ribbon) keep working while markup migrates to .p-stat.
   Day = bold solid tile (tokens are dark in day → white text). Night override (theme.css) =
   tinted card (tokens are bright in night → solid+white would be unreadable). ============== */
.p-stat, .cockpit-kpi {
  background: linear-gradient(135deg, var(--p-teal), var(--p-teal-d));
  border: none;
  border-radius: 12px;
  padding: 13px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #fff;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--p-teal) 22%, transparent);
}
.p-stat.tone-neutral,   .cockpit-kpi.tone-neutral,   .cockpit-kpi.tone-teal  { background: linear-gradient(135deg, var(--p-teal),  var(--p-teal-d));  box-shadow: 0 8px 20px color-mix(in srgb, var(--p-teal)  22%, transparent); }
.p-stat.tone-done,      .cockpit-kpi.tone-done,      .cockpit-kpi.tone-green { background: linear-gradient(135deg, var(--p-green), var(--p-green-d)); box-shadow: 0 8px 20px color-mix(in srgb, var(--p-green) 22%, transparent); }
.p-stat.tone-progress,  .cockpit-kpi.tone-progress,  .cockpit-kpi.tone-amber { background: linear-gradient(135deg, var(--p-amber), var(--p-amber-d)); box-shadow: 0 8px 20px color-mix(in srgb, var(--p-amber) 22%, transparent); }
.p-stat.tone-attention, .cockpit-kpi.tone-attention, .cockpit-kpi.tone-red   { background: linear-gradient(135deg, var(--p-red),   var(--p-red-d));   box-shadow: 0 8px 20px color-mix(in srgb, var(--p-red)   22%, transparent); }
.p-stat.tone-primary,   .cockpit-kpi.tone-primary                            { background: linear-gradient(135deg, var(--p-gold),  var(--p-gold-d));  box-shadow: 0 8px 20px color-mix(in srgb, var(--p-gold)  22%, transparent); }
.cockpit-kpi.tone-navy  { background: linear-gradient(135deg, var(--p-teal), var(--p-teal-d)); box-shadow: 0 8px 20px color-mix(in srgb, var(--p-teal) 22%, transparent); }  /* legacy alias → neutral */
.p-stat-value, .cockpit-kpi-value {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  font-family: 'Inter', sans-serif;
  position: relative;
  overflow: hidden;
  display: inline-block;
  min-height: 1em;
}
/* Horizontal number flip: old flies out to the left, new enters from the right */
.num-fly{position:relative;display:inline-block;}
.num-fly .num-old{position:absolute;right:0;top:0;display:inline-block;animation:numOutR 0.9s cubic-bezier(.5,0,.2,1) forwards;}
.num-fly .num-new{display:inline-block;animation:numInR 0.9s cubic-bezier(.5,0,.2,1) forwards;}
@keyframes numOutR{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-180%);opacity:0}}
@keyframes numInR{0%{transform:translateX(180%);opacity:0}100%{transform:translateX(0);opacity:1}}
.p-stat-label, .cockpit-kpi-label {
  font-size: 12px;
  color: rgba(255,255,255,0.92);
  font-weight: 600;
}
/* Text-tone utility — the SAME shared tone vocabulary for stat NUMBERS shown as coloured text on a
   light card (funnel buttons, thin chips) rather than as a solid tile. Theme tokens only; -d variants
   stay legible on light (day) and dark (night) surfaces. neutral=teal · done=green · progress=amber ·
   attention=red · primary=gold. Pair with pStatTone() for value-reactive (attention) numbers. */
.p-stat-num.tone-neutral   { color: var(--p-teal-d); }
.p-stat-num.tone-done      { color: var(--p-green-d); }
.p-stat-num.tone-progress  { color: var(--p-amber-d); }
.p-stat-num.tone-attention { color: var(--p-red-d); }
.p-stat-num.tone-primary   { color: var(--p-gold-d); }
/* Inbox inside cockpit — shorter than full-page inbox to leave room for ribbon */
.ux-app.cockpit-inbox {
  height: calc(100vh - 320px);
  min-height: 440px;
}
.ux-compose-readonly {
  justify-content: center;
}
.ux-readonly-note {
  font-size: 12.5px;
  color: var(--p-text-3);
  font-weight: 600;
  padding: 4px 0;
}

/* Convert-to-ticket modal extras */
.cv-customer-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px 14px;
  background: #F2F8F5;
  border-radius: 10px;
  margin-bottom: 8px;
  font-size: 12.5px;
  color: var(--p-text);
}
.cv-customer-strip .cv-k { color: var(--p-text-3); font-weight: 600; }
.cv-input { width: 100%; }
.cv-textarea {
  width: 100%;
  border: 1.5px solid var(--p-border);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13.5px;
  resize: vertical;
}
.cv-textarea:focus {
  outline: none;
  border-color: var(--p-teal);
  box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.12);
}

/* ── Mic pulse animation ── */
@keyframes micPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}
.mic-recording { animation: micPulse 0.8s ease-in-out infinite; color: #DC2626 !important; }

/* ── Toggle distinctive colors ── */
/* نوع التذكرة */
/* نوع التذكرة — outlined */
.tog-btn.out-balagh  { background: rgba(15,110,86,.08)  !important; color: var(--p-emerald-d) !important; border-color: var(--p-emerald-d) !important; font-weight:700; }
.tog-btn.out-shakwa  { background: rgba(217,119,6,.08)  !important; color: #D97706 !important; border-color: #D97706 !important; font-weight:700; }
/* نوع المبلغ المصدر — outlined */
.tog-btn.out-b2c     { background: rgba(5,150,105,.08)  !important; color: #059669 !important; border-color: #059669 !important; font-weight:700; }
.tog-btn.out-b2b     { background: rgba(2,132,199,.08)  !important; color: #0284C7 !important; border-color: #0284C7 !important; font-weight:700; }
/* أهمية شركة — outlined */
.tog-btn.out-muhim   { background: rgba(220,38,38,.08)  !important; color: #DC2626 !important; border-color: #DC2626 !important; font-weight:700; }
.tog-btn.out-adi     { background: rgba(59,130,246,.08) !important; color: #3B82F6 !important; border-color: #3B82F6 !important; font-weight:700; }
/* keep solid on-* for priority in wazara (existing behavior) */
.tog-btn.on-balagh  { background: var(--p-emerald-d); color: white; border-color: var(--p-emerald-d); }
.tog-btn.on-shakwa  { background: #D97706; color: white; border-color: #D97706; }
.tog-btn.on-b2c     { background: #059669; color: white; border-color: #059669; }
.tog-btn.on-b2b     { background: #0284C7; color: white; border-color: #0284C7; }
.tog-btn.on-muhim   { background: #DC2626; color: white; border-color: #DC2626; }
.tog-btn.on-adi     { background: #64748B; color: white; border-color: #64748B; }

.val-balloon {
  position: absolute; z-index: 800;
  background: #fef9c3; border: 1.5px solid #ca8a04;
  color: #78350f; font-size: 12px; font-weight: 600;
  padding: 6px 10px; border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  pointer-events: none; direction: rtl;
  max-width: 280px; white-space: normal; line-height: 1.5;
}
.val-balloon::after {
  content: ''; position: absolute; bottom: -7px; right: 16px;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-top: 7px solid #ca8a04;
}
.inp.val-err {
  border-color: #ca8a04 !important;
  box-shadow: 0 0 0 3px rgba(202,138,4,.2) !important;
  background: rgba(254,249,195,.3) !important;
}
.fs-field { position: relative; }

/* ── WAZ cat search-select (tracker ss pattern) ── */
.ss-wrap { position: relative; }
.ss-inp {
  width: 100%; padding: 8px 12px;
  background: var(--p-surface); border: 1.5px solid var(--p-border);
  border-radius: var(--r-field); font-size: 13px; color: var(--p-text);
  font-family: inherit; cursor: pointer; box-sizing: border-box;
}
.ss-inp:focus { border-color: var(--p-teal); box-shadow: 0 0 0 3px rgba(15,110,86,.12); outline: none; }
.ss-drop {
  display: none; position: absolute; top: calc(100% + 3px); right: 0; left: 0;
  background: var(--p-surface); border: 1.5px solid var(--p-border);
  border-radius: var(--r-field); box-shadow: 0 4px 16px rgba(0,0,0,.12);
  z-index: 900; max-height: 240px; overflow-y: auto;
}
.ss-drop.open { display: block; }
.ss-search { padding: 8px; border-bottom: 1px solid var(--p-border); position: sticky; top: 0; background: var(--p-surface); }
.ss-search input { width: 100%; padding: 6px 10px; background: var(--p-bg); border: 1px solid var(--p-border); border-radius: var(--r-field); font-size: 12px; color: var(--p-text); box-sizing: border-box; }
.ss-item { padding: 8px 13px; cursor: pointer; font-size: 13px; color: var(--p-text); }
.ss-item:hover { background: var(--p-band-1); color: var(--p-teal); }
.ss-item.sel { background: var(--p-band-1); color: var(--p-teal); font-weight: 700; }
.ss-add-btn { padding: 8px 13px; cursor: pointer; font-size: 12px; color: var(--p-teal); font-weight: 600; border-top: 1px solid var(--p-border); }
.ss-add-btn:hover { background: var(--p-band-1); }

/* ── Outlined toggle style ── */
.tog-btn.out-active {
  background: transparent !important;
  font-weight: 700;
}
/* نوع التذكرة */
.tog-btn.out-balagh  { border-color: var(--p-emerald-d) !important; color: var(--p-emerald-d) !important; background: rgba(15,110,86,.08) !important; }
.tog-btn.out-shakwa  { border-color: #D97706 !important; color: #D97706 !important; background: rgba(217,119,6,.08) !important; }
/* نوع المبلغ المصدر */
.tog-btn.out-b2c     { border-color: #059669 !important; color: #059669 !important; background: rgba(5,150,105,.08) !important; }
.tog-btn.out-b2b     { border-color: #0284C7 !important; color: #0284C7 !important; background: rgba(2,132,199,.08) !important; }
/* أهمية - عادي */
.tog-btn.out-adi     { border-color: #3B82F6 !important; color: #3B82F6 !important; background: rgba(59,130,246,.08) !important; }
/* أهمية - مهم / مرتفعة */
.tog-btn.out-muhim   { border-color: #DC2626 !important; color: #DC2626 !important; background: rgba(220,38,38,.08) !important; }

/* ── Time hint tooltip (tracker-ported) ── */
.time-hint {
  position: fixed; z-index: 9999;
  background: rgba(15,23,42,.92); color: #e2e8f0;
  font-family: 'Tajawal', sans-serif; font-size: 12px; font-weight: 500;
  padding: 5px 12px; border-radius: 6px;
  pointer-events: none; direction: rtl; white-space: nowrap;
  opacity: 0; transition: opacity .2s;
}
.time-hint.show { opacity: 1; }
/* B027 PART 4: the entire old tickets quick-filter bar CSS (.tf-group/.tt-frow/.tf-sep/.tf-btn/#tfb-*/
   .tf-label/.tf-cnt/.tf-*active/.tf-act-clear/.tf-inp/.tf-sel) was REMOVED — replaced by the smart bar
   (.ck-smartbar) in B025 PART F. No markup uses these classes anymore. */

/* Pulse strip above charts wall */
#dash-pulse-strip .chart-live-pulse {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
}
/* ── Reusable modal system (design-token based) ── */
.p360-modal-backdrop {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(20, 51, 79, 0.45);
  display: none;
  align-items: center; justify-content: center;
  direction: rtl;
}
.p360-modal-backdrop.open { display: flex; }
.p360-modal {
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-modal);
  width: 92%;
  display: flex;
  flex-direction: column;
  max-height: 88vh;
}
.p360-modal-sm { max-width: 460px; }
.p360-modal-md { max-width: 540px; }
.p360-modal-lg { max-width: 800px; }
.p360-modal-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--p-border);
}
.p360-modal-title {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--p-text);
  display: flex; align-items: center; gap: 8px;
}
.p360-modal-body {
  padding: 18px 22px;
  overflow-y: auto;
  flex: 1;
}
.p360-modal-footer {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 14px 22px;
  border-top: 1px solid var(--p-border);
}
.p360-modal-close {
  background: none; border: none; cursor: pointer;
  font-size: 18px; color: var(--p-text-3);
  padding: 2px 6px; border-radius: var(--r-sm);
}
.p360-modal-close:hover { background: var(--p-band-1); color: var(--p-text); }
.p360-field { margin-bottom: 14px; }
.p360-field-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--p-text-2);
  margin-bottom: 5px;
}
.p360-input, .p360-select, .p360-textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--p-border);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--p-text);
  background: var(--p-surface);
  box-sizing: border-box;
}
.p360-input:focus, .p360-select:focus, .p360-textarea:focus {
  outline: none; border-color: var(--p-teal);
  box-shadow: 0 0 0 3px var(--p-teal-bg);
}
.p360-textarea { resize: none; }
.p360-btn {
  padding: 9px 18px;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--p-border);
  background: var(--p-surface);
  color: var(--p-text-2);
  transition: all 0.15s;
}
.p360-btn:hover { background: var(--p-band-1); }
.p360-btn-primary { background: var(--p-teal); border-color: var(--p-teal); color: #fff; }
.p360-btn-primary:hover { background: var(--p-teal-d); }
.p360-btn-danger  { background: var(--p-red);  border-color: var(--p-red);  color: #fff; }
.p360-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* ════════════════════════════════════════════════════
   RESTORED — Settings, Messaging, Sticky Notes, Rules, Edit
   (token-based, design-system compliant)
   ════════════════════════════════════════════════════ */

/* ── Settings cards ── */
.settings-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}
.settings-card {
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  padding: 14px 16px;
}
.settings-card-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--p-text);
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 6px;
}
.inp-sm {
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--p-border);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: var(--fs-sm);
  background: var(--p-surface);
  color: var(--p-text);
}
.inp-sm:focus { outline: none; border-color: var(--p-teal); }

/* ── Settings toggle switch ── */
.s-toggle {
  position: relative;
  min-width: 60px;
  width: auto;
  height: 30px;
  border-radius: var(--r-pill);
  border: none;
  background: #9AA8A0;
  cursor: pointer;
  transition: all .2s;
  flex-shrink: 0;
  font-family: inherit;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  padding-block: 0;
  padding-inline: 26px 10px;
  text-align: end;
}
.s-toggle::after {
  content: '';
  position: absolute;
  top: 5px;
  inset-inline-start: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.32);
  transition: all .2s;
}
.s-toggle.s-toggle-on {
  background: #1FA06B;
  padding-inline: 10px 26px;
  text-align: start;
}
.s-toggle.s-toggle-on::after {
  inset-inline-start: auto;
  inset-inline-end: 3px;
}

/* ── Small outline button ── */
.btn-sm-outline {
  padding: 6px 12px;
  border: 1px solid var(--p-border);
  border-radius: var(--r-sm);
  background: var(--p-surface);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--p-text-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all .15s;
}
.btn-sm-outline:hover { border-color: var(--p-teal); color: var(--p-teal); }

/* ── Rules center ── */
.rule-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--p-border);
  border-radius: var(--r-sm);
  background: var(--p-band-1);
}
.rule-row-body { flex: 1; min-width: 0; }
.rule-row-title { font-size: var(--fs-sm); font-weight: 700; color: var(--p-text); margin-bottom: 3px; }
.rule-row-desc { font-size: var(--fs-xs); color: var(--p-text-2); line-height: 1.6; }
.rule-row-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* ── Internal messaging panel ── */
.msg-panel {
  position: fixed;
  bottom: 16px; left: 16px;
  width: 340px;
  max-height: 480px;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-modal);
  flex-direction: column;
  z-index: 8000;
  direction: rtl;
}
.msg-panel-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--p-border);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--p-text);
  cursor: pointer;
}
.msg-panel-tabs { display: flex; border-bottom: 1px solid var(--p-border); }
.msg-panel-tab {
  flex: 1;
  padding: 9px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
  color: var(--p-text-2);
}
.msg-panel-tab.on {
  border-bottom-color: var(--p-teal);
  color: var(--p-teal);
  font-weight: 700;
}
.msg-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  min-height: 130px;
  max-height: 260px;
}
.msg-panel-footer {
  padding: 10px 12px;
  border-top: 1px solid var(--p-border);
  display: flex;
  gap: 6px;
  align-items: flex-end;
}
.msg-bubble {
  padding: 8px 11px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  margin-bottom: 6px;
  max-width: 90%;
  line-height: 1.5;
}
.msg-bubble.sent { background: var(--p-teal-bg); color: var(--p-teal-d); margin-right: auto; }
.msg-bubble.recv { background: var(--p-band-1); color: var(--p-text); margin-left: auto; }
.msg-bubble-meta { font-size: var(--fs-xs); color: var(--p-text-3); margin-top: 3px; }
/* F3 read receipt on my sent internal messages: ✓ أُرسلت (grey) → ✓✓ قُرئت (emerald) */
.msg-receipt { font-size: 10px; font-weight: 700; color: var(--p-text-3); margin-top: 4px; }
.msg-receipt.read { color: var(--p-emerald, var(--p-green-d)); }
/* PART D: internal-message thread list */
.im-newbtn { padding:9px 12px; margin:8px; border:1px dashed var(--p-teal); border-radius:var(--r-sm); color:var(--p-teal-d); font-size:12px; font-weight:700; text-align:center; cursor:pointer; }
.im-newbtn:hover { background:var(--p-teal-bg); }
.im-thread { padding:10px 12px; border-bottom:1px solid var(--p-border); cursor:pointer; }
.im-thread:hover { background:var(--p-band-1); }
.im-thread-name { font-size:13px; font-weight:700; color:var(--p-text); display:flex; align-items:center; gap:6px; }
.im-thread-last { font-size:11px; color:var(--p-text-3); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.im-unread { background:var(--p-red); color:#fff; border-radius:8px; padding:0 5px; font-size:9px; font-weight:700; }
/* B051 Stage 2 — peer-to-peer messaging: tabs (inbox/sent/new), message rows, receipts, reach picker */
.im-tabs { display:flex; gap:6px; padding:8px 10px; border-bottom:1px solid var(--p-border); position:sticky; top:0; background:var(--p-surface); z-index:1; }
.im-tab { flex:0 0 auto; padding:5px 11px; border:1px solid var(--p-border); border-radius:var(--r-sm); background:var(--p-band-1); color:var(--p-text-2); font-size:12px; font-weight:700; cursor:pointer; }
.im-tab.on { background:linear-gradient(180deg,var(--p-green),var(--p-green-d)); color:#fff; border-color:var(--p-green-d); }
.im-tab-new { margin-inline-start:auto; color:var(--p-gold-d, #9C7A08); }
.im-empty { text-align:center; padding:22px; color:var(--p-text-3); font-size:12px; }
.im-msg { padding:9px 12px; border-bottom:1px solid var(--p-border); cursor:default; }
.im-msg[onclick] { cursor:pointer; }
.im-msg:hover { background:var(--p-band-1); }
.im-msg-unread { background:var(--p-band-2); }
.im-msg-hd { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--p-text); }
.im-msg-hd b { font-weight:800; }
.im-dot { width:8px; height:8px; border-radius:50%; background:var(--p-red); flex:0 0 auto; }
.im-msg-time { margin-inline-start:auto; font-size:10px; color:var(--p-text-3); }
.im-msg-body { font-size:12.5px; color:var(--p-text); margin-top:3px; line-height:1.6; white-space:pre-wrap; word-break:break-word; }
.im-ann { background:var(--p-gold, #C5970A); color:#fff; border-radius:var(--r-sm); padding:0 6px; font-size:9px; font-weight:800; }
.im-receipt { font-size:11px; font-weight:700; color:var(--p-amber, #f59e0b); }
.im-receipt.all { color:var(--p-green); }
.im-drill { margin-top:5px; }
.im-drill > summary { font-size:11px; color:var(--p-text-2); cursor:pointer; }
.im-recip { display:flex; justify-content:space-between; gap:10px; font-size:11.5px; padding:3px 0 3px 14px; color:var(--p-text); }
.im-r-read { color:var(--p-green); font-weight:700; }
.im-r-unread { color:var(--p-text-3); }
.im-pick-lbl { font-size:11.5px; font-weight:800; color:var(--p-green-d); padding:8px 12px 4px; }
.im-pick { max-height:220px; overflow-y:auto; border:1px solid var(--p-border); border-radius:var(--r-sm); margin:0 12px; }
.im-pick-row { display:flex; align-items:center; gap:7px; padding:6px 9px; font-size:12px; color:var(--p-text); border-bottom:1px solid var(--p-border); cursor:pointer; }
.im-pick-row:last-child { border-bottom:none; }
.im-pick-row:hover { background:var(--p-band-1); }
.im-pick-team { margin-inline-start:auto; font-size:9.5px; color:var(--p-text-3); }
.im-ann-row { display:flex; align-items:center; gap:7px; padding:8px 12px 0; font-size:12px; font-weight:700; color:var(--p-text); }
.im-compose-ta { width:calc(100% - 24px); margin:8px 12px 0; resize:none; height:66px; padding:6px 8px; border:1px solid var(--p-border); border-radius:var(--r-sm); font-family:inherit; font-size:12px; }
.im-send-btn { margin:10px 12px 12px; width:calc(100% - 24px); }
/* PART E: cockpit alert panel + items */
.ck-alert-panel { position:absolute; top:calc(100% + 6px); inset-inline-end:0; width:320px; max-height:60vh; overflow-y:auto; background:var(--p-surface); border:1px solid var(--p-border); border-radius:var(--r-md); box-shadow:var(--sh-modal); z-index:8050; direction:rtl; }
.ck-alert-panel-hd { padding:10px 12px; font-weight:700; font-size:13px; border-bottom:1px solid var(--p-border); color:var(--p-text); }
.ck-alert-item { display:flex; gap:8px; align-items:flex-start; padding:9px 12px; border-bottom:1px solid var(--p-border); cursor:pointer; font-size:12px; }
.ck-alert-item:hover { background:var(--p-band-1); }
.ck-alert-num { font-weight:700; color:var(--p-text-2); white-space:nowrap; }
.ck-alert-msg { color:var(--p-text); }
.ck-alert-red { border-inline-start:3px solid var(--p-red); }
.ck-alert-amber { border-inline-start:3px solid var(--p-amber, #f59e0b); }
.ck-alert-warn { border-inline-start:3px solid var(--p-amber, #f59e0b); }
.ck-alert-plain { border-inline-start:3px solid var(--p-border); }
/* B080 DECISION 1 — alerts KANBAN MODAL (1:1 port of the tracker panel; platform --p-* tokens, day/night). */
/* B083/B085 — unified notifications-center popup (ONE bell). Built from the FINAL mock, themed via --p-* tokens. */
.p360b-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:flex-start; justify-content:center; padding:48px 24px 24px; }
.p360b-pop { display:flex; flex-direction:column; width:min(92vw,880px); max-height:88vh; background:var(--p-surface); border:1px solid var(--p-border); border-radius:var(--r-md,12px); box-shadow:var(--sh-modal); overflow:hidden; }
.p360b-hd { color:#fff; padding:15px 22px; flex:0 0 auto; }
.p360b-titlebar { display:flex; align-items:center; gap:8px; font-weight:800; font-size:14px; opacity:.96; margin-bottom:8px; }
.p360b-x { margin-inline-start:auto; cursor:pointer; opacity:.85; font-size:16px; }
.p360b-greet { font-weight:800; font-size:19px; }
.p360b-day { font-size:12px; opacity:.82; margin-top:1px; }
.p360b-sit { font-weight:700; font-size:14px; margin-top:8px; }
.p360b-team { font-size:12px; opacity:.85; margin-top:3px; }
.p360b-empf { margin-top:10px; }
.p360b-chip { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); border-radius:18px; padding:5px 12px; cursor:pointer; font-weight:700; }
.p360b-qhead { display:flex; align-items:center; gap:8px; padding:12px 20px; cursor:pointer; font-weight:800; font-size:12.5px; color:var(--p-text); user-select:none; }
.p360b-qhead:hover { background:var(--p-band-1); }
.p360b-qn { background:var(--p-red); color:#fff; font-size:11px; font-weight:800; border-radius:50%; width:22px; height:22px; display:flex; align-items:center; justify-content:center; }
.p360b-chev { margin-inline-start:auto; transition:transform .22s; color:var(--p-text-3); }
.p360b-qsec:not(.open) .p360b-chev { transform:rotate(-90deg); }
.p360b-qsec:not(.open) .p360b-qbody { display:none; }
.p360b-cols { display:flex; gap:11px; padding:2px 18px 14px; overflow-x:auto; flex:0 0 auto; }
.p360b-col { flex:0 0 230px; background:var(--p-band-1); border:1px solid var(--p-border); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.p360b-col-hd { display:flex; align-items:center; gap:7px; padding:9px 11px; font-weight:800; font-size:12px; color:var(--p-text); }
.p360b-col-n { margin-inline-start:auto; background:var(--p-gold); color:#3a2a00; font-weight:800; font-size:11px; border-radius:50%; width:20px; height:20px; display:flex; align-items:center; justify-content:center; }
.p360b-col-body { overflow-y:auto; max-height:368px; }   /* ≈ first 8 cards then scroll */
.p360b-tk { padding:7px 11px; border-top:1px solid var(--p-border-2); cursor:pointer; }
.p360b-tk:hover { background:var(--p-surface); }
.p360b-tk-r1 { display:flex; justify-content:space-between; gap:8px; }
.p360b-tk-num { font-weight:800; font-size:11.5px; color:var(--p-text); white-space:nowrap; }
.p360b-tk-who { font-size:10.5px; color:var(--p-text-3); white-space:nowrap; }
.p360b-tk-msg { font-size:11.5px; color:var(--p-text-2); line-height:1.5; margin-top:2px; }   /* FULL text, wraps */
.p360b-empty, .p360b-empty2 { padding:18px; text-align:center; color:var(--p-text-3); font-size:13px; }
.p360b-btabs { display:flex; gap:8px; padding:9px 18px; border-top:1px solid var(--p-border); background:var(--p-band-1); flex:0 0 auto; flex-wrap:wrap; }
.p360b-btab { display:inline-flex; align-items:center; gap:7px; background:var(--p-surface); border:1px solid var(--p-border); border-radius:20px; padding:7px 14px; font-size:12.5px; font-weight:800; cursor:pointer; color:var(--p-text-2); }
.p360b-btab b { background:var(--p-gold); color:#3a2a00; font-size:11px; border-radius:50%; width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; }
.p360b-btab.on { background:var(--p-navy,#284B82); color:#fff; border-color:var(--p-navy,#284B82); }
.p360b-panel { border-top:1px solid var(--p-border); max-height:240px; overflow-y:auto; flex:0 0 auto; }
.p360b-nlist { padding:2px 12px 8px; }
.p360b-nrow { padding:9px 8px; border-top:1px solid var(--p-border-2); cursor:pointer; }
.p360b-nlist .p360b-nrow:first-child { border-top:none; }
.p360b-nrow:hover { background:var(--p-band-1); }
.p360b-nrow.unread { background:var(--p-band-1); }
.p360b-nt { font-size:12.5px; color:var(--p-text); line-height:1.5; }
.p360b-ns { font-size:11px; color:var(--p-text-3); margin-top:1px; }
.p360b-tag { font-size:10px; font-weight:800; padding:1px 7px; border-radius:6px; margin-inline-start:4px; background:color-mix(in srgb,var(--p-red) 14%,transparent); color:var(--p-red); }
.p360b-thr { display:flex; gap:10px; align-items:center; padding:9px 8px; border-top:1px solid var(--p-border-2); cursor:pointer; }
.p360b-nlist .p360b-thr:first-child { border-top:none; }
.p360b-thr:hover { background:var(--p-band-1); }
.p360b-thr-who { font-weight:700; font-size:13px; color:var(--p-text); }
.p360b-thr-last { font-size:11.5px; color:var(--p-text-3); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:600px; }
.p360b-thr-un { margin-inline-start:auto; color:var(--p-red); font-size:20px; line-height:1; }
.p360b-ft { display:flex; justify-content:space-between; align-items:center; padding:9px 18px; border-top:1px solid var(--p-border); background:var(--p-band-1); flex:0 0 auto; }
.p360b-ft .p360b-badge { font-size:12px; color:var(--p-text-2); }
.p360b-ft button { background:var(--p-surface); border:1px solid var(--p-border); border-radius:9px; padding:7px 14px; font-size:12.5px; cursor:pointer; color:var(--p-text-2); font-weight:700; }
.ck-alerts-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; padding:24px; }
.ck-alerts-modal { position:relative; display:flex; flex-direction:column; width:auto; max-width:min(72vw,1280px); min-width:min(92vw,560px); max-height:85vh; background:var(--p-surface); border:1px solid var(--p-border); border-radius:var(--r-md); box-shadow:var(--sh-modal); overflow:hidden; }
.ck-alerts-close { position:absolute; inset-inline-end:10px; top:10px; background:transparent; border:none; color:#fff; font-size:16px; cursor:pointer; line-height:1; padding:4px 6px; z-index:2; }
.ck-alerts-head { flex-shrink:0; padding:14px 18px 12px; background:linear-gradient(180deg, var(--p-green), var(--p-green-d)); color:#fff; }
[data-theme="night"] .ck-alerts-head { background:linear-gradient(180deg, var(--p-emerald), var(--p-emerald-d)); }
.ck-alerts-greet { font-size:17px; font-weight:700; margin-bottom:4px; }
.ck-alerts-sit { font-size:13px; font-weight:600; line-height:1.5; opacity:.95; }
.ck-alerts-team { font-size:11px; margin-top:5px; opacity:.85; }
.ck-alerts-cols { flex:1; min-height:0; padding:14px; display:flex; gap:10px; align-items:stretch; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; }
.ck-alerts-col { flex:0 0 244px; min-width:244px; max-width:288px; border:1px solid var(--p-border); border-radius:8px; padding:10px; display:flex; flex-direction:column; min-height:0; max-height:100%; }
.ck-alerts-col-hd { flex-shrink:0; display:flex; align-items:flex-start; justify-content:space-between; gap:6px; padding-bottom:8px; margin-bottom:8px; border-bottom:1px solid var(--p-border); }
.ck-alerts-col-ttl { flex:1; font-size:12px; font-weight:700; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word; }
.ck-alerts-col-n { flex-shrink:0; font-size:11px; font-weight:700; color:#fff; padding:2px 8px; border-radius:10px; }
.ck-alerts-col-body { flex:1; min-height:0; overflow-y:auto; }
.ck-alerts-card { background:var(--p-surface); border:1px solid var(--p-border); border-radius:6px; padding:8px 10px; margin-bottom:6px; cursor:pointer; transition:transform .15s, box-shadow .15s; }
.ck-alerts-card:hover { transform:translateY(-1px); box-shadow:0 4px 10px rgba(0,0,0,.08); }
.ck-alerts-card-top { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.ck-alerts-card-num { font-size:12px; font-weight:700; color:var(--p-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ck-alerts-card-who { font-size:10px; color:var(--p-text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:80px; }
.ck-alerts-card-msg { font-size:11px; color:var(--p-text-2); line-height:1.4; margin-top:4px; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ck-alerts-card:hover .ck-alerts-card-msg { -webkit-line-clamp:unset; line-clamp:unset; overflow:visible; }
.ck-alerts-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:40px 20px; color:var(--p-text-2); font-size:14px; }
.ck-alerts-empty-emoji { font-size:44px; }
.alert-rule-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0; font-size:12px; color:var(--p-text); border-bottom:1px solid var(--p-border); }
.alert-rule-row:last-child { border-bottom:none; }
/* a rule's threshold (٧٠٪ / ٣٦٠) merged UNDER its own rule row — indented, reads as one unit with the rule above it */
.alert-rule-sub { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:2px 0 8px; padding-inline-start:18px; font-size:11px; color:var(--p-text-3); border-bottom:1px solid var(--p-border); }
.alert-rule-sub:last-child { border-bottom:none; }
.alert-rule-row:has(+ .alert-rule-sub) { border-bottom:none; }
/* PART H — HELP-TIPS TRAINING SYSTEM (B086). Ported 1:1 from the tracker (Docs/Tracker_Tooltips_1to1_Source.md),
   re-skinned onto the --p-* theme tokens. TWO systems:
     System A = #p360-rowtip  — full-record row tooltip on the records table (.ti/.tl/.tv).
     System B = .help-tip-pop — two-tier help popover: a bold SHORT line + a gold «تفاصيل ▼» link revealing a LONG description.
   This REPLACES the old nav-only stub (.help-tip-badge / .help-tip-bubble — removed). */
#help-tips-btn.on { background:var(--p-teal); color:#fff; }
/* ── System A — full-row tooltip (globalTtp port) ── */
#p360-rowtip { display:none; position:fixed; background:var(--p-surface); border:1px solid var(--p-border-2);
  border-radius:4px; padding:12px 14px; z-index:9000; min-width:320px; max-width:480px;   /* B086: 4px corner (theme rule wins over tracker 10px) */
  box-shadow:var(--sh-modal); font-family:"Tajawal",sans-serif; font-size:12.24px; pointer-events:none; }   /* B086: Tajawal stack · Sajed accepted, then −15% (14.4→12.24px) */
html[data-theme="day"] #p360-rowtip { background:#fff; border-color:var(--p-border); }
/* B086 — classes RENAMED off the tracker's .ti/.tl/.tv: `.ti` is the platform's Tabler-Icons base class
   (font-family:tabler-icons) → the tooltip's digits/identifiers rendered as icon glyphs and vanished.
   Namespaced (.p360rt-*) + font-family pinned to Tajawal so nothing else can hijack it. */
#p360-rowtip .p360rt-row { display:flex; gap:8px; margin-bottom:5px; align-items:flex-start; font-family:"Tajawal",sans-serif; }
#p360-rowtip .p360rt-row:last-child { margin-bottom:0; }
#p360-rowtip .p360rt-l { color:var(--p-text-2); min-width:150px; max-width:150px; flex-shrink:0; font-weight:600; white-space:normal; word-break:break-word; line-height:1.35; font-family:"Tajawal",sans-serif; }
#p360-rowtip .p360rt-v { color:var(--p-text); font-weight:500; word-break:break-word; white-space:normal; line-height:1.4; font-family:"Tajawal",sans-serif; }
#p360-rowtip .p360rt-v span { font-family:"Tajawal",sans-serif; }   /* dir=ltr number/date spans inherit Tajawal too */
/* ── System B — help popover (two-tier short / «تفاصيل» / long) ── */
.help-tip-pop { position:absolute; z-index:11050; max-width:320px; background:var(--p-surface); color:var(--p-text);
  border:1px solid var(--p-border-2); border-radius:8px; padding:8px 12px; font-family:"Tajawal","Inter",sans-serif; font-size:14.4px;
  line-height:1.6; box-shadow:var(--sh-modal); pointer-events:auto; text-align:start; }   /* B086: 8px corner (block §3) · Tajawal · +20% per Sajed (was 12px) */
html[data-theme="day"] .help-tip-pop { background:#fffaee; border-color:#f0e6cc; color:#3a2e1a; }
html[data-theme="day"] .help-tip-pop .help-tip-short { color:#2a2010; }
html[data-theme="day"] .help-tip-pop .help-tip-long { color:#3a2e1a; border-top-color:#e3d2a5; }
.help-tip-pop .help-tip-short { font-weight:600; color:var(--p-text); }
.help-tip-pop .help-tip-details-link { margin-top:6px; font-size:13.2px; color:var(--p-gold-d); cursor:pointer; font-weight:700; }   /* B086: +20% per Sajed (was 11px) */
.help-tip-pop .help-tip-details-link:hover { color:var(--p-gold); }
.help-tip-pop .help-tip-long { display:none; margin-top:6px; padding-top:6px; border-top:1px dashed var(--p-border); font-size:13.2px; color:var(--p-text); line-height:1.7; }   /* B086: +20% per Sajed (was 11px) */

/* ── Sticky notes ── */
/* B033 STICKY NOTES — the note look is copied EXACTLY from the tracker .sn-float (mock:
   Pathway360_StickyNotes_OnScreen_Mock.html). The ONE deviation: time/date moved to TOP-LEFT.
   position:fixed + our z-context (above the cockpit) kept; everything visual matches the mock. */
.sn-float {
  box-sizing: border-box;
  position: fixed; width: 200px; height: 200px;
  border-radius: 4px 4px 4px 0;
  padding: 10px 10px 28px 10px;
  box-shadow: 3px 3px 12px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.15);
  cursor: grab; z-index: 7000; overflow: hidden;
  user-select: none;
  transition: width .2s, height .2s, padding .2s;
}
/* expand on hover to fit full text (disabled while dragging) */
.sn-float:not(.sn-dragging):hover { width: 360px; height: auto; min-height: 200px; max-height: 80vh; z-index: 7050; overflow: visible; }
.sn-float:not(.sn-dragging):hover .sn-text { max-height: none; }
.sn-float::after {
  content: ''; position: absolute; bottom: 0; right: 0; width: 28px; height: 28px;
  background: linear-gradient(225deg, rgba(0,0,0,.22) 45%, transparent 45%),
              linear-gradient(225deg, rgba(255,255,255,.12) 45%, rgba(0,0,0,.08) 45%);
  border-radius: 4px 0 0 0;
}
.sn-float:active { cursor: grabbing; }
.sn-float.sn-dragging { z-index: 9999; box-shadow: 12px 12px 32px rgba(0,0,0,.5); }
.sn-pin { position: absolute; top: 6px; left: 8px; font-size: 15px; cursor: pointer; z-index: 2; line-height: 1; transition: transform .2s; }
.sn-pin:hover { transform: scale(1.3) rotate(-20deg); }
.sn-dismiss { position: absolute; top: 5px; right: 8px; font-size: 13px; cursor: pointer; z-index: 2; line-height: 1; color: rgba(0,0,0,.35); background: none; border: none; padding: 0; }
.sn-dismiss:hover { color: rgba(0,0,0,.7); }
.sn-from { font-size: 10px; font-weight: 700; color: rgba(0,0,0,.4); text-align: right; margin-bottom: 5px; padding-right: 2px; margin-top: 2px; }
.sn-text { font-size: 13px; font-weight: 500; color: rgba(0,0,0,.72); line-height: 1.6; word-break: break-word; overflow: hidden; max-height: 120px; text-align: right; white-space: pre-wrap; }
/* time/date at TOP-LEFT (the one deviation from the tracker), offset past the pin */
.sn-time { position: absolute; top: 7px; left: 30px; font-size: 9px; font-weight: 700; color: rgba(0,0,0,.45); }
.sn-c-yellow { background: #fef9c3; }
.sn-c-green  { background: #dcfce7; }
.sn-c-blue   { background: #dbeafe; }
.sn-c-pink   { background: #fce7f3; }
.sn-c-purple { background: #ede9fe; }
.sn-c-orange { background: #ffedd5; }
.sn-composer {
  position: fixed;
  bottom: 80px; left: 16px;
  width: 270px;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-modal);
  padding: 16px;
  z-index: 8001;
  direction: rtl;
}
.sn-color-row { display: flex; gap: 7px; margin-bottom: 10px; }
.sn-color-btn {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
}
.sn-color-btn.on { border-color: var(--p-text); }
/* PART C: audience segmented control, archive-to-side rail, directed badge */
.sn-seg-btn { flex:1; padding:5px 8px; border:1px solid var(--p-border); background:var(--p-surface); color:var(--p-text); border-radius:var(--r-sm); font-family:inherit; font-size:11px; cursor:pointer; }
.sn-seg-btn.on { background:var(--p-teal); color:#fff; border-color:var(--p-teal); }
/* B033 sticky SEND screen (mock Pathway360_StickyNotes_Send_Mock.html) + the SHARED recipient dept-tree (also F3) */
.sn-seg-lbl { font-size:11.5px; font-weight:800; color:var(--p-green-d); margin-bottom:6px; }
.sn-seg-btn .sn-seg-e { display:block; font-size:10px; font-weight:500; color:var(--p-text-3); margin-top:3px; }
.sn-seg-btn.on .sn-seg-e { color:#fff; }
.sn-admin-note { font-size:11px; color:var(--p-text-2); background:var(--p-red-bg); border:1px solid var(--p-red); border-radius:6px; padding:7px 10px; margin-bottom:10px; }
.sn-admin-note b { color:var(--p-red-d); }
.rcp-tree { border:1px solid var(--p-border-2); border-radius:7px; background:var(--p-surface); max-height:240px; overflow-y:auto; }
.rcp-dep { display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:800; color:var(--p-green-d); background:var(--p-band-1); padding:9px 11px; cursor:pointer; border-bottom:1px solid var(--p-border); }
.rcp-chev { margin-inline-start:auto; font-size:11px; color:var(--p-text-3); }
.rcp-emps { display:none; }
.rcp-emps.open { display:block; }
.rcp-emps label { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--p-text-2); padding:7px 11px; padding-inline-start:32px; cursor:pointer; border-bottom:1px solid var(--p-border); }
.rcp-tree input { accent-color:var(--p-green); width:15px; height:15px; }
.rcp-all { display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:800; color:var(--p-gold-d); background:var(--p-gold-bg); padding:9px 11px; cursor:pointer; }
.sn-archive { position:absolute; top:5px; right:26px; font-size:12px; cursor:pointer; opacity:.5; }
.sn-archive:hover { opacity:1; }
.sn-dir-badge { color:var(--p-red); font-size:10px; vertical-align:middle; }
.sn-rail { position:fixed; bottom:80px; right:0; width:120px; max-height:50vh; overflow-y:auto; background:var(--p-surface); border:1px solid var(--p-border); border-right:none; border-radius:var(--r-md) 0 0 var(--r-md); box-shadow:var(--sh-modal); padding:8px; z-index:7001; direction:rtl; }
.sn-rail-h { font-size:11px; font-weight:700; color:var(--p-text-muted); margin-bottom:6px; }
.sn-rail-item { font-size:11px; padding:5px 6px; border-radius:var(--r-sm); margin-bottom:5px; cursor:pointer; color:rgba(0,0,0,.75); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sn-rail-item:hover { filter:brightness(.96); }

/* ── Category verify report ── */
.catverify-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.catverify-table th {
  background: linear-gradient(180deg, var(--p-teal), var(--p-teal-d));
  color: #fff; padding: 8px 12px; font-weight: 700;
}
.catverify-table td { padding: 8px 12px; border-bottom: 1px solid var(--p-border); }
.catverify-table tr:last-child td { border-bottom: none; }
.catverify-pct { font-weight: 700; }
.catverify-pct.good { color: var(--p-green); }
.catverify-pct.mid  { color: var(--p-amber); }
.catverify-pct.bad  { color: var(--p-red); }



  .login-gate-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 51, 79, 0.42);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    /* B065 item 1: the login gate must sit ABOVE full-screen overlays (field shell z9000, chat z9300) so a
       logout always reveals the phone-login screen — was z2000 (behind the field shell). Below the shared
       p360 dialogs (z10000), which never coexist with a logged-out gate. */
    z-index: 9995;
  }
  .login-gate-card {
    width: min(520px, calc(100% - 32px));
    background: var(--p-surface);
    border: 1px solid rgba(20, 51, 79, 0.12);
    border-radius: 24px;
    box-shadow: 0 18px 48px rgba(15, 110, 86, 0.18);
    padding: 32px 28px;
    /* B003 FIX D: direction is set by the dir attribute via applyGateDir() so the gate flips RTL<->LTR per language. Do NOT hardcode direction here — it silently overrode dir="ltr" and kept the English login RTL. */
  }
  .login-gate-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--p-navy);
    margin-bottom: 8px;
  }
  .login-gate-subtitle {
    font-size: 14px;
    color: var(--p-text-3);
    margin-bottom: 28px;
    line-height: 1.6;
  }
  .login-gate-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
  }
  .login-gate-field label {
    font-size: 13px;
    font-weight: 700;
    color: var(--p-text-2);
  }
  .login-gate-field input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--p-border);
    border-radius: 14px;
    /* B066 item 2: ≥16px so iOS Safari doesn't auto-zoom on focus (was 15px). */
    font-size: 16px;
    color: var(--p-text);
    outline: none;
    background: var(--p-band-1);
    font-family: inherit;
    direction: ltr;
  }
  .login-gate-btn {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: none;
    background: var(--p-navy);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .login-gate-btn:hover {
    background: var(--p-navy-d);
  }
  /* B069 item 1 — OTP «back / change number» (ghost, below the enter button) */
  .login-gate-back {
    width: 100%;
    margin-top: 8px;
    padding: 9px 14px;
    border-radius: 14px;
    border: 1px solid var(--p-border);
    background: transparent;
    color: var(--p-text-2);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
  }
  .login-gate-back:hover { background: var(--p-band-1); }
  .login-gate-note {
    font-size: 13px;
    color: var(--p-text-3);
    margin-top: -8px;
  }
  .login-gate-error {
    color: var(--p-red);
    font-size: 13px;
    min-height: 18px;
    margin-top: 8px;
    font-weight: 600;
  }
  .login-gate-step { display: none; }
  .login-gate-step.active { display: block; }
  /* Login method switch (phone+OTP vs email+password) — theme tokens, logical direction. */
  .login-method-switch {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    background: var(--p-band-1);
    border: 1px solid var(--p-border);
    border-radius: 12px;
    padding: 4px;
  }
  .login-method-tab {
    flex: 1;
    padding: 9px 10px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--p-text-2);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
  }
  .login-method-tab.active { background: var(--p-navy); color: #fff; }
  .login-method-note {
    margin-top: 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--p-amber-d);
    text-align: center;
  }
  .login-gate-btn:disabled,
  .login-gate-field input:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===================================================================
   PLATFORM TABLE-HEADER UNIFICATION (architect, 2026-06-15)
   ONE vertical green header for EVERY table — theme tokens, day+night.
   Overrides the old diagonal / hardcoded / --a2 / grey headers.
   Filter-input rows stay soft bands, never green.
   =================================================================== */
#page-clients .cl-table thead th:not(.cl-fth),
.tt-row-head,
.users-table thead th,
.roles-matrix thead th,
.roles-matrix thead th.rm-admin-col,
table.ck-tt thead th,
.dash-table thead th,
.dash-table thead th.col-total,
.dash-table thead th.col-open,
.dash-table thead th.col-closed {
  background: linear-gradient(180deg, var(--p-green), var(--p-green-d)) !important;
  color: #fff !important;
}
html[data-theme="night"] #page-clients .cl-table thead th:not(.cl-fth),
html[data-theme="night"] .tt-row-head,
html[data-theme="night"] .users-table thead th,
html[data-theme="night"] .roles-matrix thead th,
html[data-theme="night"] .roles-matrix thead th.rm-admin-col,
html[data-theme="night"] table.ck-tt thead th,
html[data-theme="night"] .dash-table thead th {
  background: linear-gradient(180deg, var(--p-emerald), var(--p-emerald-d)) !important;
  color: #fff !important;
}
#page-clients .cl-table thead tr.cl-filter-row th.cl-fth,
table.ck-tt thead tr.ck-tt-filters th {
  background: var(--p-band-2, var(--p-band-1)) !important;
  color: var(--p-text) !important;
}

/* ============================================================
   BROADCAST «مجموعات الإرسال» — v4 screen styles (architect-built, B007).
   Theme-tokenised (day/night). 4px corners · green object headers ·
   beige band cards (white only inside inputs) · unified navy tiles ·
   gold floating scrollbars. Replaces the old (truncated) bc- block.
   ============================================================ */
.bc-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.bc-detail-head { margin-bottom:10px; }
.bc-h-title { font-size:18px; font-weight:800; color:var(--p-text); }
.bc-h-sub { font-size:12.5px; color:var(--p-text-3); margin-top:2px; }
.bc-detail-id { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.bc-title-inp { width:280px; max-width:55vw; }
.bc-flex { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.bc-muted { color:var(--p-text-3); }
.bc-empty { text-align:center; color:var(--p-text-3); padding:20px 8px; font-size:13px; }

/* buttons */
.bc-btn { border:0; border-radius:4px; padding:8px 14px; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; color:#fff; }
.bc-btn.bc-sm { padding:5px 10px; font-size:12px; }
.bc-btn-primary { background:linear-gradient(135deg,var(--p-emerald),var(--p-emerald-d)); box-shadow:0 6px 16px -10px rgba(20,95,76,.7); }
.bc-btn-gold { background:linear-gradient(135deg,var(--p-gold),var(--p-gold-d)); }
.bc-btn-danger { background:linear-gradient(135deg,var(--p-red),var(--p-red-d)); }
.bc-btn-ghost { background:transparent; border:1px solid var(--p-border-2); color:var(--p-text-2); }
.bc-btn:disabled { opacity:.45; cursor:not-allowed; }

/* inputs (white only here) */
.bc-inp { width:100%; background:var(--p-surface); border:1px solid var(--p-border-2); border-radius:4px; padding:7px 10px; font-size:13px; color:var(--p-text); font-family:inherit; }
textarea.bc-inp { resize:vertical; line-height:1.6; }

/* stepper */
.bc-stepper { display:flex; align-items:center; padding:8px 11px; background:var(--p-band-2); border-radius:4px; flex-wrap:wrap; margin-bottom:10px; }
.bc-step { display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:4px; font-size:12px; font-weight:700; color:var(--p-text-2); white-space:nowrap; }
.bc-step-n { width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:11.5px; background:var(--p-surface); border:1px solid var(--p-border-2); color:var(--p-text-2); }
.bc-step.done .bc-step-n { background:var(--p-green); border-color:var(--p-green); color:#fff; }
.bc-step.on { background:linear-gradient(180deg,var(--p-green),var(--p-green-d)); color:#fff; }
.bc-step.on .bc-step-n { background:#fff; color:var(--p-green-d); border-color:#fff; }
html[data-theme="night"] .bc-step.on { background:linear-gradient(180deg,var(--p-emerald),var(--p-emerald-d)); }
.bc-step-sep { flex:1; height:2px; min-width:8px; background:var(--p-border-2); margin:0 2px; }

/* persistent summary tiles — ONE unified navy tone */
.bc-ctxbar { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:9px; }
.bc-cbx { background:linear-gradient(135deg,var(--p-navy,#284B82),#1B335A); color:#fff; border-radius:4px; padding:5px 12px; display:flex; flex-direction:column; align-items:center; min-width:80px; }
html[data-theme="night"] .bc-cbx { background:linear-gradient(135deg,#2F4E7E,#1B335A); }
.bc-cbx-n { font-size:15px; font-weight:800; line-height:1.2; }
.bc-cbx-l { font-size:10px; opacity:.9; }

/* waiting-on strip */
.bc-waiting { display:flex; align-items:center; gap:8px; background:rgba(217,119,6,.12); border:1px solid var(--p-amber); border-radius:4px; padding:6px 11px; font-size:12.5px; color:var(--p-amber-d); margin-bottom:10px; }
html[data-theme="night"] .bc-waiting { color:#F6C94E; }
.bc-wdot { width:8px; height:8px; border-radius:50%; background:var(--p-amber); flex:0 0 auto; animation:bcPulse 1.3s infinite; }
@keyframes bcPulse { 0%{box-shadow:0 0 0 0 rgba(217,119,6,.5);} 70%{box-shadow:0 0 0 7px rgba(217,119,6,0);} 100%{box-shadow:0 0 0 0 rgba(217,119,6,0);} }

/* stage box */
.bc-stagebox { background:var(--p-band-1); border:1px solid var(--p-border); border-radius:4px; overflow:hidden; }
.bc-stage-bd { padding:12px; max-height:62vh; overflow:auto; }

.bc-gate { background:var(--p-green-bg); border:1px solid var(--p-green); color:var(--p-green-d); border-radius:4px; padding:8px 12px; font-size:12.5px; margin-bottom:10px; }
html[data-theme="night"] .bc-gate { color:#A7F3D0; }
.bc-note { background:var(--p-band-2); border:1px dashed var(--p-border-2); border-radius:4px; padding:7px 11px; font-size:12px; color:var(--p-text-2); margin-top:9px; }

/* language selector */
.bc-langsel { display:flex; align-items:center; gap:7px; flex-wrap:wrap; background:var(--p-band-1); border:1px solid var(--p-border); border-radius:4px; padding:8px 10px; margin-bottom:10px; }
.bc-langsel-lbl { font-size:12.5px; font-weight:700; color:var(--p-text-2); }
.bc-langsel-hint { font-size:11px; color:var(--p-text-3); }
.bc-lchip { display:inline-flex; align-items:center; gap:5px; border:1px solid var(--p-border-2); border-radius:4px; padding:3px 9px; font-size:12px; cursor:pointer; color:var(--p-text-2); }
.bc-lchip.on { background:rgba(22,163,74,.14); border-color:var(--p-green); color:var(--p-green-d); }
html[data-theme="night"] .bc-lchip.on { color:#34D399; }

/* two-pane */
.bc-two { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start; }
.bc-pane { background:var(--p-band-1); border:1px solid var(--p-border); border-radius:4px; overflow:hidden; min-width:0; }
.bc-pane-hd { background:linear-gradient(180deg,var(--p-green),var(--p-green-d)); color:#fff; padding:6px 11px; font-weight:700; font-size:12.5px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
html[data-theme="night"] .bc-pane-hd { background:linear-gradient(180deg,var(--p-emerald),var(--p-emerald-d)); }
.bc-cnt { background:rgba(255,255,255,.25); border-radius:4px; padding:0 8px; font-size:11.5px; }
.bc-pane-bd { padding:9px; }
.bc-filters { display:flex; gap:7px; margin-bottom:8px; flex-wrap:wrap; }
.bc-filters .bc-inp { flex:1; min-width:120px; }
.bc-excluded { opacity:.55; }
.bc-excluded .cl-cell-text { text-decoration:line-through; }
.bc-x { font-size:11.5px; padding:3px 9px; border-radius:4px; border:1px solid var(--p-border-2); background:var(--p-band-2); color:var(--p-text-2); cursor:pointer; }
.bc-x:hover { background:var(--p-surface); color:var(--p-text); }
@media (max-width:900px){ .bc-two { grid-template-columns:1fr; } }

/* tables */
.bc-twrap { border:1px solid var(--p-border); border-radius:4px; overflow:auto; max-height:300px; }
.bc-table { width:100%; border-collapse:collapse; font-size:12.5px; }
.bc-table thead th { background:linear-gradient(180deg,var(--p-green),var(--p-green-d)); color:#fff; padding:6px 11px; text-align:start; font-weight:700; position:sticky; top:0; white-space:nowrap; }
html[data-theme="night"] .bc-table thead th { background:linear-gradient(180deg,var(--p-emerald),var(--p-emerald-d)); }
.bc-table tbody td { padding:4px 11px; }
.bc-table tbody tr:nth-child(odd) { background:var(--p-band-1); }
.bc-table tbody tr:nth-child(even) { background:var(--p-band-2); }
.bc-table tbody tr:hover { background:var(--p-band-3); }
html[data-theme="night"] .bc-table tbody tr:hover { background:#205C47; }

/* status pills (4px, 14% fill + saturated border) */
.bc-pill { display:inline-block; border-radius:4px; padding:1px 8px; font-size:11px; font-weight:700; border:1px solid; }
.bc-st-draft { background:rgba(138,154,176,.14); border-color:var(--p-border-2); color:var(--p-text-3); }
.bc-st-prog { background:rgba(30,64,175,.14); border-color:var(--p-info); color:var(--p-info); }
.bc-st-warn { background:rgba(217,119,6,.14); border-color:var(--p-amber); color:var(--p-amber-d); }
.bc-st-done { background:rgba(22,163,74,.14); border-color:var(--p-green); color:var(--p-green-d); }
.bc-st-gold { background:rgba(197,151,10,.16); border-color:var(--p-gold); color:var(--p-gold-d); }
html[data-theme="night"] .bc-st-done { color:#34D399; }
html[data-theme="night"] .bc-st-warn { color:#F6C94E; }

/* variant cards */
.bc-vlist { margin-bottom:10px; }
.bc-vcard { background:var(--p-band-1); border:1px solid var(--p-border); border-radius:4px; padding:9px; margin-bottom:8px; }
.bc-vhd { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; gap:8px; }
.bc-vlang { font-weight:800; font-size:13px; color:var(--p-text); }
.bc-vtext { width:100%; min-height:70px; }
.bc-vread { background:var(--p-band-2); border-radius:4px; padding:7px 9px; font-size:12.5px; line-height:1.6; color:var(--p-text); white-space:pre-wrap; margin-top:4px; }
.bc-vnote { margin-top:6px; font-size:12px; color:var(--p-amber-d); background:rgba(217,119,6,.12); border-radius:4px; padding:5px 9px; }
.bc-vby { margin-top:6px; font-size:11.5px; color:var(--p-text-3); }
.bc-vft { display:flex; gap:7px; margin-top:7px; flex-wrap:wrap; }
.bc-lockbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; border-top:1px solid var(--p-border); padding-top:10px; margin-top:4px; font-size:12.5px; color:var(--p-text-2); }

/* manager stage */
.bc-mgr-grid { display:grid; grid-template-columns:1fr 250px; gap:14px; align-items:start; }
.bc-mgr-card { background:var(--p-band-1); border:1px solid var(--p-border); border-radius:4px; padding:13px; }
.bc-linkbox { margin-top:9px; }
.bc-linkbox .bc-flex { margin-top:5px; }
@media (max-width:820px){ .bc-mgr-grid { grid-template-columns:1fr; } }
.bc-phone { width:232px; border:8px solid #1a1a1a; border-radius:24px; background:var(--p-band-1); overflow:hidden; margin:0 auto; box-shadow:0 16px 36px -22px rgba(0,0,0,.5); }
.bc-phone-scr { padding:12px; }
.bc-phone-h { font-weight:800; font-size:13px; color:var(--p-text); }
.bc-phone-s { font-size:11px; color:var(--p-text-3); margin-bottom:8px; }
.bc-kv { display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px solid var(--p-border); font-size:11.5px; }
.bc-otp { letter-spacing:6px; text-align:center; font-size:17px; margin-top:8px; }

/* countdown */
.bc-cdwrap { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:6px; padding:14px 8px; }
.bc-cd { font-size:44px; font-weight:800; color:var(--p-green-d); line-height:1; }
html[data-theme="night"] .bc-cd { color:var(--p-green); }

/* send tiles (unified navy) */
.bc-tiles { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.bc-tile { background:linear-gradient(135deg,var(--p-navy,#284B82),#1B335A); color:#fff; border-radius:4px; padding:8px 14px; text-align:center; min-width:84px; }
html[data-theme="night"] .bc-tile { background:linear-gradient(135deg,#2F4E7E,#1B335A); }
.bc-tile-n { font-size:17px; font-weight:800; }
.bc-tile-l { font-size:10.5px; opacity:.9; margin-top:1px; }

/* audit overlay */
.bc-ovl { position:fixed; inset:0; background:rgba(0,0,0,.3); display:flex; align-items:center; justify-content:center; z-index:9000; }
.bc-audit { width:460px; max-width:92%; max-height:80vh; background:var(--p-band-1); border:1px solid var(--p-border); border-radius:4px; overflow:hidden; display:flex; flex-direction:column; }
.bc-audit-hd { background:linear-gradient(180deg,var(--p-green),var(--p-green-d)); color:#fff; padding:8px 13px; font-weight:800; font-size:13.5px; display:flex; justify-content:space-between; align-items:center; }
html[data-theme="night"] .bc-audit-hd { background:linear-gradient(180deg,var(--p-emerald),var(--p-emerald-d)); }
.bc-audit-bd { padding:13px; overflow:auto; }
.bc-tl { list-style:none; position:relative; padding-inline-start:18px; margin:0; }
.bc-tl:before { content:""; position:absolute; inset-inline-start:5px; top:4px; bottom:4px; width:2px; background:var(--p-border-2); }
.bc-tl li { position:relative; padding:5px 0; font-size:12.5px; }
.bc-tl li:before { content:""; position:absolute; inset-inline-start:-16px; top:11px; width:9px; height:9px; border-radius:50%; background:var(--p-green); border:2px solid var(--p-band-1); }
.bc-audit-who { font-weight:700; }
.bc-audit-when { color:var(--p-text-3); font-size:11px; }

/* gold floating scrollbars on broadcast scroll containers */
.bc-stage-bd::-webkit-scrollbar, .bc-twrap::-webkit-scrollbar, .bc-pane-bd::-webkit-scrollbar, .bc-audit-bd::-webkit-scrollbar, textarea.bc-inp::-webkit-scrollbar { width:14px; height:14px; background:transparent; }
.bc-stage-bd::-webkit-scrollbar-thumb, .bc-twrap::-webkit-scrollbar-thumb, .bc-pane-bd::-webkit-scrollbar-thumb, .bc-audit-bd::-webkit-scrollbar-thumb, textarea.bc-inp::-webkit-scrollbar-thumb { background:var(--p-gold); border-radius:999px; border:3px solid transparent; background-clip:padding-box; }
.bc-stage-bd, .bc-twrap, .bc-pane-bd, .bc-audit-bd, textarea.bc-inp { scrollbar-color:var(--p-gold) transparent; }


/* ============================================================
   SHARED FILTER BUILDER (window.p360Filter) — architect-built.
   Generic audience/client filter rows. Theme tokens, day+night, 4px.
   ============================================================ */
.bc-filter { margin-bottom: 10px; }
.p360-flt-head { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(180deg, var(--p-green), var(--p-green-d)); color: #fff; border-radius: 4px 4px 0 0; padding: 6px 11px; font-weight: 800; font-size: 12.5px; }
html[data-theme="night"] .p360-flt-head { background: linear-gradient(180deg, var(--p-emerald), var(--p-emerald-d)); }
.p360-flt-add { border: 0; border-radius: 4px; background: linear-gradient(135deg, var(--p-gold), var(--p-gold-d)); color: #fff; font-weight: 700; font-size: 11.5px; padding: 4px 11px; cursor: pointer; font-family: inherit; }
.p360-flt-rows { border: 1px solid var(--p-border); border-top: 0; border-radius: 0 0 4px 4px; padding: 8px; background: var(--p-band-1); }
.p360-flt-empty { font-size: 11.5px; color: var(--p-text-3); padding: 4px 2px; }
.p360-flt-row { display: flex; gap: 7px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.p360-flt-row:last-child { margin-bottom: 0; }
.p360-flt-field, .p360-flt-op, .p360-flt-input { background: var(--p-surface); border: 1px solid var(--p-border-2); border-radius: 4px; padding: 5px 8px; font-size: 12px; color: var(--p-text); font-family: inherit; }
.p360-flt-field { min-width: 160px; }
.p360-flt-op { min-width: 95px; }
.p360-flt-valw { flex: 1; min-width: 150px; }
.p360-flt-input { width: 100%; }
.p360-flt-del { border: 1px solid var(--p-border-2); background: var(--p-band-2); color: var(--p-red); border-radius: 4px; width: 28px; height: 28px; cursor: pointer; font-size: 12px; flex: 0 0 auto; }
.p360-flt-del:hover { background: var(--p-surface); }

/* ═══════ «الشركات المتعاقدة» (super-admin tenant list) — was UNSTYLED (no CSS for comp-* existed → flat «newspaper» look).
   Architect 2026-06-29: a proper theme card-grid. Tokens → day/night automatic · 4px corners (theme rule). ═══════ */
.comp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; padding: 6px 2px 18px; align-items: start; }
.comp-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px; background: var(--p-surface); border: 1px solid var(--p-border); border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.05); cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; }
.comp-card:hover { border-color: var(--p-green); box-shadow: 0 5px 16px rgba(0,0,0,.10); transform: translateY(-1px); }
.comp-card-logo { width: 48px; height: 48px; border-radius: 4px; object-fit: cover; flex: 0 0 auto; border: 1px solid var(--p-border); }
.comp-card-logo-ph { display: flex; align-items: center; justify-content: center; font-size: 24px; background: var(--p-band-1); color: var(--p-text-2); }
.comp-card-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 auto; }
.comp-card-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 700; font-size: 14px; color: var(--p-text); line-height: 1.3; }
.comp-card-slug { font-size: 12px; color: var(--p-text-3); direction: ltr; text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comp-card-counts { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--p-text-2); margin-top: 3px; }
.comp-badge { display: inline-block; padding: 2px 9px; border-radius: 4px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.comp-badge.on { background: var(--p-green-bg); color: var(--p-green); }
.comp-badge.off { background: var(--p-band-1); color: var(--p-text-3); border: 1px solid var(--p-border); }
.comp-empty { grid-column: 1 / -1; padding: 30px 16px; text-align: center; color: var(--p-text-3); font-size: 13px; }

/* company PROFILE/CREATE modal — also had no CSS (clicking a card opened an invisible raw block). Architect 2026-06-29. */
.comp-modal { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.5); align-items: flex-start; justify-content: center; padding: 40px 16px; overflow: auto; }
.comp-modal-card { width: 100%; max-width: 680px; background: var(--p-surface); border: 1px solid var(--p-border); border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,.35); max-height: calc(100vh - 80px); overflow: auto; }
.comp-modal-hd { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: var(--p-green); color: #fff; font-weight: 700; font-size: 15px; border-radius: 4px 4px 0 0; }
.comp-modal-x { flex: 0 0 auto; width: 28px; height: 28px; border: 0; border-radius: 4px; background: rgba(255,255,255,.2); color: #fff; cursor: pointer; font-size: 14px; line-height: 1; }
.comp-modal-x:hover { background: rgba(255,255,255,.35); }
.comp-form { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.comp-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.comp-fgrid label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--p-text-2); min-width: 0; }
.comp-fgrid label .inp, .comp-fgrid label input, .comp-fgrid label select, .comp-fgrid label textarea { font-weight: 400; width: 100%; }
.comp-wide { grid-column: 1 / -1; }
.comp-color { display: flex; align-items: center; gap: 8px; }
.comp-color input[type="color"] { width: 40px; height: 30px; padding: 0; border: 1px solid var(--p-border); border-radius: 4px; background: none; cursor: pointer; }
.comp-color-sw { width: 26px; height: 26px; border-radius: 4px; border: 1px solid var(--p-border); }
.comp-logo-prev { max-width: 130px; max-height: 64px; margin-top: 6px; border: 1px solid var(--p-border); border-radius: 4px; object-fit: contain; }
.comp-section-t { font-weight: 700; font-size: 13px; color: var(--p-text); padding-top: 8px; margin-top: 2px; border-top: 1px solid var(--p-border); }
.comp-admin-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 11px; background: var(--p-band-1); border-radius: 4px; font-size: 13px; margin-bottom: 6px; }
.comp-admin-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.comp-admin-add .inp { flex: 1 1 140px; }
.comp-msg { font-size: 12px; min-height: 16px; }
.comp-msg.ok { color: var(--p-green); }
.comp-msg.err { color: var(--p-red); }
.comp-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 6px; }
@media (max-width: 560px) { .comp-fgrid { grid-template-columns: 1fr; } }

/* ═══════ B096 — Company Profile CRM: PAGE 1 (cards grid) + PAGE 2 (profile) + per-section edit modals.
   Built 1:1 from the three approved mocks (Companies_TwoPages_Back · Company_CRM_Mock · View_vs_EditModal_Pattern),
   on platform --p-* tokens so day/night is automatic. Green object-headers get a night override (table-header look). */

/* PAGE 1 — toolbar (search + add) */
.comp-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.comp-search { flex: 1; min-width: 160px; border: 1px solid var(--p-border); border-radius: 4px; padding: 9px 12px; font-family: inherit; font-size: 13.5px; background: var(--p-surface); color: var(--p-text); }
.comp-search::placeholder { color: var(--p-text-3); }

/* PAGE 1 — the company card (mock: logo+name row → status pill → KPI row). Overrides the old horizontal card. */
.comp-card { flex-direction: column; }
.comp-card-top { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; }
.comp-card-idwrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.comp-card-kpis { display: flex; gap: 8px; margin-top: 11px; border-top: 1px solid var(--p-band-2); padding-top: 10px; }
.comp-card-k { flex: 1; text-align: center; }
.comp-card-k .v { font-weight: 800; font-size: 15px; color: var(--p-text); }
.comp-card-k .v.amber { color: var(--p-amber); }
.comp-card-k .v.red { color: var(--p-red); }
.comp-card-k .l { font-size: 10.5px; color: var(--p-text-3); }
.comp-badge.trial { background: var(--p-info-bg); color: var(--p-info); }

/* PAGE 2 — back bar (sticky, the only back; never scrolls away) */
.cp-backbar { position: sticky; top: 0; z-index: 6; background: var(--p-bg); padding: 10px 0; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--p-border); margin-bottom: 14px; }
.cp-back { background: var(--p-surface); border: 1px solid var(--p-border); border-radius: 4px; padding: 8px 14px; font-family: inherit; font-weight: 700; font-size: 13px; color: var(--p-green); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.cp-back:hover { background: var(--p-green); color: #fff; border-color: var(--p-green); }
.cp-crumb { font-size: 13px; color: var(--p-text-2); }
.cp-crumb b { color: var(--p-text); }

/* PAGE 2 — header summary strip (green object-header + 5 KPI tiles) */
.cp-hd { background: var(--p-surface); border: 1px solid var(--p-border); border-radius: 4px; overflow: hidden; margin-bottom: 12px; }
.cp-hd-top { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: linear-gradient(180deg, var(--p-green), var(--p-green-d)); color: #fff; }
.cp-hd-logo { width: 56px; height: 56px; border-radius: 4px; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-size: 28px; flex: 0 0 auto; object-fit: cover; }
.cp-hd-name { font-size: 19px; font-weight: 800; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cp-hd-sub { font-size: 12px; opacity: .92; direction: ltr; text-align: start; }
.cp-hd-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--p-border); }
.cp-kpi { background: var(--p-surface); padding: 11px 14px; }
.cp-kpi .l { font-size: 11px; color: var(--p-text-3); }
.cp-kpi .v { font-size: 16px; font-weight: 800; margin-top: 2px; color: var(--p-text); }
.cp-kpi .v.red { color: var(--p-red); } .cp-kpi .v.green { color: var(--p-green); } .cp-kpi .v.amber { color: var(--p-amber); }

/* PAGE 2 — tabs */
.cp-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
.cp-tab { background: var(--p-surface); border: 1px solid var(--p-border); border-radius: 4px; padding: 7px 9px; font-weight: 700; font-size: 11.5px; color: var(--p-text-2); cursor: pointer; white-space: nowrap; }
.cp-tab.active { background: var(--p-green); color: #fff; border-color: var(--p-green); }
.cp-panel { display: none; } .cp-panel.active { display: block; }

/* PAGE 2 — cards + read rows (VIEW) */
.cp-card { background: var(--p-surface); border: 1px solid var(--p-border); border-radius: 4px; padding: 16px 18px; margin-bottom: 12px; }
.cp-card-t { font-weight: 800; font-size: 14px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; color: var(--p-text); }
.cp-edit { margin-inline-start: auto; background: var(--p-band-1); border: 1px solid var(--p-border); border-radius: 4px; padding: 5px 12px; font-family: inherit; font-weight: 700; font-size: 12px; color: var(--p-text-2); cursor: pointer; }
.cp-edit:hover { background: var(--p-green); color: #fff; border-color: var(--p-green); }
.cp-rrow { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--p-band-2); font-size: 13.5px; }
.cp-rrow:last-child { border-bottom: 0; }
.cp-rrow .k { flex: 0 0 160px; color: var(--p-text-3); font-size: 12.5px; }
.cp-rrow .v { font-weight: 600; color: var(--p-text); min-width: 0; word-break: break-word; }
.cp-rrow .v.red { color: var(--p-red); font-weight: 800; } .cp-rrow .v.amber { color: var(--p-amber); } .cp-rrow .v.green { color: var(--p-green); }
.cp-rrow .v.muted { color: var(--p-text-3); font-weight: 400; }
.cp-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.cp-empty { padding: 18px 6px; text-align: center; color: var(--p-text-3); font-size: 12.5px; }
.cp-soon { display: inline-block; padding: 2px 9px; border-radius: 4px; font-size: 11px; font-weight: 700; background: var(--p-amber-bg); color: var(--p-amber-d); }

/* identity tab — phone preview floats inline-start, the two cards fill the rest */
.cp-id-layout { display: flex; gap: 18px; align-items: flex-start; }
.cp-id-cards { flex: 1 1 auto; min-width: 0; }
.cp-id-phone { flex: 0 0 280px; position: sticky; top: 64px; display: flex; flex-direction: column; align-items: center; }
.cp-phone { width: 260px; height: 520px; border: 10px solid #1c1c1c; border-radius: 34px; overflow: hidden; background: #fff; box-shadow: 0 14px 36px -14px rgba(0,0,0,.4); }
.cp-ph-hd { height: 120px; background: var(--bcol, #0E7AA6); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.cp-ph-hd .lg { width: 40px; height: 40px; border-radius: 9px; background: rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; font-size: 20px; overflow: hidden; }
.cp-ph-body { padding: 14px; color: #15302A; }
.cp-ph-card { border: 1px solid #e5e5e5; border-radius: 10px; padding: 11px; margin-bottom: 10px; font-size: 12px; }
.cp-ph-btn { background: var(--bcol2, #0a5e80); color: #fff; border-radius: 9px; padding: 10px; text-align: center; font-weight: 700; font-size: 12px; }
.cp-ph-chip { display: inline-block; background: var(--bcol, #0E7AA6); color: #fff; border-radius: 20px; padding: 3px 10px; font-size: 11px; margin: 2px; }
.cp-swatch { width: 22px; height: 22px; border-radius: 4px; border: 1px solid var(--p-border); vertical-align: middle; display: inline-block; }
@media (max-width: 880px) { .cp-id-layout { flex-direction: column; } .cp-id-phone { position: static; align-self: center; } }

/* PAGE 2 — mini table (contacts / finance / documents lists), platform table standard */
.cp-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.cp-tbl th { background: linear-gradient(180deg, var(--p-green), var(--p-green-d)); color: #fff; font-weight: 700; padding: 7px 9px; text-align: start; font-size: 12px; }
.cp-tbl td { padding: 7px 9px; border-bottom: 1px solid var(--p-band-2); color: var(--p-text); }
.cp-tbl tr:nth-child(even) td { background: var(--p-band-1); }

/* PAGE 2 — per-section EDIT MODAL (View_vs_EditModal_Pattern). Closes ONLY via ✕ / إلغاء / حفظ
   (platform NO-ACCIDENTAL-DISMISS — no backdrop-click, no Esc — so typed edits are never lost). */
.cpsec-ov { position: fixed; inset: 0; background: rgba(10,30,22,.45); display: none; align-items: center; justify-content: center; padding: 18px; z-index: 10000; }
.cpsec-ov.on { display: flex; }
.cpsec-modal { background: var(--p-surface); border-radius: 10px; width: 100%; max-width: 460px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.5); overflow: hidden; max-height: calc(100vh - 60px); display: flex; flex-direction: column; }
.cpsec-hd { background: linear-gradient(180deg, var(--p-green), var(--p-green-d)); color: #fff; padding: 12px 16px; font-weight: 800; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.cpsec-x { margin-inline-start: auto; background: rgba(255,255,255,.2); border: 0; color: #fff; width: 26px; height: 26px; border-radius: 4px; cursor: pointer; font-size: 15px; }
.cpsec-x:hover { background: rgba(255,255,255,.34); }
.cpsec-bd { padding: 16px; overflow: auto; }
.cpsec-f { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cpsec-f.col { align-items: flex-start; flex-direction: column; gap: 6px; }
.cpsec-f label { flex: 0 0 130px; font-size: 12px; color: var(--p-text-2); font-weight: 600; }
.cpsec-f input, .cpsec-f select { flex: 1; min-width: 0; width: 100%; border: 1px solid var(--p-border); border-radius: 4px; padding: 8px 10px; font-family: inherit; font-size: 13.5px; background: var(--p-surface); color: var(--p-text); }
.cpsec-mlrow { display: flex; align-items: center; gap: 8px; width: 100%; }
.cpsec-mlchip { flex: 0 0 72px; font-size: 11.5px; font-weight: 700; color: var(--p-text-2); background: var(--p-band-1); border: 1px solid var(--p-border); border-radius: 4px; padding: 6px; text-align: center; }
.cpsec-note { color: var(--p-text-3); font-size: 12px; margin: 2px 0 0; line-height: 1.5; }
.cpsec-ft { display: flex; gap: 8px; justify-content: flex-start; padding: 12px 16px; border-top: 1px solid var(--p-band-2); background: var(--p-band-1); flex: 0 0 auto; }
.cpsec-msg { font-size: 12px; min-height: 14px; color: var(--p-red); }
@media (max-width: 720px) { .cp-2col { grid-template-columns: 1fr; } .cp-hd-kpis { grid-template-columns: repeat(2, 1fr); } }

/* §7.5 — finance payments free-list (editable rows) */
.cp-pay-tbl td { vertical-align: middle; }
.cp-pay-tbl input.cp-pay-inp { width: 100%; border: 1px solid var(--p-border); border-radius: 4px; padding: 5px 7px; font-family: inherit; font-size: 12.5px; background: var(--p-surface); color: var(--p-text); }
.cp-pay-paid { border: 1px solid var(--p-border); border-radius: 4px; padding: 4px 10px; font-family: inherit; font-weight: 700; font-size: 11.5px; cursor: pointer; background: var(--p-band-1); color: var(--p-text-3); white-space: nowrap; }
.cp-pay-paid.on { background: var(--p-green-bg); color: var(--p-green); border-color: var(--p-green); }
.cp-pay-del { border: 1px solid var(--p-border); border-radius: 4px; width: 26px; height: 26px; cursor: pointer; background: var(--p-surface); color: var(--p-red); font-size: 13px; line-height: 1; }
.cp-pay-del:hover { background: var(--p-red-bg); }

/* B097 A1 — the profile is MEDIUM (~920) and centered (the list grid stays full width) */
#companies-page-profile { max-width: 920px; margin: 0 auto; }

/* B097 A2 — always-open inline fields (label + control on the VIEW surface) */
.cp-frow { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--p-band-2); }
.cp-frow:last-child { border-bottom: 0; }
.cp-flabel { flex: 0 0 160px; color: var(--p-text-3); font-size: 12.5px; }
.cp-fval { font-weight: 600; color: var(--p-text); min-width: 0; word-break: break-word; }
.cp-fval.red { color: var(--p-red); font-weight: 800; } .cp-fval.amber { color: var(--p-amber); } .cp-fval.green { color: var(--p-green); } .cp-fval.muted { color: var(--p-text-3); font-weight: 400; }
.cp-fld { flex: 1; min-width: 0; border: 1px solid var(--p-border); border-radius: 4px; padding: 7px 9px; font-family: inherit; font-size: 13px; background: var(--p-surface); color: var(--p-text); }
.cp-fld-ta { resize: vertical; width: 100%; }
.cp-color-wrap { display: flex; align-items: center; gap: 8px; flex: 1; }
.cp-fld-color { width: 42px; height: 30px; padding: 0; border: 1px solid var(--p-border); border-radius: 4px; cursor: pointer; flex: 0 0 auto; }
.cp-color-hex { font-size: 12px; color: var(--p-text-2); }

/* B097 B1 — documents */
.cp-doc-list { display: flex; flex-direction: column; gap: 8px; }
.cp-doc-item { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--p-border); border-radius: 4px; background: var(--p-band-1); }
.cp-doc-thumb { width: 46px; height: 46px; border-radius: 4px; object-fit: cover; flex: 0 0 auto; background: var(--p-surface); border: 1px solid var(--p-border); }
.cp-doc-file { display: flex; align-items: center; justify-content: center; font-size: 22px; }
.cp-doc-meta { flex: 1 1 auto; min-width: 0; }
.cp-doc-name { font-weight: 700; font-size: 13px; color: var(--p-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-doc-sub { font-size: 11.5px; color: var(--p-text-3); }
.cp-doc-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.cp-doc-btn { border: 1px solid var(--p-border); border-radius: 4px; background: var(--p-surface); color: var(--p-text-2); font-family: inherit; font-size: 11.5px; font-weight: 700; padding: 5px 9px; cursor: pointer; }
.cp-doc-btn:hover { background: var(--p-green); color: #fff; border-color: var(--p-green); }
.cp-doc-btn.danger { color: var(--p-red); } .cp-doc-btn.danger:hover { background: var(--p-red); color: #fff; border-color: var(--p-red); }

/* B097 B2 — activity log */
.cp-act-list { display: flex; flex-direction: column; }
.cp-act-item { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--p-band-2); }
.cp-act-item:last-child { border-bottom: 0; }
.cp-act-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--p-green); margin-top: 6px; flex: 0 0 auto; }
.cp-act-body { min-width: 0; }
.cp-act-what { font-size: 13px; color: var(--p-text); font-weight: 600; word-break: break-word; }
.cp-act-sub { font-size: 11.5px; color: var(--p-text-3); margin-top: 1px; }

/* B097 B3 — services wizard */
.cp-seg-row { display: flex; gap: 8px; flex-wrap: wrap; }
.cp-seg { border: 1px solid var(--p-border); border-radius: 4px; background: var(--p-surface); color: var(--p-text-2); font-family: inherit; font-weight: 700; font-size: 13px; padding: 9px 16px; cursor: pointer; }
.cp-seg.on { background: var(--p-green); color: #fff; border-color: var(--p-green); }
.cp-svc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--p-band-2); }
.cp-svc-row:last-child { border-bottom: 0; }
.cp-svc-row.sub { padding-inline-start: 18px; }
.cp-svc-row.sub .cp-svc-name::before { content: '↳'; color: var(--p-text-3); margin-inline-end: 5px; }
.cp-svc-row.off { opacity: .6; }
.cp-svc-name { font-size: 13px; font-weight: 600; color: var(--p-text); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cp-svc-ctl { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.cp-svc-tog { border: 1px solid var(--p-border); border-radius: 20px; background: var(--p-band-1); color: var(--p-text-3); font-family: inherit; font-weight: 700; font-size: 11.5px; padding: 4px 12px; cursor: pointer; }
.cp-svc-tog.on { background: var(--p-green); color: #fff; border-color: var(--p-green); }
.cp-svc-tog.locked { opacity: .85; cursor: not-allowed; }
.cp-svc-price { width: 90px; border: 1px solid var(--p-border); border-radius: 4px; padding: 5px 7px; font-family: inherit; font-size: 12.5px; background: var(--p-surface); color: var(--p-text); }
.cp-svc-price:disabled { opacity: .5; }
.cp-svc-cur { font-size: 11.5px; color: var(--p-text-3); }
.cp-svc-badge { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 10.5px; font-weight: 700; }
.cp-svc-badge.soon { background: var(--p-band-2); color: var(--p-text-3); }
.cp-svc-badge.ready { background: var(--p-info-bg); color: var(--p-info); }
.cp-svc-badge.req { background: var(--p-amber-bg); color: var(--p-amber-d); }
.cp-svc-badge.paid { background: var(--p-gold-bg); color: var(--p-gold-d); }
.cp-svc-badge.inc { background: var(--p-green-bg); color: var(--p-green); }
.cp-svc-warn { background: var(--p-amber-bg); color: var(--p-amber-d); border-radius: 4px; padding: 7px 10px; font-size: 12px; margin-bottom: 8px; }
.cp-svc-total { display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 800; color: var(--p-text); }
.cp-svc-total b { color: var(--p-green); font-size: 17px; }

/* night override — green object-headers to the platform table-header deep-emerald (matches table.ck-tt thead) */
html[data-theme="night"] .cp-hd-top,
html[data-theme="night"] .cp-tbl th,
html[data-theme="night"] .cpsec-hd { background: linear-gradient(180deg, #13724f, #0b5238); }
html[data-theme="night"] .cp-tab.active,
html[data-theme="night"] .cp-seg.on,
html[data-theme="night"] .cp-svc-tog.on { background: #13724f; border-color: #13724f; color: #fff; }
html[data-theme="night"] .cp-back:hover,
html[data-theme="night"] .cp-doc-btn:hover { background: #13724f; border-color: #13724f; }