/* he-thong.css - HE THONG THIET KE GIAO DIEN (23/10/2026). Nap SAU cung trong nhom CSS loi (sau view.css).
   Muc tieu: 1 he thong thong nhat cho KHUNG UNG DUNG (chu, khoang cach, bo goc, bong, vong tieu diem, nut, o nhap,
   bang, the, bang mo-dun, hop thoai, the tab, thanh cuon, trang thai rong, nhan trang thai) - SANG va TOI.
   - Token goc o theme.css (:root). Moi mau nhan suy ra tu --brand / --brand-ink / --brand-weak
     -> «Tùy biến giao diện» (giao-dien.js, quan tri) doi mau la ca he thong doi theo. KHONG ghi cung ma mau thuong hieu.
   - KHONG dong vao kieu hien thi lop ban do (mau/ky hieu/to/net) - chi khung giao dien.
   - Nguyen tac an toan: quy tac nen dung :where() (do uu tien 0) de CSS rieng cua mo-dun van thang;
     chi nhung cho can thong nhat (vo bang mo-dun, che do toi) moi dung bo chon manh hon.
   Go bo: xoa dong <link href="css/he-thong.css"> trong index.html la ve nhu cu. */

/* =====================================================================
   1. TOKEN CHE DO TOI (bo sung cho khung.css :root[data-theme="dark"])
   ===================================================================== */
:root{
  --on-brand:#ffffff;              /* chu tren nen mau chu dao */
  --field:var(--panel);            /* nen o nhap */
  --scroll:#c4c7c5; --scroll-hover:#9aa0a6;
  --radius-panel:14px;
}
:root[data-theme="dark"]{
  --hover:rgba(255,255,255,.07); --pressed:rgba(255,255,255,.12);
  --glass:rgba(31,35,41,.94); --overlay:rgba(0,0,0,.62);
  --field:#262b32; --scroll:#4a525c; --scroll-hover:#5f6873;
  --on-brand:#0b1220;              /* --brand toi la mau SANG (#6aa7ff / ban sang 40% cua mau quan tri) -> chu toi dat AA */
  --ok-weak:#1b3326; --ok-ink:#a8dab5; --warn-weak:#3a3016; --warn-ink:#fde293;
  --danger-weak:#3d2020; --danger-ink:#f6aea9;
  --brand-2:var(--brand);
  --ok:#34a853; --danger:#ef6a5f; /* sang hon de chu trang thai dat 4.5:1 tren nen toi; nen dam + chu trang van >= 3:1 */
  --ink-faint:#8b949e;             /* 4.2 -> 5.0:1 tren --panel toi (AA) */
}
@supports (color:color-mix(in srgb,red,blue)){
  :root[data-theme="dark"]{--ring:0 0 0 3px color-mix(in srgb,var(--brand) 45%,transparent)}
}

/* =====================================================================
   2. NEN TANG: chu, dieu khien bieu mau ke thua font
   ===================================================================== */
:where(button,input,select,textarea,optgroup){font-family:inherit}
:where(kbd){font-family:var(--font-mono);font-size:var(--fs-2xs);line-height:1.5;padding:0 5px;border:1px solid var(--line);
  border-bottom-width:2px;border-radius:5px;background:var(--surface);color:var(--ink-soft);white-space:nowrap}
:where(code,pre,samp){font-family:var(--font-mono)}
:where(h1,h2,h3,h4){line-height:var(--lh-tight);color:inherit}
:where(small){font-size:var(--fs-xs)}

/* =====================================================================
   3. VONG TIEU DIEM (ban phim) - moi phan tu tuong tac
   ===================================================================== */
:where(a,button,summary,[role="button"],[role="tab"],[role="menuitem"],[role="option"],[tabindex]:not([tabindex="-1"])):focus-visible{
  outline:2px solid var(--brand);outline-offset:2px}
.maplibregl-canvas:focus-visible{outline:2px solid var(--brand-a35);outline-offset:-2px}

/* =====================================================================
   4. O NHAP / CHON / VUNG VAN BAN / O DANH DAU (nen tang :where - CSS rieng van thang)
   ===================================================================== */
