/* ==========================================================================
   CSS SYSTEM: ENTERPRISE TELECOM KPI DASHBOARD (LIGHT EXECUTIVE THEME)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
    /* Color Palette HSL Tailored (Elegant Light Theme) */
    --bg-primary: #F4F6F9;
    --bg-sidebar: #FFFFFF;
    --bg-card: #FFFFFF;
    --border-color: #E2E8F0;
    
    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-muted: #94A3B8;
    
    --accent-blue: #0D6EFD;
    --accent-cyan: #0DCAF0;
    --accent-blue-soft: rgba(13, 110, 253, 0.06);
    --accent-cyan-soft: rgba(13, 202, 240, 0.08);
    
    --success: #10B981;
    --success-soft: #ECFDF5;
    --warning: #F59E0B;
    --warning-soft: #FEF3C7;
    --danger: #EF4444;
    --danger-soft: #FEE2E2;
    
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
    
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 76px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    overflow-x: hidden;
    height: 100vh;
    display: flex;
}

/* ==========================================================================
   LAYOUT STRUCTURE
   ========================================================================== */

#app-container {
    display: flex;
    width: 100vw;
    height: 100vh;
    min-width: 0;
}

/* Sidebar Styling */
#sidebar {
    width: var(--sidebar-width);
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    height: 100%;
    z-index: 10;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
    overflow: hidden;
    transition: width var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal);
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
    padding-left: 8px;
}

.logo-icon {
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 18px;
    font-family: var(--font-heading);
}

.logo-text h1 {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--text-primary);
    line-height: 1.1;
}

.logo-text p {
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 500;
}

.icon-action-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: white;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
    flex: 0 0 36px;
}

.icon-action-btn:hover {
    color: var(--accent-blue);
    border-color: rgba(13, 110, 253, 0.28);
    background: var(--accent-blue-soft);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.body-sidebar-collapsed #sidebar {
    width: var(--sidebar-collapsed-width);
    padding-left: 12px;
    padding-right: 12px;
}

.body-sidebar-collapsed .logo-container {
    justify-content: center;
    padding-left: 0;
}

.body-sidebar-collapsed .logo-text,
.body-sidebar-collapsed .tab-btn span,
.body-sidebar-collapsed .sidebar-metadata-panel {
    display: none;
}

.body-sidebar-collapsed .tab-btn {
    justify-content: center;
    padding: 11px 0;
}

.body-sidebar-collapsed .tab-btn i {
    font-size: 17px;
}

/* Tab Switching buttons */
.tab-navigation {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 6px;
    margin-bottom: 16px;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.65) transparent;
}

.tab-navigation::-webkit-scrollbar {
    width: 6px;
}

.tab-navigation::-webkit-scrollbar-track {
    background: transparent;
}

.tab-navigation::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.55);
    border-radius: 999px;
}

.sidebar-nav-scroll-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 28px;
    margin: 0 0 6px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: #F8FAFC;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
    flex: 0 0 auto;
}

.sidebar-nav-scroll-btn.visible {
    display: flex;
}

.sidebar-nav-scroll-btn:hover {
    border-color: rgba(13, 110, 253, 0.28);
    background: var(--accent-blue-soft);
    color: var(--accent-blue);
}

.sidebar-nav-scroll-btn:disabled {
    opacity: 0.42;
    cursor: default;
    color: var(--text-muted);
}

.sidebar-nav-scroll-btn:disabled:hover {
    border-color: var(--border-color);
    background: #F8FAFC;
    color: var(--text-muted);
}

#sidebar-nav-scroll-down {
    margin: 6px 0 0;
}

.body-sidebar-collapsed .sidebar-nav-scroll-btn {
    width: 100%;
}

.tab-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: var(--transition-fast);
}

.tab-btn span {
    white-space: nowrap;
}

.tab-btn i {
    font-size: 15px;
}

.tab-btn:hover {
    background-color: #F1F5F9;
    color: var(--text-primary);
}

.tab-btn.active {
    background-color: var(--accent-blue-soft);
    color: var(--accent-blue);
    font-weight: 600;
}

.complaint-dashboard {
    gap: 16px;
}

.complaint-toolbar {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.complaint-input-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, minmax(150px, 1fr));
    gap: 12px;
    align-items: end;
}

.complaint-search-field {
    grid-column: 1 / -1;
    position: relative;
}

.complaint-address-line {
    min-height: 20px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.45;
}

.complaint-place-results {
    position: absolute;
    z-index: 1200;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    display: none;
    max-height: 260px;
    overflow: auto;
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: 0 12px 28px rgba(15,23,42,0.14);
}

.complaint-place-results.active {
    display: block;
}

.complaint-place-result {
    width: 100%;
    border: 0;
    border-bottom: 1px solid #E2E8F0;
    background: #FFFFFF;
    padding: 10px 12px;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

.complaint-place-result:hover,
.complaint-place-result:focus {
    background: #F1F5F9;
    outline: none;
}

.complaint-place-result small {
    display: block;
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 11px;
}

.complaint-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.complaint-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.75fr);
    gap: 16px;
    align-items: stretch;
}

.complaint-map-card,
.complaint-summary-card {
    min-height: 540px;
}

#complaint-map-element {
    width: 100%;
    height: 486px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.complaint-summary-text {
    width: 100%;
    height: 486px;
    resize: vertical;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 14px;
    color: var(--text-primary);
    background: #FFFFFF;
    font-family: "Segoe UI", "Plus Jakarta Sans", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.65;
    white-space: pre-wrap;
}

.complaint-alarm-box {
    min-height: 230px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    background: #F8FAFC;
    font-size: 13px;
    line-height: 1.5;
    overflow: auto;
}

.complaint-live-alarm-counts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 10px;
}

.complaint-live-alarm-counts span {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 6px 7px;
    background: #FFFFFF;
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 700;
}

.complaint-live-alarm-counts .critical { border-color: rgba(239, 68, 68, 0.45); color: #B91C1C; }
.complaint-live-alarm-counts .major { border-color: rgba(249, 115, 22, 0.45); color: #C2410C; }
.complaint-live-alarm-counts .minor { border-color: rgba(234, 179, 8, 0.55); color: #A16207; }
.complaint-live-alarm-counts .warning { border-color: rgba(59, 130, 246, 0.40); color: #1D4ED8; }

.complaint-live-alarm-row b {
    color: var(--text-primary);
}

.complaint-live-alarm-row span,
.complaint-live-alarm-source,
.complaint-alarm-clear {
    color: var(--text-secondary);
}

.complaint-live-alarm-source {
    margin-top: 10px;
    font-size: 11px;
    font-weight: 700;
}

.complaint-elevation-card {
    min-height: 330px;
}

.complaint-elevation-profile {
    min-height: 270px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: #F8FAFC;
    color: var(--text-secondary);
    padding: 10px;
    overflow: hidden;
}

.complaint-elevation-profile svg {
    width: 100%;
    height: 270px;
    display: block;
}

.elevation-label {
    font-family: "Plus Jakarta Sans", Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    fill: #0F172A;
}

.elevation-small-label {
    font-family: "Plus Jakarta Sans", Arial, sans-serif;
    font-size: 10px;
    fill: #475569;
}

.complaint-rsrp-legend {
    background: rgba(255,255,255,0.92);
    border: 1px solid #CBD5E1;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 11px;
    color: #0F172A;
    box-shadow: 0 6px 18px rgba(15,23,42,0.16);
}

.complaint-rsrp-legend div {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
}

.complaint-rsrp-legend span {
    display: inline-block;
    width: 16px;
    height: 10px;
    border: 1px solid rgba(15,23,42,0.25);
}

@media (max-width: 1120px) {
    .complaint-input-grid,
    .complaint-layout {
        grid-template-columns: 1fr;
    }

    .complaint-map-card,
    .complaint-summary-card {
        min-height: auto;
    }
}

/* Sidebar Metadata Panel */
.sidebar-metadata-panel {
    background-color: #F8FAFC;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px;
    margin-top: 20px;
}

.sidebar-meta-title {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.meta-item-row {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    padding: 4px 0;
    border-bottom: 1px dashed #E2E8F0;
}

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

.meta-label {
    color: var(--text-muted);
}

.meta-val {
    font-weight: 600;
    color: var(--text-primary);
}

/* Main Dashboard Area */
#main-content {
    flex-grow: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Header Area & Cascading Slicers */
#dashboard-header {
    background-color: white;
    padding: 16px 28px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    gap: 20px;
    min-width: 0;
}

#dashboard-header.mc-mode .site-filter-control {
    display: none;
}

#dashboard-header .mc-filter-control {
    display: none;
}

#dashboard-header.mc-mode .mc-filter-control {
    display: flex;
}

#dashboard-header.degradation-mode .site-filter-control,
#dashboard-header.degradation-mode .mc-filter-control,
#dashboard-header.degradation-mode .date-filter-control {
    display: none;
}

#dashboard-header.two-g-mode .site-filter-control,
#dashboard-header.two-g-mode .mc-filter-control,
#dashboard-header.two-g-mode .date-filter-control {
    display: none;
}

/* Central Java Overall — executive light layout v22 */
body #page-cj-overview .cj-overview,
body.cj-dark #page-cj-overview .cj-overview {
    min-height: 100vh;
    padding: 22px 24px 32px;
    color: #172B4D;
    background: linear-gradient(180deg, #F5F8FC 0%, #EDF3F8 100%) !important;
}

#page-cj-overview .cj-page-head {
    margin-bottom: 18px;
    padding: 0 2px;
}

#page-cj-overview .cj-eyebrow {
    margin-bottom: 5px;
    color: #21796F !important;
    font-size: 11px;
    letter-spacing: .11em;
}

body #page-cj-overview .cj-page-head h2,
body.cj-dark #page-cj-overview .cj-page-head h2 {
    color: #16324F !important;
    font-size: clamp(29px, 2.3vw, 37px);
    letter-spacing: -.025em;
}

#page-cj-overview .cj-action-btn {
    min-height: 39px;
    padding: 0 14px;
    border-color: #CCD8E5;
    border-radius: 8px;
    color: #315A72;
    background: #FFFFFF;
    box-shadow: 0 3px 10px rgba(29, 58, 91, .05);
    font-size: 12px;
}

#page-cj-overview .cj-action-btn.primary {
    border-color: #197C73;
    color: #FFFFFF;
    background: #197C73;
}

#page-cj-overview .cj-overview-hero {
    grid-template-columns: minmax(270px, 330px) minmax(0, 1fr);
    min-height: 248px;
    gap: 16px;
    margin-bottom: 16px;
}

#page-cj-overview .cj-overview-visual {
    min-height: 248px;
    max-height: 268px;
    border-color: #D3DFEA;
    border-radius: 12px;
    background: #DCEBF4;
    box-shadow: 0 8px 22px rgba(27, 59, 87, .09);
}

#page-cj-overview .cj-overview-visual img {
    width: 100%;
    height: 100%;
    min-height: 248px;
    max-height: 268px;
    object-fit: cover;
    object-position: center 48%;
}

#page-cj-overview .cj-overview-visual figcaption {
    left: 10px;
    right: 10px;
    bottom: 10px;
    gap: 2px;
    padding: 9px 11px;
    border: 0;
    border-radius: 7px;
    background: rgba(17, 50, 76, .88);
}

#page-cj-overview .cj-overview-visual figcaption strong { font-size: 12px; }
#page-cj-overview .cj-overview-visual figcaption span { font-size: 10px; }

#page-cj-overview .cj-overview-summary {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 10px;
}

body #page-cj-overview .cj-filter-card,
body.cj-dark #page-cj-overview .cj-filter-card {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 58px;
    margin: 0;
    padding: 9px 13px;
    border: 1px solid #D5E0EA;
    border-radius: 10px;
    color: #172B4D;
    background: #FFFFFF !important;
    box-shadow: 0 5px 15px rgba(27, 59, 87, .05);
}

#page-cj-overview .cj-filter-card label {
    margin: 0;
    color: #5D7085;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

#page-cj-overview .cj-filter-row { gap: 9px; }
#page-cj-overview .cj-date-input { width: 170px; min-height: 38px; font-size: 14px; }
#page-cj-overview .cj-apply-btn { min-height: 38px; padding: 0 14px; font-size: 12px; }

#page-cj-overview .cj-overview-summary .cj-kpi-strip {
    grid-template-columns: repeat(6, minmax(112px, 1fr));
    grid-template-rows: 1fr;
    gap: 9px;
}

body #page-cj-overview .cj-kpi-card,
body.cj-dark #page-cj-overview .cj-kpi-card {
    --score-accent: #278A80;
    --score-accent-rgb: 39, 138, 128;
    min-height: 0 !important;
    height: auto !important;
    padding: 14px 13px 12px !important;
    border: 1px solid #D7E1EB !important;
    border-top: 3px solid var(--score-accent) !important;
    border-radius: 9px !important;
    color: #172B4D !important;
    background: #FFFFFF !important;
    box-shadow: 0 5px 15px rgba(28, 56, 85, .06) !important;
}

#page-cj-overview .cj-kpi-card:nth-child(2) { --score-accent: #3478D4; --score-accent-rgb: 52, 120, 212; }
#page-cj-overview .cj-kpi-card:nth-child(3) { --score-accent: #596D82; --score-accent-rgb: 89, 109, 130; }
#page-cj-overview .cj-kpi-card:nth-child(4) { --score-accent: #25A56A; --score-accent-rgb: 37, 165, 106; }
#page-cj-overview .cj-kpi-card:nth-child(5) { --score-accent: #526ED3; --score-accent-rgb: 82, 110, 211; }
#page-cj-overview .cj-kpi-card:nth-child(6) { --score-accent: #D78628; --score-accent-rgb: 215, 134, 40; }

#page-cj-overview .cj-kpi-card::before,
#page-cj-overview .cj-kpi-card::after,
#page-cj-overview .cj-kpi-card .score-card-art { display: none !important; content: none !important; }

body #page-cj-overview .cj-kpi-card span,
body.cj-dark #page-cj-overview .cj-kpi-card span {
    max-width: 100%;
    color: #607286 !important;
    font-size: 9px;
    letter-spacing: .055em !important;
}

body #page-cj-overview .cj-kpi-card strong,
body.cj-dark #page-cj-overview .cj-kpi-card strong {
    margin-top: 10px;
    color: #17324D !important;
    font-size: clamp(23px, 1.8vw, 31px) !important;
    text-shadow: none !important;
}

body #page-cj-overview .cj-kpi-card small,
body.cj-dark #page-cj-overview .cj-kpi-card small {
    margin-top: 7px;
    color: #7C8C9D !important;
    font-size: 9px;
    line-height: 1.25;
}

#page-cj-overview .cj-grid { gap: 14px; margin-bottom: 14px; }

body #page-cj-overview .cj-panel,
body.cj-dark #page-cj-overview .cj-panel {
    padding: 16px;
    border: 1px solid #D8E2EC;
    border-radius: 11px;
    color: #172B4D;
    background: #FFFFFF !important;
    box-shadow: 0 6px 18px rgba(27, 59, 87, .055);
}

#page-cj-overview .cj-panel-head { margin-bottom: 11px; }
body #page-cj-overview .cj-panel-head h3,
body.cj-dark #page-cj-overview .cj-panel-head h3 { color: #1B3551 !important; font-size: 17px; }
body #page-cj-overview .cj-panel-head p,
body.cj-dark #page-cj-overview .cj-panel-head p { color: #7B8D9F !important; font-size: 10px; }
#page-cj-overview .cj-panel-head > i { color: #298D82; }

#page-cj-overview .cj-ring-grid { gap: 9px; }

body #page-cj-overview .cj-ring-card,
body.cj-dark #page-cj-overview .cj-ring-card {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    min-height: 82px !important;
    padding: 10px 11px !important;
    border: 1px solid #DCE5EE !important;
    border-left: 3px solid var(--score-accent) !important;
    border-radius: 8px !important;
    color: #172B4D !important;
    background: #F9FBFD !important;
    box-shadow: none !important;
}

#page-cj-overview .cj-ring-card::before,
#page-cj-overview .cj-ring-card::after,
#page-cj-overview .cj-ring-card .score-card-art { display: none !important; content: none !important; }

#page-cj-overview .cj-ring {
    width: 52px !important;
    height: 52px !important;
    border: 2px solid rgba(var(--score-accent-rgb), .55) !important;
    color: #17324D !important;
    background: rgba(var(--score-accent-rgb), .08) !important;
    box-shadow: none !important;
}

#page-cj-overview .cj-ring-inner {
    width: 42px !important;
    height: 42px !important;
    color: #17324D !important;
    background: #FFFFFF !important;
    font-size: 9px !important;
}

body #page-cj-overview .cj-ring-card b,
body.cj-dark #page-cj-overview .cj-ring-card b { color: #263E58 !important; font-size: 11px; }
body #page-cj-overview .cj-ring-card span,
body.cj-dark #page-cj-overview .cj-ring-card span { color: #7A8A9B !important; font-size: 9px; }

body.cj-dark #page-cj-overview .cj-chart-tools,
body.cj-dark #page-cj-overview .cj-chart-tools b,
body.cj-dark #page-cj-overview .cj-map-legend { color: #52677D !important; }

@media (max-width: 1450px) {
    #page-cj-overview .cj-overview-hero { grid-template-columns: 290px minmax(0, 1fr); }
    #page-cj-overview .cj-overview-summary .cj-kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(94px, 1fr)); }
}

@media (max-width: 980px) {
    #page-cj-overview .cj-overview-hero { grid-template-columns: 1fr; }
    #page-cj-overview .cj-overview-visual { max-height: 235px; }
    #page-cj-overview .cj-overview-visual img { max-height: 235px; }
    #page-cj-overview .cj-grid-thirds { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    body #page-cj-overview .cj-overview,
    body.cj-dark #page-cj-overview .cj-overview { padding: 12px !important; }
    #page-cj-overview .cj-overview-summary .cj-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    body #page-cj-overview .cj-kpi-card,
    body.cj-dark #page-cj-overview .cj-kpi-card { min-height: 96px !important; }
    #page-cj-overview .cj-filter-card { align-items: flex-start; flex-direction: column; gap: 7px; }
    #page-cj-overview .cj-date-input { width: min(170px, 100%); }
}

#dashboard-header.worst-site-mode .filter-panel-top,
#dashboard-header.worst-site-mode #header-refresh-data-btn {
    display: none !important;
}

#dashboard-header.mc-mode {
    justify-content: space-between;
}

.header-title h2 {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
}

.header-title {
    min-width: 0;
}

.header-title p {
    font-size: 12px;
    color: var(--text-secondary);
}

#dashboard-debug-status {
    margin-top: 4px;
    color: #0D6EFD;
    font-size: 10px;
    font-weight: 700;
}

/* Cascading Slicers Top Bar (Power BI Style Slicers) */
.filter-panel-top {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.header-refresh-data-btn {
    height: 38px;
    padding: 0 14px;
    border: 1px solid #10B981;
    border-radius: var(--radius-sm);
    background: #ECFDF5;
    color: #047857;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.header-refresh-data-btn:hover {
    background: #D1FAE5;
}

.header-refresh-data-btn:disabled {
    opacity: 0.65;
    cursor: wait;
}

#sidebar-backdrop {
    display: none;
}

/* Sidebar drawer mode: hidden by default on desktop and mobile. */
#sidebar-toggle-btn {
    position: fixed;
    top: 74px;
    left: 22px;
    z-index: 1205;
}

.body-sidebar-open #sidebar-toggle-btn {
    left: calc(min(var(--sidebar-width), 86vw) + 18px);
}

#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: min(var(--sidebar-width), 86vw);
    transform: translateX(-105%);
    z-index: 1000;
    box-shadow: var(--shadow-lg);
}

.body-sidebar-open #sidebar {
    transform: translateX(0);
}

#sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.38);
    opacity: 0;
    pointer-events: none;
    z-index: 900;
    transition: opacity var(--transition-normal);
}

.body-sidebar-open #sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
}

#main-content {
    width: 100vw;
}

#dashboard-header.vlr-mode .site-filter-control {
    display: none;
}

.filter-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
}

.filter-item label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.filter-select {
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background-color: #F8FAFC;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    outline: none;
    min-width: 140px;
    min-height: 38px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.date-input {
    min-width: 145px;
}

.filter-select:focus {
    border-color: var(--accent-blue);
    background-color: white;
}

/* ==========================================================================
   CUSTOM SEARCHABLE DROPDOWN
   ========================================================================== */

.custom-searchable-dropdown {
    position: relative;
    width: 180px;
}

.custom-searchable-dropdown.aggregation-search {
    width: 320px;
}

.custom-searchable-dropdown.aggregation-search .dropdown-list {
    width: 360px;
}

.custom-searchable-dropdown input {
    width: 100%;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background-color: #F8FAFC;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    outline: none;
    transition: var(--transition-fast);
}

.custom-searchable-dropdown input:focus {
    border-color: var(--accent-blue);
    background-color: white;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.05);
}

.custom-searchable-dropdown .dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 240px;
    max-height: 250px;
    overflow-y: auto;
    background-color: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    display: none;
    margin-top: 4px;
}

.custom-searchable-dropdown .dropdown-list.show {
    display: block;
}

.custom-searchable-dropdown .dropdown-list div {
    padding: 8px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: var(--transition-fast);
    border-bottom: 1px solid #F1F5F9;
    font-weight: 500;
}

.custom-searchable-dropdown .dropdown-list div:last-child {
    border-bottom: none;
}

.custom-searchable-dropdown .dropdown-list div:hover {
    background-color: var(--accent-blue-soft);
    color: var(--accent-blue);
}

.multi-select-summary {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.35;
    min-height: 16px;
    word-break: break-word;
}

.multi-select-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.multi-select-item input {
    width: auto;
    flex: 0 0 auto;
    margin: 0;
}

/* ==========================================================================
   DASHBOARD COMPONENTS
   ========================================================================== */

/* Dashboard Workspace Grid */
.dashboard-grid {
    padding: 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* KPI Cards Layout */
.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.kpi-card {
    background-color: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    padding: 16px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background-color: var(--accent-blue);
}

.kpi-card.cyan::before { background-color: var(--accent-cyan); }
.kpi-card.success::before { background-color: var(--success); }
.kpi-card.warning::before { background-color: var(--warning); }
.kpi-card.danger::before { background-color: var(--danger); }
.kpi-card.market-share-card {
    background:
        linear-gradient(135deg, rgba(16, 185, 129, 0.13), rgba(13, 202, 240, 0.10)),
        var(--bg-card);
    border-color: rgba(16, 185, 129, 0.22);
}
.kpi-card.market-share-card::before {
    background: linear-gradient(180deg, #10B981, #0DCAF0);
}
.kpi-card.market-share-card .kpi-icon {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}
.kpi-card.market-share-card .kpi-value {
    color: #064E3B;
    font-size: 22px;
}

.kpi-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.kpi-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.kpi-title {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kpi-icon {
    font-size: 14px;
    color: var(--text-secondary);
    background-color: #F8FAFC;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kpi-value {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--text-primary);
}

.kpi-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
}

.kpi-trend.up { color: var(--success); }
.kpi-trend.down { color: var(--danger); }

.kpi-footer span {
    color: var(--text-secondary);
    font-weight: 400;
}

/* Visualization Row Layout */
.vis-row {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 20px;
}

.body-traffic-wow-mode #dashboard-header {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    z-index: 1210 !important;
    pointer-events: none !important;
}

.body-traffic-wow-mode #dashboard-header::after,
.body-traffic-wow-mode #dashboard-header .header-title,
.body-traffic-wow-mode #dashboard-header .filter-panel-top,
.body-traffic-wow-mode #dashboard-header .header-refresh-data-btn {
    display: none !important;
}

.body-traffic-wow-mode #dashboard-header .header-left {
    display: block !important;
    width: 0 !important;
    height: 0 !important;
}

.body-traffic-wow-mode #sidebar-toggle-btn {
    display: none !important;
    pointer-events: auto !important;
}

.body-traffic-wow-mode #page-traffic-wow.active {
    display: block;
    min-height: 100vh;
}

#dashboard-header.traffic-mtd-mode .filter-panel-top,
#dashboard-header.traffic-mtd-mode .header-refresh-data-btn {
    display: none !important;
}

body:has(#page-traffic-mtd-lmtd.active) #dashboard-header .filter-panel-top,
body:has(#page-traffic-mtd-lmtd.active) #dashboard-header .header-refresh-data-btn {
    display: none !important;
}

#dashboard-header.traffic-mtd-mode {
    min-height: 104px;
    align-items: center;
}

#dashboard-header.traffic-mtd-mode .header-left {
    width: 100%;
}

#dashboard-header.traffic-mtd-mode #header-site-id {
    font-size: 30px;
}

.vis-row.equal {
    grid-template-columns: 1fr 1fr;
}

.meta-trend-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
}

.meta-trend-row .panel-card {
    min-width: 0;
}

.meta-trend-row .chart-container {
    height: 230px;
    min-height: 230px;
}

.meta-trend-row .plmn-trend-mini-card .panel-header small{display:block;margin-top:3px;color:#64748b;font-size:10px;font-weight:650}.meta-trend-row .plmn-site-chart{height:230px;min-height:230px;margin-top:0}

/* 3-Column Visual Layout (Fulfills Power BI 15-charts screenshots!) */
.vis-row-three {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 1024px) {
    .vis-row-three {
        grid-template-columns: 1fr;
    }
    .vis-row {
        grid-template-columns: 1fr;
    }
}

/* Dashboard Panel Card */
.panel-card {
    background-color: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.panel-header h3 {
    font-family: var(--font-heading);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
}

.chart-container {
    position: relative;
    width: 100%;
    height: 220px;
}

.chart-container.large {
    height: 300px;
}

.hourly-chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}

.hourly-chart-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px;
    background: #FFFFFF;
    min-width: 0;
}

.hourly-chart-card .chart-container {
    height: 340px;
}

.hourly-chart-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    min-height: 22px;
}

.hourly-chart-title h4 {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.hourly-chart-title span {
    color: var(--text-secondary);
    font-size: 10.5px;
    white-space: nowrap;
}

.site-alarm-panel {
    gap: 8px;
}

.site-alarm-summary {
    color: var(--text-secondary);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
}

.site-alarm-pill {
    align-items: center;
    background: #F8FAFC;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-secondary);
    display: inline-flex;
    line-height: 1;
    padding: 6px 9px;
}

.site-alarm-pill.critical,
.site-alarm-severity.critical {
    background: #FEF2F2;
    border-color: #FECACA;
    color: #B91C1C;
}

.site-alarm-pill.major,
.site-alarm-severity.major {
    background: #FFF7ED;
    border-color: #FED7AA;
    color: #C2410C;
}

.site-alarm-pill.minor,
.site-alarm-severity.minor {
    background: #FEFCE8;
    border-color: #FEF08A;
    color: #A16207;
}

.site-alarm-pill.warning,
.site-alarm-severity.warning {
    background: #EFF6FF;
    border-color: #BFDBFE;
    color: #1D4ED8;
}

.site-alarm-table-wrap {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    max-height: 260px;
    overflow: auto;
}

.site-alarm-table {
    border-collapse: collapse;
    font-size: 11px;
    width: 100%;
}

.site-alarm-table th,
.site-alarm-table td {
    border-bottom: 1px solid var(--border-color);
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
}

.site-alarm-table th {
    background: #F8FAFC;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
    position: sticky;
    text-transform: uppercase;
    top: 0;
    z-index: 1;
}

.site-alarm-table td {
    color: var(--text-primary);
}

.site-alarm-table td:nth-child(4),
.site-alarm-table td:nth-child(5) {
    max-width: 360px;
    overflow-wrap: anywhere;
}

.site-alarm-severity {
    border: 1px solid var(--border-color);
    border-radius: 999px;
    display: inline-flex;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 7px;
}

/* Map specific styles */
#map-element {
    width: 100%;
    height: 100%;
    min-height: 350px;
    border-radius: var(--radius-sm);
    z-index: 1;
}

.neighbor-map-container {
    flex-grow: 1;
    min-height: 260px;
    position: relative;
}

#neighbor-map-element {
    width: 100%;
    height: 100%;
    min-height: 260px;
    border-radius: var(--radius-sm);
    z-index: 1;
}

.neighbor-sector-summary {
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
}

.neighbor-sector-row {
    display: grid;
    gap: 8px;
    grid-template-columns: 72px 1fr;
    align-items: start;
}

.neighbor-sector-label {
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
    line-height: 22px;
    text-transform: uppercase;
}

.neighbor-sector-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 58px;
    overflow-y: auto;
}

.neighbor-sector-chip {
    background: #F8FAFC;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 6px 7px;
}

.neighbor-site-label {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #0F172A;
    border-radius: 4px;
    box-shadow: var(--shadow-sm);
    color: #0F172A;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 800;
    padding: 2px 5px;
}

.neighbor-ta-polygon {
    filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.18));
    /* Android Chromium can drop Leaflet SVG paths that use blend modes. */
    mix-blend-mode: normal;
}

.neighbor-ta-toggle-control {
    align-items: center;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(15, 23, 42, 0.35);
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.28);
    color: #0F172A;
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 900;
    height: 30px;
    justify-content: center;
    line-height: 1;
    width: 30px;
}

.neighbor-ta-toggle-control.active {
    background: #0F766E;
    border-color: #0F766E;
    color: #FFFFFF;
}

.neighbor-ta-toggle-control:hover {
    transform: translateY(-1px);
}

.neighbor-meta-toggle-control {
    align-items: center;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(15, 23, 42, 0.35);
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.28);
    color: #064E3B;
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 900;
    height: 30px;
    justify-content: center;
    line-height: 1;
    padding: 0 8px;
    min-width: 66px;
}

.neighbor-meta-toggle-control.active {
    background: #064E3B;
    border-color: #064E3B;
    color: #FFFFFF;
}

.neighbor-meta-toggle-control.is-off {
    color: #64748B;
}

.neighbor-meta-toggle-control:hover {
    transform: translateY(-1px);
}

.neighbor-meta-coverage-tile {
    mix-blend-mode: normal;
}

@media (max-width: 768px) {
    #neighbor-map-element .neighbor-ta-polygon {
        filter: none !important;
        mix-blend-mode: normal !important;
        stroke: #ffffff !important;
        stroke-opacity: 0.92 !important;
        fill: #ffffff !important;
        fill-opacity: 0.34 !important;
    }

    #neighbor-map-element .neighbor-meta-coverage-tile {
        mix-blend-mode: normal !important;
        fill-opacity: 0.42 !important;
    }
}

#page-map-central-java {
    padding: 0 !important;
    background: #071626;
}

body.body-map-central-mode #dashboard-header {
    display: none !important;
}

body.body-map-central-mode #main-content {
    padding-top: 0 !important;
}

.cj-map-command {
    min-height: 100vh;
    padding: 18px;
    background:
        linear-gradient(135deg, rgba(7, 22, 38, 0.96), rgba(12, 54, 68, 0.94)),
        radial-gradient(circle at 78% 14%, rgba(20, 184, 166, 0.18), transparent 28%);
}

.cj-map-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
    color: #EAF5FF;
}

.cj-map-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cj-map-title p {
    margin: 0 0 2px;
    color: #7DD3FC;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.cj-map-title h2 {
    margin: 0;
    color: #FFFFFF;
    font-size: 25px;
    font-weight: 950;
}

.cj-map-menu-btn,
.cj-map-actions button {
    height: 38px;
    border: 1px solid rgba(148, 163, 184, 0.34);
    border-radius: 8px;
    background: rgba(15, 32, 52, 0.72);
    color: #EAF5FF;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
    cursor: pointer;
}

.cj-map-menu-btn {
    width: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cj-map-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cj-map-actions button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 850;
}

.cj-map-shell {
    position: relative;
    display: grid;
    grid-template-columns: 318px minmax(0, 1fr);
    gap: 12px;
    height: calc(100vh - 104px);
    min-height: 690px;
}

.cj-map-shell.fullscreen {
    position: fixed;
    inset: 0;
    z-index: 5000;
    height: 100vh;
    padding: 12px;
    background: #071626;
}

.cj-map-panel {
    border: 1px solid rgba(125, 211, 252, 0.22);
    border-radius: 10px;
    background: rgba(7, 22, 38, 0.82);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(14px);
    padding: 12px;
    overflow: auto;
}

.cj-map-panel-block {
    padding: 11px;
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 8px;
    background: rgba(15, 32, 52, 0.62);
    margin-bottom: 10px;
}

.cj-map-panel-block.compact {
    margin-bottom: 8px;
}

.cj-map-panel-label {
    display: block;
    margin-bottom: 8px;
    color: #BAE6FD;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.cj-map-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: 7px;
}

.cj-map-search-row input,
.cj-map-coord-grid input {
    height: 34px;
    border: 1px solid rgba(148, 163, 184, 0.34);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.94);
    color: #0F172A;
    font-size: 12px;
    font-weight: 750;
    padding: 0 10px;
}

.cj-map-search-row button,
.cj-map-coord-grid button,
.cj-map-tool-grid button {
    height: 34px;
    border: 1px solid rgba(56, 189, 248, 0.34);
    border-radius: 7px;
    background: rgba(14, 116, 144, 0.38);
    color: #EAF5FF;
    cursor: pointer;
    font-size: 11px;
    font-weight: 850;
}

.cj-map-search-results {
    margin-top: 8px;
    max-height: 152px;
    overflow: auto;
}

.cj-map-search-results button {
    width: 100%;
    margin-bottom: 5px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.08);
    color: #EAF5FF;
    text-align: left;
    padding: 7px 8px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 750;
}

.cj-map-search-results small {
    display: block;
    color: #93C5FD;
    font-size: 10px;
    margin-top: 2px;
}

.cj-map-coord-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.cj-map-layer-list {
    display: grid;
    gap: 7px;
}

.cj-map-layer-list label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    color: #EAF5FF;
    font-size: 12px;
    font-weight: 800;
}

.cj-map-layer-list input {
    accent-color: #14B8A6;
}

.cj-map-tool-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.cj-map-tool-grid button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.cj-map-tool-grid button.active {
    background: #0F766E;
    border-color: #5EEAD4;
}

.cj-map-info {
    color: #B7D7EA;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.45;
}

.cj-map-stage {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(125, 211, 252, 0.24);
    border-radius: 10px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
    background: #0F172A;
}

#cj-map-element {
    width: 100%;
    height: 100%;
    min-height: 690px;
    background: #0F172A;
}

.body-map-central-mode .content-container,
.body-map-central-mode main {
    background: #071626 !important;
}

.body-map-central-mode .page-tab.active {
    margin: 0 !important;
}

#cj-map-element.measure-active {
    cursor: crosshair !important;
}

#cj-map-element.info-active,
#cj-map-element.info-active .leaflet-interactive,
#cj-map-element.info-active .leaflet-marker-icon {
    cursor: help;
}

.cj-map-compass {
    display: none;
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 820;
    width: 78px;
    height: 78px;
    border: 3px solid #FACC15;
    border-radius: 50%;
    background: rgba(2, 6, 23, 0.92);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.92), 0 12px 32px rgba(2, 6, 23, 0.60);
    cursor: move;
    display: grid;
    place-items: center;
    user-select: none;
}

.cj-map-compass span {
    position: absolute;
    top: 8px;
    color: #FDE047;
    font-size: 13px;
    font-weight: 950;
    text-shadow: 0 1px 2px #000000;
}

.cj-map-compass i {
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 38px solid #FF3B30;
    filter: drop-shadow(0 0 2px #FFFFFF) drop-shadow(0 2px 3px #000000);
}

.cj-map-ruler-card,
.cj-map-elevation-panel {
    display: none;
    position: absolute;
    left: 16px;
    z-index: 830;
    border: 1px solid rgba(15, 23, 42, 0.28);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.95);
    color: #0F172A;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.30);
    overflow: hidden;
}

.cj-map-ruler-card.active {
    display: block;
    top: 18px;
    width: 310px;
}

.cj-map-elevation-panel.active {
    display: block;
    right: 16px;
    bottom: 16px;
    left: auto;
    width: min(760px, calc(100% - 340px));
    max-height: 260px;
    background: rgba(255, 255, 255, 0.92);
}

.cj-map-elevation-panel .neighbor-elevation-titlebar {
    padding: 5px 8px;
    font-size: 10px;
}

.cj-map-elevation-panel .neighbor-elevation-titlebar b {
    font-size: 11px;
}

.cj-map-elevation-panel .neighbor-elevation-summary.google-earth {
    padding: 4px 8px;
    gap: 9px;
    font-size: 9.5px;
}

.cj-map-elevation-panel .neighbor-elevation-chart {
    height: 132px;
}

.cj-map-elevation-panel .neighbor-elevation-note {
    padding: 4px 8px 5px;
    font-size: 9.5px;
}

