/* ============================================================================
   FEROBY PRO — DARK MODE CSS (Custom Properties + Bootstrap 5.3 Override)
   ============================================================================ */

/* --- LIGHT THEME (Default) --- */
:root,
[data-bs-theme="light"] {
    --fb-body-bg: #f4f5f7;
    --fb-card-bg: #ffffff;
    --fb-card-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    --fb-text: #212529;
    --fb-text-muted: #6c757d;
    --fb-text-secondary: #495057;
    --fb-border: #dee2e6;
    --fb-border-light: #e9ecef;
    --fb-input-bg: #ffffff;
    --fb-input-border: #ced4da;
    --fb-navbar-bg: #0d6efd;
    --fb-hover-bg: rgba(0, 0, 0, 0.03);
    --fb-code-bg: #f8f9fa;
    --fb-modal-bg: #ffffff;
    --fb-modal-header-bg: #212529;
    --fb-chart-grid: rgba(0, 0, 0, 0.05);
    --fb-chart-text: #666666;
    --fb-chart-tooltip-bg: #ffffff;
    --fb-chart-tooltip-text: #212529;
    --fb-badge-muted-bg: #6c757d;
    --fb-alert-bg: #f8f9fa;
    --fb-bg-light: #f8f9fa;
    --fb-kpi-title: #6c757d;
    --fb-kpi-val: #212529;
    --fb-progress-bg: #e9ecef;
    --fb-progress-border: #dee2e6;
    --fb-login-bg: #e9ecef;
    --fb-highlight-bg: linear-gradient(135deg, #e3f2fd, #f3e5f5);
}

/* --- DARK THEME --- */
[data-bs-theme="dark"] {
    --fb-body-bg: #1a1d23;
    --fb-card-bg: #2b2f38;
    --fb-card-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    --fb-text: #e1e4e8;
    --fb-text-muted: #8b949e;
    --fb-text-secondary: #b1bac4;
    --fb-border: #373b44;
    --fb-border-light: #30363d;
    --fb-input-bg: #21262d;
    --fb-input-border: #444c56;
    --fb-navbar-bg: #1e3a5f;
    --fb-hover-bg: rgba(255, 255, 255, 0.05);
    --fb-code-bg: #21262d;
    --fb-modal-bg: #2b2f38;
    --fb-modal-header-bg: #161b22;
    --fb-chart-grid: rgba(255, 255, 255, 0.18);
    --fb-chart-text: #c9d1d9;
    --fb-chart-tooltip-bg: #2b2f38;
    --fb-chart-tooltip-text: #e1e4e8;
    --fb-badge-muted-bg: #444c56;
    --fb-alert-bg: #21262d;
    --fb-bg-light: #21262d;
    --fb-kpi-title: #8b949e;
    --fb-kpi-val: #e1e4e8;
    --fb-progress-bg: #30363d;
    --fb-progress-border: #444c56;
    --fb-login-bg: #161b22;
    --fb-highlight-bg: linear-gradient(135deg, #1e2a3a, #2a1e3a);
}

/* ============================================================================
   GLOBAL OVERRIDES — Usano le variabili per entrambi i temi
   ============================================================================ */

body {
    background-color: var(--fb-body-bg) !important;
    color: var(--fb-text) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* --- Card custom Feroby --- */
.card-custom {
    background: var(--fb-card-bg) !important;
    box-shadow: var(--fb-card-shadow) !important;
    border-color: var(--fb-border) !important;
}

/* --- Navbar --- */
.navbar-custom {
    background-color: var(--fb-navbar-bg) !important;
    transition: background-color 0.3s ease;
}

/* --- Modali --- */
[data-bs-theme="dark"] .modal-content {
    background-color: var(--fb-modal-bg) !important;
    border-color: var(--fb-border) !important;
    color: var(--fb-text) !important;
}

[data-bs-theme="dark"] .modal-header.bg-dark {
    background-color: var(--fb-modal-header-bg) !important;
}

/* --- Form Controls in dark --- */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--fb-input-bg) !important;
    border-color: var(--fb-input-border) !important;
    color: var(--fb-text) !important;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    border-color: #4a90d9 !important;
    box-shadow: 0 0 0 0.25rem rgba(74, 144, 217, 0.25) !important;
}

/* --- Card Bootstrap in dark --- */
[data-bs-theme="dark"] .card {
    background-color: var(--fb-card-bg) !important;
    border-color: var(--fb-border) !important;
    color: var(--fb-text) !important;
}

/* --- Card termostato con relay attivo (heating/cooling) --- */
.card-relay-active {
    border-color: #20c997 !important;
    box-shadow: 0 0 12px rgba(32, 201, 151, 0.3), 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}

[data-bs-theme="dark"] .card-relay-active {
    border-color: #20c997 !important;
    box-shadow: 0 0 16px rgba(32, 201, 151, 0.4), 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

[data-bs-theme="dark"] .card-header {
    border-color: var(--fb-border) !important;
}

/* --- Backgrounds --- */
[data-bs-theme="dark"] .bg-white {
    background-color: var(--fb-card-bg) !important;
}

[data-bs-theme="dark"] .bg-light {
    background-color: var(--fb-bg-light) !important;
}

/* --- Testo --- */
[data-bs-theme="dark"] .text-dark {
    color: var(--fb-text) !important;
}

[data-bs-theme="dark"] .text-muted {
    color: var(--fb-text-muted) !important;
}

[data-bs-theme="dark"] .text-secondary {
    color: var(--fb-text-secondary) !important;
}

/* --- Tabelle --- */
[data-bs-theme="dark"] .table {
    color: var(--fb-text) !important;
    --bs-table-bg: var(--fb-card-bg);
    --bs-table-striped-bg: var(--fb-bg-light);
    --bs-table-hover-bg: var(--fb-hover-bg);
    border-color: var(--fb-border) !important;
}

[data-bs-theme="dark"] .table thead th {
    background-color: var(--fb-bg-light) !important;
    border-color: var(--fb-border) !important;
    color: var(--fb-text) !important;
}

/* --- Bordi --- */
[data-bs-theme="dark"] .border {
    border-color: var(--fb-border) !important;
}

[data-bs-theme="dark"] .border-bottom {
    border-color: var(--fb-border) !important;
}

/* --- List Group --- */
[data-bs-theme="dark"] .list-group-item {
    background-color: var(--fb-card-bg) !important;
    border-color: var(--fb-border) !important;
    color: var(--fb-text) !important;
}

/* --- Alert --- */
[data-bs-theme="dark"] .alert {
    border-color: var(--fb-border) !important;
}

/* --- Login page --- */
[data-bs-theme="dark"] .login-card {
    background: var(--fb-card-bg) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

/* --- App Menu Modal icons in dark --- */
[data-bs-theme="dark"] .app-icon-btn {
    background-color: var(--fb-card-bg) !important;
    border-color: var(--fb-border) !important;
}

[data-bs-theme="dark"] .app-icon-btn .text-dark {
    color: var(--fb-text) !important;
}

/* --- Swipe dots in dark --- */
[data-bs-theme="dark"] .swipe-dots {
    background: rgba(0, 0, 0, 0.7);
}

/* --- Pagination --- */
[data-bs-theme="dark"] .page-link {
    background-color: var(--fb-card-bg) !important;
    border-color: var(--fb-border) !important;
    color: var(--fb-text) !important;
}

[data-bs-theme="dark"] .page-link:hover {
    background-color: var(--fb-hover-bg) !important;
}

/* --- Progress bars (PID) --- */
[data-bs-theme="dark"] .progress-hysteresis {
    background-color: var(--fb-progress-bg) !important;
    border-color: var(--fb-progress-border) !important;
}

/* --- KPI --- */
[data-bs-theme="dark"] .kpi-title {
    color: var(--fb-kpi-title) !important;
}

[data-bs-theme="dark"] .kpi-val {
    color: var(--fb-kpi-val) !important;
}

/* --- Theme Toggle Button --- */
.theme-toggle {
    cursor: pointer;
    font-size: 1.1rem;
    padding: 4px 10px;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border-radius: 8px;
    transition: background 0.2s, transform 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

/* --- Scrollbar in dark --- */
[data-bs-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--fb-body-bg);
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--fb-border);
    border-radius: 4px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #555;
}