/* =============================================================
 * CashMisr Dashboard CSS Library — Universal (CRM canonical)
 * -------------------------------------------------------------
 * Layered architecture (do NOT cross layers):
 *   L0 Tokens          : :root design tokens (colors, spacing, radii…)
 *   L1 Base/Reset      : normalize, focus, scrollbars, RTL base
 *   L2 Layout          : containers, grids, sidebar, main-content
 *   L3 Components      : btn, form, card, box, modal, table, tag, alert,
 *                        badge, perm, stat, monitor, thread, dropdown, …
 *   L4 Page Modules    : dashboard/home, reports, auth, attendance, help
 *   L5 Utilities       : u-* (spacing, sizing, display, color, text, flex)
 *   L6 Responsive      : @media overrides
 *   L7 Print           : @media print
 *
 * Naming:
 *   Components  : .cm-{block}            e.g. .cm-card
 *   Variants    : .cm-{block}--{variant} e.g. .cm-btn--primary
 *   States      : .is-{state}            e.g. .is-active, .is-loading
 *   Utilities   : .u-{prop}-{value}      e.g. .u-mt-2, .u-d-flex
 *
 * Browser support: evergreen Chromium/Firefox/Safari (incl. iOS),
 * Edge, modern WebViews. Uses progressive-enhancement only.
 * ============================================================= */

/* =============================================================
 * L0 — DESIGN TOKENS  (enterprise dual-theme: light + dark)
 * -------------------------------------------------------------
 * Theme model:
 *   html[data-theme="light"]  → light palette (default)
 *   html[data-theme="dark"]   → GitHub-style dark palette
 *   No attribute set          → follows prefers-color-scheme
 * All component rules MUST consume `--c-*` semantic tokens,
 * never literal hex. Legacy `--cm-c-*` kept for back-compat.
 * ============================================================= */
:root{
  /* ── Semantic surface palette (LIGHT default) ────────────── */
  --c-bg:            #f3f4f6;
  --c-surface:       #ffffff;
  --c-surface-2:     #f1f5f9;
  --c-surface-3:     #e5e7eb;
  --c-border:        #d8dee6;
  --c-border-strong: #c1c8d1;
  --c-text:          #0f172a;
  --c-text-muted:    #475569;
  --c-text-heading:  #0b1220;
  --c-text-inverse:  #ffffff;
  /* Dedicated HEADER palette — used by table/box/filter/modal/sidebar-title heads
     Slightly darker than surface-2 to create visual hierarchy on white canvas. */
  --c-header-bg:     #e2e8f0;
  --c-header-bg-2:   #eef2f7;
  --c-header-fg:     #0f172a;
  --c-header-fg-muted:#334155;
  --c-header-border: #cbd5e1;
  /* Brand (accent — use sparingly) */
  --c-brand:         #16a34a;
  --c-brand-hover:   #15803d;
  --c-brand-soft:    #ecfdf5;
  --c-brand-strong:  #14532d;
  --c-brand-ring:    rgba(22,163,74,.18);
  /* Semantic status */
  --c-success:#16a34a; --c-success-soft:#ecfdf5;
  --c-warning:#d97706; --c-warning-soft:#fff7ed;
  --c-danger: #dc2626; --c-danger-soft: #fef2f2;
  --c-info:   #2563eb; --c-info-soft:   #eff6ff;
  /* ── Brand identity accents (from logo + old app) ───────────
     green=primary identity, orange=secondary (from logo),
     blue=info/search (from old app), dark=admin/system,
     purple=inventory/infra. Each has: base, soft, strong, fg. */
  --c-a-green:#16a34a;  --c-a-green-soft:#ecfdf5;  --c-a-green-strong:#14532d;
  --c-a-orange:#ea580c; --c-a-orange-soft:#fff7ed; --c-a-orange-strong:#9a3412;
  --c-a-blue:#2563eb;   --c-a-blue-soft:#eff6ff;   --c-a-blue-strong:#1e40af;
  --c-a-dark:#1f2937;   --c-a-dark-soft:#f1f5f9;   --c-a-dark-strong:#111827;
  --c-a-purple:#7c3aed; --c-a-purple-soft:#f5f3ff; --c-a-purple-strong:#5b21b6;
  /* Elevation (light: crisp subtle shadows) */
  --c-shadow-xs:0 1px 2px rgba(15,23,42,.04);
  --c-shadow-sm:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
  --c-shadow-md:0 4px 12px rgba(15,23,42,.08),0 2px 4px rgba(15,23,42,.05);
  --c-shadow-lg:0 12px 32px rgba(15,23,42,.12);
  /* Chrome (nav + sidebar) */
  --c-nav-bg:       var(--c-surface);
  --c-nav-border:   var(--c-border);
  --c-nav-fg:       var(--c-text);
  --c-sidebar-bg:   var(--c-surface);
  --c-sidebar-border:var(--c-border);
  --c-sidebar-fg:          #475569;
  --c-sidebar-fg-hover:    var(--c-text-heading);
  --c-sidebar-hover-bg:    var(--c-surface-3);
  --c-sidebar-active-bg:   var(--c-brand-soft);
  --c-sidebar-active-fg:   var(--c-brand-strong);
  --c-sidebar-title-bg:    var(--c-header-bg-2);
  --c-sidebar-title-fg:    var(--c-header-fg-muted);
  color-scheme: light;

  /* ── Legacy --cm-c-* aliases (back-compat; point to semantic) ── */
  --cm-c-bg:var(--c-bg); --cm-c-surface:var(--c-surface); --cm-c-surface-2:var(--c-surface-2);
  --cm-c-text:var(--c-text); --cm-c-text-soft:var(--c-text-muted); --cm-c-muted:var(--c-text-muted);
  --cm-c-border:var(--c-border); --cm-c-border-strong:var(--c-border-strong);
  --cm-c-primary:#2563eb; --cm-c-primary-600:#1d4ed8; --cm-c-primary-soft:var(--c-info-soft);
  --cm-c-success:var(--c-success); --cm-c-success-soft:var(--c-success-soft);
  --cm-c-warn:var(--c-warning);    --cm-c-warn-soft:var(--c-warning-soft);
  --cm-c-danger:var(--c-danger);   --cm-c-danger-soft:var(--c-danger-soft);
  --cm-c-info:#0891b2;              --cm-c-info-soft:#ecfeff;
  --cm-c-dark:#1e293b;
  /* Typography */
  --cm-ff-base: Ubuntu, 'Droid Arabic Kufi', Tahoma, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --cm-ff-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Courier New', monospace;
  --cm-fs-xs:11px; --cm-fs-sm:12px; --cm-fs-md:14px; --cm-fs-lg:16px; --cm-fs-xl:18px; --cm-fs-2xl:22px;
  --cm-fw-reg:400; --cm-fw-med:500; --cm-fw-sb:600; --cm-fw-bd:700;
  --cm-lh-tight:1.2; --cm-lh-base:1.45;
  /* 4px spacing scale */
  --cm-sp-0:0; --cm-sp-1:4px; --cm-sp-2:8px; --cm-sp-3:12px; --cm-sp-4:16px;
  --cm-sp-5:20px; --cm-sp-6:24px; --cm-sp-7:32px; --cm-sp-8:40px;
  /* Radii */
  --cm-r-sm:4px; --cm-r-md:6px; --cm-r-lg:8px; --cm-r-xl:12px; --cm-r-pill:999px;
  /* Shadows */
  --cm-sh-sm:0 1px 2px rgba(15,23,42,.06);
  --cm-sh-md:0 4px 12px rgba(15,23,42,.08);
  --cm-sh-lg:0 12px 32px rgba(15,23,42,.18);
  --cm-sh-focus:0 0 0 3px rgba(37,99,235,.25);
  /* Z-index */
  --cm-z-base:1; --cm-z-nav:100; --cm-z-drop:1000; --cm-z-modal:2000; --cm-z-toast:3000;
  /* Overlay surface */
  --c-surface-overlay: rgba(15,23,42,.55);
  /* Status badge colors */
  --c-status-new:      #f97316;
  --c-status-review:   #eab308;
  --c-status-done:     #22c55e;
  --c-status-info:     #3b82f6;
  --c-status-rejected: #ef4444;
  /* Motion */
  --cm-anim-fast:120ms; --cm-anim-med:200ms; --cm-easing:cubic-bezier(.2,.8,.2,1);
  /* Breakpoints (reference) */
  --cm-bp-sm:576px; --cm-bp-md:768px; --cm-bp-lg:1024px; --cm-bp-xl:1280px;
}

/* ── DARK THEME — GitHub-inspired palette ───────────────────── */
:root[data-theme="dark"]{
  --c-bg:            #0d1117;
  --c-surface:       #161b22;
  --c-surface-2:     #1c2128;
  --c-surface-3:     #22272e;
  --c-border:        #30363d;
  --c-border-strong: #484f58;
  --c-text:          #c9d1d9;
  --c-text-muted:    #8b949e;
  --c-text-heading:  #f0f6fc;
  --c-text-inverse:  #0d1117;
  /* Dedicated HEADER palette — dark mode keeps chrome subtle */
  --c-header-bg:     #1c2128;
  --c-header-bg-2:   #22272e;
  --c-header-fg:     #f0f6fc;
  --c-header-fg-muted:#c9d1d9;
  --c-header-border: #30363d;
  /* GitHub green — brighter for WCAG AA on dark bg */
  --c-brand:         #3fb950;
  --c-brand-hover:   #56d364;
  --c-brand-soft:    rgba(63,185,80,.15);
  --c-brand-strong:  #7ee787;
  --c-brand-ring:    rgba(63,185,80,.28);
  /* Status — GitHub semantic colors */
  --c-success:#3fb950; --c-success-soft:rgba(63,185,80,.15);
  --c-warning:#d29922; --c-warning-soft:rgba(210,153,34,.15);
  --c-danger: #f85149; --c-danger-soft: rgba(248,81,73,.15);
  --c-info:   #58a6ff; --c-info-soft:   rgba(88,166,255,.15);
  /* Identity accents — dark-mode tuned (brighter, translucent softs) */
  --c-a-green:#3fb950;  --c-a-green-soft:rgba(63,185,80,.15);   --c-a-green-strong:#7ee787;
  --c-a-orange:#f0883e; --c-a-orange-soft:rgba(240,136,62,.15); --c-a-orange-strong:#ffa657;
  --c-a-blue:#58a6ff;   --c-a-blue-soft:rgba(88,166,255,.15);   --c-a-blue-strong:#79b8ff;
  --c-a-dark:#30363d;   --c-a-dark-soft:rgba(139,148,158,.12);  --c-a-dark-strong:#8b949e;
  --c-a-purple:#bc8cff; --c-a-purple-soft:rgba(188,140,255,.15);--c-a-purple-strong:#d2a8ff;
  /* Elevation (dark: deeper but diffuse) */
  --c-shadow-xs:0 1px 2px rgba(0,0,0,.25);
  --c-shadow-sm:0 1px 3px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.25);
  --c-shadow-md:0 4px 12px rgba(0,0,0,.45),0 2px 4px rgba(0,0,0,.30);
  --c-shadow-lg:0 12px 32px rgba(0,0,0,.55);
  /* Overlay + status tokens — dark-mode tuned */
  --c-surface-overlay: rgba(0,0,0,.72);
  --c-status-new:      #fb923c;
  --c-status-review:   #facc15;
  --c-status-done:     #4ade80;
  --c-status-info:     #60a5fa;
  --c-status-rejected: #f87171;
  /* Chrome overrides */
  --c-nav-bg:       var(--c-surface);
  --c-nav-border:   var(--c-border);
  --c-sidebar-bg:   #0f1419;
  --c-sidebar-fg:          #c9d1d9;
  --c-sidebar-fg-hover:    var(--c-text-heading);
  --c-sidebar-hover-bg:    var(--c-surface-2);
  --c-sidebar-active-bg:   rgba(63,185,80,.15);
  --c-sidebar-active-fg:   #7ee787;
  --c-sidebar-title-bg:    #0f1419;
  --c-sidebar-title-fg:    #6e7681;
  color-scheme: dark;
}

/* ── SYSTEM preference (when no explicit theme is set) ─────── */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    --c-bg:#0d1117;       --c-surface:#161b22;    --c-surface-2:#1c2128; --c-surface-3:#22272e;
    --c-border:#30363d;   --c-border-strong:#484f58;
    --c-text:#c9d1d9;     --c-text-muted:#8b949e; --c-text-heading:#f0f6fc; --c-text-inverse:#0d1117;
    --c-header-bg:#1c2128; --c-header-bg-2:#22272e; --c-header-fg:#f0f6fc; --c-header-fg-muted:#c9d1d9; --c-header-border:#30363d;
    --c-brand:#3fb950;    --c-brand-hover:#56d364; --c-brand-soft:rgba(63,185,80,.15); --c-brand-strong:#7ee787; --c-brand-ring:rgba(63,185,80,.28);
    --c-success:#3fb950;  --c-success-soft:rgba(63,185,80,.15);
    --c-warning:#d29922;  --c-warning-soft:rgba(210,153,34,.15);
    --c-danger:#f85149;   --c-danger-soft:rgba(248,81,73,.15);
    --c-info:#58a6ff;     --c-info-soft:rgba(88,166,255,.15);
    --c-a-green:#3fb950;  --c-a-green-soft:rgba(63,185,80,.15);   --c-a-green-strong:#7ee787;
    --c-a-orange:#f0883e; --c-a-orange-soft:rgba(240,136,62,.15); --c-a-orange-strong:#ffa657;
    --c-a-blue:#58a6ff;   --c-a-blue-soft:rgba(88,166,255,.15);   --c-a-blue-strong:#79b8ff;
    --c-a-dark:#30363d;   --c-a-dark-soft:rgba(139,148,158,.12);  --c-a-dark-strong:#8b949e;
    --c-a-purple:#bc8cff; --c-a-purple-soft:rgba(188,140,255,.15);--c-a-purple-strong:#d2a8ff;
    --c-shadow-xs:0 1px 2px rgba(0,0,0,.25);
    --c-shadow-sm:0 1px 3px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.25);
    --c-shadow-md:0 4px 12px rgba(0,0,0,.45),0 2px 4px rgba(0,0,0,.30);
    --c-shadow-lg:0 12px 32px rgba(0,0,0,.55);
    --c-nav-bg:var(--c-surface);  --c-nav-border:var(--c-border);
    --c-sidebar-bg:#0f1419; --c-sidebar-fg:#c9d1d9; --c-sidebar-fg-hover:var(--c-text-heading);
    --c-sidebar-hover-bg:var(--c-surface-2); --c-sidebar-active-bg:rgba(63,185,80,.15); --c-sidebar-active-fg:#7ee787;
    --c-sidebar-title-bg:#0f1419; --c-sidebar-title-fg:#6e7681;
    color-scheme: dark;
  }
}

/* Smooth theme switch (but skip motion-reduced users) */
html{transition:background-color .25s ease,color .25s ease;}
body,nav,.menu-side,.cm-sidebar,.box,.cm-card,.stat-card,.cm-stat-card,
.dash-monitor-box,.cm-monitor-box,.table,.cm-table,.boxhd,.boxbd,.boxft,
.cm-update-bar,.cm-refresh-btn,.form-control,.cm-input,.btn,.cm-btn{
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

/* =============================================================
 * L1 — BASE / RESET (cross-browser)
 * ============================================================= */
@font-face{font-family:'Ubuntu';font-style:normal;font-weight:400;font-display:swap;src:url(/res/fonts/ubuntu.woff)format('woff');}
@font-face{font-family:'Droid Arabic Kufi';font-style:normal;font-weight:700;font-display:swap;src:url(/res/fonts/DroidKufi-Regular.woff)format('woff'),url(/res/fonts/DroidKufi-Regular.ttf)format('truetype');}
*,*::before,*::after{box-sizing:border-box;}
*{font-family:var(--cm-ff-base);-webkit-tap-highlight-color:transparent;scrollbar-width:auto;scrollbar-color:#000 #fff;}
html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;}
html,body{margin:0;padding:0;box-sizing:border-box;}
body{background-color:var(--c-bg);color:var(--c-text);font-size:var(--cm-fs-md);line-height:var(--cm-lh-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}
img,svg,video,canvas{max-width:100%;}
button,input,select,textarea{font:inherit;color:inherit;}
button{cursor:pointer;background:transparent;border:0;}
a,a:hover{text-decoration:none;cursor:pointer;}
:where(a,button,input,select,textarea,[tabindex]):focus{outline:none;}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--cm-c-primary);outline-offset:2px;box-shadow:var(--cm-sh-focus);}
*::-webkit-scrollbar{width:10px;height:10px;}
*::-webkit-scrollbar-track{background:var(--c-surface-2);}
*::-webkit-scrollbar-thumb{background:var(--c-border-strong);border-radius:var(--cm-r-sm);}
*::-webkit-scrollbar-thumb:hover{background:var(--c-text-muted);}
#fullbody{width:100%;min-height:100vh;height:auto;overflow:visible;}
.mdl,.cnt{text-align:center;}
.ml5{margin-left:5px;} .mr5{margin-right:5px;} .mt5{margin-top:5px;} .mb5{margin-bottom:5px;} .ma5{margin:5px;}
/* ================================================================
 * L3 — FORM CONTROLS
 * Usage:  <input class="form-control" /> | <select class="form-control" /> | <textarea class="form-control" />
 * Sizes:  .inp-lg (large), .inp-sm (small)
 * States: .is-invalid (red border+glow), .is-valid (green border)
 * Group:  .inp-grp > label + .form-control  →  floating label
 *         .inp-row > .inp-grp  →  horizontal fields row
 * ================================================================ */
