/* AZ AutoZone ERP — v1.1 "workshop signage" theme */
:root {
  --red: #e3141e; --red-ink: #b80f17; --red-soft: #fdecec; --red-line: #f6c6c8;
  --ink: #16181d; --ink-2: #474c57; --ink-3: #7b818d;
  --bg: #eef0f3; --surface: #ffffff; --surface-2: #f6f7f9; --line: #e2e5ea; --line-2: #cfd4dc;
  --side: #16181d; --side-2: #1f2228; --side-ink: #b9bec8;
  --blue: #1f6feb; --blue-soft: #e6effd;
  --green: #11915a; --green-soft: #e2f4ec;
  --amber: #c27c00; --amber-soft: #fdf1d9;
  --violet: #6f45d6; --violet-soft: #efe9fc;
  --ok: var(--green); --ok-soft: var(--green-soft); --warn: var(--amber); --warn-soft: var(--amber-soft);
  --err: var(--red-ink); --err-soft: var(--red-soft); --info: var(--blue); --info-soft: var(--blue-soft);
  --r-sm: 6px; --r: 10px; --r-lg: 14px;
  --shadow: 0 1px 0 rgba(22,24,29,.04), 0 1px 3px rgba(22,24,29,.06);
  --shadow-lg: 0 10px 30px rgba(22,24,29,.14);
  --font: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-c: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --ink: #eceef2; --ink-2: #b6bbc5; --ink-3: #8a909c;
  --bg: #0f1114; --surface: #181b20; --surface-2: #1e2228; --line: #2a2f37; --line-2: #39404a;
  --side: #0a0b0d; --side-2: #15171b;
  --red-soft: #3a1416; --red-line: #5a2023; --blue-soft: #14243f; --green-soft: #11301f; --amber-soft: #33270e; --violet-soft: #241a3d;
  --blue: #5b9bff; --green: #3cc47f; --amber: #f0b13d; --violet: #a585ff;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { font: 15px/1.5 var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: 700; }
h2 { font-size: 17px; } h3 { font-size: 15px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ic { width: 18px; height: 18px; flex: none; }
.muted { color: var(--ink-3); } .small { font-size: 13px; } .tiny { font-size: 12px; }
.num-font, .mono { font-family: var(--font-c); font-variant-numeric: tabular-nums; letter-spacing: .2px; }
.right { text-align: right; } .center { text-align: center; } .nowrap { white-space: nowrap; }
.inline { display: inline; margin: 0; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.stack > * + * { margin-top: 16px; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.span2 { grid-column: span 2; }
.split { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.split-wide { display: grid; gap: 16px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }

/* ---------- Shell ---------- */
.app { display: flex; min-height: 100vh; }
.side { width: 236px; background: var(--side); color: var(--side-ink); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; flex: none; z-index: 30; }
.brand { display: flex; align-items: center; gap: 11px; padding: 16px 16px 14px; color: #fff; text-decoration: none !important; }
.brand img { height: 36px; width: auto; background: #fff; border-radius: 7px; padding: 3px 5px; }
.brand .mark { width: 38px; height: 38px; border-radius: 9px; background: var(--red); display: grid; place-items: center; font: 800 17px var(--font-c); letter-spacing: .5px; color: #fff; }
.brand b { display: block; font-size: 15px; letter-spacing: .2px; } .brand small { color: #8a8f99; font-size: 12px; }
.side nav { padding: 6px 10px 10px; overflow-y: auto; flex: 1; }
.navhead { font-size: 12px; color: #6d727c; padding: 16px 10px 6px; font-weight: 600; }
.side nav a { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 8px; color: var(--side-ink); font-weight: 500; text-decoration: none; position: relative; }
.side nav a:hover { background: var(--side-2); color: #fff; }
.side nav a.on { background: var(--side-2); color: #fff; }
.side nav a.on::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--red); }
.side nav a.on .ic { color: var(--red); }
.side nav .count { margin-left: auto; background: var(--red); color: #fff; font: 700 11.5px var(--font-c); border-radius: 999px; padding: 1px 7px; }
.sidefoot { padding: 10px 16px 14px; font-size: 12px; color: #555a63; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; padding: 10px 24px; min-height: 60px; }
.top h1 { font-size: 20px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 10px; }
.topright { display: flex; align-items: center; gap: 10px; }
.content { padding: 22px 24px 60px; max-width: 1360px; width: 100%; }
.burger { display: none; }
.scrim { display: none; }

/* Loading bar + live pulse */
.loadbar { position: fixed; left: 0; top: 0; height: 3px; width: 0; background: var(--red); z-index: 100; opacity: 0; transition: width .4s ease, opacity .2s; }
.loadbar.on { width: 75%; opacity: 1; transition: width 8s cubic-bezier(.1,.6,.2,1), opacity .1s; }
@keyframes pulse { from { box-shadow: 0 0 0 2px var(--blue-soft); } to { box-shadow: 0 0 0 0 transparent; } }
.pulse { animation: pulse 1.2s ease-out; border-radius: var(--r); }
.livedot { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--green); font-weight: 600; }
.livedot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }

/* Toasts */
.toasts { position: fixed; right: 18px; top: 70px; z-index: 90; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 36px)); }
.toast { background: var(--ink); color: var(--surface); padding: 11px 14px 11px 16px; border-radius: 10px; box-shadow: var(--shadow-lg); font-weight: 500; cursor: pointer; border-left: 4px solid var(--green); animation: tin .18s ease-out; }
.toast-warn { border-left-color: var(--amber); } .toast-err { border-left-color: var(--red); }
.toast.out { opacity: 0; transform: translateY(6px); transition: .25s; }
@keyframes tin { from { opacity: 0; transform: translateY(-8px); } }

/* User menu */
.usermenu { position: relative; }
.usermenu summary { list-style: none; cursor: pointer; }
.usermenu summary::-webkit-details-marker { display: none; }
.menu { position: absolute; right: 0; top: 44px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); min-width: 210px; padding: 6px; z-index: 40; }
.menu a { display: block; padding: 8px 10px; border-radius: 6px; color: var(--ink); }
.menu a:hover { background: var(--surface-2); text-decoration: none; }
.menuhead { padding: 8px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.menuhead small { display: block; color: var(--ink-3); }

/* Avatars (initials) */
.av { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; font: 700 13px var(--font-c); color: #fff; background: var(--ink); flex: none; letter-spacing: .3px; }
.av-sm { width: 26px; height: 26px; font-size: 11.5px; }
.av-xs { width: 22px; height: 22px; font-size: 10.5px; }
.avs { display: inline-flex; } .avs .av { box-shadow: 0 0 0 2px var(--surface); } .avs .av + .av { margin-left: -6px; }
.av.running { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--blue); }
.av.paused { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--amber); }
.av.done { opacity: .55; }

/* Number plate (signature) */
.plate { display: inline-flex; align-items: stretch; border: 1.5px solid #1b1d22; border-radius: 6px; background: #fff; color: #111; font-family: var(--font-c); line-height: 1; overflow: hidden; vertical-align: middle; box-shadow: inset 0 0 0 1px #fff, 0 1px 0 rgba(0,0,0,.06); white-space: nowrap; }
.plate i { font-style: normal; font-size: 8px; font-weight: 700; letter-spacing: .6px; padding: 0 4px; display: grid; place-items: center; writing-mode: vertical-rl; transform: rotate(180deg); background: #1b1d22; color: #fff; }
.plate b { font-size: 15px; font-weight: 800; padding: 4px 6px; border-right: 1.5px solid #1b1d22; display: grid; place-items: center; min-width: 22px; }
.plate em { font-style: normal; font-size: 17px; font-weight: 800; padding: 4px 8px; letter-spacing: 1px; display: grid; place-items: center; }
.plate.lg b { font-size: 22px; padding: 6px 9px; min-width: 32px; } .plate.lg em { font-size: 28px; padding: 6px 12px; letter-spacing: 2px; } .plate.lg i { font-size: 10px; padding: 0 6px; }
.plate.xl b { font-size: 30px; padding: 8px 11px; } .plate.xl em { font-size: 38px; padding: 8px 14px; letter-spacing: 2.5px; } .plate.xl i { font-size: 11px; padding: 0 7px; }
:root[data-theme="dark"] .plate { box-shadow: none; }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.card-h { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.card-h h2 { display: flex; align-items: center; gap: 8px; }
.card-b { padding: 18px; }
.card-f { padding: 12px 18px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }
details.card > summary { list-style: none; } details.card > summary::-webkit-details-marker { display: none; }

/* KPI */
.kpi { padding: 16px 18px; position: relative; display: block; color: inherit; text-decoration: none !important; }
.kpi .lbl { font-size: 13.5px; color: var(--ink-2); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.kpi .lbl .ic { color: var(--ink-3); }
.kpi .val { font: 700 30px/1.1 var(--font-c); margin-top: 6px; font-variant-numeric: tabular-nums; }
.kpi .val small { font-size: 15px; color: var(--ink-3); font-weight: 600; margin-left: 2px; }
.kpi .sub { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
a.kpi:hover { border-color: var(--line-2); }

/* Status pipeline tiles */
.pipeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.stile { border-radius: var(--r-lg); padding: 12px 14px; display: flex; gap: 12px; align-items: center; color: var(--ink); text-decoration: none !important; border: 1.5px solid transparent; background: var(--surface); box-shadow: var(--shadow); }
.stile .sic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.stile .sic .ic { width: 22px; height: 22px; }
.stile b { display: block; font: 700 24px/1 var(--font-c); }
.stile span { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.stile small { display: block; font: 600 13px var(--font-c); color: var(--ink-3); margin-top: 2px; }
.stile.on { border-color: var(--ink); }
.t-open .sic { background: #eceff3; color: var(--ink-2); }
.t-in_progress .sic { background: var(--blue-soft); color: var(--blue); }
.t-work_done .sic { background: var(--green-soft); color: var(--green); }
.t-invoiced .sic { background: var(--violet-soft); color: var(--violet); }
.t-delivered .sic { background: #e9ecef; color: #5b616c; }
.t-late .sic { background: var(--red-soft); color: var(--red); }
:root[data-theme="dark"] .t-open .sic, :root[data-theme="dark"] .t-delivered .sic { background: var(--surface-2); }

/* Tables */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 12.5px; color: var(--ink-3); font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; }
.tbl td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr[data-href] { cursor: pointer; }
.tbl tbody tr:hover td { background: var(--surface-2); }
.tbl .num, .tbl td.num { text-align: right; font-family: var(--font-c); font-size: 15.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl th.num { text-align: right; }
.tbl tfoot td { font-weight: 700; background: var(--surface-2); }
.empty { padding: 40px 18px; text-align: center; color: var(--ink-3); }
.empty b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 4px; }

/* Forms */
label.f { display: block; }
label.f > span { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; }
label.f > small { display: block; color: var(--ink-3); font-size: 12.5px; margin-top: 4px; }
input[type=text], input[type=password], input[type=email], input[type=number], input[type=date], input[type=datetime-local], input[type=time], input[type=search], input[type=tel], select, textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 11px; min-height: 40px; }
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blue); outline-offset: -1px; border-color: transparent; }
input[readonly] { background: var(--surface-2); color: var(--ink-2); }
.check { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; padding: 4px 0; }
.check input { margin-top: 4px; accent-color: var(--red); width: 16px; height: 16px; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; padding-top: 6px; flex-wrap: wrap; }
fieldset { border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; margin: 0; }
legend { font-weight: 700; padding: 0 6px; }
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 9px; padding: 3px; gap: 3px; }
.seg button { border: 0; background: none; font: 600 14px var(--font); color: var(--ink-2); padding: 6px 12px; border-radius: 7px; cursor: pointer; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: 600 14.5px var(--font); border-radius: 9px; padding: 8px 15px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none !important; min-height: 40px; white-space: nowrap; transition: background .12s, transform .05s; }
.btn:hover { background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn-red { background: var(--red); border-color: var(--red); color: #fff; } .btn-red:hover { background: var(--red-ink); }
.btn-dark { background: var(--ink); border-color: var(--ink); color: var(--surface); } .btn-dark:hover { background: #2a2e36; }
.btn-ok { background: var(--green); border-color: var(--green); color: #fff; } .btn-ok:hover { filter: brightness(.94); background: var(--green); }
.btn-warn { background: var(--amber); border-color: var(--amber); color: #fff; } .btn-warn:hover { filter: brightness(.94); background: var(--amber); }
.btn-blue { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-sm { padding: 5px 10px; min-height: 32px; font-size: 13.5px; border-radius: 8px; }
.btn-lg { padding: 13px 20px; font-size: 16.5px; min-height: 52px; border-radius: 11px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn.is-busy { opacity: .7; pointer-events: none; }
.btn.is-busy::after { content: ""; width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.iconbtn { background: none; border: 0; color: var(--ink); cursor: pointer; padding: 6px; border-radius: 8px; display: inline-grid; place-items: center; }

/* Clock pill */
.pill { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 6px 13px; font: 600 13.5px var(--font); cursor: pointer; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); min-height: 36px; }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.pill-on { background: var(--green-soft); border-color: transparent; color: var(--green); }
.pill-on .dot { background: var(--green); box-shadow: 0 0 0 3px rgba(17,145,90,.2); }
.pill-off { color: var(--red); border-color: var(--red-line); background: var(--red-soft); }
.pill-off .dot { background: var(--red); }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.badge.nodot::before { display: none; }
.b-in_progress, .b-running { background: var(--blue-soft); color: var(--blue); border-color: transparent; }
.b-paused, .b-partial, .b-unpaid { background: var(--amber-soft); color: var(--amber); border-color: transparent; }
.b-work_done, .b-done, .b-paid { background: var(--green-soft); color: var(--green); border-color: transparent; }
.b-invoiced { background: var(--violet-soft); color: var(--violet); border-color: transparent; }
.b-delivered { background: #e9ecef; color: #50565f; border-color: transparent; }
.b-cancelled, .b-late { background: var(--red-soft); color: var(--red-ink); border-color: transparent; }
.tag { display: inline-block; font: 700 11.5px var(--font); padding: 2px 7px; border-radius: 5px; }
.tag-labour { background: var(--blue-soft); color: var(--blue); }
.tag-part { background: var(--amber-soft); color: var(--amber); }
.flash { padding: 11px 14px; border-radius: 9px; margin-bottom: 14px; font-weight: 500; }
.flash-ok { background: var(--green-soft); color: var(--green); }
.flash-warn { background: var(--amber-soft); color: var(--amber); }
.flash-err { background: var(--red-soft); color: var(--red-ink); }
.note { background: var(--surface-2); border: 1px dashed var(--line-2); border-radius: 9px; padding: 10px 12px; color: var(--ink-2); }

/* Tabs / chips / filters */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.tabs a, .tabs button { padding: 10px 14px; color: var(--ink-2); font: 600 15px var(--font); border: 0; background: none; border-bottom: 2.5px solid transparent; white-space: nowrap; cursor: pointer; }
.tabs .on { color: var(--ink); border-bottom-color: var(--red); }
.tabs a:hover { text-decoration: none; color: var(--ink); }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.filters label.f { min-width: 150px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; gap: 6px; align-items: center; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); font: 600 13.5px var(--font); background: var(--surface); cursor: pointer; }
.chip.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.chip b { font-family: var(--font-c); }
.chip:hover { text-decoration: none; border-color: var(--ink-3); }

/* Key-value */
dl.kv { display: grid; grid-template-columns: 120px 1fr; gap: 7px 12px; margin: 0; }
dl.kv dt { color: var(--ink-3); } dl.kv dd { margin: 0; font-weight: 500; }

/* ---------- Job card ---------- */
.jhead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; }
.jhead .who { min-width: 0; }
.jhead .who h2 { font-size: 20px; }
.jhead .meta { display: flex; gap: 14px; flex-wrap: wrap; color: var(--ink-2); font-size: 14px; margin-top: 4px; }
.jhead .meta span { display: inline-flex; gap: 5px; align-items: center; }
.jhead .meta .ic { width: 15px; height: 15px; color: var(--ink-3); }
.stages { display: flex; align-items: center; gap: 0; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); overflow-x: auto; }
.stage { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-weight: 600; font-size: 14px; white-space: nowrap; }
.stage i { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; font: 700 12px var(--font-c); font-style: normal; background: var(--surface); }
.stage.done { color: var(--ink-2); } .stage.done i { background: var(--green); border-color: var(--green); color: #fff; }
.stage.now { color: var(--ink); } .stage.now i { border-color: var(--red); color: var(--red); box-shadow: 0 0 0 4px var(--red-soft); }
.stage + .stage::before { content: ""; width: 34px; height: 2px; background: var(--line-2); margin: 0 10px; }
.stage.done + .stage::before { background: var(--green); }

.quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.qtile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font: 600 13.5px var(--font); color: var(--ink-2); text-align: center; }
.qtile .ic { width: 26px; height: 26px; color: var(--red); }
.qtile:hover, .qtile.on { border-color: var(--red-line); background: var(--red-soft); color: var(--ink); }
.qlist { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 0 0; }
.qlist .chip small { color: var(--ink-3); font-weight: 600; }

.entry { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 14px 18px; background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.entry > label.f { flex: 1 1 110px; min-width: 0; }
.entry > label.f.wide { flex: 3 1 240px; }
.entry > .plus { flex: 0 0 auto; }
.entry .plus { width: 44px; height: 40px; border-radius: 9px; padding: 0; font-size: 22px; }
.entry label.f > span { font-size: 12.5px; }

.items td { vertical-align: top; }
.items td.techcell { min-width: 250px; }
.items .idesc { min-width: 180px; }
.tline { flex-wrap: nowrap; }
.tline .tname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.techrow select { width: auto; }
.items .idesc b { display: block; }
.items .idesc small { color: var(--ink-3); display: block; margin-top: 4px; }
.items .techrow { display: flex; flex-direction: column; gap: 6px; }
.tline { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.tline .tname { font-weight: 600; font-size: 14px; min-width: 0; }
.tline .tclock { font: 600 15px var(--font-c); color: var(--ink-2); min-width: 44px; }
.tline .tbtns { display: inline-flex; gap: 4px; margin-left: auto; }
.tbtn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--ink-2); }
.tbtn .ic { width: 15px; height: 15px; }
.tbtn.go { background: var(--green); border-color: var(--green); color: #fff; }
.tbtn.hold { background: var(--amber); border-color: var(--amber); color: #fff; }
.rowmenu summary { list-style: none; cursor: pointer; color: var(--ink-3); padding: 2px 6px; border-radius: 6px; }
.rowmenu summary::-webkit-details-marker { display: none; }
.rowmenu[open] summary { background: var(--surface-2); }
.rowmenu .pop { position: absolute; right: 18px; z-index: 15; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 12px; width: min(460px, 86vw); }

.totals dl { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin: 0; }
.totals dt { color: var(--ink-2); } .totals dd { margin: 0; text-align: right; font: 600 16px var(--font-c); }
.totals .eq { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
.totals .eq > div { flex: 1; padding: 10px 12px; text-align: right; }
.totals .eq > div + div { border-left: 1px solid var(--line); }
.totals .eq small { display: block; color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.totals .eq b { font: 700 20px var(--font-c); }
.totals .grand { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; margin-top: 12px; border-top: 2px solid var(--ink); }
.totals .grand b { font: 800 30px var(--font-c); }

.actionbar { position: sticky; bottom: 0; z-index: 12; margin: 16px -24px -60px; padding: 12px 24px; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.actionbar .grow { flex: 1; }

/* ---------- My Jobs ---------- */
.jobtile { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; box-shadow: var(--shadow); }
.jobtile.running { border: 2px solid var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.jobtile .what { font-size: 17px; font-weight: 700; margin-top: 10px; }
.clock { font: 700 40px var(--font-c); font-variant-numeric: tabular-nums; letter-spacing: .5px; }
.timerbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.timerbtns .btn { min-height: 58px; font-size: 17px; border-radius: 13px; }
.timerbtns .full { grid-column: span 2; }

/* ---------- Board ---------- */
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.bcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; border-top: 4px solid var(--line-2); box-shadow: var(--shadow); display: block; color: inherit; text-decoration: none !important; }
.bcard:hover { border-color: var(--line-2); }
.bcard.st-in_progress { border-top-color: var(--blue); }
.bcard.st-work_done { border-top-color: var(--green); }
.bcard.late { border-top-color: var(--red); }
.bline { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px; }
.techstrip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 2px; }
.tcard { flex: 0 0 auto; min-width: 190px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; gap: 10px; align-items: center; background: var(--surface); }
.tcard b { display: block; font-size: 14.5px; }
.tcard small { display: block; color: var(--ink-3); font-size: 12.5px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcard.working { border-color: var(--blue); background: var(--blue-soft); }
.tcard.idle { border-color: var(--amber); }

/* ---------- Kiosk ---------- */
.kiosk { min-height: 100vh; background: var(--side); color: #fff; padding: 24px; }
.kiosk h1 { font-size: 28px; }
.kiosk .clockbig { font: 700 64px var(--font-c); }
.staffgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-top: 24px; }
.staff { background: #1f2228; border: 2px solid #2c3038; border-radius: 16px; padding: 18px; color: #fff; text-align: left; cursor: pointer; font: inherit; display: flex; gap: 12px; align-items: center; }
.staff b { display: block; font-size: 18px; }
.staff.in { border-color: var(--green); }
.staff small { color: #9aa0aa; }
.pinpad { display: grid; grid-template-columns: repeat(3, 84px); gap: 12px; justify-content: center; margin-top: 18px; }
.pinpad button { height: 72px; border-radius: 14px; border: 0; background: #2a2d34; color: #fff; font: 700 28px var(--font-c); cursor: pointer; }
.pinpad button:active { background: var(--red); }
.pindots { display: flex; gap: 12px; justify-content: center; margin-top: 18px; }
.pindots i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #6b707a; }
.pindots i.f { background: #fff; border-color: #fff; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: none; align-items: center; justify-content: center; z-index: 60; padding: 16px; }
.modal.open { display: flex; }
.modal .box { background: #16181d; border: 1px solid #2c3038; border-radius: 18px; padding: 24px; width: 100%; max-width: 380px; text-align: center; color: #fff; }

/* ---------- Login ---------- */
.authwrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: radial-gradient(1200px 600px at 110% 110%, rgba(227,20,30,.55), transparent 60%), #16181d; }
.authcard { width: 100%; max-width: 390px; background: var(--surface); border-radius: 18px; padding: 30px; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.authcard .brand { color: var(--ink); padding: 0 0 20px; }
.authcard .brand small { color: var(--ink-3); }

/* ---------- Autocomplete ---------- */
.ac { position: relative; }
.ac-list { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: var(--shadow-lg); z-index: 30; max-height: 300px; overflow-y: auto; margin-top: 4px; min-width: 260px; }
.ac-list div { padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--line); }
.ac-list div:last-child { border-bottom: 0; }
.ac-list div:hover, .ac-list div.hl { background: var(--surface-2); }
.ac-list small { color: var(--ink-3); }

/* ---------- Reports ---------- */
.rgroups { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.rgroup h3 { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.rgroup h3 .ic { color: var(--red); }
.rgroup a { display: block; padding: 10px 16px; border-bottom: 1px solid var(--line); color: var(--ink); }
.rgroup a:last-child { border-bottom: 0; }
.rgroup a small { display: block; color: var(--ink-3); font-size: 13px; }
.rgroup a:hover { background: var(--surface-2); text-decoration: none; }
.bars { display: flex; align-items: flex-end; gap: 10px; height: 170px; padding: 10px 4px 0; }
.bars .bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; height: 100%; justify-content: flex-end; }
.bars .bar i { display: block; width: 100%; max-width: 46px; background: var(--red); border-radius: 6px 6px 2px 2px; min-height: 2px; }
.bars .bar.cur i { background: var(--ink); }
.bars .bar small { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.bars .bar b { font: 600 12.5px var(--font-c); color: var(--ink-2); white-space: nowrap; }
.meter { display: inline-block; width: 64px; height: 6px; border-radius: 3px; background: var(--line); vertical-align: middle; margin-right: 6px; overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 3px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .g5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .split, .split-wide { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1000px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .side { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .2s; }
  .side.open { transform: none; }
  .scrim.open { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 25; }
  .burger { display: inline-grid; }
  .top { padding: 8px 12px; min-height: 56px; }
  .top h1 { font-size: 17px; }
  .content { padding: 14px 12px 60px; }
  .g2, .g3, .g4, .g5 { grid-template-columns: minmax(0, 1fr); }
  .g4.kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .g3.kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .g3.kpis .kpi .lbl { font-size: 12px; } .g3.kpis .kpi .sub { display: none; }
  .items thead { display: none; }
  .items tr { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 6px 10px; padding: 12px; border-bottom: 1px solid var(--line); }
  .items tr:last-child { border-bottom: 0; }
  .items td { border: 0 !important; padding: 0 !important; background: none !important; }
  .items td:nth-child(1) { grid-row: span 2; }
  .items td.idesc { grid-column: 2; min-width: 0; }
  .items td:nth-child(3) { grid-column: 2; grid-row: 2; text-align: left; font-size: 14px; color: var(--ink-2); }
  .items td:nth-child(4) { grid-column: 3; grid-row: 1; }
  .items td.techcell { grid-column: 1 / -1; min-width: 0; }
  .items td:last-child { grid-column: 3; grid-row: 2; }
  .items tr td[colspan] { grid-column: 1 / -1; }
  .kpis .kpi { padding: 11px 12px; } .kpis .kpi .val { font-size: 22px; } .kpis .kpi .sub { font-size: 12px; }
  .pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span2 { grid-column: auto; }
  .hide-xs { display: none !important; }
  dl.kv { grid-template-columns: 100px 1fr; }
  .card-b { padding: 14px; }
  .tbl th, .tbl td { padding: 9px 10px; }
  .jhead { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .entry > label.f.wide { flex-basis: 100%; }
  .toasts { top: auto; bottom: 76px; left: 12px; right: 12px; max-width: none; }
  .actionbar { margin: 16px -12px -60px; padding: 10px 12px; }
  .actionbar .btn { flex: 1; }
  .stage + .stage::before { width: 16px; margin: 0 6px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Print */
@media print {
  .side, .top, .no-print, .flash, .actionbar, .toasts { display: none !important; }
  .content { padding: 0; max-width: none; }
  body { background: #fff; }
  .card { box-shadow: none; border: 0; }
}

/* ---------- v1.2 Lists & Dropdowns ---------- */
.listsgrid{display:grid;grid-template-columns:230px minmax(0,1fr) 320px;gap:16px;align-items:start}
.listnav{position:sticky;top:78px;padding-bottom:0}
.listnav>a{display:flex;align-items:center;gap:10px;padding:10px 16px;color:var(--ink);text-decoration:none;font-weight:600;font-size:14px;border-left:3px solid transparent}
.listnav>a svg{width:17px;height:17px;opacity:.6;flex:none}
.listnav>a span{flex:1}
.listnav>a .count{font-size:12px;color:var(--ink-3);font-weight:700}
.listnav>a:hover{background:var(--surface-2)}
.listnav>a.on{border-left-color:var(--red);background:var(--surface-2)}
.listnav>a.on svg{opacity:1;color:var(--red)}
.listform{position:sticky;top:78px}
.tbl tr.grouprow td{background:var(--surface-2);font-family:var(--font-c);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:13px;color:var(--ink-3);padding-top:8px;padding-bottom:8px}
@media (max-width:1180px){.listsgrid{grid-template-columns:200px minmax(0,1fr)}.listform{grid-column:2;position:static}}
@media (max-width:760px){.listsgrid{grid-template-columns:minmax(0,1fr)}.listform{grid-column:auto}.listnav{position:static;display:flex;overflow-x:auto;gap:0}.listnav .card-h,.listnav p{display:none}.listnav>a{white-space:nowrap;border-left:0;border-bottom:3px solid transparent}.listnav>a.on{border-bottom-color:var(--red)}}

.listsgrid .card-h{align-items:flex-start;gap:12px;flex-wrap:wrap}
.listsgrid .card-h form{flex-wrap:nowrap}
.listsgrid .card-h form select,.listsgrid .card-h form input{width:auto;min-width:150px}
.tbl td.mv{width:70px;white-space:nowrap}
.tbl td.mv .tbtn{width:26px;height:26px;font-size:13px;display:inline-grid;place-items:center}

/* ---------- v1.3 Workshop tablet ---------- */
.kmark{width:46px;height:46px;border-radius:12px;background:var(--red);color:#fff;display:grid;place-items:center;font:800 20px var(--font-c);flex:none}
.kbtn{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 16px;border-radius:12px;border:1px solid #33373f;background:#1f2228;color:#fff;font:600 15px var(--font);text-decoration:none;cursor:pointer}
.kbtn svg{width:18px;height:18px}
.kbtn:hover{background:#2a2d34;text-decoration:none}
.kbtn-done{background:var(--red);border-color:var(--red);font-size:18px;min-height:54px;padding:0 26px}
.khint{color:#9aa0aa;margin-top:18px;font-size:16px}
.kmsg{margin-top:18px;padding:14px 18px;border-radius:14px;font-size:18px;font-weight:600}
.kmsg-ok{background:rgba(17,145,90,.18);color:#5be3a6;border:1px solid rgba(17,145,90,.5)}
.kmsg-err{background:rgba(227,20,30,.16);color:#ff8a8f;border:1px solid rgba(227,20,30,.5)}
.staff.busy{border-color:#5aa7ff}
.staff.busy small{color:#8cc2ff}
.av-lg{width:60px;height:60px;font-size:22px}
.ksec{font:700 22px var(--font-c);margin:26px 0 12px;letter-spacing:.3px}
.kempty{background:#1f2228;border:1px dashed #3a3f48;border-radius:16px;padding:28px;color:#9aa0aa;font-size:17px;text-align:center}
.kjobs{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
.ktile{background:#1f2228;border:2px solid #2c3038;border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:8px}
.ktile.running{border-color:#5aa7ff;box-shadow:0 0 0 4px rgba(90,167,255,.15)}
.ktile.paused{border-color:#f5b942}
.kveh{color:#c4c8cf;margin-top:8px;font-weight:600}
.kwhat{font:700 22px var(--font-c);margin-top:4px}
.kcomp{color:#9aa0aa;font-size:14px}
.kclock{font:800 40px var(--font-c);letter-spacing:1px}
.ktile.running .kclock{color:#5aa7ff}
.kbtns{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.kbtns select{flex:1 1 100%;min-height:48px;border-radius:12px;background:#2a2d34;color:#fff;border:1px solid #3a3f48;padding:0 12px;font-size:16px}
.kb{flex:1;min-height:64px;border:0;border-radius:14px;font:700 20px var(--font-c);letter-spacing:.4px;color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.kb svg{width:22px;height:22px}
.kb.go{background:#11915a}.kb.hold{background:#c27c00}.kb.fin{background:#3d4451}
.kb:active{transform:scale(.98)}
.kbig{width:100%;min-height:76px;border:0;border-radius:18px;font:800 26px var(--font-c);letter-spacing:.5px;color:#fff;display:flex;align-items:center;justify-content:center;gap:12px;cursor:pointer}
.kbig svg{width:28px;height:28px}
.kbig.in{background:#11915a}.kbig.out{background:#3d4451}

/* ---------- v1.3 Workshop screen (TV) ---------- */
.dbody{background:#0f1013;color:#fff;min-height:100vh;margin:0;font-family:var(--font)}
.dhead{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 26px;border-bottom:1px solid #22252c;flex-wrap:wrap}
.dhead h1{font:800 28px var(--font-c);margin:0;letter-spacing:.3px}
.dsub{color:#9aa0aa;font-size:14px}
.dlive{display:inline-flex;align-items:center;gap:6px;color:#3ddc97;font-weight:700;letter-spacing:1px;font-size:12px}
.dlive::before{content:"";width:8px;height:8px;border-radius:50%;background:#3ddc97;animation:pulse 1.6s infinite}
.dclock{font:800 52px var(--font-c);line-height:1;min-width:150px;text-align:right}
#disp{padding:18px 26px 26px}
.dstats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:18px}
.dstats div{background:#181a1f;border:1px solid #23262d;border-radius:14px;padding:12px 16px}
.dstats b{display:block;font:800 40px var(--font-c);line-height:1.05}
.dstats b small{font-size:22px;color:#6b7280}
.dstats span{color:#9aa0aa;font-size:14px}
.dcols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start}
.dcol{background:#15171b;border:1px solid #22252c;border-radius:16px;padding:12px;min-height:200px}
.dcol header{padding:2px 4px 10px;border-bottom:3px solid #3d4451;margin-bottom:12px}
.dcol.d-in_progress header{border-color:#5aa7ff}.dcol.d-work_done header{border-color:#f5b942}.dcol.d-invoiced header{border-color:#3ddc97}
.dcol h2{font:800 22px var(--font-c);margin:0;display:flex;justify-content:space-between;align-items:center;letter-spacing:.3px}
.dcol h2 span{background:#262a31;border-radius:999px;padding:1px 12px;font-size:18px}
.dcol header small{color:#8b919b}
.dcards{display:flex;flex-direction:column;gap:12px}
.dcard{background:#1f2228;border:1px solid #2c3038;border-radius:14px;padding:14px}
.dcard.late{border-color:#ff5d5d;box-shadow:0 0 0 2px rgba(255,93,93,.25)}
.dtop{display:flex;justify-content:space-between;align-items:center;gap:8px}
.dno{font:700 13px var(--font-c);color:#8b919b;letter-spacing:.5px}
.dveh{margin-top:10px;font-weight:700;font-size:17px}
.dveh span{color:#9aa0aa;font-weight:500}
.dtype{display:inline-block;margin-top:6px;background:#262a31;color:#c9cdd4;border-radius:999px;padding:2px 10px;font-size:13px;font-weight:600}
.dprog{height:6px;background:#2a2d34;border-radius:6px;margin:12px 0 8px;overflow:hidden}
.dprog i{display:block;height:100%;background:#3ddc97;border-radius:6px}
.dlines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.dlines li{display:flex;flex-direction:column;gap:4px}
.dlines .dl{font-weight:600;font-size:15px}
.dlines li.ok .dl{color:#3ddc97}
.dt{display:flex;flex-wrap:wrap;gap:6px}
.dtech{display:inline-flex;align-items:center;gap:6px;background:#2a2d34;border-radius:999px;padding:2px 10px 2px 3px;font-size:13.5px;font-weight:600}
.dtech b{font:700 14px var(--font-c);color:#5aa7ff;letter-spacing:.3px}
.dtech em{font-style:normal;color:#f5b942;font-size:12.5px}
.dtech.s-running{background:rgba(90,167,255,.16);box-shadow:inset 0 0 0 1px rgba(90,167,255,.5)}
.dtech.s-done{opacity:.55}
.dnone{color:#6b7280;font-size:13px}
.dfoot{margin-top:12px;color:#9aa0aa;font-size:13.5px;border-top:1px solid #2c3038;padding-top:8px}
.dfoot .lt{color:#ff5d5d;font-weight:800}
.dempty{color:#4b5160;text-align:center;padding:30px 0;font-size:22px}
.dtechs{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.dtc{display:flex;gap:10px;align-items:center;background:#181a1f;border:1px solid #23262d;border-radius:14px;padding:10px 14px;min-width:220px}
.dtc b{display:block;font-size:15px}
.dtc small{color:#9aa0aa;font-size:13px}
.dtc.w{border-color:#5aa7ff}.dtc.w small{color:#8cc2ff}
.dtc.i{border-color:#2f6a4f}
.dtc.o{opacity:.5}
@media (max-width:1200px){.dcols{grid-template-columns:repeat(2,minmax(0,1fr))}.dstats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.dcols,.dstats{grid-template-columns:minmax(0,1fr)}.dclock{font-size:36px;min-width:0}#disp,.dhead{padding-left:16px;padding-right:16px}}

/* ---------- v1.4 Pause reasons ---------- */
.tcard.idle{border-color:var(--green)}
.tcard.held{border-color:var(--amber);background:var(--amber-soft)}
.tcard.held small{color:var(--amber);font-weight:600}
.preason{display:inline-flex;align-items:center;gap:5px;color:var(--amber);font-weight:700;font-size:12.5px}
.preason svg{width:12px;height:12px}
.pausebox{position:relative;display:inline-block}
.pausebox>summary{list-style:none;cursor:pointer}
.pausebox>summary::-webkit-details-marker{display:none}
.pausebox .reasons{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px;box-shadow:var(--shadow-lg);min-width:220px}
.pausebox .rhead{font-weight:700;font-size:13px;color:var(--ink-2);margin-bottom:2px}
.pausebox .reasons button{text-align:left;border:1px solid var(--line);background:var(--surface-2);border-radius:9px;padding:9px 12px;font:600 14px var(--font);color:var(--ink);cursor:pointer}
.pausebox .reasons button:hover{border-color:var(--amber);background:var(--amber-soft)}
.pb-tbtn .reasons{position:absolute;z-index:30;top:36px;right:0}
.pb-tbtn{vertical-align:middle}
.pb-btn{width:100%}.pb-btn>summary{width:100%;justify-content:center}
.pb-btn[open] .reasons{margin-top:8px}
.pb-kb{width:100%}.pb-kb>summary{width:100%}
.pb-kb .reasons{background:#262a31;border-color:#3a3f48;margin-top:10px;display:grid;grid-template-columns:1fr 1fr}
.pb-kb .rhead{color:#c4c8cf;grid-column:1/-1;font-size:15px}
.pb-kb .reasons button{background:#1f2228;border-color:#3a3f48;color:#fff;font-size:17px;min-height:56px;padding:10px 14px}
.pb-kb .reasons button:active{background:#c27c00}
.staff.held{border-color:#f5b942}.staff.held small{color:#f5b942}
.dtc.p{border-color:#c27c00}.dtc.p small{color:#f5b942}
.pb-btn>summary{min-height:58px;font-size:17px;border-radius:13px;margin-top:12px}

/* ---------- v1.4 Gate pass ---------- */
.gpkind{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer}
.gpkind input{margin-top:3px;accent-color:var(--red);width:18px;height:18px}
.gpkind b{display:block}.gpkind small{color:var(--ink-3)}
.gpkind:has(input:checked){border-color:var(--red);background:var(--red-soft)}

/* ---------- v1.5 Phone app ---------- */
.tabbar{display:none}
@media (max-width:760px){
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:color-mix(in srgb,var(--surface) 96%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom));justify-content:space-around}
  .tabbar a,.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border:0;background:none;color:var(--ink-3);font:600 11.5px var(--font);text-decoration:none;border-radius:12px;cursor:pointer;min-width:0}
  .tabbar svg{width:23px;height:23px}
  .tabbar a.on{color:var(--red)}
  .tabbar a.on svg{stroke-width:2.4}
  .tabbar a.fab{flex:0 0 auto;margin:-22px 6px 0;width:58px;height:58px;border-radius:50%;background:var(--red);color:#fff;box-shadow:0 6px 18px rgba(227,20,30,.35);justify-content:center;padding:0}
  .tabbar a.fab span{display:none}
  .tabbar a.fab svg{width:28px;height:28px}
  .content{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .actionbar{bottom:calc(64px + env(safe-area-inset-bottom));margin-bottom:0}
  .toasts{bottom:calc(84px + env(safe-area-inset-bottom))}
  .top .btn-red.hide-xs{display:none}
}
.is-app .top{padding-top:calc(8px + env(safe-area-inset-top))}


@media (max-width:760px){.burger{display:none!important}}
/* Inside the Android app the bottom bar is native */
.native .tabbar{display:none!important}
@media (max-width:760px){.native .content{padding-bottom:24px}.native .actionbar{bottom:0}.native .toasts{bottom:16px}}

/* ---------- Brand logo ---------- */
.brand{flex-direction:column;align-items:flex-start;gap:4px}
.brand img.brandlogo{height:auto;width:100%;max-width:178px;background:none;border-radius:0;padding:0}
.brand .brandsub{color:#8a8f99;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding-left:2px}
.authcard .brand{align-items:center;text-align:center;padding-bottom:22px}
.authcard .brand img.authlogo{width:100%;max-width:280px;height:auto;background:none;padding:0;border-radius:0}
.authsub{color:var(--ink-3);font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
:root[data-theme="dark"] .authcard .brand img.authlogo{content:url("brand/logo-dark.png")}
.klogo{height:52px;width:auto}
.kiosk h1,.dhead h1{font-size:20px}
@media (max-width:700px){.klogo{height:38px}}
.dtop .plate{flex:none}.dtop .dno{text-align:right}

/* ===================== 1.6: grouped menu ===================== */
.navgrp > summary { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 8px; color: var(--side-ink); font-weight: 500; cursor: pointer; list-style: none; user-select: none; }
.navgrp > summary::-webkit-details-marker { display: none; }
.navgrp > summary:hover { background: var(--side-2); color: #fff; }
.navgrp > summary.has-on { color: #fff; }
.navgrp > summary .count { margin-left: auto; background: var(--red); color: #fff; font: 700 11.5px var(--font-c); border-radius: 999px; padding: 1px 7px; }
.navgrp > summary .chev { margin-left: auto; display: inline-flex; transition: transform .15s; opacity: .7; }
.navgrp > summary .count + .chev { margin-left: 6px; }
.navgrp > summary .chev .ic { width: 15px; height: 15px; }
.navgrp[open] > summary .chev { transform: rotate(90deg); }
.navsub { margin: 2px 0 4px 20px; padding-left: 8px; border-left: 1px solid rgba(255,255,255,.12); }
.side nav .navsub a { padding: 7px 10px; font-size: 14px; }
.side nav .navsub a.on::before { left: -9px; }

/* settings tab strip */
.settabs { flex-wrap: wrap; margin-bottom: 16px; }
.roletbl td, .roletbl th { white-space: nowrap; } .roletbl td:first-child { white-space: normal; min-width: 220px; }
.roletbl .yes { color: var(--ok); display: inline-flex; } .center { text-align: center; }

/* kiosk exit */
.kexit { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin: 30px 0 10px; }
.kexit label span { display: block; color: #9aa0aa; margin-bottom: 6px; font-weight: 600; }
.kexit input { font-size: 34px; letter-spacing: 14px; width: 220px; padding: 12px 16px; border-radius: 12px; border: 1px solid #333842; background: #1b1e24; color: #fff; text-align: center; }

/* ===================== stock ===================== */
.sbadge { display: inline-block; font: 700 12.5px var(--font-c); padding: 2px 8px; border-radius: 6px; background: var(--green-soft); color: var(--green); white-space: nowrap; }
.sbadge.s-low { background: var(--amber-soft); color: #9a6400; } :root[data-theme="dark"] .sbadge.s-low { color: var(--amber); }
.sbadge.s-out { background: var(--red-soft); color: var(--red-ink); } :root[data-theme="dark"] .sbadge.s-out { color: #ff7a80; }
.tbl tr.row-out td:first-child, .tbl tr.row-low td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
.tbl tr.row-out td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.red { color: var(--red); }
.meter { height: 6px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--ok); }
.subbox { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.fromstock { align-self: end; padding-bottom: 10px; white-space: nowrap; }
.tbl.lines td { vertical-align: middle; } .tbl.lines input { width: 100%; min-width: 70px; }
.tbl.lines tfoot td { border-bottom: 0; }
.count-pill { background: var(--red); color: #fff; font: 700 12px var(--font-c); border-radius: 999px; padding: 1px 8px; margin-left: 6px; }
.minikpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.minikpis a { display: block; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: inherit; text-decoration: none; background: var(--surface-2); }
.minikpis a:hover { border-color: var(--line-2); }
.minikpis b { display: block; font: 800 26px var(--font-c); } .minikpis b.red { color: var(--red); } .minikpis span { font-size: 12.5px; color: var(--ink-2); }
.viewedrow { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13.5px; color: var(--ink-2); text-decoration: none; }
.viewedrow .ic { color: var(--ok); }
.plate.sm b { font-size: 11px; padding: 2px 4px; } .plate.sm em { font-size: 13px; padding: 2px 6px; letter-spacing: .5px; } .plate.sm i { display: none; }

/* ===================== inspections ===================== */
.idots { display: inline-flex; gap: 4px; } .idots i { font: 800 12px var(--font-c); font-style: normal; min-width: 24px; text-align: center; padding: 2px 6px; border-radius: 6px; color: #fff; }
.idots .r { background: var(--red); } .idots .y { background: #e0a100; } .idots .g { background: var(--green); }
.isum { display: flex; gap: 8px; } .isum div { text-align: center; min-width: 74px; padding: 8px 10px; border-radius: 10px; border-top: 4px solid; background: var(--surface-2); }
.isum b { display: block; font: 800 28px/1 var(--font-c); } .isum small { font-size: 12px; color: var(--ink-2); }
.isum .r { border-color: var(--red); } .isum .r b { color: var(--red); } .isum .y { border-color: #e0a100; } .isum .y b { color: #b07d00; } .isum .g { border-color: var(--green); } .isum .g b { color: var(--green); }
.ddot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; } .ddot.r { background: var(--red); } .ddot.y { background: #e0a100; } .ddot.g { background: var(--green); }
.ires .irow { display: flex; gap: 14px; justify-content: space-between; padding: 12px 18px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.ires .irow p { margin: 4px 0 0; color: var(--ink-2); }
.ist { font-size: 12.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; }
.ist-ok { background: var(--green-soft); color: var(--green); } .ist-attention { background: var(--amber-soft); color: #9a6400; } .ist-urgent { background: var(--red-soft); color: var(--red-ink); } .ist-na { background: var(--surface-2); color: var(--ink-3); }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; } .thumbs:empty { display: none; }
.thumb { position: relative; display: block; width: 92px; height: 70px; border-radius: 8px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); }
.thumbs.big .thumb { width: 150px; height: 112px; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb button { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.thumb button .ic { width: 14px; height: 14px; }
.thumb.busy { display: flex; align-items: center; justify-content: center; } .thumb.busy i { width: 22px; height: 22px; border: 3px solid var(--line-2); border-top-color: var(--red); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.cambtn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 10px; background: var(--ink); color: var(--surface); font-weight: 700; cursor: pointer; font-size: 14px; }
.cambtn.alt { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }
.fuel { display: flex; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; }
.fuel button { flex: 1; padding: 10px 0; border: 0; background: var(--surface); color: var(--ink); font: 700 15px var(--font-c); cursor: pointer; border-left: 1px solid var(--line); }
.fuel button:first-child { border-left: 0; } .fuel button.on { background: var(--ink); color: var(--surface); }
.insp .isec { margin-top: 14px; }
.iitem { display: grid; grid-template-columns: minmax(0, 1fr) auto 40px; gap: 6px 12px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--line); }
.iitem.st-urgent { background: linear-gradient(90deg, var(--red-soft), transparent 60%); } .iitem.st-attention { background: linear-gradient(90deg, var(--amber-soft), transparent 60%); }
.iname { font-weight: 600; }
.iseg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; }
.iseg button { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; min-width: 58px; padding: 6px 8px; border: 0; border-left: 1px solid var(--line); background: var(--surface); color: var(--ink-3); font: 700 12px var(--font-c); cursor: pointer; }
.iseg button:first-child { border-left: 0; } .iseg button .ic { width: 18px; height: 18px; }
.iseg button.s-ok.on { background: var(--green); color: #fff; } .iseg button.s-attention.on { background: #e0a100; color: #fff; }
.iseg button.s-urgent.on { background: var(--red); color: #fff; } .iseg button.s-na.on { background: var(--ink-3); color: #fff; }
.imore { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.iextra { grid-column: 1 / -1; display: grid; gap: 8px; }
.iextra[hidden] { display: none; }
.iextra textarea { width: 100%; min-height: 40px; resize: vertical; }
.iprog { font-weight: 600; }
.waitgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; padding: 14px 18px 18px; }
.waitcar { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.waitcar > div { flex: 1; min-width: 0; } .waitcar small { display: block; color: var(--ink-3); font-size: 12px; }
.inspnudge { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding: 12px 16px; border-radius: 12px; background: var(--amber-soft); border: 1px solid #f1d58a; }
:root[data-theme="dark"] .inspnudge { border-color: #5a4512; }
.inspnudge span { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 640px) {
  .iitem { grid-template-columns: minmax(0, 1fr) 40px; padding: 10px 14px; }
  .iitem .iseg { grid-column: 1 / -1; grid-row: 2; display: flex; } .iitem .iseg button { flex: 1; min-width: 0; padding: 9px 4px; }
  .iitem .imore { grid-column: 2; grid-row: 1; }
  .isum div { min-width: 60px; } .minikpis { grid-template-columns: 1fr; }
  .thumb { width: 80px; height: 62px; }
}
/* meta rows outside the job header (purchase orders, receipts, inspections) */
.meta { display: flex; gap: 6px 16px; flex-wrap: wrap; color: var(--ink-2); font-size: 14px; }
.meta span { display: inline-flex; gap: 5px; align-items: center; }
.meta .ic { width: 15px; height: 15px; color: var(--ink-3); }

/* ===================== 1.7 ===================== */
.vinbox { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; }
.vinbox input[name=vin] { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: 1px; }
.vincam { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 40px; border-radius: 10px; background: var(--ink); color: var(--surface); cursor: pointer; }
.vinmsg { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-3); } .vinmsg:empty { display: none; }
.vinmsg.busy::before { content: ""; display: inline-block; width: 11px; height: 11px; border: 2px solid var(--line-2); border-top-color: var(--red); border-radius: 50%; animation: spin .8s linear infinite; margin-right: 6px; vertical-align: -1px; }
.vinmsg.ok { color: var(--ok); font-weight: 600; } .vinmsg.err { color: var(--red); } .vinmsg.warn { color: #a86400; font-weight: 600; }
.fitrows { display: grid; gap: 6px; }
.fitrow { display: grid; grid-template-columns: 1fr 1fr 74px 74px; gap: 6px; }
.fitrows .btn { justify-self: start; }
.fitok { font-size: 11.5px; font-weight: 700; color: var(--ok); background: var(--green-soft); border-radius: 5px; padding: 0 6px; }
.forcar { display: block; font-size: 12px; color: var(--blue); margin-top: 3px; font-weight: 600; }
.stockwarn { margin: 8px 18px 0; padding: 8px 12px; border-radius: 8px; background: var(--red-soft); color: var(--red-ink); font-weight: 600; font-size: 13.5px; }
.stockwarn[hidden] { display: none; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 9px; overflow: hidden; }
.seg label { cursor: pointer; } .seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; padding: 6px 12px; font-weight: 600; font-size: 13.5px; color: var(--ink-2); background: var(--surface); border-left: 1px solid var(--line); }
.seg label:first-child span { border-left: 0; } .seg input:checked + span { background: var(--ink); color: var(--surface); }
.tbl.ilines td { vertical-align: middle; } .tbl.ilines input { width: 100%; min-width: 60px; }
@media (max-width: 640px) { .fitrow { grid-template-columns: 1fr 1fr; } }
/* 1.7.2 one job per technician */
.grpchk { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.grpchk input { width: 16px; height: 16px; margin: 0; accent-color: var(--red); }
.gbadge { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: #eef1ff; color: #3446b8; white-space: nowrap; }
.grpbar { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--bg-2, #f7f8fa); }
.grpbar select { min-height: 34px; padding: 4px 8px; max-width: 220px; }

/* 2.0 part picker */
.ppwrap { position: relative; display: block; }
.ppwrap > input[data-partpick] { padding-right: 42px; width: 100%; }
.pp-add { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line-2); background: #fff; font-size: 19px; font-weight: 700; line-height: 1; color: var(--red); cursor: pointer; }
.pp-add:hover { background: #fff3f3; }
.pp-hint { display: block; color: #a86400; margin-top: 3px; font-size: 12px; } .pp-hint a { font-weight: 700; }
.ppdlg { border: 0; border-radius: 14px; padding: 20px 22px; width: min(560px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.ppdlg::backdrop { background: rgba(15,18,25,.45); }
.ppdlg h2 { margin: 0 0 4px; font-size: 18px; }
.pp-err { color: var(--red); margin: 0; font-weight: 600; }
.lcar { display: grid; grid-template-columns: 1.2fr 1fr 70px; gap: 6px; margin-top: 6px; }
.lcar input { min-height: 32px; padding: 4px 8px; font-size: 13px; }

/* 2.0 report filters */
.repsearch { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; flex-wrap: wrap; }
.repsearch input { max-width: 320px; min-height: 38px; }
.reptbl .repf th { padding: 4px 6px; background: var(--surface-2); }
.reptbl .repf select { width: 100%; min-width: 90px; min-height: 30px; padding: 2px 6px; font-size: 12.5px; font-weight: 500; }
.reptbl .reptop th { background: #fff8e6; font-weight: 800; color: var(--ink); }
.reptbl tr[hidden] { display: none; }

/* 2.0 money */
.alertbar { display: flex; flex-wrap: wrap; gap: 10px; }
.alertbar a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; background: #fff3f3; border: 1px solid #f3c4c6; color: #9b1219; text-decoration: none; font-size: 14px; }
.alertbar a svg { width: 18px; height: 18px; }
.kpis.mini { gap: 10px; } .kpis.mini .lbl { font-size: 12px; color: var(--ink-3); font-weight: 600; } .kpis.mini .val { font-size: 17px; font-weight: 800; }

/* 2.0 quality check */
.qcgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 14px; }

/* 2.0.1: per-line notes on the job card and technician screen */
.lnote { font-size: 12.5px; line-height: 1.45; margin-top: 5px; padding: 4px 8px; border-radius: 6px; max-width: 520px; }
.lnote.int { background: #fff6dd; color: #6b4e00; }
.lnote.inv { background: #e9f6ee; color: #145c32; }
.jobtile .lnote { max-width: none; margin-top: 8px; }
.ilrow .ilnote { margin-top: 6px; min-height: 0; font-size: 13px; padding: 6px 8px; width: 100%; resize: vertical; }
.ilrow.ilist td [data-ir] { opacity: .45; }
.tag-lump { background: #1f2937; color: #fff; }
:root[data-theme="dark"] .lnote.int { background: #3a2f10; color: #f3d98b; }
:root[data-theme="dark"] .lnote.inv { background: #12321f; color: #9fe0b5; }
.ilrow.islump [data-iq] { visibility: hidden; }
.ilrow.islump td { background: var(--surface-2); }
.ilines td:nth-child(2) { min-width: 240px; width: 46%; }
.ilines td:nth-child(3) input { min-width: 70px; } .ilines td:nth-child(4) input { min-width: 110px; }
.ilines td:nth-child(2) input[type=text], .ilines td:nth-child(2) textarea { width: 100%; }

/* 2.1: website content */
.webgal { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.webgal .card { overflow: hidden; }
.webgal .card.off { opacity: .55; }
.webgal img { width: 100%; height: 150px; object-fit: cover; display: block; background: var(--surface-2); }
.webpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; max-height: 360px; overflow: auto; }
.webpick label { position: relative; cursor: pointer; }
.webpick input { position: absolute; top: 6px; left: 6px; }
.webpick img { width: 100%; height: 84px; object-fit: cover; border-radius: 8px; border: 2px solid transparent; display: block; }
.webpick input:checked + img { border-color: var(--red); }
.backjob { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; margin-bottom: 12px; }
.top .backjob { margin: 0; flex-shrink: 0; }

/* =====================================================================
   2.3 "Pro" theme — data-dense dashboard style on the AZ brand.
   Cool slate neutrals, one red accent for actions, softer depth,
   clearer type scale, tabular numbers, visible focus, reduced-motion safe.
   This layer only restyles; the markup is unchanged.
   ===================================================================== */
:root {
  --red: #dc1c24; --red-ink: #b3141b; --red-soft: #fdeeee; --red-line: #f5c9cb;
  --ink: #0f172a; --ink-2: #3f4b5f; --ink-3: #64748b;
  --bg: #f3f5f9; --surface: #ffffff; --surface-2: #f7f9fc; --line: #e4e8ef; --line-2: #d3d9e3;
  --side: #0c0f15; --side-2: #171c26; --side-ink: #aab3c3;
  --blue: #2563eb; --blue-soft: #e8effe; --green: #0f8a56; --green-soft: #e3f5ec;
  --amber: #b26b00; --amber-soft: #fdf2dc; --violet: #6d3fd9; --violet-soft: #f0eafd;
  --r-sm: 8px; --r: 11px; --r-lg: 16px;
  --shadow: 0 1px 2px rgba(15,23,42,.05), 0 2px 10px -2px rgba(15,23,42,.06);
  --shadow-hover: 0 2px 4px rgba(15,23,42,.06), 0 12px 28px -8px rgba(15,23,42,.16);
  --shadow-lg: 0 18px 44px -12px rgba(15,23,42,.28);
  --ring: 0 0 0 3px rgba(37,99,235,.28);
  --ease: cubic-bezier(.2,.7,.2,1);
}
:root[data-theme="dark"] {
  --ink: #e8ecf3; --ink-2: #b4bdcc; --ink-3: #8b95a7;
  --bg: #0a0d12; --surface: #121720; --surface-2: #181e29; --line: #222a36; --line-2: #313a48;
  --side: #07090d; --side-2: #141a24;
  --red: #ef3b42; --red-ink: #ff6a70; --red-soft: #3a1518; --red-line: #5c2226;
  --blue: #6ea2ff; --blue-soft: #15233d; --green: #3fca86; --green-soft: #0f2c1e; --amber: #f2b648; --amber-soft: #33270f; --violet: #a98bff; --violet-soft: #231a3c;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 2px 12px -2px rgba(0,0,0,.35);
  --shadow-hover: 0 2px 4px rgba(0,0,0,.45), 0 14px 30px -8px rgba(0,0,0,.6);
  --ring: 0 0 0 3px rgba(110,162,255,.35);
}
body { font-size: 15px; letter-spacing: .005em; font-variant-numeric: tabular-nums; background: var(--bg); }
::selection { background: rgba(220,28,36,.18); }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 8px; }

/* Sidebar: deep panel, pill highlight, red marker */
.side { width: 248px; background: linear-gradient(180deg, #10141c 0%, var(--side) 55%); border-right: 1px solid rgba(255,255,255,.04); }
.brand { padding: 18px 18px 16px; border-bottom: 1px solid rgba(255,255,255,.06); margin-bottom: 6px; }
.side nav { padding: 8px 12px 12px; scrollbar-width: thin; scrollbar-color: #2a3140 transparent; }
.side nav a, .navgrp > summary { padding: 9px 11px; border-radius: 10px; font-weight: 500; font-size: 14.5px; transition: background .15s var(--ease), color .15s var(--ease); min-height: 40px; }
.side nav a .ic, .navgrp > summary .ic { color: #7f8aa0; transition: color .15s; }
.side nav a:hover, .navgrp > summary:hover { background: rgba(255,255,255,.06); color: #fff; }
.side nav a:hover .ic, .navgrp > summary:hover .ic { color: #d3d9e4; }
.side nav a.on { background: linear-gradient(90deg, rgba(220,28,36,.22), rgba(220,28,36,.06)); color: #fff; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(239,59,66,.22); }
.side nav a.on::before { left: -12px; top: 9px; bottom: 9px; width: 3px; background: #ef3b42; box-shadow: 0 0 12px rgba(239,59,66,.7); }
.side nav a.on .ic { color: #ff5a60; }
.navgrp > summary.has-on { color: #fff; }
.navgrp > summary.has-on .ic { color: #ff5a60; }
.navgrp[open] > summary { color: #fff; }
.navsub { margin: 2px 0 6px 18px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.08); }
.navsub a { min-height: 36px !important; font-size: 14px !important; padding: 7px 10px !important; }
.navsub a.on::before { left: -11px !important; }
.side nav .count, .navgrp > summary .count { background: #ef3b42; font-size: 11px; padding: 1px 7px; box-shadow: 0 0 0 2px rgba(239,59,66,.2); }
.sidefoot { border-top: 1px solid rgba(255,255,255,.06); color: #5d6677; padding: 12px 18px 16px; }

/* Top bar */
.top { min-height: 64px; padding: 10px 28px; background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
.top h1 { font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.content { padding: 26px 28px 64px; max-width: 1440px; }
.pill { min-height: 38px; transition: background .15s, box-shadow .15s; }
.pill-off { background: var(--surface); }
.pill-off:hover { background: var(--red-soft); }
.usermenu .av { width: 38px; height: 38px; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--line); }
.menu { border-radius: 14px; padding: 8px; }
.menu a { border-radius: 8px; padding: 9px 11px; }

/* Cards: softer border, layered shadow, clickable cards lift */
.card { border-color: var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.card-h { padding: 15px 20px; }
.card-h h2 { font-size: 16.5px; letter-spacing: -.005em; }
.card-h h2 .ic { color: var(--ink-3); }
.card-b { padding: 20px; }
a.card, a.kpi, a.stile, .minikpis a { transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s; }
a.card:hover, a.kpi:hover, a.stile:hover, .minikpis a:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); text-decoration: none; }

/* KPI tiles: icon in a tinted chip, big tabular numbers */
.kpi { padding: 18px 20px; overflow: hidden; }
.kpi::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--red), transparent 70%); opacity: .0; transition: opacity .2s; }
a.kpi:hover::after { opacity: 1; }
.kpi .lbl { font-size: 13px; color: var(--ink-2); letter-spacing: .01em; }
.kpi .lbl .ic { width: 28px; height: 28px; padding: 6px; border-radius: 8px; background: var(--surface-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.kpi .val { font-size: 32px; margin-top: 10px; letter-spacing: -.01em; }
.kpi .sub { margin-top: 4px; }

/* Status tiles */
.stile { border-radius: var(--r-lg); padding: 14px 16px; border: 1px solid var(--line); }
.stile .sic { width: 44px; height: 44px; border-radius: 12px; }
.stile b { font-size: 28px; }
.stile.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), var(--shadow); }

/* Tables: quiet header, comfortable rows, sticky header inside scroll areas */
.tbl th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--ink-3); padding: 11px 16px; background: var(--surface-2); position: sticky; top: 0; z-index: 1; }
.tbl td { padding: 12px 16px; border-bottom-color: var(--line); }
.tbl tbody tr { transition: background .12s; }
.tbl tbody tr:hover td { background: color-mix(in srgb, var(--blue-soft) 45%, var(--surface)); }
.tbl tfoot td { background: var(--surface-2); border-top: 1px solid var(--line-2); }
.card > .tbl-wrap:last-child table tr:last-child td:first-child { border-bottom-left-radius: var(--r-lg); }
.card > .tbl-wrap:last-child table tr:last-child td:last-child { border-bottom-right-radius: var(--r-lg); }
.empty { padding: 48px 20px; }
.empty b { font-size: 16.5px; }

/* Forms: taller fields, clear focus ring */
input[type=text], input[type=password], input[type=email], input[type=number], input[type=date], input[type=datetime-local], input[type=time], input[type=search], input[type=tel], input[type=url], select, textarea {
  min-height: 42px; border-radius: 10px; border-color: var(--line-2); padding: 9px 12px; transition: border-color .15s, box-shadow .15s; }
input:hover:not(:focus):not([readonly]), select:hover:not(:focus), textarea:hover:not(:focus) { border-color: #b9c2d0; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: var(--ring); }
label.f > span { font-size: 12.5px; font-weight: 700; color: var(--ink-2); letter-spacing: .01em; margin-bottom: 6px; }
.check input { accent-color: var(--red); }

/* Buttons: primary red with depth, quiet secondary */
.btn { border-radius: 10px; min-height: 40px; padding: 8px 16px; font-weight: 600; letter-spacing: .005em; box-shadow: 0 1px 2px rgba(15,23,42,.05); transition: background .15s, border-color .15s, box-shadow .15s, transform .06s; }
.btn:hover { border-color: #b9c2d0; }
.btn-red { background: linear-gradient(180deg, #e8323a, var(--red)); border-color: var(--red-ink); box-shadow: 0 1px 2px rgba(179,20,27,.3), inset 0 1px 0 rgba(255,255,255,.18); }
.btn-red:hover { background: linear-gradient(180deg, #e0262e, var(--red-ink)); border-color: var(--red-ink); }
.btn-dark { background: var(--ink); border-color: var(--ink); }
.btn-ok { box-shadow: 0 1px 2px rgba(15,138,86,.3), inset 0 1px 0 rgba(255,255,255,.18); }
.btn-ghost { box-shadow: none; }
.btn-ghost:hover { background: var(--surface-2); border-color: transparent; }
.btn-sm { min-height: 34px; padding: 5px 12px; border-radius: 9px; }
.btn-lg { min-height: 52px; border-radius: 12px; }
.tbtn { border-radius: 9px; transition: background .12s, border-color .12s; }
.tbtn:hover { border-color: #b9c2d0; background: var(--surface-2); }
.tbtn.go:hover { background: var(--green); filter: brightness(1.05); }

/* Badges, tags, chips, tabs */
.badge { font-size: 12px; padding: 3px 10px; font-weight: 700; letter-spacing: .01em; }
.tag { border-radius: 6px; letter-spacing: .02em; }
.chip { padding: 6px 13px; transition: background .15s, border-color .15s, color .15s; }
.chip.on { box-shadow: 0 1px 2px rgba(15,23,42,.2); }
.tabs { gap: 4px; border-bottom-color: var(--line); }
.tabs a, .tabs button { font-size: 14.5px; padding: 11px 14px; border-bottom-width: 2.5px; transition: color .15s, border-color .15s; border-radius: 8px 8px 0 0; }
.tabs a:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); }
.flash { border-radius: 12px; padding: 12px 16px; border: 1px solid transparent; }
.flash-ok { border-color: color-mix(in srgb, var(--green) 25%, transparent); }
.flash-err { border-color: var(--red-line); }
.flash-warn { border-color: color-mix(in srgb, var(--amber) 30%, transparent); }
.note { border-radius: 12px; }
.alertbar a { border-radius: 12px; background: var(--red-soft); border-color: var(--red-line); color: var(--red-ink); font-weight: 600; transition: box-shadow .15s; }
.alertbar a:hover { box-shadow: var(--shadow-hover); text-decoration: none; }

/* Job card header + stages */
.jhead .who h2 { font-size: 22px; letter-spacing: -.01em; }
.stage i { width: 26px; height: 26px; }
.stage.now i { box-shadow: 0 0 0 5px var(--red-soft); }
.qtile { border-radius: 14px; transition: border-color .15s, background .15s, transform .15s var(--ease); }
.qtile:hover { transform: translateY(-1px); }
.actionbar { box-shadow: 0 -8px 24px -12px rgba(15,23,42,.18); }
.plate { border-radius: 7px; }

/* Toasts */
.toast { border-radius: 12px; padding: 12px 16px 12px 18px; box-shadow: var(--shadow-lg); }

/* Login */
.authwrap { background: radial-gradient(900px 520px at 100% 100%, rgba(220,28,36,.45), transparent 60%), radial-gradient(700px 420px at 0% 0%, rgba(37,99,235,.18), transparent 60%), #0c0f15; }
.authcard { border-radius: 20px; padding: 34px 32px; box-shadow: 0 40px 90px -20px rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.06); }

/* Page entrance: content fades up once (skipped with reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .content > * { animation: azIn .28s var(--ease) backwards; }
  .content > *:nth-child(2) { animation-delay: .03s; } .content > *:nth-child(3) { animation-delay: .06s; } .content > *:nth-child(4) { animation-delay: .09s; }
}
@keyframes azIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Dark mode details */
:root[data-theme="dark"] .side nav a.on { background: linear-gradient(90deg, rgba(239,59,66,.24), rgba(239,59,66,.05)); }
:root[data-theme="dark"] .btn:hover { border-color: #46505f; }
:root[data-theme="dark"] input:hover:not(:focus):not([readonly]), :root[data-theme="dark"] select:hover:not(:focus) { border-color: #46505f; }
:root[data-theme="dark"] .t-delivered .sic, :root[data-theme="dark"] .t-open .sic { background: var(--surface-2); color: var(--ink-2); }
:root[data-theme="dark"] .b-delivered { background: var(--surface-2); color: var(--ink-2); }
:root[data-theme="dark"] .lnote.int { background: #33280f; }

/* Phones */
@media (max-width: 760px) {
  .top { padding: 8px 14px; min-height: 56px; }
  .top h1 { font-size: 18px; }
  .content { padding: 16px 14px 90px; }
  .card-h { padding: 13px 16px; } .card-b { padding: 16px; }
  .kpi { padding: 14px 15px; } .kpi .lbl .ic { width: 24px; height: 24px; padding: 5px; }
  .tbl th, .tbl td { padding-left: 12px; padding-right: 12px; }
}
/* 2.3: dashboard welcome banner + KPI colours */
.dhero { margin-bottom: 18px; padding: 22px 24px; border-radius: 18px; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(520px 220px at 100% 0%, rgba(220,28,36,.55), transparent 70%), radial-gradient(420px 200px at 0% 120%, rgba(37,99,235,.22), transparent 70%), linear-gradient(135deg, #111722, #0b0e14); box-shadow: 0 14px 34px -16px rgba(11,14,20,.6); }
.dhero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(90deg, transparent, #000 60%); pointer-events: none; }
.dhero > * { position: relative; z-index: 1; }
.dhero h2 { font-size: 26px; letter-spacing: -.015em; color: #fff; }
.dhero .muted { color: #a9b3c4; margin-top: 4px; }
.dhero .livedot { color: #5fe0a0; } .dhero .livedot::before { background: #3fca86; box-shadow: 0 0 0 3px rgba(63,202,134,.25); }
.btn-glass { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; box-shadow: none; backdrop-filter: blur(6px); }
.btn-glass:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); color: #fff; }
.kpis > .kpi:nth-child(1) .lbl .ic { background: var(--blue-soft); color: var(--blue); box-shadow: none; }
.kpis > .kpi:nth-child(2) .lbl .ic { background: var(--green-soft); color: var(--green); box-shadow: none; }
.kpis > .kpi:nth-child(3) .lbl .ic { background: var(--violet-soft); color: var(--violet); box-shadow: none; }
.kpis > .kpi:nth-child(4) .lbl .ic { background: var(--red-soft); color: var(--red); box-shadow: none; }
.tbl th.num { font: 700 11.5px var(--font); letter-spacing: .06em; }
.items .idesc { min-width: 240px; }
@media (max-width: 760px) { .dhero { padding: 18px; border-radius: 16px; } .dhero h2 { font-size: 21px; } .dhero .row { width: 100%; } .dhero .row .btn { flex: 1; } }
.tbl tbody tr:has(.empty):hover td { background: transparent; }
.content > .pulse, .content > *.pulse { animation: pulse 1.2s ease-out; }

/* 2.4: settings in steps */
.setsteps { display: flex; gap: 6px; margin-bottom: 14px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.setstep { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); text-decoration: none !important; white-space: nowrap; font-size: 14px; transition: border-color .15s, background .15s, box-shadow .15s; }
.setstep i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 13px var(--font-c); font-style: normal; background: var(--surface-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.setstep i .ic { width: 14px; height: 14px; }
.setstep b { font-weight: 600; }
.setstep:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.setstep.done i { background: var(--green); color: #fff; box-shadow: none; }
.setstep.on { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.setstep.on i { background: var(--red); color: #fff; box-shadow: none; }
.setstep.on.done i { background: var(--green); }
.subtabs { margin-bottom: 18px; }
.sethero { margin-bottom: 16px; }
.sethero h2 { font-size: 22px; }
.sethero p { margin: 4px 0 0; }
.setgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.setcard { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 18px; color: var(--ink); text-decoration: none !important; }
.setnum { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font: 700 17px var(--font-c); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); }
.setcard.done .setnum { background: var(--green-soft); color: var(--green); box-shadow: none; }
.setcard.todo .setnum { background: var(--red-soft); color: var(--red); box-shadow: none; }
.setbody b { display: block; font-size: 16px; }
.setbody small { display: block; color: var(--ink-3); margin-top: 2px; }
.setlinks { display: block; margin-top: 10px; font-size: 13px; color: var(--ink-2); font-weight: 600; }
/* menu editor */
.mrow { display: grid; grid-template-columns: auto 120px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.mmove { display: inline-flex; gap: 4px; }
.mtbl td { padding-top: 8px; padding-bottom: 8px; }
.mtbl input[type=text] { min-height: 36px; padding: 6px 10px; }
.mtbl select { min-height: 36px; padding: 6px 10px; }
@media (max-width: 900px) { #menuform > .grid { grid-template-columns: minmax(0, 1fr) !important; } }
@media (max-width: 760px) { .setgrid { grid-template-columns: minmax(0, 1fr); } .mrow { grid-template-columns: auto minmax(0, 1fr); } .mrow .micon { display: none; } }
.mtbl td:first-child { white-space: nowrap; width: 92px; }
.mtbl .tbtn, .mrow .tbtn { width: 30px; height: 30px; display: inline-grid; font-size: 14px; }
.mrow { grid-template-columns: auto 96px minmax(0, 1fr) auto; }
.mrow .micon { min-height: 36px; padding: 6px 8px; font-size: 13px; }
.mrow input[type=text] { min-height: 36px; padding: 6px 10px; }

/* ===================== 2.5: job card flow, gate, arrivals, over-time, month calendar ===================== */
.flow { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 8px; margin: 14px 0 6px; }
.fstep { flex: 1 1 112px; min-width: 112px; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center; padding: 9px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.fstep i { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 13px var(--font-c); font-style: normal; background: var(--surface-2); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-2); }
.fstep b { font-size: 12.5px; line-height: 1.2; }
.fstep small { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fstep.f-done i { background: var(--green); color: #fff; box-shadow: none; }
.fstep.f-now { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.fstep.f-now i { background: var(--red); color: #fff; box-shadow: none; }
.fstep.f-now small { color: var(--red); font-weight: 700; }
.fstep.f-hold { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
.fstep.f-hold i { background: var(--amber); color: #fff; box-shadow: none; }
.fstep.f-hold small { color: var(--amber); font-weight: 700; }
.fstep.f-skip { opacity: .55; }
.fnow { border-color: var(--red-line); margin-bottom: 14px; }
.fnow .card-h h2 { display: flex; align-items: center; gap: 8px; }
.fnum { width: 26px; height: 26px; border-radius: 8px; background: var(--red); color: #fff; display: inline-grid; place-items: center; font: 700 14px var(--font-c); }
.fdecide { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.fopt { cursor: pointer; }
.fopt input { position: absolute; opacity: 0; pointer-events: none; }
.fopt > span { display: grid; gap: 4px; padding: 14px; border-radius: 14px; border: 1.5px solid var(--line-2); background: var(--surface); height: 100%; }
.fopt > span svg { width: 22px; height: 22px; color: var(--ink-3); }
.fopt small { color: var(--ink-3); font-size: 12px; }
.fopt input:checked + span { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.fopt.o-return input:checked + span { border-color: var(--red); box-shadow: 0 0 0 2px var(--red); }
.fopt input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.fgate { margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 13px; }
.fgate summary { cursor: pointer; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fgate summary svg { width: 16px; height: 16px; }
@media (max-width: 900px) { .fdecide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Receive My Car (phone first) */
.rcv .card-h h2 svg { width: 18px; height: 18px; }
.rcv-plate { font-size: 20px !important; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.rcv-shot { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 12px; border: 2px dashed var(--line-2); border-radius: 14px; background: var(--surface-2); cursor: pointer; font-weight: 600; color: var(--ink-2); text-align: center; }
.rcv-shot.sm { min-height: 46px; font-size: 14px; }
.rcv-shot svg { width: 22px; height: 22px; }
.rcv-shot.ok { border-style: solid; border-color: var(--green); background: var(--green-soft); color: var(--green); }
.rcv-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.rcv-thumbs:empty { display: none; }
.rcv-th { width: 74px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; font-weight: 700; font-size: 12px; box-shadow: inset 0 0 0 1px var(--line-2); }
.rcv-th img { width: 100%; height: 100%; object-fit: cover; }
.rcv-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rcv-mode { cursor: pointer; }
.rcv-mode input { position: absolute; opacity: 0; pointer-events: none; }
.rcv-mode span { display: grid; place-items: center; min-height: 52px; padding: 8px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--surface); font-weight: 600; font-size: 14px; text-align: center; }
.rcv-mode input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.rcv-mode input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.rcv-match { padding: 10px 12px; border-radius: 10px; font-size: 14px; background: var(--surface-2); }
.rcv-match.m-returning { background: var(--green-soft); color: var(--ink); }
.rcv-match.m-new { background: var(--blue-soft); }
.rcv-match.m-vin_conflict, .rcv-match.m-plate_changed, .rcv-match.m-conflict, .rcv-match.m-open { background: var(--amber-soft); }
.rcv-car summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.rcv-go { width: 100%; min-height: 58px; font-size: 18px; }
.rcv-done { border-color: var(--green); margin-bottom: 14px; }
.rcv-done .card-b { display: grid; gap: 4px; }
.rcv-big { font: 800 28px var(--font-c); color: var(--green); }
@media (max-width: 520px) { .rcv-modes { grid-template-columns: minmax(0, 1fr); } }

/* Arrivals and Manage My Car */
.ichip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-2); white-space: nowrap; }
.ichip.done { background: var(--green-soft); color: var(--green); box-shadow: none; }
.ichip.mine { background: var(--red-soft); color: var(--red); box-shadow: none; }
.ichip.asg { background: var(--blue-soft); color: var(--blue); box-shadow: none; }
tr.rowmine td { background: var(--red-soft); }
.ithumbs { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.ithumb { width: 92px; display: grid; gap: 3px; text-decoration: none !important; color: var(--ink-2); }
.ithumb img, .ithumb > b, .ithumb.lock svg { width: 92px; height: 68px; object-fit: cover; border-radius: 9px; background: var(--surface-2); display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-2); }
.ithumb.lock svg { padding: 20px; color: var(--ink-3); }
.ithumb small { font-size: 11px; }
.idoc { font-size: 12.5px; padding: 6px 10px; border-radius: 9px; background: var(--surface-2); }
.iassign { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.iassign select { min-height: 34px; padding: 4px 8px; font-size: 13px; width: auto; }
.ichoice { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.ichoice input { width: auto; min-height: 0; }
section[data-pane].card { margin-top: 0; }
.holdrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); color: var(--ink); text-decoration: none !important; }
.holdrow.late { background: var(--red-soft); }
.holdrow.late .small { color: var(--red); font-weight: 700; }

/* Over-time badge */
.ot { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font: 700 11px var(--font); white-space: nowrap; vertical-align: middle; }
.ot.ok { background: var(--green-soft); color: var(--green); }
.ot.warn { background: var(--amber-soft); color: var(--amber); }
.ot.over { background: var(--red); color: #fff; }
.jobtile .ot { margin: 6px 0 0; font-size: 13px; padding: 3px 10px; }
.dstep { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 6px; background: rgba(255,255,255,.1); color: #fff; font-size: 13px; font-weight: 600; }

/* 2.5.1: job card step permissions */
.steptbl td, .steptbl th { padding-top: 8px; padding-bottom: 8px; }
.steprad { display: inline-grid; place-items: center; width: 40px; height: 34px; cursor: pointer; }
.steprad input { width: 18px; height: 18px; min-height: 0; accent-color: var(--ink); cursor: pointer; }
.steproles select { min-height: 32px; padding: 3px 6px; font-size: 13px; width: auto; border-radius: 8px; }
.steproles select.lv-edit { background: var(--green-soft); }
.steproles select.lv-read { background: var(--blue-soft); }
.steproles select.lv-none { background: var(--surface-2); color: var(--ink-3); }
.steproles select.changed { box-shadow: 0 0 0 2px var(--amber); }
.stepro { opacity: .75; }
.fset { border: 0; padding: 0; margin: 0; min-width: 0; display: contents; }
/* 2.5.2: several service types */
.svcchecks { display: flex; flex-wrap: wrap; gap: 6px; }
.svcchk { cursor: pointer; }
.svcchk input { position: absolute; opacity: 0; pointer-events: none; }
.svcchk span { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--line-2); background: var(--surface); font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.svcchk input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.svcchk input:checked + span::before { content: '✓'; margin-right: 6px; }
.svcchk input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
/* 2.6: plate and odometer with the camera button, like the VIN */
.camfield .vincam.ok { background: var(--green); }
.camok { display: flex; align-items: center; gap: 8px; color: var(--green); font-weight: 600; font-size: 12.5px; margin-top: 6px; }
.camok:empty { display: none; }
.camok img { width: 46px; height: 34px; object-fit: cover; border-radius: 6px; }

/* ===================== 2.6: searchable dropdowns ===================== */
.ss { position: relative; width: 100%; }
.ss .ss-native { position: absolute !important; left: 8px; bottom: 0; width: 1px !important; height: 1px !important; min-height: 0 !important; opacity: 0; pointer-events: none; padding: 0 !important; border: 0 !important; }
.ss-field { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-height: 42px; padding: 5px 34px 5px 10px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; cursor: text; transition: border-color .15s, box-shadow .15s; }
.ss-field:hover { border-color: #b9c2d0; }
.ss.open .ss-field, .ss-field:focus-within { border-color: var(--blue); box-shadow: var(--ring); }
.ss-invalid .ss-field { border-color: var(--red); }
.ss .ss-input { flex: 1 1 80px; min-width: 60px; border: 0 !important; box-shadow: none !important; padding: 4px 2px !important; min-height: 30px !important; background: transparent; font: inherit; color: var(--ink); outline: none; }
.ss .ss-input::placeholder { color: var(--ink-3); }
.ss-chips { display: contents; }
.ss-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--ink); color: var(--surface); font-size: 12.5px; font-weight: 600; }
.ss-chip button { all: unset; cursor: pointer; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; font-size: 14px; line-height: 1; opacity: .75; }
.ss-chip button:hover { opacity: 1; background: rgba(255,255,255,.18); }
.ss-list { position: absolute; z-index: 70; left: 0; right: 0; top: calc(100% + 4px); max-height: 260px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 5px; min-width: 200px; }
.ss.ss-up .ss-list { top: auto; bottom: calc(100% + 4px); }
.ss-opt { padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.ss-opt.hl { background: var(--surface-2); }
.ss-opt.on { font-weight: 700; }
.ss-multi .ss-opt::before { content: ''; width: 16px; height: 16px; flex: none; border-radius: 4px; border: 1.5px solid var(--line-2); }
.ss-multi .ss-opt.on::before { background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/11px no-repeat; border-color: var(--ink); }
.ss:not(.ss-multi) .ss-opt.on { color: var(--red); }
.ss-blank { color: var(--ink-3); }
.ss-grp { padding: 8px 10px 4px; font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.ss-none { padding: 10px; color: var(--ink-3); font-size: 13px; }
.ss-disabled .ss-field { background-color: var(--surface-2); cursor: not-allowed; opacity: .7; }
.iassign .ss, .grpbar .ss, .techrow .ss, .repf .ss, .row > .ss { width: auto; min-width: 180px; }
.iassign .ss-field, .repf .ss-field { min-height: 34px; padding-top: 2px; padding-bottom: 2px; }

/* ===================== 2.6: cleaner look ===================== */
:root:not([data-theme="dark"]) { --line: #e8ebf1; }
.card { border-color: var(--line); box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.card-h { border-bottom-color: var(--line); padding: 14px 20px; }
.card-h h2 { font-size: 16px; letter-spacing: -.005em; }
.card-h h2 svg { width: 18px; height: 18px; color: var(--ink-3); }
.stack { gap: 14px; }
.f > span:first-child, label.f > span { font-size: 12.5px; font-weight: 700; color: var(--ink-2); letter-spacing: .01em; margin-bottom: 6px; display: block; }
.f > span small, label.f > span small { font-weight: 500; }
.note { border-radius: 10px; }
.tbl td { border-bottom-color: var(--line); }
.tip { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 3px; border-radius: 50%; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-3); font: 700 10px/1 var(--font); font-style: normal; cursor: help; vertical-align: 1px; }
details.more > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--ink-2); list-style: none; display: inline-flex; align-items: center; gap: 6px; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: '+'; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 6px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13px; }
details.more[open] > summary::before { content: '–'; }
.probgrid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 760px) { .probgrid { grid-template-columns: minmax(0, 1fr); } }
.softbox { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--amber-soft); display: grid; gap: 8px; }
.softbox b { display: flex; align-items: center; gap: 6px; }
.softbox b svg { width: 16px; height: 16px; }
.form-actions { gap: 8px; }
.fstep { border-color: var(--line); }
@media (max-width: 760px) { .card-h { padding: 12px 16px; } .card-b { padding: 16px; } }
.flow { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.fstep { min-width: 0; }
.fstep b { overflow-wrap: break-word; }   /* 2.9.1: long step names (Floor Recommendation) stay inside the tile */
@media (max-width: 520px) { .flow { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); } }

/* ---------- 2.7: quotation, signature, notifications ---------- */
.fdecide.fdecide2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qsum { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.qsum > div { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface); }
.qsum small { display: block; color: var(--ink-3); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.qsum b { font-size: 17px; font-variant-numeric: tabular-nums; }
.qsum .qtot { border-color: var(--ink); } .qsum .qtot b { font-size: 20px; }
.qsum .qlow { background: var(--warn-soft); border-color: var(--amber); } .qsum .qlow b { color: var(--amber); }
.qsum .qok { background: var(--ok-soft); border-color: transparent; } .qsum .qok b { color: var(--green); }
.sigpad { width: 100%; height: 160px; border: 1.5px dashed var(--line-2); border-radius: 12px; background: #fff; touch-action: none; cursor: crosshair; }
.rcv-fb .rcv-shot { min-height: 92px; }
.notif summary.iconbtn { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; }
.notif summary svg { width: 21px; height: 21px; }
.nbadge { position: absolute; top: 1px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font: 700 11px/18px system-ui, sans-serif; font-style: normal; text-align: center; box-shadow: 0 0 0 2px var(--surface); }
.nmenu { width: min(380px, calc(100vw - 24px)); padding: 0; right: 0; }
.nmenu .menuhead { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.nlist { max-height: 60vh; overflow: auto; }
.nitem { display: grid !important; gap: 2px; padding: 10px 12px !important; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; white-space: normal !important; }
.nitem.unread { background: var(--info-soft); border-left-color: var(--blue); }
.nitem b { font-size: 13.5px; } .nitem small { color: var(--ink-2); font-size: 12.5px; }
.nitem.k-approval { border-left-color: var(--amber); } .nitem.k-arrival { border-left-color: var(--green); }
.toast-info { border-left-color: var(--blue); }
@media (max-width: 720px) { .fdecide.fdecide2 { grid-template-columns: minmax(0, 1fr); } }
/* 2.7.1: technicians now */
.wl { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 4px; }
.wl.off { opacity: .6; }
.wl .small svg { width: 13px; height: 13px; vertical-align: -2px; color: var(--green); }
/* 2.8: an open dropdown sits above the cards and tabs that follow; "Add new" in the list */
.ss-raise { position: relative; z-index: 85 !important; overflow: visible !important; }
.ss.open { z-index: 90; }
.ss-opt.ss-add { color: var(--blue); font-weight: 600; border-top: 1px dashed var(--line); margin-top: 4px; }
/* 2.8: insurance documents, 3-way answer */
.insdocs { display: grid; gap: 8px; }
.insdoc { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.insdoc > span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12px; }
.insdoc > span.ok { background: var(--ok-soft); color: var(--green); } .insdoc > span.miss { background: var(--warn-soft); color: var(--amber); }
.insdoc label.btn.picked { border-color: var(--green); color: var(--green); }
.fdecide.fdecide3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nextopts { display: grid; gap: 6px; }
.nextopts .check { border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
.notappr td { color: var(--ink-3); text-decoration: line-through; }
@media (max-width: 720px) { .fdecide.fdecide3 { grid-template-columns: minmax(0, 1fr); } }
.wlgrid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.lineshead { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
@media (max-width: 720px) { .lineshead { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 2.9 ---------- */
.toast-link { cursor: pointer; } .toast-link::after { content: ' →'; font-weight: 700; }
.t-await .sic { background: var(--blue-soft, #e8f0fe); color: var(--blue, #2563eb); }
.insbar { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 6px; } .insbar > i { display: block; height: 100%; width: 0; background: var(--green); transition: width .2s; }
.voicebox { border: 1px dashed var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; background: var(--surface); }
.voicebox .vhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .voicebox .vhead svg { width: 18px; height: 18px; color: var(--red); }
.voicebox .vlist { display: grid; gap: 6px; } .voicebox .vlist:empty { display: none; }
.voicebox .vitem { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .voicebox audio { height: 36px; max-width: 100%; min-width: 220px; flex: 1; }
.voicebox .vrec { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .voicebox .vtime { font-weight: 800; color: var(--red); }
.voicebox [data-vrec].btn-red svg { animation: vpulse 1.2s infinite; } @keyframes vpulse { 50% { opacity: .35; } }
.qsentbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border: 1px solid var(--red-soft, #fde2e2); background: var(--red-soft, #fdf1f1); border-radius: 12px; padding: 12px 14px; }
details.reco > summary { list-style: none; cursor: pointer; } details.reco > summary::-webkit-details-marker { display: none; }
details.reco tr.tot td { border-top: 2px solid var(--line); }
.extrawork > summary { list-style: none; display: inline-flex; } .extrawork > summary::-webkit-details-marker { display: none; }

/* ======================================================================
   2.10 UI: one motion system for buttons, menus, dropdowns and controls.
   Short and quiet (0.12 s press, 0.16 s menus, 0.24 s panels); all of it
   is switched off by the device's "reduce motion" setting (rule above).
   ====================================================================== */
:root { --d1: .12s; --d2: .16s; --d3: .24s; --ease-out: cubic-bezier(.2,.8,.2,1); --ease-spring: cubic-bezier(.3,1.35,.5,1); --ink-3: #64748b; }
:root[data-theme="dark"] { --ink-3: #8b95a7; }

/* ---- Buttons: press, lift, busy ---- */
.btn { transition: background var(--d1), border-color var(--d1), box-shadow var(--d2) var(--ease-out), transform var(--d1) var(--ease-out), color var(--d1); will-change: transform; }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn-red:hover:not(:disabled), .btn-ok:hover:not(:disabled), .btn-dark:hover:not(:disabled) { transform: translateY(-1px); }
.btn-red:hover:not(:disabled) { box-shadow: 0 6px 16px -6px rgba(179,20,27,.5), inset 0 1px 0 rgba(255,255,255,.18); }
.btn-ok:hover:not(:disabled) { box-shadow: 0 6px 16px -6px rgba(15,138,86,.5), inset 0 1px 0 rgba(255,255,255,.18); }
.btn-dark:hover:not(:disabled) { box-shadow: 0 6px 16px -6px rgba(15,23,42,.45); }
.btn-red:active:not(:disabled), .btn-ok:active:not(:disabled), .btn-dark:active:not(:disabled) { transform: translateY(0) scale(.97); }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.btn.is-busy { pointer-events: none; opacity: .85; }
.tbtn { transition: background var(--d1), border-color var(--d1), transform var(--d1) var(--ease-out); }
.tbtn:active { transform: scale(.9); }
.iconbtn { transition: background var(--d1), transform var(--d1) var(--ease-out); }
.iconbtn:active { transform: scale(.92); }

/* ---- Touch screens: every control at least 44 px (Apple: 44 x 44 pt hit region) ---- */
@media (pointer: coarse) {
  .btn, .btn-sm, .chip, .tabs a, .tabs button, .seg button, .menu a, .menu button, .ss-opt, .nitem { min-height: 44px; }
  .tbtn { min-width: 40px; min-height: 40px; }
  input[type=text], input[type=password], input[type=email], input[type=number], input[type=date], input[type=datetime-local], input[type=time], input[type=search], input[type=tel], select, .ss-field { min-height: 46px; font-size: 16px; }
  .check { padding: 8px 0; }
}

/* ---- Menus, ⋯ boxes, notifications: grow from their button, one at a time ---- */
@keyframes azPop { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes azPopOut { to { opacity: 0; transform: translateY(-4px) scale(.97); } }
@keyframes azPopUp { from { opacity: 0; transform: translateY(4px) scale(.97); } to { opacity: 1; transform: none; } }
details.usermenu[open] > .menu, details.notif[open] > .menu { transform-origin: top right; animation: azPop var(--d2) var(--ease-out); }
details.rowmenu[open] > .pop { transform-origin: top right; animation: azPop var(--d2) var(--ease-out); }
details.usermenu.az-closing > .menu, details.notif.az-closing > .menu, details.rowmenu.az-closing > .pop { animation: azPopOut .12s ease-in forwards; }
.actionbar details.usermenu[open] > .menu { transform-origin: bottom right; animation-name: azPopUp; }
.menu a, .menu button { transition: background var(--d1), color var(--d1); }
.menu a:active, .menu button:active { background: var(--line); }
.notif > summary { transition: background var(--d1); } .notif[open] > summary { background: var(--surface-2); }
/* the notification box sits just under the bell */
.nmenu { top: calc(100% + 10px); }
.nmenu .menuhead { position: relative; background: var(--surface); border-radius: 14px 14px 0 0; }
.nitem { transition: background var(--d1); } .nitem:hover { background: var(--surface-2); }

/* ---- Searchable dropdowns ---- */
.ss.open .ss-list { transform-origin: top center; animation: azPop var(--d2) var(--ease-out); }
.ss.open.ss-up .ss-list { transform-origin: bottom center; animation-name: azPopUp; }
.ss-opt { transition: background .08s, color .08s; }
.ss-field { transition: border-color var(--d1), box-shadow var(--d2); }
.ss.open .ss-field { border-color: var(--blue); box-shadow: var(--ring); }
.ss-field { background-image: none; position: relative; }
.ss-field::after { content: ""; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: translateY(-70%) rotate(45deg); transition: transform var(--d2) var(--ease-out); pointer-events: none; }
.ss.open .ss-field::after { transform: translateY(-25%) rotate(225deg); }

/* ---- Plain dropdowns look like the searchable ones ---- */
select:not([multiple]):not([size]) { -webkit-appearance: none; appearance: none; padding-right: 34px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; cursor: pointer; }
:root[data-theme="dark"] select:not([multiple]):not([size]) { background-color: var(--surface-2); }
.kbtns select { background-color: #2a2d34 !important; }

/* ---- Checkboxes and radios: bigger, clear on / off, a quick tick ---- */
input[type=checkbox], input[type=radio] { -webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; margin: 0; border: 1.75px solid var(--line-2); background: var(--surface) center/12px no-repeat; cursor: pointer; vertical-align: -4px;
  transition: background-color var(--d1), border-color var(--d1), box-shadow var(--d2), transform var(--d1) var(--ease-spring); }
input[type=checkbox] { border-radius: 6px; }
input[type=radio] { border-radius: 50%; }
input[type=checkbox]:hover:not(:disabled), input[type=radio]:hover:not(:disabled) { border-color: var(--ink-3); }
input[type=checkbox]:checked { background-color: var(--red); border-color: var(--red); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); animation: azTick var(--d2) var(--ease-spring); }
input[type=radio]:checked { border-color: var(--red); border-width: 6px; animation: azTick var(--d2) var(--ease-spring); }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { box-shadow: var(--ring); outline: none; }
input[type=checkbox]:active:not(:disabled), input[type=radio]:active:not(:disabled) { transform: scale(.9); }
input[type=checkbox]:disabled, input[type=radio]:disabled { opacity: .45; cursor: not-allowed; }
@keyframes azTick { 0% { transform: scale(.8); } 100% { transform: scale(1); } }
.check input, .grpchk input, .steprad input { margin-top: 1px; width: 20px; height: 20px; }
.steprad input:checked { border-color: var(--ink); }
/* hidden inputs inside choice cards keep their own look */
.fopt input, .rcv-mode input, .seg input { width: 1px; height: 1px; }

/* ---- Switches (settings that turn a whole thing on or off): <label class="check switch"> ---- */
.check.switch { align-items: center; }
.check.switch input { width: 40px; height: 24px; border-radius: 999px; border: 0; background: var(--line-2); position: relative; transition: background var(--d2) var(--ease-out); animation: none; }
.check.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform var(--d2) var(--ease-spring); }
.check.switch input:checked { background: var(--green); background-image: none; }
.check.switch input:checked::after { transform: translateX(16px); }

/* ---- Tabs: the underline slides to the picked tab ---- */
.tabs.az-ink { position: relative; }
.tabs.az-ink .on { border-bottom-color: transparent !important; }
.tabs .az-inkbar { position: absolute; left: 0; bottom: 0; height: 2.5px; width: 0; background: var(--red); border-radius: 2px; transition: transform var(--d3) var(--ease-out), width var(--d3) var(--ease-out); pointer-events: none; }
.tabs button, .tabs a { transition: color var(--d1), background var(--d1); }
.seg button { transition: background var(--d2) var(--ease-out), color var(--d1), box-shadow var(--d2); }

/* ---- Step bar: the step the car is on breathes once when the page opens ---- */
@keyframes azNow { 0% { box-shadow: 0 0 0 1px var(--red), 0 0 0 0 rgba(227,20,30,.35); } 100% { box-shadow: 0 0 0 1px var(--red), 0 0 0 10px rgba(227,20,30,0); } }
.fstep.f-now { animation: azNow 1.2s var(--ease-out) .25s 2; }
.fstep { transition: transform var(--d2) var(--ease-out); }

/* ---- Cards, choice tiles, chips ---- */
.fopt span, .rcv-mode span, .chip { transition: border-color var(--d1), box-shadow var(--d2), background var(--d1), transform var(--d1) var(--ease-out); }
.fopt:active span, .rcv-mode:active span, .chip:active { transform: scale(.98); }
details > summary { -webkit-tap-highlight-color: transparent; }

/* ---- Toasts: slide in, a timer bar, tap or swipe to close ---- */
@keyframes azToastIn { from { opacity: 0; transform: translateX(24px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes azToastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.toast { position: relative; overflow: hidden; animation: azToastIn var(--d3) var(--ease-spring); touch-action: pan-y; user-select: none; }
.toast::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; opacity: .35; transform-origin: left; animation: azToastBar var(--tdur, 3.5s) linear forwards; }
.toast.out { opacity: 0; transform: translateX(24px); transition: opacity .2s, transform .2s var(--ease-out); }
.toast.dragging { transition: none; }
@media (max-width: 760px) { @keyframes azToastIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } } .toast.out { transform: translateY(16px); } }

/* ---- Loading bar a little smoother ---- */
.loadbar { height: 2.5px; box-shadow: 0 0 10px rgba(227,20,30,.5); }
/* small dropdowns with their own padding keep room for the arrow; ⋯ boxes read left to right */
select:not([multiple]):not([size]) { padding-right: 30px !important; background-position: right 10px center !important; }
.rowmenu .pop { text-align: left; }

/* ================= 2.11 ================= */
/* Key text on forms: bold and a little bigger */
label.f > span, div.f > span { font-size: 13.5px; font-weight: 750; color: var(--ink); letter-spacing: 0; }
.entry label.f > span { font-size: 13px; }
input[type=text], input[type=email], input[type=number], input[type=date], input[type=datetime-local], input[type=time], input[type=search], input[type=tel], select, textarea { font-size: 15.5px; font-weight: 550; }
input::placeholder, textarea::placeholder { font-weight: 400; }
/* One line of status in the Job Cards list */
.jline { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 650; color: var(--ink); white-space: nowrap; }
.jline > i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; }
.jline.t-blue > i { background: var(--blue, #2563eb); } .jline.t-blue { color: var(--blue, #2563eb); }
.jline.t-amber > i { background: var(--amber, #d97706); } .jline.t-amber { color: var(--amber, #b45309); }
.jline.t-green > i { background: var(--green, #16a34a); box-shadow: 0 0 0 3px rgba(22,163,74,.18); }
.jline.t-late > i { background: var(--red); } .jline.t-late b { color: var(--red); }
/* My Jobs: job card no. and customer under the plate */
.tjid { margin-top: 6px; font-size: 13.5px; }
.tjid b { font-size: 14px; }
/* Pop-up picker (single-choice dropdowns) */
select.pk-sel { cursor: pointer; }
.pk-back { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(15,18,24,0); transition: background var(--d2,.2s) var(--ease-out,ease-out); }
.pk-back.pk-in { background: rgba(15,18,24,.42); }
.pk-sheet { width: min(440px, 100%); max-height: min(560px, 82vh); display: flex; flex-direction: column; background: var(--surface); border-radius: 16px; box-shadow: 0 24px 60px rgba(15,18,24,.28); overflow: hidden;
  opacity: 0; transform: scale(.96) translateY(6px); transition: opacity var(--d2,.2s) var(--ease-out,ease-out), transform var(--d2,.2s) var(--ease-out,ease-out); }
.pk-in .pk-sheet { opacity: 1; transform: none; }
.pk-closing.pk-back { background: rgba(15,18,24,0); }
.pk-closing .pk-sheet { opacity: 0; transform: scale(.97); transition-duration: .16s; }
.pk-grab { display: none; }
.pk-h { display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px 18px; }
.pk-h b { flex: 1; font-size: 16.5px; font-weight: 750; }
.pk-x { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); font-size: 22px; line-height: 1; cursor: pointer; }
.pk-x:hover { background: var(--line); }
.pk-s { padding: 0 14px 10px; }
.pk-s input { width: 100%; }
.pk-list { overflow-y: auto; padding: 4px 8px 12px; overscroll-behavior: contain; }
.pk-g { padding: 10px 10px 4px; font-size: 11.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.pk-o { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; font-size: 15.5px; font-weight: 550; text-align: left; cursor: pointer; transition: background .12s; }
.pk-o span { flex: 1; }
.pk-o i { width: 20px; height: 20px; flex: none; border-radius: 50%; }
.pk-o.on { background: rgba(239,59,66,.08); font-weight: 750; }
.pk-o.on i { background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") no-repeat center; }
.pk-o:hover, .pk-o.hl { background: var(--surface-2); }
.pk-o.on.hl, .pk-o.on:hover { background: rgba(239,59,66,.13); }
.pk-o:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.pk-o:disabled { opacity: .45; cursor: default; }
.pk-blank span { color: var(--ink-3); font-weight: 500; }
.pk-add span { color: var(--red); font-weight: 750; }
.pk-hint, .pk-none { padding: 12px; color: var(--ink-3); font-size: 14px; }
.pk-phone { align-items: flex-end; padding: 0; }
.pk-phone .pk-sheet { width: 100%; max-height: 86vh; border-radius: 18px 18px 0 0; transform: translateY(100%); opacity: 1; padding-bottom: env(safe-area-inset-bottom); }
.pk-phone.pk-in .pk-sheet { transform: none; }
.pk-phone.pk-closing .pk-sheet { transform: translateY(100%); opacity: 1; transition-duration: .2s; }
.pk-phone .pk-grab { display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--line-2); margin: 8px auto 0; }
.pk-phone .pk-o { min-height: 50px; font-size: 16px; }
:root[data-theme="dark"] .pk-sheet { background: var(--surface); box-shadow: 0 24px 60px rgba(0,0,0,.6); }
/* Manage My Car: each form on its own page */
.ipages { display: flex; gap: 8px; margin: 16px 0 12px; flex-wrap: wrap; }
.ipages a { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px 9px 10px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-weight: 700; font-size: 14.5px; text-decoration: none; transition: background var(--d1), border-color var(--d1), color var(--d1); min-height: 44px; }
.ipages a i { font-style: normal; display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); font-size: 12.5px; font-weight: 800; }
.ipages a.done i { background: var(--green, #16a34a); color: #fff; }
.ipages a.on { background: var(--surface); border-color: var(--red); box-shadow: 0 0 0 1px var(--red); color: var(--red); }
.ipages a.on i { background: var(--red); color: #fff; }
.ipages a:hover:not(.on) { border-color: var(--ink-3); color: var(--ink); }
/* Customer's problem: one line per problem */
.problines { display: flex; flex-direction: column; gap: 8px; }
.pline { display: flex; align-items: center; gap: 8px; }
.pline .pn { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-size: 12.5px; font-weight: 800; color: var(--ink-2); }
.pline input { flex: 1; }
.pdel { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--ink-3); font-size: 20px; cursor: pointer; }
.pdel:hover { background: var(--surface-2); color: var(--red); }
.pl-new { animation: azPop var(--d2) var(--ease-out); }
.addprob { margin-top: 8px; align-self: flex-start; }
.paychg { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: var(--surface-2); }
.paychg > summary { cursor: pointer; font-size: 14px; }
.paychg[open] > summary { margin-bottom: 10px; }
.payfields .grid { margin: 0; }
/* ID cards: compact, front and back side by side */
.dcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.rcv-docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.rcv-docs .rcv-doc { margin: 0; }
.dcard { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: var(--surface); display: flex; flex-direction: column; gap: 10px; transition: border-color var(--d2), box-shadow var(--d2); }
.dcard.is-expired { border-color: var(--red); box-shadow: 0 0 0 3px rgba(239,59,66,.12); }
.dc-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dc-h b { font-size: 14.5px; font-weight: 750; }
.dc-src { color: var(--ink-3); font-size: 12px; }
.dc-bad { margin-left: auto; background: var(--red); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.dc-ok { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; background: var(--green, #16a34a); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.dc-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dc-one .dc-sides { grid-template-columns: 1fr; }
.dc-side { display: flex; flex-direction: column; gap: 6px; position: relative; min-width: 0; }
.dc-prev { aspect-ratio: 1.586; border: 1.5px dashed var(--line-2); border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--surface-2); transition: border-color var(--d2); }
.dc-one .dc-prev { aspect-ratio: auto; min-height: 64px; }
.dc-side.has .dc-prev { border-style: solid; border-color: var(--line); background: #0b0d12; }
.dc-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-prev a { display: block; width: 100%; height: 100%; }
.dc-ph { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--ink-3); }
.dc-ph svg { width: 22px; height: 22px; opacity: .7; }
.dc-ph small { font-weight: 700; font-size: 12px; }
.dc-pdf { display: grid !important; place-items: center; align-content: center; width: 100%; height: 100%; color: #fff; font-weight: 800; font-size: 18px; text-decoration: none; background: #b91c1c; }
.dc-pdf small { font-size: 10.5px; font-weight: 600; opacity: .85; }
.dc-lab { display: none; }
.dc-acts { display: flex; gap: 6px; }
.dc-b { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 36px; padding: 6px 8px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface); font-size: 13px; font-weight: 700; color: var(--ink); cursor: pointer; transition: background var(--d1), border-color var(--d1), transform var(--d1); }
.dc-b svg { width: 16px; height: 16px; }
.dc-b:hover { border-color: var(--ink-3); background: var(--surface-2); }
.dc-b:active { transform: scale(.97); }
.dc-b:focus-within { outline: 2px solid var(--blue); outline-offset: 1px; }
.dc-side.has .dc-b span { font-weight: 600; }
.dc-bar { position: absolute; left: 6px; right: 6px; top: 6px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.4); overflow: hidden; }
.dc-bar i { display: block; height: 100%; width: 0; background: var(--red); transition: width .2s; }
.dc-busy .dc-prev { opacity: .6; }
.dc-new .dc-prev { animation: azPop var(--d3) var(--ease-spring); }
.dc-exp { display: flex; align-items: center; gap: 10px; }
.dc-exp span { font-size: 13px; font-weight: 750; white-space: nowrap; }
.dc-exp input { flex: 1; min-height: 38px !important; }
.dc-ask input { border-color: var(--blue); box-shadow: var(--ring); }
.is-expired .dc-exp input { border-color: var(--red); color: var(--red); }
.dc-expro { color: var(--ink-2); }
.is-expired .dc-expro b { color: var(--red); }
.dc-note { margin-top: -4px; }
.dc-na { opacity: .75; }
.dc-sum { margin-top: 14px; }
.softbox { display: flex; flex-direction: column; gap: 10px; border: 1px dashed var(--amber, #d97706); border-radius: 14px; padding: 12px; background: rgba(217,119,6,.05); }
.softbox .dcard { border: 0; padding: 0; background: none; }
.softna { margin-top: -6px; }
.insdocs.dcards { margin-top: 4px; }
.drvdocs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ddoc { background: rgba(22,163,74,.1); color: var(--green, #15803d); padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: 12.5px; }
.ddoc.exp { background: rgba(239,59,66,.1); color: var(--red); }
@media (max-width: 520px) { .dcards, .rcv-docs { grid-template-columns: 1fr; } .dc-b span { font-size: 12.5px; } .dcard { padding: 10px; } }
/* Scanner */
.scan-back { position: fixed; inset: 0; z-index: 1300; background: rgba(8,10,14,.86); display: flex; align-items: center; justify-content: center; padding: 12px; opacity: 0; transition: opacity var(--d2) var(--ease-out); }
.scan-back.in { opacity: 1; }
.scan-box { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; }
.scan-h { text-align: center; color: #fff; }
.scan-h b { display: block; font-size: 17px; }
.scan-h span { font-size: 13px; opacity: .75; }
.scan-stage { position: relative; touch-action: none; border-radius: 8px; overflow: visible; }
.scan-stage canvas { display: block; border-radius: 8px; }
.scan-stage svg { position: absolute; inset: 0; pointer-events: none; }
.scan-stage polygon { fill: rgba(239,59,66,.14); stroke: #ef3b42; stroke-width: 2.5; stroke-linejoin: round; }
.scan-hd { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 3px solid #fff; background: rgba(239,59,66,.9); box-shadow: 0 2px 10px rgba(0,0,0,.5); touch-action: none; cursor: grab; padding: 0; }
.scan-hd::after { content: ""; position: absolute; inset: -12px; }
.scan-hd.on { transform: scale(1.25); cursor: grabbing; }
.scan-hd:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
.scan-f { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.scan-f .btn { min-height: 46px; }
/* Gate: the three choices for a card sit in one row */
.rcv-modes { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 6px !important; }
.rcv-mode span { min-height: 42px !important; padding: 8px 6px !important; font-size: 13px !important; text-align: center; line-height: 1.2; display: grid !important; place-items: center; }
/* Technician queues (drag and drop) */
.tq { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tq li { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); transition: box-shadow var(--d2), background var(--d2); }
.tq-h { flex: none; display: grid; gap: 3px; padding: 8px 5px; cursor: grab; touch-action: none; border-radius: 6px; }
.tq-h i { display: block; width: 14px; height: 2px; border-radius: 1px; background: var(--ink-3); }
.tq-h:hover { background: var(--surface-2); }
.tq-n { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--surface); display: grid; place-items: center; font-size: 11.5px; font-weight: 800; }
.tq-t { flex: 1; min-width: 0; color: var(--ink); text-decoration: none; font-size: 13.5px; }
.tq-t small { display: block; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tq-t .mono { font-size: 12px; color: var(--ink-2); }
.tq-ud { display: flex; flex-direction: column; gap: 2px; }
.tq-ud button { width: 26px; height: 20px; border: 0; border-radius: 5px; background: none; color: var(--ink-3); font-size: 10px; cursor: pointer; }
.tq-ud button:hover { background: var(--surface-2); color: var(--ink); }
.tq li.tq-drag { box-shadow: 0 12px 30px rgba(15,18,24,.25); cursor: grabbing; }
.tq li.tq-drag .tq-h { cursor: grabbing; }
.tq .tq-ph { border: 2px dashed var(--line-2); background: var(--surface-2); padding: 0; }
.tq li.tq-moved { animation: tqFlash .4s var(--ease-out); }
@keyframes tqFlash { from { background: rgba(239,59,66,.12); } to { background: var(--surface); } }
.tq-now { margin-top: 6px; }
@media (pointer: coarse) { .tq-h { padding: 12px 8px; } .tq-ud button { width: 34px; height: 26px; } }
/* Inspection: start time, voice report, optional checklist */
.istart { text-align: right; }
.istart b { display: block; font-size: 22px; }
.detcheck > summary { list-style: none; cursor: pointer; }
.detcheck > summary::-webkit-details-marker { display: none; }
.detcheck > summary h2::after { content: "▾"; margin-left: 8px; font-size: 12px; color: var(--ink-3); }
.detcheck:not([open]) > summary { border-bottom: 0; }
.detcheck-b { padding: 0 0 8px; }
.detcheck-b > .card { box-shadow: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; margin: 0; }
.vreport .vrec .btn { min-height: 48px; padding-inline: 22px; }
.vrep > summary { list-style: none; cursor: pointer; }
.dcards { align-items: start; }
.wlgrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)) !important; } .wl { min-width: 0; } .tq li { min-width: 0; }
/* 2.12: compact ID cards (Arrivals) */
.dc-sum { grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 400px)); }
.dslot { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; background: var(--surface); }
.dslot:has(.is-expired) { border-color: var(--red); }
.dslot .softbox { border: 0; padding: 0; background: none; gap: 8px; }
.dc-mini { padding: 10px 12px; gap: 8px; }
.dslot .dc-mini { padding: 0; border: 0; }
.dc-mini .dc-h b { font-size: 13.5px; }
.dc-mini .dc-src { background: rgba(217,119,6,.12); color: #b45309; padding: 1px 8px; border-radius: 999px; font-weight: 700; font-size: 11px; }
.dc-mini .dc-sides { grid-template-columns: repeat(2, minmax(0, 150px)); gap: 8px; }
.dc-mini .dc-prev { border-radius: 8px; }
.dc-mini .dc-ph svg { width: 18px; height: 18px; }
.dc-mini .dc-ph small { font-size: 11px; }
.dc-mini .dc-acts { gap: 4px; }
.dc-mini .dc-b { min-height: 32px; padding: 4px; font-size: 12px; border-radius: 8px; }
.dc-mini .dc-b span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.dc-mini .dc-exp span { font-size: 12px; }
.dc-mini .dc-exp input { min-height: 34px !important; font-size: 14px; padding: 5px 9px; }
.softfoot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.softna { font-size: 13px; }
.softna > summary { cursor: pointer; color: var(--ink-2); font-weight: 650; list-style: none; display: inline-flex; gap: 4px; }
.softna > summary::-webkit-details-marker { display: none; }
.softna > summary::before { content: "N/A ·"; color: var(--ink-3); font-weight: 700; }
.softna[open] > summary { color: var(--ink); }
.custstate { margin-top: 6px; font-size: 12.5px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-height: 20px; }
.cs-old { color: var(--green, #15803d); font-weight: 700; }
.cs-new { color: var(--ink-3); font-weight: 650; }
.cs-warn { color: #b45309; font-weight: 700; }
.linkbtn { border: 0; background: none; padding: 0; color: var(--blue, #2563eb); font: inherit; font-weight: 650; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.dc-mini .dc-b { position: relative; }
/* 2.12: technicians board — columns by department */
.tb-filter { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 16px 0; }
.tb-chip { border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 6px 14px; min-height: 36px; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background var(--d1), color var(--d1), border-color var(--d1); }
.tb-chip small { font-weight: 800; opacity: .6; margin-left: 2px; }
.tb-chip:hover { border-color: var(--ink-3); color: var(--ink); }
.tb-chip.on { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.tb-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; padding: 14px 16px 16px; align-items: start; }
.tb-col { min-width: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.tb-col.off { opacity: .62; }
.tb-col.busy { border-color: rgba(22,163,74,.45); }
.tb-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.tb-who { flex: 1; min-width: 0; }
.tb-who b { display: block; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-who small { display: block; font-size: 11.5px; color: var(--ink-3); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-st { flex: none; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.tb-st.free { background: rgba(22,163,74,.12); color: #15803d; }
.tb-st.run { background: #16a34a; color: #fff; }
.tb-st.off { background: var(--line); color: var(--ink-3); }
.tb-now { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 10px; background: rgba(22,163,74,.1); color: var(--ink); font-size: 12.5px; text-decoration: none; min-width: 0; }
.tb-now svg { width: 14px; height: 14px; color: #16a34a; flex: none; }
.tb-now span:first-of-type { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-qh { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 800; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; padding: 0 2px; }
.tb-qh b { color: var(--ink); }
.tb-col .tq { margin: 0; max-height: 340px; overflow-y: auto; overscroll-behavior: contain; }
.tb-col .tq li { padding: 6px; gap: 6px; }
.tq-t b { white-space: nowrap; }
.tb-empty { font-size: 12.5px; color: var(--ink-3); padding: 6px 2px; }
.tb-none { padding: 0 16px 16px; color: var(--ink-3); }
.tb-col[hidden] { display: none; }
/* 2.12: job overview for the floor manager / advisor */
.fmp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 12px; padding: 14px 16px 16px; }
.fmp-c { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--surface); min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.fmp-c h3 { margin: 0; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.fmp-c h3 svg { width: 15px; height: 15px; color: var(--red); }
.fmp-c p { margin: 0; }
.fmp-list { margin: 0; padding-left: 20px; font-weight: 600; }
.fmp-list li { padding: 2px 0; }
.fmp-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.fmp-tags span { background: var(--surface-2); border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 650; }
.fmp-note { background: var(--surface-2); border-radius: 10px; padding: 8px 10px; font-size: 14px; }
.fmp-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fmp-checks li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.fmp-checks small { display: block; color: var(--ink-3); font-size: 12.5px; }
.fmp-st { flex: none; min-width: 52px; text-align: center; font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: 999px; text-transform: uppercase; }
.fmp-st.g { background: rgba(22,163,74,.13); color: #15803d; } .fmp-st.y { background: rgba(217,119,6,.15); color: #b45309; }
.fmp-st.r { background: rgba(239,59,66,.14); color: var(--red); } .fmp-st.n, .fmp-st.o { background: var(--surface-2); color: var(--ink-3); }
.fmp-ph { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.fmp-ph img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; }
.fmp-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fmp-kpi div { background: var(--surface-2); border-radius: 10px; padding: 8px; text-align: center; }
.fmp-kpi b { display: block; font-size: 16px; }
.fmp-kpi small { font-size: 11px; color: var(--ink-3); font-weight: 650; }
.fmp-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.fmp-hist small { display: block; color: var(--ink-2); }
.fmp-c .voicebox { margin: 0; }
.fmchecks { border-color: rgba(239,59,66,.35); }
.tq-t .mono { white-space: nowrap; }
/* 2.12: clearer spacing between form rows (a label belongs to the field under it) */
form.stack, .card-b.stack { gap: 16px; }
.grid { row-gap: 16px; }
/* 2.12.1: the card box is the button (tap = camera or file, drop a file) */
.dc-prev { position: relative; }
.dc-view { width: 100%; height: 100%; display: grid; place-items: center; }
.dc-view > a, .dc-view > img { width: 100%; height: 100%; }
.dc-pick { position: absolute; inset: 0; cursor: pointer; border-radius: inherit; display: block; }
.dc-in { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.dc-pick:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }
.dc-chg { display: none; }
.dc-side:not(.has) .dc-prev:hover { border-color: var(--red); background: rgba(239,59,66,.04); }
.dc-side:not(.has) .dc-prev:hover .dc-ph { color: var(--red); }
.dc-side.has .dc-pick { inset: auto 5px 5px auto; }
.dc-side.has .dc-chg { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: rgba(15,18,24,.72); color: #fff; font-size: 11px; backdrop-filter: blur(4px); }
.dc-side.has .dc-chg svg { width: 12px; height: 12px; }
.dc-side.dc-drop .dc-prev { border-color: var(--red); border-style: solid; box-shadow: 0 0 0 3px rgba(239,59,66,.15); }
.dc-ph svg { width: 20px; height: 20px; }
.dc-acts, .dc-b { display: none !important; }
/* smaller cards */
.dc-sides { gap: 8px; }
.dcard { padding: 10px 12px; gap: 8px; }
.dc-mini .dc-sides { grid-template-columns: repeat(2, minmax(0, 132px)); }
.dc-sum { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 330px)); gap: 10px; }
.dslot { padding: 10px 12px; gap: 4px; }
.softna { font-size: 12.5px; }
/* 2.12.1: inspection laid out as the technician's report */
.irep .card-h h2 { display: flex; align-items: center; gap: 10px; }
.irep-n { width: 26px; height: 26px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 800; flex: none; }
.irep-box { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.irep-lab { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin-bottom: 6px; }
.irep-words { margin: 0; padding-left: 20px; font-size: 15.5px; font-weight: 650; }
.irep-words li { padding: 2px 0; }
.irep-box .voicebox { border: 0; padding: 0; margin: 0; background: none; }
.irep .fmchecks { border-top: 1px solid var(--line); }
.irep .fmchecks .card-h { border-bottom: 0; }
.voicebox.vk-tc, .voicebox.vk-tx { border-style: solid; }
.voicebox.vk-tc .vhead svg, .voicebox.vk-tx .vhead svg { color: var(--red); }
.nextbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 16px; border: 1px solid rgba(239,59,66,.3); border-radius: 14px; background: rgba(239,59,66,.05); }
.nextstep { min-height: 44px; }
/* 2.12.1: step tiles open their step */
a.fstep { color: inherit; text-decoration: none; }
.fstep.fs-link { cursor: pointer; transition: border-color var(--d1), box-shadow var(--d1), transform var(--d1); }
.fstep.fs-link:hover { border-color: var(--ink-3); box-shadow: 0 2px 10px rgba(15,18,24,.08); }
.fstep.fs-link:active { transform: scale(.98); }
.fstep.fs-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
[data-stepinfo] { cursor: help; }
.fstep.f-reedit { border-color: var(--blue, #2563eb); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.reeditbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px; background: rgba(37,99,235,.07); border-bottom: 1px solid rgba(37,99,235,.2); font-size: 14px; border-radius: var(--r) var(--r) 0 0; }
.reeditbar svg { width: 16px; height: 16px; color: var(--blue, #2563eb); }
.reeditbar span { flex: 1; min-width: 200px; }
.irep-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; margin-top: 16px; align-items: start; }
.irep-grid .irep { margin: 0; }
/* 2.12.1: long option texts never make a form wider than the phone */
.card, .card > form, .card-b, .stack > *, .grid > *, .fset > * { min-width: 0; }
select, input, textarea { max-width: 100%; }
.topright .pill { white-space: nowrap; }
@media (max-width: 420px) { .top .backlink, .top a.btn.back { max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }

/* ===================== 2.13 ===================== */
/* labelled timer buttons on the job card (Start · Pause · Resume · Finish) */
.tbtn.tlab { width: auto; min-width: 0; padding: 0 11px 0 9px; display: inline-flex; align-items: center; gap: 5px; font: 700 12.5px var(--font); height: 32px; white-space: nowrap; }
.tbtn.tlab .ic { width: 14px; height: 14px; }
.tbtn.fin { background: var(--ink); border-color: var(--ink); color: #fff; }
.tbtn.fin:hover { background: #2b2f38; border-color: #2b2f38; }
.tbtn.hold:hover { background: var(--amber); filter: brightness(1.05); }
.tline .tbtns, .tline .pausebox { vertical-align: middle; }

/* workshop TV board: compact cards with their own class (.dsc) */
.dstats { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.dcols { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.dcol { padding: 10px; }
.dcol.d-insp header { border-color: #c9a7ff; }
.dscs { display: flex; flex-direction: column; gap: 10px; }
.dsc { background: #1f2228; border: 1px solid #2c3038; border-radius: 14px; padding: 12px; color: #fff; }
.dsc.late { border-color: #ff5d5d; box-shadow: 0 0 0 2px rgba(255,93,93,.25); }
.dsc .dveh { margin-top: 8px; font-size: 15.5px; color: #e7e9ee; }
.dtags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dtags:empty { display: none; }
.dtags .dtype { margin-top: 0; }
.dstep { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 12.5px; font-weight: 700; color: #8cc2ff; background: rgba(90,167,255,.12); }
.dwho { margin-top: 10px; }
.dsc .dprog { margin: 10px 0 6px; height: 5px; }
.dsc .dlines { gap: 3px; }
.dsc .dlines li { display: block; font-weight: 600; font-size: 14px; color: #d6d9df; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsc .dlines li.ok { color: #3ddc97; }
.dsc .dlines li.dmore { color: #8b919b; font-weight: 600; font-size: 13px; }
.dinsp { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; }
.dinsp span { color: #9aa0aa; font-weight: 500; }
.dinsp .dt { align-items: center; }
.dsc .dfoot { margin-top: 10px; padding-top: 7px; font-size: 13px; }
@media (max-width: 1500px) { .dcols { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dstats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { .dcols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .dcols, .dstats { grid-template-columns: minmax(0, 1fr); } }

/* workshop tablet: inspections first, then one card per car with its work lines */
.khead { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.kmeta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; color: #9aa0aa; }
.kpill { border-radius: 999px; padding: 3px 10px; font: 700 12px var(--font); background: #2a2d34; color: #c9cdd4; }
.kpill.on { background: rgba(90,167,255,.18); color: #8cc2ff; }
.kinsp { border-color: #4b3f66; }
.kinsp.running { border-color: #c9a7ff; box-shadow: 0 0 0 4px rgba(201,167,255,.14); }
.kinsp .kwhat { font-size: 20px; }
.kcar .kveh { margin-top: 4px; }
.klines { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.kline { display: flex; flex-direction: column; gap: 8px; background: #181a1f; border: 1px solid #2c3038; border-radius: 12px; padding: 10px 12px; }
.kline.running { border-color: #5aa7ff; }
.kline.paused { border-color: #f5b942; }
.kl-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.kl-t b { font: 700 17px var(--font-c); letter-spacing: .3px; flex: 1 1 auto; min-width: 0; }
.kl-c { font: 800 22px var(--font-c); letter-spacing: .5px; color: #c9cdd4; }
.kline.running .kl-c { color: #5aa7ff; }
.kl-b { display: flex; gap: 8px; flex-wrap: wrap; }
.kl-b .kbtns { flex: 1 1 auto; margin: 0; flex-wrap: nowrap; gap: 8px; }
.kl-b .kb { min-height: 48px; font-size: 17px; border-radius: 11px; }
.kl-b .pb-kb { width: auto; flex: 1 1 0; }
.kl-b .pb-kb > summary { min-height: 48px; font-size: 17px; border-radius: 11px; }
.kl-b .pausebox .reasons { position: absolute; z-index: 40; top: 54px; left: 0; min-width: 240px; }

/* Documents page */
.docfilt { display: flex; gap: 10px; flex-wrap: wrap; }
.docfilt .f { min-width: 200px; }
.docgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.doct { overflow: hidden; display: flex; flex-direction: column; }
.doct.is-exp { border-color: var(--red); box-shadow: 0 0 0 3px rgba(239,59,66,.10); }
.doct-ims { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 2px; background: var(--surface-2); }
.doct-im { position: relative; display: block; aspect-ratio: 1.58; overflow: hidden; background: #e9ecf1; }
.doct-im img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--d2, .2s); }
.doct-im:hover img { transform: scale(1.04); }
.doct-im.pdf { display: grid; place-items: center; color: var(--ink-2); font-weight: 700; }
.doct-im.pdf span { display: inline-flex; align-items: center; gap: 6px; }
.doct-im i { position: absolute; left: 6px; bottom: 6px; font: 700 11px var(--font); font-style: normal; background: rgba(15,16,19,.72); color: #fff; padding: 2px 7px; border-radius: 999px; }
.doct-b { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 3px; }
.doct-t { font-size: 14.5px; }
.doct-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; }
@media (max-width: 640px) { .docfilt, .docfilt .f { width: 100%; min-width: 0; } .docgrid { grid-template-columns: 1fr; } }
.dsc .dno { white-space: nowrap; }
/* forms whose fields sit in a <fieldset class="fset"> get the same row spacing as .stack */
.stack > .fset > :not([type=hidden]):not(script):not(:empty) ~ :not([type=hidden]):not(script) { margin-top: 16px; }
#custform .custstate { margin-top: 6px; }
/* 2.13: the technician row wraps its labelled buttons instead of running off the table; the pause reasons open inline (never clipped) */
.tline { flex-wrap: wrap; row-gap: 6px; }
.tline .pb-tbtn { margin-left: auto; }
.tline .pb-tbtn + .tbtns { margin-left: 0; }
.tline .pb-tbtn[open] { flex-basis: 100%; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.tline .pb-tbtn[open] .reasons { position: static; width: 100%; max-width: 320px; box-shadow: var(--shadow); }
.tbl td:has(> .tline), .tbl td:has(.tline) { min-width: 250px; }

/* =====================================================================
   2.14 — "Widgets": an Apple-system look for the whole ERP.
   System font, grouped grey background, borderless rounded cards with soft depth,
   filled inputs, pill segmented controls, quiet tables, frosted bars,
   spring motion everywhere (none when the device asks for reduced motion).
   ===================================================================== */
:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-d: -apple-system-headline, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI Variable Display", "Segoe UI", Roboto, sans-serif;
  --font-r: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  --ink: #1c1c1e; --ink-2: #3a3a3c; --ink-3: #8a8a8e;
  --bg: #f2f2f7; --surface: #ffffff; --surface-2: #f5f5f8; --fill: rgba(118,118,128,.12); --fill-2: rgba(118,118,128,.08);
  --line: rgba(60,60,67,.12); --line-2: rgba(60,60,67,.2);
  --blue: #007aff; --blue-soft: rgba(0,122,255,.1); --green: #248a3d; --green-soft: rgba(52,199,89,.14);
  --amber: #c26a00; --amber-soft: rgba(255,149,0,.14); --violet: #5e5ce6; --violet-soft: rgba(94,92,230,.12);
  --t-gray: #8e8e93; --t-blue: #0a84ff; --t-green: #30b955; --t-orange: #ff9500; --t-red: #ff3b30; --t-indigo: #5e5ce6; --t-teal: #30b0c7; --t-pink: #ff2d55;
  --r-sm: 10px; --r: 12px; --r-lg: 20px; --r-xl: 26px;
  --shadow: 0 0 0 .5px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.04), 0 6px 20px -8px rgba(0,0,0,.10);
  --shadow-hover: 0 0 0 .5px rgba(0,0,0,.05), 0 4px 8px rgba(0,0,0,.05), 0 18px 40px -14px rgba(0,0,0,.22);
  --shadow-lg: 0 24px 60px -18px rgba(0,0,0,.32), 0 0 0 .5px rgba(0,0,0,.06);
  --ring: 0 0 0 4px rgba(0,122,255,.25);
  --spring: cubic-bezier(.32,1.36,.46,1); --ease-out: cubic-bezier(.22,1,.36,1); --ease: cubic-bezier(.22,1,.36,1);
  --d1: .14s; --d2: .24s; --d3: .42s;
}
:root[data-theme="dark"] {
  --ink: #f5f5f7; --ink-2: #d1d1d6; --ink-3: #8e8e93;
  --bg: #000000; --surface: #1c1c1e; --surface-2: #2c2c2e; --fill: rgba(118,118,128,.24); --fill-2: rgba(118,118,128,.16);
  --line: rgba(84,84,88,.45); --line-2: rgba(84,84,88,.7);
  --blue: #0a84ff; --blue-soft: rgba(10,132,255,.2); --green: #30d158; --green-soft: rgba(48,209,88,.18); --amber: #ffb340; --amber-soft: rgba(255,159,10,.2); --violet: #7d7aff; --violet-soft: rgba(94,92,230,.24);
  --shadow: 0 0 0 .5px rgba(255,255,255,.06), 0 8px 24px -10px rgba(0,0,0,.6);
  --shadow-hover: 0 0 0 .5px rgba(255,255,255,.1), 0 18px 40px -14px rgba(0,0,0,.8);
  --ring: 0 0 0 4px rgba(10,132,255,.4);
}
body { font-family: var(--font); font-size: 15px; letter-spacing: -.003em; background: var(--bg); }
h1, h2, h3, .top h1 { font-family: var(--font-d); letter-spacing: -.02em; }

/* ---- shell: frosted top bar, dark vibrant sidebar with rounded pills ---- */
.top { background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: saturate(1.8) blur(20px); -webkit-backdrop-filter: saturate(1.8) blur(20px); border-bottom: .5px solid var(--line); }
.top h1 { font-size: 22px; font-weight: 700; }
.side { background: rgba(22,22,24,.96); backdrop-filter: saturate(1.6) blur(24px); -webkit-backdrop-filter: saturate(1.6) blur(24px); border-right: .5px solid rgba(255,255,255,.06); }
.side nav a, .navgrp > summary { border-radius: 10px; color: #c7c7cc; font-weight: 500; }
.side nav a .ic, .navgrp > summary .ic { color: #98989d; }
.side nav a:hover, .navgrp > summary:hover { background: rgba(255,255,255,.07); }
.side nav a.on { background: rgba(255,59,48,.18); color: #fff; font-weight: 600; box-shadow: none; }
.side nav a.on::before { display: none; }
.side nav a.on .ic, .navgrp > summary.has-on .ic { color: #ff6961; }
.navsub { border-left-color: rgba(255,255,255,.07); }
.side nav .count, .navgrp > summary .count { background: #ff3b30; box-shadow: none; font-family: var(--font-r); font-weight: 700; }
.content { padding: 24px 28px 72px; }

/* ---- cards: borderless widgets ---- */
.card { border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow); background: var(--surface); }
.card-h { border-bottom: .5px solid var(--line); padding: 16px 20px; }
.card-h h2 { font-size: 17px; font-weight: 650; }
.card-h h2 .ic { color: var(--ink-3); }
a.card:hover, a.kpi:hover, a.stile:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.kpi, .stile { border: 0; border-radius: var(--r-lg); }
.kpi .val, .stile b { font-family: var(--font-r); font-weight: 700; letter-spacing: -.02em; }
.note { border-radius: 14px; border: 0; background: var(--fill-2); }
hr.sep { border: 0; border-top: .5px solid var(--line); }

/* ---- controls ---- */
.btn { border-radius: 12px; border: 0; background: var(--fill); color: var(--ink); font-weight: 600; min-height: 40px; padding: 8px 16px;
  transition: transform var(--d1) var(--spring), background var(--d1), box-shadow var(--d1), filter var(--d1); }
.btn:hover { background: color-mix(in srgb, var(--fill) 100%, rgba(118,118,128,.1)); filter: brightness(.98); }
.btn:active { transform: scale(.96); }
.btn-red { background: linear-gradient(180deg, #ff3b45 0%, var(--red) 100%); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 6px 16px -6px rgba(220,28,36,.55); }
.btn-red:hover { background: linear-gradient(180deg, #f2333d 0%, #c8161e 100%); }
.btn-ghost { background: transparent; } .btn-ghost:hover { background: var(--fill-2); }
.btn-glass { background: rgba(255,255,255,.7); backdrop-filter: blur(12px); }
:root[data-theme="dark"] .btn-glass { background: rgba(255,255,255,.1); color: #fff; }
.btn-sm { border-radius: 10px; min-height: 32px; padding: 5px 12px; }
.btn-lg { border-radius: 14px; }
input[type=text], input[type=password], input[type=email], input[type=number], input[type=date], input[type=datetime-local], input[type=time], input[type=search], input[type=tel], select, textarea {
  border-radius: 12px; border: 1px solid transparent; background-color: var(--fill-2); min-height: 44px;
  transition: background-color var(--d1), box-shadow var(--d2), border-color var(--d1); }
input:hover:not(:focus):not([readonly]), select:hover:not(:focus), textarea:hover:not(:focus) { background-color: var(--fill); border-color: transparent; }
input:focus, select:focus, textarea:focus { background-color: var(--surface); border-color: var(--blue); box-shadow: var(--ring); outline: none; }
input[readonly] { background-color: var(--fill-2); color: var(--ink-3); }
.f > span, label.f > span { font-weight: 600; color: var(--ink-2); font-size: 13px; letter-spacing: -.005em; }
.seg { background: var(--fill); border-radius: 10px; padding: 2px; border: 0; }
.seg button { border-radius: 8px; border: 0; transition: background var(--d2) var(--ease), box-shadow var(--d2); }
.seg button.on, .seg button[aria-pressed=true] { background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04); }
.chip { border: 0; background: var(--fill-2); transition: background var(--d1), transform var(--d1) var(--spring); }
.chip:hover { background: var(--fill); }
.chip:active { transform: scale(.95); }
.chip.on { background: var(--ink); color: var(--surface); }
.badge { border: 0; background: var(--fill); font-weight: 600; }
.tabs { border-bottom: .5px solid var(--line); }
.tabs .on { border-bottom-color: var(--red); }

/* ---- tables: quiet, hairlines ---- */
.tbl th { background: transparent; color: var(--ink-3); font-size: 11.5px; letter-spacing: .04em; border-bottom: .5px solid var(--line); }
.tbl td { border-bottom: .5px solid var(--line); }
.tbl tbody tr { transition: background var(--d1); }
.tbl tbody tr:hover td { background: var(--fill-2); }
.tbl tfoot td { background: var(--fill-2); }

/* ---- step tiles ---- */
.fstep { border-radius: 14px !important; transition: transform var(--d2) var(--spring), box-shadow var(--d2); }
a.fstep:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }

/* ---- the widget grid (dashboard, suppliers…) ---- */
.wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); grid-auto-flow: row dense; gap: 16px; }
.widget { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow); padding: 16px 18px; min-height: 150px; display: flex; flex-direction: column; gap: 4px;
  color: var(--ink); text-decoration: none !important; position: relative; overflow: hidden; isolation: isolate;
  transition: transform var(--d2) var(--spring), box-shadow var(--d2) var(--ease); }
a.widget:hover { transform: translateY(-3px) scale(1.01); box-shadow: var(--shadow-hover); }
a.widget:active { transform: scale(.97); }
.w-s { grid-column: span 1; }
.w-m { grid-column: span 2; }
.w-l { grid-column: span 2; grid-row: span 2; }
.w-lbl { display: flex; align-items: center; gap: 8px; font: 600 13.5px var(--font); color: var(--ink-2); letter-spacing: -.005em; }
.w-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: var(--tone, var(--t-blue)); flex: none; }
.w-ic .ic { width: 15px; height: 15px; }
.w-val { font: 700 40px/1.05 var(--font-r); letter-spacing: -.035em; margin-top: auto; color: var(--tone, var(--ink)); font-variant-numeric: tabular-nums; }
.w-val small { font-size: 15px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; margin: 0 2px; }
.w-val-s { font-size: 24px; }
.w-sub { font-size: 13px; color: var(--ink-3); font-weight: 500; }
.w-count { margin-left: auto; font: 700 12px var(--font-r); background: var(--fill); color: var(--ink-2); padding: 2px 8px; border-radius: 999px; }
.w-more { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--blue); }
.w-count + .w-more { margin-left: 8px; }
.tone-gray { --tone: var(--t-gray); } .tone-blue { --tone: var(--t-blue); } .tone-green { --tone: var(--t-green); } .tone-orange { --tone: var(--t-orange); }
.tone-red { --tone: var(--t-red); } .tone-indigo { --tone: var(--t-indigo); } .tone-teal { --tone: var(--t-teal); } .tone-pink { --tone: var(--t-pink); }
.w-ic.tone-blue, .w-ic.tone-red, .w-ic.tone-orange, .w-ic.tone-indigo { background: var(--tone); }
.w-num .w-val { color: var(--ink); }
.w-num.w-alert { background: linear-gradient(155deg, #ff6259 0%, #ff3b30 60%, #e0261c 100%); color: #fff; }
.w-num.w-alert .w-lbl, .w-num.w-alert .w-sub, .w-num.w-alert .w-val { color: #fff; } .w-num.w-alert .w-ic { background: rgba(255,255,255,.22); }
.widget.w-alert:not(.w-num) .w-val { color: var(--red); }
.w-hello { background: linear-gradient(140deg, #1c1c1e 0%, #2c2c2e 55%, #3a1215 130%); color: #fff; }
.w-hello .w-lbl { color: rgba(255,255,255,.7); } .w-hello .w-sub { color: rgba(255,255,255,.65); }
.w-hello .livedot { color: #30d158; }
.w-hi { font: 700 28px/1.15 var(--font-d); letter-spacing: -.03em; margin-top: 6px; }
.w-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 12px; flex-wrap: wrap; }
.w-hello .btn-glass { background: rgba(255,255,255,.14); color: #fff; }
.w-money { background: linear-gradient(150deg, #34c759 0%, #248a3d 100%); color: #fff; }
.w-money .w-lbl, .w-money .w-sub, .w-money .w-val, .w-money .w-val small { color: #fff; } .w-money .w-sub { opacity: .8; } .w-money .w-ic { background: rgba(255,255,255,.22); }
.w-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: auto; }
.w-split .w-val { font-size: 30px; }
.w-foot { font-size: 13px; padding-top: 10px; margin-top: 8px; border-top: .5px solid rgba(255,255,255,.3); }
.w-alerts { background: linear-gradient(160deg, #fff4e5 0%, #ffe9e7 100%); }
:root[data-theme="dark"] .w-alerts { background: linear-gradient(160deg, #3a2a10 0%, #3a1614 100%); }
.w-alerts .w-ic { background: var(--t-orange); }
.w-list { display: flex; flex-direction: column; margin-top: 8px; min-height: 0; overflow: hidden; }
.w-list > a { display: flex; align-items: center; gap: 10px; padding: 8px 0; color: var(--ink); text-decoration: none; border-top: .5px solid var(--line); font-size: 14px; min-width: 0; transition: opacity var(--d1); }
.w-list > a:first-child { border-top: 0; }
.w-list > a:hover { opacity: .75; }
.w-list > a > .ic { color: var(--ink-3); flex: none; }
.w-list > a > span:not(.plate) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-list > a > .plate { flex: none; }
.w-list > a > span small { display: block; color: var(--ink-3); font-size: 12px; }
.w-list > a > em { font-style: normal; font: 600 13px var(--font-r); color: var(--ink-3); flex: none; }
.w-tag { font-style: normal; font: 600 11.5px var(--font); padding: 3px 8px; border-radius: 999px; flex: none; white-space: nowrap; }
.w-tag.g { background: var(--green-soft); color: var(--green); } .w-tag.r { background: rgba(255,59,48,.12); color: #d70015; }
:root[data-theme="dark"] .w-tag.r { color: #ff6961; }
.w-empty { margin: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--ink-3); font-size: 13px; padding: 16px 0; }
.w-empty .ic { width: 28px; height: 28px; color: var(--t-green); } .w-empty b { color: var(--ink); font-size: 15px; }
.w-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: auto; }
.w-trio a { background: var(--fill-2); border-radius: 14px; padding: 10px 12px; color: var(--ink); text-decoration: none; transition: transform var(--d1) var(--spring); }
.w-trio a:active { transform: scale(.95); }
.w-trio b { display: block; font: 700 26px/1.1 var(--font-r); } .w-trio b.red { color: var(--t-red); } .w-trio span { font-size: 12px; color: var(--ink-3); }
.w-line { font-size: 13px; color: var(--green); display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.widget.w-action { justify-content: center; align-items: flex-start; background: var(--fill-2); box-shadow: none; border: 1.5px dashed var(--line-2); }
@media (max-width: 760px) {
  .wgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .widget { border-radius: 22px; padding: 14px; min-height: 132px; }
  .w-val { font-size: 34px; }
  .w-l { grid-row: auto; }
}
@media (max-width: 380px) { .w-m, .w-l { grid-column: span 2; } }

/* ---- supplier & document headers ---- */
.shead-t { font-size: 22px; } .shead .ic { width: 15px; height: 15px; vertical-align: -2px; }
.tbl tr.is-off td { opacity: .55; }
.rhtbl td, .rhtbl th { padding: 7px 8px; } .rhtbl th { font-size: 10.5px; }
.trend .tr-h b { font: 700 15px var(--font-r); } .tr-arrow { font-size: 10px; } .tr-arrow.d1 { color: var(--t-green); } .tr-arrow.d-1 { color: var(--t-red); } .tr-arrow.d0 { color: var(--ink-3); }
.tr-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; } .tr-list a { font: 600 11.5px var(--font-r); background: var(--fill-2); color: var(--ink-2); border-radius: 6px; padding: 1px 6px; text-decoration: none; }
.tr-list a i { font-style: normal; color: var(--ink-3); font-weight: 500; }
.prrt td.trend { min-width: 170px; }

/* ---- sheets (dialogs): slide up on phones, spring in on computers ---- */
dialog.sheet, .ppdlg { border: 0; border-radius: 22px; padding: 22px; width: min(560px, calc(100vw - 24px)); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); }
dialog.sheet::backdrop, .ppdlg::backdrop { background: rgba(0,0,0,.32); backdrop-filter: blur(3px); }
dialog.sheet[open], .ppdlg[open] { animation: azSheet var(--d3) var(--spring); }
@keyframes azSheet { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  dialog.sheet, .ppdlg { margin: auto 0 0; width: 100vw; max-width: 100vw; border-radius: 24px 24px 0 0; padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); }
  dialog.sheet[open], .ppdlg[open] { animation: azSheetUp var(--d3) var(--ease-out); }
  @keyframes azSheetUp { from { transform: translateY(100%); } to { transform: none; } }
}
.pk-sheet { border-radius: 20px; }

/* ---- motion: pages, lists, widgets, numbers ---- */
@keyframes azRise { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.wgrid > * { animation: azRise .5s var(--spring) backwards; }
.wgrid > *:nth-child(2) { animation-delay: 30ms; } .wgrid > *:nth-child(3) { animation-delay: 60ms; } .wgrid > *:nth-child(4) { animation-delay: 90ms; }
.wgrid > *:nth-child(5) { animation-delay: 120ms; } .wgrid > *:nth-child(6) { animation-delay: 150ms; } .wgrid > *:nth-child(7) { animation-delay: 180ms; }
.wgrid > *:nth-child(8) { animation-delay: 210ms; } .wgrid > *:nth-child(9) { animation-delay: 240ms; } .wgrid > *:nth-child(n+10) { animation-delay: 270ms; }
.tbl tbody tr { animation: azRowIn .36s var(--ease-out) backwards; }
.tbl tbody tr:nth-child(2) { animation-delay: 15ms; } .tbl tbody tr:nth-child(3) { animation-delay: 30ms; } .tbl tbody tr:nth-child(4) { animation-delay: 45ms; }
.tbl tbody tr:nth-child(5) { animation-delay: 60ms; } .tbl tbody tr:nth-child(6) { animation-delay: 75ms; } .tbl tbody tr:nth-child(7) { animation-delay: 90ms; } .tbl tbody tr:nth-child(n+8) { animation-delay: 105ms; }
@keyframes azRowIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
[data-live].is-live-swap .wgrid > *, [data-live].is-live-swap .tbl tbody tr { animation: none; }
.card, .widget { will-change: auto; }
.docgrid > * { animation: azRise .45s var(--spring) backwards; }

/* ---- Dynamic Island ---- */
.island { position: fixed; z-index: 200; left: 50%; top: calc(10px + env(safe-area-inset-top)); transform: translateX(-50%) scale(.6); opacity: 0; pointer-events: none;
  width: 126px; height: 37px; border-radius: 22px; background: #000; color: #fff; overflow: hidden;
  box-shadow: 0 10px 40px -10px rgba(0,0,0,.55), 0 0 0 .5px rgba(255,255,255,.08);
  transition: width .5s var(--spring), height .5s var(--spring), border-radius .5s var(--spring), transform .45s var(--spring), opacity .2s; }
.island.is-pill { opacity: 1; transform: translateX(-50%) scale(1); pointer-events: auto; }
.island.is-open { width: min(400px, calc(100vw - 20px)); height: 64px; border-radius: 32px; }
.island.is-open.is-rich { height: 84px; border-radius: 34px; }
.island.is-open.is-alert.is-rich { width: min(440px, calc(100vw - 20px)); height: 96px; border-radius: 36px; }
.island.is-out { opacity: 0; transform: translateX(-50%) scale(.7); transition: width .3s var(--ease-out), height .3s var(--ease-out), transform .32s var(--ease-out), opacity .28s; }
.island.is-link { cursor: pointer; }
.is-in { position: absolute; inset: 0; display: flex; align-items: center; gap: 12px; padding: 0 12px 0 14px; opacity: 0; transition: opacity .18s; }
.island.is-open .is-in { opacity: 1; transition: opacity .25s .12s; }
.is-ic { width: 38px; height: 38px; border-radius: 50%; background: var(--tone, #0a84ff); display: grid; place-items: center; flex: none; color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--tone, #0a84ff) 25%, transparent); }
.island.is-open .is-ic { animation: isPop .5s var(--spring) .1s both; }
@keyframes isPop { from { transform: scale(.3); } to { transform: none; } }
.is-ic svg, .is-ic .ic { width: 20px; height: 20px; }
.island:not(.is-rich) .is-ic { width: 30px; height: 30px; box-shadow: none; } .island:not(.is-rich) .is-ic svg { width: 17px; height: 17px; }
.is-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.is-k { font: 600 11.5px var(--font); color: var(--tone, #0a84ff); filter: brightness(1.25); text-transform: uppercase; letter-spacing: .04em; }
.is-t { font: 600 14.5px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.is-b { font-size: 13px; color: rgba(235,235,245,.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.island.is-alert .is-t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.is-act { display: flex; gap: 6px; flex: none; }
.is-btn { border: 0; border-radius: 999px; background: var(--tone, #0a84ff); color: #fff; font: 700 13px var(--font); padding: 7px 13px; cursor: pointer; transition: transform .15s var(--spring); }
.is-btn + .is-btn { background: rgba(255,255,255,.14); }
.is-btn:active { transform: scale(.92); }
.is-x { border: 0; background: rgba(255,255,255,.12); color: rgba(255,255,255,.8); width: 26px; height: 26px; border-radius: 50%; font-size: 17px; line-height: 1; cursor: pointer; flex: none; display: grid; place-items: center; }
.island:not(.is-alert) .is-x { display: none; }
.is-q { position: absolute; top: 6px; right: 46px; font: 700 10.5px var(--font-r); font-style: normal; background: rgba(255,255,255,.18); padding: 1px 6px; border-radius: 999px; }
.island:not(.is-open) .is-q { display: none; }
.is-bar { position: absolute; left: 22px; right: 22px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--tone, #0a84ff); opacity: .55; transform-origin: left; transform: scaleX(0); }
.island.is-open.is-alert .is-bar { animation: isBar var(--life, 8s) linear forwards; }
.island.is-hold .is-bar { animation-play-state: paused; }
@keyframes isBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.toasts { display: none !important; }
@media (max-width: 640px) { .island.is-open.is-alert.is-rich { height: 104px; } .is-act .is-btn + .is-btn { display: none; } }

/* bell rings when an alert lands; the new row in the list glows */
#notif summary.ring .ic { animation: bellRing .9s var(--ease-out); transform-origin: 50% 10%; }
@keyframes bellRing { 0% { transform: rotate(0); } 15% { transform: rotate(16deg); } 30% { transform: rotate(-14deg); } 45% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } 100% { transform: rotate(0); } }
.nmenu { border-radius: 20px; }
.nitem { display: flex !important; gap: 10px; align-items: flex-start; border-radius: 14px; }
.nitem .nic { width: 30px; height: 30px; border-radius: 50%; background: var(--nc, #0a84ff); color: #fff; display: grid; place-items: center; flex: none; margin-top: 2px; }
.nitem .nic .ic { width: 16px; height: 16px; }
.nitem .ntx { display: flex; flex-direction: column; min-width: 0; }
.nitem .nk { font: 600 11px var(--font); text-transform: uppercase; letter-spacing: .04em; color: var(--nc, var(--ink-3)); }
.nitem.unread .nk::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); margin-right: 6px; vertical-align: 1px; }
.nitem.is-new { animation: nNew 1.6s var(--ease-out); }
@keyframes nNew { 0% { background: color-mix(in srgb, var(--nc, #0a84ff) 22%, transparent); } 100% { background: transparent; } }
.npush { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin: 4px 4px 8px; padding: 10px 12px; border-radius: 14px; background: var(--blue-soft); }
.npush > span { display: flex; flex-direction: column; font-size: 13px; } .npush > span .ic { color: var(--blue); } .npush small { color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  .wgrid > *, .tbl tbody tr, .docgrid > *, dialog.sheet[open], .ppdlg[open], .nitem.is-new, .island.is-open .is-ic { animation: none !important; }
  .island, .island * { transition: none !important; }
  a.widget:hover { transform: none; }
}
.tbl input, .tbl select { min-height: 36px; border-radius: 10px; }
@media (max-width: 760px) { .btn { min-height: 44px; } .btn-sm { min-height: 36px; } }
.w-ic.ic-cash { background: var(--t-green); } .w-ic.ic-layers, .w-ic.ic-box { background: var(--t-orange); } .w-ic.ic-calendar { background: var(--t-red); } .w-ic.ic-truck { background: var(--t-indigo); } .w-ic.ic-plus { background: var(--t-gray); }
.w-val-m { font-size: 30px; }
.widget.w-alert:not(.w-num) .w-ic { background: var(--t-red); }
.island.is-open.is-long { height: 78px; border-radius: 34px; }
.island.is-open.is-xlong { height: 100px; border-radius: 36px; }
.island.is-long .is-t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; }
.island.is-xlong .is-t { -webkit-line-clamp: 3; }
.trend [data-useprice] { font-size: 12.5px; font-weight: 600; text-decoration: none; padding: 0; margin-top: 4px; }
.actionbar { background: color-mix(in srgb, var(--bg) 76%, transparent) !important; backdrop-filter: saturate(1.8) blur(20px); -webkit-backdrop-filter: saturate(1.8) blur(20px); border-top: .5px solid var(--line) !important; box-shadow: none !important; }
.tabbar { background: color-mix(in srgb, var(--surface) 80%, transparent) !important; backdrop-filter: saturate(1.8) blur(20px); -webkit-backdrop-filter: saturate(1.8) blur(20px); border-top: .5px solid var(--line) !important; }
/* 2.15: technician departments on the user form */
.deptman { margin-top: 8px; } .deptman > summary { cursor: pointer; color: var(--blue); font-weight: 600; list-style: none; } .deptman > summary::-webkit-details-marker { display: none; }
.deptlist { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 6px; }
.chipx { border: 0; background: none; color: var(--ink-3); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 0 0 4px; } .chipx:hover { color: var(--red); }
/* 2.15: accounting */
.gltabs { margin-bottom: 18px; }
.tbl tr.grp td { background: var(--fill-2); }
.pl .tbl tr.sum td { border-top: .5px solid var(--line-2); }
.pl .tbl tr.big td { background: var(--fill-2); font-size: 15.5px; }
.coat td .tbtn { width: 30px; height: 30px; }
.jlines select, .jlines input { width: 100%; }

/* ===================== 2.16: full width at any zoom =====================
   Pages use the whole screen width (no empty band on the right when the browser is zoomed out or the screen is wide). */
.content { max-width: none !important; width: 100%; }
.main, .app > main, .app > .main { min-width: 0; flex: 1 1 auto; }
/* Receive a car: form and today's cars side by side on wide screens; plate/VIN beside odometer */
.rcv-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.rcv-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 1200px) {
  .rcv-wrap { grid-template-columns: minmax(0, 1fr) minmax(380px, 470px); }
  .rcv-today { position: sticky; top: 84px; }
  .rcv-top { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
}
@media (min-width: 1900px) { .rcv-wrap { grid-template-columns: minmax(0, 1fr) minmax(440px, 560px); } }
.rcv-top > .card { margin: 0; }
/* very wide screens: more widgets and cards per row instead of stretched ones */
@media (min-width: 2200px) { .wgrid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .docgrid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } }
.rcv-today .badge { white-space: nowrap; } .rcv-today .tbl td, .rcv-today .tbl th { padding-left: 10px; padding-right: 10px; }

/* ===== 2.17: automatic part sourcing — ask suppliers, price chips, waiting for part ===== */
.sbadge.s-buy { background: color-mix(in srgb, #0a84ff 14%, transparent); color: #0a5cc2; } :root[data-theme="dark"] .sbadge.s-buy { color: #64b5ff; }
.sbadge.s-none { background: var(--bg-2, #eef0f3); color: var(--muted, #6b7280); }
.stockwarn.src-info { background: color-mix(in srgb, #0a84ff 10%, transparent); color: #0a5cc2; } .stockwarn.src-info.ok { background: var(--green-soft); color: var(--green); }
:root[data-theme="dark"] .stockwarn.src-info { color: #8cc8ff; }
.src-box { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; background: var(--card, #fff); display: grid; gap: 10px; }
.src-h { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; } .src-h b { display: inline-flex; align-items: center; gap: 6px; } .src-h svg { width: 18px; height: 18px; }
.src-parts, .src-sups, .src-who { display: flex; flex-wrap: wrap; gap: 6px 8px; } .src-sups[hidden] { display: none; }
.src-who .radio { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; cursor: pointer; min-height: 32px; }
.chip-cb { cursor: pointer; } .chip-cb input { position: absolute; opacity: 0; pointer-events: none; }
.chip-cb span { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 13.5px; background: var(--card, #fff); transition: background .15s, border-color .15s, color .15s; min-height: 32px; }
.chip-cb input:checked + span { background: var(--ink, #16181d); color: #fff; border-color: var(--ink, #16181d); }
.chip-cb input:focus-visible + span { outline: 2px solid #0a84ff; outline-offset: 2px; }
:root[data-theme="dark"] .chip-cb input:checked + span { background: #f2f2f7; color: #111; border-color: #f2f2f7; }
.src-list { display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 10px; }
.src-row { display: flex; gap: 8px 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 6px 0; }
.src-acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start; }
.src-type { position: relative; } .src-type > summary { list-style: none; } .src-type > summary::-webkit-details-marker { display: none; }
.src-type[open] > form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; background: var(--card, #fff); border: 1px solid var(--line); border-radius: 14px; padding: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.18); min-width: min(560px, 92vw); animation: srcpop .18s ease-out; }
@keyframes srcpop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.src-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; max-width: 340px; }
.src-chip { border: 1px solid var(--line); background: var(--card, #fff); border-radius: 9px; padding: 4px 8px; font: 500 12.5px var(--font, system-ui); cursor: pointer; display: inline-flex; gap: 4px; align-items: center; color: inherit; min-height: 28px; transition: transform .12s, border-color .12s, background .12s; }
.src-chip:hover { border-color: #0a84ff; } .src-chip:active { transform: scale(.97); }
.src-chip i { font-style: normal; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--green); }
.src-chip.best { border-color: var(--green); background: var(--green-soft); }
.src-chip.on { border-color: #0a84ff; box-shadow: 0 0 0 2px color-mix(in srgb, #0a84ff 30%, transparent); }
.src-chip.na { cursor: default; color: var(--muted, #888); text-decoration: line-through; }
.waitpart { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 3px 9px; border-radius: 8px; background: var(--amber-soft); color: #9a6400; font-size: 12.5px; font-weight: 700; }
.waitpart svg { width: 14px; height: 14px; } .waitpart.ok { background: var(--green-soft); color: var(--green); }
:root[data-theme="dark"] .waitpart { color: var(--amber); } :root[data-theme="dark"] .waitpart.ok { color: var(--green); }
.waitform { margin-top: 4px; } .waitform select { min-height: 30px; padding: 2px 8px; font-size: 12.5px; max-width: 230px; border-radius: 8px; }
.tbtn.tlab.wait, .kb.wait, .btn.waitbtn { background: var(--amber-soft); color: #9a6400; cursor: not-allowed; }
.kwait { display: inline-flex; gap: 4px; align-items: center; color: #f5b942; } .kwait svg { width: 13px; height: 13px; }
.kline.waiting { opacity: .85; }
.partsexp b { display: inline-flex; gap: 6px; align-items: center; } .partsexp svg { width: 16px; height: 16px; } .pe-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
@media (max-width: 640px) { .src-type[open] > form { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; min-width: 0; max-height: 75vh; overflow: auto; } .src-chips { max-width: none; } }
@media (prefers-reduced-motion: reduce) { .src-type[open] > form { animation: none; } .src-chip { transition: none; } }
/* phones: long one-button actions (e.g. "Get Out Pass — sign and hand over the car") wrap instead of pushing the page sideways */
@media (max-width: 640px) { .card-b > .btn, .card-b > a.btn { max-width: 100%; white-space: normal; text-align: center; height: auto; line-height: 1.25; padding-top: 10px; padding-bottom: 10px; } }

/* ---------------- 2.18: ⋯ boxes float above the page (never cut off by a table) ---------------- */
.rowmenu .pop.az-float { position: fixed; right: auto; margin: 0 !important; overflow: auto; overscroll-behavior: contain; z-index: 60; }

/* ---------------- 2.18: VAT return = the FTA VAT 201 form ---------------- */
.vat201 .vperiod { display: grid; grid-template-columns: minmax(150px, .8fr) repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; margin: 14px 16px 0; overflow: hidden; }
.vat201 .vperiod > div { padding: 12px 14px; border-left: 1px solid var(--line); min-width: 0; }
.vat201 .vperiod > div span { display: block; font-size: 12px; color: var(--ink-3); }
.vat201 .vperiod > div b { font-size: 14px; overflow-wrap: anywhere; }
.vat201 .vperiod .vp-h { background: var(--ink); color: var(--surface); border-left: 0; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.vat201 .vsec { font-size: 15px; margin: 22px 16px 8px; }
.v201 td { vertical-align: middle; }
.v201 td:first-child { min-width: 260px; padding-left: 54px; text-indent: -38px; }   /* the box number hangs, wrapped words line up */
.v201 td small { display: block; color: var(--ink-3); font-size: 12px; margin: 2px 0 0; text-indent: 0; }
.v201 tr.on td:first-child { font-weight: 600; }
.v201 tr.tot td { background: var(--surface-2); font-weight: 700; }
.vat201 .bx { display: inline-block; min-width: 30px; margin-right: 8px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.vbox { display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-width: 150px; min-height: 34px; padding: 4px 6px 4px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); font-variant-numeric: tabular-nums; }
.vbox.na { background: transparent; border-color: transparent; }
.vbox .vf { font-weight: 600; }
.vbox .vf.z { color: var(--ink-3); font-weight: 400; }
.vbox .vcp { border: 0; background: none; color: var(--ink-3); padding: 4px; border-radius: 6px; cursor: pointer; line-height: 0; }
.vbox .vcp:hover { background: var(--surface); color: var(--ink); }
.vbox .vcp svg { width: 15px; height: 15px; }
.vat201 .vnet { display: grid; gap: 10px; margin: 0 16px 16px; max-width: 760px; }
.vat201 .vnet > div { display: grid; grid-template-columns: 1fr minmax(170px, 240px); gap: 12px; align-items: center; }
.vat201 .vnet .big .vf { font-size: 18px; }
.vat201 .vnet .big span { font-weight: 700; }
@media (max-width: 760px) {
  .vat201 .vperiod { grid-template-columns: 1fr 1fr; margin: 12px 12px 0; }
  .vat201 .vperiod .vp-h { grid-column: 1 / -1; }
  .vat201 .vperiod > div:nth-child(2n) { border-left: 0; }
  .vat201 .vperiod > div:not(.vp-h) { border-top: 1px solid var(--line); }
  .v201 td:first-child { min-width: 200px; }
  .vat201 .vnet { margin: 0 12px 12px; }
  .vat201 .vnet > div { grid-template-columns: 1fr; gap: 4px; }
}
@media print { .vbox .vcp { display: none; } .vbox { min-height: 0; } }

/* 2.19: check-up chosen inside Additional checks (no second pop-up) */
.ckup{display:flex;flex-direction:column;gap:6px;margin:2px 0 10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)}
.ckup-l{font-size:13px;font-weight:600}
.ckup-chips{display:flex;flex-wrap:wrap;gap:6px}
.ckchip{display:inline-flex;align-items:center;gap:4px;min-height:34px;padding:6px 12px;border:1.5px solid var(--line-2);border-radius:999px;background:var(--surface);color:var(--ink);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.ckchip:hover{border-color:var(--ink-3)}
.ckchip.on{background:var(--red);border-color:var(--red);color:#fff}
.ckchip.ckadd{border-style:dashed;color:var(--ink-2)}
.ckchip .ic{width:15px;height:15px}
.ckup-new{display:flex;gap:6px;flex-wrap:wrap}
.ckup-new input{flex:1 1 200px;min-width:0}

/* 2.19: the ERP's own confirmation sheet (instead of the browser's "Are you sure?") */
.cf-back{position:fixed;inset:0;z-index:300;background:rgba(15,17,20,.46);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;transition:opacity .16s ease}
.cf-back.in{opacity:1}.cf-back.out{opacity:0}
.cf-sheet{background:var(--surface);color:var(--ink);width:100%;max-width:440px;max-height:calc(100dvh - 32px);overflow:auto;border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.3);transform:translateY(8px) scale(.98);transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.cf-back.in .cf-sheet{transform:none}
.cf-grab{display:none}
.cf-body{padding:22px 22px 6px}
.cf-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;margin-bottom:12px;background:var(--surface-2);color:var(--ink-2)}
.cf-sheet.is-danger .cf-ic{background:var(--red-soft);color:var(--red)}
.cf-title{font-size:19px;line-height:1.3;margin:0 0 6px}
.cf-text{margin:0 0 12px;color:var(--ink-2);font-size:14.5px}
.cf-item{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:12px;font-size:14px}
.cf-irow{display:flex;justify-content:space-between;gap:12px}.cf-iamt{white-space:nowrap;font-variant-numeric:tabular-nums}
.cf-isub{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.cf-list{margin:0 0 12px;padding-left:18px;color:var(--ink-2);font-size:13.5px}.cf-list li{margin:2px 0}
.cf-rl{display:block;font-size:13px;font-weight:600;margin-bottom:5px}
.cf-r{width:100%;border:1.5px solid var(--line-2);border-radius:10px;padding:9px 11px;font:inherit;font-size:14px;resize:vertical;background:var(--surface);color:var(--ink)}
.cf-r:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px var(--blue-soft)}
.cf-hint{font-size:12px;color:var(--ink-3);margin-top:4px}
.cf-acts{display:flex;gap:10px;justify-content:flex-end;padding:14px 22px 20px}
.cf-acts .btn{min-height:44px;padding:10px 18px;font-size:15px}
.cf-yes:disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important}
body.cf-on{overflow:hidden}
@media (max-width:640px){
  .cf-back{align-items:flex-end;padding:0}
  .cf-sheet{max-width:none;border-radius:20px 20px 0 0;transform:translateY(100%);max-height:92dvh;padding-bottom:env(safe-area-inset-bottom)}
  .cf-grab{display:block;width:40px;height:5px;border-radius:3px;background:var(--line-2);margin:8px auto 0}
  .cf-acts{flex-direction:column-reverse;padding:12px 18px 22px}
  .cf-acts .btn{width:100%;min-height:50px}
}
@media print{.cf-back{display:none}}

/* ======================= 2.19: dashboards made of widgets ======================= */
:root { --navy: #0d1b3e; --navy-2: #13254f; --c-blue: #2563eb; --c-green: #16a34a; --c-orange: #f59e0b; --c-red: #ef4444; --c-violet: #8b5cf6; --c-teal: #14b8a6; }
.dbhead { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; margin: -4px 0 18px; padding: 20px 24px; border-radius: 18px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, rgba(37,99,235,.35), transparent 55%), linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%); box-shadow: 0 10px 30px -12px rgba(13,27,62,.5); }
.dbhead.is-preview { outline: 2px dashed #fbbf24; outline-offset: 3px; }
.dbhead-t h1 { font: 800 26px/1.15 var(--font); letter-spacing: -.01em; margin: 0; color: #fff; }
.dbhead-t p { margin: 4px 0 0; color: rgba(255,255,255,.72); font-size: 14.5px; }
.dbhead-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dper { display: inline-flex; align-items: center; gap: 8px; padding: 0 6px 0 12px; height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: #fff; }
.dper .ic { width: 16px; height: 16px; opacity: .85; }
.dbhead .dper select { background-color: transparent !important; background-image: none; border: 0 !important; color: #fff !important; -webkit-text-fill-color: #fff; font: 600 14px var(--font); padding: 0 22px 0 4px; height: 38px; min-height: 0; width: auto; min-width: 0; box-shadow: none !important; outline: none; cursor: pointer; appearance: none; -webkit-appearance: none;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 4px center !important; }
.dper select option { color: var(--ink); background: var(--surface); }
.dper:focus-within { border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(147,197,253,.3); }
.dblive { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.75); }
.dbhead .livedot { color: #5fe0a0; } .dbhead .livedot::before { background: #3fca86; box-shadow: 0 0 0 3px rgba(63,202,134,.25); }
.dprev { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: #fbbf24; color: #3b2a00; font-size: 13px; font-weight: 700; }
.dprev .ic { width: 15px; height: 15px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.dgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 16px; align-items: stretch; }
.dw { grid-column: span 4; min-width: 0; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); border: 1px solid var(--line); display: flex; flex-direction: column; }
.dw-s { grid-column: span 2; } .dw-m { grid-column: span 4; } .dw-l { grid-column: span 6; } .dw-w { grid-column: span 8; } .dw-f { grid-column: 1 / -1; }
.dw-tall { grid-row: span 2; }
.dw-h { display: flex; align-items: center; gap: 8px; padding: 14px 16px 6px; min-height: 48px; }
.dw-h h3 { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 15.5px/1.25 var(--font); color: var(--ink); flex: 1; min-width: 0; }
.dw-ic { display: inline-flex; width: 28px; height: 28px; border-radius: 8px; align-items: center; justify-content: center; background: var(--surface-2); color: var(--ink-2); flex: none; }
.dw-ic .ic { width: 16px; height: 16px; }
.dw-ic.tone-red { background: var(--red-soft); color: var(--red); } .dw-ic.tone-blue { background: var(--blue-soft); color: var(--blue); } .dw-ic.tone-green { background: var(--green-soft); color: var(--green); }
.dw-ic.tone-orange { background: var(--amber-soft); color: var(--amber); } .dw-ic.tone-indigo, .dw-ic.tone-violet { background: var(--violet-soft); color: var(--violet); }
.dw-per { font-size: 12px; color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.dw-more { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; color: var(--blue); white-space: nowrap; }
.dw-more .ic { width: 14px; height: 14px; }
.dw-b { padding: 4px 16px 16px; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.dw-b > .w-empty { flex: 1; }
.dw .w-list { margin-top: 0; }
.dw-alert { border-color: var(--red-line); }
.dw-flat { background: transparent; border: 0; box-shadow: none; } .dw-flat .dw-h { display: none; } .dw-flat .dw-b { padding: 0; }
.dw-hello { color: #fff; border: 0; background: linear-gradient(135deg, #1f2937, #0d1b3e); } .dw-hello .dw-h h3 { color: rgba(255,255,255,.75); font-size: 13.5px; font-weight: 600; }
.dw-hello .dw-ic { background: rgba(255,255,255,.1); color: #fff; } .dw-hello .w-hi { font: 800 24px var(--font); } .dw-hello .w-sub { color: rgba(255,255,255,.7); } .dw-hello .w-actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

/* figures (KPI tiles) */
.dk-kpi { flex-direction: row; align-items: flex-start; gap: 12px; padding: 16px; border: 0; color: #fff; text-decoration: none !important; min-height: 116px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--k1), var(--k2)); box-shadow: 0 8px 20px -10px var(--k2); transition: transform .15s, box-shadow .15s; }
a.dk-kpi:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -12px var(--k2); }
.dk-kpi::after { content: ""; position: absolute; right: -30px; bottom: -40px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.07); pointer-events: none; }
.dk-kpi.tone-blue { --k1: #1d4ed8; --k2: #1e3a8a; } .dk-kpi.tone-green { --k1: #059669; --k2: #065f46; } .dk-kpi.tone-indigo { --k1: #4f46e5; --k2: #312e81; }
.dk-kpi.tone-red { --k1: #dc2626; --k2: #991b1b; } .dk-kpi.tone-orange { --k1: #ea580c; --k2: #9a3412; } .dk-kpi.tone-teal { --k1: #0d9488; --k2: #115e59; }
.dk-kpi.tone-violet { --k1: #7c3aed; --k2: #4c1d95; } .dk-kpi.tone-gray { --k1: #475569; --k2: #1e293b; }
.dk-ic { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.18); flex: none; }
.dk-ic .ic { width: 20px; height: 20px; color: #fff; }
.dk-txt { min-width: 0; flex: 1; position: relative; z-index: 1; }
.dk-l { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.85); line-height: 1.25; }
.dk-v { font: 800 clamp(19px, 1.45vw, 25px)/1.15 var(--font); margin: 6px 0 4px; letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dk-v.long { font-size: clamp(16px, 1.15vw, 21px); }
.dk-v small { font-size: 14px; font-weight: 700; opacity: .85; }
.dk-s { font-size: 12px; color: rgba(255,255,255,.75); margin-top: 2px; }
.dk-d { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0 4px; font-size: 13px; font-weight: 700; }
.dk-d small { font-weight: 500; font-size: 11.5px; opacity: .8; }
.dk-kpi .dk-d.up { color: #a7f3d0; } .dk-kpi .dk-d.down { color: #fecaca; } .dk-kpi .dk-d.flat { color: rgba(255,255,255,.75); }
.dw:not(.dk-kpi) .dk-d.up { color: var(--green); } .dw:not(.dk-kpi) .dk-d.down { color: var(--red); } .dw:not(.dk-kpi) .dk-d.flat { color: var(--ink-3); }
.dk-kpi.tone-red .dk-d.down, .dk-kpi.tone-orange .dk-d.down { color: #fff; }
.dk-bar { display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,.22); margin-top: 6px; overflow: hidden; } .dk-bar i { display: block; height: 100%; background: #fff; border-radius: 3px; }
.dw-alert.dk-kpi { animation: none; }

/* charts */
.dchart { width: 100%; height: auto; display: block; overflow: visible; }
.dc-grid { stroke: var(--line); stroke-width: 1; } .dc-grid.z { stroke: var(--line-2); }
.dc-ax { fill: var(--ink-3); font: 500 11px var(--font); }
.dleg { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; font-size: 12.5px; color: var(--ink-2); margin-top: 6px; }
.dleg span { display: inline-flex; align-items: center; gap: 6px; } .dleg i { width: 12px; height: 10px; border-radius: 2px; display: inline-block; }
.ddonut { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; }
.dd-svg { width: 150px; height: 150px; flex: none; }
.dd-c { fill: var(--ink); font: 800 15px var(--font); } .dd-c.big { font-size: 24px; } .dd-s { fill: var(--ink-3); font: 500 10px var(--font); }
.dd-leg { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 170px; font-size: 13px; }
.dd-leg li { display: grid; grid-template-columns: 12px 1fr auto auto; align-items: center; gap: 8px; padding: 4px 0; }
.dd-leg i { width: 10px; height: 10px; border-radius: 50%; } .dd-leg span { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-leg b { font-variant-numeric: tabular-nums; } .dd-leg em { font-style: normal; color: var(--ink-3); font-size: 12px; min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
.dhb { display: flex; flex-direction: column; gap: 8px; }
.dhb > a, .dhb > div { display: grid; grid-template-columns: minmax(80px, 34%) 1fr auto; align-items: center; gap: 10px; font-size: 13px; color: var(--ink); text-decoration: none; }
.dhb-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.dhb-t { height: 12px; background: var(--surface-2); border-radius: 6px; overflow: hidden; } .dhb-t i { display: block; height: 100%; border-radius: 6px; }
.dhb b { font-variant-numeric: tabular-nums; font-size: 12.5px; min-width: 48px; text-align: right; }
.dring { display: flex; flex-direction: column; align-items: center; gap: 4px; } .dring svg { width: 130px; height: 130px; }
.dage { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; align-items: end; }
.dage > div { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 0; }
.dage em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.dage-c { width: 100%; max-width: 56px; height: 120px; display: flex; align-items: flex-end; } .dage.tall .dage-c { height: 220px; }
.dage-c i { width: 100%; border-radius: 6px 6px 2px 2px; display: block; }
.dage b { font-size: 12px; font-weight: 600; color: var(--ink-2); } .dage small { font-size: 11.5px; color: var(--ink-3); }

/* tables and lists */
.dtbl-w { overflow-x: auto; margin: 0 -4px; }
.dtbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.dtbl th { text-align: left; font-weight: 600; color: var(--ink-3); font-size: 12px; padding: 7px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface-2); }
.dtbl td { padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.dtbl tr:last-child td { border-bottom: 0; } .dtbl tr[data-href] { cursor: pointer; } .dtbl tr[data-href]:hover td { background: var(--surface-2); }
.dtbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .dtbl .red, .dw .red { color: var(--red); font-weight: 600; } .dw .green { color: var(--green); }
.dtbl .dtot td { font-weight: 700; background: var(--surface-2); border-top: 1px solid var(--line-2); }
.dtbl .av { vertical-align: middle; }
.dchip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); }
.dchip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.dacts { display: inline-flex; gap: 4px; }
.dbtn { display: inline-flex; width: 30px; height: 30px; border-radius: 8px; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); }
.dbtn .ic { width: 15px; height: 15px; } .dbtn:hover { background: var(--surface-2); text-decoration: none; } .dbtn.wa { color: #1fa855; }
.dalerts { display: flex; flex-direction: column; gap: 6px; }
.dal { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); color: var(--ink); text-decoration: none !important; border: 1px solid transparent; }
.dal:hover { border-color: var(--line-2); } .dal > .ic { width: 15px; height: 15px; color: var(--ink-3); }
.dal-s { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; min-width: 62px; text-align: center; }
.dal.crit .dal-s { background: var(--red-soft); color: var(--red); } .dal.warn .dal-s { background: var(--amber-soft); color: var(--amber); } .dal.info .dal-s { background: var(--blue-soft); color: var(--blue); }
.dal-t b { display: block; font-size: 13.5px; } .dal-t small { display: block; font-size: 12px; color: var(--ink-3); }
.dbig { font: 800 30px var(--font); line-height: 1.1; margin: 2px 0 8px; } .dbig small { font-size: 13px; font-weight: 600; color: var(--ink-3); } .dbig.red { color: var(--red); }
.dtrio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.dtrio > div { background: var(--surface-2); border-radius: 10px; padding: 8px 10px; } .dtrio b { display: block; font-size: 20px; } .dtrio span { font-size: 12px; color: var(--ink-3); }
.dmeter { display: inline-block; width: 70px; height: 7px; border-radius: 4px; background: var(--surface-2); vertical-align: middle; overflow: hidden; } .dmeter i { display: block; height: 100%; background: var(--green); border-radius: 4px; }
.dmini { display: block; height: 4px; border-radius: 2px; background: var(--surface-2); margin-top: 4px; max-width: 220px; overflow: hidden; } .dmini i { display: block; height: 100%; background: var(--blue); }
.dnow { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; } .dnow.ok { background: var(--green-soft); color: var(--green); } .dnow.info { background: var(--blue-soft); color: var(--blue); } .dnow.off { background: var(--surface-2); color: var(--ink-3); }
.dpill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; } .dpill.ok { background: var(--green-soft); color: var(--green); } .dpill.warn { background: var(--amber-soft); color: var(--amber); } .dpill.bad { background: var(--red-soft); color: var(--red); }
.dpill.act { background: var(--blue-soft); color: var(--blue); text-decoration: none; }
.dfb { display: flex; flex-direction: column; } .dfb > a { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; } .dfb > a:first-child { border-top: 0; }
.dfb span { flex: 1; min-width: 0; } .dfb small { display: block; color: var(--ink-3); font-size: 12px; } .dfb q { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 2px; } .dfb em { font-style: normal; text-align: right; }
.dstars { color: #f59e0b; letter-spacing: 1px; } .dstars i { color: var(--line-2); font-style: normal; }
.dstrip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .dstrip > div { flex: 1 1 110px; background: var(--surface-2); border-radius: 10px; padding: 8px 12px; }
.dstrip b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; } .dstrip span { font-size: 12px; color: var(--ink-3); }
.dbank .dbank-i { width: 34px; height: 34px; border-radius: 9px; background: var(--blue-soft); color: var(--blue); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex: none; }
.dbank em { display: flex; flex-direction: column; align-items: flex-end; } .dbank em b { color: var(--ink); font-size: 13.5px; }
.dkv { display: flex; flex-direction: column; } .dkv > div { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 4px 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.dkv > div:first-child { border-top: 0; } .dkv span { color: var(--ink-2); } .dkv b { font-variant-numeric: tabular-nums; }
.dkv.two { display: grid; grid-template-columns: 1fr; gap: 10px; } .dkv.two > div { grid-template-columns: 1fr; border: 0; background: var(--surface-2); border-radius: 12px; padding: 12px; } .dkv.two b { font-size: 22px; }
.dtiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .dtile { border-radius: 12px; padding: 12px; text-decoration: none !important; display: flex; flex-direction: column; gap: 2px; }
.dtile b { font-size: 26px; font-weight: 800; } .dtile span { font-size: 12px; color: var(--ink-2); }
.dtile.blue { background: var(--blue-soft); color: var(--blue); } .dtile.green { background: var(--green-soft); color: var(--green); } .dtile.orange { background: var(--amber-soft); color: var(--amber); } .dtile.red { background: var(--red-soft); color: var(--red); }
.dagetiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.dat { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); text-decoration: none !important; color: var(--ink); border-top: 4px solid var(--tc); }
.dat span { font-size: 13px; color: var(--ink-2); font-weight: 600; } .dat b { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; } .dat small { font-size: 12px; color: var(--tc); font-weight: 600; }
.dat.tone-blue { --tc: #2563eb; } .dat.tone-green { --tc: #16a34a; } .dat.tone-orange { --tc: #f59e0b; } .dat.tone-orange2 { --tc: #f97316; } .dat.tone-red { --tc: #ef4444; }
.dops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dop { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); color: var(--ink); text-decoration: none !important; border: 1px solid transparent; }
.dop:hover { border-color: var(--line-2); } .dop-i { grid-row: 1 / 4; width: 32px; height: 32px; border-radius: 9px; background: var(--blue-soft); color: var(--blue); display: flex; align-items: center; justify-content: center; }
.dop-i .ic { width: 16px; height: 16px; } .dop-l { font-size: 12px; color: var(--ink-2); } .dop b { font-size: 20px; line-height: 1.2; } .dop small { font-size: 11.5px; color: var(--ink-3); }
.dop.warn .dop-i { background: var(--amber-soft); color: var(--amber); } .dop.bad .dop-i { background: var(--red-soft); color: var(--red); } .dop.ok .dop-i { background: var(--green-soft); color: var(--green); }
.dw-ops.dw-l .dops, .dw-ops.dw-w .dops, .dw-ops.dw-f .dops { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dw .w-foot { margin-top: auto; padding-top: 8px; font-size: 13px; color: var(--ink-2); }
.dw .w-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .dw .w-val { font: 800 22px var(--font); } .dw .w-val small { font-size: 13px; color: var(--ink-3); } .dw .w-sub { font-size: 12.5px; color: var(--ink-3); }
.dw .w-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .dw .w-trio a { background: var(--surface-2); border-radius: 10px; padding: 10px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; }
.dw .w-trio b { font-size: 22px; } .dw .w-trio span { font-size: 12px; color: var(--ink-3); } .dw .w-trio b.red { color: var(--red); }
.ink { color: var(--ink); }

@media (max-width: 1500px) { .dw-m { grid-column: span 6; } .dw-l, .dw-w { grid-column: span 12; } .dagetiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1501px) and (max-width: 1800px) { .dw-m { grid-column: span 4; } .dw-l { grid-column: span 6; } .dw-w { grid-column: span 8; } }
@media (max-width: 1180px) { .dw-s { grid-column: span 4; } .dw-m { grid-column: span 6; } }
@media (max-width: 820px) { .dgrid { gap: 12px; } .dw-s { grid-column: span 6; } .dw-m, .dw-l, .dw-w { grid-column: 1 / -1; } .dw-tall { grid-row: auto; } .dagetiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dtiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) {
  .dbhead { padding: 16px; border-radius: 14px; } .dbhead-t h1 { font-size: 21px; } .dbhead-r { width: 100%; } .dper { flex: 1; } .dper select { flex: 1; }
  .dk-kpi { padding: 12px; gap: 8px; min-height: 0; flex-direction: column; } .dk-ic { width: 32px; height: 32px; } .dk-v { font-size: 19px; } .dk-d small { display: none; }
  .dops, .dw-ops.dw-l .dops { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dagetiles { grid-template-columns: 1fr 1fr; gap: 10px; } .dat { padding: 12px; } .dat b { font-size: 17px; }
}
@media print { .dbhead { background: none; color: var(--ink); box-shadow: none; } .dbhead .btn, .dper { display: none; } }

/* 2.19: dashboard builder */
.dbr-roles { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 14px; }
.dbr-role { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); font-size: 13.5px; font-weight: 600; text-decoration: none !important; }
.dbr-role:hover { border-color: var(--ink-3); color: var(--ink); } .dbr-role.on { background: var(--navy); border-color: var(--navy); color: #fff; } .dbr-role i { color: #f59e0b; font-style: normal; font-size: 10px; vertical-align: 2px; }
.dbr { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; padding-bottom: 80px; }
.dbr-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; grid-auto-flow: row; }
.dbr-w { grid-column: span 4; background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; padding: 8px 10px; min-height: 70px; display: flex; flex-direction: column; gap: 4px; cursor: grab; transition: border-color .15s, box-shadow .15s, opacity .15s; min-width: 0; }
.dbr-w:hover { border-color: var(--line-2); } .dbr-w.open { grid-column: 1 / -1 !important; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); cursor: default; }
.dbr-w.k-kpi { background: linear-gradient(135deg, #eef4ff, #f7f9ff); }
.dbs-s { grid-column: span 2; } .dbs-m { grid-column: span 4; } .dbs-l { grid-column: span 6; } .dbs-w { grid-column: span 8; } .dbs-f { grid-column: 1 / -1; }
.dbr-tall { min-height: 120px; }
.dbr-w.is-hidden { opacity: .6; border-style: dashed; }
.dbr-w.dragging { opacity: .4; } .dbr-w.drop-before { box-shadow: -4px 0 0 var(--blue); } .dbr-w.drop-after { box-shadow: 4px 0 0 var(--blue); }
.dbr-w.flash { animation: dbrflash 1.2s ease; } @keyframes dbrflash { 0% { box-shadow: 0 0 0 4px rgba(37,99,235,.45); } 100% { box-shadow: none; } }
.dbr-wh { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dbr-wh b { font-size: 13px; flex: 1; min-width: 0; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dbr-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px; margin-top: auto; }
.dbr-hd { color: var(--ink-3); cursor: grab; font-size: 14px; }
.dbr-ic { display: inline-flex; width: 24px; height: 24px; border-radius: 7px; align-items: center; justify-content: center; background: var(--surface-2); color: var(--ink-2); flex: none; } .dbr-ic .ic { width: 14px; height: 14px; }
.dbr-acts { display: inline-flex; gap: 3px; flex: none; margin-left: auto; } .dbr-acts .tbtn { width: 28px; height: 28px; font-weight: 700; } .dbr-acts .tbtn:disabled { opacity: .3; }
.dbr-x { color: var(--red) !important; }
.dbr-meta { display: flex; flex-wrap: wrap; gap: 4px; } .dbr-meta span { font-size: 11px; color: var(--ink-3); background: var(--surface-2); border-radius: 6px; padding: 1px 6px; }
.dbr-warn { font-size: 11.5px; color: var(--amber); display: flex; align-items: center; gap: 4px; } .dbr-warn .ic { width: 13px; height: 13px; }
.dbr-set { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; padding: 10px 2px 4px; border-top: 1px solid var(--line); margin-top: 6px; align-items: end; }
.dbr-set .check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; min-height: 42px; }
.dbr-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 30px; color: var(--ink-3); border: 1.5px dashed var(--line-2); border-radius: 12px; }
.dbr-lib { position: sticky; top: 76px; max-height: calc(100vh - 170px); display: flex; flex-direction: column; }
.dbr-lib .card-b { overflow: auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.dbr-libl h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin: 12px 0 4px; }
.dbr-li { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: start; padding: 8px 0; border-top: 1px solid var(--line); }
.dbr-lt b { display: block; font-size: 13.5px; } .dbr-lt small { display: block; font-size: 12px; color: var(--ink-3); line-height: 1.35; } .dbr-lt em { display: block; font-size: 11.5px; color: var(--amber); font-style: normal; margin-top: 2px; }
.dbr-li.is-hidden b { color: var(--ink-3); }
.dbr-copy select { min-height: 34px; padding: 4px 8px; font-size: 13px; max-width: 220px; }
.dbr-bar [data-dirty] { color: var(--amber); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 1100px) { .dbr { grid-template-columns: 1fr; } .dbr-lib { position: static; max-height: none; } }
@media (max-width: 700px) { .dbr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dbr-w, .dbs-s, .dbs-m { grid-column: span 1; } .dbs-l, .dbs-w, .dbs-f, .dbr-w.open { grid-column: 1 / -1; } }

/* 2.20: Mulkiya: insurance expiry next to the expiry; reading the dates from the card */
.dcard .dc-ins { margin-top: 6px; }
.dcard.dc-reading .dc-exp input, .dcard.dc-reading .dc-ins input { background-image: linear-gradient(90deg, transparent, rgba(37,99,235,.12), transparent); background-size: 200% 100%; animation: dcread 1.1s linear infinite; }
@keyframes dcread { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* 2.20: service by mileage at Assign Technician */
.ckup-odo { font-size: 13.5px; color: var(--ink-2); }
.ckchip em { font-style: normal; font-size: 11px; font-weight: 700; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }
.ckchip.t-duenow em { background: var(--green-soft); color: var(--green); } .ckchip.t-missed em { background: var(--amber-soft); color: var(--amber); }
.ckchip.on em { background: rgba(255,255,255,.22); color: #fff; }
.ckup-list { font-size: 13px; color: var(--ink-2); }
.sch select { min-height: 36px; padding: 4px 8px; max-width: 150px; } .sch select.sv-major { background-color: var(--amber-soft); } .sch select.sv-general { background-color: var(--red-soft); } .sch select.sv-minor { background-color: var(--green-soft); }

/* 2.20: every section has a thin border — black in light mode, white in dark mode — so things stand apart */
:root { --sec-bd: #1b1d22; }
:root[data-theme="dark"] { --sec-bd: rgba(255,255,255,.78); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sec-bd: rgba(255,255,255,.78); } }
.content .card, .content .dw:not(.dk-kpi):not(.dw-flat):not(.dw-hello), .content .widget, .content .dat { border: 1px solid var(--sec-bd) !important; }
.content .card .card .card, .content .detcheck-b > .card { border-width: 1px !important; }
.sbox, .ckup, .irep-box, .voicebox, .dcard, .src-box, .fstep:not(.f-now):not(.f-reedit) { border: 1px solid var(--sec-bd) !important; }
.voicebox { border-style: solid !important; }
.sbox { border-radius: 12px; overflow: hidden; background: var(--surface); }
.sbox-h { display: flex; align-items: center; gap: 8px; padding: 9px 12px; font: 700 14px var(--font); background: var(--surface-2); border-bottom: 1px solid var(--sec-bd); }
.sbox-h .ic { width: 16px; height: 16px; }
.sbox > *:not(.sbox-h) { margin: 10px 12px; }
.sbox > .voicebox { border-width: 1px !important; }
.sbox-row { font-size: 14px; line-height: 1.5; }
.sbox .dtbl-w { margin: 0; } .sbox .dtbl th { background: transparent; }

/* 2.21: a file that is no longer on the server */
.fmiss { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; height: 100%; min-height: 64px; padding: 6px; text-align: center; background: var(--amber-soft); color: var(--amber); border-radius: 8px; }
.fmiss .ic { width: 18px; height: 18px; } .fmiss b { font-size: 12.5px; } .fmiss small { font-size: 11px; color: var(--ink-2); }
.dc-photo .dc-sides { grid-template-columns: 1fr; }
/* 2.21: the car's plate stays in the top header */
.hd-plate { font-weight: 800; letter-spacing: .5px; }
@media (max-width: 640px) { .hd-crumb { display: none; } }
/* 2.21: Total Due / Overdue next to Payment Type */
.payrow { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; align-items: end; }
.payrow .payrow-sel .grid.g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.payrow-due:empty { display: none; }
@media (max-width: 760px) { .payrow { grid-template-columns: 1fr; } }
.duestrip { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2, var(--surface)); }
.duestrip span { display: flex; flex-direction: column; line-height: 1.2; }
.duestrip small { font-size: 11px; color: var(--muted); }
.duestrip b { font-variant-numeric: tabular-nums; }
.duestrip .ds-red b, .duestrip .ds-red small { color: var(--red); }
.duestrip.ds-bad { border-color: var(--red); box-shadow: 0 0 0 1px var(--red) inset; }
/* 2.21: every dropdown gets the same grey box as Make / Model */
select:not([multiple]):not([size]), :root[data-theme="dark"] select:not([multiple]):not([size]), .ss-field { background-color: var(--fill-2); border-color: transparent; }
select:not([multiple]):not([size]):hover:not(:focus), .ss-field:hover { background-color: var(--fill); border-color: transparent; }
select:not([multiple]):not([size]):focus, .ss.open .ss-field, .ss-field:focus-within { background-color: var(--surface); border-color: var(--blue); }
.kbtns select { background-color: #2a2d34 !important; }
.ckup-more { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.ckup-more select { width: auto; min-width: 180px; min-height: 36px; }
.waitpart.info { background: var(--fill-2); color: var(--ink-2); font-weight: 600; }
/* 2.21: gate photos the same size as the Mulkiya / Emirates ID sides; the missing-file box readable in both themes */
.dc-photo .dc-sides { grid-template-columns: minmax(0, 150px); }
.dc-photo .dc-prev, .dc-photo .dc-view { aspect-ratio: 1.6 / 1; overflow: hidden; }
.dc-photo .dc-view img { width: 100%; height: 100%; object-fit: cover; }
.fmiss { background: #fff4e0; color: #9a5b00; border: 1px dashed #e0a43a; }
.fmiss small { color: #7a4a00 !important; font-weight: 600; }
:root[data-theme="dark"] .fmiss { background: #33270e; color: #f5b94a; border-color: #8a6420; }
:root[data-theme="dark"] .fmiss small { color: #f0d39a !important; }
.dcards.dc-sum { grid-template-columns: repeat(auto-fill, 158px); align-items: start; }
.dcards.dc-sum > :not(.dc-photo) { grid-column: span 2; min-width: 0; }
/* 2.21.1: one border per box — the slot has the section border, the card inside none */
.dslot { border: 1px solid var(--sec-bd) !important; }
.dslot .dcard, .dslot .dc-mini, .dslot .softbox { border: 0 !important; box-shadow: none !important; }
.dc-sum .dc-exp, .dc-sum .dc-ins { min-width: 0; } .dc-sum .dc-exp input, .dc-sum .dc-ins input { max-width: 100%; }
@media (max-width: 640px) { .dcards.dc-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 2.21.1: the driver's documents in 2.3 Driver */
.drv-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 330px)); gap: 10px; margin-top: 4px; }
/* 2.21.1: several technicians at Assign Technician */
.techpick { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--sec-bd); border-radius: 12px; }
.tp-grp { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tp-grp > b { font-size: 12px; color: var(--ink-2); min-width: 84px; }
.tp-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-chip { position: relative; display: inline-flex; cursor: pointer; }
.tp-chip input { position: absolute; opacity: 0; pointer-events: none; }
.tp-chip span { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2, var(--line)); background: var(--fill-2); font-weight: 600; font-size: 13.5px; }
.tp-chip input:checked + span { background: var(--red); border-color: var(--red); color: #fff; }
.tp-chip input:focus-visible + span { box-shadow: var(--ring); }
.tp-self { align-self: flex-start; }
.pline .pfor { width: auto; min-width: 130px; min-height: 38px; padding: 4px 30px 4px 10px; font-size: 13px; }
.forchip { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--blue-soft, #e8f0fe); color: var(--blue); font-size: 11.5px; font-weight: 700; }
.vfor { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0; } .vfor select { width: auto; min-height: 36px; }
/* 2.22: download menu of a document; the Insurance File button */
.dc-dl { position: relative; margin-left: auto; }
.dc-h .dc-dl { margin-left: 6px; }
.dc-dl > summary { list-style: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); font-size: 12px; font-weight: 700; cursor: pointer; background: var(--surface); }
.dc-dl > summary::-webkit-details-marker { display: none; }
.dc-dl > summary svg { width: 13px; height: 13px; }
.dc-dl .dl-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 210px; display: flex; flex-direction: column; padding: 6px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.dc-dl .dl-it { text-align: left; padding: 8px 10px; border-radius: 8px; border: 0; background: none; font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--ink); }
.dc-dl .dl-it:hover { background: var(--fill-2); }
.insfile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.insfile .is-busy { opacity: .6; pointer-events: none; }
.dc-reading .dc-h::after { content: 'Reading…'; font-size: 11px; font-weight: 700; color: var(--blue); margin-left: 6px; }
.drvpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 8px; margin-top: 6px; }
.drvpick-s { max-width: 360px; }
.dp-card { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; background: var(--surface); text-align: left; }
.dp-card.on { border-color: var(--red); box-shadow: 0 0 0 1px var(--red) inset; }
.dp-card img, .dp-face { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--fill-2); flex: none; display: grid; place-items: center; font-weight: 800; color: var(--ink-2); }
.dp-card b { display: block; font-size: 14px; } .dp-card small { display: block; color: var(--ink-2); font-size: 12px; }
.dp-docs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; } .dp-docs i { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--green-soft); color: var(--green); } .dp-docs i.x { background: var(--red-soft, #fde8e8); color: var(--red); }
.dp-last { font-size: 10.5px; font-weight: 800; color: var(--red); text-transform: uppercase; letter-spacing: .03em; }
.eidfound { padding: 8px 12px; border-radius: 10px; background: var(--green-soft); color: var(--green); font-weight: 700; font-size: 13.5px; }
/* 2.23: part names, condition, catalog, component vs parts */
.condchip { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .02em; vertical-align: 1px; }
.condchip.c-oem { background: var(--green-soft); color: var(--green); } .condchip.c-copy { background: var(--amber-soft); color: #9a6400; } .condchip.c-used { background: var(--fill-2); color: var(--ink-2); }
:root[data-theme="dark"] .condchip.c-copy { color: var(--amber); }
.condsel { width: auto; min-width: 92px; min-height: 36px; padding: 4px 28px 4px 10px; font-size: 13px; }
.pronames .pn-row { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(220px, 2fr) minmax(130px, 1fr) auto; gap: 10px; align-items: end; padding: 10px 0; border-top: 1px solid var(--line); }
.pn-floor small { display: block; font-size: 11px; color: var(--ink-2); }
@media (max-width: 760px) { .pronames .pn-row { grid-template-columns: 1fr; } }
.splitbox .split-row { display: grid; grid-template-columns: minmax(180px, 2fr) minmax(260px, 3fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.split-nums { display: flex; gap: 16px; flex-wrap: wrap; } .split-nums span { display: flex; flex-direction: column; } .split-nums small { font-size: 11px; color: var(--ink-2); }
.split-nums .sp-up b { color: var(--red); } .split-nums .sp-down b { color: var(--green); }
@media (max-width: 760px) { .splitbox .split-row { grid-template-columns: 1fr; } }
.catpick { margin: 0 18px 12px; border: 1px solid var(--sec-bd); border-radius: 12px; padding: 0; }
.catpick > summary { padding: 10px 14px; font-weight: 700; cursor: pointer; }
.catpick .cat-grp { padding: 0 14px 10px; } .catpick .cat-grp > b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-2); margin: 8px 0 4px; }
.cat-sub { border: 1px solid var(--line); border-radius: 10px; margin: 6px 0; } .cat-sub > summary { padding: 8px 12px; cursor: pointer; font-weight: 600; }
.cat-sub form { padding: 4px 12px 10px; } .cat-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 4px 12px; margin-bottom: 8px; }
.cat-items label { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; } .cat-items small { color: var(--ink-2); }
.cat-sub td form, .cat-sub .tbl form { padding: 0; margin: 0; }
.cat-sub .tbl td { padding-top: 8px; padding-bottom: 8px; vertical-align: middle; }
/* 2.23.1: technicians as a dropdown with tick boxes */
.techdd { position: relative; max-width: 560px; }
.techdd-s { list-style: none; display: flex; align-items: center; min-height: 44px; padding: 8px 36px 8px 12px; border-radius: 12px; background: var(--fill-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; cursor: pointer; font-size: 15.5px; font-weight: 550; }
.techdd-s::-webkit-details-marker { display: none; }
.techdd[open] .techdd-s { background-color: var(--surface); box-shadow: var(--ring); }
.techdd .techpick { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; max-height: 360px; overflow: auto; gap: 4px; padding: 8px; background: var(--surface); box-shadow: 0 12px 32px rgba(0,0,0,.18); }
.techdd .tp-grp { display: block; } .techdd .tp-grp > b { display: block; padding: 6px 8px 2px; min-width: 0; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-3, var(--ink-2)); }
.techdd .tp-row { display: flex; flex-direction: column; gap: 0; }
.techdd .tp-chip { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.techdd .tp-chip:hover { background: var(--fill-2); }
.techdd .tp-chip input { position: static; opacity: 1; pointer-events: auto; width: 18px; height: 18px; accent-color: var(--red); margin: 0; }
.techdd .tp-chip span, .techdd .tp-chip input:checked + span { padding: 0; border: 0; background: none; color: var(--ink); font-weight: 600; font-size: 14.5px; }
.svcfor { min-width: 170px; }

/* ===== 2.24: six workflow tiles, each with its own steps ===== */
.flow.flow6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; align-items: start; }
@media (max-width: 1100px) { .flow.flow6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .flow.flow6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ftile { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 8px; min-width: 0; }
.ftile-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 2px 2px 8px; }
.ftile-h i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 13px var(--font-c); font-style: normal; background: var(--surface-2); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-2); }
.ftile-h b { font-size: 13.5px; line-height: 1.2; overflow-wrap: break-word; }
.ftile-h small { font-size: 11px; color: var(--ink-3); }
.ftile.t-done .ftile-h i { background: var(--green); color: #fff; box-shadow: none; }
.ftile.t-now { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.ftile.t-now .ftile-h i { background: var(--red); color: #fff; box-shadow: none; }
.ftile.t-now .ftile-h small { color: var(--red); font-weight: 700; }
.ftile.t-hold { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
.ftile.t-hold .ftile-h i { background: var(--amber); color: #fff; }
.ftile.t-skip { opacity: .55; }
.ftile-s { display: grid; gap: 4px; }
.flow6 .fstep { flex: none; min-width: 0; padding: 5px 7px; border-radius: 9px; column-gap: 6px; background: var(--surface-2); border-color: transparent; }
.flow6 .fstep i { width: 22px; height: 22px; font-size: 10px; }
.flow6 .fstep b { font-size: 11.5px; }
.flow6 .fstep small { font-size: 10.5px; }
.flow6 .fstep.f-now { background: var(--surface); }
.flow6 .fstep.f-now { animation: none; }
/* 2.24: For one, several or everyone */
.pfm { position: relative; display: inline-flex; flex: none; }
.pfm-b { border: 1px solid var(--line-2); background: var(--surface); border-radius: 999px; padding: 5px 10px; font: 600 12px var(--font); color: var(--ink-2); cursor: pointer; max-width: 210px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pfm.on .pfm-b { border-color: var(--blue, #0a84ff); color: var(--blue, #0a84ff); }
.pfm-pop { position: absolute; z-index: 30; top: calc(100% + 4px); right: 0; min-width: 190px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; padding: 8px; box-shadow: 0 8px 28px rgba(0,0,0,.18); display: grid; gap: 4px; }
.pfm-pop[hidden] { display: none; }
.addchecks .ckup { margin-bottom: 8px; }
.vlab { display: inline-block; font: 700 10.5px var(--font); text-transform: uppercase; letter-spacing: .03em; padding: 2px 7px; border-radius: 6px; background: var(--surface-2); color: var(--ink-2); margin-right: 4px; }
.vlab.vl-fm { background: rgba(94,92,230,.15); color: #5e5ce6; }
.vlab.vl-csa { background: rgba(255,159,10,.16); color: #b26a00; }
.vlab.vl-cu { background: rgba(48,209,88,.15); color: #1f8a3c; }
.sbadge.s-rep { background: rgba(100,210,255,.18); color: #0b6d8f; }
.sbadge.s-est { background: rgba(255,214,10,.22); color: #8a6d00; }
/* 2.24 (27, 28): the technician's inspection screen — voices first, his queue on the right */
.insp-split { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px; align-items: start; }
.insp-q { position: sticky; top: 70px; }
@media (max-width: 900px) { .insp-split { grid-template-columns: 1fr; } .insp-q { position: static; order: 2; } }
.iq-list { display: grid; gap: 6px; }
.iq-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px; border-radius: 10px; border: 1px solid var(--line); color: inherit; text-decoration: none; }
.iq-row small { display: block; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iq-row.on { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.ivoices .vlist audio { width: 100%; }
.iseg.iseg4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.iseg4 button { font-size: 12px; }
.iseg4 .s-req.on { background: var(--red); color: #fff; }
.iseg4 .s-rec.on { background: var(--amber); color: #fff; }
.iseg4 .s-opt.on { background: #64d2ff; color: #063b4d; }
.iseg4 .s-nreq.on { background: var(--green); color: #fff; }
.iitem.st-req { border-left: 4px solid var(--red); } .iitem.st-rec { border-left: 4px solid var(--amber); }
/* 2.24 (58): the inspection call */
.icall { position: fixed; inset: 0; z-index: 9999; background: rgba(10,10,14,.92); display: grid; place-items: center; padding: 16px; animation: azFade .2s ease-out; }
.icall-b { text-align: center; color: #fff; max-width: 520px; width: 100%; display: grid; gap: 10px; }
.icall-k { font: 800 14px var(--font); letter-spacing: .12em; text-transform: uppercase; color: #ff9f0a; }
.icall-p { font: 800 clamp(44px, 12vw, 84px)/1 var(--font-c); letter-spacing: .04em; }
.icall-c { font-size: 20px; } .icall-t { font-size: 16px; opacity: .85; } .icall-by, .icall-m { font-size: 13px; opacity: .7; }
.icall-ok { font-size: 22px; padding: 18px 28px; margin-top: 14px; animation: azPulse 1.2s ease-in-out infinite; }
@keyframes azPulse { 50% { transform: scale(1.04); } }
@keyframes azFade { from { opacity: 0; } }
.tq li.tq-noresp { background: rgba(255,69,58,.12); box-shadow: inset 3px 0 0 var(--red); }
.tq-nr { font: 700 10px var(--font); color: #fff; background: var(--red); border-radius: 6px; padding: 2px 6px; margin-right: 4px; }
/* 2.24 (21): the driver search list */
.drvlist { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 6px; }
.drvlist .dp-card { width: 100%; justify-content: flex-start; text-align: left; }
.drvlist .dp-card[hidden] { display: none; }
/* 2.24 (24): document boxes of one size */
.dcards { align-items: stretch; }
.dcards > .dcard, .dcards > div > .dcard { height: 100%; display: flex; flex-direction: column; }
.dcard .dc-note { margin-top: auto; }
.dc-iss { display: flex; align-items: center; gap: 10px; }
.dc-iss span { font-size: 13px; font-weight: 750; white-space: nowrap; }
.dc-iss input { flex: 1; min-height: 38px !important; }
.dc-mini .dc-iss span { font-size: 12px; } .dc-mini .dc-iss input { min-height: 34px !important; font-size: 14px; padding: 5px 9px; }
/* 2.24 (38): approval proof */
.pastebox { min-height: 70px; border: 2px dashed var(--line-2); border-radius: 12px; display: grid; place-items: center; color: var(--ink-3); font-size: 13px; padding: 8px; cursor: text; }
.pastebox:focus { border-color: var(--blue, #0a84ff); outline: none; }
.pastebox img { max-width: 100%; max-height: 160px; border-radius: 8px; }
.apprproof .sigpad { width: 100%; height: 160px; background: #fff; border: 1px solid var(--line-2); border-radius: 12px; touch-action: none; }
.pact select { min-width: 140px; } .pact-h, .pact .check { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.pr-grp td { background: var(--surface-2); }
.labint { display: block; color: var(--ink-3); } .labint.lab-under { color: var(--amber); font-weight: 700; }