/* ============================================================
   Syrax theme — Shopify-grade polish.
   Emerald Green primary + soft gold accent. Subtle, never flashy.
   Design tokens, typography, components.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Brand */
  --syrax-primary:        #047857;
  --syrax-primary-dark:   #065f46;
  --syrax-primary-darker: #064e3b;
  --syrax-primary-light:  #10b981;
  --syrax-primary-50:     #ecfdf5;
  --syrax-primary-100:    #d1fae5;
  --syrax-gold:           #d4af37;
  --syrax-gold-dark:      #b08a1f;
  --syrax-gold-soft:      #fef9e7;

  /* Neutrals (Shopify-Polaris-inspired) */
  --ink-900: #1a1f2c;
  --ink-800: #2c3344;
  --ink-700: #3f475a;
  --ink-600: #4a5470;
  --ink-500: #6b7388;
  --ink-400: #8a92a6;
  --ink-300: #b0b6c5;
  --ink-200: #d2d6df;
  --ink-100: #e6e8ed;
  --ink-50:  #f4f5f7;
  --ink-25:  #f9fafb;
  --bg:      #f6f7f8;
  --card:    #ffffff;

  /* Semantic */
  --success-50: #ecfdf5; --success-600: #047857; --success-700: #065f46;
  --warn-50:    #fff7ed; --warn-600:    #c2410c; --warn-700:    #9a3412;
  --danger-50:  #fef2f2; --danger-600:  #dc2626; --danger-700:  #b91c1c;
  --info-50:    #eff6ff; --info-600:    #2563eb; --info-700:    #1d4ed8;

  /* Elevation (Shopify-grade subtle shadows) */
  --shadow-xs: 0 1px 0 rgba(22, 29, 37, 0.05);
  --shadow-sm: 0 1px 2px rgba(22, 29, 37, 0.06), 0 1px 1px rgba(22, 29, 37, 0.04);
  --shadow-md: 0 4px 8px -2px rgba(22, 29, 37, 0.08), 0 2px 4px -2px rgba(22, 29, 37, 0.04);
  --shadow-lg: 0 12px 24px -8px rgba(22, 29, 37, 0.12), 0 4px 8px -4px rgba(22, 29, 37, 0.06);
  --shadow-focus: 0 0 0 3px rgba(4, 120, 87, 0.20);

  /* Radius */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;

  /* Spacing scale tokens used in custom components */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem;
}

/* ---------- Base typography ---------- */
html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  background: var(--bg);
  color: var(--ink-800);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

h1, h2, h3, h4 { color: var(--ink-900); letter-spacing: -0.01em; }
h1 { font-size: 1.5rem;  font-weight: 700; line-height: 1.25; }
h2 { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
h3 { font-size: 1rem;    font-weight: 600; }
small, .text-tiny { font-size: 0.75rem; }

a.syrax-link { color: var(--syrax-primary); font-weight: 500; }
a.syrax-link:hover { color: var(--syrax-primary-darker); text-decoration: underline; }

/* ---------- App shell (true fixed-header / split-scroll layout) ----------
   The whole page is one viewport-tall flex column:
     html/body: no scroll at all (scoped to .with-app-shell so login &
                public pages still scroll normally)
     .app-layout: flex column, exactly 100vh tall
     .app-header: fixed at the top, never scrolls
     .app-shell:  flex:1 + overflow:hidden — owns the remaining height
     .app-aside / .app-main: independent overflow:auto scroll regions
   Result: header stays put when scrolling, sidebar scrolls on its own,
   main content scrolls on its own — no page-level scroll bar. */
html.with-app-shell, body.with-app-shell {
  height: 100%; margin: 0; overflow: hidden;
}
.app-layout {
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh;  /* dvh handles iOS toolbar */
}

.app-header {
  flex-shrink: 0;
  background: var(--card);
  border-bottom: 1px solid var(--ink-100);
  z-index: 30;
  backdrop-filter: saturate(180%) blur(6px);
}
/* Header inner content centres at 1440 — overflow handled by header itself */
.app-header > div { max-width: 1440px; margin: 0 auto; }

.app-shell {
  flex: 1; min-height: 0;
  display: flex;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;  /* children own their scrolls */
}

.app-aside {
  width: 240px; flex-shrink: 0;
  background: var(--card);
  border-right: 1px solid var(--ink-100);
  overflow-y: auto;
  padding: var(--sp-4) var(--sp-3);
  /* Auto-hide scrollbar — only visible while hovering the sidebar */
  scrollbar-width: thin; scrollbar-color: transparent transparent;
  transition: scrollbar-color .2s ease;
}
.app-aside:hover { scrollbar-color: var(--ink-300) transparent; }
.app-aside::-webkit-scrollbar { width: 6px; }
.app-aside::-webkit-scrollbar-track { background: transparent; }
.app-aside::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; transition: background .2s ease; }
.app-aside:hover::-webkit-scrollbar-thumb { background: var(--ink-300); }

.app-main {
  flex: 1; min-width: 0;
  overflow-y: auto;
  /* Same auto-hide treatment for the main scroll */
  scrollbar-width: thin; scrollbar-color: transparent transparent;
  transition: scrollbar-color .2s ease;
}
.app-main:hover { scrollbar-color: var(--ink-300) transparent; }
.app-main::-webkit-scrollbar { width: 8px; }
.app-main::-webkit-scrollbar-track { background: transparent; }
.app-main::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; transition: background .2s ease; }
.app-main:hover::-webkit-scrollbar-thumb { background: var(--ink-300); }

.app-main-inner {
  padding: var(--sp-6) var(--sp-8);
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

/* ---------- Mobile drawer (hamburger menu) ---------- */
.mobile-drawer {
  position: fixed; left: 0; top: 0; bottom: 0;
  width: 280px; max-width: 85vw;
  background: var(--card);
  z-index: 60;
  transform: translateX(-100%);
  transition: transform .25s ease;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
}
.mobile-drawer.open { transform: translateX(0); }
.mobile-drawer .drawer-head {
  padding: var(--sp-4);
  border-bottom: 1px solid var(--ink-100);
  display: flex; justify-content: space-between; align-items: center;
}
.mobile-drawer .drawer-body { flex: 1; padding: var(--sp-3); overflow-y: auto; }
.mobile-drawer .drawer-foot {
  padding: var(--sp-3);
  border-top: 1px solid var(--ink-100);
  background: var(--ink-25);
}

.drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 55;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }

.hamburger-btn {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-md); background: transparent;
  border: 1px solid transparent; color: var(--ink-700);
  font-size: 1.25rem; cursor: pointer;
  transition: background .1s ease;
}
.hamburger-btn:hover { background: var(--ink-100); }

/* Sidebar is shown ONLY at lg+ (≥1024). Below that = hamburger + drawer. */
@media (min-width: 1024px) {
  .hamburger-btn, .mobile-drawer, .drawer-backdrop { display: none !important; }
}

@media (max-width: 1023.98px) {
  .app-aside { display: none; }
  .app-main-inner { padding: var(--sp-5) var(--sp-6); padding-bottom: 5rem; }
}

@media (max-width: 767.98px) {
  .app-main-inner { padding: var(--sp-4); padding-bottom: 5rem; }
  .app-header > div { padding: 0.55rem 0.85rem !important; gap: 0.5rem !important; }
}

/* ---------- Cards ---------- */
.syrax-card {
  background: var(--card);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
}
.syrax-card.padded { padding: var(--sp-6); }
.syrax-card-header {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--ink-100);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}
.syrax-card-header h2 { margin: 0; }
.syrax-card-body { padding: var(--sp-5); }
.syrax-card-section + .syrax-card-section { border-top: 1px solid var(--ink-100); }

/* ---------- KPI tiles ---------- */
.syrax-kpi {
  background: var(--card);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow .15s ease, transform .15s ease;
}
.syrax-kpi:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.syrax-kpi .l {
  font-size: 0.7rem; color: var(--ink-500);
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.syrax-kpi .v {
  font-size: 1.625rem; font-weight: 700; color: var(--ink-900); line-height: 1.1;
}
.syrax-kpi .sub { font-size: 0.75rem; color: var(--ink-500); }
.syrax-kpi .icon {
  width: 32px; height: 32px; border-radius: var(--r-md);
  background: var(--syrax-primary-50); color: var(--syrax-primary);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-1);
}
.syrax-kpi.compact { padding: var(--sp-3) var(--sp-4); }
.syrax-kpi.compact .v { font-size: 1.25rem; }
.syrax-kpi.compact .l { font-size: 0.65rem; }

/* Compact density modifier for tables — denser rows for embedded tables
   inside cards (e.g. recent-orders panel on the customer detail page). */
.syrax-table.compact th,
.syrax-table.compact td { padding: 0.4rem 0.65rem; font-size: 0.85rem; }

/* ---------- Buttons (gradient pills) ---------- */
.syrax-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.55rem 1rem;
  font-size: 0.875rem; font-weight: 700;
  border-radius: 999px;
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--syrax-primary) 0%, var(--syrax-primary-dark) 100%);
  color: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,0.10), 0 4px 12px -6px rgba(4,120,87,0.45);
  transition: transform .12s ease, box-shadow .15s ease, filter .12s ease;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.syrax-btn:hover  { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(15,23,42,0.12), 0 10px 22px -8px rgba(4,120,87,0.55); filter: brightness(1.04); }
.syrax-btn:active { transform: translateY(0); }
.syrax-btn:focus  { outline: none; box-shadow: var(--shadow-focus), 0 4px 12px -6px rgba(4,120,87,0.45); }

.syrax-btn.ghost   {
  background: var(--card); color: var(--ink-800);
  border-color: var(--ink-200);
  box-shadow: 0 1px 2px rgba(15,23,42,0.05);
}
.syrax-btn.ghost:hover { background: var(--ink-50); color: var(--ink-900); border-color: var(--ink-300); }