.cj-map-site-label {
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 950;
    text-shadow: 0 2px 3px #000, 0 0 2px #000;
    white-space: nowrap;
}

.cj-map-point-tooltip {
    background: rgba(2, 6, 23, 0.82);
    border: 1px solid rgba(125, 211, 252, 0.28);
    border-radius: 6px;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 850;
    padding: 3px 6px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
}

.cj-map-target-marker {
    width: 18px;
    height: 18px;
    border: 3px solid #FFFFFF;
    border-radius: 50%;
    background: #EF4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.28), 0 8px 18px rgba(15, 23, 42, 0.32);
}

.cj-map-manual-pin {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: #F97316;
    font-size: 28px;
    filter: drop-shadow(0 3px 5px rgba(2, 6, 23, 0.45));
    -webkit-text-stroke: 1px #FFFFFF;
}

.cj-gsite-leaflet-popup .leaflet-popup-content-wrapper {
    border-radius: 4px;
    background: #F8FAFC;
    color: #111827;
    box-shadow: 0 16px 38px rgba(2, 8, 23, 0.36);
}

.cj-gsite-leaflet-popup .leaflet-popup-content {
    margin: 10px;
}

.cj-gsite-popup {
    min-width: 292px;
    max-width: 340px;
    font-family: Arial, sans-serif;
    font-size: 12px;
}

.cj-gsite-popup table {
    width: 100%;
    border-collapse: collapse;
    background: #FFFFFF;
    border: 1px solid #777;
}

.cj-gsite-popup th,
.cj-gsite-popup td {
    border: 1px solid #888;
    padding: 5px 7px;
    line-height: 1.18;
    vertical-align: top;
}

.cj-gsite-popup th {
    width: 104px;
    background: #F0F0F0;
    color: #000;
    text-align: left;
    font-weight: 800;
}

.cj-gsite-popup td {
    color: #0B1F3A;
    overflow-wrap: anywhere;
}

.cj-sector-popup-detail {
    margin-top: 8px;
    padding: 8px;
    border: 1px solid #CBD5E1;
    border-radius: 6px;
    background: #F8FAFC;
    color: #0B1F3A;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 11px;
}

.cj-sector-popup-detail b,
.cj-sector-popup-detail span {
    display: block;
    margin-bottom: 4px;
}

.cj-pin-remove-btn {
    margin-top: 7px;
    height: 26px;
    border: 1px solid #FDBA74;
    border-radius: 6px;
    background: #FFF7ED;
    color: #9A3412;
    font-size: 11px;
    font-weight: 850;
    cursor: pointer;
}

.cj-site-load-sector-btn,
.cj-sector-select-btn {
    margin-top: 8px;
    height: 27px;
    border: 1px solid #93C5FD;
    border-radius: 6px;
    background: #EFF6FF;
    color: #0F3A68;
    font-size: 11px;
    font-weight: 850;
    cursor: pointer;
}

.cj-map-rf-compass-center {
    width: 16px;
    height: 16px;
    border: 2px solid #0F172A;
    border-radius: 50%;
    background: #EF4444;
    box-shadow: 0 0 0 3px rgba(0, 255, 56, 0.36), 0 8px 18px rgba(15, 23, 42, 0.34);
    cursor: move;
}

.cj-map-poi-marker {
    width: 23px;
    height: 23px;
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    background: rgba(15, 118, 110, 0.92);
    color: #FFFFFF;
    display: grid;
    place-items: center;
    box-shadow: 0 7px 18px rgba(2, 6, 23, 0.34);
    font-size: 12px;
}

.cj-map-meta-tile {
    /* Avoid disappearing Leaflet SVG tiles on Android Chromium. */
    mix-blend-mode: normal;
}

@media (max-width: 768px) {
    #cj-map-element .cj-map-meta-tile {
        mix-blend-mode: normal !important;
        fill-opacity: 0.44 !important;
    }

    #cj-map-element .cj-map-ta-polygon {
        filter: none !important;
        mix-blend-mode: normal !important;
        stroke: #ffffff !important;
        stroke-opacity: 0.94 !important;
        fill: #ffffff !important;
        fill-opacity: 0.36 !important;
    }
}

@media (max-width: 1100px) {
    .cj-map-shell {
        grid-template-columns: 1fr;
        height: auto;
    }
    .cj-map-panel {
        order: 2;
    }
    .cj-map-stage {
        min-height: 620px;
    }
}

@media (max-width: 720px) {
    .cj-map-command {
        padding: 8px;
    }

    .cj-map-hero {
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 8px;
    }

    .cj-map-title h2 {
        font-size: 19px;
    }

    .cj-map-title p {
        font-size: 9.5px;
    }

    .cj-map-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .cj-map-actions button {
        height: 32px;
        padding: 0 8px;
        font-size: 10.5px;
    }

    .cj-map-shell {
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-height: 0 !important;
        height: auto !important;
    }

    .cj-map-panel {
        display: grid;
        grid-template-columns: 1fr;
        max-height: 42vh;
        padding: 8px;
        border-radius: 8px;
    }

    .cj-map-panel-block {
        padding: 8px;
        margin-bottom: 8px;
    }

    .cj-map-layer-list {
        grid-template-columns: 1fr 1fr;
        gap: 5px 8px;
    }

    .cj-map-layer-list label {
        min-height: 26px;
        font-size: 11px;
    }

    .cj-map-tool-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .cj-map-tool-grid button {
        height: 32px;
        font-size: 10px;
    }

    .cj-map-stage,
    #cj-map-element {
        min-height: 58vh !important;
        height: 58vh !important;
    }

    .cj-map-ruler-card.active {
        top: 8px;
        left: 8px;
        width: min(300px, calc(100vw - 32px));
    }

    .cj-map-elevation-panel.active {
        left: 8px;
        right: 8px;
        bottom: 8px;
    }
}

body.body-map-central-mode #dashboard-header,
#dashboard-header.map-central-mode,
body:has(#page-map-central-java.active) #dashboard-header {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

body.body-map-central-mode,
body:has(#page-map-central-java.active) {
    background: #071626 !important;
}

body.body-map-central-mode #main-content,
body:has(#page-map-central-java.active) #main-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.body-map-central-mode .cj-map-command,
body:has(#page-map-central-java.active) .cj-map-command {
    min-height: 100vh !important;
    padding-top: 12px !important;
}

body.body-map-central-mode .cj-map-shell,
body:has(#page-map-central-java.active) .cj-map-shell {
    height: calc(100vh - 88px) !important;
    min-height: 720px !important;
}

body.body-map-central-mode #cj-map-element,
body:has(#page-map-central-java.active) #cj-map-element {
    min-height: 720px !important;
}

.cj-map-compass {
    z-index: 2200 !important;
}

.mc-map-container {
    height: 420px;
    min-height: 360px;
    position: relative;
    width: 100%;
}

#mc-map-element {
    border-radius: var(--radius-sm);
    height: 100%;
    min-height: 360px;
    width: 100%;
    z-index: 1;
}

.mc-map-tooltip {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: var(--shadow-sm);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 800;
    padding: 3px 6px;
}

.mc-map-legend {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
    color: var(--text-primary);
    font-size: 10px;
    line-height: 1.45;
    padding: 8px 10px;
}

.mc-map-legend strong {
    display: block;
    font-size: 11px;
    margin-bottom: 5px;
}

.mc-map-legend span {
    border: 1px solid #0F172A;
    display: inline-block;
    height: 10px;
    margin-right: 6px;
    vertical-align: -1px;
    width: 18px;
}

.sector-map-legend {
    background: rgba(238, 242, 240, 0.76);
    border: 1px solid rgba(15, 23, 42, 0.75);
    border-radius: 0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.35);
    color: #111827;
    font-family: Arial, sans-serif;
    font-size: 12px;
    line-height: 1.1;
    padding: 0;
}

.sector-map-legend table {
    border-collapse: collapse;
    min-width: 270px;
}

.sector-map-legend th,
.sector-map-legend td {
    border: 1px solid rgba(15, 23, 42, 0.72);
    font-weight: 700;
    padding: 2px 7px;
    text-align: center;
}

.sector-map-legend th {
    font-size: 13px;
}

.sector-map-legend td {
    height: 18px;
}

.sector-map-legend span {
    border: 1px solid rgba(15, 23, 42, 0.9);
    display: inline-block;
    height: 17px;
    vertical-align: middle;
    width: 58px;
}

.sector-map-legend-note {
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 9.5px;
    margin-top: 6px;
    padding-top: 5px;
    max-width: 150px;
}

.sector-map-tooltip {
    background: rgba(15, 23, 42, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.35);
    color: #FFFFFF;
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 5px;
    text-shadow: none;
}

.sector-map-tooltip.surrounding {
    color: #FFFFFF;
    font-weight: 700;
}

.sector-map-tooltip.complaint-serving-label,
.complaint-map-label {
    background: rgba(15, 23, 42, 0.78) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
    color: #FFFFFF !important;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 800;
    padding: 4px 8px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.sector-map-tooltip.complaint-serving-label {
    background: rgba(249, 115, 22, 0.95);
}

.complaint-site-label {
    background: rgba(15, 23, 42, 0.78) !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
}

.complaint-neighbor-label {
    background: rgba(15, 23, 42, 0.78) !important;
    color: #FFFFFF !important;
    font-size: 11px;
    padding: 3px 7px;
}

.complaint-location-label {
    background: rgba(15, 23, 42, 0.78) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
}

.complaint-distance-label {
    background: rgba(15, 23, 42, 0.78) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #FFFFFF !important;
    font-size: 11px;
    padding: 3px 7px;
}

.complaint-map-label::before {
    border-color: transparent !important;
}

.map-compass-control {
    background: transparent;
    border: 0;
    box-shadow: none;
    height: 46px;
    width: 46px;
}

.map-compass-svg {
    filter: drop-shadow(0 1px 3px rgba(15, 23, 42, 0.35));
    height: 46px;
    width: 46px;
}

.map-compass-svg-n {
    fill: #DC2626;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 900;
}

.map-locate-control {
    align-items: center;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(15, 23, 42, 0.25);
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.22);
    color: #0F172A;
    cursor: pointer;
    display: flex;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 800;
    gap: 5px;
    min-height: 32px;
    padding: 6px 8px;
}

.map-locate-control:hover {
    background: #FFFFFF;
}

.map-locate-control:disabled {
    cursor: wait;
    opacity: 0.72;
}

.executive-meta-toggle {
    align-items: center;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(15, 23, 42, 0.24);
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.16);
    color: #064E3B;
    cursor: pointer;
    display: flex;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 800;
    height: 28px;
    justify-content: center;
    line-height: 1;
    padding: 0 9px;
    user-select: none;
}

.executive-meta-toggle:hover {
    background: rgba(255, 255, 255, 0.96);
}

.executive-meta-toggle.is-off {
    color: #64748B;
}

.map-locate-icon {
    color: #0EA5E9;
    font-size: 14px;
    line-height: 1;
}

.map-locate-text {
    line-height: 1;
}

.map-locate-spinner {
    border: 2px solid rgba(14, 165, 233, 0.22);
    border-top-color: #0EA5E9;
    border-radius: 50%;
    display: inline-block;
    height: 13px;
    width: 13px;
    animation: locate-spin 0.8s linear infinite;
}

@keyframes locate-spin {
    to {
        transform: rotate(360deg);
    }
}

.site-compass-label {
    color: #FFFFFF !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    font-weight: 950;
    line-height: 19px;
    text-align: center;
    border: 1.5px solid #FACC15;
    border-radius: 4px;
    background: rgba(2, 6, 23, 0.92);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
    text-shadow:
        -2px -2px 0 #020617,
        2px -2px 0 #020617,
        -2px 2px 0 #020617,
        2px 2px 0 #020617,
        0 0 5px #020617;
}

.site-compass-arrow {
    color: #FACC15;
    font-size: 15px;
    line-height: 16px;
    text-align: center;
    text-shadow:
        -2px -2px 0 #020617,
        2px -2px 0 #020617,
        -2px 2px 0 #020617,
        2px 2px 0 #020617,
        0 0 6px #FFFFFF;
}

.site-compass-cardinal {
    color: #FDE047 !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 23px;
    font-weight: 950;
    line-height: 36px;
    text-align: center;
    border: 0;
    background: transparent;
    box-shadow: none;
    text-shadow:
        -2px -2px 0 #020617,
        2px -2px 0 #020617,
        -2px 2px 0 #020617,
        2px 2px 0 #020617,
        0 0 7px #020617;
}

.selected-site-label {
    color: #FFFFFF;
    font-family: Arial, sans-serif;
    font-size: 9px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    text-shadow:
        -1px -1px 0 #0F172A,
        1px -1px 0 #0F172A,
        -1px 1px 0 #0F172A,
        1px 1px 0 #0F172A;
}

/* Page management */
.page-tab {
    display: none;
}

.page-tab.active {
    display: block;
}

.transport-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.85fr);
    gap: 20px;
    align-items: start;
}

.transport-chart-panel {
    position: sticky;
    top: 16px;
}

.transport-chart-block {
    margin-bottom: 18px;
}

.transport-chart-block h4 {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.transport-chart-block .chart-container {
    height: 260px;
}

@media (max-width: 1180px) {
    .transport-content-grid {
        grid-template-columns: 1fr;
    }

    .transport-chart-panel {
        position: static;
    }
}

/* Worst KPIs Table */
.data-table-container {
    width: 100%;
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.data-table th {
    padding: 10px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    border-bottom: 2px solid var(--border-color);
}

.data-table td {
    padding: 10px;
    font-size: 12px;
    border-bottom: 1px solid var(--border-color);
    font-weight: 500;
}

.wow-period-value {
    min-width: 190px;
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #F8FAFC;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
}

#wow-degradation-body td:nth-last-child(2),
#wow-degradation-body td:last-child {
    color: var(--danger);
    font-weight: 800;
}

.degradation-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(360px, 0.75fr);
    gap: 20px;
    align-items: start;
}

#wow-degradation-body tr[data-site-id] {
    cursor: pointer;
}

#2g-tch-blocking-body tr[data-site-id],
#2g-sdcch-blocking-body tr[data-site-id] {
    cursor: pointer;
}

#wow-degradation-body tr[data-site-id]:hover,
#wow-degradation-body tr.active,
#2g-tch-blocking-body tr[data-site-id]:hover,
#2g-sdcch-blocking-body tr[data-site-id]:hover,
#2g-tch-blocking-body tr.active,
#2g-sdcch-blocking-body tr.active {
    background: var(--danger-soft);
}

.degradation-trend-panel {
    position: sticky;
    top: 16px;
}

.degradation-trend-chart-block + .degradation-trend-chart-block {
    margin-top: 18px;
}

.degradation-trend-chart-block h4 {
    margin-bottom: 6px;
    color: var(--text-secondary);
    font-size: 11px;
    text-transform: uppercase;
}

@media (max-width: 1280px) {
    .degradation-content-grid {
        grid-template-columns: 1fr;
    }

    .degradation-trend-panel {
        position: static;
    }
}

.vlr-summary-parent {
    cursor: pointer;
}

.vlr-drill-btn {
    width: 22px;
    height: 22px;
    margin-right: 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: #F8FAFC;
    color: var(--primary);
    font-weight: 800;
    line-height: 18px;
    cursor: pointer;
}

.vlr-drill-spacer {
    display: inline-block;
    width: 30px;
}

.vlr-child-row.hidden {
    display: none;
}

.vlr-child-row td {
    background: #F8FAFC;
    color: var(--text-secondary);
}

.vlr-child-indent {
    display: inline-block;
    margin: 0 10px 0 30px;
    padding: 2px 6px;
    border-radius: 6px;
    background: #E0F2FE;
    color: #0369A1;
    font-size: 10px;
    font-weight: 700;
}

.vlr-map-container {
    height: 360px;
    min-height: 360px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

#vlr-map-element {
    width: 100%;
    height: 100%;
}

.vlr-map-legend {
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    font-size: 11px;
    color: var(--text-primary);
}

.vlr-map-legend strong {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
}

.vlr-map-legend span {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: 6px;
    border-radius: 50%;
    border: 1px solid rgba(15, 23, 42, 0.18);
    vertical-align: -1px;
}

.badge {
    padding: 3px 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
}

.badge.danger { background-color: var(--danger-soft); color: var(--danger); }
.badge.warning { background-color: var(--warning-soft); color: var(--warning); }
.badge.success { background-color: var(--success-soft); color: var(--success); }

/* Custom Scrollbar for sleek UI */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

/* ==========================================================================
   EXPORT TO XLSX STYLING
   ========================================================================== */
.export-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: -4px;
}

.export-xlsx-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid #10B981;
    background-color: rgba(16, 185, 129, 0.05);
    color: #10B981;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-fast);
    outline: none;
    box-shadow: var(--shadow-sm);
}

.export-xlsx-btn i {
    font-size: 14px;
}

.export-xlsx-btn:hover {
    background-color: #10B981;
    color: white;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
    transform: translateY(-1px);
}

.export-xlsx-btn:active {
    transform: translateY(0);
}

/* ==========================================================================
   GLOBAL LOADING PROGRESS BAR & OVERLAYS
   ========================================================================== */
#global-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3.5px;
    background: linear-gradient(90deg, var(--accent-blue) 0%, var(--accent-cyan) 50%, var(--success) 100%);
    z-index: 99999;
    width: 0%;
    opacity: 0;
    transition: width 0.3s ease, opacity 0.3s ease;
    box-shadow: 0 1px 10px rgba(13, 110, 253, 0.45);
    pointer-events: none;
}

#global-progress-bar.loading {
    opacity: 1;
}

/* Localized opacity transitions when loading is active */
.loading-active .panel-card,
.loading-active .kpi-card,
.loading-active canvas,
.loading-active .data-table-container,
.loading-active #map-element,
.loading-active #neighbor-map-element,
.loading-active #mc-map-element,
.loading-active #vlr-map-element {
    opacity: 0.6;
    transition: opacity 0.35s ease;
}

.multi-filter-select {
    min-width: 150px;
    height: 68px;
    padding: 3px 6px;
    overflow-y: auto;
}

.multi-filter-select option {
    padding: 3px 6px;
    border-radius: 4px;
}

/* A slow background API call must not lock unrelated dashboard controls.
   Individual actions already use request IDs to discard stale responses. */
.loading-active canvas,
.loading-active #map-element,
.loading-active #neighbor-map-element,
.loading-active #mc-map-element,
.loading-active #vlr-map-element {
    pointer-events: none;
}

/* ==========================================================================
   GLASSMORPHIC PORTAL LOGIN SCREEN
   ========================================================================== */
.login-overlay-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.4s ease forwards;
}

.login-card-container {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.35);
    width: 100%;
    max-width: 400px;
    padding: 32px;
    animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.login-logo-header {
    text-align: center;
    margin-bottom: 24px;
}

.login-logo-badge {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    margin-bottom: 12px;
    box-shadow: 0 8px 16px rgba(13, 110, 253, 0.25);
}

.login-logo-header h2 {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
}

.login-logo-header p {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 4px;
}

.login-body-form h3 {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.login-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.login-input-group label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.login-input-group input {
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background-color: #F8FAFC;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    outline: none;
    transition: var(--transition-fast);
}

.login-input-group input:focus {
    border-color: var(--accent-blue);
    background-color: white;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.08);
}

.login-submit-button {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 8px 16px rgba(13, 110, 253, 0.15);
    transition: var(--transition-normal);
}

.login-submit-button:hover {
    box-shadow: 0 8px 20px rgba(13, 110, 253, 0.3);
    transform: translateY(-1px);
}

.login-error-alert {
    background-color: var(--danger-soft);
    color: var(--danger);
    border: 1px solid rgba(239, 68, 68, 0.15);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 11.5px;
    font-weight: 700;
    margin-bottom: 16px;
    text-align: center;
    animation: shake 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.mw50-title-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-top: 4px solid #2DB7B1;
}

.mw50-title-card h2 {
    color: #2DB7B1;
    font-size: 26px;
    margin: 0 0 4px;
}

.mw50-title-card p {
    color: #EC008C;
    font-weight: 700;
    margin: 0;
}

.mw50-insight-list {
    color: #334155;
    font-size: 12px;
    line-height: 1.7;
}

.mw50-insight-list ul {
    margin: 0;
    padding-left: 18px;
}

.mw50-table {
    min-width: 1450px;
}

.mw50-table thead th {
    text-align: center;
}

.mw50-table .mw50-head-3id {
    background: #D900A5;
    color: #FFFFFF;
}

.mw50-table .mw50-head-im3 {
    background: #FFF000;
    color: #111827;
}

.mw50-table .mw50-head-ioh {
    background: #D91515;
    color: #FFFFFF;
}

.mw50-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.mw50-chart-grid .chart-container {
    height: 245px;
}

.mw50-chart-card.degraded {
    border-bottom: 4px solid #EC008C;
}

.mw50-chart-card.improved {
    border-bottom: 4px solid #2DB7B1;
}

@media (max-width: 900px) {
    body {
        height: auto;
        min-height: 100vh;
    }

    #app-container {
        height: auto;
        min-height: 100vh;
    }

    #sidebar {
        width: min(86vw, 300px);
    }

    .body-sidebar-collapsed #sidebar {
        width: min(82vw, 300px);
        padding: 24px 16px;
    }

    .body-sidebar-collapsed .logo-container {
        justify-content: flex-start;
        padding-left: 8px;
    }

    .body-sidebar-collapsed .logo-text,
    .body-sidebar-collapsed .tab-btn span,
    .body-sidebar-collapsed .sidebar-metadata-panel {
        display: block;
    }

    .body-sidebar-collapsed .tab-btn {
        justify-content: flex-start;
        padding: 10px 14px;
    }

    #main-content {
        width: 100vw;
        min-width: 0;
        height: auto;
        min-height: 100vh;
    }

    #dashboard-header {
        padding: 12px 14px;
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .header-left {
        width: 100%;
    }

    .header-title h2 {
        font-size: 18px;
    }

    .header-title p {
        overflow-wrap: anywhere;
    }

    .filter-panel-top {
        width: 100%;
        gap: 8px;
    }

    .filter-item {
        min-width: min(100%, 150px);
        flex: 1 1 145px;
    }

    .dashboard-grid {
        padding: 14px;
        gap: 16px;
    }

    .kpi-row,
    .vis-row,
    .vis-row.equal,
    .vis-row-three {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .panel-card {
        padding: 12px;
        min-width: 0;
    }

    .panel-header {
        gap: 8px;
        align-items: flex-start;
    }

    .panel-header h3 {
        line-height: 1.25;
    }

    .mw50-title-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .mw50-chart-grid {
        grid-template-columns: 1fr;
    }

    .chart-container {
        height: 240px;
        min-width: 0;
    }

    .chart-container.large {
        height: 280px;
    }

    #map-element,
    #neighbor-map-element,
    #mc-map-element,
    #vlr-map-element {
        min-height: 300px;
    }
}

@media (max-width: 520px) {
    .filter-item {
        flex-basis: 100%;
    }

    .kpi-row {
        grid-template-columns: 1fr;
    }

    .chart-container,
    .chart-container.large {
        height: 260px;
    }
}

/* ==========================================================================
   VISUAL REFRESH 2026: CLEAN OPERATIONS DASHBOARD
   ========================================================================== */

:root {
    --bg-primary: #F3F6FA;
    --bg-sidebar: #FFFFFF;
    --bg-card: #FFFFFF;
    --border-color: #DDE5EF;
    --text-primary: #081A33;
    --text-secondary: #4B5D73;
    --text-muted: #8A98AA;
    --accent-blue: #2563EB;
    --accent-cyan: #0891B2;
    --accent-blue-soft: rgba(37, 99, 235, 0.08);
    --accent-cyan-soft: rgba(8, 145, 178, 0.09);
    --success: #059669;
    --success-soft: #E8F8F1;
    --warning: #D97706;
    --warning-soft: #FFF4DB;
    --danger: #DC2626;
    --danger-soft: #FDECEC;
    --shadow-sm: 0 1px 2px rgba(8, 26, 51, 0.05);
    --shadow-md: 0 8px 24px rgba(8, 26, 51, 0.07);
    --shadow-lg: 0 18px 42px rgba(8, 26, 51, 0.12);
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 8px;
}

body {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.72), rgba(243,246,250,0.92) 260px),
        var(--bg-primary);
}

#sidebar {
    border-right-color: rgba(148, 163, 184, 0.35);
    box-shadow: 8px 0 24px rgba(8, 26, 51, 0.06);
}

.logo-container {
    margin-bottom: 22px;
}

.logo-icon {
    background: linear-gradient(135deg, #F59E0B, #E11D48 48%, #2563EB);
    box-shadow: 0 8px 18px rgba(225, 29, 72, 0.18);
}

.logo-text h1 {
    letter-spacing: 0;
}

.tab-navigation {
    gap: 5px;
    padding-right: 6px;
}

.tab-btn {
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #52627A;
}

.tab-btn i {
    color: #7B8BA0;
    font-size: 16px;
}

.tab-btn:hover {
    background: #F6F8FB;
    border-color: #E5ECF5;
    color: var(--text-primary);
}

.tab-btn.active {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(8, 145, 178, 0.08));
    border-color: rgba(37, 99, 235, 0.2);
    color: #1D4ED8;
    box-shadow: inset 3px 0 0 #2563EB;
}

.tab-btn.active i {
    color: #2563EB;
}

.sidebar-metadata-panel {
    background: #F8FAFC;
    border-color: #E2E8F0;
    border-radius: 8px;
}

#main-content {
    background: transparent;
}

#dashboard-header {
    position: sticky;
    top: 0;
    z-index: 850;
    background: rgba(255, 255, 255, 0.92);
    border-bottom-color: rgba(148, 163, 184, 0.32);
    box-shadow: 0 10px 28px rgba(8, 26, 51, 0.06);
    backdrop-filter: blur(14px);
}

.header-title h2 {
    color: var(--text-primary);
    font-size: 22px;
    letter-spacing: 0;
}

.header-title p {
    color: var(--text-secondary);
    font-weight: 600;
}

#dashboard-debug-status {
    color: #2563EB;
    font-size: 10.5px;
}

.filter-panel-top {
    gap: 12px;
}

.filter-item label {
    color: #31445C;
    font-size: 10.5px;
    letter-spacing: 0.35px;
}

.filter-select,
.custom-searchable-dropdown input {
    min-height: 42px;
    border-color: #D8E1ED;
    border-radius: 8px;
    background: #F8FAFD;
    color: #0B1F3A;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

.filter-select:hover,
.custom-searchable-dropdown input:hover {
    border-color: #B8C6D8;
}

.filter-select:focus,
.custom-searchable-dropdown input:focus {
    border-color: #2563EB;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.dashboard-grid {
    padding: 24px;
    gap: 20px;
}

.kpi-row {
    gap: 18px;
}

.kpi-card,
.panel-card {
    border: 1px solid rgba(203, 213, 225, 0.82);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow-sm);
}

.kpi-card {
    min-height: 138px;
    padding: 19px 20px;
    overflow: hidden;
}

.kpi-card::before {
    width: 4px;
}

.kpi-card::after {
    content: "";
    position: absolute;
    right: -30px;
    top: -40px;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.055);
    pointer-events: none;
}

.kpi-card:hover,
.panel-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.kpi-title {
    color: #273A53;
    font-size: 12px;
    letter-spacing: 0.25px;
}

.kpi-value {
    color: #07182E;
    font-size: 25px;
    letter-spacing: 0;
}

.kpi-sub {
    color: #63758B;
}

.kpi-icon {
    background: #F6F8FB;
    border: 1px solid #E5ECF5;
}

.panel-card {
    padding: 20px;
}

.panel-header {
    border-bottom: 1px solid rgba(226, 232, 240, 0.75);
    margin-bottom: 14px;
    padding-bottom: 12px;
}

.panel-header h3 {
    color: #081A33;
    font-size: 16px;
    letter-spacing: 0;
}

.chart-container {
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(248,250,252,0.72), rgba(255,255,255,0.92));
}

#map-element,
#neighbor-map-element,
#mc-map-element,
#vlr-map-element,
#complaint-map-element {
    border-color: #CBD5E1;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
}

.data-table-container,
.site-alarm-table-wrap {
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: #FFFFFF;
}

.data-table,
.site-alarm-table {
    border-collapse: separate;
    border-spacing: 0;
}

.data-table th,
.site-alarm-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #F7FAFD;
    color: #253852;
    font-size: 11px;
    letter-spacing: 0.25px;
    border-bottom: 1px solid #DCE5F0;
}

.data-table td,
.site-alarm-table td {
    color: #334155;
    border-bottom-color: #EEF2F7;
}

.data-table tbody tr:nth-child(even),
.site-alarm-table tbody tr:nth-child(even) {
    background: #FAFCFE;
}

.data-table tbody tr:hover,
.site-alarm-table tbody tr:hover {
    background: #F3F7FC;
}

.site-down-map-card {
    min-height: 560px;
}

#site-down-map {
    width: 100%;
    height: 500px;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    overflow: hidden;
    background: #E5E7EB;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
}

.site-down-map-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
}

.site-down-map-toolbar input[type="range"] {
    flex: 1;
    min-width: 180px;
}

#site-down-hour-label {
    min-width: 120px;
    color: var(--text-primary);
}

.site-down-date-select {
    width: 150px;
    min-width: 150px;
}

.site-down-click-row {
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.site-down-click-row:hover {
    background: #ECFDF5;
}

.site-down-click-row.active td {
    background: #D1FAE5 !important;
    color: #065F46;
    font-weight: 800;
}

.site-down-map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin-top: 8px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
}

.site-down-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    margin-right: 5px;
    border: 1px solid #111827;
    vertical-align: -1px;
}

.site-down-dot.ows {
    background: #DC2626;
}

.site-down-dot.netdrone {
    background: #2563EB;
}

.site-down-dot.other {
    background: #111827;
}

.ows-map-card {
    min-height: 620px;
}

#ows-alarm-map {
    width: 100%;
    height: 540px;
    min-height: 540px;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    overflow: hidden;
    background: #E5E7EB;
}

.ows-map-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-bottom: 10px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 800;
}

.ows-map-filter-bar label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ows-map-date-select {
    min-width: 150px;
    max-width: 170px;
    padding: 7px 10px;
}

.ows-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    margin-right: 5px;
    border: 1px solid #111827;
    vertical-align: -1px;
}

