/* PER — Điều phối Linh Trung. Giao diện nội bộ, gọn, không phụ thuộc font ngoài. */

:root {
  --ground: #f4f6f6;
  --surface: #ffffff;
  --surface-2: #eef2f1;
  --ink: #17211f;
  --muted: #5b6a66;
  --faint: #8a9793;
  --line: #dbe2e0;
  --line-strong: #c3cecb;
  --accent: #0d7d72;
  --accent-ink: #0a5f57;
  --accent-soft: #e2f1ef;
  --warn: #a86a00;
  --warn-soft: #fbf0dd;
  --bad: #a8402f;
  --bad-soft: #f9e8e4;
  --ok: #1f7a52;

  --cum-di-an: #2f7db8;
  --cum-thu-duc: #0d7d72;
  --cum-dong-nam: #a35bbf;
  --cum-pham-van-dong: #c07a1e;

  --radius: 9px;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 20px rgba(0,0,0,.06);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #101614; --surface: #18211f; --surface-2: #1f2a27;
    --ink: #e6ecea; --muted: #9aa8a4; --faint: #6d7a77;
    --line: #2a3633; --line-strong: #3a4844;
    --accent: #46b3a6; --accent-ink: #6fcabe; --accent-soft: #123430;
    --warn: #d99a3d; --warn-soft: #2b2416;
    --bad: #d9705c; --bad-soft: #301a16; --ok: #5cb98d;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.4);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--ground); color: var(--ink); font-size: 14px; line-height: 1.55; }
a { color: var(--accent-ink); }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- topbar ---------- */
.topbar {
  display: flex; align-items: center; gap: 1.5rem;
  padding: .5rem 1.1rem; background: var(--surface);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50;
}
.topbar .brand { font-weight: 700; letter-spacing: -.01em; color: var(--accent-ink); white-space: nowrap; }
.topbar nav { display: flex; gap: .25rem; margin-right: auto; }
.topbar nav a {
  padding: .35rem .7rem; border-radius: 7px; text-decoration: none; color: var(--muted);
  display: flex; align-items: center; gap: .35rem;
}
.topbar nav a svg { display: none; }
.topbar nav a:hover { background: var(--surface-2); }
.topbar nav a.active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }

.dp-tabs { display: none; }
.topbar .logout { font-size: .85rem; color: var(--faint); text-decoration: none; }

.me { position: relative; }
.me-btn { background: none; border: 1px solid var(--line); padding: .3rem .6rem; font-size: .85rem; color: var(--muted); }
.me-tag { font-size: .68rem; background: var(--accent-soft); color: var(--accent-ink); padding: 0 .3rem; border-radius: 4px; }
.me-menu { position: absolute; right: 0; top: 110%; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); display: flex; flex-direction: column; min-width: 150px; overflow: hidden; z-index: 60; }
.me-menu button, .me-menu a { text-align: left; background: none; border: none; padding: .5rem .8rem; font-size: .85rem; color: var(--ink); text-decoration: none; }
.me-menu button:hover, .me-menu a:hover { background: var(--surface-2); }

main { padding: 1rem; }

.trong { max-width: 480px; margin: 3rem auto; text-align: center; color: var(--muted); }
.trong h2 { font-size: 1.1rem; color: var(--ink); }

/* ---------- buttons ---------- */
button {
  cursor: pointer; border: 1px solid var(--line-strong); background: var(--surface);
  padding: .4rem .8rem; border-radius: 7px;
}
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
button.primary:hover { filter: brightness(1.06); }
button.mini { padding: .2rem .55rem; font-size: .82rem; }
button:disabled { opacity: .5; cursor: default; }

input, select, textarea {
  border: 1px solid var(--line-strong); background: var(--surface);
  padding: .4rem .55rem; border-radius: 7px; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }

/* ---------- login ---------- */
.login-page { display: grid; place-items: center; min-height: 100vh; }
.login-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 2rem; width: min(340px, 90vw); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: .8rem;
}
.login-card h1 { font-size: 1.15rem; margin: 0; color: var(--accent-ink); }
.login-card .sub { margin: 0; color: var(--muted); font-size: .9rem; }
.login-card .loi { background: var(--bad-soft); color: var(--bad); padding: .5rem .7rem; border-radius: 7px; font-size: .88rem; }

