/* ============================================================
   sayara — Operator App Design System
   "Clean ledger" model: navy sidebar + airy, hairline-driven
   content surfaces inspired by modern fintech dashboards.
   Single source of truth for tokens + base components.
   ============================================================ */

:root{
  /* ---- Surfaces / neutrals (cool gray) ---- */
  --bg:#f6f8fb;          /* app canvas behind cards */
  --surface:#ffffff;      /* cards, tables, panels   */
  --hover:#f7fafc;        /* row / item hover         */
  --ink:#1a1f36;          /* primary text             */
  --ink-2:#3c4257;        /* secondary text           */
  --muted:#697386;        /* tertiary / captions      */
  --faint:#8792a2;        /* uppercase labels, axes   */
  --line:#e3e8ee;         /* default hairline border  */
  --line-2:#eef1f6;       /* lighter divider          */

  /* ---- Navy sidebar (brand-retained) ---- */
  --nav-bg:#111827;
  --nav-text:#9aa4b2;
  --nav-active-bg:#2563eb; /* active item = accent     */
  --nav-hover:#1c2433;
  --nav-label:#5b6473;     /* section labels           */
  --nav-border:#1e2735;

  /* ---- Accent (sayara blue) ---- */
  --accent:#2563eb;
  --accent-strong:#1d4ed8; /* hover/pressed            */
  --accent-soft:#eff4ff;   /* tinted bg on light surf  */

  /* ---- Status ---- */
  --pos:#0e7c4a;  --pos-soft:#e6f5ed;   /* accepted / paid / success */
  --warn:#9a6700; --warn-soft:#fdf3da;  /* pending / awaiting        */
  --neg:#b42318;  --neg-soft:#fdecea;   /* overdue / declined        */
  --info:#1d4ed8; --info-soft:#eff4ff;  /* going-out / scheduled     */
  --purple:#6b40c4; --purple-soft:#f1ecfb;

  /* ---- Radius ---- */
  --radius:10px;     /* cards            */
  --radius-sm:7px;   /* buttons, inputs  */
  --radius-pill:999px;

  /* ---- Elevation (use sparingly — borders do most of the work) ---- */
  --shadow:0 1px 2px rgba(26,31,54,.04), 0 1px 1px rgba(26,31,54,.03);
  --shadow-md:0 4px 14px rgba(26,31,54,.06);
  --shadow-pop:0 8px 28px rgba(26,31,54,.12);

  /* ---- Type ---- */
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  /* Numbers should always use tabular-nums for aligned columns. */

  /* ---- Layout ---- */
  --sidebar-w:248px;
  --content-max:1320px;
  --gutter:32px;
}

/* ============================================================
   TYPE SCALE
   ============================================================ */
/* page title      24px / 680 / -0.02em
   card title      14px / 650
   big metric      27–30px / 680 / tabular-nums
   body            14px / 400–500
   table cell      13.5px
   label (caps)    11px / 600 / .05em uppercase / --faint
   caption         12px / --muted
   Keep weights to 400 / 500 / 600 / 680. Avoid 800. */

body{
  font-family:var(--sans);
  font-feature-settings:"cv11","ss01";
  -moz-osx-font-smoothing:grayscale;
  background:var(--bg);
  color:var(--ink);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.t-label{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.t-caption{font-size:12px;color:var(--muted)}
.num{font-variant-numeric:tabular-nums}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  font:600 13.5px/1 var(--sans);
  padding:8px 14px;border-radius:var(--radius-sm);
  cursor:pointer;border:1px solid transparent;
  transition:background .12s,box-shadow .12s,border-color .12s;
}
.btn svg{width:15px;height:15px}
.btn-primary{background:var(--accent);color:#fff;
  box-shadow:0 1px 2px rgba(37,99,235,.4),inset 0 1px 0 rgba(255,255,255,.12)}
.btn-primary:hover{background:var(--accent-strong)}
.btn-ghost{background:var(--surface);border-color:var(--line);color:var(--ink-2)}
.btn-ghost:hover{background:var(--hover)}
.btn-danger{background:var(--neg);color:#fff}
.btn-sm{padding:6px 11px;font-size:12.5px}

/* Icon button (topbar) */
.icon-btn{width:34px;height:34px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--surface);
  display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer}
.icon-btn:hover{background:var(--hover);color:var(--ink-2)}
.icon-btn svg{width:16px;height:16px}

/* ============================================================
   CARD
   ============================================================ */
.card{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow)}
.card-head{display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--line-2)}
.card-head h2{font-size:14px;font-weight:650;color:var(--ink)}
.card-head .sub{font-size:12px;color:var(--muted);margin-top:2px}
.card-link{font-size:12.5px;font-weight:600;color:var(--accent);
  text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.card-link svg{width:13px;height:13px}

/* ============================================================
   KPI STRIP  (one bordered row, hairline-divided cells)
   ============================================================ */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.kpi{padding:18px 20px;border-inline-end:1px solid var(--line-2)}
.kpi:last-child{border-inline-end:0}
.kpi .k-label{font-size:11px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--faint)}
.kpi .k-val{font-size:27px;font-weight:680;letter-spacing:-.02em;margin-top:9px;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.kpi .k-val .cur{font-size:15px;font-weight:600;color:var(--muted);margin-inline-end:3px}
.kpi .k-sub{font-size:12px;color:var(--muted);margin-top:5px}
.delta{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;
  font-weight:600;padding:2px 6px;border-radius:5px;margin-top:8px}
.delta svg{width:11px;height:11px}
.delta.up{background:var(--pos-soft);color:var(--pos)}
.delta.down{background:var(--neg-soft);color:var(--neg)}
.delta.flat{background:var(--line-2);color:var(--muted)}

/* ============================================================
   TABLE
   ============================================================ */
.tbl{width:100%;border-collapse:collapse}
.tbl thead th{text-align:start;font-size:11px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--faint);
  padding:11px 20px;border-bottom:1px solid var(--line-2);background:var(--bg)}
