/* EcoView EMS - tự chứa, không phụ thuộc thư viện ngoài */
:root{
  --primary:#0f6f8f;
  --primary-rgb:15,111,143;
  --secondary:#22a06b;
  --accent:#ffb020;
  --danger:#dc4c64;
  --warning:#e68a00;
  --success:#21875a;
  --info:#2f7ed8;
  --bg:#f2f5f8;
  --surface:#ffffff;
  --surface-2:#f7f9fb;
  --surface-3:#eef2f6;
  --text:#17212b;
  --muted:#667483;
  --border:#dce3ea;
  --shadow:0 8px 24px rgba(17,39,61,.08);
  --shadow-soft:0 2px 10px rgba(17,39,61,.06);
  --sidebar-width:250px;
  --topbar-height:66px;
  --radius:14px;
  --ui-scale:1;
  --base-font-size:16px;
  --density:1;
  --transition:.22s ease;
}
*{box-sizing:border-box}
html{font-size:var(--base-font-size)}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  zoom:var(--ui-scale);
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{opacity:.55;cursor:not-allowed}
body.dark{
  --bg:#101820;--surface:#17232e;--surface-2:#1b2a36;--surface-3:#223440;
  --text:#eef5f7;--muted:#9eb0bd;--border:#2e4452;
  --shadow:0 10px 30px rgba(0,0,0,.22);--shadow-soft:0 2px 10px rgba(0,0,0,.18);
}
body.compact{--density:.82}
body.comfortable{--density:1.13}
.app{min-height:100vh}
.topbar{
  position:fixed;inset:0 0 auto 0;height:var(--topbar-height);z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 20px 0 12px;background:var(--surface);border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-soft)
}
.topbar-left,.topbar-right,.brand,.profile{display:flex;align-items:center}
.topbar-left{gap:10px}.topbar-right{gap:10px}
.icon-button{
  width:38px;height:38px;border:0;border-radius:10px;background:transparent;
  display:inline-grid;place-items:center;font-size:19px;color:var(--muted)
}
.icon-button:hover{background:var(--surface-3);color:var(--text)}
.brand{gap:11px;min-width:0}
.brand-logo{
  width:48px;height:48px;border-radius:0;background:transparent;
  color:#fff;display:grid;place-items:center;font-weight:800;letter-spacing:.5px;
  box-shadow:none;overflow:visible
}
.brand-logo img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(0,0,0,.32))}
.brand-copy{min-width:0}
.brand-name{font-weight:800;font-size:.92rem;letter-spacing:.02em;white-space:nowrap}
.brand-subtitle{font-size:.72rem;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:470px}
.connection-pill{
  display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:999px;
  background:rgba(33,135,90,.09);color:var(--success);font-size:.75rem;font-weight:700
}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--success);position:relative}
.pulse-dot:after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--success);animation:pulse 1.8s infinite}
@keyframes pulse{0%{transform:scale(.7);opacity:.7}100%{transform:scale(1.6);opacity:0}}
.header-button{
  height:38px;padding:0 13px;border:1px solid var(--border);border-radius:10px;
  background:var(--surface);display:flex;align-items:center;gap:7px;font-size:.78rem;font-weight:700
}
.header-button:hover{border-color:var(--primary);color:var(--primary)}
.notification-button{position:relative}
.notification-count{
  position:absolute;right:1px;top:0;background:var(--danger);color:white;border-radius:999px;
  min-width:16px;height:16px;padding:0 4px;font-size:.62rem;display:grid;place-items:center;border:2px solid var(--surface)
}
.profile{gap:9px;padding-left:4px}
.profile-avatar{width:38px;height:38px;border-radius:12px;background:var(--surface-3);display:grid;place-items:center;font-weight:800;color:var(--primary)}
.profile-text{display:flex;flex-direction:column;font-size:.72rem}.profile-text small{color:var(--muted);margin-top:2px}

.sidebar{
  position:fixed;left:0;top:var(--topbar-height);bottom:0;width:var(--sidebar-width);
  z-index:90;background:#102a36;color:#dfeef3;display:flex;flex-direction:column;
  transition:width var(--transition),transform var(--transition)
}
.sidebar-scroll{overflow:auto;padding:13px 10px 18px;flex:1}
.nav-caption{font-size:.62rem;font-weight:800;letter-spacing:.12em;color:#7997a5;padding:18px 12px 8px}
.nav-item{
  width:100%;height:calc(44px * var(--density));border:0;background:transparent;color:#cfe0e6;
  border-radius:10px;padding:0 12px;margin:2px 0;display:flex;align-items:center;gap:11px;text-align:left;
  font-size:.81rem;transition:var(--transition)
}
.nav-item:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-item.active{background:linear-gradient(90deg,rgba(var(--primary-rgb),.95),rgba(var(--primary-rgb),.60));color:#fff;box-shadow:0 8px 18px rgba(0,0,0,.16)}
.nav-icon{width:22px;text-align:center;font-size:1.05rem}
.nav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-badge{margin-left:auto;background:rgba(255,255,255,.16);border-radius:999px;padding:2px 7px;font-size:.65rem}
.nav-badge.warning{background:var(--danger)}
.sidebar-footer{min-height:66px;border-top:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:11px;padding:10px 18px}
.sidebar-footer-icon{width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.1);display:grid;place-items:center}
.sidebar-footer small{display:block;color:#8eabb7;margin-top:2px}
body.sidebar-collapsed{--sidebar-width:74px}
body.sidebar-collapsed .sidebar .nav-label,
body.sidebar-collapsed .sidebar .nav-caption,
body.sidebar-collapsed .sidebar .nav-badge{display:none}
body.sidebar-collapsed .nav-item{justify-content:center;padding:0}
body.sidebar-collapsed .nav-icon{width:auto}
body.sidebar-collapsed .sidebar-footer{justify-content:center;padding:10px}
body.sidebar-collapsed .sidebar-footer .nav-label{display:none}

.main-content{margin-left:var(--sidebar-width);padding:calc(var(--topbar-height) + 24px) 24px 35px;min-height:100vh;transition:margin-left var(--transition)}
.page{display:none;animation:fadeIn .18s ease}.page.active{display:block}
@keyframes fadeIn{from{opacity:.2;transform:translateY(3px)}to{opacity:1;transform:none}}
.page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:20px}
.breadcrumbs{font-size:.73rem;color:var(--muted);margin-bottom:8px}.breadcrumbs span{padding:0 6px}
.page-header h1{font-size:1.55rem;margin:0}.page-header p{font-size:.82rem;color:var(--muted);margin:6px 0 0}
.page-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.primary-button,.secondary-button,.link-button,.mini-button{
  border:0;border-radius:10px;height:40px;padding:0 15px;font-weight:700;font-size:.77rem;transition:var(--transition)
}
.primary-button{background:var(--primary);color:white;box-shadow:0 5px 14px rgba(var(--primary-rgb),.22)}
.primary-button:hover{filter:brightness(.94);transform:translateY(-1px)}
.secondary-button{background:var(--surface);color:var(--text);border:1px solid var(--border)}
.secondary-button:hover{border-color:var(--primary);color:var(--primary)}
.link-button{height:auto;padding:5px;background:transparent;color:var(--primary)}
.mini-button{height:31px;padding:0 10px;background:var(--surface-3);color:var(--muted)}
.header-select{height:40px;border:1px solid var(--border);border-radius:10px;background:var(--surface);padding:0 35px 0 12px}

.summary-grid{display:grid;grid-template-columns:repeat(6,minmax(150px,1fr));gap:14px;margin-bottom:16px}
.summary-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  min-height:112px;padding:calc(16px * var(--density));display:flex;align-items:center;gap:13px;box-shadow:var(--shadow-soft);transition:var(--transition)
}
.summary-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.summary-icon{width:43px;height:43px;min-width:43px;border-radius:14px;display:grid;place-items:center;font-weight:800}
.summary-icon.pink{background:#fce7f1;color:#d84d88}.summary-icon.red{background:#fde8eb;color:var(--danger)}
.summary-icon.green{background:#e6f4ed;color:var(--success)}.summary-icon.purple{background:#eee8ff;color:#7652d5}
.summary-icon.orange{background:#fff0dc;color:var(--warning)}.summary-icon.gray{background:var(--surface-3);color:#7a8794}
.summary-card small,.summary-card span{display:block;color:var(--muted)}.summary-card small{font-size:.7rem}.summary-card strong{display:block;font-size:1.35rem;margin:3px 0}.summary-card span{font-size:.64rem}

.dashboard-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-bottom:16px}
.span-4{grid-column:span 4}.span-5{grid-column:span 5}.span-7{grid-column:span 7}.span-8{grid-column:span 8}.span-12{grid-column:span 12}
.panel,.table-panel,.filter-panel,.monitor-group,.map-panel,.map-detail,.camera-card,.settings-layout{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-soft)
}
.panel{padding:calc(17px * var(--density));min-height:280px}
.panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}
.panel-header h3{font-size:.92rem;margin:0}.panel-header p{font-size:.69rem;color:var(--muted);margin:4px 0 0}
.panel-tools{display:flex;align-items:center;gap:5px}
.chart-legend{display:flex;gap:18px;font-size:.67rem;color:var(--muted);margin-bottom:10px}
.legend-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px}
.legend-dot.success{background:var(--success)}.legend-dot.danger{background:var(--danger)}.legend-dot.muted{background:#aab5be}.legend-dot.blue{background:var(--primary)}.legend-dot.cyan{background:#4db7c5}.legend-dot.purple{background:#7b61d1}
.bar-chart{height:220px;display:flex;padding:10px 5px 0}
.chart-y-labels{width:25px;display:flex;flex-direction:column;justify-content:space-between;color:var(--muted);font-size:.62rem;padding-bottom:25px}
.bars{flex:1;display:flex;align-items:flex-end;justify-content:space-around;border-left:1px solid var(--border);border-bottom:1px solid var(--border);background:repeating-linear-gradient(to bottom,transparent 0,transparent 48px,var(--border) 49px)}
.bar-column{width:9%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.bar{width:72%;border-radius:7px 7px 0 0;display:flex;align-items:flex-start;justify-content:center;padding-top:5px;color:white;font-size:.65rem}
.bar.good{background:linear-gradient(180deg,var(--secondary),var(--success))}
.bar-column small{height:25px;padding-top:7px;color:var(--muted);font-size:.62rem}
.donut-layout{display:flex;align-items:center;justify-content:center;gap:25px;min-height:205px}
.donut-chart{width:150px;height:150px;border-radius:50%;background:conic-gradient(var(--primary) 0 66.66%,#4db7c5 66.66% 100%);display:grid;place-items:center;position:relative}
.donut-chart:before{content:"";position:absolute;width:94px;height:94px;border-radius:50%;background:var(--surface)}
.donut-center{position:relative;display:flex;flex-direction:column;align-items:center}.donut-center b{font-size:1.35rem}.donut-center small{color:var(--muted);font-size:.65rem}
.donut-legend{min-width:120px}.donut-legend div{display:flex;justify-content:space-between;gap:20px;padding:9px 0;border-bottom:1px dashed var(--border);font-size:.72rem}.donut-legend div:last-child{border:0}
.station-list{display:flex;flex-direction:column}
.station-row{border:0;background:transparent;display:flex;align-items:center;gap:10px;padding:11px 6px;border-bottom:1px solid var(--border);text-align:left}
.station-row:last-child{border-bottom:0}.station-row:hover{background:var(--surface-2)}
.station-state{width:8px;height:8px;border-radius:50%}.station-state.online{background:var(--success)}
.station-avatar{width:34px;height:34px;border-radius:10px;background:rgba(var(--primary-rgb),.1);color:var(--primary);display:grid;place-items:center;font-size:.65rem;font-weight:800}
.station-avatar.water{background:#e5f7f7;color:#2d8d98}
.station-main{display:flex;flex-direction:column;flex:1;min-width:0}.station-main b{font-size:.75rem}.station-main small{font-size:.63rem;color:var(--muted);margin-top:3px}
.station-metric{display:grid;grid-template-columns:auto auto;column-gap:5px;align-items:baseline;text-align:right}.station-metric small{grid-column:1/-1;color:var(--muted);font-size:.6rem}.station-metric b{font-size:.8rem;color:var(--success)}.station-metric em{font-size:.55rem;color:var(--muted);font-style:normal}
.row-arrow{font-size:1.2rem;color:var(--muted)}
.timeline{padding-top:4px}.timeline-item{display:flex;gap:12px;padding:10px 2px;position:relative}.timeline-item>span{width:10px;height:10px;border-radius:50%;margin-top:4px;position:relative;z-index:1}.timeline-item:not(:last-child)>span:after{content:"";position:absolute;left:4px;top:11px;width:1px;height:39px;background:var(--border)}
.timeline-item.warning>span{background:var(--warning)}.timeline-item.info>span{background:var(--info)}.timeline-item.success>span{background:var(--success)}
.timeline-item div{display:flex;flex-direction:column}.timeline-item b{font-size:.73rem}.timeline-item small{font-size:.63rem;color:var(--muted);margin-top:3px}
.table-panel{padding:calc(17px * var(--density));margin-bottom:16px}
.segmented{display:flex;background:var(--surface-3);border-radius:9px;padding:3px}.segmented button{height:28px;border:0;background:transparent;border-radius:7px;padding:0 10px;font-size:.67rem}.segmented button.active{background:var(--surface);box-shadow:var(--shadow-soft);color:var(--primary);font-weight:700}
.data-table-wrap{overflow:auto}
.data-table{border-collapse:separate;border-spacing:0;width:100%;min-width:760px}
.data-table th{font-size:.66rem;text-align:left;color:var(--muted);font-weight:700;background:var(--surface-2);padding:calc(11px * var(--density));border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.data-table th:first-child{border-left:1px solid var(--border);border-radius:9px 0 0 9px}.data-table th:last-child{border-right:1px solid var(--border);border-radius:0 9px 9px 0}
.data-table td{font-size:.7rem;padding:calc(12px * var(--density));border-bottom:1px solid var(--border);vertical-align:middle}
.data-table tr:hover td{background:var(--surface-2)}
.data-table th small{display:block;font-size:.55rem;font-weight:400;margin-top:3px}
.progress{width:75px;height:5px;border-radius:999px;background:var(--surface-3);display:inline-block;margin-right:8px;vertical-align:middle}.progress span{display:block;height:100%;border-radius:inherit;background:var(--success)}
.status-chip{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;font-size:.62rem;font-weight:700}
.status-chip.success{background:#e5f4ed;color:var(--success)}.status-chip.info{background:#e5f0fb;color:var(--info)}.status-chip.warning{background:#fff0dc;color:var(--warning)}.status-chip.danger{background:#fde8eb;color:var(--danger)}.status-chip.neutral{background:var(--surface-3);color:var(--muted)}

.map-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px}
.map-panel{overflow:hidden}.map-toolbar{display:flex;gap:9px;padding:12px;border-bottom:1px solid var(--border)}
.search-box{height:38px;min-width:250px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);display:flex;align-items:center;padding:0 10px;gap:7px}.search-box input{border:0;outline:0;background:transparent;width:100%;font-size:.75rem}
.map-toolbar select{height:38px;border:1px solid var(--border);border-radius:10px;background:var(--surface);padding:0 32px 0 10px;font-size:.72rem}
.mock-map{height:635px;position:relative;overflow:hidden;background:linear-gradient(135deg,#dceaf0,#edf4f6)}
.map-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(15,111,143,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(15,111,143,.07) 1px,transparent 1px);background-size:36px 36px}
.map-shape{position:absolute;left:20%;top:1%;height:98%;fill:#d1e0d7;stroke:#7ea491;stroke-width:3;filter:drop-shadow(0 10px 16px rgba(38,76,55,.15))}
.map-marker{position:absolute;border:0;background:transparent;display:flex;align-items:center;gap:7px;z-index:2}
.map-marker span{width:30px;height:30px;border-radius:50% 50% 50% 5px;transform:rotate(-45deg);display:grid;place-items:center;color:white;font-size:.65rem;font-weight:800;box-shadow:0 5px 12px rgba(0,0,0,.2);border:2px solid white}
.map-marker b{background:var(--surface);padding:6px 9px;border-radius:8px;box-shadow:var(--shadow-soft);font-size:.63rem;white-space:nowrap}.map-marker.online span{background:var(--success)}.map-marker.hidden{display:none}.map-marker.selected b{color:var(--primary);outline:2px solid var(--primary)}
.map-controls{position:absolute;right:14px;top:14px;display:flex;flex-direction:column;gap:5px}.map-controls button{width:36px;height:36px;border:1px solid var(--border);background:var(--surface);border-radius:10px;font-size:1rem}
.map-legend{position:absolute;left:14px;bottom:14px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:9px 12px;display:flex;gap:14px;box-shadow:var(--shadow-soft);font-size:.65rem}
.map-detail{padding:17px;min-height:635px}.empty-map-detail{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted)}.empty-map-detail div{font-size:3rem;color:var(--primary);opacity:.4}.empty-map-detail b{font-size:.86rem;color:var(--text);margin-top:12px}.empty-map-detail p{font-size:.7rem;max-width:220px}
.map-detail-card h2{font-size:1rem;margin:0 0 5px}.map-detail-card>p{font-size:.7rem;color:var(--muted);margin:0 0 16px}.map-detail-card .status-line{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-top:1px solid var(--border);font-size:.7rem}.map-detail-card .metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:10px 0 16px}.map-detail-card .metric-grid div{background:var(--surface-2);border-radius:10px;padding:10px}.map-detail-card .metric-grid small{display:block;color:var(--muted);font-size:.58rem}.map-detail-card .metric-grid b{display:block;font-size:.85rem;margin-top:4px;color:var(--success)}

.filter-panel{padding:14px;margin-bottom:16px}.filter-grid{display:grid;grid-template-columns:repeat(6,minmax(130px,1fr));gap:10px;align-items:end}
.filter-grid label{display:flex;flex-direction:column;gap:6px}.filter-grid label span{font-size:.66rem;color:var(--muted);font-weight:600}.filter-grid select,.filter-grid input,.filter-inline input,.filter-inline select{height:38px;border:1px solid var(--border);border-radius:9px;background:var(--surface);padding:0 10px;font-size:.7rem;outline:0}.filter-grid select:focus,.filter-grid input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(var(--primary-rgb),.1)}
.monitor-group{margin-bottom:14px;overflow:hidden}.monitor-group-header{min-height:72px;padding:12px 15px;display:flex;align-items:center;justify-content:space-between}.monitor-group-header>div{display:flex;align-items:center;gap:11px}.group-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:.7rem;font-weight:800}.group-icon.air{background:rgba(var(--primary-rgb),.1);color:var(--primary)}.group-icon.water{background:#e5f7f7;color:#2d8d98}.group-icon.other{background:var(--surface-3);color:var(--muted)}.monitor-group h3{font-size:.85rem;margin:0}.monitor-group p{font-size:.63rem;color:var(--muted);margin:3px 0 0}.group-actions{display:flex;align-items:center!important;gap:8px}.monitor-group-body{border-top:1px solid var(--border);padding:0 14px 14px}.monitor-group.collapsed .monitor-group-body{display:none}.value-good{color:var(--success);font-weight:700}.table-action{border:0;background:transparent;color:var(--muted);font-weight:800}

.station-detail-hero{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-bottom:16px}.station-info-card,.station-health-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px}.station-info-head{display:flex;align-items:center;gap:13px}.station-info-head .station-avatar{width:50px;height:50px;font-size:.8rem}.station-info-head h2{font-size:1.05rem;margin:0}.station-info-head p{font-size:.69rem;color:var(--muted);margin:4px 0 0}.station-info-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:17px}.station-info-meta div{background:var(--surface-2);border-radius:10px;padding:10px}.station-info-meta small{display:block;color:var(--muted);font-size:.58rem}.station-info-meta b{display:block;font-size:.72rem;margin-top:4px}.health-ring{width:125px;height:125px;border-radius:50%;background:conic-gradient(var(--success) 0 96%,var(--surface-3) 96%);display:grid;place-items:center;margin:5px auto;position:relative}.health-ring:before{content:"";position:absolute;width:88px;height:88px;border-radius:50%;background:var(--surface)}.health-ring div{position:relative;text-align:center}.health-ring b{display:block;font-size:1.25rem}.health-ring small{font-size:.58rem;color:var(--muted)}
.metric-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px}.metric-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:15px}.metric-card small{font-size:.62rem;color:var(--muted)}.metric-card b{display:block;font-size:1.05rem;margin:7px 0;color:var(--success)}.metric-card span{font-size:.58rem;color:var(--muted)}
.trend-panel{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:16px}.trend-chart-panel,.device-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:17px}.line-chart{height:300px;position:relative;padding:15px 20px 25px;background:linear-gradient(to bottom,transparent 24%,var(--border) 25%,transparent 25%,transparent 49%,var(--border) 50%,transparent 50%,transparent 74%,var(--border) 75%,transparent 75%)}.line-chart svg{width:100%;height:100%;overflow:visible}.line-chart polyline{fill:none;stroke:var(--primary);stroke-width:3}.line-chart circle{fill:var(--surface);stroke:var(--primary);stroke-width:2}.line-chart .area{fill:rgba(var(--primary-rgb),.09);stroke:none}.device-list{display:flex;flex-direction:column}.device-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--border)}.device-row:last-child{border:0}.device-row>span:first-child{width:32px;height:32px;border-radius:9px;background:var(--surface-3);display:grid;place-items:center}.device-row div{flex:1}.device-row b{display:block;font-size:.7rem}.device-row small{font-size:.58rem;color:var(--muted)}

