/* ============================================================
   DAY/NIGHT THEME (platform-wide). The :root palette above is the DAY default — when no
   data-theme attribute is present (or it is "day"), nothing changes (zero regression).
   NIGHT overrides the same --p-* tokens; html[data-theme="night"] outranks :root so it wins.
   ============================================================ */
html[data-theme="night"]{
  --p-bg:#0B1F1A; --p-surface:#0F2A22; --p-band-1:#143A2F; --p-band-2:#16463A; --p-band-3:#143A2F;
  --p-navy:#EAF3EE; --p-navy-d:#A6C6B8; --p-navy-l:#2BD4B0; --p-navy-bg:#16463A;
  --p-gold:#F6C94E; --p-gold-d:#F6C94E; --p-gold-bg:#3A3318;
  --p-emerald:#2BD4B0; --p-emerald-d:#1A7F64; --p-emerald-bg:#143A2F;
  --p-red:#F0997B; --p-red-d:#F0997B; --p-red-bg:#3A2018;
  --p-amber:#F6C94E; --p-amber-d:#F6C94E; --p-amber-bg:#3A3318;
  --p-green:#34D399; --p-green-d:#34D399; --p-green-bg:#143A2F;
  --p-teal:#2BD4B0; --p-teal-d:#2BD4B0; --p-teal-bg:#143A2F;
  --p-info:#93B4F7; --p-info-d:#93B4F7; --p-info-bg:#1B2B4A;
  --p-text:#EAF3EE; --p-text-2:#A6C6B8; --p-text-3:#739385; --p-text-4:#5A7567;
  --p-border:#26604D; --p-border-2:#2F6F59;
}
html[data-theme="night"] body{
  background:radial-gradient(1200px 600px at 80% -12%, #16463A 0%, #0B1F1A 55%);
  background-attachment:fixed;
}
/* Item 6: night-only overrides for components that hardcode a light surface AND a hardcoded dark
   text colour (so swapping the bg to a token alone would flip them to dark-on-dark). Day is
   untouched. p360Dialog = the platform-wide confirm/alert/prompt; the guard button lives on the
   Roles editor. */
html[data-theme="night"] .p360-dialog{ background:var(--p-surface); }
html[data-theme="night"] .p360-dialog-msg{ color:var(--p-text-2); }
html[data-theme="night"] .p360-dialog-btn{ background:var(--p-band-1); color:var(--p-text); border-color:var(--p-border); }
html[data-theme="night"] .role-sec-guard-btn{ background:var(--p-amber-bg); color:var(--p-amber-d); border-color:var(--p-border); }
/* Item 6: components that use an INK token (--p-navy, light in night) as a BACKGROUND with white
   text — flip the surface dark at night so the white text stays readable. Day untouched. */
html[data-theme="night"] .dept-group-count{ background:var(--p-emerald-d); color:#fff; }
html[data-theme="night"] .settings-tab:hover{ background:rgba(255,255,255,0.08); }
/* Login gate buttons/active tab use --p-navy (light in night) as bg with white text — flip to
   emerald in night so the white text stays readable. The gate is the named RTL/LTR exception. */
html[data-theme="night"] .login-gate-btn,
html[data-theme="night"] .login-method-tab.active{ background:var(--p-emerald); color:#fff; }
.tp-theme-toggle{ display:flex; align-items:center; gap:6px; }

/* ============================================================
   COCKPIT (Type-1 dispatcher home) — ck- namespaced, fully isolable. Colors come from the
   platform --p-* tokens, so the cockpit themes day/night with the rest of the platform.
   ============================================================ */
#page-cockpit{ overflow:auto; }
.ck-wrap{ max-width:1320px; margin:0 auto; padding:18px; }
.ck-ribbon{ display:flex; align-items:center; gap:18px; background:var(--p-surface); border:1px solid var(--p-border); border-radius:var(--r-md); padding:12px 18px; margin-bottom:14px; box-shadow:var(--sh-sm); flex-wrap:wrap; }
.ck-agent{ display:flex; align-items:center; gap:10px; }
.ck-agent .ck-dot{ width:9px; height:9px; border-radius:50%; background:var(--p-teal); }
.ck-agent .ck-nm{ font-weight:700; font-size:15px; color:var(--p-text); }
.ck-agent .ck-st{ font-size:12px; color:var(--p-text-2); }
.ck-kpis{ display:flex; gap:10px; margin-inline-start:auto; flex-wrap:wrap; }
.ck-kpi{ background:var(--p-band-3); border:1px solid var(--p-border); border-radius:var(--r-sm); padding:7px 14px; text-align:center; min-width:90px; }
.ck-kpi .ck-v{ font-size:19px; font-weight:800; line-height:1; color:var(--p-text); }
.ck-kpi .ck-l{ font-size:11px; color:var(--p-text-2); margin-top:4px; }
.ck-kpi.ck-warn .ck-v{ color:var(--p-amber-d); } .ck-kpi.ck-alert .ck-v{ color:var(--p-red-d); } .ck-kpi.ck-live .ck-v{ color:var(--p-teal-d); }
.ck-brand{ font-weight:800; color:var(--p-gold-d); font-size:16px; letter-spacing:.3px; }
.ck-grid{ display:grid; grid-template-columns:0.92fr 1.6fr 1fr; gap:14px; align-items:start; }
.ck-col{ display:flex; flex-direction:column; gap:14px; }
.ck-card{ background:var(--p-surface); border:1px solid var(--p-border); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--sh-sm); }
.ck-chd{ display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--p-border); font-size:13px; font-weight:700; color:var(--p-text); }
.ck-chd .ck-ic{ color:var(--p-gold-d); }
.ck-cb{ padding:12px 14px; }
.ck-muted{ color:var(--p-text-2); font-size:12px; }
.ck-pill{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; }
.ck-p-open{ background:var(--p-green-bg); color:var(--p-green-d); }
.ck-p-min{ background:var(--p-amber-bg); color:var(--p-amber-d); }
.ck-p-high{ background:var(--p-red-bg); color:var(--p-red-d); }
.ck-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--p-border); }
.ck-row:last-child{ border-bottom:none; }
.ck-tile{ width:32px; height:32px; border-radius:9px; background:var(--p-band-3); display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.ck-disabled, .ck-card.ck-disabled{ opacity:.6; }
.ck-soon{ font-size:10px; font-weight:700; color:var(--p-gold-d); background:var(--p-gold-bg); border:1px solid var(--p-border); border-radius:999px; padding:2px 8px; margin-inline-start:auto; }
/* Live action button on a cockpit card header (e.g. the references upload). Token-based → day/night. */
.ck-upload-btn{ font-size:10px; font-weight:700; color:var(--p-gold-d); background:var(--p-band-3); border:1px solid var(--p-border); border-radius:999px; padding:2px 8px; margin-inline-start:auto; cursor:pointer; transition:background .12s, border-color .12s; }
.ck-upload-btn:hover{ background:var(--p-gold-bg); border-color:var(--p-gold-d); }
.ck-live-call{ background:linear-gradient(180deg, var(--p-emerald-bg), var(--p-surface)); }
.ck-callbtns{ display:flex; gap:8px; margin-top:12px; }
.ck-cbtn{ flex:1; text-align:center; padding:9px 0; border-radius:var(--r-sm); font-size:12px; font-weight:700; border:1px solid var(--p-border); background:var(--p-band-3); color:var(--p-text-3); }
.ck-keypad{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:10px; }
.ck-key{ background:var(--p-band-3); border:1px solid var(--p-border); border-radius:6px; text-align:center; padding:9px 0; font-size:15px; font-weight:600; color:var(--p-text-2); cursor:pointer; user-select:none; transition:background .12s, border-color .12s; }
.ck-key:hover{ background:var(--p-band-2); border-color:var(--p-teal); color:var(--p-text); }
.ck-tabs{ display:flex; gap:6px; padding:0 14px; border-bottom:1px solid var(--p-border); }
.ck-tab{ padding:9px 12px; font-size:12px; font-weight:700; color:var(--p-text-2); border:none; border-bottom:2px solid transparent; background:none; cursor:pointer; font-family:inherit; }
.ck-tab.ck-on{ color:var(--p-gold-d); border-bottom-color:var(--p-gold); }
.ck-pane{ display:none; } .ck-pane.ck-on{ display:block; }
.ck-kv{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 14px; margin:4px 0 12px; }
.ck-kv .ck-k{ font-size:11px; color:var(--p-text-3); } .ck-kv .ck-vv{ font-size:13px; font-weight:500; margin-top:2px; color:var(--p-text); }
.ck-seck{ font-size:11px; color:var(--p-text-3); margin-bottom:5px; }
.ck-desc{ background:var(--p-bg); border:1px solid var(--p-border); border-radius:var(--r-sm); padding:10px 12px; font-size:12px; line-height:1.9; color:var(--p-text-2); max-height:66px; overflow:hidden; cursor:pointer; }
.ck-desc.ck-open{ max-height:none; }
.ck-rtc{ margin-top:12px; }
.ck-rtc textarea{ width:100%; background:var(--p-bg); border:1px solid var(--p-border); border-radius:var(--r-sm); color:var(--p-text); font-family:inherit; font-size:12px; padding:9px; min-height:54px; resize:none; }
.ck-log-row{ padding:8px 0; border-bottom:1px solid var(--p-border); font-size:12px; color:var(--p-text-2); }
.ck-log-row:last-child{ border-bottom:none; }
.ck-ref-search{ display:flex; align-items:center; gap:7px; background:var(--p-bg); border:1px solid var(--p-border); border-radius:var(--r-sm); padding:7px 10px; font-size:12px; color:var(--p-text-3); margin-bottom:8px; }
.ck-ref-item{ display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--p-border); font-size:13px; color:var(--p-text); }
.ck-ref-item:last-child{ border-bottom:none; }
/* B025 PART E4: compact Data Room row preview (shared attachPreviews) — small image thumb / icon-only
   chip (the filename is already shown in the row, so hide the chip's duplicate name). */
.ck-ref-item .ck-ref-prev{ flex:0 0 auto; }
.ck-ref-item .ck-ref-prev .p360-att-img{ width:28px; height:28px; }
.ck-ref-item .ck-ref-prev .p360-att-file{ padding:3px 6px; }
.ck-ref-item .ck-ref-prev .p360-att-file .p360-att-nm{ display:none; }
.ck-tools{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.ck-tool{ background:var(--p-band-3); border:1px solid var(--p-border); border-radius:var(--r-sm); padding:12px 6px; text-align:center; font-size:11px; font-weight:700; color:var(--p-text-2); }
.ck-tool .ck-ti{ font-size:18px; display:block; margin-bottom:5px; }
.ck-frow{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--p-border); font-size:12px; cursor:pointer; }
.ck-frow:last-child{ border-bottom:none; }
.ck-frow .ck-num{ color:var(--p-gold-d); font-weight:700; }
.ck-frow .ck-left{ margin-inline-start:auto; }
.ck-shift{ display:flex; align-items:center; gap:10px; font-size:12px; color:var(--p-text-2); }
.ck-empty{ color:var(--p-text-3); font-size:12px; padding:10px 0; text-align:center; }
@media (max-width:1100px){ .ck-grid{ grid-template-columns:1fr; } }

/* ============================================================
   COCKPIT «قمرة العمليات» PART A — 100vh no-scroll shell, built AROUND the existing intake form.
   Active only under body.ops-active (cockpit_home_enabled ON AND on the intake/cockpit page);
   when OFF, every .ops-* wrapper is layout-neutral so the standalone intake form is unchanged.
   Token-based (day/night) + RTL (logical props). Binding case: 1920×1080, zero page scroll.
   ============================================================ */
.ops-ribbon, .ops-rail { display: none; }                 /* hidden unless ops-active */
.ops-rail-ph { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; height:100%; color:var(--p-text-3); font-size:12px; font-weight:700; text-align:center; border:1px dashed var(--p-border); border-radius:var(--r-md,12px); }
.ops-rail-ph-ic { font-size:22px; }
.ops-rail-ph-tag { font-size:10px; color:var(--p-text-4); background:var(--p-band-1); border:1px solid var(--p-border); border-radius:999px; padding:2px 8px; }

/* B081 — ONE unified top bar: the global .topbar now shows on the cockpit too (the separate ops ribbon is
   retired). The cockpit fills the viewport BELOW the 56px topbar (no second bar, no scroll). */
body.ops-active #page-intake {
  position: fixed; top: 56px; inset-inline: 0; bottom: 0; z-index: 60;
  max-width: none; margin: 0;
  display: grid; grid-template-rows: 1fr;
  background: var(--p-bg); overflow: hidden;
}
.ops-nav-handle { background: var(--p-band-3); border:1px solid var(--p-border); color:var(--p-text-2); width:34px; height:32px; border-radius:8px; cursor:pointer; font-size:16px; flex-shrink:0; }
.ops-nav-handle:hover { background: var(--p-band-2); border-color: var(--p-teal); color: var(--p-text); }
.ops-rb-brand { display:flex; align-items:center; gap:8px; font-weight:800; color:var(--p-gold-d); font-size:15px; white-space:nowrap; }
.ops-rb-logo { width:24px; height:24px; border-radius:6px; background:var(--p-emerald-d); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; }
.ops-rb-id { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--p-text); white-space:nowrap; }
.ops-rb-dot { width:8px; height:8px; border-radius:50%; background:var(--p-teal); box-shadow:0 0 0 3px var(--p-teal-bg); }
.ops-rb-shift { color:var(--p-text-3); font-size:11px; }
.ops-rb-kpis { display:flex; align-items:center; gap:6px; margin-inline-start:auto; flex:1 1 auto; min-width:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; }
/* Cockpit 5/5 — PART B: the KPI boxes now live in the ribbon (both modes). Compact row chips that fit ~34px. */
.ops-rb-kpis .ops-kpi-group { display:flex; align-items:center; gap:4px; padding:2px 5px; border:1px solid var(--p-border); border-radius:9px; background:var(--p-surface); flex-shrink:0; }
.ops-rb-kpis .ops-kpi-group-lbl { font-size:9px; font-weight:800; color:var(--p-text-3); white-space:nowrap; }
.ops-rb-kpis .ops-kpi { display:flex; flex-direction:row; align-items:baseline; gap:4px; padding:2px 8px; min-width:auto; border-radius:7px; flex-shrink:0; white-space:nowrap; }
.ops-rb-kpis .ops-kpi .ops-kpi-v { font-size:14px; font-weight:800; line-height:1; }
.ops-rb-kpis .ops-kpi .ops-kpi-l { font-size:9px; margin-top:0; color:var(--p-text-2); }
.ops-rb-kpis .ops-chat-kpi { display:flex; flex-direction:row; align-items:baseline; gap:4px; padding:2px 8px; border-radius:7px; flex-shrink:0; white-space:nowrap; flex:0 0 auto; }
.ops-rb-kpis .ops-chat-kpi .v { font-size:13px; font-weight:800; line-height:1; }
.ops-rb-kpis .ops-chat-kpi .l { font-size:8.5px; margin-top:0; }
/* PART B/C — shared whole-box VALUE TINT (kpiTone): ok=calm green · watch=amber · crit=red · neutral.
   Soft semi-transparent fills read correctly over both day + night surfaces; numbers use theme semantic vars. */
/* Ops-ribbon chips — STRONG content-colour: tone-tinted bg + full tone border (+ 3px accent edge below),
   so the meaning reads at a glance. Tokens only; legible day+night. */