.form-control,.cm-input,.cm-form-control{font-size:14px;width:100%;max-width:100%;padding:8px 14px;border-radius:8px;border:1px solid var(--c-border-strong);min-height:44px;background-color:var(--c-surface);color:var(--c-text);transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;font-family:inherit;}
.form-control:hover,.cm-input:hover,textarea:hover{border-color:var(--c-text-muted);}
.form-control:focus,.cm-input:focus,input:focus,textarea:focus,select:focus{outline:none;border-color:var(--c-brand);box-shadow:0 0 0 3px var(--c-brand-ring);}
.form-control::placeholder,.cm-input::placeholder,textarea::placeholder{color:var(--c-text-muted);}
/* Textarea — resizable vertically, comfortable line height */
textarea.form-control,textarea.cm-input,textarea{min-height:90px;padding:10px 14px;line-height:1.5;resize:vertical;font-family:inherit;}
/* Invalid state */
.form-control.is-invalid,.cm-input.is-invalid,input.is-invalid,textarea.is-invalid,select.is-invalid{border-color:#dc2626;}
.form-control.is-invalid:focus,.cm-input.is-invalid:focus{box-shadow:0 0 0 3px rgba(220,38,38,.18);}
/* Valid state */
.form-control.is-valid,.cm-input.is-valid{border-color:#16a34a;}
#navsrh .form-control{height:40px !important;min-height:40px !important;}
select.form-control,select.cm-input{padding-left:32px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%230B3B0B' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 10px center;background-size:12px;cursor:pointer;}
/* Native date/time pickers — better contrast, RTL-friendly icon */
input[type=date].form-control,input[type=date].cm-input,input[type=time].form-control,input[type=time].cm-input,input[type=datetime-local].form-control,input[type=datetime-local].cm-input{cursor:pointer;}
input[type=date]::-webkit-calendar-picker-indicator,input[type=time]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator{display:none !important;opacity:0 !important;pointer-events:none !important;}
/* Checkbox & radio — brand-green custom */
input[type=checkbox],input[type=radio]{width:18px;height:18px;cursor:pointer;accent-color:#16a34a;vertical-align:middle;}
.cm-payby-grid{display:flex;flex-wrap:wrap;gap:8px;}
.cm-payby-item{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:8px;min-height:38px;font-size:12px;font-weight:600;color:var(--c-text);}
.cm-payby-item.is-card{background:var(--c-a-orange-soft);border-color:var(--c-a-orange);}
.cm-payby-item input{margin:0;}
.inp-lg,.cm-input--lg{font-size:18px;padding:12px 20px;margin:5px;min-height:52px;}
.inp-sm,.cm-input--sm{font-size:12px;padding:5px 10px;min-height:32px;border-radius:6px;}
input:read-only,input[readonly],*:disabled{background:var(--c-surface-2);color:var(--c-text-muted);cursor:not-allowed;border-color:var(--c-border);}
.w5{width:45% !important;}
.w100{width:100% !important;}

/* ================================================================
 * L3 — INPUT GROUP (Floating Label)
 * ================================================================ */
.inp-grp{position:relative;display:inline-flex;flex-direction:column;width:100%;margin-bottom:14px;}
#srv-frm .inp-grp{margin-bottom:12px;}
.inp-row{display:flex;flex-wrap:wrap;gap:12px;width:100%;margin-bottom:14px;}
.inp-row .inp-grp{flex:1 1 200px;width:auto;margin-bottom:0;}
.srv-calc-val{display:block;text-align:center;color:#14532d;font-weight:700;font-size:16px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:8px 12px;margin:0 0 14px 0;}
.inp-grp label,.itm-group label{position:absolute;top:-9px;right:12px;background:var(--c-surface);padding:0 8px;font-size:11px;font-weight:600;color:var(--c-text-muted);z-index:1;border-radius:4px;line-height:1.4;transition:color .15s ease;pointer-events:none;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.inp-grp:focus-within label,.itm-group:focus-within label{color:var(--c-brand);}
.inp-grp:has(.is-invalid) label{color:#dc2626;}
/* Required indicator */
.inp-grp label.required::after,.inp-grp label.req::after{content:" *";color:#dc2626;font-weight:700;}
/* Helper text under input */
.inp-grp .help-txt,.inp-grp small{display:block;font-size:11px;color:#6b7280;margin-top:4px;padding:0 4px;}
.inp-grp .err-txt{display:block;font-size:11px;color:#dc2626;margin-top:4px;padding:0 4px;font-weight:500;}
/* Form section heading inside a .boxbd */
.frm-section-title{font-size:13px;font-weight:700;color:var(--c-brand-strong);text-transform:uppercase;letter-spacing:.4px;margin:8px 0 12px;padding-bottom:6px;border-bottom:1px solid var(--c-brand-soft);display:flex;align-items:center;gap:6px;}
.frm-section-title i{color:var(--c-brand);}
/* Stand-alone (non-floating) form labels */
.frm-label{display:block;font-size:12px;font-weight:600;color:#374151;margin-bottom:6px;}
.frm-label .req,.frm-label.required::after{color:#dc2626;}

/* ================================================================
 * L3 — SERVICE FORM
 * ================================================================ */
#srv-frm{background:#fff;border-radius:12px;padding:10px;margin:10px;text-align:center;width:500px;border:1px solid #e5e7eb;box-shadow:0 4px 12px rgba(0,0,0,.08);}
#srv-frm i{float:left;color:#fff;cursor:pointer;}
#srv-frm h1{font-size:16px;background:linear-gradient(180deg,#0B3B0B 0%,#0d5a1a 100%);color:#fff;border-radius:12px 12px 0 0;padding:10px 14px;margin:-11px -11px 10px -11px;text-align:right;border-bottom:2px solid #16a34a;font-weight:600;}
#srv-frm img{max-height:100px;}
#srv-frm .form-control{width:100%;padding:12px 16px;font-size:16px;box-sizing:border-box;}

/* ================================================================
 * L3 — BUTTONS
 * Usage:  <button class="btn bgreen">Label</button>
 * Colors: bgreen (primary), bred (danger), bblue (info), borange,
 *         byellow, bgray, bblack — all produce solid colored buttons.
 *         On <span>/<div> without .btn: produces a soft pill badge.
 * Size modifiers: .btn-export (padded), .btn-save-lg (large save), .btn-icon-sm (compact)
 * Auth button: .btn-auth (full-width green gradient, use in login forms)
 * cm-btn variants: .cm-btn--primary/info/success/warning/danger/dark
 * ================================================================ */
.btn,.cm-btn{padding:7px 16px;cursor:pointer;border-radius:8px;background:var(--c-surface);color:var(--c-text);border:1px solid var(--c-border-strong);user-select:none;font-size:14px;font-weight:500;transition:all .15s ease;display:inline-flex;align-items:center;justify-content:center;gap:6px;}
.btn:hover,.cm-btn:hover{background:var(--c-surface-2);border-color:var(--c-text-muted);box-shadow:var(--c-shadow-xs);}
.btn:active,.cm-btn:active{background:var(--c-brand);color:var(--c-text-inverse);border-color:var(--c-brand);transform:scale(.97);}
.btn:focus-visible,.cm-btn:focus-visible{outline:2px solid var(--c-brand);outline-offset:2px;}
.btn.main,.cm-btn--main{padding:10px 0;margin:1px;color:var(--c-brand-strong);display:inline-block;text-align:center;font-weight:600;}
.btn.main:active,.cm-btn--main:active{background:var(--c-brand-strong);color:var(--c-text-inverse);}
.btn img,.cm-btn img{max-height:100px;margin:0 10px;}
.btn.disabled,.cm-btn.is-disabled,.cm-btn--disabled{background:#f3f4f6;color:#9ca3af;cursor:not-allowed;border:none;opacity:.5;pointer-events:none;}
.btn.right,.cm-btn--right{margin-left:auto;}
.btn.w90,.cm-btn--w90{display:inline-block;width:90% !important;margin-bottom:10px;}
/* cm-btn variants (color modifiers) */
.cm-btn--primary{background:#16a34a !important;color:#fff !important;border-color:#16a34a !important;}
.cm-btn--primary:hover{background:#15803d !important;border-color:#15803d !important;}
.cm-btn--info{background:#2563eb !important;color:#fff !important;border-color:#2563eb !important;}
.cm-btn--info:hover{background:#1d4ed8 !important;border-color:#1d4ed8 !important;}
.cm-btn--success{background:#16a34a !important;color:#fff !important;border-color:#16a34a !important;}
.cm-btn--warning{background:#d97706 !important;color:#fff !important;border-color:#d97706 !important;}
.cm-btn--danger{background:#dc2626 !important;color:#fff !important;border-color:#dc2626 !important;}
.cm-btn--dark{background:#0B3B0B !important;color:#fff !important;border-color:#0B3B0B !important;}

/* ── Favorites Bar ── */
.fav-bar{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;background:linear-gradient(180deg,#f0fdf4 0%,#dcfce7 100%);border:1px solid #bbf7d0;border-radius:10px;margin-bottom:15px;align-items:center;width:100%;clear:both;box-shadow:0 1px 2px rgba(22,163,74,.05);}
.fav-bar-title{font-weight:700;color:#14532d;font-size:13px;margin-left:12px;display:inline-flex;align-items:center;gap:6px;}
.fav-bar .fav-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 12px;font-size:11px;color:#15803d;border:1px solid #bbf7d0;border-radius:8px;background:#fff;cursor:pointer;min-width:64px;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;}
.fav-bar .fav-item:hover{background:#f0fdf4;border-color:#16a34a;transform:translateY(-2px);box-shadow:0 4px 8px rgba(22,163,74,.15);}
.fav-bar .fav-item img{max-width:28px;max-height:28px;}

/* ================================================================
 * L3 — LABELS & BADGES
 * Usage:  <span class="lbl bgreen">نشط</span>
 * Colors: bgreen, bred, bblue, byellow, borange, bblack, bpurple
 * Note:   .lbl/.badge/.cm-badge = pill shape; bare .bgreen etc. = soft bg only (no pill)
 *         Adding .btn + color class overrides to solid button style.
 * ================================================================ */
.lbl,.badge,.cm-badge{display:inline-flex;align-items:center;gap:4px;background:var(--c-surface-3);color:var(--c-text);border-radius:999px;font-size:11px;padding:2px 10px;font-weight:600;line-height:1.6;letter-spacing:.2px;border:1px solid var(--c-border);}
/* Pill colors — theme-aware via accent tokens (bg=soft, fg=strong, border=base). */
.lbl.bred,.badge.bred,.cm-badge.bred{background:var(--c-danger-soft) !important;color:var(--c-danger) !important;border-color:var(--c-danger) !important;}
.lbl.bgreen,.badge.bgreen,.cm-badge.bgreen{background:var(--c-a-green-soft) !important;color:var(--c-a-green-strong) !important;border-color:var(--c-a-green) !important;}
.lbl.bblue,.badge.bblue,.cm-badge.bblue{background:var(--c-a-blue-soft) !important;color:var(--c-a-blue-strong) !important;border-color:var(--c-a-blue) !important;}
.lbl.byellow,.badge.byellow,.cm-badge.byellow{background:var(--c-warning-soft) !important;color:var(--c-warning) !important;border-color:var(--c-warning) !important;}
.lbl.borange,.badge.borange,.cm-badge.borange{background:var(--c-a-orange-soft) !important;color:var(--c-a-orange-strong) !important;border-color:var(--c-a-orange) !important;}
.lbl.bblack,.badge.bblack,.cm-badge.bblack{background:var(--c-a-dark-soft) !important;color:var(--c-a-dark-strong) !important;border-color:var(--c-a-dark) !important;}
.lbl.bpurple,.badge.bpurple,.cm-badge.bpurple{background:var(--c-a-purple-soft) !important;color:var(--c-a-purple-strong) !important;border-color:var(--c-a-purple) !important;}
/* Bare (non-pill) class still keeps legacy behavior for buttons — see .btn rules below. */
.bred{background:#fee2e2 !important;color:#b91c1c !important;border:none;}
.bgreen{background:#dcfce7 !important;color:#15803d !important;border:none;}
.bblue{background:#dbeafe !important;color:#1d4ed8 !important;border:none;}
.byellow{background:#fef9c3 !important;color:#a16207 !important;border:none;}
.borange{background:#ffedd5 !important;color:#c2410c !important;border:none;}
.bblack{background:#1f2937 !important;color:#fff !important;border:none;}

/* Legacy .btn + color token → solid branded button (overrides badge pill above) */
.btn.bblue,button.bblue,a.btn.bblue{background:#2563eb !important;color:#fff !important;border:1px solid #1d4ed8 !important;}
.btn.bblue:hover,button.bblue:hover,a.btn.bblue:hover{background:#1d4ed8 !important;}
.btn.bgreen,button.bgreen,a.btn.bgreen{background:#16a34a !important;color:#fff !important;border:1px solid #15803d !important;}
.btn.bgreen:hover,button.bgreen:hover,a.btn.bgreen:hover{background:#15803d !important;}
.btn.bred,button.bred,a.btn.bred{background:#dc2626 !important;color:#fff !important;border:1px solid #b91c1c !important;}
.btn.bred:hover,button.bred:hover,a.btn.bred:hover{background:#b91c1c !important;}
.btn.borange,button.borange,a.btn.borange{background:#ea580c !important;color:#fff !important;border:1px solid #c2410c !important;}
.btn.borange:hover,button.borange:hover,a.btn.borange:hover{background:#c2410c !important;}
.btn.byellow,button.byellow,a.btn.byellow{background:#ca8a04 !important;color:#fff !important;border:1px solid #a16207 !important;}
.btn.byellow:hover,button.byellow:hover,a.btn.byellow:hover{background:#a16207 !important;}
.btn.bgray,button.bgray,a.btn.bgray{background:#6b7280 !important;color:#fff !important;border:1px solid #4b5563 !important;}
.btn.bgray:hover,button.bgray:hover,a.btn.bgray:hover{background:#4b5563 !important;}
.btn.bblack,button.bblack,a.btn.bblack{background:#1f2937 !important;color:#fff !important;border:1px solid #111827 !important;}
.btn.bblack:hover,button.bblack:hover,a.btn.bblack:hover{background:#111827 !important;}
/* Force icons inside solid colored buttons to inherit parent fg (white) to prevent bg/icon color collision. */
.btn.bblue i,.btn.bgreen i,.btn.bred i,.btn.borange i,.btn.byellow i,.btn.bgray i,.btn.bblack i,
button.bblue i,button.bgreen i,button.bred i,button.borange i,button.byellow i,button.bgray i,button.bblack i,
a.btn.bblue i,a.btn.bgreen i,a.btn.bred i,a.btn.borange i,a.btn.byellow i,a.btn.bgray i,a.btn.bblack i,
.btn-auth i,.cm-btn-auth i,
.cm-btn--primary i,.cm-btn--success i,.cm-btn--warning i,.cm-btn--danger i,.cm-btn--info i,.cm-btn--dark i{color:inherit !important;}
.itm-group,.cm-input-group{display:inline-flex;}
.itm-group>:first-child,.cm-input-group>:first-child{border-radius:0 8px 8px 0;}
.itm-group>:last-child,.cm-input-group>:last-child{border-radius:8px 0 0 8px;}
.itm-group>:not(:first-child):not(:last-child),.cm-input-group>:not(:first-child):not(:last-child){border-radius:0;}

/* ================================================================
 * L3 — ALERTS & NOTIFICATIONS
 * Usage:  <div class="alert green">...</div>
 * Colors: green (success), red, blue (info), info (cyan), yellow, orange, white
 * cm-alert variants: .cm-alert--success / --danger / --info
 * Note:   div.alert gets width:100%; inline <span class="alert"> stays inline-flex.
 * ================================================================ */
.alert,.cm-alert{display:inline-flex;align-items:center;gap:8px;border:1px solid #d1d5db;border-left:4px solid #9ca3af;background:#f9fafb;border-radius:8px;font-size:13px;padding:10px 14px;margin:4px 0;font-weight:500;line-height:1.5;color:#1f2937;}
div.alert,a.alert,a.cm-alert{width:100%;box-sizing:border-box;display:flex;text-decoration:none;}
.alert.white{background:#fff;color:#1f2937;border-color:#e5e7eb;border-left-color:#9ca3af;}
.alert.red,.cm-alert--danger{background:#fef2f2;color:#991b1b;border-color:#fecaca;border-left-color:#dc2626;}
.alert.green,.cm-alert--success{background:#f0fdf4;color:#14532d;border-color:#bbf7d0;border-left-color:#16a34a;}
.alert.blue,.cm-alert--info{background:#eff6ff;color:#1e3a8a;border-color:#bfdbfe;border-left-color:#2563eb;}
.alert.info{background:#ecfeff;color:#155e75;border-color:#a5f3fc;border-left-color:#0891b2;}
.alert.yellow{background:#fefce8;color:#713f12;border-color:#fef08a;border-left-color:#ca8a04;}
.alert.orange{background:#fff7ed;color:#7c2d12;border-color:#fed7aa;border-left-color:#ea580c;}
.alert table{width:100%;}
.alert table td{border-bottom:1px dashed rgba(0,0,0,.15);direction:ltr;padding:4px 6px;}

/* ================================================================
 * AUTH DESIGN SYSTEM (login.php) — pro centered card
 * Selectors `cm-auth-*` aliased to portal's `auth-*` for future sync.
 * Legacy `.cm-login-page` retained as a thin wrapper alias.
 * ================================================================ */
.auth-page,.cm-auth-page,.cm-login-page{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:24px 16px;box-sizing:border-box;background:linear-gradient(135deg,#f0fdf4 0%,#dcfce7 50%,#bbf7d0 100%);}
.auth-card,.cm-auth-card{width:100%;max-width:380px;background:#fff;border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.10);padding:32px 28px 24px;text-align:center;box-sizing:border-box;}
.auth-card .logo-container,.cm-auth-card .logo-container{margin-bottom:18px;}
.auth-card .logo-container img,.cm-auth-card .logo-container img{max-width:180px;height:auto;}
.auth-steps,.cm-auth-steps{display:flex;justify-content:center;gap:8px;margin-bottom:20px;}
.auth-step-dot,.cm-auth-step-dot{width:8px;height:8px;border-radius:50%;background:#d1d5db;transition:background .3s ease,transform .3s ease;}
.auth-step-dot.active,.cm-auth-step-dot.active{background:#16a34a;transform:scale(1.4);box-shadow:0 0 0 3px rgba(22,163,74,.2);}
.auth-step-dot.done,.cm-auth-step-dot.done{background:#0B3B0B;}
.auth-title,.cm-auth-title{font-size:18px;font-weight:700;color:#1f2937;text-align:center;margin:0 0 4px;}
.auth-subtitle,.cm-auth-subtitle{font-size:13px;color:#6b7280;text-align:center;margin:0 0 18px;line-height:1.6;}
.input-wrap,.cm-input-wrap{position:relative;margin-bottom:14px;}
.input-wrap .input-icon,.cm-input-wrap .cm-input-icon{position:absolute;top:50%;right:14px;transform:translateY(-50%);color:#9ca3af;font-size:14px;pointer-events:none;}
.input-wrap .form-control,.input-wrap .cm-input,.cm-input-wrap .cm-input{width:100%;padding-right:38px;margin-bottom:0;box-sizing:border-box;}
.input-eye,.cm-input-eye{position:absolute;top:50%;left:12px;transform:translateY(-50%);background:none;border:none;color:#9ca3af;font-size:14px;cursor:pointer;padding:4px;line-height:1;}
.input-eye:hover,.cm-input-eye:hover{color:#374151;}
.input-wrap.has-eye .form-control,.input-wrap.has-eye .cm-input,.cm-input-wrap.has-eye .cm-input{padding-left:38px;}
.auth-pin-box,.cm-auth-pin-box{display:inline-flex;align-items:center;gap:8px;background:#f3f4f6;border:1px solid #d1d5db;border-radius:10px;padding:10px 16px;margin-bottom:16px;width:100%;box-sizing:border-box;justify-content:center;}
.auth-pin-box .pin-label,.cm-auth-pin-box .pin-label{font-size:13px;color:#6b7280;}
.auth-pin-box .pin-value,.cm-auth-pin-box .pin-value{font-size:22px;font-weight:700;letter-spacing:4px;color:#14532d;direction:ltr;}
.auth-error,.cm-auth-error{background:#fef2f2;color:#dc2626;border:1px solid #fecaca;border-radius:8px;padding:10px 14px;margin-bottom:14px;font-size:13px;line-height:1.6;}
.auth-info,.cm-auth-info{background:#f0fdf4;color:#16a34a;border:1px solid #bbf7d0;border-radius:8px;padding:10px 14px;margin-bottom:14px;font-size:13px;line-height:1.6;}
.btn-auth,.cm-btn-auth{width:100%;padding:12px 20px;background:linear-gradient(180deg,#16a34a 0%,#15803d 100%);color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:6px;box-shadow:0 2px 6px rgba(22,163,74,.25);}
.btn-auth:hover,.cm-btn-auth:hover{background:linear-gradient(180deg,#15803d 0%,#0B3B0B 100%);box-shadow:0 4px 12px rgba(22,163,74,.35);}
.btn-auth:active,.cm-btn-auth:active{transform:scale(.98);}
.auth-divider,.cm-auth-divider{border:none;border-top:1px solid #e5e7eb;margin:18px 0 14px;}
.auth-link,.cm-auth-link{display:inline-block;color:#16a34a;font-size:13px;font-weight:500;cursor:pointer;transition:color .2s;text-decoration:none;}
.auth-link:hover,.cm-auth-link:hover{color:#0B3B0B;text-decoration:underline;}
.auth-hp,.cm-auth-hp{position:absolute;left:-9999px;top:-9999px;opacity:0;pointer-events:none;width:0;height:0;overflow:hidden;}
.auth-pwd-hint,.cm-auth-pwd-hint{font-size:11px;color:#6b7280;background:#f9fafb;border:1px solid #e5e7eb;border-radius:6px;padding:8px 12px;margin-bottom:14px;line-height:1.6;text-align:right;}
.footer-brand,.cm-footer-brand{margin-top:20px;font-size:12px;color:#6b7280;text-align:center;}
.footer-brand a,.cm-footer-brand a{color:#16a34a;font-weight:700;text-decoration:none;}
.footer-brand b,.cm-footer-brand b{display:block;font-size:13px;color:#14532d;margin-top:4px;letter-spacing:1px;}

/* ================================================================
 * AUTH DESIGN SYSTEM (login.php / signup.php)
 * Compact form: one rule per line where practical. Behavior unchanged.
 * ================================================================ */
.auth-page{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:24px 16px;box-sizing:border-box;background:linear-gradient(135deg,#f0fdf4 0%,#dcfce7 50%,#bbf7d0 100%);}
.auth-card{width:100%;max-width:380px;background:#fff;border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.10);padding:32px 28px 24px;text-align:center;}
.auth-card .logo-container{margin-bottom:18px;}
.auth-card .logo-container img{max-width:180px;height:auto;}
.auth-steps{display:flex;justify-content:center;gap:8px;margin-bottom:20px;}
.auth-step-dot{width:8px;height:8px;border-radius:50%;background:#d1d5db;transition:background .3s ease,transform .3s ease;}
.auth-step-dot.active{background:#16a34a;transform:scale(1.4);box-shadow:0 0 0 3px rgba(22,163,74,.2);}
.auth-step-dot.done{background:#0B3B0B;}
.auth-title{font-size:18px;font-weight:700;color:#1f2937;text-align:center;margin:0 0 4px;}
.auth-subtitle{font-size:13px;color:#6b7280;text-align:center;margin:0 0 18px;line-height:1.6;}
.input-wrap{position:relative;margin-bottom:14px;}
.input-wrap .input-icon{position:absolute;top:50%;right:14px;transform:translateY(-50%);color:#9ca3af;font-size:14px;pointer-events:none;}
.input-eye{position:absolute;top:50%;left:12px;transform:translateY(-50%);background:none;border:none;color:#9ca3af;font-size:14px;cursor:pointer;padding:4px;line-height:1;}
.input-eye:hover{color:#374151;}
.auth-pin-box{display:inline-flex;align-items:center;gap:8px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;padding:10px 16px;margin-bottom:16px;width:100%;box-sizing:border-box;justify-content:center;}
.auth-pin-box .pin-label{font-size:13px;color:#166534;}
.auth-pin-box .pin-value{font-size:22px;font-weight:700;letter-spacing:4px;color:#14532d;direction:ltr;}
.auth-error{background:#fef2f2;color:#dc2626;border:1px solid #fecaca;border-radius:8px;padding:10px 14px;margin-bottom:14px;font-size:13px;line-height:1.6;}
.auth-notice{text-align:center;padding:8px 4px 14px;color:#1e293b;}
.auth-notice-icon{font-size:2.4rem;color:#f59e0b;margin-bottom:10px;}
.auth-notice-title{font-size:16px;font-weight:700;color:#0f172a;margin-bottom:10px;}
.auth-notice-body{font-size:13px;color:#475569;line-height:1.9;margin-bottom:6px;}
.auth-notice-link{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(180deg,#16a34a 0%,#15803d 100%);color:#fff !important;padding:10px 22px;border-radius:8px;font-weight:700;text-decoration:none !important;font-size:14px;margin:10px 0;box-shadow:0 2px 8px rgba(22,163,74,.28);transition:all .15s;}
.auth-notice-link:hover{background:linear-gradient(180deg,#15803d 0%,#0B3B0B 100%);box-shadow:0 4px 12px rgba(22,163,74,.4);}
.auth-notice-date{display:inline-flex;align-items:center;gap:6px;background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d;padding:6px 16px;border-radius:20px;font-size:13px;font-weight:600;margin-top:6px;}
.auth-info{background:#f0fdf4;color:#16a34a;border:1px solid #bbf7d0;border-radius:8px;padding:10px 14px;margin-bottom:14px;font-size:13px;line-height:1.6;}
.btn-auth{width:100%;padding:12px 20px;background:linear-gradient(180deg,#16a34a 0%,#15803d 100%);color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:6px;box-shadow:0 2px 6px rgba(22,163,74,.25);}
.btn-auth:hover{background:linear-gradient(180deg,#15803d 0%,#0B3B0B 100%);box-shadow:0 4px 12px rgba(22,163,74,.35);}
.btn-auth:active{transform:scale(.98);}
.auth-divider{border:none;border-top:1px solid #e5e7eb;margin:18px 0 14px;}
.auth-link{display:inline-block;color:#16a34a;font-size:13px;font-weight:500;cursor:pointer;transition:color .2s;}
.auth-link:hover{color:#0B3B0B;text-decoration:underline;}
.auth-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px;}
.auth-info-grid .form-control{margin-bottom:0;font-size:13px;text-align:center;background:#f0fdf4;}
.auth-section-title{font-size:12px;font-weight:700;color:#14532d;text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid #bbf7d0;padding-bottom:6px;margin:4px 0 14px;}
.auth-success-card{text-align:center;padding:8px 0;}
.auth-success-card .success-icon{font-size:48px;color:#16a34a;margin-bottom:12px;}
.auth-success-card .success-id{font-size:22px;font-weight:700;color:#14532d;}
.auth-success-card .success-pass{font-size:22px;font-weight:700;color:#dc2626;direction:ltr;}
.auth-success-card .success-note{font-size:14px;line-height:2;color:#374151;margin:12px 0;}
.auth-success-card .success-contact{font-size:20px;font-weight:700;color:#16a34a;}
.auth-gps-prompt{background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:20px;margin-bottom:16px;text-align:center;}
.auth-gps-prompt .gps-icon{font-size:36px;color:#d97706;margin-bottom:10px;}
.auth-gps-prompt .gps-title{font-size:15px;font-weight:700;color:#92400e;margin-bottom:6px;}
.auth-gps-prompt .gps-text{font-size:13px;color:#78350f;line-height:1.6;margin-bottom:12px;}
.auth-gps-prompt .btn-gps{padding:10px 24px;background:#f59e0b;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s;}
.auth-gps-prompt .btn-gps:hover{background:#d97706;}
.auth-hp{position:absolute;left:-9999px;top:-9999px;opacity:0;pointer-events:none;width:0;height:0;overflow:hidden;}
.footer-brand{margin-top:20px;font-size:12px;color:#9ca3af;text-align:center;}
.footer-brand a{color:#2563eb;font-weight:700;text-decoration:none;}
.footer-brand b{display:block;font-size:13px;color:#6b7280;margin-top:4px;}
.auth-pwd-hint{font-size:11px;color:#6b7280;background:#f9fafb;border:1px solid #e5e7eb;border-radius:6px;padding:8px 12px;margin-bottom:14px;line-height:1.6;text-align:right;}

.loader-container{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.75);justify-content:center;align-items:center;z-index:9999;display:none;}
.spinner{border:5px solid var(--c-surface-3);border-top:5px solid var(--c-brand);border-radius:50%;width:42px;height:42px;animation:spin .7s linear infinite;}
@keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}

/* ================================================================
 * L2 — NAV / SIDE MENU / DROPMENU (dark-green brand theme)
 * Brand palette: #0B3B0B (deep) → #0d5a1a (mid) → #16a34a (accent)
 * ================================================================ */
nav{min-height:54px;background:var(--c-nav-bg);border-bottom:1px solid var(--c-nav-border);color:var(--c-text);display:flex;justify-content:space-between;align-items:center;padding:0 14px;font-family:inherit;position:fixed;right:0;left:0;top:0;z-index:998;box-shadow:var(--c-shadow-sm);}
.main-content{margin-top:54px;}
nav ul{list-style:none;display:flex;margin:0;padding:0;align-items:center;gap:8px;font-size:14px;}
nav ul li{position:relative;color:var(--c-text);white-space:nowrap;cursor:pointer;user-select:none;}
nav .cm-menu-title,nav .menu-title{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:8px;color:var(--c-text);font-weight:500;transition:background .15s ease,color .15s ease;cursor:pointer;}
nav .cm-menu-title:hover,nav .menu-title:hover{background:var(--c-surface-3);color:var(--c-text-heading);}
nav img{display:block;height:28px;width:auto;content:url('/res/img/logoB.png');}
html[data-theme="dark"] nav img{content:url('/res/img/logoW1.png');}
@media (prefers-color-scheme:dark){html:not([data-theme]) nav img{content:url('/res/img/logoW1.png');}}
nav .cm-input{background:var(--c-surface-2);border:1px solid var(--c-border);color:var(--c-text);}
nav .cm-input::placeholder{color:var(--c-text-muted);}
nav .cm-input:focus{background:var(--c-surface);border-color:var(--c-brand);outline:none;box-shadow:0 0 0 3px var(--c-brand-ring);}
nav .cm-input option{background:var(--c-surface);color:var(--c-text);}
#news-navbar{margin:5px 10px -5px 10px;}
/* sticky sidebar anchors below the new 54px nav */
.menu-side,.cm-sidebar{top:54px;max-height:calc(100vh - 54px);}
/* Auto arrow indicator on dropdown triggers */
.cm-menu-title{position:relative;}
.cm-menu-title::after{content:"▾";display:inline-block;margin-inline-start:8px;font-size:16px;line-height:1;opacity:.85;transition:transform .25s ease;}
.cm-dropmenu:has(> .cm-dropmenu-lst.show) > .cm-menu-title::after{transform:rotate(180deg);opacity:1;}
/* ================================================================
 * L2 — SIDEBAR (dark-green brand theme, sticky, active state)
 * ================================================================ */
.menu-side,.cm-sidebar{background:var(--c-sidebar-bg);color:var(--c-sidebar-fg);min-width:230px;max-width:260px;border-left:1px solid var(--c-sidebar-border);box-shadow:var(--c-shadow-xs);position:sticky;top:54px;align-self:flex-start;max-height:calc(100vh - 54px);overflow-y:auto;padding:8px 0;}
.menu-side::-webkit-scrollbar,.cm-sidebar::-webkit-scrollbar{width:6px;}
.menu-side::-webkit-scrollbar-thumb,.cm-sidebar::-webkit-scrollbar-thumb{background:var(--c-border);border-radius:3px;}
.menu-side::-webkit-scrollbar-thumb:hover,.cm-sidebar::-webkit-scrollbar-thumb:hover{background:var(--c-border-strong);}
.menu-side ul,.cm-sidebar ul{list-style:none;padding:0;margin:0;}
.menu-side ul li,.cm-sidebar ul li{border:none;padding:0;cursor:default;transition:none;user-select:none;}
.menu-side .title,.cm-sidebar .cm-sidebar-title{background:var(--c-sidebar-title-bg);color:var(--c-sidebar-title-fg);padding:10px 16px;margin-top:6px;font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .15s ease,color .15s ease;}
.menu-side .title:first-child,.cm-sidebar .cm-sidebar-title:first-child{margin-top:0;border-top:none;}
.menu-side .title:hover,.cm-sidebar .cm-sidebar-title:hover{background:var(--c-surface-3);color:var(--c-text-heading);}
.menu-side .title i,.cm-sidebar .cm-sidebar-title i{color:var(--c-brand);}
.menu-side .title::after,.cm-sidebar .cm-sidebar-title::after{content:"▾";margin-inline-start:auto;font-size:14px;line-height:1;color:var(--c-text-muted);transition:transform .25s ease;}
.menu-side .title.is-collapsed::after,.cm-sidebar .cm-sidebar-title.is-collapsed::after{transform:rotate(90deg);}
.menu-side .item.is-hidden,.cm-sidebar .cm-sidebar-item.is-hidden{display:none;}
.menu-side .item,.cm-sidebar .cm-sidebar-item{display:flex;align-items:center;gap:10px;padding:8px 14px;margin:1px 6px;border-radius:6px;font-size:13px;color:var(--c-sidebar-fg);cursor:pointer;transition:background .15s ease,color .15s ease;border:none;position:relative;}
.menu-side .item i,.cm-sidebar .cm-sidebar-item i{color:var(--c-text-muted);width:16px;text-align:center;font-size:13px;transition:color .15s ease;}
.menu-side .item:hover,.cm-sidebar .cm-sidebar-item:hover{background:var(--c-sidebar-hover-bg);color:var(--c-sidebar-fg-hover);}
.menu-side .item:hover i,.cm-sidebar .cm-sidebar-item:hover i{color:var(--c-brand);}
.menu-side .item.is-active,.cm-sidebar .cm-sidebar-item.is-active{background:var(--c-sidebar-active-bg);color:var(--c-sidebar-active-fg);font-weight:600;box-shadow:none;}
.menu-side .item.is-active i,.cm-sidebar .cm-sidebar-item.is-active i{color:var(--c-brand);}
.menu-side .item.is-active::before,.cm-sidebar .cm-sidebar-item.is-active::before{content:"";position:absolute;right:0;top:6px;bottom:6px;width:3px;background:var(--c-brand);border-radius:3px;box-shadow:none;}
.menu-side .item:active,.cm-sidebar .cm-sidebar-item:active{background:var(--c-surface-3);}
.menu-side .dep-menu-head,.cm-sidebar .dep-menu-head{justify-content:space-between;}
.menu-side .dep-menu-caret,.cm-sidebar .dep-menu-caret{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:4px;color:var(--c-text-muted);}
.menu-side .dep-menu-caret:hover,.cm-sidebar .dep-menu-caret:hover{background:var(--c-surface-3);color:var(--c-brand);}
.menu-side .dep-sub-item,.cm-sidebar .dep-sub-item{padding-inline-start:32px;font-size:12px;}

.dropmenu-all,.cm-dropmenu{position:relative;display:inline-block;}
.dropmenu-lst,.cm-dropmenu-lst{display:none;position:absolute;list-style:none;background:var(--c-surface);color:var(--c-text);padding:6px;margin-top:6px;box-shadow:var(--c-shadow-lg);border-radius:10px;border:1px solid var(--c-border);border-top:3px solid var(--c-brand);line-height:1.4;z-index:1999;top:100%;right:0;min-width:200px;animation:cm-drop-in .18s ease-out;}
@keyframes cm-drop-in{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
.dropmenu-lst.left,.cm-dropmenu-lst.left{right:auto;left:0;}
.dropmenu-lst.dm-left,.cm-dropmenu-lst.dm-left{top:0;left:auto;right:calc(100% + 6px);}
.dropmenu-lst.dm-right,.cm-dropmenu-lst.dm-right{top:0;left:calc(100% + 6px);right:auto;}
.dropmenu-lst li,.cm-dropmenu-lst li{display:flex;align-items:center;gap:8px;min-width:max-content;text-align:right;border:none;border-radius:6px;padding:9px 14px;margin:1px 0;color:var(--c-text);font-size:13px;cursor:pointer;user-select:none;transition:background .12s ease,color .12s ease;}
.dropmenu-lst li i,.cm-dropmenu-lst li i{color:var(--c-text-muted);width:16px;text-align:center;transition:color .12s ease;}
.dropmenu-lst li:hover,.cm-dropmenu-lst li:hover{background:var(--c-brand-soft);color:var(--c-brand-strong);}
.dropmenu-lst li:hover i,.cm-dropmenu-lst li:hover i{color:var(--c-brand);}
.dropmenu-lst li:active,.cm-dropmenu-lst li:active{background:var(--c-brand);color:var(--c-text-inverse);}
.dropmenu-lst li:active i,.cm-dropmenu-lst li:active i{color:var(--c-text-inverse);}
.dropmenu-lst hr,.cm-dropmenu-lst hr{border:none;border-top:1px solid var(--c-border);margin:4px 6px;}
.dropmenu-lst.show,.cm-dropmenu-lst.show,.cm-dropmenu-lst.is-open{display:block;}
/* When a dropmenu is open, let surrounding containers overflow so the list is never clipped. */
.box:has(.dropmenu-lst.show),.cm-card:has(.cm-dropmenu-lst.show),
.boxbd:has(.dropmenu-lst.show),.boxbd:has(.cm-dropmenu-lst.show),
.tbl-wrap:has(.dropmenu-lst.show),.tbl-wrap:has(.cm-dropmenu-lst.show),
.table:has(.dropmenu-lst.show),.cm-table:has(.cm-dropmenu-lst.show){overflow:visible !important;}
/* ================================================================
 * L3 — BOX / CARD COMPONENT
 * Usage:  <div class="box [box--orange]">
 *           <div class="boxhd [boxhd--orange]"><i class="fas fa-x"></i> Title</div>
 *           <div class="boxbd">body</div>
 *           <div class="boxft"><button class="btn bgreen">Save</button></div>
 *         </div>
 * Accent variants: .box--green / --orange / --blue / --dark / --purple
 *   → adds a 3px top stripe + tints boxhd background to accent soft color.
 * Standalone header without box: .boxhd-flex (flex row, space-between)
 *   Collapsible: add .boxhd-toggle to boxhd → toggles ::after arrow.
 * ================================================================ */
.box,.cm-card{width:100%;box-shadow:var(--c-shadow-sm);border-radius:10px;margin-bottom:12px;overflow:hidden;background:var(--c-surface);border:1px solid var(--c-border);}
/* Let sticky table headers resolve against viewport instead of being clipped by card overflow. */
.box:has(.tbl-wrap),.cm-card:has(.tbl-wrap){overflow:visible;}
.boxhd{width:100%;background:var(--c-header-bg);color:var(--c-header-fg);padding:12px 16px;font-size:14px;font-weight:600;letter-spacing:.2px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--c-header-border);}
.boxhd i{color:var(--c-brand);}
.boxbd{width:100%;padding:18px 16px;background:var(--c-surface);}
.boxft{display:flex;justify-content:flex-end;gap:10px;width:100%;background:var(--c-header-bg-2);padding:10px 16px;border-top:1px solid var(--c-header-border);}

/* ================================================================
 * L2 — GRID SYSTEM (12-col)
 * ================================================================ */
.container{display:flex;flex-wrap:wrap;padding:10px;}
.container .gap{gap:15px;}
.row{display:flex;max-width:100%;min-width:0;}
.row .gap{gap:15px;}
/* min-width:0 lets flex children shrink below their content width,
   so wide tables inside .tbl-wrap scroll horizontally instead of overflowing the viewport */
.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{min-width:0;}
.col-1{flex:1 0 8.33%;} .col-2{flex:1 0 16.66%;} .col-3{flex:1 0 25%;} .col-4{flex:1 0 33.33%;}
.col-5{flex:1 0 41.66%;} .col-6{flex:1 0 50%;} .col-7{flex:1 0 58.33%;} .col-8{flex:1 0 66.66%;}
.col-9{flex:1 0 75%;} .col-10{flex:1 0 83.33%;} .col-11{flex:1 0 91.66%;} .col-12{flex:1 0 100%;}
@media (max-width:768px){
  .col-sm-1{flex:1 0 8.33%;} .col-sm-2{flex:1 0 16.66%;} .col-sm-3{flex:1 0 25%;} .col-sm-4{flex:1 0 33.33%;}
  .col-sm-5{flex:1 0 41.66%;} .col-sm-6{flex:1 0 50%;} .col-sm-7{flex:1 0 58.33%;} .col-sm-8{flex:1 0 66.66%;}
  .col-sm-9{flex:1 0 75%;} .col-sm-10{flex:1 0 83.33%;} .col-sm-11{flex:1 0 91.66%;} .col-sm-12{flex:1 0 100%;}
}
@media (min-width:769px) and (max-width:992px){
  .col-md-1{flex:1 0 8.33%;} .col-md-2{flex:1 0 16.66%;} .col-md-3{flex:1 0 25%;} .col-md-4{flex:1 0 33.33%;}
  .col-md-5{flex:1 0 41.66%;} .col-md-6{flex:1 0 50%;} .col-md-7{flex:1 0 58.33%;} .col-md-8{flex:1 0 66.66%;}
  .col-md-9{flex:1 0 75%;} .col-md-10{flex:1 0 83.33%;} .col-md-11{flex:1 0 91.66%;} .col-md-12{flex:1 0 100%;}
}

/* ================================================================
 * L3 — MODAL (pro centered dialog)
 * Usage:  JS: showModal(title, content) / sHTTP(target, params)
 *         HTML: #modal-overlay > #modal > #modal-header + #modal-loader + #modal-content + #modal-footer
 * Accent: add class .is-danger / .is-info / .is-warning / .is-success / .is--{color} to #modal
 *   → changes header gradient. Default: brand-green gradient.
 * IDs are JS-wired; do not rename.
 * ================================================================ */
#modal-overlay{position:fixed;inset:0;width:100%;height:100%;overflow-y:auto;background:rgba(15,23,42,.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);display:none;justify-content:center;align-items:flex-start;z-index:999;padding:5px;box-sizing:border-box;}
#modal-overlay.show{display:flex;animation:cm-modal-fade .18s ease;}
#modal,.cm-modal{width:100%;max-width:560px;min-width:0;background:#fff;border-radius:14px;box-shadow:0 24px 60px -12px rgba(0,0,0,.35),0 8px 24px -8px rgba(0,0,0,.2);position:relative;top:auto;left:auto;transform:none;margin:0 auto;overflow:hidden;animation:cm-modal-pop .22s cubic-bezier(.16,1,.3,1);}
#modal.size-lg,.cm-modal.size-lg{max-width:760px;}
#modal.size-xlg,.cm-modal.size-xlg{max-width:90vw;min-width:600px;}
#modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--c-header-border);background:linear-gradient(135deg,var(--c-brand-strong) 0%,var(--c-brand) 100%);border-radius:0;padding:12px 20px;color:#fff;font-weight:600;font-size:15px;}
#modal-header a:first-child{display:inline-flex;align-items:center;gap:8px;letter-spacing:.2px;}
#modal-header a.fa-times,#modal-header .fa-times{cursor:pointer;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.12);transition:background .15s ease,transform .15s ease;font-size:14px;}
#modal-header a.fa-times:hover,#modal-header .fa-times:hover{background:rgba(255,255,255,.25);transform:rotate(90deg);}
#modal-loader{padding:40px 20px;text-align:center;color:#475569;font-size:13px;}
#modal-content{padding:20px 22px;display:none;text-align:center;color:#1f2937;font-size:14px;line-height:1.7;}
#modal-content h1{background:none;color:#0f172a;margin:0 0 14px;font-size:24px;font-weight:700;letter-spacing:-.2px;}
#modal-content h2{font-size:18px;font-weight:600;color:#1f2937;margin:0 0 10px;}
#modal-content .form-control,#modal-content .cm-input{width:100%;padding:10px 12px;color:#1f2937;box-sizing:border-box;}
#modal-footer{border-top:1px solid #e5e7eb;padding:14px 20px;background:#f9fafb;display:flex;gap:10px;justify-content:flex-end;}
#modal-footer .btn,#modal-footer .cm-btn{margin:0;}
@keyframes cm-modal-fade{from{opacity:0;}to{opacity:1;}}
@keyframes cm-modal-pop{from{opacity:0;transform:translateY(-12px) scale(.96);}to{opacity:1;transform:translateY(0) scale(1);}}

/* ================================================================
 * TICKET VIEW (Mail-thread) — compact form
 * ================================================================ */
.tkt-toolbar{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;gap:8px;flex-wrap:wrap;}
.tkt-toolbar-actions{display:flex;gap:6px;flex-wrap:wrap;}
.tkt-email{background:#fff;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.06);width:100%;}
.tkt-email-subject{background:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%);border-bottom:1px solid #e5e7eb;padding:12px 18px;display:flex;align-items:center;flex-wrap:wrap;gap:4px;}
.tkt-email-headers{padding:10px 18px;border-bottom:1px solid #f3f4f6;background:#fafbfc;}
.tkt-hdr-row{display:flex;justify-content:space-between;align-items:center;padding:3px 0;font-size:13px;color:#374151;gap:10px;}
.tkt-hdr-right{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.tkt-hdr-left{font-size:12px;color:#6b7280;white-space:nowrap;}
.tkt-hdr-label{font-size:12px;font-weight:600;color:#6b7280;white-space:nowrap;min-width:30px;}
.tkt-email-body{padding:20px 22px;font-size:14px;line-height:1.9;color:#374151;white-space:pre-wrap;min-height:60px;border-top:1px solid #f3f4f6;}
.tkt-thread-msg{background:#fff;border:1px solid #e5e7eb;border-radius:8px;margin-bottom:10px;overflow:hidden;transition:box-shadow .2s;}
.tkt-thread-msg:hover{box-shadow:0 2px 8px rgba(0,0,0,.06);}
.tkt-thread-mine{border-right:3px solid #2563eb;}
.tkt-thread-hdr{padding:8px 16px;background:#fafbfc;border-bottom:1px solid #f3f4f6;}
.tkt-thread-hdr table{width:100%;border-collapse:collapse;}
.tkt-thread-body{padding:14px 18px;font-size:13px;line-height:1.8;color:#374151;white-space:pre-wrap;}
.tkt-log{display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 12px;font-size:11px;margin:6px auto;color:#6b7280;background:#fff;border-radius:20px;border:1px dashed #d1d5db;max-width:600px;flex-wrap:wrap;}
.tkt-log-time{font-size:10px;color:#9ca3af;white-space:nowrap;}
.tkt-reply-form{padding:16px;background:#fff;border-top:3px solid #16a34a;}


/* ================================================================
 * L6 — RESPONSIVE: Mobile
 * ================================================================ */
@media (max-width:600px){
  #modal,#modal.size-lg,#modal.size-xlg{width:100%;max-width:100%;min-width:0;border-radius:12px;}
  #modal-overlay{padding:16px 8px;align-items:flex-start;}
  nav{flex-wrap:wrap;gap:5px;}
  nav ul{gap:8px;font-size:12px;}
  .main-content{flex-direction:column;}
  .menu-side,.cm-sidebar{min-width:100%;max-width:100%;max-height:none;position:static;border-left:none;border-bottom:1px solid #e5e7eb;}
  #srv-frm{width:95%;margin:5px auto;}
}
form{width:100%;}

/* ================================================================
 * L3 — TABLE
 * Usage:  <div class="tbl-wrap"><table class="table"><thead>…</thead><tbody>…</tbody></table></div>
 * Zebra:  automatic (odd=surface-2, even=surface). Override: .table--zebra-{green|blue|orange|purple|dark}
 * Inside .box: box owns the radius/shadow, table loses its own.
 * Status rows: tr.st2/st8 (red italic), tr.st9 (strikethrough), tr.st0/st3/st4 (orange), tr.st-1 (muted)
 * Scroll: wrap in .tbl-wrap for horizontal overflow. .tbl-fit → auto column width + word-break.
 * Totals: .tbl-total-row (bold green), .tbl-subtotal-row (light green), .tbl-empty (no-data state)
 * ================================================================ */
.table,.cm-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--c-surface);color:var(--c-text);border-radius:10px;overflow:visible;box-shadow:var(--c-shadow-xs);font-size:13px;}
.table thead th,.cm-table thead th{background:var(--c-header-bg);color:var(--c-header-fg);border:none;border-bottom:1px solid var(--c-header-border);padding:10px 12px;font-size:12.5px;font-weight:600;letter-spacing:.3px;text-align:center;white-space:nowrap;}
.table tfoot th,.cm-table tfoot th{background:var(--c-header-bg);color:var(--c-header-fg);border:none;border-top:1px solid var(--c-header-border);padding:10px 12px;font-size:12.5px;font-weight:600;letter-spacing:.3px;text-align:center;white-space:nowrap;}
.table thead th:first-child,.cm-table thead th:first-child{border-start-start-radius:10px;}
.table thead th:last-child,.cm-table thead th:last-child{border-start-end-radius:10px;}
.table td,.cm-table td{border:none;border-bottom:1px solid var(--c-border);padding:9px 10px;text-align:center;color:var(--c-text);vertical-align:middle;}
.table td.cnt,.cm-table td.cnt,
.table td.txt-mono,.cm-table td.txt-mono,
.table td.u-nowrap,.cm-table td.u-nowrap,
.table td[dir="ltr"],.cm-table td[dir="ltr"],
.table td .lbl,.cm-table td .lbl,
.table td .badge,.cm-table td .badge,
.table td .cm-badge,.cm-table td .cm-badge{white-space:nowrap;}
.table tbody tr,.cm-table tbody tr{transition:background .12s ease,box-shadow .12s ease;background:var(--c-surface);}
.table tbody tr:nth-child(odd),.cm-table tbody tr:nth-child(odd){background:var(--c-surface-2);}
.table tbody tr:nth-child(even),.cm-table tbody tr:nth-child(even){background:var(--c-surface);}
.table tbody tr td,.cm-table tbody tr td{color:var(--c-text);border-bottom:1px solid var(--c-border);}
.table tbody tr:hover,.cm-table tbody tr:hover,.table tbody tr:hover td,.cm-table tbody tr:hover td{background:var(--c-brand-soft);color:var(--c-text-heading);}
.table tbody tr:hover,.cm-table tbody tr:hover{box-shadow:inset 3px 0 0 var(--c-brand);}
.table tbody tr.dep-subrow,.table tbody tr.dep-subrow td{background:var(--c-surface-2) !important;color:var(--c-text) !important;}
.table tbody tr.dep-subrow:hover,.table tbody tr.dep-subrow:hover td{background:var(--c-surface-2) !important;color:var(--c-text) !important;box-shadow:none !important;}
.dep-subrow-wrap{border-bottom:3px solid #000 !important;padding:0 !important;}
.dep-subrow-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:11px;}
.dep-subrow-table th,.dep-subrow-table td{padding:6px 8px;border-bottom:1px dashed var(--c-border);white-space:nowrap;text-align:center;vertical-align:middle;}
.dep-subrow-table tr:last-child th,.dep-subrow-table tr:last-child td{border-bottom:none;}
.dep-subrow-table th{color:var(--c-text-muted);font-weight:600;}
.table tbody tr:last-child td,.cm-table tbody tr:last-child td{border-bottom:none;}
.table td h2,.cm-table td h2{font-size:16px;font-weight:600;margin:0;color:var(--c-text-heading);}
/* Status row colors — refined */
tr.st2,tr.st8{color:#b91c1c;font-style:italic;}
tr.st9{color:#991b1b;font-style:italic;text-decoration:line-through;opacity:.7;}
tr.st0,tr.st3,tr.st4{color:#c2410c;}
tr.st-1{font-style:italic;color:#64748b;}
/* When table is inside a .box, remove double radius/shadow (box owns it) */
.box .table,.box .cm-table,.cm-card .table,.cm-card .cm-table{border-radius:0;box-shadow:none;}
.box .table thead th:first-child,.box .cm-table thead th:first-child,.cm-card .table thead th:first-child,.cm-card .cm-table thead th:first-child{border-start-start-radius:0;}
.box .table thead th:last-child,.box .cm-table thead th:last-child,.cm-card .table thead th:last-child,.cm-card .cm-table thead th:last-child{border-start-end-radius:0;}

/* Labels: element selectors for backward compat, class selectors for new code */
lb1,.lb1,lb2,.lb2,lg1,.lg1,lg2,.lg2{background:#9d9dff;color:#fff;font-size:11px;border-radius:3px;border:0;padding:1px 2px;}
lb2,.lb2{background:#3636f6;}
lg1,.lg1{background:green;}
lg2,.lg2{background:#00ff00;}
wb,.wb{word-break:break-all;overflow-wrap:anywhere;text-wrap:auto;}

/* ================================================================
 * L6 — STAT CARD (.stat-card / .cm-stat-card)
 * Usage:  <div class="stat-card"><div class="stat-icon"><i class="fas fa-x"></i></div>
 *           <div class="stat-value">42</div><div class="stat-label">Label</div></div>
 * Row:    .dash-cards > .stat-card (flex-wrap, gap-12, stretch)
 * Sub-values: .stat-sub > .stat-sub-item > .stat-sub-val + .stat-sub-lbl
 * Progress bar: .stat-bar > .stat-bar-fill (color it inline with background)
 * ================================================================ */
.stat-card,.cm-stat-card{flex:1;min-width:140px;max-width:220px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:12px;padding:18px 16px;box-shadow:var(--c-shadow-xs);text-align:center;position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.stat-card::before,.cm-stat-card::before{content:"";position:absolute;top:0;right:0;left:0;height:2px;background:var(--c-border);transition:background .2s ease;}
.stat-card:hover,.cm-stat-card:hover{transform:translateY(-2px);box-shadow:var(--c-shadow-md);border-color:var(--c-border-strong);}
.stat-card:hover::before,.cm-stat-card:hover::before{background:var(--c-brand);}
.stat-card .stat-icon,.cm-stat-card .cm-stat-icon{font-size:20px;margin:0 auto 12px;color:var(--c-text-muted);display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;background:var(--c-surface-2);border:1px solid var(--c-border);}
.stat-card .stat-value,.cm-stat-card .cm-stat-value{font-size:24px;font-weight:700;color:var(--c-text-heading);line-height:1.2;}
.stat-card .stat-label,.cm-stat-card .cm-stat-label{font-size:11.5px;color:var(--c-text-muted);margin-top:4px;font-weight:500;letter-spacing:.2px;}

.filter-form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;padding:15px;background:var(--c-surface-2);border-radius:8px;margin-bottom:15px;}

.dep-card-rep-mb{margin-bottom:12px;}
.dep-card-rep-toggle{cursor:pointer;}
.dep-card-rep-filter{padding:10px;display:block;}
.dep-card-rep-inp{min-width:140px;}
.dep-card-rep-merchant{min-width:220px;}
.dep-card-rep-btn{min-height:38px;}
.dep-card-kpi-wrap{padding:14px;display:flex;flex-wrap:wrap;gap:10px;}
.dep-card-kpi{padding:10px 14px;font-size:13px;}
.dep-card-chart-table{white-space:nowrap;font-size:12px;}
.dep-card-chart-cell{min-width:220px;}
.dep-card-progress{width:100%;height:14px;display:block;accent-color:var(--c-brand);}
.dep-card-empty{text-align:center;color:var(--c-text-muted);padding:14px;}

.att-list{list-style:none;padding:0;margin:0;}
.att-list li{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid #f1f5f9;}
.att-list li:last-child{border-bottom:none;}
.att-list .att-name{font-weight:600;color:#334155;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.att-list .att-date{font-size:11px;color:#94a3b8;margin:0 10px;}
.att-list .att-actions{display:flex;gap:5px;flex:0 0 auto;}

.inp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:15px;padding:15px;}

/* ================================================================
 * L6 — TAG / CHIP INPUT (.modern-tags-container)
 * Usage:  <div class="modern-tags-container" onclick="…focus tag input">
 *           <div class="tags-wrapper">
 *             <span class="modern-tag-chip">Tag<span class="remove-tag" onclick="…">×</span></span>
 *           </div>
 *           <input class="modern-tag-input" />
 *         </div>
 *         <div class="srv-ac-drop">…autocomplete items…</div>
 * Autocomplete: .srv-ac-item (row), .srv-ac-item b (highlight), .srv-ac-more (overflow label)
 * ================================================================ */
.modern-tags-container,.cm-tags{display:flex !important;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 10px;background:var(--c-surface);border:1px solid var(--c-border-strong);border-radius:8px;min-height:44px;transition:all .2s ease;cursor:text;direction:ltr !important;text-align:left;overflow:visible !important;}
.modern-tags-container:focus-within{border-color:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.18);}
.tags-wrapper{display:contents;}
.modern-tag-chip,.cm-tag{display:flex;align-items:center;gap:6px;background:var(--c-surface-2);color:var(--c-text);padding:4px 10px;border-radius:6px;font-size:13px;font-weight:500;border:1px solid var(--c-border);line-height:normal;white-space:nowrap;}
.modern-tag-chip .remove-tag{cursor:pointer;font-size:14px;color:var(--c-text-muted);transition:color .2s;}
.modern-tag-chip .remove-tag:hover{color:var(--c-danger);}
.modern-tag-input{border:none !important;outline:none !important;flex:1;min-width:100px;padding:0 !important;height:28px !important;background:transparent !important;font-size:14px;box-shadow:none !important;}
.type-filter-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:28px;padding:0 8px;border:1px solid var(--c-border);border-radius:6px;background:var(--c-surface-2);cursor:pointer;white-space:nowrap;flex:0 0 auto;user-select:none;color:var(--c-text);appearance:none;-webkit-appearance:none;outline:none;font:inherit;line-height:1;}
.type-filter-toggle:hover{border-color:var(--c-border-strong);background:var(--c-surface);}
.type-filter-toggle:focus-visible{box-shadow:0 0 0 3px rgba(22,163,74,.18);}
.type-filter-toggle-box{width:16px;height:16px;border:2px solid #94a3b8;border-radius:3px;background:#fff;display:inline-block;position:relative;flex:0 0 auto;}
.type-filter-toggle.is-active{border-color:#16a34a;background:#f0fdf4;color:#166534;}
.type-filter-toggle.is-active .type-filter-toggle-box{border-color:#16a34a;background:#16a34a;}
.type-filter-toggle.is-active .type-filter-toggle-box::after{content:'';position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
.srv-ac-drop,.cm-dropdown{position:absolute;top:100%;left:0;right:0;z-index:9999;background:var(--c-surface);border:1px solid var(--c-border);border-radius:8px;box-shadow:var(--c-shadow-lg);max-height:280px;overflow-y:auto;margin-top:4px;color:var(--c-text);}
.box:has(.srv-ac-drop),.boxbd:has(.srv-ac-drop),form:has(.srv-ac-drop){overflow:visible !important;}

/* =============================================================
 * L3 — PRO COMPONENTS (cm-*): tabs, pagination, toast, tooltip,
 *      spinner, breadcrumb, progress, switch, skeleton, divider
 * ============================================================= */
/* Tabs */
.cm-tabs{display:flex;gap:2px;border-bottom:1px solid var(--cm-c-border);margin:0 0 var(--cm-sp-3);padding:0;list-style:none;overflow-x:auto;scrollbar-width:none;}
.cm-tabs::-webkit-scrollbar{display:none;}
.cm-tab{padding:8px 14px;font-size:var(--cm-fs-md);font-weight:var(--cm-fw-med);color:var(--cm-c-text-soft);background:transparent;border:0;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;transition:color var(--cm-anim-fast),border-color var(--cm-anim-fast),background var(--cm-anim-fast);}
.cm-tab:hover{color:var(--cm-c-text);background:var(--cm-c-surface-2);}
.cm-tab.is-active{color:var(--cm-c-primary);border-bottom-color:var(--cm-c-primary);}
.cm-tab[disabled],.cm-tab.is-disabled{opacity:.5;cursor:not-allowed;}
.cm-tab-panel{display:none;}
.cm-tab-panel.is-active{display:block;}

/* Pagination */
.cm-pagination{display:inline-flex;align-items:center;gap:4px;list-style:none;padding:0;margin:var(--cm-sp-3) 0;}
.cm-page{min-width:32px;height:32px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;font-size:var(--cm-fs-sm);color:var(--cm-c-text);background:var(--cm-c-surface);border:1px solid var(--cm-c-border);border-radius:var(--cm-r-md);cursor:pointer;transition:background var(--cm-anim-fast),border-color var(--cm-anim-fast);user-select:none;}
.cm-page:hover{background:var(--cm-c-surface-2);border-color:var(--cm-c-border-strong);}
.cm-page.is-active{background:var(--cm-c-primary);border-color:var(--cm-c-primary);color:#fff;}
.cm-page.is-disabled,.cm-page[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none;}
.cm-page-ellipsis{min-width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;color:var(--cm-c-muted);}

/* Toast */
.cm-toast-stack{position:fixed;top:60px;right:16px;display:flex;flex-direction:column;gap:8px;z-index:var(--cm-z-toast);pointer-events:none;}
.cm-toast{min-width:260px;max-width:380px;padding:10px 14px;background:var(--cm-c-surface);color:var(--cm-c-text);border:1px solid var(--cm-c-border);border-left:4px solid var(--cm-c-primary);border-radius:var(--cm-r-md);box-shadow:var(--cm-sh-md);font-size:var(--cm-fs-sm);display:flex;align-items:flex-start;gap:10px;pointer-events:auto;animation:cm-toast-in var(--cm-anim-med) var(--cm-easing);}
.cm-toast--success{border-left-color:var(--cm-c-success);}
.cm-toast--warn   {border-left-color:var(--cm-c-warn);}
.cm-toast--danger {border-left-color:var(--cm-c-danger);}
.cm-toast--info   {border-left-color:var(--cm-c-info);}
.cm-toast-title{font-weight:var(--cm-fw-sb);margin:0 0 2px;}
.cm-toast-msg{margin:0;color:var(--cm-c-text-soft);}
.cm-toast-close{margin-left:auto;background:transparent;border:0;color:var(--cm-c-muted);cursor:pointer;font-size:16px;line-height:1;}
.cm-toast.is-leaving{animation:cm-toast-out var(--cm-anim-med) var(--cm-easing) forwards;}
@keyframes cm-toast-in{from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:translateX(0);}}
@keyframes cm-toast-out{to{opacity:0;transform:translateX(20px);}}

/* Tooltip (CSS-only via data-tooltip + .cm-tt wrapper) */
.cm-tt{position:relative;display:inline-flex;}
.cm-tt::after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(2px);background:var(--cm-c-dark);color:#fff;font-size:var(--cm-fs-xs);font-weight:var(--cm-fw-med);padding:4px 8px;border-radius:var(--cm-r-sm);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--cm-anim-fast),transform var(--cm-anim-fast);z-index:var(--cm-z-drop);}
.cm-tt::before{content:"";position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);border:4px solid transparent;border-top-color:var(--cm-c-dark);opacity:0;transition:opacity var(--cm-anim-fast);z-index:var(--cm-z-drop);}
.cm-tt:hover::after,.cm-tt:focus-within::after{opacity:1;transform:translateX(-50%) translateY(0);}
.cm-tt:hover::before,.cm-tt:focus-within::before{opacity:1;}
.cm-tt--bottom::after{bottom:auto;top:calc(100% + 6px);}
.cm-tt--bottom::before{bottom:auto;top:calc(100% + 2px);border-top-color:transparent;border-bottom-color:var(--cm-c-dark);}

/* Spinner */
.cm-spinner{display:inline-block;width:18px;height:18px;border:2px solid #e5e7eb;border-top-color:#16a34a;border-radius:50%;animation:cm-spin .7s linear infinite;vertical-align:-3px;}
.cm-spinner--sm{width:12px;height:12px;border-width:2px;}
.cm-spinner--lg{width:28px;height:28px;border-width:3px;}
.cm-spinner--light{border-color:rgba(255,255,255,.35);border-top-color:#fff;}
@keyframes cm-spin{to{transform:rotate(360deg);}}

/* Breadcrumb */
.cm-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:4px;list-style:none;padding:0;margin:0 0 var(--cm-sp-3);font-size:var(--cm-fs-sm);color:var(--cm-c-text-soft);}
.cm-breadcrumb-item{display:inline-flex;align-items:center;}
.cm-breadcrumb-item + .cm-breadcrumb-item::before{content:"/";margin:0 6px;color:var(--cm-c-muted);}
.cm-breadcrumb-item a{color:var(--cm-c-primary);}
.cm-breadcrumb-item a:hover{text-decoration:underline;}
.cm-breadcrumb-item.is-active{color:var(--cm-c-text);font-weight:var(--cm-fw-med);}

/* Progress */
.cm-progress{display:block;width:100%;height:8px;background:var(--cm-c-surface-2);border-radius:var(--cm-r-pill);overflow:hidden;}
.cm-progress-bar{display:block;height:100%;background:var(--cm-c-primary);border-radius:inherit;transition:width var(--cm-anim-med) var(--cm-easing);}
.cm-progress--success .cm-progress-bar{background:var(--cm-c-success);}
.cm-progress--warn    .cm-progress-bar{background:var(--cm-c-warn);}
.cm-progress--danger  .cm-progress-bar{background:var(--cm-c-danger);}
.cm-progress--striped .cm-progress-bar{background-image:linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);background-size:1rem 1rem;}

/* Switch (toggle) */
.cm-switch{position:relative;display:inline-block;width:38px;height:22px;flex-shrink:0;}
.cm-switch input{opacity:0;width:0;height:0;}
.cm-switch-slider{position:absolute;inset:0;background:var(--cm-c-border-strong);border-radius:var(--cm-r-pill);cursor:pointer;transition:background var(--cm-anim-fast);}
.cm-switch-slider::before{content:"";position:absolute;height:16px;width:16px;left:3px;top:3px;background:#fff;border-radius:50%;box-shadow:var(--cm-sh-sm);transition:transform var(--cm-anim-fast);}
.cm-switch input:checked + .cm-switch-slider{background:var(--cm-c-primary);}
.cm-switch input:checked + .cm-switch-slider::before{transform:translateX(16px);}
.cm-switch input:disabled + .cm-switch-slider{opacity:.5;cursor:not-allowed;}
.cm-switch input:focus-visible + .cm-switch-slider{box-shadow:var(--cm-sh-focus);}

/* Skeleton */
.cm-skel{display:block;background:linear-gradient(90deg,var(--cm-c-surface-2) 0%,#eef2f7 50%,var(--cm-c-surface-2) 100%);background-size:200% 100%;border-radius:var(--cm-r-sm);animation:cm-skel 1.2s ease-in-out infinite;min-height:12px;}
.cm-skel--text{height:12px;margin:6px 0;}
.cm-skel--title{height:18px;width:60%;}
.cm-skel--avatar{width:40px;height:40px;border-radius:50%;}
.cm-skel--card{height:120px;border-radius:var(--cm-r-lg);}
@keyframes cm-skel{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* Divider */
.cm-divider{display:block;height:1px;background:var(--cm-c-border);margin:var(--cm-sp-4) 0;border:0;}
.cm-divider--strong{background:var(--cm-c-border-strong);}
.cm-divider-v{display:inline-block;width:1px;align-self:stretch;background:var(--cm-c-border);margin:0 var(--cm-sp-3);}
.cm-divider-text{display:flex;align-items:center;gap:10px;color:var(--cm-c-muted);font-size:var(--cm-fs-sm);margin:var(--cm-sp-4) 0;}
.cm-divider-text::before,.cm-divider-text::after{content:"";flex:1;height:1px;background:var(--cm-c-border);}

/* Legacy short-name utility aliases (kept for active PHP pages). */
.u-m20{margin:20px !important;}
.u-mt10{margin-top:10px !important;}
.u-w100{width:100% !important;}
.u-p0{padding:0 !important;}
.u-p10{padding:10px !important;}
.u-p15{padding:15px !important;}
.u-mb0{margin-bottom:0 !important;}
.u-ta-center{text-align:center !important;}
.u-mono{font-family:var(--cm-ff-mono) !important;}
.u-nowrap{white-space:nowrap !important;}
.u-inline-block{display:inline-block !important;}
.btn-export{padding:8px 18px;font-size:14px;font-weight:700;}
.btn-save-lg{padding:10px 28px;font-size:16px;font-weight:700;}
.btn-icon-sm{padding:4px 10px;}
.srv-ac-item{padding:8px 12px;cursor:pointer;font-size:13px;direction:ltr;text-align:left;border-bottom:1px solid var(--c-border);transition:background .15s;}
.srv-ac-item:last-child{border-bottom:none;}
.srv-ac-item:hover{background:var(--c-info-soft);}
.srv-ac-item b{color:var(--c-info);}
.srv-ac-more{padding:6px 12px;font-size:11px;color:var(--c-text-muted);text-align:center;direction:rtl;}
.tag-help-text{font-size:11px;color:#94a3b8;margin-top:4px;display:block;margin-left:2px;}

@media print{.noprint{display:none;}body{background-color:#fff;}#PrintArea{display:block;}}

/* Custom local styles to fix layout issues with global .inp-grp */
.custom-filter-box{background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:8px;padding:15px;margin-bottom:15px;}
.mnt-shell{padding:6px 8px 10px;}
.mnt-head{padding:14px 16px;gap:12px;}
.mnt-tabs{gap:10px;justify-content:flex-start;}
.mnt-tabs .btn{min-height:42px;padding:0 16px;font-weight:700;}
.mnt-body{padding:14px 16px 16px;}
.mnt-body > .cm-card{margin-top:12px;}
.mnt-body > .cm-card:first-of-type{margin-top:0;}
.mnt-body .cm-card-head{background:var(--c-header-bg);color:var(--c-header-fg);padding:11px 14px;border-bottom:1px solid var(--c-header-border);}
.mnt-body .cm-card-head h4{margin:0;display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700;line-height:1.4;}
.mnt-body .cm-card-head i{color:var(--c-brand);}
.mnt-body .cm-card-body{padding:12px 14px;}
#mnt-status{margin-bottom:12px;padding:12px 14px;font-weight:700;border-radius:10px;}
.mnt-keys-toolbar,.mnt-danger-toolbar{gap:12px;align-items:flex-end;}
.mnt-keys-toolbar .inp-grp,.mnt-danger-toolbar .inp-grp{margin-bottom:0;}
.mnt-btn-wrap{display:flex;align-items:flex-end;}
.mnt-btn-wrap .btn{min-height:44px;padding:0 14px;font-weight:700;margin-bottom:0;}
.mnt-key-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.mnt-value-preview{margin:0;max-height:360px;overflow:auto;padding:10px 12px;background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:8px;white-space:pre-wrap;word-break:break-word;font-family:var(--cm-ff-mono);font-size:12px;line-height:1.45;text-align:left;}
#mnt-keys-meta{padding:0 4px;font-size:13px;}
#mnt-panel-keys .tbl-wrap,#mnt-panel-status .tbl-wrap,#mnt-panel-storage .tbl-wrap{background:var(--c-surface);border:1px solid var(--c-border);border-radius:10px;padding:10px;}
#mnt-panel-keys .table{margin-bottom:0;}
#mnt-action-result{margin-top:0;padding:14px;border-radius:10px;}
@media (max-width:900px){
  .mnt-shell{padding:4px;}
  .mnt-head,.mnt-body{padding:12px;}
  .mnt-tabs .btn,.mnt-btn-wrap .btn{width:100%;}
  .mnt-btn-wrap{width:100%;}
}
.flt-row{display:flex;flex-wrap:wrap;gap:15px;margin-bottom:15px;}
.flt-col{flex:1;min-width:220px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:8px;padding:12px;box-shadow:var(--c-shadow-xs);}
.flt-title{font-size:13px;font-weight:bold;color:var(--c-text-heading);margin-bottom:10px;display:block;border-bottom:2px solid var(--c-border);padding-bottom:6px;}
.flt-multi-list{max-height:140px;overflow-y:auto;font-size:13px;color:var(--c-text-muted);}
.flt-multi-list label{display:flex;align-items:center;gap:8px;margin-bottom:6px;cursor:pointer;padding:4px;border-radius:4px;transition:background .2s;}
.flt-multi-list label:hover{background:var(--c-surface-2);}
.flt-multi-list input[type="checkbox"]{width:16px;height:16px;margin:0;cursor:pointer;}
.flt-input-group{display:flex;gap:8px;align-items:center;}
.flt-input-group > *{flex:1;}
.flt-combined{display:flex;border:1px solid var(--c-border-strong);border-radius:8px;overflow:hidden;}
.flt-combined select,.flt-combined input{border:none;border-radius:0;box-shadow:none;min-height:38px;font-size:13px;flex:1;}
.flt-combined select{background-color:var(--c-surface-2);}
.flt-combined select:first-child{border-left:1px solid var(--c-border-strong);max-width:140px;}

/* ================================================================
 * L5 — UTILITY COMPONENT CLASSES (page helpers)
 * ================================================================ */
.frm-row-end{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;}
.frm-row-wide{display:flex;flex-wrap:wrap;gap:20px;}
.frm-row{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;}
.frm-f1{flex:1;min-width:140px;}
.frm-f2{flex:2;min-width:280px;}
.frm-f1-sm{flex:1;min-width:150px;max-width:190px;}
.tbl-wrap{overflow:visible;max-width:100%;-webkit-overflow-scrolling:touch;}
.tbl-wrap::-webkit-scrollbar{height:10px;}
.tbl-wrap::-webkit-scrollbar-track{background:#f1f5f9;border-radius:5px;}
.tbl-wrap::-webkit-scrollbar-thumb{background:#16a34a;border-radius:5px;}

@media (max-width:900px){
  .tbl-wrap{overflow-x:auto;overflow-y:visible;}
}
.tbl-wrap::-webkit-scrollbar-thumb:hover{background:#15803d;}
.d-flex{display:flex;}
.d-block{display:block;}
.mb-5{margin-bottom:5px;}
.mb-15{margin-bottom:15px;}
.mb-20{margin-bottom:20px;}
.mt-0{margin-top:0;}
.mt-15{margin-top:15px;}
.mt-25{margin-top:25px;}
.txt-sm{font-size:12px;}
.txt-bold{font-weight:700;}
.txt-muted{color:var(--c-text-muted);}
.txt-required{color:#dc2626;font-weight:700;}

/* Universal form system (bootstrap-like reusable blocks) */
.frm-wrap{max-width:1000px;margin:0 auto;padding:20px 0;}
.frm-layout .frm-row,.frm-layout .frm-row-wide{gap:16px;align-items:flex-start;}
.frm-layout .frm-f1{flex:1 1 240px;min-width:220px;}
.frm-layout .frm-f2{flex:2 1 340px;min-width:300px;}
.frm-layout .frm-f1-sm{flex:1 1 170px;min-width:150px;max-width:210px;}
.frm-layout .inp-grp{margin-bottom:12px;}
.frm-layout .inp-grp label{z-index:2;}
.frm-layout .form-control{width:100%;max-width:100%;}
.frm-layout .modern-tags-container{min-height:48px;}
.frm-layout .modern-tag-input{min-width:120px;}
.frm-panel{background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:10px;padding:16px 18px;box-shadow:var(--c-shadow-xs);}
.frm-panel-warm{background:var(--c-warning-soft);border-color:var(--c-warning);}
.frm-title{color:var(--c-brand-strong);border-bottom:2px solid var(--c-brand-soft);padding-bottom:8px;margin:0 0 15px;font-weight:700;display:flex;align-items:center;gap:6px;}
.frm-title i{color:var(--c-brand);}
.frm-title-warm{color:var(--c-a-orange-strong);border-bottom-color:var(--c-warning-soft);}
.frm-title-warm i{color:var(--c-warning);}
.frm-check-row{display:flex;align-items:center;gap:10px;min-width:200px;min-height:44px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:8px;padding:10px 12px;transition:all .15s ease;cursor:pointer;}
.frm-check-row:hover{border-color:var(--c-brand);background:var(--c-brand-soft);}
.frm-check-row:has(input:checked){border-color:var(--c-brand);background:var(--c-brand-soft);box-shadow:inset 3px 0 0 var(--c-brand);}
.frm-check-row input[type="checkbox"]{width:20px;height:20px;accent-color:#16a34a;}
.frm-check-row label{margin:0;font-size:14px;font-weight:600;cursor:pointer;}
.dep-card-calc-row{align-items:stretch !important;}
.dep-card-calc-row .inp-grp,.dep-card-calc-row .frm-check-row{flex:1 1 160px;}
.dep-card-fee-toggle{justify-content:space-between;min-height:52px;background:linear-gradient(180deg,#f8fafc 0%,#eefbf3 100%);border-width:2px;}
.dep-card-fee-toggle span{font-size:15px;font-weight:700;color:#14532d;line-height:1.5;}
.dep-card-fee-toggle:has(input:checked){box-shadow:inset 4px 0 0 var(--c-brand),0 0 0 2px rgba(22,163,74,.12);}
.dep-card-calc-output .form-control{background:#f8fafc;font-weight:700;}
.dep-card-calc-net .form-control{color:#0f172a;}
.dep-card-calc-total .form-control{background:#ecfdf5;border-color:#86efac;color:#15803d;}
.dep-card-link{font-family:var(--cm-ff-mono);font-size:12px;direction:ltr;text-align:left;}
.frm-chip-wrap{display:flex;flex-wrap:wrap;gap:10px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:14px;}
.frm-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border:1px solid #e2e8f0;border-radius:999px;background:#f8fafc;font-size:13px;cursor:pointer;transition:all .15s ease;}
.frm-chip:hover{border-color:#16a34a;background:#f0fdf4;color:#14532d;}
.frm-chip.is-active,.frm-chip.active{border-color:#16a34a;background:#16a34a;color:#fff;}
.frm-minw-140{min-width:140px;} .frm-minw-160{min-width:160px;} .frm-minw-170{min-width:170px;} .frm-minw-180{min-width:180px;} .frm-minw-200{min-width:200px;} .frm-minw-300{min-width:300px;}
.dep-card-shell{padding:8px 4px;}
.dep-card-title{font-weight:700;font-size:18px;margin-bottom:14px;text-align:center;}
.dep-card-row{gap:10px;align-items:flex-end;}
.dep-card-search-btn{min-height:38px;}
.frm-channel-all{display:flex;align-items:center;gap:6px;width:100%;color:#14532d;font-weight:700;border-bottom:1px dashed #bbf7d0;padding-bottom:10px;margin-bottom:5px;cursor:pointer;}
.dep-card-fee-toggle-min{min-width:220px;}
.dep-card-help-note{font-size:12px;}
.dep-card-success{text-align:center;padding:14px 6px;}
.dep-card-success-icon{font-size:46px;color:#16a34a;margin-bottom:8px;}
.dep-card-success-title{margin:6px 0 12px;color:#065f46;}
.dep-card-success-table{margin:0 auto;max-width:480px;font-size:13px;}
.dep-card-success-clock{margin-top:14px;font-size:12px;color:#92400e;}
.dep-card-success-actions{margin-top:14px;text-align:center;}
.dep-card-box{margin-bottom:12px;}
.dep-card-status-pill{margin-inline-start:8px;}
.dep-card-actions{display:flex;gap:6px;flex-wrap:wrap;}
.dep-card-btn-sm{padding:6px 12px;font-size:12px;}
.dep-card-btn-json{padding:4px 10px;font-size:11px;}
.dep-card-btn-xs{padding:1px 6px;font-size:10px;}
.dep-card-boxbd{padding:12px;}
.dep-card-boxbd-sm{padding:10px;}
.dep-card-table{font-size:13px;}
.dep-card-th{text-align:right;}
.dep-card-th-wide{width:160px;}
.dep-card-th-phone{width:140px;}
.dep-card-total{color:#15803d;font-weight:700;}
.dep-card-note-sm{font-size:12px;}
.dep-card-money-danger{color:#b91c1c !important;}
.dep-card-money-strong{font-weight:700;}
.dep-card-log-title{margin-top:10px;font-weight:700;color:#475569;font-size:12px;}
.dep-card-scroll-sm{margin-top:6px;max-height:180px;overflow-y:auto;}
.dep-card-scroll-md{padding:6px;max-height:360px;overflow-y:auto;}
.dep-card-table-xs{font-size:11px;white-space:nowrap;}
.dep-card-empty{text-align:center;color:#64748b;padding:14px;}
.dep-card-details-cell{max-width:340px;overflow:hidden;text-overflow:ellipsis;}
@media (max-width:900px){.frm-layout .frm-f1,.frm-layout .frm-f2,.frm-layout .frm-f1-sm{min-width:100%;max-width:100%;flex-basis:100%;}}

/* Keep filter/input rows inline in CRM pages even if .inp-grp has global width:100% */
.frm-row-end .inp-grp,
.frm-row-wide .inp-grp,
.frm-row .inp-grp {
  width: auto;
}

/* ================================================================
 * L7 — DASHBOARD MONITOR (.dash-monitor-*)
 * Usage:  <div class="dash-monitor-grid">
 *           <div class="dash-monitor-box">
 *             <div class="dash-monitor-hd"><span>Title</span><span class="dm-badge dm-badge-red">3</span></div>
 *             <table>…</table>
 *             <div class="dash-monitor-empty">…</div>
 *           </div>
 *         </div>
 * Badge variants: .dm-badge-red (danger), .dm-badge-amber (warning)
 * Counter colors: .dm-cnt-green / .dm-cnt-orange / .dm-cnt-red / .dm-cnt-black
 * Grid: 4 cols → 2 cols @1200px → 1 col @900px.
 * ================================================================ */
/* CRM dashboard (home-main.php) layout */
.dash-cards,.cm-stats-row{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch;margin-bottom:12px;}
.dash-cards .stat-card,.cm-stat,.dash-cards .cm-stat,.cm-stats-row .cm-stat-card{flex:1 1 220px;min-width:220px;max-width:none;}
.dash-cards--compact{gap:8px;}
.dash-cards--compact .stat-card{flex:1 1 110px;min-width:110px;max-width:160px;padding:10px 10px;}
.dash-cards--compact .stat-card .stat-icon{width:30px;height:30px;font-size:13px;margin-bottom:6px;}
.dash-cards--compact .stat-card .stat-value{font-size:18px;}
.dash-cards--compact .stat-card .stat-label{font-size:10px;}
.dash-cards--compact .stat-card .txt-xs{font-size:10px;margin-top:2px;}
.dash-res-input-wrap,.cm-search-input{position:relative;margin-top:8px;}
.dash-res-input-wrap .form-control,.cm-search-input .cm-input{padding-left:36px;}
.dash-res-input-icon,.cm-search-input-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#64748b;pointer-events:none;}
.stat-sub,.cm-stat-sub{display:flex;justify-content:center;gap:14px;margin-top:8px;}
.stat-sub-item,.cm-stat-sub-item{text-align:center;}
.stat-sub-val,.cm-stat-sub-val{font-size:18px;font-weight:800;line-height:1.15;}
.stat-sub-lbl,.cm-stat-sub-lbl{font-size:11px;color:#64748b;}
.stat-unit,.cm-stat-unit{font-size:12px;color:#64748b;}
.stat-bar,.cm-stat-bar{height:8px;background:#e2e8f0;border-radius:999px;overflow:hidden;margin-top:8px;}
.stat-bar-fill,.cm-stat-bar-fill{height:100%;border-radius:999px;}
.dash-monitor-grid,.cm-monitor-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.dash-monitor-box,.cm-monitor-box{background:var(--c-surface);border:1px solid var(--c-border);border-radius:10px;overflow:hidden;box-shadow:var(--c-shadow-xs);transition:box-shadow .15s ease,border-color .15s ease;}
.dash-monitor-box:hover,.cm-monitor-box:hover{box-shadow:var(--c-shadow-md);border-color:var(--c-border-strong);}
.dash-monitor-hd,.cm-monitor-hd{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 14px;background:var(--c-header-bg);color:var(--c-header-fg);font-size:13px;font-weight:600;border-bottom:1px solid var(--c-header-border);}
.dash-monitor-hd i,.cm-monitor-hd i{color:var(--c-brand);}
.dm-badge,.cm-monitor-badge{padding:2px 10px;border-radius:999px;background:var(--c-surface-3);color:var(--c-text);font-weight:600;min-width:28px;text-align:center;font-size:11.5px;border:1px solid var(--c-border);}
.dm-badge-red,.cm-monitor-badge--danger{background:var(--c-danger-soft);color:var(--c-danger);border-color:transparent;}
.dm-badge-amber,.cm-monitor-badge--warning{background:var(--c-warning-soft);color:var(--c-warning);border-color:transparent;}
.dash-monitor-box table,.cm-monitor-box table{width:100%;border-collapse:collapse;}
.dash-monitor-box th,.cm-monitor-box th{padding:9px 10px;font-size:11px;text-align:right !important;padding-right:14px;background:var(--c-header-bg-2);color:var(--c-header-fg-muted);font-weight:600;border-bottom:1px solid var(--c-header-border);text-transform:uppercase;letter-spacing:.3px;}
.dash-monitor-box td,.cm-monitor-box td{padding:8px 10px;font-size:12.5px;text-align:right !important;padding-right:14px;border-bottom:1px solid var(--c-border);color:var(--c-text);}
.dash-monitor-box tbody tr,.cm-monitor-box tbody tr{transition:background .12s ease;}
.dash-monitor-box tbody tr:hover,.cm-monitor-box tbody tr:hover{background:var(--c-brand-soft);box-shadow:inset 3px 0 0 var(--c-brand);}
.dash-monitor-box tbody tr:last-child td,.cm-monitor-box tbody tr:last-child td{border-bottom:0;}
.dash-monitor-empty,.cm-monitor-empty{padding:22px;text-align:center;color:var(--c-text-muted);font-size:13px;}
.dash-monitor-empty i,.cm-monitor-empty i{font-size:16px;margin-left:4px;color:var(--c-success);}
.dm-cnt-green,.cm-cnt--success{color:var(--c-success);font-weight:700;}
.dm-cnt-black,.cm-cnt--default{color:var(--c-text-heading);font-weight:700;}
.dm-cnt-orange,.cm-cnt--warning{color:var(--c-warning);font-weight:700;}
.dm-cnt-red,.cm-cnt--danger{color:var(--c-danger);font-weight:700;}
.dash-update-bar,.cm-update-bar{margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:10px;box-shadow:var(--c-shadow-xs);}
.dash-update-txt,.cm-update-txt{color:var(--c-text-muted);font-size:12px;font-weight:500;}
.dash-refresh-btn,.cm-refresh-btn{border:1px solid var(--c-border);background:var(--c-surface);color:var(--c-text-muted);border-radius:8px;padding:6px 12px;cursor:pointer;transition:all .15s ease;font-size:13px;}
.dash-refresh-btn:hover,.cm-refresh-btn:hover{background:var(--c-brand-soft);color:var(--c-brand);border-color:var(--c-brand);transform:rotate(90deg);}
@media (max-width:1200px){.dash-monitor-grid,.cm-monitor-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:900px){.dash-monitor-grid,.cm-monitor-grid{grid-template-columns:1fr;}.dash-cards .stat-card,.cm-stats-row .cm-stat-card{min-width:180px;}}

/* Box header / table util blocks */
.boxhd-flex{display:flex;justify-content:space-between;align-items:center;background:var(--c-header-bg) !important;color:var(--c-header-fg) !important;padding:12px 16px;border-radius:6px;border-bottom:1px solid var(--c-header-border);}
.boxhd-flex i{color:var(--c-brand);}
.boxhd-toggle{cursor:pointer;user-select:none;display:flex;align-items:center;}
.boxhd-toggle::after{content:"▾";margin-inline-start:auto;font-size:18px;line-height:1;opacity:.9;transition:transform .25s ease;}
.boxhd-toggle.open::after{transform:rotate(180deg);}
.btn-grp{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.tbl-total-row{background:#ecfdf5 !important;font-weight:700;font-size:13.5px;border-top:2px solid #16a34a;color:#14532d;}
.tbl-total-row td{padding-top:12px;padding-bottom:12px;}
.tbl-subtotal-row{background:#f0fdf4 !important;font-weight:600;color:#166534;font-size:13px;}
.tbl-scroll{overflow-x:auto;}
.hd-date-range{font-size:12px;color:#94a3b8;font-weight:normal;margin-right:8px;}
.tbl-empty{text-align:center;padding:40px 20px;color:#94a3b8;font-size:13px;}
.mono-badge{font-family:monospace;font-size:11px;direction:ltr;unicode-bidi:bidi-override;}
.boxhd-dark{background:var(--c-header-bg) !important;color:var(--c-header-fg) !important;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--c-header-border);padding:12px 16px;}
.boxhd-dark i{color:var(--c-brand);}
.boxhd-dark .hd-date-range{color:var(--c-header-fg-muted);}

/* ================================================================
 * L7 — ATTENDANCE MODULE (.atn-*)
 * Toggle switch: <label class="atn-switch"><input type="checkbox" /><span class="atn-slider"></span></label>
 * Editable cell: <input class="atn-inp [atn-inp-wide]" />
 * Stat card: <div class="atn-stat" style="background:#16a34a"><div class="atn-stat-val">0</div><div class="atn-stat-lbl">Present</div></div>
 * ================================================================ */
.atn-switch{position:relative;display:inline-block;width:46px;height:24px;}
.atn-switch input{opacity:0;width:0;height:0;}
.atn-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#cbd5e1;border-radius:24px;transition:.3s;}
.atn-slider::before{content:"";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s;}
.atn-switch input:checked + .atn-slider{background:#22c55e;}
.atn-switch input:checked + .atn-slider::before{transform:translateX(22px);}
.atn-switch input:disabled + .atn-slider{cursor:not-allowed;opacity:.5;}
.atn-inp{border:1px solid #e2e8f0;border-radius:6px;padding:5px 8px;font-size:13px;text-align:center;outline:none;transition:border-color .2s,box-shadow .2s;background:#f8fafc;}
.atn-inp:focus{border-color:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.18);background:#fff;}
.atn-inp-wide{width:100%;min-width:140px;text-align:right;}
.atn-inp[readonly]{background:#f1f5f9;color:#94a3b8;cursor:not-allowed;}
#tbl-atn tbody tr{transition:background .3s;}
#tbl-atn tbody tr.atn-saving{opacity:.6;}
.atn-stat{flex:1;min-width:150px;color:#fff;border-radius:10px;padding:16px 20px;text-align:center;}
.atn-stat-val{font-size:28px;font-weight:bold;}
.atn-stat-lbl{font-size:13px;opacity:.85;}

/* ================================================================
 * L7 — REPORT DASHBOARD CARDS (.rep-*)
 * Usage:  <div class="rep-dash">
 *           <div class="rep-sections"><div class="rep-section">
 *             <div class="rep-section-title"><i class="fas fa-x"></i> Section</div>
 *             <div class="rep-grid">
 *               <div class="rep-card clr-blue" onclick="…">
 *                 <div class="rc-icon"><i class="fas fa-x"></i></div>
 *                 <div class="rc-body"><div class="rc-title">…</div><div class="rc-desc">…</div></div>
 *                 <i class="fas fa-chevron-left rc-arrow"></i>
 *               </div>
 *             </div>
 *           </div></div>
 *         </div>
 * Card colors: .clr-blue / .clr-green / .clr-purple / .clr-amber / .clr-rose / .clr-teal
 * ================================================================ */
.rep-dash{padding:20px;}
.rep-dash h2{font-size:22px;font-weight:700;color:#1e293b;margin:0 0 6px;}
.rep-dash .rep-sub{font-size:13px;color:#64748b;margin-bottom:24px;}
.rep-sections{display:flex;flex-wrap:wrap;gap:20px;}
.rep-section{flex:1;min-width:300px;margin-bottom:28px;}
.rep-section-title{font-size:15px;font-weight:700;color:#14532d;display:flex;align-items:center;gap:8px;margin-bottom:14px;padding-bottom:8px;border-bottom:2px solid #bbf7d0;}
.rep-section-title i{color:#16a34a;font-size:16px;}
.rep-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}
.rep-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px 18px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:14px;position:relative;overflow:hidden;}
.rep-card::before{content:'';position:absolute;top:0;right:0;width:4px;height:100%;border-radius:0 12px 12px 0;background:linear-gradient(180deg,#0B3B0B,#16a34a);transition:width .2s;}
.rep-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(22,163,74,.15);border-color:#bbf7d0;}
.rep-card:hover::before{width:6px;}
.rep-card .rc-icon{width:46px;height:46px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.rep-card .rc-body{flex:1;min-width:0;}
.rep-card .rc-title{font-size:14px;font-weight:600;color:#1e293b;line-height:1.4;}
.rep-card .rc-desc{font-size:11px;color:#94a3b8;margin-top:3px;}
.rep-card .rc-arrow{color:#cbd5e1;font-size:14px;transition:color .2s,transform .2s;}
.rep-card:hover .rc-arrow{color:#2563eb;transform:translateX(-3px);}
.rep-card.clr-blue   .rc-icon{background:#eff6ff;color:#2563eb;} .rep-card.clr-blue::before  {background:#2563eb;}
.rep-card.clr-green  .rc-icon{background:#f0fdf4;color:#16a34a;} .rep-card.clr-green::before {background:#16a34a;}
.rep-card.clr-purple .rc-icon{background:#faf5ff;color:#7c3aed;} .rep-card.clr-purple::before{background:#7c3aed;}
.rep-card.clr-amber  .rc-icon{background:#fffbeb;color:#d97706;} .rep-card.clr-amber::before {background:#d97706;}
.rep-card.clr-rose   .rc-icon{background:#fff1f2;color:#e11d48;} .rep-card.clr-rose::before  {background:#e11d48;}
.rep-card.clr-teal   .rc-icon{background:#f0fdfa;color:#0d9488;} .rep-card.clr-teal::before  {background:#0d9488;}
@media (max-width:600px){.rep-sections{flex-direction:column;}.rep-section{min-width:0;}.rep-grid{grid-template-columns:1fr;}.rep-card{padding:16px 14px;}}

/* ─── Report Table Subtotals & Grand Totals ─── */
.rep-subtotal td{background:#e8f0fe !important;font-weight:bold;color:#1e3a8a;border-top:2px solid #1a73e8;}
.rep-grand-total td{background:#1e3a8a !important;font-weight:bold;color:#fff !important;border-top:3px solid #0f172a;font-size:13px;}

/* ================================================================
 * L7 — PERMISSION MATRIX (.perm-card)
 * Usage:  <div class="perm-card">
 *           <div class="perm-card-hd">
 *             <div class="perm-hd-title">Group Name</div>
 *             <div class="perm-hd-actions">
 *               <button class="btn-sm pmb-allow">Allow All</button>
 *               <button class="btn-sm pmb-deny">Deny All</button>
 *               <button class="btn-sm pmb-reset">Reset</button>
 *             </div>
 *           </div>
 *           <div class="perm-card-bd [collapsed]">
 *             <div class="chk-row"><input type="checkbox" /><label>Permission</label></div>
 *             <div class="chk-row"><select class="perm-tri bgreen">…</select><label>…</label></div>
 *           </div>
 *         </div>
 * perm-tri tri-state: .bgreen (allow), .bred (deny), .bwhite (inherit)
 * ================================================================ */
.perm-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;margin-bottom:15px;overflow:hidden;}
.perm-card-hd{background:#f1f5f9;padding:12px 15px;font-weight:bold;color:#1e293b;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;}
.perm-card-hd .perm-hd-title{flex:1;min-width:0;display:flex;align-items:center;gap:6px;}
.perm-card-hd .perm-hd-key{font-size:11px;font-weight:normal;color:#64748b;margin-inline-start:8px;}
.perm-card-hd .perm-hd-actions{display:flex;gap:6px;flex-wrap:wrap;}
.perm-card-hd .perm-hd-actions .btn-sm{font-size:11px;padding:4px 10px;border-radius:4px;cursor:pointer;border:1px solid transparent;font-weight:600;transition:.15s;}
.perm-card-hd .perm-hd-actions .btn-sm:hover{filter:brightness(.96);}
.perm-card-hd .perm-hd-actions .pmb-allow{background:#dcfce7;color:#166534;border-color:#86efac;}
.perm-card-hd .perm-hd-actions .pmb-deny{background:#fee2e2;color:#991b1b;border-color:#fca5a5;}
.perm-card-hd .perm-hd-actions .pmb-reset{background:#e0e7ff;color:#3730a3;border-color:#a5b4fc;}
.perm-card-bd{padding:15px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;}
.perm-card-bd.collapsed{display:none;}
.perm-scope-row{grid-column:1 / -1;}
.chk-row{display:flex;align-items:center;gap:8px;padding:8px;border-radius:4px;transition:.2s;}
.chk-row:hover{background:#f8fafc;}
.chk-row input[type="checkbox"]{width:20px;height:20px;cursor:pointer;accent-color:#16a34a;}
.chk-row label{cursor:pointer;font-size:13px;color:#334155;user-select:none;margin:0;}
.chk-row select.perm-tri{width:100%;font-size:12px;padding:4px 6px;border:1px solid #d1d5db;border-radius:4px;outline:none;}
.chk-row select.perm-tri.bgreen{background:#dcfce7;color:#166534;border-color:#86efac;}
.chk-row select.perm-tri.bred{background:#fee2e2;color:#991b1b;border-color:#fca5a5;}
.chk-row select.perm-tri.bwhite{background:#fff;color:#111;}

/* ================================================================
 * L7 — STAT BOX (.stat-box) — help ticket / status counter widget
 * Usage:  <div class="stat-box sb--green [sb-active]">
 *           <i class="fas fa-ticket-alt"></i>
 *           <div class="stat-val">12</div>
 *           <div class="stat-lbl">جديد</div>
 *         </div>
 * Accent modifiers: .sb--green / --orange / --blue / --red / --yellow / --dark / --purple
 * Active: add .sb-active → brand border + ring + strong text.
 * ================================================================ */
.stat-box{background:var(--c-surface);padding:16px 14px;border-radius:10px;box-shadow:var(--c-shadow-xs);border:2px solid var(--c-border);flex:1 1 0;min-width:130px;display:flex;flex-direction:column;align-items:center;text-align:center;transition:all .15s ease;user-select:none;cursor:pointer;position:relative;overflow:hidden;}
.stat-box::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:transparent;}
.stat-box:hover{border-color:var(--c-brand);box-shadow:var(--c-shadow-md);transform:translateY(-2px);}
.sb-active{border-color:var(--c-brand) !important;background:var(--c-brand-soft) !important;}
.sb-active .stat-val{color:var(--c-brand-strong);}
.sb-active .stat-lbl{color:var(--c-brand-strong);}
.sb-active::before{background:var(--c-brand);}
.sb-outline{border-color:var(--c-border);}
.stat-val{font-size:26px;font-weight:700;margin-top:6px;color:var(--c-text-heading);line-height:1.1;}
.stat-lbl{font-size:12px;color:var(--c-text-muted);font-weight:600;margin-top:4px;}
/* Accent modifiers — assign one per status for scan-heat at a glance. */
.sb--green  {background:var(--c-a-green-soft)  !important;}
.sb--orange {background:var(--c-a-orange-soft) !important;}
.sb--blue   {background:var(--c-a-blue-soft)   !important;}
.sb--red    {background:var(--c-danger-soft)   !important;}
.sb--yellow {background:var(--c-warning-soft)  !important;}
.sb--dark   {background:var(--c-a-dark-soft)   !important;}
.sb--purple {background:var(--c-a-purple-soft) !important;}
.sb--green::before  {background:var(--c-a-green);}
.sb--orange::before {background:var(--c-a-orange);}
.sb--blue::before   {background:var(--c-a-blue);}
.sb--red::before    {background:var(--c-danger);}
.sb--yellow::before {background:var(--c-warning);}
.sb--dark::before   {background:var(--c-a-dark);}
.sb--purple::before {background:var(--c-a-purple);}
.sb--green  .stat-val,.sb--green  .stat-lbl{color:var(--c-a-green-strong);}
.sb--orange .stat-val,.sb--orange .stat-lbl{color:var(--c-a-orange-strong);}
.sb--blue   .stat-val,.sb--blue   .stat-lbl{color:var(--c-a-blue-strong);}
.sb--red    .stat-val,.sb--red    .stat-lbl{color:var(--c-danger);}
.sb--yellow .stat-val,.sb--yellow .stat-lbl{color:var(--c-warning);}
.sb--dark   .stat-val,.sb--dark   .stat-lbl{color:var(--c-a-dark-strong);}
.sb--purple .stat-val,.sb--purple .stat-lbl{color:var(--c-a-purple-strong);}
.sb--green  i{color:var(--c-a-green);}
.sb--orange i{color:var(--c-a-orange);}
.sb--blue   i{color:var(--c-a-blue);}
.sb--red    i{color:var(--c-danger);}
.sb--yellow i{color:var(--c-warning);}
.sb--dark   i{color:var(--c-a-dark);}
.sb--purple i{color:var(--c-a-purple);}
/* Active state keeps brand-ring emphasis even over an accent tint */
.sb-active.sb--green,.sb-active.sb--orange,.sb-active.sb--blue,.sb-active.sb--red,.sb-active.sb--yellow,.sb-active.sb--dark,.sb-active.sb--purple{border-color:var(--c-brand) !important;box-shadow:0 0 0 3px var(--c-brand-ring);}
.filter-container{transition:max-height .3s ease-out;overflow:hidden;}

/* ================================================================
 * L7 — HELP TICKET THREAD (.msg-* / .tkt-*)
 * Usage:  <div class="msg-bubble msg-agent [msg-customer|msg-system|msg-internal]">
 *           <div class="msg-header">…</div>
 *           <div class="msg-body">…</div>
 *           <div class="msg-attach-bar">…</div>
 *         </div>
 * Bubbles: .msg-agent (green, right border), .msg-customer (blue, right border),
 *          .msg-system (amber pill, centered), .msg-internal (yellow, lock badge)
 * Attachments: .att-chip (pill link), .att-act (icon btn), .att-act-del (danger hover),
 *              .att-img-preview (thumbnail with hover zoom)
 * Thread list: .tkt-email > .tkt-email-subject + .tkt-email-headers + .tkt-email-body
 * ================================================================ */
.tkt-hdr{background:linear-gradient(180deg,#f0fdf4 0%,#ecfdf5 100%);padding:16px 20px;border-bottom:1px solid #bbf7d0;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.tkt-title{font-size:18px;font-weight:700;color:#14532d;margin:0;}
.tkt-meta{font-size:12px;color:#64748b;margin-top:5px;}
.msg-bubble{margin-bottom:18px;padding:14px 16px;border-radius:12px;position:relative;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:box-shadow .15s ease;}
.msg-bubble:hover{box-shadow:0 4px 10px rgba(0,0,0,.06);}
.msg-agent{background:#f0fdf4;border:1px solid #bbf7d0;margin-left:8%;border-right:4px solid #16a34a;}
.msg-customer{background:#eff6ff;border:1px solid #bfdbfe;margin-right:8%;border-right:4px solid #2563eb;}
.msg-system{background:#fffbeb;border:1px solid #fef3c7;margin:10px auto;max-width:70%;text-align:center;padding:8px 16px;font-size:12px;color:#92400e;border-radius:999px;box-shadow:none;}
.msg-internal{background:#fef9c3;border:1px solid #fde68a;margin-left:8%;border-right:4px solid #ca8a04;position:relative;}
.msg-internal::after{content:"🔒 داخلي";position:absolute;top:8px;left:12px;font-size:10px;font-weight:700;color:#854d0e;background:rgba(255,255,255,.6);padding:2px 8px;border-radius:999px;}
.msg-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:12px;font-weight:700;color:#1e293b;gap:8px;flex-wrap:wrap;}
.msg-header .msg-author{display:inline-flex;align-items:center;gap:6px;}
.msg-header .msg-date{color:#64748b;font-weight:500;font-size:11px;direction:ltr;unicode-bidi:bidi-override;font-family:monospace;}
.msg-body{font-size:14px;color:#1f2937;line-height:1.7;white-space:pre-wrap;word-break:break-word;}
.msg-attach-bar{margin-top:12px;padding-top:10px;border-top:1px dashed rgba(0,0,0,.12);display:flex;gap:8px;flex-wrap:wrap;}
.att-chip{background:#fff;border:1px solid #cbd5e1;padding:6px 12px;border-radius:999px;font-size:12px;color:#475569;display:inline-flex;align-items:center;gap:8px;text-decoration:none;transition:all .15s ease;cursor:default;}
.att-chip:hover{background:#f0fdf4;border-color:#16a34a;color:#14532d;}
.att-act{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-width:28px;min-height:28px;padding:4px 6px;border-radius:6px;font-size:13px;color:#64748b;border:1px solid transparent;transition:.15s;}
.att-act:hover{color:#16a34a;background:#f0fdf4;border-color:#bbf7d0;}
.att-act-del:hover{color:#dc2626;background:#fee2e2;border-color:#fecaca;}
.att-img-preview{display:block;max-width:220px;max-height:160px;border-radius:8px;border:1px solid #e5e7eb;margin-top:6px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;}
.att-img-preview:hover{transform:scale(1.02);box-shadow:0 4px 12px rgba(0,0,0,.15);}


/* =============================================================
 * L5 — UTILITIES (Bootstrap/Tailwind-style, token-driven)
 * Naming: .u-{prop}-{value}   (!important to win over components)
 * Spacing: 0=0 1=4 2=8 3=12 4=16 5=20 6=24 7=32 8=40 (px)
 * ============================================================= */
/* Display */
.u-d-none{display:none!important;} .u-d-block{display:block!important;} .u-d-inline{display:inline!important;}
.u-d-inline-block{display:inline-block!important;} .u-d-flex{display:flex!important;}
.u-d-inline-flex{display:inline-flex!important;} .u-d-grid{display:grid!important;}

/* Flexbox */
.u-flex-row{flex-direction:row!important;} .u-flex-col{flex-direction:column!important;}
.u-flex-row-rev{flex-direction:row-reverse!important;}
.u-flex-wrap{flex-wrap:wrap!important;} .u-flex-nowrap{flex-wrap:nowrap!important;}
.u-flex-1{flex:1 1 0!important;} .u-flex-auto{flex:1 1 auto!important;}
.u-flex-none{flex:0 0 auto!important;} .u-flex-half{flex:.5!important;}
.u-justify-start{justify-content:flex-start!important;} .u-justify-end{justify-content:flex-end!important;}
.u-justify-center{justify-content:center!important;} .u-justify-between{justify-content:space-between!important;}
.u-justify-around{justify-content:space-around!important;} .u-justify-evenly{justify-content:space-evenly!important;}
.u-items-start{align-items:flex-start!important;} .u-items-end{align-items:flex-end!important;}
.u-items-center{align-items:center!important;} .u-items-stretch{align-items:stretch!important;} .u-items-baseline{align-items:baseline!important;}
.u-self-start{align-self:flex-start!important;} .u-self-end{align-self:flex-end!important;}
.u-self-center{align-self:center!important;} .u-self-stretch{align-self:stretch!important;}
.u-flex-left-ltr{display:flex!important;justify-content:flex-start!important;direction:ltr!important;}

/* Gap */
.u-gap-0{gap:var(--cm-sp-0)!important;} .u-gap-1{gap:var(--cm-sp-1)!important;} .u-gap-2{gap:var(--cm-sp-2)!important;}
.u-gap-3{gap:var(--cm-sp-3)!important;} .u-gap-4{gap:var(--cm-sp-4)!important;} .u-gap-5{gap:var(--cm-sp-5)!important;} .u-gap-6{gap:var(--cm-sp-6)!important;}

/* Margin */
.u-m-0{margin:0!important;} .u-m-1{margin:var(--cm-sp-1)!important;} .u-m-2{margin:var(--cm-sp-2)!important;} .u-m-3{margin:var(--cm-sp-3)!important;}
.u-m-4{margin:var(--cm-sp-4)!important;} .u-m-5{margin:var(--cm-sp-5)!important;} .u-m-6{margin:var(--cm-sp-6)!important;}
.u-m-7{margin:var(--cm-sp-7)!important;} .u-m-8{margin:var(--cm-sp-8)!important;} .u-m-auto{margin:auto!important;}
.u-mt-0{margin-top:0!important;}.u-mt-1{margin-top:var(--cm-sp-1)!important;}.u-mt-2{margin-top:var(--cm-sp-2)!important;}.u-mt-3{margin-top:var(--cm-sp-3)!important;}.u-mt-4{margin-top:var(--cm-sp-4)!important;}.u-mt-5{margin-top:var(--cm-sp-5)!important;}.u-mt-6{margin-top:var(--cm-sp-6)!important;}.u-mt-7{margin-top:var(--cm-sp-7)!important;}.u-mt-8{margin-top:var(--cm-sp-8)!important;}
.u-mr-0{margin-right:0!important;}.u-mr-1{margin-right:var(--cm-sp-1)!important;}.u-mr-2{margin-right:var(--cm-sp-2)!important;}.u-mr-3{margin-right:var(--cm-sp-3)!important;}.u-mr-4{margin-right:var(--cm-sp-4)!important;}.u-mr-5{margin-right:var(--cm-sp-5)!important;}.u-mr-6{margin-right:var(--cm-sp-6)!important;}
.u-mb-0{margin-bottom:0!important;}.u-mb-1{margin-bottom:var(--cm-sp-1)!important;}.u-mb-2{margin-bottom:var(--cm-sp-2)!important;}.u-mb-3{margin-bottom:var(--cm-sp-3)!important;}.u-mb-4{margin-bottom:var(--cm-sp-4)!important;}.u-mb-5{margin-bottom:var(--cm-sp-5)!important;}.u-mb-6{margin-bottom:var(--cm-sp-6)!important;}.u-mb-7{margin-bottom:var(--cm-sp-7)!important;}.u-mb-8{margin-bottom:var(--cm-sp-8)!important;}
.u-ml-0{margin-left:0!important;}.u-ml-1{margin-left:var(--cm-sp-1)!important;}.u-ml-2{margin-left:var(--cm-sp-2)!important;}.u-ml-3{margin-left:var(--cm-sp-3)!important;}.u-ml-4{margin-left:var(--cm-sp-4)!important;}.u-ml-5{margin-left:var(--cm-sp-5)!important;}.u-ml-6{margin-left:var(--cm-sp-6)!important;}
.u-mx-0{margin-left:0!important;margin-right:0!important;}.u-mx-1{margin-left:var(--cm-sp-1)!important;margin-right:var(--cm-sp-1)!important;}.u-mx-2{margin-left:var(--cm-sp-2)!important;margin-right:var(--cm-sp-2)!important;}.u-mx-3{margin-left:var(--cm-sp-3)!important;margin-right:var(--cm-sp-3)!important;}.u-mx-4{margin-left:var(--cm-sp-4)!important;margin-right:var(--cm-sp-4)!important;}.u-mx-auto{margin-left:auto!important;margin-right:auto!important;}
.u-my-0{margin-top:0!important;margin-bottom:0!important;}.u-my-1{margin-top:var(--cm-sp-1)!important;margin-bottom:var(--cm-sp-1)!important;}.u-my-2{margin-top:var(--cm-sp-2)!important;margin-bottom:var(--cm-sp-2)!important;}.u-my-3{margin-top:var(--cm-sp-3)!important;margin-bottom:var(--cm-sp-3)!important;}.u-my-4{margin-top:var(--cm-sp-4)!important;margin-bottom:var(--cm-sp-4)!important;}

/* Padding */
.u-p-0{padding:0!important;} .u-p-1{padding:var(--cm-sp-1)!important;} .u-p-2{padding:var(--cm-sp-2)!important;} .u-p-3{padding:var(--cm-sp-3)!important;}
.u-p-4{padding:var(--cm-sp-4)!important;} .u-p-5{padding:var(--cm-sp-5)!important;} .u-p-6{padding:var(--cm-sp-6)!important;}
.u-p-7{padding:var(--cm-sp-7)!important;} .u-p-8{padding:var(--cm-sp-8)!important;}
.u-pt-0{padding-top:0!important;}.u-pt-1{padding-top:var(--cm-sp-1)!important;}.u-pt-2{padding-top:var(--cm-sp-2)!important;}.u-pt-3{padding-top:var(--cm-sp-3)!important;}.u-pt-4{padding-top:var(--cm-sp-4)!important;}.u-pt-5{padding-top:var(--cm-sp-5)!important;}.u-pt-6{padding-top:var(--cm-sp-6)!important;}
.u-pr-0{padding-right:0!important;}.u-pr-1{padding-right:var(--cm-sp-1)!important;}.u-pr-2{padding-right:var(--cm-sp-2)!important;}.u-pr-3{padding-right:var(--cm-sp-3)!important;}.u-pr-4{padding-right:var(--cm-sp-4)!important;}.u-pr-5{padding-right:var(--cm-sp-5)!important;}.u-pr-6{padding-right:var(--cm-sp-6)!important;}
.u-pb-0{padding-bottom:0!important;}.u-pb-1{padding-bottom:var(--cm-sp-1)!important;}.u-pb-2{padding-bottom:var(--cm-sp-2)!important;}.u-pb-3{padding-bottom:var(--cm-sp-3)!important;}.u-pb-4{padding-bottom:var(--cm-sp-4)!important;}.u-pb-5{padding-bottom:var(--cm-sp-5)!important;}.u-pb-6{padding-bottom:var(--cm-sp-6)!important;}
.u-pl-0{padding-left:0!important;}.u-pl-1{padding-left:var(--cm-sp-1)!important;}.u-pl-2{padding-left:var(--cm-sp-2)!important;}.u-pl-3{padding-left:var(--cm-sp-3)!important;}.u-pl-4{padding-left:var(--cm-sp-4)!important;}.u-pl-5{padding-left:var(--cm-sp-5)!important;}.u-pl-6{padding-left:var(--cm-sp-6)!important;}
.u-px-0{padding-left:0!important;padding-right:0!important;}.u-px-1{padding-left:var(--cm-sp-1)!important;padding-right:var(--cm-sp-1)!important;}.u-px-2{padding-left:var(--cm-sp-2)!important;padding-right:var(--cm-sp-2)!important;}.u-px-3{padding-left:var(--cm-sp-3)!important;padding-right:var(--cm-sp-3)!important;}.u-px-4{padding-left:var(--cm-sp-4)!important;padding-right:var(--cm-sp-4)!important;}
.u-py-0{padding-top:0!important;padding-bottom:0!important;}.u-py-1{padding-top:var(--cm-sp-1)!important;padding-bottom:var(--cm-sp-1)!important;}.u-py-2{padding-top:var(--cm-sp-2)!important;padding-bottom:var(--cm-sp-2)!important;}.u-py-3{padding-top:var(--cm-sp-3)!important;padding-bottom:var(--cm-sp-3)!important;}.u-py-4{padding-top:var(--cm-sp-4)!important;padding-bottom:var(--cm-sp-4)!important;}

/* Width / Height */
.u-w-25{width:25%!important;} .u-w-50{width:50%!important;} .u-w-75{width:75%!important;} .u-w-100{width:100%!important;} .u-w-auto{width:auto!important;}
.u-h-100{height:100%!important;} .u-h-auto{height:auto!important;} .u-mw-100{max-width:100%!important;} .u-mh-100{max-height:100%!important;}

/* Min-width helpers */
.u-minw-60{min-width:60px!important;} .u-minw-80{min-width:80px!important;} .u-minw-100{min-width:100px!important;}
.u-minw-110{min-width:110px!important;} .u-minw-120{min-width:120px!important;} .u-minw-130{min-width:130px!important;}
.u-minw-150{min-width:150px!important;} .u-minw-160{min-width:160px!important;} .u-minw-180{min-width:180px!important;}
.u-minw-200{min-width:200px!important;} .u-minw-250{min-width:250px!important;} .u-minw-300{min-width:300px!important;}

/* Text */
.u-text-left{text-align:left!important;} .u-text-right{text-align:right!important;}
.u-text-center{text-align:center!important;} .u-text-justify{text-align:justify!important;}
.u-text-nowrap{white-space:nowrap!important;} .u-text-wrap{white-space:normal!important;}
.u-text-break{word-break:break-word!important;overflow-wrap:break-word!important;}
.u-pre-wrap{white-space:pre-wrap!important;}
.u-pre-scroll-x{display:block!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;white-space:pre!important;word-break:normal!important;overflow-wrap:normal!important;}
.u-bidi-isolate{unicode-bidi:isolate!important;}
.u-text-truncate{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
.u-text-upper{text-transform:uppercase!important;} .u-text-lower{text-transform:lowercase!important;} .u-text-cap{text-transform:capitalize!important;}
.u-text-mono{font-family:var(--cm-ff-mono)!important;}

/* Font sizes / weights */
.u-fs-xs{font-size:var(--cm-fs-xs)!important;} .u-fs-sm{font-size:var(--cm-fs-sm)!important;}
.u-fs-md{font-size:var(--cm-fs-md)!important;} .u-fs-lg{font-size:var(--cm-fs-lg)!important;}
.u-fs-xl{font-size:var(--cm-fs-xl)!important;} .u-fs-2xl{font-size:var(--cm-fs-2xl)!important;}
.u-fw-reg{font-weight:var(--cm-fw-reg)!important;} .u-fw-med{font-weight:var(--cm-fw-med)!important;}
.u-fw-sb{font-weight:var(--cm-fw-sb)!important;} .u-fw-bd{font-weight:var(--cm-fw-bd)!important;}

/* Colors (text + bg) */
.u-text-default{color:var(--cm-c-text)!important;} .u-text-soft{color:var(--cm-c-text-soft)!important;} .u-text-muted{color:var(--cm-c-muted)!important;}
.u-text-primary{color:var(--cm-c-primary)!important;} .u-text-success{color:var(--cm-c-success)!important;}
.u-text-warn{color:var(--cm-c-warn)!important;} .u-text-danger{color:var(--cm-c-danger)!important;}
.u-text-info{color:var(--cm-c-info)!important;} .u-text-dark{color:var(--cm-c-dark)!important;} .u-text-white{color:#fff!important;}
.u-bg-surface{background:var(--cm-c-surface)!important;} .u-bg-soft{background:var(--cm-c-surface-2)!important;}
.u-bg-primary{background:var(--cm-c-primary)!important;color:#fff!important;}
.u-bg-success{background:var(--cm-c-success)!important;color:#fff!important;}
.u-bg-warn{background:var(--cm-c-warn)!important;color:#fff!important;}
.u-bg-danger{background:var(--cm-c-danger)!important;color:#fff!important;}
.u-bg-info{background:var(--cm-c-info)!important;color:#fff!important;}
.u-bg-dark{background:var(--cm-c-dark)!important;color:#fff!important;}
.u-bg-primary-soft{background:var(--cm-c-primary-soft)!important;}
.u-bg-success-soft{background:var(--cm-c-success-soft)!important;}
.u-bg-warn-soft{background:var(--cm-c-warn-soft)!important;}
.u-bg-danger-soft{background:var(--cm-c-danger-soft)!important;}
.u-bg-info-soft{background:var(--cm-c-info-soft)!important;}

/* Borders / Radius / Shadow */
.u-bd{border:1px solid var(--cm-c-border)!important;} .u-bd-strong{border:1px solid var(--cm-c-border-strong)!important;} .u-bd-0{border:0!important;}
.u-bd-t{border-top:1px solid var(--cm-c-border)!important;} .u-bd-r{border-right:1px solid var(--cm-c-border)!important;}
.u-bd-b{border-bottom:1px solid var(--cm-c-border)!important;} .u-bd-l{border-left:1px solid var(--cm-c-border)!important;}
.u-rounded-0{border-radius:0!important;} .u-rounded-sm{border-radius:var(--cm-r-sm)!important;}
.u-rounded{border-radius:var(--cm-r-md)!important;} .u-rounded-lg{border-radius:var(--cm-r-lg)!important;}
.u-rounded-xl{border-radius:var(--cm-r-xl)!important;} .u-rounded-pill{border-radius:var(--cm-r-pill)!important;}
.u-shadow-0{box-shadow:none!important;} .u-shadow-sm{box-shadow:var(--cm-sh-sm)!important;}
.u-shadow{box-shadow:var(--cm-sh-md)!important;} .u-shadow-lg{box-shadow:var(--cm-sh-lg)!important;}

/* Position / Overflow / Cursor / Visibility */
.u-pos-rel{position:relative!important;} .u-pos-abs{position:absolute!important;} .u-pos-fix{position:fixed!important;} .u-pos-stk{position:sticky!important;}
.u-overflow-auto{overflow:auto!important;} .u-overflow-hidden{overflow:hidden!important;} .u-overflow-visible{overflow:visible!important;}
.u-overflow-x-auto{overflow-x:auto!important;} .u-overflow-y-auto{overflow-y:auto!important;}
.u-cursor-pointer{cursor:pointer!important;} .u-cursor-default{cursor:default!important;} .u-cursor-not{cursor:not-allowed!important;}
.u-invisible{visibility:hidden!important;} .u-visible{visibility:visible!important;}
.u-select-none{user-select:none!important;-webkit-user-select:none!important;} .u-pointer-none{pointer-events:none!important;}

/* Direction (RTL/LTR) */
.u-dir-ltr{direction:ltr!important;} .u-dir-rtl{direction:rtl!important;}

/* ── Shorthand aliases (readable, no-conflict, cover common inline-style patterns) ── */
/* Typography shorthands */
.u-text-bold  {font-weight:700!important;} .u-text-normal{font-weight:400!important;}
.u-text-sm    {font-size:12px!important;}  .u-text-xs    {font-size:11px!important;} .u-text-lg{font-size:16px!important;}
.u-ltr        {direction:ltr!important;unicode-bidi:bidi-override!important;}
/* Width / max-width shorthands */
.u-w-full     {width:100%!important;}   .u-w-half{width:50%!important;}
.u-h-full     {height:100%!important;}
.u-mw-600     {max-width:600px!important;} .u-mw-760{max-width:760px!important;} .u-mw-900{max-width:900px!important;} .u-mw-none{max-width:none!important;}
/* Border-radius shorthands */
.u-radius-0   {border-radius:0!important;}
.u-radius-sm  {border-radius:var(--cm-r-sm)!important;} .u-radius-md{border-radius:var(--cm-r-md)!important;}
.u-radius-lg  {border-radius:var(--cm-r-lg)!important;} .u-radius-pill{border-radius:var(--cm-r-pill)!important;}
/* Background shorthands */
.u-bg-white   {background:#fff!important;} .u-bg-light{background:var(--c-surface-2)!important;}
/* Flex center helper (two-axis centering) */
.u-flex-center{display:flex!important;justify-content:center!important;align-items:center!important;}
/* Cursor shorthands */
.u-pointer    {cursor:pointer!important;} .u-default{cursor:default!important;}
/* Position shorthands */
.u-relative   {position:relative!important;} .u-absolute{position:absolute!important;}
/* Status color helpers (use with .lbl/.badge) */
.u-status-new      {color:var(--c-status-new)!important;}
.u-status-review   {color:var(--c-status-review)!important;}
.u-status-done     {color:var(--c-status-done)!important;}
.u-status-info     {color:var(--c-status-info)!important;}
.u-status-rejected {color:var(--c-status-rejected)!important;}

/* Generic detail row under trx lists */
.cm-row-note .cm-row-note-cell{
  background:var(--c-surface-2);
  padding:8px 12px;
}

/* Note box — transaction detail card style */
.note-box{
  background:#fff;
  color:#0040ff;
  font-size:9px !important;
  line-height:9px;
  border-radius:20px;
  padding:5px 11px;
  white-space:pre-wrap !important;
  text-align:left;
  direction:ltr;
}

/* L6 — Responsive helpers (md = 768px) */
@media (max-width:767.98px){
  .u-d-md-none{display:none!important;} .u-d-md-block{display:block!important;}
  .u-text-md-center{text-align:center!important;} .u-w-md-100{width:100%!important;} .u-flex-md-col{flex-direction:column!important;}
}

/* =============================================================
 * L3 — THEME TOGGLE COMPONENT (light ⇄ dark ⇄ system)
 * Accessible, 36px square, keyboard + screen-reader friendly.
 * ============================================================= */
.cm-theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:10px;
  background:var(--c-surface-2);border:1px solid var(--c-border);
  color:var(--c-text-muted);cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease;
  position:relative;
}
.cm-theme-toggle:hover{
  background:var(--c-surface-3);color:var(--c-text-heading);
  border-color:var(--c-border-strong);
}
.cm-theme-toggle:active{transform:scale(.94);}
.cm-theme-toggle:focus-visible{outline:2px solid var(--c-brand);outline-offset:2px;box-shadow:0 0 0 3px var(--c-brand-ring);}
.cm-theme-toggle i{font-size:14px;line-height:1;}
/* Icon swap: sun in dark, moon in light; auto icon shows in "system" state */
.cm-theme-toggle .ico-sun,.cm-theme-toggle .ico-moon,.cm-theme-toggle .ico-auto{display:none;}
html[data-theme="light"] .cm-theme-toggle .ico-moon{display:inline-block;}
html[data-theme="dark"]  .cm-theme-toggle .ico-sun{display:inline-block;color:#fbbf24;}
html:not([data-theme])   .cm-theme-toggle .ico-auto{display:inline-block;}
/* Tiny mode dot to indicate "system" (no explicit theme) */
html:not([data-theme]) .cm-theme-toggle::after{
  content:"";position:absolute;bottom:4px;left:4px;width:6px;height:6px;
  border-radius:50%;background:var(--c-brand);box-shadow:0 0 0 2px var(--c-surface-2);
}

/* =============================================================
 * L4 — IDENTITY ACCENT SYSTEM (green / orange / blue / dark / purple)
 * Apply as modifier class on any .box or .boxhd:
 *   <div class="box box--orange"><div class="boxhd">…</div></div>
 *   <div class="boxhd boxhd--blue">…</div>
 * Creates a 3px top stripe + tinted header bg + tinted icon.
 * ============================================================= */
.box--green  { border-top:3px solid var(--c-a-green)  !important; }
.box--orange { border-top:3px solid var(--c-a-orange) !important; }
.box--blue   { border-top:3px solid var(--c-a-blue)   !important; }
.box--dark   { border-top:3px solid var(--c-a-dark)   !important; }
.box--purple { border-top:3px solid var(--c-a-purple) !important; }

.boxhd--green,  .box--green  > .boxhd{background:var(--c-a-green-soft)  !important;color:var(--c-a-green-strong)  !important;border-bottom-color:var(--c-a-green)  !important;}
.boxhd--orange, .box--orange > .boxhd{background:var(--c-a-orange-soft) !important;color:var(--c-a-orange-strong) !important;border-bottom-color:var(--c-a-orange) !important;}
.boxhd--blue,   .box--blue   > .boxhd{background:var(--c-a-blue-soft)   !important;color:var(--c-a-blue-strong)   !important;border-bottom-color:var(--c-a-blue)   !important;}
.boxhd--dark,   .box--dark   > .boxhd{background:var(--c-a-dark-soft)   !important;color:var(--c-a-dark-strong)   !important;border-bottom-color:var(--c-a-dark)   !important;}
.boxhd--purple, .box--purple > .boxhd{background:var(--c-a-purple-soft) !important;color:var(--c-a-purple-strong) !important;border-bottom-color:var(--c-a-purple) !important;}
.boxhd--green  i, .box--green  > .boxhd i{color:var(--c-a-green)  !important;}
.boxhd--orange i, .box--orange > .boxhd i{color:var(--c-a-orange) !important;}
.boxhd--blue   i, .box--blue   > .boxhd i{color:var(--c-a-blue)   !important;}
.boxhd--dark   i, .box--dark   > .boxhd i{color:var(--c-a-dark)   !important;}
.boxhd--purple i, .box--purple > .boxhd i{color:var(--c-a-purple) !important;}

/* =============================================================
 * L4 — DEPARTMENT CHIPS (dep-chip) — used in help.php filter row
 * Pill tabs with count badge. Active = brand accent.
 * ============================================================= */
.dep-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:999px;
  background:var(--c-surface);color:var(--c-text);
  border:1px solid var(--c-border);
  font-size:12.5px;font-weight:500;
  cursor:pointer;user-select:none;text-decoration:none;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .08s ease;
  white-space:nowrap;
}
.dep-chip:hover{background:var(--c-surface-3);border-color:var(--c-border-strong);color:var(--c-text-heading);}
.dep-chip:active{transform:scale(.97);}
.dep-chip b{
  display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;padding:0 6px;
  background:var(--c-surface-3);color:var(--c-text-muted);
  border-radius:999px;font-size:11px;font-weight:700;line-height:1;
}
.dep-chip.dc-active{
  background:var(--c-brand-soft);color:var(--c-brand-strong);border-color:var(--c-brand);
  font-weight:600;box-shadow:0 0 0 3px var(--c-brand-ring);
}
.dep-chip.dc-active b{background:var(--c-brand);color:#fff;}
/* Department bar wrapper — replaces ad-hoc inline dashed border */
.dep-bar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 14px;margin-bottom:15px;border-radius:10px;
  background:var(--c-surface);border:1px solid var(--c-border);
  box-shadow:var(--c-shadow-xs);
}
.dep-bar-lbl{font-size:12.5px;color:var(--c-text-muted);font-weight:700;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;}
.dep-bar-lbl i{color:var(--c-a-blue);}

/* =============================================================
 * L3 — SIDEBAR SECTION COLOR-CODING
 * Each .title cycles through identity accents via :nth-of-type
 * so users can scan-locate sections by color, not just text.
 * Green→Blue→Orange→Dark→Purple (wraps).
 * ============================================================= */
.menu-side .title,.cm-sidebar .cm-sidebar-title{position:relative;}
.menu-side .title::before,.cm-sidebar .cm-sidebar-title::before{
  content:"";position:absolute;right:0;top:6px;bottom:6px;width:3px;border-radius:3px;background:var(--c-a-green);
}
.menu-side .title:nth-of-type(5n+2)::before,.cm-sidebar .cm-sidebar-title:nth-of-type(5n+2)::before{background:var(--c-a-blue);}
.menu-side .title:nth-of-type(5n+3)::before,.cm-sidebar .cm-sidebar-title:nth-of-type(5n+3)::before{background:var(--c-a-orange);}
.menu-side .title:nth-of-type(5n+4)::before,.cm-sidebar .cm-sidebar-title:nth-of-type(5n+4)::before{background:var(--c-a-dark);}
.menu-side .title:nth-of-type(5n+5)::before,.cm-sidebar .cm-sidebar-title:nth-of-type(5n+5)::before{background:var(--c-a-purple);}
.menu-side .title:nth-of-type(5n+2) i,.cm-sidebar .cm-sidebar-title:nth-of-type(5n+2) i{color:var(--c-a-blue);}
.menu-side .title:nth-of-type(5n+3) i,.cm-sidebar .cm-sidebar-title:nth-of-type(5n+3) i{color:var(--c-a-orange);}
.menu-side .title:nth-of-type(5n+4) i,.cm-sidebar .cm-sidebar-title:nth-of-type(5n+4) i{color:var(--c-a-dark);}
.menu-side .title:nth-of-type(5n+5) i,.cm-sidebar .cm-sidebar-title:nth-of-type(5n+5) i{color:var(--c-a-purple);}

/* =============================================================
 * L4 — TABLE FIT-TO-PAGE
 * Tables should fill container width and never clip off-screen.
 * For tables with `table-layout:fixed` we still allow content
 * to wrap (word-break) instead of being truncated.
 * ============================================================= */
.tbl-wrap>table,.tbl-wrap>.table,.tbl-wrap>.cm-table{width:100% !important;min-width:0;max-width:100%;}
.tbl-wrap table td,.tbl-wrap table th{word-break:break-word;overflow-wrap:anywhere;}
.tbl-fit{width:100% !important;table-layout:auto !important;}
.tbl-fit td,.tbl-fit th{white-space:normal !important;word-break:break-word;overflow-wrap:anywhere;}
@media (max-width:1200px){
  .tbl-wrap .table td,.tbl-wrap .table th,.tbl-wrap .cm-table td,.tbl-wrap .cm-table th{padding:8px 8px;font-size:12px;}
}
@media (max-width:900px){
  .tbl-wrap .table td,.tbl-wrap .table th,.tbl-wrap .cm-table td,.tbl-wrap .cm-table th{padding:6px 6px;font-size:11.5px;}
}

/* =============================================================
 * L4 — ZEBRA-ACCENT TABLE VARIANTS (G.D)
 * Default .table uses --c-surface-2 zebra. Opt into a colored
 * zebra by adding .table--zebra-{blue|green|orange|purple|dark}
 * Useful for analytics/reports where visual module-identity helps.
 * ============================================================= */
.table--zebra-green  tbody tr:nth-child(odd),.cm-table--zebra-green  tbody tr:nth-child(odd){background:var(--c-a-green-soft);}
.table--zebra-blue   tbody tr:nth-child(odd),.cm-table--zebra-blue   tbody tr:nth-child(odd){background:var(--c-a-blue-soft);}
.table--zebra-orange tbody tr:nth-child(odd),.cm-table--zebra-orange tbody tr:nth-child(odd){background:var(--c-a-orange-soft);}
.table--zebra-purple tbody tr:nth-child(odd),.cm-table--zebra-purple tbody tr:nth-child(odd){background:var(--c-a-purple-soft);}
.table--zebra-dark   tbody tr:nth-child(odd),.cm-table--zebra-dark   tbody tr:nth-child(odd){background:var(--c-a-dark-soft);}

/* =============================================================
 * L3 — PAGE HEADER (.page-hd) — G.E
 * Standardized page title block with optional breadcrumb,
 * accent stripe, and right-aligned action slot.
 * Usage:
 *   <div class="page-hd page-hd--orange">
 *     <div class="page-hd-main">
 *       <i class="fas fa-headset"></i>
 *       <h1>الدعم الفني</h1>
 *       <span class="page-hd-sub">إدارة التذاكر</span>
 *     </div>
 *     <div class="page-hd-actions"> ... buttons ... </div>
 *   </div>
 * ============================================================= */
.page-hd{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:14px 18px;margin-bottom:14px;border-radius:10px;
  background:var(--c-surface);border:1px solid var(--c-border);
  border-top:3px solid var(--c-brand);
  box-shadow:var(--c-shadow-xs);
}
.page-hd-main{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 auto;}
.page-hd-main > i{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:10px;
  background:var(--c-brand-soft);color:var(--c-brand);font-size:18px;flex:0 0 auto;
}
.page-hd-main h1,.page-hd-main h2{
  margin:0;font-size:18px;font-weight:700;color:var(--c-text-heading);letter-spacing:-.1px;
}
.page-hd-sub{
  font-size:12px;color:var(--c-text-muted);font-weight:500;margin-inline-start:10px;
  padding-inline-start:10px;border-inline-start:1px solid var(--c-border);
}
.page-hd-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.page-hd-crumb{font-size:12px;color:var(--c-text-muted);display:flex;align-items:center;gap:6px;margin-bottom:4px;}
.page-hd-crumb a{color:var(--c-text-muted);text-decoration:none;}
.page-hd-crumb a:hover{color:var(--c-brand);}
.page-hd-crumb i.sep{font-size:10px;opacity:.5;}
/* Accent variants */
.page-hd--green  {border-top-color:var(--c-a-green);}
.page-hd--orange {border-top-color:var(--c-a-orange);}
.page-hd--blue   {border-top-color:var(--c-a-blue);}
.page-hd--dark   {border-top-color:var(--c-a-dark);}
.page-hd--purple {border-top-color:var(--c-a-purple);}
.page-hd--green  .page-hd-main > i{background:var(--c-a-green-soft); color:var(--c-a-green);}
.page-hd--orange .page-hd-main > i{background:var(--c-a-orange-soft);color:var(--c-a-orange);}
.page-hd--blue   .page-hd-main > i{background:var(--c-a-blue-soft);  color:var(--c-a-blue);}
.page-hd--dark   .page-hd-main > i{background:var(--c-a-dark-soft);  color:var(--c-a-dark);}
.page-hd--purple .page-hd-main > i{background:var(--c-a-purple-soft);color:var(--c-a-purple);}

/* =============================================================
 * L3 — EMPTY STATE (.empty-state) — G.G
 * Friendly "no data" block with icon, title, sub, optional CTA.
 * Usage:
 *   <div class="empty-state">
 *     <i class="fas fa-folder-open"></i>
 *     <h3>لا توجد تذاكر</h3>
 *     <p>لم يتم العثور على أي تذاكر مطابقة.</p>
 *     <button class="btn bblue">إنشاء تذكرة</button>
 *   </div>
 * Also works inline inside a <td colspan="N"> for empty tables.
 * ============================================================= */
.empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 20px;text-align:center;gap:10px;color:var(--c-text-muted);
}
.empty-state > i:first-child{
  font-size:48px;color:var(--c-border-strong);margin-bottom:6px;opacity:.7;
}
.empty-state h3{margin:0;font-size:16px;font-weight:600;color:var(--c-text-heading);}
.empty-state p{margin:0;font-size:13px;color:var(--c-text-muted);max-width:360px;line-height:1.6;}
.empty-state .btn,.empty-state .cm-btn{margin-top:8px;}
td > .empty-state{padding:32px 16px;}

/* =============================================================
 * L3 — MODAL PER-ACTION ACCENTS (G.J)
 * Apply #modal.is-{danger|info|warning|success|dark} or
 * #modal.is--{green|orange|blue|dark|purple} to color the header.
 * Default keeps the existing dark-green gradient for compat.
 * ============================================================= */
#modal-header{background:linear-gradient(135deg,var(--c-brand-strong) 0%,var(--c-brand) 100%);border-bottom-color:var(--c-header-border);}
#modal.is-success    #modal-header,#modal.is--green  #modal-header{background:linear-gradient(135deg,var(--c-a-green-strong)  0%,var(--c-a-green)  100%);}
#modal.is-info       #modal-header,#modal.is--blue   #modal-header{background:linear-gradient(135deg,var(--c-a-blue-strong)   0%,var(--c-a-blue)   100%);}
#modal.is-warning    #modal-header,#modal.is--orange #modal-header{background:linear-gradient(135deg,var(--c-a-orange-strong) 0%,var(--c-a-orange) 100%);}
#modal.is-danger     #modal-header{background:linear-gradient(135deg,#991b1b 0%,var(--c-danger) 100%);}
#modal.is-dark       #modal-header,#modal.is--dark   #modal-header{background:linear-gradient(135deg,var(--c-a-dark-strong)   0%,var(--c-a-dark)   100%);}
#modal.is--purple    #modal-header{background:linear-gradient(135deg,var(--c-a-purple-strong) 0%,var(--c-a-purple) 100%);}
/* Modal body/footer — tokenized (overrides hardcoded hex in base modal block above) */
#modal,.cm-modal{background:var(--c-surface) !important;}
#modal-loader{color:var(--c-text-muted) !important;}
#modal-content{color:var(--c-text) !important;}
#modal-content h1{color:var(--c-text-heading) !important;}
#modal-content h2{color:var(--c-text-heading) !important;}
#modal-content .form-control,#modal-content .cm-input{color:var(--c-text) !important;background:var(--c-surface) !important;}
#modal-content .form-control:read-only,
#modal-content .cm-input:read-only,
#modal-content .form-control[readonly],
#modal-content .cm-input[readonly],
#modal-content .form-control:disabled,
#modal-content .cm-input:disabled{background:var(--c-surface-2) !important;color:var(--c-text-muted) !important;cursor:not-allowed !important;border-color:var(--c-border) !important;}
#modal-footer{background:var(--c-header-bg-2) !important;border-top-color:var(--c-header-border) !important;}

/* =============================================================
 * L3 — KEYBOARD SHORTCUTS OVERLAY (.kbd-overlay) — G.H
 * ============================================================= */
.kbd-overlay{
  position:fixed;inset:0;background:rgba(15,23,42,.6);backdrop-filter:blur(3px);
  display:none;justify-content:center;align-items:center;z-index:10000;padding:20px;
  animation:cm-modal-fade .18s ease;
}
.kbd-overlay.show{display:flex;}
.kbd-panel{
  background:var(--c-surface);color:var(--c-text);border:1px solid var(--c-border);
  border-radius:14px;box-shadow:var(--c-shadow-lg);
  max-width:560px;width:100%;max-height:80vh;overflow:auto;padding:20px 24px;
}
.kbd-panel h3{margin:0 0 14px;font-size:17px;color:var(--c-text-heading);display:flex;align-items:center;gap:8px;}
.kbd-panel h3 i{color:var(--c-a-blue);}
.kbd-grid{display:grid;grid-template-columns:1fr auto;gap:10px 18px;font-size:13px;}
.kbd-grid dt{color:var(--c-text);}
.kbd-grid dd{margin:0;display:flex;gap:4px;justify-content:flex-end;}
.kbd{
  display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;
  background:var(--c-surface-3);color:var(--c-text-heading);border:1px solid var(--c-border-strong);
  border-bottom-width:2px;border-radius:5px;font:600 11px ui-monospace,monospace;line-height:1;
}
.kbd-close{
  position:absolute;margin-top:-4px;margin-inline-end:-4px;
  width:28px;height:28px;border-radius:50%;border:none;background:var(--c-surface-3);color:var(--c-text);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;float:inline-end;
}
.kbd-close:hover{background:var(--c-danger-soft);color:var(--c-danger);}