:root {
    --bg: #0b1220;
    --panel: #111827;
    --panel2: #0f172a;
    --line: #1f2937;
    --text: #e5e7eb;
    --muted: #94a3b8;

    --green: #22c55e;
    --yellow: #f59e0b;
    --red: #ef4444;
    --gray: #9ca3af;
    --blue: #38bdf8;
    --violet: #8b5cf6;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: linear-gradient(135deg, #07111f, #111827 55%, #0b1220);
    color: var(--text);
    font-family: Inter, Segoe UI, Arial, sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 280px;
    background: rgba(9, 14, 26, .96);
    border-right: 1px solid var(--line);
    padding: 18px;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    overflow: auto;
}

.brand {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 22px;
}

.brand-logo {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, #38bdf8, #22c55e);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #06111f;
}

.brand-title {
    font-weight: 800;
    font-size: 18px;
}

.brand-sub {
    font-size: 12px;
    color: var(--muted);
}

.side-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.side-nav a {
    padding: 11px 12px;
    border-radius: 14px;
    color: #cbd5e1;
    display: flex;
    gap: 10px;
    align-items: center;
}

.side-nav a:hover,
.side-nav a.active {
    background: #172033;
    color: white;
}

.nav-label {
    font-size: 11px;
    text-transform: uppercase;
    color: #64748b;
    margin: 18px 10px 6px;
    font-weight: 700;
    letter-spacing: .08em;
}

.main {
    margin-left: 280px;
    min-height: 100vh;
    width: calc(100% - 280px);
}

.topbar {
    height: 82px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    background: rgba(15, 23, 42, .72);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 10;
}

.topbar h1 {
    font-size: 24px;
    margin: 0;
    font-weight: 800;
}

.breadcrumb-lite {
    color: var(--muted);
    font-size: 13px;
    margin-top: 3px;
}

.top-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.status-pill,
.user-pill {
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #0b1220;
    color: #cbd5e1;
    font-size: 13px;
}

.dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

.green {
    background: var(--green);
}

.yellow {
    background: var(--yellow);
}

.red {
    background: var(--red);
}

.gray {
    background: var(--gray);
}

.content {
    padding: 24px;
}

.cardx {
    background: rgba(17, 24, 39, .92);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: 0 16px 45px rgba(0, 0, 0, .22);
}

.cardx-pad {
    padding: 18px;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: 14px;
}

.kpi {
    padding: 18px;
    border-radius: 20px;
    background: linear-gradient(180deg, #111827, #0f172a);
    border: 1px solid var(--line);
    cursor: pointer;
}

.kpi .label {
    font-size: 13px;
    color: var(--muted);
}

.kpi .value {
    font-size: 30px;
    font-weight: 800;
    margin-top: 8px;
}

.filterbar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.form-select,
.form-control {
    background: #0b1220;
    color: var(--text);
    border-color: #273449;
}

.form-select:focus,
.form-control:focus {
    background: #0b1220;
    color: white;
    border-color: #38bdf8;
    box-shadow: 0 0 0 .2rem rgba(56, 189, 248, .15);
}

.mapbox {
    height: 560px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--line);
}

#map,
#fullmap {
    height: 100%;
    width: 100%;
}

.table-dark {
    --bs-table-bg: #111827;
    --bs-table-striped-bg: #0f172a;
    border-color: var(--line);
}

.badge-run {
    background: var(--green);
}

.badge-stop {
    background: var(--yellow);
}

.badge-error {
    background: var(--red);
}

.badge-off {
    background: var(--gray);
    color: #111827;
}

.list-card {
    max-height: 360px;
    overflow: auto;
}

.item-row {
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
}

.item-row:last-child {
    border-bottom: 0;
}

.muted {
    color: var(--muted);
}

.tabs-card .nav-link {
    color: #cbd5e1;
    border: 0;
    border-radius: 12px;
}

.tabs-card .nav-link.active {
    background: #1e293b;
    color: white;
}

.sensor-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 12px;
}

.sensor {
    background: #0b1220;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 14px;
}

.sensor .v {
    font-size: 22px;
    font-weight: 800;
}

.sensor .u {
    font-size: 12px;
    color: var(--muted);
}

.tree {
    background: #0b1220;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 14px;
}

.tree details {
    margin: 8px 0;
}

.tree summary {
    cursor: pointer;
    color: #e5e7eb;
}

.panel-title {
    font-weight: 800;
    font-size: 17px;
    margin-bottom: 12px;
}

.btn-soft {
    background: #1e293b;
    color: #e5e7eb;
    border: 1px solid #334155;
}

.btn-soft:hover {
    background: #334155;
    color: white;
}

@media(max-width:1100px) {
    .sidebar {
        width: 82px;
    }

    .brand div:not(.brand-logo),
    .side-nav a span,
    .nav-label {
        display: none;
    }

    .main {
        margin-left: 82px;
        width: calc(100% - 82px);
    }

    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sensor-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}/* ===== PATCH UI LAN 1 - responsive, dashboard, charts ===== */
