/* =============================================================
* 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;
/* 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);
/* 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%;height:100vh;}
.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
* ================================================================ */
.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, #navsrh .cm-input{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{filter:invert(30%) sepia(68%) saturate(1400%) hue-rotate(100deg) brightness(70%);cursor:pointer;opacity:.7;transition:opacity .15s;}
input[type=date]:hover::-webkit-calendar-picker-indicator,input[type=time]:hover::-webkit-calendar-picker-indicator{opacity:1;}
/* Checkbox & radio — brand-green custom */
input[type=checkbox],input[type=radio]{width:18px;height:18px;cursor:pointer;accent-color:#16a34a;vertical-align:middle;}
.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
* ================================================================ */
.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);display:inline-block;text-align:center;font-weight:600;}
.btn.main:active,.cm-btn--main:active{background:var(--c-brand);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;}
.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;}
/* ── 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 (brand-aligned)
* ================================================================ */
.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{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
* ================================================================ */
.alert,.cm-alert{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--c-border-strong);border-left:4px solid var(--c-text-muted);background:var(--c-surface-2);border-radius:8px;font-size:13px;padding:10px 14px;margin:4px 0;font-weight:500;line-height:1.5;color:var(--c-text);}
div.alert, a.alert, a.cm-alert{width:100%;box-sizing:border-box;display:flex;text-decoration:none;}
.alert.white,.cm-alert--neutral{background:var(--c-surface);color:var(--c-text);border-color:var(--c-border);border-left-color:var(--c-text-muted);}
.alert.red,.cm-alert--danger{background:var(--c-danger-soft);color:var(--c-danger);border-color:color-mix(in srgb, var(--c-danger) 28%, var(--c-surface));border-left-color:var(--c-danger);}
.alert.green,.cm-alert--success{background:var(--c-success-soft);color:var(--c-success);border-color:color-mix(in srgb, var(--c-success) 28%, var(--c-surface));border-left-color:var(--c-success);}
.alert.blue,.cm-alert--info{background:var(--c-info-soft);color:var(--c-info);border-color:color-mix(in srgb, var(--c-info) 28%, var(--c-surface));border-left-color:var(--c-info);}
.alert.info{background:color-mix(in srgb, var(--c-info) 12%, var(--c-surface));color:var(--c-info);border-color:color-mix(in srgb, var(--c-info) 28%, var(--c-surface));border-left-color:var(--c-info);}
.alert.yellow,.cm-alert--warning{background:var(--c-warning-soft);color:var(--c-warning);border-color:color-mix(in srgb, var(--c-warning) 28%, var(--c-surface));border-left-color:var(--c-warning);}
.alert.orange,.cm-alert--orange{background:color-mix(in srgb, var(--c-a-orange) 12%, var(--c-surface));color:var(--c-a-orange-strong);border-color:color-mix(in srgb, var(--c-a-orange) 28%, var(--c-surface));border-left-color:var(--c-a-orange);}
.alert table,.cm-alert table{width:100%;}
.alert table td,.cm-alert table td{border-bottom:1px dashed color-mix(in srgb, var(--c-text-muted) 35%, transparent);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-wrap .form-control{width:100%;padding-right:38px;margin-bottom:0;}
.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;}
.input-wrap.has-eye .form-control{padding-left:38px;}
.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;}
.loader-container.show{display:flex;}
.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:1030;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);}
.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 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;}
/* ================================================================
* L3 — BOX COMPONENT
* ================================================================ */
.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);}
.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)
* IDs preserved (JS dependency); visuals modernised.
* ================================================================ */
#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:9999;padding:40px 16px;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:fixed;top:5px;left:auto;transform:none;margin:auto;overflow:hidden;animation:cm-modal-pop .22s cubic-bezier(.16,1,.3,1);}
@media (min-width:768px){
#modal.size-lg,#modal.modal-lg{max-width:75vw;}
#modal.size-xlg,#modal.modal-xlg{max-width:94vw;}
}
#modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e5e7eb;background:linear-gradient(135deg,#0f5132 0%,#198754 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{width:100%;max-width:100%;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 (modern pro with brand-green header, sticky, zebra)
* ================================================================ */
.table,.cm-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--c-surface);color:var(--c-text);border-radius:10px;overflow:hidden;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 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 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: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;}
/* ─── SHARED COMPONENT LIBRARY ─── */
.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;}
.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 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.att-list .att-actions{display:flex;gap:5px;flex:0 0 auto;flex-wrap:nowrap;}
.att-list .att-date{font-size:11px;color:#94a3b8;margin:0 10px;}
.att-list .att-actions{display:flex;gap:5px;}
.perm-card,.cm-perm{border:1px solid #e2e8f0;border-radius:10px;margin-bottom:15px;overflow:hidden;}
.perm-card .perm-hd,.cm-perm .perm-hd{background:#1e293b;color:#fff;padding:10px 15px;font-weight:bold;display:flex;align-items:center;gap:8px;}
.perm-card .perm-bd{padding:12px 15px;}
.inp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:15px;padding:15px;}
/* ─── MODERN TAG / CHIP SYSTEM ─── */
.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;}
.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-p40{padding:40px !important;}
.u-mb0{margin-bottom:0 !important;}
.u-mb10{margin-bottom:10px !important;}
.u-mb15{margin-bottom:15px !important;}
.u-m10{margin:10px !important;}
.u-ta-center{text-align:center !important;}
.u-fw-bold{font-weight:700 !important;}
.u-fs11{font-size:11px !important;}
.u-cur-pointer{cursor:pointer !important;}
.u-text-red{color:#dc2626 !important;}
.u-tmuted-11{color:var(--c-text-muted) !important;font-size:11px !important;}
.u-minw150{min-width:150px !important;}
.u-minw200{min-width:200px !important;}
.u-break-row{flex-basis:100% !important;height:0 !important;}
.u-flex1-min250{flex:1 !important;min-width:250px !important;}
.u-card-lite{background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:8px;padding:10px 14px;}
.p-help-filter-box{padding:15px;}
.p-dep-filter-box{padding:12px;}
.p-dep-status-chip{padding:10px 18px;font-size:13px;cursor:pointer;border-radius:8px;min-width:120px;text-align:center;}
.p-help-status-pill{border-radius:20px;padding:3px 15px;}
.p-nav-pill-btn{border-radius:30px;white-space:nowrap;}
.p-mb12{margin-bottom:12px !important;}
.p-dep-badge{font-size:13px;padding:5px 14px;}
.p-inl-ajax-404{font-size:42px;font-weight:700;}
.p-bilv-json-pre{margin:0;white-space:pre-wrap;word-break:break-word;text-align:left;}
.p-bilv-srv-name{color:#16a34a;}
.bill-print-error{color:red;font-size:18px;}
.bill-print-area{background:#fff;min-height:100vh;padding:10px 0;}
.bill-print-table{max-width:200px;border:0.5px dashed #eee;border-collapse:collapse;background:#fff;}
.bill-print-cell0{padding:0;}
.bill-print-logo-wrap{display:flex;justify-content:center;align-items:center;height:100%;}
.bill-print-qr{max-width:90px;}
.bill-print-line{padding:0 5px;background:#fff;}
.bill-print-top-dash{border-top:1px dashed #888;}
.bill-print-btm-dash{border-bottom:1px dashed #888;}
.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;}
.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-x:auto;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;}
.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:var(--c-brand);}
.frm-check-row label{margin:0;font-size:14px;font-weight:600;cursor:pointer;}
.frm-chip-wrap{display:flex;flex-wrap:wrap;gap:10px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:10px;padding:14px;}
.frm-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border:1px solid var(--c-border);border-radius:999px;background:var(--c-surface-2);font-size:13px;cursor:pointer;transition:all .15s ease;}
.frm-chip:hover{border-color:var(--c-brand);background:var(--c-brand-soft);color:var(--c-brand-strong);}
.frm-chip.is-active,.frm-chip.active{border-color:var(--c-brand);background:var(--c-brand);color:var(--c-text-inverse);}
.frm-minw-180{min-width:180px;} .frm-minw-200{min-width:200px;} .frm-minw-300{min-width:300px;}
.frm-channel-all{display:flex;align-items:center;gap:6px;width:100%;color:var(--c-brand-strong);font-weight:700;border-bottom:1px dashed var(--c-brand-soft);padding-bottom:10px;margin-bottom:5px;cursor:pointer;}
@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;
}
/* 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-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:28px;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:var(--c-success-soft) !important;font-weight:700;font-size:13.5px;border-top:2px solid var(--c-success);color:var(--c-a-green-strong);}
.tbl-total-row td{padding-top:12px;padding-bottom:12px;}
.tbl-subtotal-row{background:var(--c-brand-soft) !important;font-weight:600;color:var(--c-a-green-strong);font-size:13px;}
.tbl-scroll{overflow-x:auto;}
.hd-date-range{font-size:12px;color:var(--c-text-muted);font-weight:normal;margin-right:8px;}
.tbl-empty{text-align:center;padding:40px 20px;color:var(--c-text-muted);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);}
/* ─── Attendance Module (adm-atn) ─── */
.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 var(--c-border);border-radius:6px;padding:5px 8px;font-size:13px;text-align:center;outline:none;transition:border-color .2s,box-shadow .2s;background:var(--c-surface-2);color:var(--c-text);}
.atn-inp:focus{border-color:var(--c-brand);box-shadow:0 0 0 3px var(--c-brand-ring);background:var(--c-surface);}
.atn-inp-wide{width:100%;min-width:140px;text-align:right;}
.atn-inp[readonly]{background:var(--c-surface-3);color:var(--c-text-muted);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;}
/* ─── Report Dashboard Cards (acc-rep-lst) ─── */
.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;}
/* ─── Permission Matrix (adm-grp-edit) ─── */
.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;}
.perm-card-bd{padding:15px;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;}
.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;}
/* ─── Help Ticket Stats (help.php) — token-driven + accent tints ─── */
.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;}
/* ─── Help Ticket Thread (help-view.php) ─ pro brand theme ─── */
.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-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;}
/* Semantic token utilities — always theme-aware */
.u-text-brand{color:var(--c-brand)!important;}
.u-text-brand-strong{color:var(--c-brand-strong)!important;}
.u-text-heading{color:var(--c-text-heading)!important;}
.u-text-text{color:var(--c-text)!important;}
.u-text-orange{color:var(--c-a-orange)!important;}
.u-text-orange-strong{color:var(--c-a-orange-strong)!important;}
.u-text-blue{color:var(--c-a-blue)!important;}
.u-text-blue-strong{color:var(--c-a-blue-strong)!important;}
.u-text-purple{color:var(--c-a-purple)!important;}
.u-text-green{color:var(--c-a-green)!important;}
.u-text-green-strong{color:var(--c-a-green-strong)!important;}
.u-bg-surface-tok{background:var(--c-surface)!important;}
.u-bg-surface-2-tok{background:var(--c-surface-2)!important;}
.u-border-tok{border-color:var(--c-border)!important;}
.u-text-border{color:var(--c-border-strong)!important;}
/* del/strikethrough adapts to theme */
del.u-del{color:var(--c-text-muted)!important;text-decoration:line-through;}
.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;}
/* 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:
*
* …
* 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:
*
*
*
*
الدعم الفني
* إدارة التذاكر
*
*
... buttons ...
*
*
*
لا توجد تذاكر
*
لم يتم العثور على أي تذاكر مطابقة.
*
*
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 re-tokenize (was hardcoded light hex) */
#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-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{
position:relative;
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;padding-inline-start:34px;}
.kbd-panel h3 i{color:var(--c-a-blue);}
.kbd-grid{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;font-size:13px;direction:ltr;}
.kbd-grid dt{color:var(--c-text);direction:rtl;text-align:right;}
.kbd-grid dd{margin:0;display:flex;gap:4px;justify-content:flex-start;}
.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;top:14px;left:14px;
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;
}
.kbd-close:hover{background:var(--c-danger-soft);color:var(--c-danger);}
/* Portal inline-style migration */
.p-inl-02c73809{font-size:11px;padding:4px 10px;white-space:nowrap;}
.p-inl-02cbdfbf{font-size:22px;font-weight:700;}
.p-inl-03524318{padding:6px 12px}
.p-inl-053eb405{gap: 15px; display: flex; flex-wrap: nowrap;}
.p-inl-095fbcda{direction:ltr;text-align:right;}
.p-inl-09967892{height:6px;background:var(--c-a-blue);border-radius:4px;width:0%;transition:width 0.2s;}
.p-inl-0998cfa6{margin:0 0 10px;}
.p-inl-0a16bc9d{background:#e8f5e9}
.p-inl-0a8321c2{display:flex;gap:12px;flex-wrap:wrap;}
.p-inl-0d82cd11{min-width:300px;}
.p-inl-0f36de6c{display:flex;gap:10px;align-items:center;}
.p-inl-132fb96a{margin-left:4px;}
.p-inl-1427ffce{margin-bottom:8px;display:block;}
.p-inl-15f0c2e8{color:#cbd5e1;}
.p-inl-1850ed98{flex:2; min-width:260px;}
.p-inl-1a30558f{width:110px;}
.p-inl-1b65d0aa{background:#fff3e0}
.p-inl-1ffedc34{width:100%;white-space:nowrap;font-size:12px;}
.p-inl-21ccb9a3{direction:ltr;text-align:right;font-family:monospace;font-size:13px;white-space:nowrap;}
.p-inl-22e2bd1b{padding:4px 15px;font-size:13px;}
.p-inl-23f86a66{flex:2; min-width:220px;}
.p-inl-25216951{min-width:250px;}
.p-inl-252fc1c5{font-size:12px; font-weight:normal; margin:0 8px;}
.p-inl-259dd364{font-weight:bold;background:#f1f5f9;}
.p-inl-27070b32{display:flex;gap:6px;flex-wrap:wrap;}
.p-inl-2865d6c9{min-width:min(700px, 100%);}
.p-inl-28bf0ec0{font-size:11px; margin-right:10px;}
.p-inl-28c9bab2{text-align:center; white-space:nowrap;}
.p-inl-292f4a1a{display:block;margin-bottom:8px;}
.p-inl-29fb9df2{color:#10b981;}
.p-inl-2c44c5a3{padding:6px 12px;direction:ltr;text-align:right}
.p-inl-2cf47172{font-size:10px;direction:ltr;text-align:left;display:block;word-break:break-all;}
.p-inl-2f01efdd{width:140px;}
.p-inl-3019698e{margin-bottom:20px;}
.p-inl-307c3df0{min-width:120px;}
.p-inl-31477277{width:150px; text-align:center;}
.p-inl-31e2aba8{width:100%;white-space:nowrap;}
.p-inl-321bbe34{padding:8px 12px;color:#e65100;font-weight:bold}
.p-inl-33bdc2fc{padding:6px 12px;font-weight:bold}
.p-inl-33caab13{padding:10px 20px;background:#ffebee;color:#c62828;font-size:13px;border-top:1px solid #ddd;font-weight:bold}
.p-inl-34c036a6{width:100%;border-collapse:collapse;font-size:14px;color:#333}
.p-inl-34dc5014{min-height:38px;}
.p-inl-380e31b5{flex:1;min-width:100%;}
.p-inl-3db10792{padding:15px; background:#f8fafc;}
.p-inl-3e44100d{flex:2; min-width:250px;}
.p-inl-42789902{font-size:18px;color:#dc2626;font-weight:700;}
.p-inl-43233585{font-size:11px;font-weight:bold;white-space:nowrap;}
.p-inl-4a5da2be{padding:12px;color:#2e7d32;font-weight:bold;font-size:15px}
.p-inl-4ad06f01{display:flex; gap:10px; flex-wrap:wrap;}
.p-inl-4c597974{margin-right:auto;font-size:11px;}
.p-inl-4cc0d20d{flex:0.5; min-width:80px;}
.p-inl-4ddbe905{white-space:nowrap;}
.p-inl-52b775f2{width:100%;resize:vertical;font-size:14px;line-height:1.6;direction:rtl;}
.p-inl-52b97d88{font-size:11px;word-break:break-all;}
.p-inl-53aef409{min-width:min(860px, 100%);}
.p-inl-553a321b{display:flex; gap:15px; align-items:center;}
.p-inl-553a645f{margin-top:14px;}
.p-inl-554c8b2a{padding:5px 12px !important;}
.p-inl-593d1b1a{white-space:pre-wrap;word-wrap:break-word;text-align:right;direction:rtl;}
.p-inl-59b56e5b{direction:ltr;text-align:right;font-size:13px;white-space:nowrap;}
.p-inl-59fb21d2{padding:4px 10px; font-size:12px;}
.p-inl-5c05a7dd{flex:0.8;min-width:110px;}
.p-inl-5d93eec6{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:13px;padding:5px 0;}
.p-inl-5e6c2355{font-family:monospace; font-size:10px; color:var(--c-text);}
.p-inl-5f32a422{font-weight:bold; margin-bottom:5px; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.p-inl-5fb1d433{background:#d32f2f;color:#fff;padding:14px 20px;font-size:16px;font-weight:bold}
.p-inl-62218d98{border-radius:6px;padding:10px 14px;font-size:12px;}
.p-inl-62d7b93d{font-family:Tahoma,Arial,sans-serif;max-width:520px;margin:0 auto;background:#fff;border:1px solid #ddd;border-radius:8px;overflow:hidden}
.p-inl-658ee0cf{border-top:2px solid #000;padding:0;}
.p-inl-663db74f{font-weight:bold;font-size:16px;color:#059669;}
.p-inl-6a503bcd{font-size:20px;font-weight:bold;}
.p-inl-6b283c9e{padding:10px;}
.p-inl-6b3fe682{flex:1.5;min-width:160px;}
.p-inl-6b82a2fb{font-weight:bold;font-size:16px;}
.p-inl-6b9c179a{font-size:12px;}
.p-inl-6c39576c{width: 66%; flex-shrink: 0;}
.p-inl-6d08c45c{font-size:11px;margin-top:2px;font-weight:bold;}
.p-inl-6fad630c{font-size:10px;color:var(--c-text-muted);margin-right:4px;}
.p-inl-70020c85{min-width:min(650px, 100%);}
.p-inl-7187ebfc{background:#fffbeb;padding:10px 14px;border-radius:8px;border:1px solid #fde68a;grid-column:1/-1;}
.p-inl-729192c0{width:130px;}
.p-inl-778eabe3{width:100%; border-collapse:collapse;}
.p-inl-7b9be7ad{opacity:0.6;}
.p-inl-7ccf4174{max-width:1000px; margin:0 auto; padding:20px 0;}
.p-inl-7ea337c3{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:10px;}
.p-inl-80237d00{text-align:center;margin-top:20px;}
.p-inl-844e0a71{flex:2; min-width:300px;}
.p-inl-871a87af{display:flex; gap:10px;}
.p-inl-87c9b542{direction:ltr;text-align:right;font-family:monospace;}
.p-inl-886e325e{margin-top:15px;}
.p-inl-89c0b715{padding:5px 15px; margin-right:5px; border-radius:20px;}
.p-inl-8db8d854{width:80px;}
.p-inl-8f20876f{padding:6px 12px;color:#888}
.p-inl-91294d29{display:flex;gap:6px;}
.p-inl-91ac2b3f{width:100%;font-size:12px;}
.p-inl-91b8f4af{margin:0 0 10px 0; font-size:15px;}
.p-inl-91f7da09{font-weight:bold;font-size:22px;line-height:1.2;}
.p-inl-923e958f{min-width:180px;}
.p-inl-93de2d4b{width:40px;}
.p-inl-94c6b14c{background:#f8fafc;padding:10px 14px;border-radius:8px;border:1px solid #e2e8f0;grid-column:1/-1;}
.p-inl-95782264{width:150px;}
.p-inl-98aca85a{padding:4px 8px;}
.p-inl-99dc7abe{direction:ltr}
.p-inl-9c68691e{display:flex; gap:8px;}
.p-inl-9f53048e{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;}
.p-inl-a07d8dd9{display:flex; justify-content:space-between; align-items:center; margin-top:10px;}
.p-inl-a5fb221c{padding:10px 20px;color:#999;font-size:11px;text-align:center;border-top:1px solid #eee}
.p-inl-a629a35a{min-width:160px;}
.p-inl-a85dbd63{font-size:12px;margin:0 8px;}
.p-inl-acb11131{width:100%;resize:vertical;}
.p-inl-b17c9212{border:1px solid var(--c-border);border-radius:8px;padding:12px 16px;white-space:pre-wrap;word-wrap:break-word;direction:rtl;font-size:14px;line-height:1.8;min-height:40px;}
.p-inl-b2395d47{padding:20px; background:#f8fafc;}
.p-inl-b3f34169{color:#92400e;font-size:11px;margin-bottom:2px;}
.p-inl-b4aa3496{border-top:1px solid var(--c-border); padding:15px;}
.p-inl-b66caf85{min-width:170px;}
.p-inl-b6e92a9d{text-align:center; padding-top:10px; font-size:12px;}
.p-inl-bb482bf6{cursor:default; color:var(--c-text-muted); font-size:11px; padding:6px 12px; background:var(--c-surface-2); line-height:1.6;}
.p-inl-bbb783b9{text-align:right;font-weight:bold;}
.p-inl-bbc0178b{display:flex;flex-direction:column;gap:12px;}
.p-inl-bc229e63{margin-top:6px;background:var(--c-border-soft);border-radius:4px;height:6px;}
.p-inl-bd123a7f{min-width:130px;}
.p-inl-bdef1160{max-width:100%;border:2px solid var(--c-border);margin-bottom:15px;}
.p-inl-c1d9ef17{font-weight:bold;font-size:18px;}
.p-inl-c2c74283{padding:4px 14px;font-size:12px;}
.p-inl-c5ac9c43{width:60px;}
.p-inl-c76a71b3{padding:14px 20px;background:#fff3e0;color:#e65100;font-size:13px;border-top:1px solid #ddd}
.p-inl-c8707ca3{display:flex;flex-wrap:wrap;gap:15px;padding:5px 0;}
.p-inl-c94e559d{height:38px; padding:0 20px;}
.p-inl-ca01f505{font-size:12px; display:flex; gap:10px; flex-wrap:wrap;}
.p-inl-cb458930{display:none;}
.p-inl-cc5c4a9c{display:flex;flex-wrap:wrap;gap:20px;padding:5px 0;}
.p-inl-d37eec53{padding:15px; display:none;}
.p-inl-d5205d1a{margin-right:8px;font-size:11px;}
.p-inl-d6981a84{flex:2; min-width:180px;}
.p-inl-d9845633{font-size:11px;direction:ltr;text-align:left;word-break:break-word;}
.p-inl-da5cd676{flex:1;}
.p-inl-da9fa112{margin-right:8px;font-size:10px;background:var(--c-border-soft);padding:2px 6px;border-radius:10px;}
.p-inl-dbc60a51{min-height:38px; padding:0 25px;}
.p-inl-e01db0ab{flex: 1; min-width: 300px;}
.p-inl-e1b24578{margin-bottom:25px;}
.p-inl-e1f8349d{font-size:12px;direction:ltr;text-align:left;word-break:break-word;min-width:200px;}
.p-inl-e45e49da{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:15px;}
.p-inl-e5a6788e{min-width:110px;}
.p-inl-e7bc823d{margin:0 0 10px; border-bottom:2px solid var(--c-border); padding-bottom:5px;}
.p-inl-e7ec5403{margin-bottom:0;}
.p-inl-e904ff19{font-size:12px;margin-bottom:6px;}
.p-inl-ea1a122e{padding:6px 12px;direction:ltr;text-align:right;font-size:12px}
.p-inl-ec46ce82{min-width:90px;}
.p-inl-ec96c014{width:100%; border-collapse:collapse; table-layout:fixed;}
.p-inl-ee0435f7{width:100px;}
.p-inl-f25348c1{background:#f1f5f9; padding:10px 15px; border-bottom:1px solid #e2e8f0; display:flex; gap:10px;}
.p-inl-f41bf6a7{flex-wrap:wrap;gap:8px;}
.p-inl-f47a4b0c{margin:0 auto;}
.p-inl-f59efabe{font-size:11px;opacity:.85;}
.p-inl-f6e08151{flex:2;min-width:200px;}
.p-inl-f6e3d7fe{text-align:right;}
.p-inl-f8fe57ee{padding:8px 12px;font-size:20px;font-weight:bold;color:#e65100;direction:ltr;text-align:right}
.p-inl-f95ebd2a{width:70px;}
.p-inl-fb92712c{padding:12px;font-size:28px;font-weight:bold;letter-spacing:8px;color:#1b5e20;direction:ltr;text-align:right}
.p-inl-fc6d5447{word-break:break-word;min-width:160px;}
.p-inl-fd12fb6d{background:#f5f5f5}
.p-inl-ff6e1373{font-size:16px; padding:10px 40px;}
.p-inl-ffca6d0a{width:auto; flex:none;}
|