.camera-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.camera-card{overflow:hidden}.camera-screen{height:270px;background:linear-gradient(145deg,#273b45,#0d161b);position:relative;color:white;display:grid;place-items:center}.camera-screen.alt{background:linear-gradient(145deg,#3e4f45,#18221c)}.camera-screen.blue{background:linear-gradient(145deg,#25465d,#0b1c27)}.camera-screen>span{position:absolute;left:12px;top:11px;font-size:.65rem;background:rgba(0,0,0,.35);padding:5px 8px;border-radius:6px}.camera-screen>i{position:absolute;right:12px;top:11px;font-size:.55rem;font-style:normal;background:var(--danger);padding:5px 7px;border-radius:6px}.camera-card.offline .camera-screen{filter:grayscale(.8);opacity:.75}.camera-card.offline .camera-screen>i{background:#67737b}.camera-placeholder{display:flex;flex-direction:column;align-items:center;font-size:2rem;opacity:.65}.camera-placeholder small{font-size:.62rem;margin-top:8px}.camera-info{display:flex;align-items:center;justify-content:space-between;padding:13px 15px}.camera-info b{font-size:.76rem}.camera-info small{display:block;font-size:.62rem;color:var(--muted);margin-top:3px}

.alert-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.alert-summary>div{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:15px;display:grid;grid-template-columns:auto 1fr;column-gap:11px;align-items:center}.alert-summary .summary-icon{grid-row:1/3}.alert-summary b{font-size:1.1rem}.alert-summary small{font-size:.63rem;color:var(--muted)}
.filter-inline{display:flex;gap:9px;margin-bottom:13px}.filter-inline input:first-child{min-width:260px}.alert-level{display:flex;align-items:center;gap:7px}.alert-level i{width:8px;height:8px;border-radius:50%;background:var(--warning)}.alert-level.danger i{background:var(--danger)}.alert-level.info i{background:var(--info)}

.lookup-grid{grid-template-columns:repeat(6,1fr)}.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:14px}.tabs button{height:40px;border:0;background:transparent;padding:0 15px;color:var(--muted);font-size:.72rem;font-weight:700;border-bottom:2px solid transparent}.tabs button.active{color:var(--primary);border-color:var(--primary)}.tab-content{display:none}.tab-content.active{display:block}
.report-tabs{overflow:auto;white-space:nowrap}.report-filter-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:15px;margin-bottom:14px}.report-filter-card .filter-grid{grid-template-columns:repeat(4,1fr) auto}.report-subtabs{display:flex;gap:8px;overflow:auto;margin:12px 0}.report-subtabs button{border:1px solid var(--border);background:var(--surface);border-radius:9px;padding:8px 11px;font-size:.66rem}.report-subtabs button.active{border-color:var(--primary);color:var(--primary);background:rgba(var(--primary-rgb),.07)}
.empty-state{min-height:310px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted)}.empty-state>div{font-size:3.2rem;color:var(--primary);opacity:.35}.empty-state b{font-size:.8rem;color:var(--text);margin-top:8px}.empty-state p{font-size:.65rem;margin:5px 0}.empty-state.compact{min-height:150px}
.synthesis-grid{grid-template-columns:repeat(4,1fr) auto}.report-list-empty{min-height:390px}.attachment-button{border:0;background:rgba(var(--primary-rgb),.08);color:var(--primary);border-radius:8px;padding:6px 9px;font-size:.62rem;font-weight:700}

.station-admin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.station-admin-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-soft)}.station-admin-head{display:flex;gap:11px;align-items:center}.station-admin-head>div:nth-child(2){flex:1}.station-admin-head h3{font-size:.8rem;margin:0}.station-admin-head p{font-size:.62rem;color:var(--muted);margin:4px 0 0}.station-admin-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:15px 0}.station-admin-meta div{background:var(--surface-2);border-radius:9px;padding:9px}.station-admin-meta small{display:block;color:var(--muted);font-size:.56rem}.station-admin-meta b{font-size:.66rem;margin-top:4px;display:block}.station-admin-footer{display:flex;gap:8px}.station-admin-footer button{flex:1}.user-cell{display:flex;align-items:center;gap:8px}.user-cell span{width:30px;height:30px;border-radius:9px;background:rgba(var(--primary-rgb),.1);color:var(--primary);display:grid;place-items:center;font-weight:800;font-size:.62rem}

.settings-layout{display:grid;grid-template-columns:210px 1fr;min-height:620px;overflow:hidden}.settings-nav{padding:12px;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:4px}.settings-nav button{height:42px;border:0;border-radius:9px;background:transparent;text-align:left;padding:0 12px;font-size:.72rem}.settings-nav button.active{background:rgba(var(--primary-rgb),.09);color:var(--primary);font-weight:700}.settings-content{padding:20px}.setting-section{display:none}.setting-section.active{display:block}.setting-group{margin-bottom:24px}.setting-group h3{font-size:.88rem;margin:0 0 5px}.setting-group>p{font-size:.68rem;color:var(--muted);margin:0 0 14px}.setting-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.setting-card{border:1px solid var(--border);border-radius:12px;padding:14px}.setting-card label{font-size:.68rem;font-weight:700;display:block;margin-bottom:7px}.setting-card p{font-size:.6rem;color:var(--muted);margin:6px 0 0}.setting-card input[type="text"],.setting-card input[type="number"],.setting-card select,.setting-card textarea{width:100%;height:38px;border:1px solid var(--border);border-radius:9px;background:var(--surface);padding:0 10px;font-size:.7rem}.setting-card textarea{height:82px;padding-top:9px;resize:vertical}.setting-card input[type="range"]{width:100%}.color-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.color-preset{border:1px solid var(--border);border-radius:10px;padding:9px;background:var(--surface);display:flex;align-items:center;gap:7px;font-size:.62rem}.color-preset span{width:22px;height:22px;border-radius:7px}.color-preset.active{border-color:var(--primary);box-shadow:0 0 0 2px rgba(var(--primary-rgb),.1)}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:11px 0;border-bottom:1px solid var(--border)}.toggle-row:last-child{border:0}.toggle-row b{font-size:.7rem}.toggle-row small{display:block;color:var(--muted);font-size:.59rem;margin-top:3px}.switch{width:42px;height:24px;border-radius:999px;background:#bcc7ce;position:relative;border:0;min-width:42px}.switch:after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:white;left:3px;top:3px;transition:var(--transition);box-shadow:0 2px 5px rgba(0,0,0,.2)}.switch.on{background:var(--primary)}.switch.on:after{left:21px}.logo-upload-preview{width:70px;height:70px;border-radius:16px;background:linear-gradient(135deg,var(--primary),var(--secondary));color:white;display:grid;place-items:center;font-weight:800;overflow:hidden;margin-bottom:10px}.logo-upload-preview img{width:100%;height:100%;object-fit:cover}

.drawer-overlay{position:fixed;inset:0;background:rgba(7,18,27,.35);z-index:150;opacity:0;pointer-events:none;transition:var(--transition)}.drawer-overlay.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;right:0;top:0;bottom:0;width:390px;max-width:92vw;background:var(--surface);z-index:160;box-shadow:-15px 0 40px rgba(0,0,0,.16);transform:translateX(100%);transition:transform var(--transition);display:flex;flex-direction:column}.drawer.open{transform:translateX(0)}.drawer-header{padding:20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:flex-start}.drawer-header h2{font-size:1.05rem;margin:0}.drawer-header p{font-size:.65rem;color:var(--muted);margin:5px 0 0}.drawer-body{padding:17px;overflow:auto;flex:1}.drawer-footer{padding:14px 17px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}
.custom-section{margin-bottom:20px}.custom-section h3{font-size:.75rem;margin:0 0 10px}.custom-section .setting-card{margin-bottom:9px}
.modal{position:fixed;inset:0;background:rgba(7,18,27,.48);z-index:200;display:none;align-items:center;justify-content:center;padding:20px}.modal.open{display:flex}.modal-dialog{width:620px;max-width:100%;max-height:92vh;background:var(--surface);border-radius:16px;box-shadow:0 25px 60px rgba(0,0,0,.24);display:flex;flex-direction:column}.modal-header{padding:17px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.modal-header h2{font-size:1rem;margin:0}.modal-body{padding:18px 20px;overflow:auto}.modal-footer{padding:14px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-field{display:flex;flex-direction:column;gap:6px}.form-field.full{grid-column:1/-1}.form-field label{font-size:.65rem;font-weight:700}.form-field input,.form-field select,.form-field textarea{height:39px;border:1px solid var(--border);border-radius:9px;background:var(--surface);padding:0 10px;font-size:.7rem}.form-field textarea{height:78px;padding-top:9px}.form-field label.check-line{min-height:39px;border:1px solid var(--border);border-radius:9px;padding:8px 10px;display:flex;align-items:center;gap:9px;background:var(--surface)}.form-field label.check-line input[type=checkbox]{width:16px;height:16px;min-width:16px;margin:0;padding:0}.checkbox-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.checkbox-grid label{border:1px solid var(--border);border-radius:9px;padding:9px;font-size:.67rem;display:flex;gap:8px;align-items:center}
.toast-container{position:fixed;right:18px;bottom:18px;z-index:260;display:flex;flex-direction:column;gap:8px}.toast{min-width:270px;max-width:360px;background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--success);border-radius:10px;box-shadow:var(--shadow);padding:11px 13px;display:flex;gap:9px;align-items:flex-start;animation:toastIn .2s ease}.toast.warning{border-left-color:var(--warning)}.toast.danger{border-left-color:var(--danger)}.toast b{font-size:.7rem}.toast p{font-size:.62rem;color:var(--muted);margin:3px 0 0}@keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}

.dragging{opacity:.35}.drop-target{outline:2px dashed var(--primary);outline-offset:4px}.dashboard-editing [draggable="true"]{cursor:grab}.dashboard-editing [draggable="true"]:before{content:"⋮⋮";position:absolute;right:8px;top:8px;color:var(--primary);font-size:.75rem;z-index:2}.dashboard-editing .summary-card,.dashboard-editing .panel{position:relative;outline:1px dashed rgba(var(--primary-rgb),.45)}

@media(max-width:1400px){
  .summary-grid{grid-template-columns:repeat(3,1fr)}
  .filter-grid{grid-template-columns:repeat(3,1fr)}
  .metric-cards{grid-template-columns:repeat(3,1fr)}
  .station-admin-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1100px){
  .brand-subtitle,.profile-text,.connection-pill{display:none}
  .span-8,.span-4,.span-7,.span-5{grid-column:span 12}
  .map-layout{grid-template-columns:1fr}.map-detail{min-height:240px}.mock-map{height:520px}
  .station-detail-hero,.trend-panel{grid-template-columns:1fr}.camera-grid{grid-template-columns:1fr}
}
@media(max-width:820px){
  :root{--sidebar-width:250px}
  .sidebar{transform:translateX(-100%)}body.mobile-menu-open .sidebar{transform:translateX(0)}
  .main-content{margin-left:0;padding-left:13px;padding-right:13px}
  .topbar{padding-right:10px}.header-button span{display:none}
  .summary-grid{grid-template-columns:1fr 1fr}
  .page-header{align-items:flex-start;flex-direction:column}.page-actions{width:100%}
  .filter-grid,.lookup-grid,.synthesis-grid{grid-template-columns:1fr 1fr}
  .map-toolbar{flex-wrap:wrap}.search-box{min-width:100%}
  .settings-layout{grid-template-columns:1fr}.settings-nav{border-right:0;border-bottom:1px solid var(--border);display:flex;flex-direction:row;overflow:auto}.settings-nav button{min-width:max-content}
}
@media(max-width:560px){
  .brand-name{font-size:.75rem}.topbar-right .icon-button:nth-of-type(2){display:none}
  .summary-grid,.filter-grid,.lookup-grid,.synthesis-grid,.setting-grid,.station-admin-grid,.metric-cards,.alert-summary{grid-template-columns:1fr}
  .summary-card{min-height:92px}.dashboard-grid{display:block}.panel{margin-bottom:14px}
  .map-legend{flex-direction:column;gap:6px}.map-marker b{display:none}
  .station-info-meta{grid-template-columns:1fr}.camera-screen{height:220px}
  .form-grid{grid-template-columns:1fr}.form-field.full{grid-column:auto}
  .profile{display:none}
}