.tbl thead th.r{text-align:end}
.tbl tbody td{padding:13px 20px;border-bottom:1px solid var(--line-2);
  font-size:13.5px;color:var(--ink-2);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr{cursor:pointer;transition:background .1s}
.tbl tbody tr:hover{background:var(--hover)}
.tbl td.r{text-align:end}

/* Vehicle / entity cell with monogram tile */
.entity{display:flex;align-items:center;gap:12px}
.mono-tile{width:38px;height:38px;border-radius:8px;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#fff}
.entity .name{font-weight:600;color:var(--ink);font-size:13.5px}
.entity .meta{font-size:11.5px;color:var(--muted);margin-top:2px}
.plate-tag{white-space:nowrap;border:1px solid var(--line);border-radius:4px;padding:0 5px;
  font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}

/* ============================================================
   STATUS PILLS  (subtle tint + dot — never loud fills)
   ============================================================ */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;
  font-weight:600;padding:3px 9px;border-radius:var(--radius-pill)}
.pill .pdot{width:6px;height:6px;border-radius:50%}
.pill.pos{background:var(--pos-soft);color:var(--pos)}      .pill.pos .pdot{background:var(--pos)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}   .pill.warn .pdot{background:var(--warn)}
.pill.neg{background:var(--neg-soft);color:var(--neg)}      .pill.neg .pdot{background:var(--neg)}
.pill.info{background:var(--info-soft);color:var(--info)}   .pill.info .pdot{background:var(--info)}
.pill.muted{background:var(--line-2);color:var(--muted)}    .pill.muted .pdot{background:var(--muted)}
/* Semantic mapping:
   Accepted / Paid / Returned   -> pos
   Pending / Awaiting review     -> warn
   Overdue / Declined / Cancelled-> neg
   Going out / Scheduled / Active-> info
   Draft / Unknown               -> muted  */

/* ============================================================
   SEGMENTED CONTROL  (date range, tabs)
   ============================================================ */
.seg{display:inline-flex;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:3px;box-shadow:var(--shadow)}
.seg button{font:600 12.5px/1 var(--sans);color:var(--muted);background:none;
  border:0;padding:6px 12px;border-radius:5px;cursor:pointer}
.seg button.on{background:var(--bg);color:var(--ink);box-shadow:var(--shadow)}

/* ============================================================
   FORM CONTROLS
   ============================================================ */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.input,select.input,textarea.input{
  font:400 14px/1.4 var(--sans);color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 11px;outline:none;
  transition:border-color .12s,box-shadow .12s}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.input::placeholder{color:var(--faint)}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:42px 24px;text-align:center}
.empty .ico{width:42px;height:42px;border-radius:10px;background:var(--bg);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--faint)}
.empty .ico svg{width:20px;height:20px}
.empty .t{font-size:14px;font-weight:600;color:var(--ink-2)}
.empty p{font-size:13.5px;color:var(--muted);max-width:260px}

/* ============================================================
   APP SHELL
   ============================================================ */
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}

.side{background:var(--nav-bg);border-inline-end:1px solid var(--nav-border);
  padding:20px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand .wm{font-size:21px;font-weight:700;letter-spacing:-.02em;color:#fff}
.brand .wm b{color:var(--accent)}
.brand .org{font-size:10.5px;font-weight:600;letter-spacing:.13em;
  color:var(--nav-label);text-transform:uppercase}
.nav-label{font-size:10.5px;font-weight:600;letter-spacing:.1em;color:var(--nav-label);
  text-transform:uppercase;padding:0 10px 8px}
.nav-item{display:flex;align-items:center;gap:11px;padding:8px 10px;
  border-radius:var(--radius-sm);color:var(--nav-text);font-weight:500;font-size:13.5px;
  cursor:pointer;text-decoration:none;transition:background .12s,color .12s}
.nav-item svg{width:17px;height:17px;flex:none;color:var(--nav-label);transition:color .12s}
.nav-item:hover{background:var(--nav-hover);color:#e5e9f0}
.nav-item.active{background:var(--nav-active-bg);color:#fff;font-weight:600}
.nav-item.active svg{color:#fff}

.topbar{position:sticky;top:0;z-index:5;height:60px;display:flex;align-items:center;gap:16px;
  padding:0 var(--gutter);background:rgba(255,255,255,.85);
  backdrop-filter:saturate(150%) blur(8px);border-bottom:1px solid var(--line)}
.content{padding:28px var(--gutter) 56px;max-width:var(--content-max);width:100%}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1080px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .kpi:nth-child(2n){border-inline-end:0}
  .kpi{border-bottom:1px solid var(--line-2)}
}
@media(max-width:760px){
  .app{grid-template-columns:1fr}
  .side{display:none} /* replace with slide-over drawer + hamburger */
}