:root {
  --bg: #f3f5f7;
  --surface: #ffffff;
  --text: #17212b;
  --muted: #5f6d7a;
  --line: #dfe5ea;
  --accent: #0b7a75;
  --accent-text: #ffffff;
  --rail: #14212e;
  --rail-text: #aebccb;
  --danger: #b3261e;
  --ok: #1a7f3c;
  --warn: #9a6700;
  --shadow: 0 6px 22px rgba(15, 30, 45, .18);
  --radius: 10px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10161c; --surface: #19212a; --text: #e6ecf1; --muted: #93a1ae; --line: #2a343d;
    --accent: #35b8b0; --accent-text: #08201f; --rail: #0b1117; --danger: #ff8a80; --ok: #5fd08a; --warn: #e3b341;
    --shadow: 0 6px 22px rgba(0, 0, 0, .5);
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.45; overflow: hidden; }
[hidden] { display: none !important; }
h1 { font-size: 1.25rem; margin: 0 0 .5rem; }
.sub { font-size: .95rem; margin: .8rem .9rem .3rem; }
p { margin: .35rem 0; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.tiny { font-size: .78rem; }
.error { color: var(--danger); min-height: 1.2em; }
.grow { flex: 1; min-width: 0; }
.pad { padding: 0 .9rem; }

input, select, button { font: inherit; color: inherit; }
input, select { width: 100%; padding: .55rem .65rem; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
input:focus-visible, select:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button { padding: .5rem .9rem; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
button.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600; }
button.ghost { background: transparent; }
button.small { padding: .3rem .6rem; font-size: .85rem; }
button:disabled { opacity: .55; cursor: not-allowed; }
label { display: block; font-weight: 600; font-size: .85rem; margin: .7rem 0 .25rem; }
.row { display: flex; align-items: center; gap: .6rem; }
.row.wrap { flex-wrap: wrap; align-items: end; }
.row label { margin-top: 0; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; }

/* Đăng nhập */
.login { min-height: 100%; display: grid; place-items: center; padding: 1rem; overflow: auto; height: 100%; }
.login-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1.6rem; box-shadow: var(--shadow); }
.login-card button { width: 100%; margin-top: .4rem; padding: .7rem; }

/* Khung ứng dụng */
.app { display: flex; height: 100%; }
.rail { width: 68px; flex: none; background: var(--rail); display: flex; flex-direction: column; align-items: stretch; padding: .5rem 0; }
.rail button { background: none; border: 0; border-radius: 0; color: var(--rail-text); padding: .7rem .2rem; display: flex; flex-direction: column; align-items: center; gap: .2rem; font-size: .7rem; border-left: 3px solid transparent; }
.rail button[aria-current="page"] { color: #fff; border-left-color: var(--accent); background: rgba(255, 255, 255, .07); }
.rail-end { margin-top: auto; }
.ic { width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; display: inline-block; }
.ic-map { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E"); }
.ic-route { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3a3 3 0 0 0-1 5.8V15a4 4 0 0 0 4 4h2.2a3 3 0 1 0 0-2H9a2 2 0 0 1-2-2V8.8A3 3 0 0 0 6 3zm0 2a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm10 12a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/%3E%3C/svg%3E"); }
.ic-chart { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20V10h4v10H4zm6 0V4h4v16h-4zm6 0v-7h4v7h-4z'/%3E%3C/svg%3E"); }
.ic-grid { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z'/%3E%3C/svg%3E"); }
.ic-bell { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22a2.5 2.5 0 0 0 2.4-2H9.6A2.5 2.5 0 0 0 12 22zm7-6v-5a7 7 0 0 0-5-6.7V3a2 2 0 1 0-4 0v1.3A7 7 0 0 0 5 11v5l-2 2v1h18v-1l-2-2z'/%3E%3C/svg%3E"); }
.ic-user { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-4.4 0-8 2.2-8 5v3h16v-3c0-2.8-3.6-5-8-5z'/%3E%3C/svg%3E"); }
.ic-out { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 3H4v18h6v-2H6V5h4V3zm5.6 4.6L14.2 9l2 2H9v2h7.2l-2 2 1.4 1.4L20 12l-4.4-4.4z'/%3E%3C/svg%3E"); }

.view { flex: 1; display: flex; min-width: 0; height: 100%; }
.panel { width: 340px; flex: none; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; overflow: auto; }
.panel-head { display: flex; align-items: center; gap: .5rem; padding: .8rem .9rem .4rem; }
.panel > input[type="search"] { margin: 0 .9rem .5rem; width: calc(100% - 1.8rem); }
.form { padding: 0 .9rem .6rem; }
.form button.primary { width: 100%; margin-top: .8rem; }

.tabs { display: flex; border-bottom: 1px solid var(--line); padding: 0 .5rem; }
.tabs button { flex: 1; background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0; color: var(--muted); padding: .5rem .2rem; }
.tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }

.devlist { list-style: none; margin: 0; padding: 0; flex: 1; overflow: auto; }
.dev { display: flex; align-items: center; gap: .6rem; padding: .65rem .9rem; border-bottom: 1px solid var(--line); cursor: pointer; }
.dev:hover, .dev[aria-selected="true"] { background: var(--bg); }
.dev .nm { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev .sub2 { display: block; font-weight: 400; font-size: .78rem; color: var(--muted); }
.dot { width: 11px; height: 11px; border-radius: 50%; flex: none; background: #8d99a5; }
.dot.moving { background: #16a34a; }
.dot.stopped { background: #2563eb; }
.dot.offline { background: #8d99a5; }
.badge { font-size: .75rem; color: var(--muted); white-space: nowrap; }
.dev.off .nm { color: var(--muted); font-weight: 500; }

/* Bản đồ */
.mapwrap { position: relative; flex: 1; min-width: 0; }
.map { position: absolute; inset: 0; background: #e8ebee; }
.banner { position: absolute; top: .6rem; left: 50%; transform: translateX(-50%); z-index: 500; margin: 0; background: var(--surface); color: var(--danger); padding: .4rem .8rem; border-radius: 8px; box-shadow: var(--shadow); max-width: 90%; }
.info { position: absolute; z-index: 500; left: .8rem; bottom: .8rem; width: min(380px, calc(100% - 1.6rem)); box-shadow: var(--shadow); padding: .8rem .9rem; }
.info h2 { margin: 0 0 .3rem; font-size: 1rem; display: flex; align-items: center; gap: .5rem; }
.info .kv { display: grid; grid-template-columns: auto 1fr; gap: .15rem .7rem; font-size: .88rem; margin: .3rem 0 .4rem; }
.info .kv dt { color: var(--muted); }
.info .kv dd { margin: 0; overflow-wrap: anywhere; }
.info .actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.info .close { margin-left: auto; padding: .1rem .5rem; }
.leaflet-tooltip.devtip { font-weight: 600; padding: 1px 6px; }

/* Lộ trình */
.player { padding: .2rem .9rem .5rem; border-top: 1px solid var(--line); margin-top: .5rem; }
.player input[type="range"] { padding: 0; }
.trips { list-style: none; margin: 0; padding: 0 .9rem; }
.trips li { padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: .88rem; cursor: pointer; }
.trips li:hover { background: var(--bg); }
.trips .t1 { font-weight: 600; }
.legend { padding: .6rem .9rem 1rem; margin-top: auto; }
.sw { display: inline-block; width: .8em; height: .8em; border-radius: 3px; vertical-align: -.05em; margin: 0 .2em 0 .5em; }
.sw-slow { background: #d97706; } .sw-mid { background: #2563eb; } .sw-fast { background: #c026d3; }

/* Báo cáo */
.report { flex: 1; overflow: auto; padding: 1rem; }
.report .card { max-width: 900px; margin: 0 auto; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; margin: .8rem 0; }
.stat { background: var(--bg); border-radius: 8px; padding: .6rem .8rem; }
.stat b { display: block; font-size: 1.3rem; }
.chart svg { width: 100%; height: 160px; display: block; }
.chart rect { fill: var(--accent); }
.chart text { fill: var(--muted); font-size: 10px; }
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; margin-top: .6rem; }
th, td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--line); white-space: nowrap; }

#toast { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%) translateY(20px); background: var(--text); color: var(--bg); padding: .6rem 1rem; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 2000; max-width: 90vw; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Điện thoại: thanh điều hướng dưới, danh sách thiết bị dạng ngăn kéo phía dưới bản đồ */
@media (max-width: 760px) {
  .app { flex-direction: column-reverse; }
  .rail { width: 100%; flex-direction: row; padding: 0; padding-bottom: env(safe-area-inset-bottom); }
  .rail button { flex: 1; border-left: 0; border-top: 3px solid transparent; padding: .45rem .2rem; }
  .rail button[aria-current="page"] { border-top-color: var(--accent); }
  .rail-end { margin-top: 0; }
  .view { flex-direction: column-reverse; min-height: 0; }
  .app { height: 100%; }
  .panel { width: 100%; max-height: 42%; border-right: 0; border-top: 1px solid var(--line); }
  #view-history .panel { max-height: 48%; }
  .mapwrap { min-height: 120px; }
  .info { bottom: .5rem; }
}
.player button { white-space: nowrap; }

/* ---- Bổ sung: đăng nhập, trang nội dung, thẻ thiết bị, cảnh báo, tài khoản ---- */
.center { text-align: center; }
.logo { width: 52px; height: 52px; border-radius: 14px; background: var(--accent); color: var(--accent-text); display: grid; place-items: center; margin: 0 auto .6rem; }
.logo .ic { width: 28px; height: 28px; }
.login-card h1 { text-align: center; }
.login-card > .muted:first-of-type { text-align: center; }
.passrow { display: flex; gap: .4rem; }
.passrow input { flex: 1; min-width: 0; }
.passrow button { width: auto; margin: 0; padding: .4rem .8rem; }
button.danger { color: var(--danger); border-color: var(--danger); background: transparent; }
.check { display: flex; align-items: center; gap: .5rem; font-weight: 500; margin: .4rem 0; }
.check input { width: auto; }

.rail-end { margin-top: auto; }
.page { flex: 1; overflow: auto; padding: 1rem; min-width: 0; }
.page > * { max-width: 1000px; margin-left: auto; margin-right: auto; }
.page.narrow > * { max-width: 560px; }
.page .card { margin-bottom: 1rem; }
.pagehead { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .8rem; flex-wrap: wrap; }
.pagehead h1 { margin: 0; }
.h2 { font-size: 1rem; margin: 0 0 .6rem; }
.sectionhead { display: flex; align-items: center; justify-content: space-between; padding-right: .9rem; }
.kv.wide { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; margin: 0; }
.kv.wide dt { color: var(--muted); }
.kv.wide dd { margin: 0; overflow-wrap: anywhere; }
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { padding: .45rem 0; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: .6rem; }
ul.plain li:last-child { border-bottom: 0; }

.stats.big { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 1rem; }
.stats.compact { padding: 0 .9rem; grid-template-columns: repeat(2, 1fr); margin-top: .2rem; }
.stats.compact .stat b { font-size: 1.05rem; }
.stat { font-size: .82rem; color: var(--muted); }
.stat b { color: var(--text); }
.stat.s-moving b { color: var(--ok); }
.stat.s-offline b { color: var(--muted); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: .8rem; }
.dcard { display: flex; flex-direction: column; gap: .5rem; margin: 0 !important; }
.dcard h2 { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; }
.dcard .chip { margin-left: auto; }
.chip { font-size: .72rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; background: var(--bg); color: var(--muted); white-space: nowrap; }
.chip.moving { background: rgba(22, 163, 74, .15); color: var(--ok); }
.chip.stopped { background: rgba(37, 99, 235, .15); color: #2563eb; }
.chip.warn { background: rgba(217, 119, 6, .16); color: var(--warn); }
.chip.bad { background: rgba(179, 38, 30, .13); color: var(--danger); }
.chip.ok { background: rgba(22, 163, 74, .15); color: var(--ok); }
@media (prefers-color-scheme: dark) { .chip.stopped { color: #7aa7ff; } }
.dcard .addr { font-size: .88rem; color: var(--muted); overflow-wrap: anywhere; min-height: 1.3em; }
.dcard .mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.dcard .mini div { background: var(--bg); border-radius: 8px; padding: .35rem .5rem; font-size: .75rem; color: var(--muted); }
.dcard .mini b { display: block; font-size: .95rem; color: var(--text); }
.dcard .actions { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: auto; }
.bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--ok); }
.bar.low > i { background: var(--danger); }

/* Điểm đánh dấu thiết bị */
.leaflet-marker-icon.mk { background: none; border: 0; }
.mk-body { position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #8d99a5; border: 3px solid #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .45); }
.mk-body.moving { background: #16a34a; }
.mk-body.stopped { background: #2563eb; }
.mk-body.sel { box-shadow: 0 0 0 4px rgba(11, 122, 117, .55), 0 1px 6px rgba(0, 0, 0, .45); }
.mk-arr { position: absolute; left: 50%; top: -14px; margin-left: -6px; width: 0; height: 0; border: 6px solid transparent; border-bottom: 10px solid #16a34a; transform-origin: 6px 22px; }
.mk-name { position: absolute; left: 30px; top: 4px; white-space: nowrap; font-weight: 700; font-size: 12px; color: #17212b; background: rgba(255, 255, 255, .92); border-radius: 4px; padding: 0 5px; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.pinfocus { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5)); }

.banner.note { color: var(--text); top: auto; bottom: .8rem; left: auto; right: .8rem; transform: none; max-width: min(420px, 90%); }
#mapEmpty { top: .6rem; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); }
.info h2 .chip { margin-left: .2rem; }
.info .big { display: flex; align-items: baseline; gap: .4rem; font-size: .9rem; color: var(--muted); margin: .1rem 0 .4rem; }
.info .big b { font-size: 1.7rem; color: var(--text); line-height: 1; }
.info { max-height: 70%; overflow: auto; }
.info .actions button { white-space: nowrap; }
.info .follow { display: flex; align-items: center; gap: .4rem; font-weight: 500; font-size: .85rem; margin: 0 0 .5rem; }
.info .follow input { width: auto; }

/* Lộ trình bổ sung */
.speedchart svg { width: 100%; height: 70px; display: block; cursor: pointer; }
.speedchart .area { fill: var(--accent); opacity: .22; }
.speedchart .ln { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.speedchart .cur { stroke: var(--danger); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.trips li .t1 .tag { font-weight: 400; color: var(--muted); }

/* Cảnh báo */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .7rem 0 .3rem; }
.chips button { border-radius: 999px; padding: .25rem .8rem; font-size: .85rem; }
.chips button[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600; }
.events { list-style: none; margin: .4rem 0 0; padding: 0; }
.events li { display: flex; gap: .7rem; padding: .65rem 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.events li:last-child { border-bottom: 0; }
.events .ev-dot { width: 12px; height: 12px; border-radius: 50%; margin-top: .3rem; flex: none; background: #2563eb; }
.events .ev-dot.warn { background: #d97706; }
.events .ev-dot.bad { background: var(--danger); }
.events .ev-dot.ok { background: #16a34a; }
.events .ev-main { flex: 1; min-width: 0; }
.events .ev-title { font-weight: 600; }
.events .ev-sub { font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
.events .ev-btn { flex: none; }

table th { color: var(--muted); font-weight: 600; font-size: .8rem; }

@media (max-width: 760px) {
  .rail button { font-size: .62rem; padding: .4rem .1rem; }
  .ic { width: 22px; height: 22px; }
  .page { padding: .7rem; }
  .info { max-height: 70%; }
  #view-monitor.has-sel .panel { display: none; }
  .banner.note { bottom: .5rem; right: .5rem; }
  .stats.compact { grid-template-columns: repeat(2, 1fr); }
  .dcard .mini { grid-template-columns: repeat(3, 1fr); }
}
@media print { .rail { display: none; } }

.info details.more { margin: .2rem 0 .5rem; }
.info details.more summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: .88rem; padding: .2rem 0; }
.info details.more .actions { margin-top: .2rem; }
.dcard .actions button { flex: 1 1 auto; }

.mapctl { position: absolute; z-index: 500; top: .6rem; right: .6rem; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: .3rem .6rem; box-shadow: var(--shadow); font-size: .85rem; }
.stats.big .card { margin: 0; padding: .7rem .9rem; }
.stats.big { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .6rem; }