/* ---------- dispatch ---------- */
.dp-toolbar {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .6rem .8rem; margin-bottom: .8rem;
}
.dp-toolbar input[type=date] { width: auto; }
.dot-switch { display: flex; border: 1px solid var(--line-strong); border-radius: 7px; overflow: hidden; }
.dot-switch button { border: none; border-radius: 0; background: var(--surface); }
.dot-switch button.active { background: var(--accent); color: #fff; }
.nang-luc {
  margin-left: auto; display: flex; align-items: baseline; gap: .35rem;
  padding: .3rem .7rem; border-radius: 999px; background: var(--surface-2);
}
.nang-luc.thieu { background: var(--bad-soft); }
.nang-luc.thieu .nl-so { color: var(--bad); }
.nl-so { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.nl-nhan { font-size: .8rem; color: var(--muted); }

.dp-cols { display: grid; grid-template-columns: 240px minmax(320px, 1fr) minmax(360px, 1.3fr); gap: .8rem; }
@media (max-width: 1100px) { .dp-cols { grid-template-columns: 1fr; } }

.pane {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; flex-direction: column; overflow: hidden; min-height: 200px;
}
.pane > header {
  padding: .55rem .8rem; border-bottom: 1px solid var(--line); font-weight: 600;
  display: flex; align-items: center; gap: .5rem; background: var(--surface-2);
}
.pane .dem {
  font-size: .78rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 0 .45rem; color: var(--muted); font-weight: 500;
}
.pane > header .mini { margin-left: auto; }
.pane-foot { margin-top: auto; padding: .5rem .8rem; border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted); }

/* đội xe máy */
.ds-doi { padding: .4rem; display: flex; flex-direction: column; gap: .25rem; overflow-y: auto; max-height: 60vh; }
.doi-row { display: flex; align-items: center; gap: .4rem; padding: .3rem .45rem; border-radius: 6px; background: var(--surface-2); font-size: .86rem; }
.doi-row .dot { width: .5rem; height: .5rem; border-radius: 50%; flex-shrink: 0; background: var(--accent); }
.doi-row.tai { opacity: .5; } .doi-row.tai .dot { background: var(--warn); }
.doi-row.nghi { opacity: .45; } .doi-row.nghi .dot { background: var(--line-strong); }
.doi-row .ten { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doi-row .vt { font-size: .72rem; color: var(--faint); }

/* form thêm đơn */
.form-don { padding: .6rem .8rem; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: .4rem; background: var(--accent-soft); }
.form-don .row { display: flex; gap: .4rem; }
.form-don-foot { display: flex; align-items: center; gap: .5rem; }
.form-don-foot .hint { font-size: .78rem; color: var(--warn); flex: 1; }
.form-don button { align-self: flex-start; }

/* danh sách đơn */
.ds-don { padding: .4rem; display: flex; flex-direction: column; gap: .3rem; overflow-y: auto; max-height: 62vh; }
.don-card {
  border: 1px solid var(--line); border-left: 3px solid var(--line-strong);
  border-radius: 7px; padding: .4rem .55rem; font-size: .84rem;
}
.don-card.di_an { border-left-color: var(--cum-di-an); }
.don-card.thu_duc { border-left-color: var(--cum-thu-duc); }
.don-card.dong_nam { border-left-color: var(--cum-dong-nam); }
.don-card.pham_van_dong { border-left-color: var(--cum-pham-van-dong); }
.don-card.canh-bao { border-left-color: var(--bad); background: var(--bad-soft); }
.don-card .l1 { display: flex; justify-content: space-between; gap: .4rem; }
.don-card .l1 b { font-weight: 600; }
.don-card .l2 { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.don-card .chips { display: flex; gap: .3rem; margin-top: .2rem; flex-wrap: wrap; }
.chip {
  font-size: .7rem; padding: .05rem .35rem; border-radius: 4px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
}
.chip.han { background: var(--warn-soft); color: var(--warn); }
.chip.xoa { cursor: pointer; margin-left: auto; }

/* bản đồ */
.pane-map { grid-row: span 1; }
.map { flex: 1; min-height: 340px; background: var(--surface-2);
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 26px 26px; }
.map-fallback-pin { position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff;
  display: grid; place-items: center; font-size: .6rem; color: #fff; font-weight: 700; transform: translate(-50%,-50%); }

/* tuyến */
.canh-bao { padding: .6rem .8rem; background: var(--bad-soft); color: var(--bad); font-size: .85rem; border-bottom: 1px solid var(--line); }
.ds-tuyen { padding: .5rem; display: flex; flex-direction: column; gap: .45rem; overflow-y: auto; max-height: 45vh; }
.tuyen-card { border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.tuyen-card > header {
  display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem;
  background: var(--surface-2); font-size: .85rem;
}
.tuyen-card > header .tx { font-weight: 600; flex: 1; }
.tuyen-card > header .meta { color: var(--muted); font-size: .78rem; }
.tuyen-card ol { margin: 0; padding: .4rem .6rem .5rem 1.6rem; font-size: .8rem; color: var(--muted); }
.tuyen-card ol li { margin: .1rem 0; }
.tuyen-card .zalo-btn { font-size: .78rem; padding: .15rem .5rem; }

/* ---------- lịch tháng ---------- */
.lt-toolbar { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.thang-hthi { font-weight: 700; min-width: 8rem; }
.lt-trang-thai { color: var(--muted); font-size: .82rem; }
.lt-canh-bao { background: var(--warn-soft); color: var(--warn); padding: .6rem .8rem; border-radius: var(--radius); margin-bottom: .7rem; font-size: .85rem; white-space: pre-line; }
.lt-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.bang-lich { border-collapse: collapse; font-size: .72rem; }
.bang-lich th, .bang-lich td { border: 1px solid var(--line); padding: 0; text-align: center; }
.bang-lich th { background: var(--surface-2); font-weight: 500; color: var(--faint); padding: .15rem .25rem; position: sticky; }
.bang-lich td.ten { text-align: left; padding: .2rem .5rem; white-space: nowrap; font-size: .78rem; color: var(--ink); background: var(--surface); position: sticky; left: 0; }
.bang-lich td.o { width: 18px; height: 20px; cursor: pointer; }
.o-xe_may { background: var(--accent); opacity: .8; }
.o-xe_tai { background: var(--warn); }
.o-nghi { background: var(--line-strong); opacity: .55; }
.o-sua::after { content: "•"; color: #fff; font-size: .7rem; }
.bang-lich td.tong { font-variant-numeric: tabular-nums; padding: 0 .4rem; color: var(--warn); font-weight: 600; background: var(--surface); }
.bang-lich .ngay-cao-diem { background: var(--bad-soft); }

.lt-chu-thich { display: flex; gap: 1rem; flex-wrap: wrap; margin: .7rem 0; font-size: .8rem; color: var(--muted); align-items: center; }
.lt-chu-thich i.o { width: .9rem; height: .9rem; border-radius: 3px; display: inline-block; vertical-align: -2px; margin-right: .3rem; }
.lt-chu-thich i.xe-may { background: var(--accent); } .lt-chu-thich i.xe-tai { background: var(--warn); } .lt-chu-thich i.nghi { background: var(--line-strong); }

.lt-nghi { margin-top: 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem; }
.lt-nghi > header { font-weight: 600; margin-bottom: .5rem; }
.form-nghi { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; }
.form-nghi select, .form-nghi input { width: auto; }
.bang-nghi { border-collapse: collapse; width: 100%; font-size: .84rem; }
.bang-nghi th, .bang-nghi td { border-bottom: 1px solid var(--line); padding: .35rem .5rem; text-align: left; }
.bang-nghi .tt-cho { color: var(--warn); } .bang-nghi .tt-duyet { color: var(--ok); } .bang-nghi .tt-tu_choi { color: var(--faint); text-decoration: line-through; }

/* ---------- danh mục ---------- */
.danh-muc { display: flex; flex-direction: column; gap: 1.5rem; max-width: 900px; }
.dm-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem; }
.dm-block > header { font-weight: 600; margin-bottom: .6rem; display: flex; gap: .5rem; align-items: center; }
.bang { border-collapse: collapse; width: 100%; font-size: .85rem; }
.bang th, .bang td { border-bottom: 1px solid var(--line); padding: .35rem .5rem; text-align: left; }
.bang th { color: var(--faint); font-weight: 500; }
.bang td.num { text-align: right; font-variant-numeric: tabular-nums; }
.bang td.ctr { text-align: center; }
.bang input { width: 100%; } .bang td.ctr input { width: auto; }
.form-inline { display: flex; gap: .5rem; margin-top: .7rem; }
.form-inline input { width: auto; }

/* ---------- modal + toast ---------- */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: grid; place-items: center; z-index: 100; }
.modal-box { background: var(--surface); border-radius: 12px; width: min(560px, 92vw); box-shadow: var(--shadow); overflow: hidden; }
.modal-box > header { display: flex; align-items: center; padding: .6rem .9rem; border-bottom: 1px solid var(--line); font-weight: 600; }
.modal-x { margin-left: auto; border: none; background: none; font-size: 1.3rem; line-height: 1; padding: 0 .3rem; }
.modal-box textarea { border: none; border-radius: 0; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .78rem; resize: vertical; }
.modal-foot { padding: .6rem .9rem; border-top: 1px solid var(--line); text-align: right; }
.modal-body { padding: .9rem; display: flex; flex-direction: column; gap: .6rem; }
.modal-body label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--muted); }

/* ---------- quản trị người dùng ---------- */
.quan-tri { max-width: 760px; display: flex; flex-direction: column; gap: 1.2rem; }
.qt-them { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem; }
.qt-them > header { font-weight: 600; margin-bottom: .6rem; }
.qt-them .hint { font-size: .8rem; color: var(--faint); margin: .5rem 0 0; }
.qt-ds { display: flex; flex-direction: column; gap: .8rem; }

.user-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.user-card.tat { opacity: .6; }
.user-card > header { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .6rem .9rem; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.user-card > header .uname { color: var(--faint); font-size: .85rem; }
.user-card > header .sp { flex: 1; }
.badge { font-size: .7rem; padding: .1rem .45rem; border-radius: 4px; }
.badge.admin { background: var(--accent-soft); color: var(--accent-ink); }
.badge.tat { background: var(--bad-soft); color: var(--bad); }
button.danger { border-color: var(--bad); color: var(--bad); }

.quyen-bang { width: 100%; border-collapse: collapse; font-size: .86rem; }
.quyen-bang th { text-align: left; color: var(--faint); font-weight: 500; padding: .4rem .9rem; }
.quyen-bang td { padding: .35rem .9rem; border-top: 1px solid var(--line); }
.quyen-bang td:first-child { white-space: nowrap; }
.ck-cells { display: flex; gap: 1.1rem; }
.ck { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; }
.ck input { width: auto; }
.quyen-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .9rem .7rem; }
.quyen-foot .hint { font-size: .78rem; color: var(--faint); }

.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  background: var(--ink); color: var(--ground); padding: .55rem 1rem; border-radius: 8px;
  font-size: .85rem; z-index: 200; box-shadow: var(--shadow); max-width: 90vw;
}
.toast.bad { background: var(--bad); color: #fff; }

.bang-nghi-wrap { overflow-x: auto; }


/* ============================================================
   ĐIỆN THOẠI  (máy tính giữ nguyên)
   ============================================================ */
@media (max-width: 760px) {

  body { font-size: 15px; }
  main { padding: .7rem .7rem calc(66px + env(safe-area-inset-bottom)); }
  input, select, textarea { font-size: 16px; }   /* chặn iOS tự zoom */

  /* ---- thanh điều hướng dưới đáy ---- */
  .topbar { gap: .5rem; padding: .5rem .8rem; }
  .topbar .brand { font-size: .95rem; }
  .topbar nav {
    position: fixed; left: 0; right: 0; bottom: 0; margin: 0; gap: 0;
    background: var(--surface); border-top: 1px solid var(--line);
    justify-content: space-around;
    padding: .2rem .2rem calc(.2rem + env(safe-area-inset-bottom));
    z-index: 80;
  }
  .topbar nav a {
    flex: 1; flex-direction: column; gap: 2px; align-items: center;
    padding: .4rem .2rem; font-size: .66rem; border-radius: 9px; text-align: center;
  }
  .topbar nav a svg { display: block; width: 21px; height: 21px; }
  .topbar nav a.active { background: transparent; color: var(--accent-ink); }
  .me-btn { padding: .35rem .5rem; }

  /* ---- điều phối: 1 pane / lần, chuyển bằng tab ---- */
  .dp-toolbar { gap: .5rem; padding: .6rem; }
  .dp-toolbar > input[type=date] { flex: 1 1 8rem; }
  .nang-luc { margin-left: 0; }
  .dot-switch { flex: 1 1 100%; }
  .dot-switch button { flex: 1; padding: .55rem; }
  #btnChiaTuyen { flex: 1 1 100%; width: 100%; padding: .65rem; font-size: 1rem; }

  .dp-tabs { display: flex; gap: .3rem; margin-bottom: .6rem; }
  .dp-tabs button {
    flex: 1; padding: .55rem .3rem; border-radius: 8px; font-size: .85rem;
    background: var(--surface); color: var(--muted);
  }
  .dp-tabs button.active { background: var(--accent); color: #fff; border-color: var(--accent); }

  .dp-cols { display: block; }
  .dp-cols > .pane { display: none; margin-bottom: 0; }
  .dp-cols[data-m="doi"] #paneDoi,
  .dp-cols[data-m="don"] #paneDon,
  .dp-cols[data-m="map"] .pane-map { display: flex; }

  .dp-cols > .pane { overflow: visible; min-height: 0; }
  .ds-doi, .ds-don, .ds-tuyen { max-height: none; overflow: visible; }
  .map { flex: none; height: 42vh; min-height: 240px; }
  .form-don .row { flex-direction: column; }

  /* ---- lịch tháng ---- */
  .lt-toolbar { flex-wrap: wrap; gap: .5rem; }
  .thang-hthi { min-width: 0; flex: 1; text-align: center; }
  #btnXepLich { flex: 1 1 100%; padding: .6rem; }
  .bang-lich td.o { width: 26px; height: 30px; }
  .bang-lich { font-size: .8rem; }
  .form-nghi { flex-direction: column; align-items: stretch; }
  .form-nghi select, .form-nghi input, .form-nghi button { width: 100%; }

  /* ---- danh mục: hàng bảng -> thẻ ---- */
  .danh-muc { gap: 1rem; }
  .dm-block .bang thead { display: none; }
  .dm-block .bang, .dm-block .bang tbody, .dm-block .bang tr, .dm-block .bang td { display: block; }
  .dm-block .bang tr {
    border: 1px solid var(--line); border-radius: 9px; margin-bottom: .6rem;
    padding: .5rem .7rem; background: var(--surface);
  }
  .dm-block .bang td { border: none; padding: .4rem 0; display: flex; align-items: center; gap: 1rem; }
  .dm-block .bang td:not(:last-child) { border-bottom: 1px solid var(--line); }
  .dm-block .bang td::before { content: attr(data-label); color: var(--faint); font-size: .82rem; flex: 1; }
  .dm-block .bang td input:not([type=checkbox]) { width: 9rem; text-align: right; }
  .dm-block .bang td.c-ten { padding-top: 0; }
  .dm-block .bang td.c-ten::before { display: none; }
  .dm-block .bang td.c-ten input:not([type=checkbox]) { width: 100%; text-align: left; font-weight: 600; font-size: 1.02rem; }
  .dm-block .bang td.c-ten b { font-size: 1.1rem; }
  .dm-block .bang td.num { justify-content: space-between; font-weight: 600; }
  .dm-block .bang td.c-luu { padding-bottom: 0; }
  .dm-block .bang td.c-luu::before { display: none; }
  .dm-block .bang td.c-luu button { width: 100%; padding: .5rem; }
  .form-inline { flex-direction: column; align-items: stretch; }
  .form-inline input, .form-inline button { width: 100%; }

  /* ---- quản trị ---- */
  .quan-tri { gap: 1rem; }
  .user-card > header { padding: .6rem .7rem; }
  .quyen-bang th, .quyen-bang td { padding: .4rem .6rem; }
  .ck-cells { gap: .6rem; justify-content: space-between; width: 100%; }
  .ck { flex-direction: row-reverse; }
  .quyen-foot { flex-direction: column; align-items: stretch; gap: .4rem; }
  .quyen-foot button { width: 100%; padding: .55rem; }

  /* ---- modal full màn hình ---- */
  .modal { align-items: flex-start; padding: 4vh 2vw; }
  .modal-box { width: 100%; max-height: 90vh; display: flex; flex-direction: column; }
  .modal-box textarea { flex: 1; min-height: 40vh; }
  .modal-foot button { width: 100%; padding: .6rem; }

  .toast { bottom: calc(70px + env(safe-area-inset-bottom)); }
}