/* ─── Dark Mode ─────────────────────────────────────────────── */
html.dark-mode,
html.dark-mode body {
    background-color: #1a1a1a;
    color: #e0e0e0;
}

html.dark-mode .card {
    background-color: #2d2d2d;
    border-color: #3d3d3d;
    color: #e0e0e0;
}

html.dark-mode .card-header {
    background-color: #252525;
    border-color: #3d3d3d;
    color: #e0e0e0;
}

html.dark-mode .form-control,
html.dark-mode .form-select {
    background-color: #333333;
    border-color: #444444;
    color: #e0e0e0;
}

html.dark-mode .form-control:focus,
html.dark-mode .form-select:focus {
    background-color: #3a3a3a;
    border-color: var(--ws-primary, #128C7E);
    color: #e0e0e0;
}

html.dark-mode .table {
    color: #e0e0e0;
}

html.dark-mode .table thead th {
    background-color: #2d2d2d;
    border-color: #3d3d3d;
}

html.dark-mode .table tbody tr {
    background-color: #252525;
    border-color: #3d3d3d;
}

html.dark-mode .table tbody tr:hover {
    background-color: #2d2d2d;
}

html.dark-mode .list-group-item {
    background-color: #2d2d2d;
    border-color: #3d3d3d;
    color: #e0e0e0;
}

html.dark-mode .list-group-item.active {
    background-color: var(--ws-primary, #128C7E);
    border-color: var(--ws-primary, #128C7E);
}

html.dark-mode .badge {
    background-color: #3d3d3d;
    color: #e0e0e0;
}

html.dark-mode .alert {
    background-color: #2d2d2d;
    border-color: #3d3d3d;
    color: #e0e0e0;
}

html.dark-mode .modal-content {
    background-color: #2d2d2d;
    color: #e0e0e0;
}

html.dark-mode .modal-header,
html.dark-mode .modal-footer {
    border-color: #3d3d3d;
}

html.dark-mode .text-muted {
    color: #a0a0a0 !important;
}

html.dark-mode .breadcrumb {
    background-color: #2d2d2d;
}

html.dark-mode .breadcrumb-item.active {
    color: #a0a0a0;
}

html.dark-mode .nav-section-label {
    color: rgba(255, 255, 255, 0.3);
}

html.dark-mode .top-row {
    background-color: #1e1e1e;
    border-bottom: 1px solid #3d3d3d;
}

/* ─── Compact Mode ──────────────────────────────────────────── */
html.compact-mode .card {
    margin-bottom: 0.75rem;
}

html.compact-mode .card-body {
    padding: 0.75rem;
}

html.compact-mode .form-group,
html.compact-mode .mb-3 {
    margin-bottom: 0.75rem !important;
}

html.compact-mode .btn {
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
}

html.compact-mode h1, html.compact-mode .h1 { font-size: 1.75rem; }
html.compact-mode h2, html.compact-mode .h2 { font-size: 1.5rem; }
html.compact-mode h3, html.compact-mode .h3 { font-size: 1.25rem; }
html.compact-mode h4, html.compact-mode .h4 { font-size: 1.1rem; }
html.compact-mode h5, html.compact-mode .h5 { font-size: 1rem; }

html.compact-mode .table td,
html.compact-mode .table th {
    padding: 0.5rem;
}

html.compact-mode .list-group-item {
    padding: 0.5rem 1rem;
}