.ows-dot.site-down { background: #DC2626; }
.ows-dot.transmission { background: #F97316; }
.ows-dot.power { background: #EAB308; }
.ows-dot.degradation { background: #2563EB; }
.ows-dot.other { background: #6B7280; }

.ows-status-pill {
    display: inline-block;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 900;
    border-radius: 999px;
    padding: 4px 8px;
    white-space: nowrap;
}

.ows-aging-pill {
    display: inline-block;
    min-width: 70px;
    border-radius: 999px;
    padding: 4px 8px;
    background: #E0F2FE;
    color: #075985;
    font-size: 10px;
    font-weight: 900;
    text-align: center;
    white-space: nowrap;
}

.ows-aging-pill.warning {
    background: #FEF3C7;
    color: #92400E;
}

.ows-aging-pill.danger {
    background: #FFEDD5;
    color: #9A3412;
}

.ows-aging-pill.critical {
    background: #FEE2E2;
    color: #991B1B;
}

.ows-click-row {
    cursor: pointer;
}

.ows-click-row.active td {
    background: #ECFDF5 !important;
    color: #065F46;
    font-weight: 800;
}

.ows-cluster-label {
    background: rgba(15, 23, 42, 0.88);
    color: #FFFFFF;
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    font-size: 10px;
    font-weight: 900;
    padding: 1px 5px;
}

#site-down-detail-body tr.site-down-row-warning td {
    background: #FFF7E6;
}

#site-down-detail-body tr.site-down-row-danger td {
    background: #FEECEC;
    color: #991B1B;
    font-weight: 700;
}

#site-down-detail-body tr.site-down-row-critical td {
    background: #7F1D1D;
    color: #FFFFFF;
    font-weight: 800;
}

.badge {
    border: 1px solid currentColor;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0;
}

.badge.success {
    background: #E8F8F1;
    color: #047857;
}

.badge.warning {
    background: #FFF3D8;
    color: #B45309;
}

.badge.danger {
    background: #FDECEC;
    color: #B91C1C;
}

.export-xlsx-btn,
.header-refresh-data-btn,
.sidebar-nav-scroll-btn {
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(8, 26, 51, 0.04);
}

.export-xlsx-btn,
.header-refresh-data-btn {
    border-color: rgba(5, 150, 105, 0.48);
    background: linear-gradient(180deg, #F0FDF7, #E8F8F1);
}

.export-xlsx-btn:hover,
.header-refresh-data-btn:hover {
    background: linear-gradient(180deg, #DCFCE7, #D1FAE5);
    box-shadow: 0 8px 18px rgba(5, 150, 105, 0.13);
}

.custom-searchable-dropdown .dropdown-list,
.complaint-place-results {
    border-radius: 8px;
    border-color: #D8E1ED;
    box-shadow: 0 18px 42px rgba(8, 26, 51, 0.14);
}

.complaint-summary-text,
.complaint-alarm-box,
.complaint-elevation-profile {
    border-color: #D8E1ED;
    border-radius: 8px;
}

@media (max-width: 900px) {
    #dashboard-header {
        position: relative;
    }

    .dashboard-grid {
        padding: 14px;
    }

    .panel-card {
        padding: 14px;
    }
}

/* Telegram collector map legend status dots */
.site-down-dot.ows-mains { background: #DC2626; }
.site-down-dot.ows-link { background: #F59E0B; }
.site-down-dot.ows-ne { background: #8B5CF6; }

/* Telegram Userbot page styles */
.telegram-dashboard {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.telegram-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 16px 20px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.telegram-status-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.telegram-status-label {
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--text-primary);
}

.telegram-otp-container {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-top: 4px solid var(--accent-blue);
    border-radius: var(--radius-lg);
    padding: 28px;
    max-width: 500px;
    margin: 30px auto;
    box-shadow: var(--shadow-lg);
    animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.telegram-otp-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.telegram-otp-icon {
    font-size: 32px;
    color: #0088cc;
    display: flex;
    align-items: center;
    justify-content: center;
}

.telegram-otp-title {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.telegram-otp-body {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
}

.telegram-otp-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.telegram-otp-input-wrapper {
    display: flex;
    gap: 12px;
}

.telegram-otp-input {
    flex: 1;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.telegram-otp-input:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
    outline: none;
}

.telegram-otp-btn {
    background: linear-gradient(135deg, #0088cc, #00a2ed);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    padding: 12px 24px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(0, 136, 204, 0.25);
    transition: opacity 0.2s, transform 0.2s;
}

.telegram-otp-btn:hover {
    opacity: 0.95;
    transform: translateY(-1px);
}

.telegram-otp-btn:active {
    transform: translateY(0);
}

.telegram-otp-btn:disabled {
    background: var(--border-color);
    color: var(--text-muted);
    cursor: not-allowed;
    box-shadow: none;
}

.telegram-otp-error {
    background: var(--danger-soft);
    color: var(--danger);
    font-size: 12px;
    font-weight: 600;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--danger);
    margin-top: 8px;
}

.telegram-otp-info {
    background: var(--success-soft);
    color: var(--success);
    font-size: 12px;
    font-weight: 600;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--success);
    margin-top: 8px;
}

.telegram-log-table-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
    box-shadow: var(--shadow-sm);
}

.telegram-table-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
    align-items: flex-end;
}

.telegram-table-filters .filter-item {
    flex: 1;
    min-width: 180px;
}

.telegram-badge {
    display: inline-block;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 999px;
    text-transform: uppercase;
}

.telegram-badge.ingested_ok {
    background: var(--success-soft);
    color: var(--success);
}

.telegram-badge.partial_error {
    background: var(--warning-soft);
    color: var(--warning);
}

.telegram-badge.corrupted {
    background: var(--danger-soft);
    color: var(--danger);
}

.telegram-badge.downloaded {
    background: var(--accent-blue-soft);
    color: var(--accent-blue);
}

.telegram-badge.source-netdrone {
    background: rgba(37, 99, 235, 0.1);
    color: #2563EB;
}

.telegram-badge.source-ows {
    background: rgba(220, 38, 38, 0.1);
    color: #DC2626;
}

.telegram-badge.source-other {
    background: rgba(107, 114, 128, 0.1);
    color: #6B7280;
}

/* Telegram Coverage Mode Tooltip Customizations */
.telegram-coverage-tooltip {
    background: rgba(0, 216, 246, 0.45) !important;
    color: #000000 !important;
    border: 1px solid rgba(0, 0, 0, 0.4) !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
    text-shadow: none !important;
    font-family: Arial, sans-serif !important;
    font-size: 9px !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
}

.telegram-distance-tooltip {
    background: transparent !important;
    border: none !important;
    color: #FFFFFF !important;
    font-weight: bold !important;
    font-size: 13px !important;
    box-shadow: none !important;
    text-shadow: 1px 1px 2px #000000, -1px -1px 2px #000000, 1px -1px 2px #000000, -1px 1px 2px #000000 !important;
}
.ows-command-grid{display:grid;grid-template-columns:285px minmax(480px,1fr) 250px;gap:12px;padding:12px;border-radius:18px;background:linear-gradient(145deg,#071426,#0B2038 58%,#071827);box-shadow:0 18px 42px rgba(2,8,23,.28)}
.ows-command-left,.ows-command-right{display:flex;flex-direction:column;gap:10px;min-width:0}.ows-command-left .kpi-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.ows-command-left .kpi-card{grid-column:auto!important;min-width:0;padding:11px;background:#102B45;border:1px solid rgba(125,211,252,.14);color:#E2F2FF}.ows-command-left .kpi-card .kpi-value{font-size:26px}.ows-command-left .kpi-card .kpi-title,.ows-command-left .kpi-card .kpi-footer{color:#A9C6DC}
.ows-live-ribbon{color:#7DD3FC;font-size:11px;font-weight:800;letter-spacing:.08em}.ows-live-ribbon span{display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:#F43F5E;box-shadow:0 0 12px #F43F5E}.ows-duration-panel,.ows-side-panel{padding:13px;border:1px solid rgba(148,163,184,.17);border-radius:12px;background:rgba(15,40,64,.9);color:#E5F3FF}.ows-duration-panel h4,.ows-side-panel h4{margin:0 0 10px;font-size:13px;color:#BAE6FD}.ows-duration-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.ows-duration-card{padding:10px;border-radius:8px;color:#fff;display:flex;flex-direction:column}.ows-duration-card b{font-size:24px;line-height:1}.ows-duration-card span{margin-top:5px;font-size:10px;opacity:.88}.ows-duration-card.tone-0{background:#0284C7}.ows-duration-card.tone-1{background:#059669}.ows-duration-card.tone-2{background:#CA8A04}.ows-duration-card.tone-3{background:#EA580C}.ows-duration-card.tone-4{background:#DC2626;grid-column:span 2}
.ows-command-center .ows-map-card{height:100%;margin:0;background:#0A1C31;border-color:rgba(125,211,252,.2)}.ows-command-center #ows-alarm-map{min-height:610px;border-radius:0 0 12px 12px}.ows-command-center .panel-header h3,.ows-command-center .ows-map-filter-bar{color:#DDF4FF}.ows-side-stat{margin-bottom:12px}.ows-side-stat>div{display:flex;justify-content:space-between;gap:8px;font-size:11px}.ows-side-stat i{display:block;height:4px;margin-top:5px;border-radius:999px}.ows-pulse-number{font-size:38px;font-weight:800;color:#38BDF8;line-height:1}.ows-pulse-critical{margin-top:10px;padding:7px;border-radius:7px;color:#FECACA;background:rgba(220,38,38,.2);font-size:11px}
@media(max-width:1180px){.ows-command-grid{grid-template-columns:250px 1fr}.ows-command-right{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr)}}@media(max-width:820px){.ows-command-grid{grid-template-columns:1fr}.ows-command-right{grid-template-columns:1fr}.ows-command-center #ows-alarm-map{min-height:480px}}
#dashboard-header.ows-mode .filter-panel-top,#dashboard-header.ows-mode #header-refresh-data-btn{display:none!important}#dashboard-header.ows-mode{min-height:92px;padding-right:28px}.ows-command-left .kpi-card .kpi-title{color:#E0F2FE!important;font-size:13px;line-height:1.25;font-weight:800}.ows-command-left .kpi-card .kpi-value{color:#FFFFFF!important;font-size:30px}.ows-command-left .kpi-card .kpi-footer,.ows-command-left .kpi-card .kpi-footer span{color:#C5D9E8!important;font-size:12px;line-height:1.35;font-weight:600}.ows-command-left .kpi-card .kpi-icon{color:#082F49;background:#E0F2FE}.ows-command-left .kpi-card[style]{min-height:150px}.ows-duration-panel h4,.ows-side-panel h4{font-size:15px}.ows-duration-card span,.ows-side-stat>div{font-size:13px}.ows-duration-card b{font-size:30px}.ows-command-center .panel-header h3{font-size:18px}.ows-command-center .ows-map-filter-bar,.ows-command-center .ows-map-filter-bar label{font-size:13px;color:#E0F2FE}.ows-command-center .site-down-map-legend{color:#D6EAF8;font-size:12px}.ows-command-right{font-size:13px}.ows-command-left .kpi-card.success .kpi-footer span{color:#D5E7F2!important}
.ows-point-hint{color:#AFC8DA;font-size:12px;line-height:1.4}.ows-point-site{font-size:20px;font-weight:900;color:#7DD3FC}.ows-point-name{margin:3px 0 10px;color:#E5F3FF;font-size:12px}.ows-point-detail{display:grid;grid-template-columns:70px 1fr;gap:6px 9px;margin:0;font-size:12px}.ows-point-detail dt{color:#8FB3CA;font-weight:700}.ows-point-detail dd{margin:0;color:#F3F9FC;overflow-wrap:anywhere}.ows-detail-popup .leaflet-popup-content-wrapper{border-radius:12px;background:#0B2239;color:#E7F6FF;box-shadow:0 14px 35px rgba(2,8,23,.38)}.ows-detail-popup .leaflet-popup-tip{background:#0B2239}.ows-map-popup{min-width:270px}.ows-map-popup h4{margin:0;color:#7DD3FC;font-size:17px}.ows-map-popup p{margin:3px 0 10px;color:#D5E7F2}.ows-map-popup>div{display:grid;grid-template-columns:72px 1fr;gap:8px;padding:4px 0;border-top:1px solid rgba(148,163,184,.14);font-size:12px}.ows-map-popup b{color:#91B6CC}.ows-map-popup span{color:#FFF;overflow-wrap:anywhere}.ows-command-center .leaflet-interactive{cursor:pointer}

/* ==========================================================================
   OWS & Netdrone Command Center - Dark Theme & Fit Screen overrides
   ========================================================================== */
#page-ows-alarms {
    background-color: #030d1a !important;
    padding: 12px 20px !important;
}

#page-ows-alarms .export-bar {
    background: #071426 !important;
    border: 1px solid rgba(125, 211, 252, 0.15) !important;
    border-radius: 12px;
    padding: 10px 15px !important;
    margin-bottom: 12px !important;
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    gap: 12px;
    flex-wrap: wrap;
}

#page-ows-alarms .export-bar .filter-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#page-ows-alarms .export-bar .filter-item label {
    font-size: 11px;
    font-weight: 700;
    color: #8faed0 !important;
}

#page-ows-alarms .export-bar .filter-select {
    background-color: #0c2035 !important;
    border: 1px solid rgba(125, 211, 252, 0.25) !important;
    color: #ffffff !important;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    outline: none;
    height: 34px;
}

#page-ows-alarms .export-bar .filter-select option {
    background-color: #071426 !important;
    color: #ffffff !important;
}

#page-ows-alarms .export-bar .export-xlsx-btn {
    background-color: rgba(16, 185, 129, 0.1) !important;
    border-color: #10b981 !important;
    color: #34d399 !important;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 700;
}

#page-ows-alarms .export-bar .export-xlsx-btn:hover {
    background-color: #10b981 !important;
    color: #ffffff !important;
}

.neighbor-vlr-card {
    margin-top: 16px;
}

.neighbor-vlr-card .chart-container {
    height: 260px;
}

.neighbor-map-card {
    margin-top: 0;
}

.neighbor-map-card .neighbor-map-container,
.neighbor-map-card #neighbor-map-element {
    min-height: 320px;
    height: calc(100% - 40px);
}

.neighbor-sector-chip.active {
    border-color: #f59e0b !important;
    background: #fff7ed !important;
    color: #9a3412 !important;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

.neighbor-sector-chip.sector-active {
    background: #f59e0b !important;
    color: #ffffff !important;
    font-weight: 800;
}

#page-ows-alarms .export-bar .ows-refresh-push {
    min-width: 132px;
    height: 48px;
    padding: 0 22px;
    border: 2px solid #6ee7b7 !important;
    border-radius: 999px;
    background: linear-gradient(145deg, #22c55e, #059669) !important;
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.2px;
    box-shadow: 0 7px 18px rgba(16, 185, 129, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

#page-ows-alarms .export-bar .ows-refresh-push i {
    font-size: 20px;
}

#page-ows-alarms .export-bar .ows-refresh-push:hover {
    background: linear-gradient(145deg, #34d399, #10b981) !important;
    box-shadow: 0 9px 24px rgba(16, 185, 129, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

#page-ows-alarms .export-bar .ows-refresh-push:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 3px 9px rgba(16, 185, 129, 0.35);
}

#page-ows-alarms .export-bar .badge {
    height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
}

/* Header Dark Mode overrides when OWS page is active */
#dashboard-header.ows-mode {
    background-color: #071426 !important;
    border-bottom: 1px solid rgba(125, 211, 252, 0.15) !important;
    padding: 12px 28px !important;
}

#dashboard-header.ows-mode #header-site-id {
    color: #38BDF8 !important;
}

#dashboard-header.ows-mode #header-site-name {
    color: #94A3B8 !important;
}

#dashboard-header.ows-mode #dashboard-debug-status {
    color: #64748B !important;
}

#dashboard-header.ows-mode #sidebar-toggle-btn {
    color: #38BDF8 !important;
}

/* OWS Command Grid - fits the screen height */
.ows-command-grid {
    display: grid !important;
    grid-template-columns: 285px minmax(480px, 1fr) 250px !important;
    gap: 12px !important;
    height: calc(100vh - 175px) !important;
    margin-bottom: 25px !important;
    box-sizing: border-box;
    flex-shrink: 0;
}

.ows-command-left,
.ows-command-right {
    height: 100% !important;
    overflow-y: auto !important;
    padding-right: 4px;
}

.ows-command-center {
    height: 100% !important;
    overflow: hidden !important;
}

.ows-command-center .ows-map-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    margin: 0 !important;
}

.ows-command-center #ows-alarm-map {
    flex-grow: 1 !important;
    min-height: unset !important;
    height: unset !important;
}

/* Premium Dark Tables & Charts Layout & Styling */
.ows-table-row {
    display: grid !important;
    grid-template-columns: 1fr 1.5fr !important;
    gap: 16px;
    margin-bottom: 24px;
}

#page-ows-alarms .panel-card {
    background: #071527 !important;
    border: 1px solid rgba(56, 189, 248, 0.18) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 32px rgba(2, 9, 22, 0.38) !important;
    overflow: hidden;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
}

#page-ows-alarms .panel-header {
    background: #091c33 !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.18) !important;
    padding: 14px 20px !important;
    flex-shrink: 0;
}

#page-ows-alarms .panel-header h3 {
    color: #38bdf8 !important;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

#page-ows-alarms .chart-container {
    background: #071527 !important;
    border-radius: 0 0 14px 14px;
    padding: 15px;
    box-sizing: border-box;
}

#page-ows-alarms .data-table-container {
    background: #071527 !important;
    border-radius: 0 0 14px 14px;
    max-height: 420px;
    overflow-y: auto;
    flex-grow: 1;
}

#page-ows-alarms .data-table {
    background: transparent !important;
    border-collapse: collapse;
    width: 100%;
}

#page-ows-alarms .data-table th {
    background: linear-gradient(to right, #091c33, #0b223d) !important;
    color: #38bdf8 !important;
    border-bottom: 2px solid rgba(56, 189, 248, 0.25) !important;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 12px 16px !important;
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Explicitly override base stylesheet white/grey row shading */
#page-ows-alarms .data-table tbody tr {
    background: transparent !important;
}

#page-ows-alarms .data-table td {
    border-bottom: 1px solid rgba(56, 189, 248, 0.08) !important;
    color: #e2f2ff !important;
    padding: 12px 16px !important;
    font-size: 12px;
    font-family: var(--font-body);
    vertical-align: middle;
}

/* Fully opaque dark alternating rows */
#page-ows-alarms .data-table tr:nth-child(even) td {
    background-color: #061224 !important;
}

#page-ows-alarms .data-table tr:nth-child(odd) td {
    background-color: #071527 !important;
}

/* Fully opaque hover state */
#page-ows-alarms .data-table tr:hover td {
    background-color: #0d2744 !important;
    color: #ffffff !important;
}

#page-ows-alarms .data-table td b {
    color: #38bdf8 !important;
    font-family: var(--font-heading);
    font-weight: 600;
}

/* Clickable MC rows animation */
#page-ows-alarms .ows-click-row {
    cursor: pointer;
    transition: all 0.15s ease;
}

#page-ows-alarms .ows-click-row:hover td {
    border-left-color: #38bdf8;
    background-color: #0d2744 !important;
}

#page-ows-alarms .ows-click-row.active td {
    background-color: rgba(56, 189, 248, 0.15) !important;
    color: #ffffff !important;
    font-weight: 600;
}

/* Status pills */
#page-ows-alarms .ows-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Custom scrollbars for OWS panel cards and table containers */
.ows-command-left::-webkit-scrollbar,
.ows-command-right::-webkit-scrollbar,
#page-ows-alarms .data-table-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.ows-command-left::-webkit-scrollbar-thumb,
.ows-command-right::-webkit-scrollbar-thumb,
#page-ows-alarms .data-table-container::-webkit-scrollbar-thumb {
    background-color: rgba(56, 189, 248, 0.2);
    border-radius: 3px;
}
.ows-command-left::-webkit-scrollbar-track,
.ows-command-right::-webkit-scrollbar-track,
#page-ows-alarms .data-table-container::-webkit-scrollbar-track {
    background-color: rgba(7, 21, 39, 0.5);
}


/* ==========================================================================
   OWS & Netdrone Command Center - Premium Responsive Mobile layouts
   ========================================================================== */
@media (max-width: 820px) {
    #page-ows-alarms {
        padding: 8px 10px !important;
    }
    
    #page-ows-alarms .export-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    
    #page-ows-alarms .export-bar .filter-item {
        width: 100% !important;
    }
    
    #page-ows-alarms .export-bar .filter-select {
        width: 100% !important;
        height: 38px !important;
    }
    
    #page-ows-alarms .export-bar .export-xlsx-btn {
        width: 100% !important;
        height: 38px !important;
        justify-content: center !important;
    }
    
    .ows-command-grid {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        gap: 16px !important;
        padding: 10px !important;
        margin-bottom: 15px !important;
        background: linear-gradient(180deg, #071426, #071827) !important;
    }
    
    .ows-command-left {
        order: 2 !important;
        height: auto !important;
        overflow: visible !important;
        padding-right: 0 !important;
    }
    
    .ows-command-center {
        order: 1 !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    .ows-command-center .ows-map-card {
        height: 440px !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .ows-command-center #ows-alarm-map {
        flex-grow: 1 !important;
        height: 330px !important;
        min-height: 330px !important;
        border-radius: 0 0 12px 12px !important;
    }
    
    .ows-map-filter-bar {
        padding: 10px !important;
        gap: 8px 12px !important;
        background: rgba(11, 32, 56, 0.4) !important;
        border-radius: 8px !important;
        margin: 8px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .ows-map-filter-bar label {
        font-size: 12px !important;
    }
    
    .ows-map-filter-bar input[type="range"] {
        width: 100% !important;
        margin: 6px 0 !important;
    }
    
    #ows-hour-play-btn {
        width: 100% !important;
        height: 34px !important;
        font-size: 13px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .ows-command-right {
        order: 3 !important;
        height: auto !important;
        overflow: visible !important;
        padding-right: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .ows-command-right .ows-side-panel {
        width: 100% !important;
    }
    
    .ows-table-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    #page-ows-alarms .data-table-container {
        max-height: 350px !important;
    }
}


/* Table Mobile Responsiveness overrides */
@media (max-width: 820px) {
    #page-ows-alarms .data-table-container {
        overflow-x: auto !important;
        width: 100% !important;
        -webkit-overflow-scrolling: touch;
    }
    
    #page-ows-alarms .data-table {
        min-width: 750px !important; /* Force readable minimum width for table columns */
        width: 100% !important;
    }
    
    #page-ows-alarms .data-table th,
    #page-ows-alarms .data-table td {
        padding: 8px 10px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }
}


/* Long Aging Alarms Mobile Layout overrides */
@media (max-width: 820px) {
    #page-ows-alarms .ows-long-aging-container .vis-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        margin-top: 10px !important;
    }
}

/* ==========================================================================
   THEMATIC DARK NOC THEME OVERRIDES FOR COMPLAINT HANDLING SECTION
   ========================================================================== */
#page-complaint {
    --bg-primary: #060913;
    --bg-card: rgba(15, 22, 42, 0.75);
    --border-color: rgba(255, 255, 255, 0.08);
    --text-primary: #FFFFFF;
    --text-secondary: #94A3B8;
    --text-muted: #64748B;
    
    --accent-blue: #3B82F6;
    --accent-cyan: #06B6D4;
    --success: #10B981;
    --warning: #F59E0B;
    --danger: #EF4444;

    background-color: #060913 !important;
    color: #FFFFFF !important;
    padding: 16px;
    border-radius: 8px;
    margin: 10px 0;
}

#page-complaint .panel-card {
    background-color: rgba(15, 22, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(8px);
}

#page-complaint .panel-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #FFFFFF !important;
    padding-bottom: 8px;
    margin-bottom: 12px;
}

#page-complaint .panel-header h3 {
    color: #FFFFFF !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

#page-complaint .complaint-summary-text {
    background-color: #0f172a !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 13px !important;
}

#page-complaint .filter-select {
    background-color: #0f172a !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#page-complaint .filter-select:focus {
    border-color: #06B6D4 !important;
    background-color: #0f172a !important;
}

#page-complaint .complaint-address-line {
    color: #94A3B8 !important;
    font-weight: 500;
}

#page-complaint .export-xlsx-btn {
    background: rgba(6, 182, 212, 0.08) !important;
    color: #06B6D4 !important;
    border: 1px solid rgba(6, 182, 212, 0.25) !important;
    box-shadow: none !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 11px !important;
    letter-spacing: 0.3px;
}

#page-complaint .export-xlsx-btn:hover {
    background: #06B6D4 !important;
    color: #000000 !important;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.4) !important;
    transform: translateY(-1px);
}

#page-complaint .complaint-place-results {
    background-color: #0b0f19 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5) !important;
}

#page-complaint .complaint-place-result {
    background-color: #0b0f19 !important;
    color: #FFFFFF !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#page-complaint .complaint-place-result:hover,
#page-complaint .complaint-place-result:focus {
    background-color: rgba(6, 182, 212, 0.15) !important;
    color: #06B6D4 !important;
}

#page-complaint .complaint-place-result small {
    color: #94A3B8 !important;
}

#page-complaint .complaint-alarm-box {
    background-color: #0f172a !important;
    color: #94A3B8 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#page-complaint .complaint-live-alarm-counts span {
    background-color: #0b0f19 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #FFFFFF !important;
}

#page-complaint .complaint-live-alarm-counts .critical {
    border-color: rgba(239, 68, 68, 0.45) !important;
    color: #EF4444 !important;
}

#page-complaint .complaint-live-alarm-counts .major {
    border-color: rgba(249, 115, 22, 0.45) !important;
    color: #F59E0B !important;
}

#page-complaint .complaint-live-alarm-counts .minor {
    border-color: rgba(234, 179, 8, 0.55) !important;
    color: #F4E34A !important;
}

#page-complaint .complaint-live-alarm-counts .warning {
    border-color: rgba(59, 130, 246, 0.40) !important;
    color: #3B82F6 !important;
}

#page-complaint .complaint-live-alarm-row b {
    color: #FFFFFF !important;
}

#page-complaint .complaint-live-alarm-row span,
#page-complaint .complaint-live-alarm-source,
#page-complaint .complaint-alarm-clear {
    color: #94A3B8 !important;
}

#page-complaint .complaint-elevation-profile {
    background-color: #0f172a !important;
    color: #94A3B8 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#page-complaint .complaint-elevation-profile svg {
    background-color: #0f172a !important;
}

#page-complaint .complaint-elevation-profile svg rect {
    fill: #0f172a !important;
}

#page-complaint .complaint-elevation-profile svg text {
    fill: #FFFFFF !important;
}

#page-complaint .complaint-elevation-profile svg text.elevation-label {
    fill: #FFFFFF !important;
    font-weight: 700;
}

#page-complaint .complaint-elevation-profile svg text.elevation-small-label {
    fill: #94A3B8 !important;
}

#page-complaint .complaint-elevation-profile svg line {
    stroke: rgba(255, 255, 255, 0.12) !important;
}

/* ==========================================================================
   NOC GRID TABLE & CELL MONITORING STYLES (FROM TEMPLATE)
   ========================================================================== */
#page-complaint .noc-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

#page-complaint .noc-table th {
    background-color: rgba(15, 23, 42, 0.9) !important;
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 10px 14px !important;
    font-family: var(--font-heading);
    font-size: 11px !important;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
}

#page-complaint .noc-table td {
    padding: 8px 14px !important;
    font-size: 11px !important;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

#page-complaint .noc-table tbody tr {
    transition: var(--transition-fast);
}

#page-complaint .noc-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

/* Custom progress bar container inside table */
#page-complaint .progress-bar-container {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

#page-complaint .progress-bar-meta {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    font-weight: 700;
}

#page-complaint .progress-bar-meta .lbl-val {
    color: #FFFFFF;
}

#page-complaint .progress-bar-meta .lbl-pct {
    color: var(--text-secondary);
}

#page-complaint .progress-track {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    overflow: hidden;
}

#page-complaint .progress-fill {
    height: 100%;
    border-radius: 2px;
}

#page-complaint .progress-fill.blue { background-color: var(--accent-blue) !important; box-shadow: 0 0 4px var(--accent-blue); }
#page-complaint .progress-fill.cyan { background-color: var(--accent-cyan) !important; box-shadow: 0 0 4px var(--accent-cyan); }
#page-complaint .progress-fill.success { background-color: var(--success) !important; box-shadow: 0 0 4px var(--success); }
#page-complaint .progress-fill.warning { background-color: var(--warning) !important; box-shadow: 0 0 4px var(--warning); }
#page-complaint .progress-fill.yellow { background-color: #F4E34A !important; box-shadow: 0 0 4px #F4E34A; }
#page-complaint .progress-fill.danger { background-color: var(--danger) !important; box-shadow: 0 0 4px var(--danger); }

#page-complaint .progress-fill.tput-red { background: #EF2B2D !important; }
    color: #06B6D4 !important;
    border: 1px solid rgba(6, 182, 212, 0.25) !important;
    box-shadow: none !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 11px !important;
    letter-spacing: 0.3px;
}

#page-complaint .export-xlsx-btn:hover {
    background: #06B6D4 !important;
    color: #000000 !important;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.4) !important;
    transform: translateY(-1px);
}

#page-complaint .complaint-place-results {
    background-color: #0b0f19 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5) !important;
}

#page-complaint .complaint-place-result {
    background-color: #0b0f19 !important;
    color: #FFFFFF !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#page-complaint .complaint-place-result:hover,
#page-complaint .complaint-place-result:focus {
    background-color: rgba(6, 182, 212, 0.15) !important;
    color: #06B6D4 !important;
}

#page-complaint .complaint-place-result small {
    color: #94A3B8 !important;
}

#page-complaint .complaint-alarm-box {
    background-color: #0f172a !important;
    color: #94A3B8 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#page-complaint .complaint-live-alarm-counts span {
    background-color: #0b0f19 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #FFFFFF !important;
}

#page-complaint .complaint-live-alarm-counts .critical {
    border-color: rgba(239, 68, 68, 0.45) !important;
    color: #EF4444 !important;
}

#page-complaint .complaint-live-alarm-counts .major {
    border-color: rgba(249, 115, 22, 0.45) !important;
    color: #F59E0B !important;
}

#page-complaint .complaint-live-alarm-counts .minor {
    border-color: rgba(234, 179, 8, 0.55) !important;
    color: #F4E34A !important;
}

#page-complaint .complaint-live-alarm-counts .warning {
    border-color: rgba(59, 130, 246, 0.40) !important;
    color: #3B82F6 !important;
}

#page-complaint .complaint-live-alarm-row b {
    color: #FFFFFF !important;
}

#page-complaint .complaint-live-alarm-row span,
#page-complaint .complaint-live-alarm-source,
#page-complaint .complaint-alarm-clear {
    color: #94A3B8 !important;
}

#page-complaint .complaint-elevation-profile {
    background-color: #0f172a !important;
    color: #94A3B8 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#page-complaint .complaint-elevation-profile svg {
    background-color: #0f172a !important;
}

#page-complaint .complaint-elevation-profile svg rect {
    fill: #0f172a !important;
}

#page-complaint .complaint-elevation-profile svg text {
    fill: #FFFFFF !important;
}

#page-complaint .complaint-elevation-profile svg text.elevation-label {
    fill: #FFFFFF !important;
    font-weight: 700;
}

#page-complaint .complaint-elevation-profile svg text.elevation-small-label {
    fill: #94A3B8 !important;
}

#page-complaint .complaint-elevation-profile svg line {
    stroke: rgba(255, 255, 255, 0.12) !important;
}

/* ==========================================================================
   NOC GRID TABLE & CELL MONITORING STYLES (FROM TEMPLATE)
   ========================================================================== */
#page-complaint .noc-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

#page-complaint .noc-table th {
    background-color: rgba(15, 23, 42, 0.9) !important;
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 10px 14px !important;
    font-family: var(--font-heading);
    font-size: 11px !important;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
}

#page-complaint .noc-table td {
    padding: 8px 14px !important;
    font-size: 11px !important;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

#page-complaint .noc-table tbody tr {
    transition: var(--transition-fast);
}

#page-complaint .noc-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

/* Custom progress bar container inside table */
#page-complaint .progress-bar-container {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

#page-complaint .progress-bar-meta {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    font-weight: 700;
}

#page-complaint .progress-bar-meta .lbl-val {
    color: #FFFFFF;
}

#page-complaint .progress-bar-meta .lbl-pct {
    color: var(--text-secondary);
}

#page-complaint .progress-track {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    overflow: hidden;
}

#page-complaint .progress-fill {
    height: 100%;
    border-radius: 2px;
}

#page-complaint .progress-fill.blue { background-color: var(--accent-blue) !important; box-shadow: 0 0 4px var(--accent-blue); }
#page-complaint .progress-fill.cyan { background-color: var(--accent-cyan) !important; box-shadow: 0 0 4px var(--accent-cyan); }
#page-complaint .progress-fill.success { background-color: var(--success) !important; box-shadow: 0 0 4px var(--success); }
#page-complaint .progress-fill.warning { background-color: var(--warning) !important; box-shadow: 0 0 4px var(--warning); }
#page-complaint .progress-fill.yellow { background-color: #F4E34A !important; box-shadow: 0 0 4px #F4E34A; }
#page-complaint .progress-fill.danger { background-color: var(--danger) !important; box-shadow: 0 0 4px var(--danger); }

#page-complaint .progress-fill.tput-red { background: #EF2B2D !important; }
#page-complaint .progress-fill.tput-orange { background: #F59E0B !important; }
#page-complaint .progress-fill.tput-yellow { background: #F4E34A !important; }
#page-complaint .progress-fill.tput-green { background: #12D94B !important; }
#page-complaint .progress-fill.tput-blue { background: #1737E8 !important; }

#page-complaint .table-cell-name {
    max-width: 140px;
    white-space: normal;
    word-break: break-all;
}

/* ==========================================================================
   COMPLAINT HANDLING HEADER OVERRIDES (DARK NOC STYLE)
   ========================================================================== */
#dashboard-header.complaint-mode .filter-panel-top,
#dashboard-header.complaint-mode #header-refresh-data-btn {
    display: none !important;
}

#dashboard-header.complaint-mode {
    background-color: #060913 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 12px 28px !important;
}

#dashboard-header.complaint-mode #header-site-id {
    color: #FFFFFF !important;
}

#dashboard-header.complaint-mode #header-site-name {
    color: #94A3B8 !important;
}

#dashboard-header.complaint-mode #dashboard-debug-status {
    color: #64748B !important;
}

#dashboard-header.complaint-mode #sidebar-toggle-btn {
    color: #06B6D4 !important;
}

/* ==========================================================================
   EXECUTIVE UI SYSTEM 2026: CONSISTENT MANAGEMENT DASHBOARD POLISH
   ========================================================================== */

:root {
    --bg-primary: #F5F7FA;
    --bg-sidebar: #FFFFFF;
    --bg-card: #FFFFFF;
    --bg-subtle: #F8FAFC;
    --border-color: #D7E0EA;
    --border-strong: #C5D0DE;
    --text-primary: #102033;
    --text-secondary: #526174;
    --text-muted: #8794A5;
    --accent-blue: #1E5AA8;
    --accent-cyan: #0E7490;
    --accent-blue-soft: rgba(30, 90, 168, 0.09);
    --accent-cyan-soft: rgba(14, 116, 144, 0.09);
    --success: #17805D;
    --success-soft: #EAF7F1;
    --warning: #B7791F;
    --warning-soft: #FFF6E3;
    --danger: #C93A3A;
    --danger-soft: #FDEEEE;
    --shadow-sm: 0 1px 2px rgba(16, 32, 51, 0.05), 0 1px 1px rgba(16, 32, 51, 0.03);
    --shadow-md: 0 8px 22px rgba(16, 32, 51, 0.08);
    --shadow-lg: 0 18px 42px rgba(16, 32, 51, 0.12);
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 8px;
    --content-pad: clamp(14px, 1.8vw, 26px);
    --content-gap: clamp(14px, 1.45vw, 22px);
}

html {
    background: var(--bg-primary);
    font-size: 14px;
}

