/* ===========================================================================
   ARS — giao diện tổng đài
   Ưu tiên MẬT ĐỘ hơn khoảng trắng: tổng đài cần nhìn nhiều dòng cùng lúc và
   thao tác nhanh, không phải một landing page thoáng đãng.
   Không dùng framework CSS — biến CSS + flex/grid là đủ.
   =========================================================================== */

:root {
    --bg: #f3f5f9;
    --surface: #ffffff;
    --surface-alt: #f8f9fc;
    --border: #e3e7ee;
    --text: #171e2c;
    --muted: #6b7280;
    --primary: #2f5fe0;
    --primary-dark: #2249b8;
    --primary-light: #eef2fe;
    --ok: #16824f;
    --ok-bg: #e4f6ec;
    --warn: #9a6200;
    --warn-bg: #fdf3e0;
    --danger: #c0293a;
    --danger-bg: #fdecee;

    /* Màu riêng cho từng trạng thái đơn. Hai họ màu tách bạch để không nhầm:
       lam = đã có xe, lục lam = đang lăn bánh, lục = xong, tím = cần xe hỗ trợ.
       Cam đặc và đỏ đặc dành riêng cho hai trạng thái cần người can thiệp. */
    --pending: #c2660a;
    --disputed: #c0293a;
    --transit: #0e7c88;
    --transit-bg: #dff4f6;
    --support: #7440d6;
    --support-bg: #f2ecfc;
    --resolved: #4d7a60;
    --resolved-bg: #eef5f0;

    --radius: 10px;
    --radius-sm: 7px;
    --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 1px rgba(16, 24, 40, .03);
    --shadow-md: 0 4px 14px rgba(16, 24, 40, .08), 0 1px 3px rgba(16, 24, 40, .06);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 14px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: ui-monospace, Consolas, monospace; font-size: .92em; }

/* --- Thanh trên cùng ------------------------------------------------------ */

