:root{--navy:#123650;--navy-2:#0c293e;--teal:#23866f;--teal-soft:#e5f3ef;--ink:#182a35;--muted:#566b77;--line:#d7e2e7;--surface:#fff;--bg:#f2f6f7;--shadow:0 10px 32px rgba(24,54,72,.065);--radius:16px}
html{font-size:16px}
body{color:var(--ink);font-family:"Segoe UI Variable","Segoe UI",system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.55;background:var(--bg)}
button,input,select,textarea{font-size:14px;line-height:1.4}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid rgba(35,134,111,.24);outline-offset:2px}
.muted{color:var(--muted);font-size:13px}
.app-shell{grid-template-columns:252px minmax(0,1fr)}
.sidebar{width:252px;padding:26px 18px;background:linear-gradient(180deg,var(--navy-2),var(--navy) 64%,#164560)}
.brand strong{font-size:17px}.brand small{font-size:12px;line-height:1.35}.nav-item{min-height:46px;font-size:14px;font-weight:650}.nav-item span{font-size:11px}.sidebar-foot strong{font-size:13px}.sidebar-foot small{font-size:11px}
.main-content{padding:0 36px 52px}.topbar{min-height:106px}.topbar h1{font-size:27px;line-height:1.2}.eyebrow,.section-kicker{font-size:11px;line-height:1.35}.snapshot-control span,.inline-fields span,.worker-field span,.compare-controls label span,.drawer-section label span{font-size:12px;line-height:1.35;letter-spacing:.055em}
select,input,textarea{border-color:var(--line);border-radius:10px}.primary-button,.secondary-button,.split-button,.pagination button{min-height:42px;font-size:14px;border-radius:10px}.primary-button{background:var(--navy)}
.snapshot-banner{min-height:116px;padding:23px 26px;border-radius:var(--radius);box-shadow:var(--shadow)}.snapshot-banner h2{font-size:21px}.snapshot-banner p{font-size:14px}.live-pill{font-size:11px}
.kpi-grid{gap:16px}.kpi-card{min-height:122px;padding:19px 20px;border-radius:14px;box-shadow:0 7px 24px rgba(24,54,72,.045)}.kpi-card .kpi-label,.kpi-card span:first-child{font-size:12px;line-height:1.35}.kpi-card strong{font-size:31px}.kpi-card small{font-size:13px;line-height:1.45}
.panel{padding:22px;border-radius:var(--radius);box-shadow:0 7px 24px rgba(24,54,72,.04)}.panel h3{font-size:18px;line-height:1.35}.panel-head{margin-bottom:19px}.bar-row label,.vendor-row,.timeline-item{font-size:14px}.change-item span{font-size:12px}.timeline-item small{font-size:12px}
.toolbar{gap:10px;margin-bottom:16px}.search-box input,.inventory-toolbar select,.compare-controls select,.compare-controls input{height:44px;font-size:14px}.table-summary{font-size:14px}.table-summary strong{font-size:18px}.table-hint{font-size:12px}
.table-wrap{border-radius:13px;box-shadow:inset 0 1px rgba(255,255,255,.7)}.data-table th{height:46px;padding:0 14px;color:#435b68;background:#edf3f5;font-size:12px;line-height:1.3;letter-spacing:.035em;text-transform:none}.data-table td{padding:13px 14px;font-size:13.5px;line-height:1.5}.data-table tbody tr:nth-child(even){background:#fbfcfc}.data-table tbody tr:hover{background:#edf8f4}.cell-main{font-size:14px}.cell-sub{font-size:12px;line-height:1.45}.mono{font-size:12.5px}.tag,.scope-badge,.status-badge{font-size:11px;line-height:1.3}
.empty-state{font-size:14px}.empty-state strong{font-size:16px}.pagination{font-size:14px}.drawer-section label span{font-size:12px}
.portal-shell{width:min(1320px,calc(100% - 56px));padding:42px 0 34px}.portal-header{align-items:center;padding:22px 24px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.82);box-shadow:var(--shadow);backdrop-filter:blur(12px)}.portal-header h1{font-size:clamp(34px,4vw,52px);line-height:1.08}.intro{font-size:16px}.account{font-size:14px;background:#fff}.account button{min-height:40px;font-size:14px;font-weight:700}.system-grid{gap:22px;margin-top:28px}.system-card{min-height:340px;padding:32px;border-radius:18px;box-shadow:var(--shadow)}.system-card::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--accent)}.system-card:hover{transform:translateY(-3px);border-color:#bfd1d8}.card-icon{width:64px;height:64px;margin-bottom:26px;border-radius:17px}.system-card h2{font-size:27px;line-height:1.25}.system-card>p:not(.card-kicker){font-size:15px;line-height:1.65}.card-action{left:32px;bottom:28px;font-size:15px}
.shared-update{gap:24px;margin-top:20px;padding:25px 28px;border-radius:16px;box-shadow:0 8px 28px rgba(23,56,76,.055)}.shared-update h2{font-size:20px;line-height:1.35}.shared-update p:not(.card-kicker){font-size:14px;line-height:1.65}.update-actions{flex-wrap:wrap;justify-content:flex-end}.file-picker{min-width:250px;font-size:14px;line-height:1.45}.update-actions button{min-height:44px;font-size:14px}.update-result{font-size:14px;line-height:1.65}
.login-shell{padding:24px}.login-card{width:min(100%,460px);padding:40px;border-radius:18px;box-shadow:0 22px 64px rgba(24,54,72,.14)}.login-card .brand-mark{width:58px;height:58px;border-radius:16px;background:var(--navy)}.login-card h1{font-size:29px;line-height:1.25;letter-spacing:-.02em}.login-card .intro{font-size:15px;line-height:1.65}.login-card form{gap:19px}.login-card label{gap:8px;font-size:14px}.login-card input{min-height:48px;padding:0 14px;font-size:15px}.login-card button{min-height:48px;font-size:15px}.login-card .error{font-size:14px}.login-card .security-note{font-size:13px;line-height:1.5}
@media(max-width:1040px){.main-content{padding:0 24px 42px}.content-grid.two-thirds{grid-template-columns:1fr}.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.app-shell{display:block}.sidebar{width:100%}.main-content{padding-bottom:86px}}
@media(max-width:760px){.app-shell{grid-template-columns:1fr}.portal-shell{width:min(100% - 24px,620px);padding-top:16px}.portal-header{padding:20px}.system-card{min-height:330px;padding:26px}.card-action{left:26px}.shared-update{padding:22px}.main-content{padding:0 14px 34px}.topbar h1{font-size:23px}.kpi-card strong{font-size:28px}.data-table td{font-size:13px}.login-card{padding:30px 24px}.login-card h1{font-size:25px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Lightweight loading state: no full-screen blur and no rotating element. */
.loading-overlay{inset:12px 0 auto;display:flex;justify-content:center;padding:0;background:transparent;backdrop-filter:none;pointer-events:none;transition:opacity .18s ease,visibility .18s ease}
.loading-card{position:relative;grid-template-columns:auto minmax(190px,1fr);justify-items:stretch;align-items:center;gap:11px;width:min(380px,calc(100vw - 28px));min-width:0;padding:12px 15px 15px;overflow:hidden;border:1px solid #cbdde3;border-radius:13px;background:rgba(255,255,255,.97);box-shadow:0 12px 34px rgba(15,47,73,.14)}
.loading-copy{display:grid;gap:1px}.loading-card strong{font-size:14px;line-height:1.35}.loading-card small{font-size:12px;line-height:1.35}.loading-symbol{display:flex;align-items:end;gap:3px;width:27px;height:24px;padding:3px;border-radius:7px;background:#e7f4f0}.loading-symbol i{width:5px;border-radius:4px;background:#23866f;animation:loadingLevel 1.15s ease-in-out infinite}.loading-symbol i:nth-child(1){height:8px}.loading-symbol i:nth-child(2){height:16px;animation-delay:.14s}.loading-symbol i:nth-child(3){height:11px;animation-delay:.28s}.loading-track{position:absolute;inset:auto 0 0;height:3px;overflow:hidden;background:#e6efef}.loading-track i{display:block;width:42%;height:100%;border-radius:3px;background:linear-gradient(90deg,#23866f,#62c6aa);transform:translateX(-110%);animation:loadingGlide 1.35s ease-in-out infinite}.loading-spinner{display:none!important}
@keyframes loadingLevel{0%,100%{opacity:.35;transform:scaleY(.65)}50%{opacity:1;transform:scaleY(1)}}
@keyframes loadingGlide{0%{transform:translateX(-110%)}100%{transform:translateX(340%)}}
@media(prefers-reduced-motion:reduce){.loading-symbol i{animation:none!important;opacity:.8;transform:none}.loading-track i{width:100%;animation:none!important;transform:none}}

/* Visual refresh v2 — a distinct, data-focused operations console. */
body{background:linear-gradient(180deg,#eaf1f4 0,#f5f8f9 360px,#f3f6f7 100%)}
.portal-header{position:relative;min-height:230px;padding:36px 40px;overflow:hidden;color:#fff;border:0;background:linear-gradient(125deg,#0b2b42 0%,#124e62 58%,#187461 120%);box-shadow:0 24px 60px rgba(10,42,62,.18)}
.portal-header::before{content:"";position:absolute;right:-80px;top:-170px;width:430px;height:430px;border:1px solid rgba(255,255,255,.14);border-radius:50%;box-shadow:0 0 0 48px rgba(255,255,255,.025),0 0 0 96px rgba(255,255,255,.018)}
.portal-header::after{content:"";position:absolute;right:250px;bottom:-120px;width:250px;height:250px;border-radius:50%;background:radial-gradient(circle,rgba(73,205,166,.18),transparent 68%)}
.portal-title,.account{position:relative;z-index:1}.portal-header h1{color:#fff;font-size:clamp(42px,5vw,66px)}.portal-header .eyebrow{margin-top:15px;color:#8fe1c9}.portal-header .intro{max-width:650px;color:rgba(244,251,253,.76);font-size:17px}.portal-live{display:inline-flex;align-items:center;gap:9px;padding:6px 10px;border:1px solid rgba(255,255,255,.16);border-radius:999px;color:#d7f7ed;background:rgba(255,255,255,.08);font-size:11px;font-weight:800;letter-spacing:.1em}.portal-live i{width:7px;height:7px;border-radius:50%;background:#69e1b7;box-shadow:0 0 0 5px rgba(105,225,183,.12)}
.portal-header .account{align-self:flex-start;color:#fff;border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.09);backdrop-filter:blur(14px)}.portal-header .account button{color:#10354a;background:#fff}
.system-grid{gap:24px;margin-top:24px}.system-card{min-height:410px;padding:34px 36px;border:0;background:linear-gradient(145deg,#fff 0%,#fff 62%,var(--card-tint) 100%);box-shadow:0 18px 48px rgba(20,53,72,.10)}.system-card.inventory{--card-tint:#e2f4ee}.system-card.vnp{--card-tint:#e3f0f6}.system-card::before{width:7px}.system-card::after{right:-85px;bottom:-120px;width:300px;height:300px;border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);background:transparent;box-shadow:0 0 0 35px color-mix(in srgb,var(--accent) 3%,transparent)}.card-icon{width:70px;height:70px;margin-bottom:28px}.card-icon svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.system-card h2{font-size:30px}.system-card>p:not(.card-kicker){max-width:520px;min-height:58px}.card-features{position:absolute;left:36px;right:30px;bottom:72px;z-index:2;display:flex;flex-wrap:wrap;gap:7px}.card-features span{padding:6px 9px;border:1px solid color-mix(in srgb,var(--accent) 18%,#dfe8eb);border-radius:999px;color:var(--accent);background:rgba(255,255,255,.72);font-size:12px;font-weight:650}.card-action{left:36px;bottom:28px}
.shared-update{position:relative;overflow:hidden;padding:28px 30px 28px 36px;border:0;box-shadow:0 12px 36px rgba(20,53,72,.075)}.shared-update::before{content:"";position:absolute;inset:0 auto 0 0;width:6px;background:linear-gradient(180deg,#23866f,#66c7a9)}.station-source-update::before{background:linear-gradient(180deg,#247ba0,#62b1d0)}
.topbar{position:sticky;top:0;z-index:8;margin:0 -12px 18px;padding:0 12px;border-bottom:1px solid rgba(204,219,226,.75);background:rgba(242,246,247,.88);backdrop-filter:blur(14px)}
.sidebar{width:264px;padding:24px 16px;box-shadow:14px 0 44px rgba(9,37,55,.12)}.app-shell{grid-template-columns:264px minmax(0,1fr)}.brand-mark{width:46px;height:46px;background:linear-gradient(145deg,#9aead2,#5fc5a7)}.nav-item{margin:1px 0;border:1px solid transparent;border-radius:12px}.nav-item:hover{border-color:rgba(255,255,255,.08)}.nav-item.active{color:#123650;background:#fff;box-shadow:0 9px 24px rgba(5,30,45,.18)}.nav-item.active span{color:#23866f}
.snapshot-banner{position:relative;overflow:hidden;border:0;color:#fff;background:linear-gradient(118deg,#123650 0%,#185a68 62%,#23866f 125%);box-shadow:0 18px 44px rgba(16,52,72,.17)}.snapshot-banner::after{content:"";position:absolute;right:-55px;top:-100px;width:250px;height:250px;border:1px solid rgba(255,255,255,.13);border-radius:50%;box-shadow:0 0 0 35px rgba(255,255,255,.025)}.snapshot-banner>div,.snapshot-banner>button{position:relative;z-index:1}.snapshot-banner h2{color:#fff}.snapshot-banner p{color:rgba(255,255,255,.72)}.snapshot-banner .live-pill{color:#d6f7ed;background:rgba(255,255,255,.12)}
.kpi-card{position:relative;overflow:hidden;border:0;box-shadow:0 10px 28px rgba(20,53,72,.075)}.kpi-card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,#23866f,#62c6aa)}.kpi-card:nth-child(2)::before{background:linear-gradient(90deg,#287ca3,#66b9d3)}.kpi-card:nth-child(3)::before{background:linear-gradient(90deg,#b47a20,#e3b14e)}.kpi-card:nth-child(4)::before{background:linear-gradient(90deg,#b94b55,#e47a82)}
.panel{border:0;box-shadow:0 10px 30px rgba(20,53,72,.065)}.panel-head{padding-bottom:14px;border-bottom:1px solid #e4ebee}.table-wrap{border:0;box-shadow:0 8px 24px rgba(20,53,72,.06)}.data-table th{background:#e8f0f3}.data-table tbody tr{border-left:3px solid transparent}.data-table tbody tr:hover{border-left-color:#23866f}
@media(max-width:820px){.app-shell{display:block}.sidebar{width:100%;box-shadow:0 -8px 30px rgba(9,37,55,.15)}}
@media(max-width:760px){.portal-header{min-height:0;padding:27px 24px}.portal-header h1{font-size:38px}.portal-header .account{margin-top:24px;flex-wrap:wrap}.system-card{min-height:420px}.card-features{left:26px;right:20px}.card-action{left:26px}.topbar{margin:0 -6px 14px;padding:0 6px}}
/* Seven-part UX upgrade: live portal, commands, dark mode, mobile and data tools */
.nav-item>span svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.ui-command-button,.ui-theme-toggle{border:1px solid var(--line,#d9e3ea);background:var(--surface,#fff);color:inherit;border-radius:10px;height:40px;padding:0 12px;cursor:pointer}.ui-theme-toggle{font-size:20px;width:40px;padding:0}.ui-command-button kbd,.command-palette kbd{font:11px inherit;border:1px solid #cbd5df;border-radius:5px;padding:2px 5px;color:#637383}.command-palette{position:fixed;inset:0;z-index:10000;display:flex;justify-content:center;padding-top:min(18vh,160px)}.command-palette.hidden{display:none}.command-backdrop{position:absolute;inset:0;background:rgba(7,20,32,.55);backdrop-filter:blur(5px)}.command-palette>section{position:relative;width:min(680px,calc(100% - 30px));max-height:65vh;align-self:flex-start;background:var(--surface,#fff);color:var(--text,#172b3a);border:1px solid var(--line,#d9e3ea);border-radius:18px;box-shadow:0 30px 80px #06111d55;overflow:auto}.command-input{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line,#e3e9ee)}.command-input>span{font-size:26px}.command-input input{flex:1;border:0!important;outline:0;background:transparent;color:inherit;font-size:17px}.command-help,.command-empty{padding:10px 18px;color:#748492;font-size:13px}.command-results{padding:0 8px 10px}.command-results a{display:grid;grid-template-columns:78px 1fr;gap:2px 10px;padding:12px;border-radius:10px;color:inherit;text-decoration:none}.command-results a:hover{background:var(--soft,#eef4f7)}.command-results a b{grid-row:span 2;color:#1683a2;font-size:11px;text-transform:uppercase}.command-results a small{color:#748492;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.portal-overview{margin:22px 0;background:var(--surface,#fff);color:var(--text,#172b3a);border:1px solid var(--line,#dae3e9);border-radius:18px;padding:22px;box-shadow:0 12px 40px #061b2b0d}.overview-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:16px}.overview-head h2{margin:4px 0;font-size:22px}.overview-head>span{font-size:12px;color:#748492}.overview-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.overview-kpis>a{position:relative;min-height:135px;overflow:hidden;padding:16px;border:1px solid var(--line,#dce5eb);border-radius:14px;color:inherit;text-decoration:none;background:var(--surface,#fff)}.overview-kpis span,.overview-kpis small{display:block;color:#6c7d8a}.overview-kpis strong{display:block;margin:7px 0;font-size:30px}.mini-spark{position:absolute;left:0;right:0;bottom:0;width:100%;height:38px}.mini-spark polyline{fill:none;stroke:#17a2b8;stroke-width:2;vector-effect:non-scaling-stroke}.attention-list{margin-top:14px;border-top:1px solid var(--line,#e1e7eb);padding-top:12px}.attention-title{display:flex;justify-content:space-between;padding:4px 2px 8px}.attention-title span{font-size:12px;color:#71808c}.attention-list>a{display:grid;grid-template-columns:10px minmax(140px,1fr) 2fr 24px;align-items:center;gap:10px;padding:10px;border-radius:9px;color:inherit;text-decoration:none}.attention-list>a:hover{background:var(--soft,#f2f6f8)}.attention-list>a i{width:8px;height:8px;border-radius:50%;background:#e49a27}.attention-list>a.danger i{background:#d85b55}.attention-list>a span,.attention-clear{color:#6e7e89;font-size:13px}
[data-theme=dark]{color-scheme:dark;--surface:#122431;--text:#e6eef3;--line:#29404f;--soft:#192e3c;--muted:#a6b6c1}html[data-theme=dark] body{background:#0b1821;color:#e6eef3}html[data-theme=dark] .main-content,html[data-theme=dark] .panel,html[data-theme=dark] .toolbar,html[data-theme=dark] .data-table,html[data-theme=dark] .topbar,html[data-theme=dark] select,html[data-theme=dark] input,html[data-theme=dark] textarea{background-color:#122431!important;color:#e6eef3!important;border-color:#29404f!important}html[data-theme=dark] .data-table th{background:#182d3a!important;color:#b9c8d1}html[data-theme=dark] .data-table td{border-color:#29404f!important}html[data-theme=dark] .system-card,html[data-theme=dark] .shared-update{background:#122431;color:#e6eef3;border-color:#29404f}html[data-theme=dark] .portal-shell{--surface:#122431;--text:#e6eef3;--line:#29404f;--soft:#192e3c}
.table-ux-tools{display:flex;gap:6px;margin-left:auto}.table-ux-tools button{height:38px;border:1px solid var(--line,#d9e2e8);background:var(--surface,#fff);color:inherit;border-radius:8px;padding:0 10px;cursor:pointer}.density-compact .data-table td{padding-top:7px!important;padding-bottom:7px!important}.data-table th[data-sort]{cursor:pointer;user-select:none}.data-table th[data-sort]:hover{color:#1592ae}.data-table th.sorted:after{content:' ↓';color:#1592ae}.data-table th.sorted.asc:after{content:' ↑'}
@media(max-width:760px){.ui-command-button span,.ui-command-button kbd{display:none}.overview-kpis{grid-template-columns:1fr}.overview-kpis>a{min-height:115px}.attention-list>a{grid-template-columns:10px 1fr 22px}.attention-list>a span{grid-column:2}.portal-overview{padding:16px}.top-actions{gap:6px!important}.sidebar{padding-bottom:max(8px,env(safe-area-inset-bottom))!important}.main-content{padding-bottom:82px!important}#view-inventory .table-wrap{overflow:visible;border:0;background:transparent}#view-inventory .data-table{min-width:0;background:transparent!important}#view-inventory .data-table thead{display:none}#view-inventory .data-table tbody{display:grid;gap:10px}#view-inventory .data-table tr{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line,#dae3e9);border-radius:13px;padding:10px;background:var(--surface,#fff)}#view-inventory .data-table td{display:block;border:0!important;padding:7px!important}#view-inventory .data-table td:before{display:block;color:#7a8993;font-size:10px;text-transform:uppercase;margin-bottom:3px}#view-inventory .data-table td:nth-child(1):before{content:'Thiết bị / IP'}#view-inventory .data-table td:nth-child(2):before{content:'Phân hệ'}#view-inventory .data-table td:nth-child(3):before{content:'Vị trí'}#view-inventory .data-table td:nth-child(4):before{content:'Serial'}#view-inventory .data-table td:nth-child(5):before{content:'Hãng / Part'}#view-inventory .data-table td:nth-child(6):before{content:'Trạng thái'}}
 .hide-secondary-columns #view-inventory .data-table th:nth-child(2),.hide-secondary-columns #view-inventory .data-table td:nth-child(2),.hide-secondary-columns #view-inventory .data-table th:nth-child(5),.hide-secondary-columns #view-inventory .data-table td:nth-child(5){display:none}