/* Saqr Al-Ghaya ERP · design tokens and components (RTL) · navy & blue theme */
:root {
  --navy: #131F35;
  --navy-2: #1C2A44;
  --navy-3: #243252;
  --side-text: #C9D1DE;
  --side-item: #AEB8C8;
  --side-sub: #9AA5B8;
  --side-muted: #7C87A0;
  --primary: #2E6BE0;
  --primary-700: #2559C4;
  --primary-900: #1D4AA3;
  --primary-soft: #E9F1FE;
  --primary-tint: #F3F7FE;
  --bg: #F5F6F8;
  --card: #FFFFFF;
  --border: #EAECF0;
  --border-strong: #D8DCE3;
  --line: #EEF0F3;
  --text: #182430;
  --text-2: #3D4757;
  --muted: #66707F;
  --faint: #8A94A3;
  --ok-bg: #E9F8EF; --ok-fg: #1E7A45; --ok: #2FA360;
  --warn-bg: #FEF6E6; --warn-fg: #8C6423; --warn: #E6A729;
  --crit-bg: #FDECEC; --crit-fg: #B42318; --crit: #E15353;
  --info-bg: #E9F1FE; --info-fg: #2952B3; --info: #2E6BE0;
  --idle-bg: #F0F1F4; --idle-fg: #4A5463; --idle: #B4BBC6;
  --teal-bg: #E4F4F3; --teal-fg: #0E6461; --teal: #1B8A86;
  --violet-bg: #F0EDFC; --violet-fg: #5A45B0;
  /* Older names, still used by inline styles in the views */
  --purple: var(--primary);
  --purple-700: var(--primary-700);
  --purple-900: var(--primary-900);
  --purple-soft: var(--primary-soft);
  --purple-tint: var(--primary-tint);
  --plum: var(--navy);
  --gold: #E6A729;
  --gold-soft: #FEF6E6;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(19, 31, 53, 0.05), 0 4px 16px rgba(19, 31, 53, 0.06);
  --ring: 0 0 0 3px rgba(46, 107, 224, 0.15);
  --font: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --font-head: 'Almarai', 'IBM Plex Sans Arabic', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-900); }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--font-head); margin: 0; font-weight: 700; }
