:root {
    --bg-color: #f1f5f9; /* Slate 100 */
    --card-bg: #ffffff;
    --text-color: #1e293b; /* Slate 800 */
    --muted-text: #64748b; /* Slate 500 */
    --border-color: #e2e8f0; /* Slate 200 */
    --accent-color: #6366f1; /* Indigo 500 */
    --tag-bg: #f8fafc; /* Slate 50 */
    --tag-border: #cbd5e1; /* Slate 300 */
}

html[data-theme="dark"] {
    --bg-color: #0f172a; /* Slate 900 */
    --card-bg: #1e293b; /* Slate 800 */
    --text-color: #f1f5f9; /* Slate 100 */
    --muted-text: #94a3b8; /* Slate 400 */
    --border-color: #334155; /* Slate 700 */
    --accent-color: #818cf8; /* Indigo 400 */
    --tag-bg: #334155; /* Slate 700 */
    --tag-border: #475569; /* Slate 600 */
}
/* ... rest of the file ... */

html[data-theme="dark"] body {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
}

body {
    font-family: Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    min-height: 100vh;
    margin: 0;
    transition: background-color 0.3s, color 0.3s;
}

.login-container, .dashboard-container {
    background-color: var(--card-bg);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: center;
    transition: background-color 0.3s;
}

/* Updated Accent Classes */
.btn-accent {
    background-color: var(--accent-color);
    color: #fff;
    border: none;
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    transition: background-color 0.2s;
}
.btn-accent:disabled {
    background-color: var(--muted-text) !important;
    cursor: not-allowed;
    filter: none !important;
}
.btn-accent:hover {
    filter: brightness(0.9);
    color: #fff;
}
.text-accent {
    color: var(--accent-color) !important;
}
.bg-accent {
    background-color: var(--accent-color) !important;
    color: #fff !important;
}
.border-accent {
    border-color: var(--accent-color) !important;
}
.btn-outline-accent {
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
    background-color: transparent;
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    transition: all 0.2s;
}
.btn-outline-accent:hover {
    background-color: var(--accent-color);
    color: #fff;
}

/* Updated Task Tag Styles */
.task-tag {
    display: inline-block;
    padding: 0.3rem 0.6rem;
    margin: 0.2rem;
    border-radius: 15px;
    border: 1px solid var(--tag-border);
    cursor: pointer;
    transition: all 0.2s;
    background-color: var(--tag-bg);
    color: var(--text-color);
}
.task-tag.selected {
    background-color: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}
.task-tag input { display: none; }
.task-row.selected { background-color: #d4edda; border-radius: 4px; }
.task-row { cursor: pointer; transition: background-color 0.15s; }
.task-row:hover { background-color: #f0f0f0; }

/* Global Dark Mode Overrides */
html[data-theme="dark"] body {
    background-color: var(--bg-color) !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .accordion-button,
html[data-theme="dark"] .accordion-collapse,
html[data-theme="dark"] .accordion-body,
html[data-theme="dark"] .table,
html[data-theme="dark"] .table-light,
html[data-theme="dark"] .table-light th,
html[data-theme="dark"] .table-light td,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] #bulkActionArea,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .table tbody tr.device-row,
html[data-theme="dark"] .table tbody tr.device-row td {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
}

/* Fixed bulk action area */
html[data-theme="dark"] #bulkActionArea {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

html[data-theme="dark"] #bulkActionArea #selectedDevicesList {
    color: var(--text-color) !important;
}

/* Updated Header Styles - more subtle */
.card-header {
    background-color: var(--tag-bg) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
    font-weight: 600;
}
/* Remove explicit background colors for headers */
.bg-accent, .bg-warning, .bg-emerald {
    background-color: var(--tag-bg) !important;
}


/* Modern Tabs */
.nav-tabs {
    border-bottom: none !important;
}
.nav-tabs .nav-link {
    border: none !important;
    color: var(--muted-text);
    border-radius: 20px !important;
    padding: 0.5rem 1.5rem;
    transition: all 0.2s;
}
.nav-tabs .nav-link.active {
    background-color: var(--tag-border) !important;
    color: var(--text-color) !important;
}
.nav-tabs .nav-link:hover {
    color: var(--text-color);
}