/* ============================================================
   Skip Planner — industrial/docket theme override
   ------------------------------------------------------------
   This file is ADDITIVE. It does not replace or edit your
   existing stylesheets — it only overrides colours, fonts and
   a handful of specific chrome elements (sidebar, buttons,
   badges, headings). All layout, spacing and grid rules stay
   exactly as they are in skip-planner.css / jobs.css / etc.

   HOW TO INSTALL
   1. Save this file as: frontend/public/theme-skip-planner.css
   2. In frontend/app/layout.tsx, add ONE more <link> tag,
      placed AFTER all the existing ones (order matters — it
      must load last so its rules win):

      <link rel="stylesheet" href="/theme-skip-planner.css" />

   That's it. No component changes required for this pass.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  /* New tokens — additive, existing --primary/--ink/etc are untouched
     so anything I haven't audited elsewhere in the app keeps working. */
  --sp-graphite:#1B1F24;
  --sp-graphite-2:#262D34;
  --sp-graphite-line:#363E46;
  --sp-concrete:#ECEEEC;
  --sp-yellow:#F5B700;
  --sp-yellow-ink:#3A2C00;
  --sp-rust:#B33A2E;
  --sp-rust-soft:#FBEAE7;
  --sp-green:#1F8A5F;
  --sp-green-soft:#E7F4ED;
  --sp-amber:#C9781C;
  --sp-amber-soft:#FBF0E1;
}

/* ---------- Base canvas ---------- */
body{ background:var(--sp-concrete); }