.syrax-btn.subtle  {
  background: var(--ink-50); color: var(--ink-800); border-color: transparent;
  box-shadow: none;
}
.syrax-btn.subtle:hover { background: var(--ink-100); }

.syrax-btn.gold    {
  background: linear-gradient(135deg, var(--syrax-gold) 0%, var(--syrax-gold-dark) 100%);
  color: #1f2937;
  box-shadow: 0 1px 2px rgba(15,23,42,0.10), 0 4px 12px -6px rgba(176,138,31,0.50);
}
.syrax-btn.gold:hover { color: #fff; }

.syrax-btn.danger  {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  box-shadow: 0 1px 2px rgba(15,23,42,0.10), 0 4px 12px -6px rgba(220,38,38,0.45);
}

.syrax-btn.danger-ghost {
  background: var(--card); color: var(--danger-600);
  border-color: #fecaca;
  box-shadow: 0 1px 2px rgba(15,23,42,0.05);
}
.syrax-btn.danger-ghost:hover { background: var(--danger-50); border-color: var(--danger-600); }

.syrax-btn.warn {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  box-shadow: 0 1px 2px rgba(15,23,42,0.10), 0 4px 12px -6px rgba(217,119,6,0.45);
}
.syrax-btn.info {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 1px 2px rgba(15,23,42,0.10), 0 4px 12px -6px rgba(37,99,235,0.45);
}

.syrax-btn.sm  { padding: 0.38rem 0.8rem;  font-size: 0.8rem; }
.syrax-btn.lg  { padding: 0.75rem 1.4rem;  font-size: 0.95rem; }

.syrax-btn[disabled], .syrax-btn:disabled {
  opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none;
}

/* ---------- Inputs ---------- */
.syrax-input, .syrax-select, .syrax-textarea {
  width: 100%;
  padding: 0.55rem 0.75rem;
  font-size: 0.9rem;
  color: var(--ink-900);
  background: var(--card);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.syrax-input::placeholder { color: var(--ink-400); }
.syrax-input:hover, .syrax-select:hover, .syrax-textarea:hover { border-color: var(--ink-300); }
.syrax-input:focus, .syrax-select:focus, .syrax-textarea:focus {
  outline: none; border-color: var(--syrax-primary);
  box-shadow: var(--shadow-focus);
}
.syrax-textarea { min-height: 80px; resize: vertical; }
.syrax-select  { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%236b7388' d='M3 4.5L6 7.5L9 4.5Z'/></svg>"); background-repeat: no-repeat; background-position: right 0.6rem center; padding-right: 1.8rem; }

.syrax-input.error { border-color: var(--danger-600); }
.syrax-input.error:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15); }

/* Field wrapper used by form macro */
.field-label {
  display: block; font-size: 0.75rem; font-weight: 600;
  color: var(--ink-700); margin-bottom: 0.3rem;
  text-transform: none; letter-spacing: 0;
}
.field-help { font-size: 0.72rem; color: var(--ink-500); margin-top: 0.3rem; }
.field-error { font-size: 0.72rem; color: var(--danger-600); margin-top: 0.3rem; font-weight: 500; }
.field-row { margin-bottom: var(--sp-4); }
.field-required::after { content: " *"; color: var(--danger-600); }

input[type="checkbox"].syrax-check,
input[type="radio"].syrax-radio {
  width: 1rem; height: 1rem;
  accent-color: var(--syrax-primary);
}

/* ---------- Badges (pills) ---------- */
.syrax-badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.2rem 0.65rem;
  border-radius: 9999px;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.015em;
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.syrax-badge.hub      { background: linear-gradient(135deg, #d1fae5, #ecfdf5); color: var(--syrax-primary-darker); border-color: #a7f3d0; }
.syrax-badge.vendor   { background: linear-gradient(135deg, #fef3c7, #fffbeb); color: #92610a; border-color: #fde68a; }
.syrax-badge.success  { background: linear-gradient(135deg, #d1fae5, #ecfdf5); color: var(--success-700); border-color: #a7f3d0; }
.syrax-badge.warn     { background: linear-gradient(135deg, #fef3c7, #fff7ed); color: var(--warn-700); border-color: #fde68a; }
.syrax-badge.danger   { background: linear-gradient(135deg, #fee2e2, #fef2f2); color: var(--danger-700); border-color: #fecaca; }
.syrax-badge.muted    { background: linear-gradient(135deg, #e9edf2, #f4f5f7); color: var(--ink-700); border-color: var(--ink-150, #d2d6df); }
.syrax-badge.info     { background: linear-gradient(135deg, #dbeafe, #eff6ff); color: var(--info-700); border-color: #bfdbfe; }
.syrax-badge.gold     { background: linear-gradient(135deg, #fde68a, #fef9e7); color: #8a6914; border-color: #fcd34d; }
.syrax-badge .dot { width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow: 0 0 0 2px rgba(255,255,255,0.5); }

/* ---------- Role chip (header identity) ---------- */
.role-chip {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.32rem 0.85rem 0.32rem 0.4rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--syrax-primary-darker) 0%, var(--syrax-primary) 80%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 8px -2px rgba(4,120,87,0.45);
  color: #fff;
}
.role-chip .rc-ico {
  width: 26px; height: 26px; border-radius: 999px;
  background: rgba(255,255,255,0.16);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.8rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22);
}
.role-chip .rc-label { line-height: 1.05; }
.role-chip .rc-label .rc-org {
  font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.75); font-weight: 700;
}
.role-chip .rc-label .rc-role {
  font-size: 0.78rem; font-weight: 700; color: #fff;
}
.role-chip.gold {
  background: linear-gradient(135deg, #8a6914 0%, var(--syrax-gold) 85%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 2px 8px -2px rgba(176,138,31,0.45);
}

/* ---------- Vendor switcher (header) ---------- */
.vswitch-btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.32rem 0.7rem 0.32rem 0.4rem;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--ink-150, var(--ink-200));
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.vswitch-btn:hover { border-color: var(--syrax-primary); box-shadow: var(--shadow-sm); }
.vswitch-btn .vs-ico {
  width: 26px; height: 26px; border-radius: 999px;
  background: var(--syrax-primary-50); color: var(--syrax-primary-dark);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.8rem;
}
.vswitch-btn .vs-label { line-height: 1.05; text-align: left; }
.vswitch-btn .vs-label .vs-cap {
  font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-400); font-weight: 700;
}
.vswitch-btn .vs-label .vs-val {
  font-size: 0.78rem; font-weight: 700; color: var(--ink-900);
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vswitch-btn .vs-chev { color: var(--ink-400); font-size: 0.6rem; }

.vswitch-menu {
  position: absolute; right: 0; margin-top: 0.5rem; width: 300px;
  background: var(--card); border: 1px solid var(--ink-100);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  overflow: hidden; z-index: 50;
}
.vswitch-menu .vm-head {
  padding: 0.6rem 1rem;
  background: var(--ink-25);
  border-bottom: 1px solid var(--ink-100);
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-500); font-weight: 700;
}
.vswitch-menu .vm-list { max-height: 320px; overflow-y: auto; }
.vswitch-row {
  display: flex; align-items: center; gap: 0.7rem;
  width: 100%; text-align: left;
  padding: 0.6rem 1rem;
  background: transparent; border: 0; cursor: pointer;
  transition: background .1s ease;
}
.vswitch-row:hover { background: var(--syrax-primary-50); }
.vswitch-row + .vswitch-row { border-top: 1px solid var(--ink-50); }
.vswitch-row .vr-av {
  width: 32px; height: 32px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.8rem; flex-shrink: 0;
  background: var(--syrax-primary-100); color: var(--syrax-primary-darker);
}
.vswitch-row .vr-av.hub-av { background: var(--syrax-primary-darker); color: #fff; }
.vswitch-row .vr-name { font-size: 0.85rem; font-weight: 600; color: var(--ink-900); }
.vswitch-row .vr-meta { font-size: 0.68rem; color: var(--ink-400); }
.vswitch-row .vr-check { margin-left: auto; color: var(--syrax-primary); font-weight: 800; }

/* ---------- Status flag dots (simple red/yellow/green signals) ---------- */
.flag-wrap {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.72rem; font-weight: 600; color: var(--ink-600);
  white-space: nowrap;
}
.flag-dot {
  width: 11px; height: 11px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}
.flag-dot.green { background: #059669; box-shadow: 0 0 0 3px rgba(5,150,105,0.16); }
.flag-dot.amber { background: #d97706; box-shadow: 0 0 0 3px rgba(217,119,6,0.18); }
.flag-dot.red   { background: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,0.16); }
.flag-dot.grey  { background: #94a3b8; box-shadow: 0 0 0 3px rgba(148,163,184,0.18); }
.flag-dot.blue  { background: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.16); }

/* Clickable table rows */
tr[data-href] { cursor: pointer; }
tr[data-href]:hover td { background: var(--syrax-primary-50) !important; }

/* "⋯ More" dropdown for secondary page actions */
.more-menu { position: relative; display: inline-block; }
.more-btn {
  width: 38px; height: 38px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--ink-200);
  color: var(--ink-700); cursor: pointer;
  box-shadow: var(--shadow-xs);
  font-size: 1.1rem; line-height: 1;
  transition: background .12s ease, border-color .12s ease, transform .06s ease;
}
.more-btn:hover { background: var(--ink-50); border-color: var(--ink-300); color: var(--ink-900); }
.more-btn:active { transform: translateY(1px); }
.more-panel {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 240px; z-index: 40;
  background: var(--card); border: 1px solid var(--ink-100);
  border-radius: var(--r-md); padding: 0.35rem;
  box-shadow: var(--shadow-lg);
}
.more-panel a, .more-panel button, .more-panel form > button {
  display: flex; align-items: center; gap: 0.55rem; width: 100%;
  padding: 0.55rem 0.7rem; border-radius: var(--r-sm);
  background: transparent; border: 0; cursor: pointer;
  text-align: left; font-size: 0.85rem; font-weight: 500;
  color: var(--ink-800); transition: background .1s ease, color .1s ease;
}
.more-panel a:hover, .more-panel button:hover, .more-panel form > button:hover {
  background: var(--ink-50); color: var(--ink-900);
}
.more-panel .danger { color: #b91c1c; }
.more-panel .danger:hover { background: #fef2f2; color: #991b1b; }
.more-panel .sep { height: 1px; background: var(--ink-100); margin: 0.3rem 0.2rem; }

/* Icon-only action chips (compact row actions) */
.row-icons {
  display: inline-flex; align-items: center; gap: 0.3rem; flex-wrap: nowrap;
}
.row-icons .ric {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--ink-50); color: var(--ink-700);
  border: 1px solid var(--ink-100);
  font-size: 0.95rem; line-height: 1;
  transition: transform .1s ease, box-shadow .1s ease, background .1s ease;
}
.row-icons .ric:hover {
  transform: translateY(-1px); box-shadow: var(--shadow-sm);
}
.row-icons .ric.view   { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.row-icons .ric.view:hover   { background: #d1fae5; }
.row-icons .ric.edit   { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.row-icons .ric.edit:hover   { background: #dbeafe; }
.row-icons .ric.adjust { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.row-icons .ric.adjust:hover { background: #fef3c7; }
.row-icons .ric.give   { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.row-icons .ric.give:hover   { background: #ede9fe; }
.row-icons .ric.danger { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.row-icons .ric.danger:hover { background: #fee2e2; }
.row-icons .ric[data-tip] { position: relative; }
.row-icons .ric[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--ink-900); color: #fff;
  font-size: 0.65rem; font-weight: 600;
  padding: 0.25rem 0.5rem; border-radius: var(--r-sm);
  white-space: nowrap; pointer-events: none; z-index: 10;
  box-shadow: var(--shadow-md);
}

/* ---------- Tables ---------- */
.syrax-table-wrap {
  background: var(--card); border: 1px solid var(--ink-100);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-xs);
  position: relative;
}
.scroll-x, .syrax-table-wrap .scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Subtle right-edge fade hinting at horizontal scroll on small screens. */
@media (max-width: 768px) {
  .syrax-table-wrap::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0;
    width: 18px; pointer-events: none;
    background: linear-gradient(to right, transparent, rgba(0,0,0,0.04));
  }
}
.syrax-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; min-width: 540px; }
/* Tables that use responsive column hiding (e.g. `hidden sm:table-cell`) don't
   need the 540px min-width — the visible columns naturally fit narrower screens. */
.syrax-table.responsive-stack { min-width: 0; }
.syrax-table th {
  text-align: left;
  background: var(--ink-25);
  color: var(--ink-600);
  font-weight: 600; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--ink-100);
}
.syrax-table td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--ink-100);
  color: var(--ink-800);
  vertical-align: middle;
}
.syrax-table tr:last-child td { border-bottom: none; }
.syrax-table tbody tr { transition: background .1s ease; }
.syrax-table tbody tr:hover { background: var(--ink-25); }

/* ---- Snooze dropdown (used inside row-actions in CRM task list) ----
   A pop-over menu anchored to the snooze chip. The chip itself is just
   a row-action button; this wraps it so the menu overlays without
   disturbing the surrounding row layout. */
.snooze-wrap { position: relative; display: inline-block; }
.snooze-menu {
  position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 168px; z-index: 30;
  background: var(--card); border: 1px solid var(--ink-200);
  border-radius: var(--r-md); box-shadow: var(--shadow-md);
  padding: 0.3rem; display: flex; flex-direction: column; gap: 2px;
}
.snooze-menu-right { left: auto; right: 0; }
.snooze-menu form { margin: 0; }
.snooze-menu button.snooze-opt {
  width: 100%; text-align: left; padding: 0.45rem 0.6rem;
  background: transparent; border: 0; border-radius: var(--r-sm);
  font-size: 0.85rem; cursor: pointer; color: var(--ink-700);
}
.snooze-menu button.snooze-opt:hover { background: var(--syrax-primary-50); color: var(--syrax-primary); }
.snooze-custom { border-top: 1px solid var(--ink-100); padding: 0.4rem 0.6rem 0.2rem; margin-top: 0.2rem; }
.snooze-custom-label { display: block; font-size: 0.7rem; text-transform: uppercase; color: var(--ink-500); letter-spacing: 0.04em; font-weight: 600; margin-bottom: 4px; }
.snooze-custom-row { display: flex; gap: 0.35rem; align-items: center; }
.snooze-custom-row .snooze-date { padding: 0.35rem 0.5rem; font-size: 0.8rem; flex: 1; min-width: 0; }

/* ---- Filter chips (priority bar on tasks list) ----
   Pill-shaped quick-toggle buttons. Variants (danger/warn/info/muted)
   tint the resting state; .active makes the chip a filled state to
   show the current selection. */
.syrax-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.32rem 0.7rem; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600; line-height: 1;
  background: var(--ink-50); color: var(--ink-700);
  border: 1px solid var(--ink-100);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.syrax-chip:hover { background: var(--ink-100); }
.syrax-chip.active { background: var(--syrax-primary); color: white; border-color: var(--syrax-primary); }
.syrax-chip.danger { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.syrax-chip.danger.active { background: #b91c1c; color: white; border-color: #b91c1c; }
.syrax-chip.warn   { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.syrax-chip.warn.active { background: #b45309; color: white; border-color: #b45309; }
.syrax-chip.info   { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.syrax-chip.info.active { background: #1d4ed8; color: white; border-color: #1d4ed8; }
.syrax-chip.muted  { background: var(--ink-50); color: var(--ink-600); }
.syrax-chip.muted.active { background: var(--ink-700); color: white; border-color: var(--ink-700); }

[x-cloak] { display: none !important; }

/* Whole-row clickable: cursor pointer + a stronger hover state so the
   affordance is obvious. Used together with data-href + a small inline
   JS handler that routes the click to the row's target URL. */
.syrax-table tbody tr[data-href] { cursor: pointer; }
.syrax-table tbody tr[data-href]:hover { background: var(--syrax-primary-50); }
.syrax-table tbody tr[data-href]:focus-visible {
  outline: 2px solid var(--syrax-primary); outline-offset: -2px;
}
.m-card[data-href] { cursor: pointer; transition: background .12s ease, transform .12s ease; }
.m-card[data-href]:hover { background: var(--ink-25); }
.m-card[data-href]:active { transform: scale(0.99); }
.m-card[data-href]:focus-visible {
  outline: 2px solid var(--syrax-primary); outline-offset: 2px;
}
.syrax-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.syrax-table .mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; color: var(--ink-600); }

/* Row actions — colourful chip buttons */
.row-actions { display: inline-flex; gap: 0.35rem; flex-wrap: wrap; }
.row-actions a, .row-actions button,
a.row-actions, button.row-actions {
  display: inline-flex; align-items: center; gap: 0.28rem;
  font-size: 0.73rem; font-weight: 600; line-height: 1;
  padding: 0.34rem 0.72rem; border-radius: 999px;
  background: var(--ink-50); color: var(--ink-700);
  border: 1px solid var(--ink-100);
  cursor: pointer; white-space: nowrap;
  transition: transform .1s ease, box-shadow .1s ease, background .1s ease;
}
.row-actions a:hover, .row-actions button:hover,
a.row-actions:hover, button.row-actions:hover {
  transform: translateY(-1px); box-shadow: var(--shadow-sm);
  background: var(--ink-100); color: var(--ink-900);
}

/* Per-action colour variants */
.row-actions .act-view, .act-view {
  background: #ecfdf5 !important; color: #065f46 !important; border-color: #a7f3d0 !important;
}
.row-actions .act-view:hover, .act-view:hover { background: #d1fae5 !important; }

.row-actions .act-edit, .act-edit {
  background: #eff6ff !important; color: #1d4ed8 !important; border-color: #bfdbfe !important;
}
.row-actions .act-edit:hover, .act-edit:hover { background: #dbeafe !important; }

.row-actions .act-adjust, .act-adjust {
  background: #fffbeb !important; color: #b45309 !important; border-color: #fde68a !important;
}
.row-actions .act-adjust:hover, .act-adjust:hover { background: #fef3c7 !important; }

.row-actions .act-give, .act-give {
  background: #f5f3ff !important; color: #6d28d9 !important; border-color: #ddd6fe !important;
}
.row-actions .act-give:hover, .act-give:hover { background: #ede9fe !important; }

.row-actions .act-danger, .act-danger {
  background: #fef2f2 !important; color: #b91c1c !important; border-color: #fecaca !important;
}
.row-actions .act-danger:hover, .act-danger:hover { background: #fee2e2 !important; }

.row-actions .danger { color: inherit; }

/* ---------- Sidebar / nav ---------- */
.nav-section-label {
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-400); font-weight: 700;
  padding: 0.4rem 0.75rem; margin-top: 0.7rem;
}
.nav-link {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.5rem 0.75rem; border-radius: var(--r-md);
  color: var(--ink-700); font-weight: 500; font-size: 0.875rem;
  margin: 1px 0; transition: background .1s ease, color .1s ease;
}
.nav-link .icon { width: 18px; text-align: center; opacity: 0.7; }
.nav-link:hover { background: var(--ink-50); color: var(--ink-900); }
.nav-link:hover .icon { opacity: 1; }
.nav-link.active {
  background: var(--syrax-primary-50); color: var(--syrax-primary-darker);
  font-weight: 600;
}
.nav-link.active .icon { color: var(--syrax-primary); opacity: 1; }
.nav-link.disabled { color: var(--ink-400); cursor: default; }
.nav-link.disabled:hover { background: transparent; color: var(--ink-400); }

/* ---------- Toasts (flash messages) ---------- */
.syrax-toast-area {
  position: fixed; top: 64px; right: 24px;
  z-index: 60;
  display: flex; flex-direction: column; gap: 0.5rem;
  width: min(420px, calc(100vw - 48px));
  pointer-events: none;
}
.syrax-toast {
  background: var(--card);
  border: 1px solid var(--ink-100);
  border-left: 3px solid var(--ink-300);
  border-radius: var(--r-md);
  padding: 0.7rem 0.85rem;
  font-size: 0.875rem; font-weight: 500;
  display: flex; align-items: flex-start; gap: 0.6rem;
  box-shadow: var(--shadow-lg);
  color: var(--ink-800);
  pointer-events: auto;
  position: relative; overflow: hidden;
}
.syrax-toast .t-icon {
  width: 22px; height: 22px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; font-weight: 700; font-size: 0.75rem;
  background: var(--ink-100); color: var(--ink-700);
}
.syrax-toast .t-body { flex: 1; line-height: 1.4; }
.syrax-toast .t-close {
  flex-shrink: 0; background: transparent; border: 0; cursor: pointer;
  color: var(--ink-400); padding: 2px 5px; border-radius: var(--r-sm);
  font-size: 0.7rem; transition: background .1s ease, color .1s ease;
}
.syrax-toast .t-close:hover { background: var(--ink-100); color: var(--ink-700); }

.syrax-toast.t-success    { border-left-color: var(--success-600); }
.syrax-toast.t-success .t-icon { background: var(--success-50); color: var(--success-700); }
.syrax-toast.t-error      { border-left-color: var(--danger-600); }
.syrax-toast.t-error .t-icon { background: var(--danger-50); color: var(--danger-700); }
.syrax-toast.t-warn       { border-left-color: var(--warn-600); }
.syrax-toast.t-warn .t-icon { background: var(--warn-50); color: var(--warn-700); }
.syrax-toast.t-info       { border-left-color: var(--info-600); }
.syrax-toast.t-info .t-icon { background: var(--info-50); color: var(--info-700); }

@media (max-width: 640px) {
  .syrax-toast-area { top: 12px; right: 12px; left: 12px; width: auto; }
}

/* ---------- Mobile card list (alternative to wide tables on phone) ---------- */
.mobile-card-list { display: none; gap: 0.6rem; }
@media (max-width: 640px) {
  .mobile-card-list { display: grid; }
  .desktop-only-table { display: none; }
}
.m-card {
  background: var(--card);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  padding: 0.85rem 1rem;
  box-shadow: var(--shadow-xs);
}
.m-card .m-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 0.5rem; margin-bottom: 0.4rem;
}
.m-card .m-title {
  font-weight: 600; color: var(--ink-900);
  font-size: 0.95rem; line-height: 1.3;
}
.m-card .m-sub {
  font-size: 0.72rem; color: var(--ink-400);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.m-card .m-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 0.6rem;
  font-size: 0.78rem; color: var(--ink-700);
  padding: 0.5rem 0; margin: 0.2rem 0 0.6rem;
  border-top: 1px solid var(--ink-50);
}
.m-card .m-meta .lbl {
  display: block; color: var(--ink-400);
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 1px; font-weight: 600;
}
.m-card .m-actions { display: flex; gap: 0.4rem; }
.m-card .m-actions .syrax-btn { flex: 1; justify-content: center; }

/* ---------- Sticky save bar (form bottom) ---------- */
.save-bar {
  position: sticky; bottom: 0;
  background: var(--card);
  border-top: 1px solid var(--ink-100);
  padding: 0.9rem var(--sp-5);
  margin: 0 calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5));
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  display: flex; justify-content: flex-end; gap: 0.6rem;
  box-shadow: 0 -4px 12px -8px rgba(22,29,37,0.08);
  z-index: 10;
}

@media (max-width: 640px) {
  .save-bar { flex-direction: column-reverse; padding: 0.75rem; bottom: 4.2rem; }
  .save-bar .syrax-btn { width: 100%; justify-content: center; padding: 0.7rem; font-size: 0.95rem; }
}

/* ---------- Page header ---------- */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap;
}
.page-head .title { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.page-head .title h1 { margin: 0; word-break: break-word; }
.page-head .title p  { margin: 0; color: var(--ink-500); font-size: 0.875rem; }
.page-head .actions  { display: inline-flex; gap: 0.5rem; flex-wrap: wrap; }

@media (max-width: 640px) {
  .page-head           { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .page-head .actions  { width: 100%; }
  .page-head .actions .syrax-btn { flex: 1 0 auto; justify-content: center; }
}

/* ---------- Breadcrumb ---------- */
.breadcrumb { font-size: 0.78rem; color: var(--ink-500); margin-bottom: 0.4rem; display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; }
.breadcrumb a { color: var(--ink-500); }
.breadcrumb a:hover { color: var(--ink-800); text-decoration: underline; }
.breadcrumb .sep { color: var(--ink-300); }

/* ---------- Empty state ---------- */
.empty {
  padding: var(--sp-10) var(--sp-5);
  text-align: center; color: var(--ink-500);
}
.empty .icon { font-size: 2.25rem; margin-bottom: var(--sp-3); }
.empty h3 { color: var(--ink-700); }

/* ---------- Form section group ---------- */
.form-section {
  border-top: 1px solid var(--ink-100);
  padding-top: var(--sp-5); margin-top: var(--sp-5);
}
.form-section:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.form-section h3 { margin-bottom: 0.2rem; }
.form-section .section-hint { color: var(--ink-500); font-size: 0.78rem; margin-bottom: var(--sp-4); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 1rem; }
.form-grid .field-row.col-span-2 { grid-column: span 2 / span 2; }
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .field-row.col-span-2 { grid-column: auto; }
  .form-section { padding-top: var(--sp-4); margin-top: var(--sp-4); }
}

/* ---------- Avatar / circle ---------- */
.avatar-circle {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--syrax-primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 0.85rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
}

/* ---------- Login screen ---------- */
.login-shell {
  min-height: 100vh;
  background:
    radial-gradient(ellipse at top left,  rgba(4, 120, 87, 0.10), transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(212, 175, 55, 0.12), transparent 50%),
    var(--bg);
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.login-card {
  background: var(--card);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 420px;
  padding: 2rem;
}

/* ---------- Misc helpers ---------- */
.divider { height: 1px; background: var(--ink-100); margin: var(--sp-5) 0; }
.mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; }
.tabular { font-variant-numeric: tabular-nums; }
[x-cloak] { display: none !important; }

/* ---- Vertical activity timeline ----
   Used on the dispatch detail page (and reusable elsewhere). Each
   .tl-item renders an icon on a coloured circle, with a vertical line
   connecting consecutive events. Tone variants tint the icon ring. */
.syrax-timeline { list-style: none; margin: 0; padding: 0; }
.tl-item {
  position: relative;
  display: grid; grid-template-columns: 36px 1fr; gap: 0.6rem;
  padding: 0.7rem 1rem 0.7rem 1rem;
  border-bottom: 1px solid var(--ink-50);
}
.tl-item:last-child { border-bottom: 0; }
.tl-item::before {
  content: ''; position: absolute;
  top: 36px; bottom: -4px; left: calc(1rem + 18px);
  width: 2px; background: var(--ink-100);
}
.tl-item:last-child::before { display: none; }
.tl-icon {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.95rem;
  background: var(--ink-50); border: 2px solid var(--ink-100);
  position: relative; z-index: 1;
}
.tl-body { min-width: 0; }
.tl-title    { font-size: 0.88rem; font-weight: 600; color: var(--ink-900); line-height: 1.3; }
.tl-subtitle { font-size: 0.78rem; color: var(--ink-600); margin-top: 2px; line-height: 1.4; }
.tl-meta     { font-size: 0.7rem; color: var(--ink-400); margin-top: 4px; }
.tl-actor    { color: var(--ink-500); font-weight: 500; }
.tl-item.tl-info    .tl-icon { background: #eff6ff; border-color: #bfdbfe; }
.tl-item.tl-success .tl-icon { background: #ecfdf5; border-color: #a7f3d0; }
.tl-item.tl-warn    .tl-icon { background: #fffbeb; border-color: #fde68a; }
.tl-item.tl-danger  .tl-icon { background: #fef2f2; border-color: #fecaca; }
.tl-item.tl-muted   .tl-icon { background: var(--ink-50); border-color: var(--ink-100); }

/* ---------- Clickable rows (whole row opens the data-href URL) ---------- */
.syrax-table.row-clickable tbody tr[data-href] { cursor: pointer; transition: background-color .12s ease; }
.syrax-table.row-clickable tbody tr[data-href]:hover { background: var(--ink-25); }
.syrax-table.row-clickable tbody tr[data-href]:active { background: var(--ink-50); }

/* ---------- Today board — 2-column split + driver accordions ---------- */
.board-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
}
@media (min-width: 980px) {
  .board-split { grid-template-columns: 1fr 320px; gap: 1.25rem; }
  .board-side { position: sticky; top: 1rem; }
}
.board-main { min-width: 0; }
.board-side { min-width: 0; }

.overall-progress { padding: .9rem 1.1rem; margin-bottom: 1rem; }

/* ---- Today board tabs (Alpine-driven status filter) ---- */
.board-tabs {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin-bottom: 1rem;
}
.bt-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .45rem .75rem;
  background: var(--card);
  border: 1px solid var(--ink-100);
  border-radius: 999px;
  font-size: .78rem; font-weight: 700; color: var(--ink-700);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease, transform .08s ease;
}
.bt-pill:hover { background: var(--ink-25); border-color: var(--ink-200); }
.bt-pill:active { transform: scale(.97); }
.bt-pill .bt-cnt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; padding: 1px 6px;
  background: var(--ink-100); color: var(--ink-700);
  border-radius: 999px;
  font-size: .65rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
/* Active state per tab — colour-coded to match the status palette
   used everywhere else (sched amber, road blue, done green, fail red). */
.bt-pill.active {
  background: linear-gradient(135deg, var(--ink-2, #312e81), var(--ink-1, #1e1b4b));
  border-color: transparent; color: white;
}
.bt-pill.active .bt-cnt { background: rgba(255,255,255,.18); color: white; }
.bt-sched.active   { background: linear-gradient(135deg, #f59e0b, #b45309); }
.bt-road.active    { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.bt-done.active    { background: linear-gradient(135deg, #10b981, #047857); }
.bt-canc.active    { background: linear-gradient(135deg, #ef4444, #991b1b); }

/* ---- Stop audit line — 'Added by … at …' ---- */
.stop-audit {
  font-size: .68rem; color: var(--ink-500); font-weight: 500;
  margin-top: .25rem;
  display: flex; flex-wrap: wrap; gap: .4rem;
}
.stop-audit strong { color: var(--ink-700); font-weight: 700; }

/* ---- Delayed badge — past-due active stops ---- */
.delay-badge {
  display: inline-flex; align-items: center; gap: .2rem;
  margin-left: .35rem;
  padding: .1rem .45rem;
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  color: #991b1b;
  border-radius: 999px;
  font-size: .58rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em;
  border: 1px solid #fca5a5;
  vertical-align: middle;
  white-space: nowrap;
}
[x-cloak] { display: none !important; }

/* ---- Driver accordion ---- */
.driver-acc {
  background: var(--card);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
  margin-bottom: .8rem;
  overflow: hidden;
  transition: box-shadow .15s ease;
}
.driver-acc[open] { box-shadow: var(--shadow-sm); }
.driver-acc-head {
  display: grid;
  grid-template-columns: 16px 1fr auto auto;
  gap: .75rem;
  align-items: center;
  padding: .85rem 1rem;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.driver-acc-head::-webkit-details-marker { display: none; }
.driver-acc-head::marker { content: ''; }
.driver-acc-head:hover { background: var(--ink-25); }
.acc-chevron {
  display: inline-block;
  transition: transform .2s ease;
  color: var(--ink-400);
  font-size: .9rem;
}
.driver-acc[open] .acc-chevron { transform: rotate(90deg); color: var(--ink-700); }

.driver-id { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.d-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #f9a8d4, #fdba74);
  color: #7c2d12; font-weight: 800; font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px -2px rgba(251,113,133,.3), inset 0 1px 1px rgba(255,255,255,.6);
}
.d-avatar.muted {
  background: linear-gradient(135deg, var(--ink-200), var(--ink-300));
  color: var(--ink-700);
  box-shadow: none;
}
.d-meta { min-width: 0; }
.d-name {
  font-weight: 700; color: var(--ink-900); font-size: .92rem; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.d-sub {
  font-size: .68rem; color: var(--ink-500); margin-top: .12rem; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.driver-tags { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }

.driver-progress { min-width: 110px; text-align: right; }
.dp-label { font-size: .7rem; color: var(--ink-600); font-weight: 700; margin-bottom: .25rem; font-variant-numeric: tabular-nums; }
.dp-label.muted { color: var(--ink-400); font-weight: 600; font-style: italic; }
.dp-bar { width: 100%; height: 5px; background: var(--ink-100); border-radius: 999px; overflow: hidden; }
.dp-fill { height: 100%; background: linear-gradient(90deg, #10b981, #047857); transition: width .3s ease; border-radius: 999px; }

/* Mobile — stack progress under driver info */
@media (max-width: 640px) {
  .driver-acc-head { grid-template-columns: 16px 1fr auto; }
  .driver-progress { grid-column: 2 / -1; min-width: 0; text-align: left; margin-top: .15rem; }
  .dp-label { text-align: left; }
}

.driver-acc-body { border-top: 1px solid var(--ink-100); }

/* ---- Driver context strip — phone / vehicle / GPS / sheet link ---- */
.acc-driver-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .65rem 1rem;
  padding: .75rem .9rem;
  background: linear-gradient(135deg, rgba(99,102,241,.04), rgba(139,92,246,.04));
  border-bottom: 1px solid var(--ink-100);
}
.ads-cell { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.ads-lbl  { font-size: .58rem; font-weight: 800; text-transform: uppercase; color: var(--ink-500); letter-spacing: .06em; }
.ads-val  { font-size: .82rem; font-weight: 600; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ads-val.muted { color: var(--ink-400); font-weight: 500; font-style: italic; }
.ads-val.link, .ads-val a { color: var(--indigo); text-decoration: none; }
.ads-val.link:hover, .ads-val a:hover { text-decoration: underline; }

.acc-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: .65rem; padding: .55rem .85rem;
  background: var(--ink-25);
  border-bottom: 1px solid var(--ink-100);
  flex-wrap: wrap;
}
.acc-stats { display: flex; gap: .35rem; flex-wrap: wrap; }
.s-pill {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .65rem; font-weight: 700; padding: .2rem .5rem; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.s-pill.done  { background: #d1fae5; color: #047857; }
.s-pill.out   { background: #dbeafe; color: #1d4ed8; }
.s-pill.sched { background: #fef3c7; color: #92400e; }
.s-pill.fail  { background: #fee2e2; color: #b91c1c; }
.s-pill.canc  { background: var(--ink-100); color: var(--ink-500); text-decoration: line-through; }

/* ---- Stop rows inside the accordion ---- */
.acc-stops { display: flex; flex-direction: column; }
.acc-stops .stop-row {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--ink-50);
  color: inherit;
  transition: background .12s ease;
}
.acc-stops .stop-row:last-child { border-bottom: 0; }
.acc-stops .stop-row:hover { background: var(--ink-25); }
.acc-stops .stop-row.cancelled { opacity: .55; }
.acc-stops .stop-row a { color: inherit; text-decoration: none; }
.acc-stops .stop-row a:hover { text-decoration: underline; }
.acc-stops .stop-row .link-strong { color: var(--ink-900); font-weight: 700; }
.acc-stops .stop-row .link-strong:hover { color: var(--indigo); text-decoration: underline; }
.acc-stops .stop-row .link-soft { color: var(--ink-600); }
.acc-stops .stop-row .link-soft:hover { color: var(--indigo); }
.acc-stops .stop-row .stop-sub-link { color: var(--ink-400); font-size: .68rem; font-weight: 600; font-family: 'JetBrains Mono', ui-monospace, monospace; }
.acc-stops .stop-row .stop-sub-link a { color: var(--indigo); }
.acc-stops .stop-row .stop-contact {
  display: flex; flex-wrap: wrap; gap: .35rem .9rem;
  font-size: .72rem; color: var(--ink-500); margin-top: .25rem;
}
.acc-stops .stop-row .stop-contact a { color: var(--indigo); font-weight: 600; }
.acc-stops .stop-row .stop-instr { color: var(--ink-600); font-style: italic; }

.status-ic {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .78rem;
}
.status-ic.st-done  { background: #d1fae5; color: #047857; }
.status-ic.st-out   { background: #dbeafe; color: #1d4ed8; }
.status-ic.st-sched { background: var(--ink-100); color: var(--ink-600); }
.status-ic.st-pend  { background: #fef3c7; color: #92400e; }
.status-ic.st-fail  { background: #fee2e2; color: #b91c1c; }
.status-ic.st-canc  { background: var(--ink-50); color: var(--ink-400); }

.stop-body { flex: 1; min-width: 0; }
.stop-cust { font-weight: 600; font-size: .85rem; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stop-row.cancelled .stop-cust { text-decoration: line-through; color: var(--ink-400); }
.stop-addr { font-size: .72rem; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stop-fail-reason { font-size: .7rem; color: #b91c1c; margin-top: .15rem; }

.stop-right { flex-shrink: 0; text-align: right; min-width: 70px; }
.t-stamp { font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.t-done  { color: #047857; }
.t-fail  { color: #b91c1c; }
.t-out   { color: #1d4ed8; }
.t-sched { color: var(--ink-500); font-weight: 500; }
.t-canc  { color: var(--ink-400); font-style: italic; font-weight: 500; }
.t-by    { font-size: .62rem; color: var(--ink-400); max-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-code  { font-size: .58rem; color: var(--ink-400); font-family: 'JetBrains Mono', ui-monospace, monospace; margin-top: .1rem; }

/* When sticky calendar is active, scale it to fit the narrow column nicely */
.board-side .cal-widget { max-width: none; }

/* ---------- Smart calendar (today board) ---------- */
.cal-wrap { display: flex; justify-content: center; }
.cal-widget {
  width: 100%; max-width: 380px;
  /* Generous horizontal padding so the LAST column's cell + its inset
     pill have visible breathing room from the card's right border.
     Combined with .cal-cells padding + pseudo-element inset below,
     the pill is 40 px from the rounded card border on each side. */
  padding: .9rem 1.75rem;
}
.cal-widget .cal-cells,
.cal-widget .cal-dow { padding: 0 8px; }
.cal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: .6rem; margin-bottom: .55rem;
  border-bottom: 1px solid var(--ink-100);
}
.cal-title { font-size: .95rem; color: var(--ink-900); letter-spacing: -.01em; }
.cal-nav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px;
  color: var(--ink-700); text-decoration: none; font-size: 1.05rem; line-height: 1;
}
.cal-nav:hover { background: var(--ink-50); color: var(--ink-900); }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-dow {
  font-size: .62rem; color: var(--ink-400); font-weight: 700;
  text-align: center; padding: .25rem 0; text-transform: uppercase;
  letter-spacing: .04em; margin-bottom: 2px;
}

.cal-cell {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1;
  font-size: .82rem; color: var(--ink-800);
  text-decoration: none;
  transition: transform .08s ease;
  min-height: 36px;
}
.cal-cell:active { transform: scale(.95); }
.cal-cell.other-month { color: var(--ink-300); }
.cal-cell.has-data:not(.selected):not(.today) { font-weight: 700; color: var(--ink-900); }

/* Backgrounds (hover / today / selected) all render via a single
   ::before pseudo-element inset 4 px on every side. Guarantees the
   visible pill is ALWAYS smaller than the cell, can never bleed out
   of the grid, no row appears taller than its neighbours. The pill is
   absolutely-positioned UNDER the content, which is z-index:1. */
.cal-cell::before {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 8px;
  background: transparent;
  transition: background .12s ease, box-shadow .12s ease;
  z-index: 0;
  pointer-events: none;
}
.cal-cell > * { position: relative; z-index: 1; }
.cal-cell:hover::before { background: var(--ink-50); }
.cal-cell.today::before { background: var(--ink-50); }
.cal-cell.today { font-weight: 700; }
.cal-cell.selected { color: white; font-weight: 800; }
.cal-cell.selected::before {
  background: linear-gradient(135deg, #6366f1, #4338ca);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 1px 3px rgba(67,56,202,.25);
}

/* Weekend + holiday colouring — red text. Selected cell keeps its
   white text (selected always wins). For days that are BOTH weekend
   and in-month, a slightly stronger red than out-of-month. */
.cal-cell.weekend:not(.selected) { color: #dc2626; }
.cal-cell.weekend.other-month:not(.selected) { color: rgba(220,38,38,.45); }
/* Holidays: red text AND a small red dot top-left so they pop next
   to ordinary weekends. Skip the dot on the selected cell where the
   contrast is already strong. */
.cal-cell.holiday:not(.selected) { color: #dc2626; font-weight: 700; }
.cal-cell.holiday::after {
  content: '';
  position: absolute;
  top: 8px; left: 8px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #dc2626;
  box-shadow: 0 0 0 1.5px white;
  z-index: 1;
}
.cal-cell.holiday.selected::after { background: white; box-shadow: 0 0 0 1.5px rgba(255,255,255,.4); }

/* Day-of-week header — Sat (6th) + Sun (7th) red to match the
   weekend column tone in the grid below. */
.cal-dow span:nth-child(6),
.cal-dow span:nth-child(7) { color: #dc2626; }
.cal-cell .day-num { line-height: 1; }
.cal-cell .dots {
  display: flex; gap: 2px; margin-top: 3px; line-height: 0;
}
.cal-cell .dot {
  width: 4px; height: 4px; border-radius: 50%; display: inline-block;
}
.dot-done  { background: #10b981; }
.dot-out   { background: #3b82f6; }
.dot-sched { background: #f59e0b; }
.dot-fail  { background: #ef4444; }
.cal-cell.selected .dot { box-shadow: 0 0 0 1.5px white; }

.cal-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: .65rem; padding-top: .55rem;
  border-top: 1px solid var(--ink-100);
  gap: .5rem; flex-wrap: wrap;
}
.cal-legend {
  display: flex; flex-wrap: wrap; gap: .55rem;
  font-size: .66rem; color: var(--ink-600); font-weight: 600;
}
.cal-legend span { display: inline-flex; align-items: center; gap: .25rem; }
.cal-today-btn {
  font-size: .68rem; font-weight: 700; color: var(--ink-700);
  padding: .3rem .65rem; border-radius: 999px;
  background: var(--ink-50); border: 1px solid var(--ink-100);
  text-decoration: none;
}
.cal-today-btn:hover { background: var(--ink-100); color: var(--ink-900); }

@media (min-width: 720px) {
  .cal-widget { max-width: 420px; }
  /* font bumped slightly but NO min-height override — that combined
     with aspect-ratio:1/1 was forcing each cell to be ≥42×42 px,
     so 7 cells (294 px) + 6 gaps (18 px) = 312 px, way more than
     the 248 px available in the 320 px sticky sidebar. Result was
     the Sunday column overflowing OUT of the rounded card border
     (Kishan's screenshot). Letting cells shrink-to-fit fixes it. */
  .cal-cell { font-size: .9rem; }
}
/* Final safety: cells must be able to collapse smaller than their
   default content so the grid track fits whatever column it lives
   in (mobile centred, desktop sticky 320-px sidebar). */
.cal-cell { min-width: 0; }
.cal-cells { min-width: 0; }

/* Holiday hover tooltip — shows the holiday's name (with the country
   flag) so the user knows WHY the cell is red.  Pure CSS, no JS:
   the .cal-tip span is positioned absolutely above the cell, hidden
   by default (opacity 0, pointer-events none), fades in on hover. */
.cal-tip {
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--ink, #1e1b4b);
  color: white;
  padding: 5px 9px;
  border-radius: 6px;
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  max-width: 200px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 30;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.cal-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--ink, #1e1b4b);
}
.cal-cell:hover .cal-tip,
.cal-cell:focus .cal-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* On the very top row, flip the tooltip BELOW so it doesn't get cut
   off by the day-of-week header.  First 7 cells in the grid get the
   inverted variant. */
.cal-cells .cal-cell:nth-child(-n+7) .cal-tip {
  bottom: auto; top: calc(100% + 2px);
  transform: translateX(-50%) translateY(-4px);
}
.cal-cells .cal-cell:nth-child(-n+7) .cal-tip::after {
  top: auto; bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--ink, #1e1b4b);
}
.cal-cells .cal-cell:nth-child(-n+7):hover .cal-tip {
  transform: translateX(-50%) translateY(0);
}

/* ---------- Pagination ---------- */
.syrax-pager {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  margin-top: 1rem; padding: .65rem 1rem;
  background: var(--card); border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  flex-wrap: wrap;
}
.syrax-pager-meta { font-size: .78rem; color: var(--ink-600); }
.syrax-pager-controls { display: flex; align-items: center; gap: .35rem; }
.syrax-pager-btn {
  display: inline-flex; align-items: center; padding: .35rem .7rem;
  background: var(--ink-25); border: 1px solid var(--ink-100);
  border-radius: var(--r-sm); text-decoration: none;
  color: var(--ink-700); font-weight: 600; font-size: .78rem;
  transition: background .12s ease;
}
.syrax-pager-btn:hover:not(.disabled) { background: var(--ink-50); }
.syrax-pager-btn.disabled { opacity: .35; cursor: not-allowed; }
.syrax-pager-pageinfo {
  padding: 0 .55rem; font-size: .78rem; color: var(--ink-700); font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---------- Australian-standard Tax Invoice ----------
   Designed for printing on A4 + saving as PDF.  Strong type hierarchy,
   ATO-compliant content layout: issuer block (with ABN), TAX INVOICE
   title + meta table on the right, bill-to + ship-to blocks, line items
   with explicit GST column, totals box, payment instructions, tax
   statement footer. */
.tax-invoice {
  background: var(--card);
  color: var(--ink-900);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  padding: 2.25rem 2.25rem 1.5rem;
  box-shadow: var(--shadow-sm);
  font-size: .82rem;
  line-height: 1.45;
}
.ti-mono { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: .82em; letter-spacing: .01em; }
.ti-num  { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* Header — issuer left, TAX INVOICE + meta table right */
.ti-header {
  display: grid; grid-template-columns: 1fr 280px; gap: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--ink-900);
}
.ti-issuer { display: flex; align-items: flex-start; gap: 1.1rem; }
.ti-logo   { width: 88px; height: 88px; flex-shrink: 0; object-fit: contain; }
.ti-issuer-name    { font-size: 1.3rem; font-weight: 800; color: var(--ink-900); line-height: 1.15; }
.ti-issuer-trading { font-size: .72rem; color: var(--ink-500); font-style: italic; margin-top: .15rem; }
.ti-issuer-meta    { font-size: .72rem; color: var(--ink-600); margin-top: .35rem; line-height: 1.5; }
.ti-meta { text-align: right; }
.ti-title {
  font-size: 1.6rem; font-weight: 800;
  letter-spacing: .12em;
  color: var(--ink-900);
  margin-bottom: .65rem;
}
.ti-meta-table { width: 100%; font-size: .76rem; border-collapse: collapse; }
.ti-meta-table th, .ti-meta-table td {
  padding: .25rem 0;
  text-align: right; vertical-align: top;
}
.ti-meta-table th {
  color: var(--ink-500); font-weight: 600; text-transform: uppercase;
  font-size: .62rem; letter-spacing: .06em;
  padding-right: .75rem;
}
.ti-meta-table td { font-weight: 700; color: var(--ink-900); }
.ti-meta-table td.ti-overdue { color: #b91c1c; }
.ti-meta-sub { color: var(--ink-500); font-weight: 500; font-size: .9em; }

/* Bill-to + Ship-to */
.ti-addresses {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
  margin: 1.25rem 0 1.5rem;
}
.ti-addr-block { }
.ti-addr-label {
  font-size: .62rem; font-weight: 800; text-transform: uppercase;
  color: var(--ink-500); letter-spacing: .08em; margin-bottom: .35rem;
}
.ti-addr-name { font-size: 1rem; font-weight: 700; color: var(--ink-900); line-height: 1.2; }
.ti-addr-line { font-size: .78rem; color: var(--ink-700); margin-top: .15rem; }
.ti-addr-soft { color: var(--ink-500); font-size: .72rem; }

/* Line items table */
.ti-lines {
  width: 100%; border-collapse: collapse;
  margin-bottom: 1.5rem;
}
.ti-lines thead tr {
  border-bottom: 1.5px solid var(--ink-700);
  background: var(--ink-25);
}
.ti-lines thead th {
  padding: .55rem .6rem;
  font-size: .62rem; font-weight: 800; text-transform: uppercase;
  color: var(--ink-600); letter-spacing: .06em;
  text-align: left;
}
.ti-lines thead th.ti-col-num,
.ti-lines thead th.ti-col-amt,
.ti-lines thead th.ti-col-gst { text-align: right; }
.ti-col-sub { font-size: .9em; font-weight: 500; color: var(--ink-400); text-transform: none; letter-spacing: 0; }
.ti-lines tbody tr { border-bottom: 1px solid var(--ink-50); }
.ti-lines tbody td {
  padding: .65rem .6rem;
  vertical-align: top;
  font-size: .82rem;
}
.ti-line-name { font-weight: 600; color: var(--ink-900); }
.ti-line-sub  { font-size: .68rem; color: var(--ink-500); margin-top: .1rem; }
.ti-line-note { font-size: .68rem; color: var(--ink-600); font-style: italic; margin-top: .2rem; }

/* Totals + payment instructions side-by-side */
.ti-summary {
  display: grid; grid-template-columns: 1fr 320px; gap: 1.5rem;
  margin-bottom: 1.25rem;
}
.ti-pay-info {
  background: var(--ink-25);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  padding: 1rem 1.1rem;
}
.ti-pay-title {
  font-size: .68rem; font-weight: 800; text-transform: uppercase;
  color: var(--ink-700); letter-spacing: .08em; margin-bottom: .65rem;
  padding-bottom: .4rem; border-bottom: 1px solid var(--ink-100);
}
.ti-pay-method { margin-bottom: .85rem; }
.ti-pay-method:last-of-type { margin-bottom: 0; }
.ti-pay-method-name { font-size: .82rem; font-weight: 700; color: var(--ink-900); margin-bottom: .35rem; }
.ti-pay-table { width: 100%; font-size: .76rem; border-collapse: collapse; }
.ti-pay-table th, .ti-pay-table td { padding: .15rem 0; text-align: left; vertical-align: top; }
.ti-pay-table th { color: var(--ink-500); font-weight: 600; width: 110px; padding-right: .85rem; }
.ti-pay-table td { color: var(--ink-900); font-weight: 600; }
.ti-pay-payid { font-size: .92rem; font-weight: 700; color: var(--ink-900); }
.ti-pay-payid-sub { font-size: .7rem; color: var(--ink-500); margin-top: .15rem; }
.ti-pay-terms {
  margin-top: .85rem; padding-top: .65rem;
  border-top: 1px dashed var(--ink-200);
  font-size: .7rem; color: var(--ink-600); line-height: 1.55;
}

.ti-totals {
  position: relative;
  background: var(--card);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  padding: .85rem .9rem;
  align-self: start;
}
.ti-totals-table { width: 100%; font-size: .82rem; border-collapse: collapse; }
.ti-totals-table th, .ti-totals-table td {
  padding: .4rem 0;
  text-align: right;
}
.ti-totals-table th {
  color: var(--ink-500); font-weight: 600;
  text-align: left;
}
.ti-totals-table td { font-weight: 700; color: var(--ink-900); white-space: nowrap; }
.ti-totals-total {
  border-top: 2px solid var(--ink-700);
}
.ti-totals-total th, .ti-totals-total td {
  padding-top: .65rem;
  font-size: 1.05rem;
  color: var(--ink-900);
}
.ti-totals-total td { font-weight: 800; }
.ti-totals-paid td { color: #047857; }
.ti-totals-balance {
  border-top: 1px solid var(--ink-100);
}
.ti-totals-balance th, .ti-totals-balance td {
  padding-top: .55rem;
  font-size: 1.1rem; font-weight: 800;
}
.ti-balance-due td  { color: #b91c1c; }
.ti-balance-zero td { color: #047857; }

.ti-paid-stamp, .ti-cancelled-stamp {
  position: absolute; top: .65rem; right: .9rem;
  transform: rotate(-8deg);
  font-size: .68rem; font-weight: 800; letter-spacing: .12em;
  padding: .2rem .55rem;
  border: 2px solid;
  border-radius: 4px;
  opacity: .8;
}
.ti-paid-stamp      { color: #047857; border-color: #047857; }
.ti-cancelled-stamp { color: #991b1b; border-color: #991b1b; }

.ti-notes {
  margin: 1rem 0;
  padding: .75rem 1rem;
  background: var(--ink-25);
  border-left: 3px solid var(--ink-400);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.ti-notes-label {
  font-size: .62rem; font-weight: 800; text-transform: uppercase;
  color: var(--ink-500); letter-spacing: .08em; margin-bottom: .25rem;
}
.ti-notes-body { font-size: .8rem; color: var(--ink-700); white-space: pre-line; }

.ti-foot {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ink-100);
  text-align: center;
}
.ti-foot-statement {
  font-size: .68rem; color: var(--ink-600); line-height: 1.6;
  max-width: 720px; margin: 0 auto;
}
.ti-foot-issuer {
  margin-top: .55rem;
  font-size: .65rem; color: var(--ink-400);
}

/* Tablet / mobile collapse — stack the two-column sections so the
   invoice stays legible on a phone.
   CRITICAL: 'screen' keyword restricts this collapse to on-screen
   viewing only.  Without it, the browser's print mode (A4 = 595–794
   CSS px, below 720) triggered the mobile layout — header, addresses,
   totals/payment all stacked instead of side-by-side. Kishan's print
   screenshot was the original mobile layout, not the polished
   desktop one. */
@media screen and (max-width: 720px) {
  .tax-invoice { padding: 1.25rem 1.1rem; }
  .ti-header { grid-template-columns: 1fr; gap: 1rem; }
  .ti-meta { text-align: left; }
  .ti-meta-table th, .ti-meta-table td { text-align: left; }
  .ti-addresses { grid-template-columns: 1fr; gap: 1rem; }
  .ti-summary { grid-template-columns: 1fr; gap: 1rem; }
  .ti-lines { font-size: .72rem; }
  .ti-lines thead th, .ti-lines tbody td { padding: .35rem .3rem; }
  .ti-col-gst { display: none; }
}

/* ---------- Manual invoice form — line item cards ---------- */
.mi-line-card {
  background: var(--card);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  padding: .75rem .85rem .85rem;
  margin-bottom: .65rem;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.mi-line-card:hover { border-color: var(--ink-200); }
.mi-line-card:focus-within {
  border-color: var(--accent, #6366f1);
  box-shadow: 0 0 0 3px rgba(99,102,241,.08);
}

.mi-line-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .55rem;
}
.mi-line-no {
  font-size: .65rem; font-weight: 800; text-transform: uppercase;
  color: var(--ink-500); letter-spacing: .08em;
}
.mi-line-remove {
  background: transparent; border: 0; cursor: pointer;
  width: 22px; height: 22px; border-radius: 50%;
  color: var(--ink-400); font-size: 1rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s ease, color .12s ease;
}
.mi-line-remove:hover { background: #fee2e2; color: #b91c1c; }

.mi-line-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr .9fr 1fr 1fr;
  gap: .55rem;
  /* Top-align so every input sits on the same baseline (row 2). The
     Box-price column has an extra '↔ auto-syncs' caption underneath;
     bottom-aligning would push its INPUT above the others, which was
     the misalignment Kishan flagged. Top-align keeps all inputs in
     line and lets the hint just dangle below. */
  align-items: start;
}
.mi-fld { display: flex; flex-direction: column; min-width: 0; }
.mi-fld label {
  font-size: .58rem; font-weight: 800; text-transform: uppercase;
  color: var(--ink-500); letter-spacing: .06em; margin-bottom: .2rem;
}
.mi-fld input, .mi-fld select {
  width: 100%;
  padding: .45rem .55rem;
  font-size: .82rem;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-sm);
  background: var(--card);
}
.mi-fld input:focus, .mi-fld select:focus {
  outline: none; border-color: var(--accent, #6366f1);
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.mi-fld .field-error {
  font-size: .65rem; color: #b91c1c; margin-top: .2rem;
}
.mi-hint {
  font-size: .58rem; color: var(--ink-400); font-style: italic;
  margin-top: .2rem; line-height: 1.2;
}
.mi-line-total {
  padding: .5rem .55rem;
  background: var(--ink-25);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-sm);
  font-size: .92rem; font-weight: 800; color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  text-align: right; min-height: 36px;
  display: flex; align-items: center; justify-content: flex-end;
}

@media (max-width: 860px) {
  .mi-line-grid { grid-template-columns: 1fr 1fr; }
  .mi-fld-desc  { grid-column: 1 / -1; }
  .mi-fld-total { grid-column: 1 / -1; }
}

.mi-totals-table {
  width: 100%; border-collapse: collapse;
  font-size: .85rem;
}
.mi-totals-table th, .mi-totals-table td {
  padding: .55rem .9rem;
  text-align: right;
}
.mi-totals-table th {
  text-align: left; color: var(--ink-600); font-weight: 600;
  background: var(--ink-25);
  border-top: 1px solid var(--ink-100);
}
.mi-totals-table td { font-weight: 700; color: var(--ink-900); }
.mi-totals-final th, .mi-totals-final td {
  font-size: 1rem; font-weight: 800;
  background: var(--ink-50);
  color: var(--ink-900);
}
.mi-totals-final td { color: #047857; }

/* ---------- Print ---------- */
@media print {
  /* @page rule for the printer's paper sheet — A4 with a sensible
     12 mm margin all round. Browser will use this instead of its
     default which often clips at 0 / 25 mm. */
  @page { size: A4 portrait; margin: 12mm; }

  /* The whole app-shell that's normally a flex column with a fixed
     header + scrollable main becomes static block flow for print —
     otherwise the shell is height-locked to viewport size and only
     the first page worth of content makes it onto paper. */
  html.with-app-shell, body.with-app-shell {
    height: auto !important; overflow: visible !important;
  }
  .app-layout, .app-shell, .app-main {
    display: block !important; overflow: visible !important;
    height: auto !important; max-height: none !important;
    background: white !important;
  }
  .app-main-inner { padding: 0 !important; max-width: none !important; }

  .no-print, header.app-header, aside.app-aside, footer, nav.mobile-nav,
  .app-aside { display: none !important; }
  .syrax-card { box-shadow: none; border-color: #ddd; }
  body { background: white !important; }

  .tax-invoice {
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    font-size: 10pt;
    /* Force the desktop 2-column layouts even though A4 (≈595–794px)
       is below the on-screen mobile breakpoint. Without these the
       header / addresses / summary all stack vertically on paper —
       Kishan's screenshot showed exactly that. */
    width: 100% !important;
    max-width: none !important;
  }
  .ti-header   { grid-template-columns: 1fr 240px !important; gap: 1rem !important; }
  .ti-meta     { text-align: right !important; }
  .ti-meta-table th, .ti-meta-table td { text-align: right !important; }
  .ti-addresses { grid-template-columns: 1fr 1fr !important; gap: 1.5rem !important; }
  .ti-summary  { grid-template-columns: 1fr 260px !important; gap: 1rem !important; }
  .ti-col-gst  { display: table-cell !important; }

  .ti-header { border-bottom-color: #000 !important; }
  .ti-lines thead tr { background: #f3f4f6 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ti-lines tr { page-break-inside: avoid; }
  .ti-totals-total { border-top-color: #000 !important; }
  .ti-pay-info, .ti-totals { page-break-inside: avoid; }
  .ti-pay-info { background: #fafafa !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ti-paid-stamp { color: #047857 !important; border-color: #047857 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ti-cancelled-stamp { color: #991b1b !important; border-color: #991b1b !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ===================================================================
   Customer statement (ledger) — print-ready A4 layout
   =================================================================== */
.statement-card { color: var(--ink-900); }

.stmt-header {
  display: grid; grid-template-columns: 1fr 240px; gap: var(--sp-6);
  align-items: start; margin-bottom: var(--sp-6);
}
.stmt-issuer { display: flex; gap: var(--sp-4); align-items: flex-start; }
.stmt-logo { width: 88px; height: 88px; object-fit: contain; flex-shrink: 0; }
.stmt-issuer-name { font-size: 1.25rem; font-weight: 700; line-height: 1.2; margin-bottom: 4px; }
.stmt-issuer-meta { font-size: 0.78rem; color: var(--ink-500); line-height: 1.45; }
.stmt-title-block { text-align: right; }
.stmt-title { font-size: 1.5rem; font-weight: 800; letter-spacing: 0.03em; color: var(--ink-900); }
.stmt-date { font-size: 0.85rem; color: var(--ink-500); margin-top: 4px; }

.stmt-billto {
  background: var(--ink-50, #f8fafc); border: 1px solid var(--ink-100);
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-5);
}
.stmt-billto-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-500); font-weight: 600; margin-bottom: 4px; }
.stmt-billto-name  { font-size: 1.05rem; font-weight: 700; margin-bottom: 2px; }
.stmt-billto-line  { font-size: 0.85rem; color: var(--ink-700); line-height: 1.45; }

.stmt-ledger { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-bottom: var(--sp-5); }
.stmt-ledger th {
  background: var(--ink-50, #f8fafc); border-bottom: 2px solid var(--ink-200);
  padding: 0.55rem 0.65rem; text-align: left;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-500);
}
.stmt-ledger th.num, .stmt-ledger td.num { text-align: right; }
.stmt-ledger td { padding: 0.5rem 0.65rem; border-bottom: 1px solid var(--ink-100); vertical-align: top; }
.stmt-ledger .stmt-date-col { white-space: nowrap; color: var(--ink-700); }
.stmt-ledger .stmt-balance { font-weight: 600; }
.stmt-row-credit { color: var(--ink-700); }
.stmt-row-credit td { background: rgba(16, 185, 129, 0.04); }
.stmt-empty { text-align: center; padding: 1.5rem; color: var(--ink-400); font-style: italic; }

.stmt-summary {
  max-width: 360px; margin-left: auto; margin-bottom: var(--sp-5);
  border: 1px solid var(--ink-100); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
}
.stmt-summary-row { display: flex; justify-content: space-between; padding: 0.35rem 0; font-size: 0.9rem; color: var(--ink-700); }
.stmt-summary-total { border-top: 2px solid var(--ink-300); margin-top: 4px; padding-top: 0.55rem; font-size: 1.05rem; font-weight: 700; color: var(--ink-900); }
.stmt-balance-due { color: #b45309; }

.stmt-pay-info {
  background: var(--ink-50, #f8fafc); border: 1px solid var(--ink-100);
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
}
.stmt-pay-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-500); font-weight: 600; margin-bottom: var(--sp-2); }
.stmt-pay-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-4); font-size: 0.82rem; line-height: 1.5; }
.stmt-pay-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-500); font-weight: 600; margin-bottom: 2px; }

.stmt-foot { text-align: center; font-size: 0.7rem; color: var(--ink-400); padding-top: var(--sp-3); border-top: 1px solid var(--ink-100); }

@media screen and (max-width: 720px) {
  .stmt-header { grid-template-columns: 1fr; }
  .stmt-title-block { text-align: left; }
  .stmt-pay-grid { grid-template-columns: 1fr; }
  .stmt-summary { max-width: 100%; }
  .stmt-ledger { font-size: 0.78rem; }
  .stmt-ledger th, .stmt-ledger td { padding: 0.4rem 0.4rem; }
}

@media print {
  @page { size: A4 portrait; margin: 12mm; }
  .breadcrumb, .page-head, .no-print { display: none !important; }
  .app-shell, .app-layout, .app-main { display: block !important; overflow: visible !important; height: auto !important; }
  .statement-card { box-shadow: none !important; border: none !important; padding: 0 !important; }
  .stmt-header { grid-template-columns: 1fr 240px !important; }
  .stmt-pay-grid { grid-template-columns: 1fr 1fr 1fr !important; }
  .stmt-ledger tr, .stmt-summary, .stmt-pay-info { page-break-inside: avoid; }
  .stmt-billto, .stmt-pay-info { background: #fafafa !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .stmt-row-credit td { background: #f0fdf4 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ===================================================================
   Export preview pages (spreadsheet-style, with chip filter + small
   download icon). Reused by: customer order export, delivery run
   sheet, invoices export, etc.
   =================================================================== */
.export-page { max-width: 100%; }

.export-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 0.85rem 1rem;
  background: white;
  border: 1px solid var(--ink-100);
  border-radius: 12px;
  margin-bottom: 0.75rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.export-range-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.export-range-chip {
  display: inline-flex; align-items: center;
  padding: 0.3rem 0.75rem; border-radius: 8px;
  background: var(--ink-50, #f8fafc); border: 1px solid var(--ink-100);
  font-size: 0.74rem; font-weight: 600; color: var(--ink-700);
  transition: all .12s ease;
}
.export-range-chip:hover { border-color: var(--syrax-primary); color: var(--syrax-primary); }
.export-range-chip.active { background: var(--ink-900); border-color: var(--ink-900); color: white; }

.export-range-custom {
  display: inline-flex; align-items: center; gap: 0.3rem;
  margin-left: 0.4rem; padding: 0.18rem 0.5rem;
  background: var(--ink-50); border: 1px solid var(--ink-100);
  border-radius: 8px;
}
.export-range-custom input[type="date"] {
  border: 0; background: transparent;
  font-size: 0.72rem; font-weight: 600; color: var(--ink-700);
  font-family: inherit; padding: 0.18rem 0.25rem;
  outline: none;
}
.export-range-custom button {
  background: var(--ink-900); color: white; border: 0;
  padding: 0.18rem 0.55rem; border-radius: 6px;
  font-size: 0.7rem; font-weight: 700; cursor: pointer;
}

.export-download-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.85rem; border-radius: 8px;
  background: var(--syrax-primary, #047857); color: white;
  font-size: 0.78rem; font-weight: 700;
  transition: all .15s ease;
  text-decoration: none;
}
.export-download-btn:hover { background: var(--syrax-primary-d, #065f46); transform: translateY(-1px); }
.export-download-btn .ico { font-size: 0.95rem; line-height: 1; }

/* Spreadsheet-style preview table */
.export-preview {
  background: white; border: 1px solid var(--ink-100);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.export-preview-meta {
  padding: 0.7rem 1rem;
  font-size: 0.78rem; color: var(--ink-500);
  background: var(--ink-25, #f8fafc);
  border-bottom: 1px solid var(--ink-100);
  display: flex; justify-content: space-between; align-items: center;
}
.export-preview-meta strong { color: var(--ink-900); font-weight: 700; }

.export-table-wrap { overflow-x: auto; max-height: 70vh; }
.export-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.export-table thead { background: var(--ink-50, #f8fafc); position: sticky; top: 0; z-index: 1; }
.export-table th {
  text-align: left; padding: 0.55rem 0.85rem;
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-500); font-weight: 700;
  border-bottom: 2px solid var(--ink-100);
  white-space: nowrap;
}
.export-table th.num { text-align: right; }
.export-table td {
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--ink-50);
  color: var(--ink-800);
  vertical-align: top;
}
.export-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.export-table td.mono { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 0.76rem; color: var(--ink-600); }
.export-table tr:hover td { background: var(--ink-25, #f8fafc); }
.export-table tr:last-child td { border-bottom: 0; }
.export-empty { padding: 3rem 1rem; text-align: center; color: var(--ink-400); font-size: 0.88rem; }