:root {
            /* Aksen warna fungsional tetap dipertahankan */
            --solar-orange: #F97316;
            --solar-amber:  #FBBF24;
            --solar-green:  #22C55E;
            --solar-red:    #EF4444;
            --solar-blue:   #3B82F6;
            
            /* Perubahan skema dasar ke Mode Cerah */
            --solar-dark:   #ece8e8; /* Diubah jadi Putih */
            --solar-slate:  #F8FAFC; /* Abu-abu sangat terang (Slate 50) */
            --solar-panel:  #c8e4f7; /* Biru muda cerah untuk panel kontras */
            --sidebar-w:    260px;
            --header-h:     64px;
        }

        * { box-sizing: border-box; }

        body {
            font-family: 'Inter', sans-serif;
            background: #F1F5F9; /* Background utama diubah jadi abu-abu terang (Slate 100) */
            color: #334155;      /* Warna teks utama diubah jadi gelap (Slate 700) */
            min-height: 100vh;
        }

        /* ── Sidebar ──────────────────────────────── */
        #sidebar {
            position: fixed;
            top: 0; left: 0; bottom: 0;
            width: var(--sidebar-w);
            background: #ffffff; /* Sidebar putih bersih */
            border-right: 1px solid #E2E8F0; /* Border abu-abu terang */
            z-index: 1000;
            display: flex;
            flex-direction: column;
            transition: transform .3s;
        }

        .sidebar-brand {
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid #E2E8F0;
            display: flex;
            align-items: center;
            gap: .75rem;
        }

        .sidebar-brand .brand-icon {
            width: 38px; height: 38px;
            background: linear-gradient(135deg, var(--solar-orange), var(--solar-amber));
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            color: #FFFFFF; /* Icon di dalam brand tetap putih */
        }

        .brand-name { font-weight: 700; font-size: 1.1rem; color: #0F172A; line-height: 1.1; } /* Nama brand jadi gelap */
        .brand-sub  { font-size: .7rem; color: #64748B; letter-spacing: .04em; text-transform: uppercase; }
        .brand-logo { filter: drop-shadow(5px 5px 10px rgba(56, 56, 56, 0.5)); }

        .sidebar-nav { flex: 1; padding: 1rem 0; overflow-y: auto; }

        .nav-section-label {
            font-size: .65rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .1em;
            color: #94A3B8; /* Disesuaikan untuk keterbacaan mode cerah */
            padding: .5rem 1.5rem .25rem;
        }

        .sidebar-nav .nav-link {
            display: flex;
            align-items: center;
            gap: .75rem;
            padding: .6rem 1.5rem;
            color: #64748B; /* Teks menu default jadi abu-abu gelap */
            font-size: .88rem;
            font-weight: 500;
            border-radius: 0;
            transition: all .2s;
            position: relative;
        }

        .sidebar-nav .nav-link:hover { color: var(--solar-orange); background: #F8FAFC; }

        .sidebar-nav .nav-link.active {
            color: var(--solar-orange);
            background: rgba(249,115,22,.08); /* Efek tint orange transparan */
        }

        .sidebar-nav .nav-link.active::before {
            content: '';
            position: absolute;
            left: 0; top: 4px; bottom: 4px;
            width: 3px;
            background: var(--solar-orange);
            border-radius: 0 2px 2px 0;
        }

        .sidebar-footer {
            padding: 1rem 1.5rem;
            border-top: 1px solid #E2E8F0;
        }

        /* ── Main layout ──────────────────────────── */
        #main-wrap {
            margin-left: var(--sidebar-w);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* ── Topbar ───────────────────────────────── */
        #topbar {
            height: var(--header-h);
            background: rgba(255, 255, 255, 0.9); /* Topbar putih semi-transparan */
            border-bottom: 1px solid #E2E8F0;
            backdrop-filter: blur(8px);
            position: sticky;
            top: 0;
            z-index: 900;
            padding: 0 1.75rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .topbar-title { font-size: 1rem; font-weight: 600; color: #0F172A; }

        .status-dot {
            width: 8px; height: 8px;
            border-radius: 50%;
            display: inline-block;
        }
        .status-dot.online  { background: var(--solar-green); box-shadow: 0 0 6px var(--solar-green); }
        .status-dot.offline { background: #94A3B8; }

        /* ── Page content ─────────────────────────── */
        #page-content { flex: 1; padding: 1.75rem; }

        /* ── Cards ────────────────────────────────── */
        .stat-card {
            background: #FFFFFF; /* Card diubah menjadi putih bersih */
            border: 1px solid #E2E8F0;
            border-radius: 14px;
            padding: 1.25rem 1.5rem;
            transition: border-color .2s;
        }

        .stat-card:hover { border-color: rgba(249,115,22,.4); }

        .stat-card .stat-label {
            font-size: .75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .08em;
            color: #64748B;
            margin-bottom: .5rem;
        }

        .stat-card .stat-value {
            font-size: 2rem;
            font-weight: 700;
            font-family: 'JetBrains Mono', monospace;
            color: #0F172A; /* Angka statistik jadi gelap */
            line-height: 1;
        }

        .stat-card .stat-unit {
            font-size: .75rem;
            color: #64748B;
            margin-left: .25rem;
        }

        .stat-card .stat-icon {
            width: 44px; height: 44px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
        }

        /* Data card */
        .data-card {
            background: #FFFFFF; /* Diubah jadi putih */
            border: 1px solid #E2E8F0;
            border-radius: 14px;
            overflow: hidden;
        }

        .data-card-header {
            padding: 1rem 1.25rem;
            border-bottom: 1px solid #E2E8F0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-weight: 600;
            font-size: .9rem;
            color: #0F172A;
        }

        .data-card-body { padding: 1.25rem; }

        /* General card-body padding */
        .card-body { padding: 1.5rem; }

        /* Site card */
        .site-card {
            background: #FFFFFF; /* Diubah jadi putih */
            border: 1px solid #E2E8F0;
            border-radius: 14px;
            transition: all .25s;
            overflow: hidden;
        }

        .site-card:hover {
            border-color: rgba(249,115,22,.4);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(148, 163, 184, 0.15); /* Shadow lembut khas light mode */
        }

        /* Health badge */
        .health-badge {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            padding: .2rem .65rem;
            border-radius: 100px;
            font-size: .75rem;
            font-weight: 600;
        }
        .health-badge.healthy { background: rgba(34,197,94,.12); color: #15803D; } /* Warna teks disesuaikan agar lebih kontras di background terang */
        .health-badge.warning { background: rgba(251,191,36,.15); color: #B45309; }
        .health-badge.fault   { background: rgba(239,68,68,.12);  color: #B91C1C; }
        .health-badge.offline { background: rgba(100,116,139,.12); color: #475569; }

        /* Metric row */
        .metric-row { display: flex; justify-content: space-between; align-items: center; padding: .5rem 0; border-bottom: 1px solid #F1F5F9; }
        .metric-row:last-child { border-bottom: none; }
        .metric-label { font-size: .8rem; color: #64748B; }
        .metric-value { font-family: 'JetBrains Mono', monospace; font-size: .85rem; font-weight: 500; color: #1E293B; }

        /* Panel grid */
        .panel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }

        .panel-item {
            background: #F0F9FF; /* Background panel diubah jadi biru muda cerah */
            border: 1px solid rgba(59,130,246,.2);
            border-radius: 10px;
            padding: 1rem;
            transition: all .2s;
        }

        .panel-item:hover { border-color: rgba(59,130,246,.5); }
        .panel-item.fault   { border-color: rgba(239,68,68,.3); background: #FEF2F2; } /* Merah muda cerah */
        .panel-item.warning { border-color: rgba(251,191,36,.4); background: #FFFBEB; } /* Kuning muda cerah */
        .panel-item.offline { opacity: .6; background: #F8FAFC; }

        .panel-number { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #2563EB; }
        .panel-sn     { font-size: .75rem; color: #64748B; margin-bottom: .5rem; }
        .panel-value  { font-family: 'JetBrains Mono', monospace; font-size: 1.1rem; font-weight: 600; color: #1E293B; }

        /* Chart container */
        .chart-wrap { position: relative; height: 280px; }

        /* Gauge */
        .gauge-wrap { text-align: center; padding: 1rem; }

        /* Form controls light */
        .form-control, .form-select {
            background: #FFFFFF;
            border-color: #CBD5E1;
            color: #1E293B;
        }
        .form-control:focus, .form-select:focus {
            background: #FFFFFF;
            border-color: var(--solar-orange);
            color: #1E293B;
            box-shadow: 0 0 0 3px rgba(249,115,22,.15);
        }
        .form-label { color: #475569; font-size: .85rem; font-weight: 500; }

        /* Table */
        .table { --bs-table-bg: transparent; --bs-table-color: #1E293B; }
        .table th { color: #475569; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; border-color: #E2E8F0; background-color: #F8FAFC; }
        .table td { border-color: #E2E8F0; vertical-align: middle; }
        .table tbody tr:hover td { background: #F8FAFC; }

        .table-light { background-color: #F8FAFC !important; border-color: #E2E8F0 !important; }
        .table-light th { background-color: #F8FAFC !important; border-color: #E2E8F0 !important; }

        /* Buttons */
        .btn-solar {
            background: linear-gradient(135deg, var(--solar-orange), #EA580C);
            border: none;
            color: #fff;
            font-weight: 600;
        }
        .btn-solar:hover { background: linear-gradient(135deg, #EA580C, #C2410C); color: #fff; }

        /* Scrollbar */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; } /* Scrollbar lebih terang */

        /* Live pulse */
        @keyframes pulse-dot {
            0%, 100% { opacity: 1; transform: scale(1); }
            50%       { opacity: .6; transform: scale(.8); }
        }
        .pulse { animation: pulse-dot 2s infinite; }

        /* ── SPS Dashboard ────────────────────────── */
        .sps-header { margin-bottom: 1.75rem; }
        .sps-header h1 { color: #0F172A; margin-bottom: .5rem; }
        .sps-header .text-secondary { color: #64748B; }

        .nav-tabs {
            border-bottom-color: #E2E8F0 !important;
        }

        .nav-tabs .nav-link {
            color: #64748B;
            border-bottom: 2px solid transparent;
            font-weight: 500;
            font-size: .9rem;
        }

        .nav-tabs .nav-link:hover { color: #1E293B; border-bottom-color: rgba(249,115,22,.4); }

        .nav-tabs .nav-link.active {
            color: var(--solar-orange);
            background: transparent;
            border-bottom-color: var(--solar-orange);
        }

        /* Overview cards */
        .overview-card {
            background: #FFFFFF;
            border: 1px solid #E2E8F0;
            border-radius: 12px;
            transition: all .25s;
        }

        .overview-card:hover { border-color: rgba(249,115,22,.3); }

        .overview-card .card-body { color: #1E293B; padding: 1.5rem; }

        .overview-card .card-header {
            background: transparent;
            border-bottom-color: #E2E8F0;
            color: #0F172A;
        }

        .overview-card .card-title {
            color: #0F172A;
            font-weight: 700;
        }

        .overview-card .text-secondary { color: #64748B; }

        .overview-card .bg-light { background: #F8FAFC !important; }

        /* Info box */
        .info-box {
            padding: 10px;
            background: #F8FAFC;
            border-radius: 10px;
            border: 1px solid #E2E8F0;
        }

        .info-box .icon { flex-shrink: 0; }

        .info-box .label { font-size: .8rem; color: #64748B; margin-bottom: .25rem; }

        .info-box .value { font-size: 1rem; font-weight: 700; color: #0F172A; font-family: 'JetBrains Mono', monospace; }

        /* Chart containers */
        .chart-container {
            position: relative;
            display: flex;
            width: 100%;
            /* height: auto; */
            margin: 0;
        }

        .chart-container-lg { height: 200px; }

        /* Flow Graph SVG */
        #flowGraph {
            position: relative;
            min-height: 490px;
            background: #F8FAFC; /* Background graph menjadi terang */
            border-radius: 10px;
            border: 1px solid #E2E8F0;
        }

        /* Specific Node Placements & Colors */
        .node {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            justify-self: center;
            width: 90px;
            height: 90px;
            border-radius: 50%;
            background-color: #FFFFFF; /* Isi lingkaran node diubah jadi putih */
            border: 3px solid #CBD5E1;  /* Garis lingkaran node disesuaikan */
            text-align: center;
            font-size: 0.85rem;
            color: #1E293B;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* Shadow diperhalus */
            z-index: 2;
        }
        
        .node.solar       { grid-column: 1; grid-row: 1; border-color: var(--solar-amber); }
        .node.grid        { grid-column: 2; grid-row: 1; border-color: var(--solar-blue); }
        .node.mppt        { grid-column: 1; grid-row: 2; border-color: var(--solar-amber); }
        .node.rectifier   { grid-column: 2; grid-row: 2; border-color: var(--solar-blue); }
        .node.load        { grid-column: 1 / span 2; grid-row: 3; border-color: var(--solar-red); }

        /* Integrated SVG Layer Vector Box */
        .svg-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            pointer-events: none;
        }

        .flow-line {
            fill: none;
            stroke: #E2E8F0; /* Garis alur default diubah jadi abu-abu terang */
            stroke-width: 3;
        }
        .pulse-dot {
            fill: none;
        }

        .enabled-flow {
            animation: flow-animation 2s linear infinite;
            stroke-width: 4;
            stroke-linecap: round;
            stroke-dasharray: 0, 18; 
        }

        /* Color profiles for flow paths tetap dipertahankan agar warna alur data menyala */
        .solar-flow     { stroke: var(--solar-amber); }
        .grid-flow      { stroke: var(--solar-blue); }
        .mppt-flow      { stroke: var(--solar-amber); }
        .rectifier-flow { stroke: var(--solar-blue); }

        /* Tab content */
        .tab-pane { animation: fadeIn .2s ease-in; }

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

        @keyframes flow-animation {
            from { stroke-dashoffset: 54; }
            to { stroke-dashoffset: 0; }
        }

        /* Responsive */
        @media (max-width: 991px) {
            #sidebar { transform: translateX(-100%); }
            #sidebar.open { transform: translateX(0); }
            #main-wrap { margin-left: 0; }
        }