/* ==========================================================================
     DESIGN TOKENS
     Palette: cool "machine steel" chrome, warm paper workbench, one amber
     accent (shop safety-yellow). Health uses enamel green / amber / oxide red.
     ========================================================================== */
  :root {
    --steel-900:#191d23; --steel-800:#232a32; --steel-700:#303945; --steel-600:#3f4a58;
    --bg:#e9e6df; --card:#ffffff; --line:#d8d3c8; --line-soft:#e7e2d8;
    --ink:#1b1f25; --muted:#6d7480; --muted-soft:#9aa0aa;
    --amber:#f0a500; --amber-deep:#c98600; --amber-ink:#3a2c05;
    --green:#2f7d51; --green-bg:#e4f0e7;
    --yellow:#c98a12; --yellow-bg:#faefd6;
    --red:#c0453a; --red-bg:#f6e2df;
    --radius:10px; --radius-lg:14px;
    --shadow:0 1px 2px rgba(25,29,35,.06), 0 6px 20px -12px rgba(25,29,35,.28);
    --shadow-lg:0 20px 50px -24px rgba(25,29,35,.45);
  }

  * { box-sizing:border-box; }
  html,body { margin:0; height:100%; }
  body {
    background:var(--bg); color:var(--ink);
    font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
    font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
  }
  .mono { font-family:'JetBrains Mono',ui-monospace,monospace; }
  a { color:inherit; }
  button { font-family:inherit; cursor:pointer; }
  ::selection { background:var(--amber); color:var(--amber-ink); }

  /* ---- App shell ---------------------------------------------------------- */
  .shell { display:grid; grid-template-columns:236px 1fr; min-height:100vh; }

  .sidebar {
    background:var(--steel-900); color:#cfd5dd; display:flex; flex-direction:column;
    position:sticky; top:0; height:100vh;
  }
  .brand { padding:20px 20px 18px; border-bottom:1px solid rgba(255,255,255,.07); }
  .brand .logo {
    display:flex; align-items:center; gap:10px;
  }
  .brand .mark {
    width:30px; height:30px; border-radius:7px; display:grid; place-items:center;
    background:var(--amber); color:var(--amber-ink); flex:none;
    /* hazard corner — the one industrial flourish */
    box-shadow:0 0 0 3px rgba(240,165,0,.15);
  }
  .brand .mark svg { width:17px; height:17px; }
  .brand .name {
    font-family:'Oswald'; font-weight:600; font-size:17px; letter-spacing:.02em;
    color:#fff; line-height:1.05;
  }
  .brand .name small {
    display:block; font-family:'Inter'; font-weight:500; font-size:10.5px;
    letter-spacing:.14em; text-transform:uppercase; color:var(--amber); margin-top:2px;
  }

  .nav { padding:14px 12px; flex:1; overflow-y:auto; }
  .nav .group-label {
    font-family:'Oswald'; text-transform:uppercase; letter-spacing:.16em;
    font-size:10.5px; color:var(--muted-soft); padding:14px 10px 8px;
  }
  .nav button {
    width:100%; display:flex; align-items:center; gap:11px; text-align:left;
    background:transparent; border:0; color:#c3cad3; padding:9px 11px; border-radius:8px;
    font-size:13.5px; font-weight:500; transition:background .12s,color .12s; margin-bottom:2px;
  }
  .nav button svg { width:17px; height:17px; opacity:.85; flex:none; }
  .nav button:hover { background:rgba(255,255,255,.06); color:#fff; }
  .nav button.active { background:var(--steel-700); color:#fff; }
  .nav button.active svg { opacity:1; color:var(--amber); }
  .nav button .count {
    margin-left:auto; font-size:11px; font-weight:600; background:rgba(255,255,255,.1);
    color:#e7ebf0; border-radius:20px; padding:1px 8px; min-width:22px; text-align:center;
  }

  .who {
    padding:14px 16px; border-top:1px solid rgba(255,255,255,.07);
    display:flex; align-items:center; gap:10px;
  }
  .who .av {
    width:32px; height:32px; border-radius:50%; background:var(--steel-600); color:#fff;
    display:grid; place-items:center; font-weight:600; font-size:13px; flex:none;
  }
  .who .meta { line-height:1.25; min-width:0; }
  .who .meta b { color:#fff; font-size:13px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .who .meta span { color:var(--muted-soft); font-size:11px; text-transform:capitalize; }

  .clock-widget { padding:0 16px 14px; }
  .clock-widget .status { font-size:11px; color:var(--muted-soft); margin-bottom:6px; display:flex; align-items:center; gap:6px; }
  .clock-widget .status .dot { width:7px; height:7px; border-radius:50%; background:var(--green); flex:none; }

  /* ---- Main --------------------------------------------------------------- */
  .main { min-width:0; }
  .topbar {
    background:var(--card); border-bottom:1px solid var(--line);
    padding:16px 30px; display:flex; align-items:center; gap:16px; position:sticky; top:0; z-index:5;
  }
  .topbar h1 { font-family:'Oswald'; font-weight:600; font-size:22px; margin:0; letter-spacing:.01em; }
  .topbar .sub { color:var(--muted); font-size:12.5px; margin-top:1px; }
  .topbar .spacer { flex:1; }
  .plan-chip {
    font-family:'Oswald'; letter-spacing:.1em; text-transform:uppercase; font-size:11px; font-weight:600;
    background:var(--steel-900); color:#fff; border-radius:6px; padding:6px 11px;
  }
  .plan-chip b { color:var(--amber); }

  .content { padding:26px 30px 60px; max-width:1180px; }

  /* ---- Reusable bits ------------------------------------------------------ */
  .card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); }
  .pad { padding:20px; }
  .grid { display:grid; gap:16px; }
  .eyebrow {
    font-family:'Oswald'; text-transform:uppercase; letter-spacing:.16em; font-size:11px;
    font-weight:600; color:var(--muted);
  }
  .section-head { display:flex; align-items:flex-end; justify-content:space-between; margin:6px 2px 14px; gap:16px; }
  .section-head h2 { font-family:'Oswald'; font-weight:600; font-size:19px; margin:0; }
  .section-head p { margin:2px 0 0; color:var(--muted); font-size:12.5px; }

  .btn {
    border:1px solid var(--line); background:var(--card); color:var(--ink);
    border-radius:8px; padding:8px 13px; font-size:13px; font-weight:600; transition:.12s;
    display:inline-flex; align-items:center; gap:7px;
  }
  .btn:hover { border-color:var(--muted-soft); }
  .btn.primary { background:var(--amber); border-color:var(--amber-deep); color:var(--amber-ink); }
  .btn.primary:hover { background:var(--amber-deep); color:#fff; }
  .btn.dark { background:var(--steel-900); border-color:var(--steel-900); color:#fff; }
  .btn.dark:hover { background:var(--steel-700); }
  .btn.ghost { background:transparent; border-color:transparent; color:var(--muted); }
  .btn.ghost:hover { background:var(--bg); color:var(--ink); }
  .btn.sm { padding:5px 10px; font-size:12px; }
  .btn.danger { color:var(--red); border-color:var(--red-bg); }
  .btn.danger:hover { background:var(--red-bg); }

  .pill {
    display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600;
    border-radius:20px; padding:3px 10px; white-space:nowrap; text-transform:capitalize;
  }
  .pill .dot { width:7px; height:7px; border-radius:50%; }
  .pill.green  { background:var(--green-bg);  color:var(--green); }
  .pill.green .dot  { background:var(--green); }
  .pill.yellow { background:var(--yellow-bg); color:var(--yellow); }
  .pill.yellow .dot { background:var(--yellow); }
  .pill.red    { background:var(--red-bg);    color:var(--red); }
  .pill.red .dot    { background:var(--red); }
  .pill.neutral{ background:var(--bg); color:var(--muted); }
  .pill.neutral .dot{ background:var(--muted-soft); }

  .kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }
  .kpi { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 16px 14px; }
  .kpi .lab { color:var(--muted); font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; }
  .kpi .val { font-family:'Oswald'; font-weight:600; font-size:28px; margin-top:5px; line-height:1; }
  .kpi .foot { color:var(--muted); font-size:11.5px; margin-top:7px; }
  .kpi .foot b { color:var(--ink); }

  table { width:100%; border-collapse:collapse; }
  th {
    text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted);
    font-weight:600; padding:11px 14px; border-bottom:1px solid var(--line); font-family:'Oswald';
  }
  td { padding:13px 14px; border-bottom:1px solid var(--line-soft); font-size:13px; vertical-align:middle; }
  tr:last-child td { border-bottom:0; }
  tbody tr.click { cursor:pointer; }
  tbody tr.click:hover { background:#faf9f6; }
  .t-strong { font-weight:600; }
  .t-mut { color:var(--muted); }

  .health-banner {
    border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line);
    box-shadow:var(--shadow); background:var(--card); position:relative;
  }
  .health-banner .stripe { height:6px; width:100%; }
  .stripe.green  { background:repeating-linear-gradient(-45deg,var(--green),var(--green) 12px,#2b7049 12px,#2b7049 24px); }
  .stripe.yellow { background:repeating-linear-gradient(-45deg,var(--amber),var(--amber) 12px,var(--steel-900) 12px,var(--steel-900) 24px); }
  .stripe.red    { background:repeating-linear-gradient(-45deg,var(--red),var(--red) 12px,var(--steel-900) 12px,var(--steel-900) 24px); }
  .health-body { padding:22px 24px; display:flex; gap:22px; align-items:flex-start; }
  .gauge { flex:none; width:96px; text-align:center; }
  .gauge .ring {
    width:96px; height:96px; border-radius:50%; display:grid; place-items:center;
    font-family:'Oswald'; font-weight:700; text-transform:uppercase; font-size:14px; letter-spacing:.05em;
    color:#fff;
  }
  .gauge.green .ring  { background:radial-gradient(circle at 30% 25%, #4a9e6d, var(--green)); }
  .gauge.yellow .ring { background:radial-gradient(circle at 30% 25%, #e6ad3e, var(--yellow)); }
  .gauge.red .ring    { background:radial-gradient(circle at 30% 25%, #d16257, var(--red)); }
  .health-copy { flex:1; min-width:0; }
  .health-copy .factor { font-family:'Oswald'; font-size:20px; font-weight:600; margin:2px 0 6px; }
  .health-copy .explain { color:var(--ink); font-size:14px; }
  .health-copy .suggest {
    margin-top:14px; background:var(--bg); border-left:3px solid var(--amber); border-radius:0 8px 8px 0;
    padding:11px 14px; font-size:13px;
  }
  .health-copy .suggest b { font-family:'Oswald'; letter-spacing:.06em; text-transform:uppercase; font-size:11px; color:var(--amber-deep); display:block; margin-bottom:3px; }
  /* Same "suggested next step" treatment, usable anywhere (job/estimate cards) — not scoped to the dashboard banner. */
  .suggest-inline {
    margin-top:10px; background:var(--bg); border-left:3px solid var(--amber); border-radius:0 8px 8px 0;
    padding:9px 12px; font-size:12.5px;
  }
  .suggest-inline b { font-family:'Oswald'; letter-spacing:.06em; text-transform:uppercase; font-size:10.5px; color:var(--amber-deep); display:block; margin-bottom:3px; }

  /* ---- Kanban ------------------------------------------------------------- */
  .board { display:grid; grid-template-columns:repeat(6,minmax(190px,1fr)); gap:12px; overflow-x:auto; padding-bottom:8px; }
  .col { background:rgba(255,255,255,.55); border:1px solid var(--line); border-radius:var(--radius); display:flex; flex-direction:column; min-height:120px; }
  .col-head { padding:11px 12px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px; }
  .col-head .cname { font-family:'Oswald'; text-transform:uppercase; letter-spacing:.05em; font-size:12px; font-weight:600; }
  .col-head .cnum { margin-left:auto; font-size:11px; font-weight:600; color:var(--muted); background:var(--bg); border-radius:20px; padding:1px 8px; }
  .col-body { padding:10px; display:flex; flex-direction:column; gap:9px; }
  .jobcard { background:var(--card); border:1px solid var(--line); border-radius:9px; padding:11px; box-shadow:var(--shadow); cursor:pointer; transition:.12s; }
  .jobcard:hover { border-color:var(--muted-soft); transform:translateY(-1px); }
  .jobcard .veh { font-weight:600; font-size:13px; }
  .jobcard .cust { color:var(--muted); font-size:12px; margin-top:1px; }
  .jobcard .row { display:flex; align-items:center; justify-content:space-between; margin-top:9px; gap:8px; }
  .jobcard .tech { font-size:11px; color:var(--muted); display:flex; align-items:center; gap:5px; }
  .jobcard .tech .av { width:19px; height:19px; border-radius:50%; background:var(--steel-700); color:#fff; display:grid; place-items:center; font-size:9px; font-weight:600; }
  .col-empty { color:var(--muted-soft); font-size:12px; text-align:center; padding:14px 8px; }

  /* ---- Vehicle color tag + stale-job alert --------------------------------- */
  .veh-dot { width:9px; height:9px; border-radius:50%; display:inline-block; flex:none; margin-right:6px; border:1px solid rgba(0,0,0,.15); vertical-align:middle; }
  .color-picker { width:22px; height:22px; padding:0; border:1px solid var(--line); border-radius:6px; cursor:pointer; background:none; flex:none; }
  .color-picker::-webkit-color-swatch-wrapper { padding:2px; }
  .color-picker::-webkit-color-swatch { border:none; border-radius:4px; }
  .stale-badge {
    display:inline-flex; align-items:center; margin-left:7px;
    background:var(--red-bg); color:var(--red); font-size:10px; font-weight:700;
    text-transform:uppercase; letter-spacing:.03em; padding:2px 7px; border-radius:20px;
    animation: staleBlink 1.1s ease-in-out infinite;
  }
  @keyframes staleBlink { 0%,100% { opacity:1; } 50% { opacity:.25; } }

  /* ---- Detail drawer ------------------------------------------------------ */
  .overlay { position:fixed; inset:0; background:rgba(20,24,30,.44); z-index:40; opacity:0; pointer-events:none; transition:opacity .18s; }
  .overlay.open { opacity:1; pointer-events:auto; }
  .drawer {
    position:fixed; top:0; right:0; height:100vh; width:520px; max-width:94vw; background:var(--bg);
    z-index:50; transform:translateX(100%); transition:transform .22s cubic-bezier(.4,0,.2,1);
    box-shadow:var(--shadow-lg); display:flex; flex-direction:column;
  }
  .drawer.open { transform:none; }
  .drawer-head { background:var(--card); border-bottom:1px solid var(--line); padding:18px 22px; display:flex; align-items:flex-start; gap:12px; }
  .drawer-head h3 { font-family:'Oswald'; font-weight:600; font-size:19px; margin:0; }
  .drawer-head .x { margin-left:auto; }
  .drawer-body { padding:20px 22px 40px; overflow-y:auto; }
  .sub-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:14px; }
  .sub-card .h { padding:11px 15px; border-bottom:1px solid var(--line-soft); font-family:'Oswald'; text-transform:uppercase; letter-spacing:.08em; font-size:11px; font-weight:600; color:var(--muted); display:flex; align-items:center; gap:8px; }
  .sub-card .b { padding:14px 15px; }
  .line { display:flex; justify-content:space-between; gap:12px; padding:6px 0; font-size:13px; }
  .line + .line { border-top:1px dashed var(--line-soft); }
  .line .lt { color:var(--muted); }
  .kv { display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:13px; }
  .kv dt { color:var(--muted); }
  .kv dd { margin:0; text-align:right; font-weight:500; }
  .field { margin-bottom:14px; }
  .field label { display:block; font-size:11.5px; font-weight:600; color:var(--muted); margin-bottom:5px; text-transform:uppercase; letter-spacing:.06em; }
  .field input { width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px; font-size:13.5px; font-family:inherit; }
  .field input:focus { outline:2px solid var(--amber); outline-offset:1px; border-color:var(--amber-deep); }
  .flag {
    display:flex; gap:9px; padding:10px 12px; border-radius:8px; background:var(--yellow-bg); margin-bottom:8px; font-size:12.5px;
  }
  .flag.risk { background:var(--red-bg); }
  .flag svg { width:16px; height:16px; flex:none; margin-top:1px; }
  .flag .ftitle { font-weight:600; text-transform:capitalize; }

  .empty { text-align:center; color:var(--muted); padding:40px 20px; }
  .empty svg { width:34px; height:34px; opacity:.4; margin-bottom:8px; }

  .toast {
    position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px);
    background:var(--steel-900); color:#fff; padding:11px 18px; border-radius:9px; font-size:13px; font-weight:500;
    box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:.2s; z-index:60; display:flex; gap:9px; align-items:center;
  }
  .toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
  .toast svg { width:16px; height:16px; color:var(--amber); }

  .two-col { display:grid; grid-template-columns:1.6fr 1fr; gap:18px; align-items:start; }
  .avatar-sm { width:26px; height:26px; border-radius:50%; background:var(--steel-700); color:#fff; display:inline-grid; place-items:center; font-size:11px; font-weight:600; }

  /* ---- Responsive --------------------------------------------------------- */
  @media (max-width:900px){
    .shell { grid-template-columns:1fr; }
    .sidebar { position:static; height:auto; flex-direction:row; align-items:center; overflow-x:auto; }
    .brand { border-bottom:0; border-right:1px solid rgba(255,255,255,.07); white-space:nowrap; }
    .nav { display:flex; padding:8px; gap:4px; }
    .nav .group-label, .who { display:none; }
    .nav button { width:auto; white-space:nowrap; }
    .nav button .count { display:none; }
    .kpis { grid-template-columns:repeat(2,1fr); }
    .two-col { grid-template-columns:1fr; }
    .content, .topbar { padding-left:18px; padding-right:18px; }
  }
  @media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }
  :focus-visible { outline:2px solid var(--amber); outline-offset:2px; border-radius:4px; }

  /* ---- Print (Payroll "Print / Save as PDF") ------------------------------- */
  .print-only { display:none; }
  @media print {
    .sidebar, .topbar, .toast, .overlay, .drawer, .no-print { display:none !important; }
    .shell { display:block !important; }
    .content { padding:0 !important; max-width:none !important; }
    .print-only { display:block !important; }
    .card { box-shadow:none !important; border:1px solid #ccc !important; }
  }

  /* ---- Branded printable documents (invoice/estimate) ----------------------
     Always red/black regardless of the app's own theme or dark mode — these
     are printed for a customer, not viewed as part of the app UI. */
  #printArea { padding:36px; max-width:680px; margin:0 auto; font-family:'Inter',sans-serif; color:#111; background:#fff; }
  .doc-head { display:flex; align-items:flex-start; justify-content:space-between; border-bottom:3px solid #c0392b; padding-bottom:16px; margin-bottom:22px; gap:16px; }
  .doc-brand { display:flex; align-items:center; gap:12px; }
  .doc-logo { width:52px; height:52px; object-fit:contain; flex:none; }
  .doc-shopname { font-family:'Oswald'; font-size:20px; font-weight:700; color:#111; }
  .doc-type { text-align:right; flex:none; }
  .doc-type .label { font-family:'Oswald'; font-size:22px; font-weight:700; color:#c0392b; letter-spacing:.04em; text-transform:uppercase; }
  .doc-type .num { font-size:12px; color:#555; margin-top:2px; }
  .doc-meta { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:22px; font-size:13px; }
  .doc-meta .lab { text-transform:uppercase; font-size:10.5px; letter-spacing:.05em; color:#888; margin-bottom:3px; }
  .doc-table { width:100%; border-collapse:collapse; margin-bottom:18px; }
  .doc-table th { text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:#888; border-bottom:2px solid #111; padding:6px 8px; }
  .doc-table td { padding:8px; border-bottom:1px solid #ddd; font-size:13px; }
  .doc-table td.num, .doc-table th.num { text-align:right; }
  .doc-totals { margin-left:auto; width:260px; }
  .doc-totals .line { display:flex; justify-content:space-between; padding:5px 0; font-size:13.5px; }
  .doc-totals .line.total { border-top:2px solid #111; font-weight:700; font-size:16px; padding-top:8px; margin-top:4px; }
  .doc-totals .line.due { color:#c0392b; font-weight:700; }
  .doc-footer { margin-top:30px; padding-top:14px; border-top:1px solid #ddd; font-size:11.5px; color:#888; text-align:center; }