/* Giao diện dành cho người lớn tuổi, đọc được ngoài trời nắng và trên điện thoại:
   một bộ màu sáng duy nhất, tương phản tối đa (chữ chính trên 15:1), viền đậm, nhãn trạng thái nền đặc chữ trắng.
   Cố ý không có chế độ tối: màn hình tối phản chiếu và khó đọc hơn khi gặp nắng.
   Mọi kích thước dùng rem; cỡ chữ nền 18px. */
:root {
  color-scheme: light;
  --bg: #e4e8ed;
  --surface: #ffffff;
  --surface-2: #eef1f5;
  --th: #dfe5ec;
  --ink: #0a0f14;
  --ink-2: #1f2933;
  --muted: #3a4654;
  --line: #7f8a97;
  --line-strong: #3f4a56;
  --accent: #073b84;
  --accent-ink: #ffffff;
  --accent-soft: #cfe0f6;
  --accent-text: #073b84;
  --ok: #075c28;
  --ok-ink: #ffffff;
  --ok-soft: #cdeedb;
  --ok-text: #064d22;
  --warn: #7a4200;
  --warn-soft: #ffe39a;
  --warn-text: #4d2a00;
  --bad: #a10f0f;
  --bad-soft: #ffd3cf;
  --bad-text: #7a0a0a;
  --focus: #d35400;
  --plate-bg: #ffffff;
  --plate-ink: #000000;
  --chart-cost: #b45309;
  --chart-profit: #1d4ed8;
  --shadow: 0 1px 3px rgba(10, 15, 20, .25);
  --overlay: rgba(10, 16, 22, .7);
  --f-body: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { height: 100%; font-size: 18px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100%; background: var(--bg); color: var(--ink);
  font: 500 1rem/1.6 var(--f-body); -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1, h2, h3 { margin: 0; text-wrap: balance; line-height: 1.25; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.ic { flex: none; }

/* ---------- Khung ứng dụng ---------- */
.app { display: grid; grid-template-columns: clamp(14.5rem, 20vw, 17rem) minmax(0, 1fr); min-height: 100vh; }
.side {
  position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; background: var(--surface);
  border-right: 2px solid var(--line); display: flex; flex-direction: column; padding: 1.1rem .8rem; gap: .5rem;
}
.brand { display: flex; align-items: center; gap: .7rem; padding: .2rem .4rem 1rem; }
.brand-mark {
  width: 2.6rem; height: 2.6rem; border-radius: .6rem; background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; font-weight: 700; font-size: 1.3rem;
}
.brand b { display: block; font-size: 1.15rem; line-height: 1.15; }
.brand small { font-size: .875rem; color: var(--muted); }
.side nav { display: grid; gap: .4rem; }
.nav-btn {
  display: flex; align-items: center; gap: .8rem; width: 100%; min-height: 3.4rem; padding: .5rem .8rem;
  border: 2px solid transparent; border-radius: .7rem; background: transparent; color: var(--ink); text-align: left; font-weight: 600; font-size: 1rem; line-height: 1.25;
}
.nav-btn:hover { background: var(--surface-2); border-color: var(--line); }
.nav-btn[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.nav-btn .badge {
  margin-left: auto; min-width: 1.7rem; padding: 0 .5rem; border-radius: 999px; background: var(--ink);
  color: #fff; font-size: .9rem; font-weight: 700; text-align: center; line-height: 1.6rem;
}
.nav-btn[aria-current="page"] .badge { background: var(--accent-ink); color: var(--accent); }
.nav-btn .badge.bad { background: var(--bad); color: #fff; }
.nav-btn[aria-current="page"] .badge.bad { background: var(--bad); color: #fff; border: 2px solid #fff; }
.side-foot { margin-top: auto; display: grid; gap: .6rem; padding-top: .9rem; border-top: 2px solid var(--line); }

.main { min-width: 0; display: flex; flex-direction: column; }
.top {
  position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: .7rem .9rem; padding: .8rem 1.5rem;
  background: var(--bg); border-bottom: 2px solid var(--line);
}
.search { flex: 1 1 18rem; max-width: 42rem; display: flex; gap: .5rem; }
.search-field { position: relative; flex: 1; min-width: 0; }
.search-field > .ic { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search input {
  width: 100%; height: 3.25rem; padding: 0 1rem 0 2.8rem; border: 2px solid var(--line-strong); border-radius: .7rem;
  background: var(--surface); font-size: 1rem;
}
.search input::placeholder { color: var(--muted); opacity: 1; }
.suggest {
  position: absolute; left: 0; right: 0; top: 3.6rem; background: var(--surface); border: 2px solid var(--line-strong);
  border-radius: .7rem; box-shadow: var(--shadow); overflow: hidden; z-index: 30;
}
.suggest button {
  display: flex; align-items: center; gap: 1rem; width: 100%; min-height: 3.6rem; padding: .6rem 1rem; border: 0; background: none;
  text-align: left; border-bottom: 2px solid var(--line);
}
.suggest button:last-child { border-bottom: 0; }
.suggest button:hover, .suggest button:focus-visible { background: var(--accent-soft); }
.suggest .empty { padding: 1rem; color: var(--ink-2); }
.top .spacer { display: none; }
.page { padding: 1.6rem 1.5rem 2.5rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; align-content: start; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: .8rem 1.4rem; flex-wrap: wrap; }
.page-head h1 { font-size: 2rem; font-weight: 700; }
.page-head p { margin: .3rem 0 0; color: var(--ink-2); max-width: 46rem; }
.row { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }

/* ---------- Nút, biển số, nhãn trạng thái ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.1rem; padding: 0 1.3rem;
  border: 3px solid var(--line-strong); border-radius: .7rem; background: var(--surface); color: var(--ink); font-weight: 700; line-height: 1.2;
}
.btn:hover { background: var(--accent-soft); border-color: var(--ink); }
.top .btn { white-space: nowrap; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.25); background: var(--accent); }
.btn.ok { background: var(--ok); border-color: var(--ok); color: var(--ok-ink); }
.btn.ok:hover { background: var(--ok); filter: brightness(1.25); }
.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.danger:hover { background: var(--bad); filter: brightness(1.25); }
.btn.sm { min-height: 2.7rem; padding: 0 1rem; font-size: .95rem; }
.btn.ghost { background: transparent; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.icon-btn {
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 2px solid transparent; border-radius: .6rem; background: none; color: var(--ink-2);
}
.icon-btn:hover { background: var(--bad-soft); color: var(--bad-text); border-color: var(--bad); }
.plate {
  display: inline-block; padding: .05rem .6rem; border: 2px solid var(--plate-ink); border-radius: .4rem; background: var(--plate-bg);
  color: var(--plate-ink); font: 700 1.15rem/1.45 var(--f-mono); letter-spacing: .04em; white-space: nowrap;
}
.plate.lg { font-size: 1.7rem; padding: .1rem .8rem; border-radius: .5rem; border-width: 3px; }
.pill {
  display: inline-flex; align-items: center; gap: .45rem; padding: .15rem .8rem; border-radius: 999px; font-size: .9rem; font-weight: 700;
  white-space: nowrap; background: var(--ink-2); color: #fff; border: 2px solid transparent;
}
.pill::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: #fff; }
.pill.doing { background: var(--warn); }
.pill.wait { background: var(--accent); }
.pill.done { background: var(--ok); }
.pill.bad { background: var(--bad); }

.panel { background: var(--surface); border: 2px solid var(--line); border-radius: .9rem; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: 1rem 1.2rem; border-bottom: 2px solid var(--line); flex-wrap: wrap; }
.panel-head h2 { font-size: 1.3rem; font-weight: 700; }

/* ---------- Số liệu nhanh ---------- */
.stats { display: flex; gap: 1rem 2.4rem; flex-wrap: wrap; padding: 1.1rem 1.3rem; background: var(--surface); border: 2px solid var(--line); border-radius: .9rem; }
.stat { min-width: 9rem; }
.stat small { display: block; color: var(--ink-2); font-size: .95rem; font-weight: 600; }
.stat b { display: block; font-size: 2.1rem; line-height: 1.25; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat b.bad { color: var(--bad); }
.stat span { display: block; font-size: .95rem; color: var(--muted); }

/* ---------- Xe đang sửa ---------- */
.board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; align-items: start; }
.col-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; }
.col-head h2 { font-size: 1.4rem; font-weight: 700; }
.col-head .count { min-width: 2rem; padding: 0 .6rem; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 700; text-align: center; line-height: 2rem; }
.cards { display: grid; gap: .9rem; }
.ro-card {
  display: grid; gap: .55rem; width: 100%; padding: 1.1rem 1.2rem; text-align: left; background: var(--surface);
  border: 2px solid var(--line-strong); border-radius: .9rem; box-shadow: var(--shadow);
}
.ro-card:hover { border-color: var(--accent); background: var(--accent-soft); }
.ro-card.flash { animation: flash 2.4s ease-out; }
@keyframes flash { 0%, 50% { box-shadow: 0 0 0 4px var(--focus); } 100% { box-shadow: var(--shadow); } }
.ro-card .top-line { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.ro-card .ro-no { margin-left: auto; color: var(--muted); font-size: .95rem; font-variant-numeric: tabular-nums; }
.ro-card .who { font-weight: 700; font-size: 1.1rem; }
.ro-card .who span { font-weight: 400; color: var(--ink-2); margin-left: .7rem; }
.ro-card .desc { color: var(--ink); font-weight: 500; }
.ro-card .foot { display: flex; justify-content: space-between; gap: .5rem 1rem; color: var(--ink-2); font-size: .95rem; flex-wrap: wrap; }
.ro-card .foot b { color: var(--ink); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.empty-box { padding: 1.8rem 1.2rem; border: 2px dashed var(--line-strong); border-radius: .9rem; color: var(--ink-2); text-align: center; }

/* ---------- Bảng ---------- */
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .8rem .9rem; text-align: left; border-bottom: 2px solid var(--line); vertical-align: middle; }
th { font-size: .95rem; font-weight: 700; color: var(--ink); background: var(--th); line-height: 1.3; vertical-align: bottom; }
td.r, th.r { text-align: right; }
td.r { font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody tr:nth-child(even) td { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: 0; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--accent-soft); }
tr.low td, tr.low:nth-child(even) td { background: var(--bad-soft); }
tr.low td:first-child { border-left: .55rem solid var(--bad); color: var(--bad-text); font-weight: 700; }
tr.low td.stock b { color: var(--bad-text); }
tr.low:hover td { background: var(--bad-soft); }
tfoot td { font-weight: 700; background: var(--surface-2); border-top: 3px solid var(--line-strong); }
td small { display: block; color: var(--muted); font-size: .875rem; }
.code { font-family: var(--f-mono); font-size: .875rem; white-space: nowrap; }
td.stock .pill { display: flex; width: max-content; margin: .2rem 0 0 auto; }
.row-actions { display: grid; gap: .4rem; justify-items: stretch; }
.row-actions .btn { min-width: 5.2rem; }
#labor { -moz-appearance: textfield; }
#labor::-webkit-inner-spin-button, #labor::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- Kho ---------- */
.field-inline { position: relative; flex: 1; min-width: 12rem; max-width: 24rem; }
.field-inline input { width: 100%; height: 3.1rem; padding: 0 1rem; border: 2px solid var(--line-strong); border-radius: .7rem; background: var(--surface); }
details.imp { border-bottom: 2px solid var(--line); }
details.imp:last-child { border-bottom: 0; }
details.imp summary { display: flex; gap: .8rem 1.2rem; align-items: center; padding: 1rem 1.2rem; cursor: pointer; list-style: none; flex-wrap: wrap; min-height: 3.4rem; }
details.imp summary::-webkit-details-marker { display: none; }
details.imp summary::before { content: "▸"; font-size: 1.1rem; }
details.imp[open] summary::before { content: "▾"; }
details.imp summary:hover { background: var(--accent-soft); }
details.imp summary .sum { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
details.imp .inner { padding: 0 1.2rem 1rem; }

/* ---------- Lịch sử ---------- */
.veh-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: .9rem; }
.veh-card { display: grid; gap: .4rem; padding: 1.1rem 1.2rem; text-align: left; background: var(--surface); border: 2px solid var(--line-strong); border-radius: .9rem; }
.veh-card:hover { border-color: var(--accent); background: var(--accent-soft); }
.veh-card .meta { color: var(--ink-2); font-size: .95rem; }
.profile-head { display: flex; gap: 1rem 2rem; align-items: center; flex-wrap: wrap; padding: 1.3rem; }
.profile-head .who b { font-size: 1.25rem; }
.profile-head .who div { color: var(--ink-2); }
.profile-stats { display: flex; gap: .8rem 2.2rem; flex-wrap: wrap; margin-left: auto; }
.timeline { list-style: none; margin: 0; padding: .4rem 1.2rem .8rem; display: grid; }
/* Thông tin xe: lưới nhãn và giá trị, co theo chiều rộng. */
.vehicle-info { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .9rem 1.4rem; margin: 0; padding: 1rem 1.2rem 1.2rem; }
.vehicle-info div { min-width: 0; }
.vehicle-info dt { color: var(--ink-2); font-size: .9rem; }
.vehicle-info dd { margin: .15rem 0 0; font-weight: 700; overflow-wrap: anywhere; }
.vehicle-info dd.muted { font-weight: 400; }
.tl-item { position: relative; padding: 0 0 0 2.1rem; }
.tl-item::before { content: ""; position: absolute; left: .55rem; top: 1.7rem; bottom: -.4rem; width: 3px; background: var(--line-strong); }
.tl-item:last-child::before { display: none; }
.tl-item::after { content: ""; position: absolute; left: 0; top: 1.05rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--surface); border: 4px solid var(--accent); }
.tl-item.open::after { border-color: var(--focus); }
.tl-btn { display: grid; gap: .3rem; width: 100%; padding: .8rem .4rem; border: 0; border-radius: .6rem; background: none; text-align: left; }
.tl-btn:hover { background: var(--accent-soft); }
.tl-btn .l1 { display: flex; gap: .5rem 1rem; align-items: center; flex-wrap: wrap; }
.tl-btn .l1 .date { font-weight: 700; font-size: 1.1rem; }
.tl-btn .l1 .total { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.tl-btn .l2 { color: var(--ink); }
.tl-detail { margin: 0 0 1rem; border: 2px solid var(--line); border-radius: .7rem; overflow: hidden; background: var(--surface); }
.tl-detail td, .tl-detail th { padding: .6rem .9rem; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-bottom: .6rem; }
.section-title h3 { font-size: 1.2rem; font-weight: 700; }

/* ---------- Báo cáo ---------- */
.seg { display: inline-flex; border: 2px solid var(--line-strong); border-radius: .7rem; overflow: hidden; background: var(--surface); flex-wrap: wrap; }
.seg button { min-height: 2.9rem; padding: 0 1rem; border: 0; border-right: 2px solid var(--line-strong); background: none; font-weight: 600; color: var(--ink); }
.seg button:last-child { border-right: 0; }
.seg button:hover { background: var(--accent-soft); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.filters { display: flex; gap: .8rem 1.4rem; flex-wrap: wrap; align-items: center; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border: 2px solid var(--line); border-radius: .9rem; overflow: hidden; }
.kpi { padding: 1.1rem 1.2rem; border-right: 2px solid var(--line); min-width: 0; }
.kpi:last-child { border-right: 0; }
.kpi small { display: block; color: var(--ink-2); font-size: .95rem; font-weight: 600; }
.kpi b { display: block; font-size: 1.7rem; line-height: 1.3; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi span { display: block; color: var(--muted); font-size: .95rem; line-height: 1.4; }
.kpi.hl { background: #fff; box-shadow: inset .5rem 0 0 var(--ok); padding-left: 1.7rem; }
.kpi.hl b { color: var(--ok-text); }
.legend { display: flex; gap: .6rem 1.4rem; flex-wrap: wrap; color: var(--ink); font-size: .95rem; font-weight: 600; }
.legend i { display: inline-block; width: 1rem; height: 1rem; border-radius: .25rem; margin-right: .5rem; vertical-align: -.1rem; }
.chart-box { position: relative; padding: .6rem .9rem 1rem; }
.chart-box svg { display: block; width: 100%; height: auto; }
.chart-box text { fill: var(--ink); font: 600 14px var(--f-body); }
.chart-box .peak { fill: var(--ink); font-weight: 700; }
.chart-box .grid { stroke: var(--line); stroke-width: 1.5; }
.tip {
  position: absolute; z-index: 5; pointer-events: none; min-width: 14rem; padding: .8rem 1rem; background: var(--surface);
  border: 2px solid var(--ink-2); border-radius: .7rem; box-shadow: var(--shadow); font-size: .95rem;
}
.tip b { display: block; margin-bottom: .3rem; font-size: 1.05rem; }
.tip div { display: flex; justify-content: space-between; gap: 1.2rem; font-variant-numeric: tabular-nums; }
.tip i { display: inline-block; width: .7rem; height: .7rem; border-radius: .15rem; margin-right: .4rem; }
.profit-pos { color: var(--ok-text); font-weight: 700; }
.profit-neg { color: var(--bad-text); font-weight: 700; }

/* ---------- Hộp thoại ---------- */
.overlay { position: fixed; inset: 0; z-index: 60; background: var(--overlay); display: grid; place-items: start center; padding: 3vh 1rem; overflow-y: auto; }
.modal {
  width: 100%; max-width: 52rem; background: var(--surface); border: 2px solid var(--line-strong); border-radius: 1rem;
  box-shadow: 0 1.2rem 3.5rem rgba(0, 0, 0, .4); display: flex; flex-direction: column; min-width: 0;
}
.modal.narrow { max-width: 34rem; }
.modal-head { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.3rem; border-bottom: 2px solid var(--line); flex-wrap: wrap; }
.modal-head h2 { font-size: 1.5rem; font-weight: 700; }
.modal-head .grow { flex: 1; }
.modal-body { padding: 1.3rem; display: grid; gap: 1.4rem; min-width: 0; }
.modal-foot { display: flex; gap: .8rem; justify-content: flex-end; flex-wrap: wrap; padding: 1rem 1.3rem; border-top: 2px solid var(--line); background: var(--surface-2); border-radius: 0 0 1rem 1rem; }
.modal-foot .left { margin-right: auto; }
.customer { display: flex; gap: .7rem 1.6rem; flex-wrap: wrap; align-items: center; }
.customer b { font-size: 1.15rem; }
.customer .cond { flex-basis: 100%; padding: .8rem 1rem; border-radius: .7rem; background: #fff; border: 2px solid var(--line-strong); color: var(--ink); }
.order-info { flex-basis: 100%; display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: .8rem 1rem; align-items: end; }
.order-info textarea { resize: vertical; }
@media (max-width: 640px) { .order-info { grid-template-columns: 1fr; } }
.head-sub { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.head-actions { display: flex; gap: .5rem; }
/* Đầu hộp thoại lệnh: ba nút vuông cùng cỡ (Lưu, Xóa lệnh, Đóng). */
.modal-head:has(.head-actions) { gap: .6rem .8rem; }
.modal-head:has(.head-actions) .icon-btn { width: 2.9rem; height: 2.9rem; border-color: var(--line-strong); background: var(--surface); }
.modal-head:has(.head-actions) .icon-btn:hover { background: var(--bad-soft); }
.icon-btn.save { color: var(--accent); }
.modal-head:has(.head-actions) .icon-btn.save:hover { background: var(--accent-soft); border-color: var(--accent); }
.modal-head:has(.head-actions) .icon-btn.save.dirty { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.modal-head:has(.head-actions) .icon-btn.save.dirty:hover { filter: brightness(1.25); background: var(--accent); }
.icon-btn.danger { color: var(--bad); }
.modal-head:has(.head-actions) .icon-btn.danger:hover { border-color: var(--bad); color: var(--bad-text); }
.dirty-note { display: inline-flex; align-items: center; gap: .4rem; padding: .1rem .7rem; border-radius: 999px; border: 2px solid var(--warn); background: var(--warn-soft); color: var(--ink); font-size: .85rem; font-weight: 700; white-space: nowrap; }
.dirty-note i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--warn); }
.dirty-note[hidden] { display: none; }
.confirm-order p, .confirm-discard p { margin: 0 0 .8rem; }
.form { display: grid; gap: 1.1rem; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
label.f { display: grid; gap: .4rem; font-weight: 700; min-width: 0; }
label.f small { font-weight: 400; color: var(--ink-2); font-size: .9rem; }
.in, label.f input, label.f select, label.f textarea {
  width: 100%; min-height: 3.1rem; padding: .55rem .9rem; border: 2px solid var(--line-strong); border-radius: .7rem; background: var(--surface); font-weight: 400;
}
/* Popup xác nhận đổi thông tin khách: bảng cũ -> mới. */
.confirm-vehicle p { margin: 0 0 .8rem; }
.confirm-diff { border-collapse: collapse; margin: 0 0 1rem; width: 100%; }
.confirm-diff tr, .confirm-diff th, .confirm-diff td, .confirm-diff tbody tr:nth-child(even), .confirm-diff tbody tr:nth-child(odd) { background: none; border: 0; }
.confirm-diff th { text-align: left; font-weight: 400; color: var(--muted); padding: .3rem .8rem .3rem 0; white-space: nowrap; }
.confirm-diff td { padding: .3rem .5rem .3rem 0; overflow-wrap: anywhere; }
label.f input[readonly] { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
textarea { resize: vertical; }
input[type="number"] { font-variant-numeric: tabular-nums; }
.hint { padding: .7rem 1rem; border-radius: .7rem; background: #fff; color: var(--ink); border: 3px solid var(--accent); font-size: .95rem; font-weight: 600; }
.hint.warn { background: var(--warn-soft); border-color: var(--warn); }

.picker { position: relative; }
.picker input { width: 100%; height: 3.3rem; padding: 0 1rem; border: 3px solid var(--accent); border-radius: .7rem; background: var(--surface); }
.picker input::placeholder { color: var(--muted); opacity: 1; }
.picker .results {
  display: none; position: absolute; left: 0; right: 0; top: 3.7rem; z-index: 10; max-height: 20rem; overflow-y: auto;
  background: var(--surface); border: 2px solid var(--line-strong); border-radius: .7rem; box-shadow: var(--shadow);
}
.picker:focus-within .results { display: block; }
.picker .results button {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem 1rem; width: 100%; min-height: 3.6rem; padding: .6rem 1rem; border: 0; border-bottom: 2px solid var(--line);
  background: none; text-align: left;
}
.picker .results button:last-child { border-bottom: 0; }
.picker .results button:hover:not(:disabled) { background: var(--accent-soft); }
.picker .results button:disabled { opacity: .6; cursor: not-allowed; }
.picker:has(textarea) { display: block; }
.picker .results:empty { display: none !important; }
.picker textarea ~ .results { top: 100%; margin-top: .2rem; }
.picker .results small { color: var(--ink-2); font-size: .9rem; }
.picker .results .r { text-align: right; font-variant-numeric: tabular-nums; }
.stock-bad { color: var(--bad-text); font-weight: 700; }

.lines { display: grid; margin-top: .8rem; border: 2px solid var(--line); border-radius: .8rem; }
.line, .lines-head {
  display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem 9.5rem 8.5rem 2.75rem; gap: .7rem; align-items: center; padding: .7rem .9rem; border-bottom: 2px solid var(--line);
}
.lines-head { background: var(--surface-2); font-size: .9rem; font-weight: 700; border-radius: .7rem .7rem 0 0; }
.line:last-child { border-bottom: 0; }
.line .l-name b { display: block; }
.line .l-name small { color: var(--ink-2); font-size: .875rem; }
.line input { width: 100%; min-height: 2.8rem; padding: .2rem .6rem; border: 2px solid var(--line-strong); border-radius: .6rem; background: var(--surface); text-align: right; }
.line .l-qty { display: flex; align-items: center; gap: .4rem; }
.line .l-qty .unit { color: var(--ink-2); font-size: .9rem; }
.line .l-total, .lines-head .r { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.lines-empty { padding: 1.3rem; text-align: center; color: var(--ink-2); border: 2px dashed var(--line-strong); border-radius: .8rem; margin-top: .8rem; }
.under { color: var(--bad-text); font-size: .9rem; font-weight: 700; }

.sum-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.1rem; align-items: stretch; }
.labor { display: grid; gap: .5rem; align-content: start; }
.labor input { min-height: 3.6rem; font: 700 1.5rem var(--f-body); text-align: right; }
.totals { display: grid; gap: .5rem; padding: 1.1rem 1.2rem; border-radius: .8rem; background: var(--surface-2); border: 2px solid var(--line); }
.totals .t { display: flex; justify-content: space-between; gap: 1rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.totals .grand { padding-top: .7rem; margin-top: .2rem; border-top: 2px solid var(--line-strong); color: var(--ink); align-items: baseline; font-weight: 700; }
.totals .grand b { font-size: 2.1rem; line-height: 1.1; }
.totals .profit { color: var(--ok-text); font-weight: 700; }
.totals .profit.neg { color: var(--bad-text); }

.imp-row { display: grid; grid-template-columns: minmax(0, 1.6fr) 7.5rem 10rem 2.75rem; gap: .7rem; align-items: start; padding: .9rem 0; border-bottom: 2px solid var(--line); }
.imp-row .prev { grid-column: 1 / -1; font-size: .95rem; color: var(--ink-2); }
.imp-row .prev b { color: var(--ok-text); }
.imp-row select, .imp-row input { width: 100%; min-height: 3.1rem; padding: .4rem .8rem; border: 2px solid var(--line-strong); border-radius: .7rem; background: var(--surface); }
.imp-row input { text-align: right; }

/* ---------- Phiếu K80 (giấy in, luôn nền trắng chữ đen) ---------- */
.receipt {
  width: 302px; max-width: 100%; margin: 0 auto; padding: 18px 14px; background: #fff; color: #111;
  font: 13px/1.5 var(--f-mono); border: 2px solid #999; box-shadow: var(--shadow);
}
.receipt h3 { margin: 0; text-align: center; font: 700 17px/1.2 var(--f-mono); text-transform: uppercase; }
.receipt .c { text-align: center; }
.receipt hr { border: 0; border-top: 2px dashed #444; margin: 8px 0; }
.receipt .rl { display: flex; justify-content: space-between; gap: 8px; }
.receipt .item { margin-bottom: 4px; }
.receipt .item .n { display: block; }
.receipt .grand { font-size: 16px; font-weight: 700; }

/* ---------- Thông báo ---------- */
#toast-root { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 100; display: grid; gap: .6rem; width: min(34rem, calc(100% - 2rem)); pointer-events: none; }
.toast {
  padding: 1rem 1.3rem; border-radius: .8rem; background: var(--ink); color: #fff; box-shadow: 0 .4rem 1.4rem rgba(0, 0, 0, .35);
  animation: toast-in .2s ease-out; font-weight: 700; font-size: 1.05rem; line-height: 1.45; border: 2px solid var(--ink);
}
.toast.err { background: var(--bad); color: #fff; border-color: #fff; }
@keyframes toast-in { from { transform: translateY(.5rem); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .toast, .ro-card.flash { animation: none; } }

.mobile-only { display: none; }

/* ---------- Máy tính bảng ---------- */
@media (max-width: 1100px) {
  .board { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi:nth-child(2) { border-right: 0; }
  .kpi:nth-child(-n + 2) { border-bottom: 2px solid var(--line); }
}

/* ---------- Điện thoại ---------- */
@media (max-width: 760px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: auto; z-index: 40; flex-direction: row; gap: .2rem; overflow: visible;
    border-right: 0; border-top: 2px solid var(--line-strong); padding: .4rem .4rem calc(.4rem + env(safe-area-inset-bottom, 0px));
  }
  .brand, .side-foot { display: none; }
  .side nav { flex: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .2rem; }
  .nav-btn { flex-direction: column; gap: .15rem; min-height: 4.2rem; padding: .4rem .1rem; font-size: .85rem; line-height: 1.2; text-align: center; justify-content: center; position: relative; }
  .nav-btn .badge { position: absolute; top: 0; right: 4%; margin: 0; min-width: 1.5rem; line-height: 1.5rem; font-size: .85rem; padding: 0 .35rem; }
  .top { position: static; flex-wrap: wrap; padding: .7rem 1rem; gap: .6rem; }
  .kpis { grid-template-columns: minmax(0, 1fr); }
  .kpi, .kpi:nth-child(2) { border-right: 0; border-bottom: 2px solid var(--line); }
  .kpi:last-child { border-bottom: 0; }
  .top .spacer { display: none; }
  .search { flex-basis: 100%; max-width: none; order: 3; }
  .top > .btn.primary { flex: 1; }
  .page { padding: 1.2rem 1rem 7rem; }
  .page-head h1 { font-size: 1.7rem; }
  .mobile-only { display: grid; gap: .6rem; }
  .kpi { padding: .9rem 1rem; }
  .kpi b { font-size: 1.35rem; }
  .profile-stats { margin-left: 0; }
  .overlay { padding: 0; }
  .modal { max-width: none; border-radius: 0; min-height: 100vh; border: 0; }
  .modal-foot { border-radius: 0; position: sticky; bottom: 0; padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
  .modal-foot .btn { flex: 1 1 100%; margin: 0; }
  .page-head .row { width: 100%; }
  .page-head .row .btn { flex: 1 1 auto; }
  .modal-body { padding: 1.1rem 1rem; }
  .modal-head { flex-wrap: wrap; gap: .4rem .7rem; }
  .modal-head { padding: .9rem 1rem; }
  /* Tiêu đề và các nút vuông ở hàng trên, trạng thái ở hàng dưới */
  .modal-head:has(.head-actions) h2 { order: 1; }
  .modal-head:has(.head-actions) .grow { order: 2; }
  .modal-head:has(.head-actions) .head-actions { order: 3; gap: .5rem; }
  .modal-head:has(.head-actions) > .icon-btn { order: 4; }
  .modal-head .head-sub { order: 5; flex: 1 1 100%; }
  .modal-head:has(.head-actions) { gap: .5rem .5rem; }
  .modal-head:has(.head-actions) .icon-btn { width: 2.5rem; height: 2.5rem; }
  .modal-head h2 { font-size: 1.35rem; white-space: nowrap; }
  .modal-head .pill { font-size: .85rem; padding: .1rem .6rem; }
  .form .two, .sum-grid { grid-template-columns: 1fr; }
  .lines-head { display: none; }
  .line { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 2.75rem; grid-template-areas: "name name del" "qty price price" "total total total"; }
  .line .l-name { grid-area: name; }
  .line .l-qty { grid-area: qty; }
  .line .l-price { grid-area: price; }
  .line .l-total { grid-area: total; text-align: right; }
  .line .icon-btn { grid-area: del; }
  .imp-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 2.75rem; }
  .imp-row .part { grid-column: 1 / -1; }

  /* Bảng dữ liệu thành thẻ xếp dọc: mỗi số có nhãn, không phải vuốt ngang */
  table.stack, table.stack tbody, table.stack tfoot, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack thead { position: absolute; left: -9999px; }
  table.stack tr { padding: .9rem 1rem; border-bottom: 3px solid var(--line); }
  table.stack tbody tr:last-child { border-bottom: 0; }
  table.stack td, table.stack tbody tr:nth-child(even) td, table.stack tr.low td, table.stack tfoot td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .3rem 0; border: 0; background: transparent; text-align: right;
  }
  table.stack td[data-label]::before { content: attr(data-label); flex: none; max-width: 48%; font-weight: 700; color: var(--ink-2); text-align: left; white-space: normal; }
  table.stack td.code { justify-content: flex-start; text-align: left; font-weight: 700; }
  table.stack td.name, table.stack tbody tr:nth-child(even) td.name, table.stack tr.low td.name { display: block; text-align: left; font-weight: 700; font-size: 1.1rem; }
  table.stack td.name small { font-weight: 500; font-size: .95rem; color: var(--ink-2); }
  table.stack td.stock, table.stack tbody tr:nth-child(even) td.stock, table.stack tr.low td.stock { flex-wrap: wrap; justify-content: flex-start; row-gap: .3rem; }
  table.stack td.stock::before { flex-basis: 100%; max-width: none; }
  table.stack tr.low { background: var(--bad-soft); border-left: .55rem solid var(--bad); }
  table.stack tr.low td:first-child { border-left: 0; }
  table.stack td.stock .pill { margin: 0 0 0 .8rem; }
  table.stack td.stock small { display: none; }
  table.stack td.actions { display: block; padding-top: .7rem; }
  table.stack td.actions .row-actions { grid-template-columns: 1fr 1fr; }
  table.stack tfoot tr { background: var(--th); border-top: 3px solid var(--line-strong); }
  table.stack tr.clickable:hover td { background: transparent; }
}

/* ---------- In phiếu K80 ---------- */
/* Dải cảnh báo môi trường thử nghiệm */
.env-banner { position: sticky; top: 0; z-index: 60; padding: .4rem .8rem; text-align: center; font-weight: 700; font-size: .9rem; background: var(--warn-soft); color: var(--warn-text); border-bottom: 3px solid var(--warn); }
html[data-env="staging"] .app { min-height: calc(100vh - 2.4rem); }
@media print { .env-banner { display: none; } }
@media print {
  @page { size: 80mm auto; margin: 0; }
  body { background: #fff; }
  .app, #modal-root, #toast-root, .receipt-actions { display: none !important; }
  #receipt-root .overlay { position: static; padding: 0; background: none; display: block; overflow: visible; }
  #receipt-root .modal { box-shadow: none; border: 0; max-width: none; min-height: 0; background: none; }
  #receipt-root .modal-head, #receipt-root .modal-foot, #receipt-root .print-hide { display: none !important; }
  #receipt-root .modal-body { padding: 0; }
  .receipt { width: 72mm; border: 0; box-shadow: none; margin: 0 auto; }
}

/* Màn đăng nhập */
.login { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.login-card { width: min(26rem, 100%); background: var(--surface); border: 3px solid var(--line-strong); border-radius: 1rem; padding: 1.6rem; }
.login-card .brand { padding: 0 0 .4rem; }
.login-error:empty { display: none; }
.who-am-i { font-size: .95rem; color: var(--muted); }
.who-am-i b { color: var(--ink); }
[hidden] { display: none !important; }

/* Gợi ý khách và xe trong hộp thoại tiếp nhận */
.suggest-box:empty { display: none; }
.suggest-box { display: flex; flex-direction: column; border: 3px solid var(--accent); border-radius: .7rem; background: var(--surface); overflow: hidden; }
.suggest-box button { display: flex; align-items: center; gap: .8rem; padding: .6rem 1rem; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--line, #ddd); cursor: pointer; }
.suggest-box button:last-child { border-bottom: 0; }
.suggest-box button:hover { background: var(--accent-soft); }
.suggest-box small { color: var(--ink-2); font-size: .9rem; }

/* Dòng công trong lệnh sửa chữa */
.labor-line { display: grid; grid-template-columns: minmax(0, 1fr) 11rem 2.75rem; gap: .7rem; align-items: center; padding: .7rem .9rem; border-bottom: 2px solid var(--line); }
.labor-line:last-child { border-bottom: 0; }
.labor-line .l-name b { display: block; }
.labor-line .l-name small { color: var(--ink-2); font-size: .875rem; }
.labor-line input { width: 100%; min-height: 2.8rem; padding: .2rem .6rem; border: 2px solid var(--line-strong); border-radius: .6rem; background: var(--surface); text-align: right; }
.labor-line .l-amount { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.totals .t.sub { padding-left: 1rem; color: var(--ink-2); font-size: .95rem; }
.kpis.kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1rem; }
@media (max-width: 1100px) { .kpis.kpis-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .kpis.kpis-3 { grid-template-columns: minmax(0, 1fr); } .labor-line { grid-template-columns: minmax(0, 1fr) 2.75rem; } .labor-line .l-amount { grid-column: 1 / -1; } }