/* Dark Mode Styles */
body.dark {
    background: #0f172a;
    color: #e2e8f0;
}

body.dark .app-header,
body.dark .header,
body.dark .card,
body.dark .chart-card,
body.dark .flow-container,
body.dark .devices-panel,
body.dark .content-panel,
body.dark .stat-box,
body.dark .phase-box,
body.dark .device-card,
body.dark .device-item,
body.dark .kpi-card {
    background: #1e293b;
    color: #e2e8f0;
}

body.dark .app-header {
    border-top-color: #34d399;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

body.dark .card-title,
body.dark .panel-title,
body.dark .stat-label,
body.dark .phase-label,
body.dark .device-info,
body.dark .kpi-title,
body.dark .chart-title,
body.dark .chart-card-title,
body.dark .flow-title {
    color: #94a3b8;
}

body.dark .stat-value,
body.dark .phase-value,
body.dark .device-name,
body.dark .content-title,
body.dark .kpi-value,
body.dark h1 {
    color: #f1f5f9;
}

body.dark .nav-links a {
    color: #94a3b8;
}
body.dark .nav-links a:hover {
    background: #334155;
    color: #34d399;
}
body.dark .nav-links a.active {
    background: #059669;
    color: white;
}

body.dark .device-item:hover,
body.dark .device-card:hover {
    background: #334155;
}

body.dark .device-item.active {
    background: #064e3b;
    border-color: #34d399;
}

body.dark .table th {
    background: #334155;
    color: #94a3b8;
}

body.dark .table td {
    border-color: #334155;
}

body.dark .table tr:hover {
    background: #334155;
}

body.dark .time-btn {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

body.dark .time-btn:hover {
    border-color: #34d399;
    color: #34d399;
}

body.dark .time-btn.active {
    background: #059669;
    border-color: #059669;
    color: white;
}

body.dark .section-title {
    color: #94a3b8;
    border-color: #334155;
}

body.dark .sparkline-container {
    background: #334155;
}

body.dark .chart-header,
body.dark .chart-card-header,
body.dark .flow-header {
    border-color: #334155;
}

body.dark .refresh-status {
    color: #64748b;
}

body.dark .refresh-dot {
    background: #34d399;
}

body.dark .kpi-unit,
body.dark .power-unit {
    color: #64748b;
}

body.dark .detail-label {
    color: #64748b;
}

body.dark .detail-value {
    color: #e2e8f0;
}

body.dark .details-row {
    border-color: #334155;
}

body.dark .power-row {
    background: #064e3b;
}

body.dark .power-row.negative {
    background: #450a0a;
}

body.dark .phase-total {
    background: #334155;
}

body.dark .device-ip {
    color: #64748b;
}

/* Theme Toggle Button */
.theme-toggle {
    padding: 6px 12px;
    border: 1px solid #e2e8f0;
    background: white;
    color: #475569;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.15s;
}

.theme-toggle:hover {
    border-color: #059669;
    color: #059669;
}

body.dark .theme-toggle {
    background: #334155;
    border-color: #475569;
    color: #94a3b8;
}

body.dark .theme-toggle:hover {
    border-color: #34d399;
    color: #34d399;
}