@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Inter:wght@300;400;500;600;700&display=swap');

  :root {
    /* ── Flowbite DS dark mode tokens ───────────────────── */
    --bg:       #030712;   /* page background · near-black navy */
    --surface:  #1f2937;   /* bg-tertiary      · gray-800  */
    --surface2: #374151;   /* bg-quaternary    · gray-700  */
    --border:   #4b5563;   /* border-base-strong · gray-600 */
    --accent:   #f0b429;   /* brand yellow (custom) · yellow-400 */
    --green:    #059669;   /* bg-success dark  · emerald-600 */
    --red:      #e11d48;   /* text-fg-danger   · rose-600  */
    --text:     #f9fafb;   /* text-heading     · gray-50   */
    --muted:    #9ca3af;   /* text-body        · gray-400  */
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }

  header {
    background: #1F2937; border-bottom: 1px solid var(--border);
    padding: 14px 24px; display: flex; align-items: center;
    justify-content: space-between;
  }
  .logo { display: flex; align-items: center; }
  .logo span { color: var(--muted); font-weight: 400; }
  .date-badge {
    font-family: 'Inter', sans-serif; font-size: 12px; color: var(--muted);
    background: var(--surface2); padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border);
  }

  nav { display: flex; gap: 4px; padding: 16px 24px 0; border-bottom: 1px solid var(--border); }
  .topbar { position: sticky; top: 0; z-index: 100; background: var(--bg); }
  .tab {
    font-family: 'Inter', sans-serif; font-size: 12px; padding: 8px 16px;
    border: 1px solid transparent; border-bottom: none; background: transparent;
    color: var(--muted); cursor: pointer; border-radius: 6px 6px 0 0; white-space: nowrap; transition: all 0.15s;
  }
  .tab:hover { color: var(--text); }
  .tab.active { background: var(--surface); color: var(--accent); border-color: var(--border); border-bottom-color: var(--surface); margin-bottom: -1px; }

  main { padding: 24px; max-width: min(1400px, 95vw); margin: 0 auto; }
  .section { display: none; }
  .section.active { display: block; }

  h1 { font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 600; line-height: 28px; color: var(--text); margin-bottom: 4px; }
  h2 { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; color: var(--text); margin-bottom: 16px; }
  h3 { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0.3px; margin-bottom: 16px; }

  .card { background: #101828; border: 1px solid #1E2939; border-radius: 10px; padding: 20px; margin-bottom: 16px; }
  .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  @media (max-width: 600px) { .grid2 { grid-template-columns: 1fr; } }
  @media (max-width: 640px) { .ci-scan-grid { grid-template-columns: 1fr !important; } }
  @media (max-width: 640px) { .co-scan-grid { grid-template-columns: 1fr !important; } }

  input:not(.col-filter):not(.roster-route):not(.range-input):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
    width: 100%;
    background: #1E2939;
    border: 1px solid #333E4F;
    box-shadow: 0px 1px 0.5px 0.05px rgba(29, 41, 61, 0.02);
    color: #FFFFFF;
    padding: 10px 12px;
    height: 40px;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    margin-bottom: 10px;
  }
  select:not(.col-filter) {
    width: 100%;
    background: #1E2939;
    border: 1px solid #333E4F;
    box-shadow: 0px 1px 0.5px 0.05px rgba(29, 41, 61, 0.02);
    color: #FFFFFF;
    padding: 10px 36px 10px 12px;
    height: 40px;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    margin-bottom: 10px;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%2399A1AF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
  }
  input:not(.col-filter):not([type="hidden"])::placeholder { color: #99A1AF; }
  select:not(.col-filter) option { background: #1E2939; color: #FFFFFF; }
  input:not(.col-filter):not(.roster-route):not(.range-input):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus,
  select:not(.col-filter):focus {
    border-color: #f0b429;
    box-shadow: 0 0 0 3px rgba(240, 180, 41, 0.15);
  }

  /* ── Flowbite error state ─────────────────────────────── */
  .field-error input:not(.col-filter):not([type="hidden"]),
  .field-error select:not(.col-filter),
  input.field-error:not(.col-filter):not([type="hidden"]),
  select.field-error:not(.col-filter) {
    border-color: #F05252 !important;
  }
  .field-error input:not(.col-filter):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus,
  .field-error select:not(.col-filter):focus,
  input.field-error:not(.col-filter):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus,
  select.field-error:not(.col-filter):focus {
    border-color: #F05252 !important;
    box-shadow: 0 0 0 3px rgba(240, 82, 82, 0.2) !important;
  }
  .field-error-msg, .field-warning-msg {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: #F05252;
    margin-top: -4px;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 5px;
  }
  .field-error-msg .icon, .field-warning-msg .icon { flex-shrink: 0; margin-top: 1px; width: 14px; height: 14px; }
  /* Warning (yellow) — e.g. old saved preference that matches nothing; does not block Save. */
  .field-warning-msg { color: var(--accent); }
  label {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #FFFFFF;
    display: block;
    margin-bottom: 6px;
  }
  .input-helper {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    color: #99A1AF;
    margin-top: -6px;
    margin-bottom: 10px;
  }
  .input-required { color: #FF2056; margin-left: 2px; }
  .input-eye-wrap { position: relative; margin-bottom: 10px; }
  .input-eye-wrap input { padding-right: 40px !important; margin-bottom: 0 !important; }
  .input-eye-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #99A1AF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
  }
  .input-eye-btn:hover { color: #FFFFFF; }
  .input-eye-btn .icon, .input-icon-btn .icon { width: 16px; height: 16px; }
  .input-icon-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #99A1AF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
  }
  .input-icon-btn:hover { color: #FFFFFF; }

  /* ── Edit Driver form: section titles, divider, small labels ── */
  .modal-title--lg { font-size: 16px; font-weight: 500; line-height: 24px; }
  .form-section-title { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 600; line-height: 24px; letter-spacing: 0; color: #FFFFFF; margin-bottom: 12px; }
  .form-section-optional { font-weight: 400; color: var(--muted); }
  .form-divider { border: 0; border-top: 1px solid var(--border); margin: 24px 0 20px; }
  label.pref-label { font-size: 13px; font-weight: 500; line-height: 20px; color: #d1d5db; }
  .pref-label .icon { width: 14px; height: 14px; margin-right: 2px; vertical-align: -2px; }

  /* ── Combobox (js/ui.js): one input + clear/scan buttons + fixed-position suggestions ── */
  .combo-field { position: relative; margin-bottom: 10px; }
  .combo-field input { padding-right: 132px !important; margin-bottom: 0 !important; }
  .combo-actions { position: absolute; right: 8px; top: 0; height: 40px; display: flex; align-items: center; gap: 2px; }
  .combo-meta { max-width: 84px; margin-right: 4px; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .combo-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: none; border: none; border-radius: 8px; color: #99A1AF; cursor: pointer; }
  .combo-btn:hover { color: #FFFFFF; background: var(--surface2); }
  .combo-btn .icon { width: 16px; height: 16px; }
  .combo-clear { display: none; }
  .combo-field.has-value .combo-clear { display: inline-flex; }
  .combo-list { display: none; position: fixed; z-index: 200; overflow-y: auto; padding: 4px; background: #1E2939; border: 1px solid #333E4F; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.45); }
  .combo-list.open { display: block; }
  .combo-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; font-size: 14px; line-height: 20px; color: #FFFFFF; cursor: pointer; }
  .combo-option:hover:not(.is-disabled), .combo-option.is-active { background: var(--surface2); }
  .combo-option[aria-selected="true"] { color: var(--accent); }
  .combo-option.is-disabled { color: var(--muted); cursor: not-allowed; }
  .combo-option-main { display: flex; flex-direction: column; min-width: 0; }
  .combo-option-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .combo-option-note { font-size: 12px; line-height: 16px; color: var(--muted); }
  .combo-option-code { flex-shrink: 0; font-size: 12px; color: var(--muted); }
  .combo-empty { padding: 10px; font-size: 14px; color: var(--muted); }

  /* ── Range field (Edit Driver): two inputs inside ONE bordered box that looks like a single input ── */
  .range-field { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; margin-bottom: 10px; background: #1E2939; border: 1px solid #333E4F; box-shadow: 0px 1px 0.5px 0.05px rgba(29, 41, 61, 0.02); border-radius: 12px; cursor: text; transition: border-color 0.15s, box-shadow 0.15s; }
  .range-field:focus-within { border-color: #f0b429; box-shadow: 0 0 0 3px rgba(240, 180, 41, 0.15); }
  .field-wrap.field-error .range-field { border-color: #F05252; }
  .field-wrap.field-error .range-field:focus-within { box-shadow: 0 0 0 3px rgba(240, 82, 82, 0.2); }
  .range-input { width: 36px; padding: 0; background: none; border: 0; outline: none; color: #FFFFFF; font-family: 'Inter', sans-serif; font-size: 14px; line-height: 20px; }
  .range-input:focus-visible { outline: none; }
  .range-dash { color: var(--muted); }
  .range-field .range-clear { display: none; margin-left: auto; }
  .range-field.has-value .range-clear { display: inline-flex; }

  .btn {
    font-family: 'Inter', sans-serif; font-size: 12px; padding: 10px 18px;
    border-radius: 8px; border: 1px solid transparent; cursor: pointer; font-weight: 700;
    transition: all 0.15s; display: inline-flex; align-items: center; gap: 6px;
  }
  .btn-primary { background: var(--accent); color: #000; }
  .btn-primary:hover { background: #f5c842; }
  .btn-danger { background: var(--red); color: #fff; }
  .btn-danger:hover { opacity: 0.85; }
  .btn-success { background: var(--green); color: #000; }
  .btn-success:hover { opacity: 0.85; }
  /* ── Button variants ── primary · secondary · tertiary */
  .btn-secondary { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }
  .btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
  .btn-tertiary { background: none; border: none; border-bottom: 1px dashed var(--muted); border-radius: 0; padding: 0 0 1px; color: var(--muted); font-weight: 500; }
  .btn-tertiary:hover { color: var(--text); border-bottom-color: var(--text); }
  .btn-sm { padding: 6px 12px; font-size: 11px; }
  .btn:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
  .icon { display:inline-block; vertical-align:-0.125em; width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
  .icon-solid { fill:currentColor; stroke:none; stroke-width:0; }

  /* ── Flowbite DS table ───────────────────────────────── */
  .table-wrap {
    border: 1px solid #1E2939; border-radius: 10px;
    overflow: hidden; margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
  }
  table { width: 100%; border-collapse: collapse; }
  thead th {
    font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500;
    color: var(--muted); padding: 12px 24px; text-align: left;
    background: #1E2939; border-bottom: 1px solid #333E4F;
    white-space: nowrap;
  }
  .tbl-filter-row th {
    background: #101828; padding: 6px 10px; border-bottom: 1px solid #1E2939;
    vertical-align: middle;
  }
  td {
    padding: 16px 24px; font-size: 14px; font-family: 'Inter', sans-serif;
    color: var(--muted); border-bottom: 1px solid #1E2939;
    vertical-align: middle; background: #101828;
  }
  td:first-child { font-weight: 500; color: var(--text); white-space: nowrap; }
  td small { white-space: normal; word-break: break-word; display: block; }
  tr:last-child td { border-bottom: none; }
  tbody tr:hover td { background: #1a2234; }

  /* ── Schedule (weekly roster) ──────────────────────────── */
  .schedule-nav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  /* Side zones share remaining width equally so the center is truly centered. */
  .schedule-nav-side { flex: 1; display: flex; align-items: center; gap: 10px; }
  .schedule-nav-side.schedule-week { justify-content: flex-end; }
  .schedule-nav-center { flex: 0 0 auto; text-align: center; font-family: 'Inter', sans-serif; }
  .schedule-week { font-family: 'Inter', sans-serif; }
  .schedule-table td, .schedule-table th { padding: 8px 10px; text-align: center; }
  .schedule-table td:first-child, .schedule-table th:first-child { text-align: left; white-space: nowrap; }
  .schedule-table .day-sub { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
  .schedule-table th.is-today .day-sub { color: var(--accent); }
  .schedule-cell {
    width: 100%; min-width: 80px; border-radius: 8px; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 12px; padding: 8px 6px;
    transition: all 0.15s; white-space: normal; line-height: 1.3;
  }
  .schedule-cell--empty { background: transparent; border: 1px dashed var(--border); color: var(--muted); font-size: 16px; font-weight: 600; }
  .schedule-cell--empty:hover { border-color: var(--accent); color: var(--accent); }
  .schedule-cell--filled { background: rgba(240,180,41,0.10); border: 1px solid rgba(240,180,41,0.4); color: var(--text); font-weight: 500; }
  .schedule-cell--filled:hover { border-color: var(--accent); background: rgba(240,180,41,0.18); }

  /* ── Check-in daily roster ─────────────────────────────── */
  .roster-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
  .roster-nav-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }  /* Today + date, left */
  #checkinPrintTitle { display: none; }   /* screen: hidden; shown only when printing */
  .roster-date { display: flex; align-items: center; gap: 10px; font-family: 'Inter', sans-serif; }
  /* Fixed layout: 14 columns share the full width so the whole table fits
     on screen with no horizontal scrollbar. Headers/content wrap only at
     spaces (no mid-word splitting) so labels like "Signature" stay whole. */
  .roster-table { table-layout: fixed; width: 100%; border-collapse: collapse; }
  .roster-table th, .roster-table td {
    padding: 0 4px; text-align: center; font-size: 10px; line-height: 1.1;
    white-space: normal; word-break: normal; overflow-wrap: normal;
    border: 1px solid var(--border);   /* full cell grid (Excel-like) */
  }
  .roster-table td.roster-cell-driver { text-align: left; }
  .roster-table th { font-weight: 700; }   /* bold header, spreadsheet-style */
  .roster-muted { color: var(--muted); }
  /* Route cell — plain spreadsheet-style cell (no oval); editable, subtle focus. */
  .roster-table input.roster-route {
    width: 100%; box-sizing: border-box; text-align: center;
    background: transparent; border: none; border-radius: 0;
    color: var(--text); font-family: inherit; font-size: 10px; padding: 0 3px; line-height: 1.1;
    height: 15px; min-height: 0;
    outline: none; transition: background 0.15s;
  }
  .roster-table input.roster-route:focus { background: #101828; }
  .roster-table input.roster-route::placeholder { color: var(--muted); }
  /* Time Out cell is display-only (auto-stamped on sign); tabular figures align HH:MM. */
  .roster-table .roster-timeout { font-variant-numeric: tabular-nums; }
  /* Van # chip — clear plate; drag to swap between drivers, click to change.
     touch-action:none so a drag on touch doesn't scroll the page instead. */
  .roster-table .roster-van-chip {
    display: inline-block; box-sizing: border-box; max-width: 100%;
    padding: 1px 8px; border-radius: 6px; border: 1px solid var(--border);
    background: var(--surface2); color: var(--text); font-size: 10px; line-height: 1.4;
    font-weight: 500; cursor: grab; user-select: none; touch-action: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .roster-table .roster-van-chip:hover { border-color: var(--accent); }
  .roster-table .roster-van-chip--empty { color: var(--muted); font-weight: 400; border-style: dashed; background: transparent; cursor: pointer; }
  .roster-table .roster-van-chip--dragging { opacity: 0.35; }
  /* Row highlighted as the drop target during a van drag. */
  .roster-table tr.roster-drop-target > td { background: rgba(59,130,246,0.15); }
  /* Van actually issued (fact) — plain text, not a chip. */
  .roster-table .roster-van-fact { color: var(--text); font-weight: 500; }
  /* Discard ✕ next to a "Ready" pre-scanned bag in the Pre-scan column. */
  .roster-table .roster-bag-discard { cursor: pointer; color: var(--muted); font-weight: 700; margin-left: 4px; }
  .roster-table .roster-bag-discard:hover { color: var(--red); }
  /* Floating chip that follows the pointer while dragging a van (attached to body). */
  .roster-van-ghost {
    position: fixed; z-index: 1000; transform: translate(-50%, -50%); pointer-events: none;
    padding: 2px 10px; border-radius: 6px; border: 1px solid var(--accent);
    background: var(--surface); color: var(--text); font-size: 11px; font-weight: 600;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35); white-space: nowrap;
  }
  /* Van picker popover (click a chip) — small list of available vans (attached to body). */
  .roster-van-picker {
    position: fixed; z-index: 1000; background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; padding: 4px; box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    max-height: 240px; overflow-y: auto; min-width: 90px;
  }
  .roster-van-opt {
    display: block; width: 100%; text-align: left; padding: 5px 10px; border: none;
    background: none; color: var(--text); font-family: inherit; font-size: 12px; border-radius: 6px; cursor: pointer;
  }
  .roster-van-opt:hover { background: var(--surface2); }
  .roster-van-opt.is-current { color: var(--accent); font-weight: 600; }
  .roster-van-opt--clear { color: var(--muted); border-top: 1px solid var(--border); margin-top: 2px; }
  /* Signature: cell thumbnail + "Sign" affordance. */
  .roster-table .roster-sign-thumb { height: 18px; max-width: 100%; background: #fff; border: 1px solid var(--border); border-radius: 3px; cursor: pointer; vertical-align: middle; }
  .roster-table .roster-sign-btn { color: var(--muted); font-size: 10px; cursor: pointer; text-decoration: underline dotted; }
  .roster-table .roster-sign-btn:hover { color: var(--accent); }
  /* Signature pad modal (attached to body). */
  .sign-overlay { position: fixed; inset: 0; z-index: 1100; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; padding: 16px; }
  .sign-modal { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px; width: 100%; max-width: 460px; }
  .sign-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 12px; }
  .sign-canvas { width: 100%; height: 180px; background: #fff; border: 1px solid var(--border); border-radius: 8px; touch-action: none; cursor: crosshair; display: block; }
  .sign-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
  /* Roster filter inputs sit in the narrowest columns — trim padding/size so the
     "Filter…" placeholder fits without clipping. Other tabs' filters keep defaults. */
  .roster-col-filter { padding: 2px 5px; font-size: 10px; }

  /* ── Badge master component ─────────────────────────────
     Single base class + BEM variant modifiers.
     Status (non-clickable): semi-transparent fill, no border.
  ──────────────────────────────────────────────────────── */
  .badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500;
    padding: 2px 8px; border-radius: 6px; border: none;
    white-space: nowrap; line-height: 18px;
  }
  .badge .icon { width: 12px; height: 12px; flex-shrink: 0; }
  /* success  · emerald */
  .badge--success     { background: rgba(5,150,105,0.15);  color: #10b981; }
  /* danger   · rose */
  .badge--danger      { background: rgba(225,29,72,0.15);  color: #fda4af; }
  /* warning  · orange — Damaged · Not returned · Has equipment */
  .badge--warning     { background: rgba(249,115,22,0.15); color: #fb923c; }
  /* maintenance · purple */
  .badge--maintenance { background: rgba(168,85,247,0.15); color: #d8b4fe; }
  /* neutral  · gray — log action labels */
  .badge--neutral     { background: rgba(156,163,175,0.12); color: #9ca3af; }
  /* ready    · blue — Pre-scan pouch finished (Done), waiting for the driver */
  .badge--ready       { background: rgba(59,130,246,0.15); color: #93c5fd; }

  /* Modal */
  .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.82); z-index: 150; display: none; align-items: center; justify-content: center; padding: 20px; }
  .modal-backdrop.open { display: flex; }
  /* Three parts: header · scrolling body · fixed footer (built by ModalShell in ui.js). Only the body scrolls. */
  .modal { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; width: 100%; max-width: 480px; max-height: 90vh; overflow: hidden; outline: none; }
  .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px 16px; flex-shrink: 0; }
  .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 24px; }
  .modal-footer { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; padding: 16px 24px; border-top: 1px solid var(--border); }
  .modal-title { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--accent); }
  .modal-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; background: none; border: none; border-radius: 8px; color: var(--muted); cursor: pointer; transition: color 0.15s, background 0.15s; }
  .modal-close:hover { color: var(--text); background: var(--surface2); }
  .modal-close .icon { width: 18px; height: 18px; }

  /* "Discard changes?" panel — sits inside the modal, over its content. */
  .modal-confirm { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,0.82); }
  .modal-confirm-card { background: #101828; border: 1px solid #1E2939; border-radius: 12px; padding: 20px; width: 100%; max-width: 340px; }
  .modal-confirm-title { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; color: var(--text); margin-bottom: 4px; }
  .modal-confirm-actions { display: flex; gap: 8px; flex-wrap: wrap; }

  /* ── Dark scrollbars (page + modal body) ── */
  html, .modal-body { scrollbar-width: thin; scrollbar-color: #4b5563 transparent; }
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 4px; }

  .condition-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
  .condition-btn { font-family: 'Inter', sans-serif; font-size: 11px; padding: 7px 14px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface2); color: var(--muted); cursor: pointer; transition: all 0.15s; font-weight: 700; }
  .condition-btn:hover { border-color: var(--accent); color: var(--text); }
  /* DS: bg-success-soft dark · emerald-600 / orange-950 · orange-400 / rose-950 · rose-600 / blue-950 · blue-300 / purple-950 · purple-300 */
  .condition-btn.active-ok          { background: #022c22; border-color: #059669; color: #059669; }
  .condition-btn.active-damaged     { background: #431407; border-color: #fb923c; color: #fb923c; }
  .condition-btn.active-lost        { background: #4c0519; border-color: #e11d48; color: #e11d48; }
  .condition-btn.active-not-returned{ background: #172554; border-color: #93c5fd; color: #93c5fd; }
  .condition-btn.active-maintenance { background: #3b0764; border-color: #d8b4fe; color: #d8b4fe; }

  .stats-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
  .stat-box { flex: 1; min-width: 100px; background: #101828; border: 1px solid #1E2939; border-radius: 10px; padding: 16px; text-align: center; }
  .stat-num { font-family: 'Inter', sans-serif; font-size: 28px; font-weight: 700; line-height: 1; }
  .stat-label { font-size: 11px; color: var(--muted); margin-top: 4px; }
  .stat-box.clickable { cursor: pointer; transition: border-color 0.15s, background 0.15s; }
  .stat-box.clickable:hover { border-color: var(--accent); }
  .stat-box.stat-active { border-color: var(--accent); background: rgba(240,180,41,0.08); }
  .col-filter {
    width: 100%;
    background: #101828;
    border: 1px solid #1E2939;
    color: #FFFFFF;
    padding: 6px 10px;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    outline: none;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.15s;
  }
  select.col-filter {
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%2399A1AF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 24px;
  }
  .col-filter::placeholder { color: #99A1AF; }
  .col-filter:focus { border-color: #4D6A8A; box-shadow: 0 0 0 2px rgba(77,106,138,0.2); }
  .col-filter option { background: #1E2939; color: #FFFFFF; }

  /* Scan panel */
  .scan-panel {
    border: 2px solid var(--border); border-radius: 12px;
    padding: 20px; margin-bottom: 16px; transition: border-color 0.2s;
    background: var(--surface);
  }
  .scan-panel.has-items { border-color: var(--accent); }
  .scan-panel-title { font-family: 'Inter', sans-serif; font-size: 11px; color: var(--muted); letter-spacing: 0.5px; margin-bottom: 14px; }

  .barcode-field { display: flex; gap: 8px; align-items: flex-end; }
  .barcode-field input { margin-bottom: 0; }

  .empty-state { text-align: center; padding: 40px; color: var(--muted); font-size: 14px; }
  .actions-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }

  .driver-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; margin-bottom: 12px; }
  .driver-card-name { font-weight: 600; font-size: 15px; margin-bottom: 8px; }

  /* Issue cards (legacy — kept for backwards compat) */
  .issue-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; margin-bottom: 10px; transition: border-color 0.2s; }
  .issue-card.all-returned { border-color: rgba(5,150,105,0.35); opacity: 0.65; }

  /* ── Today's assignments widget ── */
  .ci-widget-panel { background: #101828; border: 1px solid #1E2939; box-shadow: 0px 1px 0.5px 0.05px rgba(29,41,61,0.02); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 24px; }
  .ci-widget-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
  .ci-widget-header .ci-section-title { white-space: nowrap; }
  .ci-widget-controls { display: flex; align-items: center; gap: 12px; flex-shrink: 0; flex-wrap: wrap; }
  .ci-list-item { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; gap: 8px; border-bottom: 1px solid #1E2939; }
  .ci-list-item:last-child { border-bottom: none; }
  .ci-list-item.ci-list-all-returned { opacity: 0.55; }
  .ci-list-item-left { display: flex; flex-direction: column; gap: 12px; }
  .ci-list-driver-name { font-size: 16px; font-weight: 500; color: #fff; line-height: 1; }
  .ci-list-item-tags { display: flex; flex-wrap: wrap; gap: 8px; }
  .ci-widget-tag { background: #1E2939; border: 1px solid #333E4F; border-radius: 6px; padding: 2px 6px; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: #fff; line-height: 16px; font-family: 'Inter', sans-serif; }
  .ci-widget-tag .icon { width: 12px; height: 12px; flex-shrink: 0; }
  .ci-list-item-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
  .ci-list-item-right .badge { flex-shrink: 0; }
  .ci-list-time { font-size: 14px; font-weight: 400; color: #99A1AF; white-space: nowrap; font-family: 'Inter', sans-serif; }

  .toast { position: fixed; bottom: 24px; right: 24px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); padding: 12px 20px; border-radius: 8px; font-size: 14px; z-index: 300; opacity: 0; transform: translateY(10px); transition: all 0.2s; pointer-events: none; max-width: 300px; }
  .toast.show { opacity: 1; transform: translateY(0); }
  .toast.error   { border-left-color: var(--red); }
  .toast.success { border-left-color: var(--green); }

  textarea.import-area { width: 100%; background: var(--surface2); border: 1px dashed var(--border); color: var(--text); padding: 10px 14px; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 13px; outline: none; resize: vertical; min-height: 90px; margin-bottom: 10px; line-height: 1.6; }
  textarea.import-area:focus { border-color: var(--accent); }

  #scanner-container { position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 200; display: none; flex-direction: column; align-items: center; justify-content: center; }
  #scanner-container.open { display: flex; }
  #scanner-viewport { width: min(90vw,400px); height: 280px; border-radius: 12px; overflow: hidden; position: relative; border: 2px solid var(--accent); }
  #scanner-viewport canvas, #scanner-viewport video { width:100%!important; height:100%!important; object-fit:cover; }
  .scan-line { position: absolute; left:0; right:0; height:2px; background:var(--accent); animation:scanline 2s ease-in-out infinite; box-shadow:0 0 8px var(--accent); pointer-events:none; z-index:10; }
  @keyframes scanline { 0%,100%{top:10%} 50%{top:85%} }
  #scanner-label { font-family:'Inter',sans-serif; color:var(--accent); font-size:13px; margin-top:16px; text-align:center; padding:0 20px; }
  #scanner-result { font-family:'Inter',sans-serif; color:var(--green); font-size:16px; margin-top:10px; min-height:24px; }

  details summary { list-style: none; }
  details summary::-webkit-details-marker { display: none; }

  /* ── LOGIN OVERLAY ─────────────────────────────────────── */
  #login-overlay {
    position: fixed; inset: 0; background: var(--bg); z-index: 500;
    display: flex; align-items: center; justify-content: center; padding: 24px;
  }
  #login-overlay.hidden { display: none; }
  .login-card {
    background: #101828; border: 1px solid #1E2939; border-radius: 16px;
    padding: 36px 32px; width: 100%; max-width: 380px; text-align: center;
    display: flex; flex-direction: column; align-items: center;
  }
  .login-logo {
    display: flex; justify-content: center; align-items: center; margin-bottom: 12px;
  }
  .login-subtitle {
    font-size: 13px; color: var(--muted); margin-bottom: 28px;
  }
  /* Login field — override розміру і центрування PIN-інпуту */
  .login-field { margin-bottom: 12px; width: 100%; }
  .login-field .input-eye-wrap input {
    font-size: 18px !important; letter-spacing: 3px;
    text-align: center; height: auto !important;
    padding: 12px 44px 12px 14px !important;
  }
  .login-btn {
    width: 100%; font-family: 'Inter', sans-serif; font-size: 13px;
    padding: 12px; border-radius: 8px; border: none; cursor: pointer;
    font-weight: 700; background: var(--accent); color: #000;
    transition: background 0.15s; margin-top: 4px;
  }
  .login-btn:hover { background: #f5c842; }
  .login-error {
    font-size: 12px; color: var(--red); margin-top: 10px; min-height: 18px;
  }

  /* Role badge & logout in header */
  .role-badge {
    font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700;
    padding: 4px 10px; border-radius: 5px; border: 1px solid;
  }
  .role-badge.dispatcher { background: rgba(34,197,94,0.12);  border-color: var(--green);  color: var(--green); }
  .role-badge.admin      { background: rgba(240,180,41,0.12); border-color: var(--accent); color: var(--accent); }
  .role-badge.manager    { background: rgba(168,85,247,0.12); border-color: #a855f7;       color: #a855f7; }
  .btn-logout {
    font-family: 'Inter', sans-serif; font-size: 11px; padding: 5px 11px;
    border-radius: 6px; border: 1px solid var(--border); background: transparent;
    color: var(--muted); cursor: pointer; transition: all 0.15s; font-weight: 700;
  }
  .btn-logout:hover { border-color: var(--red); color: var(--red); }

  /* Sync indicator */
  #sync-indicator {
    font-family: 'Inter', sans-serif; font-size: 11px;
    color: var(--muted); transition: color 0.3s; white-space: nowrap;
  }

  /* App loading overlay */
  #app-loading {
    position: fixed; inset: 0; background: var(--bg); z-index: 400;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  }
  #app-loading.hidden { display: none; }
  .loader-ring {
    width: 40px; height: 40px; border: 3px solid var(--border);
    border-top-color: var(--accent); border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .loader-text { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--muted); }

  /* ── FOCUS STYLES ─────────────────────────────────────── */
  *:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
  }


  /* ── Checkout driver card — item rows ── */
  .co-item-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid #333E4F; gap: 8px; flex-wrap: wrap; }
  .co-item-row:last-child { border-bottom: none; }
  .co-item-left { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text); flex: 1; min-width: 0; }
  .co-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .co-dot-pending  { background: var(--red); }
  .co-dot-returned { background: var(--green); }
  .co-dot-lost     { background: var(--muted); }
  .co-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .co-item-lost { text-decoration: line-through; color: var(--muted); }
  .co-item-right { display: flex; gap: 4px; flex-shrink: 0; align-items: center; }
  .co-btn-action { background: #1E2939; border: 1px solid #333E4F; border-radius: 8px; padding: 3px 10px; font-size: 12px; font-weight: 500; color: var(--muted); cursor: pointer; font-family: 'Inter', sans-serif; transition: background 0.1s; white-space: nowrap; }
  .co-btn-action:hover { color: var(--text); background: var(--surface2); }
  .co-cond-btn { padding: 3px 10px; border-radius: 8px; font-size: 12px; font-weight: 500; cursor: pointer; font-family: 'Inter', sans-serif; border: 1px solid #333E4F; background: #1E2939; color: var(--muted); transition: all 0.1s; }
  .co-cond-btn.active-ok  { background: rgba(16,185,129,0.15); color: #10b981; border-color: #10b981; }
  .co-cond-btn.active-dmg { background: rgba(249,115,22,0.15);  color: #f97316; border-color: #f97316; }
  .co-progress { font-size: 12px; font-weight: 500; color: #CBD5E1; background: #2D3B4E; border: none; border-radius: 6px; padding: 2px 8px; white-space: nowrap; flex-shrink: 0; }
  .co-progress.complete { color: #10b981; background: rgba(16,185,129,0.18); border: none; }
  .co-dmg-input { width: 100%; margin: 6px 0 2px; font-size: 12px; padding: 6px 10px; }

  /* ── NO-BADGE FALLBACK AFFORDANCE ─────────────────────── */
  details.no-badge-details {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0 14px;
    margin-bottom: 16px;
    background: var(--surface);
  }
  details.no-badge-details > summary {
    display: flex; align-items: center; gap: 8px;
    cursor: pointer; font-size: 13px; color: var(--muted);
    padding: 10px 0; user-select: none; list-style: none;
  }
  details.no-badge-details > summary:hover { color: var(--text); }
  details.no-badge-details[open] > summary { color: var(--text); border-bottom: 1px solid var(--border); margin-bottom: 12px; }
  details.no-badge-details > summary::before { content: '▸'; font-size: 10px; transition: transform 0.15s; }
  details.no-badge-details[open] > summary::before { transform: rotate(90deg); }

  /* ── LOG DANGER ZONE ──────────────────────────────────── */
  .log-danger-zone {
    display: flex; gap: 8px; align-items: center;
    margin-left: auto;
    padding-left: 14px;
    border-left: 2px solid rgba(239,68,68,0.35);
  }

  /* ── STAT BOX CLICKABLE INDICATOR ────────────────────── */
  .stat-box.clickable { position: relative; }
  .stat-box.clickable::after {
    content: ''; display: block;
    width: 24px; height: 2px;
    background: var(--border);
    margin: 6px auto 0;
    border-radius: 2px;
    transition: background 0.15s, width 0.15s;
  }
  .stat-box.clickable:hover::after,
  .stat-box.stat-active::after { background: var(--accent); width: 32px; }

  /* ── Check-in redesign ───────────────────────────────── */

  /* Modal panel wrapper (scan + card block) */
  .ci-modal-panel { background: #101828; border: 1px solid #1E2939; box-shadow: 0px 1px 0.5px 0.05px rgba(29,41,61,0.02); border-radius: 12px; padding: 24px; margin-bottom: 28px; display: flex; flex-direction: column; gap: 20px; }
  .ci-modal-header { padding-bottom: 20px; border-bottom: 1px solid #1E2939; }
  .ci-title { font-size: 18px; font-weight: 600; color: var(--text); margin-bottom: 4px; line-height: 28px; }
  .ci-instruction { font-size: 14px; color: #99A1AF; display: flex; align-items: center; gap: 6px; line-height: 24px; }
  .ci-mode-label { font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding: 10px 16px 0; }

  .ci-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
  @media (max-width: 640px) { .ci-grid { grid-template-columns: 1fr; } }

  .ci-helper-text { font-size: 12px; color: #99A1AF; line-height: 20px; margin-top: -4px; margin-bottom: 8px; }
  .ci-manual-link { font-size: 12px; font-weight: 500; color: #99A1AF; text-decoration: none; border-bottom: 1px dashed #99A1AF; cursor: pointer; background: none; border-top: none; border-left: none; border-right: none; padding: 0 0 1px; font-family: 'Inter', sans-serif; display: inline-block; }
  .ci-manual-link:hover { color: var(--text); border-bottom-color: var(--text); }
  .ci-manual-dropdown { margin-top: 10px; }

  /* Assignment card */
  .ci-card { background: #1E2939; border: 1px solid #333E4F; border-radius: 12px; overflow: hidden; }
  .ci-driver-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-height: 68px; }
  .ci-avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; color: #fff; letter-spacing: 0.5px; }
  .ci-avatar-empty { background: #1E2939 !important; border: 1px dashed #4A5565; color: var(--muted); }
  .ci-avatar-empty .icon { width: 20px; height: 20px; }
  .ci-no-driver { font-size: 14px; font-weight: 400; color: #99A1AF; }
  .ci-driver-name { font-size: 15px; font-weight: 600; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ci-remove-btn { background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; border-radius: 6px; flex-shrink: 0; margin-left: auto; transition: background 0.1s, color 0.1s; }
  .ci-remove-btn:hover { color: var(--text); background: rgba(255,255,255,0.06); }
  .ci-remove-btn .icon { width: 14px; height: 14px; }
  .ci-card-divider { height: 1px; background: #333E4F; }
  .ci-items-empty { display: flex; align-items: center; justify-content: center; min-height: 120px; padding: 18px 16px; font-size: 14px; color: #99A1AF; text-align: center; }
  .ci-item-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid #333E4F; font-size: 13px; color: var(--text); gap: 8px; }
  .ci-item-row:last-of-type { border-bottom: none; }
  .ci-item-label { display: flex; align-items: center; gap: 6px; }
  .ci-card-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid #333E4F; background: #1E2939; }
  .btn-assign-disabled { background: var(--surface2) !important; color: var(--muted) !important; cursor: not-allowed !important; opacity: 0.7; }

  /* Left-icon input (search) */
  .input-left-icon-wrap { position: relative; margin-bottom: 10px; }
  .input-left-icon-wrap input { padding-left: 36px !important; margin-bottom: 0 !important; }
  .input-left-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; display: flex; }
  .input-left-icon .icon { width: 16px; height: 16px; }

  /* Assignments section header */
  .ci-section-title { white-space: nowrap; }
  .ci-assignments-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
  .ci-filter-toggle { display: flex; background: var(--surface2); border-radius: 9999px; padding: 3px; gap: 2px; flex-shrink: 0; }
  .ci-toggle-btn { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; padding: 5px 14px; border-radius: 9999px; border: none; background: transparent; color: var(--muted); cursor: pointer; transition: all 0.15s; white-space: nowrap; }
  .ci-toggle-btn.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.25); }

  /* Issue card item tag */
  .ci-item-tag { display: inline-flex; align-items: center; gap: 4px; border-radius: 20px; padding: 3px 10px; font-size: 12px; margin: 3px 3px 0 0; border: 1px solid var(--border); background: var(--surface2); color: var(--text); }
  .ci-just-assigned { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 6px; }

  /* Check-in table actions (Print / Export Excel), right of the section title */
  .table-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Print: only the Check-in roster, landscape (it's a wide 13-column sheet). */
@media print {
  @page { size: landscape; }
  body * { visibility: hidden; }
  /* Date + weekday title at the top of the printed page. */
  #checkinPrintTitle { display: block; visibility: visible; color: #000 !important;
    position: absolute; left: 0; top: 0; width: 100%; text-align: center; font-size: 15px; font-weight: 700; }
  #checkinTable, #checkinTable * { visibility: visible; color: #000 !important; }  /* black text on paper */
  #checkinTable { position: absolute; left: 0; top: 24px; width: 100%; font-size: 10px; }
  #checkinTable .tbl-filter-row { display: none; }   /* drop the search-input row */
  #checkinTable th:first-child, #checkinTable td:first-child,
  #checkinTable colgroup col:first-child { display: none; }  /* drop Pre-scan column */
  #checkinTable th, #checkinTable td { border: 1px solid #000 !important; }  /* solid grid on paper */
  #checkinTable .roster-sign-btn { display: none; }   /* unsigned → blank cell on paper */
  .table-actions { display: none !important; }
}

  /* ── Header + navigation (one nav, role-based; see js/nav.js) ─────────── */
  .header-right { display: flex; align-items: center; gap: 14px; }
  /* Стан системи (Dev, Synced) і користувач (аватар) — дві групи; між ними лінія. */
  .header-status { display: flex; align-items: center; gap: 12px; }
  .user-menu { padding-left: 16px; margin-left: 4px; border-left: 1px solid var(--border); }
  /* Dev — приглушений: сірий контур, без фіолетового акценту (не тягне увагу). */
  .role-badge#dev-badge { background: transparent; border-color: var(--border); color: var(--muted); font-weight: 600; font-size: 10px; letter-spacing: 0.04em; padding: 3px 8px; }
  #sync-indicator { display: inline-flex; align-items: center; gap: 8px; }
  .sync-retry {
    font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px;
    border: 1px solid var(--red); background: transparent; color: var(--red); cursor: pointer;
  }
  .sync-retry:hover { background: rgba(225,29,72,0.12); }
  .nav-divider { width: 1px; align-self: center; height: 18px; margin: 0 10px; background: var(--border); flex-shrink: 0; }

  .user-menu { position: relative; }
  .avatar {
    width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface2);
    color: var(--text); font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; transition: all 0.15s;
  }
  .avatar:hover, .avatar[aria-expanded="true"], .avatar.is-active { border-color: var(--accent); color: var(--accent); }
  .user-dropdown {
    display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 250; min-width: 200px;
    background: #1E2939; border: 1px solid #333E4F; border-radius: 10px; padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  }
  .user-dropdown.open { display: block; }
  .user-dropdown-head { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; border-bottom: 1px solid #333E4F; margin-bottom: 4px; }
  .user-dropdown-head small { font-size: 11px; color: var(--muted); }
  .user-dropdown-head strong { font-size: 14px; color: var(--text); }
  .user-dropdown button {
    display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text);
    font-family: 'Inter', sans-serif; font-size: 13px; padding: 8px 10px; border-radius: 6px; cursor: pointer;
  }
  .user-dropdown button:hover { background: rgba(255,255,255,0.06); }
  .user-dropdown-sep { height: 1px; background: #333E4F; margin: 4px 0; }
  .user-dropdown .user-dropdown-danger { color: #fda4af; }

  /* Навігація В шапці (один рядок із логотипом): логотип | меню | службові елементи. */
  header { gap: 24px; flex-wrap: wrap; }
  #main-nav { display: flex; align-items: center; gap: 2px; padding: 0; border-bottom: none; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  #main-nav::-webkit-scrollbar { display: none; }
  #main-nav .tab {
    border: none; border-radius: 8px; margin: 0; padding: 8px 12px; font-size: 13px; font-weight: 500;
  }
  #main-nav .tab:hover { background: rgba(255,255,255,0.05); }
  #main-nav .tab.active { background: rgba(240,180,41,0.12); color: var(--accent); border: none; margin-bottom: 0; }
  .header-right { margin-left: auto; flex-shrink: 0; }
  /* Вузький екран: меню переходить на власний рядок під логотипом (скрол, якщо не влізло). */
  @media (max-width: 1000px) {
    #main-nav { order: 3; flex: 1 0 100%; margin: 0 -4px; }
    header { gap: 12px; padding: 10px 16px; }
  }

  /* ── Hiring ─────────────────────────────────────────────── */
  #tab-hiring { --hr-sticky-top: var(--topbar-h, 0px); }
  .hr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
  .hr-head h2 { margin: 0; }
  .hr-head-actions { display: flex; align-items: center; gap: 8px; }
  .hr-icon-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
    background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--muted); cursor: pointer; font-size: 18px;
  }
  .hr-icon-btn:hover:not(:disabled) { color: var(--text); border-color: var(--border); }
  .hr-icon-btn:disabled { opacity: 0.3; cursor: not-allowed; }
  .hr-icon-btn--sm { width: 26px; height: 26px; font-size: 14px; }
  .hr-menu-wrap { position: relative; display: inline-block; }
  .hr-menu {
    display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 60; min-width: 200px;
    background: #1E2939; border: 1px solid #333E4F; border-radius: 8px; padding: 4px; box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  }
  .hr-menu.open { display: block; }
  .hr-menu--up { top: auto; bottom: calc(100% + 4px); }
  .hr-menu--fixed { position: fixed; right: auto; z-index: 300; }
  .hr-menu button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: none; color: var(--text); font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
  .hr-menu button:hover { background: rgba(255,255,255,0.06); }
  .hr-menu button.is-current { background: rgba(255,255,255,0.04); font-weight: 600; }
  .hr-menu .hr-menu-danger { color: #e0a3aa; }   /* приглушений червоний */
  .hr-menu-sep { height: 1px; background: #333E4F; margin: 4px 0; }
  .hr-menu-field { display: block; font-size: 12px; color: var(--muted); padding: 6px 8px; }
  .hr-menu-field select { display: block; margin-top: 4px; width: 100%; }

  /* Чіп статусу (таблиця, панель, повна сторінка): УСІ чіпи контурні, жодного залитого —
     вкладки вже ділять таблицю за статусом, тож заливка на «New» повторювала б активну
     вкладку; сигнал «тут є робота» несе лічильник вкладки. Rejected і Not eligible — одна
     сіра родина (обидва «поза воронкою, дій не треба»); пунктир = автоматичний Not eligible.
     НЕ червоні. New: рамка #EF9F27 (на ступінь глибша за бренд #F5B82E), щоб не зливалась
     з жовтими лінками панелі. Контраст виміряно на фонах сторінки, рядка, hover і вибраного
     рядка; сірі підняті до 3:1 / 4.5:1 (див. tests/chip-contrast.test.js). */
  .hr-chip {
    display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; font-weight: 500;
    padding: 3px 8px 3px 11px; border-radius: 999px; border: 1px solid transparent; background: transparent;
    cursor: pointer; white-space: nowrap;
  }
  .hr-chip .icon { width: 12px; height: 12px; opacity: 0.85; }
  .hr-chip:hover { filter: brightness(1.12); }
  .hr-chip--static { cursor: default; padding-right: 11px; }
  .hr-chip--new           { border-color: #EF9F27; color: #FAC775; }
  .hr-chip--interview     { border-color: #378ADD; color: #85B7EB; }
  .hr-chip--hired         { border-color: #639922; color: #97C459; }
  .hr-chip--rejected,
  .hr-chip--withdrawn     { border-color: #777670; color: #949389; }
  .hr-chip--not_qualified { border-color: #777670; color: #949389; border-style: dashed; }
  .hr-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: #777670; }
  .hr-dot--new { background: #EF9F27; } .hr-dot--interview { background: #378ADD; } .hr-dot--hired { background: #639922; }
  .hr-dot--rejected, .hr-dot--not_qualified { background: #777670; }

  /* Один рядок: таби статусів зліва, дії справа (права межа = права межа таблиці). */
  .hr-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid #1E2939; margin-bottom: 20px; }
  .hr-toolbar .hr-head-actions { padding-bottom: 6px; }
  .hr-toolbar .hr-head-actions { gap: 2px; }
  .hr-toolbar .hr-btn--sm { height: 26px; }   /* висота ряду з табами не змінюється */
  .hr-tabs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
  .hr-tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 500; padding: 8px 14px; cursor: pointer; margin-bottom: -1px; }
  .hr-tab:first-child { padding-left: 0; }   /* ліва межа першого табу = ліва межа таблиці */
  .hr-tab:hover { color: var(--text); }
  .hr-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
  /* Лічильник тонший і світліший за назву табу — назва лишається головною. */
  .hr-tab-count { font-weight: 300; opacity: 0.6; }
  .hr-tab.active .hr-tab-count { opacity: 0.8; }
  /* «All» — зняття фільтра, а не п'ятий статус: відділено вертикальною рискою. */
  .hr-tab-sep { width: 1px; height: 16px; background: var(--border); margin: 0 8px; align-self: center; }
  .hr-menu .hr-menu-item2 { flex-direction: column; align-items: flex-start; gap: 2px; }
  .hr-menu .hr-menu-item2 small { font-size: 11px; color: var(--muted); }
  .hr-menu--wide { min-width: 240px; }
  /* Пошук: легкий (прозорий фон, тонка рамка), ~2 колонки таблиці; стоїть ближче до
     таблиці, ніж до табів (стосується таблиці). */
  .hr-search-row { margin: 0 0 8px; }   /* вниз 8px (до таблиці) < вгору 20px (до табів) */
  #tab-hiring .hr-search { width: 40%; min-width: 220px; max-width: 480px; margin: 0; background: transparent; border: 1px solid #2a3547; }
  #tab-hiring .hr-search:focus { background: rgba(255,255,255,0.03); }
  /* Клік де завгодно в рядку відкриває панель (ціль — вся ширина рядка); hover підсвічує
     весь рядок (глобальне tbody tr:hover). Чіп статусу й копіювання зупиняють подію. */
  .hr-row { cursor: pointer; }
  .hr-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .hr-name { font-weight: 600; white-space: nowrap; }
  /* Область кліку чіпа й копіювання — на всю висоту рядка (прозорий відступ): вигляд той
     самий, але невеликий промах усе одно потрапляє в чіп, а не в рядок. */
  .hr-row .hr-chip, .hr-row .hr-copy { position: relative; }
  .hr-row .hr-chip::after, .hr-row .hr-copy::after { content: ''; position: absolute; inset: -16px -10px; }
  /* Статус змінено на вкладці, якій рядок більше не підходить: рядок лишається на місці
     (50%) з новим чіпом — до перемикання вкладки чи перезавантаження. Без анімацій. */
  .hr-row--moved .hr-cell-inner { opacity: 0.5; }
  /* Email/телефон — дія (копіювати), дата — довідка: дія світліша за дату. */
  .hr-table td.hr-cell-action { color: #d1d5db; }
  .hr-copy { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border-radius: 4px; }
  .hr-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .hr-copy-icon { width: 13px; height: 13px; opacity: 0.45; transition: opacity 0.12s; flex-shrink: 0; }
  /* Значок змінює колір лише при наведенні на САМУ комірку (текст/значок), не на весь рядок. */
  .hr-copy:hover .hr-copy-icon, .hr-copy:focus-visible .hr-copy-icon { opacity: 1; }
  /* Після копіювання: зелена галочка замість значка + тултіп «Copied» при наведенні. */
  .hr-check { display: none; position: relative; color: #34d399; }
  .hr-check .icon { width: 14px; height: 14px; stroke-width: 2.2; }
  .hr-copy.is-copied .hr-copy-icon { display: none; }
  .hr-copy.is-copied .hr-check { display: inline-flex; }
  .hr-check:hover::after {
    content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    background: #1E2939; color: var(--text); border: 1px solid #333E4F; border-radius: 6px; padding: 3px 8px;
    font-size: 11px; font-weight: 500; white-space: nowrap; pointer-events: none; z-index: 20;
  }
  .hr-row.is-selected td { background: #1a2234; }   /* такий самий, як hover; без жовто-коричневого тла */
  .hr-row.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
  .hr-table td:first-child { white-space: normal; }

  /* Side sheet: прикріплений до правого краю вікна, від низу шапки до низу екрана;
     без затемнення. Вміст ліворуч (.hr-split) має відступ = ширина панелі. */
  .hr-split { margin-right: 560px; }   /* запасне значення; точний відступ (панель + 40px) виставляє JS */
  #tab-hiring.hr-has-drawer .hr-table th, #tab-hiring.hr-has-drawer .hr-table td { padding-left: 16px; padding-right: 16px; }
  .hr-table td:last-child { white-space: nowrap; }
  .hr-table .hr-copy-text { overflow-wrap: anywhere; }
  .hr-table td:nth-child(2) .hr-copy-text { white-space: nowrap; }   /* номер і імʼя не переносяться; довгий email — так */
  .hr-drawer {
    position: fixed; top: var(--topbar-h, 0px); right: 0; bottom: 0; width: 520px; z-index: 90;
    background: #101828; border-left: 1px solid #3a4658;   /* 1px роздільник: без нього дві темні панелі зливаються */
    display: flex; flex-direction: column; overflow: hidden;
  }
  .hr-card-head { padding: 14px 16px 10px; border-bottom: 1px solid #1E2939; background: #101828; }
  .hr-row1 { display: flex; align-items: center; gap: 8px; }
  .hr-card-name { font-size: 18px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hr-row1-actions { margin-left: auto; display: flex; gap: 2px; }
  .hr-row2 { display: flex; align-items: center; flex-wrap: nowrap; gap: 12px; margin-top: 10px; min-width: 0; }
  .hr-applied { font-size: 13px; color: var(--muted); white-space: nowrap; }
  .hr-card-head .hr-copy { color: #d1d5db; font-size: 13px; white-space: nowrap; }
  .hr-card-head .hr-copy-text { white-space: nowrap; }
  .hr-row2 .hr-menu-wrap:last-child { margin-left: auto; }
  .hr-contacts { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 14px; }
  .hr-contacts:empty { display: none; }
  .hr-contact { display: inline-flex; align-items: center; gap: 4px; }
  .hr-contact a { color: var(--accent); text-decoration: none; }
  .hr-contact a:hover { text-decoration: underline; }
  .hr-card-body { padding: 16px; overflow-y: auto; flex: 1; }

  /* Липкий заголовок підсторінки: [←] Назва ........ [дії]; за потреби другий рядок під
     назвою (ідентичність: статус, дата, контакти). Один компонент для всіх підсторінок. */
  .hr-page-header {
    position: sticky; top: var(--topbar-h, 0px); z-index: 50; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center; column-gap: 12px; row-gap: 8px;
    background: var(--bg); padding: 12px 0; margin-bottom: 16px; border-bottom: 1px solid #1E2939;
  }
  .hr-back {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0;
    background: transparent; border: 1px solid var(--border); border-radius: 8px; color: var(--text); cursor: pointer; font-size: 18px;
  }
  .hr-back:hover { border-color: var(--accent); color: var(--accent); }
  .hr-page-title { margin: 0; font-size: 20px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hr-page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
  /* Другий рядок — рівно під назвою (колонка 2), статус · дата · телефон · email ліворуч. */
  .hr-page-sub { grid-column: 2 / 4; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; min-width: 0; }
  .hr-sub-end { margin-left: auto; }   /* Actions — у цьому ж рядку, але праворуч */
  .hr-page-sub .hr-copy { color: #d1d5db; font-size: 14px; }

  /* Повна сторінка кандидата: відповіді ліворуч, приколоті нотатки праворуч. */
  .hr-fullpage { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
  /* Notes: не прилипають (прокручуються зі сторінкою); верхній край = верх картки Candidate
     information (вони в одній сітці, а вибір заявки/банер винесені над нею). */
  .hr-fullpage-notes { align-self: start; position: sticky; top: calc(var(--topbar-h, 0px) + var(--hr-page-header-h, 0px) + 16px); }
  .hr-fullpage-notes textarea { resize: none; overflow-y: hidden; }
  /* Довжина рядка: абзаци питань і відповідей у лівій колонці ≤ ~75 символів (≈680px); картки
     секцій на всю ширину. Position requirements (дві колонки) не обмежуємо. */
  .hr-fullpage-main .hr-qa--stack .hr-q-text, .hr-fullpage-main .hr-qa--stack .hr-a-long { max-width: 680px; }

  .hr-sec { background: #0b1220; border: 1px solid #1E2939; border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }
  .hr-sec-title { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
  .hr-notes textarea { width: 100%; }
  .hr-notes--collapsed { padding: 0; }
  .hr-notes-row { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: none; color: inherit; cursor: pointer; padding: 0; text-align: left; font: inherit; }
  .hr-notes--collapsed .hr-notes-row { padding: 12px 16px; }
  .hr-notes-row .hr-sec-title { margin: 0; }
  .hr-notes-preview { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 14px; }
  .hr-notes-row .icon { color: var(--muted); flex-shrink: 0; }
  .hr-notes-row + textarea { margin-top: 10px; }
  /* Усі textarea Hiring — у темній темі, як решта полів (раніше мали білий фон браузера). */
  #tab-hiring textarea {
    width: 100%; background: #1E2939; border: 1px solid #333E4F; color: #FFFFFF; padding: 10px 12px;
    border-radius: 12px; font-family: 'Inter', sans-serif; font-size: 14px; line-height: 20px; outline: none;
    resize: vertical; transition: border-color 0.15s, box-shadow 0.15s;
  }
  #tab-hiring textarea::placeholder { color: #99A1AF; }
  #tab-hiring textarea:focus { border-color: #f0b429; box-shadow: 0 0 0 3px rgba(240, 180, 41, 0.15); }
  /* Два стовпці 60/40: значення ЛІВОРУЧ у фіксованій позиції, не по правому краю. */
  .hr-qa--row { display: grid; grid-template-columns: 60% 40%; gap: 0; padding: 7px 0; border-bottom: 1px solid #1E2939; align-items: baseline; }
  .hr-qa--row:last-child { border-bottom: none; }
  .hr-qa--row .hr-q-text { padding-right: 12px; }
  /* Пара «питання → відповідь» для довгих відповідей (будь-яка секція, повна сторінка теж):
     питання — дрібна приглушена підпис-мітка; відповідь — 15px, звичайна вага, вкладена
     (1px сіра межа зліва від краю тексту питання + 12px внутрішнього відступу). Усередині пари
     8px, між парами — роздільник 1px і по 24px з обох боків: проміжок МІЖ парами завжди
     помітно більший за проміжок УСЕРЕДИНІ. Короткі питання/відповіді лишаються у два стовпці. */
  .hr-qa--stack { padding: 0; }
  .hr-qa--stack .hr-q-text { font-size: 13px; font-weight: 400; line-height: normal; color: var(--muted); }
  .hr-qa--stack .hr-a-long {
    font-size: 15px; font-weight: 400; color: #FFFFFF; line-height: 1.5;
    margin: 8px 0 0 0; padding-left: 12px; border-left: 1px solid #4b5563;   /* тонка сіра лінія від самого лівого краю тексту питання */
  }
  .hr-qa--stack + .hr-qa--stack { border-top: 1px solid #1E2939; margin-top: 24px; padding-top: 24px; }
  .hr-qa--row + .hr-qa--stack, .hr-qa--stack + .hr-qa--row { margin-top: 16px; }
  .hr-q-text { font-size: 12px; color: var(--muted); }
  .hr-a-short { font-size: 14px; color: var(--text); text-align: left; word-break: break-word; }
  .hr-a-long { white-space: pre-wrap; word-break: break-word; }
  .hr-help { font-size: 12px; color: var(--muted); }
  .hr-field { display: block; margin-bottom: 12px; }
  .hr-field > input, .hr-field > textarea, .hr-field > select { width: 100%; margin-top: 4px; }
  .hr-mgr-mark { width: 11px; height: 11px; margin-left: 4px; opacity: 0.55; vertical-align: -1px; }
  .hr-autosave { font-size: 11px; color: var(--muted); min-height: 14px; }
  .hr-app-select { margin-bottom: 12px; }
  .hr-disq { background: rgba(190,90,100,0.14); color: #e0a3aa; border-radius: 8px; padding: 8px 12px; font-size: 13px; margin-bottom: 12px; }
  .hr-consent { padding: 6px 0; font-size: 14px; }
  .hr-consent summary { cursor: pointer; list-style: none; }
  .hr-consent summary::-webkit-details-marker { display: none; }
  .hr-agreed { color: #34d399; font-weight: 600; }
  .hr-link { color: var(--accent); text-decoration: underline; }
  .hr-consent-text { margin-top: 8px; font-size: 13px; color: var(--muted); line-height: 1.5; }

  /* Документи */
  .hr-doc-group { margin-bottom: 14px; }
  .hr-doc-group:last-child { margin-bottom: 0; }
  .hr-doc { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
  .hr-thumb { width: 40px; height: 40px; border-radius: 6px; overflow: hidden; background: #1E2939; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
  .hr-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .hr-thumb--file { font-size: 10px; font-weight: 700; color: var(--muted); }
  .hr-doc-hover { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: zoom-in; }
  .hr-hover-preview { position: fixed; z-index: 400; background: #101828; border: 1px solid #333E4F; border-radius: 8px; padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); pointer-events: none; }
  .hr-hover-preview img { display: block; max-width: 340px; max-height: 340px; border-radius: 4px; }
  .hr-consent-card { position: relative; background: #101828; border: 1px solid #333E4F; border-radius: 12px; padding: 24px 28px; max-width: 560px; max-height: 80vh; overflow: auto; color: var(--text); }
  .hr-consent-card h3 { margin: 0 0 12px; font-size: 16px; color: var(--text); }
  .hr-consent-card p { margin: 0 0 6px; font-size: 14px; line-height: 1.5; }
  .hr-consent-card .hr-lightbox-close { top: 12px; right: 12px; }
  .hr-doc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
  .hr-lightbox { position: fixed; inset: 0; z-index: 600; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; padding: 24px; }
  .hr-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; }
  .hr-lightbox iframe { width: min(900px, 100%); height: 100%; border: none; background: #fff; border-radius: 8px; }
  .hr-lightbox-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,0.15); color: #fff; font-size: 18px; cursor: pointer; }

  /* Редактор анкети */
  .hr-form-card { max-width: 860px; }

  /* Секція: лише назва (кліком редагується) + роздільник на всю ширину під нею. Заголовок
     вирівняний по лівому краю ПИТАНЬ (тих самих 32px, що залишають місце для ручки). */
  .hr-section { margin-bottom: 0; }
  /* Роздільник МІЖ секціями (після останньої картки/посилань однієї, перед заголовком наступної):
     32px над і під ним; під назвою секції роздільника нема. Вирівняний по лівому краю карток. */
  .hr-section + .hr-section { position: relative; margin-top: 32px; padding-top: 32px; }
  .hr-section + .hr-section::before { content: ''; position: absolute; top: 0; left: 32px; right: 0; border-top: 1px solid #2a3547; }
  .hr-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px 32px; }
  .hr-section-meta { min-width: 0; flex: 1; }
  .hr-section-title { margin: 0; font-size: 18px; font-weight: 600; color: var(--text); text-transform: none; letter-spacing: 0; cursor: text; border-radius: 4px; }
  .hr-section-title:hover { background: rgba(255,255,255,0.04); }
  #tab-hiring .hr-section-input { font-size: 18px; font-weight: 600; max-width: 420px; margin: 0; }
  .hr-section-qs { margin-left: 32px; position: relative; }
  .hr-empty-section { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
  .hr-section-adds { display: flex; align-items: center; gap: 8px; margin: 4px 0 0 32px; }

  /* Картка питання: фон на крок світліший за сторінку/контейнер, проміжок 12px. */
  .hr-q { position: relative; border: 1px solid #243047; border-radius: 10px; margin-bottom: 12px; background: #172136; transition: border-color 0.15s; }
  .hr-q:hover { border-color: #33425c; }
  .hr-q.open { border-color: #4a5a76; }
  .hr-q::before { content: ''; position: absolute; left: -34px; top: 0; bottom: 0; width: 34px; }   /* зона наведення для ручки поза карткою */
  .hr-q--invalid { border-color: var(--red); box-shadow: 0 0 0 2px rgba(225,29,72,.25); }
  /* Ручка — ПОЗА лівим краєм картки, вирівняна з її верхом; з'являється при наведенні. */
  .hr-grip {
    position: absolute; left: -28px; top: 0; width: 22px; height: 30px; padding: 0; touch-action: none;
    background: none; border: none; color: var(--muted); cursor: grab; opacity: 0; transition: opacity .12s;
  }
  .hr-q:hover .hr-grip, .hr-grip:hover, .hr-grip:focus-visible { opacity: 1; }
  /* Перетягування: картка піднята (тінь, прозорість), лише вертикально; лінія вставки 2px. */
  body.hr-dragging, body.hr-dragging * { cursor: grabbing !important; user-select: none; }
  .hr-q--lifted { z-index: 30; opacity: 0.88; box-shadow: 0 10px 28px rgba(0,0,0,0.55); transition: none; pointer-events: none; }
  .hr-q--drop-before::after, .hr-q--drop-after::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: var(--accent); border-radius: 1px; pointer-events: none; }
  .hr-q--drop-before::after { top: -7px; }
  .hr-q--drop-after::after { bottom: -7px; }
  .hr-section-qs--drop-empty { box-shadow: inset 0 2px 0 var(--accent); }
  html.hr-no-anim .hr-q-body, html.hr-no-anim .hr-q-body-inner { transition: none !important; }

  /* Згорнута картка: усе в одну колонку ліворуч — питання (15px, повністю) і під ним тип (13px). */
  .hr-q-head { display: block; min-height: 44px; padding: 10px 44px 10px 14px; cursor: pointer; }
  .hr-q.open .hr-q-head { display: none; }
  .hr-q-title { font-size: 15px; line-height: 1.4; color: var(--text); white-space: normal; overflow-wrap: anywhere; }
  .hr-q-label-text.is-empty { color: var(--muted); font-style: italic; }
  .hr-req { color: var(--accent); }
  .hr-q-type-name { font-size: 13px; color: var(--muted); margin-top: 2px; }
  /* Єдина іконка «···» у правому верхньому куті: при наведенні (у розгорнутій — завжди). */
  .hr-q-menu { position: absolute; top: 6px; right: 8px; z-index: 5; opacity: 0; transition: opacity .12s; }
  .hr-q:hover .hr-q-menu, .hr-q-menu:focus-within { opacity: 1; }
  .hr-q.open .hr-q-menu { display: none; }
  .hr-q-body { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.2s ease, visibility 0s linear 0.2s; }
  .hr-q.open .hr-q-body { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 0.2s ease, visibility 0s; }
  .hr-q-body-inner { overflow: hidden; min-height: 0; }
  .hr-q.open .hr-q-body-inner { padding: 14px; }
  .hr-q-top { display: flex; gap: 12px; align-items: flex-start; }
  .hr-q-label { flex: 1; min-width: 0; margin: 0; }
  /* Колонки «Question» і «Type» мають ОДНАКОВУ будову: підпис — блок 16px з відступом 4px, далі поле
     висотою рівно 40px (раніше підпис ліворуч був блоком 20px, праворуч inline 15px, а textarea
     виходила 42px — поля стояли на різних рівнях). */
  .hr-q-label, .hr-q-type { display: flex; flex-direction: column; }
  .hr-q-top .hr-q-text { display: block; font-size: 12px; line-height: 16px; margin: 0 0 4px; }
  #tab-hiring textarea.hr-qin { resize: none; overflow: hidden; min-height: 40px; margin: 0; padding: 9px 12px; font-size: 15px; line-height: 20px; }
  .hr-q-type .hr-typebtn { margin-top: 0; }
  .hr-q-type { width: 220px; margin: 0; }
  .hr-type-desc { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.4; }
  /* Help text: дрібне приглушене посилання ОДРАЗУ під полем питання, з тим самим лівим відступом. */
  .hr-q-help { margin-top: 2px; }
  .hr-add-help { background: none; border: none; padding: 0; font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; }
  .hr-add-help:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
  .hr-add-help[hidden], .hr-help-row[hidden] { display: none; }
  .hr-help-row { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
  #tab-hiring .hr-help-input { margin: 0; flex: 1; }
  /* Три зони: контент · (пунктир) поведінка · (суцільна) службовий рядок. */
  .hr-q-divider { margin: 14px 0; border: none; }
  .hr-q-divider--dashed { border-top: 1px dashed #3a4658; }
  .hr-q-divider--solid { border-top: 1px solid #243047; }
  /* Підказка — підпис ПРЯМО під назвою перемикача (без проміжку від рядка-стратки inline-flex). */
  .hr-q-zone2 > .hr-switch { display: flex; margin-bottom: 0; }   /* глобальний label{margin-bottom:6px} відсували підказку від перемикача */
  .hr-switch-help { font-size: 12px; color: var(--muted); margin: 2px 0 0 42px; line-height: 1.4; }
  .hr-q-zone3 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .hr-q-tools { display: flex; align-items: center; gap: 2px; margin-left: auto; }
  .hr-tools-gap { width: 8px; }   /* Delete — окремо від решти, щоб не натиснути випадково */
  /* «Expected answer» — з відступом 16px під перемикачем (належить йому). */
  .hr-expected { margin: 12px 0 0 16px; }
  .hr-seg { display: inline-flex; border: 1px solid #4b5563; border-radius: 8px; overflow: hidden; margin-top: 6px; }
  .hr-seg button { background: transparent; border: none; color: var(--text); font: inherit; font-size: 13px; font-weight: 600; padding: 6px 20px; cursor: pointer; }
  .hr-seg button + button { border-left: 1px solid #4b5563; }
  .hr-seg button.is-on { background: var(--accent); color: #1a1300; }
  .hr-seg button:not(.is-on):hover { background: rgba(255,255,255,0.06); }
  .hr-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  /* Власні чекбокси в амбрі (замість нативних синіх). */
  input.hr-cb { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; padding: 0; flex-shrink: 0; border: 1px solid #6b7280; border-radius: 5px; background: transparent; cursor: pointer; display: inline-grid; place-content: center; }
  input.hr-cb:checked { background: var(--accent); border-color: var(--accent); }
  input.hr-cb:checked::after { content: ''; width: 5px; height: 9px; border: solid #1a1300; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
  input.hr-cb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .hr-expect { display: inline-flex; align-items: center; gap: 8px; }
  /* Undo-тости видалень у редакторі: унизу, кожен окремо, стопкою. */
  .hr-undo-stack { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 350; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
  .hr-undo-toast { pointer-events: auto; display: inline-flex; align-items: center; gap: 4px; background: #1E2939; border: 1px solid #333E4F; border-radius: 10px; padding: 6px 8px 6px 14px; font-size: 14px; color: var(--text); box-shadow: 0 8px 24px rgba(0,0,0,0.45); }
  .hr-modal-text { margin: 0; font-size: 14px; color: var(--text); }
  /* Модалки Hiring (публікація, підтвердження, вихід з редактора): повітря між текстом і панеллю кнопок. */
  #hiring-publish-modal .modal-body, #hiring-confirm-modal .modal-body { padding-bottom: 28px; }

  /* Власний список типів: опції 14px, заголовки груп 11px caps muted (8px зверху), роздільники,
     вибране — з галочкою (не синя заливка ОС). */
  .hr-typebtn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 40px; padding: 0 12px; margin-top: 4px;
    background: #1E2939; border: 1px solid #333E4F; border-radius: 12px; color: #FFFFFF; font: inherit; font-size: 14px; cursor: pointer; }
  .hr-typebtn:hover { border-color: #4a5a76; }
  .hr-typebtn[aria-expanded="true"], .hr-typebtn:focus-visible { border-color: #f0b429; outline: none; box-shadow: 0 0 0 3px rgba(240,180,41,0.15); }
  .hr-typewrap { display: block; }
  .hr-typemenu { min-width: 240px; padding: 4px 0 6px; }
  .hr-typemenu-head { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 8px 14px 4px; }
  .hr-typemenu-sep { height: 1px; background: #333E4F; margin: 6px 0 0; }
  .hr-menu .hr-typemenu-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 14px 8px 10px; font-size: 14px; border-radius: 0; text-align: left; }
  .hr-typemenu-check { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent); display: inline-flex; align-items: center; }
  .hr-typemenu-check .icon { width: 16px; height: 16px; stroke-width: 2.2; }
  .hr-menu .hr-typemenu-opt.is-selected { background: transparent; font-weight: 600; }
  .hr-menu .hr-typemenu-opt:focus-visible { outline: none; background: rgba(255,255,255,0.08); }

  /* ── Система кнопок Hiring: чотири типи. Primary (одна на екран) · Secondary (контур) ·
     Tertiary (лише текст) · Danger (приглушено-червоний контур, тільки в меню). ── */
  .hr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 14px; font: inherit; font-size: 13px; font-weight: 600;
    border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; white-space: nowrap; transition: background 0.12s, border-color 0.12s, color 0.12s; }
  .hr-btn[hidden] { display: none; }
  .hr-btn .icon { width: 12px; height: 12px; }
  .hr-btn--sm { height: 28px; padding: 0 12px; }
  .hr-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .hr-btn--primary { background: var(--accent); color: #1a1300; }
  .hr-btn--primary:hover { background: #f5c842; }
  .hr-btn--secondary { border-color: #4b5563; color: var(--text); }
  .hr-btn--secondary:hover { border-color: #6b7280; background: rgba(255,255,255,0.04); }
  .hr-btn--secondary[aria-expanded="true"] { background: rgba(255,255,255,0.08); }
  .hr-btn--tertiary { color: var(--muted); font-weight: 500; padding: 0 10px; }
  .hr-btn--tertiary:hover { color: var(--text); background: rgba(255,255,255,0.05); }
  .hr-btn--tertiary:active, .hr-btn--tertiary[aria-expanded="true"] { color: var(--text); background: rgba(255,255,255,0.09); }
  .hr-btn--tertiary.hr-btn--accent { color: var(--accent); font-weight: 600; }
  .hr-btn--tertiary.hr-btn--accent:hover { color: #f5c842; background: rgba(240,180,41,0.08); }
  .hr-btn--danger { border: 1px solid #8f5a62; color: #e0a3aa; border-radius: 8px; }
  .hr-menu .hr-menu-danger--btn { color: #e0a3aa; }
  .hr-menu .hr-menu-danger--btn:hover { background: rgba(190,90,100,0.12); }
  .hr-disq-pick { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
  /* Варіанти відповідей по рядках (як у Google Forms). */
  .hr-opts { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
  .hr-opt-row { display: flex; align-items: center; gap: 10px; min-height: 36px; }
  .hr-opt-mark { width: 16px; height: 16px; border: 2px solid #6b7280; border-radius: 50%; flex-shrink: 0; }
  .hr-opt-mark--box { border-radius: 4px; }
  #tab-hiring input.hr-opt-in { flex: 1; min-width: 0; margin: 0; height: 36px; padding: 6px 10px; font-size: 14px; background: transparent; border-color: transparent; }
  #tab-hiring input.hr-opt-in:hover { border-color: #333E4F; }
  #tab-hiring input.hr-opt-in:focus { background: var(--card, #111827); border-color: var(--accent); }
  .hr-opt-row .hr-icon-btn { opacity: 0; }
  .hr-opt-row:hover .hr-icon-btn, .hr-opt-row:focus-within .hr-icon-btn { opacity: 1; }
  .hr-opt-other { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); padding-left: 10px; }
  .hr-opt-dots { flex: 1; border-bottom: 1px dotted #6b7280; height: 1px; margin-top: 12px; }
  .hr-opt-link { background: none; border: none; padding: 0 0 0 10px; font: inherit; font-size: 14px; color: var(--accent); cursor: pointer; }
  .hr-opt-link--muted { color: var(--muted); }
  .hr-opt-link:hover { text-decoration: underline; text-underline-offset: 3px; }
  .hr-opt-or { font-size: 14px; color: var(--muted); margin: 0 4px 0 6px; }
  .hr-opt-row--add .hr-opt-link { padding-left: 10px; }
  .hr-other-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; background: rgba(156,163,175,0.12); border-radius: 999px; padding: 3px 10px; margin: 0 8px 6px 0; }
  .hr-other-chip button { background: none; border: none; color: var(--muted); cursor: pointer; }
  .hr-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); cursor: pointer; position: relative; }
  .hr-switch input { position: absolute; opacity: 0; pointer-events: none; }
  .hr-switch-track { width: 34px; height: 20px; border-radius: 999px; background: #374151; position: relative; transition: background 0.15s; }
  .hr-switch-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
  .hr-switch input:checked + .hr-switch-track { background: var(--accent); }
  .hr-switch input:checked + .hr-switch-track::after { transform: translateX(14px); }
  .hr-switch input:focus-visible + .hr-switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
  @media (max-width: 1100px) {
    .hr-split { margin-right: 0; }
    /* Вузький екран: панель — на всю ширину під навігацією (не перекриває її). */
    .hr-drawer { left: 0; width: auto; box-shadow: none; }
    .hr-fullpage { grid-template-columns: 1fr; }
    .hr-fullpage-notes { position: static; order: -1; }
  }
  .hr-rule-line { font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 2px; }
  .hr-screening { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #333E4F; }
  .hr-expected { margin-top: 10px; }
  .hr-expect-list { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 6px 0; }
  .hr-expect { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text); cursor: pointer; }