/* --- CORE VARIABLES --- */
:root { 
    --logo-red: #e63946; 
    --logo-gray: #a8a8a8; 
}

/* Light Mode specific variables (Very light gray with subtle blue tint) */
[data-bs-theme="light"] {
    --bs-body-bg: #ffffff; 
    --card-bg: #eef2f6; 
    --row-bg: #eef2f6; /* MATCHES CARD BG SO GRADIENTS BLEND */
    --row-alt-bg: #e2e8f0;
    --border-color: #cbd5e1;
    --text-muted-custom: #555555; 
    --chip-bg: #ffffff;
    --bs-body-color: #000000; 
    
    /* Deeper, bolder accents for Light Mode */
    --accent: #00b36e; 
    --upcoming: #ffd445; 
    --active-orange: #ea580c; 
    --heat-red: #dc2626; 
    --completed: #94a3b8; 
}

/* Dark Mode specific variables */
[data-bs-theme="dark"] {
    --bs-body-bg: #0f1015;
    --card-bg: #1a1d24;
    --row-bg: #1a1d24; /* MATCHES CARD BG SO GRADIENTS BLEND */
    --row-alt-bg: #121212;
    --border-color: #2b303b;
    --text-muted-custom: #a8a8a8;
    --chip-bg: #121212;
    --bs-body-color: #d3d3d3; 
    
    /* Neon accents for Dark Mode */
    --accent: #00ff9d; 
    --upcoming: #ffd445; 
    --active-orange: #ff9100; 
    --heat-red: #ff3333; 
    --completed: #888888; 
}

body { background-color: var(--bs-body-bg) !important; color: var(--bs-body-color); }

/* --- CUSTOM TEXT ADAPTATION CLASSES --- */
.text-dynamic { color: var(--bs-body-color) !important; }
.text-dynamic-muted { color: var(--text-muted-custom) !important; }

/* --- GLOBAL SCROLLBAR --- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(136, 136, 136, 0.4); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(136, 136, 136, 0.8); }

/* --- UTILITIES --- */
.text-accent { color: var(--accent) !important; }
.text-heat { color: var(--heat-red) !important; }
.text-logo-red { color: var(--logo-red) !important; }
.text-logo-gray { color: var(--logo-gray) !important; }
.cursor-pointer { cursor: pointer; }
.d-none-permission { display: none !important; }

/* --- TOP STAT CARDS (Prominent 75% Gradients & Fixed Text Color) --- */
.stat-card-custom {
    border: 1px solid var(--border-color);
    border-left-width: 6px !important;
    border-radius: 12px;
    background-color: var(--card-bg) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: transform 0.2s;
}
.stat-card-custom:hover { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0,0,0,0.1); }

.stat-card-custom h3 { color: var(--bs-body-color) !important; }

#card-events { border-left-color: #0d6efd !important; background: linear-gradient(90deg, rgba(13, 110, 253, 0.25) 0%, rgba(13, 110, 253, 0.05) 50%, var(--card-bg) 75%) !important; }
#card-security { border-left-color: #198754 !important; background: linear-gradient(90deg, rgba(25, 135, 84, 0.25) 0%, rgba(25, 135, 84, 0.05) 50%, var(--card-bg) 75%) !important; }
#card-realtime { border-left-color: #dc3545 !important; background: linear-gradient(90deg, rgba(220, 53, 69, 0.25) 0%, rgba(220, 53, 69, 0.05) 50%, var(--card-bg) 75%) !important; }
#card-hvac { border-left-color: #0dcaf0 !important; background: linear-gradient(90deg, rgba(13, 202, 240, 0.25) 0%, rgba(13, 202, 240, 0.05) 50%, var(--card-bg) 75%) !important; }
#card-energy { 
    border-top: none !important; border-right: none !important; border-bottom: none !important; 
    border-left: 6px solid #ffc107 !important; 
    background: linear-gradient(90deg, rgba(255, 193, 7, 0.25) 0%, rgba(255, 193, 7, 0.05) 50%, var(--card-bg) 75%) !important; 
}

/* --- HVAC ZONE CHIPS & BACKGROUND SPARKLINES --- */
.zone-chip { 
    position: relative;
    overflow: hidden;
    background-color: var(--chip-bg); 
    border: 1px solid var(--border-color); 
    border-radius: 8px; 
    padding: 12px 15px; 
    cursor: pointer; 
    transition: all 0.2s; 
    min-height: 80px; 
}
.zone-chip:hover { border-color: var(--text-muted-custom); background-color: var(--row-bg); }
.zone-chip.active-control { border: 2px solid var(--accent) !important; box-shadow: 0 0 15px rgba(0, 255, 157, 0.15); }
.zone-temp { font-size: 1.4rem; font-weight: 700; color: var(--bs-body-color); line-height: 1; }