:where(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=button],[type=submit],[type=reset],[type=image],[type=hidden]),select,textarea){
  color:var(--ink);background-color:var(--field);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:4px 8px;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
:where(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=button],[type=submit],[type=reset],[type=image],[type=hidden]),select,textarea):hover:not(:disabled):not(:focus){
  border-color:var(--ink-faint)}
:where(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=button],[type=submit],[type=reset],[type=image],[type=hidden]),select,textarea):focus-visible{
  outline:3px solid var(--brand-a35);outline-offset:0;border-color:var(--brand)}   /* outline (khong box-shadow): o nhap «trong suot» co outline:0 rieng se khong bi ve khung */
:where(input,select,textarea):disabled{opacity:.6;cursor:not-allowed}
:where(input,textarea)::placeholder{color:var(--ink-faint);opacity:1}
:where(input[type=checkbox],input[type=radio],input[type=range],progress){accent-color:var(--brand)}
:where(input[type=checkbox],input[type=radio]):focus-visible{outline:2px solid var(--brand);outline-offset:1px}
:where(fieldset){border:1px solid var(--line-soft);border-radius:var(--radius-sm)}
:where(legend){font-weight:var(--fw-semi);color:var(--ink-soft);font-size:var(--fs-xs);padding:0 4px}

/* =====================================================================
   5. NUT
   ===================================================================== */
.btn{min-height:var(--ctl-h);line-height:1.2;justify-content:center}
.btn.btn-sm{min-height:var(--ctl-h-sm)}
.btn-primary,.btn-primary:hover{color:var(--on-brand)}
.btn:disabled,.btn[aria-disabled="true"],.chip:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}
.btn-danger{color:var(--danger)}
.btn-danger:hover{color:#fff}
/* nut khong lop trong bang mo-dun / hop thoai (khong ai tao kieu) -> nut phu chuan */
:where(.wg-ql,.wg-kn,.modal-box,.wg-ph) :where(button:not([class]):not([role="tab"])){
  border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:var(--radius-sm);
  padding:4px 10px;min-height:var(--ctl-h-sm);font:inherit;font-weight:var(--fw-semi);cursor:pointer;
  transition:background var(--dur-fast),border-color var(--dur-fast)}
:where(.wg-ql,.wg-kn,.modal-box,.wg-ph) :where(button:not([class]):not([role="tab"])):hover:not(:disabled){background:var(--surface);border-color:var(--ink-faint)}
:where(.wg-ql,.wg-kn,.modal-box,.wg-ph) :where(button:not([class])):disabled{opacity:.5;cursor:not-allowed}
/* nut bieu tuong & cong cu: nen re chuot theo token (dung ca nen toi) */
.icon-btn:hover,.tool:hover:not(.active),.dock-modes button:hover,.lt-tbl:hover,.lt-sty:hover,.lt-ren:hover,
.wg-pn-x:hover,.wg-pn-min:hover,.wg-pn-ben:hover{background:var(--hover)}
.tool.active,.ctx-act-pri,.ctx-act-pri:hover{color:var(--on-brand)}

/* =====================================================================
   6. CHIP & NHAN TRANG THAI
   ===================================================================== */
.chip{background:var(--panel);border-color:var(--line)}
.wg-badge{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:var(--radius-pill);font-size:var(--fs-2xs);
  font-weight:var(--fw-semi);line-height:1.6;white-space:nowrap;background:var(--surface);color:var(--ink-soft);border:1px solid var(--line-soft)}
.wg-badge.ok{background:var(--ok-weak);color:var(--ok-ink);border-color:transparent}
.wg-badge.warn{background:var(--warn-weak);color:var(--warn-ink);border-color:transparent}
.wg-badge.err{background:var(--danger-weak);color:var(--danger-ink);border-color:transparent}
.wg-badge.info{background:var(--brand-weak);color:var(--brand-ink);border-color:transparent}
.pi-badge.warn{background:var(--warn-weak);color:var(--warn-ink)}
.pi-badge.err{background:var(--danger-weak);color:var(--danger-ink)}
.pi-badge.pi-tag{color:var(--on-brand)}

/* =====================================================================
   7. VO BANG MO-DUN (WG.panels nhan .wg-ql) - thong nhat nen / vien / bo goc / bong / chu
   (bang BIM/xd360 toan man bo qua)
   ===================================================================== */
.wg-ql:is([class*="-panel"]):not(.bim-panel):not(.xd-panel),.wg-pn{
  background-color:var(--panel);color:var(--ink);border:1px solid var(--line-soft);border-radius:var(--radius-panel);
  box-shadow:var(--shadow-3);line-height:var(--lh-base)}
/* hang tieu de: chu dam 14px, thong nhat voi .wg-pn-title */
.wg-pn-title{font-size:var(--fs-md);letter-spacing:-.005em}
.wg-ql > :is([class$="-head"],[class$="-h"]) > b:first-child,
.wg-ql > :is([class$="-head"],[class$="-h"]) > strong:first-child{font-size:var(--fs-md);font-weight:var(--fw-bold);letter-spacing:-.005em;color:var(--ink)}
/* the tab trong bang mo-dun: re chuot, tieu diem, the dang chon theo mau chu dao */
.wg-ql [class$="-tabs"] > button{transition:color var(--dur-fast),background var(--dur-fast),border-color var(--dur-fast);border-radius:8px 8px 0 0}
.wg-ql [class$="-tabs"] > button:not(.is-active):not(.on):not([aria-selected="true"]):hover{color:var(--ink);background:var(--hover)}
.wg-ql [class$="-tabs"] > button:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
/* chu phu / rong / loi */
.wg-ql :is([class$="-muted"]){color:var(--ink-soft)}
.wg-ql :is([class$="-empty"]){color:var(--ink-soft)}
.wg-ql :is([class$="-err"]){color:var(--danger)}
/* bang trong bang mo-dun / vung chinh / hop thoai (nen tang :where) */
:where(.wg-ql,.wg-kn,.modal-box) :where(table){border-collapse:collapse}
:where(.wg-ql,.wg-kn,.modal-box) :where(th){font-weight:var(--fw-semi);color:var(--ink-soft);text-align:left}
:where(.wg-ql,.wg-kn,.modal-box) :where(th,td){border-color:var(--line-soft)}
/* tieu de muc */
:where(.wg-ql,.wg-kn,.modal-box) :where(h4){font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--ink)}
:where(.wg-ql,.wg-kn,.modal-box) :where(hr){border:0;border-top:1px solid var(--line-soft);margin:var(--sp-2) 0}