.mobile-menu-btn{display:none;position:fixed;left:12px;top:12px;z-index:1300;border:1px solid var(--line);background:#0b1220;color:#fff;border-radius:12px;padding:8px 10px}.sidebar-backdrop{display:none}.side-nav a span{display:inline}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:16px;align-items:start}.chart-card{min-height:420px}.chart-wrap{position:relative;height:360px}.chart-wrap-lg{position:relative;height:520px}.toolbar-slim{display:flex;gap:10px;flex-wrap:wrap;align-items:end}.side-list{transition:all .25s ease}.hide-list .side-list{display:none!important}.hide-list .main-panel{width:100%!important;flex:0 0 100%!important}.map-side-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.mini-map-info{font-size:12px;color:var(--muted);margin-top:8px}.dashboard-lists{margin-top:16px}.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}.auth-card{width:min(460px,100%)}.metric-checks{display:grid;grid-template-columns:repeat(4,minmax(90px,1fr));gap:8px;max-height:220px;overflow:auto}.metric-checks label{background:#0b1220;border:1px solid #273449;border-radius:12px;padding:8px;font-size:13px}.device-checks{max-height:220px;overflow:auto;background:#0b1220;border:1px solid #273449;border-radius:14px;padding:10px}.device-checks label{display:block;padding:6px 4px}.hidden-soft{display:none!important}.dashboard-grid .mapbox{height:360px}.form-select option{background:#0b1220;color:#fff}@media(max-width:1200px){.dashboard-grid{grid-template-columns:1fr}.dashboard-grid .mapbox{height:320px}.kpi-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:768px){.mobile-menu-btn{display:block}.sidebar{transform:translateX(-105%);transition:.25s ease;width:280px}.sidebar-open .sidebar{transform:translateX(0)}.sidebar-open .sidebar-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:900}.main{margin-left:0;width:100%}.topbar{padding:14px 14px 14px 58px;align-items:flex-start}.topbar h1{font-size:18px}.content{padding:14px}.kpi-grid{grid-template-columns:repeat(2,1fr);gap:10px}.kpi{padding:13px}.kpi .value{font-size:24px}.sensor-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}.dashboard-grid .mapbox{height:280px}.top-actions{display:none}.filterbar .form-select,.filterbar .form-control,.filterbar .btn{width:100%;max-width:100%!important}.cardx{border-radius:16px}.cardx-pad{padding:14px}.chart-wrap,.chart-wrap-lg{height:330px}.metric-checks{grid-template-columns:repeat(2,1fr)}}@media(max-width:420px){.kpi-grid,.sensor-grid{grid-template-columns:1fr}.chart-wrap,.chart-wrap-lg{height:280px}}

/* ===== PATCH LAN 1B - auth, chart, mobile polish ===== */
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:1fr 480px;gap:28px;align-items:center;padding:40px;max-width:1180px;margin:0 auto}.auth-hero h1{font-size:48px;font-weight:900;margin:18px 0 8px}.auth-hero p{font-size:18px;color:var(--muted);max-width:560px}.brand-logo.big{width:76px;height:76px;border-radius:24px;font-size:34px}.auth-card{width:100%;}.auth-card.wide{max-width:760px;margin:auto}.sub-panel{background:#0b1220;border:1px solid #273449;border-radius:18px;padding:14px}.chart-page .nav-pills{gap:8px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}.chart-page .nav-pills .nav-link{white-space:nowrap}.chart-page .chart-wrap-lg canvas{max-width:100%}.device-checks label input,.metric-checks label input{margin-right:6px}.device-checks label:hover,.metric-checks label:hover{border-color:#38bdf8;background:#0f1b2e}.table-responsive{border-radius:18px}.topbar,.sidebar,.cardx{will-change:auto}.badge{font-weight:700}.device-checks,.metric-checks{scrollbar-width:thin}.device-checks::-webkit-scrollbar,.metric-checks::-webkit-scrollbar{height:8px;width:8px}.device-checks::-webkit-scrollbar-thumb,.metric-checks::-webkit-scrollbar-thumb{background:#334155;border-radius:8px}
@media(max-width:900px){.auth-wrap{grid-template-columns:1fr;padding:22px}.auth-hero{display:none}.auth-card.wide{max-width:100%}.tabs-card .nav-pills{display:flex;overflow-x:auto;flex-wrap:nowrap}.tabs-card .nav-link{white-space:nowrap}.table{font-size:13px}.toolbar-slim>*{width:100%!important;max-width:100%!important}}


/* ===== R5 refinements ===== */
.dashboard-device-list{max-height:520px;overflow:auto}
.device-hero-row{display:grid;grid-template-columns:1.2fr 1fr .5fr;gap:16px;align-items:center}
.device-command-center{text-align:center;background:#0b1220;border:1px solid var(--line);border-radius:18px;padding:14px}
.status-line{font-size:15px}
.position-1-grid{grid-template-columns:repeat(7,minmax(120px,1fr))}
.control-stack{display:flex;flex-direction:column;gap:12px}
.control-row{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#0b1220;border:1px solid var(--line);border-radius:16px;padding:12px}
.control-row .btn-group{flex-wrap:wrap;justify-content:flex-end}
.sub-panel{background:#0b1220;border:1px solid var(--line);border-radius:16px;padding:14px}
.toolbar-slim{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.chart-wrap-lg{height:420px}
.mini-map-info{font-size:12px;color:var(--muted);margin-top:8px}
.map-side-title{display:flex;align-items:center;justify-content:space-between;gap:10px}
@media(max-width:1200px){.device-hero-row{grid-template-columns:1fr}.position-1-grid{grid-template-columns:repeat(2,minmax(120px,1fr))}.control-row{flex-direction:column;align-items:flex-start}.control-row .btn-group{width:100%}.control-row .btn{flex:1}.dashboard-grid{grid-template-columns:1fr}.side-list{order:-1}.mapbox{height:320px}}
@media(max-width:700px){.position-1-grid,.sensor-grid{grid-template-columns:1fr}.device-command-center .btn-lg{width:120px}.top-actions{display:none}.content{padding:14px}.cardx-pad{padding:14px}.filterbar .form-select,.filterbar .form-control,.filterbar .btn{max-width:none!important;width:100%}}

/* ===== Rebuild theo YeuCau.zip ===== */
.filter-row{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}.filter-row>.form-select,.filter-row>.form-control{max-width:230px}.filter-row .btn{min-width:86px}.metric-pills.horizontal{display:flex;gap:8px;flex-wrap:wrap;max-height:118px;overflow:auto;min-width:260px;max-width:520px}.metric-pill{display:flex;gap:6px;align-items:flex-start;background:#0b1220;border:1px solid #273449;border-radius:12px;padding:8px 10px;font-size:12px;min-width:138px}.metric-pill b{color:#e5e7eb}.metric-pill span{display:block;color:#94a3b8}.device-close{position:fixed;right:24px;top:88px;z-index:1200;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#ef4444;color:#fff;font-size:28px;font-weight:900;box-shadow:0 12px 30px rgba(0,0,0,.35)}.device-compact{padding:16px}.compact-title-row{display:grid;grid-template-columns:minmax(220px,1fr) auto auto;gap:14px;align-items:center}.device-command-mini{background:#0b1220;border:1px solid var(--line);border-radius:14px;padding:10px 14px;text-align:center}.compact-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end}.compact-sensors{grid-template-columns:repeat(7,minmax(105px,1fr));gap:10px}.compact-sensors .sensor,.compact-online .sensor{padding:10px}.compact-sensors .sensor .v,.compact-online .sensor .v{font-size:18px}.compact-sensors .muted,.compact-online .muted{font-size:12px}.compact-online{grid-template-columns:repeat(4,minmax(130px,1fr));gap:10px}.compact-control{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center}.two-state{display:flex;gap:6px}.two-state .btn{min-width:56px}.chart-wrap{position:relative;height:330px}@media(max-width:1200px){.compact-title-row{grid-template-columns:1fr}.compact-actions{justify-content:flex-start}.compact-sensors{grid-template-columns:repeat(2,1fr)}.compact-online{grid-template-columns:repeat(2,1fr)}.filter-row>.form-select,.filter-row>.form-control{max-width:100%;width:100%}.filter-row{display:grid;grid-template-columns:1fr}.metric-pills.horizontal{max-width:100%;width:100%}.compact-control{grid-template-columns:1fr}.two-state{width:100%}.two-state .btn{flex:1}}

/* ===== CHART & SETTINGS REBUILD ===== */
.chart-pro-page .chart-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.chart-pro-page .chart-topbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;overflow-x:auto;padding-bottom:4px}
.chart-pro-page .compact-tabs{gap:6px;flex-wrap:nowrap;white-space:nowrap;margin:0}
.chart-pro-page .compact-tabs .nav-link{padding:7px 12px;font-size:13px;border-radius:12px}
.chart-control-one-line{display:grid;grid-template-columns:110px minmax(180px,1.1fr) 150px minmax(230px,1.5fr) auto auto;gap:8px;align-items:center;margin-bottom:10px}
.chart-control-one-line.history-line{grid-template-columns:145px minmax(220px,1.35fr) 100px minmax(220px,1.35fr) 160px 160px 130px auto auto}
.chart-control-one-line .mini-field{min-width:96px;max-width:170px}.chart-control-one-line .customer-field{max-width:160px}.chart-control-one-line .device-field{min-width:220px;max-width:280px}.chart-control-one-line .time-field{min-width:145px}.chart-control-one-line .mode-field{min-width:120px}.chart-control-one-line .action-btn{white-space:nowrap;min-height:31px}
.selector-dropdown{position:relative;min-width:180px}.selector-button{width:100%;height:32px;border:1px solid #273449;background:#0b1220;color:#e5e7eb;border-radius:9px;padding:4px 10px;font-size:12px;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.selector-button:after{content:'▾';float:right;color:#94a3b8}.selector-menu{display:none;position:absolute;top:36px;left:0;right:0;z-index:2000;background:#0b1220;border:1px solid #334155;border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.35);padding:7px;max-height:310px;overflow:auto;min-width:260px}.selector-dropdown.open .selector-menu{display:block}.selector-device .selector-menu{min-width:330px}.selector-item{display:flex;gap:8px;align-items:flex-start;padding:7px 8px;border-radius:9px;cursor:pointer;margin:0}.selector-item:hover{background:#111c2e}.selector-item input{margin-top:2px}.selector-item span{display:flex;flex-direction:column;line-height:1.2}.selector-item b{font-size:12px;color:#e5e7eb}.selector-item small{font-size:11px;color:#94a3b8}.selector-empty{color:#94a3b8;font-size:12px;padding:8px}.chart-wrap-xxl{position:relative;height:620px;background:#0b1220;border:1px solid #273449;border-radius:18px;padding:12px}.chart-wrap-xxl canvas{width:100%!important;height:100%!important}
.master-config-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px}.master-menu{display:flex;flex-direction:column;gap:8px}.master-form-grid{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:10px}.master-form-grid .wide{grid-column:1/-1}.config-hint{font-size:12px;color:#94a3b8;margin-top:3px}.settings-card-grid{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:14px}.settings-card-grid .cardx{min-height:155px}
@media(max-width:1500px){.chart-control-one-line,.chart-control-one-line.history-line{grid-template-columns:repeat(3,minmax(180px,1fr))}.chart-wrap-xxl{height:560px}.chart-control-one-line .mini-field,.chart-control-one-line .customer-field{max-width:100%}}
@media(max-width:900px){.chart-control-one-line,.chart-control-one-line.history-line{grid-template-columns:1fr}.selector-dropdown,.selector-menu{min-width:100%}.chart-wrap-xxl{height:420px}.master-config-grid{grid-template-columns:1fr}.master-form-grid{grid-template-columns:1fr}.settings-card-grid{grid-template-columns:1fr}}

/* =====================================================
   LIGHT THEME PATCH - BDC GMS
   Mục tiêu: giao diện sáng hơn, dễ xem ban ngày, giữ nguyên layout/function.
   ===================================================== */
:root {
    --bg: #f4f7fb;
    --panel: #ffffff;
    --panel2: #f8fafc;
    --line: #dbe4f0;
    --text: #0f172a;
    --muted: #64748b;
    --green: #16a34a;
    --yellow: #d97706;
    --red: #dc2626;
    --gray: #64748b;
    --blue: #0284c7;
    --violet: #7c3aed;
}

html, body {
    background: linear-gradient(135deg, #f8fbff 0%, #edf4ff 50%, #f7fafc 100%) !important;
    color: var(--text) !important;
}

.sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #f1f7ff 100%) !important;
    border-right: 1px solid #dbe4f0 !important;
    box-shadow: 8px 0 30px rgba(15, 23, 42, .06) !important;
}

.brand-title,
.side-nav a,
.topbar h1,
.panel-title,
.cardx h1,
.cardx h2,
.cardx h3,
.cardx h4,
.sensor .v,
.kpi .value {
    color: #0f172a !important;
}

.brand-sub,
.breadcrumb-lite,
.muted,
.sensor .u,
.kpi .label,
.item-row small,
.config-hint {
    color: #64748b !important;
}

.side-nav a {
    color: #334155 !important;
}

.side-nav a:hover,
.side-nav a.active {
    background: #e0f2fe !important;
    color: #075985 !important;
    box-shadow: inset 3px 0 0 #0284c7;
}

.nav-label {
    color: #64748b !important;
}

.topbar {
    background: rgba(255, 255, 255, .88) !important;
    border-bottom: 1px solid #dbe4f0 !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06) !important;
}

.cardx,
.sub-panel,
.tree,
.sensor,
.kpi,
.device-command-center,
.control-row,
.latest-card,
.config-card,
.settings-card-grid .cardx {
    background: #ffffff !important;
    border-color: #dbe4f0 !important;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .07) !important;
}

.kpi {
    background: linear-gradient(180deg, #ffffff, #f8fbff) !important;
}

.kpi:hover,
.sensor:hover,
.cardx:hover {
    border-color: #bae6fd !important;
}

.status-pill,
.user-pill,
.metric-pill,
.device-checks,
.metric-checks label,
.selector-button,
.selector-menu,
.selector-item,
.chart-wrap-xxl,
.chart-wrap,
.chart-wrap-lg,
.chart-wrap-full,
.device-command-mini,
.metric-dropdown {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #dbe4f0 !important;
}

.form-select,
.form-control,
textarea.form-control,
input.form-control {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

.form-select:focus,
.form-control:focus,
textarea.form-control:focus {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 .2rem rgba(56, 189, 248, .18) !important;
}

.form-select option {
    background: #ffffff !important;
    color: #0f172a !important;
}

.btn-soft {
    background: #eef6ff !important;
    color: #075985 !important;
    border-color: #bae6fd !important;
}

.btn-soft:hover {
    background: #dff1ff !important;
    color: #075985 !important;
}

.table,
.table-dark {
    --bs-table-bg: #ffffff !important;
    --bs-table-color: #0f172a !important;
    --bs-table-striped-bg: #f1f5f9 !important;
    --bs-table-striped-color: #0f172a !important;
    --bs-table-hover-bg: #e0f2fe !important;
    --bs-table-hover-color: #0f172a !important;
    border-color: #dbe4f0 !important;
    color: #0f172a !important;
}

.table-dark th,
.table-dark td,
.table th,
.table td {
    border-color: #dbe4f0 !important;
}

.tabs-card .nav-link,
.chart-page .nav-pills .nav-link,
.chart-pro-page .compact-tabs .nav-link {
    color: #334155 !important;
    background: #ffffff !important;
    border: 1px solid #dbe4f0 !important;
}

.tabs-card .nav-link.active,
.chart-page .nav-pills .nav-link.active,
.chart-pro-page .compact-tabs .nav-link.active {
    background: #0284c7 !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
}

.badge-run { background: #16a34a !important; color: #fff !important; }
.badge-stop { background: #f59e0b !important; color: #111827 !important; }
.badge-error { background: #dc2626 !important; color: #fff !important; }
.badge-off { background: #94a3b8 !important; color: #0f172a !important; }

.alert-danger,
.alert-success,
.alert-warning,
.alert-info {
    border-radius: 16px !important;
}

.mapbox,
#map,
#fullmap {
    background: #eaf3ff !important;
}

.mobile-menu-btn {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #dbe4f0 !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12) !important;
}

.auth-card {
    background: #ffffff !important;
    border: 1px solid #dbe4f0 !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .12) !important;
}

.auth-hero h1,
.auth-card h3 { color: #0f172a !important; }
.auth-hero p { color: #475569 !important; }

.selector-item:hover,
.device-checks label:hover,
.metric-checks label:hover {
    background: #f0f9ff !important;
    border-color: #7dd3fc !important;
}

::-webkit-scrollbar-thumb { background: #cbd5e1 !important; }
::-webkit-scrollbar-track { background: #f8fafc !important; }


/* ===== DASHBOARD STATUS COLOR PATCH - E2 machine status / E1 VBOX online ===== */
.kpi.kpi-total .value{color:#0284c7!important}
.kpi.kpi-running .value{color:#16a34a!important}
.kpi.kpi-stopped .value{color:#1d4ed8!important}
.kpi.kpi-error .value{color:#dc2626!important}
.kpi.kpi-offline .value{color:#64748b!important}
.kpi.kpi-total{border-color:rgba(2,132,199,.30)!important;background:linear-gradient(180deg,#eff6ff,#ffffff)!important}
.kpi.kpi-running{border-color:rgba(22,163,74,.30)!important;background:linear-gradient(180deg,#f0fdf4,#ffffff)!important}
.kpi.kpi-stopped{border-color:rgba(29,78,216,.30)!important;background:linear-gradient(180deg,#eef2ff,#ffffff)!important}
.kpi.kpi-error{border-color:rgba(220,38,38,.30)!important;background:linear-gradient(180deg,#fef2f2,#ffffff)!important}
.kpi.kpi-offline{border-color:rgba(100,116,139,.30)!important;background:linear-gradient(180deg,#f8fafc,#ffffff)!important}
.badge-run{background:#16a34a!important;color:#fff!important}
.badge-stop{background:#1d4ed8!important;color:#fff!important}
.badge-error{background:#dc2626!important;color:#fff!important}
.badge-off{background:#64748b!important;color:#fff!important}


/* ===== RBAC + MOBILE OPERATION PATCH ===== */
.vbox-status{
    display:inline-block;
    margin-top:4px;
    padding:3px 8px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}
.vbox-online{background:#dcfce7;color:#15803d;border:1px solid #86efac}
.vbox-offline{background:#f1f5f9;color:#64748b;border:1px solid #cbd5e1}

.device-permission-box{
    max-height:340px;
    overflow:auto;
    border:1px solid var(--line);
    border-radius:16px;
    padding:8px;
    background:#f8fafc;
}
.device-permission-item{
    display:flex;
    gap:10px;
    align-items:flex-start;
    padding:9px;
    border-radius:12px;
    cursor:pointer;
}
.device-permission-item:hover{background:#e0f2fe}
.device-permission-item small{display:block;color:#64748b;font-size:12px}

.manual-error-form .form-label{font-weight:700}

@media(max-width: 768px){
    body{font-size:14px}
    .content{padding:12px!important}
    .topbar{
        height:auto!important;
        min-height:62px;
        padding:12px 14px 12px 56px!important;
        align-items:flex-start!important;
        gap:8px!important;
    }
    .topbar h1{font-size:18px!important}
    .breadcrumb-lite{font-size:12px!important}
    .top-actions{display:none!important}

    .filterbar{
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:8px!important;
        padding:10px!important;
    }
    .filterbar .form-select,
    .filterbar .form-control,
    .filterbar .btn{
        max-width:none!important;
        width:100%!important;
    }

    .kpi-grid{
        grid-template-columns:repeat(2,1fr)!important;
        gap:8px!important;
    }
    .kpi{
        padding:12px!important;
        border-radius:16px!important;
    }
    .kpi .value{font-size:28px!important}

    .dashboard-grid{
        display:block!important;
    }
    .side-list{
        margin-top:12px!important;
    }

    .dashboard-device-list table,
    .mobile-card-table table{
        border:0!important;
    }
    .dashboard-device-list thead,
    .mobile-card-table thead{
        display:none!important;
    }
    .dashboard-device-list tbody tr,
    .mobile-card-table tbody tr{
        display:block!important;
        margin-bottom:12px!important;
        border:1px solid #dbe4f0!important;
        border-radius:16px!important;
        background:#ffffff!important;
        box-shadow:0 10px 24px rgba(15,23,42,.07)!important;
        padding:8px!important;
    }
    .dashboard-device-list tbody td,
    .mobile-card-table tbody td{
        display:flex!important;
        justify-content:space-between!important;
        gap:12px!important;
        border:0!important;
        padding:8px 6px!important;
        text-align:right!important;
        white-space:normal!important;
    }
    .dashboard-device-list tbody td::before,
    .mobile-card-table tbody td::before{
        content:attr(data-label);
        font-weight:800;
        color:#64748b;
        text-align:left;
    }
    .dashboard-device-list .btn,
    .mobile-card-table .btn{
        width:100%;
        margin-top:4px;
    }

    .mapbox{height:260px!important}
    .sensor-grid{grid-template-columns:repeat(2,1fr)!important}

    .master-page-layout{
        grid-template-columns:1fr!important;
    }
    .master-side-card{
        position:static!important;
    }
    .master-hero{
        flex-direction:column!important;
    }
}

@media(max-width: 480px){
    .kpi-grid{grid-template-columns:1fr!important}
    .sensor-grid{grid-template-columns:1fr!important}
    .cardx-pad{padding:12px!important}
    .panel-title{font-size:16px!important}
}

/* ===== MOBILE SIDEBAR CLICK FIX ===== */
@media(max-width:768px){
    .sidebar{z-index:1200!important}
    .sidebar-backdrop{z-index:1100!important}
    .mobile-menu-btn{z-index:1300!important}
    body.sidebar-open{overflow:hidden}
    .side-nav a{min-height:44px}
}

/* ===== Menu consolidation patch: grouped sidebar ===== */
.side-nav-compact{gap:7px}
.nav-group{border:1px solid transparent;border-radius:16px;margin:2px 0;background:transparent;overflow:hidden}
.nav-group>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;color:var(--muted);cursor:pointer;font-weight:700;user-select:none;transition:.18s ease}
.nav-group>summary::-webkit-details-marker{display:none}
.nav-group>summary:after{content:'▾';margin-left:auto;color:#94a3b8;font-size:12px;transition:.18s ease}
.nav-group[open]>summary:after{transform:rotate(180deg)}
.nav-group>summary:hover,.nav-group.active-group>summary{background:rgba(56,189,248,.12);color:#e5f6ff}
.nav-sub{padding:2px 0 7px 12px;display:flex;flex-direction:column;gap:4px}
.nav-sub a{min-height:38px!important;padding:9px 12px!important;border-radius:12px!important;font-size:13px!important}
.nav-sub a i{font-size:15px!important;width:18px!important}
.nav-sub a span{white-space:normal!important;line-height:1.2}
.nav-group.active-group{background:rgba(15,23,42,.25);border-color:rgba(148,163,184,.16)}
.side-nav-compact>.nav-label{margin-top:12px}
@media(max-width:768px){.nav-group>summary{min-height:44px}.nav-sub a{min-height:42px!important}}

/* =====================================================
   MOBILE FIT PATCH - 2026-06-06
   Chỉ tinh chỉnh kích thước ô, icon, bảng và khoảng cách cho điện thoại.
   Không thay đổi nội dung/logic/chức năng trang.
   ===================================================== */
:root{
    --mobile-radius:14px;
    --mobile-gap:10px;
    --tap-size:44px;
}

img,svg,canvas,video,iframe{max-width:100%}
.bi{line-height:1;vertical-align:-.125em}
.side-nav i,.nav-group>summary i{width:22px;min-width:22px;text-align:center;font-size:18px}
.btn i,.panel-title i,.topbar i{font-size:1em;margin-right:4px}
.btn-sm i{font-size:.95em;margin-right:3px}

.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{vertical-align:middle}
.table th,.table td{max-width:360px;word-break:break-word;white-space:normal}
.text-nowrap{white-space:nowrap!important}
pre,code{white-space:pre-wrap;word-break:break-word}

.btn,.form-control,.form-select{min-height:38px}
.btn-sm,.form-control-sm,.form-select-sm{min-height:34px}
.form-label{margin-bottom:4px}
.badge{white-space:normal;line-height:1.25}

.cardx,.sensor,.kpi,.sub-panel{overflow:hidden}
.sensor .v,.kpi .value{overflow-wrap:anywhere;line-height:1.1}
.sensor .muted,.kpi .label{line-height:1.25}

@media(max-width: 768px){
    html,body{width:100%;max-width:100%;overflow-x:hidden}
    body{font-size:14px;line-height:1.35}

    .mobile-menu-btn{
        width:42px!important;height:42px!important;padding:0!important;
        display:flex!important;align-items:center!important;justify-content:center!important;
        border-radius:13px!important;left:10px!important;top:10px!important;
    }
    .mobile-menu-btn i{font-size:23px!important;margin:0!important}

    .sidebar{width:min(82vw,300px)!important;padding:14px!important}
    .brand{gap:10px!important;margin-bottom:14px!important}
    .brand-logo{width:38px!important;height:38px!important;border-radius:12px!important;font-size:18px!important}
    .brand-title{font-size:16px!important}.brand-sub{font-size:11px!important}
    .nav-label{margin:12px 8px 4px!important;font-size:10px!important}
    .side-nav{gap:5px!important}
    .side-nav a,.nav-group>summary{
        min-height:44px!important;padding:10px 11px!important;border-radius:13px!important;
        gap:10px!important;font-size:14px!important;
    }
    .side-nav i,.nav-group>summary i{width:21px!important;min-width:21px!important;font-size:18px!important}
    .nav-sub{padding-left:8px!important;padding-bottom:6px!important}
    .nav-sub a{font-size:13px!important;padding:9px 10px!important}

    .main{margin-left:0!important;width:100%!important;max-width:100%!important}
    .topbar{
        position:sticky!important;min-height:60px!important;height:auto!important;
        padding:10px 12px 10px 58px!important;align-items:center!important;
    }
    .topbar h1{font-size:17px!important;line-height:1.2!important;word-break:break-word}
    .breadcrumb-lite{font-size:11px!important;margin-top:2px!important}
    .content{padding:10px!important}

    .cardx{border-radius:var(--mobile-radius)!important;margin-bottom:10px!important}
    .cardx-pad{padding:12px!important}
    .panel-title{font-size:15px!important;margin-bottom:9px!important;line-height:1.25}

    .kpi-grid,.dashboard-compact-kpi{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:var(--mobile-gap)!important;
    }
    .kpi{padding:10px!important;border-radius:14px!important;min-height:82px!important}
    .kpi .label{font-size:12px!important}
    .kpi .value{font-size:24px!important;margin-top:6px!important}

    .sensor-grid,.compact-sensors,.compact-online,.position-1-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:var(--mobile-gap)!important;
    }
    .sensor{padding:10px!important;border-radius:13px!important;min-height:72px!important}
    .sensor .v,.compact-sensors .sensor .v,.compact-online .sensor .v{font-size:18px!important}
    .sensor .u,.sensor .muted,.compact-sensors .muted,.compact-online .muted{font-size:11px!important}

    .filterbar,.filter-row,.toolbar-slim,.chart-pro-page .chart-topbar,.chart-title-row{
        display:grid!important;grid-template-columns:1fr!important;gap:8px!important;width:100%!important;
    }
    .filterbar>* , .filter-row>* , .toolbar-slim>* , .chart-control-one-line>*{
        width:100%!important;max-width:100%!important;min-width:0!important;
    }
    .form-control,.form-select,.btn{font-size:14px!important;border-radius:11px!important}
    .btn{min-height:var(--tap-size)!important;padding:8px 12px!important;display:inline-flex;align-items:center;justify-content:center;gap:5px}
    .btn-sm{min-height:38px!important;padding:6px 10px!important;font-size:13px!important}
    .btn i{margin-right:0!important}

    .row{--bs-gutter-x:10px;--bs-gutter-y:10px}
    .col,.col-6,.col-auto{min-width:0}

    .dashboard-grid{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
    .dashboard-grid .mapbox,.mapbox{height:240px!important;border-radius:14px!important}
    .list-card,.dashboard-device-list{max-height:none!important;overflow:visible!important}

    .chart-wrap,.chart-wrap-lg,.chart-wrap-xxl,.chart-wrap-full{
        height:300px!important;min-height:260px!important;border-radius:14px!important;padding:8px!important;
    }
    .chart-pro-page .compact-tabs{overflow-x:auto!important;display:flex!important;grid-template-columns:unset!important;flex-wrap:nowrap!important}
    .chart-pro-page .compact-tabs .nav-link{padding:8px 10px!important;font-size:12px!important}
    .selector-menu{position:fixed!important;left:10px!important;right:10px!important;top:auto!important;bottom:12px!important;max-height:55vh!important;min-width:0!important;width:auto!important}
    .selector-button{height:40px!important;font-size:13px!important}

    .compact-title-row,.device-hero-row,.compact-control,.master-config-grid,.master-form-grid,.settings-card-grid{
        grid-template-columns:1fr!important;gap:10px!important;
    }
    .compact-actions,.two-state,.control-row .btn-group{width:100%!important;display:flex!important;gap:8px!important;flex-wrap:wrap!important}
    .compact-actions .btn,.two-state .btn,.control-row .btn-group .btn{flex:1 1 0!important;min-width:0!important}
    .device-command-mini,.device-command-center{padding:10px!important;border-radius:13px!important}
    .device-command-center .btn-lg{width:110px!important;height:46px!important;font-size:15px!important}
    .state-btn{min-width:64px!important}
    .setpoint-send-btn{width:100%!important;margin-top:6px!important}

    .device-close{right:10px!important;top:70px!important;width:38px!important;height:38px!important;font-size:24px!important;z-index:1050!important}

    .metric-pills.horizontal{display:grid!important;grid-template-columns:1fr!important;max-height:180px!important;min-width:0!important;width:100%!important}
    .metric-pill{min-width:0!important;width:100%!important;font-size:12px!important;padding:8px!important}
    .device-checks,.metric-checks,.device-permission-box{max-height:240px!important;border-radius:13px!important}
    .metric-checks{grid-template-columns:1fr!important}

    .auth-wrap{min-height:100dvh!important;padding:14px!important;display:grid!important;grid-template-columns:1fr!important;place-items:center!important}
    .auth-card{border-radius:16px!important}.auth-card .cardx-pad,.auth-card .card-body{padding:16px!important}
    .brand-logo.big{width:58px!important;height:58px!important;border-radius:18px!important;font-size:26px!important}

    .master-menu{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
    .master-menu .btn{justify-content:flex-start!important}
    .map-side-title{align-items:flex-start!important;flex-direction:column!important}

    #fullmap{border-radius:14px!important}
    .cardx[style*="position:fixed"]{
        position:static!important;left:auto!important;right:auto!important;bottom:auto!important;min-width:0!important;width:100%!important;margin-top:10px!important;
    }
}

@media(max-width: 560px){
    .table-responsive{border-radius:14px!important;border:1px solid #dbe4f0!important;background:#fff!important}
    .mobile-card-table table,.dashboard-device-list table{width:100%!important;min-width:0!important}
    .mobile-card-table thead,.dashboard-device-list thead{display:none!important}
    .mobile-card-table tbody tr,.dashboard-device-list tbody tr{
        display:block!important;margin:10px!important;padding:8px!important;border:1px solid #dbe4f0!important;
        border-radius:14px!important;background:#fff!important;box-shadow:0 8px 18px rgba(15,23,42,.06)!important;
    }
    .mobile-card-table tbody td,.dashboard-device-list tbody td{
        display:flex!important;justify-content:space-between!important;align-items:flex-start!important;
        gap:10px!important;padding:7px 4px!important;border:0!important;text-align:right!important;
        white-space:normal!important;max-width:none!important;
    }
    .mobile-card-table tbody td::before,.dashboard-device-list tbody td::before{
        content:attr(data-label);font-weight:700;color:#64748b;text-align:left;min-width:38%;
    }
    .mobile-card-table tbody td:not([data-label])::before,.dashboard-device-list tbody td:not([data-label])::before{content:'';display:none}
    .mobile-card-table tbody td .btn,.dashboard-device-list tbody td .btn{width:100%;margin-top:4px}
}

@media(max-width: 430px){
    .content{padding:8px!important}
    .topbar{padding-left:56px!important}
    .kpi-grid,.dashboard-compact-kpi,.sensor-grid,.compact-sensors,.compact-online,.position-1-grid{
        grid-template-columns:1fr!important;
    }
    .kpi{min-height:74px!important}.kpi .value{font-size:22px!important}
    .sensor{min-height:66px!important}.sensor .v{font-size:17px!important}
    .chart-wrap,.chart-wrap-lg,.chart-wrap-xxl,.chart-wrap-full{height:260px!important}
    .mapbox,.dashboard-grid .mapbox{height:220px!important}
    .btn{width:100%}
    .d-flex.gap-2,.d-flex.gap-3{gap:8px!important;flex-wrap:wrap!important}
    .d-flex.gap-2>.btn,.d-flex.gap-3>.btn{flex:1 1 100%!important}
}


/* =====================================================
   MOBILE BALANCED FINAL PATCH - 2026-06-06
   Mục tiêu: gọn theo chiều dọc, vừa màn hình ngang, vẫn đẹp và dễ nhìn.
   ===================================================== */
@media (max-width: 768px){
  html,body{overflow-x:hidden!important}
  body{font-size:13px!important}

  /* Sidebar / topbar gọn nhưng vẫn rõ */
  .mobile-menu-btn{width:38px!important;height:38px!important;border-radius:12px!important;top:8px!important;left:8px!important}
  .mobile-menu-btn i{font-size:20px!important}
  .topbar{min-height:52px!important;padding:8px 10px 8px 54px!important}
  .topbar h1{font-size:15px!important;line-height:1.15!important}
  .breadcrumb-lite{font-size:10px!important}
  .content{padding:8px!important}
  .side-nav a,.nav-group>summary{min-height:38px!important;padding:8px 10px!important;font-size:13px!important;border-radius:12px!important;gap:8px!important}
  .side-nav i,.nav-group>summary i{width:18px!important;min-width:18px!important;font-size:15px!important}
  .nav-sub a{padding:7px 9px!important;font-size:12px!important}

  /* Tabs / pills: nhỏ vừa phải, tự chia hàng để đỡ cuộn dọc */
  .tabs-card .nav,
  .nav.nav-pills,
  .nav.nav-tabs,
  .compact-tabs,
  .chart-tabs,
  .health-tabs,
  .admin-user-tabs{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:6px!important;
    width:100%!important;
    margin:0 0 8px 0!important;
    padding:0!important;
    overflow:visible!important;
  }
  .tabs-card .nav > li,
  .nav.nav-pills > li,
  .nav.nav-tabs > li,
  .compact-tabs > li,
  .chart-tabs > li,
  .health-tabs > li,
  .admin-user-tabs > li,
  .tabs-card .nav .nav-item,
  .nav.nav-pills .nav-item,
  .nav.nav-tabs .nav-item{
    width:100%!important;min-width:0!important;margin:0!important;
  }
  .tabs-card .nav .nav-link,
  .nav.nav-pills .nav-link,
  .nav.nav-tabs .nav-link,
  .compact-tabs .nav-link,
  .chart-tabs .nav-link,
  .health-tabs .nav-link,
  .admin-user-tabs .nav-link{
    display:flex!important;align-items:center!important;justify-content:center!important;
    width:100%!important;min-height:34px!important;padding:4px 6px!important;
    border-radius:10px!important;font-size:11px!important;line-height:1.08!important;
    white-space:normal!important;text-align:center!important;word-break:break-word!important;
    overflow:hidden!important;
  }
  .tabs-card .nav .nav-link i,
  .nav.nav-pills .nav-link i,
  .nav.nav-tabs .nav-link i,
  .compact-tabs .nav-link i{font-size:12px!important;margin-right:3px!important}

  /* Data card / KPI: ưu tiên nhiều cột hơn để bớt cuộn dọc */
  .kpi-grid,.dashboard-compact-kpi{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
  .kpi{min-height:60px!important;padding:7px!important;border-radius:12px!important}
  .kpi .label{font-size:10px!important;line-height:1.1!important}
  .kpi .value{font-size:17px!important;line-height:1.05!important;margin-top:4px!important}

  .sensor-grid,.compact-sensors,.compact-online,.position-1-grid,.settings-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .sensor{min-height:58px!important;padding:7px!important;border-radius:12px!important}
  .sensor .v,.compact-sensors .sensor .v,.compact-online .sensor .v{font-size:15px!important;line-height:1.05!important}
  .sensor .u,.sensor .muted,.compact-sensors .muted,.compact-online .muted{font-size:10px!important;line-height:1.05!important}

  /* Form / toolbar gọn, hạn chế xuống dòng */
  .filterbar,.filter-row,.toolbar-slim,.chart-pro-page .chart-topbar,.chart-title-row{
    display:flex!important;flex-wrap:wrap!important;gap:6px!important;align-items:center!important;
  }
  .filterbar>* , .filter-row>* , .toolbar-slim>*{width:auto!important;min-width:110px!important;max-width:100%!important}
  .btn,.form-control,.form-select{min-height:34px!important;font-size:12px!important;border-radius:10px!important}
  .btn{padding:6px 10px!important;gap:4px!important}
  .btn-sm{min-height:30px!important;font-size:11px!important;padding:4px 8px!important;border-radius:8px!important}
  .btn i{font-size:12px!important;margin-right:2px!important}

  .chart-wrap,.chart-wrap-lg,.chart-wrap-xxl,.chart-wrap-full{height:240px!important;min-height:220px!important;padding:6px!important;border-radius:12px!important}
  .mapbox,.dashboard-grid .mapbox{height:200px!important}

  /* Table mobile card gọn hơn */
  .table{font-size:12px!important}
  .mobile-card-table tbody tr,.dashboard-device-list tbody tr{margin:6px!important;padding:6px!important;border-radius:12px!important}
  .mobile-card-table tbody td,.dashboard-device-list tbody td{padding:5px 2px!important;font-size:11px!important;gap:8px!important}
  .mobile-card-table tbody td::before,.dashboard-device-list tbody td::before{font-size:10px!important;min-width:34%!important}
}

@media (max-width: 430px){
  .topbar h1{font-size:14px!important}
  .tabs-card .nav,
  .nav.nav-pills,
  .nav.nav-tabs,
  .compact-tabs,
  .chart-tabs,
  .health-tabs,
  .admin-user-tabs{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important}
  .tabs-card .nav .nav-link,
  .nav.nav-pills .nav-link,
  .nav.nav-tabs .nav-link,
  .compact-tabs .nav-link,
  .chart-tabs .nav-link,
  .health-tabs .nav-link,
  .admin-user-tabs .nav-link{font-size:10.2px!important;min-height:32px!important;padding:4px!important;border-radius:9px!important}

  .kpi-grid,.dashboard-compact-kpi{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}
  .sensor-grid,.compact-sensors,.compact-online,.position-1-grid,.settings-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}
  .kpi{min-height:56px!important;padding:6px!important}.kpi .label{font-size:9.6px!important}.kpi .value{font-size:16px!important}
  .sensor{min-height:54px!important;padding:6px!important}.sensor .v{font-size:14px!important}.sensor .u,.sensor .muted{font-size:9.6px!important}
  .filterbar>* , .filter-row>* , .toolbar-slim>*{min-width:96px!important}
  .chart-wrap,.chart-wrap-lg,.chart-wrap-xxl,.chart-wrap-full{height:220px!important;min-height:210px!important}
}