/* ---------- Sidebar ---------- */
.sidebar{
  background:var(--sp-graphite);
  background-image:none;
}
.brand{ color:#fff; }
.brand-mark{
  background:var(--sp-yellow);
  color:var(--sp-yellow-ink);
  border-radius:5px;
}
.nav-label{ color:#748078; }
.nav-item{ color:#B9C2BC; }
.nav-item:hover{ background:#232A31; color:#fff; }
.nav-item.active{
  background:#232A31;
  color:#fff;
  box-shadow:inset 3px 0 0 var(--sp-yellow);
}
.nav-icon{ color:#8D9891; }
.nav-item.active .nav-icon{ color:var(--sp-yellow); }
.sidebar-note{
  border-color:var(--sp-graphite-line);
  background:rgba(0,0,0,.18);
  color:#94A199;
}

/* ---------- Headings / type ---------- */
.title{
  font-family:'Oswald',sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.2px;
}
h2{ font-family:'Oswald',sans-serif; font-weight:600; }
.eyebrow{
  color:var(--sp-rust);
  font-family:'Inter',sans-serif;
}
.metric-value, .job-ref, .status-pill, .numeric-cell{
  font-family:'IBM Plex Mono',monospace;
}

/* ---------- Buttons ---------- */
.button-primary{
  background:var(--sp-yellow);
  color:var(--sp-yellow-ink);
  border-color:transparent;
  font-weight:700;
}
.button-primary:hover{ background:#e0ac00; }
.button-secondary{ border-color:#dfe3e0; }
.button-quiet{ color:#5B655F; }

/* ---------- Job type badges ---------- */
.badge-delivery{ background:var(--sp-rust-soft); color:var(--sp-rust); }
.badge-collection{ background:var(--sp-green-soft); color:var(--sp-green); }
.badge-exchange{ background:var(--sp-amber-soft); color:var(--sp-amber); }
.badge-alert{ background:#FFF1BF; color:var(--sp-yellow-ink); }
.badge-risk{ background:var(--sp-rust-soft); color:var(--sp-rust); }

/* ---------- Status pills that lean on the old blue/amber tokens ---------- */
.status-low{ background:var(--sp-amber-soft); color:var(--sp-amber); }

/* ---------- Cards: slightly flatter, less "soft SaaS" shadow ---------- */
.card, .metric-card{
  box-shadow:none;
  border-color:#DCE1DE;
}

/* ---------- Focus visibility (accessibility, unchanged behaviour) ---------- */
button:focus-visible, input:focus-visible, select:focus-visible{
  outline:3px solid var(--sp-yellow);
  outline-offset:2px;
}

/* ============================================================
   Mockup alignment pass — matches skip-planner-full-mockup_1.html
   Ticket-style KPI perforation, docket-style job-card colour bars,
   one yellow "selected" language app-wide, table header treatment,
   heading consistency. Still visual-only overrides.
   ============================================================ */

/* ---------- Headings: extend Oswald to h3 to match h1/h2 ---------- */
h3{ font-family:'Oswald',sans-serif; font-weight:600; }

/* ---------- Ticket-style KPI cards (Today dashboard) ---------- */
.dashboard-metric{ position:relative; }
.dashboard-metric::before{
  content:"";
  position:absolute; left:14px; right:14px; top:33px;
  border-top:1.5px dashed #CBD3CE;
}
.dashboard-metric strong{ font-family:'IBM Plex Mono',monospace; }

/* ---------- Docket-style colour bar on job cards ---------- */
.dispatch-job, .job-directory-card{ position:relative; }
.dispatch-job::before, .job-directory-card::before{
  content:""; position:absolute; left:0; top:10px; bottom:10px;
  width:4px; border-radius:3px; background:var(--sp-graphite-line);
}
.dispatch-job[data-job-type="delivery"]::before, .job-directory-card[data-job-type="delivery"]::before{ background:var(--sp-rust); }
.dispatch-job[data-job-type="collection"]::before, .job-directory-card[data-job-type="collection"]::before{ background:var(--sp-green); }
.dispatch-job[data-job-type="exchange"]::before, .job-directory-card[data-job-type="exchange"]::before{ background:var(--sp-amber); }
.dispatch-job{ padding-left:15px; }
.job-directory-card{ padding-left:19px; }

/* ---------- One "selected" language: yellow accent everywhere ---------- */
.filter-chip.selected{ background:var(--sp-yellow); border-color:var(--sp-yellow); color:var(--sp-yellow-ink); }
.driver-sheet-choice.selected{ background:#FFFBEF; border-color:var(--sp-yellow); }
.customer-site-list button.selected{ background:#FFFBEF; }
.customer-site-list .customer-directory-item.selected>button:first-child{ background:#FFFBEF; }
.customer-directory-tabs button.active{ background:var(--sp-graphite); border-color:var(--sp-graphite); color:#fff; }
.dispatch-driver-tile.selected-driver{ border-color:var(--sp-yellow); box-shadow:0 0 0 2px #FFF1BF; background:#FFFBEF; }
.dispatch-mode-switch button.selected{ color:var(--ink); }
.view-switch button.active{ color:var(--ink); }

/* ---------- Tables: light header, Oswald caps ---------- */
.dashboard-table th, .jobs-table th, .stock-table th{ font-family:'Oswald',sans-serif; background:#F5F6F5; }
.jobs-table th{ color:#3D4A56; }

/* ---------- Empty state icon: quieter, larger ---------- */
.empty-state .empty-icon{ color:#CBD1CC; font-size:32px; }

/* ---------- Payment status: its own colour track, separate from job-type ----------
   Paid=green, unpaid/overdue=rust, part-paid=amber. Account/not-required/refunded
   are deliberately left uncoloured (the existing neutral .payment-badge/.surface-badge
   base already reads as neutral grey-blue) — a fourth accent colour here would be one
   colour meaning too many on a page that already carries job-type + must-do/urgent. */
.payment-paid, .job-directory-meta .payment-paid{ background:var(--sp-green-soft); color:var(--sp-green); }
.payment-unpaid, .payment-overdue, .job-directory-meta .payment-unpaid, .job-directory-meta .payment-overdue{ background:var(--sp-rust-soft); color:var(--sp-rust); }
.payment-part_paid, .job-directory-meta .payment-part_paid{ background:var(--sp-amber-soft); color:var(--sp-amber); }

/* ---------- Driver tiles: avatar-style initials ---------- */
.dispatch-driver-tile .driver-dot{
  width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:11px; font-weight:700;
  background:var(--sp-graphite); box-shadow:none;
}
.dispatch-driver-tile:nth-of-type(4n+1) .driver-dot{ background:#2F5CE0; }
.dispatch-driver-tile:nth-of-type(4n+2) .driver-dot{ background:#7A3FC9; }
.dispatch-driver-tile:nth-of-type(4n+3) .driver-dot{ background:#0E8F8A; }
.dispatch-driver-tile:nth-of-type(4n)   .driver-dot{ background:#B0781E; }