/* Garage Job Tracker — stylesheet */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --bg: #f4f5f7;
    --surface: #ffffff;
    --border: #e2e4e9;
    --border-strong: #c8ccd6;
    --text: #111827;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --primary: #1a1a2e;
    --primary-hover: #16213e;
    --accent-blue: #185FA5;
    --accent-blue-bg: #E6F1FB;
    --accent-blue-text: #0C447C;
    --accent-amber: #854F0B;
    --accent-amber-bg: #FAEEDA;
    --accent-amber-text: #633806;
    --accent-green: #3B6D11;
    --accent-green-bg: #EAF3DE;
    --accent-green-text: #27500A;
    --accent-red: #A32D2D;
    --accent-red-bg: #FCEBEB;
    --accent-red-text: #791F1F;
    --radius: 8px;
    --radius-lg: 12px;
    --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
    --shadow-md: 0 4px 16px rgba(0,0,0,.12);
  }




  /* ── Returning vehicle badge ── */
  .returning-badge { display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:2px 9px;border-radius:11px;background:#fff7ed;color:#9a3412;border:1px solid #fdba74;white-space:nowrap; }
  body.dark-mode .returning-badge { background:#3a2410;color:#fdba74;border-color:#7c4a1d; }
  .returning-notice { display:flex;align-items:center;gap:8px;font-size:12px;color:#9a3412;background:#fff7ed;border:1px solid #fdba74;border-radius:8px;padding:8px 12px;margin-top:6px; }
  body.dark-mode .returning-notice { background:#3a2410;color:#fdba74;border-color:#7c4a1d; }

  /* ── Week view ── */
  .cal-mode-btns { display:flex;gap:4px;background:rgba(255,255,255,.12);border-radius:7px;padding:3px; }
  .cal-mode-btn { font-family:inherit;font-size:12px;font-weight:500;padding:4px 12px;border-radius:5px;border:none;background:transparent;color:rgba(255,255,255,.7);cursor:pointer;transition:background .12s,color .12s; }
  .cal-mode-btn.active { background:#fff;color:var(--primary); }
  body.dark-mode .cal-mode-btn.active { background:#e5e7ef;color:#1a1d27; }

  .week-grid { display:grid !important;grid-template-columns:repeat(7,minmax(0,1fr)) !important; }
  .week-col { border-right:1px solid var(--border);min-height:340px;padding:8px 6px;cursor:pointer;transition:background .12s;min-width:0;overflow:hidden; }
  .week-col:nth-child(7n) { border-right:none; }
  .week-col:hover { background:#f0f4ff; }
  body.dark-mode .week-col:hover { background:#1e2435; }
  .week-col.today { background:#eff6ff; }
  body.dark-mode .week-col.today { background:#1a2435; }
  .week-col.selected { background:#e8f0fe;outline:2px solid var(--accent-blue);outline-offset:-2px; }
  body.dark-mode .week-col.selected { background:#1c2940; }
  .week-col-head { text-align:center;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--border); }
  .week-col-dow { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted); }
  .week-col-num { font-size:18px;font-weight:700;color:var(--text);width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;margin-top:2px; }
  .week-col.today .week-col-num { background:var(--primary);color:#fff; }
  .week-job { background:var(--surface);border:1px solid var(--border);border-radius:7px;padding:6px 8px;margin-bottom:5px;font-size:11px;cursor:pointer;transition:box-shadow .12s,border-color .12s; }
  .week-job:hover { box-shadow:var(--shadow-md);border-color:var(--border-strong); }
  .week-job-reg { font-family:'Courier New',monospace;font-weight:700;font-size:11px;display:flex;align-items:center;gap:4px; }
  .week-job-customer { color:var(--text);font-weight:500;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
  .week-job-vehicle { color:var(--text-muted);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
  .week-job-tasks { color:var(--text-secondary);font-size:10px;margin-top:2px;display:flex;align-items:center;gap:3px; }
  .week-job.wj-pending     { border-left:3px solid #d97706; }
  .week-job.wj-in-progress { border-left:3px solid #2563eb; }
  .week-job.wj-completed   { border-left:3px solid #16a34a; }
  .week-job.wj-overdue     { border-left:3px solid #dc2626; }
  @media (max-width: 700px) {
    .week-grid { grid-template-columns:1fr; }
    .week-col { min-height:auto;border-right:none;border-bottom:1px solid var(--border); }
  }

  /* ── Today summary strip ── */
  .today-strip { display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--accent-blue);border-radius:var(--radius-lg);padding:12px 16px;margin-bottom:16px;box-shadow:var(--shadow); }
  .today-strip-title { font-size:13px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:6px; }
  .today-strip-items { display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--text-secondary); }
  .today-strip-items span { display:flex;align-items:center;gap:5px; }
  .ts-num { font-weight:700;font-size:13px; }
  .ts-in .ts-num { color:#2563eb; }
  .ts-out .ts-num { color:#dc2626; }
  .ts-overdue .ts-num { color:var(--accent-red); }
  .ts-progress .ts-num { color:var(--accent-blue); }
  .today-strip-clear { font-size:12px;color:var(--accent-green-text);background:var(--accent-green-bg);border:1px solid #C0DD97;padding:3px 10px;border-radius:12px;font-weight:600; }
  body.dark-mode .today-strip-clear { border-color:#2e5a38; }

  /* ── Dark mode ── */
  body.dark-mode {
    --bg: #0f1117;
    --surface: #1a1d27;
    --border: #2a2e3d;
    --border-strong: #3a3f52;
    --text: #e5e7ef;
    --text-secondary: #9aa0b4;
    --text-muted: #6b7186;
    --primary: #2d3250;
    --primary-hover: #383e63;
    --accent-blue: #5b9bd5;
    --accent-blue-bg: #1a2940;
    --accent-blue-text: #8fc1ee;
    --accent-amber: #d4a04a;
    --accent-amber-bg: #3a2d14;
    --accent-amber-text: #eec98a;
    --accent-green: #7bb55a;
    --accent-green-bg: #1e3018;
    --accent-green-text: #a8d88a;
    --accent-red: #d96666;
    --accent-red-bg: #3d1a1a;
    --accent-red-text: #f0a0a0;
    --shadow: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
    --shadow-md: 0 4px 16px rgba(0,0,0,.5);
  }
  body.dark-mode .cat-mot     { background: #3a3520; }
  body.dark-mode .cat-service { background: #1c3242; }
  body.dark-mode .cat-body    { background: #322642; }
  body.dark-mode .cat-other   { background: #2e3a18; }
  body.dark-mode .cat-mot.all-done, body.dark-mode .cat-service.all-done,
  body.dark-mode .cat-body.all-done, body.dark-mode .cat-other.all-done { background: #1e4028; }
  body.dark-mode .cat-name, body.dark-mode .cat-progress { color: rgba(255,255,255,.6); }
  body.dark-mode .job-card.all-complete { background: linear-gradient(135deg, #16261a 0%, #1a3020 100%); border-color: #2e5a38; }
  body.dark-mode .task-row.done { background: #16261a; border-color: #2e5a38; }
  body.dark-mode .task-row:hover { background: #1e2435; border-color: #2d3a5c; }
  body.dark-mode .task-completed-at { background: #16261a; border-color: #2e5a38; color: #9aa0b4; }
  body.dark-mode .hl-card.hl-unread { background: #161d2c; }
  body.dark-mode .cal-cell.today { background: #1a2435; }
  body.dark-mode .cal-cell:hover { background: #1e2435; }
  body.dark-mode .cal-cell.selected { background: #1c2940; }
  body.dark-mode .cal-cell.other-month { background: #14161e; }
  body.dark-mode .archived-card { background: #14161e; }
  body.dark-mode .archived-banner { background: #1e212d; border-color: #2a2e3d; color: #9aa0b4; }
  body.dark-mode .modal-cat-add { background: #14161e; }
  body.dark-mode .login-box { background: var(--surface); }
  body.dark-mode .login-logo i, body.dark-mode .login-logo-text { color: var(--text); }
  body.dark-mode .ps-toolbar { background: #1e212d; border-color: #2a2e3d; }

  body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; min-height: 100vh; transition: background .25s, color .25s; }
  .app { max-width: 1180px; margin: 0 auto; padding: 24px 16px 60px; }
  .header { background: var(--primary); color: #fff; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; height: 56px; position: sticky; top: 0; z-index: 50; box-shadow: var(--shadow-md); }
  .header-brand { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
  .header-brand i { font-size: 20px; opacity: .85; }
  .header-logo { height: 32px; width: auto; display: block; border-radius: 6px; image-rendering: -webkit-optimize-contrast; }
  .header-sub { font-size: 11px; font-weight: 400; opacity: .5; margin-left: 4px; }

  /* ── View tabs (Jobs / Calendar) ── */
  .view-tabs { display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px; margin-bottom: 18px; width: fit-content; }
  .view-tab { display: flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; color: var(--text-secondary); transition: background .15s, color .15s; border: none; background: none; }
  .view-tab.active { background: var(--primary); color: #fff; }
  .view-tab:hover:not(.active) { background: var(--bg); color: var(--text); }

  .toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
  .search-wrap { position: relative; flex: 1; min-width: 180px; }
  .search-wrap i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 16px; pointer-events: none; }
  .search-wrap input { padding-left: 34px; }
  input[type="text"], input[type="tel"], input[type="number"], input[type="date"], select, textarea {
    width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius);
    font-family: inherit; font-size: 13px; color: var(--text); background: var(--surface);
    outline: none; transition: border-color .15s, box-shadow .15s;
  }
  input:focus, select:focus, textarea:focus { border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(24,95,165,.12); }
  select { cursor: pointer; }
  textarea { resize: vertical; min-height: 72px; }
  .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius); font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid transparent; transition: background .15s, box-shadow .15s; }
  .btn-primary { background: var(--primary); color: #fff; }
  .btn-primary:hover { background: var(--primary-hover); box-shadow: var(--shadow); }
  .btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border); }
  .btn-ghost:hover { background: var(--bg); border-color: var(--border-strong); }
  .btn-icon { background: none; border: none; cursor: pointer; padding: 4px 6px; border-radius: 6px; color: var(--text-secondary); font-size: 16px; display: inline-flex; align-items: center; transition: background .12s; }
  .btn-icon:hover { background: var(--bg); color: var(--text); }

  .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
  .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; box-shadow: var(--shadow); }
  .stat-label { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 4px; }
  .stat-value { font-size: 24px; font-weight: 600; color: var(--text); }
  .stat-card.stat-overdue .stat-value { color: var(--accent-red); }
  .stat-card.stat-clickable { cursor: pointer; transition: box-shadow .15s, transform .12s, border-color .15s; }
  .stat-card.stat-clickable:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--border-strong); }
  .jobs-list { display: flex; flex-direction: column; gap: 10px; }
  .deleted-badge { font-size:10px;font-weight:700;background:#fee2e2;color:#991b1b;padding:2px 8px;border-radius:12px;border:1px solid #fca5a5; }
  .archived-card { background: #fafafa; border-color: #e5e7eb; opacity: .88; }
  .archived-banner { display:flex;align-items:center;gap:8px;font-size:11px;font-weight:500;color:#6b7280;background:#f3f4f6;border-radius:6px;padding:6px 10px;margin-bottom:10px;border:1px solid #e5e7eb; }
  .restore-btn { background:var(--surface);border:1px solid var(--border);color:var(--accent-blue);font-size:11px;font-weight:600;padding:3px 10px;border-radius:6px;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:4px;transition:background .12s; }
  .restore-btn:hover { background:var(--accent-blue-bg); }

  /* ── Job card ── */
  .job-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow); transition: box-shadow .15s, border-color .15s; }
  .job-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
  .job-card.overdue { border-left: 3px solid var(--accent-red); }
  .job-card.all-complete { border-color: #78C832; background: linear-gradient(135deg, #f6fff0 0%, #edfad9 100%); }
  .job-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; cursor: pointer; }
  .job-reg { font-size: 16px; font-weight: 700; letter-spacing: .04em; color: var(--text); font-family: 'Courier New', monospace; background: var(--bg); padding: 2px 8px; border-radius: 4px; border: 1px solid var(--border); }
  .job-customer { font-size: 14px; font-weight: 500; color: var(--text); }
  .job-vehicle { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
  .status-badge { font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; cursor: pointer; border: 1px solid transparent; transition: opacity .12s; }
  .status-badge:hover { opacity: .8; }
  .s-pending { background: var(--accent-amber-bg); color: var(--accent-amber-text); border-color: #FAC775; }
  .s-in-progress { background: var(--accent-blue-bg); color: var(--accent-blue-text); border-color: #B5D4F4; }
  .s-completed { background: var(--accent-green-bg); color: var(--accent-green-text); border-color: #C0DD97; }
  .s-overdue { background: var(--accent-red-bg); color: var(--accent-red-text); border-color: #F7C1C1; }
  .job-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--text-secondary); }
  .job-meta span { display: flex; align-items: center; gap: 4px; }
  .job-meta i { font-size: 13px; }
  .overdue-warn { font-size: 11px; color: var(--accent-red); display: flex; align-items: center; gap: 4px; margin-top: 4px; font-weight: 500; }

  /* ── Category cards ── */
  .cat-section { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; }
  .cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .cat-card { border-radius: 10px; padding: 10px 12px; cursor: pointer; border: 2px solid transparent; transition: transform .15s, box-shadow .15s, border-color .15s, background .2s; position: relative; overflow: hidden; user-select: none; }
  .cat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.12); }
  .cat-card.active { border-color: rgba(0,0,0,.2); box-shadow: 0 2px 8px rgba(0,0,0,.15); }
  .cat-mot { background: #fefce8; } .cat-service { background: #e0f2fe; } .cat-body { background: #f3e8ff; } .cat-other { background: #d9f99d; }
  .cat-mot.all-done, .cat-service.all-done, .cat-body.all-done, .cat-other.all-done { background: #bbf7d0; }
  .cat-name { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: rgba(0,0,0,.55); margin-bottom: 4px; }
  .cat-progress { font-size: 11px; font-weight: 600; color: rgba(0,0,0,.5); }
  .cat-done-badge { position: absolute; top: 6px; right: 6px; width: 16px; height: 16px; border-radius: 50%; background: #22c55e; display: flex; align-items: center; justify-content: center; }
  .cat-done-badge i { font-size: 10px; color: #fff; }

  /* ── Task panel ── */
  .task-panel { margin-top: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; animation: panelIn .15s ease; }
  @keyframes panelIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
  .task-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .task-panel-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); }
  .task-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
  .task-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; background: var(--bg); border: 1px solid var(--border); cursor: pointer; transition: background .1s; }
  .task-row:hover { background: #edf2ff; border-color: #c7d7f7; }
  .task-row.done { background: #f0fdf4; border-color: #c0e8c0; }
  .task-checkbox { width: 16px; height: 16px; border-radius: 4px; border: 2px solid var(--border-strong); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .12s, border-color .12s; }
  .task-row.done .task-checkbox { background: #22c55e; border-color: #22c55e; }
  .task-row.done .task-checkbox::after { content: ''; display: block; width: 8px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translateY(-1px); }
  .task-row.done .task-label { text-decoration: line-through; color: var(--text-muted); }
  .task-completed-at { font-size: 10px; color: #6b7280; white-space: nowrap; display: flex; align-items: center; gap: 3px; flex-shrink: 0; background: #f0fdf4; border: 1px solid #c0e8c0; padding: 1px 7px; border-radius: 10px; }
  .task-completed-at i { font-size: 11px; color: #22c55e; }
  .task-label { flex: 1; font-size: 12px; color: var(--text); }
  .task-edit-input { flex:1; padding:2px 6px; border:1.5px solid var(--accent-blue); border-radius:4px; font-size:12px; font-family:inherit; outline:none; box-shadow:0 0 0 3px rgba(24,95,165,.1); }
  .task-edit-hint { font-size:9px; color:var(--text-muted); margin-left:6px; opacity:0; transition:opacity .15s; pointer-events:none; }
  .task-row:hover .task-edit-hint { opacity:1; }
  .task-remove { opacity: 0; transition: opacity .1s; }
  .task-row:hover .task-remove { opacity: 1; }
  .add-task-row { display: flex; gap: 6px; margin-top: 6px; }
  .add-task-row input { font-size: 12px; padding: 6px 8px; }
  .add-task-row button { flex-shrink: 0; font-size: 12px; padding: 6px 10px; white-space: nowrap; }
  .job-notes { margin-top: 8px; font-size: 12px; color: var(--text-secondary); border-top: 1px solid var(--border); padding-top: 8px; white-space: pre-wrap; }

  .empty-state { text-align: center; padding: 60px 20px; color: var(--text-secondary); }
  .empty-state i { font-size: 40px; display: block; margin-bottom: 12px; opacity: .3; }
  .empty-state p { font-size: 14px; }

  /* ══════════════════════════════
     CALENDAR VIEW
  ══════════════════════════════ */
  .cal-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
  .cal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); background: var(--primary); color: #fff; }
  .cal-month-label { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
  .cal-nav { display: flex; gap: 4px; }
  .cal-nav button { background: rgba(255,255,255,.12); border: none; color: #fff; width: 30px; height: 30px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: background .12s; }
  .cal-nav button:hover { background: rgba(255,255,255,.22); }
  .cal-nav-today { background: rgba(255,255,255,.15); border: none; color: #fff; padding: 0 12px; height: 30px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 500; font-family: inherit; transition: background .12s; }
  .cal-nav-today:hover { background: rgba(255,255,255,.25); }
  .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
  .cal-dow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); text-align: center; padding: 10px 4px 8px; border-bottom: 1px solid var(--border); }
  .cal-cell { min-height: 116px; padding: 6px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s; position: relative; vertical-align: top; }
  .cal-cell:nth-child(7n) { border-right: none; }
  .cal-cell:hover { background: #f0f4ff; }
  .cal-cell.other-month { background: #fafafa; }
  .cal-cell.other-month .cal-day-num { color: var(--text-muted); }
  .cal-cell.today { background: #eff6ff; }
  .cal-cell.today .cal-day-num { background: var(--primary); color: #fff; }
  .cal-cell.selected { background: #e8f0fe; outline: 2px solid var(--accent-blue); outline-offset: -2px; }
  .cal-day-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
  .cal-job-pill { display: block; font-size: 10px; font-weight: 600; padding: 2px 5px; border-radius: 4px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
  .cal-job-pill.cp-pending { background: var(--accent-amber-bg); color: var(--accent-amber-text); }
  .cal-job-pill.cp-in-progress { background: var(--accent-blue-bg); color: var(--accent-blue-text); }
  .cal-job-pill.cp-completed { background: var(--accent-green-bg); color: var(--accent-green-text); }
  .cal-job-pill.cp-overdue { background: var(--accent-red-bg); color: var(--accent-red-text); }
  .cal-more { font-size: 10px; color: var(--accent-blue); font-weight: 600; padding: 1px 4px; cursor: pointer; }

  /* Day panel (slide in below calendar) */
  .day-panel { margin-top: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; animation: panelIn .18s ease; }
  .day-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--bg); }
  .day-panel-title { font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
  .day-panel-count { font-size: 11px; font-weight: 500; background: var(--primary); color: #fff; border-radius: 12px; padding: 2px 8px; }
  .day-panel-jobs { padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; }
  .day-job-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: background .1s, border-color .1s; }
  .day-job-row:hover { background: #edf2ff; border-color: #c7d7f7; }
  .day-job-row.djr-overdue { border-left: 3px solid var(--accent-red); }
  .day-job-row.djr-complete { background: #f0fdf4; border-color: #c0e8c0; }
  .djr-reg { font-size: 13px; font-weight: 700; font-family: 'Courier New', monospace; letter-spacing: .04em; background: var(--surface); border: 1px solid var(--border); padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
  .djr-info { flex: 1; min-width: 0; }
  .djr-customer { font-size: 13px; font-weight: 500; }
  .djr-vehicle { font-size: 11px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .djr-dates { font-size: 11px; color: var(--text-muted); margin-top: 2px; display: flex; gap: 10px; flex-wrap: wrap; }

  /* ── Legend ── */
  .cal-legend { display: flex; gap: 14px; flex-wrap: wrap; padding: 10px 20px; border-top: 1px solid var(--border); background: var(--bg); }
  .cal-legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-secondary); }
  .cal-legend-dot { width: 10px; height: 10px; border-radius: 3px; }

  /* ── Modal ── */
  .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: none; align-items: flex-start; justify-content: center; z-index: 200; padding: 32px 16px; overflow-y: auto; }
  .modal-overlay.open { display: flex; }
  .modal { background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--border); width: 100%; max-width: 620px; box-shadow: 0 20px 60px rgba(0,0,0,.2); animation: slideUp .2s ease; }
  @keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
  .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 0; }
  .modal-title { font-size: 16px; font-weight: 600; color: var(--text); }
  .tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin: 12px 20px 0; }
  .tab { font-size: 13px; padding: 8px 14px; cursor: pointer; border-bottom: 2px solid transparent; color: var(--text-secondary); font-weight: 500; transition: color .12s; margin-bottom: -1px; }
  .tab.active { border-bottom-color: var(--primary); color: var(--text); }
  .tab:hover:not(.active) { color: var(--text); }
  .modal-body { padding: 16px 20px; }
  .field-group { margin-bottom: 14px; }
  .field-group label { display: block; font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .04em; }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .section-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin: 16px 0 8px; }
  .modal-footer { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 20px 20px; border-top: 1px solid var(--border); margin-top: 4px; }
  .audit-list { max-height: 280px; overflow-y: auto; }
  .audit-entry { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12px; line-height: 1.5; }
  .audit-entry:last-child { border-bottom: none; }
  .audit-ts { color: var(--text-muted); font-size: 11px; display: block; margin-bottom: 2px; }
  .audit-msg { color: var(--text-secondary); }


  /* ══════════════════════════════
     TASK HISTORY VIEW
  ══════════════════════════════ */
  .history-toolbar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; box-shadow: var(--shadow); }
  .history-filter-group { display: flex; flex-direction: column; gap: 5px; }
  .hf-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
  .hf-range-btns { display: flex; gap: 4px; }
  .hf-range-btn { font-family: inherit; font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
  .hf-range-btn:hover { background: var(--bg); border-color: var(--border-strong); color: var(--text); }
  .hf-range-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
  .hf-summary { margin-left: auto; font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .hf-summary-pill { background: var(--accent-green-bg); color: var(--accent-green-text); border: 1px solid #C0DD97; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 12px; }

  .history-day-group { margin-bottom: 20px; }
  .history-day-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
  .history-day-label { font-size: 13px; font-weight: 700; color: var(--text); }
  .history-day-count { font-size: 11px; font-weight: 600; background: var(--primary); color: #fff; padding: 2px 8px; border-radius: 10px; }
  .history-day-line { flex: 1; height: 1px; background: var(--border); }

  .history-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 5px; transition: box-shadow .12s; }
  .history-row:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
  .history-row.hr-undone { opacity: .65; background: #fafafa; }
  .history-tick { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .history-tick.ht-done { background: #dcfce7; }
  .history-tick.ht-done i { color: #16a34a; font-size: 13px; }
  .history-tick.ht-undone { background: #fee2e2; }
  .history-tick.ht-undone i { color: #dc2626; font-size: 13px; }
  .history-task-name { font-size: 13px; font-weight: 500; color: var(--text); flex: 1; min-width: 0; }
  .history-row.hr-undone .history-task-name { text-decoration: line-through; color: var(--text-muted); }
  .history-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
  .history-time { font-size: 11px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
  .history-reg { font-size: 11px; font-weight: 700; font-family: "Courier New", monospace; background: var(--bg); border: 1px solid var(--border); padding: 1px 7px; border-radius: 4px; white-space: nowrap; cursor: pointer; }
  .history-reg:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
  .history-customer { font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
  .history-cat-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
  .hcat-mot { background: #fefce8; color: #713f12; border: 1px solid #fde68a; }
  .hcat-service { background: #e0f2fe; color: #0c447c; border: 1px solid #bae6fd; }
  .hcat-body { background: #f3e8ff; color: #6b21a8; border: 1px solid #e9d5ff; }
  .hcat-other { background: #d9f99d; color: #365314; border: 1px solid #bef264; }

  /* ── Job-wise grouping ── */
  .history-job-group { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; overflow: hidden; box-shadow: var(--shadow); }
  .history-job-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: var(--bg); border-bottom: none; cursor: pointer; transition: background .12s; }
  .history-job-header.open { border-bottom: 1px solid var(--border); }
  .history-job-header:hover { background: var(--accent-blue-bg); }
  .history-job-reg { font-size: 12px; font-weight: 700; font-family: "Courier New", monospace; background: var(--surface); border: 1px solid var(--border-strong); padding: 2px 9px; border-radius: 5px; white-space: nowrap; }
  .history-job-customer { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .history-job-vehicle { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .history-job-count { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--accent-green-text); background: var(--accent-green-bg); border: 1px solid #C0DD97; padding: 2px 9px; border-radius: 11px; white-space: nowrap; }
  body.dark-mode .history-job-count { border-color: #2e5a38; }
  .history-job-remaining-pill { font-size: 11px; font-weight: 600; color: var(--accent-amber-text); background: var(--accent-amber-bg); border: 1px solid #EBCB93; padding: 2px 9px; border-radius: 11px; white-space: nowrap; }
  body.dark-mode .history-job-remaining-pill { border-color: #6b4e1d; }
  .history-job-status { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; white-space: nowrap; text-transform: uppercase; letter-spacing: .04em; }
  .hjs-open { background: var(--accent-blue-bg); color: var(--accent-blue-text); border: 1px solid #B3D4F0; }
  .hjs-completed { background: var(--accent-green-bg); color: var(--accent-green-text); border: 1px solid #C0DD97; }
  body.dark-mode .hjs-open { border-color: #2d4a6b; }
  body.dark-mode .hjs-completed { border-color: #2e5a38; }
  .history-remaining-head { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-amber-text); margin: 8px 4px 4px; cursor: pointer; user-select: none; padding: 5px 6px; border-radius: 6px; transition: background .12s; }
  .history-remaining-head:hover { background: var(--accent-amber-bg); }
  .history-remaining-head .hr-chevron { margin-left: auto; font-size: 12px; transition: transform .15s; }
  .history-remaining-head.open .hr-chevron { transform: rotate(180deg); }
  .history-remaining-body { display: none; }
  .history-remaining-body.open { display: block; animation: panelIn .15s ease; }
  .history-remaining-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 6px; margin-bottom: 2px; background: var(--accent-amber-bg); }
  .history-remaining-row .history-remaining-name { font-size: 12.5px; color: var(--text); flex: 1; min-width: 0; }
  .history-remaining-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px dashed var(--accent-amber); flex-shrink: 0; }
  .hf-summary-stat { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 12px; white-space: nowrap; }
  .hfs-jobs { background: var(--accent-blue-bg); color: var(--accent-blue-text); border: 1px solid #B3D4F0; }
  .hfs-remaining { background: var(--accent-amber-bg); color: var(--accent-amber-text); border: 1px solid #EBCB93; }
  body.dark-mode .hfs-jobs { border-color: #2d4a6b; }
  body.dark-mode .hfs-remaining { border-color: #6b4e1d; }
  .history-job-tasks { padding: 8px 10px; display: none; }
  .history-job-tasks.open { display: block; animation: panelIn .15s ease; }
  .hj-chevron { font-size: 14px; color: var(--text-muted); transition: transform .15s; flex-shrink: 0; }
  .history-job-header.open .hj-chevron { transform: rotate(180deg); }
  .hj-open-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); cursor: pointer; transition: border-color .12s, color .12s; flex-shrink: 0; }
  .hj-open-btn:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
  .hj-open-btn i { font-size: 13px; }
  .history-job-tasks .history-row { border: none; border-radius: 6px; margin-bottom: 2px; padding: 7px 10px; }
  .history-job-tasks .history-row:hover { background: var(--bg); box-shadow: none; }
  body.dark-mode .history-job-header { background: #1e212d; }
  body.dark-mode .history-job-header:hover { background: #1c2940; }
  body.dark-mode .history-row.hr-undone { background: #14161e; }

  .history-empty { text-align: center; padding: 60px 20px; color: var(--text-secondary); }
  .history-empty i { font-size: 40px; display: block; margin-bottom: 12px; opacity: .25; }
  .history-empty p { font-size: 14px; }

  @media (max-width: 600px) {
    .stats { grid-template-columns: 1fr 1fr; }
    .field-row { grid-template-columns: 1fr; }
    .toolbar { flex-direction: column; align-items: stretch; }
    .cat-grid { grid-template-columns: repeat(2, 1fr); }
    .cal-cell { min-height: 60px; }
  }
  /* tab bar scrolls sideways on phones instead of overflowing */
  @media (max-width: 860px) {
    .view-tabs { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .view-tabs::-webkit-scrollbar { display: none; }
    .view-tab { white-space: nowrap; flex-shrink: 0; }
    .ir-ctrl { width: 100%; }
    .ps-toolbar-btns { width: 100%; }
  }


  /* ── Modal task editor ── */
  .modal-cat-block { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
  .modal-cat-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
  .modal-cat-header.mch-mot     { background: #fefce8; color: #713f12; }
  .modal-cat-header.mch-service { background: #e0f2fe; color: #0c447c; }
  .modal-cat-header.mch-body    { background: #f3e8ff; color: #6b21a8; }
  .modal-cat-header.mch-other   { background: #d9f99d; color: #365314; }
  .modal-cat-tasks { padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; background: var(--surface); }
  .modal-task-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; font-size: 12px; }
  .modal-task-label { flex: 1; }
  .modal-task-predef { font-size: 10px; background: #f0f4ff; color: #4338ca; border: 1px solid #c7d2fe; padding: 1px 6px; border-radius: 8px; white-space: nowrap; }
  .modal-cat-add { display: flex; gap: 6px; padding: 6px 10px; border-top: 1px solid var(--border); background: #fafafa; }
  .modal-cat-add input { font-size: 12px; padding: 5px 8px; }
  .modal-cat-add button { flex-shrink: 0; font-size: 12px; padding: 5px 10px; white-space: nowrap; }


  /* ── Highlights tab badge ── */
  .tab-badge { display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ef4444;color:#fff;font-size:10px;font-weight:700;margin-left:4px;line-height:1; }
  .view-tab.active .tab-badge { background:rgba(255,255,255,.3); }

  /* ── Highlights view ── */
  .highlights-toolbar { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:16px; }
  .highlights-toolbar-left { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
  .hl-filter-btn { font-family:inherit;font-size:12px;font-weight:500;padding:5px 12px;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);cursor:pointer;transition:background .12s,border-color .12s,color .12s; }
  .hl-filter-btn:hover { background:var(--bg);color:var(--text); }
  .hl-filter-btn.active { background:var(--primary);border-color:var(--primary);color:#fff; }
  .hl-mark-all { font-family:inherit;font-size:12px;font-weight:500;padding:5px 14px;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--accent-blue);cursor:pointer;transition:background .12s; }
  .hl-mark-all:hover { background:var(--accent-blue-bg); }

  .hl-empty { text-align:center;padding:60px 20px;color:var(--text-secondary); }
  .hl-empty i { font-size:40px;display:block;margin-bottom:12px;opacity:.25; }
  .hl-empty p { font-size:14px; }

  .hl-day-group { margin-bottom:12px; }
  .hl-day-header { display:flex;align-items:center;gap:10px;margin-bottom:6px;cursor:pointer;padding:8px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);user-select:none;transition:background .12s; }
  .hl-day-header:hover { background:var(--bg); }
  .hl-day-header.collapsed { margin-bottom:0;border-radius:var(--radius); }
  .hl-day-chevron { font-size:14px;color:var(--text-muted);transition:transform .2s;margin-left:auto; }
  .hl-day-header.collapsed .hl-day-chevron { transform:rotate(-90deg); }
  .hl-day-body { overflow:hidden;transition:max-height .25s ease; }
  .hl-day-body.collapsed { max-height:0 !important; }
  .hl-day-label { font-size:13px;font-weight:700;color:var(--text); }
  .hl-day-line { flex:1;height:1px;background:var(--border); }

  .hl-card { display:flex;align-items:center;gap:10px;padding:7px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:4px;cursor:pointer;transition:box-shadow .15s,border-color .15s;position:relative; }
  .hl-card:hover { box-shadow:var(--shadow-md);border-color:var(--border-strong); }
  .hl-card.hl-unread { border-left:3px solid #3b82f6;background:#fafcff; }
  .hl-card.hl-unread .hl-title { color:var(--text); }
  .hl-avatar { width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;font-weight:700;color:#fff; }
  .hl-av-pending    { background:#d97706; }
  .hl-av-in-progress { background:#2563eb; }
  .hl-av-completed  { background:#16a34a; }
  .hl-av-overdue    { background:#dc2626; }
  .hl-body { flex:1;min-width:0; }
  .hl-title { font-size:12px;font-weight:600;color:var(--text); }
  .hl-meta { font-size:11px;color:var(--text-secondary);display:flex;flex-wrap:wrap;gap:8px; }
  .hl-meta span { display:flex;align-items:center;gap:3px; }
  .hl-desc { font-size:12px;color:var(--text-muted);line-height:1.5; }
  .hl-time { font-size:10px;color:var(--text-muted);white-space:nowrap;flex-shrink:0; }
  .hl-unread-dot { width:7px;height:7px;border-radius:50%;background:#3b82f6;flex-shrink:0; }
  .hl-read-dot { width:7px;height:7px;border-radius:50%;background:transparent;flex-shrink:0; }
  .hl-status-badge { display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;border:1px solid transparent;margin-top:4px; }
  .hl-action-btn { font-family:inherit;font-size:11px;font-weight:500;padding:3px 7px;border-radius:6px;border:1px solid var(--border);cursor:pointer;display:inline-flex;align-items:center;gap:3px;white-space:nowrap;transition:background .12s; }
  .hl-btn-read   { background:var(--accent-green-bg);color:var(--accent-green-text);border-color:#C0DD97; }
  .hl-btn-read:hover { background:#d4edba; }
  .hl-btn-unread { background:var(--accent-blue-bg);color:var(--accent-blue-text);border-color:#B5D4F4; }
  .hl-btn-unread:hover { background:#cce4f7; }

  /* ── Print preview overlay ── */
  .print-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: none; align-items: flex-start; justify-content: center; z-index: 300; padding: 24px 16px; overflow-y: auto; }
  .print-overlay.open { display: flex; }
  .print-sheet {
    background: #fff; width: 100%; max-width: 920px; border-radius: 10px;
    box-shadow: 0 24px 80px rgba(0,0,0,.3); animation: slideUp .2s ease;
    font-family: 'Inter', sans-serif; color: #111;
  }
  .ps-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 16px; background: #f4f5f7; border-radius: 10px 10px 0 0; border-bottom: 1px solid #e2e4e9; }
  .ps-toolbar span { font-size: 13px; font-weight: 500; color: #6b7280; }
  .ps-toolbar-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .ps-toolbar-btns .btn, .ps-toolbar-btns select { height: 34px; display: inline-flex; align-items: center; box-sizing: border-box; white-space: nowrap; }
  .ps-toolbar-btns select { background: #fff; border: 1px solid #d1d5db; border-radius: 8px; color: #374151; font-weight: 500; cursor: pointer; }
  .ps-header { background: #1a1a2e; color: #fff; padding: 20px 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
  .ps-garage { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
  .ps-garage-sub { font-size: 11px; opacity: .5; font-weight: 400; display: block; margin-top: 2px; }
  .ps-jobref { text-align: right; }
  .ps-jobref-label { font-size: 10px; opacity: .5; text-transform: uppercase; letter-spacing: .06em; }
  .ps-jobref-reg { font-size: 22px; font-weight: 800; font-family: 'Courier New', monospace; letter-spacing: .08em; display: block; }
  .ps-body { padding: 20px 24px; }
  .ps-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
  .ps-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 16px; }
  .ps-field-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #9ca3af; margin-bottom: 3px; }
  .ps-field-value { font-size: 13px; font-weight: 500; color: #111; border-bottom: 1px solid #e2e4e9; padding-bottom: 4px; min-height: 22px; }
  .ps-divider { border: none; border-top: 2px dashed #e2e4e9; margin: 16px 0; }
  .ps-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #6b7280; margin-bottom: 10px; }
  .ps-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
  .ps-cat { border: 1px solid #e2e4e9; border-radius: 8px; overflow: hidden; }
  .ps-cat-header { padding: 7px 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
  .ps-cat-header.ch-mot { background: #fefce8; color: #713f12; }
  .ps-cat-header.ch-service { background: #e0f2fe; color: #0c447c; }
  .ps-cat-header.ch-body { background: #f3e8ff; color: #6b21a8; }
  .ps-cat-header.ch-other { background: #d9f99d; color: #365314; }
  .ps-task-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-top: 1px solid #f3f4f6; font-size: 12px; }
  .ps-task-box { width: 14px; height: 14px; border-radius: 3px; border: 1.5px solid #c8ccd6; flex-shrink: 0; position: relative; }
  .ps-task-box.ticked { background: #22c55e; border-color: #22c55e; }
  .ps-task-box.ticked::after { content: ''; position: absolute; top: 2px; left: 2px; width: 7px; height: 4px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(-45deg); }
  .ps-task-label { flex: 1; }
  .ps-task-label.done-label { text-decoration: line-through; color: #9ca3af; }
  .ps-no-tasks { font-size: 11px; color: #9ca3af; padding: 8px 10px; font-style: italic; }
  .ps-notes-box { border: 1px solid #e2e4e9; border-radius: 6px; padding: 10px 12px; min-height: 56px; font-size: 12px; color: #6b7280; white-space: pre-wrap; }
  .ps-sig-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 16px; }
  .ps-sig-line { border-bottom: 1.5px solid #111; height: 38px; margin-bottom: 4px; }
  .ps-sig-label { font-size: 10px; color: #9ca3af; text-transform: uppercase; letter-spacing: .05em; }
  .ps-footer { padding: 12px 24px; border-top: 1px solid #e2e4e9; background: #f9fafb; border-radius: 0 0 10px 10px; display: flex; justify-content: space-between; font-size: 10px; color: #9ca3af; }
  .ps-status-pill { display: inline-block; font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 20px; border: 1px solid transparent; }
  .ps-status-pill.sp-pending { background: #FAEEDA; color: #633806; border-color: #FAC775; }
  .ps-status-pill.sp-in-progress { background: #E6F1FB; color: #0C447C; border-color: #B5D4F4; }
  .ps-status-pill.sp-completed { background: #EAF3DE; color: #27500A; border-color: #C0DD97; }
  .ps-status-pill.sp-overdue { background: #FCEBEB; color: #791F1F; border-color: #F7C1C1; }

  /* ── Certificate Register ── */
  .modal-certno { font-size: 11px; font-weight: 700; color: #F15A24; font-family: 'Courier New', monospace; margin-left: 10px; }
  .cr-toolbar { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .cr-head, .cr-row { display: grid; grid-template-columns: 130px 95px 100px 1.1fr 1fr 75px 90px 95px; gap: 8px; align-items: center; padding: 8px 12px; }
  .cr-head { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); border-bottom: 2px solid var(--border); }
  .cr-row { background: var(--card, #fff); border: 1px solid var(--border); border-radius: 8px; margin-top: 6px; font-size: 12.5px; color: var(--text); }
  .cr-row:hover { border-color: #F15A24; }
  .cr-archived { opacity: .6; }
  .cr-no { font-family: 'Courier New', monospace; font-weight: 800; color: #F15A24; cursor: pointer; }
  .cr-no:hover { text-decoration: underline; }
  .cr-reg { font-family: 'Courier New', monospace; font-weight: 700; background: #FFD307; color: #111; border: 1px solid #111; border-radius: 3px; padding: 1px 6px; font-size: 11px; }
  .cr-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cr-arch-badge { font-size: 9px; font-weight: 700; color: var(--text-muted); border: 1px solid var(--border); border-radius: 10px; padding: 1px 6px; vertical-align: 1px; }
  .cr-status { font-size: 10px; font-weight: 700; border-radius: 20px; padding: 3px 10px; }
  .cr-issued { background: #EAF3DE; color: #27500A; border: 1px solid #C0DD97; }
  .cr-not { background: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb; }
  .cr-actions { display: flex; gap: 4px; justify-content: flex-end; }
  .cr-empty { text-align: center; padding: 40px 0; color: var(--text-muted); font-size: 13px; line-height: 1.8; }
  .chx-head, .chx-row { display: grid; grid-template-columns: 70px 150px 110px 1fr 130px; gap: 10px; align-items: center; font-size: 12px; padding: 8px 4px; color: #111; }
  .chx-head { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; border-bottom: 2px solid #111; }
  .chx-row { border-bottom: 1px solid #e5e7eb; }
  .crp-head, .crp-row { display: grid; grid-template-columns: 110px 80px 80px 1.2fr 1fr 45px 55px; gap: 8px; font-size: 10.5px; padding: 5px 4px; }
  .crp-head { font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: 9px; color: #111; border-bottom: 2px solid #111; }
  .crp-row { border-bottom: 1px solid #e5e7eb; color: #111; }
  @media (max-width: 760px) { .cr-head { display: none; } .cr-row { grid-template-columns: 1fr 1fr; } }

  /* ── Service Certificate ── */
  .cert-page { display: flex; flex-direction: column; min-height: 1054px; /* ≈ A4 printable height on screen */ }
  .cert-band { height: 6px; flex-shrink: 0; background: linear-gradient(90deg, #111 60%, #F15A24 60%); border-radius: 10px 10px 0 0; }
  .cert-header { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 20px 32px 14px; border-bottom: 2px solid #111; }
  .cert-logo { height: 50px; max-width: 225px; object-fit: contain; }
  .cert-co { text-align: right; font-size: 10.5px; color: #374151; line-height: 1.55; }
  .cert-co b { font-size: 12px; color: #111; }
  .cert-title-wrap { text-align: center; padding: 15px 32px 2px; }
  .cert-title { font-size: 21px; font-weight: 800; letter-spacing: .12em; color: #111; }
  .cert-title-rule { width: 130px; height: 3px; background: #F15A24; margin: 7px auto 0; border-radius: 2px; }
  .cert-meta { display: flex; justify-content: center; align-items: center; gap: 26px; font-size: 11px; color: #374151; padding: 8px 0 2px; }
  .cert-meta b { color: #111; }
  .cert-date { display: inline-block; min-width: 120px; border-bottom: 1px solid #9ca3af; outline: none; text-align: center; padding: 0 6px 1px; cursor: text; }
  .cert-date:focus { border-color: #F15A24; }
  .cert-date:empty::before { content: attr(data-ph); color: #c4c9d1; font-weight: 400; font-style: italic; }
  .cert-body { padding: 4px 32px 20px; display: flex; flex-direction: column; flex: 1; }
  .cert-sec { font-size: 11px; font-weight: 800; letter-spacing: .09em; color: #fff; background: #111; padding: 5px 12px; border-radius: 4px; margin: 12px 0 9px; }
  .cert-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px 18px; }
  /* developer credit — small fixed footer in the bottom-right corner of the app (never printed) */
  .dev-credit { position: fixed; right: 14px; bottom: 9px; z-index: 50; pointer-events: none; user-select: none; display: flex; align-items: baseline; gap: 5px; opacity: .8; }
  .dev-credit .dc-by { font-size: 10.5px; color: var(--text-muted); letter-spacing: .03em; }
  .dev-credit .dc-sig { font-family: 'Pacifico', 'Segoe Script', 'Brush Script MT', cursive; font-size: 17px; line-height: 1; color: var(--primary); transform: rotate(-4deg); }
  body.dark-mode .dev-credit .dc-sig { color: #ff7d4d; }
  .t-zero { color: #6b7280 !important; }
  .cert-field-label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #9ca3af; margin-bottom: 2px; }
  .cert-field-value { font-size: 13px; font-weight: 600; color: #111; border-bottom: 1px solid #d1d5db; padding-bottom: 3px; min-height: 19px; }
  .cert-reg { display: inline-block; font-family: 'Courier New', monospace; font-weight: 800; font-size: 14px; background: #FFD307; border: 1.5px solid #111; border-radius: 4px; padding: 2px 10px; letter-spacing: .06em; }
  .cert-work { border: 1.5px solid #111; border-radius: 6px; padding: 4px 0; }
  .cert-work-cols { columns: 2; column-gap: 0; column-rule: 1px solid #e5e7eb; }
  .cert-work-cat { break-inside: avoid; font-size: 9.5px; font-weight: 800; color: #c2410c; text-transform: uppercase; letter-spacing: .07em; padding: 5px 12px 2px; background: #fff7ed; border-bottom: 1px solid #fed7aa; }
  .cert-work-row { break-inside: avoid; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11.5px; padding: 4px 12px; border-bottom: 1px solid #f0f1f3; cursor: pointer; }
  .cert-work-row:hover { background: #fff7ed; }
  .cert-row-label { color: #111; display: flex; align-items: center; min-width: 0; }
  .cert-row-status { font-size: 10px; font-weight: 700; color: #9ca3af; white-space: nowrap; }
  .cert-row-status.is-done { color: #15803d; }
  .cert-check { display: inline-block; flex-shrink: 0; width: 13px; height: 13px; border: 1.5px solid #9ca3af; border-radius: 3px; margin-right: 8px; position: relative; }
  .cert-check.checked { background: #F15A24; border-color: #F15A24; }
  .cert-check.checked::after { content: ''; position: absolute; left: 3.5px; top: .5px; width: 3px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
  .cert-row-off { opacity: .38; }
  .cert-notes { border: 1px solid #d1d5db; border-radius: 6px; min-height: 56px; max-height: 110px; overflow-y: auto; padding: 8px 12px; font-size: 12px; color: #111; line-height: 1.6; outline: none; white-space: pre-wrap; }
  .cert-notes:focus { border-color: #F15A24; box-shadow: 0 0 0 3px rgba(241,90,36,.12); }
  .cert-notes:empty::before { content: attr(data-ph); color: #9ca3af; font-style: italic; }
  .cert-decl { font-size: 10.5px; color: #4b5563; line-height: 1.6; margin-top: 4px; }
  .cert-sig-row { display: grid; grid-template-columns: 1fr; max-width: 46%; margin-top: 26px; margin-bottom: 14px; }
  .cert-sig-line { border-bottom: 1.5px solid #111; height: 34px; margin-bottom: 5px; }
  .cert-sig-label { font-size: 9.5px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .06em; }
  .cert-footer { margin-top: auto; border-top: 3px solid #F15A24; padding-top: 8px; display: flex; justify-content: space-between; font-size: 9.5px; color: #6b7280; }

  /* ── Mechanic chip ── */
  .mech-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: #185FA5; background: rgba(24,95,165,.08); border: 1px solid rgba(24,95,165,.25); padding: 1px 8px; border-radius: 10px; }
  body.dark .mech-chip { color: #7cb8e8; background: rgba(124,184,232,.12); border-color: rgba(124,184,232,.3); }

  /* ── Invoice register ── */
  .ir-head, .ir-row { display: grid; grid-template-columns: 90px 95px 110px 1.4fr 100px 150px 80px; gap: 8px; align-items: center; padding: 8px 12px; }
  .ir-head { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); border-bottom: 2px solid var(--border); }
  .ir-row { background: var(--card, #fff); border: 1px solid var(--border); border-radius: 8px; margin-top: 6px; font-size: 12.5px; color: var(--text); }
  .ir-row:hover { border-color: #16a34a; }
  .ir-paid, .ir-unpaid, .ir-not { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
  .ir-paid { color: #166534; background: #dcfce7; border: 1px solid #bbf7d0; }
  .ir-unpaid { color: #854F0B; background: #fef3c7; border: 1px solid #fde68a; }
  .ir-not { color: #6b7280; background: #f3f4f6; border: 1px solid #e5e7eb; }
  @media (max-width: 760px) { .ir-head { display: none; } .ir-row { grid-template-columns: 1fr 1fr; } }

  /* ── Team / mechanic workload ── */
  .team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
  .team-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px 12px; }
  .team-card.team-unassigned { border-style: dashed; }
  .team-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
  .team-avatar { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; color: #fff; flex-shrink: 0; letter-spacing: .02em; }
  .team-name { font-weight: 700; font-size: 14px; color: var(--text); }
  .team-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
  .team-bar { height: 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; margin-bottom: 10px; }
  .team-bar-fill { height: 100%; background: linear-gradient(90deg, #F15A24, #22c55e); border-radius: 4px; transition: width .3s; }
  .team-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .team-stat { text-align: center; padding: 7px 2px 6px; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); cursor: pointer; transition: transform .12s, border-color .12s; }
  .team-stat:hover { transform: translateY(-1px); border-color: #F15A24; }
  .ts-num { font-size: 16px; font-weight: 800; color: var(--text); line-height: 1.1; }
  .ts-label { font-size: 8.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 700; margin-top: 2px; }
  .ts-pending .ts-num { color: #854F0B; } .ts-prog .ts-num { color: #185FA5; } .ts-done .ts-num { color: #16a34a; } .ts-over .ts-num { color: #A32D2D; }
  .team-alldone { font-size: 11px; font-weight: 600; color: #22c55e; margin-top: 8px; display: flex; align-items: center; gap: 4px; }

  /* ── Invoice printed-copies history grid ── */
  .ihx-head, .ihx-row { display: grid; grid-template-columns: 70px 155px 95px 1fr 95px 95px 140px; gap: 10px; align-items: center; font-size: 12px; padding: 8px 4px; color: #111; }
  .ihx-row .btn { white-space: nowrap; }
  .ihx-head { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; border-bottom: 2px solid #111; }
  .ihx-row { border-bottom: 1px solid #e5e7eb; }

  /* ── Job register ── */
  .jr-head, .jr-row { display: grid; grid-template-columns: 110px 1fr 1fr 130px 90px 110px 50px; gap: 8px; align-items: center; padding: 8px 12px; }
  .jr-head { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); border-bottom: 2px solid var(--border); }
  .jr-row { background: var(--card, #fff); border: 1px solid var(--border); border-radius: 8px; margin-top: 6px; font-size: 12.5px; color: var(--text); }
  .jr-row:hover { border-color: #F15A24; }
  .jr-docs { font-size: 11px; line-height: 1.5; font-family: 'Courier New', monospace; font-weight: 700; }
  .jr-docs .jr-cert { color: #F15A24; } .jr-docs .jr-inv { color: #16a34a; }
  @media (max-width: 760px) { .jr-head { display: none; } .jr-row { grid-template-columns: 1fr 1fr; } }

  /* ── Invoice register: date groups, summary, payment badges ── */
  .ir-elec { color: #1e40af; background: #dbeafe; border: 1px solid #bfdbfe; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
  .ir-date-head { display: flex; align-items: center; gap: 10px; margin: 16px 0 2px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
  .ir-date-head::after { content: ''; flex: 1; height: 1px; background: var(--border); }
  .ir-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
  .irs-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 5px 11px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); color: var(--text); }
  .irs-chip b { font-weight: 800; }
  .irs-cash b { color: #16a34a; } .irs-elec b { color: #1e40af; } .irs-unpaid b { color: #854F0B; } .irs-total { border-color: #F15A24; } .irs-total b { color: #F15A24; }
  .ir-books { display: flex; gap: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 3px; flex-wrap: wrap; }
  .ir-book { border: none; background: none; color: var(--text-muted); font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 8px; cursor: pointer; display: inline-flex; gap: 5px; align-items: center; }
  .ir-book:hover { color: var(--text); }
  .ir-book.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.14); }
  .ir-book.active[data-b="cash"] { color: #16a34a; }
  .ir-book.active[data-b="electronic"] { color: #1e40af; }
  .ir-ctrl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .ir-ctrl input[type=date], .ir-ctrl select { width: auto; font-size: 12px; padding: 7px 9px; }

  /* ── Invoice sheet ── */
  .cert-page { position: relative; }
  .inv-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
  .inv-table th { text-align: left; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #374151; border-bottom: 2px solid #111; padding: 6px 8px; }
  .inv-table th.qty, .inv-table td.qty { text-align: center; width: 60px; }
  .inv-table th.num, .inv-table td.num { text-align: right; width: 95px; }
  .inv-table td { border-bottom: 1px solid #e5e7eb; padding: 6px 8px; color: #111; vertical-align: top; }
  .inv-table td[contenteditable]:hover { background: #fff7ed; cursor: text; }
  .inv-table td[contenteditable]:focus { outline: 2px solid #F15A24; outline-offset: -2px; background: #fff; }
  .inv-del-cell { width: 30px; text-align: center; }
  .inv-table th.vatc, .inv-table td.vatc { width: 52px; text-align: center; }
  .inv-table td.vatc { cursor: pointer; user-select: none; color: #374151; font-size: 10.5px; font-weight: 700; }
  .inv-table td.vatc:hover { background: #fff7ed; }
  .inv-del { border: none; background: none; color: #A32D2D; cursor: pointer; font-size: 13px; opacity: .45; padding: 2px; }
  .inv-del:hover { opacity: 1; }
  .inv-add-row { margin-top: 8px; }
  .inv-totals { margin-top: 14px; margin-left: auto; width: 270px; font-size: 12px; }
  .inv-totals .t-row { display: flex; justify-content: space-between; padding: 4px 8px; border-bottom: 1px solid #e5e7eb; color: #111; }
  .inv-totals .t-total { font-size: 14.5px; font-weight: 800; border-bottom: none; border-top: 2px solid #111; margin-top: 2px; padding-top: 7px; }
  .inv-paid-stamp { position: absolute; top: 155px; right: 42px; transform: rotate(-14deg); border: 3px solid #16a34a; color: #16a34a; font-weight: 900; font-size: 26px; letter-spacing: .2em; padding: 5px 18px; border-radius: 8px; opacity: .85; pointer-events: none; }

  @media print {
    body > *:not(.print-overlay) { display: none !important; }
    .print-overlay { display: flex !important; position: static; background: none; padding: 0; }
    .print-sheet { max-width: 100%; border-radius: 0; box-shadow: none; }
    .ps-toolbar { display: none !important; }
    @page { size: A4; margin: 9mm; }
    .print-sheet, .print-sheet * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .cert-row-off { display: none !important; }
    .cert-check { display: none !important; }
    .no-print { display: none !important; }
    .inv-del-cell { display: none !important; }
    .inv-table td[contenteditable]:hover { background: none; }
    .cert-work-row { cursor: default; }
    .cert-date:empty::before, .cert-notes:empty::before { content: ''; }
    .cert-notes { overflow: hidden; }
    .cert-page { height: 279mm; /* 297mm A4 minus 2 × 9mm page margin */ min-height: 0; overflow: hidden; page-break-inside: avoid; }
  }


  /* ══════════════════════════════
     LOGIN SCREEN
  ══════════════════════════════ */
  .login-screen {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--primary);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
  }
  .login-screen.hidden { display: none; }
  .login-box {
    background: #fff; border-radius: 16px;
    padding: 40px 36px; width: 100%; max-width: 380px;
    box-shadow: 0 32px 80px rgba(0,0,0,.4);
    animation: slideUp .25s ease;
  }
  .login-logo { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; margin-bottom: 28px; }
  .login-logo i { font-size: 40px; color: var(--primary); }
  .login-logo-img { height: 64px; width: auto; display: block; border-radius: 8px; }
  .login-logo-text { font-size: 18px; font-weight: 700; color: var(--primary); letter-spacing: -.01em; }
  .login-logo-sub { font-size: 11px; color: var(--text-muted); font-weight: 400; display: block; }
  .login-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 18px; }
  .login-field { margin-bottom: 14px; }
  .login-field label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); margin-bottom: 6px; }
  .login-field input {
    width: 100%; padding: 10px 12px; border: 1.5px solid var(--border);
    border-radius: var(--radius); font-family: inherit; font-size: 14px;
    color: var(--text); outline: none; transition: border-color .15s, box-shadow .15s;
  }
  .login-field input:focus { border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(24,95,165,.12); }
  .login-field input.error { border-color: var(--accent-red); box-shadow: 0 0 0 3px rgba(163,45,45,.1); }
  .login-error { font-size: 12px; color: var(--accent-red); margin-bottom: 12px; display: none; }
  .login-error.show { display: block; }
  .login-btn {
    width: 100%; padding: 11px; background: var(--primary); color: #fff;
    border: none; border-radius: var(--radius); font-family: inherit;
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: background .15s; letter-spacing: .01em;
  }
  .login-btn:hover { background: var(--primary-hover); }
  .login-btn:active { transform: translateY(1px); }
  .login-footer { margin-top: 20px; font-size: 11px; color: var(--text-muted); text-align: center; }


/* ═══════════════════════════════════════════════════════════════
   CRIMSON SLATE REDESIGN  —  premium on-screen theme (v13)
   Appended last so it layers over the base styles. Screen only:
   an @media print reset at the end neutralises it for A4 output.
   ═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --cs-accent: #F15A24;
  --cs-accent-2: #e0331d;
  --cs-accent-grad: linear-gradient(135deg, #F15A24 0%, #e0331d 100%);
  --cs-head-grad: linear-gradient(135deg, #1a1a2e 0%, #2a1520 58%, #4a1c1c 100%);
  --cs-ring: rgba(241,90,36,.18);
  --shadow: 0 1px 3px rgba(17,20,45,.06), 0 1px 2px rgba(17,20,45,.04);
  --shadow-md: 0 8px 24px rgba(17,20,45,.10);
  --shadow-lg: 0 18px 44px rgba(17,20,45,.16);
  --radius: 10px;
  --radius-lg: 16px;
}

body:not(.dark-mode) {
  background:
    radial-gradient(1100px 520px at 12% -8%, #fbe9e2 0%, rgba(251,233,226,0) 60%),
    radial-gradient(1000px 500px at 110% 0%, #e9edf6 0%, rgba(233,237,246,0) 55%),
    linear-gradient(180deg, #f5f6f9 0%, #eef0f5 100%);
  background-attachment: fixed;
}

/* ── Header: frosted crimson-slate gradient ── */
.header {
  background: var(--cs-head-grad);
  height: 60px; border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 6px 22px rgba(42,21,32,.28);
}
.header-brand { font-weight: 700; letter-spacing: -.01em; }
.header-logo { border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.header-sub { opacity: .55; }
/* header controls: consistent height, icon buttons square, sign-out keeps its label */
.header > div button {
  height: 36px !important; border-radius: 10px !important;
  background: rgba(255,255,255,.12) !important; backdrop-filter: blur(6px);
  transition: background .15s, transform .15s !important;
  display: inline-flex !important; align-items: center; justify-content: center;
}
.header > div button:hover {
  background: rgba(255,255,255,.22) !important; transform: translateY(-1px);
}
#bizBtn, #mechBtn, #darkToggle { width: 36px !important; padding: 0 !important; }
#logoutBtn { padding: 0 14px !important; gap: 6px; font-weight: 600; white-space: nowrap; }

/* ── Tab bar: pill container + gradient active + animated lift ── */
.view-tabs {
  background: rgba(255,255,255,.72); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.6); border-radius: 14px; padding: 5px;
  box-shadow: 0 4px 16px rgba(17,20,45,.07); gap: 3px;
}
.view-tab { border-radius: 10px; font-weight: 600; padding: 8px 15px; transition: all .18s cubic-bezier(.4,0,.2,1); }
.view-tab.active {
  background: var(--cs-accent-grad); color: #fff;
  box-shadow: 0 4px 12px rgba(224,51,29,.34); transform: translateY(-1px);
}
.view-tab:hover:not(.active) { background: rgba(241,90,36,.09); color: var(--cs-accent-2); }

/* ── Buttons ── */
.btn { border-radius: 10px; font-weight: 600; transition: transform .14s, box-shadow .14s, background .14s, filter .14s; }
.btn-primary { background: var(--cs-accent-grad); color: #fff; box-shadow: 0 4px 12px rgba(224,51,29,.28); border: none; }
.btn-primary:hover { filter: brightness(1.05); box-shadow: 0 7px 18px rgba(224,51,29,.36); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost { background: rgba(255,255,255,.9); border: 1px solid var(--border); box-shadow: var(--shadow); }
.btn-ghost:hover { background: #fff; border-color: var(--cs-accent); color: var(--cs-accent-2); transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* ── Inputs: rounded with focus ring ── */
input[type="text"], input[type="tel"], input[type="number"], input[type="date"], select, textarea {
  border-radius: 10px; border: 1.5px solid var(--border);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input[type="text"]:focus, input[type="tel"]:focus, input[type="number"]:focus,
input[type="date"]:focus, select:focus, textarea:focus {
  border-color: var(--cs-accent); box-shadow: 0 0 0 4px var(--cs-ring); outline: none;
}

/* ── Job cards: glowing left border + hover lift ── */
.job-card {
  border-radius: 16px; border: 1px solid rgba(17,20,45,.07);
  box-shadow: 0 4px 16px rgba(17,20,45,.06); position: relative; overflow: hidden;
  transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s;
}
.job-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--cs-accent-grad); opacity: .9;
}
.job-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(241,90,36,.25); }
.job-card.overdue::before { background: linear-gradient(135deg,#ef4444,#b91c1c); }
.job-card.all-complete::before { background: linear-gradient(135deg,#22c55e,#15803d); }

/* keep the register/data rows feeling in the same family */
.ir-row, .jr-row, .cr-row { border-radius: 12px; transition: transform .12s, box-shadow .12s, border-color .12s; }
.ir-row:hover, .jr-row:hover, .cr-row:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* ── Status badges: subtle depth, stay flat & readable ── */
.status-badge { border-radius: 20px; font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.06); }

/* ── Modals: deeper radius + floating shadow + blur backdrop ── */
.modal-overlay { background: rgba(17,20,45,.42); backdrop-filter: blur(4px); }
.modal { border-radius: 20px; box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.6); }
.print-overlay { background: rgba(17,20,45,.5); backdrop-filter: blur(4px); }
.print-sheet { border-radius: 18px; box-shadow: var(--shadow-lg); }

/* ── Number plate: crisper UK look ── */
.cr-reg, .cert-reg {
  font-family: 'Courier New', monospace; font-weight: 800; letter-spacing: .06em;
  background: linear-gradient(180deg,#ffe14d,#ffd60a); color: #12141c;
  border: 2px solid #12141c; border-radius: 5px; padding: 1px 7px;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

/* ── Summary chips ── */
.irs-chip { border-radius: 12px; box-shadow: var(--shadow); }

/* ── Login: gradient stage with floating blurred orbs + glass card ── */
.login-screen { background: var(--cs-head-grad); overflow: hidden; }
.login-screen::before, .login-screen::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; pointer-events: none;
}
.login-screen::before { width: 420px; height: 420px; background: #F15A24; top: -120px; left: -90px; animation: floatA 14s ease-in-out infinite; }
.login-screen::after  { width: 380px; height: 380px; background: #3b4fd8; bottom: -120px; right: -80px; animation: floatB 16s ease-in-out infinite; }
@keyframes floatA { 0%,100%{transform:translate(0,0)} 50%{transform:translate(40px,30px)} }
@keyframes floatB { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-36px,-28px)} }
.login-box {
  position: relative; z-index: 1;
  background: rgba(255,255,255,.92); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.6); border-radius: 22px;
  box-shadow: 0 30px 70px rgba(0,0,0,.45); max-width: 400px;
}
.login-logo-img { box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.login-field input:focus { border-color: var(--cs-accent); box-shadow: 0 0 0 4px var(--cs-ring); }
.login-btn {
  background: var(--cs-accent-grad); border-radius: 12px; font-weight: 700;
  box-shadow: 0 8px 20px rgba(224,51,29,.36); transition: filter .15s, transform .1s, box-shadow .15s;
}
.login-btn:hover { filter: brightness(1.06); box-shadow: 0 11px 26px rgba(224,51,29,.44); }

/* ── Calendar & day-panel headers pick up the gradient ── */
.cal-header { background: var(--cs-head-grad); }

/* ── Team cards & mechanics ── */
.team-card { border-radius: 16px; box-shadow: 0 4px 16px rgba(17,20,45,.06); transition: transform .16s, box-shadow .16s; }
.team-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* ── Business-settings / register book tabs (segmented) ── */
.ir-book.active { box-shadow: 0 2px 8px rgba(17,20,45,.12); }

/* ── Gentle entrance for the main view area ── */
.app > #viewJobs, .app > #viewInvoices, .app > #viewTeam, .app > #viewJobReg,
.app > #viewCerts, .app > #viewCalendar, .app > #viewHistory, .app > #viewHighlights {
  animation: viewFade .28s ease;
}
@keyframes viewFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, .job-card, .view-tab, .btn, .login-screen::before, .login-screen::after { animation: none !important; transition: none !important; }
}

/* ═══ PRINT RESET — the redesign is screen-only; keep A4 documents pristine ═══ */
@media print {
  body:not(.dark-mode) { background: #fff !important; }
  .print-sheet { border-radius: 0 !important; box-shadow: none !important; }
  .cert-page, .cert-header, .cert-body { box-shadow: none !important; }
}

/* ── Customer account statement (screen only) ── */
.stmt-head, .stmt-row { display: grid; grid-template-columns: 40px 90px 90px 100px 1fr 95px 130px; gap: 8px; align-items: center; padding: 8px 10px; }
.stmt-head { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); border-bottom: 2px solid var(--border); }
.stmt-row { font-size: 12.5px; color: var(--text); border-bottom: 1px solid var(--border); }
.stmt-row:hover { background: var(--bg); }
.stmt-totals { margin-top: 14px; margin-left: auto; width: 300px; font-size: 12.5px; }
.stmt-totals > div { display: flex; justify-content: space-between; padding: 5px 8px; border-bottom: 1px solid var(--border); }
.stmt-totals .stmt-bal { border-bottom: none; border-top: 2px solid var(--border); margin-top: 2px; padding-top: 8px; font-size: 14px; font-weight: 700; }
@media (max-width: 720px) { .stmt-head { display: none; } .stmt-row { grid-template-columns: 40px 1fr 95px; } .stmt-row > :nth-child(3), .stmt-row > :nth-child(5) { display: none; } }