body {
    background:
        linear-gradient(180deg, #FFFFFF 0, #F7F9FC 185px, var(--bg-primary) 100%);
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.45;
    letter-spacing: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* Central Java Overview sheet */
#dashboard-header.cj-mode {
    display: none !important;
}

.cj-overview {
    background:
        radial-gradient(circle at 12% 0%, rgba(20, 184, 166, .10), transparent 30%),
        linear-gradient(180deg, #F2F8F6 0%, #EAF3F0 100%);
    min-height: 100vh;
    padding: 28px 22px;
    color: #061F31;
}

.cj-page-head,
.cj-head-actions,
.cj-filter-row,
.cj-panel-head,
.cj-trend-toolbar,
.cj-chart-tools,
.cj-segment {
    display: flex;
    align-items: center;
}

.cj-page-head {
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 28px;
}

.cj-title-cluster {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.cj-menu-btn {
    min-width: 48px;
    padding: 0 14px;
    flex-shrink: 0;
}

.cj-menu-btn i {
    font-size: 20px;
}

.cj-eyebrow {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 800;
    color: #0B7C73;
    margin-bottom: 8px;
    letter-spacing: .02em;
}

.cj-page-head h2 {
    font-family: var(--font-heading);
    font-size: 40px;
    line-height: 1;
    font-weight: 800;
    color: #061F31;
    letter-spacing: 0;
}

.cj-head-actions {
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.cj-action-btn,
.cj-apply-btn,
.cj-chart-tools button,
.cj-segment button {
    min-height: 44px;
    border: 1px solid #B8D1CE;
    background: #FFFFFF;
    color: #006B68;
    border-radius: 7px;
    padding: 0 16px;
    font: 700 14px var(--font-body);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.cj-action-btn.primary,
.cj-apply-btn,
.cj-segment button.active {
    background: #0B7C73;
    border-color: #0B7C73;
    color: #FFFFFF;
}

.cj-filter-card,
.cj-kpi-card,
.cj-panel {
    background: #FFFFFF;
    border: 1px solid #D2DFDC;
    border-radius: 8px;
}

.cj-filter-card {
    padding: 16px;
    margin-bottom: 22px;
    box-shadow: 0 12px 28px rgba(15, 55, 66, .07);
}

.cj-overview-hero {
    display: grid;
    grid-template-columns: minmax(420px, 42%) minmax(0, 1fr);
    align-items: stretch;
    gap: 18px;
    margin-bottom: 22px;
}

.cj-overview-visual {
    position: relative;
    min-width: 0;
    min-height: 340px;
    margin: 0;
    overflow: hidden;
    border: 1px solid #D2DFDC;
    border-radius: 14px;
    background: #DDF3F5;
    box-shadow: 0 16px 34px rgba(15, 55, 66, .12);
}

.cj-overview-visual img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 340px;
    object-fit: cover;
    object-position: center;
}

.cj-overview-visual figcaption {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 11px 14px;
    border: 1px solid rgba(255, 255, 255, .44);
    border-radius: 9px;
    background: rgba(6, 31, 49, .76);
    color: #FFFFFF;
    backdrop-filter: blur(8px);
}

.cj-overview-visual figcaption strong { font-size: 14px; }
.cj-overview-visual figcaption span { color: rgba(255, 255, 255, .78); font-size: 12px; }

.cj-overview-summary {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cj-overview-summary .cj-filter-card {
    margin-bottom: 12px;
}

.cj-overview-summary .cj-kpi-strip {
    flex: 1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(132px, 1fr));
    margin-bottom: 0;
}

.cj-overview-summary .cj-kpi-card {
    height: 100%;
}

.cj-filter-card label {
    display: block;
    color: #49616A;
    font-weight: 800;
    font-size: 14px;
    margin-bottom: 8px;
}

.cj-filter-row {
    gap: 14px;
}

.cj-date-input,
.cj-chart-tools input {
    border: 1px solid #B8D1CE;
    border-radius: 6px;
    min-height: 36px;
    padding: 0 12px;
    background: #FFFFFF;
    color: #12303A;
    font: 600 14px var(--font-body);
}

.cj-date-input {
    min-height: 44px;
    width: 210px;
    font-size: 18px;
}

.cj-kpi-strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.cj-kpi-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 132px;
    padding: 18px 18px 16px;
    border: 0;
    background: linear-gradient(135deg, #0F766E 0%, #0EA5B7 100%);
    color: #FFFFFF;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .14);
}

.cj-kpi-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(255, 255, 255, .18), transparent 58%);
}

.cj-kpi-card::after {
    content: "";
    position: absolute;
    right: -34px;
    top: -34px;
    width: 116px;
    height: 116px;
    border-radius: 999px;
    border: 20px solid rgba(255, 255, 255, .14);
}

.cj-kpi-card:nth-child(2) {
    background: linear-gradient(135deg, #2563EB 0%, #1BA7D7 100%);
}

.cj-kpi-card:nth-child(3) {
    background: linear-gradient(135deg, #0F2742 0%, #0B7C73 100%);
}

.cj-kpi-card:nth-child(4) {
    background: linear-gradient(135deg, #064E4A 0%, #0F9F8F 100%);
}

.cj-kpi-card:nth-child(5) {
    background: linear-gradient(135deg, #164E86 0%, #2F64E8 100%);
}

.cj-kpi-card:nth-child(6) {
    background: linear-gradient(135deg, #7A3E00 0%, #C15A00 100%);
}

.cj-kpi-card span {
    display: block;
    max-width: calc(100% - 58px);
    color: rgba(255, 255, 255, .90);
    font-weight: 800;
    font-size: 12px;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.cj-kpi-card strong {
    display: block;
    margin-top: 12px;
    font-family: var(--font-heading);
    font-size: clamp(30px, 2.5vw, 40px);
    line-height: 1;
    color: #FFFFFF;
    letter-spacing: 0;
}

.cj-kpi-card small {
    display: block;
    margin-top: 10px;
    max-width: calc(100% - 20px);
    color: rgba(255, 255, 255, .82);
    font-size: 13px;
    line-height: 1.35;
    font-weight: 650;
}

.cj-grid {
    display: grid;
    gap: 18px;
    margin-bottom: 18px;
}

.cj-grid-thirds {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cj-grid-half {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cj-panel {
    padding: 20px;
    overflow: hidden;
    box-shadow: 0 14px 30px rgba(15, 55, 66, .08);
}

.cj-panel-head {
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.cj-panel-head h3 {
    font-size: 22px;
    line-height: 1.1;
    margin: 0 0 6px;
    font-weight: 800;
    color: #061F31;
    letter-spacing: 0;
}

.cj-panel-head p {
    margin: 0;
    color: #4C6570;
    font-size: 14px;
    font-weight: 550;
}

.cj-panel-head > i {
    color: #0B7C73;
    font-size: 22px;
}

.cj-ring-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.cj-ring-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cj-ring-card {
    display: grid;
    grid-template-columns: 96px 1fr;
    align-items: center;
    gap: 10px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FCFB 100%);
    border: 1px solid #D6E2DF;
    border-radius: 7px;
    padding: 12px;
    min-height: 118px;
    overflow: hidden;
}

.cj-ring {
    width: 94px;
    height: 94px;
    border-radius: 50%;
    background: conic-gradient(var(--ring-color, #0B7C73) calc(var(--ring-value, 0) * 1%), #E7EDF0 0);
    display: grid;
    place-items: center;
}

.cj-ring::after {
    content: "";
    position: absolute;
}

.cj-ring-inner {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: #FFFFFF;
    display: grid;
    place-items: center;
    text-align: center;
    font-weight: 900;
    color: #001826;
    line-height: 1.05;
}

.cj-ring-inner small {
    display: block;
    font-size: 12px;
}

.cj-ring-card b {
    display: block;
    font-size: 14px;
    line-height: 1.2;
    color: #061F31;
    overflow-wrap: anywhere;
}

.cj-ring-card span {
    display: block;
    margin-top: 8px;
    color: #64777F;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cj-chart-tools {
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
    font-size: 13px;
    color: #49616A;
}

.cj-chart-tools.inline {
    margin: 0;
    justify-content: flex-end;
}

.cj-chart-tools b {
    color: #061F31;
}

.cj-chart-tools input {
    width: 96px;
}

.cj-chart-tools button {
    min-height: 36px;
    color: #8BB9B5;
    border-color: #E3ECEA;
}

.cj-chart-box {
    height: 335px;
    min-height: 335px;
}

.cj-chart-box.tall {
    height: 390px;
}

.cj-chart-box.wide {
    height: 285px;
}

.cj-trend-toolbar {
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.cj-segment {
    border: 1px solid #C9DAD7;
    border-radius: 8px;
    overflow: hidden;
}

.cj-segment button {
    border: 0;
    border-radius: 0;
    min-width: 72px;
}

.cj-map {
    width: 100%;
    height: 650px;
    min-height: 650px;
    border-radius: 7px;
    overflow: hidden;
    background: #B8DCE6;
}

.cj-map-legend {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 12px;
    color: #485D64;
    font-size: 14px;
    font-weight: 800;
}

.cj-map-legend span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: -4px;
}

.cj-map-legend .green { background: #159947; }
.cj-map-legend .gray { background: #94A3B8; }
.cj-map-legend .lime { background: #7BC70B; }
.cj-map-legend .yellow { background: #E6A700; }
.cj-map-legend .orange { background: #F46D12; }
.cj-map-legend .deep { background: #D95800; }
.cj-map-legend .red { background: #D71920; }

/* Traffic WoW sheet */
.traffic-wow-shell {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.traffic-wow-legacy-frame {
    display: block;
    width: 100%;
    height: 100vh;
    min-height: 760px;
    border: 0;
    background: #f8fafc;
}

.traffic-wow-return-menu {
    display: none;
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 1220;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 8px;
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
    font: 800 13px var(--font-body);
    cursor: pointer;
}

.traffic-wow-return-menu:hover {
    border-color: rgba(13, 110, 253, 0.32);
    color: var(--accent-blue);
    background: #f8fbff;
}

.body-traffic-wow-mode #page-traffic-wow.active .traffic-wow-return-menu {
    display: inline-flex;
}

#page-traffic-wow > .traffic-wow-shell {
    display: none !important;
}

.traffic-wow-head,
.traffic-wow-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.traffic-wow-head {
    justify-content: space-between;
    flex-wrap: wrap;
}

.traffic-wow-eyebrow {
    margin: 0 0 6px;
    color: var(--accent-color);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.traffic-wow-head h2 {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: 34px;
    line-height: 1.05;
}

.traffic-wow-head p {
    margin: 6px 0 0;
    color: var(--text-secondary);
    font-weight: 600;
}

.traffic-wow-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.traffic-wow-admin-note {
    display: none;
    border: 1px solid rgba(245, 158, 11, .28);
    background: rgba(245, 158, 11, .10);
    color: #92400E;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 750;
}

.traffic-wow-menu {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    padding: 5px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: #FFFFFF;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .06);
    overflow-x: auto;
}

.traffic-wow-menu button {
    min-height: 36px;
    border: 0;
    border-radius: 7px;
    padding: 0 14px;
    background: transparent;
    color: var(--text-secondary);
    font: 850 13px var(--font-body);
    white-space: nowrap;
    cursor: pointer;
}

.traffic-wow-menu button.active {
    background: #0B7C73;
    color: #FFFFFF;
}

.traffic-wow-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 14px;
}

.traffic-wow-kpi {
    position: relative;
    overflow: hidden;
    min-height: 128px;
    border-radius: 8px;
    padding: 18px;
    color: #FFFFFF;
    background: linear-gradient(135deg, #0F766E, #0EA5B7);
    box-shadow: 0 14px 30px rgba(15, 23, 42, .13);
}

.traffic-wow-kpi::after {
    content: "";
    position: absolute;
    right: -32px;
    top: -32px;
    width: 116px;
    height: 116px;
    border-radius: 999px;
    border: 20px solid rgba(255, 255, 255, .13);
}

.traffic-wow-kpi.is-im3 { background: linear-gradient(135deg, #164E86, #2F64E8); }
.traffic-wow-kpi.is-ioh { background: linear-gradient(135deg, #7A3E00, #C15A00); }
.traffic-wow-kpi.is-week { background: linear-gradient(135deg, #0F2742, #0B7C73); }

.traffic-wow-kpi span,
.traffic-wow-kpi small {
    display: block;
    color: rgba(255, 255, 255, .84);
    font-weight: 750;
}

.traffic-wow-kpi span {
    font-size: 12px;
    text-transform: uppercase;
}

.traffic-wow-kpi strong {
    display: block;
    margin-top: 12px;
    color: #FFFFFF;
    font-family: var(--font-heading);
    font-size: clamp(28px, 2.4vw, 38px);
    line-height: 1;
}

.traffic-wow-kpi small {
    margin-top: 10px;
    font-size: 13px;
}

.traffic-wow-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.traffic-wow-full {
    grid-column: 1 / -1;
}

.traffic-wow-table-panel .table-scroll {
    max-height: 520px;
    overflow: auto;
}

.traffic-wow-table {
    min-width: 1320px;
}

.traffic-wow-table th {
    white-space: nowrap;
}

.traffic-wow-click-row {
    cursor: pointer;
}

.traffic-wow-click-row:hover td {
    background: rgba(11, 124, 115, .08);
}

.traffic-wow-delta {
    font-weight: 850;
}

.traffic-wow-delta.pos { color: #0F8A5F; }
.traffic-wow-delta.neg { color: #D71920; }

@media (max-width: 1100px) {
    .cj-overview-hero {
        grid-template-columns: 1fr;
    }
    .cj-overview-visual,
    .cj-overview-visual img {
        min-height: 360px;
        max-height: 520px;
    }
    .traffic-wow-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .traffic-wow-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .traffic-wow-shell {
        padding: 16px;
    }
    .traffic-wow-kpis {
        grid-template-columns: 1fr;
    }
    .traffic-wow-head h2 {
        font-size: 28px;
    }
}

/* Traffic MTD/LMTD sheet */
.traffic-mtd-shell {
    min-height: 100%;
    padding: 18px 18px 28px;
    background: #edf5f2;
    color: #10251f;
}

.plmn-site-shell{padding:22px;display:grid;gap:18px;background:linear-gradient(145deg,#f8fafc,#eef2ff);min-height:100%}.plmn-site-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.plmn-site-head h2{margin:3px 0 6px;font-size:28px;color:#111827}.plmn-site-head p{margin:0;color:#64748b}.plmn-site-filter{display:grid;grid-template-columns:repeat(4,minmax(135px,1fr)) minmax(190px,1.3fr) 44px;gap:12px;align-items:end;padding:16px;background:#fff;border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 8px 28px rgba(15,23,42,.06)}.plmn-site-filter label{display:grid;gap:6px;color:#475569;font-size:11px;font-weight:800;text-transform:uppercase}.plmn-site-filter select,.plmn-site-filter input{height:40px;border:1px solid #cbd5e1;border-radius:9px;padding:0 11px;background:#fff;color:#0f172a}.plmn-brand-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.plmn-brand-card{position:relative;overflow:hidden;display:flex;align-items:center;gap:18px;padding:22px;border-radius:20px;color:#fff;box-shadow:0 16px 35px rgba(15,23,42,.16)}.plmn-brand-card.im3{background:linear-gradient(135deg,#f97316,#ef4444)}.plmn-brand-card.three{background:linear-gradient(135deg,#5b21b6,#7c3aed 55%,#2563eb)}.plmn-brand-mark{display:grid;place-items:center;width:72px;height:72px;border-radius:20px;background:rgba(255,255,255,.18);font-size:25px;font-weight:950}.plmn-brand-card span,.plmn-brand-card small{display:block;color:rgba(255,255,255,.82);font-weight:700}.plmn-brand-card strong{display:block;margin:3px 0;font-size:31px}.plmn-site-panel{padding:18px;background:#fff;border:1px solid #e2e8f0;border-radius:18px;box-shadow:0 8px 28px rgba(15,23,42,.06)}.plmn-site-chart{height:390px;margin-top:12px}body.cj-dark .plmn-site-shell{background:#0f172a}body.cj-dark .plmn-site-filter,body.cj-dark .plmn-site-panel{background:#172033;border-color:#334155}@media(max-width:1000px){.plmn-site-filter{grid-template-columns:repeat(2,minmax(0,1fr))}.plmn-brand-grid{grid-template-columns:1fr}}@media(max-width:600px){.plmn-site-shell{padding:12px}.plmn-site-head{align-items:flex-start;flex-direction:column}.plmn-site-filter{grid-template-columns:1fr}.plmn-brand-card strong{font-size:25px}}

.traffic-mtd-return-menu {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 1220;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border: 1px solid rgba(15, 118, 110, 0.26);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    color: #0f3f38;
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
    cursor: pointer;
}

.traffic-mtd-return-menu:hover {
    background: #0f766e;
    color: #ffffff;
}

.traffic-mtd-head,
.traffic-mtd-actions,
.traffic-mtd-filter-card,
.traffic-mtd-kpis {
    display: flex;
    align-items: center;
}

.traffic-mtd-head {
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.traffic-mtd-eyebrow {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #0f766e;
}

.traffic-mtd-head h2 {
    margin: 0;
    font-size: 28px;
    line-height: 1.1;
    color: #050b10;
}

.traffic-mtd-head p {
    margin: 6px 0 0;
    color: #51645d;
    font-size: 12px;
}

.traffic-mtd-actions {
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.traffic-mtd-filter-card {
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px;
    margin-bottom: 14px;
    border: 1px solid #cbded8;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.86);
}

.traffic-mtd-filter-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 92px;
    font-weight: 900;
    color: #14231f;
}

.traffic-mtd-filter-card label {
    display: grid;
    gap: 4px;
    min-width: 180px;
    flex: 1;
    font-size: 10px;
    font-weight: 800;
    color: #1f3a34;
}

.traffic-mtd-filter-card .filter-select {
    width: 100%;
    min-height: 34px;
    border-color: #a9c2bc;
    border-radius: 6px;
    background: #fafffd;
    color: #10251f;
}

.traffic-mtd-search-btn {
    width: 36px;
    height: 34px;
    border: 0;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0f766e;
    color: #fff;
    cursor: pointer;
}

.traffic-mtd-kpis {
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.traffic-mtd-kpi {
    flex: 1 1 220px;
    min-height: 82px;
    padding: 14px 16px;
    border: 1px solid #cbded8;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 28px rgba(12, 34, 28, 0.06);
}

.traffic-mtd-kpi span,
.traffic-mtd-kpi small {
    display: block;
    font-size: 11px;
    font-weight: 800;
    color: #5b6f68;
}

.traffic-mtd-kpi strong {
    display: block;
    margin: 6px 0 4px;
    font-size: 24px;
    line-height: 1.1;
    color: #06120f;
}

.traffic-mtd-drill-card {
    display: grid;
    grid-template-columns: minmax(220px, 0.9fr) minmax(0, 3fr);
    gap: 12px;
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid #b8d5cd;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(15, 118, 110, 0.12), rgba(255, 255, 255, 0.78)),
        rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 32px rgba(12, 34, 28, 0.08);
}

.traffic-mtd-drill-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 7px;
    background: #0f766e;
    color: #ffffff;
}

.traffic-mtd-drill-title span {
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
}

.traffic-mtd-drill-title strong {
    font-size: 20px;
    line-height: 1.15;
}

.traffic-mtd-drill-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.traffic-mtd-score-card {
    min-height: 94px;
    padding: 12px 14px;
}

.traffic-mtd-score-card .kpi-value {
    font-size: 22px;
    line-height: 1.1;
}

.traffic-mtd-score-card .kpi-footer,
.traffic-mtd-score-card .kpi-footer span {
    font-size: 11px;
    font-weight: 750;
}

.traffic-mtd-panel {
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid #cbded8;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
}

.traffic-mtd-panel-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 10px;
}

.traffic-mtd-panel-head h3 {
    margin: 0;
    font-size: 15px;
    color: #07130f;
}

.traffic-mtd-panel-head p {
    margin: 5px 0 0;
    font-size: 11px;
    color: #61756e;
}

.traffic-mtd-chart-wrap {
    height: 300px;
    min-height: 300px;
}

.traffic-mtd-focus-pulse {
    animation: trafficMtdPulse 1.3s ease-out;
}

@keyframes trafficMtdPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(15, 118, 110, 0.32), 0 12px 30px rgba(12, 34, 28, 0.10);
        border-color: #0f766e;
    }
    100% {
        box-shadow: 0 0 0 18px rgba(15, 118, 110, 0), 0 12px 30px rgba(12, 34, 28, 0.06);
        border-color: #cbded8;
    }
}

.traffic-mtd-table-wrap {
    overflow: auto;
    max-height: 380px;
    border: 1px solid #d7e5e1;
    border-radius: 7px;
}

.traffic-mtd-table {
    min-width: 1160px;
    width: 100%;
}

.traffic-mtd-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #eef8f4;
    color: #1d3a33;
    white-space: nowrap;
}

.traffic-mtd-table td {
    white-space: nowrap;
    text-align: right;
    color: #17324d;
    background: #f8fbfd;
}

/* Keep the MTD/LMTD comparison readable on the dark dashboard shell. The
   generic dashboard zebra rule used to paint every other row nearly black,
   which also made the normal cell text almost invisible. */
.traffic-mtd-table tbody tr:nth-child(odd) td {
    background: #eaf2f7 !important;
    color: #17324d !important;
}

.traffic-mtd-table tbody tr:nth-child(even) td {
    background: #ffffff !important;
    color: #17324d !important;
}

.traffic-mtd-table td:first-child,
.traffic-mtd-table th:first-child {
    text-align: left;
}

.traffic-mtd-click-row {
    cursor: pointer;
}

.traffic-mtd-click-row:hover td {
    background: #eefaf6 !important;
}

.traffic-mtd-click-row.active td {
    background: #dff4ee !important;
    box-shadow: inset 0 1px 0 rgba(15, 118, 110, 0.18), inset 0 -1px 0 rgba(15, 118, 110, 0.18);
}

.traffic-mtd-click-row.active td:first-child {
    color: #075e54;
    font-weight: 950;
}

.traffic-mtd-modal {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 28px;
}

.traffic-mtd-modal.active {
    display: flex;
}

.traffic-mtd-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.34);
    backdrop-filter: blur(7px);
}

.traffic-mtd-modal-card {
    position: relative;
    width: min(1040px, calc(100vw - 56px));
    min-height: 610px;
    padding: 34px 34px 28px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 26px 80px rgba(15, 23, 42, 0.30);
}

.traffic-mtd-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.traffic-mtd-modal-head h3 {
    margin: 0;
    color: #273142;
    font-size: 24px;
    line-height: 1.15;
    font-weight: 950;
}

.traffic-mtd-modal-head h3 i {
    color: #273142;
    margin-right: 8px;
}

.traffic-mtd-modal-head p {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.traffic-mtd-modal-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid #d8e2ed;
    border-radius: 999px;
    color: #273142;
    font-size: 12px;
    font-weight: 950;
}

.traffic-mtd-modal-close {
    position: absolute;
    top: 42px;
    right: 30px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #718096;
    font-size: 22px;
    cursor: pointer;
}

.traffic-mtd-modal-close:hover {
    background: #eef2f7;
    color: #273142;
}

.traffic-mtd-modal-chart {
    height: 460px;
    min-height: 460px;
    padding: 8px 6px 0;
}

.traffic-mtd-gap.pos {
    background: #d9f3e3 !important;
    color: #037a45;
    font-weight: 900;
}

.traffic-mtd-gap.neg {
    background: #f8dada !important;
    color: #c1121f;
    font-weight: 900;
}

body.cj-dark .traffic-mtd-shell {
    background: #071513;
    color: #e7f7f2;
}

body.cj-dark .traffic-mtd-filter-card,
body.cj-dark .traffic-mtd-kpi,
body.cj-dark .traffic-mtd-panel,
body.cj-dark .traffic-mtd-drill-card {
    background: rgba(12, 28, 25, 0.96);
    border-color: rgba(125, 211, 252, 0.18);
}

body.cj-dark .traffic-mtd-head h2,
body.cj-dark .traffic-mtd-panel-head h3,
body.cj-dark .traffic-mtd-kpi strong,
body.cj-dark .traffic-mtd-drill-metrics strong {
    color: #f8fafc;
}

body.cj-dark .traffic-mtd-head p,
body.cj-dark .traffic-mtd-panel-head p,
body.cj-dark .traffic-mtd-kpi span,
body.cj-dark .traffic-mtd-kpi small,
body.cj-dark .traffic-mtd-drill-metrics span,
body.cj-dark .traffic-mtd-drill-metrics small {
    color: #a7bdb6;
}

@media (max-width: 780px) {
    .traffic-mtd-head {
        align-items: flex-start;
        flex-direction: column;
    }
    .traffic-mtd-filter-card label {
        min-width: 150px;
    }
    .traffic-mtd-chart-wrap {
        height: 260px;
        min-height: 260px;
    }
    .traffic-mtd-drill-card {
        grid-template-columns: 1fr;
    }
    .traffic-mtd-drill-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .traffic-mtd-modal {
        padding: 14px;
    }
    .traffic-mtd-modal-card {
        width: calc(100vw - 28px);
        min-height: 520px;
        padding: 24px 18px 20px;
    }
    .traffic-mtd-modal-head h3 {
        font-size: 20px;
        padding-right: 36px;
    }
    .traffic-mtd-modal-head p {
        font-size: 11px;
    }
    .traffic-mtd-modal-chart {
        height: 380px;
        min-height: 380px;
    }
    .traffic-mtd-modal-close {
        top: 22px;
        right: 16px;
    }
}

body.cj-dark .cj-overview {
    background: 
        radial-gradient(circle at 10% 0%, rgba(20, 184, 166, 0.15), transparent 45%),
        radial-gradient(circle at 80% 90%, rgba(94, 234, 212, 0.04), transparent 50%),
        linear-gradient(135deg, #071720 0%, #03080c 100%);
    color: #EAF8F6;
}

body.cj-dark .cj-filter-card,
body.cj-dark .cj-kpi-card,
body.cj-dark .cj-panel {
    background: #0F2A33;
    border-color: #21454D;
}

body.cj-dark .cj-page-head h2,
body.cj-dark .cj-panel-head h3,
body.cj-dark .cj-kpi-card strong,
body.cj-dark .cj-chart-tools b,
body.cj-dark .cj-ring-card b {
    color: #F8FFFF;
}

body.cj-dark .cj-eyebrow,
body.cj-dark .cj-panel-head p,
body.cj-dark .cj-kpi-card span,
body.cj-dark .cj-kpi-card small,
body.cj-dark .cj-chart-tools,
body.cj-dark .cj-map-legend {
    color: #B7D2D0;
}

@media (max-width: 1100px) {
    .cj-kpi-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .cj-grid-thirds {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .cj-overview {
        padding: 14px;
    }
    .cj-page-head,
    .cj-trend-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }
    .cj-page-head h2 {
        font-size: 32px;
    }
    .cj-kpi-strip,
    .cj-grid-thirds,
    .cj-grid-half,
    .cj-ring-grid {
        grid-template-columns: 1fr;
    }
    .cj-overview-summary .cj-kpi-strip {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }
    .cj-overview-visual,
    .cj-overview-visual img {
        min-height: 250px;
        max-height: 360px;
    }
    .cj-ring-card {
        grid-template-columns: 88px 1fr;
    }
    .cj-ring,
    .cj-ring-inner {
        transform: scale(.92);
        transform-origin: left center;
    }
    .cj-map {
        height: 480px;
        min-height: 480px;
    }
}

button,
input,
select,
textarea {
    font-family: var(--font-body);
    letter-spacing: 0;
}

#app-container {
    background: transparent;
}

#sidebar {
    padding: 18px 14px;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    box-shadow: 8px 0 28px rgba(16, 32, 51, 0.05);
}

.logo-container {
    min-height: 48px;
    margin-bottom: 16px;
    padding: 0 4px 14px;
    border-bottom: 1px solid #EEF2F6;
}

.logo-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, #F4B23B 0%, #D9394C 48%, #1E5AA8 100%);
    box-shadow: 0 8px 18px rgba(30, 90, 168, 0.16);
}

.logo-text h1 {
    color: #16263A;
    font-size: 15px;
    font-weight: 700;
}

.logo-text p {
    color: var(--text-muted);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
}

.tab-navigation {
    gap: 4px;
    padding: 2px 4px 4px 0;
}

.tab-btn {
    min-height: 38px;
    padding: 9px 11px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #526174;
    font-size: 12px;
    font-weight: 700;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.tab-btn i {
    width: 18px;
    color: #7C8898;
    font-size: 15px;
}

.tab-btn:hover {
    background: #F5F8FB;
    border-color: #E2E9F1;
    color: var(--text-primary);
}

.tab-btn.active {
    background: linear-gradient(90deg, rgba(30, 90, 168, 0.13), rgba(14, 116, 144, 0.07));
    border-color: rgba(30, 90, 168, 0.22);
    color: #194E92;
    box-shadow: inset 3px 0 0 var(--accent-blue);
}

.tab-btn.active i {
    color: var(--accent-blue);
}

.sidebar-metadata-panel {
    padding: 12px;
    border: 1px solid #E1E8F0;
    border-radius: 8px;
    background: #F8FAFC;
}

.sidebar-meta-title {
    font-size: 11px;
    letter-spacing: 0.35px;
}

#main-content {
    background: transparent;
}

#dashboard-header {
    position: sticky;
    top: 0;
    z-index: 850;
    min-height: 78px;
    padding: 14px var(--content-pad);
    gap: 16px;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid rgba(197, 208, 222, 0.75);
    box-shadow: 0 8px 24px rgba(16, 32, 51, 0.06);
    backdrop-filter: blur(16px);
}

.header-left {
    flex: 1 1 290px;
}

.header-title {
    min-width: 220px;
}

.header-title h2 {
    color: var(--text-primary);
    font-size: clamp(18px, 1.45vw, 23px);
    line-height: 1.1;
}

.header-title p {
    max-width: 520px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#dashboard-debug-status {
    margin-top: 2px;
    color: var(--accent-blue);
    font-size: 10px;
    font-weight: 700;
}

.icon-action-btn,
.sidebar-nav-scroll-btn {
    border-color: var(--border-color);
    border-radius: 8px;
    background: #FFFFFF;
    color: var(--text-secondary);
}

.filter-panel-top,
.export-bar,
.telegram-table-filters,
.ows-map-filter-bar,
.site-down-map-toolbar {
    gap: 10px;
}

.filter-panel-top {
    flex: 2 1 720px;
    align-items: end;
}

.filter-item {
    min-width: 134px;
}

.site-filter-control {
    min-width: 148px;
}

.filter-item label,
#page-ows-alarms .export-bar .filter-item label,
.ows-map-filter-bar label {
    margin-bottom: 5px;
    color: #34475E;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.45px;
    text-transform: uppercase;
}

.filter-select,
.custom-searchable-dropdown input,
.date-input,
.wow-period-value,
.site-down-date-select,
.ows-map-date-select,
.telegram-otp-input {
    min-height: 38px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #FFFFFF;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 1px 0 rgba(16, 32, 51, 0.02);
}

.multi-filter-select {
    height: 66px;
    min-height: 66px;
}

.filter-select:hover,
.custom-searchable-dropdown input:hover,
.date-input:hover {
    border-color: var(--border-strong);
}

.filter-select:focus,
.custom-searchable-dropdown input:focus,
.date-input:focus,
.telegram-otp-input:focus {
    border-color: var(--accent-blue);
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(30, 90, 168, 0.13);
    outline: none;
}

.custom-searchable-dropdown .dropdown-list,
.complaint-place-results {
    border-color: var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
}

.dashboard-grid {
    width: 100%;
    padding: var(--content-pad);
    gap: var(--content-gap);
}

.page-tab.active {
    min-width: 0;
}

.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    gap: 14px;
    align-items: stretch;
}

.kpi-card {
    min-height: 118px;
    padding: 15px 16px 14px;
    border: 1px solid #DCE4EE;
    border-radius: 8px;
    background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFE 100%);
    box-shadow: var(--shadow-sm);
}

.kpi-card::before {
    width: 3px;
    border-radius: 8px 0 0 8px;
}

.kpi-card::after {
    display: none;
}

.kpi-card:hover,
.panel-card:hover,
.hourly-chart-card:hover,
.telegram-log-table-card:hover {
    transform: none;
    box-shadow: var(--shadow-md);
}

.kpi-header {
    gap: 10px;
    margin-bottom: 9px;
}

.kpi-title {
    color: #40536B;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.45px;
    line-height: 1.25;
}

.kpi-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border: 1px solid #E0E7EF;
    border-radius: 8px;
    background: #F7FAFC;
    color: var(--accent-blue);
    font-size: 14px;
}

.kpi-value {
    margin-bottom: 6px;
    color: #0E1E31;
    font-size: clamp(20px, 1.65vw, 27px);
    line-height: 1.06;
    font-weight: 750;
    letter-spacing: 0;
}

.kpi-footer,
.kpi-footer span {
    color: #687789;
    font-size: 10.5px;
    font-weight: 700;
}

.panel-card,
.hourly-chart-card,
.telegram-status-bar,
.telegram-log-table-card,
.telegram-otp-container,
.complaint-map-card,
.complaint-summary-card,
.ows-map-card,
.site-down-map-card,
.neighbor-vlr-card,
.neighbor-map-card,
.mw50-title-card {
    border: 1px solid #DCE4EE;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: var(--shadow-sm);
}

.panel-card,
.telegram-log-table-card {
    padding: 16px;
}

.panel-header {
    min-height: 30px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #EEF2F6;
}

.panel-header h3,
.hourly-chart-title h4,
.transport-chart-block h4,
.degradation-trend-chart-block h4 {
    color: #17283B;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}

.chart-container,
.hourly-chart-card .chart-container,
.mw50-chart-grid .chart-container {
    min-height: 230px;
    border: 1px solid #EEF2F6;
    border-radius: 8px;
    background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFE 100%);
    padding: 6px;
}

.chart-container.large {
    min-height: 320px;
}

.hourly-chart-grid,
.mw50-chart-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
}

.hourly-chart-card {
    padding: 13px;
}

.hourly-chart-card .chart-container {
    height: 315px;
}

.vis-row,
.vis-row.equal,
.vis-row-three,
.transport-content-grid,
.degradation-content-grid,
.complaint-layout {
    gap: var(--content-gap);
}

.vis-row.equal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vis-row-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.data-table-container,
.site-alarm-table-wrap {
    width: 100%;
    border: 1px solid #DCE4EE;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: var(--shadow-sm);
    overflow: auto;
}

.data-table,
.site-alarm-table,
#page-complaint .noc-table,
#page-ows-alarms .data-table,
.mw50-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--text-primary);
}

.data-table th,
.site-alarm-table th,
#page-complaint .noc-table th,
#page-ows-alarms .data-table th,
.mw50-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 10px 11px;
    background: #F5F8FB;
    color: #33475F;
    border-bottom: 1px solid #DDE5EF;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.45px;
    text-transform: uppercase;
    white-space: nowrap;
}

.data-table td,
.site-alarm-table td,
#page-complaint .noc-table td,
#page-ows-alarms .data-table td {
    padding: 10px 11px;
    color: #344256;
    border-bottom: 1px solid #EEF2F6;
    font-size: 11.5px;
    font-weight: 600;
    vertical-align: middle;
}

.data-table tbody tr:nth-child(even),
.site-alarm-table tbody tr:nth-child(even),
#page-complaint .noc-table tbody tr:nth-child(even) {
    background: #FAFCFE;
}

.data-table tbody tr:hover,
.site-alarm-table tbody tr:hover,
#page-complaint .noc-table tbody tr:hover {
    background: #F2F6FB;
}

.badge,
.telegram-badge,
.ows-status-pill,
.ows-aging-pill {
    border-radius: 999px;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.25px;
}

.export-bar {
    justify-content: flex-end;
    margin-bottom: 0;
}

.export-xlsx-btn,
.header-refresh-data-btn,
.telegram-otp-btn,
#page-ows-alarms .export-bar .export-xlsx-btn,
#page-ows-alarms .export-bar .ows-refresh-push {
    min-height: 38px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 850;
    box-shadow: var(--shadow-sm);
}

.export-xlsx-btn {
    border-color: rgba(23, 128, 93, 0.35);
    background: #F1FBF6;
    color: var(--success);
}

.export-xlsx-btn:hover {
    background: var(--success);
    color: #FFFFFF;
}

#map-element,
#neighbor-map-element,
#mc-map-element,
#vlr-map-element,
#complaint-map-element,
#site-down-map,
#ows-alarm-map {
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: #E8EDF3;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}

.mc-map-legend,
.vlr-map-legend,
.sector-map-legend,
.complaint-rsrp-legend,
.site-down-map-legend {
    border: 1px solid rgba(197, 208, 222, 0.85);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--shadow-md);
}

.mw50-title-card {
    padding: 18px;
}

.mw50-title-card h2 {
    font-size: clamp(20px, 2vw, 30px);
    letter-spacing: 0;
}

.telegram-dashboard {
    gap: var(--content-gap);
}

.telegram-status-bar {
    padding: 14px 16px;
}

#page-ows-alarms .panel-card,
#page-ows-alarms .data-table-container,
#page-ows-alarms .export-bar {
    border-radius: 8px;
}

#page-ows-alarms .panel-header h3,
#page-ows-alarms .data-table th,
#page-ows-alarms .data-table td {
    letter-spacing: 0;
}

#page-complaint .panel-card {
    border-radius: 8px;
}

#page-complaint .complaint-summary-text,
#page-complaint .complaint-alarm-box,
#page-complaint .complaint-elevation-profile {
    border-radius: 8px;
}

@media (max-width: 1280px) {
    .vis-row,
    .vis-row.equal,
    .vis-row-three,
    .transport-content-grid,
    .degradation-content-grid,
    .complaint-layout {
        grid-template-columns: 1fr;
    }

    .transport-chart-panel,
    .degradation-trend-panel {
        position: static;
    }
}

@media (max-width: 1060px) {
    #dashboard-header {
        align-items: stretch;
    }

    .filter-panel-top {
        flex: 1 1 100%;
    }

    .filter-item,
    .site-filter-control,
    .date-filter-control {
        flex: 1 1 180px;
    }
}

@media (max-width: 900px) {
    #dashboard-header {
        position: relative;
        padding: 12px;
    }

    .header-title p {
        white-space: normal;
    }

    .dashboard-grid {
        padding: 12px;
        gap: 14px;
    }

    .panel-card,
    .telegram-log-table-card,
    .hourly-chart-card {
        padding: 12px;
    }

    .kpi-row,
    .hourly-chart-grid,
    .mw50-chart-grid {
        grid-template-columns: 1fr;
    }

    .chart-container,
    .chart-container.large,
    .hourly-chart-card .chart-container {
        height: 260px;
        min-height: 240px;
    }

    .data-table th,
    .site-alarm-table th,
    .data-table td,
    .site-alarm-table td {
        padding: 9px;
    }
}

@media (max-width: 560px) {
    .filter-panel-top {
        display: grid;
        grid-template-columns: 1fr;
    }

    .filter-item,
    .site-filter-control,
    .date-filter-control,
    .filter-select,
    .custom-searchable-dropdown {
        width: 100%;
        min-width: 0;
    }

    .export-bar {
        justify-content: stretch;
    }

    .export-xlsx-btn,
    .header-refresh-data-btn {
        width: 100%;
        justify-content: center;
    }
}

.problem-warning-layer {
    position: fixed;
    inset: 0;
    z-index: 12000;
    width: 0;
    height: 0;
    overflow: visible;
    pointer-events: none;
    contain: layout style;
}
.problem-warning-popup {
    position: absolute;
    top: 18px;
    left: calc(100vw - 408px);
    width: min(390px, calc(100vw - 28px));
    box-sizing: border-box;
    margin: 0;
    padding: 18px;
    border: 1px solid #F2B84B;
    border-left: 5px solid #E08A00;
    border-radius: 8px;
    background: #FFFFFF;
    color: #172033;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .24);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-14px);
    transition: opacity .2s ease, transform .2s ease;
}
.problem-warning-popup.active { opacity: 1; pointer-events: auto; transform: translateY(0); }
.problem-warning-close { position:absolute; top:7px; right:7px; z-index:2; display:flex; align-items:center; justify-content:center; width:38px; height:38px; padding:0; border:0; border-radius:4px; background:#F1F5F9; color:#475569; cursor:pointer; pointer-events:auto; }
.problem-warning-close:hover { background:#E2E8F0; color:#B91C1C; }
.problem-warning-heading { display:flex; align-items:center; gap:9px; padding-right:28px; font-size:16px; font-weight:800; }
.problem-warning-heading i { color:#E08A00; font-size:20px; }
.problem-warning-summary { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.problem-warning-summary div { min-width:0; padding:12px; border:1px solid #DCE4EE; border-radius:6px; background:#F8FAFC; }
.problem-warning-summary strong { display:block; color:#C62828; font-size:26px; line-height:1; }
.problem-warning-summary span { display:block; margin-top:6px; color:#475569; font-size:12px; }
.problem-warning-popup p { margin:12px 0 0; color:#64748B; font-size:12px; }
@media (max-width: 560px) { .problem-warning-popup { top:10px; left:14px; width:calc(100vw - 28px); } }

.header-logout-btn {
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    margin: 0;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 6px;
    background: rgba(255,255,255,.10);
    color: #FFFFFF;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.header-logout-btn:hover { background:#B42318; border-color:#D65A4D; }
@media (max-width: 760px) {
    .header-logout-btn { width:38px; height:38px; min-width:38px; flex-basis:38px; }
}

/* QGIS-inspired operational workspace for Map Central Java. */
#page-map-central-java { background:#DDE3E8 !important; }
.body-map-central-mode .cj-map-command {
    min-height:100vh;
    padding:8px !important;
    background:#DDE3E8 !important;
    color:#20262E;
}
.body-map-central-mode .cj-map-hero {
    min-height:46px;
    margin:0;
    padding:0 10px;
    border:1px solid #AAB3BC;
    border-bottom:0;
    background:#F5F6F7;
    color:#20262E;
}
.body-map-central-mode .cj-map-title p { color:#66717D; font-size:10px; }
.body-map-central-mode .cj-map-title h2 { color:#20262E; font-size:18px; }
.body-map-central-mode .cj-map-menu-btn,
.body-map-central-mode .cj-map-actions button {
    height:32px;
    border:1px solid #AEB7C0;
    border-radius:3px;
    background:#FFFFFF;
    color:#27313A;
    box-shadow:none;
}
.body-map-central-mode .cj-map-actions button:hover { background:#E7F1FA; border-color:#6E9EC5; }
.cj-gis-toolbar {
    display:flex;
    align-items:center;
    gap:6px;
    min-height:42px;
    padding:5px 8px;
    border:1px solid #AAB3BC;
    background:linear-gradient(#FAFAFA,#E9ECEF);
    box-shadow:inset 0 1px #FFFFFF;
}
.cj-gis-tool-group { display:flex; align-items:center; gap:3px; }
.cj-gis-tool-group button {
    width:32px;
    height:30px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid transparent;
    border-radius:3px;
    background:transparent;
    color:#263746;
    cursor:pointer;
    font-size:16px;
}
.cj-gis-tool-group button:hover { border-color:#8CB5D5; background:#DCECF8; }
.cj-gis-tool-group button.active { border-color:#5E96BE; background:#CBE3F4; color:#0B5C91; }
.cj-gis-tool-separator { width:1px; height:26px; margin:0 3px; background:#B8C0C8; }
.cj-gis-toolbar-status { margin-left:auto; color:#66717D; font-size:11px; font-weight:700; }
.body-map-central-mode .cj-map-shell,
body:has(#page-map-central-java.active) .cj-map-shell {
    grid-template-columns:310px minmax(0,1fr);
    gap:0;
    height:calc(100vh - 112px) !important;
    min-height:640px !important;
    border:1px solid #AAB3BC;
    border-top:0;
    background:#C9D0D6;
}
.body-map-central-mode .cj-map-panel {
    padding:7px;
    border:0;
    border-right:1px solid #AAB3BC;
    border-radius:0;
    background:#F4F5F6;
    color:#20262E;
    box-shadow:none;
    backdrop-filter:none;
}
.body-map-central-mode .cj-map-panel-block {
    padding:9px;
    margin-bottom:7px;
    border:1px solid #B7BFC7;
    border-radius:3px;
    background:#FFFFFF;
}
.body-map-central-mode .cj-map-panel-label { margin:0; color:#394551; font-size:11px; }
.cj-layer-panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; padding-bottom:6px; border-bottom:1px solid #D7DCE1; }
.cj-layer-panel-head i { color:#607482; }
.cj-layer-tree { gap:0; border:1px solid #CCD2D8; background:#FFFFFF; }
.cj-layer-group-title {
    display:flex;
    align-items:center;
    gap:5px;
    height:27px;
    padding:0 7px;
    border-bottom:1px solid #DDE1E5;
    background:#E9EDF0;
    color:#36414C;
    font-size:11px;
    font-weight:800;
}
.cj-layer-group-title i { font-size:9px; color:#647482; }
.cj-map-layer-list label.cj-layer-row {
    display:grid;
    grid-template-columns:17px 19px minmax(0,1fr);
    gap:6px;
    min-height:27px;
    padding:2px 7px 2px 18px;
    border-bottom:1px solid #EEF0F2;
    color:#27313A;
    font-size:11px;
    font-weight:600;
    cursor:pointer;
}
.cj-layer-row:hover { background:#EAF3FA; }
.cj-layer-row input { width:14px; height:14px; margin:0; accent-color:#2B78B5; }
.cj-layer-symbol { width:15px; height:12px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #60717E; }
.cj-layer-symbol.raster { background:linear-gradient(135deg,#315D45,#86A568,#92B5D5,#D6C596); }
.cj-layer-symbol.labels { border:0; background:repeating-linear-gradient(0deg,#8C969E 0 1px,transparent 1px 4px); }
.cj-layer-symbol.terrain { background:repeating-radial-gradient(ellipse at 50% 60%,#7B9C5B 0 1px,#DDE8CF 2px 4px); border-color:#6E8D50; }
.cj-layer-symbol.road { background:#F5F2E9; position:relative; }
.cj-layer-symbol.road::after { content:""; position:absolute; width:17px; height:4px; left:-2px; top:3px; background:#F0A83A; border-block:1px solid #FFF; transform:rotate(-24deg); }
.cj-layer-symbol.point { width:10px; height:10px; margin-left:2px; border-radius:50%; border-color:#FFFFFF; outline:1px solid #327DA8; background:#38BDF8; }
.cj-layer-symbol.sector { border-radius:8px 8px 1px 1px; background:#F59E0B; transform:rotate(20deg); }
.cj-layer-symbol.text { border:0; color:#27313A; font:700 12px Georgia,serif; }
.cj-layer-symbol.polygon { background:rgba(79,129,189,.22); border-color:#4F81BD; }
.cj-layer-symbol.heat { background:linear-gradient(90deg,#275DAD,#34B8C8,#F1E85B,#E43D30); border:0; }
.cj-layer-symbol.poi { width:9px; height:9px; margin-left:2px; border-radius:50%; background:#D946EF; border-color:#86198F; }
.cj-layer-symbol.compass { border-radius:50%; border-color:#DC2626; background:linear-gradient(135deg,#DC2626 0 50%,#FFF 50%); }
.cj-layer-opacity { margin-top:8px; padding:7px; border:1px solid #D7DCE1; background:#F7F8F9; }
.cj-layer-opacity label { display:flex; justify-content:space-between; color:#4A5662; font-size:10px; font-weight:700; }
.cj-layer-opacity input { width:100%; margin:7px 0 0; accent-color:#2B78B5; }
.body-map-central-mode .cj-map-search-row input,
.body-map-central-mode .cj-map-coord-grid input { border-radius:3px; border-color:#AEB7C0; background:#FFF; }
.body-map-central-mode .cj-map-search-row button,
.body-map-central-mode .cj-map-coord-grid button { border-radius:3px; border-color:#7EA5C3; background:#E2EFF8; color:#174E75; }
.body-map-central-mode .cj-map-info { padding:8px; border:1px solid #B7BFC7; background:#FFF; color:#4A5662; white-space:pre-line; }
.cj-tilt-simulator { padding:0 !important; }
.cj-tilt-head { width:100%; min-height:36px; padding:0 9px; display:flex; align-items:center; justify-content:space-between; border:0; background:#173B57; color:#FFF; font:800 11px inherit; cursor:pointer; }
.cj-tilt-head span { display:flex; align-items:center; gap:7px; }
.cj-tilt-body { padding:8px; max-height:445px; overflow:auto; }
.cj-tilt-body.collapsed { display:none; }
.cj-tilt-status { display:flex; flex-direction:column; gap:2px; padding:6px; margin-bottom:7px; border-left:3px solid #38BDF8; background:#EAF6FD; font-size:10px; }
.cj-tilt-status span { color:#64748B; }
.cj-tilt-field { display:grid; grid-template-columns:1fr 130px; align-items:center; gap:6px; margin-bottom:7px; font-size:10px; font-weight:700; }
.cj-tilt-field select { width:100%; min-width:0; height:28px; padding:0 24px 0 7px; border:1px solid #AEB7C0; background:#FFF; font-size:10px; text-overflow:ellipsis; }
.cj-tilt-loss-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:7px; padding:7px; margin-bottom:7px; border:1px solid #FED7AA; background:#FFF7ED; }
.cj-tilt-loss-grid label { position:relative; display:grid; gap:2px; color:#7C2D12; font-size:9px; font-weight:800; }
.cj-tilt-loss-grid input,.cj-tilt-loss-grid select { width:100%; min-width:0; height:27px; padding:2px 22px 2px 6px; border:1px solid #FDBA74; background:#FFF; font-size:10px; box-sizing:border-box; }
.cj-tilt-loss-grid small { position:absolute; right:5px; bottom:6px; color:#9A3412; pointer-events:none; }
.cj-tilt-relocation,.cj-tilt-sector-config { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:7px; padding:7px; margin-bottom:7px; border:1px solid #BFDBFE; background:#EFF6FF; }
.cj-tilt-relocation { display:none; }
.cj-tilt-relocation.active { display:grid; }
.cj-tilt-relocation label,.cj-tilt-sector-config label { display:grid; gap:2px; color:#1E3A5F; font-size:9px; font-weight:800; }
.cj-tilt-relocation input,.cj-tilt-sector-config input,.cj-tilt-sector-config select { width:100%; min-width:0; height:28px; padding:2px 6px; border:1px solid #93C5FD; background:#FFF; font-size:10px; box-sizing:border-box; }
.cj-tilt-sector-config label:last-child { grid-column:1/-1; }
.cj-tilt-sector-config #cj-tilt-azimuth-list { letter-spacing:.2px; }
.cj-tilt-body * { box-sizing:border-box; }
.cj-tilt-relocation button { grid-column:1/-1; min-height:28px; border:1px solid #3B82F6; background:#DBEAFE; color:#1D4ED8; font-size:10px; font-weight:800; cursor:pointer; }
.cj-tilt-columns,.cj-tilt-row { display:grid; grid-template-columns:66px 58px minmax(118px,1fr); gap:5px; align-items:center; }
.cj-tilt-columns { padding:4px 0; color:#66717D; font-size:9px; text-align:center; }
.cj-tilt-row { min-height:45px; border-top:1px solid #E5E7EB; }
.cj-tilt-row>label { font-size:9px; font-weight:800; line-height:1.1; }
.cj-tilt-row>label small { display:block; color:#64748B; font-weight:600; }
.cj-tilt-row input[type=number] { width:100%; height:25px; padding:2px 4px; border:1px solid #B8C0C8; border-radius:2px; font-size:10px; }
.cj-tilt-proposed { display:grid; grid-template-columns:22px 1fr 22px; gap:2px; align-items:center; }
.cj-tilt-proposed button { height:25px; padding:0; border:1px solid #8FA6B8; background:#E8F1F7; color:#174E75; font-weight:900; cursor:pointer; }
.cj-tilt-proposed .cj-tilt-range { grid-column:1/-1; width:100%; height:10px; accent-color:#F97316; }
.cj-tilt-summary { display:flex; flex-direction:column; gap:2px; margin-top:7px; padding:7px; border:1px solid #BFDBFE; background:#EFF6FF; color:#334155; font-size:9px; }
.cj-tilt-calibration { display:flex; flex-direction:column; gap:3px; margin-top:7px; padding:7px; border:1px solid #BAE6FD; border-radius:2px; background:#F0F9FF; color:#0369A1; font-size:9px; line-height:1.3; }
.cj-tilt-calibration span { display:flex; justify-content:space-between; color:#334155; border-bottom:1px dashed #E0F2FE; padding-bottom:1px; }
.cj-tilt-calibration span b { color:#0284C7; }
.cj-tilt-calibration b { color:#0369A1; }
.cj-tilt-actions { display:grid; grid-template-columns:.8fr 1.25fr 1.15fr; gap:5px; margin-top:7px; }
.cj-tilt-actions button { min-height:31px; border:1px solid #7EA5C3; border-radius:2px; background:#FFF; color:#174E75; font-weight:800; cursor:pointer; }
.cj-tilt-actions #cj-tilt-run { background:#EA580C; border-color:#C2410C; color:#FFF; }
.cj-tilt-actions #cj-tilt-export { background:#0F766E; border-color:#0F766E; color:#FFF; }
.cj-tilt-actions button:disabled { cursor:not-allowed; filter:grayscale(.45); opacity:.55; }
.cj-tilt-inspect { display:flex; align-items:center; gap:6px; margin:7px 0; font-size:10px; font-weight:700; }
.cj-tilt-legend { display:flex; flex-wrap:wrap; gap:7px; color:#64748B; font-size:9px; }
.cj-tilt-legend span { display:flex; align-items:center; gap:3px; }
.cj-tilt-legend i { width:10px; height:10px; display:inline-block; border-radius:2px; }
.cj-tilt-legend .existing { background:#2563EB; }.cj-tilt-legend .proposed { background:#F97316; }
.cj-tilt-legend .gain { background:#FACC15; }.cj-tilt-legend .loss { background:#DC2626; }
.body-map-central-mode .cj-map-stage { border:0; border-radius:0; box-shadow:none; }
.body-map-central-mode #cj-map-element,
body:has(#page-map-central-java.active) #cj-map-element { min-height:640px !important; }
@media (max-width:900px) {
    .cj-gis-toolbar { overflow-x:auto; }
    .cj-gis-toolbar-status { display:none; }
    .body-map-central-mode .cj-map-shell,body:has(#page-map-central-java.active) .cj-map-shell { grid-template-columns:1fr; height:auto !important; }
    .body-map-central-mode .cj-map-panel { border-right:0; border-bottom:1px solid #AAB3BC; max-height:430px; }
}

/* OWS/OMC mobile priority: keep the operational map as the dominant panel. */
@media (max-width: 820px) {
    #page-ows-alarms .ows-command-center .ows-map-card {
        height: auto !important;
        min-height: 620px !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    #page-ows-alarms .ows-command-center #ows-alarm-map {
        flex: 1 1 auto !important;
        height: max(520px, 68dvh) !important;
        min-height: 520px !important;
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    #page-ows-alarms {
        padding-inline: 4px !important;
    }

    #page-ows-alarms .ows-command-grid {
        padding: 6px !important;
        gap: 10px !important;
    }

    #page-ows-alarms .ows-command-center #ows-alarm-map {
        height: max(540px, 72dvh) !important;
        min-height: 540px !important;
    }
}

/* Compact OWS playback controls on phones. Keep hour controls immediately
   above the map so they remain visible after the status checklist. */
@media (max-width: 560px) {
    #page-ows-alarms .ows-map-filter-bar {
        display: flex !important;
        flex-direction: column !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #page-ows-alarms .ows-map-filter-bar label[for="ows-alarm-hour-range"] {
        order: 20 !important;
        margin-top: 8px !important;
        font-weight: 800 !important;
        color: #7dd3fc !important;
    }

    #page-ows-alarms #ows-alarm-hour-range {
        display: block !important;
        visibility: visible !important;
        order: 21 !important;
        width: 100% !important;
        height: 28px !important;
        margin: 0 !important;
        opacity: 1 !important;
    }

    #page-ows-alarms #ows-alarm-hour-label {
        display: block !important;
        order: 22 !important;
        color: #fff !important;
        text-align: center !important;
        font-weight: 800 !important;
    }

    #page-ows-alarms #ows-hour-play-btn {
        display: inline-flex !important;
        visibility: visible !important;
        order: 23 !important;
        width: 100% !important;
        min-height: 40px !important;
        margin: 0 !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #page-ows-alarms .ows-map-filter-bar > button:last-of-type {
        order: 24 !important;
    }
}

.ows-mobile-thematic-marker {
    background: transparent !important;
    border: 0 !important;
}

.ows-mobile-thematic-marker span {
    display: block;
    width: 18px;
    height: 18px;
    border: 2px solid #07111f;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 3px 9px rgba(0,0,0,.55);
}

/* Final mobile map override: this must come after the dashboard theme rules,
   otherwise the generic card sizing collapses Leaflet to its content height. */
@media (max-width: 820px) {
    #page-ows-alarms .ows-command-center .ows-map-card,
    #page-ows-alarms .ows-map-card {
        display: flex !important;
        flex-direction: column !important;
        height: 640px !important;
        min-height: 640px !important;
        overflow: hidden !important;
    }

    #page-ows-alarms #ows-alarm-map,
    #page-ows-alarms .ows-command-center #ows-alarm-map {
        display: block !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        height: 560px !important;
        min-height: 560px !important;
        max-height: none !important;
    }
}

@media (max-width: 480px) {
    #page-ows-alarms .ows-command-center .ows-map-card,
    #page-ows-alarms .ows-map-card {
        height: 680px !important;
        min-height: 680px !important;
    }

    #page-ows-alarms #ows-alarm-map,
    #page-ows-alarms .ows-command-center #ows-alarm-map {
        height: 600px !important;
        min-height: 600px !important;
    }
}

/* ==========================================================================
   EXECUTIVE UI SYSTEM 2026 V2: HIGH-CONTRAST VISIBLE REDESIGN
   ========================================================================== */

:root {
    --exec-navy: #0B1F3A;
    --exec-navy-2: #123154;
    --exec-blue: #2563EB;
    --exec-teal: #0F9F8F;
    --exec-gold: #D99A2B;
    --exec-red: #D64545;
    --exec-ink: #132033;
    --exec-muted: #66758A;
    --exec-line: #D6E0EC;
    --exec-panel: #FFFFFF;
    --exec-canvas: #EFF4F9;
}

body {
    background:
        radial-gradient(circle at 18% -10%, rgba(37, 99, 235, 0.13), transparent 30%),
        linear-gradient(180deg, #F8FAFD 0%, var(--exec-canvas) 100%) !important;
}

#dashboard-header {
    min-height: 84px !important;
    background:
        linear-gradient(135deg, rgba(11, 31, 58, 0.98), rgba(18, 49, 84, 0.96)) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 14px 34px rgba(11, 31, 58, 0.18) !important;
}

#dashboard-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--exec-gold), var(--exec-red), var(--exec-blue), var(--exec-teal));
    pointer-events: none;
}

.header-title h2,
#dashboard-header #header-site-id {
    color: #FFFFFF !important;
}

.header-title p,
#dashboard-header #header-site-name {
    color: #C8D4E4 !important;
}

#dashboard-debug-status {
    color: #7DD3FC !important;
}

#sidebar-toggle-btn,
#dashboard-header .icon-action-btn {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.2) !important;
    color: #FFFFFF !important;
}

#dashboard-header .filter-item label {
    color: #DDE7F3 !important;
}

#dashboard-header .filter-select,
#dashboard-header .custom-searchable-dropdown input,
#dashboard-header .date-input {
    background: rgba(255,255,255,0.96) !important;
    border-color: rgba(255,255,255,0.24) !important;
    color: #0F1E33 !important;
}

#dashboard-header .filter-select:focus,
#dashboard-header .custom-searchable-dropdown input:focus,
#dashboard-header .date-input:focus {
    border-color: #7DD3FC !important;
    box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.24) !important;
}

#sidebar {
    background: linear-gradient(180deg, #0B1F3A 0%, #102A49 100%) !important;
    border-right: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 14px 0 34px rgba(11, 31, 58, 0.26) !important;
}

.logo-container {
    border-bottom-color: rgba(255,255,255,0.1) !important;
}

.logo-text h1,
.sidebar-meta-title,
.meta-val {
    color: #FFFFFF !important;
}

.logo-text p,
.meta-label {
    color: #AAB8CA !important;
}

.tab-btn {
    color: #D4DFEC !important;
    border-color: transparent !important;
}

.tab-btn i {
    color: #9FB1C8 !important;
}

.tab-btn:hover {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: #FFFFFF !important;
}

.tab-btn.active {
    background: rgba(255,255,255,0.14) !important;
    border-color: rgba(125, 211, 252, 0.35) !important;
    color: #FFFFFF !important;
    box-shadow: inset 4px 0 0 #F4B23B !important;
}

.tab-btn.active i {
    color: #F4B23B !important;
}

.sidebar-metadata-panel {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.12) !important;
}

.dashboard-grid {
    background: transparent !important;
}

.kpi-card {
    min-height: 128px !important;
    border: 1px solid #D9E3EF !important;
    border-top: 4px solid var(--exec-blue) !important;
    background:
        linear-gradient(180deg, #FFFFFF 0%, #F9FBFD 100%) !important;
    box-shadow: 0 10px 28px rgba(19, 32, 51, 0.08) !important;
}

.kpi-card::before {
    display: none !important;
}

.kpi-card.success {
    border-top-color: var(--exec-teal) !important;
}

.kpi-card.warning {
    border-top-color: var(--exec-gold) !important;
}

.kpi-card.danger {
    border-top-color: var(--exec-red) !important;
}

.kpi-card.cyan {
    border-top-color: #0891B2 !important;
}

.kpi-card .kpi-title {
    color: #4E5E73 !important;
    font-size: 11px !important;
}

.kpi-card .kpi-value {
    color: var(--exec-ink) !important;
    font-size: clamp(24px, 2.1vw, 34px) !important;
    font-weight: 800 !important;
}

.kpi-icon {
    background: #EEF5FF !important;
    color: var(--exec-blue) !important;
    border-color: #D7E6FB !important;
}

.kpi-card.success .kpi-icon {
    background: #EAF7F4 !important;
    color: var(--exec-teal) !important;
}

.kpi-card.warning .kpi-icon {
    background: #FFF5E1 !important;
    color: var(--exec-gold) !important;
}

.kpi-card.danger .kpi-icon {
    background: #FDECEC !important;
    color: var(--exec-red) !important;
}

.panel-card,
.hourly-chart-card,
.telegram-status-bar,
.telegram-log-table-card,
.complaint-map-card,
.complaint-summary-card,
.neighbor-vlr-card,
.neighbor-map-card,
.mw50-title-card {
    border: 1px solid var(--exec-line) !important;
    background: var(--exec-panel) !important;
    box-shadow: 0 10px 28px rgba(19, 32, 51, 0.075) !important;
}

.panel-header {
    background: linear-gradient(180deg, #FFFFFF, #F7FAFD) !important;
    margin: -16px -16px 14px !important;
    padding: 13px 16px !important;
    border-bottom: 1px solid #E5ECF4 !important;
    border-radius: 8px 8px 0 0 !important;
}

.panel-header h3,
.hourly-chart-title h4 {
    color: var(--exec-ink) !important;
    font-size: 14px !important;
    font-weight: 850 !important;
}

.chart-container,
.hourly-chart-card .chart-container,
.mw50-chart-grid .chart-container {
    background:
        linear-gradient(180deg, #FFFFFF 0%, #F8FBFE 100%) !important;
    border: 1px solid #E0E8F2 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.95) !important;
}

.data-table-container,
.site-alarm-table-wrap {
    border: 1px solid var(--exec-line) !important;
    box-shadow: 0 10px 28px rgba(19, 32, 51, 0.065) !important;
}

.data-table th,
.site-alarm-table th,
#page-complaint .noc-table th,
#page-ows-alarms .data-table th,
.mw50-table thead th {
    background: linear-gradient(180deg, #EEF4FA, #E5EDF6) !important;
    color: #23364D !important;
    border-bottom-color: #CAD7E6 !important;
}

.data-table td,
.site-alarm-table td,
#page-complaint .noc-table td,
#page-ows-alarms .data-table td {
    color: #29384C !important;
}

.data-table tbody tr:nth-child(even),
.site-alarm-table tbody tr:nth-child(even) {
    background: #F7FAFD !important;
}

.data-table tbody tr:hover,
.site-alarm-table tbody tr:hover {
    background: #ECF4FF !important;
}

.export-xlsx-btn,
.header-refresh-data-btn {
    background: linear-gradient(135deg, #17805D, #0F9F8F) !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
}

.login-overlay-container {
    background:
        radial-gradient(circle at 18% 12%, rgba(244, 178, 59, 0.25), transparent 25%),
        linear-gradient(135deg, rgba(11, 31, 58, 0.96), rgba(18, 49, 84, 0.96)) !important;
}

.login-card-container {
    border: 1px solid rgba(255,255,255,0.5) !important;
    border-top: 4px solid #F4B23B !important;
    border-radius: 8px !important;
    box-shadow: 0 24px 60px rgba(0,0,0,0.28) !important;
}

/* NPM Dashboard Monitoring — split login experience */
.login-overlay-container {
    overflow-y: auto;
    padding: clamp(16px, 3vw, 42px) !important;
    background:
        radial-gradient(circle at 12% 8%, rgba(40, 139, 255, 0.32), transparent 30%),
        radial-gradient(circle at 88% 92%, rgba(15, 207, 183, 0.20), transparent 32%),
        #07182f !important;
}

.login-card-container {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
    width: min(1120px, 100%);
    max-width: 1120px !important;
    min-height: min(700px, calc(100vh - 84px));
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-top: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 28px !important;
    background: #FFFFFF !important;
    box-shadow: 0 30px 90px rgba(0, 8, 25, .48) !important;
}

.login-showcase {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    overflow: hidden;
    padding: 38px 46px 44px;
    color: #FFFFFF;
    background:
        linear-gradient(155deg, rgba(18, 119, 238, .96), rgba(8, 73, 174, .98)),
        #0D6FE8;
}

.login-showcase::before,
.login-showcase::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.login-showcase::before { width: 370px; height: 370px; top: -170px; right: -150px; border: 1px solid rgba(255,255,255,.16); }
.login-showcase::after { width: 240px; height: 240px; bottom: -125px; left: -85px; background: rgba(22, 222, 197, .15); }

.login-brand-pill {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: fit-content;
    padding: 9px 14px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 999px;
    background: rgba(3, 37, 102, .24);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.login-network-art { position: relative; z-index: 1; width: 410px; max-width: 100%; height: 285px; margin: 5px auto 12px; }
.login-art-orbit { position: absolute; inset: 50% auto auto 50%; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; transform: translate(-50%,-50%); }
.orbit-one { width: 235px; height: 235px; }
.orbit-two { width: 330px; height: 330px; }
.login-art-tower { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 112px; height: 112px; transform: translate(-50%,-50%); border: 1px solid rgba(255,255,255,.35); border-radius: 30px; background: linear-gradient(145deg,rgba(255,255,255,.25),rgba(255,255,255,.08)); box-shadow: 0 25px 45px rgba(0,32,98,.30); backdrop-filter: blur(8px); }
.login-art-tower i { font-size: 50px; color: #FFFFFF; }
.login-art-card { position: absolute; display: flex; flex-direction: column; padding: 15px 17px; border: 1px solid rgba(255,255,255,.28); border-radius: 17px; background: rgba(255,255,255,.92); color: #102B50; box-shadow: 0 18px 34px rgba(0,35,98,.24); }
.art-card-primary { left: 0; bottom: 18px; width: 164px; }
.art-card-primary span { font-size: 8px; font-weight: 800; letter-spacing: .8px; color: #69809D; }
.art-card-primary strong { margin-top: 3px; font-size: 25px; }
.login-art-bars { display: flex; align-items: end; gap: 5px; height: 31px; margin-top: 8px; }
.login-art-bars i { flex: 1; height: 40%; border-radius: 3px; background: #2A88EE; }
.login-art-bars i:nth-child(2) { height: 68%; }.login-art-bars i:nth-child(3) { height: 52%; }.login-art-bars i:nth-child(4) { height: 88%; background:#16BFA7; }.login-art-bars i:nth-child(5) { height: 72%; }
.art-card-secondary { right: 0; top: 35px; width: 145px; }
.art-card-secondary i { color: #16A991; font-size: 22px; }.art-card-secondary span { margin-top: 6px; font-size: 13px; font-weight: 800; }.art-card-secondary b { margin-top: 2px; color: #16A991; font-size: 9px; text-transform: uppercase; letter-spacing: .7px; }
.login-node { position:absolute; width:12px; height:12px; border:3px solid rgba(255,255,255,.85); border-radius:50%; background:#18C6AE; box-shadow:0 0 0 7px rgba(24,198,174,.16); }
.node-a { top: 16px; left: 86px; }.node-b { right: 60px; bottom: 28px; }.node-c { left: 46%; bottom: 2px; width: 8px; height: 8px; }

.login-showcase-copy { position: relative; z-index: 2; max-width: 510px; }
.login-eyebrow { margin: 0 0 10px; color: #74E8D6; font-size: 10px; font-weight: 900; letter-spacing: 1.7px; }
.login-showcase-copy h1 { margin: 0; font-size: clamp(31px, 3vw, 45px); line-height: 1.08; letter-spacing: -1.3px; }
.login-showcase-copy h1 span { color: #82F0DE; }
.login-showcase-copy > p:not(.login-eyebrow) { max-width: 455px; margin: 16px 0 22px; color: rgba(255,255,255,.76); font-size: 13px; line-height: 1.65; }
.login-feature-list { display: flex; flex-wrap: wrap; gap: 8px; }
.login-feature-list span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 8px; background: rgba(5,43,112,.30); color: rgba(255,255,255,.92); font-size: 10px; font-weight: 700; }

.login-body-form { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: clamp(38px, 5vw, 70px) clamp(32px, 5vw, 64px) 26px; background: #FFFFFF; }
.login-form-content { width: 100%; max-width: 410px; margin: auto; }
.login-logo-header { display: flex; align-items: center; gap: 13px; margin-bottom: 48px; text-align: left; }
.login-logo-badge { flex: 0 0 auto; width: 47px; height: 47px; margin: 0; border-radius: 13px; background: linear-gradient(135deg,#0D74E8,#16BDA5); font-size: 20px; }
.login-logo-header h2 { margin: 0; color: #102B50; font-size: 18px; line-height: 1.15; }
.login-logo-header p { margin: 4px 0 0; color: #7B8CA3; font-size: 8px; letter-spacing: 1px; }
.login-welcome-copy { margin-bottom: 26px; }
.login-welcome-copy .login-eyebrow { margin-bottom: 8px; color: #0876E8; }
.login-welcome-copy h3 { margin: 0 0 8px; color: #102B50; font-size: 27px; font-weight: 800; letter-spacing: -.5px; }
.login-welcome-copy > p:last-child { margin: 0; color: #78899F; font-size: 12px; line-height: 1.55; }
.login-input-group { gap: 7px; margin-top: 16px; }
.login-input-group label { color: #324966; font-size: 10px; letter-spacing: .5px; }
.login-input-shell { display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid #D8E2EE; border-radius: 10px; background: #F8FAFD; transition: .2s ease; }
.login-input-shell:focus-within { border-color: #147BE7; background: #FFFFFF; box-shadow: 0 0 0 4px rgba(20,123,231,.10); }
.login-input-shell > i { color: #8395AC; font-size: 15px; }
.login-input-group .login-input-shell input { height: 48px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #102B50; font-size: 12px; }
.login-submit-button { height: 49px; margin-top: 24px; border-radius: 10px; background: linear-gradient(110deg,#0875E7,#1293EA 64%,#16BDA5); box-shadow: 0 13px 25px rgba(8,117,231,.22); font-size: 12px; letter-spacing: .2px; }
.login-submit-button:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(8,117,231,.32); }
.login-security-note { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 15px; color: #91A0B2; font-size: 9px; }
.login-security-note i { color: #16A88F; }
.login-contact { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 9px 14px; margin-top: 36px; padding-top: 19px; border-top: 1px solid #E9EEF5; color: #8190A4; font-size: 9px; }
.login-contact strong { color: #344B67; }.login-contact a { display: inline-flex; align-items:center; gap:5px; color:#1478DD; text-decoration:none; font-weight:700; }.login-contact a:hover { color:#0A5DB7; }

@media (max-width: 850px) {
    .login-overlay-container { align-items: flex-start; padding: 14px !important; }
    .login-card-container { grid-template-columns: 1fr; min-height: auto; border-radius: 22px !important; }
    .login-showcase { min-height: 280px; padding: 25px 27px 28px; }
    .login-network-art { position: absolute; right: -55px; top: 5px; width: 300px; height: 240px; opacity: .52; transform: scale(.78); }
    .login-showcase-copy { margin-top: 78px; max-width: 470px; }
    .login-showcase-copy h1 { font-size: 31px; }
    .login-showcase-copy > p:not(.login-eyebrow) { margin: 12px 0 16px; }
    .login-body-form { padding: 34px 27px 22px; }
    .login-logo-header { margin-bottom: 30px; }
    .login-contact { margin-top: 29px; }
}

@media (max-width: 500px) {
    .login-showcase { min-height: 245px; }
    .login-network-art { display: none; }
    .login-showcase-copy { margin-top: 44px; }
    .login-showcase-copy h1 { font-size: 27px; }
    .login-feature-list span:last-child { display: none; }
    .login-body-form { padding: 29px 22px 20px; }
    .login-welcome-copy h3 { font-size: 23px; }
    .login-contact { flex-direction: column; }
}

@media (max-width: 900px) {
    #dashboard-header {
        background: linear-gradient(135deg, #0B1F3A, #123154) !important;
    }

    .panel-header {
        margin: -12px -12px 12px !important;
        padding: 12px !important;
    }
}

/* Technology analysis KPI summary cards */
.tech-kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    align-items: stretch;
}

.tech-summary-card {
    position: relative;
    min-height: 126px;
    padding: 16px;
    border-radius: 8px;
    overflow: hidden;
    color: #FFFFFF;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    isolation: isolate;
}

.tech-summary-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.18), transparent 42%),
        radial-gradient(circle at 82% 18%, rgba(255,255,255,0.2), transparent 30%);
    z-index: -1;
}

.tech-summary-card::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 14px;
    width: 58px;
    height: 58px;
    border: 4px solid rgba(255,255,255,0.72);
    border-left-color: rgba(255,255,255,0.24);
    border-radius: 50%;
    opacity: 0.78;
}

.tech-summary-card .summary-label {
    position: relative;
    z-index: 1;
    display: block;
    max-width: calc(100% - 72px);
    color: rgba(255,255,255,0.9);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.45px;
    text-transform: uppercase;
    line-height: 1.25;
}

.tech-summary-card strong {
    position: relative;
    z-index: 1;
    display: block;
    margin: 5px 0 3px;
    color: #FFFFFF;
    font-size: clamp(23px, 2.4vw, 35px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0;
}

.tech-summary-card small {
    position: relative;
    z-index: 1;
    display: block;
    color: rgba(255,255,255,0.84);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
}

.summary-ring {
    position: absolute;
    right: 23px;
    top: 34px;
    z-index: 1;
    min-width: 40px;
    color: #FFFFFF;
    text-align: center;
    font-size: 13px;
    font-weight: 900;
}

.tech-summary-card.tone-blue { background: linear-gradient(135deg, #2563EB, #4F7FD6); }
.tech-summary-card.tone-teal { background: linear-gradient(135deg, #0EA5B7, #00BDB8); }
.tech-summary-card.tone-cyan { background: linear-gradient(135deg, #35C6E8, #22D3EE); }
.tech-summary-card.tone-indigo { background: linear-gradient(135deg, #5A7FD8, #6D8EDB); }
.tech-summary-card.tone-gold { background: linear-gradient(135deg, #D99022, #F2B642); }
.tech-summary-card.tone-red { background: linear-gradient(135deg, #D64545, #E96B6B); }
.tech-summary-card.tone-slate { background: linear-gradient(135deg, #718096, #A0A7AF); }

.tech-summary-card.is-muted {
    background: linear-gradient(135deg, #94A3B8, #CBD5E1);
}

@media (max-width: 1180px) {
    .tech-kpi-strip {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
    }
}

@media (max-width: 900px) {
    #dashboard-header.traffic-mtd-mode .header-left {
        display: block !important;
    }
    #dashboard-header.traffic-mtd-mode .header-title {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
}

@media (max-width: 760px) {
    .tech-kpi-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .tech-kpi-strip {
        grid-template-columns: 1fr;
    }
}

/* Keep in-card filter panels compact. The wide flex basis is only intended for
   the sticky top dashboard header, not dashboard content cards. */
.panel-card > .filter-panel-top,
.dashboard-grid > .panel-card .filter-panel-top,
#page-2g-mc .filter-panel-top,
#page-2g-site .filter-panel-top,
#page-2g-blocking .filter-panel-top {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    align-items: flex-end !important;
    padding: 14px 16px 16px !important;
}

#page-2g-mc .panel-card,
#page-2g-site .panel-card,
#page-2g-blocking .panel-card {
    min-height: 0 !important;
}

/* Executive KPI cards aligned with the new technology summary card language */
.page-tab:not(#page-ows-alarms) .kpi-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 14px !important;
    align-items: stretch !important;
}

.page-tab:not(#page-ows-alarms) .kpi-row > .kpi-card {
    position: relative !important;
    min-height: 126px !important;
    padding: 16px !important;
    border: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    color: #FFFFFF !important;
    background: linear-gradient(135deg, #2563EB, #4F7FD6) !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    isolation: isolate !important;
}

.page-tab:not(#page-ows-alarms) .kpi-row > .kpi-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.18), transparent 42%),
        radial-gradient(circle at 82% 18%, rgba(255,255,255,0.2), transparent 30%) !important;
    z-index: -1 !important;
    border-radius: inherit !important;
}

.page-tab:not(#page-ows-alarms) .kpi-row > .kpi-card::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    right: 14px !important;
    top: 14px !important;
    width: 58px !important;
    height: 58px !important;
    border: 4px solid rgba(255,255,255,0.72) !important;
    border-left-color: rgba(255,255,255,0.24) !important;
    border-radius: 50% !important;
    opacity: 0.78 !important;
    pointer-events: none !important;
}

.page-tab:not(#page-ows-alarms) .kpi-row > .kpi-card.success,
.page-tab:not(#page-ows-alarms) .kpi-row > .kpi-card.info {
    background: linear-gradient(135deg, #0EA5B7, #00BDB8) !important;
}

.page-tab:not(#page-ows-alarms) .kpi-row > .kpi-card.cyan,
.page-tab:not(#page-ows-alarms) .kpi-row > .kpi-card.market-share-card {
    background: linear-gradient(135deg, #35C6E8, #22D3EE) !important;
}

.page-tab:not(#page-ows-alarms) .kpi-row > .kpi-card.warning {
    background: linear-gradient(135deg, #D99022, #F2B642) !important;
}

.page-tab:not(#page-ows-alarms) .kpi-row > .kpi-card.danger {
    background: linear-gradient(135deg, #D64545, #E96B6B) !important;
}

.page-tab:not(#page-ows-alarms) .kpi-row > .kpi-card .kpi-header {
    position: relative !important;
    z-index: 1 !important;
    min-height: 0 !important;
    margin: 0 0 auto !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

.page-tab:not(#page-ows-alarms) .kpi-row > .kpi-card .kpi-title {
    max-width: calc(100% - 70px) !important;
    color: rgba(255,255,255,0.92) !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    letter-spacing: 0.35px !important;
    text-transform: uppercase !important;
    line-height: 1.25 !important;
}

.page-tab:not(#page-ows-alarms) .kpi-row > .kpi-card .kpi-icon {
    position: relative !important;
    z-index: 1 !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border: 1px solid rgba(255,255,255,0.28) !important;
    background: rgba(255,255,255,0.16) !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}

.page-tab:not(#page-ows-alarms) .kpi-row > .kpi-card .kpi-value {
    position: relative !important;
    z-index: 1 !important;
    margin: 8px 0 4px !important;
    padding: 0 !important;
    color: #FFFFFF !important;
    font-size: clamp(22px, 2.2vw, 34px) !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    word-break: break-word !important;
}

.page-tab:not(#page-ows-alarms) .kpi-row > .kpi-card .kpi-footer,
.page-tab:not(#page-ows-alarms) .kpi-row > .kpi-card .kpi-footer span,
.page-tab:not(#page-ows-alarms) .kpi-row > .kpi-card .kpi-trend {
    position: relative !important;
    z-index: 1 !important;
    color: rgba(255,255,255,0.86) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

.page-tab:not(#page-ows-alarms) .kpi-row > .kpi-card .kpi-trend.up,
.page-tab:not(#page-ows-alarms) .kpi-row > .kpi-card .kpi-trend.down {
    color: #FFFFFF !important;
}

.page-tab:not(#page-ows-alarms) .kpi-row > .kpi-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2) !important;
}

@media (max-width: 760px) {
    .page-tab:not(#page-ows-alarms) .kpi-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 480px) {
    .page-tab:not(#page-ows-alarms) .kpi-row {
        grid-template-columns: 1fr !important;
    }
}

/* Apply the same executive KPI card language to the main OWS KPI rows only. */
#page-ows-alarms > .dashboard-grid > .kpi-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 14px !important;
    align-items: stretch !important;
}

#page-ows-alarms > .dashboard-grid > .kpi-row > .kpi-card {
    position: relative !important;
    min-height: 126px !important;
    padding: 16px !important;
    border: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    color: #FFFFFF !important;
    background: linear-gradient(135deg, #2563EB, #4F7FD6) !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    isolation: isolate !important;
}

#page-ows-alarms > .dashboard-grid > .kpi-row > .kpi-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.18), transparent 42%),
        radial-gradient(circle at 82% 18%, rgba(255,255,255,0.2), transparent 30%) !important;
    z-index: -1 !important;
    border-radius: inherit !important;
}

#page-ows-alarms > .dashboard-grid > .kpi-row > .kpi-card::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    right: 14px !important;
    top: 14px !important;
    width: 58px !important;
    height: 58px !important;
    border: 4px solid rgba(255,255,255,0.72) !important;
    border-left-color: rgba(255,255,255,0.24) !important;
    border-radius: 50% !important;
    opacity: 0.78 !important;
    pointer-events: none !important;
}

#page-ows-alarms > .dashboard-grid > .kpi-row > .kpi-card.success,
#page-ows-alarms > .dashboard-grid > .kpi-row > .kpi-card.info {
    background: linear-gradient(135deg, #0EA5B7, #00BDB8) !important;
}

#page-ows-alarms > .dashboard-grid > .kpi-row > .kpi-card.warning {
    background: linear-gradient(135deg, #D99022, #F2B642) !important;
}

#page-ows-alarms > .dashboard-grid > .kpi-row > .kpi-card.danger {
    background: linear-gradient(135deg, #D64545, #E96B6B) !important;
}

#page-ows-alarms > .dashboard-grid > .kpi-row > .kpi-card .kpi-header {
    position: relative !important;
    z-index: 1 !important;
    min-height: 0 !important;
    margin: 0 0 auto !important;
}

#page-ows-alarms > .dashboard-grid > .kpi-row > .kpi-card .kpi-title {
    max-width: calc(100% - 70px) !important;
    color: rgba(255,255,255,0.92) !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    letter-spacing: 0.35px !important;
    text-transform: uppercase !important;
    line-height: 1.25 !important;
}

#page-ows-alarms > .dashboard-grid > .kpi-row > .kpi-card .kpi-icon {
    position: relative !important;
    z-index: 1 !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border: 1px solid rgba(255,255,255,0.28) !important;
    background: rgba(255,255,255,0.16) !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}

#page-ows-alarms > .dashboard-grid > .kpi-row > .kpi-card .kpi-value {
    position: relative !important;
    z-index: 1 !important;
    margin: 8px 0 4px !important;
    padding: 0 !important;
    color: #FFFFFF !important;
    font-size: clamp(22px, 2.2vw, 34px) !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    word-break: break-word !important;
}

#page-ows-alarms > .dashboard-grid > .kpi-row > .kpi-card .kpi-footer,
#page-ows-alarms > .dashboard-grid > .kpi-row > .kpi-card .kpi-footer span {
    position: relative !important;
    z-index: 1 !important;
    color: rgba(255,255,255,0.86) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

@media (max-width: 760px) {
    #page-ows-alarms > .dashboard-grid > .kpi-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 480px) {
    #page-ows-alarms > .dashboard-grid > .kpi-row {
        grid-template-columns: 1fr !important;
    }
}

/* OWS readability fixes: command-center cards and dark tables */
#page-ows-alarms .ows-command-left .kpi-card,
#page-ows-alarms .ows-command-left .kpi-card.success,
#page-ows-alarms .ows-command-left .kpi-card.warning,
#page-ows-alarms .ows-command-left .kpi-card.danger,
#page-ows-alarms .ows-command-left .kpi-card.info {
    background: linear-gradient(145deg, #123452, #0b2239) !important;
    border: 1px solid rgba(125, 211, 252, 0.35) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 24px rgba(2,8,23,0.26) !important;
    color: #F8FCFF !important;
}

#page-ows-alarms .ows-command-left .kpi-card::before {
    background: linear-gradient(180deg, rgba(125,211,252,0.22), rgba(125,211,252,0.04)) !important;
}

#page-ows-alarms .ows-command-left .kpi-card::after {
    background: rgba(56,189,248,0.08) !important;
    border: 1px solid rgba(125,211,252,0.16) !important;
}

#page-ows-alarms .ows-command-left .kpi-card .kpi-title,
#page-ows-alarms .ows-command-left .kpi-card .kpi-value,
#page-ows-alarms .ows-command-left .kpi-card .kpi-footer,
#page-ows-alarms .ows-command-left .kpi-card .kpi-footer span {
    text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;
}

#page-ows-alarms .ows-command-left .kpi-card .kpi-title {
    color: #DFF5FF !important;
}

#page-ows-alarms .ows-command-left .kpi-card .kpi-value {
    color: #FFFFFF !important;
}

#page-ows-alarms .ows-command-left .kpi-card .kpi-footer,
#page-ows-alarms .ows-command-left .kpi-card .kpi-footer span {
    color: #CFE7F7 !important;
}

#page-ows-alarms .ows-command-left .kpi-card .kpi-icon {
    background: rgba(224,242,254,0.96) !important;
    color: #06314d !important;
    border-color: rgba(255,255,255,0.55) !important;
}

#page-ows-alarms .panel-card,
#page-ows-alarms .data-table-container {
    background: #07192d !important;
    border-color: rgba(125, 211, 252, 0.24) !important;
}

#page-ows-alarms .panel-header h3,
#page-ows-alarms .ows-long-aging-container h4 {
    color: #7DD3FC !important;
}

#page-ows-alarms .data-table {
    background: #07192d !important;
}

#page-ows-alarms .data-table thead th,
#page-ows-alarms .data-table th {
    background: #EAF2FA !important;
    color: #08213b !important;
    border-bottom-color: rgba(203,213,225,0.8) !important;
    font-weight: 900 !important;
}

#page-ows-alarms .data-table tbody tr,
#page-ows-alarms .data-table tbody tr:nth-child(even) {
    background: #07192d !important;
}

#page-ows-alarms .data-table tbody tr:hover {
    background: #0d2844 !important;
}

#page-ows-alarms .data-table td {
    color: #D8EBF7 !important;
    border-bottom-color: rgba(125, 211, 252, 0.12) !important;
    font-weight: 650 !important;
}

#page-ows-alarms .data-table td b,
#page-ows-alarms .ows-click-row td:first-child,
#page-ows-alarms #ows-long-aging-details-body td:first-child {
    color: #38BDF8 !important;
    font-weight: 900 !important;
}

#page-ows-alarms .ows-click-row.active td {
    background: #123f34 !important;
    color: #E9FFF7 !important;
}

#page-ows-alarms .ows-long-aging-container {
    color: #D8EBF7 !important;
}

#page-ows-alarms #ows-long-aging-alert {
    background: rgba(245, 158, 11, 0.16) !important;
    color: #F59E0B !important;
}

/* Executive site analytics header polish: shared by Site Overview, 4G, and 5G. */
#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) {
    display: grid !important;
    grid-template-columns: minmax(360px, 560px) minmax(0, 1fr) minmax(136px, auto);
    align-items: center !important;
    gap: 20px !important;
    min-height: 120px !important;
    padding: 18px 30px 20px !important;
    overflow: visible;
    background:
        linear-gradient(135deg, rgba(9, 29, 55, 0.99) 0%, rgba(18, 49, 84, 0.98) 58%, rgba(22, 68, 98, 0.98) 100%) !important;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode)::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(120deg, rgba(255,255,255,0.08), transparent 34%),
        radial-gradient(circle at 92% 18%, rgba(20,184,166,0.18), transparent 24%);
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .header-left,
#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .filter-panel-top,
#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .header-refresh-data-btn {
    position: relative;
    z-index: 1;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .header-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .header-title {
    min-width: 0;
    padding-left: 2px;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .header-title h2 {
    margin: 0 0 2px;
    font-size: 26px !important;
    line-height: 1;
    letter-spacing: 0 !important;
    font-weight: 900;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .header-title p {
    max-width: 440px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) #header-site-name {
    color: #DCE7F5 !important;
    font-size: 11px !important;
    font-weight: 850;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) #dashboard-debug-status {
    margin-top: 8px;
    color: #67D6FF !important;
    font-size: 11px !important;
    line-height: 1.25;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .filter-panel-top {
    display: grid !important;
    grid-template-columns:
        minmax(180px, 1.15fr)
        minmax(160px, 0.95fr)
        minmax(150px, 0.85fr)
        minmax(150px, 0.85fr)
        minmax(150px, 0.82fr)
        minmax(150px, 0.82fr);
    align-items: center !important;
    gap: 14px !important;
    width: 100%;
    min-width: 0;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .filter-item,
#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .site-filter-control,
#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .date-filter-control {
    min-width: 0 !important;
    width: 100%;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .filter-item label {
    margin-bottom: 7px !important;
    color: rgba(232, 240, 250, 0.96) !important;
    font-size: 10.5px !important;
    line-height: 1;
    letter-spacing: 0 !important;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .custom-searchable-dropdown,
#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .filter-select,
#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .date-input {
    width: 100% !important;
    min-width: 0 !important;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .filter-select,
#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .custom-searchable-dropdown input,
#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .date-input,
#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .compact-multi-button {
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255,255,255,0.28) !important;
    background: rgba(248, 250, 252, 0.98) !important;
    box-shadow: 0 8px 18px rgba(2, 8, 23, 0.12), inset 0 1px 0 rgba(255,255,255,0.82) !important;
    color: #142033 !important;
    font-size: 13px !important;
    font-weight: 750 !important;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .compact-multi-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .compact-multi {
    position: relative;
    width: 100%;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .compact-multi-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 12px !important;
    font-family: var(--font-body);
    text-align: left;
    cursor: pointer;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .compact-multi-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .compact-multi-button i {
    flex: 0 0 auto;
    color: #526174;
    font-size: 12px;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .compact-multi.open .compact-multi-button {
    border-color: #7DD3FC !important;
    box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.24), 0 8px 18px rgba(2, 8, 23, 0.12) !important;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .compact-multi-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 1300;
    width: min(360px, 88vw);
    max-height: 300px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid rgba(197, 208, 222, 0.95);
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 20px 44px rgba(2, 8, 23, 0.24);
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .compact-multi.open .compact-multi-menu {
    display: block;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .compact-multi-option {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 34px;
    padding: 7px 8px;
    border-radius: 6px;
    color: #132033 !important;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .compact-multi-option:hover {
    background: #EEF6FF;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .compact-multi-option input {
    width: 14px;
    height: 14px;
    accent-color: #0F9F8F;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .compact-multi-option span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #132033 !important;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .header-dropdown-select {
    appearance: auto;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .multi-filter-select {
    height: 48px !important;
    min-height: 48px !important;
    padding: 6px 8px !important;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .multi-filter-select option {
    padding: 5px 7px;
    border-radius: 5px;
    margin-bottom: 2px;
    color: #132033 !important;
    background: #FFFFFF !important;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .filter-select option,
#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) select option,
.filter-select option,
.multi-filter-select option {
    color: #132033 !important;
    background-color: #FFFFFF !important;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .filter-select option:checked,
#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) select option:checked,
.filter-select option:checked,
.multi-filter-select option:checked {
    color: #061f31 !important;
    background-color: #DFF7F2 !important;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .custom-searchable-dropdown .dropdown-list {
    width: min(360px, 90vw) !important;
    margin-top: 8px;
    border-radius: 8px;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .header-refresh-data-btn {
    align-self: center;
    justify-self: end;
    min-height: 50px;
    height: 50px;
    padding: 0 18px !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 24px rgba(15, 159, 143, 0.24) !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) #sidebar-toggle-btn,
#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .icon-action-btn {
    position: static !important;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 8px !important;
}

#dashboard-header.mc-mode:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .filter-panel-top {
    grid-template-columns:
        minmax(180px, 0.7fr)
        minmax(300px, 1.4fr)
        minmax(150px, 0.55fr)
        minmax(150px, 0.55fr);
}

@media (max-width: 1500px) {
    #dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) {
        grid-template-columns: 1fr;
    }

    #dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .filter-panel-top {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .header-refresh-data-btn {
        grid-column: auto;
        justify-self: end;
    }
}

@media (max-width: 1180px) {
    #dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) {
        grid-template-columns: 1fr;
        align-items: stretch !important;
        min-height: 0 !important;
    }

    #dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .filter-panel-top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .header-refresh-data-btn {
        grid-column: auto;
        justify-self: start;
    }
}

@media (max-width: 720px) {
    #dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) {
        padding: 16px !important;
    }

    #dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .filter-panel-top {
        grid-template-columns: 1fr;
    }

    #dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .header-title h2 {
        font-size: 22px !important;
    }
}

/* Compact Meta-style header pass: smaller controls, reserved action area. */
#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    min-height: 104px !important;
    padding: 14px 30px 16px !important;
    overflow: visible;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .header-left {
    flex: 0 1 540px;
    max-width: 540px;
    gap: 14px;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .header-title h2 {
    font-size: 24px !important;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) #header-site-name {
    font-size: 10px !important;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) #dashboard-debug-status {
    max-width: 430px;
    margin-top: 7px;
    font-size: 10px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .filter-panel-top {
    flex: 1 1 auto;
    display: grid !important;
    grid-template-columns:
        minmax(155px, 1.25fr)
        minmax(135px, 1fr)
        minmax(128px, 0.92fr)
        minmax(128px, 0.92fr)
        minmax(132px, 0.88fr)
        minmax(132px, 0.88fr);
    gap: 10px !important;
    min-width: 0;
    width: auto;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .filter-item label {
    margin-bottom: 6px !important;
    font-size: 9.5px !important;
    font-weight: 850;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .filter-select,
#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .custom-searchable-dropdown input,
#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .date-input,
#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .compact-multi-button {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 10px !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    border-radius: 7px !important;
    box-shadow: 0 6px 14px rgba(2, 8, 23, 0.1), inset 0 1px 0 rgba(255,255,255,0.82) !important;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .custom-searchable-dropdown {
    width: 100% !important;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .compact-multi-button {
    gap: 6px;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .compact-multi-button i {
    font-size: 11px;
}

#dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .header-refresh-data-btn {
    position: relative !important;
    flex: 0 0 148px;
    width: 148px;
    height: 46px !important;
    min-height: 46px !important;
    justify-content: center;
    padding: 0 12px !important;
    margin-left: 0 !important;
    font-size: 11.5px !important;
    z-index: 2;
}

@media (min-width: 1501px) {
    #dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .filter-panel-top {
        max-width: calc(100vw - 760px);
    }
}

@media (max-width: 1500px) {
    #dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) {
        flex-wrap: wrap;
        align-items: flex-start !important;
    }

    #dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .header-left {
        flex: 1 1 100%;
        max-width: none;
    }

    #dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .filter-panel-top {
        flex: 1 1 calc(100% - 170px);
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .header-refresh-data-btn {
        flex: 0 0 148px;
        margin-top: 17px !important;
    }
}

/* Harmonized chart language for 2G, 4G, 5G, and MC analytics pages. */
#page-2g-mc .dashboard-grid,
#page-2g-site .dashboard-grid,
#page-2g-blocking .dashboard-grid,
#page-4g .dashboard-grid,
#page-5g .dashboard-grid,
#page-mc .dashboard-grid {
    gap: 18px !important;
}

#page-2g-mc .vis-row,
#page-2g-site .vis-row,
#page-2g-blocking .vis-row,
#page-4g .vis-row,
#page-5g .vis-row,
#page-mc .vis-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px !important;
}

#page-2g-mc .vis-row-three,
#page-2g-site .vis-row-three,
#page-2g-blocking .vis-row-three,
#page-4g .vis-row-three,
#page-5g .vis-row-three {
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    align-items: start !important;
    gap: 18px !important;
}

#page-4g .vis-row-four.kpi-equal-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(230px, 1fr));
    align-items: stretch !important;
    gap: 18px !important;
    margin-bottom: 18px !important;
}

#page-4g .vis-row-four.kpi-equal-grid .panel-card {
    min-height: 310px !important;
}

#page-4g .vis-row-four.kpi-equal-grid .chart-container {
    height: 230px !important;
    min-height: 230px !important;
}

#page-2g-mc .panel-card,
#page-2g-site .panel-card,
#page-2g-blocking .panel-card,
#page-4g .panel-card,
#page-5g .panel-card,
#page-mc .panel-card,
#page-4g .neighbor-vlr-card,
#page-4g .neighbor-map-card {
    border: 1px solid #E3EAF2 !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
    box-shadow: 0 8px 22px rgba(15, 32, 51, 0.065) !important;
    padding: 14px !important;
    overflow: hidden;
}

#page-2g-mc .panel-card:hover,
#page-2g-site .panel-card:hover,
#page-2g-blocking .panel-card:hover,
#page-4g .panel-card:hover,
#page-5g .panel-card:hover,
#page-mc .panel-card:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 12px 28px rgba(15, 32, 51, 0.09) !important;
}

#page-2g-mc .panel-header,
#page-2g-site .panel-header,
#page-2g-blocking .panel-header,
#page-4g .panel-header,
#page-5g .panel-header,
#page-mc .panel-header {
    min-height: 38px !important;
    margin: -14px -14px 12px !important;
    padding: 10px 13px !important;
    border-bottom: 1px solid #E8EEF5 !important;
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FBFE 100%) !important;
    border-radius: 8px 8px 0 0 !important;
}

#page-2g-mc .panel-header h3,
#page-2g-site .panel-header h3,
#page-2g-blocking .panel-header h3,
#page-4g .panel-header h3,
#page-5g .panel-header h3,
#page-mc .panel-header h3 {
    color: #16304B !important;
    font-size: 12.5px !important;
    line-height: 1.25 !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
}

#page-2g-mc .badge,
#page-2g-site .badge,
#page-2g-blocking .badge,
#page-4g .badge,
#page-5g .badge,
#page-mc .badge {
    border-radius: 999px !important;
    padding: 4px 8px !important;
    font-size: 9px !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
}

#page-2g-mc .chart-container,
#page-2g-site .chart-container,
#page-2g-blocking .chart-container,
#page-4g .chart-container,
#page-5g .chart-container,
#page-mc .chart-container {
    height: 250px !important;
    min-height: 250px !important;
    padding: 8px !important;
    border: 1px solid #ECF1F6 !important;
    border-radius: 8px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(249,251,254,0.98)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.96) !important;
}

#page-mc .chart-container {
    height: 270px !important;
    min-height: 270px !important;
}

#page-4g .vis-row.equal .chart-container,
#page-5g .vis-row.equal .chart-container,
#page-mc .vis-row.equal .chart-container {
    height: 280px !important;
    min-height: 280px !important;
}

#page-4g .neighbor-map-container,
#page-4g #neighbor-map-element {
    border-radius: 8px !important;
}

#page-4g .neighbor-story-layout {
    display: grid !important;
    grid-template-columns: minmax(430px, 0.82fr) minmax(560px, 1.18fr);
    gap: 16px !important;
    align-items: stretch !important;
    margin-bottom: 18px !important;
}

#page-4g .neighbor-story-stack {
    display: grid !important;
    grid-template-rows: minmax(330px, auto) minmax(330px, auto);
    gap: 16px !important;
    min-width: 0;
}

#page-4g .neighbor-story-layout .panel-card {
    margin: 0 !important;
}

#page-4g .neighbor-traffic-card,
#page-4g .neighbor-vlr-card,
#page-4g .neighbor-map-card {
    min-height: 330px !important;
}

#page-4g .neighbor-traffic-card .chart-container {
    height: 205px !important;
    min-height: 205px !important;
}

#page-4g .neighbor-vlr-card .chart-container {
    height: 265px !important;
    min-height: 265px !important;
}

#page-4g .neighbor-map-card {
    min-height: 676px !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

#page-4g .neighbor-map-card.map-expanded {
    grid-column: 1 / -1 !important;
    min-height: 760px !important;
}

#page-4g .neighbor-map-card.map-fullscreen {
    position: fixed !important;
    inset: 10px !important;
    z-index: 9998 !important;
    min-height: auto !important;
    border-radius: 10px !important;
}

#page-4g .neighbor-map-card.map-minimized .neighbor-map-container,
#page-4g .neighbor-map-card.map-minimized .neighbor-map-tools,
#page-4g .neighbor-map-card.map-minimized .neighbor-site-ranking,
#page-4g .neighbor-map-card.map-minimized .neighbor-rf-panel {
    display: none !important;
}

#page-4g .neighbor-map-card.map-minimized {
    min-height: 48px !important;
}

#page-4g .neighbor-map-card.map-fullscreen .neighbor-map-container,
#page-4g .neighbor-map-card.map-expanded .neighbor-map-container {
    min-height: 650px !important;
}

#page-4g .neighbor-map-tools {
    display: grid !important;
    grid-template-columns: auto 1fr;
    gap: 8px !important;
    align-items: start !important;
    margin-bottom: 8px !important;
}

#page-4g .neighbor-tool-row.display {
    display: flex !important;
    gap: 5px !important;
    flex-wrap: wrap;
}

#page-4g .map-tool-btn {
    width: 30px !important;
    height: 30px !important;
    border: 1px solid #CBD8E6 !important;
    border-radius: 7px !important;
    background: #FFFFFF !important;
    color: #17324D !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    cursor: pointer;
}

#page-4g .map-tool-btn.active {
    border-color: #0F9F8A !important;
    background: #E8F8F5 !important;
    color: #047867 !important;
}

#page-4g .neighbor-target-panel {
    display: grid !important;
    grid-template-columns: 82px 82px minmax(120px, 1fr) repeat(4, auto);
    gap: 6px !important;
    min-width: 0;
}

#page-4g #neighbor-target-remark {
    display: none !important;
}

#page-4g .neighbor-target-panel input,
#page-4g .neighbor-target-panel button,
#page-4g .neighbor-rf-panel button {
    height: 30px !important;
    border: 1px solid #D7E2EE !important;
    border-radius: 7px !important;
    font-size: 11px !important;
    font-weight: 750 !important;
}

#page-4g .neighbor-target-panel input {
    padding: 0 8px !important;
    min-width: 0;
}

#page-4g .neighbor-target-panel button,
#page-4g .neighbor-rf-panel button {
    padding: 0 9px !important;
    background: #F8FBFE !important;
    color: #17324D !important;
    cursor: pointer;
}

#page-4g .neighbor-map-message {
    grid-column: 1 / -1;
    min-height: 16px;
    color: #64748B;
    font-size: 11px;
    font-weight: 750;
}

#page-4g .neighbor-map-message.error {
    color: #B91C1C;
}

#page-4g .neighbor-map-message.success {
    color: #047857;
}

#page-4g .neighbor-measure-info {
    display: none;
    position: absolute;
    left: 26px;
    top: 108px;
    z-index: 760;
    width: 310px;
    border: 1px solid rgba(15, 23, 42, 0.24);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.22);
    overflow: hidden;
}

#page-4g .neighbor-measure-info.active {
    display: block;
}

#page-4g .neighbor-measure-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 28px;
    padding: 0 9px;
    background: #F1F5F9;
    color: #334155;
    font-size: 12px;
    font-weight: 850;
}

#page-4g .neighbor-measure-close {
    border: 0;
    background: transparent;
    color: #64748B;
    font-size: 15px;
    cursor: pointer;
}

#page-4g .neighbor-measure-body {
    padding: 10px 12px;
    color: #0F172A;
    font-size: 12px;
}

#page-4g .neighbor-measure-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 8px;
    padding: 3px 0;
}

#page-4g .neighbor-measure-row span:first-child {
    color: #475569;
    text-align: right;
}

#page-4g .neighbor-measure-row b {
    color: #0F172A;
}

#page-4g .neighbor-measure-actions {
    display: flex;
    gap: 8px;
    padding: 8px 12px 10px;
}

#page-4g .neighbor-measure-actions button {
    flex: 1;
    height: 28px;
    border: 1px solid #CBD8E6;
    border-radius: 6px;
    background: #FFFFFF;
    color: #17324D;
    font-size: 11px;
    font-weight: 850;
    cursor: pointer;
}

#page-4g .neighbor-site-ranking {
    margin-top: 8px;
    max-height: 150px;
    overflow: auto;
    border: 1px solid #E4ECF5;
    border-radius: 8px;
    background: #FBFDFF;
}

#page-4g .neighbor-site-ranking:empty {
    display: none;
}

#page-4g .neighbor-site-ranking table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10.5px;
}

#page-4g .neighbor-site-ranking th,
#page-4g .neighbor-site-ranking td {
    padding: 6px 7px;
    border-bottom: 1px solid #E8EEF5;
    text-align: left;
    white-space: nowrap;
}

#page-4g .neighbor-site-ranking tr.active {
    background: #E8F8F5;
}

#page-4g .neighbor-site-ranking button {
    border: 1px solid #BCD3E8;
    border-radius: 6px;
    background: #FFFFFF;
    color: #17324D;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

#page-4g .neighbor-rf-panel {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 8px;
    color: #64748B;
    font-size: 11px;
    font-weight: 750;
}

#page-4g .neighbor-elevation-panel {
    display: none;
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 54px;
    z-index: 780;
    border: 1px solid rgba(15, 23, 42, 0.42);
    border-radius: 8px;
    background: #FFFFFF;
    padding: 0;
    box-shadow: 0 -12px 34px rgba(15, 23, 42, 0.28);
    overflow: hidden;
}

#page-4g .neighbor-elevation-panel.active {
    display: block;
}

#page-4g .neighbor-elevation-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 10px;
    background: #2F343B;
    color: #F8FAFC;
    font-size: 11px;
}

#page-4g .neighbor-elevation-titlebar b {
    display: block;
    font-size: 12px;
}

#page-4g .neighbor-elevation-titlebar span {
    color: #CBD5E1;
}

#page-4g #neighbor-elevation-close {
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 6px;
    background: rgba(255,255,255,0.12);
    color: #FFFFFF;
    font-size: 16px;
    cursor: pointer;
}

#page-4g .neighbor-elevation-summary.google-earth {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 5px 10px;
    background: #303030;
    color: #DDE3EA;
    font-size: 10.5px;
    font-weight: 700;
    margin-bottom: 0;
}

#page-4g .neighbor-elevation-summary.google-earth b {
    color: #FFFFFF;
}

#page-4g .neighbor-elevation-chart {
    width: 100%;
    height: 240px;
    border: 0;
    border-radius: 0;
    background: #FFFFFF;
    display: block;
}

#page-4g .neighbor-elevation-note {
    padding: 5px 10px 7px;
    margin-top: 0;
    color: #64748B;
    font-size: 10.5px;
    font-weight: 650;
    background: #FFFFFF;
}

#neighbor-map-element.capture-active {
    cursor: crosshair !important;
}

#neighbor-map-element.measure-active {
    cursor: crosshair !important;
}

.neighbor-target-marker {
    background: #EF4444;
    border: 3px solid #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.28), 0 8px 18px rgba(15, 23, 42, 0.32);
}

.neighbor-measure-handle {
    width: 14px;
    height: 14px;
    border: 2px solid #FFFFFF;
    border-radius: 999px;
    background: #FACC15;
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.45), 0 6px 14px rgba(15, 23, 42, 0.28);
}

.neighbor-measure-move-handle {
    width: 16px;
    height: 16px;
    border: 2px solid #FFFFFF;
    border-radius: 4px;
    background: #14B8A6;
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.42), 0 6px 14px rgba(15, 23, 42, 0.28);
    transform: rotate(45deg);
}

.neighbor-target-tooltip,
.neighbor-measure-tooltip {
    background: rgba(15, 23, 42, 0.86);
    border: 0;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 800;
}

.neighbor-measure-tooltip {
    background: rgba(15, 118, 110, 0.94);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.25);
}

.neighbor-line-elevation-btn {
    margin-top: 7px;
    height: 26px;
    border: 1px solid #BFD3EA;
    border-radius: 6px;
    background: #F8FBFE;
    color: #17324D;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

#page-4g .neighbor-map-card .neighbor-map-container {
    flex: 1 1 auto !important;
    min-height: 590px !important;
    height: auto !important;
}

#page-4g .neighbor-map-card #neighbor-map-element {
    min-height: 590px !important;
    height: 100% !important;
}

#page-4g .neighbor-sector-summary {
    margin-top: 10px !important;
    padding-top: 9px !important;
}

#page-4g .neighbor-sector-row {
    gap: 10px !important;
    min-height: 24px !important;
}

#page-4g .neighbor-sector-label {
    flex: 0 0 58px !important;
    font-size: 10px !important;
}

#page-4g .neighbor-sector-chip {
    padding: 4px 8px !important;
    font-size: 10px !important;
    border-radius: 6px !important;
}

@media (max-width: 1180px) {
    #page-4g .neighbor-story-layout {
        grid-template-columns: 1fr !important;
    }

    #page-4g .neighbor-story-stack {
        grid-template-rows: auto !important;
    }

    #page-4g .neighbor-map-card,
    #page-4g .neighbor-map-card .neighbor-map-container,
    #page-4g .neighbor-map-card #neighbor-map-element {
        min-height: 430px !important;
    }

    #page-4g .neighbor-map-tools {
        grid-template-columns: 1fr !important;
    }

    #page-4g .neighbor-target-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #page-2g-mc .vis-row,
    #page-2g-site .vis-row,
    #page-2g-blocking .vis-row,
    #page-4g .vis-row,
    #page-5g .vis-row,
    #page-mc .vis-row,
    #page-4g .vis-row-four.kpi-equal-grid,
    #page-2g-mc .vis-row-three,
    #page-2g-site .vis-row-three,
    #page-2g-blocking .vis-row-three,
    #page-4g .vis-row-three,
    #page-5g .vis-row-three {
        grid-template-columns: 1fr !important;
    }
}

@media (min-width: 1181px) and (max-width: 1560px) {
    #page-4g .vis-row-four.kpi-equal-grid {
        grid-template-columns: repeat(2, minmax(300px, 1fr)) !important;
    }
}