/* =====================================================================
   8. HOP THOAI
   ===================================================================== */
.modal{background:var(--overlay)}
.modal-box{background:var(--panel);color:var(--ink);border-radius:var(--radius-lg)}
.modal-head{border-bottom-color:var(--line-soft);gap:var(--sp-3)}
.modal-head h3{font-size:var(--fs-lg);line-height:var(--lh-tight)}
.modal-foot{border-top-color:var(--line-soft);background:var(--surface)}
dialog#wg-ph::backdrop,dialog#wg-xn::backdrop,dialog#wg-cmd::backdrop{background:var(--overlay)}

/* =====================================================================
   9. BANG DU LIEU / BANG KHOA-GIA TRI
   ===================================================================== */
table.grid thead th{font-size:var(--fs-xs)}
table.grid tbody tr:hover{background:var(--brand-weak)}
.popup-body tr:nth-child(even){background:var(--surface)}
table.kv td:first-child{color:var(--ink-soft)}

/* =====================================================================
   10. THANH CUON (theo token -> dung ca nen toi)
   ===================================================================== */
*{scrollbar-color:var(--scroll) transparent}
*::-webkit-scrollbar-thumb{background:var(--scroll);background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--scroll-hover);background-clip:content-box}

/* =====================================================================
   11. TRANG THAI RONG
   ===================================================================== */
.wg-cmd-rong,.wg-trong{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);text-align:center;color:var(--ink-soft);
  padding:var(--sp-6) var(--sp-4);font-size:var(--fs-sm);line-height:var(--lh-loose)}
.wg-cmd-rong .ic,.wg-trong .ic{color:var(--ink-faint)}