.kpi-tone-ok      { background:color-mix(in srgb, var(--p-green) 16%, var(--p-surface)) !important; border-color:var(--p-green) !important; }
.kpi-tone-watch   { background:color-mix(in srgb, var(--p-amber) 18%, var(--p-surface)) !important; border-color:var(--p-amber) !important; }
.kpi-tone-crit    { background:color-mix(in srgb, var(--p-red)   16%, var(--p-surface)) !important; border-color:var(--p-red)   !important; }
.kpi-tone-neutral { background:color-mix(in srgb, var(--p-teal)  12%, var(--p-surface)) !important; border-color:var(--p-teal)  !important; }
.ops-kpi.kpi-tone-ok, .ops-kpi.kpi-tone-watch, .ops-kpi.kpi-tone-crit, .ops-kpi.kpi-tone-neutral,
.ops-chat-kpi.kpi-tone-ok, .ops-chat-kpi.kpi-tone-watch, .ops-chat-kpi.kpi-tone-crit, .ops-chat-kpi.kpi-tone-neutral { border-inline-start-width:3px !important; }
.ops-kpi.kpi-tone-ok .ops-kpi-v,    .kpi-num-block.kpi-tone-ok,    .ops-chat-kpi.kpi-tone-ok .v    { color:var(--p-green)  !important; }
.ops-kpi.kpi-tone-watch .ops-kpi-v, .kpi-num-block.kpi-tone-watch, .ops-chat-kpi.kpi-tone-watch .v { color:var(--p-amber)  !important; }
.ops-kpi.kpi-tone-crit .ops-kpi-v,  .kpi-num-block.kpi-tone-crit,  .ops-chat-kpi.kpi-tone-crit .v  { color:var(--p-red)    !important; }
.ops-kpi.kpi-tone-neutral .ops-kpi-v, .kpi-num-block.kpi-tone-neutral, .ops-chat-kpi.kpi-tone-neutral .v { color:var(--p-teal-d) !important; }
.ops-rb-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.ops-rb-btn { background:var(--p-band-3); border:1px solid var(--p-border); color:var(--p-text-2); width:32px; height:32px; border-radius:8px; cursor:pointer; font-size:15px; }
.ops-rb-btn:hover { background:var(--p-band-2); }
.ops-rb-new { width:auto; padding:0 12px; font-size:12.5px; font-weight:700; color:var(--p-emerald-d); }
/* PART D — migrate .cockpit-kpi cards into the thin ribbon: same tone classes + setKpiValue flip,
   compacted to chips. */
.ops-rb-kpis .cockpit-kpi { flex-direction:row; align-items:baseline; gap:6px; padding:4px 10px; border-radius:8px; box-shadow:none; height:34px; cursor:pointer; transition:filter .12s, transform .12s; }
.ops-rb-kpis .cockpit-kpi.is-static { cursor:default; }
.ops-rb-kpis .cockpit-kpi:hover:not(.is-static) { filter:brightness(1.09); transform:translateY(-1px); }
.ops-rb-kpis .cockpit-kpi-value { font-size:17px; }
.ops-rb-kpis .cockpit-kpi-label { font-size:10.5px; white-space:nowrap; }
/* ============================================================
   SHARED STAT BOX — .p-stat NIGHT treatment. The semantic tokens are BRIGHT pastels in night,
   so a solid tile + white text would be unreadable. Night switches to the platform's tinted-card
   treatment (tone bg-tint + tone-d coloured value), same family as mon-card / the dialogs.
   Day keeps the bold solid tile (tokens are dark in day). Tokens only — no hardcoded hex. ===== */
html[data-theme="night"] .p-stat,
html[data-theme="night"] .cockpit-kpi { color:var(--p-text); border:1px solid var(--p-border); box-shadow:none; }
html[data-theme="night"] .p-stat.tone-neutral,   html[data-theme="night"] .cockpit-kpi.tone-neutral,   html[data-theme="night"] .cockpit-kpi.tone-teal,  html[data-theme="night"] .cockpit-kpi.tone-navy  { background:var(--p-teal-bg);  border-color:color-mix(in srgb, var(--p-teal)  35%, var(--p-border)); }
html[data-theme="night"] .p-stat.tone-done,       html[data-theme="night"] .cockpit-kpi.tone-done,       html[data-theme="night"] .cockpit-kpi.tone-green { background:var(--p-green-bg); border-color:color-mix(in srgb, var(--p-green) 35%, var(--p-border)); }
html[data-theme="night"] .p-stat.tone-progress,   html[data-theme="night"] .cockpit-kpi.tone-progress,   html[data-theme="night"] .cockpit-kpi.tone-amber { background:var(--p-amber-bg); border-color:color-mix(in srgb, var(--p-amber) 35%, var(--p-border)); }
html[data-theme="night"] .p-stat.tone-attention,  html[data-theme="night"] .cockpit-kpi.tone-attention,  html[data-theme="night"] .cockpit-kpi.tone-red   { background:var(--p-red-bg);   border-color:color-mix(in srgb, var(--p-red)   35%, var(--p-border)); }
html[data-theme="night"] .p-stat.tone-primary,    html[data-theme="night"] .cockpit-kpi.tone-primary                                                       { background:var(--p-gold-bg);  border-color:color-mix(in srgb, var(--p-gold)  35%, var(--p-border)); }
html[data-theme="night"] .p-stat .p-stat-label,   html[data-theme="night"] .cockpit-kpi .cockpit-kpi-label { color:var(--p-text-2); }
html[data-theme="night"] .p-stat.tone-neutral .p-stat-value,   html[data-theme="night"] .cockpit-kpi.tone-neutral .cockpit-kpi-value,   html[data-theme="night"] .cockpit-kpi.tone-teal .cockpit-kpi-value,  html[data-theme="night"] .cockpit-kpi.tone-navy .cockpit-kpi-value  { color:var(--p-teal-d); }
html[data-theme="night"] .p-stat.tone-done .p-stat-value,       html[data-theme="night"] .cockpit-kpi.tone-done .cockpit-kpi-value,       html[data-theme="night"] .cockpit-kpi.tone-green .cockpit-kpi-value { color:var(--p-green-d); }
html[data-theme="night"] .p-stat.tone-progress .p-stat-value,   html[data-theme="night"] .cockpit-kpi.tone-progress .cockpit-kpi-value,   html[data-theme="night"] .cockpit-kpi.tone-amber .cockpit-kpi-value { color:var(--p-amber-d); }
html[data-theme="night"] .p-stat.tone-attention .p-stat-value,  html[data-theme="night"] .cockpit-kpi.tone-attention .cockpit-kpi-value,  html[data-theme="night"] .cockpit-kpi.tone-red .cockpit-kpi-value   { color:var(--p-red-d); }
html[data-theme="night"] .p-stat.tone-primary .p-stat-value,    html[data-theme="night"] .cockpit-kpi.tone-primary .cockpit-kpi-value                                                       { color:var(--p-gold-d); }
/* Dashboard number-blocks: the number IS the block's own text, so colour the block directly. */
html[data-theme="night"] .kpi-num-block { border:1px solid var(--p-border); }
html[data-theme="night"] .kpi-num-block.tone-neutral   { background:var(--p-teal-bg);  color:var(--p-teal-d); }
html[data-theme="night"] .kpi-num-block.tone-done       { background:var(--p-green-bg); color:var(--p-green-d); }
html[data-theme="night"] .kpi-num-block.tone-progress   { background:var(--p-amber-bg); color:var(--p-amber-d); }
html[data-theme="night"] .kpi-num-block.tone-attention  { background:var(--p-red-bg);   color:var(--p-red-d); }
html[data-theme="night"] .kpi-num-block.tone-primary    { background:var(--p-gold-bg);  color:var(--p-gold-d); }
/* Body (2026-06-13): centre | ONE right rail (left rail eliminated; centre expands into the freed space). */
body.ops-active .ops-body {
  display: grid; grid-template-columns: 300px minmax(0,1fr);
  min-height: 0; height: 100%; overflow: hidden;
}
body.ops-active .ops-rail { display:flex; flex-direction:column; gap:10px; padding:10px; overflow:hidden; min-height:0; background:var(--p-bg); }
body.ops-active .ops-comms   { border-inline-end:1px solid var(--p-border); }
body.ops-active .ops-support { border-inline-start:1px solid var(--p-border); }
/* 4C: center column = ticket KPI boxes on top (~1/3), intake form below (~2/3). */
body.ops-active .ops-center  { min-height:0; min-width:0; overflow:hidden; padding:8px; display:flex; flex-direction:column; align-items:stretch; gap:6px; }
/* B1.3: form-card sizes to its content (no full-height stretch) so the ~300px dead space below the
   intake form is gone; top-aligned, capped to the column with internal scroll only if content is taller. */
body.ops-active .ops-center > .form-card { width:100%; height:auto; min-height:0; flex:1 1 auto; max-height:100%; max-width:none; overflow-y:auto; display:flex; flex-direction:column; border-radius:var(--r-md,12px); }

/* 4C — the ONE ticket KPI ribbon (Wazara group · non-Wazara group · grand total). */
.ops-ticket-kpis { display:flex; flex-wrap:wrap; gap:8px; align-items:stretch; flex-shrink:0; }
/* B1/B2: two labeled sections above the intake (RIGHT=ticket, LEFT=chat), each with a big icon. */
/* LTR container fixes the item order (markup: chat then ticket → chat LEFT, ticket RIGHT); each
   section keeps RTL content. */
.ops-kpi-sections { display:flex; gap:10px; align-items:stretch; flex-shrink:0; margin-bottom:6px; flex-wrap:wrap; direction:ltr; }
.ops-kpi-sec { display:flex; align-items:center; gap:9px; background:var(--p-band-3); border:1px solid var(--p-border); border-radius:10px; padding:6px 11px; direction:rtl; }
.ops-kpi-sec-ticket { flex:1 1 auto; min-width:0; }
.ops-kpi-sec-chat { flex:0 0 auto; }
.ops-kpi-sec-ic { font-size:25px; line-height:1; flex-shrink:0; filter:saturate(1.1); }
.ops-kpi-sec-col { display:flex; flex-direction:column; gap:3px; }
.ops-kpi-sec-lbl { font-size:11px; font-weight:800; color:var(--p-text-2); }
.ops-kpi-group { display:flex; gap:6px; align-items:center; padding:4px 6px; border:1px solid var(--p-border); border-radius:12px; background:var(--p-surface); }
.ops-kpi-group-lbl { font-size:10px; font-weight:800; color:var(--p-text-3); padding:0 4px; white-space:nowrap; }
.ops-kpi { background:var(--p-band-3); border:1px solid var(--p-border); border-radius:9px; padding:5px 11px; text-align:center; min-width:66px; cursor:pointer; transition:filter .12s, transform .12s; }
.ops-kpi.is-static { cursor:default; }
.ops-kpi:hover:not(.is-static) { filter:brightness(1.06); transform:translateY(-1px); }
.ops-kpi .ops-kpi-v { font-size:18px; font-weight:800; line-height:1; color:var(--p-text); }
.ops-kpi .ops-kpi-l { font-size:10px; color:var(--p-text-2); margin-top:3px; white-space:nowrap; }
.ops-kpi.k-open .ops-kpi-v { color:var(--p-teal-d); }
.ops-kpi.k-await .ops-kpi-v { color:var(--p-amber-d); }
.ops-kpi.k-total { background:var(--p-band-1); border-color:var(--p-teal-d); }
/* B025 PART C — cockpit KPI stat boxes, stacked above the staff-performance row. They use the SHARED
   .p-stat + tone-* component (content colour + day/night come free); these rules only make them a tidy,
   COMPACT wrap row that fits the cockpit (size/padding only — never colour). */