/* Camera, user, permission and data-source management */
.notice-box{background:rgba(var(--primary-rgb),.07);border:1px solid rgba(var(--primary-rgb),.20);border-radius:12px;padding:12px 14px;margin-bottom:14px;font-size:.7rem;color:var(--muted);line-height:1.55}.notice-box b{color:var(--text)}.notice-box code{color:var(--primary)}
.camera-toolbar,.user-filter-row{display:flex;align-items:center;gap:10px;margin-bottom:14px}.camera-toolbar .search-box,.user-filter-row .search-box{min-width:300px}.camera-toolbar select,.user-filter-row select{height:38px;border:1px solid var(--border);border-radius:10px;background:var(--surface);padding:0 32px 0 10px;font-size:.72rem}.camera-toolbar .status-chip,.user-filter-row .status-chip{margin-left:auto}
.camera-info-stack{align-items:flex-start;gap:12px}.camera-info-stack>div:first-child{min-width:0}.camera-actions{display:flex;gap:7px;flex-wrap:wrap;width:100%}.camera-actions button{height:34px;padding:0 11px;font-size:.65rem}.danger-button{border:0;border-radius:10px;height:40px;padding:0 15px;background:var(--danger);color:white;font-weight:700;font-size:.72rem}.danger-button:hover{filter:brightness(.94)}
.no-record-badge{position:absolute;left:12px;bottom:11px;background:rgba(0,0,0,.42);padding:5px 8px;border-radius:7px;font-size:.56rem}.camera-grid.single-column{grid-template-columns:1fr}.camera-grid.single-column .camera-card{display:grid;grid-template-columns:minmax(320px,1fr) minmax(260px,.65fr)}.camera-grid.single-column .camera-screen{height:310px}.span-all{grid-column:1/-1}
.camera-player{width:100%;min-height:320px;max-height:60vh;background:#071015;border-radius:12px}.rtsp-help{min-height:300px;border:1px dashed var(--border);border-radius:12px;background:var(--surface-2);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:25px}.rtsp-help>div{font-size:3rem;color:var(--primary)}.rtsp-help b{font-size:.85rem}.rtsp-help p{font-size:.68rem;color:var(--muted);max-width:420px}.stream-details{display:grid;gap:9px;margin-top:13px}.stream-details>div{background:var(--surface-2);border-radius:9px;padding:10px}.stream-details small{display:block;color:var(--muted);font-size:.58rem}.stream-details b,.stream-details code{font-size:.68rem;word-break:break-all}.anchor-button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.field-note{font-size:.58rem;color:var(--muted);line-height:1.4}.row-actions{display:flex;gap:4px}.row-actions .table-action{width:30px;height:30px;border-radius:8px}.row-actions .table-action:hover{background:var(--surface-3)}.station-permission-text{max-width:290px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.permission-toolbar{padding:9px 10px;background:rgba(var(--primary-rgb),.07);border-radius:9px;margin-bottom:8px}.permission-toolbar label{margin:0!important;border:0!important;padding:0!important}.station-checkboxes label{align-items:center}.confirm-box{background:var(--surface-2);border-radius:12px;padding:15px}.confirm-box b{font-size:.82rem}.confirm-box p{font-size:.68rem;color:var(--muted);line-height:1.5}
.source-mode-selector{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}.source-mode{border:1px solid var(--border);border-radius:12px;padding:14px;display:flex;align-items:center;gap:12px;cursor:pointer;background:var(--surface)}.source-mode.active{border-color:var(--primary);box-shadow:0 0 0 3px rgba(var(--primary-rgb),.10)}.source-mode>input{display:none}.source-mode>span{width:40px;height:40px;border-radius:11px;background:rgba(var(--primary-rgb),.09);color:var(--primary);display:grid;place-items:center;font-size:1.1rem}.source-mode b{display:block;font-size:.76rem}.source-mode small{display:block;font-size:.6rem;color:var(--muted);margin-top:3px}.data-source-panel{display:none;border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:13px}.data-source-panel.active{display:block}.inline-buttons{display:flex;gap:7px;margin-top:10px}.inline-buttons button{height:34px}.connection-result{border:1px dashed var(--border);border-radius:12px;padding:13px;font-size:.68rem;color:var(--muted);min-height:47px}.connection-result.ok{border-color:var(--success);background:#e8f5ee;color:var(--success)}.connection-result.fail{border-color:var(--warning);background:#fff5e7;color:#a86600}.connection-result.loading{border-color:var(--info);color:var(--info)}.connection-result ul{margin:9px 0 0;padding-left:20px;max-height:170px;overflow:auto}.connection-result li{margin:4px 0}.ftp-grid{grid-template-columns:1fr 180px}
@media(max-width:820px){.camera-toolbar,.user-filter-row{flex-wrap:wrap}.camera-toolbar .search-box,.user-filter-row .search-box{min-width:100%}.camera-toolbar .status-chip,.user-filter-row .status-chip{margin-left:0}.source-mode-selector{grid-template-columns:1fr}.ftp-grid{grid-template-columns:1fr}.camera-grid.single-column .camera-card{display:block}}

.profile{cursor:pointer}.current-session-card{background:var(--surface-2);border-radius:12px;padding:14px;margin-bottom:12px}.current-session-card b{font-size:.85rem}.current-session-card p{font-size:.65rem;color:var(--muted);margin:5px 0 0}.session-user{height:auto;min-height:42px;padding:9px;text-align:left}

/* ECO CELL V3 - HLS/WebRTC gateway and station-specific sources */
.gateway-panel{display:grid;grid-template-columns:minmax(280px,1fr) minmax(260px,.75fr) auto;align-items:center;gap:14px;background:linear-gradient(135deg,rgba(var(--primary-rgb),.10),rgba(34,160,107,.08));border:1px solid rgba(var(--primary-rgb),.24);border-radius:var(--radius);padding:14px 16px;margin-bottom:16px;box-shadow:var(--shadow-soft)}
.gateway-panel-main{display:flex;align-items:center;gap:12px}.gateway-panel-main h3{font-size:.86rem;margin:0}.gateway-panel-main p{font-size:.64rem;color:var(--muted);margin:4px 0 0;line-height:1.45}.gateway-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--primary);color:white;box-shadow:0 6px 16px rgba(var(--primary-rgb),.24)}
.gateway-actions{display:flex;justify-content:flex-end;gap:7px;flex-wrap:wrap}.gateway-actions button{height:36px;padding:0 11px;font-size:.65rem}
.gateway-status{border:1px dashed var(--border);border-radius:10px;padding:9px 11px;min-height:42px;display:flex;flex-direction:column;justify-content:center}.gateway-status b{font-size:.65rem}.gateway-status small{font-size:.56rem;color:var(--muted);margin-top:4px}.gateway-status.ok{border-color:var(--success);background:#e7f5ee;color:var(--success)}.gateway-status.fail{border-color:var(--danger);background:#fdebed;color:var(--danger)}.gateway-status.warning{border-color:var(--warning);background:#fff3e2;color:#a86600}.gateway-status.loading{border-color:var(--info);color:var(--info)}
.camera-path{display:block;width:max-content;max-width:100%;margin-top:6px;padding:3px 6px;border-radius:6px;background:var(--surface-3);color:var(--primary);font-size:.56rem;overflow:hidden;text-overflow:ellipsis}
.camera-player-shell{height:min(62vh,520px);min-height:310px;border-radius:12px;overflow:hidden;background:#071015;border:1px solid var(--border)}.camera-gateway-frame{width:100%;height:100%;border:0;background:#071015}.stream-switch{display:flex;gap:8px;margin-top:11px}.stream-switch button{height:34px}.gateway-help{margin-top:11px;padding:10px 12px;border-radius:9px;background:rgba(var(--primary-rgb),.08);color:var(--muted);font-size:.62rem;line-height:1.45}
.station-source-box{border-top:1px solid var(--border);padding-top:12px}.compact-selector{margin:2px 0 0}.compact-selector .source-mode{padding:10px}.station-source-panel{display:none;border:1px solid var(--border);border-radius:11px;background:var(--surface-2);padding:12px}.station-source-panel.active{display:flex}.nested-grid{width:100%;grid-template-columns:1fr 140px}.station-admin-meta b{max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.connection-result.neutral{background:var(--surface-2)}.connection-result small{display:block;margin-top:6px;line-height:1.45}
#gatewaySettingsGroup .setting-card button{margin-top:4px}
@media(max-width:1100px){.gateway-panel{grid-template-columns:1fr}.gateway-actions{justify-content:flex-start}}
@media(max-width:700px){.nested-grid{grid-template-columns:1fr}.camera-player-shell{min-height:240px;height:52vh}.gateway-actions button{flex:1}.gateway-panel{padding:12px}.stream-switch{flex-direction:column}.stream-switch button{width:100%}}

.public-url-note{padding:10px 12px;border-radius:10px;background:rgba(var(--primary-rgb),.08);color:var(--primary);font-size:.68rem}

/* ECO CELL V4 - login and shared synchronization */
body.auth-locked{overflow:hidden;background:#071820}
body.auth-locked .app{display:none}
body:not(.auth-locked) .login-screen{display:none}
.login-screen{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:28px;background:radial-gradient(circle at 18% 12%,rgba(34,160,107,.24),transparent 35%),radial-gradient(circle at 85% 85%,rgba(15,111,143,.34),transparent 42%),linear-gradient(135deg,#06151c,#0d2c38 55%,#103c45)}
.login-shell{width:min(1020px,100%);min-height:600px;display:grid;grid-template-columns:1.15fr .85fr;border:1px solid rgba(255,255,255,.16);border-radius:28px;overflow:hidden;background:rgba(255,255,255,.08);box-shadow:0 30px 90px rgba(0,0,0,.34);backdrop-filter:blur(18px)}
.login-brand-panel{padding:54px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;background:linear-gradient(150deg,rgba(7,42,52,.72),rgba(15,111,143,.26))}
.login-brand-mark,.login-card-logo{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;font-weight:900;letter-spacing:.08em;background:linear-gradient(135deg,#0f8aad,#32b77c);box-shadow:0 14px 35px rgba(0,0,0,.22)}
.login-brand-image{display:block;width:min(390px,88%);height:auto;object-fit:contain;margin:0 0 14px;filter:drop-shadow(0 18px 42px rgba(0,0,0,.42))}.login-kicker{display:none}.login-brand-panel h1{font-size:2.55rem;line-height:1.08;margin:0;max-width:520px}.login-brand-panel>div>p:last-child{max-width:500px;color:rgba(255,255,255,.72);line-height:1.7;font-size:.86rem}
.login-feature-list{display:grid;gap:12px;font-size:.76rem;color:rgba(255,255,255,.82)}
.login-card{margin:28px;background:var(--surface);border-radius:22px;padding:42px;align-self:center;box-shadow:0 18px 50px rgba(0,0,0,.22)}
.login-card-logo{display:block;width:190px;max-width:76%;height:auto;object-fit:contain;background:transparent;box-shadow:none;border-radius:0;color:transparent;margin:0 auto 24px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.22))}.login-card h2{font-size:1.45rem;margin:0 0 8px}.login-card>p{font-size:.74rem;color:var(--muted);margin:0 0 26px}.login-card label{display:block;margin-bottom:16px}.login-card label>span{display:block;font-size:.67rem;font-weight:800;margin-bottom:7px}.login-card input{width:100%;height:46px;border:1px solid var(--border);border-radius:11px;background:var(--surface-2);padding:0 13px;outline:0;font-size:.78rem}.login-card input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(var(--primary-rgb),.11)}
.password-field{position:relative}.password-field input{padding-right:48px}.password-field button{position:absolute;right:5px;top:5px;width:36px;height:36px;border:0;border-radius:8px;background:transparent;color:var(--muted)}.password-field button:hover{background:var(--surface-3)}
.login-error{min-height:20px;color:var(--danger);font-size:.66rem;margin:-4px 0 9px}.login-submit{width:100%;height:46px;border:0;border-radius:11px;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;font-weight:800;box-shadow:0 10px 24px rgba(var(--primary-rgb),.25)}.login-submit:disabled{filter:grayscale(.3)}.login-card>small{display:block;text-align:center;color:var(--muted);font-size:.58rem;margin-top:16px}
.profile{border:0;background:transparent;text-align:left;padding:0}.profile:hover{background:var(--surface-2);border-radius:10px}
.map-markers-layer{position:absolute;inset:0;pointer-events:none}.map-markers-layer .map-marker{pointer-events:auto}
.sync-indicator{font-size:.62rem;color:var(--muted)}
@media(max-width:820px){.login-shell{grid-template-columns:1fr;min-height:auto;max-width:480px}.login-brand-panel{display:none}.login-card{margin:14px;padding:32px 26px}.login-screen{padding:14px}}

/* ECO CELL V5 - real map, account menu and notification delivery */
.profile-wrap{position:relative}.profile{display:flex;align-items:center;gap:9px;padding:5px 8px}.profile-caret{font-size:.65rem;color:var(--muted);transition:.2s}.profile[aria-expanded="true"] .profile-caret{transform:rotate(180deg)}
.profile-menu{position:absolute;right:0;top:calc(100% + 10px);z-index:120;width:235px;padding:8px;background:var(--surface);border:1px solid var(--border);border-radius:13px;box-shadow:0 18px 48px rgba(6,32,42,.22);display:none}.profile-menu.open{display:block}.profile-menu-head{padding:10px 11px 12px;border-bottom:1px solid var(--border);margin-bottom:6px}.profile-menu-head b{display:block;font-size:.76rem}.profile-menu-head small{display:block;color:var(--muted);font-size:.61rem;margin-top:3px}.profile-menu button{width:100%;height:38px;border:0;background:transparent;border-radius:9px;text-align:left;padding:0 11px;color:var(--text);font-size:.68rem}.profile-menu button:hover{background:var(--surface-2)}.profile-menu .profile-logout{color:var(--danger)}
.real-map-shell{position:relative;min-height:620px;border-radius:0 0 var(--radius) var(--radius);overflow:hidden;background:var(--surface-2)}.real-map{height:620px;width:100%;z-index:1}.real-map-legend{position:absolute;z-index:500;left:14px;bottom:14px;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border:1px solid rgba(20,50,60,.14);border-radius:10px;padding:8px 10px;box-shadow:0 8px 25px rgba(0,0,0,.16)}body.dark .real-map-legend{background:rgba(18,31,37,.94)}
.ecoview-map-marker{background:transparent;border:0}.ecoview-map-pin{width:28px;height:28px;border-radius:50% 50% 50% 8px;transform:rotate(-45deg);display:grid;place-items:center;border:3px solid #fff;box-shadow:0 4px 13px rgba(0,0,0,.28)}.ecoview-map-pin>span{transform:rotate(45deg);color:#fff;font-size:.56rem;font-weight:900}.ecoview-map-pin.online{background:#22a06b}.ecoview-map-pin.offline{background:#7f8b91}.ecoview-map-pin.warning{background:#d96a24}.leaflet-tooltip.ecoview-tooltip{border:0;border-radius:8px;padding:7px 9px;box-shadow:0 5px 18px rgba(0,0,0,.2);font-size:11px;font-weight:700}
.coordinate-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.coordinate-note{grid-column:1/-1;padding:9px 10px;border-radius:9px;background:rgba(var(--primary-rgb),.07);font-size:.62rem;color:var(--muted)}.coordinate-actions{display:flex;gap:7px;margin-top:8px}.coordinate-actions button{height:34px}.station-coordinate{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.62rem;color:var(--primary)}
.notification-config-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.notification-channel{border:1px solid var(--border);border-radius:12px;padding:14px;background:var(--surface-2)}.notification-channel h4{margin:0 0 4px;font-size:.78rem}.notification-channel>p{font-size:.61rem;color:var(--muted);line-height:1.45;margin:0 0 12px}.notification-channel .form-field{margin-bottom:9px}.notification-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.notification-test-result{margin-top:12px}.channel-result-list{display:grid;gap:6px;margin-top:8px}.channel-result-list span{display:block;padding:7px 9px;border-radius:8px;background:var(--surface-3);font-size:.62rem}.alert-delivery-badge{display:inline-flex;align-items:center;gap:5px;margin-left:8px;font-size:.58rem;color:var(--muted)}
@media(max-width:820px){.real-map,.real-map-shell{height:500px;min-height:500px}.notification-config-grid,.coordinate-grid{grid-template-columns:1fr}.profile-menu{right:-4px;width:220px}}

/* ECO CELL V7 - TXT collection, history charts and legal reports */
.path-picker-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center}.path-picker-row input{min-width:0;cursor:pointer}.path-picker-row button{height:40px;white-space:nowrap}.input-with-unit{display:flex;align-items:stretch}.input-with-unit input{border-radius:10px 0 0 10px}.input-with-unit span{display:flex;align-items:center;padding:0 12px;border:1px solid var(--border);border-left:0;border-radius:0 10px 10px 0;background:var(--surface-2);font-size:.65rem;color:var(--muted);font-weight:700}
.legal-basis-note{margin:0 0 14px;padding:12px 14px;border:1px solid rgba(var(--primary-rgb),.22);border-radius:12px;background:rgba(var(--primary-rgb),.07);font-size:.68rem;line-height:1.55;color:var(--muted)}.legal-basis-note b{color:var(--text)}.legal-report-title{display:flex;flex-direction:column;gap:5px}.legal-report-title b{font-size:.82rem}.legal-report-title span{font-size:.64rem;color:var(--muted)}
.report-outline-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}.report-outline-grid article{border:1px solid var(--border);border-radius:13px;background:var(--surface);padding:16px;box-shadow:var(--shadow-soft)}.report-outline-grid h3{margin:0 0 9px;font-size:.8rem}.report-outline-grid b{display:block;font-size:.72rem;line-height:1.5;margin-bottom:8px}.report-outline-grid p{margin:6px 0;font-size:.66rem;line-height:1.55;color:var(--muted)}
.actual-chart{width:100%;min-height:230px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2)}.actual-chart .chart-range{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:9px;font-size:.62rem;color:var(--muted)}.actual-chart svg{display:block;width:100%;height:210px;overflow:visible}.actual-chart polyline{fill:none;stroke:var(--primary);stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}.full-meta{grid-column:1/-1}.station-admin-meta .full-meta b{white-space:normal;max-width:none;word-break:break-word}
@media(max-width:820px){.path-picker-row{grid-template-columns:1fr 1fr}.path-picker-row input{grid-column:1/-1}.report-outline-grid{grid-template-columns:1fr}.actual-chart svg{height:180px}}
@media(max-width:520px){.path-picker-row{grid-template-columns:1fr}.path-picker-row input{grid-column:auto}.path-picker-row button{width:100%}}

/* ECO CELL V8 - factory grouping, notification list and station recipients */
.notification-wrap{position:relative}.notification-panel{position:absolute;right:-8px;top:calc(100% + 12px);width:min(390px,calc(100vw - 24px));max-height:520px;display:none;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 18px 48px rgba(7,24,32,.24);overflow:hidden;z-index:650}.notification-panel.open{display:flex}.notification-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 15px;border-bottom:1px solid var(--border)}.notification-panel-head b{display:block;font-size:.82rem}.notification-panel-head small{display:block;margin-top:3px;color:var(--muted);font-size:.6rem}.notification-panel-head button,.notification-view-all{border:0;background:transparent;color:var(--primary);font-weight:750;font-size:.62rem;cursor:pointer}.notification-list{overflow:auto;max-height:390px}.notification-item{width:100%;border:0;border-bottom:1px solid var(--border);background:transparent;padding:12px 14px;display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;text-align:left;cursor:pointer;color:var(--text)}.notification-item:hover{background:var(--surface-2)}.notification-item.unread{background:rgba(var(--primary-rgb),.055)}.notification-item-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(var(--primary-rgb),.1);color:var(--primary);font-weight:900}.notification-item.warning .notification-item-icon{background:#fff2df;color:#b76500}.notification-item.danger .notification-item-icon{background:#fde8eb;color:var(--danger)}.notification-item b{display:block;font-size:.68rem;line-height:1.35}.notification-item p{margin:3px 0;color:var(--muted);font-size:.61rem;line-height:1.4}.notification-item small{font-size:.55rem;color:var(--muted)}.notification-empty{padding:28px 18px;text-align:center;color:var(--muted);font-size:.65rem}.notification-view-all{padding:12px 14px;border-top:1px solid var(--border);background:var(--surface-2)}
.station-admin-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.station-admin-toolbar .search-box{min-width:320px;flex:1}.station-admin-toolbar select{height:38px;border:1px solid var(--border);border-radius:10px;background:var(--surface);padding:0 34px 0 11px;font-size:.7rem}.factory-admin-list{display:grid;gap:14px}.factory-group{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-soft);overflow:hidden}.factory-summary{list-style:none;display:flex;align-items:center;gap:12px;padding:15px 16px;cursor:pointer;background:linear-gradient(135deg,rgba(var(--primary-rgb),.075),transparent)}.factory-summary::-webkit-details-marker{display:none}.factory-chevron{width:28px;height:28px;border-radius:8px;background:rgba(var(--primary-rgb),.12);color:var(--primary);display:grid;place-items:center;font-weight:900;transition:.18s}.factory-group[open] .factory-chevron{transform:rotate(90deg)}.factory-main{min-width:0;flex:1}.factory-main h3{margin:0;font-size:.86rem}.factory-main p{margin:4px 0 0;color:var(--muted);font-size:.62rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.factory-summary-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.factory-summary-actions button{height:34px;padding:0 10px;font-size:.62rem}.factory-stations{padding:0 14px 14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.factory-stations .station-admin-card{box-shadow:none}.factory-empty{grid-column:1/-1;border:1px dashed var(--border);border-radius:12px;padding:22px;text-align:center;color:var(--muted);font-size:.65rem}.factory-empty button{margin-top:10px}.station-alert-summary{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.station-alert-summary span{display:inline-flex;align-items:center;padding:4px 7px;border-radius:7px;background:var(--surface-3);font-size:.55rem;color:var(--muted)}.alert-recipient-box{border:1px solid rgba(var(--primary-rgb),.23);background:rgba(var(--primary-rgb),.055);border-radius:12px;padding:13px}.alert-recipient-box>label:first-child{font-size:.72rem}.alert-type-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}.alert-type-grid label{border:1px solid var(--border);border-radius:9px;padding:9px;background:var(--surface);font-size:.62rem;display:flex;align-items:center;gap:7px}.factory-form-note{grid-column:1/-1;padding:10px 12px;border-radius:10px;background:rgba(var(--primary-rgb),.07);font-size:.62rem;color:var(--muted);line-height:1.5}.settings-recipient-note{padding:11px 13px;border-radius:10px;background:rgba(var(--primary-rgb),.08);border:1px solid rgba(var(--primary-rgb),.18);font-size:.64rem;line-height:1.5;color:var(--muted);margin-bottom:12px}.settings-recipient-note b{color:var(--text)}
@media(max-width:1120px){.factory-stations{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.notification-panel{position:fixed;right:12px;top:66px}.station-admin-toolbar .search-box{min-width:100%}.station-admin-toolbar select{flex:1}.factory-summary{align-items:flex-start;flex-wrap:wrap}.factory-summary-actions{width:100%;padding-left:40px}.factory-stations{grid-template-columns:1fr}.alert-type-grid{grid-template-columns:1fr}}
.permission-factory{border:1px solid var(--border);border-radius:10px;padding:10px;background:var(--surface-2);display:grid;gap:7px}.permission-factory>b{font-size:.66rem;color:var(--primary)}.permission-factory>label{background:var(--surface);margin:0}.permission-factory>small{font-size:.58rem;color:var(--muted)}
.modal-dialog:has(#stationEditorForm){width:860px}.modal-dialog:has(#factoryEditorForm){width:680px}


/* ECO CELL V10.10.1 - Hai phần ngưỡng đồng màu giao diện */
.station-threshold-box{display:grid;gap:12px;border:0;border-radius:12px;padding:0;background:transparent}
.threshold-section{border:1px solid var(--border);border-radius:12px;padding:14px;background:var(--surface);box-shadow:none}
.threshold-section-high{background:var(--surface)}
.threshold-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.threshold-heading>div{display:grid;gap:4px}
#stationThresholdRows,#stationHighThresholdRows{display:grid;gap:8px}
.threshold-row{display:grid;grid-template-columns:minmax(150px,1.55fr) minmax(125px,1fr) minmax(85px,.8fr) auto 42px;gap:8px;align-items:center;padding:9px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.threshold-row input{min-width:0;background:var(--surface);color:var(--text);border-color:var(--border)}
.threshold-enabled{display:flex;align-items:center;gap:5px;white-space:nowrap}
.remove-threshold-row{padding:8px 10px;min-width:0}
@media(max-width:900px){.threshold-row{grid-template-columns:1fr 1fr}.threshold-enabled{min-height:42px}.remove-threshold-row{width:42px}.threshold-heading{flex-direction:column}}
@media(max-width:560px){.threshold-row{grid-template-columns:1fr}.remove-threshold-row{width:100%}}

/* V10.10.1 - cảnh báo ngưỡng trực tiếp tại chi tiết trạm */
.station-threshold-live-alert{display:grid;gap:5px;margin:0 0 14px;padding:13px 15px;border:1px solid rgba(220,38,38,.35);border-radius:12px;background:rgba(220,38,38,.08)}
.station-threshold-live-alert b{font-size:15px}
.station-threshold-live-alert span{line-height:1.45}
.station-threshold-live-alert small{opacity:.72}

/* ECO CELL V10.11.0 - chi muc nen va tra cuu nhanh */
.lookup-scan-status{margin-top:14px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2,rgba(255,255,255,.04));color:var(--muted);font-size:.88rem;line-height:1.5}
.lookup-scan-status.loading{border-color:rgba(35,172,255,.45);color:var(--text)}
.lookup-scan-status.success{border-color:rgba(28,190,128,.45);color:var(--text)}
.lookup-scan-status.warning{border-color:rgba(245,158,11,.45);color:var(--text)}
.lookup-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:10px;margin-top:12px}
.lookup-summary-card{padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2,rgba(255,255,255,.04));min-width:0}
.lookup-summary-card small{display:block;color:var(--muted);margin-bottom:5px}
.lookup-summary-card b{display:block;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lookup-summary-card span{display:block;margin-top:5px;color:var(--muted);font-size:.76rem;line-height:1.4}
.lookup-chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:14px}
.lookup-chart-card{border:1px solid var(--border);border-radius:14px;padding:14px;background:var(--surface-2,rgba(255,255,255,.03));min-width:0}
.lookup-chart-card h3{margin:0 0 10px;font-size:.95rem}
.lookup-source-note{display:block;color:var(--muted);font-size:.75rem;margin-top:4px}
@media(max-width:720px){.lookup-chart-grid{grid-template-columns:1fr}.lookup-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ECO CELL V10.12.0 - trend 24h tu dong va chon tat ca */
#stationTrend24Status{max-width:760px;line-height:1.45}
#detailChartParameter{max-width:min(360px,52vw)}
#stationActualChart>.lookup-chart-grid{margin-top:4px}
#stationActualChart .lookup-chart-card .actual-chart{min-height:210px}
#stationActualChart .lookup-chart-card .actual-chart svg{height:175px}
@media(max-width:720px){#detailChartParameter{max-width:100%;width:100%}.trend-chart-panel .panel-header{align-items:stretch}.trend-chart-panel .panel-header>div{min-width:0}}

/* ECO CELL V10.13.0 - tra cuu dung thu muc ngay va tat ca thong so */
#lookupParameter{min-width:190px}
#lookupSummary:empty{display:none}


/* ECO CELL V10.14.0 - report analysis and quality codes */
.report-analysis-filter{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:12px;align-items:end;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:12px}.report-analysis-filter label{display:grid;gap:7px}.report-analysis-filter label span{font-size:12px;font-weight:700;color:var(--muted)}.report-analysis-filter select,.report-analysis-filter input{width:100%;min-height:42px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2);color:var(--text);padding:8px 10px}.report-analysis-filter button{min-height:42px}.report-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:12px;margin:14px 0}.report-kpi-grid article{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px;display:grid;gap:6px}.report-kpi-grid small{color:var(--muted);font-weight:700}.report-kpi-grid b{font-size:23px}.report-kpi-grid span{font-size:12px;color:var(--muted)}.quality-legend{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:14px}.quality-legend p{width:100%;margin:4px 0 0;color:var(--muted)}.quality-cell-status{display:block;margin-top:5px}.quality-cell-status .status-chip{font-size:10px;padding:2px 6px}.latest-quality-panel{display:flex;justify-content:space-between;gap:16px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 16px;margin-bottom:14px}.latest-quality-panel>div:first-child{display:grid;gap:7px}.latest-quality-panel small{color:var(--muted);font-weight:700}.latest-quality-details{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.status-chip.danger{background:rgba(217,45,32,.14);color:#d92d20;border-color:rgba(217,45,32,.3)}
@media(max-width:1100px){.report-analysis-filter{grid-template-columns:repeat(2,minmax(160px,1fr))}.report-kpi-grid{grid-template-columns:repeat(2,minmax(160px,1fr))}}@media(max-width:650px){.report-analysis-filter,.report-kpi-grid{grid-template-columns:1fr}.latest-quality-panel{align-items:flex-start;flex-direction:column}.latest-quality-details{justify-content:flex-start}}

/* ECO CELL V10.15.0 - tra cứu và trend theo trạng thái từng thông số */
.lookup-grid-v115{grid-template-columns:repeat(4,minmax(170px,1fr))}
.lookup-table-wrap{max-height:620px;overflow:auto;border-radius:12px}
.lookup-result-table{min-width:1180px;border-collapse:separate;border-spacing:0}
.lookup-result-table thead th{position:sticky;top:0;z-index:3;background:var(--surface);white-space:nowrap;text-align:center}
.lookup-result-table tbody td{text-align:center;vertical-align:middle;white-space:nowrap}
.lookup-result-table tbody td:nth-child(2),.lookup-result-table tbody td:nth-child(3){font-variant-numeric:tabular-nums}
.lookup-result-table .quality-column-head{min-width:82px;background:color-mix(in srgb,var(--surface) 88%,var(--primary) 12%)}
.quality-code-v115{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:38px;padding:5px 8px;border-radius:7px;border:1px solid currentColor;font-weight:800;font-size:12px;line-height:1;background:transparent}
.quality-code-v115 small{font-size:10px;font-weight:700;white-space:nowrap}
.quality-00{color:#16a34a!important}.quality-01{color:#7c3aed!important}.quality-02{color:#dc2626!important}.quality-none{color:#64748b!important}
.quality-code-v115.quality-00{background:rgba(22,163,74,.10)}.quality-code-v115.quality-01{background:rgba(124,58,237,.12)}.quality-code-v115.quality-02{background:rgba(220,38,38,.10)}.quality-code-v115.quality-none{background:rgba(100,116,139,.10)}
.quality-value-v115{position:relative;min-width:92px;font-variant-numeric:tabular-nums}.quality-value-v115 b{font-size:13px}.quality-value-v115:before{content:"";position:absolute;left:0;top:15%;bottom:15%;width:3px;border-radius:3px;background:#64748b}.quality-value-00:before{background:#16a34a}.quality-value-01:before{background:#7c3aed}.quality-value-02:before{background:#dc2626}
.quality-status-cell-v115{min-width:68px}
.quality-mini-summary{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.quality-mini-summary i{font-style:normal;font-size:11px;font-weight:800}
.trend-quality-legend-v115{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:4px 0 8px;font-size:11px;font-weight:700}
.actual-chart-v115 svg{height:235px}.trend-segment-v115{stroke-width:2.3;vector-effect:non-scaling-stroke;stroke-linecap:round}.quality-stroke-00{stroke:#16a34a}.quality-stroke-01{stroke:#7c3aed}.quality-stroke-02{stroke:#dc2626}.quality-stroke-none{stroke:#64748b}.trend-point-v115{stroke:var(--surface);stroke-width:1.2;vector-effect:non-scaling-stroke}.quality-fill-00{fill:#16a34a}.quality-fill-01{fill:#7c3aed}.quality-fill-02{fill:#dc2626}.quality-fill-none{fill:#64748b}
@media(max-width:1100px){.lookup-grid-v115{grid-template-columns:repeat(2,minmax(160px,1fr))}}
@media(max-width:650px){.lookup-grid-v115{grid-template-columns:1fr}.lookup-table-wrap{max-height:520px}.quality-code-v115 small{display:none}}
.status-chip.calibration{background:rgba(124,58,237,.13);color:#7c3aed;border-color:rgba(124,58,237,.32)}

/* ECO CELL V10.19.0 - thư mục camera theo nhà máy */
.camera-folder-list{display:grid;gap:14px}
.camera-factory-folder{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-soft);overflow:hidden}
.camera-factory-summary{list-style:none;display:flex;align-items:center;gap:12px;padding:15px 16px;cursor:pointer;background:linear-gradient(135deg,rgba(var(--primary-rgb),.09),transparent);user-select:none}
.camera-factory-summary::-webkit-details-marker{display:none}
.camera-folder-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:rgba(var(--primary-rgb),.13);color:var(--primary);font-size:1.15rem;flex:0 0 auto}
.camera-folder-title{min-width:0;flex:1}.camera-folder-title h3{margin:0;font-size:.88rem}.camera-folder-title p{margin:4px 0 0;color:var(--muted);font-size:.63rem}
.camera-folder-count{min-width:32px;height:28px;padding:0 9px;border-radius:999px;display:grid;place-items:center;background:var(--surface-3);font-size:.64rem;font-weight:800;color:var(--primary)}
.camera-folder-chevron{font-size:1.4rem;line-height:1;color:var(--muted);transition:transform .18s}
.camera-factory-folder[open] .camera-folder-chevron{transform:rotate(90deg)}
.camera-folder-body{padding:0 14px 14px}.camera-folder-body>.camera-grid{padding-top:2px}
.camera-path{display:block;max-width:520px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:7px;color:var(--muted);font-size:.56rem}
.camera-factory-summary .add-camera-to-factory{flex:0 0 auto}
@media(max-width:760px){.camera-factory-summary{align-items:flex-start;flex-wrap:wrap}.camera-folder-title{min-width:180px}.camera-factory-summary .add-camera-to-factory{order:5;width:100%;margin-left:54px}.camera-folder-chevron{margin-left:auto}.camera-folder-body{padding:0 10px 10px}}


/* ECO CELL V10.36.23 - HLS cùng tên miền, không quay tải vô hạn */
.camera-card-autoplay{overflow:hidden}
.camera-inline-player-shell{height:285px;position:relative;overflow:hidden;background:#061015;border-bottom:1px solid var(--border)}
.camera-inline-webrtc{display:block;width:100%;height:100%;border:0;background:#061015}
.camera-auto-state{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;color:#e8f2f5;background:linear-gradient(145deg,rgba(25,50,61,.96),rgba(5,15,20,.96));transition:opacity .2s}
.camera-auto-state b{font-size:.72rem}.camera-auto-state small{font-size:.58rem;opacity:.76}
.camera-auto-spinner{font-size:1.65rem;animation:cameraWebRtcSpin 1.1s linear infinite}
.camera-inline-player-shell.is-loaded .camera-auto-state{opacity:0;pointer-events:none}
.camera-stream-label{position:absolute;z-index:3;left:10px;top:10px;max-width:65%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.56rem;font-weight:800;background:rgba(0,0,0,.48);color:white;padding:5px 8px;border-radius:7px}
.camera-live-badge{position:absolute;z-index:3;right:10px;top:10px;font-size:.54rem;font-style:normal;font-weight:800;background:var(--danger);color:white;padding:5px 7px;border-radius:6px}
.camera-card-autoplay.offline .camera-live-badge{background:#67737b}.camera-card-autoplay.offline .camera-inline-webrtc{filter:grayscale(.8);opacity:.72}
.camera-inline-player-shell.has-stream-error .camera-auto-spinner{animation:none;color:var(--danger)}.camera-inline-player-shell.has-stream-error .camera-auto-state{background:linear-gradient(145deg,rgba(73,25,31,.97),rgba(24,8,12,.97))}
.camera-folder-starting .camera-folder-chevron{animation:cameraWebRtcPulse .8s ease-in-out infinite alternate}
.webrtc-only-card select:disabled{opacity:1;color:var(--primary);font-weight:800}
@keyframes cameraWebRtcSpin{to{transform:rotate(360deg)}}
@keyframes cameraWebRtcPulse{to{opacity:.35}}
@media(max-width:760px){.camera-inline-player-shell{height:235px}}

/* ECO CELL V10.21.0 - nhãn và trạng thái phân quyền */
.role-access-badge{max-width:520px;margin-left:auto;margin-right:12px;padding:7px 12px;border-radius:999px;font-size:.78rem;font-weight:750;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:rgba(15,111,143,.1);color:var(--primary);border:1px solid rgba(15,111,143,.22)}
.role-access-badge.operator{background:rgba(117,75,190,.11);color:#6741a5;border-color:rgba(117,75,190,.25)}
.role-access-badge.viewer{background:rgba(76,93,108,.1);color:var(--muted);border-color:rgba(76,93,108,.22)}
body.dark .role-access-badge.operator{color:#cbb7ff}
body.role-readonly .camera-actions:empty{display:none}
body.role-readonly [data-admin-only]{display:none!important}
@media(max-width:1100px){.role-access-badge{display:none}}

/* V10.21 local trend nhanh */
.trend-select-group-v10210{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.trend-select-group-v10210 .header-select{min-width:130px}.role-access-badge{white-space:nowrap}

/* ECO CELL V10.22.3 - bảng tra cứu, tooltip và zoom trend */
.lookup-scan-status.compact-v10223{max-height:none;overflow:hidden;white-space:normal;line-height:1.45;padding:11px 14px}
.actual-chart-v10223{position:relative;overflow:visible}
.trend-toolbar-v10223{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:4px 0 8px}
.trend-toolbar-v10223 .trend-quality-legend-v115{margin:0;flex:1}
.trend-zoom-controls-v10223{display:flex;align-items:center;gap:5px;flex:0 0 auto}
.trend-zoom-controls-v10223 button{min-width:34px;height:30px;padding:0 9px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--text);font-weight:800;cursor:pointer}
.trend-zoom-controls-v10223 button:hover{border-color:var(--primary);color:var(--primary)}
.trend-zoom-controls-v10223 [data-trend-zoom="reset"]{min-width:62px;font-size:11px}
.trend-svg-scroll-v10223{width:100%;overflow-x:auto;overflow-y:hidden;border-radius:10px;scrollbar-width:thin;overscroll-behavior-x:contain}
.trend-svg-scroll-v10223 svg{display:block;height:245px;transition:width .16s ease,min-width .16s ease;cursor:crosshair}
.trend-hover-point-v10223{cursor:pointer;outline:none;transition:r .1s ease,stroke-width .1s ease}
.trend-hover-point-v10223:hover,.trend-hover-point-v10223:focus{r:6;stroke-width:2.4}
.trend-tooltip-v10223{position:absolute;z-index:20;min-width:190px;max-width:300px;display:grid;gap:4px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:color-mix(in srgb,var(--surface) 96%,transparent);box-shadow:0 12px 30px rgba(0,0,0,.23);pointer-events:none;font-size:11px;line-height:1.35;backdrop-filter:blur(6px)}
.trend-tooltip-v10223[hidden]{display:none}
.trend-tooltip-v10223 b{font-size:12px}.trend-tooltip-v10223 span,.trend-tooltip-v10223 small{color:var(--muted)}
.trend-tooltip-v10223 strong{font-size:15px}.trend-tooltip-v10223 em{font-style:normal;font-weight:800}.trend-tooltip-v10223 small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#lookup-table .lookup-table-wrap{min-height:280px}
@media(max-width:650px){.trend-toolbar-v10223{align-items:flex-start}.trend-zoom-controls-v10223{width:100%;justify-content:flex-end}.trend-svg-scroll-v10223 svg{height:220px}.trend-tooltip-v10223{max-width:230px}}


/* ECO CELL V10.22.8 - Khóa sắp xếp và bộ lọc thời gian đúng chu kỳ */
.lookup-period-field[hidden]{display:none!important}
.lookup-period-hint-v10227{margin-top:10px;padding:10px 12px;border-radius:10px;background:rgba(var(--primary-rgb),.08);color:var(--muted);font-size:.66rem;line-height:1.5}
.lookup-average-panel-v10227{padding:18px}
.lookup-average-head-v10227{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px}
.lookup-average-head-v10227 h3{margin:0;font-size:.92rem}
.lookup-average-head-v10227 p{margin:0;color:var(--muted);font-size:.66rem}
.trend-average-line-v10227{stroke:#ffd166;stroke-width:2;stroke-dasharray:8 6;vector-effect:non-scaling-stroke;opacity:.95}
.trend-average-label-v10227{fill:#ffd166;font-size:13px;font-weight:800;paint-order:stroke;stroke:rgba(0,0,0,.65);stroke-width:3px;stroke-linejoin:round}
.chart-range .average-value-v10227{color:#d79a00}
body.dark .chart-range .average-value-v10227{color:#ffd166}
@media(max-width:720px){.lookup-average-head-v10227{align-items:flex-start;flex-direction:column}}

/* ECO CELL V10.22.8 */
#summaryCards [draggable="false"],#dashboardWidgets [draggable="false"]{cursor:default;user-select:auto}
.dashboard-editing #summaryCards [draggable="true"],.dashboard-editing #dashboardWidgets [draggable="true"]{cursor:grab;user-select:none}
.dashboard-editing #summaryCards [draggable="true"]:active,.dashboard-editing #dashboardWidgets [draggable="true"]:active{cursor:grabbing}
.lookup-period-field[hidden]{display:none!important}

/* ECO CELL V10.22.9 */
#page-lookup .lookup-period-field[aria-hidden="true"]{display:none!important}
#page-lookup .lookup-period-field[aria-hidden="false"]{display:block!important}


/* ECO CELL V10.23.0 - bộ chọn chu kỳ và ngưỡng chỉ giới hạn trên */
#page-lookup .lookup-period-field{display:none!important}
#page-lookup .lookup-period-field.is-active{display:block!important}
#page-lookup .lookup-period-field.is-active[hidden]{display:block!important}
.threshold-row .threshold-max{font-weight:700}

/* ECO CELL V10.24.0 */
#page-lookup .lookup-period-field.is-active{display:flex!important;visibility:visible!important;opacity:1!important;}
#page-lookup .lookup-period-field[hidden]{display:none!important;}
.threshold-row-synced-v10240{grid-template-columns:minmax(150px,1.5fr) minmax(120px,1fr) minmax(100px,.8fr) auto auto;}
.threshold-parameter-display{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:1px solid var(--border,#d8e2e8);border-radius:8px;background:var(--surface,#fff);}
.threshold-parameter-display small{opacity:.65;font-size:11px;}
.brand-logo img{object-fit:contain;border-radius:10px;}
.login-brand-image,.login-card-logo{object-fit:contain;}

/* ECO CELL V10.25.0 - logo cắt gọn, trường thời gian ổn định, ngưỡng đồng bộ */
#lookupTimeFields.lookup-time-fields{display:contents}
#lookupTimeFields .lookup-period-field{display:none!important;min-width:0}
#lookupTimeFields[data-cycle="hour"] .lookup-period-field[data-period-field="hour"],
#lookupTimeFields[data-cycle="day"] .lookup-period-field[data-period-field="day"],
#lookupTimeFields[data-cycle="month"] .lookup-period-field[data-period-field="month"],
#lookupTimeFields[data-cycle="quarter"] .lookup-period-field[data-period-field="quarter"],
#lookupTimeFields[data-cycle="year"] .lookup-period-field[data-period-field="year"]{display:flex!important;visibility:visible!important;opacity:1!important}
#lookupTimeFields .lookup-period-field input,
#lookupTimeFields .lookup-period-field select{width:100%}
.threshold-row-synced-v10250{grid-template-columns:minmax(165px,1.5fr) minmax(130px,1fr) minmax(105px,.8fr) auto;align-items:center}
.threshold-row-synced-v10250 .threshold-unit{cursor:default;background:var(--surface-2)}
.threshold-sync-note-v10250{padding:13px 14px;border:1px dashed var(--border);border-radius:10px;background:var(--surface-2);color:var(--muted);font-size:.68rem;line-height:1.5}
#addThresholdRowV109[hidden],#addHighThresholdRowV110[hidden]{display:none!important}
.brand-logo{width:64px;height:58px;flex:0 0 64px;overflow:visible}
.brand-logo img,.login-brand-image,.login-card-logo{background:transparent!important;border:0!important;border-radius:0!important;object-fit:contain!important}
.brand-logo img{width:100%;height:100%;filter:drop-shadow(0 2px 5px rgba(0,0,0,.26))}
.login-brand-image{width:min(405px,90%);filter:drop-shadow(0 14px 30px rgba(0,0,0,.34))}
.login-card-logo{width:205px;max-width:82%;filter:drop-shadow(0 7px 14px rgba(0,0,0,.20))}
@media(max-width:760px){.brand-logo{width:56px;height:54px;flex-basis:56px}.brand-subtitle{max-width:220px}}


/* ECO CELL V10.26.0 - hiển thị đúng loại thời gian và logo sạch */
#lookupTimeFields.lookup-time-fields{display:contents!important}
#lookupTimeFields .lookup-period-field[data-period-field]{display:none!important;visibility:hidden!important;opacity:0!important}
#lookupTimeFields .lookup-period-field[data-period-field][hidden]{display:none!important}
#lookupTimeFields .lookup-period-field[data-period-field].is-active:not([hidden]){display:flex!important;visibility:visible!important;opacity:1!important}
#lookupTimeFields .lookup-quarter-control{display:grid;grid-template-columns:minmax(105px,.85fr) minmax(112px,1fr);gap:8px;width:100%}
#lookupTimeFields .lookup-quarter-control>input,#lookupTimeFields .lookup-quarter-control>select{min-width:0;width:100%}
.brand-logo{width:58px!important;height:58px!important;flex:0 0 58px!important}
.brand-logo img{width:100%!important;height:100%!important;object-fit:contain!important;image-rendering:auto!important}
.login-brand-image,.login-card-logo{image-rendering:auto!important;object-fit:contain!important}
@media(max-width:720px){#lookupTimeFields .lookup-quarter-control{grid-template-columns:1fr}}


/* ECO CELL V10.27.0 - dùng logo gốc trên nền trắng, bỏ logo trong khung đăng nhập */
.login-shell{
  background:#ffffff!important;
  border-color:rgba(15,111,143,.18)!important;
  backdrop-filter:none!important;
}
.login-brand-panel{
  color:#17212b!important;
  background:#ffffff!important;
  border-right:1px solid #e2e8ed;
}
.login-brand-image{
  width:min(430px,94%)!important;
  max-height:390px;
  margin:0 auto 18px!important;
  background:#ffffff!important;
  filter:none!important;
}
.login-brand-panel h1{color:#17212b!important}
.login-brand-panel>div>p:last-child{color:#667483!important}
.login-feature-list{color:#33404c!important}
.login-feature-list span::first-letter{color:#168b72}
.login-card-logo{display:none!important}
.login-card h2{margin-top:0!important}
@media(max-width:820px){
  .login-brand-panel{border-right:0}
}

/* ================= ECO CELL V10.29.0 - TRA CỨU 4 TAB ================= */
#page-lookup .lookup-search-shell-v10280{padding:18px;overflow:visible}
#page-lookup .lookup-common-grid-v10280{grid-template-columns:repeat(5,minmax(150px,1fr));margin-bottom:16px}
#page-lookup .lookup-cycle-hidden-v10280{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important;clip:rect(0 0 0 0)!important}
#page-lookup .lookup-mode-tabs-v10280{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:10px;margin:4px 0 14px}
#page-lookup .lookup-mode-tab-v10280{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;min-height:70px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);cursor:pointer;transition:.18s ease}
#page-lookup .lookup-mode-tab-v10280>span{grid-row:1/3;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:rgba(var(--primary-rgb),.1);color:var(--primary);font-size:1.15rem}
#page-lookup .lookup-mode-tab-v10280>b{font-size:.78rem;line-height:1.1}
#page-lookup .lookup-mode-tab-v10280>small{font-size:.6rem;color:var(--muted);line-height:1.25}
#page-lookup .lookup-mode-tab-v10280:hover{border-color:rgba(var(--primary-rgb),.55);transform:translateY(-1px)}
#page-lookup .lookup-mode-tab-v10280.active{border-color:var(--primary);background:linear-gradient(135deg,rgba(var(--primary-rgb),.14),rgba(var(--primary-rgb),.04));box-shadow:0 8px 20px rgba(var(--primary-rgb),.12)}
#page-lookup .lookup-mode-tab-v10280.active>span{background:var(--primary);color:#fff}
#page-lookup #lookupTimeFields.lookup-time-fields-v10280{display:block!important;margin:0!important}
#page-lookup #lookupTimeFields.lookup-time-fields-v10280 .lookup-period-field[data-period-field]{display:none!important;visibility:hidden!important;opacity:0!important}
#page-lookup #lookupTimeFields.lookup-time-fields-v10280 .lookup-period-field[data-period-field].is-active:not([hidden]){display:flex!important;visibility:visible!important;opacity:1!important}
#page-lookup .lookup-period-card-v10280{flex-direction:column!important;gap:12px;padding:16px;border:1px solid var(--border);border-radius:13px;background:linear-gradient(180deg,var(--surface),rgba(var(--primary-rgb),.025));min-width:0}
#page-lookup .lookup-period-card-head-v10280{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
#page-lookup .lookup-period-card-head-v10280 b{display:block;font-size:.8rem;margin-bottom:4px}
#page-lookup .lookup-period-card-head-v10280 p{margin:0;color:var(--muted);font-size:.65rem;line-height:1.45}
#page-lookup .lookup-period-controls-v10280{display:grid;grid-template-columns:repeat(2,minmax(200px,1fr));gap:12px;max-width:850px}
#page-lookup .lookup-period-controls-v10280 label{display:flex;flex-direction:column;gap:6px;min-width:0}
#page-lookup .lookup-period-controls-v10280 label>span{font-size:.66rem;color:var(--muted);font-weight:700}
#page-lookup .lookup-period-controls-v10280 input,#page-lookup .lookup-period-controls-v10280 select{width:100%;height:42px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);padding:0 11px;outline:none}
#page-lookup .lookup-period-controls-v10280 input:focus,#page-lookup .lookup-period-controls-v10280 select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(var(--primary-rgb),.1)}
#page-lookup .lookup-period-hint-v10280{margin-top:12px}
@media(max-width:1100px){#page-lookup .lookup-common-grid-v10280{grid-template-columns:repeat(3,1fr)}#page-lookup .lookup-mode-tabs-v10280{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){#page-lookup .lookup-common-grid-v10280,#page-lookup .lookup-mode-tabs-v10280,#page-lookup .lookup-period-controls-v10280{grid-template-columns:1fr}#page-lookup .lookup-mode-tab-v10280{min-height:62px}}

/* Menu Tra cứu dữ liệu V10.29.0 */
.nav-lookup-group-v10280{margin:2px 0 6px}
.nav-lookup-parent-v10280{margin-bottom:2px}
.nav-lookup-caret-v10280{margin-left:auto;font-size:.72rem;color:inherit}
.nav-lookup-submenu-v10280{padding:0 8px 2px 20px}
.nav-lookup-search-v10280{width:100%;height:38px;display:flex;align-items:center;gap:10px;border:0;border-radius:9px;padding:0 12px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.82);font:inherit;font-size:.68rem;cursor:pointer;text-align:left}
.nav-lookup-search-v10280:hover,.nav-item[data-page="lookup"].active+.nav-lookup-submenu-v10280 .nav-lookup-search-v10280{background:rgba(var(--primary-rgb),.7);color:#fff}
body.sidebar-collapsed .nav-lookup-submenu-v10280{display:none}

/* ECO CELL V10.29.0: tab tra cứu luôn nhận thao tác */
#page-lookup #lookupModeTabs{position:relative;z-index:5;pointer-events:auto!important}
#page-lookup #lookupModeTabs .lookup-mode-tab-v10280{position:relative;z-index:6;pointer-events:auto!important;touch-action:manipulation}
.nav-lookup-search-v10280{grid-template-columns:1fr!important;padding-left:38px!important}


/* ECO CELL V10.31.0: tài khoản/đăng xuất góc phải và tooltip điểm biểu đồ */
.topbar-right{margin-left:auto;justify-content:flex-end;flex-shrink:0}
.profile-wrap{margin-left:2px}
.topbar-right .profile-text{display:flex}
.header-logout-button{height:38px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 13px;border:1px solid color-mix(in srgb,var(--danger) 38%,var(--border));border-radius:10px;background:color-mix(in srgb,var(--danger) 8%,var(--surface));color:var(--danger);font-size:.72rem;font-weight:800;white-space:nowrap}
.header-logout-button:hover{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 14%,var(--surface))}
.lookup-hotfix-chart{position:relative}
.lookup-hotfix-chart-point{fill:var(--surface);stroke:var(--primary);stroke-width:2;vector-effect:non-scaling-stroke;cursor:crosshair;pointer-events:all}
.lookup-hotfix-chart-point:hover,.lookup-hotfix-chart-point.is-active{fill:var(--primary);stroke:var(--surface);stroke-width:2.5}
.lookup-hotfix-chart-tooltip{position:absolute;z-index:30;display:grid;gap:4px;min-width:190px;max-width:290px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:color-mix(in srgb,var(--surface) 97%,transparent);box-shadow:0 12px 30px rgba(0,0,0,.24);pointer-events:none;line-height:1.35;backdrop-filter:blur(6px)}
.lookup-hotfix-chart-tooltip[hidden]{display:none}
.lookup-hotfix-chart-tooltip b{font-size:.76rem}.lookup-hotfix-chart-tooltip span{font-size:.68rem;color:var(--muted)}.lookup-hotfix-chart-tooltip strong{font-size:.94rem;color:var(--text)}
@media(max-width:680px){.topbar-right .profile-text{display:none}}
@media(max-width:820px){.header-logout-button span{display:none}.header-logout-button{width:38px;padding:0}.topbar-right{gap:6px}}


/* ECO CELL V10.32.0: tài khoản nằm bên phải nhãn quyền và đăng xuất trở lại menu xổ xuống */
.topbar{display:flex;align-items:center}
.topbar-right{margin-left:auto;justify-content:flex-end;flex-shrink:1}
.role-access-badge{margin-left:8px!important;margin-right:4px!important;flex-shrink:1}
.topbar>.profile-wrap{margin-left:0;flex:0 0 auto}
.topbar>.profile-wrap .profile{padding:5px 8px}
.topbar>.profile-wrap .profile-menu{right:0}
.topbar>.profile-wrap .profile-logout{color:var(--danger);font-weight:800}
.topbar>.profile-wrap .profile-logout:hover{background:color-mix(in srgb,var(--danger) 10%,var(--surface-2))}
.header-logout-button{display:none!important}
@media(max-width:1100px){.role-access-badge{display:none}.topbar>.profile-wrap{margin-left:4px}}
@media(max-width:680px){.topbar>.profile-wrap .profile-text{display:none}}


/* ================= ECO CELL V10.33.0 - ĐIỀU KHIỂN MÁY LẤY MẪU ================= */
.sampler-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:16px;margin-top:16px}
.sampler-card{background:var(--panel,#fff);border:1px solid var(--border,#dce6eb);border-radius:16px;padding:18px;box-shadow:0 8px 24px rgba(16,38,50,.06)}
.sampler-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.sampler-card-head h3{margin:0 0 4px;font-size:18px}.sampler-card-head p{margin:0;color:var(--muted,#69808b)}
.sampler-endpoint{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.sampler-endpoint>div{background:rgba(16,38,50,.045);border-radius:10px;padding:10px;min-width:0}
.sampler-endpoint small{display:block;color:var(--muted,#69808b);margin-bottom:4px}.sampler-endpoint b{display:block;overflow-wrap:anywhere}
.sampler-card-actions{display:flex;gap:8px;flex-wrap:wrap}.sampler-card-actions button{flex:1;min-width:120px}
.sampler-result{margin-top:12px;padding:10px 12px;border-radius:10px;background:rgba(16,38,50,.045);font-size:13px;line-height:1.45}
.sampler-result.ok{background:rgba(18,183,106,.12);color:#087647}.sampler-result.fail{background:rgba(240,68,56,.12);color:#b42318}
.sampler-summary{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.sampler-summary .status-chip{padding:8px 12px}
.station-sampler-box{border:1px solid #bdd7e2;border-radius:14px;padding:16px;background:rgba(15,135,170,.045)}
.station-sampler-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}.station-sampler-heading label{font-weight:800}.station-sampler-heading small{display:block;margin-top:4px;color:var(--muted,#69808b)}
.sampler-config-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.sampler-config-grid .full{grid-column:1/-1}
.sampler-protocol-panel{display:none;grid-column:1/-1}.sampler-protocol-panel.active{display:grid}
.sampler-config-disabled{opacity:.55;pointer-events:none}.sampler-safety-notice code{white-space:nowrap}
@media(max-width:720px){.sampler-config-grid,.sampler-endpoint{grid-template-columns:1fr}.sampler-config-grid .full{grid-column:auto}}


/* ECO CELL V10.34.0 - Bảng điều khiển lấy mẫu theo trạm và thông tin hỗ trợ */
.support-contact-footer{min-width:0}
.support-contact-footer small{display:block;max-width:190px;overflow-wrap:anywhere;line-height:1.45}
.support-contact-footer a{color:inherit;text-decoration:none}
.support-contact-footer a:hover{text-decoration:underline}
.sampler-control-panel{margin-top:16px}
.sampler-selector-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;background:var(--panel,#fff);border:1px solid var(--border,#dce6eb);border-radius:16px;padding:16px;margin-bottom:14px;box-shadow:0 8px 24px rgba(16,38,50,.05)}
.sampler-selector-row .form-field{flex:1;max-width:650px;margin:0}
.sampler-selector-row select{font-size:16px;font-weight:700}
.sampler-selected-card{background:var(--panel,#fff);border:1px solid var(--border,#dce6eb);border-radius:18px;padding:22px;box-shadow:0 10px 30px rgba(16,38,50,.07)}
.sampler-selected-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.sampler-selected-head small{font-weight:800;letter-spacing:.08em;color:var(--primary)}
.sampler-selected-head h2{margin:6px 0 4px;font-size:24px}
.sampler-selected-head p{margin:0;color:var(--muted,#69808b)}
.sampler-main-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.sampler-main-actions button{min-height:48px;font-size:15px;font-weight:800}
.sampler-trigger-main{font-size:16px!important}
.sampler-off-note{margin:10px 0 0;color:var(--muted,#69808b);font-size:13px}
@media(max-width:760px){.sampler-selector-row,.sampler-selected-head{align-items:stretch;flex-direction:column}.sampler-selector-row .form-field{max-width:none}.sampler-main-actions{grid-template-columns:1fr}.support-contact-footer small{max-width:145px}}

/* ECO CELL V10.36.1 - Tăng tương phản rõ khung viền ở chủ đề sáng/tối */
:root{
  --bg:#edf3f7;
  --surface:#ffffff;
  --surface-2:#f2f6fa;
  --surface-3:#e6edf4;
  --text:#0f1c28;
  --muted:#546577;
  --border:#b8c6d3;
  --border-strong:#8ea3b5;
  --shadow:0 10px 28px rgba(17,39,61,.10);
  --shadow-soft:0 3px 12px rgba(17,39,61,.08);
}
body.dark{
  --bg:#0f1820;
  --surface:#17232e;
  --surface-2:#1d2b37;
  --surface-3:#243746;
  --text:#f1f6f9;
  --muted:#b3c2cd;
  --border:#405768;
  --border-strong:#607889;
  --shadow:0 12px 32px rgba(0,0,0,.28);
  --shadow-soft:0 4px 14px rgba(0,0,0,.22);
}

input,select,textarea{
  background:var(--surface);
  color:var(--text);
}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--muted) 82%, transparent)}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--primary)!important;
  box-shadow:0 0 0 3px rgba(var(--primary-rgb),.12);
}

.primary-button,.danger-button,.secondary-button,.header-button,.header-select,
.search-box,.map-toolbar select,.camera-toolbar select,.user-filter-row select,
.filter-grid select,.filter-grid input,.filter-inline input,.filter-inline select,
.report-analysis-filter select,.report-analysis-filter input,
.data-table th,.data-table td,
.panel,.table-panel,.filter-panel,.monitor-group,.map-panel,.map-detail,.camera-card,.settings-layout,
.station-admin-card,.factory-group,.report-filter-card,.report-analysis-filter,.quality-legend,.latest-quality-panel,
.sampler-card,.sampler-selector-row,.sampler-selected-card,.station-sampler-box,.threshold-section,
.alert-summary>div,.metric-card,.trend-chart-panel,.device-panel,.station-info-card,.station-health-card,
.summary-card,.modal-dialog,.notification-panel,.profile-menu,.map-legend{
  border-color:var(--border)!important;
}

.panel,.table-panel,.filter-panel,.monitor-group,.map-panel,.map-detail,.camera-card,.settings-layout,
.station-admin-card,.factory-group,.report-filter-card,.report-analysis-filter,.quality-legend,.latest-quality-panel,
.sampler-card,.sampler-selector-row,.sampler-selected-card,.station-sampler-box,.threshold-section,
.alert-summary>div,.metric-card,.trend-chart-panel,.device-panel,.station-info-card,.station-health-card,
.summary-card,.modal-dialog,.notification-panel,.profile-menu,.map-legend{
  box-shadow:var(--shadow-soft)!important;
}

.secondary-button{
  background:var(--surface-2);
  color:var(--text);
  border:1px solid var(--border-strong);
  box-shadow:0 2px 8px rgba(17,39,61,.05);
}
.secondary-button:hover{background:var(--surface);border-color:var(--primary);color:var(--primary)}
.primary-button{border:1px solid rgba(0,0,0,.05)}
.danger-button{border:1px solid rgba(0,0,0,.05);box-shadow:0 5px 14px rgba(220,76,100,.20)}

.status-chip{
  border:1px solid rgba(0,0,0,.08);
}
body.dark .status-chip{border-color:rgba(255,255,255,.08)}

.sampler-endpoint>div,
.map-detail-card .metric-grid div,
.station-info-meta div,
.notification-view-all,
.notification-item:hover,
.report-kpi-grid article,
.permission-factory,
.threshold-row,
.actual-chart,
.sampler-result{
  background:var(--surface-2)!important;
  border:1px solid var(--border)!important;
}

.station-sampler-box,
.sampler-selector-row,
.sampler-selected-card{
  background:linear-gradient(180deg,var(--surface),var(--surface-2))!important;
}

.sampler-selected-head small,
.page-header p,.breadcrumbs,
.station-admin-head p,.factory-main p,
.sampler-selected-head p,.sampler-card-head p,
.support-contact-footer small,
.form-field small,.field-note,
.report-kpi-grid span,.report-kpi-grid small,
.map-detail-card>p,
.metric-card small,.metric-card span{
  color:var(--muted)!important;
  opacity:1!important;
}

.data-table th{background:var(--surface-2)!important}
.data-table td{background:var(--surface)!important}

body:not(.dark) .sampler-selected-head h2,
body:not(.dark) .page-header h1,
body:not(.dark) .brand-name,
body:not(.dark) .metric-card b,
body:not(.dark) .station-admin-head h3{
  color:#0d1721;
}

body:not(.dark) .sampler-selected-card,
body:not(.dark) .sampler-selector-row,
body:not(.dark) .station-sampler-box,
body:not(.dark) .threshold-section,
body:not(.dark) .panel,
body:not(.dark) .table-panel,
body:not(.dark) .filter-panel,
body:not(.dark) .settings-layout,
body:not(.dark) .station-admin-card,
body:not(.dark) .summary-card,
body:not(.dark) .camera-card,
body:not(.dark) .monitor-group,
body:not(.dark) .metric-card,
body:not(.dark) .trend-chart-panel,
body:not(.dark) .device-panel{
  border-color:var(--border-strong)!important;
}

/* ECO CELL V10.36.2 - Wordmark ECO CELL hiện đại trên thanh đầu trang */
.brand-copy{display:flex;flex-direction:column;justify-content:center;gap:2px}
.brand-name-logo{
  position:relative;
  display:inline-flex;
  align-items:baseline;
  width:max-content;
  gap:.12em;
  padding:1px 2px 4px 0;
  font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif;
  font-size:1.34rem;
  font-weight:900;
  line-height:.95;
  letter-spacing:-.075em;
  text-transform:lowercase;
  white-space:nowrap;
  filter:drop-shadow(0 2px 3px rgba(15,44,58,.12));
}
.brand-name-logo::after{
  content:"";
  position:absolute;
  left:2px;
  right:0;
  bottom:0;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,#60bd36 0%,#18a66d 43%,#24a8df 58%,#176cc0 100%);
  opacity:.9;
}
.brand-word-eco,.brand-word-cell{
  display:inline-block;
  color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
}
.brand-word-eco{
  position:relative;
  padding-right:.02em;
  background-image:linear-gradient(145deg,#78c83d 4%,#27aa62 52%,#078c71 100%);
}
.brand-word-eco::after{
  content:"";
  position:absolute;
  width:.34em;
  height:.20em;
  right:-.01em;
  top:-.17em;
  border-radius:100% 0 100% 0;
  background:linear-gradient(135deg,#9bd633,#17a966);
  transform:rotate(-28deg);
  box-shadow:0 1px 2px rgba(16,91,52,.16);
}
.brand-word-cell{
  padding-right:.04em;
  background-image:linear-gradient(145deg,#31b8ea 0%,#168dcc 48%,#185bb1 100%);
}
body.dark .brand-name-logo{filter:drop-shadow(0 2px 4px rgba(0,0,0,.32))}
body.dark .brand-word-eco{background-image:linear-gradient(145deg,#a5df50 0%,#42c984 58%,#21b39b 100%)}
body.dark .brand-word-cell{background-image:linear-gradient(145deg,#65d4ff 0%,#37aeea 50%,#72a7ff 100%)}
@media(max-width:620px){
  .brand-name-logo{font-size:1.18rem}
  .brand-subtitle{max-width:250px;font-size:.64rem}
}

/* ECO CELL V10.36.3 - Trung tâm chính sách, quyền riêng tư và an toàn điều khiển */
.login-legal-note{margin-top:14px;padding-top:13px;border-top:1px solid var(--border);font-size:.6rem;line-height:1.55;color:var(--muted);text-align:center}
.login-legal-note button{border:0;background:transparent;padding:0;color:var(--primary);font:inherit;font-weight:800;text-decoration:underline;cursor:pointer}
.sidebar-policy-link{display:block;margin-top:5px;padding:0;border:0;background:transparent;color:#b9d5df;font-size:.58rem;font-weight:800;text-align:left;cursor:pointer}
.sidebar-policy-link:hover{color:#fff;text-decoration:underline}

.legal-center{position:fixed;inset:0;z-index:2200;display:none;align-items:center;justify-content:center;padding:22px}
.legal-center.open{display:flex}
.legal-center-backdrop{position:absolute;inset:0;background:rgba(3,13,18,.72);backdrop-filter:blur(5px)}
.legal-center-dialog{position:relative;width:min(1050px,100%);max-height:min(820px,calc(100vh - 44px));display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border-strong,var(--border));border-radius:20px;background:var(--surface);color:var(--text);box-shadow:0 28px 90px rgba(0,0,0,.34)}
.legal-center-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:20px 23px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,rgba(var(--primary-rgb),.12),transparent 65%)}
.legal-center-kicker{display:block;color:var(--primary);font-size:.62rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.legal-center-header h2{margin:5px 0 2px;font-size:1.4rem}.legal-center-header p{margin:0;color:var(--muted);font-size:.65rem}
.legal-center-close{width:40px;height:40px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);color:var(--text);font-size:1.45rem;line-height:1}
.legal-center-layout{min-height:0;display:grid;grid-template-columns:235px minmax(0,1fr);flex:1}
.legal-center-nav{padding:16px;border-right:1px solid var(--border);background:var(--surface-2);overflow:auto}
.legal-center-nav button{width:100%;min-height:42px;margin:2px 0;padding:9px 11px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--muted);font-size:.7rem;font-weight:800;text-align:left}
.legal-center-nav button:hover{background:var(--surface);color:var(--text);border-color:var(--border)}
.legal-center-nav button.active{background:rgba(var(--primary-rgb),.12);color:var(--primary);border-color:rgba(var(--primary-rgb),.32)}
.legal-center-content{padding:22px 26px 35px;overflow:auto;outline:0;font-size:.75rem;line-height:1.7}
.legal-center-content h3{margin:0 0 13px;font-size:1.15rem}.legal-center-content h4{margin:19px 0 7px;font-size:.8rem}.legal-center-content p{margin:8px 0;color:var(--text)}
.legal-center-content ul{margin:7px 0;padding-left:22px}.legal-center-content li{margin:7px 0}
.legal-center-content table{width:100%;border-collapse:separate;border-spacing:0;margin:12px 0;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.legal-center-content th,.legal-center-content td{padding:10px 11px;border-bottom:1px solid var(--border);border-right:1px solid var(--border);text-align:left;vertical-align:top;font-size:.68rem}.legal-center-content th{background:var(--surface-2)}.legal-center-content tr:last-child td{border-bottom:0}.legal-center-content th:last-child,.legal-center-content td:last-child{border-right:0}
.legal-callout,.legal-warning{padding:12px 14px!important;border-radius:11px;border:1px solid rgba(var(--primary-rgb),.3);background:rgba(var(--primary-rgb),.08)}
.legal-warning{border-color:rgba(220,76,100,.35);background:rgba(220,76,100,.09)}
.legal-contact-card{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}.legal-contact-card span{display:grid;gap:3px;padding:12px;border:1px solid var(--border);border-radius:11px;background:var(--surface-2);overflow-wrap:anywhere}.legal-contact-card b{font-size:.62rem;color:var(--muted)}
.legal-center-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px 20px;border-top:1px solid var(--border);background:var(--surface-2)}.legal-center-footer span{font-size:.6rem;color:var(--muted)}
body.legal-open{overflow:hidden}

.storage-notice{position:fixed;z-index:2100;left:18px;right:18px;bottom:18px;display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1020px;margin:auto;padding:15px 17px;border:1px solid var(--border-strong,var(--border));border-radius:15px;background:var(--surface);color:var(--text);box-shadow:0 18px 50px rgba(0,0,0,.24)}
.storage-notice[hidden]{display:none!important}.storage-notice b{display:block;font-size:.75rem;margin-bottom:3px}.storage-notice p{margin:0;color:var(--muted);font-size:.64rem;line-height:1.5}.storage-notice-actions{display:flex;gap:8px;flex:0 0 auto}.storage-notice-actions button{white-space:nowrap}

@media(max-width:760px){
  .legal-center{padding:8px}.legal-center-dialog{max-height:calc(100vh - 16px);border-radius:14px}.legal-center-header{padding:15px}.legal-center-layout{grid-template-columns:1fr}.legal-center-nav{display:flex;gap:6px;overflow:auto;border-right:0;border-bottom:1px solid var(--border);padding:9px}.legal-center-nav button{width:auto;min-width:max-content;min-height:36px}.legal-center-content{padding:18px 16px 28px}.legal-center-footer{align-items:flex-start;flex-direction:column}.legal-center-footer button{width:100%}.legal-contact-card{grid-template-columns:1fr}.legal-center-content table{display:block;overflow-x:auto;white-space:nowrap}
  .storage-notice{left:10px;right:10px;bottom:10px;align-items:stretch;flex-direction:column}.storage-notice-actions{display:grid;grid-template-columns:1fr 1fr}.storage-notice-actions button{width:100%}
}

/* ECO CELL V10.36.4 - Làm gọn giao diện tài khoản quyền xem */
body.role-viewer .admin-nav-caption,
body.role-viewer #roleAccessBadgeV10210,
body.role-viewer #page-camera .viewer-hide-camera-description,
body.role-viewer #page-camera .viewer-hide-camera-notice,
body.role-viewer #cameraGatewayPanel,
body.role-viewer #page-station-detail .device-panel,
body.role-viewer #page-sampler .viewer-hide-sampler-description,
body.role-viewer #page-sampler .sampler-safety-notice,
body.role-viewer #page-sampler #samplerSummary,
body.role-viewer #page-reports .viewer-hide-report-description{
  display:none!important;
}
body.role-viewer #page-station-detail .trend-panel{
  grid-template-columns:minmax(0,1fr)!important;
}


/* ECO CELL V10.36.5 - Ẩn đường dẫn quét cho Viewer và bật chu kỳ tỷ lệ nhận dữ liệu */
body.role-viewer #page-station-detail .viewer-hide-scan-folder{display:none!important}
#dataRatePeriodTabs button{cursor:pointer;user-select:none}
#dataRatePeriodTabs button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
#dataRateBody td:first-child small{display:block;margin-top:4px;color:var(--muted);font-size:.58rem;font-weight:500}

/* ECO CELL V10.38.4 - nút Zalo tự phục vụ của tài khoản Chỉ xem */
body.role-viewer #profileZaloAlertBtn:not([hidden]){display:block!important}
.viewer-zalo-quick-v10383{white-space:nowrap}
.viewer-zalo-quick-v10383[hidden]{display:none!important}
@media(max-width:820px){.viewer-zalo-quick-v10383 span{display:none}}

/* ECO CELL V10.36.6 - Chọn mẫu báo cáo theo Nhà máy > Trạm > Mẫu > Thời gian */
.report-selection-card-v10366{
  background:var(--surface);border:1px solid var(--border-strong,var(--border));border-radius:16px;
  padding:16px;margin-bottom:14px;box-shadow:var(--shadow-soft)
}
.report-selection-grid-v10366{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.report-selection-grid-v10366 label,.report-period-controls-v10366 label{display:grid;gap:7px}
.report-selection-grid-v10366 label>span,.report-period-controls-v10366 label>span{font-size:.7rem;font-weight:800;color:var(--muted)}
.report-selection-grid-v10366 select,.report-period-controls-v10366 input,.report-period-controls-v10366 select{
  width:100%;min-height:43px;border:1px solid var(--border-strong,var(--border));border-radius:10px;
  background:var(--surface);color:var(--text);padding:8px 11px;font-weight:700
}
.report-period-chooser-v10366{margin-top:14px}
.report-period-card-v10366{border:1px solid var(--border);border-radius:13px;background:var(--surface-2);padding:14px}
.report-period-card-v10366[hidden]{display:none!important}
.report-period-head-v10366{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}
.report-period-head-v10366 b{font-size:.8rem}.report-period-head-v10366 p{margin:4px 0 0;color:var(--muted);font-size:.66rem;line-height:1.45}
.report-period-controls-v10366{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.report-quarter-controls-v10366{grid-template-columns:repeat(4,minmax(0,1fr))}
.report-selection-actions-v10366{display:flex;justify-content:flex-end;margin-top:14px}
.report-selection-actions-v10366 button{min-width:260px;min-height:44px}
.report-selected-heading-v10366{display:flex;align-items:center;justify-content:space-between;margin:18px 0 12px;padding:14px 16px;border:1px solid var(--border);border-radius:13px;background:linear-gradient(135deg,rgba(var(--primary-rgb),.09),var(--surface))}
.report-selected-heading-v10366 small{font-weight:850;letter-spacing:.09em;color:var(--primary)}
.report-selected-heading-v10366 h2{font-size:1.05rem;margin:5px 0 3px}.report-selected-heading-v10366 p{font-size:.65rem;color:var(--muted);margin:0}
.report-template-output-v10366[hidden]{display:none!important}
.report-template-output-v10366{display:grid;gap:14px}
.report-template-intro-v10366{border:1px solid rgba(var(--primary-rgb),.3);background:rgba(var(--primary-rgb),.07);border-radius:13px;padding:15px}
.report-template-intro-v10366 h3{margin:0 0 6px;font-size:.86rem}.report-template-intro-v10366 p{margin:0;color:var(--muted);font-size:.68rem;line-height:1.55}
@media(max-width:980px){.report-selection-grid-v10366{grid-template-columns:1fr 1fr}.report-selection-grid-v10366 label:last-child{grid-column:1/-1}.report-quarter-controls-v10366{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.report-selection-grid-v10366,.report-period-controls-v10366,.report-quarter-controls-v10366{grid-template-columns:1fr}.report-selection-grid-v10366 label:last-child{grid-column:auto}.report-selection-actions-v10366 button{width:100%;min-width:0}.report-selected-heading-v10366{align-items:flex-start}}

/* ECO CELL V10.36.7 - Màu nhận diện 5 thành phần môi trường */
.group-icon.ambient{background:#fff1dc;color:#a95d00}
.group-icon.sea{background:#dff4ff;color:#0877a8}
.group-icon.surfaceground{background:#e8f5e9;color:#2d7a3e}
body.dark .group-icon.ambient{background:rgba(255,176,32,.16);color:#ffc35c}
body.dark .group-icon.sea{background:rgba(47,126,216,.18);color:#74c9ef}
body.dark .group-icon.surfaceground{background:rgba(34,160,107,.18);color:#69d3a1}
#page-monitor .monitor-group[style*="display: none"]{margin:0!important}
#page-monitor .monitor-group .data-table td>small{display:block;margin-top:3px;color:var(--muted);font-size:.56rem}

/* ECO CELL V10.36.8 - Bộ chọn báo cáo 4 cấp */
.report-selection-grid-v10366{grid-template-columns:repeat(4,minmax(0,1fr))!important}
#reportPeriodChooserV10366 .report-period-card-v10366:not([hidden]){display:block!important;visibility:visible!important;opacity:1!important}
@media(max-width:1180px){.report-selection-grid-v10366{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:640px){.report-selection-grid-v10366{grid-template-columns:1fr!important}}

/* ECO CELL V10.36.10 - Đảo tương phản icon nhỏ và khung viền theo sáng/tối */
:root{
  --ui-icon:#172936;
  --border:#7f929f;
  --border-strong:#5f7483;
  color-scheme:light;
}
body.dark{
  --ui-icon:#f1f7fa;
  --border:#8ca3b2;
  --border-strong:#b2c3cd;
  color-scheme:dark;
}

/* Viền phải nhìn rõ trên cả hai chủ đề */
input,select,textarea,
.header-button,.header-select,.secondary-button,.mini-button,
.search-box,.map-toolbar select,.camera-toolbar select,.user-filter-row select,
.filter-grid select,.filter-grid input,.filter-inline input,.filter-inline select,
.report-selection-grid-v10366 select,
.report-period-controls-v10366 input,.report-period-controls-v10366 select,
.report-period-card-v10366,.report-selection-card-v10366,.report-selected-heading-v10366,
.panel,.table-panel,.filter-panel,.monitor-group,.map-panel,.map-detail,.camera-card,
.settings-layout,.summary-card,.metric-card,.station-admin-card,.factory-group,
.station-info-card,.station-health-card,.trend-chart-panel,.device-panel,
.sampler-card,.sampler-selector-row,.sampler-selected-card,.threshold-section,
.modal-dialog,.notification-panel,.profile-menu,.legal-center-dialog{
  border-color:var(--border)!important;
}

input,select,textarea{border-width:1px!important}
option{background:var(--surface);color:var(--text)}

/* Icon nhỏ: nền sáng dùng nét tối, nền tối dùng nét sáng */
.topbar .icon-button,
.main-content .summary-icon,
.main-content .group-icon,
.main-content .station-avatar,
.main-content .device-row>span:first-child,
.main-content .search-box>span,
.main-content .map-controls button,
.main-content .factory-chevron,
.main-content .table-action,
.main-content .camera-placeholder,
.main-content .empty-state>div,
.main-content .source-mode>span,
.main-content .notification-item-icon{
  color:var(--ui-icon)!important;
  border-color:var(--border)!important;
}

.main-content .group-icon,
.main-content .station-avatar,
.main-content .device-row>span:first-child,
.main-content .map-controls button,
.main-content .factory-chevron,
.main-content .source-mode>span{
  background:var(--surface-3)!important;
  border:1px solid var(--border)!important;
}

body:not(.dark) .main-content svg,
body:not(.dark) .main-content svg path,
body:not(.dark) .main-content svg line,
body:not(.dark) .main-content svg polyline:not(.chart-series-line){
  color:var(--ui-icon);
}

body.dark .main-content svg,
body.dark .main-content svg path,
body.dark .main-content svg line,
body.dark .main-content svg polyline:not(.chart-series-line){
  color:var(--ui-icon);
}

/* Nút phụ phải tách khỏi nền */
.secondary-button,.mini-button,.header-button{
  border:1px solid var(--border-strong)!important;
}

/* Bộ lọc báo cáo thể hiện rõ trạng thái sử dụng */
#reportProvinceSelect:disabled,#reportFactorySelect:disabled,#reportStationSelect:disabled{
  opacity:.62;
  cursor:not-allowed;
}
#reportProvinceSelect:not(:disabled),#reportFactorySelect:not(:disabled),#reportStationSelect:not(:disabled),#reportPeriodType:not(:disabled){
  cursor:pointer;
}


/* ECO CELL V10.36.11 - Chủ đề sáng/tối đồng bộ, nét rõ và mềm */
:root{
  --theme-icon:#203746;
  --theme-icon-muted:#526877;
  --theme-icon-bg:#e8eef3;
  --theme-line:#a9b8c3;
  --theme-line-strong:#8297a6;
  --theme-line-soft:rgba(56,78,92,.17);
  --theme-card-shadow:0 5px 18px rgba(30,52,67,.075);
  --theme-card-shadow-hover:0 9px 26px rgba(30,52,67,.11);
  --theme-focus:rgba(var(--primary-rgb),.16);
  color-scheme:light;
}
body.dark{
  --theme-icon:#edf5f8;
  --theme-icon-muted:#b9cbd5;
  --theme-icon-bg:#263946;
  --theme-line:#465d6d;
  --theme-line-strong:#698091;
  --theme-line-soft:rgba(205,224,233,.16);
  --theme-card-shadow:0 6px 20px rgba(0,0,0,.22);
  --theme-card-shadow-hover:0 10px 28px rgba(0,0,0,.3);
  --theme-focus:rgba(var(--primary-rgb),.28);
  color-scheme:dark;
}

body{
  --border:var(--theme-line);
  --border-strong:var(--theme-line-strong);
}

/* Chuyển chủ đề mượt, không chớp màu */
body,.topbar,.main-content,
.panel,.table-panel,.filter-panel,.monitor-group,.map-panel,.map-detail,.camera-card,
.settings-layout,.summary-card,.metric-card,.station-admin-card,.factory-group,
.station-info-card,.station-health-card,.trend-chart-panel,.device-panel,
.sampler-card,.sampler-selector-row,.sampler-selected-card,.threshold-section,
.report-selection-card-v10366,.report-period-card-v10366,.report-selected-heading-v10366,
.modal-dialog,.notification-panel,.profile-menu,
input,select,textarea,button{
  transition:background-color .22s ease,color .22s ease,border-color .22s ease,box-shadow .22s ease;
}

/* Viền rõ nhưng mềm */
input,select,textarea,
.header-button,.header-select,.secondary-button,.mini-button,
.search-box,.map-toolbar select,.camera-toolbar select,.user-filter-row select,
.filter-grid select,.filter-grid input,.filter-inline input,.filter-inline select,
.report-selection-grid-v10366 select,
.report-period-controls-v10366 input,.report-period-controls-v10366 select,
.panel,.table-panel,.filter-panel,.monitor-group,.map-panel,.map-detail,.camera-card,
.settings-layout,.summary-card,.metric-card,.station-admin-card,.factory-group,
.station-info-card,.station-health-card,.trend-chart-panel,.device-panel,
.sampler-card,.sampler-selector-row,.sampler-selected-card,.threshold-section,
.report-selection-card-v10366,.report-period-card-v10366,.report-selected-heading-v10366,
.modal-dialog,.notification-panel,.profile-menu,.legal-center-dialog{
  border:1px solid var(--theme-line)!important;
}

.panel,.table-panel,.filter-panel,.monitor-group,.map-panel,.map-detail,.camera-card,
.settings-layout,.summary-card,.metric-card,.station-admin-card,.factory-group,
.station-info-card,.station-health-card,.trend-chart-panel,.device-panel,
.sampler-card,.sampler-selector-row,.sampler-selected-card,.threshold-section,
.report-selection-card-v10366,.report-period-card-v10366,.report-selected-heading-v10366,
.modal-dialog,.notification-panel,.profile-menu,.legal-center-dialog{
  box-shadow:var(--theme-card-shadow)!important;
}

.summary-card:hover,.metric-card:hover,.station-admin-card:hover,.camera-card:hover{
  border-color:var(--theme-line-strong)!important;
  box-shadow:var(--theme-card-shadow-hover)!important;
}

input:focus,select:focus,textarea:focus,button:focus-visible{
  outline:none!important;
  border-color:var(--primary)!important;
  box-shadow:0 0 0 3px var(--theme-focus)!important;
}

.secondary-button,.mini-button,.header-button{
  background:var(--surface-2)!important;
  color:var(--text)!important;
  border-color:var(--theme-line-strong)!important;
}
.secondary-button:hover,.mini-button:hover,.header-button:hover{
  background:var(--surface)!important;
  color:var(--primary)!important;
  border-color:var(--primary)!important;
}

/* Mọi icon trang trí dùng một màu chủ đề; icon trạng thái vẫn giữ màu cảnh báo */
.topbar .icon-button,
.main-content .summary-icon,
.main-content .group-icon,
.main-content .station-avatar,
.main-content .device-row>span:first-child,
.main-content .search-box>span,
.main-content .map-controls button,
.main-content .factory-chevron,
.main-content .table-action,
.main-content .camera-placeholder,
.main-content .empty-state>div,
.main-content .source-mode>span,
.main-content .notification-item-icon,
.main-content .attachment-button,
.main-content .collapse-btn{
  color:var(--theme-icon)!important;
  border-color:var(--theme-line)!important;
  font-family:"Segoe UI Symbol","Segoe UI",Arial,sans-serif;
  font-variant-emoji:text;
  text-shadow:none!important;
}

.main-content .summary-icon,
.main-content .group-icon,
.main-content .station-avatar,
.main-content .device-row>span:first-child,
.main-content .map-controls button,
.main-content .factory-chevron,
.main-content .source-mode>span,
.main-content .notification-item-icon{
  background:var(--theme-icon-bg)!important;
  border:1px solid var(--theme-line)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}

body.dark .main-content .summary-icon,
body.dark .main-content .group-icon,
body.dark .main-content .station-avatar,
body.dark .main-content .device-row>span:first-child,
body.dark .main-content .map-controls button,
body.dark .main-content .factory-chevron,
body.dark .main-content .source-mode>span,
body.dark .main-content .notification-item-icon{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

.icon-button svg,.summary-icon svg,.group-icon svg,.table-action svg,.factory-chevron svg,.map-controls button svg{
  color:inherit!important;
  fill:currentColor!important;
  stroke:currentColor!important;
}

/* Các biểu tượng môi trường cũng đổi đồng bộ theo chủ đề */
.group-icon.air,.group-icon.water,.group-icon.other,.group-icon.ambient,.group-icon.sea,.group-icon.surfaceground{
  color:var(--theme-icon)!important;
  background:var(--theme-icon-bg)!important;
}

/* Bảng và đường phân cách */
.data-table th{background:var(--surface-2)!important;border-color:var(--theme-line)!important}
.data-table td,.panel-header,.monitor-group-body,.device-row,.station-row,.tabs,.notification-item,.notification-panel-head{
  border-color:var(--theme-line-soft)!important;
}
.data-table tbody tr:hover td{background:color-mix(in srgb,var(--primary) 5%,var(--surface))!important}

/* Bộ lọc báo cáo phải luôn có phản hồi thị giác */
.report-selection-grid-v10366 select{
  appearance:auto!important;
  pointer-events:auto;
  opacity:1;
  cursor:pointer;
  background-color:var(--surface)!important;
  color:var(--text)!important;
}
.report-selection-grid-v10366 select:disabled{
  pointer-events:none;
  opacity:.68;
  cursor:not-allowed;
}
.report-selection-card-v10366[data-report-cascade-ready="1"]{
  border-color:var(--theme-line-strong)!important;
}
.report-period-card-v10366{
  background:linear-gradient(180deg,var(--surface-2),var(--surface))!important;
  border-radius:14px!important;
}

@media(max-width:640px){
  .report-selection-card-v10366,.report-period-card-v10366{border-radius:13px!important}
}

/* ================================================================
   ECO CELL V10.36.13 - GIAO DIỆN ĐA SẮC, SINH ĐỘNG, GIỮ TƯƠNG PHẢN
   ================================================================ */
:root{
  --violet:#7357d9; --violet-rgb:115,87,217;
  --cyan:#168fb8; --cyan-rgb:22,143,184;
  --emerald:#20946b; --emerald-rgb:32,148,107;
  --orange:#e88a25; --orange-rgb:232,138,37;
  --rose:#db5978; --rose-rgb:219,89,120;
  --indigo:#4268d5; --indigo-rgb:66,104,213;
  --teal:#178f91; --teal-rgb:23,143,145;
  --gold:#b88208; --gold-rgb:184,130,8;
  --rainbow-shadow:0 10px 28px rgba(34,70,100,.11);
}

/* Nền trang có điểm màu rất nhẹ, không gây rối mắt */
body:not(.dark){
  background:
    radial-gradient(circle at 8% 8%,rgba(var(--cyan-rgb),.08),transparent 24rem),
    radial-gradient(circle at 92% 18%,rgba(var(--violet-rgb),.07),transparent 25rem),
    radial-gradient(circle at 74% 88%,rgba(var(--emerald-rgb),.06),transparent 28rem),
    var(--bg);
}
body.dark{
  background:
    radial-gradient(circle at 8% 8%,rgba(var(--cyan-rgb),.10),transparent 26rem),
    radial-gradient(circle at 92% 18%,rgba(var(--violet-rgb),.09),transparent 28rem),
    radial-gradient(circle at 74% 88%,rgba(var(--emerald-rgb),.07),transparent 30rem),
    var(--bg);
}

/* Thanh đầu trang có dải nhận diện đa sắc tinh tế */
.topbar:after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;
  background:linear-gradient(90deg,var(--cyan),var(--emerald),var(--orange),var(--rose),var(--violet));
  opacity:.82;pointer-events:none;
}
.brand-name,.brand-wordmark{background:linear-gradient(90deg,var(--emerald),var(--cyan),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent!important}

/* Menu: mỗi mục một sắc độ riêng nhưng mục đang chọn vẫn rõ */
.nav-item{position:relative;overflow:hidden}
.nav-item:before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 4px 4px 0;background:transparent;transition:.2s ease}
.nav-item:nth-of-type(6n+1) .nav-icon{color:#6dd1e7}
.nav-item:nth-of-type(6n+2) .nav-icon{color:#64d6a4}
.nav-item:nth-of-type(6n+3) .nav-icon{color:#ffc06c}
.nav-item:nth-of-type(6n+4) .nav-icon{color:#f58aa3}
.nav-item:nth-of-type(6n+5) .nav-icon{color:#a999ff}
.nav-item:nth-of-type(6n) .nav-icon{color:#69a4ff}
.nav-item.active .nav-icon{color:#fff!important;filter:drop-shadow(0 2px 5px rgba(0,0,0,.22))}
.nav-item.active:before{background:#fff}

/* Các thẻ tổng quan mang màu nhận diện riêng */
.summary-card,.metric-card,.alert-summary>div,.report-kpi-grid article{
  position:relative;overflow:hidden;isolation:isolate;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.summary-card:before,.metric-card:before,.alert-summary>div:before,.report-kpi-grid article:before{
  content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--card-accent,var(--primary));z-index:-1;
}
.summary-card:after,.metric-card:after,.alert-summary>div:after,.report-kpi-grid article:after{
  content:"";position:absolute;width:100px;height:100px;right:-38px;top:-48px;border-radius:50%;background:rgba(var(--card-rgb,var(--primary-rgb)),.10);z-index:-1;
}
.summary-card:nth-child(6n+1),.metric-card:nth-child(6n+1),.alert-summary>div:nth-child(6n+1),.report-kpi-grid article:nth-child(6n+1){--card-accent:var(--cyan);--card-rgb:var(--cyan-rgb)}
.summary-card:nth-child(6n+2),.metric-card:nth-child(6n+2),.alert-summary>div:nth-child(6n+2),.report-kpi-grid article:nth-child(6n+2){--card-accent:var(--emerald);--card-rgb:var(--emerald-rgb)}
.summary-card:nth-child(6n+3),.metric-card:nth-child(6n+3),.alert-summary>div:nth-child(6n+3),.report-kpi-grid article:nth-child(6n+3){--card-accent:var(--orange);--card-rgb:var(--orange-rgb)}
.summary-card:nth-child(6n+4),.metric-card:nth-child(6n+4),.alert-summary>div:nth-child(6n+4),.report-kpi-grid article:nth-child(6n+4){--card-accent:var(--rose);--card-rgb:var(--rose-rgb)}
.summary-card:nth-child(6n+5),.metric-card:nth-child(6n+5),.alert-summary>div:nth-child(6n+5),.report-kpi-grid article:nth-child(6n+5){--card-accent:var(--violet);--card-rgb:var(--violet-rgb)}
.summary-card:nth-child(6n),.metric-card:nth-child(6n),.alert-summary>div:nth-child(6n),.report-kpi-grid article:nth-child(6n){--card-accent:var(--indigo);--card-rgb:var(--indigo-rgb)}
.summary-card:hover,.metric-card:hover,.alert-summary>div:hover,.report-kpi-grid article:hover{transform:translateY(-3px);box-shadow:var(--rainbow-shadow)!important;border-color:var(--card-accent)!important}
.summary-card strong,.metric-card b,.report-kpi-grid article b{color:var(--card-accent,var(--text))!important}

/* Khối môi trường có màu riêng theo loại */
.monitor-group{--env-accent:var(--cyan);--env-rgb:var(--cyan-rgb);border-top:4px solid var(--env-accent)!important}
.monitor-group:has(.group-icon.air){--env-accent:var(--orange);--env-rgb:var(--orange-rgb)}
.monitor-group:has(.group-icon.water){--env-accent:var(--cyan);--env-rgb:var(--cyan-rgb)}
.monitor-group:has(.group-icon.ambient){--env-accent:var(--emerald);--env-rgb:var(--emerald-rgb)}
.monitor-group:has(.group-icon.sea){--env-accent:var(--indigo);--env-rgb:var(--indigo-rgb)}
.monitor-group:has(.group-icon.surfaceground){--env-accent:var(--violet);--env-rgb:var(--violet-rgb)}
.monitor-group-header{background:linear-gradient(110deg,rgba(var(--env-rgb),.13),transparent 58%)}
.group-icon.air,.group-icon.water,.group-icon.ambient,.group-icon.sea,.group-icon.surfaceground,.group-icon.other{
  color:var(--env-accent)!important;background:rgba(var(--env-rgb),.14)!important;border:1px solid rgba(var(--env-rgb),.30)!important;box-shadow:0 5px 14px rgba(var(--env-rgb),.13);
}

/* Tiêu đề từng panel có dấu màu */
.panel-header h2,.panel-header h3,.table-panel h2,.table-panel h3,.setting-group>h3{position:relative;padding-left:13px}
.panel-header h2:before,.panel-header h3:before,.table-panel h2:before,.table-panel h3:before,.setting-group>h3:before{
  content:"";position:absolute;left:0;top:.15em;width:4px;height:1.05em;border-radius:5px;background:linear-gradient(var(--cyan),var(--violet));
}

/* Nút đa dạng hơn nhưng không phá quy ước chức năng */
.primary-button{background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 65%,var(--violet)))!important;box-shadow:0 7px 18px rgba(var(--primary-rgb),.24)!important}
.primary-button:hover{box-shadow:0 10px 23px rgba(var(--primary-rgb),.30)!important}
.danger-button{background:linear-gradient(135deg,var(--danger),#e86b83)!important}
.secondary-button:hover{background:rgba(var(--cyan-rgb),.07)!important}

/* Tab đang chọn có dải chuyển màu */
.tabs button.active,.report-subtabs button.active,.lookup-mode-tab-v10280[aria-selected="true"]{
  color:var(--primary)!important;border-color:var(--primary)!important;background:linear-gradient(180deg,rgba(var(--cyan-rgb),.08),rgba(var(--violet-rgb),.05))!important;
}

/* Bảng mềm và dễ quét hơn */
.data-table tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--surface-2) 62%,var(--surface))!important}
.data-table tbody tr:hover td{background:linear-gradient(90deg,rgba(var(--cyan-rgb),.08),rgba(var(--violet-rgb),.055))!important}
.data-table th{color:var(--text)!important;background:linear-gradient(180deg,var(--surface-2),color-mix(in srgb,var(--surface-2) 72%,var(--cyan) 7%))!important}

/* Thẻ trạm và nhà máy có điểm màu khác nhau */
.station-admin-card,.factory-group,.station-info-card,.camera-card,.sampler-selected-card,.report-selection-card-v10366,.report-period-card-v10366{
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.station-admin-card:nth-child(5n+1){border-top:4px solid var(--cyan)!important}
.station-admin-card:nth-child(5n+2){border-top:4px solid var(--emerald)!important}
.station-admin-card:nth-child(5n+3){border-top:4px solid var(--orange)!important}
.station-admin-card:nth-child(5n+4){border-top:4px solid var(--rose)!important}
.station-admin-card:nth-child(5n){border-top:4px solid var(--violet)!important}
.station-admin-card:hover,.factory-group:hover,.camera-card:hover{transform:translateY(-2px);box-shadow:var(--rainbow-shadow)!important}

/* Trạng thái có màu nền rõ hơn */
.status-chip.success{background:rgba(var(--emerald-rgb),.14)!important;color:color-mix(in srgb,var(--emerald) 78%,var(--text))!important;border-color:rgba(var(--emerald-rgb),.35)!important}
.status-chip.info{background:rgba(var(--cyan-rgb),.14)!important;color:color-mix(in srgb,var(--cyan) 78%,var(--text))!important;border-color:rgba(var(--cyan-rgb),.35)!important}
.status-chip.warning{background:rgba(var(--orange-rgb),.15)!important;color:color-mix(in srgb,var(--orange) 75%,var(--text))!important;border-color:rgba(var(--orange-rgb),.38)!important}
.status-chip.danger{background:rgba(var(--rose-rgb),.15)!important;color:color-mix(in srgb,var(--rose) 78%,var(--text))!important;border-color:rgba(var(--rose-rgb),.38)!important}
.status-chip.calibration{background:rgba(var(--violet-rgb),.15)!important;color:color-mix(in srgb,var(--violet) 78%,var(--text))!important;border-color:rgba(var(--violet-rgb),.38)!important}

/* Biểu đồ và legend đa sắc */
.line-chart polyline:nth-of-type(6n+1),.lookup-hotfix-chart-lines polyline:nth-of-type(6n+1){stroke:var(--cyan)!important}
.line-chart polyline:nth-of-type(6n+2),.lookup-hotfix-chart-lines polyline:nth-of-type(6n+2){stroke:var(--emerald)!important}
.line-chart polyline:nth-of-type(6n+3),.lookup-hotfix-chart-lines polyline:nth-of-type(6n+3){stroke:var(--orange)!important}
.line-chart polyline:nth-of-type(6n+4),.lookup-hotfix-chart-lines polyline:nth-of-type(6n+4){stroke:var(--rose)!important}
.line-chart polyline:nth-of-type(6n+5),.lookup-hotfix-chart-lines polyline:nth-of-type(6n+5){stroke:var(--violet)!important}
.line-chart polyline:nth-of-type(6n),.lookup-hotfix-chart-lines polyline:nth-of-type(6n){stroke:var(--indigo)!important}

/* Bảng chọn báo cáo nổi bật, nhưng không quá rực */
.report-selection-card-v10366{background:linear-gradient(135deg,rgba(var(--cyan-rgb),.10),rgba(var(--violet-rgb),.07),var(--surface) 68%)!important;border-top:4px solid var(--cyan)!important}
.report-period-card-v10366{background:linear-gradient(135deg,rgba(var(--orange-rgb),.08),rgba(var(--rose-rgb),.06),var(--surface) 70%)!important;border-top:4px solid var(--orange)!important}
.report-selected-template-v10366,.report-selected-card-v10366{background:linear-gradient(135deg,rgba(var(--violet-rgb),.12),rgba(var(--cyan-rgb),.08),var(--surface))!important;border-color:rgba(var(--violet-rgb),.34)!important}

/* Chuyển chủ đề mượt mà */
body,.topbar,.panel,.table-panel,.summary-card,.metric-card,.monitor-group,.station-admin-card,.factory-group,.camera-card,input,select,textarea,button,.status-chip{
  transition:background-color .22s ease,color .22s ease,border-color .22s ease,box-shadow .22s ease,transform .18s ease;
}

@media(max-width:760px){
  .summary-card:after,.metric-card:after{width:75px;height:75px;right:-30px;top:-35px}
  .topbar:after{height:2px}
}


/* ECO CELL V10.36.14 - Làm chữ đậm hơn và dọn màn đăng nhập */
body{font-weight:500;}
small,.field-note,.breadcrumbs,.page-header p,.brand-subtitle,.profile-text small,.station-admin-head p,.factory-main p,.camera-info small,.metric-card span,.metric-card small,.summary-card small,.summary-card span,.legal-basis-note,.login-card p,.login-feature-list span,.login-brand-panel p{font-weight:500!important;}
input,select,textarea,button,table,.data-table td,.data-table th,.nav-item,.nav-caption,.status-chip,.header-button,.secondary-button,.primary-button,.danger-button,.link-button,.mini-button{font-weight:600;}
body{--muted:#4e5f70;}
body.dark{--muted:#c4d0d8;}
.login-card small,.login-legal-note{display:none!important;}
.form-field label,.filter-grid label span,.report-analysis-filter label span,.station-info-meta small,.map-detail-card .metric-grid small{font-weight:700!important;}
.data-table td{color:var(--text);}
.panel,.table-panel,.filter-panel,.monitor-group,.map-panel,.map-detail,.camera-card,.settings-layout,.summary-card,.metric-card,.station-admin-card,.factory-group,.report-filter-card,.report-analysis-filter,.quality-legend,.latest-quality-panel,.sampler-card,.sampler-selector-row,.sampler-selected-card,.station-sampler-box,.threshold-section,.alert-summary>div,.trend-chart-panel,.device-panel,.station-info-card,.station-health-card,.modal-dialog,.notification-panel,.profile-menu,.map-legend{box-shadow:0 8px 22px rgba(17,39,61,.09)!important;}


/* ECO CELL V10.36.15 - Cỡ chữ mặc định 125%, đậm hơn và dọn chữ màn đăng nhập */
:root{--font-scale:1.25;}
body{font-weight:550;}
h1,h2,h3,h4,h5,h6,b,strong,.brand-name,.nav-label,.panel-header h3,.page-header h1,.summary-card b,.metric-card b,.station-admin-head h3,.profile-text b,.data-table th,.status-chip,.primary-button,.secondary-button,.danger-button,.header-button,.nav-caption{font-weight:700!important;}
p,small,span,label,input,select,textarea,button,.data-table td,.brand-subtitle,.page-header p,.breadcrumbs{font-weight:600;}
.login-card small,.login-legal-note{display:none!important;}
.login-card p,.login-brand-panel p,.login-feature-list span{font-weight:600!important;}


/* ECO CELL V10.36.16 - Mặc định cỡ chữ lớn, không cắt chữ, các ô nền nhạt tách khỏi nền */
:root{
  --font-scale:1.55;
  --topbar-height:84px;
  --sidebar-width:300px;
  --surface-2:#f4f8fc;
  --surface-3:#eaf1f7;
  --soft-panel:#f7fbff;
}
body.dark{
  --surface-2:#20313d;
  --surface-3:#2a3d4b;
  --soft-panel:#1e2e39;
}
.topbar{padding:0 18px 0 14px;gap:14px;min-height:var(--topbar-height);}
.topbar-left,.topbar-right{gap:14px;}
.icon-button{width:44px;height:44px;font-size:22px;}
.brand-logo{width:60px;height:60px;}
.brand-name{font-size:1.1rem;line-height:1.05;}
.brand-subtitle{font-size:.9rem;max-width:760px;line-height:1.25;}
.connection-pill,.header-button,.header-select,.primary-button,.secondary-button,.danger-button,.login-submit{min-height:48px;height:auto;padding-top:10px;padding-bottom:10px;font-size:.92rem;line-height:1.25;}
.connection-pill{padding:10px 15px;white-space:nowrap;}
.profile{align-items:center;gap:10px;}
.profile-avatar{width:46px;height:46px;font-size:1rem;}
.profile-text{font-size:.86rem;line-height:1.2;}
.profile-caret{font-size:1rem;}
.sidebar-scroll{padding:16px 12px 20px;}
.nav-caption{font-size:.72rem;padding:20px 12px 10px;}
.nav-item{height:auto;min-height:56px;padding:10px 14px;font-size:.98rem;line-height:1.2;white-space:normal;}
.nav-icon{font-size:1.2rem;width:26px;}
.nav-label{white-space:normal;overflow:visible;text-overflow:clip;}
.main-content{padding:calc(var(--topbar-height) + 28px) 28px 40px;}
.page-header h1{font-size:2.15rem;line-height:1.2;}
.page-header p,.breadcrumbs{font-size:.96rem;line-height:1.45;}
.page-header{align-items:flex-start;}
.panel,.table-panel,.filter-panel,.monitor-group,.map-panel,.map-detail,.camera-card,.settings-layout,.summary-card,.metric-card,.station-admin-card,.factory-group,.report-filter-card,.report-analysis-filter,.quality-legend,.latest-quality-panel,.sampler-card,.sampler-selector-row,.sampler-selected-card,.station-sampler-box,.threshold-section,.alert-summary>div,.trend-chart-panel,.device-panel,.station-info-card,.station-health-card,.modal-dialog,.notification-panel,.profile-menu,.map-legend{background:var(--surface)!important;}
.setting-card,.source-mode,.data-source-panel,.confirm-box,.permission-factory,.threshold-row,.report-kpi-grid article,.sampler-endpoint>div,.notice-box,.lookup-scan-status,.quality-table-card,.notification-view-all,.station-sampler-box,.sampler-selector-row,.sampler-selected-card .sampler-endpoint>div{background:var(--surface-2)!important;border-color:var(--border)!important;}
.settings-layout,.panel,.table-panel,.filter-panel,.summary-card,.metric-card,.station-admin-card,.factory-group,.camera-card,.monitor-group,.report-filter-card,.report-analysis-filter,.quality-legend,.latest-quality-panel,.sampler-card,.sampler-selector-row,.sampler-selected-card,.threshold-section,.trend-chart-panel,.device-panel,.station-info-card,.station-health-card{border-radius:18px!important;}
.settings-nav{padding:16px;}
.settings-nav button{height:auto;min-height:54px;padding:12px 14px;font-size:.94rem;line-height:1.2;}
.settings-content{padding:24px;}
.setting-group h3{font-size:1.25rem;line-height:1.25;}
.setting-group>p{font-size:.9rem;line-height:1.45;}
.setting-grid{gap:16px;}
.setting-card{padding:16px 18px;border-radius:16px;}
.setting-card label{font-size:.92rem;line-height:1.35;margin-bottom:10px;}
.setting-card p{font-size:.82rem;line-height:1.5;}
.setting-card input[type="text"],.setting-card input[type="number"],.setting-card select,.setting-card textarea,.filter-grid select,.filter-grid input,.filter-inline input,.filter-inline select,.camera-toolbar select,.user-filter-row select,.station-admin-toolbar select,.header-select,.report-analysis-filter select,.report-analysis-filter input{min-height:50px;height:auto;padding-top:10px;padding-bottom:10px;font-size:.95rem;line-height:1.35;}
.setting-card textarea{min-height:110px;}
.search-box{min-height:48px;height:auto;}
.search-box input{font-size:.95rem;}
.color-preset{font-size:.88rem;padding:12px 14px;min-height:52px;border-radius:12px;background:var(--surface-2);}
.color-preset span{width:24px;height:24px;}
.toggle-row{padding:13px 0;}
.toggle-row b{font-size:.92rem;line-height:1.3;}
.toggle-row small{font-size:.8rem;line-height:1.45;}
.switch{width:50px;height:28px;min-width:50px;}
.switch:after{width:22px;height:22px;}
.switch.on:after{left:25px;}
.summary-card small,.metric-card small,.metric-card span,.station-admin-head p,.factory-main p,.camera-info small,.setting-card p,.field-note,.notice-box,.lookup-scan-status,.report-template-intro-v10366 p{line-height:1.5;}
.data-table th,.data-table td{padding:14px 12px;font-size:.92rem;line-height:1.45;}
@media (max-width: 1360px){:root{--sidebar-width:280px;--topbar-height:90px}.topbar{flex-wrap:wrap;align-items:center;padding-top:8px;padding-bottom:8px}.main-content{padding-top:calc(var(--topbar-height) + 42px)}}
@media (max-width: 980px){:root{--sidebar-width:260px;--topbar-height:96px}.topbar-right{flex-wrap:wrap;justify-content:flex-end}.settings-layout{grid-template-columns:1fr}.settings-nav{border-right:0;border-bottom:1px solid var(--border);display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}}


/* ECO CELL V10.36.17 - Thu nhỏ chữ menu trái 1 dòng và tăng nền nhạt cho phần tử bên trong khung */
.sidebar-scroll{padding:14px 10px 18px;}
.nav-caption{font-size:.66rem;padding:18px 12px 8px;}
.nav-item{min-height:48px;padding:8px 12px;font-size:.86rem;gap:9px;white-space:nowrap;}
.nav-icon{width:22px;font-size:1.05rem;flex:0 0 22px;}
.nav-label{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;display:block;line-height:1.2;}
.nav-badge{font-size:.62rem;padding:2px 6px;flex:0 0 auto;}
body.sidebar-collapsed .nav-label{display:none!important;}

/* các phần tử con bên trong khung dùng nền nhạt khác background bên ngoài */
.summary-card, .metric-card, .station-info-card, .station-health-card, .device-panel, .trend-chart-panel, .map-detail-card, .sampler-selected-card, .sampler-card, .station-admin-card, .factory-group, .camera-card, .monitor-group, .report-filter-card, .report-analysis-filter, .table-panel, .filter-panel, .panel, .settings-layout, .quality-legend, .latest-quality-panel, .report-template-intro-v10366, .quality-table-card, .actual-chart, .confirm-box {
  background:var(--surface)!important;
}
.station-info-meta>div,
.map-detail-card .metric-grid>div,
.device-row,
.status-line,
.report-kpi-grid article,
.lookup-summary-card,
.lookup-scan-status,
.notice-box,
.station-alert-summary span,
.factory-summary,
.factory-empty,
.quality-card-grid>article,
.latest-quality-details>span,
.sampler-endpoint>div,
.station-info-head,
.monitor-group-header,
.data-source-panel,
.source-mode,
.color-preset,
.setting-card,
.permission-factory,
.threshold-row,
.report-period-card-v10366,
.report-template-card-v10366,
.report-analysis-filter label,
.metric-grid div,
.summary-card .summary-meta,
.summary-card .summary-foot,
.station-sampler-box,
.sampler-selector-row,
.latest-quality-panel>div,
.profile-menu-head,
.notification-item,
.notification-view-all {
  background:var(--surface-2)!important;
  border:1px solid var(--border)!important;
  border-radius:14px;
}
.device-row, .status-line, .station-info-meta>div, .map-detail-card .metric-grid>div, .lookup-summary-card, .report-kpi-grid article {
  padding:12px 14px;
}
.station-info-meta, .map-detail-card .metric-grid, .latest-quality-details{gap:10px;}
.monitor-group-body{background:var(--surface)!important;}
.data-table-wrap{background:var(--surface)!important;border-radius:14px;}


/* ECO CELL V10.36.18 - Cho phép đổi màu nền bên trong khung */
:root{--soft-panel:#e6f5fb;}
body.dark{--soft-panel:#1f3440;}
.station-info-meta>div,
.map-detail-card .metric-grid>div,
.device-row,
.status-line,
.report-kpi-grid article,
.lookup-summary-card,
.lookup-scan-status,
.notice-box,
.station-alert-summary span,
.factory-summary,
.factory-empty,
.quality-card-grid>article,
.latest-quality-details>span,
.sampler-endpoint>div,
.station-info-head,
.monitor-group-header,
.data-source-panel,
.source-mode,
.color-preset,
.setting-card,
.permission-factory,
.threshold-row,
.report-period-card-v10366,
.report-template-card-v10366,
.report-analysis-filter label,
.metric-grid div,
.summary-card .summary-meta,
.summary-card .summary-foot,
.station-sampler-box,
.sampler-selector-row,
.latest-quality-panel>div,
.profile-menu-head,
.notification-item,
.notification-view-all{
  background:var(--soft-panel)!important;
}
.monitor-group-header, .factory-summary, .station-info-head, .device-row, .status-line{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--border) 72%, transparent);}


/* ECO CELL V10.36.19 - Tỷ lệ 80%, bảng màu Lagoon và bộ lọc cảnh báo */
:root{
  --ui-scale:.8;
  --modal-safe-height:112.5vh;
  --modal-safe-width:117.5vw;
  --modal-edge-gap:20px;
  --base-font-size:16px;
  --topbar-height:68px;
  --sidebar-width:248px;
  --primary:#0b7285;
  --primary-rgb:11,114,133;
  --secondary:#2b8a6e;
  --accent:#e7a23b;
  --danger:#d6576c;
  --warning:#d88722;
  --success:#267f63;
  --info:#3f78b5;
  --bg:#f1f6f7;
  --surface:#ffffff;
  --surface-2:#f4f8f8;
  --surface-3:#e8f0f1;
  --soft-panel:#edf8f7;
  --text:#17323a;
  --muted:#58707a;
  --border:#d4e2e5;
  --cyan:#2a8498;--cyan-rgb:42,132,152;
  --emerald:#378b70;--emerald-rgb:55,139,112;
  --orange:#dc9141;--orange-rgb:220,145,65;
  --rose:#cf6679;--rose-rgb:207,102,121;
  --violet:#7569a8;--violet-rgb:117,105,168;
  --indigo:#5373aa;--indigo-rgb:83,115,170;
  --teal:#2c8582;--teal-rgb:44,133,130;
  --gold:#ad8228;--gold-rgb:173,130,40;
  --rainbow-shadow:0 12px 30px rgba(27,71,82,.10);
}

/* ECO CELL V10.36.20 - Tách riêng cỡ chữ và tỷ lệ toàn giao diện */
.setting-card input[type="range"]{accent-color:var(--primary)}
#fontSizeValue,#uiScaleValue{display:inline-block;min-width:48px;text-align:right;color:var(--primary);font-weight:850}

/* ECO CELL V10.36.21 - Công tắc LOCAL/FTP và trạng thái nguồn dự phòng */
.source-mode.active:after{content:"BẬT";margin-left:auto;padding:4px 7px;border-radius:999px;background:rgba(var(--primary-rgb),.12);color:var(--primary);font-size:.58rem;font-weight:900;letter-spacing:.05em}
.source-priority-note-v103621{grid-column:1/-1;margin-top:-5px;padding:11px 13px;border:1px solid rgba(var(--primary-rgb),.22);border-radius:11px;background:linear-gradient(135deg,rgba(var(--primary-rgb),.075),var(--soft-panel));color:var(--muted);font-size:.68rem;line-height:1.5}
.source-priority-note-v103621 b{color:var(--text)}
body.dark{
  --bg:#101d22;
  --surface:#17272d;
  --surface-2:#1c2f36;
  --surface-3:#263b43;
  --soft-panel:#20373b;
  --text:#edf6f5;
  --muted:#b6c8c9;
  --border:#33505a;
}
body:not(.dark){
  background:
    radial-gradient(circle at 9% 7%,rgba(var(--cyan-rgb),.075),transparent 25rem),
    radial-gradient(circle at 92% 15%,rgba(var(--violet-rgb),.055),transparent 25rem),
    radial-gradient(circle at 76% 90%,rgba(var(--emerald-rgb),.055),transparent 28rem),
    var(--bg);
}
.sidebar{background:linear-gradient(180deg,#143944,#102f39 55%,#0e2932);}
.topbar{min-height:var(--topbar-height);padding:0 16px 0 13px;gap:12px;background:color-mix(in srgb,var(--surface) 96%,var(--cyan) 4%);}
.topbar:after{height:2px;background:linear-gradient(90deg,var(--primary),var(--secondary),var(--gold),var(--violet));opacity:.72;}
.brand-logo{width:48px;height:48px}.brand-name{font-size:1rem}.brand-subtitle{font-size:.78rem;max-width:620px}
.icon-button{width:40px;height:40px;font-size:19px}
.connection-pill,.header-button,.header-select,.primary-button,.secondary-button,.danger-button,.login-submit{min-height:40px;padding-top:8px;padding-bottom:8px;font-size:.82rem}
.profile-avatar{width:40px;height:40px;font-size:.9rem}.profile-text{font-size:.78rem}
.sidebar-scroll{padding:13px 10px 18px}.nav-caption{font-size:.64rem;padding:17px 12px 8px}
.nav-item{min-height:44px;padding:8px 12px;font-size:.82rem;gap:9px}.nav-icon{width:22px;font-size:1rem}
.main-content{padding:calc(var(--topbar-height) + 22px) 22px 36px}.page-header h1{font-size:1.9rem}.page-header p,.breadcrumbs{font-size:.86rem}
.settings-nav button{min-height:46px;padding:10px 12px;font-size:.85rem}.settings-content{padding:20px}
.setting-card{padding:14px 15px}.setting-card label{font-size:.84rem;margin-bottom:8px}.setting-card p{font-size:.76rem}
.setting-card input[type="text"],.setting-card input[type="number"],.setting-card select,.setting-card textarea,.filter-grid select,.filter-grid input,.filter-inline input,.filter-inline select,.camera-toolbar select,.user-filter-row select,.station-admin-toolbar select,.header-select,.report-analysis-filter select,.report-analysis-filter input{min-height:42px;padding-top:8px;padding-bottom:8px;font-size:.84rem}
.data-table th,.data-table td{padding:11px 10px;font-size:.82rem}
.primary-button{background:linear-gradient(135deg,var(--primary),#2b8a83)!important;box-shadow:0 7px 17px rgba(var(--primary-rgb),.20)!important}
.primary-button:hover{box-shadow:0 9px 21px rgba(var(--primary-rgb),.26)!important}
.report-selection-card-v10366{background:linear-gradient(135deg,rgba(var(--cyan-rgb),.085),rgba(var(--emerald-rgb),.045),var(--surface) 70%)!important;border-top-color:var(--primary)!important}
.report-period-card-v10366{background:linear-gradient(135deg,rgba(var(--gold-rgb),.07),rgba(var(--rose-rgb),.035),var(--surface) 72%)!important;border-top-color:var(--gold)!important}

/* ECO CELL V10.36.22 - Khung chỉnh sửa luôn giữ thanh Hủy/Lưu trong màn hình */
.modal{padding:var(--modal-edge-gap);overflow:hidden}
.modal-dialog{
  max-width:var(--modal-safe-width);
  max-height:var(--modal-safe-height);
  min-height:0;
  overflow:hidden;
}
.modal-header,.modal-footer{
  position:relative;
  z-index:3;
  flex:0 0 auto;
  background:var(--surface);
}
.modal-body{
  flex:1 1 auto;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.modal-footer{
  box-shadow:0 -8px 20px rgba(17,39,61,.09);
}
.modal-dialog:has(#stationEditorForm){
  width:820px;
  height:var(--modal-safe-height);
}
.modal-dialog:has(#stationEditorForm) .modal-header{padding:13px 17px}
.modal-dialog:has(#stationEditorForm) .modal-body{padding:13px 16px}
.modal-dialog:has(#stationEditorForm) .modal-footer{padding:11px 16px}
.modal-dialog:has(#stationEditorForm) .modal-footer .primary-button{min-width:150px}
.modal-dialog:has(#stationEditorForm) #stationEditorForm{gap:10px}
.modal-dialog:has(#stationEditorForm) .station-sampler-box{padding:13px}

.alert-filter-shell-v103619{margin:0 0 14px;padding:14px;border:1px solid var(--border);border-radius:15px;background:linear-gradient(135deg,rgba(var(--cyan-rgb),.065),var(--surface));}
.alert-filter-bar-v103619{display:grid;grid-template-columns:minmax(220px,1.5fr) repeat(3,minmax(150px,1fr)) repeat(2,minmax(135px,.85fr));gap:10px;align-items:end;margin:0}
.alert-filter-bar-v103619 label{display:flex;flex-direction:column;gap:6px;min-width:0}
.alert-filter-bar-v103619 label>span{font-size:.72rem;color:var(--muted);font-weight:700}
.alert-filter-bar-v103619 input,.alert-filter-bar-v103619 select{width:100%;min-width:0;border-color:var(--border);background:var(--surface)}
.alert-filter-bar-v103619 input:focus,.alert-filter-bar-v103619 select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(var(--primary-rgb),.10);outline:0}
.alert-search-field-v103619 input:first-child{min-width:0}
.alert-filter-actions-v103619{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px}
.alert-filter-summary-v103619{margin-top:10px;padding-top:10px;border-top:1px dashed var(--border);color:var(--muted);font-size:.75rem;line-height:1.45}
.alert-filter-summary-v103619 b{color:var(--text)}.alert-filter-summary-v103619.warning{color:var(--danger);font-weight:700}
.alert-summary>div{background:linear-gradient(145deg,var(--surface),rgba(var(--card-rgb,var(--primary-rgb)),.045))!important}

.report-standard-card-v103619{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;margin:0 0 14px;padding:16px;border:1px solid rgba(var(--primary-rgb),.25);border-left:5px solid var(--primary);border-radius:15px;background:linear-gradient(135deg,rgba(var(--cyan-rgb),.07),var(--surface) 68%);box-shadow:0 8px 22px rgba(26,72,83,.07)}
.report-standard-card-v103619.warning{border-color:rgba(var(--rose-rgb),.45);border-left-color:var(--danger);background:linear-gradient(135deg,rgba(var(--rose-rgb),.09),var(--surface) 70%)}
.report-standard-card-v103619 small{display:block;margin-bottom:4px;color:var(--muted);font-size:.65rem;font-weight:800;letter-spacing:.08em}
.report-standard-card-v103619 h3{margin:0;font-size:.94rem;line-height:1.35}.report-standard-card-v103619>p{grid-column:1/-1;margin:0;color:var(--muted);font-size:.76rem;line-height:1.55}
.report-standard-card-v103619>p b{color:var(--text)}.report-signoff-note-v103619{padding:9px 11px;border-radius:10px;background:var(--soft-panel);border:1px solid var(--border);color:var(--text)!important}

@media(max-width:1500px){
  .alert-filter-bar-v103619{grid-template-columns:minmax(220px,1.4fr) repeat(3,minmax(145px,1fr))}
  .alert-filter-bar-v103619 label:nth-of-type(5),.alert-filter-bar-v103619 label:nth-of-type(6){grid-column:span 2}
}
@media(max-width:980px){
  :root{--sidebar-width:230px;--topbar-height:82px}
  .alert-filter-bar-v103619{grid-template-columns:repeat(2,minmax(0,1fr))}
  .alert-filter-bar-v103619 label:nth-of-type(5),.alert-filter-bar-v103619 label:nth-of-type(6){grid-column:auto}
}
@media(max-width:620px){
  .alert-filter-bar-v103619{grid-template-columns:1fr}.alert-filter-actions-v103619{flex-direction:column}
  .alert-filter-actions-v103619 button{width:100%}.report-standard-card-v103619{grid-template-columns:1fr}.report-standard-card-v103619 .status-chip{justify-self:start}
}

/* V10.38.7: danh sách nhiều số Zalo theo từng trạm cho Admin/Người vận hành. */
.zalo-phone-list-v10386{display:grid;gap:9px;margin:6px 0 10px}
.zalo-phone-row-v10386{display:grid;grid-template-columns:minmax(0,1fr) 42px;gap:8px;align-items:center}
.zalo-phone-row-v10386 input{width:100%}
.zalo-phone-row-v10386 .zalo-phone-remove-v10386,
.zalo-phone-row-v10386 .station-zalo-phone-remove-v10387{width:42px;min-width:42px;height:42px;padding:0;font-size:1.15rem}
.zalo-phone-add-v10386{justify-self:start}
body.role-viewer #profileZaloAlertBtn,
body.role-viewer #viewerZaloQuickBtnV10383,
body.role-viewer #zaloQuickBtnV10386,
body.role-viewer .nav-item[data-page="sampler"]{display:none!important}


/* FIX14 - FTP sync service and robust camera */
.ftp-sync-path-input{min-width:310px;width:100%;height:38px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text);padding:0 10px}
.ftp-sync-thread-input{width:74px;height:38px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text);padding:0 8px}
.ftp-sync-state{display:grid;gap:3px;min-width:150px}.ftp-sync-state small{color:var(--muted)}
.ftp-sync-actions{display:flex;gap:6px;flex-wrap:wrap}.ftp-sync-actions button{white-space:nowrap}
.ftp-mirror-box-v103814{border:1px solid rgba(var(--primary-rgb),.38);background:rgba(var(--primary-rgb),.06);padding:14px;border-radius:12px}
.ftp-sync-range{font-size:.72rem;color:var(--muted);white-space:nowrap}.ftp-sync-error{max-width:260px;white-space:normal;color:var(--danger)}
.camera-inline-hls{width:100%;height:100%;border:0;background:#000;display:block}.camera-hls-fix14 .camera-auto-state{pointer-events:none}

.ftp-mirror-enable-row{display:flex;align-items:center;gap:8px;margin-top:10px;font-weight:600}.ftp-mirror-enable-row input{width:18px;height:18px}


/* ECO CELL V10.38.17 R13 - Ẩn thông tin kỹ thuật cho Operator + Viewer; Admin giữ nguyên */
body.role-readonly #page-station-detail .viewer-hide-scan-folder,
body.role-readonly #page-station-detail .station-source-admin-only,
body.role-readonly #page-camera .viewer-hide-camera-description,
body.role-readonly #page-camera .viewer-hide-camera-notice,
body.role-readonly #cameraGatewayPanel,
body.role-readonly #page-sampler .viewer-hide-sampler-description,
body.role-readonly #page-sampler .sampler-safety-notice,
body.role-readonly #page-lookup #lookupPeriodHint,
body.role-readonly #page-reports .viewer-hide-report-description,
body.role-readonly .role-admin-only-info {
  display:none!important;
}
body.role-readonly #page-station-detail .trend-panel {
  grid-template-columns:minmax(0,1fr)!important;
}
body.role-readonly #page-lookup #lookupScanStatus.role-admin-index-status {
  display:none!important;
}