/* Neon executive score cards for OMC, 2G, 4G, 5G, Hourly, and MC sheets */
:is(
    #page-ows-alarms,
    #page-2g-mc,
    #page-2g-site,
    #page-2g-blocking,
    #page-4g,
    #page-5g,
    #page-hourly-4g,
    #page-hourly-5g,
    #page-hourly-mc,
    #page-mc
) .kpi-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch !important;
}

:is(
    #page-ows-alarms,
    #page-2g-mc,
    #page-2g-site,
    #page-2g-blocking,
    #page-4g,
    #page-5g,
    #page-hourly-4g,
    #page-hourly-5g,
    #page-hourly-mc,
    #page-mc
) .kpi-row > .kpi-card,
#page-ows-alarms .ows-command-left .kpi-card {
    --score-accent: #22D3EE;
    --score-accent-rgb: 34, 211, 238;
    position: relative !important;
    min-height: 118px !important;
    padding: 11px 12px 13px !important;
    border: 1px solid rgba(var(--score-accent-rgb), 0.58) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    color: #E8F7FF !important;
    background:
        radial-gradient(circle at 78% 18%, rgba(var(--score-accent-rgb), 0.22), transparent 34%),
        linear-gradient(180deg, rgba(29, 48, 70, 0.92), rgba(7, 18, 32, 0.96)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 14px rgba(var(--score-accent-rgb), 0.16),
        0 0 0 1px rgba(var(--score-accent-rgb), 0.12),
        0 10px 24px rgba(2, 8, 23, 0.28) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    isolation: isolate !important;
}