.topbar {
    display: flex; align-items: center; gap: 24px;
    padding: 0 22px; height: 56px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(16, 24, 40, .02);
    position: sticky; top: 0; z-index: 10;
    /* Thiếu min-width:0 thì các phần tử flex không co lại được, thanh này
       cứng hơn màn hình và đẩy CẢ TRANG tràn ngang trên điện thoại. */
    min-width: 0;
}
.topbar > * { min-width: 0; }
.brand {
    font-weight: 800; font-size: 17px; color: var(--text);
    display: flex; align-items: center; gap: 8px; letter-spacing: -.01em;
}
.brand::before {
    content: ''; width: 9px; height: 9px; border-radius: 3px;
    background: linear-gradient(135deg, var(--primary), #7aa0ff); flex: none;
}
.brand span {
    display: block; font-size: 11px; font-weight: 400;
    color: var(--muted); letter-spacing: .02em;
}
.nav { display: flex; gap: 2px; flex: 1; }
.nav a {
    padding: 7px 13px; border-radius: var(--radius-sm);
    color: var(--muted); font-weight: 500; transition: background .12s, color .12s;
}
.nav a:hover { background: var(--surface-alt); color: var(--text); text-decoration: none; }
.nav a.active { background: var(--primary-light); color: var(--primary); font-weight: 600; }

.topbar-right { display: flex; align-items: center; gap: 12px; }
.who { color: var(--muted); font-size: 13px; }

.status-toggle {
    border: 1px solid transparent; border-radius: 20px;
    padding: 4px 14px; font-weight: 600; font-size: 12px; cursor: pointer;
    transition: filter .12s;
}
.status-toggle:hover { filter: brightness(.97); }
.status-toggle.available { background: var(--ok-bg); color: var(--ok); border-color: #b6e0c6; }
.status-toggle.busy { background: var(--warn-bg); color: var(--warn); border-color: #f0d9a8; }

/* --- Trang chủ công khai ---------------------------------------------------- */

.lead { color: var(--muted); max-width: 640px; margin-bottom: 20px; }
.home-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.route-block { padding: 12px 0; border-bottom: 1px solid var(--border); }
.route-block:last-child { border-bottom: none; }
.route-block h3 { margin: 0 0 8px; font-size: 15px; }
.home-features {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px; margin-top: 24px;
}
.home-features .feature { text-align: center; padding: 16px; }
.home-features .feature h3 { font-size: 15px; margin-bottom: 4px; }
.home-features .feature p { font-size: 13px; color: var(--muted); margin: 0; }

/* --- Footer ---------------------------------------------------------------- */

.site-footer {
    max-width: 1360px; margin: 40px auto 0; padding: 20px;
    border-top: 1px solid var(--border, #e3e6ea);
    display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center;
    justify-content: space-between; font-size: 13px; color: var(--muted);
}
.site-footer-links { display: flex; gap: 16px; }
.site-footer-links a { color: var(--muted); }
.site-footer-links a:hover { color: var(--primary); text-decoration: underline; }

/* --- Bố cục trang -------------------------------------------------------- */

.page { max-width: 1360px; margin: 0 auto; padding: 20px; }

.page-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; margin-bottom: 16px;
}
.page-head h1 { margin: 0; font-size: 22px; letter-spacing: -.015em; }
.page-head p { margin: 4px 0 0; font-size: 13px; }
.actions { display: flex; gap: 8px; }

.split { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.split-main { min-width: 0; }
.split-side { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 1000px) { .split { grid-template-columns: 1fr; } }

/* Bố cục có sidebar BÊN TRÁI — dùng ở màn nhập/sửa đơn.
   Khác .split (phụ nằm phải): ở đây danh sách đơn là thứ liếc nhìn liên tục
   trong lúc gõ, đặt bên trái đúng hướng đọc nên mắt không phải nhảy qua form. */
.with-sidebar { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
.with-sidebar-main { min-width: 0; }
/* Mốc 860px phải TRÙNG với mốc trong app.js (biến isMobile): dưới mốc này JS
   gập danh sách lại. Lệch nhau thì ở khoảng giữa sẽ có danh sách mở toang nằm
   trên, đẩy form xuống dưới màn hình. */
@media (max-width: 860px) {
    .with-sidebar { grid-template-columns: 1fr; }
}

.order-sidebar .panel { margin-bottom: 0; }
/* Dính theo cuộn: form dài hơn danh sách, cuộn xuống vẫn thấy đơn. */
.order-sidebar { position: sticky; top: 68px; }
.order-sidebar .mini-orders { max-height: calc(100vh - 160px); overflow-y: auto; }

.mini-orders { list-style: none; margin: 0; padding: 0; }
.mini-orders .mini-day {
    padding: 6px 12px; background: #fafbfc; border-bottom: 1px solid var(--border);
    font-size: 11px; font-weight: 600; color: var(--muted);
    text-transform: uppercase; letter-spacing: .04em;
    position: sticky; top: 0; z-index: 1;
}
.mini-orders li + .mini-day { border-top: 1px solid var(--border); }
.mini-orders > li > a {
    display: flex; gap: 8px; align-items: flex-start;
    padding: 8px 12px; border-bottom: 1px solid #eef1f4; color: var(--text);
}
.mini-orders > li > a:hover { background: #f7f9fc; text-decoration: none; }
.mini-orders > li.is-current > a { background: #eef4fd; box-shadow: inset 3px 0 0 var(--primary); }
.mini-time { font-weight: 700; font-size: 13px; min-width: 38px; }
.mini-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mini-main strong { font-size: 13px; font-weight: 500; }
.mini-main .truncate { max-width: 100%; }
.mini-orders .badge { font-size: 10px; padding: 1px 6px; }

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 16px;
    overflow: hidden;
    transition: box-shadow .15s;
}
.panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 16px; border-bottom: 1px solid var(--border); background: var(--surface-alt);
}
.panel-head h2 { margin: 0; font-size: 14px; font-weight: 600; }
.panel > .form, .panel > .stack, .panel > .empty,
.panel > p, .panel > ol, .panel > ul, .panel > .notif { padding: 16px; }

.tabs { display: flex; gap: 4px; margin-bottom: 16px; }
.tabs a {
    padding: 7px 14px; border-radius: var(--radius-sm);
    background: var(--surface); border: 1px solid var(--border); color: var(--muted);
    font-weight: 500; transition: background .12s, color .12s, border-color .12s;
}
.tabs a.active { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: var(--shadow); }
.tabs a:hover { text-decoration: none; border-color: var(--primary); color: var(--primary); }
.tabs a.active:hover { color: #fff; }

/* --- Thẻ số -------------------------------------------------------------- */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 20px; }
.card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px 16px;
    box-shadow: var(--shadow); color: var(--text);
    transition: box-shadow .15s, border-color .15s, transform .15s;
}
a.card:hover { border-color: var(--primary); text-decoration: none; box-shadow: var(--shadow-md); transform: translateY(-1px); }
.card-value { display: block; font-size: 27px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.card-value.small { font-size: 15px; }
.card-label { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.card-warn { border-color: #f0d9a8; background: var(--warn-bg); }

/* --- Bảng ---------------------------------------------------------------- */

.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th {
    text-align: left; padding: 10px 12px; font-weight: 600; font-size: 11.5px;
    color: var(--muted); background: var(--surface-alt); border-bottom: 1px solid var(--border);
    white-space: nowrap; text-transform: uppercase; letter-spacing: .03em;
}
.table td { padding: 10px 12px; border-bottom: 1px solid #eef1f4; vertical-align: top; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr[onclick] { cursor: pointer; }
.table tbody tr[onclick]:hover { background: #f7f9fc; }
.table-form td { vertical-align: middle; }
.table-form input[type=text], .table-form input[type=number] { margin: 0; }

.row-warn { background: var(--warn-bg); }
.row-muted { opacity: .5; }

.truncate { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.price { font-size: 16px; }

/* --- Nhãn trạng thái ----------------------------------------------------- */

.badge {
    display: inline-block; padding: 2px 9px; border-radius: 12px;
    font-size: 11px; font-weight: 600; white-space: nowrap; letter-spacing: .01em;
}
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-info { background: #e5eefb; color: var(--primary); }
.badge-muted { background: #eceff2; color: var(--muted); }

/* Trạng thái đơn — mỗi trạng thái một màu, xem OrderStatus::tone().

   Hai trạng thái CẦN NGƯỜI XỬ LÝ (chờ xếp xe, khiếu nại) dùng nền ĐẶC, các
   trạng thái còn lại dùng nền nhạt. Khác biệt đặc/nhạt này nhìn thấy cả khi
   in trắng đen hoặc khi người dùng bị mù màu — không chỉ dựa vào sắc màu. */
.badge-pending,
.badge-disputed {
    color: #fff;
    display: inline-flex; align-items: center; gap: 5px;
}
/* Chấm tròn: thêm một tín hiệu nữa ngoài màu. */
.badge-pending::before,
.badge-disputed::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; flex: none;
}
.badge-pending { background: var(--pending); }
.badge-disputed { background: var(--disputed); }

.badge-matched { background: #e5eefb; color: var(--primary); }
.badge-transit { background: var(--transit-bg); color: var(--transit); }
.badge-support { background: var(--support-bg); color: var(--support); }
.badge-done { background: var(--ok-bg); color: var(--ok); }
.badge-resolved { background: var(--resolved-bg); color: var(--resolved); }
.badge-cancelled { background: #eceff2; color: var(--muted); text-decoration: line-through; }

/* Trạng thái tin nhắn soạn sẵn: chờ gửi dùng chung sắc cam với đơn chờ xếp xe
   — cùng một ý nghĩa "đang đợi bạn làm gì đó". */
.badge-queued { background: var(--pending); color: #fff; }
.badge-sent { background: var(--ok-bg); color: var(--ok); }
.badge-skipped { background: #eceff2; color: var(--muted); }

/* Vạch màu đầu dòng cho đơn chờ xếp xe: quét mắt dọc bảng là thấy ngay,
   không cần đọc tới cột trạng thái ở tận bên phải. */
.row-pending > td:first-child { box-shadow: inset 3px 0 0 var(--pending); }
.row-disputed > td:first-child { box-shadow: inset 3px 0 0 var(--disputed); }

.tag {
    display: inline-block; padding: 1px 7px; border-radius: 3px;
    background: #eceff2; color: var(--muted); font-size: 11px; font-style: normal;
}
.tag.warn { background: var(--warn-bg); color: var(--warn); }

/* --- Nút ----------------------------------------------------------------- */

.btn {
    display: inline-block; padding: 7px 14px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface); color: var(--text);
    font-size: 13px; font-weight: 500; cursor: pointer; text-align: center;
    font-family: inherit; transition: background .12s, border-color .12s, box-shadow .12s;
}
.btn:hover { background: var(--surface-alt); border-color: #d4dae3; text-decoration: none; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 1px 2px rgba(47, 95, 224, .25); }
.btn.primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn.danger { background: var(--surface); border-color: #e8b4b7; color: var(--danger); }
.btn.danger:hover { background: var(--danger-bg); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--bg); }
.btn.tiny { padding: 3px 9px; font-size: 12px; }
.btn.block { display: block; width: 100%; }
button.link {
    background: none; border: 0; color: var(--muted); cursor: pointer;
    font: inherit; font-size: 13px; padding: 0;
}
button.link:hover { color: var(--text); text-decoration: underline; }

/* --- Form ---------------------------------------------------------------- */

.form fieldset {
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 14px 16px; margin: 0 0 16px;
}
.form legend { font-weight: 600; font-size: 13px; padding: 0 6px; color: var(--muted); }
.form fieldset[disabled] { opacity: .7; }

label { display: block; margin-bottom: 12px; font-size: 13px; font-weight: 500; }
label small { display: block; font-weight: 400; margin-top: 3px; }

input[type=text], input[type=tel], input[type=number], input[type=date],
input[type=search], input[type=password], input[type=datetime-local],
select, textarea {
    display: block; width: 100%; margin-top: 4px;
    padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius);
    font: inherit; font-size: 13px; background: var(--surface); color: var(--text);
}
input:focus, select:focus, textarea:focus {
    outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(18, 87, 196, .12);
}
input[readonly] { background: #f3f5f8; color: var(--muted); }
input.narrow { width: 90px; }
textarea { resize: vertical; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 16px; }
@media (max-width: 760px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* Ô AI không trích được — tô đỏ để mắt tìm ra ngay, không phải dò từng dòng. */
.field-missing > input, .field-missing > select { border-color: #e8b4b7; background: #fffafa; }
.field-missing { position: relative; }
.field-missing::after {
    content: "AI không trích được"; position: absolute; right: 0; top: 0;
    font-size: 11px; color: var(--danger); font-weight: 500;
}

.checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.check { display: flex; align-items: center; gap: 6px; margin-bottom: 0; font-weight: 400; }
.check input { width: auto; margin: 0; }

.form-actions { display: flex; gap: 8px; padding-top: 4px; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.stack + .stack { margin-top: 8px; }
.stack label { margin-bottom: 0; }
.inline { display: inline; }
.inline-form { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.inline-form input { margin: 0; }

.filters { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.filters input, .filters select { width: auto; margin: 0; min-width: 150px; }
.filters.inline { margin: 0; }

/* --- Tra khách cũ -------------------------------------------------------- */

.lookup { position: relative; margin-bottom: 14px; }

.lookup-results {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: 0 6px 20px rgba(16, 24, 40, .12);
    max-height: 320px; overflow-y: auto;
}
.lookup-item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; padding: 9px 12px; border: 0; border-bottom: 1px solid #eef1f4;
    background: none; text-align: left; cursor: pointer; font: inherit;
}
.lookup-item:last-child { border-bottom: 0; }
.lookup-item:hover, .lookup-item:focus { background: #f0f5fd; outline: 0; }
.lookup-item-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lookup-item-main strong { font-size: 13px; font-weight: 600; }
.lookup-item-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lookup-item-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.lookup-empty { padding: 12px; font-size: 13px; color: var(--muted); }

.lookup-summary {
    margin-top: 10px; padding: 10px 12px;
    background: #f4f8fe; border: 1px solid #ccdcf5; border-radius: var(--radius);
}
.lookup-summary-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lookup-summary .hint { margin: 8px 0 0; }
.lookup-summary p { margin: 6px 0 0; }
.lookup-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }

.lookup-places { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.place-chip {
    display: inline-flex; align-items: stretch; overflow: hidden;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.place-text { padding: 3px 8px; font-size: 12px; max-width: 260px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.place-btn {
    border: 0; border-left: 1px solid var(--border); background: #f3f5f8;
    padding: 3px 8px; font: inherit; font-size: 11px; color: var(--primary); cursor: pointer;
}
.place-btn:hover { background: var(--primary); color: #fff; }

/* --- Giá xem trước ------------------------------------------------------- */

.price-preview {
    align-self: end; padding: 10px 14px; margin-bottom: 12px;
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
}
.price-preview strong { font-size: 18px; }

/* --- Chi tiết đơn -------------------------------------------------------- */

.detail { display: grid; grid-template-columns: 130px 1fr; gap: 10px 16px; margin: 0; padding: 16px; }
.detail dt { color: var(--muted); font-size: 12px; padding-top: 2px; }
.detail dd { margin: 0; }
.breakdown { margin: 6px 0 0; padding-left: 18px; }

.timeline { list-style: none; margin: 0; padding: 16px; }
.timeline li {
    padding: 0 0 14px 16px; border-left: 2px solid var(--border);
    position: relative; font-size: 13px;
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
    content: ""; position: absolute; left: -5px; top: 5px;
    width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
}

.places { list-style: none; margin: 0; padding: 16px; font-size: 13px; }
.places li { padding: 5px 0; border-bottom: 1px solid #eef1f4; }
.places li:last-child { border-bottom: 0; }

/* --- Thông báo ----------------------------------------------------------- */

.notif-list { display: flex; flex-direction: column; gap: 12px; }
/* Hàng đợi gửi: mọi thẻ ở đây đều là tin CHƯA gửi, nên cả danh sách mang vạch
   cam — nhìn là biết còn việc, không phải đếm từng nhãn. */
.card-notif {
    background: var(--surface); border: 1px solid var(--border);
    border-left: 3px solid var(--pending);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px;
}
.notif { border-bottom: 1px solid #eef1f4; }
.notif:last-child { border-bottom: 0; }
/* Trong trang chi tiết đơn, tin đã gửi và tin chờ gửi nằm lẫn nhau — tin chờ
   gửi phải nổi lên. */
.notif-queued { box-shadow: inset 3px 0 0 var(--pending); background: #fffaf3; }
.notif header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 8px; flex-wrap: wrap;
}
.msg {
    margin: 0; padding: 10px 12px; background: var(--bg);
    border: 1px solid var(--border); border-radius: var(--radius);
    font: 13px/1.55 "Segoe UI", system-ui, sans-serif;
    white-space: pre-wrap; word-break: break-word;
}
.msg.json { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.notif-actions { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.sub { font-size: 12px; color: var(--muted); margin: 14px 0 6px; text-transform: uppercase; letter-spacing: .04em; }
.panel .sub:first-of-type { margin-top: 0; }
.split-side .panel > p, .split-side .panel > pre, .split-side .panel > h3 { margin-left: 16px; margin-right: 16px; }

/* --- Thông điệp ---------------------------------------------------------- */

.flash {
    padding: 10px 14px; border-radius: var(--radius); margin-bottom: 14px;
    border: 1px solid transparent; font-size: 13px;
}
.flash-ok { background: var(--ok-bg); border-color: #b6e0c6; color: var(--ok); }
.flash-error { background: var(--danger-bg); border-color: #e8b4b7; color: var(--danger); }

.hint {
    padding: 10px 14px; margin: 0 0 16px; font-size: 13px;
    background: #eef4fd; border: 1px solid #ccdcf5; border-radius: var(--radius); color: #234a86;
}
.hint.warn { background: var(--warn-bg); border-color: #f0d9a8; color: var(--warn); }
.hint code { background: rgba(0, 0, 0, .05); padding: 1px 4px; border-radius: 3px; }

.empty { color: var(--muted); text-align: center; padding: 28px 16px; font-size: 13px; }

.pager { display: flex; gap: 4px; margin-top: 16px; }
.pager a {
    padding: 5px 11px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: var(--text); font-size: 13px;
}
.pager a.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.pager a:hover { text-decoration: none; }

/* --- Link chia sẻ cho khách ---------------------------------------------- */

.share-box { padding: 12px 16px; }
.share-url {
    width: 100%; margin: 0 0 8px; padding: 6px 9px;
    font-family: ui-monospace, Consolas, monospace; font-size: 11px;
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
}
.share-box .msg { margin-top: 6px; max-height: 260px; overflow-y: auto; }
.share-box details { margin-top: 10px; }
.share-box .notif-actions { margin-top: 8px; }

/* --- Trang công khai cho khách ------------------------------------------- */

.public-page { background: var(--bg); }
.public-head {
    background: var(--surface); border-bottom: 1px solid var(--border);
    padding: 14px 20px; text-align: center;
}
.public-head .brand { font-size: 16px; font-weight: 700; }
.public-code { font-size: 12px; color: var(--muted); margin-top: 2px; }

.public-body { max-width: 560px; margin: 0 auto; padding: 16px; }
.public-body .form fieldset { background: var(--surface); }
.public-body .panel { margin-top: 16px; }

/* Thông tin khách không sửa được — hiện dạng dòng đọc, không phải ô nhập bị
   khoá: ô xám vẫn trông như chỗ gõ được và khách sẽ bấm vào rồi thắc mắc. */
.readonly-row {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 6px 0; border-bottom: 1px solid #eef1f4; font-size: 13px;
}
.readonly-row:last-of-type { border-bottom: 0; margin-bottom: 10px; }

.public-price {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 12px 14px; margin-bottom: 16px;
}
.public-price strong { font-size: 20px; margin-left: 8px; }
.public-price p { margin: 6px 0 0; }

.public-foot { text-align: center; margin-top: 20px; }
.center { text-align: center; }

/* ===========================================================================
   MOBILE
   Thiết bị mạnh nhưng màn hẹp và thao tác bằng ngón cái — vấn đề là không
   gian và tầm với, không phải hiệu năng.
   =========================================================================== */

/* Thanh điều hướng đáy. Ẩn trên desktop (đã có nav ở thanh trên). */
.tabbar { display: none; }

@media (max-width: 860px) {

    /* --- Thanh trên: bỏ nav chữ, chỉ giữ thương hiệu + trạng thái ca trực -- */
    .topbar { gap: 10px; padding: 0 12px; }
    .topbar .nav { display: none; }
    .brand { font-size: 15px; white-space: nowrap; }
    .brand span { display: none; }
    .who { display: none; }
    .topbar-right { gap: 8px; margin-left: auto; }

    /* --- Thanh đáy kiểu app ---------------------------------------------- */
    .tabbar {
        display: flex;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
        background: var(--surface);
        border-top: 1px solid var(--border);
        /* iPhone có thanh gạt ngang ở đáy — chừa chỗ, không thì mục cuối bị che */
        padding-bottom: env(safe-area-inset-bottom, 0);
        box-shadow: 0 -1px 3px rgba(16, 24, 40, .06);
    }
    .tabbar a {
        flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
        padding: 7px 2px 6px; color: var(--muted);
        font-size: 10px; text-decoration: none;
        /* Tắt hiệu ứng nháy xanh của trình duyệt khi chạm — trông rẻ tiền */
        -webkit-tap-highlight-color: transparent;
    }
    .tabbar a.active { color: var(--primary); font-weight: 600; }
    .tabbar-icon { font-size: 17px; line-height: 1; }
    .tabbar-label { line-height: 1.2; }

    /* Chừa chỗ cho thanh đáy, không thì nó che nút cuối trang. */
    .page { padding: 12px 12px calc(66px + env(safe-area-inset-bottom, 0)); }

    /* --- Vùng chạm đủ lớn ------------------------------------------------- */
    /* 16px trở lên: dưới mức này Safari iOS tự phóng to trang khi chạm vào ô
       nhập, người dùng phải tự thu lại — rất khó chịu khi nhập liên tục. */
    input[type=text], input[type=tel], input[type=number], input[type=date],
    input[type=search], input[type=password], input[type=datetime-local],
    select, textarea { font-size: 16px; padding: 10px 12px; }

    .btn { padding: 10px 16px; }
    .btn.tiny { padding: 6px 12px; }
    /* Nút chính chiếm trọn dòng: cao hơn hẳn để ngón cái bấm không trượt.
       Đây là nút khách bấm để xác nhận đơn — hỏng chỗ này là mất đơn. */
    .btn.block { padding: 14px 16px; font-size: 15px; }
    .check { padding: 4px 0; }
    .check input { width: 20px; height: 20px; }

    /* --- Bố cục ------------------------------------------------------------ */
    .page-head { flex-direction: column; align-items: stretch; gap: 10px; }
    .page-head h1 { font-size: 19px; }
    .page-head .btn, .page-head .actions .btn { width: 100%; }
    .page-head .actions { flex-direction: column; }

    .cards { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .card-value { font-size: 21px; }

    .filters { gap: 6px; }
    .filters input, .filters select { min-width: 0; flex: 1 1 130px; }

    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .form fieldset { padding: 12px; }

    /* --- Bảng thành thẻ ---------------------------------------------------
       Bảng 8 cột không thể đọc trên màn 390px. Cuộn ngang thì phải vuốt qua
       lại mới ghép được thông tin của một dòng. Mỗi dòng thành một thẻ, tên
       cột lấy từ data-label. */
    .table thead { display: none; }
    .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
    .table tr {
        border: 1px solid var(--border); border-radius: var(--radius);
        margin-bottom: 8px; padding: 8px 10px; background: var(--surface);
    }
    .table td {
        display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
        padding: 3px 0; border: 0; text-align: right;
    }
    .table td::before {
        content: attr(data-label);
        color: var(--muted); font-size: 11px; font-weight: 600;
        text-align: left; flex-shrink: 0;
    }
    /* Ô không có nhãn (nút bấm) chiếm trọn chiều ngang */
    .table td:not([data-label]) { justify-content: flex-end; }
    .table .truncate { max-width: none; white-space: normal; text-align: right; }

    /* --- Danh sách đơn cạnh form ------------------------------------------ */
    .with-sidebar { grid-template-columns: 1fr; gap: 12px; }
    /* Đưa LÊN TRÊN form, ở dạng gập lại. Trước đây nó rơi xuống dưới cả form
       dài 1600px nên coi như không tồn tại. */
    .order-sidebar { order: -1; position: static; }
    .order-sidebar .mini-orders { max-height: 45vh; }

    .split { gap: 12px; }
    .detail { grid-template-columns: 1fr; gap: 2px 0; }
    .detail dt { padding-top: 8px; }
    .detail dd { padding-bottom: 4px; border-bottom: 1px solid #eef1f4; }

    .msg { font-size: 12.5px; }
    .lookup-results { max-height: 50vh; }
    .public-body { padding: 12px 12px 24px; }
}

/* Gập/mở khối danh sách đơn. Trên desktop luôn mở, ẩn luôn mũi tên. */
.collapsible > summary { cursor: pointer; list-style: none; }
.collapsible > summary::-webkit-details-marker { display: none; }
.collapsible > summary::after { content: ''; }
@media (max-width: 860px) {
    .collapsible > summary::after {
        content: '▾'; margin-left: auto; color: var(--muted);
        transition: transform .15s;
    }
    .collapsible[open] > summary::after { transform: rotate(180deg); }
}

/* Băng cảnh báo khi service worker phục vụ bản đã lưu lúc mất mạng. */
body[data-offline="1"] .page::before {
    content: 'Đang mất kết nối — đây là bản đã lưu, dữ liệu có thể chưa mới nhất.';
    display: block; margin-bottom: 12px; padding: 8px 12px;
    background: var(--warn-bg); border: 1px solid #f0d9a8; border-radius: var(--radius);
    color: var(--warn); font-size: 12px;
}

/* --- Đăng nhập ----------------------------------------------------------- */

.login-page {
    display: grid; place-items: center; min-height: 100vh;
    background: radial-gradient(1100px 520px at 50% -10%, #e7edfd 0%, var(--bg) 55%);
}
.login-wrap { display: flex; justify-content: center; padding: 48px 20px; }
.login-card {
    width: 340px; padding: 30px; background: var(--surface);
    border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-md);
}
.login-card h1 { margin: 0; font-size: 26px; text-align: center; letter-spacing: -.02em; }
.login-card > p { margin: 4px 0 20px; text-align: center; font-size: 13px; color: var(--muted); }

/* --- Trang tài xế -------------------------------------------------------- */

/* Trạng thái chuyến hiện to ngay đầu trang: tài xế liếc một cái là biết mình
   đang ở bước nào, không phải đọc cả trang. */
.driver-state {
    padding: 10px 14px; margin-bottom: 14px; border-radius: var(--radius);
    font-weight: 600; font-size: 14px; text-align: center;
}
/* Dải này dùng chung class .badge-* với nhãn nhỏ trong bảng. Hai trạng thái
   nền đặc là inline-flex (để có chấm tròn) nên phải kéo lại thành dải ngang
   hết chiều rộng, nếu không nó co lại thành một cục lệch trái. */
.driver-state.badge-pending,
.driver-state.badge-disputed { display: flex; justify-content: center; }

/* Nút hành động chính tách hẳn khỏi phần thông tin, cao và rộng — tài xế bấm
   khi đang vội, có khi đang đứng cạnh xe. */
.driver-actions { margin: 16px 0 8px; }
.driver-actions .btn { padding: 16px; font-size: 16px; }

/* Hành động phá vỡ (từ chối / trả chuyến) phải gập lại, không đặt ngang hàng
   với nút chính — bấm nhầm là nhà xe mất chuyến. */
.driver-decline { margin-top: 8px; }
.driver-decline > summary {
    cursor: pointer; color: var(--muted); font-size: 13px;
    padding: 8px 0; text-align: center;
}
.driver-decline > summary::-webkit-details-marker { display: none; }
.driver-decline .stack { padding: 8px 0; }

/* --- Ảnh tài xế / xe ----------------------------------------------------- */

.photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 860px) { .photo-grid { grid-template-columns: 1fr; } }

.photo-box { padding: 16px; }
.photo-preview {
    display: block; width: 100%; max-height: 320px;
    object-fit: contain;               /* không cắt mất biển số ở rìa ảnh */
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
    margin-bottom: 10px;
}
.photo-empty {
    display: grid; place-items: center; height: 150px; margin-bottom: 10px;
    background: var(--bg); border: 1px dashed var(--border); border-radius: var(--radius);
    color: var(--muted); font-size: 13px;
}
.photo-box .stack { margin-top: 10px; }

/* Cặp ảnh nhỏ trong bảng danh sách */
.thumb-pair { display: inline-flex; gap: 4px; }
.thumb-pair:hover { text-decoration: none; }
.thumb {
    width: 34px; height: 34px; border-radius: 4px; object-fit: cover;
    border: 1px solid var(--border); background: var(--bg);
}
.thumb-empty {
    display: grid; place-items: center;
    border-style: dashed; color: var(--muted); font-size: 15px;
}

/* Ảnh xe hiện cho khách / tổng đài xem cạnh thông tin tài xế */
.driver-photos { display: flex; gap: 8px; padding: 0 16px 12px; }
.driver-photos img {
    width: calc(50% - 4px); height: 90px; object-fit: cover;
    border: 1px solid var(--border); border-radius: var(--radius);
}
.public-body .driver-photos { padding: 0 0 12px; }
.public-body .driver-photos img { height: 120px; }

/* --- Chuyển giao diện quản trị ↔ tổng đài -------------------------------- */

.view-switch {
    border: 1px solid var(--border); border-radius: 20px;
    padding: 4px 12px; font: inherit; font-size: 12px; font-weight: 600;
    background: var(--surface); color: var(--muted); cursor: pointer; white-space: nowrap;
}
.view-switch:hover { border-color: var(--primary); color: var(--primary); }
/* Đang ở chế độ hạ quyền thì nút phải nổi bật — nếu không, người dùng quên
   mất mình đang ở giao diện rút gọn rồi tưởng hệ thống mất chức năng. */
.view-switch.is-callcenter { background: var(--warn-bg); border-color: #f0d9a8; color: var(--warn); }

.view-banner {
    padding: 8px 14px; margin-bottom: 14px; font-size: 13px;
    background: var(--warn-bg); border: 1px solid #f0d9a8; border-radius: var(--radius);
    color: var(--warn);
}

.who em { font-style: normal; font-size: 11px; display: block; line-height: 1; }

@media (max-width: 860px) {
    /* Trên mobile nút chuyển vẫn phải thấy — đây là thứ dễ quên nhất. */
    .view-switch { padding: 4px 9px; font-size: 11px; }
    .view-banner { font-size: 12px; }
}

/* --- Xem trước sơ chế tin nhắn ------------------------------------------- */

.intake-preview { padding: 14px 16px; }
.intake-intent {
    display: inline-block; padding: 3px 10px; margin-bottom: 10px;
    border-radius: 12px; background: #e5eefb; color: var(--primary);
    font-size: 12px; font-weight: 600;
}
.intake-intent.warn { background: var(--warn-bg); color: var(--warn); }

.intake-fields { list-style: none; margin: 0; padding: 0; }
.intake-fields li {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 5px 0; border-bottom: 1px solid #eef1f4;
}
.intake-fields li:last-child { border-bottom: 0; }
.intake-fields strong { text-align: right; font-weight: 500; word-break: break-word; }
/* Trường máy không đọc được — tô đỏ để mắt tìm ra ngay, giống màn duyệt AI. */
.intake-fields .is-missing strong { color: var(--danger); font-weight: 400; font-style: italic; }

/* --- Trang cá nhân tài xế (link cố định) ---------------------------------- */

/* Khối bật thông báo đứng trên cùng: đây là việc tài xế cần làm MỘT LẦN, sau
   đó nó gần như biến mất khỏi sự chú ý. */
.push-panel { padding: 14px 16px; margin-bottom: 16px; }
.push-panel .push-state { margin: 0; font-weight: 600; font-size: 14px; }
.push-panel .btn { width: 100%; padding: 14px; font-size: 15px; }

.trip-list { display: flex; flex-direction: column; gap: 12px; }
.trip-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px;
}
.trip-card > header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 8px;
}
/* Giờ đón to hẳn: tài xế liếc điện thoại lúc đang vội, thứ duy nhất cần đọc
   được từ xa là mấy giờ phải có mặt. */
.trip-time { font-size: 22px; font-weight: 700; line-height: 1; }
.trip-route { margin: 0 0 6px; font-size: 14px; line-height: 1.5; }
.trip-card .notif-actions .btn { flex: 1; min-width: 96px; text-align: center; padding: 12px; }

.device-list { list-style: none; margin: 0; padding: 0; }
.device-list li {
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 0; border-bottom: 1px solid #eef1f4; font-size: 13px;
}
.device-list li:last-child { border-bottom: 0; }

/* --- Bảng ghép xe --------------------------------------------------------- */

.pick-table td { vertical-align: middle; }
.pick-cell { width: 34px; text-align: center; }
.pick-table input[type=checkbox] { width: 18px; height: 18px; }
.pick-table input[type=checkbox]:disabled { opacity: .35; cursor: not-allowed; }

/* Thanh tạo chuyến dính đáy màn hình khi đã chọn đơn — tổng đài không phải
   cuộn ngược lên tìm nút. */
.make-trip-bar {
    position: sticky; bottom: 0; z-index: 5;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px; margin-top: 8px;
    background: var(--surface); border: 1px solid var(--primary);
    border-radius: var(--radius); box-shadow: 0 -2px 8px rgba(16,24,40,.08);
    font-weight: 600;
}

.trip-board { list-style: none; margin: 0; padding: 0; }
.trip-board > li > a {
    display: block; padding: 10px 12px; border-bottom: 1px solid #eef1f4;
    color: var(--text);
}
.trip-board > li > a:hover { background: #f7f9fc; text-decoration: none; }
.trip-board > li:last-child > a { border-bottom: 0; }
.trip-board-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* Vượt số ghế: tô đỏ ngay chỗ hiển thị tỉ lệ, không đợi bấm mới biết. */
.over-cap { color: var(--danger); font-weight: 600; }
.badge-sm { font-size: 10px; padding: 1px 6px; }

/* --- Đối soát hoa hồng ---------------------------------------------------- */

.row-done { opacity: .55; }
.remit-form { display: flex; gap: 6px; align-items: center; }
.amount-input { width: 120px; margin: 0; text-align: right; }

/* --- Bảng đo lường -------------------------------------------------------- */

.mini-stat td { padding: 6px 12px; }
.mini-stat td:last-child { text-align: right; }

/* Thanh tỉ lệ trong ô "đơn theo ngày" — thấy xu hướng mà không cần biểu đồ. */
.bar-row { display: flex; align-items: center; gap: 8px; }
.bar {
    height: 14px; background: var(--primary); border-radius: 3px;
    min-width: 2px; opacity: .75; flex: none;
}
.bar-num { font-weight: 600; font-size: 12px; }