h1 { font-size: 22px; }
h2 { font-size: 15.5px; }
h3 { font-size: 14.5px; }
p { margin: 0; }
.mono, .ltr { font-family: var(--font-mono); direction: ltr; unicode-bidi: isolate; }
.ltr-text { direction: ltr; unicode-bidi: isolate; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.strong { font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack-sm { display: flex; flex-direction: column; gap: 6px; }
.row { display: flex; align-items: center; gap: 10px; }
.row-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spacer { flex-grow: 1; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: 1 / -1; }

/* ------------------------------------------------------------------ Auth */
.auth { min-height: 100vh; display: flex; background: #FFFFFF; }
.auth-form { width: 600px; max-width: 100%; flex-shrink: 0; padding: 48px 80px 32px; display: flex; flex-direction: column; }
.auth-top { display: flex; align-items: center; justify-content: space-between; }
.auth-top img { width: 48px; height: 48px; object-fit: contain; }
.auth-body { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; gap: 26px; padding: 32px 0; }
.auth-body h1 { font-size: 30px; font-weight: 800; }
.auth-body .lead { font-size: 15px; color: var(--muted); line-height: 1.7; margin-top: 6px; }
.auth-side { flex-grow: 1; position: relative; overflow: hidden; background: var(--navy); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; padding: 60px; }
.auth-side::after { content: ''; position: absolute; top: 0; right: 0; width: 6px; height: 100%; background: var(--primary); }
.auth-side .watermark { position: absolute; left: -160px; bottom: -180px; width: 620px; height: 620px; object-fit: contain; opacity: 0.05; }
.auth-side .brand { position: relative; width: 380px; max-width: 80%; height: auto; }
.auth-side p { position: relative; max-width: 520px; text-align: center; font-size: 18px; line-height: 1.9; color: var(--side-text); }
.auth-note { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.7; color: var(--muted); }
.auth-note svg { flex-shrink: 0; margin-top: 2px; color: var(--primary); }
.auth-foot { font-size: 12px; color: var(--faint); }
.pw-wrap { position: relative; display: flex; }
.pw-wrap .input { flex-grow: 1; padding-left: 56px; }
.pw-wrap .icon-btn { position: absolute; top: 3px; left: 3px; }
.otp-input { height: 64px !important; font-family: var(--font-mono); font-size: 30px; font-weight: 600; letter-spacing: 14px; text-align: center; direction: ltr; }
.qr-enroll { display: flex; gap: 20px; align-items: center; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--primary-tint); }
.qr-enroll img, .qr-enroll .qr-img { width: 176px; height: 176px; background: #FFFFFF; border-radius: 10px; padding: 6px; border: 1px solid var(--border); flex-shrink: 0; }
.qr-enroll .qr-img svg { display: block; width: 100%; height: 100%; }
.qr-enroll a.link-btn { text-decoration: none; }
.secret { font-family: var(--font-mono); font-size: 13px; direction: ltr; word-break: break-all; background: #FFFFFF; border: 1px dashed var(--border-strong); border-radius: 8px; padding: 6px 10px; }
.pw-rules { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.pw-rules span { display: flex; gap: 6px; align-items: center; color: var(--muted); }
.pw-rules span.ok { color: var(--ok-fg); }

/* ------------------------------------------------------------------ Shell */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 270px; flex-shrink: 0; position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: var(--navy); color: var(--side-text); display: flex; flex-direction: column;
}
.side-brand { display: flex; align-items: center; gap: 12px; padding: 22px 20px 16px; color: #FFFFFF; flex-shrink: 0; }
.side-brand:hover { color: #FFFFFF; }
.side-brand .seal { width: 44px; height: 44px; border-radius: 12px; background: #FFFFFF; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.side-brand .seal img { width: 34px; height: 34px; object-fit: contain; }
.side-brand .names { display: flex; flex-direction: column; min-width: 0; }
.side-brand .name { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: #FFFFFF; white-space: nowrap; }
.side-brand .sub { font-size: 11.5px; color: var(--side-muted); margin-top: 2px; white-space: nowrap; }
.branch-switch { position: relative; margin: 0 14px 6px; flex-shrink: 0; }
.branch-switch select {
  appearance: none; width: 100%; height: 50px; padding: 16px 12px 2px 34px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05); color: #FFFFFF; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.branch-switch select:disabled { cursor: default; opacity: 1; }
.branch-switch select option { color: var(--text); }
.branch-switch .cap { position: absolute; top: 6px; right: 13px; font-size: 11px; color: var(--side-muted); pointer-events: none; }
.branch-switch svg { position: absolute; left: 11px; top: 16px; pointer-events: none; color: var(--side-muted); }
.side-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 12px 12px; }
.side-nav::-webkit-scrollbar { width: 6px; }
.side-nav::-webkit-scrollbar-track { background: transparent; }
.side-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 10px; }
.side-nav::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }
.nav-item {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 16px; margin: 3px 0; border-radius: 10px;
  font-size: 14.5px; font-weight: 500; color: var(--side-item); background: transparent; border: 0; width: 100%; text-align: right; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.nav-item svg { flex-shrink: 0; }
.nav-item:hover { background: rgba(255, 255, 255, 0.06); color: #FFFFFF; }
.nav-item.active { background: var(--primary); color: #FFFFFF; font-weight: 600; }
.nav-item .label, .sub-item .label { flex-grow: 1; min-width: 0; }
.nav-group { margin: 3px 0; }
.nav-group > summary {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 16px; border-radius: 10px;
  font-size: 14.5px; font-weight: 600; color: var(--side-text); cursor: pointer; list-style: none; user-select: none;
  transition: background 0.15s, color 0.15s;
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::marker { content: ''; }
.nav-group > summary:hover { background: rgba(255, 255, 255, 0.06); color: #FFFFFF; }
.nav-group > summary svg { flex-shrink: 0; }
.nav-group > summary .label { flex-grow: 1; }
.nav-group > summary .chev { display: flex; color: var(--side-muted); transition: transform 0.15s; }
.nav-group[open] > summary { color: #FFFFFF; }
.nav-group[open] > summary .chev { transform: rotate(180deg); }
.nav-group.has-active:not([open]) > summary { background: rgba(46, 107, 224, 0.22); color: #FFFFFF; }
.nav-group > summary .g-count { display: none; }
.nav-group:not([open]) > summary .g-count:not(:empty) { display: inline-flex; }
.sub-list { display: flex; flex-direction: column; padding: 2px 0 6px; }
.sub-item {
  position: relative; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; margin: 1px 0 1px 0; margin-inline-start: 30px;
  border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--side-sub); background: transparent; border: 0; text-align: right; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.sub-item::before { content: ''; position: absolute; inset-inline-start: -14px; top: 50%; width: 6px; height: 1px; background: #39456A; }
.sub-item:hover { background: rgba(255, 255, 255, 0.06); color: #FFFFFF; }
.sub-item.active { background: rgba(255, 255, 255, 0.09); color: #FFFFFF; font-weight: 600; }
.sub-item.active::before { inset-inline-start: -16px; width: 10px; height: 2px; margin-top: -0.5px; background: var(--primary); }
.sidebar .count { min-width: 24px; height: 20px; padding: 0 7px; border-radius: 10px; background: rgba(255, 255, 255, 0.12); color: #FFFFFF; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sidebar .count.hot { background: var(--crit); color: #FFFFFF; }
.nav-item.active .count { background: rgba(255, 255, 255, 0.22); }
.sidebar .soon { font-size: 11px; color: var(--side-muted); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; padding: 0 6px; flex-shrink: 0; }
.nav-item.later, .sub-item.later { color: #6F7A92; cursor: default; }
.nav-item.later:hover, .sub-item.later:hover { background: rgba(255, 255, 255, 0.03); color: #8A94AA; }
.sidebar-foot { flex-shrink: 0; padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.user-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.user-row .who { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
.user-row .who strong { font-size: 13.5px; font-weight: 600; color: #FFFFFF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-row .who span { font-size: 11.5px; color: var(--side-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logout-btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border: 0; border-radius: 8px; background: var(--navy-2); color: var(--side-text); font-size: 13.5px; font-weight: 500; cursor: pointer; transition: background 0.15s, color 0.15s; }
.logout-btn:hover { background: var(--navy-3); color: #FFFFFF; }
.avatar { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: var(--primary); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.avatar.sm { width: 32px; height: 32px; font-size: 11.5px; background: var(--primary-soft); color: var(--primary); }
.avatar.client { background: var(--warn-bg); color: var(--warn-fg); }

.main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 72px; flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 0 32px;
  background: rgba(245, 246, 248, 0.92); -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px);
  position: sticky; top: 0; z-index: 20;
}
.menu-btn { display: inline-flex; background: #FFFFFF; border: 1px solid var(--border); color: var(--text-2); width: 44px; height: 44px; border-radius: 10px; }
.menu-btn:hover { border-color: var(--primary); color: var(--primary); background: #FFFFFF; }
.search { position: relative; flex-grow: 1; max-width: 560px; }
.search .input { padding-right: 42px; height: 44px; background-color: #FFFFFF; border-color: var(--border); border-radius: 10px; }
.search .input:focus { border-color: var(--primary); }
.search > svg { position: absolute; right: 13px; top: 12px; color: var(--muted); pointer-events: none; }
.search-results {
  position: absolute; top: 50px; right: 0; left: 0; background: #FFFFFF; border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(19, 31, 53, 0.14); padding: 6px; max-height: 420px; overflow-y: auto; z-index: 30;
}
.search-results a, .search-results .none { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--text); }
.search-results a:hover, .search-results a.focus { background: var(--primary-soft); color: var(--primary-900); }
.search-results .kind { font-size: 11.5px; color: var(--muted); min-width: 52px; }
.search-results .none { color: var(--muted); }
.env-badge { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 20px; background: var(--warn-bg); color: var(--warn-fg); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.env-badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }
.live-badge { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border-radius: 20px; background: var(--ok-bg); color: var(--ok-fg); font-size: 12px; font-weight: 600; white-space: nowrap; }
.live-badge::before { content: '✦'; font-size: 11px; }
.content { padding: 8px 32px 56px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.shell.nav-collapsed .sidebar { display: none; }

/* ------------------------------------------------------------------ Page */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head .titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.page-head .sub { color: var(--muted); font-size: 13px; }
.page-head .actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-title { display: flex; align-items: center; gap: 10px; }
.page-title svg { color: var(--primary); flex-shrink: 0; }
.greeting { display: flex; flex-direction: column; gap: 6px; }
.greeting h2 { font-size: 24px; font-weight: 800; }
.greeting p { color: var(--muted); font-size: 13px; }
.crumb { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--primary); }
.crumb svg { transform: scaleX(-1); }

.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.card.flush { padding: 0; gap: 0; overflow: hidden; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.card.flush > .card-head { padding: 16px 22px; border-bottom: 1px solid var(--border); }
.card-head .meta { font-size: 12.5px; color: var(--muted); }
.card-head h2 { display: flex; align-items: center; gap: 10px; }
.num-badge { width: 26px; height: 26px; border-radius: 8px; background: var(--primary-soft); color: var(--primary); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.count-pill { min-width: 24px; height: 22px; padding: 0 9px; border-radius: 20px; background: var(--primary-soft); color: var(--primary); font-family: var(--font); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 18px; align-items: start; }
.layout-main { display: grid; grid-template-columns: minmax(0, 1fr) 352px; gap: 18px; align-items: start; }
.layout-split { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 18px; align-items: start; }
.layout-list { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 18px; align-items: start; }
.sticky-side { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 18px; }

/* KPIs (stat cards) */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.kpi { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; color: var(--text); min-width: 0; transition: border-color 0.15s, box-shadow 0.15s; }
a.kpi:hover { border-color: var(--primary); box-shadow: 0 2px 10px rgba(46, 107, 224, 0.08); color: var(--text); }
.kpi-ic { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-bottom: 8px; background: var(--primary-soft); color: var(--primary); }
.kpi-ic.tone-blue { background: var(--primary-soft); color: var(--primary); }
.kpi-ic.tone-red { background: var(--crit-bg); color: var(--crit); }
.kpi-ic.tone-yellow { background: var(--warn-bg); color: #C98B12; }
.kpi-ic.tone-green { background: var(--ok-bg); color: var(--ok); }
.kpi-ic.tone-teal { background: var(--teal-bg); color: var(--teal); }
.kpi-ic.tone-gray { background: var(--idle-bg); color: var(--idle-fg); }
.kpi-ic.tone-navy { background: #E7EAF0; color: var(--navy); }
.kpi-ic.tone-violet { background: var(--violet-bg); color: var(--violet-fg); }
.kpi[style*="-bg)"] .kpi-ic { background: rgba(255, 255, 255, 0.8); }
.kpi .kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); font-weight: 500; }
.kpi .kpi-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.kpi .value { font-family: var(--font); font-size: 26px; font-weight: 600; line-height: 1.25; display: flex; align-items: baseline; gap: 6px; }
.kpi .value small { font-size: 13.5px; color: var(--muted); font-family: var(--font); font-weight: 500; }
.kpi .note { font-size: 12px; color: var(--muted); line-height: 1.5; }
.kpi.disabled { opacity: 0.72; background: #FAFBFC; }

/* Buttons */
.btn {
  height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px;
  border-radius: 8px; border: 1px solid transparent; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.6; }
.btn-primary { background: var(--primary); color: #FFFFFF; }
.btn-primary:hover:not(:disabled) { background: var(--primary-700); color: #FFFFFF; }
.btn-secondary { background: #FFFFFF; border-color: var(--border-strong); color: var(--text); }
.btn-secondary:hover:not(:disabled) { background: var(--primary-tint); border-color: var(--primary); color: var(--primary-900); }
.card .btn-secondary, .dialog .btn-secondary { background: var(--bg); border-color: var(--border); }
.card .btn-secondary:hover:not(:disabled), .dialog .btn-secondary:hover:not(:disabled) { background: var(--primary-tint); border-color: var(--primary); }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover:not(:disabled) { background: var(--line); }
.btn-danger { background: #D63B3B; color: #FFFFFF; }
.btn-danger:hover:not(:disabled) { background: #B42318; }
.btn-gold { background: var(--warn); color: var(--navy); }
.btn-gold:hover:not(:disabled) { background: #D3961B; }
.btn-sm { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn-block { width: 100%; height: 52px; font-size: 16px; font-weight: 700; border-radius: 10px; }
.icon-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 0; background: transparent; color: var(--muted); cursor: pointer; flex-shrink: 0; }
.icon-btn:hover { background: var(--primary-soft); color: var(--primary); }
.icon-btn.sm { width: 34px; height: 34px; border-radius: 8px; }
.link-btn { border: 0; background: none; padding: 0; color: var(--primary); font-weight: 600; cursor: pointer; font-size: 13px; }
.link-btn:hover { color: var(--primary-900); text-decoration: underline; }

/* Chips and tones */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; white-space: nowrap; line-height: 1.4; }
.t-ok { background: var(--ok-bg); color: var(--ok-fg); }
.t-warn { background: var(--warn-bg); color: var(--warn-fg); }
.t-crit { background: var(--crit-bg); color: var(--crit-fg); }
.t-info { background: var(--info-bg); color: var(--info-fg); }
.t-idle { background: var(--idle-bg); color: var(--idle-fg); }
.t-purple { background: var(--primary-soft); color: var(--primary-900); }
.t-gold { background: var(--warn-bg); color: var(--warn-fg); }
.t-lock { background: #E7EAF0; color: var(--navy); }
.t-g-pre { background: var(--violet-bg); color: var(--violet-fg); }
.t-g-customs { background: var(--info-bg); color: var(--info-fg); }
.t-g-agency { background: var(--teal-bg); color: var(--teal-fg); }
.t-g-transport { background: var(--warn-bg); color: var(--warn-fg); }
.t-g-finance { background: var(--ok-bg); color: var(--ok-fg); }
.t-g-exception { background: var(--crit-bg); color: var(--crit-fg); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); } .dot.crit { background: var(--crit); } .dot.idle { background: var(--idle); } .dot.info { background: var(--info); }

/* Forms */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label { font-size: 13px; font-weight: 700; color: var(--text); }
.field .hint { font-size: 12px; color: var(--muted); }
.input {
  width: 100%; height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border-strong);
  background-color: #FFFFFF; font-size: 14px; color: var(--text); transition: border-color 0.12s, box-shadow 0.12s, background-color 0.12s;
}
.card .input, .dialog .input { background-color: var(--bg); border-color: var(--border); }
textarea.input { height: auto; min-height: 88px; padding: 10px 12px; resize: vertical; line-height: 1.6; }
select.input { padding-left: 32px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2366707F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 10px center; }
.input:hover:not(:disabled):not(:focus) { border-color: #C9CFD8; }
.input:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); background-color: #FFFFFF; }
.input:disabled { background-color: #F0F1F3; color: var(--muted); }
.input.lg { height: 50px; border-radius: 10px; font-size: 15px; }
.input.ltr, input.input[type=email], input.input[type=number], input.input[type=date], input.input[type=datetime-local] { direction: ltr; text-align: right; }
.input.invalid { border-color: #E9A1A1; }
.input.valid { border-color: #7CC79A; }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
.banner { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 10px 14px; border-radius: 10px; font-size: 13px; font-weight: 500; }
.banner svg { flex-shrink: 0; }
.banner .grow { flex-grow: 1; }

.seg { height: 42px; display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: #FFFFFF; border: 1px solid var(--border); }
.card .seg, .dialog .seg { background: var(--bg); }
.seg button { flex-grow: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; border-radius: 7px; border: 0; background: transparent; color: var(--muted); font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.12s, color 0.12s; }
.seg button:hover:not(.on) { color: var(--text); }
.seg button.on { background: var(--primary); color: #FFFFFF; box-shadow: 0 1px 2px rgba(46, 107, 224, 0.25); }
.seg.sm { height: 36px; }
.seg.dark button.on { background: var(--primary); color: #FFFFFF; }

.switch { width: 40px; height: 24px; border-radius: 12px; border: 0; background: var(--border-strong); position: relative; cursor: pointer; flex-shrink: 0; padding: 0; }
.switch span { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: right 0.15s ease; }
.switch.on { background: var(--primary); }
.switch.on span { right: 19px; }
.switch:disabled { opacity: 0.5; cursor: not-allowed; }

.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.fchip { height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--border-strong); background: #FFFFFF; color: var(--text-2); font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color 0.12s, color 0.12s, background 0.12s; }
.fchip:hover:not(.on) { border-color: var(--primary); color: var(--primary); }
.fchip .n { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--bg); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.fchip.on { background: var(--primary); border-color: var(--primary); color: #FFFFFF; }
.fchip.on .n { background: rgba(255, 255, 255, 0.2); }
.fchip.late.on { background: var(--warn-bg); border-color: #F0CB7A; color: var(--warn-fg); }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tabs button { height: 48px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border: 0; background: transparent; color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.tabs button:hover:not(.on) { color: var(--text); }
.tabs button.on { color: var(--primary); box-shadow: inset 0 -2.5px 0 var(--primary); }
.tabs button .n { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--bg); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.tabs button.on .n { background: var(--primary-soft); color: var(--primary); }

/* Tables */
.table-wrap { overflow-x: auto; position: relative; }
/* Scroll boxes contain their visually hidden labels, so phones get no sideways overflow. */
.tabs, .stepper, .board { position: relative; }
table.table { width: 100%; border-collapse: collapse; font-size: 14px; }
table.table th { text-align: right; font-size: 13px; font-weight: 700; color: var(--text); background: var(--bg); padding: 12px 16px; white-space: nowrap; }
table.table td { padding: 13px 16px; border-top: 1px solid var(--border); vertical-align: middle; }
table.table tbody tr:hover { background: #FAFBFC; }
table.table tbody tr.clickable { cursor: pointer; }
table.table tbody tr.clickable:hover { background: var(--primary-tint); }
table.table tbody tr.selected { background: var(--primary-tint); box-shadow: inset -3px 0 0 var(--primary); }
.cell-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cell-main .t { font-weight: 600; }
.cell-main .s { font-size: 12px; color: var(--muted); }
.job-no { font-family: var(--font-mono); font-weight: 600; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }

/* SLA bar */
.sla { display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
.sla-track { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.sla-track span { display: block; height: 100%; border-radius: 3px; background: var(--primary); }
.sla-text { font-size: 12px; color: var(--text-2); }
.sla-warn .sla-track span { background: var(--warn); } .sla-warn .sla-text { color: var(--warn-fg); }
.sla-late .sla-track span, .sla-escalated .sla-track span { background: var(--crit); } .sla-late .sla-text, .sla-escalated .sla-text { color: var(--crit-fg); }
.sla-idle .sla-track span { background: var(--idle); }

/* Board */
.board { display: grid; grid-template-columns: repeat(6, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.board-col { background: #ECEEF2; border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 160px; }
.board-col h3 { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; padding: 2px 4px 6px; }
.board-card { background: #FFFFFF; border-radius: 10px; border: 1px solid var(--border); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; color: var(--text); }
.board-card:hover { border-color: var(--primary); color: var(--text); }

/* Stage chart */
.stage-chart { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; align-items: end; min-height: 190px; }
.stage-bar { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text); text-align: center; min-width: 0; }
.stage-bar:hover { color: var(--primary); }
.stage-bar .bars { width: 100%; max-width: 56px; height: 110px; display: flex; flex-direction: column; justify-content: flex-end; }
.stage-bar .bars span { display: block; width: 100%; }
.stage-bar .bars .late { background: var(--crit); border-radius: 6px 6px 0 0; }
.stage-bar .bars .okp { background: var(--primary); }
.stage-bar .bars .okp.cond { background: #9DBCF2; }
.stage-bar .bars .zero { height: 3px; background: #E4E7EC; border-radius: 2px; }
.stage-bar .n { font-family: var(--font); font-size: 18px; font-weight: 600; }
.stage-bar .lt { font-size: 11.5px; color: var(--crit-fg); font-weight: 600; }
.stage-bar .nm { font-size: 12px; color: var(--muted); line-height: 1.4; min-height: 34px; }
.legend { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* Alerts / activity */
.alert-item { display: flex; gap: 12px; padding: 12px; border-radius: 12px; }
.alert-item .ic { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.alert-item .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.alert-item .tx strong { font-size: 13.5px; }
.alert-item .tx span { font-size: 12.5px; color: var(--muted); }
.alert-item .tx a { font-size: 12.5px; font-weight: 600; }
.activity { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.activity:last-child { border-bottom: 0; }
.activity .time { font-family: var(--font-mono); font-size: 12px; color: var(--muted); width: 48px; flex-shrink: 0; }
.activity .tx { flex-grow: 1; font-size: 13.5px; min-width: 0; }
.activity .via { font-size: 12px; color: var(--faint); white-space: nowrap; }

/* Stepper */
.stepper { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(96px, 1fr); overflow-x: auto; padding: 4px 0; }
.step { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; position: relative; padding: 0 4px; }
.step .line { position: absolute; top: 17px; height: 2px; width: 50%; background: #DDE1E7; }
.step .line.in { right: 0; }
.step .line.out { left: 0; }
.step .line.done { background: var(--primary); }
.step .circle { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13.5px; background: #FFFFFF; color: #6B7480; border: 1.5px solid var(--border-strong); }
.step.done .circle { background: var(--primary); color: #FFFFFF; border: 0; }
.step.done.cond .circle { background: #6E9BEA; border: 2px dashed #FFFFFF; }
.step.current .circle { background: #FFFFFF; color: var(--primary); border: 3px solid var(--primary); box-shadow: var(--ring); }
.step.skip .circle { color: var(--warn-fg); border: 1.5px dashed #D9B36B; }
.step .nm { font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.step.current .nm { font-weight: 700; color: var(--primary-900); }
.step.skip .nm, .step.todo .nm { color: var(--muted); }
.step .meta { font-size: 11.5px; color: var(--muted); }

/* Facts */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fact .k { font-size: 12px; color: var(--muted); }
.fact .v { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }

/* Requirements */
.req-list { display: flex; flex-direction: column; gap: 6px; }
.req { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 12px; border-radius: 10px; background: var(--bg); font-size: 13.5px; }
.req .ic { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #FFFFFF; background: var(--border-strong); }
.req.ok .ic { background: var(--ok); }
.req.miss { background: var(--crit-bg); }
.req.miss .ic { background: var(--crit); }
.req .label { flex-grow: 1; }
.req .detail { font-size: 12px; color: var(--muted); }

/* Clocks */
.clocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.clock { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.clock .k { font-size: 12px; color: var(--muted); font-weight: 600; }
.clock .v { font-size: 14px; font-weight: 700; }
.clock .bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.clock .bar span { display: block; height: 100%; border-radius: 3px; }
.clock .d { font-size: 12px; color: var(--muted); line-height: 1.5; }
.clock.ok .v { color: var(--ok-fg); } .clock.ok .bar span { background: var(--ok); }
.clock.warn .v { color: var(--warn-fg); } .clock.warn .bar span { background: var(--warn); }
.clock.crit .v { color: var(--crit-fg); } .clock.crit .bar span { background: var(--crit); }
.clock.info .v { color: var(--info-fg); } .clock.info .bar span { background: var(--info); }
.clock.idle .v { color: var(--idle-fg); } .clock.idle .bar span { background: var(--idle); }
.pill2 { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; border-radius: 10px; min-width: 110px; }
.pill2 strong { font-size: 12.5px; }
.pill2 span { font-size: 11.5px; opacity: 0.9; }
.cnt-card { border: 1px solid var(--border); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.cnt-card .head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.events-line { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.events-line .ev { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.events-line .ev i { height: 4px; border-radius: 2px; background: #DDE1E7; }
.events-line .ev.done i { background: var(--primary); }
.events-line .ev b { font-weight: 600; }
.events-line .ev span { color: var(--muted); }

/* Timeline */
.timeline { display: flex; flex-direction: column; }
.tl-item { display: grid; grid-template-columns: 92px 18px minmax(0, 1fr); gap: 10px; padding: 8px 0; }
.tl-item .when { font-family: var(--font-mono); font-size: 12px; color: var(--muted); direction: ltr; text-align: left; padding-top: 2px; }
.tl-item .dotcol { display: flex; flex-direction: column; align-items: center; }
.tl-item .dotcol i { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.tl-item .dotcol b { flex-grow: 1; width: 2px; background: var(--line); margin-top: 4px; }
.tl-item .body { display: flex; flex-direction: column; gap: 2px; }
.tl-item .body .ty { font-size: 11.5px; font-weight: 700; }
.tl-item .body .tx { font-size: 13.5px; }
.tl-item .body .by { font-size: 12px; color: var(--muted); }

/* Doc list */
.doc-row { display: grid; grid-template-columns: minmax(0, 1.6fr) 90px minmax(0, 1fr) 110px 128px auto; gap: 12px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.doc-row.head { background: var(--bg); font-size: 13px; font-weight: 700; color: var(--text); border-bottom: 0; }
.doc-row:last-child { border-bottom: 0; }
.drop { border: 1.5px dashed var(--border-strong); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--muted); cursor: pointer; background: #FAFBFC; transition: border-color 0.12s, background 0.12s; }
.drop:hover { border-color: var(--primary); }
.drop.over { border-color: var(--primary); background: var(--primary-tint); }
.drop strong { color: var(--text); }
.progress { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--primary); width: 0; transition: width 0.2s; }

/* List panel (clients / docs) */
.list-panel { display: flex; flex-direction: column; gap: 6px; }
.list-item { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: #FFFFFF; cursor: pointer; text-align: right; transition: border-color 0.12s, background 0.12s; }
.list-item:hover { border-color: var(--border-strong); }
.list-item.on { border-color: var(--primary); background: var(--primary-tint); }
.list-item .t { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.list-item .s { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }

/* Matrix */
.matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.matrix th { font-weight: 700; color: var(--text); padding: 8px; text-align: center; white-space: nowrap; }
.matrix th:first-child, .matrix td:first-child { text-align: right; }
.matrix td { padding: 6px 8px; text-align: center; border-top: 1px solid var(--line); }
.matrix td.col-on, .matrix th.col-on { background: var(--primary-tint); }
.cell-code { display: inline-flex; min-width: 38px; height: 24px; align-items: center; justify-content: center; border-radius: 6px; padding: 0 6px; font-weight: 700; }

/* QR */
.qr-box { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.qr-box svg { width: 148px; height: 148px; }
.token { font-family: var(--font-mono); font-size: 13px; letter-spacing: 2px; direction: ltr; }

/* States */
.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 16px; text-align: center; color: var(--muted); font-size: 13px; }
.empty > svg { color: var(--faint); width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--bg); box-sizing: border-box; }
.empty strong { color: var(--text); font-size: 14px; }
.loading-block { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px; color: var(--muted); }
.error-block { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 12px; background: var(--crit-bg); color: var(--crit-fg); }
.error-block div { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; display: inline-block; animation: spin 0.7s linear infinite; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { background: linear-gradient(90deg, #ECEEF2 25%, #F6F7F9 50%, #ECEEF2 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 8px; height: 14px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.later-card { border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; background: #FAFBFC; }
.later-card .tag { align-self: flex-start; }

/* Dialog */
.dialog { border: 0; border-radius: 16px; padding: 0; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); box-shadow: 0 24px 64px rgba(19, 31, 53, 0.28); color: var(--text); }
.dialog-wide { width: min(820px, calc(100vw - 32px)); }
.dialog::backdrop { background: rgba(19, 31, 53, 0.45); }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 22px 14px; border-bottom: 1px solid var(--border); }
.dialog-head h2 { font-size: 16.5px; }
.dialog-head p { font-size: 13px; color: var(--muted); margin-top: 4px; }
.dialog-head .icon-btn { width: 32px; height: 32px; border-radius: 50%; background: var(--bg); }
.dialog-head .icon-btn:hover { background: var(--primary-soft); }
.dialog-body { padding: 18px 22px 20px; overflow-y: auto; max-height: calc(100vh - 210px); }
.dialog-actions { display: flex; justify-content: flex-start; gap: 10px; padding: 14px 22px 18px; border-top: 1px solid var(--border); background: #FFFFFF; flex-direction: row-reverse; }

/* Toasts */
.toasts { position: fixed; bottom: 20px; left: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 40px)); }
.toast { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; font-size: 13.5px; font-weight: 600; box-shadow: 0 8px 24px rgba(19, 31, 53, 0.16); animation: toast-in 0.2s ease; }
.toast.out { opacity: 0; transform: translateY(8px); transition: all 0.3s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* Label (print) */
.label-sheet { width: 148mm; min-height: 105mm; background: #FFFFFF; border: 1px solid var(--border); border-radius: 8px; padding: 8mm; display: grid; grid-template-columns: minmax(0, 1fr) 42mm; gap: 6mm; margin: 0 auto; }
.label-sheet .l-head { display: flex; align-items: center; gap: 8px; }
.label-sheet .l-head img { height: 14mm; }
.label-sheet .l-no { font-family: var(--font-mono); font-size: 22px; font-weight: 700; direction: ltr; text-align: right; }
.label-sheet .l-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3mm 5mm; font-size: 12px; }
.label-sheet .l-grid b { display: block; font-size: 10.5px; color: var(--muted); font-weight: 600; }
.label-sheet .l-qr { display: flex; flex-direction: column; align-items: center; gap: 2mm; }
.label-sheet .l-qr svg { width: 40mm; height: 40mm; }

@media print {
  body { background: #FFFFFF; }
  .sidebar, .topbar, .no-print, .toasts { display: none !important; }
  .content { padding: 0; }
  .label-sheet { border: 0; border-radius: 0; width: 148mm; height: 105mm; }
}

/* ------------------------------------------------------------------ Responsive */
@media (max-width: 1360px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .layout-split { grid-template-columns: minmax(0, 1fr) 380px; }
}
@media (max-width: 1180px) {
  .layout-main, .layout-split, .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .sticky-side { position: static; }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clocks { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1024px) {
  .sidebar { position: fixed; right: 0; top: 0; z-index: 60; width: 270px; max-width: 82vw; transform: translateX(100%); transition: transform 0.25s ease, box-shadow 0.25s ease; }
  .shell.nav-collapsed .sidebar { display: flex; }
  .shell.nav-open .sidebar { transform: none; box-shadow: -8px 0 24px rgba(0, 0, 0, 0.25); }
  .shell.nav-open::after { content: ''; position: fixed; inset: 0; background: rgba(19, 31, 53, 0.4); z-index: 50; }
  .topbar { padding: 0 16px; }
  .content { padding: 8px 16px 40px; }
  .layout-list { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth-side { display: none; }
  .auth-form { width: 100%; padding: 32px 24px; }
  .env-badge { display: none; }
}
@media (max-width: 640px) {
  .form-grid, .form-grid.cols-2, .grid-2, .grid-3, .grid-4, .facts { grid-template-columns: minmax(0, 1fr); }
  .span-2, .span-3 { grid-column: auto; }
  .kpis { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .topbar .btn span { display: none; }
  .topbar { gap: 8px; }
  .topbar .btn { padding: 0 12px; }
  .doc-row { grid-template-columns: minmax(0, 1fr) auto; }
  .doc-row > :nth-child(2), .doc-row > :nth-child(3), .doc-row > :nth-child(4) { display: none; }
  .events-line { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card { padding: 16px; }
  .card.flush > .card-head { padding: 14px 16px; }
  table.table th, table.table td { padding-left: 12px; padding-right: 12px; }
  .greeting h2 { font-size: 20px; }
  h1 { font-size: 19px; }
}

/* ------------------------------------------------------------------ Batch 1 additions */
button.kpi { font: inherit; text-align: right; cursor: pointer; }
button.kpi:hover { border-color: var(--primary); box-shadow: 0 2px 10px rgba(46, 107, 224, 0.08); }
.kpi.on { border-color: var(--primary); box-shadow: inset 0 -3px 0 var(--primary); }
.seg.wrap { height: auto; flex-wrap: wrap; }
.seg.wrap button { min-height: 34px; flex-grow: 1; }
.kpis.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { .kpis.k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .kpis.k4 { grid-template-columns: minmax(0, 1fr); } }
.label-preview { display: flex; justify-content: center; padding: 12px 0 24px; }
.label-thermal { width: 50mm; height: 25mm; background: #FFFFFF; border: 1px solid var(--border); border-radius: 4px; padding: 1.5mm; display: grid; grid-template-columns: 19mm minmax(0, 1fr); gap: 1.2mm; align-items: center; overflow: hidden; font-size: 6.5pt; line-height: 1.25; color: #000000; }
.label-thermal svg { width: 19mm; height: 19mm; }
.label-thermal > div { overflow: hidden; }
.label-thermal .t-co { font-size: 5pt; color: #333333; white-space: nowrap; overflow: hidden; }
.label-thermal .t-no { font-family: var(--font-mono); font-weight: 700; font-size: 5.9pt; letter-spacing: -0.15pt; direction: ltr; text-align: left; white-space: nowrap; }
.label-thermal .t-cl { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.label-thermal .t-tok { font-family: var(--font-mono); font-size: 5.5pt; direction: ltr; text-align: left; }
.label-preview.thermal { padding: 24px 0 calc(25mm + 32px); }
.label-preview.thermal .label-thermal { transform: scale(2); transform-origin: top center; }
@media print {
  html, body { height: auto; background: #FFFFFF; }
  #main-content, .main, .shell { display: block; min-height: 0 !important; }
  .content { display: block; padding: 0 !important; }
  .label-preview, .label-preview.thermal { padding: 0; display: block; }
  .label-sheet { margin: 0; width: 147mm; height: 104mm; break-inside: avoid; overflow: hidden; }
  .label-preview.thermal .label-thermal { transform: none; border: 0; border-radius: 0; width: 49.6mm; height: 24.6mm; }
}
#main-content:focus { outline: none; }
@media (max-width: 640px) {
  .qr-enroll { flex-direction: column; align-items: stretch; }
  .qr-enroll img, .qr-enroll .qr-img { align-self: center; }
}

/* ------------------------------------------------------------------ Finance (batch 2) */
.num { font-variant-numeric: tabular-nums; white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
td.num, th.num { text-align: left; }
.input.num { text-align: left; }
.chip.t-teal, .banner.t-teal { background: var(--teal-bg); color: var(--teal-fg); }
.layout-3 { display: grid; grid-template-columns: 280px minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
@media (max-width: 1480px) { .layout-3 { grid-template-columns: 250px minmax(0, 1fr) 350px; gap: 16px; } }
@media (max-width: 1180px) { .layout-3 { grid-template-columns: minmax(0, 1fr); } }
.kpi-dark { background: var(--navy); border-color: var(--navy); color: #FFFFFF; }
.kpi-dark .kpi-head { color: var(--side-text); }
.kpi-dark .value { color: #FFFFFF; }
.kpi-dark .value small { color: var(--side-text); }
.kpi-dark .kpi-ic { background: rgba(255, 255, 255, 0.1); color: #FFFFFF; }

.fin-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.fin-tile { padding: 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fin-tile .k { font-size: 12px; color: var(--muted); }
.fin-tile .v { font-family: var(--font); font-size: 18px; font-weight: 600; text-align: right; }
.fin-tile .sub { font-size: 12px; color: var(--muted); }
.fin-tile.dark { background: var(--navy); border-color: var(--navy); }
.fin-tile.dark .k, .fin-tile.dark .sub { color: var(--side-text); }
.fin-tile.dark .v { color: #FFFFFF; }
@media (max-width: 900px) { .fin-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.rcpt { border-radius: 12px; background: #F2F4F7; border: 1px solid var(--border); overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 160px; }
.rcpt-img { display: block; width: 100%; max-height: 320px; object-fit: contain; background: #FFFFFF; }
.rcpt-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px; color: var(--faint); }
.je { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 8px; background: var(--bg); font-size: 13px; }
.je .side { font-weight: 700; font-size: 12px; }
.je .side.dr { color: var(--primary); }
.je .side.cr { color: var(--teal-fg); }

.mobile-form { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.mobile-form .card { gap: 16px; }
.chip-select { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-select button { min-height: 40px; padding: 0 16px; border-radius: 20px; border: 1.5px solid var(--border-strong); background: #FFFFFF; color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.chip-select button:hover:not(.on) { border-color: var(--primary); color: var(--primary); }
.chip-select button.on { background: var(--primary); border-color: var(--primary); color: #FFFFFF; }
.capture { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.capture-btn { width: 100%; min-height: 120px; border: 2px dashed var(--border-strong); border-radius: 14px; background: #FAFBFC; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--navy); font: inherit; cursor: pointer; }
.capture-btn:hover { border-color: var(--primary); color: var(--primary); }
.capture-done { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid #BFE6CF; background: var(--ok-bg); border-radius: 12px; }
.rcpt-thumb { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.result-icon { width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.result-icon.t-warn { background: var(--warn-bg); color: var(--warn-fg); }
.btn-block { width: 100%; justify-content: center; }

.claim-group + .claim-group { border-top: 1px solid var(--border); }
tr.group-row td { background: var(--bg); font-size: 12.5px; padding-top: 8px; padding-bottom: 8px; }
tr.parts-row td { background: #F5F8FE; }

.doc-sheet { background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 16px; position: relative; overflow: hidden; }
.doc-sheet.is-draft::before, .doc-sheet.is-cancelled::before { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) rotate(-24deg); font-size: 96px; font-weight: 700; color: rgba(19, 31, 53, 0.06); pointer-events: none; white-space: nowrap; }
.doc-sheet.is-draft::before { content: 'مسودة'; }
.doc-sheet.is-cancelled::before { content: 'ملغاة'; color: rgba(214, 59, 59, 0.08); }
.doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 14px; border-bottom: 2px solid var(--navy); }
.doc-logo { height: 44px; width: auto; object-fit: contain; align-self: flex-start; margin-bottom: 4px; }
.doc-title { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: left; }
.doc-title strong { font-family: var(--font-head); font-size: 22px; color: var(--navy); }
.doc-title span { font-size: 11px; letter-spacing: 1px; color: var(--muted); }
.doc-title .doc-note { margin-top: 4px; padding: 2px 8px; border-radius: 6px; background: var(--warn-bg); color: var(--warn-fg); font-size: 11.5px; letter-spacing: 0; font-weight: 600; }
.doc-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 12px 14px; background: var(--bg); border-radius: 10px; }
.doc-party { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; }
.doc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.doc-table th { background: var(--navy); color: #FFFFFF; font-weight: 600; font-size: 12px; padding: 8px 10px; text-align: right; }
.doc-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc-table tr.disb td { background: #FAFBFC; }
.doc-table td.num { text-align: left; }
.doc-sums { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.doc-vat { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.doc-vat th { text-align: right; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.doc-vat td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
.doc-totals { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.grand { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 8px; background: var(--navy); color: #FFFFFF; }
.grand strong { color: #FFFFFF; font-size: 16px; }
.doc-foot { color: var(--muted); line-height: 1.8; }
.doc-bank { padding: 8px 12px; border: 1px dashed var(--border-strong); border-radius: 8px; }
.doc-sign { border-top: 1px solid var(--line); padding-top: 10px; }
.doc-sigs { display: flex; justify-content: space-between; gap: 40px; padding-top: 40px; }
.doc-sigs span { flex: 1 1 0; border-top: 1px solid var(--border-strong); padding-top: 6px; font-size: 12px; color: var(--muted); text-align: center; }
@media (max-width: 760px) {
  .doc-sheet { padding: 16px; }
  .doc-head { flex-direction: column; }
  .doc-title { align-items: flex-start; text-align: right; }
  .doc-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc-sums { grid-template-columns: minmax(0, 1fr); }
  .doc-table { font-size: 12px; }
}

.aging-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 110px; gap: 10px; align-items: center; }
.aging-track { height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
.aging-track span { display: block; height: 100%; border-radius: 5px; }
.stmt-table tfoot td { background: var(--bg); border-top: 2px solid var(--border); padding: 12px 16px; }

@media print {
  .layout-main, .layout-split, .layout-3 { display: block; }
  .doc-sheet { border: 0; border-radius: 0; padding: 0; box-shadow: none; }
  .doc-sheet .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .doc-table th, .grand, .kpi-dark { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .doc-table tr { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}

/* Past transactions (المعاملات السابقة) */
.hist-drop { padding: 26px 18px; }
.hist-defaults { margin-top: 14px; gap: 12px; align-items: flex-end; }
.hist-defaults .field { min-width: 170px; }
.hist-list { display: flex; flex-direction: column; }
.hist-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; padding: 16px 22px; border-bottom: 1px solid var(--border); }
.hist-list .hist-row:last-child { border-bottom: 0; }
.hist-meta { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hist-fields { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 12px; align-items: start; }
.hist-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hist-f > span:first-child { font-size: 12px; font-weight: 600; color: var(--muted); }
.hist-fields .input, .hist-table .input { height: 36px; font-size: 13px; padding: 0 10px; }
.hist-fields select.input, .hist-table select.input { padding-left: 28px; background-position: left 8px center; }
.hist-fields textarea.input { height: 58px; min-height: 36px; padding: 6px 10px; font-size: 12.5px; line-height: 1.5; }
.hist-fields .auto { background-color: #EEF4FE; border-color: #BFD3F7; }
.hist-table td { vertical-align: middle; }
.hist-table td:nth-child(3) { min-width: 260px; }
.hist-file { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; text-align: right; }
.hist-summary { gap: 8px; align-items: center; }
.hist-cnt { display: inline-flex; gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; }
.hist-chart { min-height: 160px; }
.hist-reports { gap: 18px; align-items: start; }
@media (max-width: 1280px) { .hist-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .hist-reports { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .hist-row { grid-template-columns: minmax(0, 1fr); }
  .hist-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hist-legend { display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: #EEF4FE; border: 1px solid #BFD3F7; vertical-align: -2px; margin-left: 6px; }