:is(
    #page-ows-alarms,
    #page-2g-mc,
    #page-2g-site,
    #page-2g-blocking,
    #page-4g,
    #page-5g,
    #page-hourly-4g,
    #page-hourly-5g,
    #page-hourly-mc,
    #page-mc
) .kpi-row > .kpi-card.success,
#page-ows-alarms .ows-command-left .kpi-card.success {
    --score-accent: #22C55E;
    --score-accent-rgb: 34, 197, 94;
}

:is(
    #page-ows-alarms,
    #page-2g-mc,
    #page-2g-site,
    #page-2g-blocking,
    #page-4g,
    #page-5g,
    #page-hourly-4g,
    #page-hourly-5g,
    #page-hourly-mc,
    #page-mc
) .kpi-row > .kpi-card.warning,
#page-ows-alarms .ows-command-left .kpi-card.warning {
    --score-accent: #F59E0B;
    --score-accent-rgb: 245, 158, 11;
}

:is(
    #page-ows-alarms,
    #page-2g-mc,
    #page-2g-site,
    #page-2g-blocking,
    #page-4g,
    #page-5g,
    #page-hourly-4g,
    #page-hourly-5g,
    #page-hourly-mc,
    #page-mc
) .kpi-row > .kpi-card.danger,
#page-ows-alarms .ows-command-left .kpi-card.danger {
    --score-accent: #EF4444;
    --score-accent-rgb: 239, 68, 68;
}

:is(
    #page-ows-alarms,
    #page-2g-mc,
    #page-2g-site,
    #page-2g-blocking,
    #page-4g,
    #page-5g,
    #page-hourly-4g,
    #page-hourly-5g,
    #page-hourly-mc,
    #page-mc
) .kpi-row > .kpi-card.info,
:is(
    #page-ows-alarms,
    #page-2g-mc,
    #page-2g-site,
    #page-2g-blocking,
    #page-4g,
    #page-5g,
    #page-hourly-4g,
    #page-hourly-5g,
    #page-hourly-mc,
    #page-mc
) .kpi-row > .kpi-card.cyan,
#page-ows-alarms .ows-command-left .kpi-card.info {
    --score-accent: #38BDF8;
    --score-accent-rgb: 56, 189, 248;
}

:is(
    #page-ows-alarms,
    #page-2g-mc,
    #page-2g-site,
    #page-2g-blocking,
    #page-4g,
    #page-5g,
    #page-hourly-4g,
    #page-hourly-5g,
    #page-hourly-mc,
    #page-mc
) .kpi-row > .kpi-card::before,
#page-ows-alarms .ows-command-left .kpi-card::before {
    content: "" !important;
    position: absolute !important;
    left: 6px !important;
    right: 6px !important;
    bottom: 3px !important;
    top: auto !important;
    width: auto !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: var(--score-accent) !important;
    box-shadow: 0 0 14px rgba(var(--score-accent-rgb), 0.88) !important;
    opacity: 0.96 !important;
    z-index: 2 !important;
}

:is(
    #page-ows-alarms,
    #page-2g-mc,
    #page-2g-site,
    #page-2g-blocking,
    #page-4g,
    #page-5g,
    #page-hourly-4g,
    #page-hourly-5g,
    #page-hourly-mc,
    #page-mc
) .kpi-row > .kpi-card::after,
#page-ows-alarms .ows-command-left .kpi-card::after {
    content: "" !important;
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 19px !important;
    top: auto !important;
    width: auto !important;
    height: 27px !important;
    border: 0 !important;
    border-radius: 0 !important;
    opacity: 0.72 !important;
    background:
        linear-gradient(135deg, transparent 0 12%, rgba(var(--score-accent-rgb), 0.82) 13% 15%, transparent 16% 28%, rgba(var(--score-accent-rgb), 0.62) 29% 31%, transparent 32% 43%, rgba(var(--score-accent-rgb), 0.82) 44% 46%, transparent 47% 60%, rgba(var(--score-accent-rgb), 0.64) 61% 63%, transparent 64% 100%),
        linear-gradient(0deg, rgba(var(--score-accent-rgb), 0.18), transparent) !important;
    filter: drop-shadow(0 0 6px rgba(var(--score-accent-rgb), 0.45)) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

