/* ===== HKT Monitor — Custom CSS (no Tailwind) ===== */

/* --- 1. CSS Variables / Theming --- */
/* Da bo light mode - dashboard chi con 1 giao dien toi duy nhat. color-scheme:dark
   de cac control native cua trinh duyet (select popup, scrollbar...) cung theo
   theme toi thay vi mac dinh sang cua he thong. */
:root{
  color-scheme:dark;
  --bg:#0e1017;--card:#151821;--border:#232836;--border-sub:rgba(35,40,54,.5);
  --text-h:#fff;--text:#e2e8f0;--text2:#9ca3af;--text3:#6b7280;
  --hover:rgba(31,41,55,.6);--input-bg:rgba(14,16,23,.8);--sub-bg:rgba(14,16,23,.5);
  --gray800:#1f2937;--gray100:rgba(31,41,55,.8);
  --orange:#f97316;--orange-h:#ea580c;
  --green:#22c55e;--emerald:#10b981;--emerald4:#34d399;
  --amber:#f59e0b;--amber4:#fbbf24;
  --red:#ef4444;--rose:#f43f5e;--rose4:#fb7185;
  --cyan:#22d3ee;--purple:#a855f7;
  --sb-track:#151821;--sb-thumb:#2b3245;--sb-hover:#3d4661;
  --shadow-sm:0 1px 2px 0 rgb(0 0 0 / .5);
  --shadow-md:0 4px 6px -1px rgb(0 0 0 / .3);
  --shadow-lg:0 10px 15px -3px rgb(0 0 0 / .4);
}

/* --- 2. Base --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
  /* Doi tu web font rieng (Be Vietnam Pro) sang font he thong mac dinh cua
     trinh duyet (giong Tailwind font-sans - file mau khong nhung font rieng
     nao) - Segoe UI tren Windows, San Francisco tren macOS... */
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg);color:var(--text);
  display:flex;height:100vh;overflow:hidden;
  user-select:none;-webkit-font-smoothing:antialiased;
  line-height:1.5;
}
.hidden{display:none!important}
/* BAO MAT/HIEN THI: .admin-only/.devedit-only dung tren nhieu loai the khac nhau
   (nav-item, btn, act-btn, act-cell, settings-card, hoac khong kem class nao
   khac) nen PHAI dung !important cho rule an mac dinh - neu chi dua vao do uu
   tien 1-class thuong, rule display rieng cua tung loai the (vd .nav-item{
   display:flex} khai bao sau trong file) se de len va vo hieu hoa viec an, dung
   nhu loi da gap (nav-audit/nav-wireguard hien cho MOI role bat ke da danh dau
   admin-only). "revert" khong khoi phuc dung display goc can thiet cho tung loai
   the (button/div mac dinh la inline-block, khong phai flex/inline-flex ma
   .nav-item/.btn/.act-btn thuc su can) nen van chi dinh ro tung truong hop khi
   HIEN lai, chi khac la gio ca 2 chieu an/hien deu la !important de dam bao
   thang tuyet doi. Them class admin-only/devedit-only cho loai the moi can
   display khac "revert" thi nho them dong tuong ung o day. */
.admin-only{display:none!important}
body.role-admin .admin-only{display:revert!important}
body.role-admin .nav-item.admin-only{display:flex!important}
body.role-admin .btn.admin-only{display:inline-flex!important}
body.role-admin .act-btn.admin-only{display:inline-flex!important}
body.role-admin .settings-card.admin-only{display:flex!important}
/* devedit-only: nhu admin-only nhung cung mo cho role device_editor (duoc sua
   Thong tin quan tri thiet bi nhung khong co cac quyen admin khac) */
.devedit-only{display:none!important}
body.role-admin .devedit-only,
body.role-device-editor .devedit-only{display:revert!important}
body.role-admin .btn.devedit-only,
body.role-device-editor .btn.devedit-only{display:inline-flex!important}
body.role-admin .act-btn.devedit-only,
body.role-device-editor .act-btn.devedit-only{display:inline-flex!important}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.font-mono{font-family:ui-monospace,SFMono-Regular,'Cascadia Mono',monospace}

/* --- 3. Scrollbar --- */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--sb-track)}
::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--sb-hover)}

/* --- 4. Layout --- */
.sidebar{
  width:16rem;background:var(--card);border-right:1px solid var(--border);
  display:flex;flex-direction:column;justify-content:space-between;
  flex-shrink:0;z-index:30;position:relative;
  transition:width .3s cubic-bezier(.4,0,.2,1);
  box-shadow:2px 0 16px rgba(0,0,0,.04);
}
.dark .sidebar{box-shadow:2px 0 24px rgba(0,0,0,.3)}
.sidebar.collapsed{width:5rem}
.sidebar.collapsed .fade-text{opacity:0;visibility:hidden;width:0;margin:0;overflow:hidden}
.fade-text{transition:opacity .2s ease-in-out,visibility .2s,width .2s,margin .2s;opacity:1;visibility:visible}

.sidebar.collapsed .sb-hd{flex-direction:column;justify-content:center;gap:.5rem;height:auto;padding:.75rem .5rem}
.sidebar.collapsed .sb-logo{justify-content:center;gap:0}
.sidebar.collapsed .sb-nav{padding:.75rem .5rem;gap:.25rem}
.sidebar.collapsed .nav-label{display:none;margin:0}
.sidebar.collapsed .nav-list{gap:.25rem;align-items:center}
/* Kich thuoc CO DINH tuyet doi cho moi nav-item luc thu gon - khong de trinh duyet
   tu tinh theo noi dung ben trong (cac nut trigger nhu Logs/Thong tin quan tri co
   them badge/caret/dot an ben trong co the lam chieu cao tinh toan khac nhau giua
   cac nut, gay lech khoang cach nhin thay duoc). Co dinh w/h loai bo hoan toan kha
   nang do lech nay bat ke nut co bao nhieu phan tu con an ben trong.*/
.sidebar.collapsed .nav-item{
  justify-content:center;align-items:center;gap:0;padding:0;
  width:2.75rem;height:2.75rem;flex:none;box-sizing:border-box;
}
/* .nav-badge (vd so luong server offline) dung .fade-text de an luc thu gon, nhung
   fade-text chi zero hoa width - padding va margin-left:auto cua .nav-badge van con,
   tao ra 1 khoang trong "ma" ben phai icon khien justify-content:center bi lech tam,
   day icon+label sang trai. An han bang display:none moi loai bo hoan toan khoang
   trong nay (badge so von khong co cho hien thi trong thanh thu gon). */
.sidebar.collapsed .nav-badge{display:none}
.sidebar.collapsed .sb-ft{justify-content:center;gap:0}

/* Tooltip khi thu gon - dung data-tip, khong sinh them DOM node */
.sidebar.collapsed .nav-item[data-tip]::after{
  content:attr(data-tip);
  position:absolute;left:calc(100% + .5rem);top:50%;transform:translate(-6px,-50%);
  background:var(--gray800);color:#fff;font-size:.75rem;font-weight:600;white-space:nowrap;
  padding:.375rem .625rem;border-radius:.5rem;box-shadow:0 8px 20px rgba(0,0,0,.3);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .15s ease,visibility .15s ease,transform .15s ease;
  z-index:60;
}
.sidebar.collapsed .nav-item[data-tip]:hover::after{opacity:1;visibility:visible;transform:translate(0,-50%)}

/* Mobile drawer */
.mobile-menu-btn{display:none}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(1px);z-index:35}
.sidebar-overlay.visible{display:block}
@media(max-width:1023px){
  .mobile-menu-btn{display:inline-flex}
  .sidebar{position:fixed;top:0;left:0;height:100vh;z-index:40;transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1)}
  .sidebar.mobile-open{transform:translateX(0)}
  .sidebar.collapsed{width:16rem}
  .sidebar.collapsed .fade-text{opacity:1;visibility:visible;width:auto;margin:0;overflow:visible}
  .sidebar.collapsed .sb-hd{flex-direction:row;justify-content:space-between;height:4rem;padding:.875rem}
  .sidebar.collapsed .sb-logo{justify-content:flex-start;gap:.75rem}
  .sidebar.collapsed .sb-nav{padding:.75rem;gap:1.5rem}
  .sidebar.collapsed .nav-label{display:block;margin-bottom:.5rem}
  .sidebar.collapsed .nav-list{gap:.25rem}
  .sidebar.collapsed .nav-item{justify-content:flex-start;align-items:center;gap:.75rem;width:auto;height:auto;padding:.625rem .75rem}
  .sidebar.collapsed .sb-ft{justify-content:flex-start;gap:.75rem}
  .sidebar.collapsed .nav-item[data-tip]::after{content:none}
}