.zone-content-wrapper {
    position: relative;
    z-index: 1; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.sparkline-container { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 55%; 
    z-index: 0; 
    pointer-events: none; 
}
.bg-sparkline { width: 100%; height: 100%; }
.sparkline-fill { fill: var(--accent); opacity: 0.1; stroke: none; transition: opacity 0.3s; }
.sparkline-line { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0.4; stroke-linecap: round; stroke-linejoin: round; transition: opacity 0.3s; }

[data-bs-theme="dark"] .sparkline-fill { opacity: 0.15; }
[data-bs-theme="dark"] .sparkline-line { opacity: 0.6; }

/* --- STATUS PILLS --- */
.status-pill { padding: 5px 12px; border-radius: 6px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; display: inline-block; }
.status-live { background: rgba(0, 255, 157, 0.15); border: 1px solid var(--accent); color: var(--accent); box-shadow: 0 0 10px rgba(0, 255, 157, 0.1); animation: pulse-green-glow 2s infinite ease-in-out; }
.status-future { background: rgba(255, 212, 69, 0.1); border: 1px solid var(--upcoming); color: #d4a900; } 
[data-bs-theme="dark"] .status-future { color: var(--upcoming); }

@keyframes pulse-green-glow { 
    0% { box-shadow: 0 0 5px rgba(0, 255, 157, 0.1); border-color: var(--accent); } 
    50% { box-shadow: 0 0 20px rgba(0, 255, 157, 0.6); border-color: var(--accent); } 
    100% { box-shadow: 0 0 5px rgba(0, 255, 157, 0.1); border-color: var(--accent); } 
}

/* --- SCHEDULE TABLE (BORDERS AGGRESSIVELY REMOVED, ROW-LEVEL GRADIENTS) --- */
.table-custom { border-collapse: separate; border-spacing: 0 8px; width: 100%; border: none !important; }
.table-custom > :not(caption) > * > * { border-bottom-width: 0 !important; border-top-width: 0 !important; }
.table-custom td { padding: 15px; vertical-align: middle; border-top: none !important; border-bottom: none !important; background: transparent !important; }

/* Standard Row Backgrounds */
.table-custom tr:not(.row-ACTIVE):not(.row-PENDING):not(.tomorrow-event):not(.row-COMPLETED) { background-color: var(--row-bg); }

.table-custom td:first-child { border-left: 1px solid var(--border-color); border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.table-custom td:last-child { border-right: 1px solid var(--border-color); border-top-right-radius: 8px; border-bottom-right-radius: 8px; }

/* Apply Gradients to the TR, spanning 75% of the total width */
tr.row-ACTIVE { 
    background: linear-gradient(90deg, rgba(0, 255, 157, 0.20) 0%, rgba(0, 255, 157, 0.05) 50%, var(--row-bg) 75%) !important; 
}
tr.row-ACTIVE td:first-child { border-left: 4px solid var(--accent) !important; }

tr.row-PENDING { 
    background: linear-gradient(90deg, rgba(255, 212, 69, 0.20) 0%, rgba(255, 212, 69, 0.05) 50%, var(--row-bg) 75%) !important; 
}
tr.row-PENDING td:first-child { border-left: 4px solid var(--upcoming) !important; }

tr.tomorrow-event { 
    background: linear-gradient(90deg, rgba(13, 202, 240, 0.20) 0%, rgba(13, 202, 240, 0.05) 50%, var(--row-bg) 75%) !important; 
}
tr.tomorrow-event td:first-child { border-left: 4px solid #0dcaf0 !important; }

/* Completed Rows */
tr.row-COMPLETED { background-color: var(--row-alt-bg) !important; }
tr.row-COMPLETED td:first-child { border-left: 4px solid var(--completed) !important; }

/* --- DOOR BUTTONS (Gradient Border Outline Style) --- */
.btn-door { 
    /* Create a gradient border with a dynamic fill matching the card background */
    background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
                linear-gradient(to top right, #005eb8, #b5be12) border-box;
    border: 2px solid transparent; 
    color: var(--bs-body-color) !important; 
    font-size: 0.75rem; 
    padding: 5px 15px; /* Offset slightly for the 2px border */
    border-radius: 50px; 
    font-weight: 600; 
    transition: 0.2s; 
    box-shadow: 0 4px 10px rgba(0, 94, 184, 0.15);
}
.btn-door:hover { 
    transform: scale(1.02); 
    box-shadow: 0 6px 15px rgba(0, 94, 184, 0.3);
}

/* Future/Upcoming Door Button gets the same brand border, but slightly muted */
.btn-door-future { 
    background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
                linear-gradient(to top right, #005eb8, #b5be12) border-box;
    border: 2px solid transparent; 
    color: var(--text-muted-custom) !important; 
    font-size: 0.75rem; 
    padding: 5px 15px; 
    border-radius: 50px; 
    font-weight: 600; 
    opacity: 0.65;
    transition: 0.2s; 
}
.btn-door-future:hover {
    opacity: 0.85;
}

/* --- SLIDERS --- */
input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%; cursor: pointer; margin-top: -8px; border: 2px solid #fff; }
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 4px; cursor: pointer; background: #ccc; border-radius: 2px; }
[data-bs-theme="dark"] input[type=range]::-webkit-slider-runnable-track { background: #333; }
#heatInput::-webkit-slider-thumb { background: var(--heat-red); box-shadow: 0 0 10px var(--heat-red); }
#coolInput::-webkit-slider-thumb { background: var(--accent); box-shadow: 0 0 10px var(--accent); }

/* --- SPINNER --- */
.loading-pulse { width: 100%; padding: 40px; display: flex; justify-content: center; }
.spinner { width: 40px; height: 40px; border: 4px solid var(--border-color); border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }