/* =====================================================================================
   Mass Auto Garage Pro — design system
   Identity: an instrument cluster for the workshop. Navy cockpit, saffron signal lamp,
   condensed "gauge" numerals for every figure, the UAE number plate as the signature element,
   and one hue per module / job status so the whole app reads at a glance.
   ===================================================================================== */
/* Fonts are bundled in assets/vendor/fonts (SIL Open Font License) - no external requests, works offline */
@font-face { font-family: "Plus Jakarta Sans"; src: url("../vendor/fonts/PlusJakartaSans.ttf") format("truetype"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../vendor/fonts/PlusJakartaSans-Italic.ttf") format("truetype"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../vendor/fonts/BarlowCondensed-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../vendor/fonts/BarlowCondensed-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../vendor/fonts/BarlowCondensed-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --navy: #0E1A3D; --navy-2: #16244F; --navy-3: #22336A; --navy-ink: #081129;
  --saffron: #F5B301; --saffron-2: #FFC933; --saffron-soft: #FFF4D6; --signal: #E5322D;
  --steel: #66728C; --steel-2: #8F9BB5; --emerald: #0E9F6E; --emerald-soft: #DDF7EC;
  --royal: #2747C9; --royal-soft: #E6ECFF; --rose: #E11D48; --rose-soft: #FDE4EA; --amber: #D97706; --amber-soft: #FFF1D6;
  --bg: #F2F4F8; --surface: #FFFFFF; --surface-2: #F6F8FB; --surface-3: #EDF0F6; --line: #E3E7EF; --line-2: #D3D9E5;
  --ink: #0E1A3D; --ink-2: #33405F; --muted: #66728C;
  --accent: #2747C9;
  --r-xs: 6px; --r-sm: 9px; --r: 14px; --r-lg: 20px;
  --shadow-1: 0 1px 2px rgba(14,26,61,.06), 0 1px 1px rgba(14,26,61,.04);
  --shadow-2: 0 6px 22px -8px rgba(14,26,61,.18);
  --shadow-pop: 0 24px 64px -18px rgba(8,17,41,.38);
  --font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-gauge: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --sb-w: 268px; --top-h: 64px;
  --bs-body-font-family: var(--font); --bs-body-color: var(--ink); --bs-body-bg: var(--bg); --bs-border-color: var(--line);
  --bs-primary: #2747C9; --bs-primary-rgb: 39,71,201; --bs-link-color: #2747C9; --bs-link-color-rgb: 39,71,201; --bs-link-hover-color: #1A35A3;
  --bs-border-radius: 9px; --bs-border-radius-lg: 14px; --bs-border-radius-sm: 6px; --bs-body-font-size: .875rem;
  --bs-secondary-color: var(--muted); --bs-emphasis-color: var(--ink); --bs-tertiary-bg: var(--surface-2);
  /* status hues (job flow + documents) */
  --st-open: #64748B; --st-inspection: #0EA5E9; --st-estimation: #8B5CF6; --st-awaiting: #F59E0B; --st-approved: #14B8A6; --st-parts: #F97316;
  --st-progress: #4F46E5; --st-hold: #E11D48; --st-qc: #06B6D4; --st-ready: #10B981; --st-invoiced: #22C55E; --st-delivered: #0E9F6E; --st-cancelled: #94A3B8;
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #0A1126; --surface: #111B36; --surface-2: #15213F; --surface-3: #1B2A4E; --line: #22305A; --line-2: #2D3D6B;
  --ink: #E8ECF7; --ink-2: #C3CAE0; --muted: #8F9BBE; --saffron-soft: #3A3010; --emerald-soft: #0E3328; --royal-soft: #1A2752; --rose-soft: #3B1424; --amber-soft: #3A2A0E;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 8px 26px -10px rgba(0,0,0,.6);
  --bs-body-color: var(--ink); --bs-body-bg: var(--bg); --bs-border-color: var(--line); --bs-secondary-color: var(--muted); --bs-emphasis-color: var(--ink);
  --bs-link-color: #8EA6FF; --bs-link-color-rgb: 142,166,255; --bs-tertiary-bg: var(--surface-2); --bs-secondary-bg: var(--surface-2);
  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font); font-size: .875rem; line-height: 1.5; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; font-feature-settings: "ss01" on; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 750; letter-spacing: -.015em; color: var(--ink); }
h1, .h1 { font-size: 1.75rem; } h2, .h2 { font-size: 1.375rem; } h3, .h3 { font-size: 1.125rem; } h4, .h4 { font-size: 1rem; } h5, .h5 { font-size: .9375rem; } h6, .h6 { font-size: .8125rem; }
a { text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; }
::selection { background: var(--saffron); color: var(--navy); }
:focus-visible { outline: 3px solid rgba(245,179,1,.65); outline-offset: 2px; }
.gauge, .num, .money { font-family: var(--font-gauge); font-weight: 600; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.text-steel, .small-muted { color: var(--muted) !important; } .small-muted { font-size: .8125rem; }
.fw-750 { font-weight: 750; } .lh-tight { line-height: 1.15; }
.scroll-thin::-webkit-scrollbar, .table-wrap::-webkit-scrollbar, .sidebar nav::-webkit-scrollbar, .board::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-thin::-webkit-scrollbar-thumb, .table-wrap::-webkit-scrollbar-thumb, .sidebar nav::-webkit-scrollbar-thumb, .board::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; }
.sidebar nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ------------------------------------------------------------------ brand */
.brand-mark { width: 40px; height: 40px; border-radius: 11px; background: var(--saffron); color: var(--navy); font-weight: 800; font-size: 1.25rem; display: inline-grid; place-items: center; position: relative; flex: 0 0 auto; }
.brand-mark::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 4px; background: var(--signal); border: 2px solid var(--navy); }

/* UAE number plate — the signature element */
.plate { display: inline-flex; align-items: stretch; border: 2px solid #1B1B1B; border-radius: 6px; background: #fff; color: #111; font-family: var(--font-gauge); font-weight: 700; line-height: 1; overflow: hidden; white-space: nowrap; box-shadow: inset 0 0 0 1px #fff, 0 1px 2px rgba(0,0,0,.15); vertical-align: middle; font-size: .95rem; }
.plate .pc { background: #fff; border-right: 2px solid #1B1B1B; padding: 3px 6px; min-width: 1.7em; text-align: center; color: #B91C1C; }
.plate .pn { padding: 3px 8px; letter-spacing: .06em; }
.plate .pe { padding: 3px 6px; font-size: .62em; align-self: center; color: #555; font-family: var(--font); font-weight: 700; letter-spacing: .02em; }
.plate.sm { font-size: .82rem; border-width: 1.5px; } .plate.sm .pc { border-right-width: 1.5px; padding: 2px 5px; } .plate.sm .pn { padding: 2px 6px; }
.plate.lg { font-size: 1.6rem; border-width: 3px; border-radius: 9px; } .plate.lg .pc { border-right-width: 3px; padding: 6px 12px; } .plate.lg .pn { padding: 6px 14px; }
[data-theme="dark"] .plate { box-shadow: none; }

/* ------------------------------------------------------------------ app frame */
.app { display: grid; grid-template-columns: var(--sb-w) minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; background: var(--navy); color: #C9D2EC; display: flex; flex-direction: column; z-index: 1040; border-right: 1px solid rgba(255,255,255,.04); }
.sidebar .sb-brand { display: flex; align-items: center; gap: 12px; padding: 16px 18px 14px; color: #fff; }
.sidebar .sb-brand .t { font-weight: 800; font-size: 1rem; line-height: 1.1; } .sidebar .sb-brand .s { font-size: .72rem; color: #8F9BC2; }
.sidebar nav { flex: 1; overflow-y: auto; padding: 4px 10px 18px; }
.sb-group { margin-top: 14px; }
.sb-group-h { display: flex; align-items: center; gap: 8px; padding: 0 10px 6px; font-size: .72rem; font-weight: 700; color: #7E8AB3; letter-spacing: .02em; }
.sb-group-h .lamp { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent), 0 0 10px var(--c); }
.sb-link { display: flex; align-items: center; gap: 11px; padding: 7px 10px; border-radius: 9px; color: #C9D2EC; font-weight: 550; font-size: .855rem; position: relative; transition: background .15s, color .15s; }
.sb-link i { font-size: 1.05rem; width: 20px; text-align: center; color: #8F9BC2; transition: color .15s; }
.sb-link:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; } .sb-link:hover i { color: var(--c); }
.sb-link.active { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 26%, transparent), color-mix(in srgb, var(--c) 6%, transparent)); color: #fff; }
.sb-link.active i { color: var(--c); }
.sb-link.active::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c); }
.sb-link .sb-badge { margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; background: rgba(255,255,255,.1); color: #fff; font-family: var(--font-gauge); font-size: .8rem; display: inline-grid; place-items: center; }
.sb-link .sb-badge.hot { background: var(--c); color: var(--navy); }
.sb-link .sb-tag { margin-left: auto; font-size: .62rem; font-weight: 800; padding: 2px 6px; border-radius: 6px; background: linear-gradient(90deg, #F5B301, #F97316); color: var(--navy); }
.sb-foot { padding: 12px 14px; border-top: 1px solid rgba(255,255,255,.07); display: flex; align-items: center; gap: 10px; font-size: .78rem; }
.sb-foot .clock { font-family: var(--font-gauge); font-size: 1.35rem; color: #fff; line-height: 1; }
.app.sb-collapsed { --sb-w: 76px; }
.app.sb-collapsed .sb-brand .t, .app.sb-collapsed .sb-brand .s, .app.sb-collapsed .sb-group-h span, .app.sb-collapsed .sb-link span, .app.sb-collapsed .sb-badge, .app.sb-collapsed .sb-tag, .app.sb-collapsed .sb-foot .meta { display: none; }
.app.sb-collapsed .sb-link { justify-content: center; padding: 9px 0; } .app.sb-collapsed .sb-group-h { justify-content: center; padding: 0 0 6px; }
.app.sb-collapsed .sb-brand { justify-content: center; padding-inline: 0; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 1030; height: var(--top-h); display: flex; align-items: center; gap: 10px; padding: 0 22px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
.icon-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); display: inline-grid; place-items: center; position: relative; font-size: 1.05rem; transition: border-color .15s, background .15s; }
.icon-btn:hover { border-color: var(--line-2); background: var(--surface-2); color: var(--ink); }
.icon-btn .dot { position: absolute; top: 6px; right: 6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--signal); color: #fff; font-size: .66rem; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--surface); }
.search-trigger { flex: 1; max-width: 460px; height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; font-size: .86rem; }
.search-trigger:hover { border-color: var(--line-2); }
kbd, .kbd { font-family: var(--font); font-size: .7rem; font-weight: 700; padding: 2px 6px; border-radius: 6px; background: var(--surface-3); color: var(--ink-2); border: 1px solid var(--line); box-shadow: inset 0 -1px 0 var(--line-2); }
.avatar { width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(135deg, var(--royal), #7C3AED); color: #fff; display: inline-grid; place-items: center; font-weight: 800; font-size: .86rem; overflow: hidden; flex: 0 0 auto; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.sm { width: 28px; height: 28px; border-radius: 8px; font-size: .72rem; }
.content { padding: 22px 26px 60px; flex: 1; }
.btn-new { background: var(--saffron); color: var(--navy); font-weight: 750; border: 0; height: 40px; border-radius: 11px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 6px 16px -6px rgba(245,179,1,.7); }
.btn-new:hover { background: var(--saffron-2); color: var(--navy); }

/* page header: module accent lamp + title */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head .ph-icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 1.35rem; color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.page-head h1 { font-size: 1.5rem; margin: 0; }
.page-head .sub { color: var(--muted); font-size: .84rem; margin-top: 2px; }
.crumbs { font-size: .76rem; color: var(--muted); margin-bottom: 2px; } .crumbs a { color: var(--muted); }

/* ------------------------------------------------------------------ panels */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1); min-width: 0; }
.panel-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px 0; }
.panel-h h3, .panel-h .t { font-size: .95rem; font-weight: 750; margin: 0; display: flex; align-items: center; gap: 8px; }
.panel-h .t i { color: var(--accent); }
.panel-b { padding: 14px 18px 18px; }
.panel.flat { box-shadow: none; }
.panel.ink { background: var(--navy); border-color: var(--navy); color: #DCE2F5; }
.panel.ink h3, .panel.ink .t { color: #fff; }
.panel-tabs { display: flex; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.panel-tabs button, .panel-tabs a { border: 0; background: none; padding: 12px 12px 10px; color: var(--muted); font-weight: 650; font-size: .85rem; border-bottom: 2.5px solid transparent; white-space: nowrap; }
.panel-tabs .active { color: var(--ink); border-bottom-color: var(--accent); }
.panel-tabs .cnt { font-family: var(--font-gauge); background: var(--surface-3); border-radius: 8px; padding: 0 6px; margin-left: 4px; font-size: .8rem; }
.divider-v { width: 1px; background: var(--line); align-self: stretch; }

/* KPI readouts */
.kpi { padding: 16px 18px; position: relative; overflow: hidden; }
.kpi .lbl { font-size: .78rem; color: var(--muted); font-weight: 650; display: flex; align-items: center; gap: 7px; }
.kpi .lbl i { color: var(--c, var(--accent)); font-size: .95rem; }
.kpi .val { font-family: var(--font-gauge); font-weight: 600; font-size: 2.15rem; line-height: 1.05; margin-top: 6px; letter-spacing: .005em; }
.kpi .val small { font-size: .55em; color: var(--muted); margin-right: 3px; font-weight: 600; }
.kpi .delta { font-size: .76rem; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 8px; }
.kpi .delta.up { color: var(--emerald); background: var(--emerald-soft); } .kpi .delta.down { color: var(--rose); background: var(--rose-soft); } .kpi .delta.flat { color: var(--muted); background: var(--surface-3); }
.kpi .spark { position: absolute; right: 12px; bottom: 12px; width: 44%; height: 40px; opacity: .95; }
.kpi::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c, var(--accent)); }

/* lamps strip (dashboard pulse) */
.lamps { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 1px; background: rgba(255,255,255,.08); border-radius: 12px; overflow: hidden; }
.lamp-cell { background: var(--navy-2); padding: 12px 14px; color: #C9D2EC; display: flex; flex-direction: column; gap: 2px; text-decoration: none !important; transition: background .15s; }
.lamp-cell:hover { background: var(--navy-3); }
.lamp-cell .n { font-family: var(--font-gauge); font-size: 1.9rem; line-height: 1; color: #fff; }
.lamp-cell .l { font-size: .74rem; display: flex; align-items: center; gap: 6px; }
.lamp-cell .l::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.lamp-cell.alert .l::before { animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* workshop floor (bays) */
.floor { display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: 12px; }
.bay { position: relative; border-radius: 12px; padding: 12px 12px 10px; background: rgba(255,255,255,.04); border: 1.5px dashed rgba(255,255,255,.14); min-height: 128px; display: flex; flex-direction: column; gap: 6px; color: #C9D2EC; text-decoration: none !important; transition: transform .15s, border-color .15s; }
.bay:hover { border-color: rgba(255,255,255,.3); }
.bay.busy { border-style: solid; border-color: color-mix(in srgb, var(--c) 70%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 20%, transparent), rgba(255,255,255,.02) 60%); }
.bay .code { font-family: var(--font-gauge); font-size: 1.05rem; color: #fff; display: flex; justify-content: space-between; align-items: center; }
.bay .code span { font-family: var(--font); font-size: .66rem; color: #8F9BC2; font-weight: 600; }
.bay .free { margin: auto; font-size: .78rem; color: #6E7AA3; display: flex; align-items: center; gap: 6px; }
.bay .veh { font-size: .74rem; color: #AFB9DA; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bay .bar { height: 4px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; margin-top: auto; } .bay .bar i { display: block; height: 100%; background: var(--c); }
.bay .late { position: absolute; top: -7px; right: 10px; background: var(--signal); color: #fff; font-size: .62rem; font-weight: 800; padding: 1px 7px; border-radius: 6px; }

/* ------------------------------------------------------------------ status pills */
.st { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700; padding: 3px 9px 3px 8px; border-radius: 20px; white-space: nowrap; background: color-mix(in srgb, var(--c, #64748B) 13%, var(--surface)); color: color-mix(in srgb, var(--c, #64748B) 82%, var(--ink)); border: 1px solid color-mix(in srgb, var(--c, #64748B) 22%, transparent); line-height: 1.35; }
.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c, #64748B); flex: 0 0 auto; }
[data-theme="dark"] .st { color: color-mix(in srgb, var(--c, #94A3B8) 65%, #fff); background: color-mix(in srgb, var(--c, #64748B) 18%, transparent); }
.st-open, .st-draft, .st-new, .st-pending, .st-booked, .st-low, .st-queued, .st-unpaid, .st-received { --c: var(--st-open); }
.st-inspection, .st-sent, .st-contacted, .st-submitted, .st-confirmed, .st-sending, .st-survey, .st-normal, .st-medium { --c: var(--st-inspection); }
.st-estimation, .st-quoted, .st-qualified, .st-estimated, .st-partially_approved, .st-refurbishing { --c: var(--st-estimation); }
.st-awaiting_approval, .st-pending_approval, .st-partial, .st-partially_issued, .st-partially_received, .st-late, .st-half_day, .st-reserved, .st-high, .st-missed { --c: var(--st-awaiting); }
.st-approved, .st-active, .st-arrived, .st-available, .st-present, .st-completed, .st-done, .st-good { --c: var(--st-approved); }
.st-waiting_parts, .st-ordered, .st-to_order, .st-hot, .st-urgent, .st-fair { --c: var(--st-parts); }
.st-in_progress, .st-processing, .st-issued, .st-converted { --c: var(--st-progress); }
.st-on_hold, .st-rejected, .st-failed, .st-absent, .st-bounced, .st-lost, .st-overdue, .st-poor, .st-suspended, .st-no_show, .st-expired { --c: var(--st-hold); }
.st-qc { --c: var(--st-qc); }
.st-ready, .st-posted, .st-paid, .st-won, .st-sold, .st-delivered_msg, .st-leave, .st-positive { --c: var(--st-ready); }
.st-invoiced, .st-delivered, .st-closed, .st-success { --c: var(--st-delivered); }
.st-cancelled, .st-reversed, .st-dismissed, .st-undone, .st-returned, .st-terminated, .st-skipped, .st-na, .st-weekend, .st-holiday, .st-neutral { --c: var(--st-cancelled); }
.st-negative { --c: var(--rose); }
.lane-row { display: flex; flex-wrap: wrap; gap: 8px; }
.badge-soft { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 7px; font-size: .74rem; font-weight: 700; background: color-mix(in srgb, var(--c, var(--royal)) 14%, var(--surface)); color: color-mix(in srgb, var(--c, var(--royal)) 85%, var(--ink)); }
.tag-ai { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 800; padding: 1px 7px; border-radius: 6px; background: linear-gradient(90deg, #7C3AED, #DB2777); color: #fff; }

/* ------------------------------------------------------------------ buttons */
.btn { font-weight: 650; border-radius: 10px; font-size: .855rem; }
.btn-sm { border-radius: 8px; font-size: .8rem; }
.btn-lg { border-radius: 12px; font-size: 1rem; }
.btn-navy { background: var(--navy); color: #fff; border-color: var(--navy); } .btn-navy:hover, .btn-navy:focus { background: var(--navy-3); border-color: var(--navy-3); color: #fff; }
[data-theme="dark"] .btn-navy { background: var(--royal); border-color: var(--royal); }
.btn-saffron { background: var(--saffron); color: var(--navy); border-color: var(--saffron); } .btn-saffron:hover { background: var(--saffron-2); border-color: var(--saffron-2); color: var(--navy); }
.btn-primary { --bs-btn-bg: var(--royal); --bs-btn-border-color: var(--royal); --bs-btn-hover-bg: #1E3AAE; --bs-btn-hover-border-color: #1E3AAE; --bs-btn-active-bg: #1A35A3; }
.btn-light { --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--line); --bs-btn-color: var(--ink-2); --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-border-color: var(--line-2); --bs-btn-hover-color: var(--ink); --bs-btn-active-bg: var(--surface-3); --bs-btn-active-color: var(--ink); --bs-btn-active-border-color: var(--line-2); --bs-btn-disabled-bg: var(--surface); --bs-btn-disabled-color: var(--muted); --bs-btn-disabled-border-color: var(--line); }
.btn-group > .btn-light.active, .btn-group > .btn-light:active { background: var(--navy); color: #fff; border-color: var(--navy); }
[data-theme=dark] .btn-group > .btn-light.active { background: var(--saffron); color: var(--navy); border-color: var(--saffron); }
.btn-soft { background: color-mix(in srgb, var(--c, var(--royal)) 12%, var(--surface)); color: color-mix(in srgb, var(--c, var(--royal)) 85%, var(--ink)); border: 1px solid color-mix(in srgb, var(--c, var(--royal)) 22%, transparent); }
.btn-soft:hover { background: color-mix(in srgb, var(--c, var(--royal)) 20%, var(--surface)); color: color-mix(in srgb, var(--c, var(--royal)) 95%, var(--ink)); }
.wa-btn { background: #25D366; color: #fff; border-color: #25D366; } .wa-btn:hover { background: #1EB955; color: #fff; }
.btn-ai { background: linear-gradient(90deg, #7C3AED, #DB2777); color: #fff; border: 0; } .btn-ai:hover { color: #fff; filter: brightness(1.08); }
.btn .bi { vertical-align: -.1em; }

/* ------------------------------------------------------------------ forms */
.form-label { font-size: .78rem; font-weight: 700; color: var(--ink-2); margin-bottom: 5px; }
.form-control, .form-select { border-color: var(--line-2); border-radius: 9px; font-size: .875rem; background-color: var(--surface); color: var(--ink); min-height: 38px; }
.form-control:focus, .form-select:focus { border-color: var(--saffron); box-shadow: 0 0 0 .22rem rgba(245,179,1,.22); background-color: var(--surface); color: var(--ink); }
.form-control::placeholder { color: var(--steel-2); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--rose); }
.form-text, .help { font-size: .74rem; color: var(--muted); }
.form-check-input:checked { background-color: var(--royal); border-color: var(--royal); }
.form-switch .form-check-input { width: 2.4em; height: 1.3em; }
.input-group-text { background: var(--surface-2); border-color: var(--line-2); color: var(--muted); font-size: .8rem; }
.form-section { font-size: .8rem; font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 8px; margin: 18px 0 10px; }
.form-section::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.form-section:first-child { margin-top: 0; }
.ai-hint { font-size: .78rem; border-radius: 10px; padding: 8px 10px; background: linear-gradient(90deg, color-mix(in srgb, #7C3AED 10%, var(--surface)), color-mix(in srgb, #DB2777 8%, var(--surface))); border: 1px solid color-mix(in srgb, #7C3AED 20%, transparent); margin-top: 6px; }
.req::after { content: " *"; color: var(--rose); }

/* searchable lookup */
.lk { position: relative; }
.lk-menu { position: absolute; z-index: 1090; left: 0; right: 0; top: calc(100% + 4px); max-height: 280px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line-2); border-radius: 11px; box-shadow: var(--shadow-pop); padding: 4px; display: none; min-width: 240px; }
.lk.open .lk-menu { display: block; }
.lk-item { padding: 7px 10px; border-radius: 8px; cursor: pointer; } .lk-item .s { font-size: .75rem; color: var(--muted); }
.lk-item.hl, .lk-item:hover { background: var(--surface-3); }
.lk-add { color: var(--royal); font-weight: 700; border-top: 1px solid var(--line); margin-top: 4px; border-radius: 0 0 8px 8px; }

/* ------------------------------------------------------------------ data table */
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.toolbar .search { position: relative; flex: 1 1 220px; max-width: 360px; }
.toolbar .search i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.toolbar .search input { padding-left: 34px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 14px 0; }
.chip { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 20px; padding: 4px 11px; font-size: .78rem; font-weight: 650; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: all .15s; }
.chip .n { font-family: var(--font-gauge); font-size: .85rem; color: var(--muted); }
.chip:hover { border-color: var(--line-2); }
.chip.on { background: var(--navy); border-color: var(--navy); color: #fff; } .chip.on .n { color: var(--saffron); }
[data-theme="dark"] .chip.on { background: var(--royal); border-color: var(--royal); }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--steel)); }
.table-wrap { overflow: auto; max-width: 100%; }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .845rem; }
.tbl thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); color: var(--muted); font-weight: 700; font-size: .75rem; text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; user-select: none; }
.tbl thead th.sortable { cursor: pointer; } .tbl thead th.sortable:hover { color: var(--ink); } .tbl thead th .si { opacity: .5; font-size: .7rem; margin-left: 3px; }
.tbl tbody td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tbody tr { transition: background .12s; } .tbl tbody tr:hover { background: color-mix(in srgb, var(--royal) 4%, var(--surface)); }
.tbl tbody tr.sel { background: color-mix(in srgb, var(--saffron) 12%, var(--surface)); }
.tbl tbody tr.deleted td { opacity: .6; }
.tbl tfoot td { padding: 10px 12px; font-weight: 800; background: var(--surface-2); border-top: 2px solid var(--line-2); position: sticky; bottom: 0; }
.tbl .r, .tbl .num-cell { text-align: right; } .tbl .c { text-align: center; }
.tbl td.money, .tbl td.num { font-family: var(--font-gauge); font-size: .98rem; white-space: nowrap; text-align: right; }
.tbl .t-title { font-weight: 700; color: var(--ink); } .tbl .t-sub { font-size: .75rem; color: var(--muted); }
.tbl .code { font-family: var(--font-gauge); font-size: .95rem; color: var(--royal); font-weight: 600; letter-spacing: .02em; }
[data-theme="dark"] .tbl .code { color: #8EA6FF; }
.tbl .row-actions { white-space: nowrap; text-align: right; }
.tbl.compact td, .tbl.compact th { padding: 7px 10px; }
.tbl .neg { color: var(--rose); } .tbl .pos { color: var(--emerald); }
.pager { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 10px 14px; font-size: .8rem; color: var(--muted); flex-wrap: wrap; }
.bulkbar { display: none; align-items: center; gap: 8px; padding: 8px 14px; background: var(--navy); color: #fff; border-radius: 12px; margin: 10px 14px 0; }
.bulkbar.show { display: flex; }
.flag-late { color: var(--rose); font-weight: 700; }
.stars { color: #F5B301; letter-spacing: 1px; white-space: nowrap; } .stars .off { color: var(--line-2); }
.progress-slim { height: 6px; border-radius: 6px; background: var(--surface-3); overflow: hidden; } .progress-slim > div { height: 100%; border-radius: 6px; background: var(--royal); }
.risk { display: inline-flex; align-items: center; gap: 6px; } .risk i { width: 34px; height: 6px; border-radius: 6px; background: var(--surface-3); overflow: hidden; display: inline-block; } .risk i b { display: block; height: 100%; }
.swatch { width: 14px; height: 14px; border-radius: 4px; display: inline-block; vertical-align: middle; border: 1px solid rgba(0,0,0,.1); }

/* empty states & skeleton */
.empty { text-align: center; padding: 44px 20px; color: var(--muted); }
.empty .ic { width: 64px; height: 64px; border-radius: 20px; margin: 0 auto 12px; display: grid; place-items: center; font-size: 1.8rem; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.empty h4 { color: var(--ink); margin-bottom: 4px; }
.skel { background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 37%, var(--surface-3) 63%); background-size: 400% 100%; animation: skel 1.3s ease infinite; border-radius: 8px; min-height: 14px; }
@keyframes skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.loadbar { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 3000; background: linear-gradient(90deg, var(--saffron), var(--signal)); transition: width .3s ease, opacity .4s; opacity: 0; }
.loadbar.on { opacity: 1; }

/* ------------------------------------------------------------------ Kanban (workshop board, CRM pipelines) */
.board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; min-height: 60vh; }
.lane { flex: 0 0 286px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; max-height: calc(100vh - 230px); }
.lane-h { padding: 11px 12px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); position: relative; }
.lane-h::before { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--c); }
.lane-h .t { font-weight: 750; font-size: .84rem; } .lane-h i { color: var(--c); }
.lane-h .n { margin-left: auto; font-family: var(--font-gauge); font-size: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 0 7px; }
.lane-h .v { font-size: .72rem; color: var(--muted); font-family: var(--font-gauge); }
.lane-b { padding: 10px; display: flex; flex-direction: column; gap: 9px; overflow-y: auto; min-height: 80px; flex: 1; }
.lane-b.over { background: color-mix(in srgb, var(--c) 8%, transparent); outline: 2px dashed color-mix(in srgb, var(--c) 50%, transparent); outline-offset: -6px; border-radius: 0 0 14px 14px; }
.jcard { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 11px; cursor: grab; box-shadow: var(--shadow-1); position: relative; display: block; color: inherit; text-decoration: none !important; transition: box-shadow .15s, transform .15s; }
.jcard:hover { box-shadow: var(--shadow-2); }
.jcard.dragging { opacity: .5; transform: rotate(2deg); }
.jcard .top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.jcard .no { font-family: var(--font-gauge); font-size: .95rem; color: var(--muted); }
.jcard .veh { font-size: .8rem; font-weight: 650; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jcard .cust { font-size: .75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jcard .meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .72rem; color: var(--muted); }
.jcard .meta .amt { margin-left: auto; font-family: var(--font-gauge); font-size: .95rem; color: var(--ink); }
.jcard .type-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--c); }
.jcard.late { border-color: color-mix(in srgb, var(--rose) 45%, var(--line)); }
.jcard.late::after { content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--rose); }
.jcard .prio { font-size: .62rem; font-weight: 800; padding: 1px 6px; border-radius: 5px; }
.prio-urgent { background: var(--rose); color: #fff; } .prio-high { background: var(--amber-soft); color: var(--amber); }

/* ------------------------------------------------------------------ job workspace */
.stepper { display: flex; gap: 0; overflow-x: auto; padding: 4px 2px 8px; }
.step { flex: 1 0 auto; min-width: 104px; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; font-size: .72rem; font-weight: 650; color: var(--muted); text-align: center; background: none; border: 0; padding: 0 4px; }
.step::before { content: ""; position: absolute; top: 15px; left: -50%; right: 50%; height: 3px; background: var(--line); z-index: 0; }
.step:first-child::before { display: none; }
.step .b { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2.5px solid var(--line-2); z-index: 1; font-size: .9rem; color: var(--steel-2); transition: all .2s; }
.step.done .b { background: var(--c); border-color: var(--c); color: #fff; } .step.done::before { background: var(--c); }
.step.cur .b { background: var(--c); border-color: var(--c); color: #fff; box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 22%, transparent); }
.step.cur { color: var(--ink); } .step.cur::before { background: var(--c); }
.step:not(.done):not(.cur):hover .b { border-color: var(--c); color: var(--c); }
.hero-job { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .84rem; } .kv > :nth-child(odd) { color: var(--muted); }
.totals-box { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; }
.totals-box .r { display: flex; justify-content: space-between; padding: 3px 0; font-size: .84rem; } .totals-box .r b { font-family: var(--font-gauge); font-size: 1rem; }
.totals-box .grand { border-top: 2px solid var(--line-2); margin-top: 6px; padding-top: 8px; font-weight: 800; } .totals-box .grand b { font-size: 1.6rem; }
.task { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.task + .task { margin-top: 8px; }
.task .tick { width: 28px; height: 28px; border-radius: 9px; border: 2px solid var(--line-2); display: grid; place-items: center; color: transparent; background: var(--surface); cursor: pointer; flex: 0 0 auto; }
.task.done .tick { background: var(--emerald); border-color: var(--emerald); color: #fff; } .task.done .desc { text-decoration: line-through; color: var(--muted); }
.task.in_progress .tick { border-color: var(--royal); color: var(--royal); }
.task.declined { opacity: .55; }
.clock-on { animation: pulse-ring 1.8s infinite; } @keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(39,71,201,.45); } 100% { box-shadow: 0 0 0 10px rgba(39,71,201,0); } }
.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 4px; bottom: 4px; width: 2px; background: var(--line); }
.tl-item { position: relative; padding-bottom: 14px; }
.tl-item .dot { position: absolute; left: -26px; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 2px solid var(--c, var(--royal)); display: grid; place-items: center; font-size: .62rem; color: var(--c, var(--royal)); }
.tl-item .t { font-weight: 700; font-size: .84rem; } .tl-item .m { font-size: .75rem; color: var(--muted); }
.diff { font-size: .78rem; } .diff .o { color: var(--rose); text-decoration: line-through; } .diff .n { color: var(--emerald); font-weight: 700; }
.warn-strip { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border-radius: 11px; font-size: .82rem; background: color-mix(in srgb, var(--c) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 25%, transparent); }
.warn-strip i { color: var(--c); font-size: 1rem; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.photo { position: relative; border-radius: 11px; overflow: hidden; aspect-ratio: 1; background: var(--surface-3); border: 1px solid var(--line); display: grid; place-items: center; }
.photo img { width: 100%; height: 100%; object-fit: cover; } .photo .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px; font-size: .66rem; background: linear-gradient(transparent, rgba(0,0,0,.65)); color: #fff; }
.photo .pub { position: absolute; top: 5px; left: 5px; } .photo .del { position: absolute; top: 5px; right: 5px; }
.dropzone { border: 2px dashed var(--line-2); border-radius: 14px; padding: 22px; text-align: center; color: var(--muted); cursor: pointer; transition: all .15s; }
.dropzone.over, .dropzone:hover { border-color: var(--saffron); background: var(--saffron-soft); color: var(--ink); }

/* signature pad & car marking */
.sigpad { position: relative; border: 1.5px dashed var(--line-2); border-radius: 12px; background: #fff; touch-action: none; }
.sigpad canvas { display: block; width: 100%; height: 170px; cursor: crosshair; }
.sigpad .hint { position: absolute; left: 12px; bottom: 8px; font-size: .72rem; color: #9AA4BC; pointer-events: none; }
.sigpad .clear { position: absolute; right: 8px; top: 8px; }
.carmark { position: relative; background: var(--surface-2); border-radius: 14px; border: 1px solid var(--line); }
.carmark svg { width: 100%; height: auto; display: block; cursor: crosshair; touch-action: manipulation; }
.mark-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.mark-tools button { border: 1.5px solid var(--line-2); background: var(--surface); border-radius: 9px; padding: 4px 9px; font-size: .76rem; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.mark-tools button i { width: 16px; height: 16px; border-radius: 50%; background: var(--c); color: #fff; font-style: normal; font-size: .62rem; display: grid; place-items: center; }
.mark-tools button.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--surface)); }
.fuel { display: flex; gap: 4px; } .fuel button { flex: 1; border: 1.5px solid var(--line-2); background: var(--surface); border-radius: 8px; padding: 5px 0; font-weight: 700; font-size: .78rem; }
.fuel button.on { background: var(--navy); border-color: var(--navy); color: var(--saffron); }
.checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.checklist label { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 9px; font-size: .8rem; cursor: pointer; background: var(--surface); }
.checklist input:checked + span { font-weight: 700; }

/* ------------------------------------------------------------------ wizard */
.wizard-steps { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.wizard-steps .ws { flex: 1 1 140px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-size: .8rem; font-weight: 700; color: var(--muted); }
.wizard-steps .ws .n { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-3); font-family: var(--font-gauge); font-size: 1rem; }
.wizard-steps .ws.on { border-color: var(--navy); color: var(--ink); } .wizard-steps .ws.on .n { background: var(--navy); color: var(--saffron); }
.wizard-steps .ws.ok .n { background: var(--emerald); color: #fff; }
.pick { border: 1.5px solid var(--line); border-radius: 12px; padding: 12px; cursor: pointer; background: var(--surface); transition: all .15s; height: 100%; }
.pick:hover { border-color: var(--line-2); } .pick.on { border-color: var(--c, var(--royal)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--royal)) 18%, transparent); }
.pick .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--c, var(--royal)) 14%, var(--surface)); color: var(--c, var(--royal)); font-size: 1.1rem; }

/* ------------------------------------------------------------------ POS */
.pos { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; align-items: start; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 10px; }
.tile { border: 1px solid var(--line); background: var(--surface); border-radius: 13px; padding: 11px; text-align: left; display: flex; flex-direction: column; gap: 6px; min-height: 104px; transition: border-color .12s, transform .12s; position: relative; }
.tile:hover { border-color: var(--c, var(--royal)); } .tile:active { transform: scale(.98); }
.tile .ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--c, var(--royal)); background: color-mix(in srgb, var(--c, var(--royal)) 13%, var(--surface)); }
.tile .nm { font-weight: 700; font-size: .8rem; line-height: 1.25; } .tile .pr { margin-top: auto; font-family: var(--font-gauge); font-size: 1.05rem; }
.tile .stk { position: absolute; top: 9px; right: 9px; font-size: .66rem; font-weight: 700; color: var(--muted); }
.cart { position: sticky; top: calc(var(--top-h) + 16px); }
.cart-line { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.qty-ctl { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; }
.qty-ctl button { border: 0; background: var(--surface-2); width: 26px; height: 26px; } .qty-ctl input { width: 44px; border: 0; text-align: center; font-family: var(--font-gauge); font-size: .95rem; background: var(--surface); color: var(--ink); }
.pay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pay-grid button { border: 1.5px solid var(--line-2); border-radius: 10px; background: var(--surface); padding: 8px 4px; font-size: .76rem; font-weight: 700; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pay-grid button i { font-size: 1.1rem; } .pay-grid button.on { border-color: var(--navy); background: var(--navy); color: #fff; }
.grand-total { font-family: var(--font-gauge); font-size: 2.6rem; line-height: 1; }

/* ------------------------------------------------------------------ calendar */
.cal { display: grid; grid-template-columns: 60px repeat(7, minmax(120px, 1fr)); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.cal .hd { padding: 10px 8px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-weight: 750; font-size: .8rem; text-align: center; position: sticky; top: 0; z-index: 2; }
.cal .hd .d { font-family: var(--font-gauge); font-size: 1.4rem; line-height: 1; display: block; } .cal .hd.today { background: var(--navy); color: #fff; } .cal .hd.today .d { color: var(--saffron); }
.cal .hd .load { height: 4px; border-radius: 4px; background: var(--surface-3); margin-top: 6px; overflow: hidden; } .cal .hd .load i { display: block; height: 100%; }
.cal .tcol { border-right: 1px solid var(--line); }
.cal .slot-h { height: 56px; font-size: .7rem; color: var(--muted); text-align: right; padding: 2px 6px; border-bottom: 1px solid var(--line); font-family: var(--font-gauge); }
.cal .day { position: relative; border-right: 1px solid var(--line); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 55px, var(--line) 55px, var(--line) 56px); }
.cal .day.over { background-color: var(--saffron-soft); }
.appt { position: absolute; left: 4px; right: 4px; border-radius: 9px; padding: 5px 7px; font-size: .72rem; overflow: hidden; cursor: grab; background: color-mix(in srgb, var(--c) 16%, var(--surface)); border-left: 3px solid var(--c); color: var(--ink); box-shadow: var(--shadow-1); }
.appt .tm { font-family: var(--font-gauge); font-size: .85rem; font-weight: 600; } .appt b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt.converted { opacity: .55; } .appt.no_show { text-decoration: line-through; opacity: .5; }
.now-line { position: absolute; left: 0; right: 0; height: 2px; background: var(--signal); z-index: 3; } .now-line::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }

/* attendance grid */
.att { border-collapse: separate; border-spacing: 0; font-size: .76rem; }
.att th, .att td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; padding: 0; }
.att th { background: var(--surface-2); font-weight: 700; padding: 6px 2px; position: sticky; top: 0; z-index: 2; } .att th.we { color: var(--rose); }
.att td.name { text-align: left; padding: 6px 10px; position: sticky; left: 0; background: var(--surface); z-index: 1; min-width: 190px; }
.att .cell { width: 34px; height: 32px; border: 0; background: none; font-weight: 800; font-size: .72rem; cursor: pointer; }
.att .cell:hover { outline: 2px solid var(--saffron); outline-offset: -2px; }
.c-P { background: color-mix(in srgb, var(--emerald) 18%, var(--surface)) !important; color: var(--emerald); } .c-L { background: color-mix(in srgb, #F59E0B 22%, var(--surface)) !important; color: #B45309; }
.c-A { background: color-mix(in srgb, var(--rose) 18%, var(--surface)) !important; color: var(--rose); } .c-H { background: color-mix(in srgb, #8B5CF6 18%, var(--surface)) !important; color: #7C3AED; }
.c-LV { background: color-mix(in srgb, #0EA5E9 18%, var(--surface)) !important; color: #0369A1; } .c-PH, .c-W { background: var(--surface-3) !important; color: var(--muted); }

/* ------------------------------------------------------------------ AI drawer, palette, bell */
.ai-drawer { width: 440px !important; border-left: 0 !important; }
.ai-head { background: linear-gradient(135deg, #1E1B4B, #4C1D95 55%, #831843); color: #fff; padding: 18px; }
.ai-body { flex: 1; overflow-y: auto; padding: 16px; background: var(--surface-2); }
.msg { max-width: 92%; padding: 10px 13px; border-radius: 14px; margin-bottom: 10px; font-size: .86rem; white-space: pre-wrap; line-height: 1.5; }
.msg.me { margin-left: auto; background: var(--navy); color: #fff; border-bottom-right-radius: 4px; }
.msg.ai { background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg.ai table { width: 100%; font-size: .76rem; margin-top: 8px; white-space: normal; } .msg.ai table td, .msg.ai table th { padding: 3px 6px; border-bottom: 1px solid var(--line); }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); display: inline-block; margin-right: 3px; animation: typing 1s infinite; } .typing span:nth-child(2) { animation-delay: .15s; } .typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 50% { opacity: .2; transform: translateY(-3px); } }
.suggest { display: flex; flex-wrap: wrap; gap: 6px; } .suggest button { border: 1px solid var(--line-2); background: var(--surface); border-radius: 18px; padding: 5px 11px; font-size: .76rem; font-weight: 600; color: var(--ink-2); }
.suggest button:hover { border-color: #7C3AED; color: #7C3AED; }
.palette .modal-content { border-radius: 18px; overflow: hidden; }
.palette input { border: 0; font-size: 1.05rem; padding: 18px 20px 18px 52px; box-shadow: none !important; border-bottom: 1px solid var(--line); border-radius: 0; }
.palette .pi { position: absolute; left: 20px; top: 19px; font-size: 1.15rem; color: var(--muted); }
.pal-list { max-height: 420px; overflow-y: auto; padding: 6px; }
.pal-group { font-size: .7rem; font-weight: 800; color: var(--muted); padding: 10px 12px 4px; }
.pal-item { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; color: var(--ink); text-decoration: none !important; }
.pal-item .ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--c, var(--royal)) 13%, var(--surface)); color: var(--c, var(--royal)); }
.pal-item .s { font-size: .74rem; color: var(--muted); } .pal-item.hl { background: var(--surface-3); }
.bell-menu { width: 380px; padding: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-pop); background: var(--surface); }
.bell-item { display: flex; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none !important; }
.bell-item:hover { background: var(--surface-2); } .bell-item.unread { background: color-mix(in srgb, var(--saffron) 7%, var(--surface)); }
.bell-item .ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; background: color-mix(in srgb, var(--c) 14%, var(--surface)); color: var(--c); }

/* insights */
.insight { display: flex; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c) 22%, var(--line)); background: color-mix(in srgb, var(--c) 6%, var(--surface)); color: var(--ink); text-decoration: none !important; }
.insight .ic { width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto; display: grid; place-items: center; background: var(--c); color: #fff; }
.insight .t { font-weight: 750; font-size: .84rem; } .insight .x { font-size: .78rem; color: var(--muted); }
.lvl-success { --c: #0E9F6E; } .lvl-warning { --c: #D97706; } .lvl-danger { --c: #E11D48; } .lvl-info { --c: #2747C9; } .lvl-ai { --c: #7C3AED; }

/* charts */
.chart { width: 100%; position: relative; } .chart svg { display: block; width: 100%; overflow: visible; }
.chart .tip { position: absolute; pointer-events: none; background: var(--navy); color: #fff; font-size: .74rem; padding: 6px 9px; border-radius: 8px; white-space: nowrap; transform: translate(-50%, -110%); opacity: 0; transition: opacity .12s; z-index: 5; box-shadow: var(--shadow-2); }
.chart .tip b { font-family: var(--font-gauge); font-size: .95rem; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .74rem; color: var(--muted); } .legend span { display: inline-flex; align-items: center; gap: 6px; } .legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.axis text { fill: var(--muted); font-size: 10.5px; font-family: var(--font); } .gridline { stroke: var(--line); stroke-dasharray: 3 4; }
.donut-center { font-family: var(--font-gauge); }
.hbar { display: grid; grid-template-columns: minmax(90px, 160px) 1fr auto; gap: 8px; align-items: center; font-size: .8rem; padding: 4px 0; }
.hbar .track { height: 9px; border-radius: 9px; background: var(--surface-3); overflow: hidden; } .hbar .track i { display: block; height: 100%; border-radius: 9px; background: var(--c, var(--royal)); }
.hbar .v { font-family: var(--font-gauge); font-size: .95rem; text-align: right; min-width: 70px; }
.ring { position: relative; display: inline-grid; place-items: center; } .ring span { position: absolute; font-family: var(--font-gauge); font-size: 1.05rem; }

/* list rows */
.lrow { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none !important; }
.lrow:last-child { border-bottom: 0; } a.lrow:hover .lt { color: var(--royal); }
.lrow .lt { font-weight: 700; font-size: .84rem; } .lrow .ls { font-size: .75rem; color: var(--muted); }
.lrow .lv { margin-left: auto; text-align: right; font-family: var(--font-gauge); font-size: 1rem; }
/* flex children that hold long text must be allowed to shrink so .text-truncate can work */
.min-w-0 { min-width: 0; } .lrow > .min-w-0, .d-flex > .min-w-0 { flex: 1 1 auto; } .lrow > .btn, .lrow > .lv { flex: 0 0 auto; }
.mini-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; background: color-mix(in srgb, var(--c, var(--royal)) 13%, var(--surface)); color: var(--c, var(--royal)); }

/* ------------------------------------------------------------------ modals / offcanvas */
.modal-content { border: 0; border-radius: 18px; box-shadow: var(--shadow-pop); background: var(--surface); color: var(--ink); }
.modal-header { border-bottom: 1px solid var(--line); padding: 16px 20px; gap: 12px; }
.modal-header .mh-icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 1.1rem; color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, var(--surface)); flex: 0 0 auto; }
.modal-title { font-weight: 800; font-size: 1.05rem; } .modal-header .sub { font-size: .76rem; color: var(--muted); }
.modal-body { padding: 18px 20px; } .modal-footer { border-top: 1px solid var(--line); padding: 12px 20px; background: var(--surface-2); border-radius: 0 0 18px 18px; }
.modal-backdrop.show { opacity: .55; background: var(--navy-ink); }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.offcanvas { background: var(--surface); color: var(--ink); }
.dropdown-menu { border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-2); padding: 5px; font-size: .84rem; background: var(--surface); }
.dropdown-item { border-radius: 8px; padding: 7px 10px; color: var(--ink); display: flex; align-items: center; gap: 9px; } .dropdown-item i { color: var(--muted); width: 18px; }
.dropdown-item:hover { background: var(--surface-3); color: var(--ink); } .dropdown-item.text-danger i { color: var(--rose); }
.dropdown-header { font-size: .72rem; font-weight: 800; color: var(--muted); }
.nav-pills .nav-link { border-radius: 9px; font-weight: 650; color: var(--ink-2); } .nav-pills .nav-link.active { background: var(--navy); color: #fff; }
.lines-tbl input, .lines-tbl select { min-width: 60px; } .lines-tbl td { padding: 6px 6px; } .lines-tbl .form-control, .lines-tbl .form-select { min-height: 34px; padding: 4px 8px; font-size: .82rem; }
.lines-tbl tr.del { opacity: .45; } .lines-tbl tr.del input { text-decoration: line-through; }

/* ------------------------------------------------------------------ login & public pages (used by login.php / track.php / approve.php) */
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); background: var(--surface); }
.login-art { background: radial-gradient(circle at 85% 12%, rgba(245,179,1,.18), transparent 34%), radial-gradient(circle at 10% 90%, rgba(39,71,201,.35), transparent 40%), var(--navy); color: #fff; padding: 42px 50px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.login-art::after { content: ""; position: absolute; inset: auto -120px -160px auto; width: 520px; height: 520px; border-radius: 50%; border: 60px solid rgba(255,255,255,.03); }
.login-art .plate { font-size: 2.4rem; border-width: 3px; } .login-art .plate .pc { border-right-width: 3px; padding: 6px 12px; } .login-art .plate .pn { padding: 6px 16px; }
.login-form { display: grid; place-items: center; padding: 40px 24px; background: var(--bg); }
.login-card { width: 100%; max-width: 400px; background: var(--surface); padding: 34px; border-radius: 20px; box-shadow: var(--shadow-2); border: 1px solid var(--line); }
@media (max-width: 900px) { .login-wrap { grid-template-columns: 1fr; } .login-art { display: none; } }
.pub-wrap { max-width: 640px; margin: 0 auto; padding: 18px 16px 40px; }
.pub-card { background: var(--surface); border-radius: 22px; padding: 22px; box-shadow: var(--shadow-pop); }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1199px) { .pos { grid-template-columns: 1fr; } .cart { position: static; } }
@media (max-width: 991px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 280px; transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--shadow-pop); }
  .app.sb-open .sidebar { transform: none; }
  .sb-scrim { position: fixed; inset: 0; background: rgba(8,17,41,.5); z-index: 1035; display: none; } .app.sb-open .sb-scrim { display: block; }
  .content { padding: 16px 14px 60px; } .topbar { padding: 0 14px; }
  .search-trigger .lbl, .search-trigger kbd { display: none; } .search-trigger { flex: 0 0 auto; width: 40px; justify-content: center; padding: 0; }
  .ai-drawer { width: 100% !important; }
}
@media (min-width: 992px) { .sb-scrim, .only-mobile { display: none !important; } }
@media (max-width: 575px) { .kpi .val { font-size: 1.8rem; } .page-head h1 { font-size: 1.25rem; } .lane { flex-basis: 84vw; } .bell-menu { width: 92vw; } }
@media print {
  .sidebar, .topbar, .no-print, .toolbar, .pager, .chips, .btn, .bulkbar { display: none !important; }
  .app { display: block; } .content { padding: 0; } .panel { box-shadow: none; border: 0; } body { background: #fff; }
  .table-wrap { overflow: visible; } .tbl thead th { position: static; }
}