:is(
    #page-ows-alarms,
    #page-2g-mc,
    #page-2g-site,
    #page-2g-blocking,
    #page-4g,
    #page-5g,
    #page-hourly-4g,
    #page-hourly-5g,
    #page-hourly-mc,
    #page-mc
) .kpi-row > .kpi-card .kpi-header,
#page-ows-alarms .ows-command-left .kpi-card .kpi-header {
    position: relative !important;
    z-index: 3 !important;
    min-height: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
}

:is(
    #page-ows-alarms,
    #page-2g-mc,
    #page-2g-site,
    #page-2g-blocking,
    #page-4g,
    #page-5g,
    #page-hourly-4g,
    #page-hourly-5g,
    #page-hourly-mc,
    #page-mc
) .kpi-row > .kpi-card .kpi-title,
#page-ows-alarms .ows-command-left .kpi-card .kpi-title {
    max-width: calc(100% - 36px) !important;
    color: rgba(203, 213, 225, 0.92) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    line-height: 1.15 !important;
}

:is(
    #page-ows-alarms,
    #page-2g-mc,
    #page-2g-site,
    #page-2g-blocking,
    #page-4g,
    #page-5g,
    #page-hourly-4g,
    #page-hourly-5g,
    #page-hourly-mc,
    #page-mc
) .kpi-row > .kpi-card .kpi-icon,
#page-ows-alarms .ows-command-left .kpi-card .kpi-icon {
    position: relative !important;
    z-index: 3 !important;
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: rgba(var(--score-accent-rgb), 0.12) !important;
    color: var(--score-accent) !important;
    box-shadow: 0 0 12px rgba(var(--score-accent-rgb), 0.22) !important;
    font-size: 17px !important;
}

:is(
    #page-ows-alarms,
    #page-2g-mc,
    #page-2g-site,
    #page-2g-blocking,
    #page-4g,
    #page-5g,
    #page-hourly-4g,
    #page-hourly-5g,
    #page-hourly-mc,
    #page-mc
) .kpi-row > .kpi-card .kpi-value,
#page-ows-alarms .ows-command-left .kpi-card .kpi-value {
    position: relative !important;
    z-index: 3 !important;
    margin: 6px 0 2px !important;
    padding: 0 !important;
    color: #E5E7EB !important;
    font-size: clamp(21px, 2vw, 31px) !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    word-break: break-word !important;
}

:is(
    #page-ows-alarms,
    #page-2g-mc,
    #page-2g-site,
    #page-2g-blocking,
    #page-4g,
    #page-5g,
    #page-hourly-4g,
    #page-hourly-5g,
    #page-hourly-mc,
    #page-mc
) .kpi-row > .kpi-card .kpi-footer,
:is(
    #page-ows-alarms,
    #page-2g-mc,
    #page-2g-site,
    #page-2g-blocking,
    #page-4g,
    #page-5g,
    #page-hourly-4g,
    #page-hourly-5g,
    #page-hourly-mc,
    #page-mc
) .kpi-row > .kpi-card .kpi-footer span,
#page-ows-alarms .ows-command-left .kpi-card .kpi-footer,
#page-ows-alarms .ows-command-left .kpi-card .kpi-footer span {
    position: relative !important;
    z-index: 3 !important;
    color: var(--score-accent) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin-bottom: 31px !important;
}

:is(
    #page-ows-alarms,
    #page-2g-mc,
    #page-2g-site,
    #page-2g-blocking,
    #page-4g,
    #page-5g,
    #page-hourly-4g,
    #page-hourly-5g,
    #page-hourly-mc,
    #page-mc
) .kpi-row > .kpi-card:hover,
#page-ows-alarms .ows-command-left .kpi-card:hover {
    transform: translateY(-1px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 22px rgba(var(--score-accent-rgb), 0.22),
        0 14px 30px rgba(2, 8, 23, 0.34) !important;
}

@media (max-width: 760px) {
    :is(
        #page-ows-alarms,
        #page-2g-mc,
        #page-2g-site,
        #page-2g-blocking,
        #page-4g,
        #page-5g,
        #page-hourly-4g,
        #page-hourly-5g,
        #page-hourly-mc,
        #page-mc
    ) .kpi-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
}

@media (max-width: 480px) {
    :is(
        #page-ows-alarms,
        #page-2g-mc,
        #page-2g-site,
        #page-2g-blocking,
        #page-4g,
        #page-5g,
        #page-hourly-4g,
        #page-hourly-5g,
        #page-hourly-mc,
        #page-mc
    ) .kpi-row {
        grid-template-columns: 1fr !important;
    }
}

:is(
    #page-ows-alarms,
    #page-2g-mc,
    #page-2g-site,
    #page-2g-blocking,
    #page-4g,
    #page-5g,
    #page-hourly-4g,
    #page-hourly-5g,
    #page-hourly-mc,
    #page-mc
) .kpi-row > .kpi-card .score-card-art,
#page-ows-alarms .ows-command-left .kpi-card .score-card-art {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 11px;
    height: 38px;
    color: var(--score-accent);
    opacity: 0.96;
    z-index: 1;
    pointer-events: none;
}

:is(
    #page-ows-alarms,
    #page-2g-mc,
    #page-2g-site,
    #page-2g-blocking,
    #page-4g,
    #page-5g,
    #page-hourly-4g,
    #page-hourly-5g,
    #page-hourly-mc,
    #page-mc
) .kpi-row > .kpi-card .score-card-art svg,
#page-ows-alarms .ows-command-left .kpi-card .score-card-art svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

:is(
    #page-ows-alarms,
    #page-2g-mc,
    #page-2g-site,
    #page-2g-blocking,
    #page-4g,
    #page-5g,
    #page-hourly-4g,
    #page-hourly-5g,
    #page-hourly-mc,
    #page-mc
) .kpi-row > .kpi-card .score-card-line,
#page-ows-alarms .ows-command-left .kpi-card .score-card-line {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 5px currentColor);
}

:is(
    #page-ows-alarms,
    #page-2g-mc,
    #page-2g-site,
    #page-2g-blocking,
    #page-4g,
    #page-5g,
    #page-hourly-4g,
    #page-hourly-5g,
    #page-hourly-mc,
    #page-mc
) .kpi-row > .kpi-card .score-card-fill,
#page-ows-alarms .ows-command-left .kpi-card .score-card-fill {
    fill: currentColor;
    opacity: 0.14;
}

:is(
    #page-ows-alarms,
    #page-2g-mc,
    #page-2g-site,
    #page-2g-blocking,
    #page-4g,
    #page-5g,
    #page-hourly-4g,
    #page-hourly-5g,
    #page-hourly-mc,
    #page-mc
) .kpi-row > .kpi-card .score-card-art.bars .score-card-line,
#page-ows-alarms .ows-command-left .kpi-card .score-card-art.bars .score-card-line {
    stroke-width: 3.2;
}

/* Scorecard visual refresh v18: applies to 2G, 4G, 5G, Hourly, MC, and OMC Netdrone. */
.page-tab .kpi-row > .kpi-card,
#page-ows-alarms .ows-command-left .kpi-card,
.tech-kpi-strip > .tech-summary-card {
    --score-accent: #2ee7d1;
    --score-accent-rgb: 46, 231, 209;
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;
    min-height: 112px;
    padding: 18px 18px 42px !important;
    color: #f7fbff !important;
    border: 1px solid rgba(var(--score-accent-rgb), 0.42) !important;
    border-radius: 10px !important;
    background:
        radial-gradient(circle at 88% 12%, rgba(var(--score-accent-rgb), 0.24), transparent 32%),
        linear-gradient(145deg, rgba(22, 40, 63, 0.98), rgba(8, 20, 34, 0.98)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -4px 16px rgba(var(--score-accent-rgb), 0.16),
        0 12px 30px rgba(3, 14, 27, 0.18) !important;
}

.page-tab .kpi-row > .kpi-card::before,
#page-ows-alarms .ows-command-left .kpi-card::before,
.tech-kpi-strip > .tech-summary-card::before {
    content: "" !important;
    position: absolute !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 7px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, transparent, rgba(var(--score-accent-rgb), 0.9), transparent) !important;
    box-shadow: 0 0 18px rgba(var(--score-accent-rgb), 0.65) !important;
    z-index: 2 !important;
}

.page-tab .kpi-row > .kpi-card::after,
#page-ows-alarms .ows-command-left .kpi-card::after,
.tech-kpi-strip > .tech-summary-card::after {
    content: none !important;
    display: none !important;
}

.page-tab .kpi-row > .kpi-card.success,
.tech-kpi-strip > .tech-summary-card.tone-teal,
.tech-kpi-strip > .tech-summary-card.tone-cyan {
    --score-accent: #34e27a;
    --score-accent-rgb: 52, 226, 122;
}

.page-tab .kpi-row > .kpi-card.info,
.tech-kpi-strip > .tech-summary-card.tone-blue,
.tech-kpi-strip > .tech-summary-card.tone-indigo {
    --score-accent: #2aa8ff;
    --score-accent-rgb: 42, 168, 255;
}

.page-tab .kpi-row > .kpi-card.warning,
.tech-kpi-strip > .tech-summary-card.tone-gold {
    --score-accent: #ffb627;
    --score-accent-rgb: 255, 182, 39;
}

.page-tab .kpi-row > .kpi-card.danger {
    --score-accent: #ff4d6d;
    --score-accent-rgb: 255, 77, 109;
}

.tech-kpi-strip > .tech-summary-card.tone-slate {
    --score-accent: #26d7c8;
    --score-accent-rgb: 38, 215, 200;
}

.page-tab .kpi-row > .kpi-card .kpi-header,
.page-tab .kpi-row > .kpi-card .kpi-title,
.page-tab .kpi-row > .kpi-card .kpi-icon,
.page-tab .kpi-row > .kpi-card .kpi-value,
.page-tab .kpi-row > .kpi-card .kpi-footer,
#page-ows-alarms .ows-command-left .kpi-card .kpi-header,
#page-ows-alarms .ows-command-left .kpi-card .kpi-title,
#page-ows-alarms .ows-command-left .kpi-card .kpi-value,
#page-ows-alarms .ows-command-left .kpi-card .kpi-footer,
.tech-kpi-strip > .tech-summary-card .summary-label,
.tech-kpi-strip > .tech-summary-card strong,
.tech-kpi-strip > .tech-summary-card small,
.tech-kpi-strip > .tech-summary-card .summary-ring {
    position: relative !important;
    z-index: 4 !important;
}

.page-tab .kpi-row > .kpi-card .kpi-title,
.tech-kpi-strip > .tech-summary-card .summary-label {
    color: rgba(231, 242, 255, 0.78) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
}

.page-tab .kpi-row > .kpi-card .kpi-value,
.tech-kpi-strip > .tech-summary-card strong {
    display: block !important;
    margin-top: 4px !important;
    color: #ffffff !important;
    font-size: clamp(24px, 2vw, 36px) !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    text-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important;
}

.page-tab .kpi-row > .kpi-card .kpi-footer,
.tech-kpi-strip > .tech-summary-card small {
    color: rgba(209, 230, 248, 0.8) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

.tech-kpi-strip > .tech-summary-card .summary-ring {
    position: absolute !important;
    top: 12px !important;
    right: 14px !important;
    width: auto !important;
    min-width: 42px !important;
    height: 24px !important;
    padding: 0 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(var(--score-accent-rgb), 0.62) !important;
    border-radius: 999px !important;
    color: #ffffff !important;
    background: rgba(var(--score-accent-rgb), 0.18) !important;
    box-shadow: 0 0 16px rgba(var(--score-accent-rgb), 0.2) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
}

.page-tab .kpi-row > .kpi-card .score-card-art,
#page-ows-alarms .ows-command-left .kpi-card .score-card-art,
.tech-kpi-strip > .tech-summary-card .score-card-art {
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 14px !important;
    height: 34px !important;
    color: var(--score-accent) !important;
    opacity: 0.96 !important;
    z-index: 3 !important;
    pointer-events: none !important;
}

.page-tab .kpi-row > .kpi-card .score-card-art svg,
#page-ows-alarms .ows-command-left .kpi-card .score-card-art svg,
.tech-kpi-strip > .tech-summary-card .score-card-art svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.page-tab .kpi-row > .kpi-card .score-card-line,
#page-ows-alarms .ows-command-left .kpi-card .score-card-line,
.tech-kpi-strip > .tech-summary-card .score-card-line {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    filter: drop-shadow(0 0 5px currentColor) !important;
}

.page-tab .kpi-row > .kpi-card .score-card-fill,
#page-ows-alarms .ows-command-left .kpi-card .score-card-fill,
.tech-kpi-strip > .tech-summary-card .score-card-fill {
    fill: currentColor !important;
    opacity: 0.16 !important;
}

@media (max-width: 768px) {
    .page-tab .kpi-row > .kpi-card,
    #page-ows-alarms .ows-command-left .kpi-card,
    .tech-kpi-strip > .tech-summary-card {
        min-height: 100px;
        padding: 14px 14px 38px !important;
    }

    .page-tab .kpi-row > .kpi-card .kpi-value,
    .tech-kpi-strip > .tech-summary-card strong {
        font-size: 25px !important;
    }
}

/* Scorecard color palette v19: keep trend artwork, restore colorful executive tiles. */
.tech-kpi-strip > .tech-summary-card.tone-blue,
.page-tab .kpi-row > .kpi-card.info {
    --score-accent: #61a5ff;
    --score-accent-rgb: 97, 165, 255;
    background:
        radial-gradient(circle at 86% 16%, rgba(190, 220, 255, 0.36), transparent 24%),
        linear-gradient(135deg, #3f72f1 0%, #527fe5 52%, #6b7edb 100%) !important;
    border-color: rgba(143, 192, 255, 0.58) !important;
}

.tech-kpi-strip > .tech-summary-card.tone-teal,
.page-tab .kpi-row > .kpi-card.success {
    --score-accent: #48f28b;
    --score-accent-rgb: 72, 242, 139;
    background:
        radial-gradient(circle at 86% 16%, rgba(123, 255, 196, 0.28), transparent 26%),
        linear-gradient(135deg, #14b8a6 0%, #0ea99e 45%, #08c7bd 100%) !important;
    border-color: rgba(83, 255, 183, 0.6) !important;
}

.tech-kpi-strip > .tech-summary-card.tone-cyan,
.page-tab .kpi-row > .kpi-card.cyan {
    --score-accent: #e7fbff;
    --score-accent-rgb: 231, 251, 255;
    background:
        radial-gradient(circle at 86% 16%, rgba(255, 255, 255, 0.34), transparent 24%),
        linear-gradient(135deg, #32c7dd 0%, #21bad1 48%, #34d5e6 100%) !important;
    border-color: rgba(190, 250, 255, 0.68) !important;
}

.tech-kpi-strip > .tech-summary-card.tone-indigo {
    --score-accent: #d4dcff;
    --score-accent-rgb: 212, 220, 255;
    background:
        radial-gradient(circle at 86% 16%, rgba(255, 255, 255, 0.28), transparent 24%),
        linear-gradient(135deg, #617dd8 0%, #6f89dd 48%, #7894e2 100%) !important;
    border-color: rgba(194, 211, 255, 0.62) !important;
}

.tech-kpi-strip > .tech-summary-card.tone-slate {
    --score-accent: #dce8f8;
    --score-accent-rgb: 220, 232, 248;
    background:
        radial-gradient(circle at 86% 16%, rgba(255, 255, 255, 0.26), transparent 24%),
        linear-gradient(135deg, #8d98a6 0%, #98a2ad 46%, #85919e 100%) !important;
    border-color: rgba(236, 244, 255, 0.5) !important;
}

.tech-kpi-strip > .tech-summary-card.tone-gold,
.page-tab .kpi-row > .kpi-card.warning {
    --score-accent: #fff2bd;
    --score-accent-rgb: 255, 242, 189;
    background:
        radial-gradient(circle at 86% 16%, rgba(255, 255, 255, 0.3), transparent 24%),
        linear-gradient(135deg, #f59e0b 0%, #e0a11c 48%, #f2bf3e 100%) !important;
    border-color: rgba(255, 227, 128, 0.62) !important;
}

.page-tab .kpi-row > .kpi-card.danger {
    --score-accent: #ffe1e8;
    --score-accent-rgb: 255, 225, 232;
    background:
        radial-gradient(circle at 86% 16%, rgba(255, 255, 255, 0.3), transparent 24%),
        linear-gradient(135deg, #ef476f 0%, #e05275 48%, #ff6b6b 100%) !important;
    border-color: rgba(255, 198, 210, 0.66) !important;
}

.tech-kpi-strip > .tech-summary-card .score-card-line,
.page-tab .kpi-row > .kpi-card .score-card-line,
#page-ows-alarms .ows-command-left .kpi-card .score-card-line {
    stroke: var(--score-accent) !important;
    filter: drop-shadow(0 0 7px rgba(var(--score-accent-rgb), 0.76)) !important;
}

.tech-kpi-strip > .tech-summary-card .score-card-fill,
.page-tab .kpi-row > .kpi-card .score-card-fill,
#page-ows-alarms .ows-command-left .kpi-card .score-card-fill {
    opacity: 0.2 !important;
}

/* Central Java overview scorecards v21 */
#page-cj-overview .cj-kpi-card,
#page-cj-overview .cj-ring-card {
    --score-accent: #5eead4;
    --score-accent-rgb: 94, 234, 212;
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;
    color: #ffffff !important;
    border: 1px solid rgba(var(--score-accent-rgb), 0.46) !important;
    border-radius: 10px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -4px 16px rgba(var(--score-accent-rgb), 0.14),
        0 14px 30px rgba(4, 20, 32, 0.14) !important;
}

#page-cj-overview .cj-kpi-card {
    min-height: 126px !important;
    padding: 18px 18px 42px !important;
}

#page-cj-overview .cj-ring-card {
    display: grid !important;
    grid-template-columns: 86px 1fr !important;
    min-height: 112px !important;
    padding: 13px 14px 38px !important;
    background:
        radial-gradient(circle at 88% 14%, rgba(255, 255, 255, 0.22), transparent 25%),
        linear-gradient(135deg, #0f766e 0%, #14b8a6 100%) !important;
}

#page-cj-overview .cj-kpi-card::before,
#page-cj-overview .cj-ring-card::before {
    content: "" !important;
    position: absolute !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 7px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, transparent, rgba(var(--score-accent-rgb), 0.95), transparent) !important;
    box-shadow: 0 0 16px rgba(var(--score-accent-rgb), 0.58) !important;
    z-index: 3 !important;
}

#page-cj-overview .cj-kpi-card::after,
#page-cj-overview .cj-ring-card::after {
    content: none !important;
    display: none !important;
}

#page-cj-overview .cj-kpi-card:nth-child(1),
#page-cj-overview #cj-4g-rings .cj-ring-card:nth-child(1),
#page-cj-overview #cj-4g-rings .cj-ring-card:nth-child(2) {
    --score-accent: #67e8f9;
    --score-accent-rgb: 103, 232, 249;
    background:
        radial-gradient(circle at 88% 14%, rgba(255, 255, 255, 0.24), transparent 25%),
        linear-gradient(135deg, #159e9a 0%, #20c5d3 100%) !important;
}

#page-cj-overview .cj-kpi-card:nth-child(2),
#page-cj-overview #cj-5g-rings .cj-ring-card:nth-child(1),
#page-cj-overview #cj-5g-rings .cj-ring-card:nth-child(3) {
    --score-accent: #93c5fd;
    --score-accent-rgb: 147, 197, 253;
    background:
        radial-gradient(circle at 88% 14%, rgba(255, 255, 255, 0.24), transparent 25%),
        linear-gradient(135deg, #2563eb 0%, #38bdf8 100%) !important;
}

#page-cj-overview .cj-kpi-card:nth-child(3),
#page-cj-overview #cj-2g-rings .cj-ring-card:nth-child(1) {
    --score-accent: #2dd4bf;
    --score-accent-rgb: 45, 212, 191;
    background:
        radial-gradient(circle at 88% 14%, rgba(255, 255, 255, 0.2), transparent 25%),
        linear-gradient(135deg, #0f2742 0%, #0f766e 100%) !important;
}

#page-cj-overview .cj-kpi-card:nth-child(4),
#page-cj-overview #cj-4g-rings .cj-ring-card:nth-child(3),
#page-cj-overview #cj-5g-rings .cj-ring-card:nth-child(2) {
    --score-accent: #4ade80;
    --score-accent-rgb: 74, 222, 128;
    background:
        radial-gradient(circle at 88% 14%, rgba(255, 255, 255, 0.21), transparent 25%),
        linear-gradient(135deg, #047857 0%, #10b981 100%) !important;
}

#page-cj-overview .cj-kpi-card:nth-child(5),
#page-cj-overview #cj-4g-rings .cj-ring-card:nth-child(4),
#page-cj-overview #cj-4g-rings .cj-ring-card:nth-child(5),
#page-cj-overview #cj-4g-rings .cj-ring-card:nth-child(6) {
    --score-accent: #bfdbfe;
    --score-accent-rgb: 191, 219, 254;
    background:
        radial-gradient(circle at 88% 14%, rgba(255, 255, 255, 0.24), transparent 25%),
        linear-gradient(135deg, #1d4ed8 0%, #6387e8 100%) !important;
}

#page-cj-overview .cj-kpi-card:nth-child(6),
#page-cj-overview #cj-5g-rings .cj-ring-card:nth-child(5) {
    --score-accent: #fed7aa;
    --score-accent-rgb: 254, 215, 170;
    background:
        radial-gradient(circle at 88% 14%, rgba(255, 255, 255, 0.24), transparent 25%),
        linear-gradient(135deg, #b45309 0%, #f97316 100%) !important;
}

#page-cj-overview #cj-2g-rings .cj-ring-card:nth-child(2),
#page-cj-overview #cj-2g-rings .cj-ring-card:nth-child(3),
#page-cj-overview #cj-2g-rings .cj-ring-card:nth-child(4),
#page-cj-overview #cj-5g-rings .cj-ring-card:nth-child(4) {
    --score-accent: #e5edf5;
    --score-accent-rgb: 229, 237, 245;
    background:
        radial-gradient(circle at 88% 14%, rgba(255, 255, 255, 0.22), transparent 25%),
        linear-gradient(135deg, #64748b 0%, #94a3b8 100%) !important;
}

#page-cj-overview .cj-kpi-card span,
#page-cj-overview .cj-kpi-card strong,
#page-cj-overview .cj-kpi-card small,
#page-cj-overview .cj-ring-card b,
#page-cj-overview .cj-ring-card span,
#page-cj-overview .cj-ring {
    position: relative !important;
    z-index: 5 !important;
}

#page-cj-overview .cj-kpi-card span,
#page-cj-overview .cj-ring-card b {
    color: rgba(245, 250, 255, 0.9) !important;
    letter-spacing: 0 !important;
}

#page-cj-overview .cj-kpi-card strong {
    color: #ffffff !important;
    font-size: clamp(30px, 2.4vw, 40px) !important;
    text-shadow: 0 8px 22px rgba(0, 0, 0, 0.24) !important;
}

#page-cj-overview .cj-kpi-card small,
#page-cj-overview .cj-ring-card span {
    color: rgba(239, 247, 255, 0.82) !important;
}

#page-cj-overview .cj-ring {
    width: 78px !important;
    height: 78px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    border: 2px solid rgba(var(--score-accent-rgb), 0.74) !important;
    box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.08), 0 0 16px rgba(var(--score-accent-rgb), 0.28) !important;
}

#page-cj-overview .cj-ring-inner {
    width: 60px !important;
    height: 60px !important;
    color: #062033 !important;
    background: rgba(255, 255, 255, 0.92) !important;
    font-size: 12px !important;
}

#page-cj-overview .cj-kpi-card .score-card-art,
#page-cj-overview .cj-ring-card .score-card-art {
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 14px !important;
    height: 30px !important;
    color: var(--score-accent) !important;
    opacity: 0.96 !important;
    z-index: 4 !important;
    pointer-events: none !important;
}

#page-cj-overview .cj-kpi-card .score-card-art svg,
#page-cj-overview .cj-ring-card .score-card-art svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

#page-cj-overview .cj-kpi-card .score-card-line,
#page-cj-overview .cj-ring-card .score-card-line {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    filter: drop-shadow(0 0 7px rgba(var(--score-accent-rgb), 0.76)) !important;
}

#page-cj-overview .cj-kpi-card .score-card-fill,
#page-cj-overview .cj-ring-card .score-card-fill {
    fill: currentColor !important;
    opacity: 0.2 !important;
}

@media (max-width: 900px) {
    #page-cj-overview .cj-kpi-card {
        min-height: 112px !important;
    }

    #page-cj-overview .cj-ring-card {
        grid-template-columns: 72px 1fr !important;
        min-height: 104px !important;
    }

    #page-cj-overview .cj-ring {
        width: 66px !important;
        height: 66px !important;
    }

    #page-cj-overview .cj-ring-inner {
        width: 50px !important;
        height: 50px !important;
        font-size: 11px !important;
    }
}
/* Keep filter popup text readable in every dashboard sheet. Header themes use
   light labels, which must not cascade into white dropdown surfaces. */
#dashboard-header .compact-multi-menu,
#dashboard-header .custom-searchable-dropdown .dropdown-list {
    background: #FFFFFF !important;
    color: #132033 !important;
}

#dashboard-header .compact-multi-option,
#dashboard-header .filter-item label.compact-multi-option,
#dashboard-header .compact-multi-option span,
#dashboard-header .custom-searchable-dropdown .dropdown-list div,
.custom-searchable-dropdown .dropdown-list div,
.filter-select option,
.multi-filter-select option,
select option {
    color: #132033 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

#dashboard-header .compact-multi-option:hover,
#dashboard-header .custom-searchable-dropdown .dropdown-list div:hover,
.custom-searchable-dropdown .dropdown-list div:hover {
    background-color: #EEF6FF !important;
    color: #0B4F8A !important;
}

.filter-select option,
.multi-filter-select option,
select option {
    background-color: #FFFFFF !important;
}

.filter-select option:checked,
.multi-filter-select option:checked,
select option:checked {
    background-color: #DFF7F2 !important;
    color: #061F31 !important;
}

/* Complaint Handling: align with the light executive sheets. */
#page-complaint {
    --bg-primary: #F3F6FA;
    --bg-card: #FFFFFF;
    --border-color: #DCE5EF;
    --text-primary: #17283B;
    --text-secondary: #526174;
    --text-muted: #8794A5;
    background: #F3F6FA !important;
    color: #17283B !important;
}

#dashboard-header.complaint-mode {
    background: linear-gradient(135deg, #173252 0%, #176276 100%) !important;
    border-bottom-color: rgba(255, 255, 255, 0.18) !important;
}

#page-complaint .panel-card,
#page-complaint .complaint-map-card,
#page-complaint .complaint-summary-card,
#page-complaint .complaint-toolbar {
    background: #FFFFFF !important;
    border-color: #DCE5EF !important;
    color: #17283B !important;
    box-shadow: 0 8px 24px rgba(19, 32, 51, 0.07) !important;
    backdrop-filter: none !important;
}

#page-complaint .panel-header {
    background: linear-gradient(180deg, #FFFFFF, #F7FAFD) !important;
    border-bottom-color: #E5ECF4 !important;
    color: #17283B !important;
}

#page-complaint .panel-header h3,
#page-complaint .complaint-live-alarm-row b,
#page-complaint .progress-bar-meta .lbl-val {
    color: #17283B !important;
}

#page-complaint .filter-item label,
#page-complaint .complaint-address-line,
#page-complaint .complaint-live-alarm-row span,
#page-complaint .complaint-live-alarm-source,
#page-complaint .complaint-alarm-clear {
    color: #526174 !important;
}

#page-complaint .filter-select,
#page-complaint .complaint-summary-text,
#page-complaint .complaint-alarm-box,
#page-complaint .complaint-elevation-profile,
#page-complaint .complaint-elevation-profile svg,
#page-complaint .complaint-elevation-profile svg rect,
#page-complaint .complaint-live-alarm-counts span {
    background: #F8FAFC !important;
    border-color: #DCE5EF !important;
    color: #17283B !important;
}

#page-complaint .filter-select:focus {
    background: #FFFFFF !important;
    border-color: #4EA5D9 !important;
    box-shadow: 0 0 0 3px rgba(78, 165, 217, 0.14) !important;
}

#page-complaint .complaint-place-results,
#page-complaint .complaint-place-result {
    background: #FFFFFF !important;
    border-color: #DCE5EF !important;
    color: #17283B !important;
}

#page-complaint .complaint-place-result:hover,
#page-complaint .complaint-place-result:focus {
    background: #EEF6FF !important;
    color: #0B5E91 !important;
}

#page-complaint .complaint-place-result small,
#page-complaint .complaint-elevation-profile svg text.elevation-small-label {
    color: #64748B !important;
    fill: #64748B !important;
}

#page-complaint .complaint-elevation-profile svg text,
#page-complaint .complaint-elevation-profile svg text.elevation-label {
    fill: #17283B !important;
}

#page-complaint .complaint-elevation-profile svg line {
    stroke: #D7E0EA !important;
}

#page-complaint .noc-table th {
    background: linear-gradient(180deg, #EEF4FA, #E5EDF6) !important;
    color: #23364D !important;
    border-bottom-color: #CAD7E6 !important;
}

#page-complaint .noc-table td {
    color: #29384C !important;
    border-bottom-color: #E8EEF5 !important;
}

#page-complaint .noc-table tbody tr:hover {
    background: #ECF4FF !important;
}

#page-complaint .complaint-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

#page-complaint .complaint-map-card,
#page-complaint .complaint-summary-card {
    min-height: 0 !important;
    height: 500px !important;
    box-sizing: border-box;
}

#page-complaint #complaint-map-element {
    width: 100% !important;
    height: 430px !important;
    min-height: 0 !important;
    aspect-ratio: auto;
    max-height: none;
}

#page-complaint .complaint-summary-card {
    display: flex;
    flex-direction: column;
}

#page-complaint .complaint-summary-text {
    width: 100%;
    height: 430px !important;
    min-height: 0;
    flex: 0 0 430px;
    font-size: 15px !important;
    line-height: 1.6 !important;
    font-weight: 500;
    padding: 16px !important;
}

/* ========================================================================== 
   MOBILE RESPONSIVE SAFETY LAYER
   Final cascade guard shared by every dashboard sheet. Keep this block last so
   page-specific desktop themes cannot push headers or controls off-screen.
   ========================================================================== */
@media (max-width: 900px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    #app-container {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    #main-content,
    body.body-map-central-mode #main-content,
    body:has(#page-map-central-java.active) #main-content {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        overflow-x: hidden !important;
    }

    #sidebar {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        z-index: 2200 !important;
        width: min(86vw, 320px) !important;
        max-width: 320px !important;
        height: 100dvh !important;
        transform: translateX(-105%) !important;
        transition: transform .22s ease !important;
        overflow-y: auto !important;
        box-shadow: 18px 0 46px rgba(2, 8, 23, .3) !important;
    }

    .body-sidebar-open #sidebar {
        transform: translateX(0) !important;
    }

    #sidebar-backdrop {
        position: fixed !important;
        inset: 0 !important;
        z-index: 2100 !important;
    }

    #dashboard-header,
    #dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode),
    #dashboard-header.cj-mode,
    #dashboard-header.ows-mode,
    #dashboard-header.complaint-mode,
    #dashboard-header.traffic-mtd-mode,
    #dashboard-header.worst-site-mode,
    #dashboard-header.mc-mode {
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        z-index: 900 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 12px !important;
        gap: 12px !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    #dashboard-header .header-left,
    #dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .header-left {
        display: grid !important;
        /* Keep navigation and logout on the same row; the previous two-column
           grid forced one action onto a second row over the page menu. */
        grid-template-columns: 42px 38px minmax(0, 1fr) !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        gap: 10px !important;
    }

    #dashboard-header #sidebar-toggle-btn,
    #dashboard-header .icon-action-btn {
        position: static !important;
        display: inline-flex !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        flex: 0 0 42px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #dashboard-header .header-title {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    #dashboard-header .header-title h2,
    #dashboard-header #header-site-id {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 3px !important;
        color: #FFFFFF !important;
        font-size: clamp(18px, 5.4vw, 23px) !important;
        line-height: 1.12 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    #dashboard-header .header-title p,
    #dashboard-header #header-site-name,
    #dashboard-header #dashboard-debug-status {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 2px 0 0 !important;
        font-size: 10px !important;
        line-height: 1.25 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    #dashboard-header .filter-panel-top,
    #dashboard-header.mc-mode .filter-panel-top,
    #dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .filter-panel-top {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        gap: 9px !important;
    }

    #dashboard-header .filter-item,
    #dashboard-header .site-filter-control,
    #dashboard-header .mc-filter-control,
    #dashboard-header .date-filter-control,
    #dashboard-header .custom-searchable-dropdown,
    #dashboard-header .filter-select,
    #dashboard-header .date-input,
    #dashboard-header .compact-multi {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #dashboard-header .filter-select,
    #dashboard-header .custom-searchable-dropdown input,
    #dashboard-header .date-input,
    #dashboard-header .compact-multi-button {
        width: 100% !important;
        min-width: 0 !important;
        height: 42px !important;
        min-height: 42px !important;
        padding-inline: 10px !important;
        font-size: 12px !important;
        box-sizing: border-box !important;
    }

    #dashboard-header .compact-multi-menu,
    #dashboard-header .custom-searchable-dropdown .dropdown-list {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        top: auto !important;
        width: auto !important;
        max-width: none !important;
        max-height: min(52vh, 360px) !important;
        z-index: 2600 !important;
    }

    #dashboard-header .header-refresh-data-btn {
        position: static !important;
        grid-column: 1 / -1 !important;
        justify-self: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
    }

    .dashboard-grid,
    .telegram-dashboard,
    .cj-overview,
    .complaint-dashboard,
    .ows-dashboard {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 10px !important;
        gap: 12px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .kpi-row,
    .tech-kpi-strip,
    .vis-row,
    .vis-row.equal,
    .vis-row-three,
    .vis-row-four,
    .kpi-equal-grid,
    .hourly-chart-grid,
    .transport-content-grid,
    .degradation-content-grid,
    .complaint-layout,
    .ows-command-grid,
    .cj-top-grid,
    .cj-main-grid,
    .cj-lower-grid,
    .cj-kpi-grid,
    .cj-ring-grid,
    #page-2g-mc .vis-row,
    #page-2g-site .vis-row,
    #page-2g-blocking .vis-row,
    #page-4g .vis-row,
    #page-4g .vis-row-three,
    #page-4g .vis-row-four.kpi-equal-grid,
    #page-5g .vis-row,
    #page-5g .vis-row-three,
    #page-mc .vis-row {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        gap: 12px !important;
    }

    .panel-card,
    .kpi-card,
    .tech-summary-card,
    .hourly-chart-card,
    .cj-panel,
    .cj-kpi-card,
    .cj-ring-card,
    .complaint-map-card,
    .complaint-summary-card,
    .ows-map-card,
    .site-down-map-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
    }

    .panel-header {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .panel-header h3 {
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
    }

    .chart-container,
    .chart-container.large,
    .hourly-chart-card .chart-container,
    .cj-chart-box,
    .mw50-chart-grid .chart-container {
        width: 100% !important;
        min-width: 0 !important;
        height: clamp(250px, 72vw, 360px) !important;
        min-height: 250px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    canvas,
    svg,
    img {
        max-width: 100% !important;
    }

    .data-table-container,
    .site-alarm-table-wrap,
    .table-responsive,
    .noc-table-wrap {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .data-table,
    .site-alarm-table,
    .noc-table,
    .mw50-table {
        min-width: 680px;
    }

    #map-element,
    #neighbor-map-element,
    #mc-map-element,
    #vlr-map-element,
    #complaint-map-element,
    #site-down-map,
    #ows-alarm-map {
        width: 100% !important;
        max-width: 100% !important;
        height: clamp(320px, 90vw, 520px) !important;
        min-height: 320px !important;
    }

    #page-complaint .complaint-map-card,
    #page-complaint .complaint-summary-card,
    #page-complaint #complaint-map-element,
    #page-complaint .complaint-summary-text {
        width: 100% !important;
        height: auto !important;
        min-height: 340px !important;
        max-width: 100% !important;
        flex-basis: auto !important;
    }

    .export-bar,
    .telegram-table-filters,
    .ows-map-filter-bar,
    .site-down-map-toolbar,
    .complaint-toolbar {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        gap: 8px !important;
    }

    .modal-content,
    .traffic-mtd-modal-card,
    .complaint-modal-card {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
        margin: 10px !important;
        overflow: auto !important;
    }
}

