:root {
    /* Light theme */
    --bg-primary: #f0f2f5;
    --bg-glass: rgba(255, 255, 255, 0.7);
    --text-primary: #1a1a1a;
    --text-secondary: #666;
    --border-color: rgba(0, 0, 0, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.1);
    --card-bg: rgba(255, 255, 255, 0.7);
    --blur-amount: 10px;
}

[data-theme="dark"] {
    /* Dark theme */
    --bg-primary: #1a1a1a;
    --bg-glass: rgba(30, 30, 30, 0.7);
    --text-primary: #ffffff;
    --text-secondary: #a0a0a0;
    --border-color: rgba(255, 255, 255, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.3);
    --card-bg: rgba(40, 40, 40, 0.7);
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease;
    min-height: 100vh;
}

/* Glass effect for cards and navbar */
.card, .navbar-glass {
    background: var(--bg-glass);
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 6px var(--shadow-color);
    transition: all 0.3s ease;
}

.card {
    border-radius: 15px;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px var(--shadow-color);
}

.navbar-glass {
    background: var(--bg-glass);
    border-bottom: 1px solid var(--border-color);
    /* .card also has backdrop-filter (line above), which creates its own
       stacking context. Without an explicit z-index here, the navbar (and
       any dropdown menu opened from it, e.g. Export CSV) paints behind the
       cards below it since they come later in DOM order. 1030 matches
       Bootstrap's own navbar z-index convention. */
    position: relative;
    z-index: 1030;
}

.card-header {
    background: var(--bg-glass);
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 1.25rem;
}

.btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.btn-icon:hover {
    background: var(--border-color);
    transform: scale(1.05);
}

.list-group-item {
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    margin-bottom: 0.5rem;
    border-radius: 10px !important;
    transition: all 0.3s ease;
}

.list-group-item:hover {
    transform: translateX(5px);
}

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

.table > :not(caption) > * > * {
    background: transparent;
    border-color: var(--border-color);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background: var(--bg-glass);
}

.form-control {
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.input-group-text {
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}


.form-control:focus {
    background: var(--bg-glass);
    border-color: var(--border-color);
    color: var(--text-primary);
    box-shadow: 0 0 0 0.25rem var(--shadow-color);
}

.modal-content {
    background: var(--bg-glass);
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
    border: 1px solid var(--border-color);
}

.modal-header, .modal-footer {
    border-color: var(--border-color);
}


.device-status {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
}

.status-online {
    background-color: #28a745;
}

.status-offline {
    background-color: #dc3545;
}

/* Device Status and Monitoring Data panels share a fixed height so their
   cards stay vertically aligned regardless of device/list count; the device
   list scrolls internally and the chart fills the remaining card-body space. */
.dashboard-panel {
    height: 560px;
    display: flex;
    flex-direction: column;
}

.dashboard-panel .card-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.chart-container {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}

/* Device Status is split into a fixed-size summary card plus two
   independently-scrollable Online/Offline cards, stacked together so the
   group as a whole still lines up with the chart panel's height. */
.device-status-stack {
    height: 560px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.device-summary-card {
    flex: 0 0 auto;
}

/* Online/Offline cards sit side by side (parallel columns) under the
   summary card, each taking half the width and the full remaining height. */
.device-status-columns {
    flex: 1 1 0;
    display: flex;
    gap: 1rem;
    min-height: 0;
}

.device-online-card,
.device-offline-card {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.device-online-card .card-body,
.device-offline-card .card-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.device-list-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}

@media (max-width: 991.98px) {
    /* Below the lg breakpoint the panels stack full-width instead of
       sitting side by side, so the shared fixed height (meant to align them
       horizontally) no longer applies - let each size to its own content. */
    .dashboard-panel {
        height: auto;
    }
    .device-status-stack {
        height: auto;
    }
    .device-status-columns {
        flex: 0 1 auto;
        flex-direction: column;
    }
    .device-online-card,
    .device-offline-card {
        flex: 0 1 auto;
    }
    .device-list-scroll {
        max-height: 320px;
    }
}

@media (max-width: 576px) {
    #chartTypeButtons {
        flex-wrap: wrap;
    }
    #chartTypeButtons .btn {
        flex: 1 1 45%;
    }
}

@media (max-width: 768px) {
    .table-responsive {
        position: relative;
    }
    .table-responsive::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 24px;
        background: linear-gradient(to right, transparent, var(--bg-primary));
        pointer-events: none;
    }
}

.btn-group {
    margin-top: 10px;
}

/* Force text to use theme variables */
[data-theme="dark"] body,
[data-theme="dark"] .modal-title,
[data-theme="dark"] .card-header,
[data-theme="dark"] .form-label,
[data-theme="dark"] .table,
[data-theme="dark"] .table th,
[data-theme="dark"] .form-text,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .btn {
    color: var(--text-primary) !important;
}

/* Secondary / muted text */
[data-theme="dark"] .text-muted,
[data-theme="dark"] .form-text,
[data-theme="dark"] small {
    color: var(--text-secondary) !important;
}

/* Input placeholder */
[data-theme="dark"] ::placeholder {
    color: var(--text-secondary) !important;
    opacity: 0.8;
}

/* Table header background tweak for readability */
[data-theme="dark"] .table thead th {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}


/* All form controls, including table inputs */
.form-control,
.table input.form-control,
.table td input {
    background: var(--bg-glass) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
    border-radius: 6px;
}

/* Focus state */
.form-control:focus,
.table input.form-control:focus,
.table td input:focus {
    background: var(--bg-glass) !important;    
}



/* Dark-mode safe table with glass effect and striped rows */
[data-theme="dark"] .table,
[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Even rows: regular glass */
[data-theme="dark"] .table tbody tr:nth-of-type(even) > * {
    background: rgba(40, 40, 40, 0.7); /* same as --card-bg for glass effect */
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
}

/* Odd rows: slightly lighter glass for striping. Bootstrap's own
   .table-striped rule sets a near-black --bs-table-striped-color on this
   exact selector, which otherwise wins over the general dark-theme text
   color rule above and made striped rows unreadable - set color explicitly
   here too. */
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background: rgba(50, 50, 50, 0.5);
    color: var(--text-primary);
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
}

/* Table headers */
[data-theme="dark"] .table thead th {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

/* Inputs inside table */
[data-theme="dark"] .table input.form-control,
[data-theme="dark"] .table td input {
    background: var(--bg-glass);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(var(--blur-amount));
    -webkit-backdrop-filter: blur(var(--blur-amount));
    border-radius: 6px;
}

/* Input focus state */
[data-theme="dark"] .table input:focus,
[data-theme="dark"] .table td input:focus {
    background: var(--bg-glass);
    color: var(--text-primary);
    border-color: var(--border-color);
    box-shadow: 0 0 0 0.25rem var(--shadow-color);
}