/* =====================================================================
   12. CHE DO TOI - va lo hong (cac nen trang ghi cung trong CSS cu)
   ===================================================================== */
:root[data-theme="dark"] :is(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=button],[type=submit],[type=reset],[type=image]),select,textarea){
  background-color:var(--field);color:var(--ink);border-color:var(--line)}
/* o nhap «trong suot» nam trong thanh tim (Ctrl+K, bang du lieu, wiki): giu trong suot */
:root[data-theme="dark"] :is(.wg-cmd-top input,.vw-tim input,.wk-tim input,.xg .xg-in){background-color:transparent!important;box-shadow:none}
:root[data-theme="dark"] :is(.toolbar,.basemap-ctrl,.mapctl-toggle,.coord-readout,.zoom-readout){background:var(--glass);color:var(--ink-soft);border-color:var(--line-soft)}
:root[data-theme="dark"] :is(.chip,.ctx-act,.popup-toggle,.pi-ic){background-color:var(--panel);color:var(--ink-soft);border-color:var(--line)}
:root[data-theme="dark"] :is(.md-card,.project-item:hover){background-color:var(--panel);border-color:var(--line)}
:root[data-theme="dark"] .md-card.off{background:var(--surface)}
:root[data-theme="dark"] :is(.chip,.ctx-act,.pi-ic):hover{background:var(--hover);color:var(--ink)}
:root[data-theme="dark"] .project-item.active{background:var(--brand-weak);border-color:var(--brand)}
:root[data-theme="dark"] :is(.lt-group>summary,.side-proj,.dock-bar){background:var(--surface);color:var(--ink)}
:root[data-theme="dark"] :is(.lt-nhom>summary){background:var(--brand-weak);color:var(--ink)}
:root[data-theme="dark"] :is(table.grid thead th){background:var(--surface);color:var(--ink-soft)}
:root[data-theme="dark"] :is(code){background:var(--brand-weak);color:var(--brand-ink)}
:root[data-theme="dark"] .lt-del:hover,:root[data-theme="dark"] .ctx-act-del:hover,:root[data-theme="dark"] .pi-ic.pi-del:hover{background:var(--danger-weak);color:var(--danger-ink)}
:root[data-theme="dark"] .btn-danger{background:transparent;border-color:var(--danger-ink);color:var(--danger-ink)}
:root[data-theme="dark"] .btn-danger:hover{background:var(--danger);border-color:var(--danger);color:#fff}
:root[data-theme="dark"] .wg-ql :is([class$="-err"]){color:var(--danger-ink)}

/* =====================================================================
   13. CHUYEN DONG: ton trong «giam chuyen dong» cua he dieu hanh
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;scroll-behavior:auto!important}
  .modal:not([hidden]) .modal-box,.toast:not([hidden]),#panel-context:not([hidden]) .ctx-body{animation:none!important}
}

/* =====================================================================
   14. MAN HINH TRUNG BINH (may tinh bang 769-1100px): bang mo-dun khong tran man
   ===================================================================== */
@media (min-width:769px) and (max-width:1100px){
  .wg-ql:is([class*="-panel"]):not(.bim-panel):not(.xd-panel),.wg-pn{max-width:calc(100vw - 88px)}
  .modal-box{max-width:calc(100vw - 32px)}
}

/* che do toi - bo sung sau khi do (23/10): nut phan doan dang chon, to sang ket qua tim */
:root[data-theme="dark"] mark{background:rgba(253,214,99,.28);color:var(--ink)}
:root[data-theme="dark"] .login-gate{background-color:var(--surface)}
:root[data-theme="dark"] .lg-err{background:var(--danger-weak);color:var(--danger-ink)}
:root[data-theme="dark"] .brand-pub{color:var(--ok-ink)}

/* =====================================================================
   15. DIEN THOAI: ngan keo thanh ben (sidebar) dang mo thi nam TREN thanh cong cu noi
   (truoc day thanh cong cu z 36 de len ngan keo z 26 -> che noi dung danh muc)
   ===================================================================== */
@media (max-width:768px){
  #app:not(.sb-collapsed) .toolbar{z-index:24}
}