/* ══════════════════════════════════════════════════════════════
   history.css
   Task history, highlights and the register tables shared by the
   invoice / job / certificate / sales registers.
   ══════════════════════════════════════════════════════════════ */

  /* ══════════════════════════════
     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; user-select: none; display: flex; align-items: center; gap: 7px; text-decoration: none; cursor: pointer; padding: 4px 8px; border-radius: 10px; transition: background .25s; }
  .dev-credit .dc-by { font-size: 10.5px; color: var(--text-muted); letter-spacing: .03em; transition: color .25s; }
  .dev-credit .dc-logo { height: 24px; width: auto; display: block;
    /* embossed at rest: colour drained, carved into the page with light/shadow edges */
    filter: grayscale(1) contrast(.55) brightness(1.12) opacity(.55)
            drop-shadow(0 1px 0 rgba(255,255,255,.65)) drop-shadow(0 -1px 1px rgba(0,0,0,.28));
    transition: filter .3s ease, transform .3s ease; }
  .dev-credit:hover { background: rgba(43, 108, 176, .08); }
  .dev-credit:hover .dc-by { color: #2b6cb0; }
  .dev-credit:hover .dc-logo {
    /* lights up: full colour + blue glow */
    filter: grayscale(0) contrast(1) brightness(1.08) opacity(1)
            drop-shadow(0 0 6px rgba(49, 130, 206, .85)) drop-shadow(0 0 14px rgba(49, 130, 206, .45));
    transform: scale(1.12); }
  body.dark-mode .dev-credit .dc-logo { filter: grayscale(1) contrast(.6) brightness(1.5) opacity(.5)
            drop-shadow(0 1px 0 rgba(255,255,255,.15)) drop-shadow(0 -1px 1px rgba(0,0,0,.6)); }
  body.dark-mode .dev-credit:hover { background: rgba(99, 179, 237, .1); }
  body.dark-mode .dev-credit:hover .dc-by { color: #63b3ed; }
  body.dark-mode .dev-credit:hover .dc-logo {
    filter: grayscale(0) contrast(1) brightness(1.15) opacity(1)
            drop-shadow(0 0 7px rgba(99, 179, 237, .9)) drop-shadow(0 0 16px rgba(99, 179, 237, .5));
    transform: scale(1.12); }
  .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: 88px 105px 1fr 1fr 120px 85px 105px 44px; 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; }
  }