.main{flex:1;display:flex;flex-direction:column;height:100%;overflow:hidden;background:var(--bg)}

/* --- 5. Sidebar --- */
.sb-inner{display:flex;flex-direction:column;height:100%}
.sb-hd{
  padding:.875rem;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--border-sub);height:4rem;
}
.sb-logo{display:flex;align-items:center;gap:.75rem;overflow:hidden;min-width:0}
.sb-logo-box{
  width:2.5rem;height:2.5rem;border-radius:.75rem;
  background:var(--gray100);border:1px solid var(--border);
  padding:.25rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 4px 14px rgba(249,115,22,.15);
}
.sb-logo-box img{width:100%;height:100%;object-fit:contain}
.sb-brand{display:flex;flex-direction:column}
/* Brand name la text lon nhat trong sidebar - tang tu .875rem len 1.0625rem de
   ro rang la tieu de, tao khoang cach ro voi nhan phu/label ben duoi thay vi
   ca cum gan bang nhau (nav-label/brand-sub 10px, nav-item 14px, brand-name cu
   cung 14px - flat, thieu phan cap thi giac ro rang giua cac vai tro). */
.sb-brand-name{font-weight:700;font-size:1.0625rem;color:var(--text-h);letter-spacing:.025em;white-space:nowrap}
.sb-brand-sub{font-size:10px;color:var(--orange);font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.sb-toggle{
  padding:.375rem;border-radius:.5rem;color:var(--text3);border:none;background:none;
  cursor:pointer;flex-shrink:0;transition:color .15s,background .15s;
}
.sb-toggle:hover{color:var(--text-h);background:var(--hover)}
.sb-toggle i{display:inline-block;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.sidebar.collapsed .sb-toggle i{transform:rotate(180deg)}

.sb-nav{flex:1;padding:.75rem;display:flex;flex-direction:column;gap:1.5rem}
.nav-label{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;padding:0 .75rem;margin-bottom:.5rem}
.nav-list{display:flex;flex-direction:column;gap:.25rem;list-style:none}
.nav-item{
  position:relative;
  display:flex;align-items:center;gap:.75rem;padding:.625rem .75rem;border-radius:.75rem;
  color:var(--text2);font-size:.875rem;cursor:pointer;transition:all .15s;
  border:none;background:none;width:100%;text-align:left;text-decoration:none;
}
.nav-item:hover{color:var(--text-h);background:var(--hover)}
.nav-item.active{background:rgba(249,115,22,.1);color:var(--orange);font-weight:500}
/* Icon nav tang tu 1.125rem len 1.375rem - lam ro dinh cua thang do (icon >
   ten thuong hieu > text menu > nhan phu) thay vi cac muc gan bang nhau. */
.nav-item i{font-size:1.375rem;width:1.75rem;text-align:center}
.nav-badge{
  margin-left:auto;background:rgba(239,68,68,.2);color:var(--red);
  font-size:.75rem;padding:.125rem .5rem;border-radius:9999px;font-weight:600;
}

/* Nav item kieu "trigger" mo mega menu (Logs, Thong tin quan tri) - vien rieng
   de phan biet voi nav item dieu huong thang, giu trang thai "active" trong luc
   flyout dang mo (kieu hoverFlyout||flyoutOpen ben mockup) qua class .nav-trigger-active. */
.nav-trigger{border:1px solid transparent}
.nav-trigger:hover,.nav-trigger.nav-trigger-active{background:var(--hover);border-color:var(--border)}
.nav-trigger-spacer{margin-left:auto;display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.nav-item .nav-caret{font-size:.625rem;color:var(--text3);transition:transform .2s ease,color .2s ease;flex-shrink:0}
.nav-trigger:hover .nav-caret,.nav-trigger.nav-trigger-active .nav-caret{transform:translateX(2px)}
.nav-trigger--live i:first-child{color:var(--emerald)}
.nav-trigger--live:hover .nav-caret,.nav-trigger--live.nav-trigger-active .nav-caret{color:var(--emerald)}
.nav-trigger:not(.nav-trigger--live):hover .nav-caret,.nav-trigger:not(.nav-trigger--live).nav-trigger-active .nav-caret{color:var(--orange)}
.nav-trigger-dot{
  display:none;position:absolute;top:.375rem;right:.375rem;
  width:.5rem;height:.5rem;border-radius:50%;background:var(--emerald);
  border:2px solid var(--card);
}
.sidebar.collapsed .nav-trigger-dot{display:block}

.sb-ft{
  padding:.75rem;border-top:1px solid var(--border-sub);
  display:flex;align-items:center;gap:.75rem;overflow:hidden;
  transition:background .15s;
}
.sb-ft:hover{background:var(--hover)}
.sb-ft-icon{
  width:2.25rem;height:2.25rem;border-radius:50%;
  background:rgba(16,185,129,.15);color:var(--emerald4);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.sb-ft-text{overflow:hidden}
.sb-ft-title{font-size:.875rem;font-weight:600;color:var(--text-h)}
.sb-ft-sub{font-size:.75rem;color:var(--text3)}

/* --- 6. Top Bar --- */
.top-bar{
  height:4rem;border-bottom:1px solid var(--border);
  background:color-mix(in srgb,var(--card) 70%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;z-index:20;
}
.search-box{position:relative;width:18rem}
@media(min-width:768px){.search-box{width:24rem}}
@media(max-width:639px){.search-box{width:auto;flex:1;min-width:0}}
.tbl-search-box{width:14rem}
@media(min-width:768px){.tbl-search-box{width:14rem}}
.search-box i{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--text3);font-size:.875rem}
.search-input{
  width:100%;background:var(--input-bg);font-size:.875rem;color:var(--text);
  padding:.5rem 1rem .5rem 2.25rem;border-radius:.75rem;
  border:1px solid var(--border);outline:none;transition:border-color .15s;
}
.search-input::placeholder{color:var(--text3)}
.search-input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(249,115,22,.1)}
.hd-actions{display:flex;align-items:center;gap:1rem;margin-left:auto}
.icon-btn{
  position:relative;padding:.5rem;color:var(--text3);border:none;background:none;
  border-radius:.5rem;cursor:pointer;transition:color .15s,background .15s;font-size:1.125rem;
}
.icon-btn:hover{color:var(--text-h);background:var(--hover)}
.icon-btn .notif-dot{
  position:absolute;top:.375rem;right:.375rem;width:.5rem;height:.5rem;
  background:var(--orange);border-radius:50%;
}
.icon-btn.active-feature{color:var(--orange)}
.user-menu{display:flex;align-items:center;gap:.375rem;padding-left:.5rem;margin-left:.25rem;border-left:1px solid var(--border)}
.user-name-label{font-size:.8125rem;font-weight:600;color:var(--text2);max-width:8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- 7. Content / Pages --- */
.content{flex:1;overflow-y:auto;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}
.page{display:flex;flex-direction:column;gap:1rem}
.page-hd{display:flex;flex-direction:column;gap:1rem}
.page-hd>div:first-child{flex:1 1 auto;min-width:12rem}
@media(min-width:768px){.page-hd{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}}
/* Trang Server: dung sticky bi loi hinh (dong lien voi hang bang do border-collapse
   cua <table>). Thay bang cach chac chan hon: header+cards dung yen ngoai vung cuon,
   chi rieng bang server co scrollbar rieng ben trong - giong cach modal dang lam. */
#page-servers{height:100%;min-height:0}
#page-servers .dash-sticky{flex-shrink:0}
#page-servers .tbl-panel{flex:1;min-height:0}
#page-servers .tbl-wrap{flex:1;min-height:0;overflow-y:auto}
/* Man hinh hep (dien thoai): the thong ke xep 1 cot da chiem het chieu cao khung
   co dinh ben tren, khien khung bang bi ep con 0px (flex child min-height:0).
   Bo ghim chieu cao, de ca trang cuon binh thuong theo .content thay vi cuon rieng. */
@media(max-width:1023px){
  #page-servers{height:auto}
  #page-servers .tbl-panel{flex:none}
  #page-servers .tbl-wrap{flex:none;overflow-y:visible}
}
.dash-sticky{display:flex;flex-direction:column;gap:1rem}
.page-title{font-size:1.625rem;font-weight:700;color:var(--text-h);letter-spacing:-.025em}
.page-sub{font-size:.875rem;color:var(--text2);margin-top:.125rem}
.page-actions{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}

/* --- 8. Buttons --- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem 1rem;font-size:.875rem;font-weight:500;
  border-radius:.75rem;border:1px solid var(--border);
  background:var(--card);color:var(--text);cursor:pointer;
  transition:all .15s;white-space:nowrap;
}
.btn:hover{background:var(--hover)}
.btn i{color:var(--orange)}
.btn-icon{
  padding:.625rem;border-radius:.75rem;border:1px solid var(--border);
  background:var(--card);color:var(--text2);cursor:pointer;transition:all .15s;
  display:inline-flex;align-items:center;justify-content:center;
}
.btn-icon:hover{background:var(--hover);color:var(--text-h)}
.btn-icon i{font-size:.875rem}
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.625rem 1rem;font-size:.875rem;font-weight:600;
  border-radius:.75rem;border:none;
  background:var(--orange);color:#fff;cursor:pointer;transition:all .15s;
}
.btn-primary:hover{background:var(--orange-h)}

/* --- 9. Stat Cards --- */
.cards-grid{display:grid;gap:.75rem;grid-template-columns:1fr}
@media(min-width:640px){.cards-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.cards-grid{grid-template-columns:repeat(4,1fr)}}

/* So luong the khong chia het cho 4 (vd trang Tunnel Status: 5 the) - dung
   auto-fit thay vi so cot co dinh, de hang cuoi luon lap day thay vi bi mo
   coi/trong 3 o (xem anh chup man hinh nguoi dung gui, 2026-09-14). */
#wireguard-stats{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}

.stat-card{
  background:var(--card);border:1px solid var(--border);border-radius:1rem;
  padding:.75rem .875rem;display:flex;flex-direction:column;justify-content:space-between;
  cursor:pointer;transition:all .15s;box-shadow:var(--shadow-sm);
}
.stat-card:hover{border-color:var(--text3)}
.stat-card.active{box-shadow:0 0 0 2px var(--orange)}
.sc-hd{display:flex;align-items:center;justify-content:space-between}
.sc-hd-left{display:flex;align-items:center;gap:.625rem}
.sc-icon{padding:.5rem;border-radius:.75rem;display:flex;align-items:center;justify-content:center}
.sc-icon i{font-size:.875rem}
.sc-icon-gray{background:var(--gray100);color:var(--text2)}
.sc-icon-green{background:rgba(16,185,129,.1);color:var(--emerald)}
.sc-icon-amber{background:rgba(245,158,11,.1);color:var(--amber)}
.sc-icon-red{background:rgba(239,68,68,.1);color:var(--red)}
.sc-icon-cyan{background:rgba(34,211,238,.12);color:var(--cyan)}
.sc-label{font-size:.875rem;font-weight:500;color:var(--text2)}
.sc-body{margin-top:.5rem}
.stat-val{font-size:1.875rem;font-weight:700;letter-spacing:-.025em}
.stat-val-default{color:var(--text-h)}
.stat-val-green{color:var(--emerald)}
.stat-val-amber{color:var(--amber)}
.stat-val-red{color:var(--red)}
.stat-val-cyan{color:var(--cyan)}
.sc-meta{display:flex;align-items:center;justify-content:space-between;margin-top:.25rem;font-size:.75rem}
.sc-meta-label{color:var(--text3)}
.sc-meta-badge{padding:.125rem .5rem;border-radius:9999px;font-weight:500}
.sc-meta-badge-gray{color:var(--text2);background:var(--gray100)}
.sc-meta-badge-green{color:var(--emerald);background:rgba(16,185,129,.1)}

/* --- 10. Panel Cards (Table) --- */
.panel{
  background:var(--card);border:1px solid var(--border);border-radius:1rem;
  padding:1.25rem;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);
}

.legend-dot{width:.625rem;height:.625rem;border-radius:50%;flex-shrink:0}
.chart-wrap{height:15rem;position:relative;width:100%}

/* --- 11. Alert Popover + Badge --- */
.alert-count-badge{
  background:var(--red);color:#fff;font-size:.6875rem;font-weight:700;
  padding:.0625rem .375rem;border-radius:9999px;line-height:1.4;
}
.alert-popover{
  position:fixed;width:26rem;max-width:90vw;max-height:26rem;z-index:60;
  background:var(--card);border:1px solid var(--border);border-radius:.75rem;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.25);
  opacity:0;pointer-events:none;transform:translateY(.25rem);
  transition:all .15s;display:flex;flex-direction:column;overflow:hidden;
}
.alert-popover.visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.alert-popover-hd{
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
  padding:.75rem .875rem;border-bottom:1px solid var(--border-sub);
  font-weight:600;color:var(--text-h);font-size:.875rem;
}
.alert-popover-close{border:none;background:none;color:var(--text3);cursor:pointer;padding:.25rem;transition:color .15s}
.alert-popover-close:hover{color:var(--text-h)}
.alert-list-full{
  list-style:none;flex:1;overflow-y:auto;
  display:flex;flex-direction:column;gap:.5rem;
  margin:0;padding:.75rem .875rem;
}

.log-megamenu{width:24rem;max-height:none}
.log-megamenu-body{display:flex;flex-direction:column;gap:.375rem;padding:.625rem}
.log-megamenu-item{
  display:flex;align-items:flex-start;gap:.75rem;padding:.75rem;
  background:none;border:none;border-radius:.625rem;cursor:pointer;text-align:left;
  transition:background .15s;
}
.log-megamenu-item:hover{background:var(--hover)}
.log-megamenu-icon{
  flex-shrink:0;width:2.25rem;height:2.25rem;border-radius:.5rem;
  display:flex;align-items:center;justify-content:center;
  background:rgba(249,115,22,.1);color:var(--orange);font-size:.9375rem;
  transition:background .15s,color .15s;
}
.log-megamenu-item:hover .log-megamenu-icon{background:var(--orange);color:#fff}
.log-megamenu-icon-emerald{background:rgba(16,185,129,.1);color:var(--emerald)}
.log-megamenu-item:hover .log-megamenu-icon-emerald{background:var(--emerald);color:#fff}
.log-megamenu-text{display:flex;flex-direction:column;gap:.125rem}
.log-megamenu-title{font-size:.8125rem;font-weight:600;color:var(--text-h)}
.log-megamenu-desc{font-size:.75rem;color:var(--text3);line-height:1.4}
.log-megamenu-footer{
  margin-top:.25rem;padding:.625rem .875rem;border-top:1px solid var(--border-sub);
  font-size:.75rem;color:var(--text3);
}
.alert-row{
  display:flex;align-items:flex-start;gap:.625rem;padding:.625rem .75rem;
  border-radius:.75rem;background:var(--sub-bg);border:1px solid var(--border-sub);
  font-size:.8125rem;
}
.alert-row-icon{
  width:1.75rem;height:1.75rem;border-radius:50%;flex-shrink:0;margin-top:.0625rem;
  display:flex;align-items:center;justify-content:center;font-size:.75rem;
}
.alert-row-crit .alert-row-icon{background:rgba(239,68,68,.15);color:var(--red)}
.alert-row-warn .alert-row-icon{background:rgba(245,158,11,.15);color:var(--amber)}
.alert-row-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:.125rem}
.alert-row-host{font-weight:600;color:var(--text-h);word-break:break-word}
.alert-row-reason{color:var(--text3);font-size:.75rem;word-break:break-word}
.alert-tag{
  font-size:10px;padding:.25rem .5rem;border-radius:.375rem;flex-shrink:0;font-weight:600;margin-top:.0625rem;
}
.alert-tag-warn{background:rgba(245,158,11,.2);color:var(--amber)}
.alert-tag-crit{background:rgba(239,68,68,.2);color:var(--red)}
.alert-ok{display:flex;align-items:center;justify-content:center;gap:.5rem;color:var(--emerald);flex:1;font-size:.875rem}

/* --- 13. Server Table --- */
.tbl-panel{gap:1rem}
.tbl-hd{display:flex;flex-direction:column;gap:1rem}
@media(min-width:768px){.tbl-hd{flex-direction:row;align-items:center;justify-content:space-between}}
.tbl-hd-left{display:flex;align-items:center;gap:.5rem}
.tbl-hd-left i{color:var(--orange)}
.tbl-hd-left h2{font-weight:700;color:var(--text-h);font-size:1rem}
.tbl-hd-right{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.tbl-wrap{overflow-x:auto}

.wg-peer-details{margin-top:1rem;border:1px solid var(--border);border-radius:1rem;background:var(--card);overflow:hidden}
.wg-peer-details>summary{
  padding:.875rem 1.25rem;cursor:pointer;color:var(--text2);font-size:.8125rem;font-weight:600;
  list-style:none;user-select:none;
}
.wg-peer-details>summary::-webkit-details-marker{display:none}
.wg-peer-details>summary::before{content:"\25B8";display:inline-block;margin-right:.5rem;transition:transform .15s}
.wg-peer-details[open]>summary::before{transform:rotate(90deg)}
.wg-peer-details>summary:hover{color:var(--text-h)}
.wg-peer-details>.tbl-wrap{border-top:1px solid var(--border);padding:0 1.25rem 1.25rem}

/* color-scheme:dark ngay tren select - dat rieng tren :root la chua du, Chrome
   coi 1 select da bi tuy chinh style (background/color rieng) la "tu ve giao
   dien" va bo qua goi y dark cho popup <option> neu khong khai bao lai o day,
   khien popup xo danh sach hien trang mac dinh cua he dieu hanh. */
select{color-scheme:dark}
.select{
  background:var(--input-bg);border:1px solid var(--border);color:var(--text2);
  font-size:.75rem;border-radius:.75rem;padding:.5rem .75rem;outline:none;cursor:pointer;
  transition:border-color .15s;
}
.select:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(249,115,22,.1)}
.filter-btn{
  padding:.5rem;background:var(--input-bg);border:1px solid var(--border);
  color:var(--text2);border-radius:.75rem;cursor:pointer;transition:all .15s;
  display:inline-flex;align-items:center;justify-content:center;
}
.filter-btn:hover{background:var(--hover);color:var(--text-h)}
.filter-btn i{font-size:.75rem}

.srv-tbl{width:100%;text-align:left;font-size:.875rem;border-collapse:collapse}
.srv-tbl thead tr{border-bottom:1px solid var(--border)}
.srv-tbl th{
  padding:.75rem 1rem;font-size:.75rem;font-weight:600;color:var(--text3);
  text-transform:uppercase;letter-spacing:.05em;
}
.srv-tbl tbody tr{border-bottom:1px solid var(--border-sub)}
.srv-tbl td{padding:.875rem 1rem;color:var(--text)}

.srv-row{cursor:pointer;transition:background .15s}
.srv-row:hover{background:var(--hover)}
.srv-row.muted{background:rgba(245,158,11,.03)}
.srv-cell-hotel{font-weight:600;color:var(--text-h)}
.srv-cell-hotel i{color:var(--text3);font-size:.75rem;margin-right:.5rem}
.srv-cell-name{font-family:ui-monospace,monospace;font-size:.75rem}
.srv-cell-name span{cursor:pointer}
.srv-cell-name span:hover{color:var(--orange)}
.srv-cell-mono{font-family:ui-monospace,monospace;white-space:nowrap}
.mini-gauge{
  --pct:0;--gcolor:#f97316;
  display:inline-block;vertical-align:middle;margin-right:.375rem;
  width:1.125rem;height:1.125rem;border-radius:50%;flex-shrink:0;
  background:conic-gradient(var(--gcolor) calc(var(--pct)*1%), var(--gray100) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
}
.srv-cell-warn{color:var(--red);font-weight:700}
.srv-cell-mem-warn{color:var(--amber);font-weight:700}
.srv-cell-muted{font-family:ui-monospace,monospace;font-size:.75rem;color:var(--text3)}
.srv-cell-center{text-align:center}

/* Grouped hotel cell (merged, spans all member server rows) */
.grp-hotel-cell{
  vertical-align:middle;text-align:center;padding:.75rem 1rem;
  background:color-mix(in srgb,var(--sub-bg) 60%,transparent);
}
.grp-hotel-inner{display:flex;flex-direction:column;align-items:center;gap:.375rem}
.grp-avatar{
  width:1.5rem;height:1.5rem;border-radius:.5rem;
  background:rgba(249,115,22,.1);color:var(--orange);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;flex-shrink:0;
}
.grp-name{font-weight:600;color:var(--text-h)}
.grp-name::before{content:'';display:inline-block;width:.4375rem;height:.4375rem;border-radius:50%;margin-right:.375rem;vertical-align:middle}
.sev-ok .grp-name::before{background:var(--emerald)}
.sev-warn .grp-name::before{background:var(--amber)}
.sev-crit .grp-name::before{background:var(--red)}
.grp-logo{width:2.5rem;height:2.5rem;object-fit:contain;border-radius:.5rem}

/* --- 14. Status Badges --- */
.badge{
  display:inline-flex;align-items:center;gap:.375rem;
  padding:.25rem .625rem;border-radius:9999px;
  font-size:.75rem;font-weight:500;
}
.badge-dot{width:.375rem;height:.375rem;border-radius:50%}
.badge-ok{background:rgba(16,185,129,.1);color:var(--emerald);border:1px solid rgba(16,185,129,.2)}
.badge-ok .badge-dot{background:var(--emerald)}
.badge-warn{background:rgba(245,158,11,.1);color:var(--amber);border:1px solid rgba(245,158,11,.2)}
.badge-warn .badge-dot{background:var(--amber)}
.badge-crit{background:rgba(239,68,68,.1);color:var(--red);border:1px solid rgba(239,68,68,.2)}
.badge-crit .badge-dot{background:var(--red)}

/* --- 15. Action Buttons (table) --- */
.act-cell{text-align:center}
.act-wrap{display:flex;align-items:center;justify-content:center;gap:.5rem}
.act-btn{
  padding:.5rem;border-radius:.5rem;border:none;cursor:pointer;
  transition:all .15s;display:inline-flex;align-items:center;justify-content:center;
}
.act-btn i{font-size:.75rem}
.act-remote{background:rgba(249,115,22,.1);color:var(--orange)}
.act-remote:hover{background:var(--orange);color:#fff}
.act-remote:disabled{opacity:.3;cursor:not-allowed}
.act-mute{background:var(--gray100);color:var(--text3)}
.act-mute:hover{background:var(--hover);color:var(--text-h)}
.act-muted{background:rgba(245,158,11,.2);color:var(--amber)}
.act-update{background:rgba(16,185,129,.1);color:var(--emerald)}
.act-update:hover{background:var(--emerald);color:#fff}
.act-update:disabled{opacity:.5;cursor:not-allowed}

/* --- 16. Modal --- */
.modal-bg{
  position:fixed;inset:0;background:rgba(0,0,0,.7);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;z-index:50;
}
.modal{
  background:var(--card);border:1px solid var(--border);border-radius:1rem;
  padding:1.5rem;width:100%;max-width:28rem;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);
  position:relative;
  max-height:90vh;display:flex;flex-direction:column;
}
.modal-close{
  position:absolute;top:1rem;right:1rem;color:var(--text3);
  border:none;background:none;cursor:pointer;font-size:1.125rem;
  transition:color .15s;
}
.modal-close:hover{color:var(--text-h)}
.modal-hd{display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem;flex-shrink:0}
.modal-icon{padding:.75rem;background:rgba(249,115,22,.2);color:var(--orange);border-radius:.75rem}
.modal-icon i{font-size:1.5rem}
.modal-title{font-weight:700;color:var(--text-h);font-size:1.125rem}
.modal-info{font-size:.75rem;color:var(--text3)}
.modal-body{margin:1.25rem 0;display:flex;flex-direction:column;gap:1rem;flex:1 1 auto;overflow-y:auto;min-height:0}
.modal-label{display:block;font-size:.75rem;font-weight:500;color:var(--text2);margin-bottom:.25rem}
.modal-id-row{display:flex;align-items:center;gap:.5rem}
.modal-id-input{
  width:100%;background:var(--input-bg);border:1px solid var(--border);
  color:var(--orange);font-family:ui-monospace,monospace;font-weight:700;
  padding:.5rem .75rem;border-radius:.75rem;text-align:center;
  letter-spacing:.1em;font-size:1rem;outline:none;
}
.modal-copy-btn{
  padding:.625rem;background:var(--gray100);border:none;border-radius:.75rem;
  color:var(--text-h);cursor:pointer;transition:background .15s;
}
.modal-copy-btn:hover{background:var(--hover)}

/* --- 17. Detail Drawer --- */
.drawer-bg{
  position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:40;
  opacity:0;transition:opacity .2s;
}
.drawer-bg.visible{opacity:1}
.drawer{
  position:fixed;top:0;right:0;height:100%;width:100%;max-width:28rem;
  background:var(--card);border-left:1px solid var(--border);z-index:50;
  transform:translateX(100%);transition:transform .2s;will-change:transform;
  display:flex;flex-direction:column;box-shadow:-8px 0 30px rgba(0,0,0,.15);
}
/* Khung chi tiet Server: keo dai tu mep sidebar toi het man hinh, tu co gian
   theo trang thai thu gon/mo rong cua sidebar (sidebar va drawer la anh em
   cung cap - dung sibling selector, khong can JS rieng). */
/* left doi ngay khong animate - animate "left" tren 1 khung to (nhieu chart/bang
   ben trong) bat trinh duyet tinh lai layout moi frame trong .3s, gay giat/lag.
   Chi giu transform (GPU-cheap) cho hieu ung truot mo/dong. */
#detail-panel{left:16rem;width:auto;max-width:none;transition:transform .2s}
.sidebar.collapsed ~ #detail-panel{left:5rem}
/* Lop nen mo (drawer-bg) mac dinh phu ca man hinh (inset:0) se de len tren sidebar
   (z-index 40 > 30) lam sidebar bi che toi - thu hep no lai dung bang phan noi
   dung ben phai sidebar, de sidebar luon o "ngang cap", khong bi an/mo di. */
#detail-overlay{left:16rem;transition:opacity .2s}
.sidebar.collapsed ~ #detail-overlay{left:5rem}
@media(max-width:1023px){
  #detail-panel{left:0;width:100%;max-width:28rem}
  #detail-overlay{left:0}
}
.drawer.open{transform:translateX(0)}
.drawer-hd{
  padding:1rem;border-bottom:1px solid var(--border);
  display:flex;align-items:flex-start;justify-content:space-between;
}
.drawer-hd-left{display:flex;align-items:center;gap:.75rem;min-width:0}
.dp-avatar{
  width:2.5rem;height:2.5rem;border-radius:.75rem;
  background:rgba(249,115,22,.1);color:var(--orange);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.875rem;flex-shrink:0;overflow:hidden;
}
.dp-avatar img{width:100%;height:100%;object-fit:cover}
.dp-hostname{font-family:ui-monospace,monospace;font-weight:700;color:var(--text-h);font-size:.875rem}
.dp-ip{font-size:.75rem;color:var(--text3);font-family:ui-monospace,monospace}
.drawer-close{
  color:var(--text3);border:none;background:none;cursor:pointer;padding:.375rem;flex-shrink:0;
  border-radius:.5rem;transition:color .15s,background .15s;
}
.drawer-close:hover{color:var(--text-h);background:var(--hover)}
.drawer-close i{font-size:1.125rem}

.drawer-body{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:1rem}
.dp-row-4{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
.dp-row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.dp-row-2{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
@media(max-width:1300px){.dp-row-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1200px){.dp-row-2{grid-template-columns:1fr}}
@media(max-width:1100px){.dp-row-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.dp-row-3,.dp-row-4{grid-template-columns:1fr}}
.dp-info-bar{
  display:flex;flex-wrap:wrap;align-items:center;row-gap:.5rem;
  background:var(--sub-bg);border:1px solid var(--border);border-radius:.75rem;
  padding:.625rem .875rem;
}
.dp-info-item{
  display:flex;align-items:center;gap:.375rem;
  padding:0 .875rem;font-size:.75rem;white-space:nowrap;
}
.dp-info-item:not(:first-child){border-left:1px solid var(--border-sub)}
.dp-info-item i{color:var(--text3);font-size:.6875rem;width:.875rem;text-align:center}
.dp-info-lb{color:var(--text3);font-size:10px;text-transform:uppercase;font-weight:600}
.dp-info-val{color:var(--text);font-family:ui-monospace,monospace;font-weight:600;max-width:10rem}
.dp-info-btn{cursor:pointer;border-radius:.375rem;transition:background .15s}
.dp-info-btn:hover{background:var(--hover)}

.dp-stat-card{background:var(--sub-bg);border:1px solid var(--border);border-radius:.75rem;padding:.875rem}
.dp-stat-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.dp-stat-title{display:flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;color:var(--text2)}
.dp-stat-dot{width:.625rem;height:.625rem;border-radius:50%;flex:none}
.dp-stat-badge{font-size:10px;font-weight:700;padding:.125rem .5rem;border-radius:.25rem;text-transform:uppercase;letter-spacing:.02em;background:rgba(148,163,184,.15);color:var(--text3);border:1px solid rgba(148,163,184,.25)}
.dp-stat-badge-ok{background:rgba(16,185,129,.2);color:var(--emerald4);border-color:rgba(16,185,129,.3)}
.dp-stat-badge-warn{background:rgba(245,158,11,.2);color:var(--amber4);border-color:rgba(245,158,11,.3)}
.dp-stat-badge-crit{background:rgba(239,68,68,.2);color:var(--red);border-color:rgba(239,68,68,.3)}
.dp-stat-body{display:flex;align-items:flex-end;justify-content:space-between;gap:.5rem}
.dp-stat-value{font-size:1.875rem;font-weight:800;color:var(--text-h);line-height:1;font-family:ui-monospace,monospace}
.dp-stat-side{font-size:.75rem;color:var(--text3);text-align:right;line-height:1.5}
.dp-stat-side-lb{color:var(--text3)}
.dp-stat-side span+span{color:var(--text2);font-family:ui-monospace,monospace;font-weight:600}
.dp-stat-bar-bg{height:.375rem;border-radius:999px;background:rgba(148,163,184,.15);overflow:hidden;margin-top:.75rem}
.dp-stat-bar-fill{height:100%;width:100%;border-radius:999px;transform:scaleX(0);transform-origin:left;transition:transform .5s ease}
.dp-stat-ft{margin-top:.5rem;font-size:11px;color:var(--text3)}
.dp-stat-gauge-wrap{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.dp-stat-gauge{
  --pct:0;--gcolor:#94a3b8;
  position:relative;flex:none;width:4.5rem;height:4.5rem;border-radius:50%;
  background:conic-gradient(var(--gcolor) calc(var(--pct)*1%), rgba(148,163,184,.15) 0);
  transition:background .4s ease;
}
.dp-stat-gauge::before{content:'';position:absolute;inset:.4375rem;border-radius:50%;background:var(--sub-bg)}
.dp-stat-gauge-val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.9375rem;font-weight:800;color:var(--text-h);font-family:ui-monospace,monospace}

.dp-chart-box{background:var(--sub-bg);border:1px solid var(--border);border-radius:.75rem;padding:.75rem}
.dp-chart-hd{display:flex;align-items:center;justify-content:space-between;font-size:.75rem;font-weight:600;color:var(--text2);margin-bottom:.5rem}
.dp-chart-hd span:last-child{font-family:ui-monospace,monospace}
.dp-chart-canvas{height:5rem}
.dp-chart-stats{display:flex;justify-content:space-between;font-size:10px;color:var(--text3);font-family:ui-monospace,monospace;margin-top:.25rem}

.drawer-ft{padding:1rem;border-top:1px solid var(--border);display:flex;gap:.5rem}
.drawer-btn{
  flex:1;font-weight:600;padding:.625rem;border-radius:.75rem;font-size:.875rem;
  border:none;cursor:pointer;transition:all .15s;text-align:center;
  display:inline-flex;align-items:center;justify-content:center;gap:.375rem;
}
.drawer-btn-remote{background:var(--gray100);color:var(--text)}
.drawer-btn-remote:hover{background:var(--hover)}
.drawer-btn-remote:disabled{opacity:.4;cursor:not-allowed}
.drawer-btn-mute{background:rgba(245,158,11,.1);color:var(--amber)}
.drawer-btn-mute:hover{background:rgba(245,158,11,.2)}
.drawer-btn-unmute{background:rgba(16,185,129,.1);color:var(--emerald)}
.drawer-btn-unmute:hover{background:rgba(16,185,129,.2)}

/* --- 18. Mute Popover --- */
.mute-pop{
  position:fixed;width:14rem;z-index:60;
  background:var(--card);border:1px solid var(--border);border-radius:.75rem;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.25);padding:.75rem;
  opacity:0;pointer-events:none;transform:translateY(.25rem);
  transition:all .15s;
}
.mute-pop.visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.mute-pop-text{font-size:.75rem;color:var(--text2);line-height:1.5;margin-bottom:.75rem}
.mute-pop-text b{color:var(--text-h)}
.mute-pop-label{font-size:.75rem;font-weight:600;color:var(--text2);margin-bottom:.5rem}
.mute-pop-grid{display:flex;flex-wrap:wrap;gap:.375rem;margin-bottom:.625rem}
.preset-btn{
  padding:.25rem .625rem;border-radius:.5rem;
  background:var(--input-bg);border:1px solid var(--border);
  font-size:.75rem;font-weight:500;color:var(--text2);
  cursor:pointer;transition:all .15s;
}
.preset-btn:hover{border-color:var(--orange);color:var(--orange)}
.mute-pop-form{display:flex;gap:.375rem}
.mute-input{
  width:100%;background:var(--input-bg);border:1px solid var(--border);
  font-size:.75rem;padding:.375rem .625rem;border-radius:.5rem;outline:none;color:var(--text);
  transition:border-color .15s;
}
.mute-input:focus{border-color:var(--orange)}
.mute-apply{
  padding:.375rem .75rem;background:var(--red);color:#fff;
  font-size:.75rem;font-weight:600;border:none;border-radius:.5rem;
  cursor:pointer;transition:background .15s;flex-shrink:0;
}
.mute-apply:hover{background:#dc2626}
.mute-unmute{
  width:100%;background:var(--emerald);color:#fff;
  font-size:.75rem;font-weight:600;padding:.5rem;border:none;border-radius:.5rem;
  cursor:pointer;transition:background .15s;
}
.mute-unmute:hover{background:#059669}

/* --- 19. Toasts --- */
.toast-wrap{
  position:fixed;bottom:1.25rem;right:1.25rem;
  display:flex;flex-direction:column;gap:.5rem;z-index:70;pointer-events:none;
}
.toast{
  background:var(--card);border:1px solid var(--border);
  padding:.625rem 1rem;border-radius:.75rem;font-size:.75rem;font-weight:500;
  box-shadow:0 10px 15px -3px rgba(0,0,0,.1);max-width:20rem;
  opacity:0;transform:translateX(1rem);transition:all .2s;pointer-events:auto;
  display:flex;align-items:center;gap:.5rem;
}
.toast::before{content:'';width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0}
.toast.show{opacity:1;transform:translateX(0)}
.toast-ok{color:var(--emerald)}
.toast-ok::before{background:var(--emerald)}
.toast-err{color:var(--red)}
.toast-err::before{background:var(--red)}

/* --- 18b. Devices Page --- */
.dev-hotel-search{width:16rem;margin-bottom:.75rem}
.dev-hotel-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem}
.dev-hotel-tab{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem .875rem;border-radius:999px;
  background:var(--input-bg);border:1px solid var(--border);
  color:var(--text2);font-size:.8125rem;font-weight:600;cursor:pointer;
  transition:all .15s;
}
.dev-hotel-tab i{color:var(--text3);font-size:.75rem;transition:color .15s}
.dev-hotel-tab b{
  font-size:.6875rem;font-weight:700;color:var(--text3);
  background:var(--sub-bg);border-radius:999px;padding:.0625rem .4375rem;
  transition:all .15s;
}
.dev-hotel-tab:hover{border-color:var(--orange);color:var(--text-h)}
.dev-hotel-tab.active{background:var(--orange);border-color:var(--orange);color:#fff}
.dev-hotel-tab.active i{color:#fff}
.dev-hotel-tab.active b{background:rgba(255,255,255,.25);color:#fff}
.dev-hotel-panel{gap:0;padding:0;overflow:hidden}
.dev-hotel-hd{
  display:flex;align-items:center;gap:.5rem;padding:.875rem 1.25rem;
  border-bottom:1px solid var(--border-sub);
}
.dev-hotel-hd i{color:var(--orange)}
.dev-hotel-hd h2{font-weight:700;color:var(--text-h);font-size:.9375rem}
.dev-hotel-count{margin-left:auto;font-size:.75rem;color:var(--text3)}
.dev-hotel-panel .tbl-wrap{padding:0 .5rem .5rem}
.dev-hotel-panel .srv-tbl th{color:var(--text2)}
.dev-tbl{table-layout:fixed}
.dev-loc-row td.dev-loc-hd{
  padding:.75rem .5rem .375rem;
  border-top:1px solid var(--border-sub);white-space:normal;
}
.dev-loc-row.first td.dev-loc-hd{border-top:none;padding-top:.5rem}
.dev-loc-badge{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.25rem .625rem;border-radius:999px;
  background:rgba(34,211,238,.12);color:var(--cyan);
  font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
}
.dev-loc-badge i{color:var(--cyan);font-size:.7rem}
.dev-pw{color:var(--text);letter-spacing:.05em}
.dev-pw-btn{padding:.25rem .375rem;margin-left:.25rem}
.dev-pw-btn i{font-size:.6875rem}
/* min-height 2.5rem (thay vi 1.7rem) de vua khoi Tai khoan 2 dong (User/Pass
   xep chong) - cac cot 1 dong khac (IP/Port/Protocol/Privileged) tu can giua
   theo chieu doc nho align-items:center, van thang hang voi nhau theo tung
   diem truy cap. */
.dev-access-line{min-height:2.5rem;display:flex;align-items:center;white-space:nowrap}
.dev-acct-block{display:flex;flex-direction:column;gap:.2rem}
.dev-acct-block i{color:var(--text3);width:.9rem;font-size:.75rem;text-align:center}
/* Bang thiet bi: tieu de 16px, tat ca du lieu (moi cot) dung chung 1 font + 14px.
   10 cot nen tieu de de bi chat - truncate + ellipsis thay vi de chu tran ra
   de bi de len cot ben canh (vd "USERNAME/ID"/"PRIVILEGED" khong co khoang
   trang de tu xuong dong). Hover van xem duoc day du qua title attribute. */
.dev-tbl th{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dev-tbl td,
.dev-tbl .srv-cell-mono,
.dev-tbl .srv-cell-name,
.dev-tbl .srv-cell-muted,
.dev-tbl .dev-pw{
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:.875rem;
}
.dev-access-line:not(:last-child){border-bottom:1px dashed var(--border)}

/* --- 19b. Login Page --- */
.login-body{display:block;overflow:auto;user-select:auto}
.login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:1.5rem;background:var(--bg);
}
.login-card{
  width:100%;max-width:22rem;background:var(--card);border:1px solid var(--border);
  border-radius:1rem;padding:2rem 1.75rem;text-align:center;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.25);
}
.login-logo{
  width:3.5rem;height:3.5rem;margin:0 auto 1rem;border-radius:.875rem;
  background:var(--gray100);border:1px solid var(--border);
  padding:.5rem;display:flex;align-items:center;justify-content:center;
}
.login-logo img{width:100%;height:100%;object-fit:contain}
.login-title{font-size:1.25rem;font-weight:700;color:var(--text-h)}
.login-sub{font-size:.75rem;color:var(--orange);font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-bottom:1.5rem}
.login-form{display:flex;flex-direction:column;gap:1rem;text-align:left}
.login-error{
  font-size:.8125rem;color:var(--red);background:rgba(239,68,68,.1);
  border:1px solid rgba(239,68,68,.2);border-radius:.625rem;padding:.5rem .75rem;
}

/* --- 20. Settings --- */
.settings-card{
  background:var(--card);border:1px solid var(--border);border-radius:1rem;
  padding:1.5rem;max-width:28rem;display:flex;flex-direction:column;gap:1rem;
}
.settings-label{display:block;font-size:.75rem;font-weight:500;color:var(--text2);margin-bottom:.375rem}
.settings-input{
  width:100%;background:var(--input-bg);border:1px solid var(--border);
  color:var(--text);padding:.625rem .75rem;border-radius:.75rem;font-size:.875rem;
  outline:none;transition:border-color .15s;
}
.settings-input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(249,115,22,.1)}

/* --- Device model picker (dropdown co hinh anh minh hoa) --- */
.dev-model-thumb{width:3.25rem;height:3.25rem;border-radius:.5rem;object-fit:cover;border:1px solid var(--border);flex:none;background:var(--input-bg)}
.dev-model-picker{
  position:absolute;left:0;right:0;top:100%;margin-top:.25rem;z-index:60;
  background:var(--card);border:1px solid var(--border);border-radius:.75rem;
  max-height:16rem;overflow-y:auto;box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.dev-model-picker-row{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;cursor:pointer;font-size:.8125rem}
.dev-model-picker-row:hover{background:var(--input-bg)}
.dev-model-picker-thumb{width:3.5rem;height:3.5rem;border-radius:.5rem;object-fit:cover;border:1px solid var(--border);flex:none;background:var(--input-bg)}
.dev-model-picker-thumb-ph{width:3.5rem;height:3.5rem;border-radius:.5rem;flex:none;background:var(--input-bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:1.125rem}
.dev-model-picker-empty{padding:.75rem;font-size:.8125rem;color:var(--text3);text-align:center}
.model-image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.75rem}
.model-image-row{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.75rem;border:1px solid var(--border);border-radius:.75rem;background:var(--bg)}
.model-image-row-thumb{width:100%;height:6rem;border-radius:.5rem;object-fit:cover;border:1px solid var(--border);background:var(--input-bg)}
.model-image-row-thumb-ph{width:100%;height:6rem;border-radius:.5rem;background:var(--input-bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:1.25rem}

.image-lightbox{
  position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.85);
  display:flex;align-items:center;justify-content:center;cursor:zoom-out;padding:2rem;
}
.image-lightbox img{max-width:min(90vw,40rem);max-height:85vh;border-radius:.75rem;box-shadow:0 10px 40px rgba(0,0,0,.5)}

.diagram-editor-overlay{position:fixed;inset:0;z-index:150;background:var(--bg);display:flex;flex-direction:column}
.diagram-editor-bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.625rem 1rem;background:var(--card);border-bottom:1px solid var(--border);
  font-size:.875rem;font-weight:600;flex:none;
}
.diagram-editor-iframe{flex:1;width:100%;border:none;background:#fff}

/* --- 21. Animations --- */
/* pulse-red-anim: chi con dung cho icon Live Tail dang chay (#btn-logs-live.live-active i)
   - tin hieu "dang co du lieu chay that". Da bo khoi badge Offline cua tung dong
   server (truoc day nhay lien tuc, voi ~20 server co the nhieu dong nhay cung
   luc gay roi mat khi mot vai server offline cung luc), gio badge Offline la
   mau do tinh. */
@keyframes pulse-red-anim{
  0%{box-shadow:0 0 0 0 rgba(239,68,68,.7)}
  70%{box-shadow:0 0 0 8px rgba(239,68,68,0)}
  100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}
}
.fa-spin-custom{animation:fa-spin .6s linear}
@keyframes fa-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* --- 22b. Logs Page --- */
.log-toolbar-panel{gap:.75rem}
.log-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.log-search-box{width:16rem;flex:1;min-width:12rem}
.log-range-group{display:flex;background:var(--input-bg);border:1px solid var(--border);border-radius:.75rem;padding:.1875rem;gap:.125rem}
.log-range-btn{
  border:none;background:none;color:var(--text2);font-size:.75rem;font-weight:500;
  padding:.375rem .625rem;border-radius:.5rem;cursor:pointer;transition:all .15s;
}
.log-range-btn:hover{color:var(--text-h)}
.log-range-btn.active{background:var(--orange);color:#fff}
.log-advanced-row{display:flex;align-items:center;gap:.625rem}
.log-advanced-label{font-size:.75rem;font-weight:600;color:var(--text3);flex-shrink:0}

.log-viewer-panel{flex:1;min-height:0;padding:0;overflow:hidden;display:flex;flex-direction:column}
/* Header KHONG con dung position:sticky nua - qua 2 lan van bi trinh duyet tinh
   sai "scrolling ancestor" (header tach roi khoi bang, thay noi dung trang phia
   tren no khi cuon - da gap thuc te 2026-09-10). Thay bang cau truc chac chan
   hon: header la 1 <table> RIENG, dung yen ben ngoai #log-viewer (khong he
   nam trong khung cuon nen khong the "tach roi" duoc nua ve nguyen tac). Do
   rong 2 <colgroup> (head/body) duoc dong bo bang JS - xem initLogColumnResize(). */
.log-viewer-head-wrap{
  flex-shrink:0;background:var(--bg);border-radius:1rem 1rem 0 0;
  font-family:ui-monospace,SFMono-Regular,'Cascadia Mono',monospace;
}
.log-viewer{
  flex:1;height:100%;min-height:26rem;max-height:calc(100vh - 16rem);overflow-y:auto;
  background:var(--sub-bg);border-radius:0 0 1rem 1rem;padding:.75rem 0;
  font-family:ui-monospace,SFMono-Regular,'Cascadia Mono',monospace;font-size:.8125rem;
}
/* Bang that (<table>) thay vi CSS grid - table-layout:fixed dung dung do rong
   khai bao trong <colgroup>, 2 bang (head/body) luon can dung 1 bo cot chung
   (khong the lech nhu grid tren 2 khoi div rieng bi thanh cuon lam sai lech -
   da gap thuc te 2026-09-09). Do rong moi cot keo-tha duoc, xem initLogColumnResize().*/
.log-tbl{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.log-tbl thead th{
  position:relative;text-align:left;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:var(--text3);padding:.5rem .75rem;border-bottom:1px solid var(--border);
}
.th-text{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col-resizer{
  position:absolute;right:-3px;top:0;bottom:0;width:6px;cursor:col-resize;user-select:none;z-index:2;
}
.col-resizer:hover,.col-resizer.resizing{background:var(--orange)}
.log-tbl tbody td{padding:.375rem .75rem;vertical-align:top;word-break:break-word}
.log-tbl tbody tr:hover td{background:var(--hover)}
.log-logid{color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.log-ts{display:flex;flex-direction:column;white-space:nowrap;line-height:1.3}
.log-ts-date{color:var(--text3)}
.log-ts-time{color:var(--text2)}
.log-src{
  color:var(--cyan);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;
}
.log-lvl{
  font-weight:700;white-space:nowrap;padding:0 .375rem;border-radius:.25rem;
  font-size:.6875rem;line-height:1.4;text-align:center;display:inline-block;
}
.log-errid{color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.log-msg{color:var(--text);white-space:pre-line}
.log-msg mark{background:rgba(249,115,22,.35);color:var(--text-h);border-radius:.125rem}
.evt-field{color:var(--text3);font-weight:600}

.log-row-error .log-lvl{background:rgba(239,68,68,.15);color:var(--red)}
.log-row-warn .log-lvl{background:rgba(245,158,11,.15);color:var(--amber)}
.log-row-info .log-lvl{background:rgba(34,211,238,.15);color:var(--cyan)}
.log-row-debug .log-lvl{background:var(--gray100);color:var(--text3)}

/* Cung mau/kieu voi badge Online/Offline (.b-online/.b-offline) o dashboard chinh
   - dung chung ngon ngu mau xanh=on/xu ly xong, do=off/chua xu ly cho nhat quan. */
.log-solved{
  font-weight:700;white-space:nowrap;padding:.125rem .5rem;border-radius:.25rem;
  font-size:.6875rem;line-height:1.4;display:inline-block;
  background:rgba(16,185,129,.12);color:var(--emerald);border:1px solid rgba(16,185,129,.25);
}
.log-unsolved{
  font-weight:700;white-space:nowrap;padding:.125rem .5rem;border-radius:.25rem;
  font-size:.6875rem;line-height:1.4;display:inline-block;
  background:rgba(239,68,68,.12);color:var(--red);border:1px solid rgba(239,68,68,.25);
}

.log-empty{
  height:100%;min-height:24rem;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.75rem;color:var(--text3);
}
.log-empty i{font-size:2rem;opacity:.5}
.log-empty p{font-size:.875rem;max-width:24rem;text-align:center}

#btn-logs-live.live-active{background:rgba(239,68,68,.1);border-color:var(--red);color:var(--red)}
#btn-logs-live.live-active i{color:var(--red);animation:pulse-red-anim 1.5s infinite}

/* === 23. Server Detail Drawer (widget con) === */
/* Ghi chu: khoi nay truoc day co ca mot bo class cho 1 "trang chi tiet server
   rieng" (.det-topbar/.det-card/.det-overview/.det-bottom...) - tinh nang do da
   duoc thay the boi drawer #detail-panel (xem section 17) tu lau, cac class do
   da xoa vi khong con noi nao dung. .det-table/.det-scroll-inner o day la 2 class
   DUY NHAT trong nhom "det-" con song sot vi drawer hien tai van dung cho bang
   Ports/Processes (#dp-port-table, #dp-proc-table). */
.det-table{width:100%;border-collapse:collapse;font-size:.8125rem}
.det-table th{
  padding:.5rem 1rem;font-size:.625rem;font-weight:700;
  color:var(--text3);text-transform:uppercase;letter-spacing:.05em;text-align:left;
}
.det-table td{
  padding:.625rem 1rem;color:var(--text);
  border-top:1px solid var(--border-sub);
}
.loading{padding:1.5rem 1rem;text-align:center;color:var(--text3);font-size:.8125rem}

/* Mau cho vol-bar-fill (di .gauge-row/.gauge-bg/.gauge-fill goc da bi go bo vi
   khong con noi nao dung - drawer chi tiet server gio dung .vol-bar-* thay the) */
.gauge-fill-low{background:var(--emerald)}
.gauge-fill-mid{background:var(--amber)}
.gauge-fill-high{background:var(--red)}

/* Disk storage bars */
.vol-list{padding:.625rem .75rem;display:flex;flex-direction:column;gap:.5rem}
.vol-row{display:flex;align-items:center;gap:.75rem}
.vol-name{
  font-family:ui-monospace,monospace;font-size:.75rem;
  font-weight:700;color:var(--text-h);min-width:1.5rem;
}
.vol-bar-bg{flex:1;height:.3125rem;border-radius:9999px;background:var(--border)}
.vol-bar-fill{height:100%;width:100%;border-radius:9999px;transform-origin:left;transition:transform .3s}
.vol-info{
  font-size:.6875rem;color:var(--text3);white-space:nowrap;
  min-width:5.5rem;text-align:right;font-family:ui-monospace,monospace;
}

/* NIC traffic widgets */
.nic-widget-list{display:flex;flex-direction:column;gap:.5rem}
.nic-widget{
  display:flex;flex-direction:column;gap:.5rem;
  background:var(--bg);border:1px solid var(--border);border-radius:.625rem;padding:.625rem .75rem;
}
.nic-widget-left{display:flex;align-items:center;gap:.625rem}
.nic-widget-icon{
  width:1.875rem;height:1.875rem;border-radius:.5rem;flex:none;
  background:rgba(77,141,251,.12);border:1px solid rgba(77,141,251,.25);
  display:flex;align-items:center;justify-content:center;color:#4d8dfb;font-size:.75rem;
}
.nic-widget-title{display:flex;align-items:center;gap:.5rem;min-width:0;font-size:.75rem;font-weight:700;color:var(--text-h)}
.nic-widget-title .truncate{max-width:none;min-width:0}
.nic-widget-badge{
  font-size:9px;font-weight:700;padding:.0625rem .375rem;border-radius:.25rem;flex:none;
  background:rgba(16,185,129,.15);color:var(--emerald4);border:1px solid rgba(16,185,129,.25);
}
.nic-widget-badge-down{background:rgba(239,68,68,.15);color:var(--red);border-color:rgba(239,68,68,.25)}
.nic-widget-sub{font-size:10px;color:var(--text3);margin-top:.0625rem;font-family:ui-monospace,monospace}
.nic-widget-offline{font-size:.75rem;color:var(--text3)}
.nic-widget-stats{display:flex;gap:1rem}
.nic-widget-stat{flex:1;min-width:0}
.nic-widget-stat-hd{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:10px;color:var(--text3);margin-bottom:.25rem}
.nic-widget-stat-val{font-family:ui-monospace,monospace;font-weight:700;white-space:nowrap}
.nic-widget-stat-val small{font-size:9px;font-weight:600;opacity:.8}
.nic-widget-spark{height:1.875rem;position:relative}
.nic-widget-spark canvas{display:block;width:100%;height:100%;cursor:crosshair}
.spark-tooltip{
  position:fixed;transform:translate(-50%,-100%);z-index:80;
  background:var(--card);border:1px solid var(--border);border-radius:.375rem;
  padding:.375rem .5rem;font-size:10px;line-height:1.4;color:var(--text2);
  font-family:ui-monospace,monospace;white-space:nowrap;pointer-events:none;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
}
.spark-tooltip b{color:var(--text-h)}
.spark-tooltip.hidden{display:none}
@media(max-width:640px){.nic-widget-stats{flex-direction:column;gap:.625rem}}

/* NIC / status badges / dots */
.nic-status{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.125rem .5rem;border-radius:9999px;
  font-size:.6875rem;font-weight:600;
}
.b-online{background:rgba(16,185,129,.12);color:var(--emerald);border:1px solid rgba(16,185,129,.25)}
.b-offline{background:rgba(239,68,68,.12);color:var(--red);border:1px solid rgba(239,68,68,.25)}
.dot{width:.4375rem;height:.4375rem;border-radius:50%;flex-shrink:0}
.d-on{background:var(--emerald)}
.d-off{background:var(--red)}

/* Bottom 3-col row */
.det-bottom{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;align-items:start}
.det-scrollcard{display:flex;flex-direction:column;max-height:19rem}
.det-scroll-inner{overflow-y:auto;flex:1}

/* Process bar */
.proc-bar{flex:1;height:.3125rem;border-radius:9999px;background:var(--border);min-width:3rem}
.proc-fill{height:100%;border-radius:9999px}