@media (max-width: 560px) {
    #dashboard-header .filter-panel-top,
    #dashboard-header.mc-mode .filter-panel-top,
    #dashboard-header:not(.cj-mode):not(.ows-mode):not(.complaint-mode):not(.traffic-mtd-mode):not(.worst-site-mode) .filter-panel-top,
    .export-bar,
    .telegram-table-filters,
    .ows-map-filter-bar,
    .site-down-map-toolbar,
    .complaint-toolbar {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #dashboard-header {
        padding: 10px !important;
        gap: 10px !important;
    }

    .dashboard-grid,
    .telegram-dashboard,
    .cj-overview,
    .complaint-dashboard,
    .ows-dashboard {
        padding: 8px !important;
    }

    .panel-card,
    .kpi-card,
    .tech-summary-card,
    .hourly-chart-card,
    .cj-panel {
        padding: 11px !important;
    }

    .chart-container,
    .chart-container.large,
    .hourly-chart-card .chart-container,
    .cj-chart-box {
        height: 270px !important;
        min-height: 250px !important;
    }
}

@media (max-width: 1120px) {
    #page-complaint .complaint-layout {
        grid-template-columns: 1fr;
    }

    #page-complaint .complaint-map-card,
    #page-complaint .complaint-summary-card {
        height: auto !important;
    }
}

/* Sheets with their own in-canvas title/menu must not inherit the generic
   Site ID / Cell / Sector / Date header on phones. */
@media (max-width: 900px) {
    #dashboard-header.cj-mode,
    #dashboard-header.traffic-wow-mode,
    body.body-traffic-wow-mode #dashboard-header,
    body:has(#page-cj-overview.active) #dashboard-header,
    body:has(#page-traffic-wow.active) #dashboard-header {
        display: none !important;
        position: fixed !important;
        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
}
.vlr-market-sheet { padding:2px; }
.vlr-market-heading { display:flex; align-items:center; justify-content:space-between; }
.body-vlr-market-mode #page-vlr-market.active .vlr-market-return-menu,
body:has(#page-vlr-market.active) .vlr-market-return-menu { display:inline-flex; position:fixed; top:14px; left:18px; z-index:1220; }
.body-vlr-market-mode .vlr-market-heading { padding-left:92px; }
.vlr-market-heading small { color:var(--text-secondary); font-weight:800; }
.vlr-market-heading h2 { margin:4px 0 0; font-size:28px; }
.vlr-market-filter { display:grid !important; grid-template-columns:100px repeat(8,minmax(130px,1fr)) 48px; gap:8px; align-items:end; padding:10px 12px; overflow-x:auto; }
.vlr-market-filter-title { display:flex; align-items:center; gap:8px; align-self:center; white-space:nowrap; font-size:14px; padding-bottom:8px; }
.vlr-market-filter .filter-item { min-width:0; width:auto !important; }
.vlr-market-filter .filter-select { width:100%; }
.vlr-market-filter .filter-item label { display:block; margin-bottom:4px; font-size:11px; font-weight:700; white-space:nowrap; }
.vlr-market-filter input.filter-select { min-height:38px; padding:7px 9px; border:1px solid var(--border-color); border-radius:7px; background:var(--card-bg); color:var(--text-primary); }
.vlr-market-search { min-width:44px; height:40px; padding:0; justify-content:center; }
.vlr-market-filter-warning { grid-column:1/-1; padding:9px 12px; border-radius:8px; color:#9a6700; background:#fff3cd; border:1px solid #ffe69c; font-size:12px; }
.body-vlr-market-mode #dashboard-header,
#dashboard-header.vlr-market-mode,
body:has(#page-vlr-market.active) #dashboard-header { display:none !important; }
.body-vlr-market-mode .main-content { padding-top:18px !important; }
body:has(#page-vlr-market.active) .main-content { padding-top:18px !important; }
.vlr-market-chart-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.vlr-market-chart-grid.three { grid-template-columns:repeat(2,minmax(0,1fr)); }
.vlr-market-chart { border:1px solid var(--border-color); border-radius:15px; padding:10px; background:var(--card-bg); min-width:0; }
.vlr-market-chart h4 { text-align:center; margin:0 0 6px; color:var(--text-primary); font-weight:800; }
.vlr-market-chart .chart-container { height:245px; }
.vlr-yoy-table { font-size:11px; border-collapse:collapse; }
.vlr-yoy-table th,.vlr-yoy-table td { white-space:nowrap; padding:6px 7px; border:1px solid #cbd5d1; }
.vlr-yoy-table .vlr-head-location { background:#0828e8; color:#fff; }
.vlr-yoy-table .vlr-head-3id { background:#d600a8; color:#fff; }
.vlr-yoy-table thead tr:first-child .vlr-head-3id { background:#0828e8; }
.vlr-yoy-table .vlr-head-im3 { background:#fff200; color:#111; }
.vlr-yoy-table .vlr-head-ioh { background:#d90000; color:#fff; }
.vlr-yoy-table tbody tr:nth-child(even) { background:#edf3f1; }
.vlr-yoy-section + .vlr-yoy-section { margin-top:14px; }
.vlr-yoy-section-title { margin:0 0 6px; font-size:13px; font-weight:800; color:var(--text-primary); }
.vlr-yoy-positive { background:#c9f2d3 !important; color:#08752d; }
.vlr-yoy-negative { background:#ffd1d1 !important; color:#d71920; }
@media (max-width:1000px) { .vlr-market-chart-grid,.vlr-market-chart-grid.three { grid-template-columns:1fr; } .vlr-market-filter { grid-template-columns:repeat(2,minmax(170px,1fr)); overflow:visible; } .vlr-market-filter-title,.vlr-market-filter-warning { grid-column:1/-1; } }

/* Keep this block at EOF: mobile theme declarations above must not collapse
   the OWS Leaflet viewport after the command-center DOM is rearranged. */
@media (max-width: 820px) {
    #page-ows-alarms .ows-command-center .ows-map-card,
    #page-ows-alarms .ows-map-card {
        display: flex !important;
        flex-direction: column !important;
        height: 680px !important;
        min-height: 680px !important;
        max-height: none !important;
        overflow: hidden !important;
    }

    #page-ows-alarms #ows-alarm-map,
    #page-ows-alarms .ows-command-center #ows-alarm-map {
        display: block !important;
        flex: 1 0 580px !important;
        width: 100% !important;
        height: 580px !important;
        min-height: 580px !important;
        max-height: none !important;
    }
}

@media (max-width: 480px) {
    #page-ows-alarms .ows-command-center .ows-map-card,
    #page-ows-alarms .ows-map-card {
        height: 720px !important;
        min-height: 720px !important;
    }

    #page-ows-alarms #ows-alarm-map,
    #page-ows-alarms .ows-command-center #ows-alarm-map {
        flex-basis: 620px !important;
        height: 620px !important;
        min-height: 620px !important;
    }
}

/* v19 must remain last: compact map plus visible playback controls on phones. */
@media (max-width: 560px) {
    #page-ows-alarms .ows-command-center .ows-map-card,
    #page-ows-alarms .ows-map-card {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #page-ows-alarms #ows-alarm-map,
    #page-ows-alarms .ows-command-center #ows-alarm-map {
        flex: none !important;
        height: 380px !important;
        min-height: 380px !important;
    }

    #page-ows-alarms .ows-map-filter-bar {
        display: flex !important;
        flex-direction: column !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #page-ows-alarms .ows-map-filter-bar label[for="ows-alarm-hour-range"] { order: 20 !important; }
    #page-ows-alarms #ows-alarm-hour-range { display: block !important; visibility: visible !important; order: 21 !important; width: 100% !important; height: 28px !important; opacity: 1 !important; }
    #page-ows-alarms #ows-alarm-hour-label { display: block !important; order: 22 !important; text-align: center !important; color: #fff !important; }
    #page-ows-alarms #ows-hour-play-btn { display: inline-flex !important; visibility: visible !important; order: 23 !important; width: 100% !important; min-height: 40px !important; margin: 0 !important; opacity: 1 !important; align-items: center !important; justify-content: center !important; }
    #page-ows-alarms .ows-map-filter-bar > button:last-of-type { order: 24 !important; }
}
/* Traffic per PLMN is embedded as a full-width Site Overview sheet. */
#page-overview .plmn-site-shell{grid-column:1/-1;border-radius:20px}
#page-overview .plmn-selected-site{display:flex;align-items:center;gap:13px;padding:14px 16px;border:1px solid #bfdbfe;border-radius:14px;background:linear-gradient(135deg,#eff6ff,#f5f3ff);color:#1e3a8a}#page-overview .plmn-selected-site>i{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#2563eb;color:#fff;font-size:20px}#page-overview .plmn-selected-site span,#page-overview .plmn-selected-site small{display:block;color:#64748b;font-size:11px;font-weight:750}#page-overview .plmn-selected-site strong{display:block;margin:2px 0;font-size:18px;color:#0f172a}
#page-overview .plmn-site-shell,#page-overview .plmn-site-panel,body.cj-dark #page-overview .plmn-site-shell,body.cj-dark #page-overview .plmn-site-panel{background:#f8fafc;color:#0f172a;border-color:#dbe4ef}#page-overview .plmn-site-shell{padding:18px;gap:14px;border:1px solid #dbe4ef;box-shadow:0 8px 24px rgba(15,23,42,.06)}#page-overview .plmn-site-panel{padding:16px;box-shadow:0 5px 18px rgba(15,23,42,.05)}#page-overview .plmn-site-panel h3{color:#0f172a}#page-overview .plmn-site-panel p{color:#64748b}#page-overview .plmn-site-chart{height:310px}#page-overview .plmn-brand-card{min-height:118px;padding:17px 20px}#page-overview .plmn-brand-mark{width:62px;height:62px;border-radius:16px;font-size:22px}#page-overview .plmn-brand-card strong{font-size:27px}
#page-overview .plmn-brand-grid{gap:12px}#page-overview .plmn-brand-card{min-height:76px;padding:10px 14px;gap:12px;border-radius:15px;box-shadow:0 8px 18px rgba(15,23,42,.11)}#page-overview .plmn-brand-mark{width:46px;height:46px;border-radius:12px;font-size:17px;flex:0 0 46px}#page-overview .plmn-brand-card span{font-size:11px}#page-overview .plmn-brand-card strong{font-size:21px;line-height:1.15;margin:2px 0}#page-overview .plmn-brand-card small{font-size:10px}
#page-overview .meta-trend-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}#page-overview .meta-trend-row .panel-card{min-width:0}#page-overview .meta-trend-row .chart-container,#page-overview .meta-trend-row .plmn-site-chart{height:205px;min-height:205px}#page-overview .meta-trend-row .panel-header{padding:11px 13px}#page-overview .meta-trend-row .panel-header h3{font-size:13px}@media(max-width:800px){#page-overview .meta-trend-row{grid-template-columns:1fr}}
#page-overview .plmn-trend-mini-card .chart-container{padding:8px 10px 5px}#page-overview .plmn-trend-mini-card .panel-header>div{min-width:0}#page-overview .plmn-trend-mini-card .panel-header h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Bright Traffic MTD/LMTD theme aligned with VLR & Market Share. */
#page-traffic-mtd-lmtd .traffic-mtd-shell,body.cj-dark #page-traffic-mtd-lmtd .traffic-mtd-shell{background:linear-gradient(145deg,#f8fbff 0%,#eef5ff 55%,#f8fafc 100%);color:#0f2747;font-family:"Plus Jakarta Sans","Segoe UI",sans-serif}
#page-traffic-mtd-lmtd .traffic-mtd-head h2{color:#0b2447;font-size:30px;font-weight:850}#page-traffic-mtd-lmtd .traffic-mtd-head p,#page-traffic-mtd-lmtd .traffic-mtd-panel-head p{color:#58708f}#page-traffic-mtd-lmtd .traffic-mtd-eyebrow{color:#1877b9}
#page-traffic-mtd-lmtd .traffic-mtd-filter-card,#page-traffic-mtd-lmtd .traffic-mtd-panel,#page-traffic-mtd-lmtd .traffic-mtd-drill-card,body.cj-dark #page-traffic-mtd-lmtd .traffic-mtd-filter-card,body.cj-dark #page-traffic-mtd-lmtd .traffic-mtd-panel,body.cj-dark #page-traffic-mtd-lmtd .traffic-mtd-drill-card{background:#fff;border:1px solid #cfdbeb;color:#102a4c;box-shadow:0 8px 22px rgba(31,71,118,.08)}
#page-traffic-mtd-lmtd .traffic-mtd-filter-card .filter-select{background:#fff;border-color:#c8d6e8;color:#102a4c}#page-traffic-mtd-lmtd .traffic-mtd-panel-head h3,#page-traffic-mtd-lmtd .traffic-mtd-drill-title strong{color:#102a4c}
#page-traffic-mtd-lmtd .traffic-mtd-kpis{gap:14px}#page-traffic-mtd-lmtd .traffic-mtd-kpi{min-height:116px;border:0;color:#fff;box-shadow:0 10px 22px rgba(30,64,175,.14)}#page-traffic-mtd-lmtd .traffic-mtd-kpi:nth-child(1){background:linear-gradient(135deg,#20b9d4,#32cbe2)}#page-traffic-mtd-lmtd .traffic-mtd-kpi:nth-child(2){background:linear-gradient(135deg,#09a8a7,#10c2bd)}#page-traffic-mtd-lmtd .traffic-mtd-kpi:nth-child(3){background:linear-gradient(135deg,#e99a1c,#f4b43e)}#page-traffic-mtd-lmtd .traffic-mtd-kpi:nth-child(4){background:linear-gradient(135deg,#2868df,#4b7fe3)}
#page-traffic-mtd-lmtd .traffic-mtd-kpi span,#page-traffic-mtd-lmtd .traffic-mtd-kpi small,#page-traffic-mtd-lmtd .traffic-mtd-kpi strong,body.cj-dark #page-traffic-mtd-lmtd .traffic-mtd-kpi span,body.cj-dark #page-traffic-mtd-lmtd .traffic-mtd-kpi small,body.cj-dark #page-traffic-mtd-lmtd .traffic-mtd-kpi strong{color:#fff}#page-traffic-mtd-lmtd .traffic-mtd-kpi span{font-size:11px;font-weight:800;text-transform:uppercase}#page-traffic-mtd-lmtd .traffic-mtd-kpi strong{font-size:27px;font-weight:850}
#page-traffic-mtd-lmtd .traffic-mtd-table th{background:#edf5ff;color:#16375f;border-color:#d4e0ef}#page-traffic-mtd-lmtd .traffic-mtd-table td{background:#fff;color:#273d59;border-color:#e1e9f3}#page-traffic-mtd-lmtd .traffic-mtd-table tbody tr:nth-child(even) td{background:#f7faff}

/* Traffic MTD visual refresh: a single type scale, calmer palette, and a
   dedicated header action lane so Menu and Logout never cover the title. */
#dashboard-header.traffic-mtd-mode {
    min-height: 96px;
    padding: 16px 22px 16px 142px;
    border-bottom: 3px solid #14b8a6;
    background: linear-gradient(118deg, #102a49 0%, #173b60 62%, #174f68 100%);
    box-shadow: 0 8px 24px rgba(15, 39, 71, .18);
}
#dashboard-header.traffic-mtd-mode .header-left {
    display: block;
    min-width: 0;
}
#dashboard-header.traffic-mtd-mode #sidebar-toggle-btn {
    display: none !important;
}
#dashboard-header.traffic-mtd-mode .header-logout-btn {
    position: fixed;
    top: 16px;
    left: 92px;
    z-index: 1230;
    width: 42px;
    height: 40px;
    border-color: rgba(255, 255, 255, .32);
    border-radius: 10px;
    background: rgba(255, 255, 255, .12);
    box-shadow: 0 8px 20px rgba(2, 15, 32, .18);
}
#dashboard-header.traffic-mtd-mode #header-site-id {
    margin: 0 0 3px;
    font-size: clamp(24px, 2vw, 30px);
    line-height: 1.08;
    letter-spacing: -.025em;
}
#dashboard-header.traffic-mtd-mode #header-site-name,
#dashboard-header.traffic-mtd-mode #dashboard-debug-status {
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.35;
}
#page-traffic-mtd-lmtd .traffic-mtd-return-menu {
    top: 16px;
    left: 18px;
    min-width: 66px;
    height: 40px;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 10px;
    background: rgba(255, 255, 255, .96);
    color: #164e63;
    font-size: 12px;
    box-shadow: 0 8px 20px rgba(2, 15, 32, .18);
}

#page-traffic-mtd-lmtd .traffic-mtd-shell {
    padding: 24px clamp(16px, 1.6vw, 28px) 32px;
}
#page-traffic-mtd-lmtd .traffic-mtd-head {
    margin-bottom: 18px;
}
#page-traffic-mtd-lmtd .traffic-mtd-eyebrow {
    margin-bottom: 5px;
    color: #0f766e;
    font-size: 11px;
    letter-spacing: .09em;
}
#page-traffic-mtd-lmtd .traffic-mtd-head h2 {
    font-size: clamp(25px, 2.1vw, 32px);
    line-height: 1.15;
    letter-spacing: -.03em;
}
#page-traffic-mtd-lmtd .traffic-mtd-head p {
    max-width: 780px;
    font-size: 12px;
    line-height: 1.5;
}
#page-traffic-mtd-lmtd .traffic-mtd-actions .export-xlsx-btn {
    min-height: 40px;
    padding: 0 15px;
    border-radius: 9px;
    background: #078875;
    box-shadow: 0 6px 14px rgba(7, 136, 117, .16);
    font-size: 12px;
}
#page-traffic-mtd-lmtd .traffic-mtd-filter-card {
    display: grid;
    grid-template-columns: 92px repeat(4, minmax(150px, 1fr)) 42px;
    gap: 12px;
    align-items: end;
    margin-bottom: 16px;
    padding: 14px;
    border-radius: 12px;
}
#page-traffic-mtd-lmtd .traffic-mtd-filter-title {
    align-self: center;
    min-width: 0;
    font-size: 13px;
}
#page-traffic-mtd-lmtd .traffic-mtd-filter-card label {
    min-width: 0;
    color: #38516e;
    font-size: 10px;
    letter-spacing: .02em;
}
#page-traffic-mtd-lmtd .traffic-mtd-filter-card .filter-select,
#page-traffic-mtd-lmtd .traffic-mtd-search-btn {
    min-height: 38px;
    height: 38px;
    border-radius: 8px;
}
#page-traffic-mtd-lmtd .traffic-mtd-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}
#page-traffic-mtd-lmtd .traffic-mtd-kpi {
    min-height: 112px;
    padding: 17px 18px;
    border-radius: 12px;
}
#page-traffic-mtd-lmtd .traffic-mtd-kpi:nth-child(1),
#page-traffic-mtd-lmtd .traffic-mtd-kpi:nth-child(2) {
    background: linear-gradient(135deg, #0891a7, #14b8b0);
}
#page-traffic-mtd-lmtd .traffic-mtd-kpi:nth-child(3) {
    background: linear-gradient(135deg, #dc8a0b, #f2ae2e);
}
#page-traffic-mtd-lmtd .traffic-mtd-kpi:nth-child(4) {
    background: linear-gradient(135deg, #2563c9, #3f78dc);
}
#page-traffic-mtd-lmtd .traffic-mtd-kpi span {
    font-size: 11px;
    letter-spacing: .025em;
}
#page-traffic-mtd-lmtd .traffic-mtd-kpi strong {
    margin: 8px 0 5px;
    font-size: clamp(25px, 2vw, 30px);
    line-height: 1;
}
#page-traffic-mtd-lmtd .traffic-mtd-kpi small {
    font-size: 11px;
    line-height: 1.35;
    opacity: .92;
}
#page-traffic-mtd-lmtd .traffic-mtd-drill-card {
    gap: 14px;
    padding: 12px;
    border-radius: 12px;
}
#page-traffic-mtd-lmtd .traffic-mtd-drill-title {
    border-radius: 10px;
    background: linear-gradient(145deg, #0f766e, #176b67);
}
#page-traffic-mtd-lmtd .traffic-mtd-score-card {
    min-height: 108px;
    border-radius: 10px;
}
#page-traffic-mtd-lmtd .traffic-mtd-score-card .kpi-title,
#page-traffic-mtd-lmtd .traffic-mtd-score-card .kpi-footer,
#page-traffic-mtd-lmtd .traffic-mtd-score-card .kpi-footer span {
    font-size: 11px;
}
#page-traffic-mtd-lmtd .traffic-mtd-score-card .kpi-value {
    font-size: clamp(22px, 1.7vw, 28px);
}

@media (max-width: 1180px) {
    #page-traffic-mtd-lmtd .traffic-mtd-filter-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #page-traffic-mtd-lmtd .traffic-mtd-filter-title,
    #page-traffic-mtd-lmtd .traffic-mtd-search-btn {
        grid-column: span 1;
    }
    #page-traffic-mtd-lmtd .traffic-mtd-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #page-traffic-mtd-lmtd .traffic-mtd-drill-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    #dashboard-header.traffic-mtd-mode {
        display: block !important;
        min-height: 76px !important;
        padding: 12px 14px 12px 126px !important;
    }
    #dashboard-header.traffic-mtd-mode .header-title p {
        display: none !important;
    }
    #dashboard-header.traffic-mtd-mode #header-site-id {
        overflow: hidden;
        font-size: 18px !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #dashboard-header.traffic-mtd-mode .header-logout-btn {
        top: 12px;
        left: 76px;
        width: 38px;
        height: 38px;
    }
    #page-traffic-mtd-lmtd .traffic-mtd-return-menu {
        top: 12px;
        left: 12px;
        min-width: 54px;
        height: 38px;
        padding: 0 9px;
    }
    #page-traffic-mtd-lmtd .traffic-mtd-return-menu span {
        display: none;
    }
    #page-traffic-mtd-lmtd .traffic-mtd-head {
        align-items: flex-start;
        flex-direction: column;
    }
    #page-traffic-mtd-lmtd .traffic-mtd-actions {
        width: 100%;
        justify-content: flex-start;
    }
    #page-traffic-mtd-lmtd .traffic-mtd-filter-card,
    #page-traffic-mtd-lmtd .traffic-mtd-kpis,
    #page-traffic-mtd-lmtd .traffic-mtd-drill-metrics {
        grid-template-columns: 1fr;
    }
    #page-traffic-mtd-lmtd .traffic-mtd-search-btn {
        width: 100%;
    }
}

/* Final cascade guard for the light executive Central Java sheet. */
body #page-cj-overview .cj-kpi-strip .cj-kpi-card:nth-child(n),
body.cj-dark #page-cj-overview .cj-kpi-strip .cj-kpi-card:nth-child(n) {
    color: #172B4D !important;
    background: #FFFFFF !important;
}

body #page-cj-overview .cj-ring-grid .cj-ring-card:nth-child(n),
body.cj-dark #page-cj-overview .cj-ring-grid .cj-ring-card:nth-child(n) {
    color: #172B4D !important;
    background: #F9FBFD !important;
}

body.cj-dark #page-cj-overview .cj-overview,
body.cj-dark #page-cj-overview .cj-panel,
body.cj-dark #page-cj-overview .cj-filter-card {
    color: #172B4D !important;
}

/* Central Java scorecard refinement v23 */
#page-cj-overview .cj-overview-hero {
    min-height: 208px !important;
    align-items: start !important;
}

#page-cj-overview .cj-overview-visual,
#page-cj-overview .cj-overview-visual img {
    min-height: 208px !important;
    height: 208px !important;
    max-height: 208px !important;
}

#page-cj-overview .cj-overview-summary .cj-filter-card {
    min-height: 50px !important;
    padding: 7px 12px !important;
}

#page-cj-overview .cj-overview-summary .cj-kpi-strip {
    align-self: start !important;
}

body #page-cj-overview .cj-overview-summary .cj-kpi-card:nth-child(n),
body.cj-dark #page-cj-overview .cj-overview-summary .cj-kpi-card:nth-child(n) {
    min-height: 112px !important;
    height: 112px !important;
    padding: 15px 14px 12px !important;
    border: 1px solid #D8E2EC !important;
    border-left: 4px solid var(--score-accent) !important;
    border-top: 1px solid #D8E2EC !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #FFFFFF 0%, rgba(var(--score-accent-rgb), .055) 100%) !important;
    box-shadow: 0 5px 14px rgba(31, 55, 82, .065) !important;
}

#page-cj-overview .cj-overview-summary .cj-kpi-card::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 13px !important;
    right: 13px !important;
    width: 9px !important;
    height: 9px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--score-accent) !important;
    box-shadow: 0 0 0 5px rgba(var(--score-accent-rgb), .10) !important;
}

#page-cj-overview .cj-overview-summary .cj-kpi-card span {
    padding-right: 22px !important;
    color: #63758A !important;
    font-size: 9px !important;
}

#page-cj-overview .cj-overview-summary .cj-kpi-card strong {
    margin-top: 8px !important;
    font-size: clamp(24px, 1.75vw, 30px) !important;
}

#page-cj-overview .cj-overview-summary .cj-kpi-card small {
    margin-top: 6px !important;
    color: #73859A !important;
    font-size: 9px !important;
}

body #page-cj-overview #cj-4g-rings .cj-ring-card:nth-child(n),
body #page-cj-overview #cj-2g-rings .cj-ring-card:nth-child(n),
body #page-cj-overview #cj-5g-rings .cj-ring-card:nth-child(n),
body.cj-dark #page-cj-overview #cj-4g-rings .cj-ring-card:nth-child(n),
body.cj-dark #page-cj-overview #cj-2g-rings .cj-ring-card:nth-child(n),
body.cj-dark #page-cj-overview #cj-5g-rings .cj-ring-card:nth-child(n) {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 11px !important;
    min-height: 78px !important;
    height: 78px !important;
    padding: 10px 12px !important;
    border: 1px solid #DCE5EE !important;
    border-left: 3px solid var(--score-accent) !important;
    border-radius: 9px !important;
    color: #1B3551 !important;
    background: linear-gradient(135deg, #FFFFFF 0%, #F7FAFC 100%) !important;
    box-shadow: 0 3px 10px rgba(31, 55, 82, .045) !important;
}

#page-cj-overview #cj-4g-rings .cj-ring-card::before,
#page-cj-overview #cj-2g-rings .cj-ring-card::before,
#page-cj-overview #cj-5g-rings .cj-ring-card::before,
#page-cj-overview #cj-4g-rings .cj-ring-card::after,
#page-cj-overview #cj-2g-rings .cj-ring-card::after,
#page-cj-overview #cj-5g-rings .cj-ring-card::after,
#page-cj-overview #cj-4g-rings .score-card-art,
#page-cj-overview #cj-2g-rings .score-card-art,
#page-cj-overview #cj-5g-rings .score-card-art {
    content: none !important;
    display: none !important;
}

#page-cj-overview #cj-4g-rings .cj-ring,
#page-cj-overview #cj-2g-rings .cj-ring,
#page-cj-overview #cj-5g-rings .cj-ring {
    width: 52px !important;
    height: 52px !important;
    border: 0 !important;
    background: conic-gradient(var(--ring-color, #278A80) calc(var(--ring-value, 0) * 1%), #E4EAF0 0) !important;
    box-shadow: none !important;
}

#page-cj-overview #cj-4g-rings .cj-ring-inner,
#page-cj-overview #cj-2g-rings .cj-ring-inner,
#page-cj-overview #cj-5g-rings .cj-ring-inner {
    width: 42px !important;
    height: 42px !important;
    color: #17324D !important;
    background: #FFFFFF !important;
    font-size: 9px !important;
    line-height: 1 !important;
}

#page-cj-overview #cj-4g-rings .cj-ring-inner small,
#page-cj-overview #cj-2g-rings .cj-ring-inner small,
#page-cj-overview #cj-5g-rings .cj-ring-inner small {
    font-size: 8px !important;
}

#page-cj-overview #cj-4g-rings .cj-ring-card > div:last-child,
#page-cj-overview #cj-2g-rings .cj-ring-card > div:last-child,
#page-cj-overview #cj-5g-rings .cj-ring-card > div:last-child {
    min-width: 0 !important;
    overflow: hidden !important;
}

body #page-cj-overview #cj-4g-rings .cj-ring-card b,
body #page-cj-overview #cj-2g-rings .cj-ring-card b,
body #page-cj-overview #cj-5g-rings .cj-ring-card b,
body.cj-dark #page-cj-overview #cj-4g-rings .cj-ring-card b,
body.cj-dark #page-cj-overview #cj-2g-rings .cj-ring-card b,
body.cj-dark #page-cj-overview #cj-5g-rings .cj-ring-card b {
    display: block !important;
    color: #253D57 !important;
    font-size: 10px !important;
    line-height: 1.28 !important;
    overflow-wrap: anywhere !important;
}

body #page-cj-overview #cj-4g-rings .cj-ring-card span,
body #page-cj-overview #cj-2g-rings .cj-ring-card span,
body #page-cj-overview #cj-5g-rings .cj-ring-card span,
body.cj-dark #page-cj-overview #cj-4g-rings .cj-ring-card span,
body.cj-dark #page-cj-overview #cj-2g-rings .cj-ring-card span,
body.cj-dark #page-cj-overview #cj-5g-rings .cj-ring-card span {
    display: block !important;
    margin-top: 4px !important;
    color: #8291A2 !important;
    font-size: 8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

@media (max-width: 1450px) {
    #page-cj-overview .cj-overview-hero { min-height: 264px !important; }
    #page-cj-overview .cj-overview-visual,
    #page-cj-overview .cj-overview-visual img { height: 264px !important; min-height: 264px !important; max-height: 264px !important; }
    body #page-cj-overview .cj-overview-summary .cj-kpi-card:nth-child(n),
    body.cj-dark #page-cj-overview .cj-overview-summary .cj-kpi-card:nth-child(n) { height: 96px !important; min-height: 96px !important; }
}

/* Central Java scorecards v24 — colorful executive cards with readable type */
body #page-cj-overview .cj-overview-summary .cj-kpi-card:nth-child(n),
body.cj-dark #page-cj-overview .cj-overview-summary .cj-kpi-card:nth-child(n) {
    min-height: 116px !important;
    height: 116px !important;
    padding: 15px 15px 13px !important;
    border: 0 !important;
    border-radius: 10px !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 18px rgba(26, 52, 82, .14) !important;
}

body #page-cj-overview .cj-overview-summary .cj-kpi-card:nth-child(1),
body.cj-dark #page-cj-overview .cj-overview-summary .cj-kpi-card:nth-child(1) {
    background: linear-gradient(135deg, #6842C2 0%, #8A55D8 100%) !important;
}

body #page-cj-overview .cj-overview-summary .cj-kpi-card:nth-child(2),
body.cj-dark #page-cj-overview .cj-overview-summary .cj-kpi-card:nth-child(2) {
    background: linear-gradient(135deg, #167EC7 0%, #20A6DB 100%) !important;
}

body #page-cj-overview .cj-overview-summary .cj-kpi-card:nth-child(3),
body.cj-dark #page-cj-overview .cj-overview-summary .cj-kpi-card:nth-child(3) {
    background: linear-gradient(135deg, #E99012 0%, #F6AA22 100%) !important;
}

body #page-cj-overview .cj-overview-summary .cj-kpi-card:nth-child(4),
body.cj-dark #page-cj-overview .cj-overview-summary .cj-kpi-card:nth-child(4) {
    background: linear-gradient(135deg, #E9435C 0%, #F46874 100%) !important;
}

body #page-cj-overview .cj-overview-summary .cj-kpi-card:nth-child(5),
body.cj-dark #page-cj-overview .cj-overview-summary .cj-kpi-card:nth-child(5) {
    background: linear-gradient(135deg, #168E7F 0%, #26B6A4 100%) !important;
}

body #page-cj-overview .cj-overview-summary .cj-kpi-card:nth-child(6),
body.cj-dark #page-cj-overview .cj-overview-summary .cj-kpi-card:nth-child(6) {
    background: linear-gradient(135deg, #1871B6 0%, #2E91D1 100%) !important;
}

#page-cj-overview .cj-overview-summary .cj-kpi-card::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    right: -30px !important;
    bottom: -42px !important;
    top: auto !important;
    width: 112px !important;
    height: 112px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .10) !important;
    box-shadow: 0 0 0 18px rgba(255, 255, 255, .055) !important;
}

#page-cj-overview .cj-kpi-icon {
    position: absolute;
    right: 15px;
    top: 15px;
    z-index: 2;
    color: rgba(255, 255, 255, .28);
    font-size: 31px;
    line-height: 1;
}

body #page-cj-overview .cj-overview-summary .cj-kpi-card span,
body.cj-dark #page-cj-overview .cj-overview-summary .cj-kpi-card span {
    position: relative !important;
    z-index: 3 !important;
    padding-right: 40px !important;
    color: rgba(255, 255, 255, .92) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .035em !important;
}

body #page-cj-overview .cj-overview-summary .cj-kpi-card strong,
body.cj-dark #page-cj-overview .cj-overview-summary .cj-kpi-card strong {
    position: relative !important;
    z-index: 3 !important;
    margin-top: 7px !important;
    color: #FFFFFF !important;
    font-size: clamp(27px, 1.9vw, 34px) !important;
    font-weight: 850 !important;
    text-shadow: 0 2px 8px rgba(20, 34, 55, .16) !important;
}

body #page-cj-overview .cj-overview-summary .cj-kpi-card small,
body.cj-dark #page-cj-overview .cj-overview-summary .cj-kpi-card small {
    position: relative !important;
    z-index: 3 !important;
    margin-top: 7px !important;
    color: rgba(255, 255, 255, .86) !important;
    font-size: 10px !important;
    font-weight: 650 !important;
}

body #page-cj-overview #cj-4g-rings .cj-ring-card:nth-child(n),
body #page-cj-overview #cj-2g-rings .cj-ring-card:nth-child(n),
body #page-cj-overview #cj-5g-rings .cj-ring-card:nth-child(n),
body.cj-dark #page-cj-overview #cj-4g-rings .cj-ring-card:nth-child(n),
body.cj-dark #page-cj-overview #cj-2g-rings .cj-ring-card:nth-child(n),
body.cj-dark #page-cj-overview #cj-5g-rings .cj-ring-card:nth-child(n) {
    grid-template-columns: 66px minmax(0, 1fr) !important;
    gap: 13px !important;
    min-height: 94px !important;
    height: 94px !important;
    padding: 12px 14px !important;
    border: 1px solid #D8E3ED !important;
    border-left: 4px solid var(--score-accent) !important;
    border-radius: 10px !important;
    background: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(30, 57, 85, .055) !important;
}

#page-cj-overview #cj-4g-rings .cj-ring,
#page-cj-overview #cj-2g-rings .cj-ring,
#page-cj-overview #cj-5g-rings .cj-ring {
    width: 62px !important;
    height: 62px !important;
}

#page-cj-overview #cj-4g-rings .cj-ring-inner,
#page-cj-overview #cj-2g-rings .cj-ring-inner,
#page-cj-overview #cj-5g-rings .cj-ring-inner {
    width: 49px !important;
    height: 49px !important;
    font-size: 11px !important;
}

#page-cj-overview #cj-4g-rings .cj-ring-inner small,
#page-cj-overview #cj-2g-rings .cj-ring-inner small,
#page-cj-overview #cj-5g-rings .cj-ring-inner small {
    font-size: 9px !important;
}

body #page-cj-overview #cj-4g-rings .cj-ring-card b,
body #page-cj-overview #cj-2g-rings .cj-ring-card b,
body #page-cj-overview #cj-5g-rings .cj-ring-card b,
body.cj-dark #page-cj-overview #cj-4g-rings .cj-ring-card b,
body.cj-dark #page-cj-overview #cj-2g-rings .cj-ring-card b,
body.cj-dark #page-cj-overview #cj-5g-rings .cj-ring-card b {
    color: #173451 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
}

body #page-cj-overview #cj-4g-rings .cj-ring-card span,
body #page-cj-overview #cj-2g-rings .cj-ring-card span,
body #page-cj-overview #cj-5g-rings .cj-ring-card span,
body.cj-dark #page-cj-overview #cj-4g-rings .cj-ring-card span,
body.cj-dark #page-cj-overview #cj-2g-rings .cj-ring-card span,
body.cj-dark #page-cj-overview #cj-5g-rings .cj-ring-card span {
    margin-top: 5px !important;
    color: #6F8195 !important;
    font-size: 10px !important;
}

@media (max-width: 1450px) {
    body #page-cj-overview .cj-overview-summary .cj-kpi-card:nth-child(n),
    body.cj-dark #page-cj-overview .cj-overview-summary .cj-kpi-card:nth-child(n) {
        min-height: 108px !important;
        height: 108px !important;
    }
}