.ck-stat-boxes { display:flex; flex-wrap:wrap; gap:6px; align-items:stretch; margin-bottom:8px; direction:rtl; }
.ck-stat-boxes .ops-kpi-group { display:flex; align-items:stretch; gap:6px; padding:3px 8px; border:1px solid var(--p-border); border-radius:8px; background:var(--p-surface); }
.ck-stat-boxes .ops-kpi-group-lbl { align-self:center; }
.ck-stat-boxes .p-stat { padding:5px 12px; border-radius:7px; gap:1px; box-shadow:none; min-width:58px; align-items:center; text-align:center; cursor:default; transition:filter .12s; }
.ck-stat-boxes .p-stat[onclick] { cursor:pointer; }
.ck-stat-boxes .p-stat[onclick]:hover { filter:brightness(1.06); }
.ck-stat-boxes .p-stat-value { font-size:17px; }
.ck-stat-boxes .p-stat-label { font-size:9px; white-space:nowrap; }
/* 4C — chat KPI set (above the chat). */
.ops-chat-kpis { display:flex; gap:6px; }
.ops-chat-kpi { flex:1; background:var(--p-band-3); border:1px solid var(--p-border); border-radius:8px; padding:5px 4px; text-align:center; }
.ops-chat-kpi .v { font-size:15px; font-weight:800; color:var(--p-text); line-height:1; }
.ops-chat-kpi .l { font-size:9px; color:var(--p-text-2); margin-top:3px; }
/* 4C — live red pulsing awaiting-reply badge on the chat icon. */
/* Zone B: cockpit awaiting-count badge uses the STRONG platform pulse standard (ttPulseRed, defined in main.css) — was the weaker opsAwaitPulse. */
.ops-awaiting-badge { position:absolute; top:-6px; inset-inline-end:-8px; min-width:15px; height:15px; line-height:15px; padding:0 4px; border-radius:999px; background:var(--p-red-d,#DC2626); color:#fff; font-size:9px; font-weight:800; text-align:center; animation:ttPulseRed 1.4s infinite; }

/* ===== Cockpit 3/5 — Analysis ⇄ Full-table modes =====
   Full-table: both side rails collapse to a 44px vertical icon STRIP, the analytics row hides, and the
   centre table goes edge-to-edge + takes the freed height. A strip icon opens its panel as a floating
   overlay over the table (live panel relocated in, restored on close). Colours = our theme vars. */
/* Cockpit 3/5 — INDEPENDENT per-rail collapse: right (ops-comms, 1st column) and left (ops-support, 3rd)
   fold on their own; the centre tickets table reflows. Both collapsed = full-table (44/1fr/44). */
/* Collapsed: the one right rail shrinks to a 64px icon+number strip; the centre takes the rest. */
body.ops-active.rail-comms-collapsed .ops-body { grid-template-columns: 64px minmax(0,1fr); }
/* a collapsed rail shows ONLY its icon strip; the full panels hide. overflow:visible so the awaiting
   badge's pulse ring (mon-pulse-border) isn't clipped by the rail edge. */
body.rail-comms-collapsed #ops-comms-rail, body.rail-support-collapsed #ops-support-rail { padding:6px 4px; gap:9px; align-items:center; overflow:visible; }
body.rail-comms-collapsed #ops-comms-rail > :not(.ops-strip), body.rail-support-collapsed #ops-support-rail > :not(.ops-strip) { display:none; }
.ops-strip { display:none; flex-direction:column; align-items:center; gap:8px; width:100%; }
body.rail-comms-collapsed #ops-comms-strip, body.rail-support-collapsed #ops-support-strip { display:flex; }
/* per-rail collapse handle (shown when the rail is EXPANDED), tucked at the rail's inner (toward-centre) edge. */
.ops-rail { position:relative; }
/* B025 PART D — vertical EDGE HANDLE (adopted option 1). A thin always-visible strip on the rail's INNER
   edge (inset-inline-end = the boundary with the table) carrying a gold chevron pill; click toggles.
   Theme-aware day+night via tokens; gold accent. It stays visible in BOTH states (expanded + collapsed). */
.ck-rail-edge { position:absolute; inset-block:0; inset-inline-end:0; z-index:4; width:15px; padding:0;
  border:none; border-inline-end:3px solid var(--p-gold); border-radius:0;
  background:color-mix(in srgb, var(--p-gold) 13%, transparent);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .12s; }
.ck-rail-edge:hover { background:color-mix(in srgb, var(--p-gold) 24%, transparent); }
.ck-rail-edge-chev { width:17px; height:34px; border-radius:5px; background:var(--p-gold); color:#1d2520;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.18); margin-inline-end:-9px; }
/* The chevron glyph direction is computed from dir + collapsed state (logical, by construction) — NEVER a
   hardcoded ◂/▸. A right-pointing base glyph is mirrored by (collapsed XOR rtl) so it always points
   correctly: expanded → toward the table (inline-end) · collapsed → toward the rail (inline-start). */
.ck-rail-edge-chev::before { content:"\25B6"; display:block; font-size:12px; font-weight:900; line-height:1; transform:scaleX(1); transition:transform .15s; }
body.rail-comms-collapsed .ck-rail-edge-chev::before { transform:scaleX(-1); }
html[dir="rtl"] .ck-rail-edge-chev::before { transform:scaleX(-1); }
html[dir="rtl"] body.rail-comms-collapsed .ck-rail-edge-chev::before { transform:scaleX(1); }
/* keep the handle visible when the rail is collapsed (override the strip-only display:none on rail children). */
body.rail-comms-collapsed #ops-comms-rail > #ck-rail-comms-tgl { display:flex; }
/* give the EXPANDED rail content clearance so the edge handle never collides with it. */
body.ops-active:not(.rail-comms-collapsed) #ops-comms-rail { padding-inline-end:20px; }
/* collapsed-strip: stack the live number under the large icon (💬 57). */
.ops-strip-ic { flex-direction:column; gap:1px; }
.ops-strip-num { font-size:13px; font-weight:800; color:var(--p-text-2); line-height:1; }   /* phase-1 #7: scaled with the bigger icons */
.ops-strip-ic.ck-strip-exp { color:var(--p-teal-d); font-weight:800; border-color:var(--p-teal-d); }
/* reduced motion: rail relayout is instant (no animation added); transitions on the small controls only. */
@media (prefers-reduced-motion: reduce){ .ck-rail-edge, .ck-rail-edge-chev::before, .ops-strip-ic { transition:none; } .ops-awaiting-badge, .ops-strip-badge { animation:none; } }   /* B033 PART I: stop the awaiting-reply pulse under reduced-motion (the red badge still shows) */
/* Phase-1 #7: collapsed-strip icons enlarged ~55% (36px → 56px, 17px → 26px) for easier tapping. */
.ops-strip-ic { width:56px; height:56px; border-radius:12px; border:1px solid var(--p-border); background:var(--p-surface);
  color:var(--p-text); font-size:26px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; position:relative; transition:background .12s,border-color .12s; }
.ops-strip-ic:hover { background:var(--p-band-3); border-color:var(--p-teal-d); }
/* Phase-1 #7: the awaiting-reply badge pulses STRONG red — REUSES the data-health «struggling service»
   alarm pulse (mon-pulse-border), not a forked animation, so source + strength match exactly. */
.ops-strip-badge { position:absolute; top:-6px; inset-inline-end:-6px; min-width:19px; height:19px; line-height:19px; padding:0 4px;
  border-radius:999px; background:var(--p-red-d,#DC2626); color:#fff; font-size:11px; font-weight:800; text-align:center;
  animation: ttPulseRed 1.4s infinite; }   /* B033 PART I: the ONE strong pulse standard (ttPulseRed) — was the weaker mon-pulse-border; matches .ops-awaiting-badge */
/* the rail-panel overlay (a relocated live panel floats over the table). z-index 88 < chat popup (90),
   so opening a chat from the relocated chats list shows the medium chat popup on top. */
.ops-rail-pop { position:fixed; inset:0; z-index:88; display:none; }
.ops-rail-pop.open { display:block; }
.ops-rail-pop-bd { position:absolute; inset:0; background:transparent; }
.ops-rail-pop-card { position:absolute; top:60px; width:min(400px,44vw); max-height:78vh; display:flex; flex-direction:column; overflow:hidden;
  background:var(--p-surface); border:1px solid var(--p-border); border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.42); }
.ops-rail-pop-hd { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 13px; background:var(--p-hd-grad); flex-shrink:0; }
.ops-rail-pop-hd .t { font-weight:800; color:#fff; font-size:13px; }
.ops-rail-pop-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; }
.ops-rail-pop-body { flex:1 1 auto; min-height:0; overflow:auto; padding:8px; display:flex; flex-direction:column; }
.ops-rail-pop-body > * { flex:1 1 auto; min-height:0; display:flex; }
/* mode toggle button in the ribbon (wider than the 32px icon buttons) */
#ck-mode-btn { width:auto; padding:0 12px; font-size:12px; font-weight:700; white-space:nowrap; gap:5px; }

/* ===== Cockpit 4/5 — analytics home (leaderboard + center + indicators + matching + daily chart) =====
   Sits ABOVE the table in Analysis mode; collapses entirely in Full-table mode. Tracker computations,
   OUR colours (theme vars, day/night). The toggle bar stays visible; the panels area scrolls internally. */
.ck-analytics { display:flex; flex-direction:column; gap:6px; flex:0 1 auto; min-height:0; }
body.cockpit-fulltable .ck-analytics { display:none; }                 /* full-table mode collapses all of this */
.ck-an-bar { flex:0 0 auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ck-an-toggles { display:flex; gap:6px; flex-wrap:wrap; }
.ck-an-tgl { font-family:inherit; font-size:11.5px; font-weight:700; padding:5px 10px; border-radius:8px; cursor:pointer;
  background:var(--p-surface); color:var(--p-text-2); border:1px solid var(--p-border); white-space:nowrap; }
.ck-an-tgl:hover { background:var(--p-band-1); }
.ck-an-tgl.on { background:var(--p-teal-bg); color:var(--p-teal); border-color:var(--p-teal); }
/* Phase-1 #10: .ck-an-personal styles removed with the card. */
.ck-an-panels { flex:0 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:8px; max-height:54vh; }
.ck-an-panel { display:none; background:var(--p-surface); border:1px solid var(--p-border); border-radius:12px; padding:10px 12px; }
.ck-an-panel.open { display:block; }
.ck-an-ttl { font-size:12.5px; font-weight:800; color:var(--p-text-2); margin-bottom:8px; display:flex; align-items:center; gap:7px; }
.ck-an-ttl .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:1px 8px; }
/* leaderboard cards */
.ck-lb-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(208px,1fr)); gap:9px; }
.ck-card { position:relative; background:var(--p-band-1); border:1px solid var(--p-border); border-radius:12px; padding:11px; overflow:hidden; cursor:pointer; transition:transform .12s,box-shadow .12s; }
.ck-card:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.12); }
.ck-card .ck-ribbon { position:absolute; inset-inline-start:0; top:0; font-size:11px; font-weight:900; color:#fff; padding:2px 9px; border-end-end-radius:9px; }
.ck-card .ck-ribbon.r1 { background:#E0A82E; } .ck-card .ck-ribbon.r2 { background:#9AA6B2; } .ck-card .ck-ribbon.r3 { background:#C77B49; } .ck-card .ck-ribbon.rN { background:var(--p-text-4); }
.ck-card-top { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:6px; padding-inline-start:24px; }
.ck-card-name { font-size:12.5px; font-weight:800; color:var(--p-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ck-card-tier { font-size:9.5px; font-weight:800; padding:1px 8px; border-radius:999px; white-space:nowrap; }
.ck-card-mid { display:flex; align-items:center; gap:10px; }
.ck-ring { position:relative; width:78px; height:78px; flex-shrink:0; }
.ck-ring svg { width:78px; height:78px; transform:rotate(0); }
.ck-ring-c { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ck-ring-c .n { font-size:19px; font-weight:900; line-height:1; }
.ck-ring-c .s { font-size:9px; color:var(--p-text-3); font-weight:700; }
.ck-cntbox { flex:1; text-align:center; background:var(--p-surface); border:1px solid var(--p-border); border-radius:9px; padding:6px 4px; }
.ck-cntbox .n { font-size:18px; font-weight:900; color:var(--p-teal); }
.ck-cntbox .l { font-size:9.5px; color:var(--p-text-3); font-weight:700; }
.ck-dims { display:flex; gap:4px; margin-top:8px; }
.ck-dim { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; }
.ck-dim-dot { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:11px; font-weight:900; }
.ck-dim-lbl { font-size:8px; color:var(--p-text-3); font-weight:700; text-align:center; line-height:1.15; }
/* center card */
.ck-center { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.ck-center .ck-ring { width:96px; height:96px; } .ck-center .ck-ring svg { width:96px; height:96px; }
.ck-center .ck-ring-c .n { font-size:24px; }
.ck-center-dims { display:flex; gap:8px; flex-wrap:wrap; flex:1; }
/* indicator cards */
.ck-ind-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px; }
.ck-ind { background:var(--p-band-1); border:1px solid var(--p-border); border-radius:10px; padding:9px 10px; }
.ck-ind-hd { font-size:11.5px; font-weight:800; color:var(--p-text-2); margin-bottom:6px; }
.ck-ind-row { display:flex; align-items:center; gap:6px; padding:3px 4px; border-radius:6px; font-size:11.5px; }
.ck-ind-row.clk { cursor:pointer; } .ck-ind-row.clk:hover { background:var(--p-band-3); }
.ck-ind-row .lbl { flex:1; color:var(--p-text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ck-ind-row .cnt { font-weight:800; } .ck-ind-row .pc { font-size:9.5px; color:var(--p-text-3); font-weight:700; min-width:30px; text-align:end; }
/* matching */
.ck-match-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px; }
.ck-match-card { background:var(--p-band-1); border:1px solid var(--p-border); border-radius:10px; padding:9px 11px; cursor:pointer; }
.ck-match-card:hover { border-color:var(--p-teal); }
.ck-match-card.orphan { border-color:var(--p-amber); background:var(--p-amber-bg,#FFFBEB); }
.ck-match-card .t { font-size:12px; font-weight:800; color:var(--p-text-2); margin-bottom:4px; }
.ck-match-card .c { font-size:20px; font-weight:900; color:var(--p-teal); }
.ck-match-card .pri { display:flex; gap:5px; flex-wrap:wrap; margin-top:5px; }
.ck-match-card .pri span { font-size:9.5px; font-weight:700; color:var(--p-text-3); background:var(--p-surface); border:1px solid var(--p-border); border-radius:999px; padding:1px 7px; }
/* daily chart */
.ck-chart-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.ck-chart-legend { display:flex; gap:12px; align-items:center; }
.ck-chart-legend span { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:var(--p-text-2); }
.ck-chart-legend i { width:14px; height:3px; border-radius:2px; display:inline-block; }
.ck-mashaer-cfg { display:flex; gap:6px; align-items:center; margin-inline-start:auto; font-size:10.5px; color:var(--p-text-3); }
.ck-mashaer-cfg input { font-family:inherit; font-size:10.5px; padding:2px 5px; border-radius:6px; border:1px solid var(--p-border); background:var(--p-surface); color:var(--p-text-2); }
.ck-chart-wrap { width:100%; overflow:hidden; }
#ck-daily-canvas { width:100%; height:300px; display:block; }
.ck-an-empty { padding:18px; text-align:center; color:var(--p-text-3); font-size:12px; font-weight:700; }

/* ===== Cockpit PART C — support rail (الإسناد والأدوات) ===== */
.ops-support { gap:8px !important; }
/* launchers */
.ops-sup-launchers { display:grid; grid-template-columns:1fr; gap:6px; flex:0 0 auto; }
/* Cockpit 2026-06-13: big green «بلاغ جديد» atop the right rail — full width, moderate height. */
.ops-newcall-btn { width:100%; flex:0 0 auto; padding:11px 12px; font-size:15px; font-weight:800; border-radius:10px; display:flex; align-items:center; justify-content:center; gap:7px; }
.ops-launch { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:8px 4px; background:var(--p-surface); border:1px solid var(--p-border); border-radius:var(--r-sm,8px); color:var(--p-text); font:inherit; font-size:11px; font-weight:700; cursor:pointer; position:relative; transition:background .12s,border-color .12s; }
.ops-launch:hover { background:var(--p-band-3); border-color:var(--p-teal-d); }
.ops-launch-ic { font-size:18px; line-height:1; }
.ops-launch-soon { grid-column:1 / -1; flex-direction:row; gap:6px; opacity:.78; }
.ops-soon { font-size:9px; font-weight:700; color:var(--p-text-4); background:var(--p-band-1); border:1px solid var(--p-border); border-radius:999px; padding:1px 7px; }
/* charts */
.ops-sup-charts { display:flex; flex-direction:column; gap:8px; flex:0 0 auto; }
.ops-chart-sq { background:var(--p-surface); border:1px solid var(--p-border); border-radius:var(--r-sm,8px); display:flex; flex-direction:column; overflow:hidden; }
.ops-chart-hd { display:flex; align-items:center; justify-content:space-between; padding:4px 8px; font-size:11px; font-weight:700; color:var(--p-text-2); border-bottom:1px solid var(--p-border); background:var(--p-band-3); }
.ops-chart-exp { background:none; border:none; cursor:pointer; color:var(--p-text-3); font-size:13px; padding:0 2px; line-height:1; }
.ops-chart-exp:hover { color:var(--p-teal-d); }
.ops-chart-bd { height:128px; padding:4px; }
/* references shelf */
.ops-sup-refs { display:flex; flex-direction:column; min-height:0; flex:1 1 auto; }
/* B025 PART E2: match the Data Room header height to its siblings (.ops-call-hd / .ops-chats-hd) —
   padding:9px 12px; font-size:13px; no margin-bottom — so the three rail headers are identical height. */
.ops-sup-hd { display:flex; align-items:center; justify-content:space-between; padding:9px 12px; font-size:13px; font-weight:700; color:var(--p-text-2); flex:0 0 auto; }
.ops-sup-add { background:var(--p-teal-d); color:#fff; border:none; border-radius:6px; cursor:pointer; font:inherit; font-size:10px; font-weight:700; padding:3px 8px; }
.ops-sup-add:hover { filter:brightness(1.08); }
.ops-ref-search { width:100%; box-sizing:border-box; border:1px solid var(--p-border); border-radius:6px; background:var(--p-bg); color:var(--p-text); font:inherit; font-size:11px; padding:5px 8px; margin-bottom:6px; flex:0 0 auto; }
.ops-ref-list { flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:4px; }
/* tools */
.ops-sup-tools { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; flex:0 0 auto; }
.ops-tool { display:flex; flex-direction:column; align-items:center; gap:2px; padding:7px 2px; background:var(--p-surface); border:1px solid var(--p-border); border-radius:var(--r-sm,8px); color:var(--p-text); font:inherit; font-size:10px; font-weight:700; cursor:pointer; }
.ops-tool:hover { background:var(--p-band-3); border-color:var(--p-teal-d); }
.ops-tool-ic { font-size:17px; line-height:1; }

/* ===== launcher overlay (البلاغات / العملاء over the cockpit) ===== */
#ops-overlay { position:fixed; inset:0; z-index:1200; display:none; flex-direction:column; background:rgba(15,23,42,.42); backdrop-filter:blur(2px); }
#ops-overlay .ops-ov-card { margin:28px; flex:1 1 auto; min-height:0; background:var(--p-bg); border:1px solid var(--p-border); border-radius:var(--r-md,14px); box-shadow:var(--sh-modal,0 24px 60px rgba(0,0,0,.35)); display:flex; flex-direction:column; overflow:hidden; }
#ops-overlay .ops-ov-hd { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-bottom:1px solid var(--p-border); background:var(--p-surface); flex:0 0 auto; }
#ops-overlay .ops-ov-title { font-size:15px; font-weight:800; color:var(--p-text); }
#ops-overlay .ops-ov-x { background:none; border:1px solid var(--p-border); border-radius:8px; cursor:pointer; color:var(--p-text-2); font-size:15px; padding:4px 12px; font-weight:700; }
#ops-overlay .ops-ov-x:hover { background:var(--p-band-1); }
#ops-overlay .ops-ov-body { flex:1 1 auto; min-height:0; overflow:auto; padding:12px 16px; }
#ops-overlay .ops-ov-body > .page { display:block !important; }
#ops-overlay .ops-ov-soon { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:10px; color:var(--p-text-3); font-size:14px; font-weight:700; }

/* ===== calculator popup ===== */
#ops-calc-pop { position:fixed; z-index:1300; width:236px; background:var(--p-surface); border:1px solid var(--p-border); border-radius:14px; box-shadow:var(--sh-modal,0 18px 50px rgba(0,0,0,.3)); padding:12px; }
#ops-calc-pop .ops-calc-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; font-size:12px; font-weight:700; color:var(--p-text-2); }
#ops-calc-pop .ops-calc-scr { background:var(--p-bg); border:1px solid var(--p-border); border-radius:8px; padding:8px 10px; font-family:Inter,monospace; font-size:20px; font-weight:700; text-align:left; color:var(--p-text); min-height:30px; overflow:hidden; direction:ltr; }
#ops-calc-pop .ops-calc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:8px; }
#ops-calc-pop .ops-calc-btn { padding:10px 0; border:1px solid var(--p-border); border-radius:8px; background:var(--p-bg); color:var(--p-text); font:inherit; font-size:15px; font-weight:700; cursor:pointer; }
#ops-calc-pop .ops-calc-btn:hover { background:var(--p-band-3); }
#ops-calc-pop .ops-calc-btn.op { background:var(--p-band-1); color:var(--p-teal-d); }
#ops-calc-pop .ops-calc-btn.eq { background:var(--p-teal-d); color:#fff; }
#ops-calc-pop .ops-calc-btn.clr { background:var(--p-red-bg); color:var(--p-red-d); }

/* ===== notes popup ===== */
#ops-notes-pop { position:fixed; z-index:1300; width:340px; max-width:92vw; background:var(--p-surface); border:1px solid var(--p-border); border-radius:14px; box-shadow:var(--sh-modal,0 18px 50px rgba(0,0,0,.3)); padding:14px; }
#ops-notes-pop .ops-notes-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; font-size:13px; font-weight:800; color:var(--p-text); }
#ops-notes-pop textarea { width:100%; box-sizing:border-box; min-height:200px; resize:vertical; border:1px solid var(--p-border); border-radius:8px; background:var(--p-bg); color:var(--p-text); font:inherit; font-size:13px; line-height:1.7; padding:10px; }
#ops-notes-pop .ops-notes-ft { display:flex; align-items:center; justify-content:space-between; margin-top:8px; font-size:11px; color:var(--p-text-3); }

/* COMPACT the intake form so wazara/company mode fits 100vh−48px with NO scroll (reflowed dense). */
body.ops-active #page-intake .intake-back-btn { display:none; }
body.ops-active #page-intake .form-card-header { padding:6px 12px; min-height:0; }
body.ops-active #page-intake .page-title { font-size:15px; }
body.ops-active #page-intake .mode-cluster .mode-logo img { width:40px; height:40px; }
body.ops-active #page-intake .form-card > .form-card-header ~ .form-section,
body.ops-active #page-intake .form-section { padding:5px 12px; }
body.ops-active #page-intake .form-section .grid { gap:6px 10px; }
body.ops-active #page-intake .field-label { font-size:10.5px; margin-bottom:2px; }
body.ops-active #page-intake .inp { padding:5px 8px; font-size:12px; }
body.ops-active #page-intake .tog-btn { padding:5px 8px; font-size:11px; }
body.ops-active #page-intake textarea.inp { rows:2; min-height:42px; max-height:48px; resize:none; }
body.ops-active #page-intake .form-actions { padding:6px 12px; }
body.ops-active #page-intake .btn { padding:6px 14px; font-size:12.5px; }
/* the form body fills + never scrolls the page; if a mode ever exceeds, the form area (not the page) clips */
body.ops-active #page-intake .form-card { overflow-y:auto; }  /* B1.3: was overflow:hidden; allow internal scroll now the card is content-height */

/* TopNav: ONE nav model — a top-centre HANDLE drops the .sidebar as a panel (body.ops-nav-open reveals
   it; base hidden state + transition live in main.css). No ☰ hamburger, no persistent side rail, no
   backdrop: it auto-hides on mouse-leave / selection / outside-click / Escape. */
/* TopNav palette — ported VERBATIM from the approved mockup (D:\Sajed\Downloads\nav_top_handle_demo.html),
   kept on nav-scoped tokens so day/night switch cleanly WITHOUT touching the platform-wide --p-* tokens. */
:root {
  --nav-surface:#FBF8F0; --nav-surface2:#F4EFE2; --nav-ink:#16291F; --nav-ink2:#3C5A4D;
  --nav-ink3:#7C9387; --nav-line:#E4DECF; --nav-green:#0F6E56; --nav-greenbg:#E1F5EE;
}
html[data-theme="night"] {
  --nav-surface:#16211C; --nav-surface2:#101813; --nav-ink:#E8F0EA; --nav-ink2:#A9C0B4;
  --nav-ink3:#6F877B; --nav-line:#27332C; --nav-green:#3DCBA0; --nav-greenbg:#12281F;
}
.tp-nav-handle, #ops-nav-handle { display: none !important; }   /* hamburgers removed (TopNav) */
.p360-nav-handle {
  /* left:50% (physical) — horizontal centering is direction-neutral; see .sidebar note in main.css. */
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  z-index: 1501; width: 88px; height: 21px;
  background: var(--nav-green); color: #fff; border: 0;   /* mockup handle = green, white chevron */
  border-radius: 0 0 13px 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 5px 14px -5px rgba(0, 0, 0, 0.45);
  font-size: 15px; line-height: 1;
}
.p360-nav-handle:hover { filter: brightness(1.08); }
.p360-nav-handle .pnh-ic { pointer-events: none; transition: transform 0.24s ease; }
/* vertical chevron (down→up) — direction-neutral, never flips with RTL/LTR */
body.ops-nav-open .p360-nav-handle .pnh-ic { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .p360-nav-handle .pnh-ic { transition: none; } }
body.ops-nav-open .sidebar {
  transform: translateX(-50%) translateY(0);
  opacity: 1; pointer-events: auto;
}
/* P3: app chrome is NON-selectable by default; only real content opts back into text selection. */
body { -webkit-user-select: none; -moz-user-select: none; user-select: none; }
input, textarea, select, [contenteditable="true"],
.ux-thread, .ux-thread *, .ux-msg-bubble, .ux-msg-bubble *,
.ux-thread-hd, .ux-thread-hd *, #ux-ci-mount, #ux-ci-mount *,
.cu-msg-bubble, .ticket-text, .selectable, .selectable * {
  -webkit-user-select: text; -moz-user-select: text; user-select: text;
}

/* ---- Cockpit PART B: comms rail (call stub + chats indicator) + chat popup ---- */
.ops-call { background:var(--p-surface); border:1px solid var(--p-border); border-radius:var(--r-md,12px); flex-shrink:0; overflow:hidden; }
.ops-call-hd { display:flex; align-items:center; gap:8px; padding:9px 12px; font-size:13px; font-weight:700; color:var(--p-text); cursor:pointer; }
.ops-call-ic { font-size:15px; }
.ops-call-hd .ck-soon { margin-inline-start:auto; }
.ops-call-chev { color:var(--p-text-3); font-size:11px; }
.ops-call-body { padding:10px 12px; display:flex; flex-direction:column; gap:8px; }
.ops-call-status { text-align:center; font-size:12px; padding:2px 0; }
.ops-call-wrapup { display:none; padding:8px 12px; font-size:11.5px; color:var(--p-text-3); border-top:1px solid var(--p-border); text-align:center; }
.ops-call.collapsed .ops-call-body { display:none; }
.ops-call.collapsed .ops-call-wrapup { display:block; }
.ops-call.collapsed .ops-call-chev { display:inline-block; transform:rotate(-90deg); }

.ops-chats { background:var(--p-surface); border:1px solid var(--p-border); border-radius:var(--r-md,12px); flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.ops-chats-hd { display:flex; align-items:center; gap:8px; padding:9px 12px; font-size:13px; font-weight:700; color:var(--p-text); border-bottom:1px solid var(--p-border); }
.ops-chats-count { margin-inline-start:auto; font-size:11px; font-weight:700; color:var(--p-text-3); background:var(--p-band-1); border:1px solid var(--p-border); border-radius:999px; padding:1px 8px; }
.ops-chats-list { flex:1; min-height:0; overflow-y:auto; padding:6px; }
/* WhatsApp start-trigger + conversations search/filter + compact popover (theme-aware) */
#ops-chats-panel { position:relative; }
.ops-chats-hd { display:flex; align-items:center; gap:6px; }
.ops-wa-trigger { margin-inline-start:6px; position:relative; display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border:1px solid var(--p-border); border-radius:7px; background:var(--p-surface); cursor:pointer; padding:0; }
.ops-wa-trigger:hover { background:var(--p-band-1); }
.ops-wa-trigger svg { display:block; }
.ops-wa-plus { position:absolute; bottom:-3px; inset-inline-end:-3px; font-size:10px; font-weight:900; line-height:1; color:#fff; background:#25D366; border-radius:50%; width:13px; height:13px; display:flex; align-items:center; justify-content:center; }
.ops-chats-filters { display:flex; gap:5px; padding:6px; border-bottom:1px solid var(--p-border); }
.ops-chats-search { flex:1; min-width:0; font-family:inherit; font-size:11.5px; padding:4px 6px; border:1px solid var(--p-border); border-radius:6px; background:var(--p-surface); color:var(--p-text); }
.ops-chats-fsel { font-family:inherit; font-size:11px; padding:4px 4px; border:1px solid var(--p-border); border-radius:6px; background:var(--p-surface); color:var(--p-text); max-width:86px; }
/* 5C — shared client-type × channel filter tree (both surfaces). */
.ux-cf-wrap { position:relative; flex:1; min-width:0; }
.ux-cf-trigger { width:100%; display:flex; align-items:center; gap:5px; font-family:inherit; font-size:11px; padding:4px 6px; border:1px solid var(--p-border); border-radius:6px; background:var(--p-surface); color:var(--p-text); cursor:pointer; }
.ux-cf-trigger > span:first-child { flex:1; text-align:start; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ux-cf-chev { font-size:9px; color:var(--p-text-3); }
.ux-cf-panel { display:none; position:absolute; z-index:60; top:calc(100% + 3px); inset-inline-start:0; min-width:max(100%,180px); max-height:280px; overflow-y:auto; background:var(--p-surface); border:1px solid var(--p-border); border-radius:8px; box-shadow:0 10px 30px rgba(0,0,0,0.18); padding:4px; }
.ux-cf-wrap.open .ux-cf-panel { display:block; }
.ux-cf-row { display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:5px; cursor:pointer; font-size:11.5px; color:var(--p-text); white-space:nowrap; }
.ux-cf-row:hover { background:var(--p-band-1); }
.ux-cf-row.active { background:var(--p-teal-bg); color:var(--p-teal-d); font-weight:700; }
.ux-cf-lbl { flex:1; text-align:start; }
.ux-cf-cnt { font-size:10px; font-weight:700; color:var(--p-text-2); background:var(--p-band-2); padding:1px 6px; border-radius:999px; min-width:18px; text-align:center; flex-shrink:0; }
.ux-cf-row.active .ux-cf-cnt { background:var(--p-teal); color:#fff; }
.ops-wa-pop { position:absolute; inset-inline-end:8px; top:40px; z-index:40; width:230px; background:var(--p-surface); border:1px solid var(--p-border); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.18); padding:10px; }
.ops-wa-pop-t { font-size:12px; font-weight:700; color:var(--p-text); margin-bottom:8px; }
.ops-wa-pop-inp { width:100%; box-sizing:border-box; font-family:inherit; font-size:12px; padding:6px 8px; border:1px solid var(--p-border); border-radius:6px; background:var(--p-bg); color:var(--p-text); margin-bottom:6px; }
.ops-wa-pop-btn { width:100%; font-size:12px; }
.ops-wa-pop-msg { margin-top:6px; font-size:11.5px; }
.ops-chat-tile { display:flex; align-items:center; gap:9px; padding:8px 9px; border-radius:10px; cursor:pointer; border:1px solid transparent; margin-bottom:4px; }
.ops-chat-tile:hover { background:var(--p-band-1); border-color:var(--p-border); }
.ops-chat-ico { width:30px; height:30px; border-radius:8px; background:var(--p-band-3); display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.ops-chat-meta { flex:1; min-width:0; }
.ops-chat-nm { font-size:12.5px; font-weight:700; color:var(--p-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ops-chat-pv { font-size:11px; color:var(--p-text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ops-chat-right { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.ops-chat-dot { width:8px; height:8px; border-radius:50%; background:var(--p-red); flex-shrink:0; }
.ops-chat-pill { font-size:10px; font-weight:700; padding:2px 8px; border-radius:999px; white-space:nowrap; }
.ops-chat-pill.st-waiting { background:rgba(220,38,38,0.12); color:#DC2626; }
.ops-chat-pill.st-active  { background:rgba(22,163,74,0.12); color:#16A34A; }
.ops-chat-pill.st-idle    { background:rgba(217,119,6,0.14); color:#D97706; }   /* 5D idle */
.ops-chat-pill.st-closed  { background:rgba(100,116,139,0.14); color:#64748B; }
html[data-theme="night"] .ops-chat-pill.st-waiting{ background:var(--p-red-bg); color:var(--p-red-d); }
html[data-theme="night"] .ops-chat-pill.st-active { background:var(--p-green-bg); color:var(--p-green-d); }
html[data-theme="night"] .ops-chat-pill.st-idle   { background:var(--p-amber-bg); color:var(--p-amber-d); }
html[data-theme="night"] .ops-chat-pill.st-closed { background:var(--p-band-2); color:var(--p-text-2); }
.ops-chats-empty { color:var(--p-text-3); font-size:12px; text-align:center; padding:14px 0; }

/* Chat popup — the relocated ux_ thread; ONLY this scrolls (page stays 0,0). */
/* §8.4: theme-aware DIMMED veil (focus dimming, not a black overlay). Day = soft near-white;
   night override below = muted dark. The cockpit behind reads as dimmed-but-visible. */
.ops-chat-pop { position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; background:rgba(248,250,252,0.62); }
html[data-theme="night"] .ops-chat-pop { background:rgba(15,23,42,0.55); }
/* §8.4: MEDIUM popup — clearly bigger than the old 560px, but not full-page. One size, no per-user pref. */
/* A1: two-pane (thread + list) → wider card. */
.ops-chat-pop-card { width:min(1120px,94vw); height:min(88vh,860px); background:var(--p-surface); border:1px solid var(--p-border); border-radius:14px; box-shadow:0 24px 70px rgba(0,0,0,0.45); display:flex; flex-direction:column; overflow:hidden; }
.ops-chat-pop-hd { display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--p-hd-grad); border-bottom:1px solid var(--p-border); flex-shrink:0; }
.ops-chat-pop-name { font-weight:800; color:#fff; font-size:14px; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ops-chat-pop-actions { display:flex; align-items:center; gap:6px; }
.ops-chat-pop-convert { border:none; background:rgba(255,255,255,0.18); color:#fff; font-size:12px; font-weight:700; padding:6px 12px; border-radius:8px; cursor:pointer; }
.ops-chat-pop-convert:hover { background:rgba(255,255,255,0.3); }
.ops-chat-pop-btn { 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; }
.ops-chat-pop-btn:hover { background:rgba(255,255,255,0.28); }
.ops-chat-pop-body { flex:1; min-height:0; display:flex; overflow:hidden; }
/* A1: the popup hosts the whole .ux-app (two-pane) — fill the body, drop the standalone box chrome. */
.ops-chat-pop-body .ux-app { width:100%; height:100%; min-height:0; border:none; border-radius:0; box-shadow:none; }
.ops-chat-pop-body .ux-center { min-height:0; }
/* enforce the minimize-first convert path: hide the inner 🎫 while mounted in the popup */
/* A7: the convert-to-ticket button now lives in the bottom compose row (icon-only) in the popup too. */

/* v0.9.161 Part 2 — hover-reveal counterpart language + copy (agent cockpit). Desktop-only, theme-aware. */
.ux-bubble-hover{ display:none; margin-top:6px; padding-top:6px; border-top:1px dashed var(--p-border); }
.ux-bubble-alt{ font-size:12px; color:var(--p-text-2); margin-bottom:5px; unicode-bidi:plaintext; line-height:1.7; }
.ux-copy-btn{ font-size:11px; font-weight:700; background:var(--p-band-3); border:1px solid var(--p-border); color:var(--p-text-2); border-radius:6px; padding:2px 8px; cursor:pointer; }
.ux-copy-btn:hover{ background:var(--p-emerald-bg); color:var(--p-emerald-d); border-color:var(--p-emerald); }
@media (hover:hover) and (pointer:fine){ .ux-msg-bubble:hover .ux-bubble-hover{ display:block; } }
/* agent chat-language display toggle in the thread header */
.ux-hd-mode{ font-family:inherit; font-size:11px; font-weight:700; background:var(--p-band-3); border:1px solid var(--p-border); color:var(--p-text); border-radius:999px; padding:2px 9px; cursor:pointer; }
/* v0.9.163 emoji picker popup (cockpit) — theme-aware via the picker's own .dark/.light class */
.ck-emoji-pop{ position:fixed; z-index:10000; box-shadow:var(--sh-modal); border-radius:12px; overflow:hidden; display:none; }
.ck-emoji-pop emoji-picker{ width:340px; height:400px; }

/* ============================================================
   SETTINGS REDESIGN (v0.9.315) — full width · sticky rail · double-bezel cards · premium switch.
   All colors via theme tokens so DAY + NIGHT both work. Scoped to #page-settings / new classes only.
   ============================================================ */
:root{
  --ease-out: cubic-bezier(0.23,1,0.32,1);
  --ease-drawer: cubic-bezier(0.32,0.72,0,1);
  --soft-em: 0 18px 40px -22px rgba(15,110,86,.28), 0 2px 8px rgba(16,36,31,.04);
}
/* PART A — settings fills the full width (overrides the global .page 1180 cap, settings only) */
#page-settings{ max-width:none; margin-inline:0; }
/* Settings shell — vertical column: horizontal tab bar on TOP, full-width panels below (replaces the old rail). */
#page-settings .settings-shell{ position:relative; display:flex; flex-direction:column; align-items:stretch; }
#page-settings .settings-panels{ flex:1; min-width:0; margin-inline-start:0; padding-inline-start:0; display:flex; flex-direction:column; gap:16px; }
#page-settings .settings-tabs-nav{ position:static; inset-inline-start:auto; top:auto; }
#page-settings .settings-panel-intro{ margin:2px 2px 0; }
/* NIGHT tab-bar polish (overrides the day values in main.css). Active-tab white label/icon is id-scoped in
   main.css so it wins in both themes. The night nav strip stays dark (handled in main.css). */
html[data-theme="night"] .settings-tab{ color:var(--p-text-2); }
html[data-theme="night"] .settings-tab[data-settings-tab="general"] i     { color:#9A8DEA; }
html[data-theme="night"] .settings-tab[data-settings-tab="tables"] i       { color:#5DCAA5; }
html[data-theme="night"] .settings-tab[data-settings-tab="chat"] i         { color:#F0997B; }
html[data-theme="night"] .settings-tab[data-settings-tab="translation"] i  { color:#85B7EB; }
html[data-theme="night"] .settings-tab[data-settings-tab="companies"] i    { color:#EF9F27; }
html[data-theme="night"] .settings-tab::before{ background:rgba(255,255,255,.12); }

/* ===== Live Monitoring panel (Block 3/4) — collapsed pulse + expanded coverage/uptime. Bounded; logical CSS;
   day+night via tokens. The bars+correlation-lines are the only feature-specific visual, inside .mon-bars. ===== */
/* P3/P5 — the panel is the FULL-WIDTH row that holds the strip (right, original ~800px) + the channel toggles
   (left, in the previously-empty space). It stays the relative positioning context for the expanded overlay (P4). */
.mon-panel{ position:relative; width:100%; box-sizing:border-box; margin-bottom:16px; }
/* B013 — ONE row: toggles to the LEFT (a SEPARATE element, OUTSIDE the strip → never overlapping it) and the
   strip on the RIGHT keeping its EXACT original look + size (long tinted bar, border, pulsing glow). */
.mon-row{ display:flex; align-items:center; gap:14px; width:100%; }
.mon-strip{ position:relative; flex:0 1 800px; box-sizing:border-box; display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:9px 14px; border-radius:12px; cursor:pointer;
  background:linear-gradient(135deg, color-mix(in srgb, var(--p-green) 13%, var(--p-surface)), var(--p-surface));
  border:0.5px solid color-mix(in srgb, var(--p-green) 45%, var(--p-border)); }
.mon-strip-channels{ flex:0 1 640px; min-width:0; display:flex; align-items:center; }
.mon-ch-grid{ width:100%; display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:6px; }
.mon-ch-grid.mon-ch-loading{ display:flex; align-items:center; justify-content:center; color:var(--p-text-3); font-size:12px; }
.mon-ch-card{ display:flex; align-items:center; justify-content:space-between; gap:6px; box-sizing:border-box;
  background:var(--p-surface); border:0.5px solid var(--p-border); border-radius:6px; padding:4px 8px; }
.mon-ch-card.is-phone{ cursor:pointer; }
.mon-ch-nm{ display:flex; align-items:center; gap:5px; min-width:0; font-size:12px; color:var(--p-text); white-space:nowrap; }
.mon-ch-card .s-toggle{ flex:0 0 auto; }
/* B013 — the customer-phone FLOATING window (appended to <body>, fixed, never a new row in the strip). */
.mon-phone-pop{ position:fixed; inset:0; z-index:1200; display:flex; align-items:flex-start; justify-content:center; pointer-events:none; }
.mon-phone-card{ pointer-events:auto; margin-top:14vh; width:min(340px, 92vw); box-sizing:border-box; display:flex; flex-direction:column; gap:10px;
  background:var(--p-surface); border:0.5px solid var(--p-border); border-radius:10px; padding:14px 16px;
  box-shadow:0 24px 60px -20px rgba(16,36,31,.45), 0 6px 20px -8px rgba(16,36,31,.18); }
.mon-phone-hd{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; font-weight:700; color:var(--p-text); }
.mon-phone-x{ border:0; background:transparent; cursor:pointer; font-size:15px; line-height:1; color:var(--p-text-3); padding:2px 4px; border-radius:4px; }
/* the popup lives OUTSIDE #page-settings, so the --s2-* vars (.s2-btn/.s2-inp colours) are undefined here →
   style explicitly with GLOBAL --p-* tokens so the save button isn't white-on-white and the input is visible. */
.mon-phone-card .s2-inp{ width:100%; box-sizing:border-box; padding:8px 10px; border:1px solid var(--p-border); border-radius:6px; background:var(--p-surface); color:var(--p-text); font-family:inherit; font-size:13px; direction:ltr; }
.mon-phone-card .mon-phone-savebtn{ align-self:flex-start; background:var(--p-green); color:#fff; border:0; border-radius:6px; padding:8px 16px; font-weight:800; font-size:12.5px; cursor:pointer; }
.mon-phone-card .mon-phone-savebtn:hover{ background:var(--p-green-d); }
.mon-strip.warn{ border-color:color-mix(in srgb, var(--p-amber) 50%, var(--p-border)); }
.mon-strip.down{ border-color:color-mix(in srgb, var(--p-red) 50%, var(--p-border)); }
/* P6 — the WHOLE collapsed strip breathes: a slow, soft glow halo (state-colored) via an ::after that only
   animates opacity (GPU-cheap; the halo renders OUTSIDE the box, never covering the text). Removed under
   prefers-reduced-motion. */
.mon-strip::after{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 18px 2px color-mix(in srgb, var(--p-green) 55%, transparent);
  opacity:.12; animation: mon-strip-breathe 3.6s ease-in-out infinite; }
.mon-strip.warn::after{ box-shadow:0 0 18px 2px color-mix(in srgb, var(--p-amber) 55%, transparent); }
.mon-strip.down::after{ box-shadow:0 0 18px 2px color-mix(in srgb, var(--p-red) 55%, transparent); }
@keyframes mon-strip-breathe{ 0%,100%{ opacity:.12; } 50%{ opacity:.55; } }
.mon-chev{ color:var(--p-text-3); font-size:13px; flex:0 0 auto; }
.mon-strip-title{ font-weight:800; color:var(--p-text); font-size:14px; }
.mon-dot{ width:10px; height:10px; border-radius:50%; flex:0 0 auto; background:var(--p-green); box-shadow:0 0 0 3px var(--p-green-bg); }
.mon-dot.warn{ background:var(--p-amber); box-shadow:0 0 0 3px var(--p-amber-bg); }
.mon-dot.down{ background:var(--p-red); box-shadow:0 0 0 3px var(--p-red-bg); }
/* PART E — subtle, slow, decorative pulse on the COLLAPSED strip's status dot ONLY (gentle scale). The
   colored ring still conveys state; movement is removed under prefers-reduced-motion. */
.mon-strip .mon-dot{ animation: mon-dot-pulse 2.6s var(--ease-out) infinite; }
@keyframes mon-dot-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.18); } }
.mon-strip-status{ font-weight:700; color:var(--p-text-2); font-size:13px; }
.mon-strip-cov{ margin-inline-start:auto; font-weight:800; color:var(--p-green-d); font-size:13px; }
.mon-strip-inc{ font-weight:700; color:var(--p-text-3); font-size:12.5px; }
/* PART D — collapsed-header preview: one-line explanation under the coverage % (own row, full width).
   P4 — when expanded it is hidden but KEEPS its space (visibility, not display) so the strip height is
   constant and the sections below never reflow on toggle. */
.mon-strip-preview{ flex-basis:100%; order:2; font-size:12px; font-weight:600; color:var(--p-text-3); }
.mon-strip-preview.is-hidden{ visibility:hidden; }
/* P3/P4 — expanded panel ~800px wide; it FLOATS as an overlay below the strip (absolute inside the relative
   .mon-panel, z above the sections) so «الشات»/«مزوّدو الذكاء» never reflow. Framed double-bezel with a SOFT
   brand-green ambient shadow (never a harsh dark drop). Origin-aware iOS-drawer open via .mon-anim. */
.mon-shell{ position:absolute; inset-inline-start:0; top:calc(100% + 8px); z-index:40; width:100%; max-width:800px; box-sizing:border-box;
  background:var(--p-band-1); border:1px solid var(--p-border); border-radius:22px; padding:6px;
  box-shadow:0 30px 80px -30px rgba(31,160,107,.42), 0 6px 22px -8px rgba(16,36,31,.10);
  transform-origin:top right; }                 /* RTL default: inline-start = right (origin = the trigger) */
html[dir="ltr"] .mon-shell{ transform-origin:top left; }
.mon-body{ padding:14px 16px; border-radius:17px; background:var(--p-surface); border:0.5px solid var(--p-border);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.5); }
/* P1 — main content + a SIDE column (server metrics live in the side, not a bottom row). Stacks on narrow. */
.mon-grid{ display:flex; gap:14px; align-items:flex-start; }
.mon-main{ flex:1 1 auto; min-width:0; }
.mon-side{ flex:0 0 212px; min-width:0; }
@media(max-width:680px){ .mon-grid{ flex-direction:column; } .mon-side{ flex:0 0 auto; width:100%; } }
/* PART H — open choreography: drawer-in on the shell + staggered rise of cards/rows. Applied ONLY on expand
   (the .mon-anim class is added once, then stripped) — NOT on the 30s silent refresh or language repaint. */
.mon-anim{ animation: mon-drawer-in .27s var(--ease-drawer) both; }
@keyframes mon-drawer-in{ from{ opacity:0; transform:scale(.96) translateY(-6px); } to{ opacity:1; transform:none; } }
.mon-anim .mon-card{ animation: mon-rise .32s var(--ease-out) both; }
.mon-anim .mon-card:nth-child(1){ animation-delay:.03s; } .mon-anim .mon-card:nth-child(2){ animation-delay:.08s; }
.mon-anim .mon-card:nth-child(3){ animation-delay:.13s; } .mon-anim .mon-card:nth-child(4){ animation-delay:.18s; }
.mon-anim .mon-card:nth-child(5){ animation-delay:.23s; }
.mon-anim .mon-cap{ animation: mon-rise .30s var(--ease-out) both; }
.mon-anim .mon-cap:nth-child(1){ animation-delay:.06s; } .mon-anim .mon-cap:nth-child(2){ animation-delay:.11s; }
.mon-anim .mon-cap:nth-child(3){ animation-delay:.16s; } .mon-anim .mon-cap:nth-child(4){ animation-delay:.21s; }
@keyframes mon-rise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.mon-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
/* PART H — eyebrow microtag above the panel title (agency-tier feel). */
.mon-head-titles{ display:flex; flex-direction:column; gap:2px; }
.mon-eyebrow{ align-self:flex-start; font-size:10px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--p-green-d); background:var(--p-green-bg); border-radius:999px; padding:2px 9px; }
.mon-chev-btn{ border:0; background:transparent; color:var(--p-text-3); cursor:pointer; font-size:14px; flex:0 0 auto; }
.mon-periods{ display:flex; gap:5px; margin-inline-start:auto; flex-wrap:wrap; }
.mon-pill{ border:1px solid var(--p-border); background:var(--p-surface); color:var(--p-text-2); border-radius:999px; padding:4px 12px; font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit; }
.mon-pill.on{ background:var(--p-emerald-d); color:#fff; border-color:var(--p-emerald-d); }
/* PART H — button-in-button: text + trailing icon in its own circular wrapper; press feedback scale(.97).
   Logical padding so the icon sits at the inline-END in both RTL and LTR. */
.mon-btn{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--p-border); background:var(--p-surface);
  color:var(--p-text-2); border-radius:999px; padding-block:4px; padding-inline:14px 6px; font-size:12.5px; font-weight:700;
  cursor:pointer; font-family:inherit; transition:transform .14s var(--ease-out); }
.mon-btn:active{ transform:scale(.97); }
.mon-btn-ic{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%;
  background:var(--p-band-1); color:var(--p-text); font-size:12px; flex:0 0 auto; transition:transform .14s var(--ease-out); }
.mon-btn:active .mon-btn-ic{ transform:scale(1.06); }
.mon-collecting{ color:var(--p-text-3); font-size:13px; padding:16px; text-align:center; }
.mon-cards{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.mon-card{ flex:1; min-width:120px; background:var(--p-surface); border:0.5px solid var(--p-border); border-radius:10px; padding:12px 14px; text-align:center; }
.mon-card.big{ flex:1.4; }
.mon-card-v{ font-size:24px; font-weight:800; color:var(--p-text); }
.mon-card.big .mon-card-v{ font-size:30px; color:var(--p-green-d); }
.mon-card-l{ font-size:12px; color:var(--p-text-3); margin-top:3px; }
/* PART F — data-sovereignty card: worded in/out-of-Kingdom summary (smaller, wrapping value). */
.mon-card.sov{ flex:1.4; }
.mon-card.sov .mon-card-v{ font-size:14.5px; line-height:1.3; color:var(--p-green-d); }
/* P7 — value-based card tints (coverage / outages / downtime / MTTR). Subtle brand tints; the VALUE uses the
   darkest shade of the family so it stays readable on the tint in both themes. Placed after .big so it wins. */
.mon-card.tone-ok{ background:var(--p-green-bg); border-color:color-mix(in srgb, var(--p-green) 35%, var(--p-border)); }
.mon-card.tone-warn{ background:var(--p-amber-bg); border-color:color-mix(in srgb, var(--p-amber) 35%, var(--p-border)); }
.mon-card.tone-bad{ background:var(--p-red-bg); border-color:color-mix(in srgb, var(--p-red) 35%, var(--p-border)); }
.mon-card.tone-ok .mon-card-v, .mon-card.tone-ok.big .mon-card-v{ color:var(--p-green-d); }
.mon-card.tone-warn .mon-card-v, .mon-card.tone-warn.big .mon-card-v{ color:var(--p-amber-d); }
.mon-card.tone-bad .mon-card-v, .mon-card.tone-bad.big .mon-card-v{ color:var(--p-red-d); }
.mon-caps{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.mon-cap{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 12px; background:var(--p-surface); border:0.5px solid var(--p-border); border-radius:9px; }
.mon-cap-name{ font-weight:800; color:var(--p-text); min-width:90px; }
.mon-cap-up{ font-weight:800; color:var(--p-green-d); margin-inline-start:auto; }
.mon-cap-up.down{ color:var(--p-red-d); }
.mon-badge{ font-size:11px; font-weight:800; border-radius:999px; padding:2px 10px; white-space:nowrap; }
.mon-badge.loc.kingdom{ background:var(--p-green-bg); color:var(--p-green-d); }
.mon-badge.loc.ext{ background:var(--p-amber-bg); color:var(--p-amber-d); }
.mon-badge.backup.has{ background:color-mix(in srgb, var(--p-emerald-d) 14%, var(--p-surface)); color:var(--p-emerald-d); }
.mon-badge.backup.no{ background:color-mix(in srgb, var(--p-text-3) 16%, var(--p-surface)); color:var(--p-text-2); }
.mon-bars-head{ font-size:12px; font-weight:700; color:var(--p-text-3); margin-bottom:8px; }
/* THE bounded container: position:relative + explicit width + overflow:hidden. Correlation lines are
   absolutely positioned ONLY inside it (never without this constraining parent) → no overlap/overflow. */
/* PART C — top padding reserves a strip for the correlation count numbers above the bars. */
.mon-bars{ position:relative; width:100%; overflow:hidden; padding-top:16px; --mon-label-w:96px; }
.mon-bar-row{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.mon-bar-svc{ flex:0 0 var(--mon-label-w); width:var(--mon-label-w); font-size:12px; font-weight:700; color:var(--p-text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* PART B — segmented bar: a flex row of discrete blocks with thin gaps between them (the gap reveals the
   card surface, so it stays theme-correct day+night). Up = green block, down = red block. */
.mon-bar-track{ display:flex; gap:2px; flex:1 1 auto; min-width:0; height:14px; }
.mon-bar-track.collecting{ gap:0; border-radius:4px; background:color-mix(in srgb, var(--p-text-3) 18%, var(--p-surface)); align-items:center; justify-content:center; }
.mon-blk{ flex:1 1 0; min-width:0; height:100%; border-radius:1.5px; background:var(--p-green); }
.mon-blk.down{ background:var(--p-red); }
.mon-bar-collecting{ font-size:10px; color:var(--p-text-3); }
.mon-corr-overlay{ position:absolute; top:16px; bottom:0; inset-inline-start:calc(var(--mon-label-w) + 8px); inset-inline-end:0; pointer-events:none; }
.mon-corr-line{ position:absolute; inset-block:0; min-width:2px; opacity:.8; border-radius:1px; }
.mon-corr-line.d2{ background:var(--p-amber); }
.mon-corr-line.d3{ background:#E8852E; }
.mon-corr-line.d4{ background:var(--p-red); }
/* PART C — correlation count numbers: depth (2/3/4 services down together) centered above each line,
   colored to match it. Each number box spans the line's horizontal range and centers the digit (no
   direction-dependent transform → RTL + LTR both correct). */
.mon-corr-nums{ position:absolute; top:0; height:16px; inset-inline-start:calc(var(--mon-label-w) + 8px); inset-inline-end:0; pointer-events:none; }
.mon-corr-num{ position:absolute; top:0; height:16px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; line-height:1; white-space:nowrap; overflow:visible; }
.mon-corr-num.d2{ color:var(--p-amber-d); }
.mon-corr-num.d3{ color:#C56A1A; }
.mon-corr-num.d4{ color:var(--p-red-d); }
@media(max-width:640px){ .mon-bars{ --mon-label-w:64px; } }
/* Honor prefers-reduced-motion: drop ALL movement (dot pulse, drawer open, staggered rise, press scale).
   Colors/contrast that convey state are untouched; the panel just appears without motion. */
@media (prefers-reduced-motion: reduce){
  .mon-strip .mon-dot{ animation:none; }
  .mon-strip::after{ animation:none; opacity:0; }   /* P6 — no strip breathing under reduced-motion */
  .mon-anim, .mon-anim .mon-card, .mon-anim .mon-cap{ animation:none; }
  .mon-cap.struggling{ animation:none; }   /* B033 PART G: keep the red frame, drop the pulse under reduced-motion */
  .mon-btn, .mon-btn-ic{ transition:none; }
}
/* Block 4a — host server-metrics box. P1 — now lives in the SIDE column: no top divider, single-column grid. */
.mon-svr{ margin-top:0; padding-top:0; border-top:0; }
.mon-svr-hd{ font-size:12px; font-weight:700; color:var(--p-text-3); margin-bottom:10px; }
.mon-svr-grid{ display:grid; grid-template-columns:1fr; gap:10px; }
.mon-svr-item{ background:var(--p-surface); border:0.5px solid var(--p-border); border-radius:9px; padding:10px 12px; }
.mon-svr-l{ font-size:11.5px; color:var(--p-text-3); margin-bottom:3px; }
.mon-svr-v{ font-size:15px; font-weight:800; color:var(--p-text); text-align:start; }
/* P8 — value-based tints on the server metrics (CPU / mem / disk / response). Subtle; value uses the darkest
   family shade for readability in both themes. Uptime stays neutral. */
.mon-svr-item.tone-ok{ background:var(--p-green-bg); border-color:color-mix(in srgb, var(--p-green) 35%, var(--p-border)); }
.mon-svr-item.tone-ok .mon-svr-v{ color:var(--p-green-d); }
.mon-svr-item.tone-warn{ background:var(--p-amber-bg); border-color:color-mix(in srgb, var(--p-amber) 35%, var(--p-border)); }
.mon-svr-item.tone-warn .mon-svr-v{ color:var(--p-amber-d); }
.mon-svr-item.tone-bad{ background:var(--p-red-bg); border-color:color-mix(in srgb, var(--p-red) 35%, var(--p-border)); }
.mon-svr-item.tone-bad .mon-svr-v{ color:var(--p-red-d); }
/* Block 4 — live incidents box */
.mon-inc{ margin:0 0 14px; padding:12px 14px; border-radius:10px; background:var(--p-surface); border:0.5px solid var(--p-border); }
.mon-inc-hd{ font-size:12px; font-weight:700; color:var(--p-text-3); margin-bottom:8px; }
.mon-inc-none{ font-size:13px; color:var(--p-green-d); font-weight:700; }
.mon-inc-item{ display:flex; align-items:center; gap:9px; padding:5px 0; }
.mon-inc-dot{ width:9px; height:9px; border-radius:50%; background:var(--p-red); box-shadow:0 0 0 3px var(--p-red-bg); flex:0 0 auto; }
.mon-inc-svc{ font-weight:800; color:var(--p-text); }
.mon-inc-l{ font-size:12px; color:var(--p-red-d); font-weight:700; }
/* Block 4 — glitch/error log box */
.mon-err{ margin-top:16px; }
.mon-err-hd{ font-size:12px; font-weight:700; color:var(--p-text-3); margin-bottom:8px; }
.mon-err-list{ max-height:200px; overflow-y:auto; border:0.5px solid var(--p-border); border-radius:9px; }
.mon-err-row{ display:flex; align-items:center; gap:10px; padding:7px 12px; border-top:1px solid var(--p-border); font-size:12.5px; }
.mon-err-list .mon-err-row:first-child{ border-top:0; }
.mon-err-t{ color:var(--p-text-3); flex:0 0 auto; }
.mon-err-src{ font-weight:800; color:var(--p-text-2); flex:0 0 auto; }
.mon-err-sev{ font-size:11px; font-weight:800; border-radius:999px; padding:1px 8px; flex:0 0 auto; background:var(--p-red-bg); color:var(--p-red-d); }
.mon-err-sev.sev-warn{ background:var(--p-amber-bg); color:var(--p-amber-d); }
.mon-err-msg{ color:var(--p-text); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
/* ===== Monitoring fix (live-vs-history): named pulsing indicator · NOW/DURING boxes · timeline maximize ·
   on-click cause. All theme-var driven; logical inset-inline for RTL; movement honored vs reduced-motion. ===== */
/* §3 — struggling service: clickable row + strong pulsing-red border (panel row = the channel card). */
.mon-cap{ cursor:pointer; transition:border-color .15s, background .15s; position:relative; }
.mon-cap:hover{ background:var(--p-band-1); }
.mon-cap-cause{ color:var(--p-text-3); font-size:13px; font-weight:800; opacity:.55; flex:0 0 auto; }
.mon-cap.struggling{ border:2px solid var(--p-red); background:var(--p-red-bg); animation: mon-pulse-border 1.5s var(--ease-out) infinite; }
.mon-cap.struggling .mon-cap-name{ color:var(--p-red-d); }
.mon-cap.struggling .mon-cap-cause{ color:var(--p-red-d); opacity:1; }
/* R2 — DEGRADED = primary down but a fallback serves; the service WORKS → calm BLUE (info), NOT red and NOT a
   pulsing alarm. Static blue border so it reads as informational. */
.mon-cap.degraded{ border:2px solid var(--p-info); background:var(--p-info-bg); }
.mon-cap.degraded .mon-cap-name{ color:var(--p-info-d); }
.mon-cap.degraded .mon-cap-cause{ color:var(--p-info-d); opacity:.9; }
.mon-cap-up.degraded{ color:var(--p-info-d); }
/* the collapsed strip + status dot also carry the calm blue when a service is degraded (no down). */
.mon-strip.degraded{ border-color:color-mix(in srgb, var(--p-info) 50%, var(--p-border)); }
.mon-strip.degraded::after{ box-shadow:0 0 18px 2px color-mix(in srgb, var(--p-info) 45%, transparent); }
.mon-dot.degraded{ background:var(--p-info); box-shadow:0 0 0 3px var(--p-info-bg); }
@keyframes mon-pulse-border{ 0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--p-red) 55%, transparent); } 50%{ box-shadow:0 0 0 5px color-mix(in srgb, var(--p-red) 22%, transparent); } }
/* §6 — NOW («الحوادث النشطة») + DURING («خلال الفترة») side by side; reflow to one column when narrow. */
.mon-now-during{ display:flex; gap:12px; flex-wrap:wrap; }
.mon-now-during > .mon-inc{ flex:1 1 240px; min-width:0; }
.mon-inc-item{ cursor:pointer; border-radius:7px; padding-inline:6px; transition:background .15s; }
.mon-inc-item:hover{ background:var(--p-band-1); }
.mon-inc-dot.past{ background:var(--p-text-3); box-shadow:0 0 0 3px var(--p-border); }
.mon-hist-meta{ margin-inline-start:auto; font-size:12px; font-weight:700; color:var(--p-text-2); white-space:nowrap; }
.mon-hist .mon-inc-l{ display:none; }
.mon-tap-hint{ font-size:11.5px; color:var(--p-text-3); margin:0 0 8px; font-style:italic; }
/* §5 — timeline header carries the maximize (⛶) button; the legend explains the correlation number. */
.mon-bars-head{ display:flex; align-items:center; gap:8px; }
.mon-bars-head > span{ flex:1; }
.mon-max-btn{ border:0.5px solid var(--p-border); background:var(--p-surface); color:var(--p-text-2); border-radius:8px; cursor:pointer; font-size:14px; line-height:1; padding:4px 8px; }
.mon-max-btn:hover{ background:var(--p-band-1); color:var(--p-text); }
.mon-corr-legend{ display:flex; align-items:center; gap:8px; margin-top:8px; font-size:11.5px; color:var(--p-text-3); }
.mon-corr-legend-num{ display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; border-radius:5px; background:var(--p-amber-bg); color:var(--p-amber-d); font-weight:800; font-size:10px; }
/* §5/§7 — ONE shared fullscreen overlay (timeline maximize + cause diagnostics). */
.mon-overlay{ position:fixed; inset:0; z-index:9000; background:rgba(15,30,25,.55); display:flex; align-items:center; justify-content:center; padding:24px; animation: mon-overlay-in .18s var(--ease-out); }
.mon-overlay-card{ background:var(--p-surface); border:1px solid var(--p-border); border-radius:18px; box-shadow:var(--soft-em); width:min(1000px,96vw); max-height:92vh; display:flex; flex-direction:column; overflow:hidden; }
.mon-overlay-head{ display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--p-border); }
.mon-overlay-title{ flex:1; font-weight:800; color:var(--p-text); font-size:15px; }
.mon-overlay-x{ border:0; background:var(--p-band-1); color:var(--p-text-2); width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:15px; line-height:1; }
.mon-overlay-x:hover{ background:var(--p-red-bg); color:var(--p-red-d); }
.mon-overlay-body{ padding:18px; overflow:auto; }
@keyframes mon-overlay-in{ from{ opacity:0; } to{ opacity:1; } }
/* maximized timeline */
.mon-mx-bars{ position:relative; }
.mon-bar-row.big{ height:30px; }
.mon-bar-row.big .mon-bar-svc{ font-size:13px; }
.mon-axis{ position:relative; height:18px; margin:6px 0 14px; }
.mon-axis-tick{ position:absolute; top:0; transform:translateX(-50%); font-size:10.5px; color:var(--p-text-3); white-space:nowrap; }
[dir="rtl"] .mon-axis-tick{ transform:translateX(50%); }
.mon-mx-sub{ font-size:12px; font-weight:800; color:var(--p-text-3); margin:14px 0 8px; }
.mon-mx-corr-row,.mon-mx-sum-row{ display:flex; align-items:center; gap:10px; padding:6px 10px; border:0.5px solid var(--p-border); border-radius:8px; margin-bottom:6px; background:var(--p-surface); }
.mon-corr-num.inline{ position:static; width:18px; height:18px; border-radius:5px; flex:0 0 auto; }
.mon-corr-num.inline.d2{ background:var(--p-amber-bg); } .mon-corr-num.inline.d3{ background:#F6E0CC; } .mon-corr-num.inline.d4{ background:var(--p-red-bg); }
.mon-mx-corr-t{ color:var(--p-text-2); font-weight:700; font-size:12.5px; flex:0 0 auto; }
.mon-mx-corr-svcs{ color:var(--p-text); font-weight:700; font-size:12.5px; }
.mon-mx-sum-svc{ font-weight:800; color:var(--p-text); flex:1; }
.mon-mx-sum-meta{ font-size:12.5px; font-weight:700; color:var(--p-text-2); white-space:nowrap; }
/* §7 — cause diagnostics */
.mon-cause-pill{ display:inline-block; padding:3px 12px; border-radius:999px; font-size:12.5px; font-weight:800; }
.mon-cause-pill.ok{ background:var(--p-green-bg); color:var(--p-green-d); }
.mon-cause-pill.warn{ background:var(--p-amber-bg); color:var(--p-amber-d); }
.mon-cause-pill.down{ background:var(--p-red-bg); color:var(--p-red-d); }
.mon-cause-roll{ margin-bottom:12px; }
.mon-cause-list{ border:0.5px solid var(--p-border); border-radius:10px; overflow:hidden; }
.mon-cause-row{ display:grid; grid-template-columns:1.4fr .7fr .9fr 1.3fr 1.3fr; gap:10px; align-items:center; padding:9px 12px; border-top:1px solid var(--p-border); font-size:12.5px; }
.mon-cause-row:first-child{ border-top:0; }
.mon-cause-row.head{ background:var(--p-band-1); font-weight:800; color:var(--p-text-3); font-size:11.5px; }
.mon-cause-row.down{ background:var(--p-red-bg); }
.mon-cause-row.ok .mon-cause-st{ color:var(--p-green-d); font-weight:800; }
.mon-cause-row.down .mon-cause-st{ color:var(--p-red-d); font-weight:800; }
.mon-cause-prov{ font-weight:800; color:var(--p-text); }
.mon-cause-serving{ font-size:11px; color:var(--p-green-d); font-weight:800; }
.mon-cause-detail,.mon-cause-target{ color:var(--p-text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mon-cause-na{ color:var(--p-text-2); font-size:13px; margin:12px 0; }
.mon-btn.mon-retry{ margin-top:14px; }
@media (max-width:560px){ .mon-cause-row{ grid-template-columns:1fr 1fr; } .mon-cause-row .mon-cause-target{ grid-column:1 / -1; } }
/* reduced motion: drop the pulsing border + overlay fade (state still conveyed by colour). */
@media (prefers-reduced-motion: reduce){
  .mon-cap.struggling{ animation:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--p-red) 30%, transparent); }
  .mon-overlay{ animation:none; }
}
/* PART C — double-bezel card pattern (band frame + inset surface core); used for every section/table */
.bz{ display:flex; background:var(--p-band-1); border:1px solid var(--p-border); border-radius:22px; padding:6px; box-shadow:var(--soft-em); }
.bz-core{ flex:1; min-width:0; display:flex; flex-direction:column; background:var(--p-surface); border-radius:17px; padding:15px 17px; box-shadow:inset 0 1px 1px rgba(255,255,255,.5); }
/* existing .settings-card panels get the matching bezel feel (single-element double-bezel) */
#page-settings .settings-card{ background:var(--p-surface); border:6px solid var(--p-band-1); border-radius:20px; box-shadow:var(--soft-em); padding:15px 17px; }
#page-settings .settings-cards-grid{ gap:16px; }
/* PART D — «الجداول» 3-column layout: categories table on the inline-start (left, wider ~57%),
   the small lookup-table cards flow into TWO balanced columns on the inline-end (right). Bounded:
   minmax(0,1fr) so nothing overflows; reflows to a single column on narrow widths; RTL-correct. */
.tbl-layout{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:16px; width:100%; max-width:100%; align-items:start; }
.tbl-layout.lookup-only{ grid-template-columns:minmax(0,1fr); }   /* categories hidden (no categories.view) → lookup spans full width */
/* The categories column is bounded to the viewport; WAZ + COM share it equally (flex), so BOTH
   tables are fully visible at 100% zoom with NO page-scroll to reach them — each keeps its OWN
   internal vertical scroll. (Subtracts the topbar/tab-rail/intro space above the column.) */
.tbl-cats-col{ min-width:0; display:flex; flex-direction:column; gap:10px; }
/* Both explorers get the SAME max-height — a calc that subtracts the column-top offset, the two
   section toolbars/labels and gaps — so WAZ + COM are EQUAL and BOTH fully fit one screen at 100%
   zoom with no page-scroll; each keeps its OWN internal vertical scroll. */
#cat-explorer, #com-cat-explorer{ max-height:calc((100vh - 360px) / 2); overflow-y:auto; }
/* Small lookup cards: a real 2-column GRID → every card EXACTLY equal width (no multicol rounding). */
#lookup-tables-grid{ min-width:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; }
#lookup-tables-grid > *{ min-width:0; width:100%; justify-self:stretch; }
/* the reject/aliases slots wrap their card in a flex .s2-tcard (not .bz) — force it to fill the cell */
#lt-reject-card-slot > .s2-tcard, #lt-natalias-card-slot > .s2-tcard{ width:100%; }
#lookup-tables-grid .s2-tbody, #lookup-tables-grid .s2-tbody.tall{ max-height:230px; }   /* uniform body height + internal scroll */
/* nationality-aliases fits its (equal) column like the others; wide 2-input rows scroll horizontally if needed (interim — block 3). */
#lt-natalias-card-slot, #lt-natalias-card-slot .s2-tcard, #lt-natalias-card-slot .s2-tcore{ min-width:0; }
#lt-natalias-card-slot .s2-tbody{ overflow:auto; }
#lt-natalias-card-slot .s2-tadd{ overflow-x:auto; }
/* «الجداول» close-out: per-table bilingual search row + isClosed checkbox */
.s2-tsearch input{ flex:1; width:100%; box-sizing:border-box; }
/* Guard: search-box magnifier SVGs (نصوص الواجهة / glossary) have NO intrinsic size → clamp them so
   no search icon can ever blow up and cover the table beneath it. */
.box:has(#s2-uis-search) svg, .box:has(#s2-gloss-search) svg{ width:16px; height:16px; flex-shrink:0; }
/* «تنبيهات القمرة»: threshold input merged INLINE on its rule row — compact, sits right next to the toggle. */
.alert-thr{ display:flex; align-items:center; gap:4px; flex-shrink:0; }
.alert-thr input.s2-inp{ width:64px; text-align:center; padding:4px 6px; }
.alert-thr-u{ font-size:11px; color:var(--p-text-3); white-space:nowrap; flex-shrink:0; }
/* isClosed checkbox sits at the inline-END (left in RTL) so the status TEXT keeps the full inline-start width. */
.lt-closed{ display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--p-text-2); cursor:pointer; white-space:nowrap; flex-shrink:0; order:1; margin-inline-start:auto; }
.lt-closed input{ cursor:pointer; margin:0; }
/* final polish: −2px tighter text across «الجداول» tables (lookup rows + categories main/sub rows), still legible */
#lookup-tables-grid .s2-trow, #lookup-tables-grid .s2-trow .v{ font-size:12.5px; }
.tbl-cats-col .dept-group-name{ font-size:12px; }
.tbl-cats-col .cat-sub-row{ font-size:11px; }
/* Status-text WRAP: value cells are <textarea> so long names wrap to multiple lines and show IN FULL.
   Styled identical to the old input; auto-grows to its content (field-sizing); short values stay 1 line. */
.s2-trow textarea.v{
  flex:1; min-width:0; width:100%; box-sizing:border-box; display:block;
  border:1px solid transparent; background:transparent; color:var(--s2-ink);
  font-family:inherit; line-height:1.35; border-radius:5px; padding:3px 6px;
  resize:none; white-space:normal; word-break:break-word; overflow:hidden;
  field-sizing:content; min-height:0;
}
.s2-trow textarea.v:hover{ border-color:var(--s2-line); }
.s2-trow textarea.v:focus{ outline:none; border-color:var(--s2-em500); background:var(--s2-fld); }
/* compact rows: grow ONLY as much as the wrapped lines need; checkbox/«مغلقة» pinned to the top line (inline-end) */
#lookup-tables-grid .s2-trow{ align-items:flex-start; padding-block:4px; min-height:0; }
#lookup-tables-grid .lt-closed{ margin-block-start:2px; }
@media(max-width:1100px){
  .tbl-layout{ grid-template-columns:minmax(0,1fr); }
  #cat-explorer, #com-cat-explorer{ max-height:50vh; }
}
@media(max-width:700px){ #lookup-tables-grid{ columns:1; } }
#lookup-tables-grid > .bz{ height:100%; }
.lt-card .bz-core{ height:100%; }
.lt-h{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:15px; font-weight:700; color:var(--p-text); margin-bottom:10px; }
.lt-h .lt-count{ font-size:12px; font-weight:700; color:var(--p-text-2); background:var(--p-band-1); border:1px solid var(--p-border); border-radius:4px; padding:1px 9px; }
.lt-twrap{ flex:1; overflow:auto; max-height:340px; }
.lt-tbl{ width:100%; border-collapse:collapse; }
.lt-tbl td{ padding:3px 2px; border-bottom:1px solid var(--p-border); vertical-align:middle; }
.lt-tbl tr:last-child td{ border-bottom:none; }
.lt-empty{ color:var(--p-text-3); font-size:13px; padding:8px 2px; }
.inp-bare{ width:100%; border:1px solid transparent; background:transparent; color:var(--p-text); font-family:inherit; font-size:14px; padding:5px 8px; border-radius:8px; }
.inp-bare:hover{ border-color:var(--p-border); }
.inp-bare:focus{ outline:none; border-color:var(--p-emerald-d); background:var(--p-surface); }
.lt-x{ width:30px; text-align:center; }
.lt-del{ border:none; background:transparent; color:var(--p-text-3); cursor:pointer; font-size:14px; line-height:1; padding:4px 6px; border-radius:6px; }
.lt-del:hover{ color:var(--p-red-d); background:var(--p-band-1); }
.lt-foot{ margin-top:auto; display:flex; gap:6px; padding-top:10px; }
.lt-foot .lt-new{ flex:1; min-width:0; border:1px solid var(--p-border); border-radius:8px; background:var(--p-surface); color:var(--p-text); font-family:inherit; font-size:14px; padding:7px 9px; }
.lt-foot .lt-add{ white-space:nowrap; font-size:13px; padding:7px 12px; }
.lt-ms-tog{ width:78px; text-align:center; }
.lt-ms-flag{ border:1px solid var(--p-border); background:var(--p-band-1); color:var(--p-text-2); font-family:inherit; font-size:12px; font-weight:700; border-radius:999px; padding:3px 10px; cursor:pointer; white-space:nowrap; }
.lt-ms-flag.is-closed{ background:var(--p-emerald-bg); border-color:var(--p-emerald-d); color:var(--p-emerald-d); }
/* PART E — reject-reasons & nationality-aliases side by side, equal height */
#lt-reject-card-slot, #lt-natalias-card-slot{ display:flex; min-width:0; }
#lt-reject-card-slot > .bz, #lt-natalias-card-slot > .bz{ width:100%; height:100%; }
.lt-na-arrow{ color:var(--p-text-3); padding:0 2px; }
/* B047: removed the orphan #page-settings .cat-notif-toggle premium-switch — the per-category notif
   toggle it styled was deleted in B046. The per-PERSON user toggle (#page-users) keeps the base rule. */
/* PART G — translation provider fields: carded, multi-column, labels on one line; drop the width caps */
.tr-fields-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:14px 18px; }
.tr-fields-grid .settings-row-title{ white-space:nowrap; }
#page-settings .glossary-box{ max-width:none !important; }
#page-settings .glossary-table{ width:100%; }

/* ============================================================
   SETTINGS v2 (v0.9.316) — match Docs/Samples (general_tab_v1, settings_tables_v1, translation_v4).
   Warm emerald/cream "antique" look. All scoped to #page-settings, s2- prefixed (no global clashes).
   Fixed warm palette per the samples (light); does not theme-switch to night by design.
   ============================================================ */
#page-settings{
  --s2-e:cubic-bezier(0.32,0.72,0,1);
  --s2-hd:#1FA06B; --s2-em800:#0B4A3C; --s2-em700:#0F6E56; --s2-em500:#1D9E75; --s2-em100:#DCEFE6;
  --s2-ink:#16291F; --s2-ink2:#3C5A4D;
  --s2-cream:#FBF8F0; --s2-cream2:#F4EFE2; --s2-sand:#ECE6D6; --s2-line:rgba(15,110,86,.16);
  --s2-coral:#B4502E; --s2-coralbg:#F6E6DD; --s2-slate:#2B5A6E; --s2-slatebg:#E3EEF1;
  --s2-soft:0 18px 40px -28px rgba(15,110,86,.40),0 2px 8px rgba(16,41,31,.06);
  --s2-rmd:8px; --s2-rsm:6px; --s2-fld:#FFFEFA;
}
/* PART 2 (v0.9.318) — NIGHT-aware: remap the warm tokens to the project's dark theme so settings never
   shows a bright cream card on the dark app. DAY = the samples exactly; NIGHT = dark surfaces + light text. */
html[data-theme="night"] #page-settings{
  --s2-ink:#EAF3EE; --s2-ink2:#A6C6B8;
  --s2-cream:#0F2A22; --s2-cream2:#143A2F; --s2-sand:#16463A; --s2-line:rgba(255,255,255,.10);
  --s2-fld:#0B1F1A; --s2-em100:#143A2F;
}
html[data-theme="night"] #page-tickets, html[data-theme="night"] #page-clients{
  /* zebra unified: --a2-cream/-cream2 DERIVE from the shared --p-band tones (ONE beige/band, no second near-beige). */
  --a2-ink:#EAF3EE; --a2-cream:var(--p-band-1); --a2-cream2:var(--p-band-2); --a2-line:rgba(255,255,255,.10); --a2-hover:#16463A; --a2-hd:linear-gradient(180deg,var(--p-emerald),var(--p-emerald-d));
}
/* Object-header night override (emerald → readable with white text; green tokens are bright at night). */
html[data-theme="night"] .cl-dq-head, html[data-theme="night"] .cf-head { background:linear-gradient(180deg,var(--p-emerald),var(--p-emerald-d)); }
/* ===== OBJECT-HEADER UNIFICATION — cockpit rail PANEL title bars → ONE vertical green header bar.
   (Sajed's named examples: «المكالمة الحيّة» · «المحادثات» · «المراجع».) Title text → white; child
   badges/buttons keep their own backgrounds. Tokens only; night = emerald. ===== */
.ops-call-hd, .ops-chats-hd, .ops-sup-hd {
  background:linear-gradient(180deg, var(--p-green), var(--p-green-d)) !important;
  color:#fff !important;
}
.ops-call-hd .ops-call-chev, .ops-call-hd .ops-call-ic { color:#fff !important; }
html[data-theme="night"] .ops-call-hd, html[data-theme="night"] .ops-chats-hd, html[data-theme="night"] .ops-sup-hd {
  background:linear-gradient(180deg, var(--p-emerald), var(--p-emerald-d)) !important;
}
html[data-theme="night"] #page-clients .cl-table thead th{ color:#fff !important; }
/* الشات «قريبًا» placeholder column + header dot + the 3-page back bar */
.s2-chdot{ margin-inline-start:auto; font-size:11px; font-weight:800; background:rgba(255,255,255,.22); border-radius:5px; padding:2px 8px; }
.s2-soon{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; color:var(--s2-ink2); padding:18px 13px; }
.s2-soon .ic{ font-size:30px; opacity:.5; }
.s2-soon .badge{ font-size:11px; font-weight:800; color:var(--p-amber-d); background:var(--p-amber-bg); border:1px solid var(--p-amber); border-radius:4px; padding:4px 13px; letter-spacing:.08em; }
.s2-soon .t{ font-size:13px; }
.s2-backbar{ padding:12px 16px 0; }
/* shared grid (row of 4 equal cards) + header/lead */
.s2-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;align-items:stretch;}
.s2-grid.s2-r2{margin-top:13px;}
.s2-head{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin:0 0 6px;}
.s2-head .s2-title{font-size:23px;font-weight:800;color:var(--s2-ink);} .s2-head .s2-sep{color:var(--s2-em500);font-weight:800;} .s2-head .s2-sub{font-size:14px;color:var(--s2-ink2);}
.s2-lead{font-size:13.5px;color:var(--s2-ink2);margin-bottom:14px;}
.s2-note{font-size:12.5px;color:var(--s2-ink2);margin-top:14px;line-height:1.7;} .s2-note b{color:var(--s2-em700);}
/* ---- general_tab_v1 cards ---- */
.s2-card{display:flex;background:var(--s2-sand);border:1px solid var(--s2-line);border-radius:10px;padding:5px;box-shadow:var(--s2-soft);}
.s2-core{flex:1;display:flex;flex-direction:column;background:var(--s2-cream);border-radius:var(--s2-rmd);overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.7);}
.s2-ch{background:var(--s2-hd);color:#fff;padding:9px 13px;font-weight:800;font-size:13.5px;display:flex;align-items:center;gap:8px;}
.s2-ch .c{margin-inline-start:auto;font-size:11px;font-weight:800;background:rgba(255,255,255,.22);border-radius:5px;padding:1px 8px;}
.s2-cbody{flex:1;padding:11px 13px;display:flex;flex-direction:column;gap:11px;}
.s2-crow{display:flex;align-items:center;gap:10px;} .s2-crow .info{flex:1;min-width:0;}
.s2-nm{font-size:13.5px;font-weight:700;color:var(--s2-ink);} .s2-ds{font-size:11.5px;color:var(--s2-ink2);margin-top:2px;line-height:1.5;}
.s2-lbl{font-size:12px;font-weight:700;color:var(--s2-ink2);margin-bottom:5px;}
.s2-inp{font-family:inherit;font-size:14px;border:1px solid var(--s2-line);border-radius:var(--s2-rsm);padding:8px 10px;background:var(--s2-fld);color:var(--s2-ink);width:100%;}
.s2-inp::placeholder{color:#7C9387;} .s2-inp:focus{outline:none;border-color:var(--s2-em500);box-shadow:0 0 0 3px rgba(29,158,117,.18);}
.s2-two{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.s2-btn{display:inline-flex;align-items:center;gap:6px;background:var(--s2-hd);color:#fff;font-family:inherit;font-weight:800;font-size:12.5px;border:0;border-radius:var(--s2-rsm);padding:8px 13px;cursor:pointer;transition:transform .15s var(--s2-e);align-self:flex-start;}
.s2-btn:active{transform:scale(.97);} .s2-btn.ghost{background:var(--s2-fld);color:var(--s2-em700);border:1px solid var(--s2-line);}
/* ---- settings_tables_v1 lookup tables ---- */
.s2-tcard{display:flex;background:var(--s2-sand);border:1px solid var(--s2-line);border-radius:10px;padding:5px;box-shadow:var(--s2-soft);}
.s2-tcore{flex:1;display:flex;flex-direction:column;background:var(--s2-cream);border-radius:var(--s2-rmd);overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.7);}
.s2-tch{background:var(--s2-hd);color:#fff;display:flex;align-items:center;gap:8px;padding:8px 12px;font-weight:800;font-size:13.5px;}
.s2-tch .c{margin-inline-start:auto;font-size:11px;font-weight:800;background:rgba(255,255,255,.22);border-radius:5px;padding:1px 8px;}
.s2-tbody{flex:1;overflow:auto;max-height:192px;}              /* ~20% shorter than the 240px sample */
.s2-tbody.tall{max-height:300px;}                              /* row-2 reference tables a touch taller */
.s2-trow{display:flex;align-items:center;gap:8px;padding:5px 12px;border-bottom:1px solid var(--s2-line);font-size:14.5px;min-height:31px;color:var(--s2-ink);transition:background .16s var(--s2-e);}
.s2-tbody .s2-trow:nth-child(odd){background:var(--s2-cream);} .s2-tbody .s2-trow:nth-child(even){background:var(--s2-cream2);}
.s2-trow:hover{background:var(--s2-em100);}
.s2-trow .v{flex:1;min-width:0;} .s2-trow input.v{border:1px solid transparent;background:transparent;font-family:inherit;font-size:14.5px;color:var(--s2-ink);border-radius:5px;padding:3px 6px;width:100%;}
.s2-trow input.v:hover{border-color:var(--s2-line);} .s2-trow input.v:focus{outline:none;border-color:var(--s2-em500);background:var(--s2-fld);}
.s2-trow .arrow{color:var(--s2-em500);font-weight:800;}
.s2-acts{display:flex;gap:5px;opacity:0;transition:opacity .15s var(--s2-e);} .s2-trow:hover .s2-acts{opacity:1;}
.s2-acts button{width:24px;height:24px;border-radius:var(--s2-rsm);border:1px solid var(--s2-line);background:var(--s2-fld);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s var(--s2-e);}
.s2-acts button:active{transform:scale(.9);} .s2-acts button svg{width:13px;height:13px;} .s2-acts .edit{color:var(--s2-em700);} .s2-acts .del{color:var(--s2-coral);}
.s2-sw{position:relative;width:38px;height:21px;border-radius:999px;flex:0 0 auto;cursor:pointer;border:0;padding:0;}
.s2-sw.on{background:var(--s2-em500);} .s2-sw.off{background:#cdd6d1;}
.s2-sw .k{position:absolute;top:2.5px;width:16px;height:16px;border-radius:50%;background:#fff;transition:all .2s var(--s2-e);}
.s2-sw.on .k{right:2.5px;} .s2-sw.off .k{left:2.5px;}
.s2-tadd{display:flex;align-items:center;gap:7px;padding:8px 10px;background:linear-gradient(135deg,rgba(31,160,107,.12),rgba(31,160,107,.04));border-top:2px solid var(--s2-em500);}
.s2-tadd input{flex:1;min-width:0;font-family:inherit;font-size:13.5px;border:1px solid var(--s2-line);border-radius:var(--s2-rsm);padding:7px 9px;background:var(--s2-fld);color:var(--s2-ink);}
.s2-tadd input::placeholder{color:#7C9387;}
.s2-tadd .add{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:var(--s2-rsm);background:var(--s2-hd);color:#fff;border:0;font-size:17px;cursor:pointer;transition:transform .15s var(--s2-e);} .s2-tadd .add:active{transform:scale(.9);}
.s2-empty{padding:10px 12px;color:var(--s2-ink2);font-size:13px;}
/* B033 F2 — WhatsApp templates card (open/transfer/close, bilingual) inside «جداول الإعدادات» */
.watpl-hint{padding:8px 12px;color:var(--s2-ink2);font-size:12px;line-height:1.6;}
.watpl-ev{padding:9px 12px;border-top:1px solid var(--s2-line);display:flex;flex-direction:column;gap:6px;}
.watpl-ev:first-child{border-top:0;}
.watpl-evh{font-weight:800;font-size:12.5px;color:var(--s2-ink);}
.watpl-ar,.watpl-en{width:100%;box-sizing:border-box;font-family:inherit;font-size:13px;border:1px solid var(--s2-line);border-radius:var(--s2-rsm);padding:7px 9px;background:var(--s2-fld);color:var(--s2-ink);resize:vertical;}
.watpl-ar::placeholder,.watpl-en::placeholder{color:#7C9387;}
.watpl-save{align-self:flex-end;border:0;border-radius:var(--s2-rsm);background:var(--s2-hd);color:#fff;font-family:inherit;font-weight:800;font-size:12.5px;padding:6px 16px;cursor:pointer;transition:transform .15s var(--s2-e);}
.watpl-save:active{transform:scale(.95);}
/* ---- translation_v4 ---- */
.s2-bz{background:var(--s2-sand);border:1px solid var(--s2-line);border-radius:10px;padding:6px;box-shadow:var(--s2-soft);margin-top:18px;}
.s2-bzcore{background:var(--s2-cream);border-radius:var(--s2-rmd);padding:14px 16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.7);}
.s2-chead{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin-bottom:11px;}
.s2-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--s2-em800);background:var(--s2-em100);border-radius:var(--s2-rsm);padding:4px 11px;}
.s2-hint{font-size:13px;color:var(--s2-ink2);} .s2-code{direction:ltr;text-align:left;font-weight:700;color:var(--s2-em800);}
.s2-gtable{border-radius:var(--s2-rmd);overflow:hidden;border:1px solid var(--s2-line);}
.s2-grow{display:grid;align-items:center;gap:12px;padding:2px 15px;line-height:1.2;min-height:31px;}
.s2-ghead{background:linear-gradient(135deg,#15805F,#0B4A3C);color:#fff;font-size:13px;font-weight:800;min-height:0;padding-top:6px;padding-bottom:6px;}
.s2-gbody{max-height:300px;overflow:auto;}
.s2-gbody .s2-grow{font-size:15px;font-weight:500;color:var(--s2-ink);border-top:1px solid var(--s2-line);transition:background .18s var(--s2-e);}
.s2-gbody .s2-grow:nth-child(odd){background:var(--s2-cream);} .s2-gbody .s2-grow:nth-child(even){background:var(--s2-cream2);} .s2-gbody .s2-grow:hover{background:var(--s2-em100);}
.s2-gadd{background:linear-gradient(135deg,rgba(29,158,117,.13),rgba(29,158,117,.04));border-top:2px solid var(--s2-em500);padding-top:8px;padding-bottom:8px;}
.s2-pill{display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;border-radius:var(--s2-rsm);padding:3px 0;}
.s2-pill.ar{background:var(--s2-em100);color:var(--s2-em800);} .s2-pill.en{background:var(--s2-slatebg);color:var(--s2-slate);} .s2-ghead .s2-pill{background:rgba(255,255,255,.18);color:#fff;}
.s2-garrow{text-align:center;font-weight:800;font-size:16px;color:var(--s2-em500);} .s2-ghead .s2-garrow{color:#bfe7d8;}
.s2-muted{color:var(--s2-ink2);font-weight:500;}
.s2-sel{width:100%;font-family:inherit;font-size:12px;font-weight:800;color:var(--s2-em800);border:1px solid var(--s2-line);border-radius:var(--s2-rsm);padding:7px 6px;background:var(--s2-fld);text-align:center;}
.s2-addbtn{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(135deg,#15805F,#0B4A3C);color:#fff;font-family:inherit;font-weight:800;font-size:13px;border:0;border-radius:var(--s2-rmd);padding:6px 6px 6px 14px;cursor:pointer;transition:transform .15s var(--s2-e);box-shadow:0 9px 20px -12px rgba(11,74,60,.7);}
.s2-addbtn .plus{width:24px;height:24px;border-radius:var(--s2-rsm);background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:16px;} .s2-addbtn:active{transform:scale(.97);}
.s2-toolbar{display:flex;align-items:center;gap:9px;margin-bottom:10px;}
.s2-toolbar .filter{display:flex;align-items:center;gap:7px;background:var(--s2-fld);border:1px solid var(--s2-line);border-radius:var(--s2-rsm);padding:8px 12px;font-size:13px;font-weight:700;color:var(--s2-em800);cursor:pointer;}
.s2-toolbar .stat{font-size:13px;color:var(--s2-ink2);font-weight:700;} .s2-toolbar .stat b{color:var(--s2-em700);}
.s2-toolbar .box{flex:1;display:flex;align-items:center;gap:9px;background:var(--s2-fld);border:1px solid var(--s2-line);border-radius:var(--s2-rsm);padding:8px 13px;}
.s2-toolbar .box input{flex:1;border:0;background:transparent;font-family:inherit;font-size:14px;color:var(--s2-ink);outline:none;}
.s2-acts.g button{width:28px;height:28px;background:var(--s2-cream);} .s2-acts.g{opacity:1;justify-content:flex-end;}
.s2-tinp{width:100%;font-family:inherit;font-size:14.5px;font-weight:500;color:var(--s2-ink);border:1px solid var(--s2-line);border-radius:var(--s2-rsm);padding:8px 11px;background:var(--s2-fld);}
.s2-tinp::placeholder{color:#7C9387;} .s2-tinp:focus{outline:none;border-color:var(--s2-em500);box-shadow:0 0 0 3px rgba(29,158,117,.18);}
.s2-cols-gloss{grid-template-columns:1.5fr 54px 24px 1.5fr 54px 1.1fr 86px;}
.s2-cols-list{grid-template-columns:1fr 1.4fr 1.4fr 86px;}
.s2-ltr{direction:ltr;text-align:left;}
/* Block 5/5 — الترجمة: the two tables SIDE BY SIDE (stack on narrow), equal height, compact. */
.s2-trans-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch;margin-top:18px;}
.s2-trans-2col>.s2-bz{margin-top:0;}
.s2-trans-2col .s2-bzcore{height:100%;box-sizing:border-box;}
.s2-trans-2col .s2-gbody{height:340px;max-height:340px;}                 /* SAME fixed height -> equal + internal scroll */
.s2-ghead .s2-pill.ar{background:var(--s2-em100);color:var(--s2-em800);} /* keep colored pills in the green header */
.s2-ghead .s2-pill.en{background:var(--s2-slatebg);color:var(--s2-slate);}
.s2-trans-2col .s2-tinp{font-size:13px;padding:6px 8px;}                 /* compact, still legible */
.s2-trans-2col .s2-sel{font-size:11px;padding:5px 4px;}
.s2-trans-2col .s2-grow{gap:7px;padding:2px 12px;min-height:30px;}
.s2-trans-2col .s2-gbody .s2-grow{font-size:13.5px;}
.s2-trans-2col .s2-acts.g button{width:25px;height:25px;}
.s2-trans-2col .s2-cols-gloss{grid-template-columns:1.4fr 44px 16px 1.4fr 44px 1fr 58px;}
.s2-trans-2col .s2-cols-list{grid-template-columns:1fr 1.3fr 1.3fr 58px;}
/* «تراجم ولغات» tab: the table area FILLS the available height; the OUTER page (.main) must NOT scroll —
   only each .s2-gbody scrolls internally. Panel = bounded flex column (≈ viewport − topbar − .main padding);
   the flex chain (host -> 2col -> bzcore -> gtable -> gbody) fills, gbody flex:1 + min-height:0 + auto scroll. */
#page-settings .settings-tab-panel.on[data-settings-panel="translation"]{display:flex;flex-direction:column;height:calc(100vh - 175px);min-height:220px;}
#page-settings [data-settings-panel="translation"] .settings-panel-intro{flex:0 0 auto;}
#page-settings [data-settings-panel="translation"] #s2-trans-tables{flex:1 1 auto;min-height:0;display:flex;}
#page-settings [data-settings-panel="translation"] .s2-trans-2col{flex:1 1 auto;min-height:0;margin-top:0;grid-template-rows:minmax(0,1fr);}
#page-settings [data-settings-panel="translation"] .s2-trans-2col>.s2-bz{min-height:0;}
#page-settings [data-settings-panel="translation"] .s2-bzcore{display:flex;flex-direction:column;min-height:0;}
#page-settings [data-settings-panel="translation"] .s2-gtable{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
#page-settings [data-settings-panel="translation"] .s2-gbody{flex:1 1 auto;min-height:0;height:auto;max-height:none;}
/* Narrow: stack the two into equal halves that still split the height (no outer scroll). */
@media(max-width:1000px){
  .s2-trans-2col{grid-template-columns:1fr;}
  #page-settings [data-settings-panel="translation"] .s2-trans-2col{grid-template-rows:minmax(0,1fr) minmax(0,1fr);}
}
@media(max-width:1100px){.s2-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.s2-grid{grid-template-columns:1fr;}}
@media (prefers-reduced-motion: reduce){#page-settings *{transition:none !important;}}

/* ============================================================
   A2 (v0.9.317) — unified table look on the LIVE التذاكر + clients lists (Docs/Samples/pages_tables_v1.html).
   Scoped to #page-tickets / #page-clients only (COCKPIT EXCLUDED). Palette overlay on the existing
   structure (no rewrite); preserves SLA/closed/idle states + functional pills. Ticket-number colour code:
   company = GREEN, ministry = RED.
   ============================================================ */
/* zebra unified: --a2-cream/-cream2 DERIVE from the shared --p-band tones (ONE platform beige, day+night). */
#page-tickets, #page-clients{ --a2-hd:linear-gradient(180deg,var(--p-green),var(--p-green-d)); --a2-ink:#16291F; --a2-cream:var(--p-band-1); --a2-cream2:var(--p-band-2); --a2-line:rgba(15,110,86,.16); --a2-hover:#DCEFE6; --a2-rd:#B42318; --a2-gn:#0F6E56; }
/* tickets roadmap (CSS grid) */
#page-tickets .tt-row-head{ background:var(--a2-hd) !important; }
#page-tickets .tt-row{ font-size:15px; color:var(--a2-ink); border-bottom:1px solid var(--a2-line); }
#page-tickets .tt-row:not(.closed):not(.idle):nth-child(odd){ background:var(--a2-cream); }
#page-tickets .tt-row:not(.closed):not(.idle):nth-child(even){ background:var(--a2-cream2); }
#page-tickets .tt-row:hover{ background:var(--a2-hover); }
#page-tickets .tt-cell-text, #page-tickets .tt-dept, #page-tickets .tt-title{ font-size:15px; color:var(--a2-ink); }
#page-tickets .tt-num{ font-family:inherit; direction:ltr; font-weight:800; font-size:15px; }
#page-tickets .tt-num.wazara{ color:var(--a2-rd) !important; }    /* ministry ticket number = red */
#page-tickets .tt-num.company{ color:var(--a2-gn) !important; }   /* company ticket number = green */
/* clients list (real table) */
#page-clients .cl-table thead th, #page-clients .cl-table thead th.cl-th, #page-clients .cl-table thead th.cl-th-check{ background:var(--a2-hd) !important; color:#fff !important; }
#page-clients .cl-table tbody td{ font-size:15px; color:var(--a2-ink); }
#page-clients .cl-table tbody tr:nth-child(odd) td{ background:var(--a2-cream); }
#page-clients .cl-table tbody tr:nth-child(even) td{ background:var(--a2-cream2); }
#page-clients .cl-table tbody tr:hover td{ background:var(--a2-hover); }

/* ============================================================
   Settings · shared SECTION-BOX (Block 2/5). One reusable, accent-driven container —
   reused by the purple providers box in Block 3. Accent comes from --s2-accent; the
   tint/border are derived from it (low-alpha accent over the surface) so it reads
   correctly in BOTH day and night. Bounded, full-width, normal flow — never absolute.
   ============================================================ */
#page-settings .s2-section{
  width:100%; box-sizing:border-box; overflow:hidden;
  border-radius:14px; padding:16px 18px; margin-bottom:16px;
  border:0.5px solid color-mix(in srgb, var(--s2-accent) 55%, transparent);
  background: color-mix(in srgb, var(--s2-accent) 8%, var(--p-surface));
}
#page-settings .s2-section-hd{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
#page-settings .s2-section-ic{ font-size:44px; line-height:1; color:var(--s2-accent); flex:0 0 auto; }
#page-settings .s2-section-title{ font-size:17px; font-weight:500; color: color-mix(in srgb, var(--s2-accent) 75%, var(--p-text)); }
#page-settings .s2-section-sub{ font-size:12.5px; color:var(--s2-accent); margin-top:2px; }
/* «الشات» modifier — emerald accent (dark token by day, brighter token by night for contrast). */
#page-settings .s2-section--chat{ --s2-accent: var(--p-emerald-d); }
html[data-theme="night"] #page-settings .s2-section--chat{ --s2-accent: var(--p-emerald); }
/* «مزوّدو الذكاء والخدمات» modifier (Block 3/5) — violet accent (deeper by day, lighter by night for contrast). */
#page-settings .s2-section--ai{ --s2-accent: #534AB7; }
html[data-theme="night"] #page-settings .s2-section--ai{ --s2-accent: #9B92F0; }

/* Block 3.1 — «صحة النظام» inside the narrow purple card: stack each service vertically so the
   endpoint URL wraps as a URL (never one char per line). Overrides the wide 5-col grid in main.css. */
#page-settings .sh-row{ display:flex; flex-direction:column; align-items:stretch; gap:6px; max-width:none; padding:10px 12px; }
#page-settings .sh-row .sh-target{ direction:ltr; text-align:start; overflow-wrap:anywhere; word-break:normal; white-space:normal; min-width:0; }
#page-settings .sh-row .sh-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
#page-settings .sh-row .sh-serving{ white-space:normal; }

/* Rail tab label may wrap to two lines (the renamed «القنوات والخدمات الخارجية» is long) — never clip. */
#page-settings .settings-tabs-nav.expanded .st-label{ white-space:normal; line-height:1.3; word-break:break-word; }