/* ????????????????????????????????????????????????????????????????????????????
   ADMIN SHARED STYLES
   Gedeelde stijlen voor alle admin pagina's in BBuilder
   ???????????????????????????????????????????????????????????????????????????? */

/* Reserveer altijd ruimte voor de verticale scrollbar zodat deze niet
   intermitterend verschijnt/verdwijnt wanneer de content-hoogte rond de
   viewport-hoogte schommelt (bv. tab-wissels met async-geladen velden).
   Voorkomt layout-shift en een "soms ontbrekende" scrollbalk. */
html {
    scrollbar-gutter: stable;
}

/* ?? Loading State ???????????????????????????????????????????????????????????? */
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 1rem;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-container span {
    color: #64748b;
    font-size: 0.95rem;
}

/* ?? Error State ?????????????????????????????????????????????????????????????? */
.error-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 1rem;
    text-align: center;
    padding: 2rem;
}

.error-icon {
    font-size: 3rem;
}

.error-container h2 {
    margin: 0;
    color: #1e293b;
}

.error-container p {
    color: #64748b;
    margin: 0;
}

/* ?? Header Layout ???????????????????????????????????????????????????????????? */
.header-left {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.page-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
}

.header-subtitle {
    font-size: 0.85rem;
    color: #64748b;
}

.header-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ?? Breadcrumb ??????????????????????????????????????????????????????????????? */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.breadcrumb-link {
    color: #3b82f6;
    cursor: pointer;
    text-decoration: none;
}

.breadcrumb-link:hover {
    text-decoration: underline;
}

.breadcrumb-sep {
    color: #94a3b8;
}

.breadcrumb-current {
    color: #64748b;
}

/* ?? Action Buttons ??????????????????????????????????????????????????????????? */
.action-btn {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
    color: #475569;
    white-space: nowrap;
}

.action-btn:hover:not(:disabled) {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.action-btn.primary {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

.action-btn.primary:hover:not(:disabled) {
    background: #2563eb;
}

.action-btn.secondary {
    background: #1e293b;
    border-color: #1e293b;
    color: white;
}

.action-btn.secondary:hover:not(:disabled) {
    background: #334155;
}

.action-btn.danger {
    color: #dc2626;
    border-color: #fecaca;
}

.action-btn.danger:hover:not(:disabled) {
    background: #fef2f2;
    border-color: #f87171;
}

.action-btn.warning {
    color: #d97706;
    border-color: #fde68a;
}

.action-btn.warning:hover:not(:disabled) {
    background: #fffbeb;
    border-color: #f59e0b;
}

.action-btn.small {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    white-space: nowrap;
    flex-direction: row;
}

.btn-icon {
    font-size: 1rem;
}

/* ?? Stat Cards ??????????????????????????????????????????????????????????????? */
.stat-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #f8fafc;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.stat-card.highlight {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-color: #f59e0b;
}

.stat-card.error {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border-color: #f87171;
}

.stat-card.success {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    border-color: #86efac;
}

.stat-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.stat-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}

.stat-label {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.2;
}

/* ?? Cards ???????????????????????????????????????????????????????????????????? */
.card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    padding: 1.25rem 1.5rem;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.card-header h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.count-badge {
    background: #e2e8f0;
    color: #475569;
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-weight: 500;
}

/* ?? Admin Card ??????????????????????????????????????????????????????????????? */
.admin-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.admin-card h2 {
    margin: 0 0 0.25rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.admin-card h3 {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0.5rem 0 0.25rem;
    color: #475569;
}

/* ?? Admin Page Layout ???????????????????????????????????????????????????????? */
.admin-page {
    max-width: 100%;
    margin: 0 auto;
    padding: 1.5rem 3rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    background: #f8fafc;
    min-height: calc(100vh - 200px);
}

.admin-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 1200px) {
    .admin-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .admin-page {
        padding: 1rem 1.5rem 4rem;
    }
}

/* ?? Empty State ?????????????????????????????????????????????????????????????? */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: white;
}

.empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.empty-state h3 {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
}

.empty-state p {
    margin: 0;
    color: #64748b;
}

/* ?? Settings Card ???????????????????????????????????????????????????????????? */
.settings-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.5rem 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.settings-card h2 {
    margin: 0 0 1.25rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e2e8f0;
}

/* ?? Settings Form ???????????????????????????????????????????????????????????? */
.settings-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 800px;
}

.settings-form .form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.settings-form .form-group:last-child {
    margin-bottom: 0;
}

.settings-form .form-group label {
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: #475569;
}

/* ?? Save Indicator ??????????????????????????????????????????????????????????? */
.save-indicator {
    margin-left: 0.25rem;
    color: #22c55e;
    font-weight: bold;
}

/* ?? Input with Button ???????????????????????????????????????????????????????? */
.input-with-button {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.input-with-button .input {
    flex: 1;
}

/* ?? Notes Section ???????????????????????????????????????????????????????????? */
.notes-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.note-item {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem;
    background: #f8fafc;
    transition: all 0.2s ease;
}

.note-item:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.note-item.important {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-color: #fecaca;
}

.note-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.note-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.note-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    background: #eef2ff;
    color: #3730a3;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.note-important-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    background: #dc2626;
    color: white;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.note-author {
    color: #64748b;
    font-size: 0.8rem;
}

.note-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.note-content {
    white-space: pre-wrap;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e2e8f0;
    color: #475569;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════════════════════
   DARK MODE THEME
   Stijlvolle donkere modus voor BBuilder Admin
   ════════════════════════════════════════════════════════════════════════════ */

/* CSS Variabelen voor thema's */
:root {
    /* Light mode (default) */
    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f1f5f9;
    --bg-hover: #e2e8f0;
    --bg-input: #ffffff;
    
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-tertiary: #64748b;
    --text-muted: #94a3b8;
    
    --border-primary: #e2e8f0;
    --border-secondary: #cbd5e1;
    --border-focus: #3b82f6;
    
    --accent-primary: #3b82f6;
    --accent-hover: #2563eb;
    --accent-success: #22c55e;
    --accent-warning: #f59e0b;
    --accent-error: #dc2626;
    
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
    
    --transition-theme: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Dark mode variabelen */
html.dark-mode {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --bg-hover: #475569;
    --bg-input: #1e293b;
    
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    --text-muted: #64748b;
    
    --border-primary: #334155;
    --border-secondary: #475569;
    --border-focus: #60a5fa;
    
    --accent-primary: #60a5fa;
    --accent-hover: #3b82f6;
    --accent-success: #4ade80;
    --accent-warning: #fbbf24;
    --accent-error: #f87171;
    
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.5);
}

/* ── Base Dark Mode Overrides ────────────────────────────────────────────────── */
html.dark-mode body {
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* ── Site Header Logo - Force white text ─────────────────────────────────────── */
html.dark-mode .logo,
html.dark-mode .logo-text,
html.dark-mode a.logo .logo-text,
html.dark-mode .site-header .logo-text {
    color: #ffffff !important;
}

/* ── Loading State Dark Mode ─────────────────────────────────────────────────── */
html.dark-mode .loading-spinner {
    border-color: var(--border-primary);
    border-top-color: var(--accent-primary);
}

html.dark-mode .loading-container span {
    color: var(--text-tertiary);
}

/* ── Error State Dark Mode ───────────────────────────────────────────────────── */
html.dark-mode .error-container h2 {
    color: var(--text-primary);
}

html.dark-mode .error-container p {
    color: var(--text-tertiary);
}

/* ── Header Dark Mode ────────────────────────────────────────────────────────── */
html.dark-mode .page-title {
    color: var(--text-primary);
}

html.dark-mode .header-subtitle {
    color: var(--text-tertiary);
}

/* ── Breadcrumb Dark Mode ────────────────────────────────────────────────────── */
html.dark-mode .breadcrumb-link {
    color: var(--accent-primary);
}

html.dark-mode .breadcrumb-sep,
html.dark-mode .breadcrumb-current {
    color: var(--text-tertiary);
}

/* ── Action Buttons Dark Mode ────────────────────────────────────────────────── */
html.dark-mode .action-btn {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
    color: var(--text-secondary);
    transition: var(--transition-theme);
}

html.dark-mode .action-btn:hover:not(:disabled) {
    background: var(--bg-tertiary);
    border-color: var(--border-secondary);
    color: var(--text-primary);
}

html.dark-mode .action-btn.primary {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #ffffff;
}

html.dark-mode .action-btn.primary:hover:not(:disabled) {
    background: var(--accent-hover);
}

html.dark-mode .action-btn.secondary {
    background: var(--bg-tertiary);
    border-color: var(--bg-tertiary);
    color: var(--text-primary);
}

html.dark-mode .action-btn.secondary:hover:not(:disabled) {
    background: var(--bg-hover);
}

html.dark-mode .action-btn.danger {
    color: var(--accent-error);
    border-color: rgba(248, 113, 113, 0.3);
}

html.dark-mode .action-btn.danger:hover:not(:disabled) {
    background: rgba(248, 113, 113, 0.1);
    border-color: var(--accent-error);
}

/* ── Stat Cards Dark Mode ────────────────────────────────────────────────────── */
html.dark-mode .stat-card {
    background: transparent !important;
    border: 1px solid var(--border-primary) !important;
    box-shadow: none !important;
    transition: var(--transition-theme);
}

html.dark-mode .stat-card:hover {
    border-color: var(--border-secondary) !important;
}

html.dark-mode .stat-card.highlight {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(245, 158, 11, 0.1) 100%) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
}

html.dark-mode .stat-card.error {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.1) 0%, rgba(220, 38, 38, 0.1) 100%) !important;
    border-color: rgba(248, 113, 113, 0.3) !important;
}

html.dark-mode .stat-card.success {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.1) 0%, rgba(34, 197, 94, 0.1) 100%) !important;
    border-color: rgba(74, 222, 128, 0.3) !important;
}

html.dark-mode .stat-value {
    color: var(--text-primary) !important;
}

html.dark-mode .stat-label {
    color: var(--text-tertiary) !important;
}

/* ── Cards Dark Mode ─────────────────────────────────────────────────────────── */
html.dark-mode .card,
html.dark-mode .admin-card {
    background: var(--bg-secondary) !important;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-theme);
}

html.dark-mode .maily-card {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode .card-header h2,
html.dark-mode .admin-card h2 {
    color: var(--text-primary);
}

html.dark-mode .admin-card h3 {
    color: var(--text-secondary);
}

html.dark-mode .count-badge {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

/* ── Filter Bar Dark Mode ────────────────────────────────────────────────────── */
html.dark-mode .filter-bar,
html.dark-mode .maily-filter-bar {
    background: var(--bg-secondary) !important;
    border-bottom-color: var(--border-primary) !important;
}

html.dark-mode .filter-input,
html.dark-mode .filter-select {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-primary) !important;
}

html.dark-mode .filter-input::placeholder {
    color: var(--text-muted) !important;
}

/* ── Bulk Actions Dark Mode ──────────────────────────────────────────────────── */
html.dark-mode .bulk-actions,
html.dark-mode .maily-bulk-actions {
    background: var(--bg-secondary) !important;
    border-bottom-color: var(--border-primary) !important;
}

/* ── Table Row Selection Dark Mode ───────────────────────────────────────────── */
html.dark-mode .row-selected,
html.dark-mode tr.row-selected,
html.dark-mode .data-table tbody tr.row-selected {
    background: rgba(96, 165, 250, 0.15) !important;
}

html.dark-mode .data-table tbody tr {
    background: var(--bg-secondary) !important;
}

html.dark-mode .data-table tbody tr:hover {
    background: var(--bg-tertiary) !important;
}

/* ── Admin Page Layout Dark Mode ─────────────────────────────────────────────── */
html.dark-mode .admin-page {
    background: var(--bg-primary);
}

/* ── Empty State Dark Mode ───────────────────────────────────────────────────── */
html.dark-mode .empty-state {
    background: var(--bg-secondary);
}

html.dark-mode .empty-state h3 {
    color: var(--text-primary);
}

html.dark-mode .empty-state p {
    color: var(--text-tertiary);
}

/* ── Settings Card Dark Mode ─────────────────────────────────────────────────── */
html.dark-mode .settings-card {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
    box-shadow: var(--shadow-sm);
}

html.dark-mode .settings-card h2 {
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-primary) !important;
}

/* ── Category Bar Dark Mode (AppSettings two-level nav) ──────────────────────── */
html.dark-mode .category-bar {
    background: var(--bg-secondary) !important;
    border-bottom-color: var(--border-primary) !important;
}

html.dark-mode .category-btn {
    color: var(--text-tertiary) !important;
}

html.dark-mode .category-btn:hover:not(.active) {
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-secondary) !important;
}

html.dark-mode .category-btn.active {
    color: var(--accent-primary) !important;
    border-bottom-color: var(--accent-primary) !important;
}

/* ── Info Boxes ─────────────────────────────────────────────────────────────── */
.info-box {
    margin-top: 1.5rem;
    padding: 1rem;
    border-left: 4px solid;
    border-radius: 0 var(--radius) var(--radius) 0;
}

.info-box p {
    margin: 0;
    font-size: 0.9rem;
}

.info-box-warning {
    background: #fef3c7;
    border-left-color: #f59e0b;
}

.info-box-warning p,
.info-box-warning a {
    color: #92400e;
}

.info-box-info {
    background: #dbeafe;
    border-left-color: #3b82f6;
}

.info-box-info p,
.info-box-info a {
    color: #1e40af;
}

html.dark-mode .info-box-warning {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.92) 0%, rgba(51, 65, 85, 0.92) 100%) !important;
    border-left-color: #f59e0b !important;
}

html.dark-mode .info-box-warning p,
html.dark-mode .info-box-warning a {
    color: #f8d477 !important;
}

html.dark-mode .info-box-info {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.92) 0%, rgba(37, 51, 70, 0.92) 100%) !important;
    border-left-color: #7aa2f7 !important;
}

html.dark-mode .info-box-info p,
html.dark-mode .info-box-info a {
    color: #a9c2ff !important;
}

html.dark-mode .info-box code {
    background: var(--bg-hover, #475569) !important;
    color: var(--text-primary, #f1f5f9) !important;
    padding: 0.15rem 0.4rem !important;
    border-radius: 4px !important;
}

html.dark-mode [style*="background: #fef3c7"],
html.dark-mode [style*="background:#fef3c7"] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.92) 0%, rgba(51, 65, 85, 0.92) 100%) !important;
    border-left-color: #f59e0b !important;
}

html.dark-mode [style*="color: #92400e"] {
    color: #f8d477 !important;
}

html.dark-mode [style*="background: #dbeafe"],
html.dark-mode [style*="background:#dbeafe"] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.92) 0%, rgba(37, 51, 70, 0.92) 100%) !important;
    border-left-color: #7aa2f7 !important;
}

html.dark-mode [style*="color: #1e40af"] {
    color: #a9c2ff !important;
}

/* ── Settings Form Dark Mode ─────────────────────────────────────────────────── */
html.dark-mode .settings-form .form-group label {
    color: var(--text-secondary);
}

/* ── Notes Section Dark Mode ─────────────────────────────────────────────────── */
html.dark-mode .note-item {
    border-color: var(--border-primary);
    background: var(--bg-tertiary);
}

html.dark-mode .note-item:hover {
    border-color: var(--border-secondary);
    box-shadow: var(--shadow-sm);
}

html.dark-mode .note-item.important {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.1) 0%, rgba(220, 38, 38, 0.15) 100%);
    border-color: rgba(248, 113, 113, 0.3);
}

html.dark-mode .note-type-badge {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
}

html.dark-mode .note-author {
    color: var(--text-tertiary);
}

html.dark-mode .note-content {
    border-top-color: var(--border-primary);
    color: var(--text-secondary);
}

/* ── Form Inputs Dark Mode ───────────────────────────────────────────────────── */
html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea {
    background: var(--bg-input) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-primary) !important;
    transition: var(--transition-theme);
}

html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
    color: var(--text-muted) !important;
}

html.dark-mode input:focus,
html.dark-mode select:focus,
html.dark-mode textarea:focus {
    border-color: var(--border-focus) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2) !important;
    outline: none;
}

html.dark-mode input:disabled,
html.dark-mode select:disabled,
html.dark-mode textarea:disabled {
    background: var(--bg-tertiary) !important;
    color: var(--text-muted) !important;
}

/* ── Tables Dark Mode ────────────────────────────────────────────────────────── */
html.dark-mode table {
    background: var(--bg-secondary) !important;
}

html.dark-mode th {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode td {
    border-color: var(--border-primary) !important;
    color: var(--text-primary);
}

html.dark-mode tr:hover {
    background: var(--bg-tertiary);
}

/* ── Tabs Dark Mode ──────────────────────────────────────────────────────────── */
html.dark-mode .tabs {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
}

html.dark-mode .tab {
    color: var(--text-tertiary);
    background: transparent;
}

html.dark-mode .tab:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

html.dark-mode .tab.active {
    color: var(--accent-primary);
    background: rgba(96, 165, 250, 0.1);
    border-color: var(--accent-primary);
}

/* ── Alerts & Banners Dark Mode ──────────────────────────────────────────────── */
html.dark-mode .alert-banner {
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
}

html.dark-mode .alert-banner.testimonial-alert {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%);
    border-color: rgba(251, 191, 36, 0.3);
}

html.dark-mode .alert-banner.testimonial-alert .alert-text {
    color: #fbbf24 !important;
}

html.dark-mode .alert-banner.testimonial-alert .alert-action {
    color: #f59e0b !important;
}

/* Warning/Critical Alert Banners (missing templates, etc.) */
html.dark-mode .alert-banner.warning-alert {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.12) 0%, rgba(185, 28, 28, 0.08) 100%) !important;
    border: 1px solid rgba(248, 113, 113, 0.25) !important;
    border-radius: 8px;
}

html.dark-mode .alert-banner.warning-alert:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.18) 0%, rgba(185, 28, 28, 0.12) 100%) !important;
    border-color: rgba(248, 113, 113, 0.4) !important;
}

html.dark-mode .alert-banner.warning-alert .alert-text {
    color: #fecaca !important;
}

html.dark-mode .alert-banner.warning-alert .alert-text strong {
    color: #fca5a5 !important;
    font-weight: 600;
}

html.dark-mode .alert-banner.warning-alert .alert-text code {
    background: rgba(248, 113, 113, 0.2) !important;
    color: #fecaca !important;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.85em;
    border: 1px solid rgba(248, 113, 113, 0.3);
}

html.dark-mode .alert-banner.warning-alert .alert-action {
    color: #f87171 !important;
    background: rgba(248, 113, 113, 0.15);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    border: 1px solid rgba(248, 113, 113, 0.3);
    white-space: nowrap;
}

html.dark-mode .alert-banner.warning-alert .alert-action:hover {
    background: rgba(248, 113, 113, 0.25);
    border-color: rgba(248, 113, 113, 0.5);
}

/* ════════════════════════════════════════════════════════════════════════════
   DASHBOARD - ALERT ITEMS (Aandachtspunten section)
   These are the alert cards inside the alerts-section, NOT the top banners
   ════════════════════════════════════════════════════════════════════════════ */

/* Alert items container */
html.dark-mode .alert-item {
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    border-radius: 8px;
}

html.dark-mode .alert-item.error {
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

html.dark-mode .alert-item.warning {
    background: rgba(245, 158, 11, 0.12) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

html.dark-mode .alert-item.info {
    background: rgba(59, 130, 246, 0.12) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

/* Alert content - CRITICAL: make strong text readable */
html.dark-mode .alert-item .alert-content strong,
html.dark-mode .alert-content strong {
    color: #f1f5f9 !important;
}

html.dark-mode .alert-item.error .alert-content strong {
    color: #fca5a5 !important;
}

html.dark-mode .alert-item.warning .alert-content strong {
    color: #fbbf24 !important;
}

html.dark-mode .alert-item.info .alert-content strong {
    color: #93c5fd !important;
}

/* Alert content paragraphs and links */
html.dark-mode .alert-item .alert-content p,
html.dark-mode .alert-content p {
    color: #94a3b8 !important;
}

html.dark-mode .alert-item.error .alert-content p a {
    color: #f87171 !important;
}

html.dark-mode .alert-item.warning .alert-content p a {
    color: #fbbf24 !important;
}

html.dark-mode .alert-item.info .alert-content p a {
    color: #60a5fa !important;
}

/* ── Modal Dark Mode ─────────────────────────────────────────────────────────── */
html.dark-mode .modal-backdrop {
    background: rgba(0, 0, 0, 0.7);
}

html.dark-mode .modal-content {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
    box-shadow: var(--shadow-lg);
}

html.dark-mode .modal-header {
    border-bottom-color: var(--border-primary);
}

html.dark-mode .modal-header h2,
html.dark-mode .modal-header h3 {
    color: var(--text-primary);
}

html.dark-mode .detail-modal .modal-footer,
html.dark-mode .editor-modal .modal-footer,
html.dark-mode .txt-modal .modal-footer,
html.dark-mode .img-modal .modal-footer {
    border-top-color: var(--border-primary);
    background: var(--bg-tertiary);
}

/* ── Code/Pre Dark Mode ──────────────────────────────────────────────────────── */
html.dark-mode pre,
html.dark-mode code {
    background: var(--bg-tertiary);
    color: #e879f9;
    border-color: var(--border-primary);
}

/* ── Scrollbar Dark Mode ─────────────────────────────────────────────────────── */
html.dark-mode ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html.dark-mode ::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

html.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 5px;
}

html.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--bg-hover);
}

/* ── Badge Colors Dark Mode ──────────────────────────────────────────────────── */
html.dark-mode .badge-ok {
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
}

html.dark-mode .badge-error {
    background: rgba(248, 113, 113, 0.2);
    color: #f87171;
}

html.dark-mode .btn-badge {
    background: var(--accent-error);
    color: #ffffff;
}

/* ════════════════════════════════════════════════════════════════════════════
   CRITICAL DARK MODE OVERRIDES - HIGHEST SPECIFICITY
   These rules use !important to ensure they override component scoped CSS
   ════════════════════════════════════════════════════════════════════════════ */

/* Background areas - must override any white backgrounds */
/* Exclude headers inside cards - they should inherit from parent */
html.dark-mode [class*="-header"]:not(.stat-header):not(.card-header):not(.settings-card-header):not(.oauth-header-left):not(.analytics-header-left):not(.facebook-header-left):not(.service-header):not(.alerts-header):not(.metric-header):not(.worker-header):not(.queue-header):not(.ops-header):not(.lang-card-header):not(.modal-header):not(.chart-header):not(.pte-macro-panel-header):not(.webhook-provider-header),
html.dark-mode [class*="-stats"]:not(.worker-stats):not(.queue-stats):not(.webhook-provider-stats),
html.dark-mode [class*="-content"]:not(.warning-content):not(.alert-content):not(.flow-content):not(.status-text):not(.toggle-content):not(.stat-content):not(.editor-content):not(.finance-content):not(.kpi-content):not(.modal-content):not(.lang-card-body):not(.banner-content),
html.dark-mode [class*="-section"]:not(.status-badge):not(.detail-section):not(.finance-section):not(.tabs-section):not(.kpi-section):not(.progress-section):not(.pte-text-section):not(.pte-section-label) {
    background: var(--bg-primary) !important;
    border-color: var(--border-primary) !important;
}

/* Headers inside cards should be transparent to inherit parent background */
html.dark-mode .stat-header,
html.dark-mode .card-header,
html.dark-mode .settings-card-header,
html.dark-mode .oauth-header-left,
html.dark-mode .analytics-header-left,
html.dark-mode .facebook-header-left,
html.dark-mode .service-header,
html.dark-mode .alerts-header,
html.dark-mode .metric-header,
html.dark-mode .worker-header,
html.dark-mode .queue-header,
html.dark-mode .ops-header,
html.dark-mode .lang-card-header,
html.dark-mode .modal-header,
html.dark-mode .chart-header {
    background: transparent !important;
}

/* Stat content should be transparent to inherit from stat-card */
html.dark-mode .stat-content,
html.dark-mode .stat-body,
html.dark-mode .stat-header,
html.dark-mode .stat-footer,
html.dark-mode .stat-number,
html.dark-mode .stat-detail,
html.dark-mode .stat-label,
html.dark-mode .stat-title,
html.dark-mode .stat-icon,
html.dark-mode .stat-value,
html.dark-mode .stat-badge,
html.dark-mode .finance-content,
html.dark-mode .finance-info,
html.dark-mode .finance-icon,
html.dark-mode .finance-value,
html.dark-mode .finance-label,
html.dark-mode .worker-stats,
html.dark-mode .queue-stats,
html.dark-mode .metric-change,
html.dark-mode .metric-sub,
html.dark-mode .metric-mini,
html.dark-mode .metric-breakdown,
html.dark-mode .workers-grid,
html.dark-mode .queues-grid,
html.dark-mode .errors-list,
html.dark-mode .funnel-visual,
html.dark-mode .funnel-step,
html.dark-mode .funnel-info,
html.dark-mode .funnel-summary,
html.dark-mode .chart-container,
html.dark-mode .chart-legend,
html.dark-mode .alerts-banner {
    background: transparent !important;
}

/* Cards & containers with white backgrounds */
html.dark-mode .card,
html.dark-mode .admin-card,
html.dark-mode .stat-card,
html.dark-mode .filter-bar,
html.dark-mode .detail-modal,
html.dark-mode .modal-content,
html.dark-mode .settings-card,
html.dark-mode .pricing-card,
html.dark-mode [class*="-card"]:not(.status-badge) {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

/* Prices table dark mode - high specificity for BookPricing page */
html.dark-mode .prices-table {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode .prices-table .table-header,
html.dark-mode .pricing-card .table-header,
html.dark-mode .table-header {
    background: var(--bg-tertiary) !important;
    border-bottom-color: var(--border-primary) !important;
    color: var(--text-tertiary) !important;
}

html.dark-mode .prices-table .table-row,
html.dark-mode .pricing-card .table-row {
    background: var(--bg-secondary) !important;
    border-bottom-color: var(--border-primary) !important;
}

html.dark-mode .prices-table .table-row:hover,
html.dark-mode .pricing-card .table-row:hover {
    background: var(--bg-tertiary) !important;
}

html.dark-mode .prices-table .table-row.empty,
html.dark-mode .pricing-card .table-row.empty {
    background: var(--bg-secondary) !important;
    color: var(--text-muted) !important;
}

/* Cost info box - pricing page dark mode */
html.dark-mode .cost-info {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-primary) !important;
}

html.dark-mode .cost-info p {
    color: var(--text-secondary) !important;
}

html.dark-mode .cost-info strong {
    color: var(--text-primary) !important;
}

/* Tabs section needs dark background */
html.dark-mode .tabs-section {
    background: var(--bg-secondary) !important;
    border-bottom-color: var(--border-primary) !important;
}

html.dark-mode .tabs-section .tab {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-tertiary) !important;
}

html.dark-mode .tabs-section .tab:hover:not(.active) {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-secondary) !important;
    color: var(--text-primary) !important;
}

html.dark-mode .tabs-section .tab.active {
    background: var(--accent-primary) !important;
    color: #ffffff !important;
    border-color: var(--accent-primary) !important;
}

/* Macros section needs dark background (Prompts page) */
html.dark-mode .macros-section {
    background: var(--bg-secondary) !important;
    border-bottom-color: var(--border-primary) !important;
}

html.dark-mode .macros-toggle {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode .macros-toggle:hover {
    background: var(--bg-hover) !important;
}

html.dark-mode .toggle-title {
    color: var(--text-primary) !important;
}

html.dark-mode .macros-content {
    background: var(--bg-tertiary) !important;
}

html.dark-mode .macro-item {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode .macro-item span {
    color: var(--text-tertiary) !important;
}

/* Prompt editor and preview (Prompts page) */
html.dark-mode .prompt-preview {
    color: var(--text-secondary) !important;
}

html.dark-mode .prompt-editor {
    background: var(--bg-tertiary) !important;
    border-color: var(--accent-primary) !important;
    color: var(--text-primary) !important;
}

html.dark-mode .prompt-editor:focus {
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.3) !important;
}

html.dark-mode .edit-hint {
    color: var(--text-tertiary) !important;
}

html.dark-mode .row-editing {
    background: rgba(96, 165, 250, 0.1) !important;
}

html.dark-mode .row-editing td {
    background: transparent !important;
}

/* Payment fieldsets need dark background */
html.dark-mode .payment-fieldset,
html.dark-mode fieldset.payment-fieldset {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode .payment-fieldset.enabled {
    border-color: var(--border-secondary) !important;
}

html.dark-mode .payment-fieldset legend {
    color: var(--text-primary) !important;
    background: var(--bg-secondary) !important;
}

/* Tables must be dark */
html.dark-mode table,
html.dark-mode .data-table,
html.dark-mode [class*="-table"]:not(.status-badge) {
    background: var(--bg-secondary) !important;
}

html.dark-mode thead,
html.dark-mode thead tr {
    background: var(--bg-tertiary) !important;
}

html.dark-mode th {
    background: var(--bg-tertiary) !important;
    color: var(--text-tertiary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode td {
    color: var(--text-secondary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode tbody tr:hover {
    background: var(--bg-tertiary) !important;
}

/* Form inputs */
html.dark-mode input:not([type="checkbox"]):not([type="radio"]),
html.dark-mode select,
html.dark-mode textarea,
html.dark-mode .filter-input,
html.dark-mode .filter-select {
    background: var(--bg-input) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-primary) !important;
}

/* Make sure stat-cards in all locations work */
html.dark-mode .stat-card {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode .stat-value {
    color: var(--text-primary) !important;
    background: transparent !important;
}

html.dark-mode .stat-label {
    color: var(--text-tertiary) !important;
    background: transparent !important;
}

html.dark-mode .stat-detail {
    color: var(--text-tertiary) !important;
    background: transparent !important;
}

html.dark-mode .stat-title {
    color: var(--text-secondary) !important;
    background: transparent !important;
}

html.dark-mode .stat-icon {
    background: transparent !important;
}

html.dark-mode .stat-header {
    background: transparent !important;
}

html.dark-mode .stat-body {
    background: transparent !important;
}

html.dark-mode .stat-number {
    color: var(--text-primary) !important;
    background: transparent !important;
}

html.dark-mode .stat-footer {
    border-top-color: var(--border-primary) !important;
    background: transparent !important;
}

/* Finance card inner elements */
html.dark-mode .finance-card .finance-icon,
html.dark-mode .finance-card .finance-value,
html.dark-mode .finance-card .finance-label,
html.dark-mode .finance-info {
    background: transparent !important;
}

html.dark-mode .finance-value {
    color: var(--text-primary) !important;
}

html.dark-mode .finance-label {
    color: var(--text-tertiary) !important;
}

/* Stats grid background */
html.dark-mode .stats-grid {
    background: var(--bg-primary) !important;
}

/* Finance section background */
html.dark-mode .finance-section {
    background: var(--bg-primary) !important;
}

/* Finance cards */
html.dark-mode .finance-card {
    background: transparent !important;
    border: 1px solid var(--border-primary) !important;
    box-shadow: none !important;
}

html.dark-mode .finance-card.highlight {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.1) 0%, rgba(34, 197, 94, 0.05) 100%) !important;
    border-color: rgba(74, 222, 128, 0.3) !important;
}

html.dark-mode .finance-value {
    color: var(--text-primary) !important;
}

html.dark-mode .finance-label {
    color: var(--text-tertiary) !important;
}

/* Card sections - CRITICAL for Dashboard */
html.dark-mode .card,
html.dark-mode section.card {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode .card-header {
    border-bottom-color: var(--border-primary) !important;
}

/* SEO Page specific dark mode */
html.dark-mode .seo-card {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode .seo-card .card-header {
    background: var(--bg-tertiary) !important;
    border-bottom-color: var(--border-primary) !important;
}

/* SEO card header - keep titles left-aligned (override admin-shared justify-content: space-between) */
.seo-card .card-header {
    justify-content: flex-start !important;
}

html.dark-mode .seo-card .card-header h3 {
    color: var(--text-primary) !important;
}

html.dark-mode .seo-card .card-body {
    background: var(--bg-secondary) !important;
}

html.dark-mode .seo-card .card-intro {
    color: var(--text-tertiary) !important;
}

/* Schema toggles */
html.dark-mode .schema-toggle {
    background: var(--bg-tertiary) !important;
}

html.dark-mode .schema-toggle:hover {
    background: var(--bg-hover) !important;
}

html.dark-mode .schema-toggle .toggle-title {
    color: var(--text-primary) !important;
}

html.dark-mode .schema-toggle .toggle-desc {
    color: var(--text-tertiary) !important;
}

html.dark-mode .toggle-track {
    background: var(--bg-hover) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   SEO PAGE - COMPREHENSIVE DARK MODE
   ════════════════════════════════════════════════════════════════════════════ */

/* SEO Score Section - transparent background */
html.dark-mode .seo-score-section {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

html.dark-mode .seo-score-section .score-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

html.dark-mode .score-circle::before {
    background: var(--bg-primary) !important;
}

html.dark-mode .score-info h2 {
    color: var(--text-primary) !important;
}

html.dark-mode .score-status {
    color: var(--text-tertiary) !important;
}

/* Check items (pass/fail badges) */
html.dark-mode .check-item.check-pass {
    background: rgba(74, 222, 128, 0.15) !important;
    color: #4ade80 !important;
}

html.dark-mode .check-item.check-fail {
    background: rgba(248, 113, 113, 0.15) !important;
    color: #f87171 !important;
}

/* SEO Cards - all card types */
html.dark-mode .seo-card {
    background: var(--bg-secondary) !important;
    box-shadow: none !important;
    border: 1px solid var(--border-primary) !important;
}

html.dark-mode .seo-card .card-header {
    background: transparent !important;
    border-bottom-color: var(--border-primary) !important;
}

html.dark-mode .seo-card .card-header h3 {
    color: var(--text-primary) !important;
}

html.dark-mode .seo-card .card-body {
    background: transparent !important;
}

html.dark-mode .seo-card .card-intro {
    color: var(--text-tertiary) !important;
}

/* Page description items */
html.dark-mode .page-desc-item {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode .page-name {
    color: var(--text-primary) !important;
}

html.dark-mode .page-url {
    color: var(--text-muted) !important;
}

/* Tool links */
html.dark-mode .tool-link {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

html.dark-mode .tool-link:hover:not(.disabled) {
    background: var(--bg-hover) !important;
}

html.dark-mode .tool-link.disabled {
    background: var(--bg-tertiary) !important;
    opacity: 0.5 !important;
}

html.dark-mode .tool-link.external {
    background: rgba(96, 165, 250, 0.1) !important;
}

html.dark-mode .tool-link.external:hover {
    background: rgba(96, 165, 250, 0.15) !important;
}

html.dark-mode .tool-arrow {
    color: var(--text-muted) !important;
}

/* Schema toggles - structured data */
html.dark-mode .schema-toggle {
    border: 1px solid var(--border-primary) !important;
}

html.dark-mode .schema-toggle:hover {
}

html.dark-mode .schema-toggle .toggle-title,
html.dark-mode .toggle-content .toggle-title {
    color: var(--text-primary) !important;
}

html.dark-mode .schema-toggle .toggle-desc,
html.dark-mode .toggle-content .toggle-desc {
    color: var(--text-tertiary) !important;
}

/* SERP Preview (Google Preview) */
html.dark-mode .serp-preview {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode .serp-url {
    color: #4ade80 !important;
}

html.dark-mode .serp-title {
    color: #93c5fd !important;
}

html.dark-mode .serp-description {
    color: var(--text-secondary) !important;
}

/* Social card preview */
html.dark-mode .social-card-preview {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode .social-card-preview .preview-content {
    background: var(--bg-tertiary) !important;
}

html.dark-mode .social-card-preview .preview-title {
    color: var(--text-primary) !important;
}

html.dark-mode .social-card-preview .preview-url,
html.dark-mode .social-card-preview .preview-description {
    color: var(--text-tertiary) !important;
}

/* OG Preview */
html.dark-mode .og-preview {
    border-top-color: var(--border-primary) !important;
}

html.dark-mode .og-preview h4 {
    color: var(--text-secondary) !important;
}

/* Help text and character counters */
html.dark-mode .help {
    color: var(--text-tertiary) !important;
}

html.dark-mode .char-counter,
html.dark-mode .char-counter-sm {
    color: var(--text-muted) !important;
}

/* Tips card */
html.dark-mode .tips-card {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
}

html.dark-mode .tips-card .card-header {
    border-bottom-color: rgba(251, 191, 36, 0.2) !important;
}

html.dark-mode .tips-list {
    color: #fbbf24 !important;
}

html.dark-mode .tips-list strong {
    color: #fcd34d !important;
}

/* Tool warning */
html.dark-mode .tool-warning {
    background: rgba(251, 191, 36, 0.15) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
    color: #fbbf24 !important;
}

/* Crawler card */
html.dark-mode .crawler-card {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

/* Card badge */
html.dark-mode .card-badge {
    background: var(--bg-tertiary) !important;
    color: var(--text-tertiary) !important;
}

/* ════════════════════════════════════════════════════════════════════════════ */

html.dark-mode .card-header h2,
html.dark-mode .card h2 {
    color: var(--text-primary) !important;
}

/* Dashboard grid background */
html.dark-mode .dashboard-grid {
    background: var(--bg-primary) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   GLOBAL TEXT READABILITY - ALL TEXT MUST BE VISIBLE IN DARK MODE
   ════════════════════════════════════════════════════════════════════════════ */

/* All headings */
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6 {
    color: var(--text-primary) !important;
}

/* All labels and form text */
html.dark-mode label,
html.dark-mode .label {
    color: var(--text-secondary) !important;
}

/* All paragraph and span text with dark colors */
html.dark-mode p,
html.dark-mode span {
    color: inherit;
}

/* Specific text classes that need override */
html.dark-mode .text-muted,
html.dark-mode .muted,
html.dark-mode .help-text,
html.dark-mode .hint,
html.dark-mode .description {
    color: var(--text-muted) !important;
}

/* Stat-related text */
html.dark-mode .stat-title {
    color: var(--text-secondary) !important;
}

html.dark-mode .stat-number {
    color: var(--text-primary) !important;
}

/* Placeholders in inputs */
html.dark-mode ::placeholder {
    color: var(--text-muted) !important;
    opacity: 1;
}

/* Links should be visible */
html.dark-mode a:not(.action-btn):not([class*="btn"]) {
    color: var(--accent-primary);
}

/* Detail labels and values */
html.dark-mode .detail-label {
    color: var(--text-tertiary) !important;
}

html.dark-mode .detail-value {
    color: var(--text-secondary) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   ADMIN COMPONENT DARK MODE - UNIVERSAL OVERRIDES
   These rules ensure ALL admin components have proper dark mode styling
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Dashboard Navigation Groups ─────────────────────────────────────────────── */
html.dark-mode .nav-groups {
    background: var(--bg-primary) !important;
}

html.dark-mode .nav-group {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
    box-shadow: none !important;
}

html.dark-mode .nav-group:hover {
    border-color: var(--border-secondary) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .nav-group-title {
    color: var(--text-tertiary) !important;
    border-bottom-color: var(--border-primary) !important;
}

html.dark-mode a.nav-link,
html.dark-mode .nav-link {
    color: var(--text-secondary) !important;
}

html.dark-mode a.nav-link:hover,
html.dark-mode .nav-link:hover {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

html.dark-mode a.nav-link:active,
html.dark-mode .nav-link:active {
    background: var(--bg-hover) !important;
}

html.dark-mode .nav-badge {
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.6) !important;
}

/* ── Dashboard Worker Cards (stat-metric / stat-indicator) ─────────────────── */
html.dark-mode .stat-metric {
    background: rgba(0, 0, 0, 0.25) !important;
}

html.dark-mode .stat-metric-value {
    color: var(--text-primary) !important;
}

html.dark-mode .stat-metric-label {
    color: var(--text-tertiary) !important;
}

html.dark-mode .stat-indicator {
    background: rgba(255, 255, 255, 0.06) !important;
}

html.dark-mode .stat-indicator.status-ok {
    background: rgba(74, 222, 128, 0.1) !important;
}

html.dark-mode .stat-indicator.status-error {
    background: rgba(248, 113, 113, 0.15) !important;
}

html.dark-mode .stat-indicator.status-busy {
    background: rgba(251, 191, 36, 0.15) !important;
}

/* ── Dashboard Worker Cards — Error badges & expanded panel ────────────────── */
html.dark-mode .stat-badge.badge-error {
    background: rgba(248, 113, 113, 0.2) !important;
    color: #fca5a5 !important;
}

html.dark-mode .stat-badge.badge-ok {
    background: rgba(74, 222, 128, 0.15) !important;
    color: #86efac !important;
}

html.dark-mode .stat-error-panel {
    background: transparent !important;
}

html.dark-mode .stat-error-title {
    color: #fca5a5 !important;
}

html.dark-mode .stat-error-badge {
    background: rgba(248, 113, 113, 0.2) !important;
    color: #fca5a5 !important;
}

html.dark-mode .stat-error-item {
    background: rgba(248, 113, 113, 0.08) !important;
    border: 1px solid rgba(248, 113, 113, 0.15) !important;
}

html.dark-mode .stat-error-link {
    color: var(--text-primary) !important;
}

html.dark-mode .stat-error-count {
    color: #f87171 !important;
}

html.dark-mode .stat-error-msg {
    color: var(--text-tertiary) !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border-left-color: rgba(248, 113, 113, 0.3) !important;
}

html.dark-mode .stat-expand-hint {
    color: var(--text-tertiary) !important;
}

/* All admin cards must be dark */
html.dark-mode .admin-card,
html.dark-mode .detail-card,
html.dark-mode .info-card,
html.dark-mode .orders-card,
html.dark-mode .charRun-card,
html.dark-mode .settings-card,
html.dark-mode [class*="-card"]:not(.status-badge):not([class*="badge"]) {
   border-color: var(--border-primary) !important;
}

/* All tables must be dark */
html.dark-mode .tbl,
html.dark-mode .data-table,
html.dark-mode .items-table,
html.dark-mode .status-table,
html.dark-mode .orders-table,
html.dark-mode .model-prices-table,
html.dark-mode [class*="-table"]:not([class*="badge"]) {
    border-color: var(--border-primary) !important;
}

html.dark-mode .tbl thead,
html.dark-mode .data-table thead,
html.dark-mode .items-table thead,
html.dark-mode .status-table thead,
html.dark-mode .orders-table thead,
html.dark-mode .model-prices-table thead,
html.dark-mode [class*="-table"] thead {
    background: var(--bg-tertiary) !important;
}

html.dark-mode .tbl th,
html.dark-mode .data-table th,
html.dark-mode .items-table th,
html.dark-mode .status-table th,
html.dark-mode .orders-table th,
html.dark-mode .model-prices-table th,
html.dark-mode [class*="-table"] th {
    background: var(--bg-tertiary) !important;
    color: var(--text-tertiary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode .tbl td,
html.dark-mode .data-table td,
html.dark-mode .items-table td,
html.dark-mode .status-table td,
html.dark-mode .orders-table td,
html.dark-mode .model-prices-table td,
html.dark-mode [class*="-table"] td {
    color: var(--text-secondary) !important;
    border-color: var(--border-primary) !important;
}

/* Info labels and values */
html.dark-mode .info-label,
html.dark-mode [class*="-label"]:not([class*="badge"]):not([class*="btn"]) {
    color: var(--text-tertiary) !important;
}

html.dark-mode .info-value,
html.dark-mode [class*="-value"]:not([class*="badge"]):not([class*="btn"]) {
    color: var(--text-secondary) !important;
}

/* Placeholders */
html.dark-mode .placeholder,
html.dark-mode .empty-cell,
html.dark-mode .no-data {
    color: var(--text-muted) !important;
}

/* Muted/secondary text */
html.dark-mode .info-muted,
html.dark-mode .text-muted,
html.dark-mode .muted,
html.dark-mode small {
    color: var(--text-muted) !important;
}

/* Address blocks */
html.dark-mode .addr-block address,
html.dark-mode address {
    color: var(--text-secondary) !important;
}

html.dark-mode .addr-block strong {
    color: #4ade80 !important;
}

/* Modals must be dark - exclude overlay classes */
html.dark-mode .modal-content,
html.dark-mode .detail-modal,
html.dark-mode .editor-modal,
html.dark-mode .txt-modal,
html.dark-mode .img-modal,
html.dark-mode [class*="-modal"]:not(.modal-backdrop):not([class*="-overlay"]) {
    background: var(--bg-secondary) !important;
}

html.dark-mode .detail-modal .modal-header,
html.dark-mode .editor-modal .modal-header,
html.dark-mode .txt-modal .modal-header,
html.dark-mode .img-modal .modal-header {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode .detail-modal .modal-body,
html.dark-mode .editor-modal .modal-body,
html.dark-mode .txt-modal .modal-body,
html.dark-mode .img-modal .modal-body {
    background: var(--bg-secondary) !important;
}

html.dark-mode .detail-modal .modal-footer,
html.dark-mode .editor-modal .modal-footer,
html.dark-mode .txt-modal .modal-footer,
html.dark-mode .img-modal .modal-footer {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-primary) !important;
}

/* Grid sections */
html.dark-mode .addr-grid,
html.dark-mode .info-grid,
html.dark-mode .detail-grid {
    border-color: var(--border-primary) !important;
}

/* Error states */
html.dark-mode .error-row td,
html.dark-mode .error-text,
html.dark-mode .error-message {
    color: #f87171 !important;
    background: rgba(248, 113, 113, 0.1) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   ALERT ITEMS - Dashboard alerts dark mode
   ════════════════════════════════════════════════════════════════════════════ */

html.dark-mode .alert-item {
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

html.dark-mode .alert-item.error {
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

html.dark-mode .alert-item.warning {
    background: rgba(245, 158, 11, 0.12) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

html.dark-mode .alert-item.warning .alert-content strong {
    color: #fbbf24 !important;
}

html.dark-mode .alert-item.warning .alert-content p {
    color: var(--text-tertiary) !important;
}

html.dark-mode .alert-item.warning .alert-content p a {
    color: #fbbf24 !important;
}

html.dark-mode .alert-item.info {
    background: rgba(59, 130, 246, 0.12) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

html.dark-mode .alert-item.info .alert-content strong {
    color: #60a5fa !important;
}

/* Page edit areas in BookBuilder */
html.dark-mode .page-edit {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode .page-edit.blank {
    background: var(--bg-secondary) !important;
}

/* Editors and textareas */
html.dark-mode .bb-editor,
html.dark-mode .bb-sidebar {
    background: var(--bg-secondary) !important;
}

/* Navigation buttons */
html.dark-mode .nav-btn {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-secondary) !important;
}

/* Spread indicators and similar */
html.dark-mode .spread-indicator,
html.dark-mode .page-indicator {
    color: var(--text-primary) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   EMPTY STATES - Must be dark in all admin pages
   ════════════════════════════════════════════════════════════════════════════ */

html.dark-mode .empty-state {
    background: var(--bg-secondary) !important;
}

html.dark-mode .empty-state h2,
html.dark-mode .empty-state h3 {
    color: var(--text-primary) !important;
}

html.dark-mode .empty-state p {
    color: var(--text-tertiary) !important;
}

/* Editor panels and content areas */
html.dark-mode .editor-content,
html.dark-mode .faq-editor,
html.dark-mode .et-editor {
    background: var(--bg-secondary) !important;
}

html.dark-mode .editor-header {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode .editor-title {
    color: var(--text-primary) !important;
}

/* Sidebar panels */
html.dark-mode .faq-sidebar,
html.dark-mode .et-sidebar,
html.dark-mode [class*="-sidebar"] {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode .sidebar-header {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode .sidebar-header h3 {
    color: var(--text-primary) !important;
}

/* Layout areas */
html.dark-mode .faq-layout,
html.dark-mode .et-layout,
html.dark-mode [class*="-layout"] {
    background: var(--bg-primary) !important;
}

/* Feature cards and pixel features */
html.dark-mode .pixel-feature,
html.dark-mode .feature-card {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode .pixel-feature strong,
html.dark-mode .feature-card strong {
    color: var(--text-primary) !important;
}

html.dark-mode .pixel-feature p,
html.dark-mode .feature-card p {
    color: var(--text-secondary) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   OAUTH / GOOGLE TAB - DARK MODE CRITICAL OVERRIDES
   These must use !important to override scoped component styles
   ════════════════════════════════════════════════════════════════════════════ */

/* OAuth Callback Box - the light blue box */
html.dark-mode .oauth-callback-box {
    background: var(--bg-tertiary) !important;
    border-color: rgba(96, 165, 250, 0.3) !important;
}

html.dark-mode .oauth-callback-box h4 {
    color: #93c5fd !important;
}

html.dark-mode .callback-desc {
    color: var(--text-secondary) !important;
}

html.dark-mode .callback-url {
    background: var(--bg-secondary) !important;
    border-color: var(--border-secondary) !important;
    color: #93c5fd !important;
}

/* Logo Containers - must be transparent in dark mode (no visible box) */
html.dark-mode .oauth-logo,
html.dark-mode .facebook-logo,
html.dark-mode .facebook-logo-large,
html.dark-mode .analytics-logo,
html.dark-mode .pixel-logo,
html.dark-mode [class*="-logo"]:not(svg):not(path) {
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* OAuth Instructions Details - the white accordion */
html.dark-mode .oauth-instructions-details {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode .oauth-instructions-details summary {
    color: var(--text-primary) !important;
    background: transparent !important;
}

html.dark-mode .oauth-instructions-details[open] summary {
    border-bottom-color: var(--border-primary) !important;
}

html.dark-mode .oauth-instructions-list {
    background: transparent !important;
}

html.dark-mode .oauth-instructions-list li {
    color: var(--text-secondary) !important;
}

html.dark-mode .oauth-instructions-list a {
    color: #60a5fa !important;
}

/* Analytics Flow - the white boxes with steps 1,2,3 */
html.dark-mode .analytics-flow {
    background: var(--bg-tertiary) !important;
}

html.dark-mode .flow-step {
    background: var(--bg-secondary) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .flow-content strong {
    color: var(--text-primary) !important;
}

html.dark-mode .flow-content p {
    color: var(--text-tertiary) !important;
}

html.dark-mode .flow-arrow {
    color: var(--text-muted) !important;
}

/* Analytics Features - "Wat je kunt meten" white box */
html.dark-mode .analytics-features {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode .analytics-features h4 {
    color: var(--text-primary) !important;
}

html.dark-mode .feature-list li {
    color: var(--text-secondary) !important;
}

/* Setup Details - configuration accordions */
html.dark-mode .setup-details {
    border-color: var(--border-primary) !important;
}

html.dark-mode .setup-details summary {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

html.dark-mode .setup-details[open] summary {
    border-bottom-color: var(--border-primary) !important;
}

html.dark-mode .setup-steps li strong {
    color: var(--text-primary) !important;
}

html.dark-mode .setup-steps li p {
    color: var(--text-tertiary) !important;
}

html.dark-mode .setup-steps a {
    color: #60a5fa !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   FACEBOOK TAB - DARK MODE OVERRIDES
   ════════════════════════════════════════════════════════════════════════════ */

/* Facebook OAuth Warning Box - the bright yellow box */
html.dark-mode .oauth-warning-box {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%) !important;
    border-color: rgba(251, 191, 36, 0.4) !important;
}

html.dark-mode .oauth-warning-box strong {
    color: #fbbf24 !important;
}

html.dark-mode .oauth-warning-box p {
    color: #fcd34d !important;
}

/* Facebook Privacy Card - the info list section */
html.dark-mode .facebook-privacy-card {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode .facebook-privacy-card h3 {
    color: var(--text-primary) !important;
}

html.dark-mode .facebook-privacy-card .info-list li {
    color: var(--text-secondary) !important;
}

html.dark-mode .facebook-privacy-card .info-list li strong {
    color: var(--text-primary) !important;
}

/* Info List - general styling for all info lists */
html.dark-mode .info-list li {
    color: var(--text-secondary) !important;
}

html.dark-mode .info-list li strong {
    color: var(--text-primary) !important;
}

html.dark-mode .info-list li::before {
    color: var(--accent-primary) !important;
}

/* Facebook Warning Box (red variant) */
html.dark-mode .facebook-warning-box {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.15) 0%, rgba(239, 68, 68, 0.1) 100%) !important;
    border-color: rgba(248, 113, 113, 0.4) !important;
}

html.dark-mode .facebook-warning-box .warning-content strong {
    color: #f87171 !important;
}

html.dark-mode .facebook-warning-box .warning-content p {
    color: #fca5a5 !important;
}

/* Facebook Status Boxes */
html.dark-mode .facebook-status-box.status-ready {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.15) 0%, rgba(34, 197, 94, 0.1) 100%) !important;
    border-color: rgba(74, 222, 128, 0.3) !important;
}

html.dark-mode .facebook-status-box.status-ready .status-text strong {
    color: #4ade80 !important;
}

html.dark-mode .facebook-status-box.status-ready .status-text p {
    color: #86efac !important;
}

html.dark-mode .facebook-status-box.status-warning {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
}

html.dark-mode .facebook-status-box.status-warning .status-text strong {
    color: #fbbf24 !important;
}

html.dark-mode .facebook-status-box.status-warning .status-text p {
    color: #fcd34d !important;
}

/* Pixel Features */
html.dark-mode .pixel-features {
    background: transparent !important;
}

html.dark-mode .pixel-feature {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode .pixel-feature:hover {
    border-color: #1877F2 !important;
    box-shadow: 0 2px 8px rgba(24, 119, 242, 0.3) !important;
}

html.dark-mode .pixel-feature strong {
    color: var(--text-primary) !important;
}

html.dark-mode .pixel-feature p {
    color: var(--text-secondary) !important;
}

/* Privacy Card (generic green variant) */
html.dark-mode .privacy-card {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.1) 0%, rgba(34, 197, 94, 0.05) 100%) !important;
    border-color: rgba(74, 222, 128, 0.3) !important;
}

html.dark-mode .privacy-card h3 {
    color: #4ade80 !important;
}

html.dark-mode .privacy-item {
    background: rgba(255, 255, 255, 0.05) !important;
}

html.dark-mode .privacy-item strong {
    color: #86efac !important;
}

html.dark-mode .privacy-item p {
    color: var(--text-tertiary) !important;
}

/* OAuth Info Card (yellow variant) */
html.dark-mode .oauth-info-card {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
}

html.dark-mode .oauth-info-card h3 {
    color: #fbbf24 !important;
}

/* Warning Banner */
html.dark-mode .warning-banner {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%) !important;
    border-color: rgba(251, 191, 36, 0.4) !important;
    color: #fcd34d !important;
}

html.dark-mode .warning-banner strong {
    color: #fbbf24 !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   CLEANY TAB - DARK MODE OVERRIDES
   ════════════════════════════════════════════════════════════════════════════ */

html.dark-mode .cleanup-stats {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode .cleanup-stat {
    background: var(--bg-secondary) !important;
}

html.dark-mode .cleanup-stat-value {
    color: var(--text-primary) !important;
}

html.dark-mode .cleanup-stat-label {
    color: var(--text-tertiary) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   GENERAL DARK MODE - Details/Summary Elements
   ════════════════════════════════════════════════════════════════════════════ */

html.dark-mode details {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode details summary {
    color: var(--text-primary) !important;
}

html.dark-mode details[open] summary {
    border-bottom-color: var(--border-primary) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   EMAIL TEMPLATES PAGE - DARK MODE CRITICAL OVERRIDES
   ════════════════════════════════════════════════════════════════════════════ */

/* Template sidebar - list items must have light text */
html.dark-mode .template-item {
    background: transparent !important;
}

html.dark-mode .template-item:hover {
    background: var(--bg-tertiary) !important;
}

html.dark-mode .template-item.active {
    background: rgba(102, 126, 234, 0.15) !important;
    border-color: rgba(102, 126, 234, 0.5) !important;
}

html.dark-mode .template-name {
    color: var(--text-primary) !important;
}

html.dark-mode .template-key {
    color: var(--text-tertiary) !important;
}

html.dark-mode .template-count {
    color: var(--text-tertiary) !important;
}

html.dark-mode .template-badge.inactive {
    background: rgba(220, 38, 38, 0.15) !important;
    color: #f87171 !important;
}

/* Editor footer - delete button area */
html.dark-mode .editor-footer {
    background: var(--bg-secondary) !important;
    border-top: 1px solid var(--border-primary) !important;
}

html.dark-mode .footer-left,
html.dark-mode .footer-right {
    background: transparent !important;
}

/* Delete button dark mode */
html.dark-mode .delete-btn {
    background: rgba(220, 38, 38, 0.15) !important;
    border-color: rgba(248, 113, 113, 0.4) !important;
    color: #f87171 !important;
}

html.dark-mode .delete-btn:hover {
    background: rgba(220, 38, 38, 0.25) !important;
    border-color: rgba(248, 113, 113, 0.6) !important;
}

/* Cancel button dark mode */
html.dark-mode .cancel-btn {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-secondary) !important;
}

html.dark-mode .cancel-btn:hover {
    background: var(--bg-hover) !important;
}

/* Toggle label */
html.dark-mode .toggle-label {
    color: var(--text-secondary) !important;
}

/* Split panel headers */
html.dark-mode .panel-header {
    background: var(--bg-tertiary) !important;
    border-bottom-color: var(--border-primary) !important;
}

html.dark-mode .panel-title {
    color: var(--text-secondary) !important;
}

html.dark-mode .panel-hint {
    color: var(--text-muted) !important;
}

/* Refresh button */
html.dark-mode .refresh-btn {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-secondary) !important;
}

html.dark-mode .refresh-btn:hover {
    background: var(--bg-hover) !important;
}

/* Split panel border */
html.dark-mode .split-panel {
    border-color: var(--border-primary) !important;
}

/* Template list background */
html.dark-mode .template-list {
    background: var(--bg-secondary) !important;
}

/* ── Variables Panel ─────────────────────────────────────────────────────────── */
html.dark-mode .variables-panel {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode .variables-header {
    background: transparent !important;
}

html.dark-mode .variables-header:hover {
    background: var(--bg-hover) !important;
}

html.dark-mode .variables-title {
    color: var(--text-primary) !important;
}

html.dark-mode .variables-toggle {
    color: var(--text-muted) !important;
}

html.dark-mode .variables-grid {
    border-top-color: var(--border-primary) !important;
}

html.dark-mode .variable-name {
    background: rgba(99, 102, 241, 0.18) !important;
    color: #a5b4fc !important;
    border: 1px solid rgba(99, 102, 241, 0.25) !important;
}

html.dark-mode .variable-desc {
    color: var(--text-tertiary) !important;
}

/* ── Images Panel ────────────────────────────────────────────────────────────── */
html.dark-mode .images-panel {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode .images-header {
    background: transparent !important;
}

html.dark-mode .images-header:hover {
    background: var(--bg-hover) !important;
}

html.dark-mode .images-title {
    color: var(--text-primary) !important;
}

html.dark-mode .images-toggle {
    color: var(--text-muted) !important;
}

html.dark-mode .images-content {
    border-top-color: var(--border-primary) !important;
}

html.dark-mode .images-hint {
    color: var(--text-tertiary) !important;
}

html.dark-mode .images-hint code {
    background: rgba(99, 102, 241, 0.18) !important;
    color: #a5b4fc !important;
    border: 1px solid rgba(99, 102, 241, 0.25) !important;
}

/* Upload form container */
html.dark-mode .image-upload-form {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode .image-upload-form .form-group label {
    color: var(--text-tertiary) !important;
}

/* File upload dashed label */
html.dark-mode .file-upload-label {
    background: var(--bg-input) !important;
    border: 1px dashed var(--border-secondary) !important;
    color: var(--text-muted) !important;
}

html.dark-mode .file-upload-label:hover {
    border-color: #818cf8 !important;
    color: #a5b4fc !important;
    background: rgba(99, 102, 241, 0.08) !important;
}

/* Upload button override (has class action-btn primary) */
html.dark-mode .upload-img-btn {
    background: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
    color: #fff !important;
}

html.dark-mode .upload-img-btn:hover:not(:disabled) {
    background: var(--accent-hover) !important;
}

html.dark-mode .upload-img-btn:disabled {
    opacity: 0.5 !important;
}

/* Image list items */
html.dark-mode .image-item {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode .image-item:hover {
    border-color: var(--border-secondary) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

html.dark-mode .image-preview {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-primary) !important;
}

html.dark-mode .image-key-badge {
    background: rgba(99, 102, 241, 0.18) !important;
    color: #a5b4fc !important;
    border: 1px solid rgba(99, 102, 241, 0.25) !important;
}

html.dark-mode .image-usage {
    color: var(--text-muted) !important;
}

html.dark-mode .image-filename {
    color: var(--text-muted) !important;
}

html.dark-mode .image-delete-btn {
    background: rgba(220, 38, 38, 0.1) !important;
    border-color: rgba(248, 113, 113, 0.25) !important;
    color: #f87171 !important;
}

html.dark-mode .image-delete-btn:hover {
    background: rgba(220, 38, 38, 0.2) !important;
    border-color: rgba(248, 113, 113, 0.5) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   FAQ MANAGEMENT - DARK MODE
   Global styles for FAQ management page (bypasses Blazor CSS isolation)
   ════════════════════════════════════════════════════════════════════════════ */

/* FAQ Layout */
html.dark-mode .faq-layout {
    background: var(--bg-primary) !important;
}

/* FAQ Sidebar */
html.dark-mode .faq-sidebar {
    background: var(--bg-secondary) !important;
    border-right-color: var(--border-primary) !important;
}

html.dark-mode .faq-list {
    background: var(--bg-secondary) !important;
}

/* FAQ List Items - CRITICAL: Force white text on all elements */
html.dark-mode .faq-list-item {
    background: transparent !important;
}

html.dark-mode .faq-list-item:hover {
    background: var(--bg-tertiary) !important;
}

html.dark-mode .faq-list-item.active {
    background: rgba(59, 130, 246, 0.2) !important;
    border-color: #3b82f6 !important;
}

/* Force light text on FAQ items */
html.dark-mode .faq-list-item,
html.dark-mode .faq-list-item .item-main,
html.dark-mode .faq-list-item .item-text,
html.dark-mode .faq-list-item .item-icon,
html.dark-mode .faq-list-item .item-question,
html.dark-mode .item-question {
    color: #f1f5f9 !important;
}

html.dark-mode .faq-list-item .item-category,
html.dark-mode .item-category {
    background: var(--bg-hover, #475569) !important;
    color: #cbd5e1 !important;
}

html.dark-mode .faq-list-item .sort-order,
html.dark-mode .faq-list-item .item-badges {
    color: #94a3b8 !important;
}

html.dark-mode .faq-list-item .sort-order {
    background: var(--bg-hover, #475569) !important;
}

/* FAQ Editor */
html.dark-mode .faq-editor {
    background: var(--bg-secondary) !important;
}

html.dark-mode .faq-editor .editor-content {
    background: var(--bg-secondary) !important;
}

html.dark-mode .faq-editor .editor-header {
    background: var(--bg-tertiary) !important;
    border-bottom-color: var(--border-primary) !important;
}

html.dark-mode .faq-editor .editor-title {
    color: var(--text-primary) !important;
}

/* FAQ Preview */
html.dark-mode .faq-preview {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-secondary) !important;
}

html.dark-mode .preview-question {
    background: var(--bg-hover, #475569) !important;
    color: #f1f5f9 !important;
    border-bottom-color: var(--border-primary) !important;
}

html.dark-mode .preview-answer {
    color: #cbd5e1 !important;
    background: var(--bg-tertiary) !important;
}

/* FAQ Header */
html.dark-mode .faq-header {
    background: var(--bg-secondary) !important;
    border-bottom-color: var(--border-primary) !important;
}

/* Answer editor textarea */
html.dark-mode .answer-editor {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-secondary) !important;
    color: var(--text-primary) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   TESTIMONIAL MANAGEMENT - DARK MODE
   Global styles for testimonials page (bypasses Blazor CSS isolation)
   ════════════════════════════════════════════════════════════════════════════ */

/* Testimonial Layout */
html.dark-mode .testimonial-layout {
    background: var(--bg-primary) !important;
}

/* Testimonial Header */
html.dark-mode .testimonial-header {
    background: var(--bg-secondary) !important;
    border-bottom-color: var(--border-primary) !important;
}

/* Testimonial Sidebar */
html.dark-mode .testimonial-sidebar {
    background: var(--bg-secondary) !important;
    border-right-color: var(--border-primary) !important;
}

html.dark-mode .testimonial-list {
    background: var(--bg-secondary) !important;
}

/* Status Filter */
html.dark-mode .status-filter {
    background: var(--bg-secondary) !important;
    border-bottom-color: var(--border-primary) !important;
}

html.dark-mode .status-filter select {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-secondary) !important;
    color: var(--text-primary) !important;
}

/* Testimonial List Items - CRITICAL */
html.dark-mode .testimonial-list-item {
    background: transparent !important;
}

html.dark-mode .testimonial-list-item:hover {
    background: var(--bg-tertiary) !important;
}

html.dark-mode .testimonial-list-item.active {
    background: rgba(251, 191, 36, 0.15) !important;
    border-color: #fbbf24 !important;
}

html.dark-mode .testimonial-list-item.pending {
    background: rgba(251, 191, 36, 0.08) !important;
}

/* Force light text on testimonial items */
html.dark-mode .testimonial-list-item,
html.dark-mode .testimonial-list-item .item-main,
html.dark-mode .testimonial-list-item .item-text,
html.dark-mode .testimonial-list-item .item-name,
html.dark-mode .testimonial-list-item .item-preview,
html.dark-mode .item-name,
html.dark-mode .item-preview {
    color: #f1f5f9 !important;
}

html.dark-mode .testimonial-list-item .item-preview,
html.dark-mode .item-preview {
    color: #94a3b8 !important;
}

html.dark-mode .testimonial-list-item .sort-order,
html.dark-mode .testimonial-list-item .item-badges {
    color: #94a3b8 !important;
}

html.dark-mode .testimonial-list-item .sort-order {
    background: var(--bg-hover, #475569) !important;
}

html.dark-mode .avatar-placeholder {
    background: var(--bg-tertiary) !important;
    color: #fbbf24 !important;
}

/* Testimonial Editor */
html.dark-mode .testimonial-editor {
    background: var(--bg-secondary) !important;
}

html.dark-mode .testimonial-editor .editor-content {
    background: var(--bg-secondary) !important;
}

html.dark-mode .testimonial-editor .editor-header {
    background: var(--bg-tertiary) !important;
    border-bottom-color: var(--border-primary) !important;
}

html.dark-mode .testimonial-editor .editor-title {
    color: var(--text-primary) !important;
}

/* Content editor textarea */
html.dark-mode .content-editor {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-secondary) !important;
    color: var(--text-primary) !important;
}

html.dark-mode .char-count {
    color: var(--text-muted) !important;
}

/* Testimonial Preview - CRITICAL: Remove beige/cream background */
html.dark-mode .testimonial-preview,
html.dark-mode .preview-card {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-secondary) !important;
}

html.dark-mode .preview-content,
html.dark-mode .preview-content blockquote,
html.dark-mode blockquote.preview-content {
    background: transparent !important;
    color: #cbd5e1 !important;
}

html.dark-mode .preview-customer {
    background: transparent !important;
}

html.dark-mode .preview-name {
    color: var(--text-primary) !important;
}

html.dark-mode .preview-location {
    color: var(--text-tertiary) !important;
}

html.dark-mode .preview-avatar .avatar-placeholder {
    background: var(--bg-hover) !important;
    color: #fbbf24 !important;
}

/* Rating stars */
html.dark-mode .rating-input .star-btn {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-secondary) !important;
    color: #64748b !important;
}

html.dark-mode .rating-input .star-btn.filled {
    color: #fbbf24 !important;
}

html.dark-mode .star.filled {
    color: #fbbf24 !important;
}

/* Approval actions */
html.dark-mode .approval-actions {
    background: transparent !important;
}

html.dark-mode .approve-btn {
    background: rgba(34, 197, 94, 0.15) !important;
    border-color: rgba(74, 222, 128, 0.4) !important;
    color: #4ade80 !important;
}

html.dark-mode .approve-btn:hover {
    background: rgba(34, 197, 94, 0.25) !important;
}

html.dark-mode .reject-btn {
    background: rgba(220, 38, 38, 0.15) !important;
    border-color: rgba(248, 113, 113, 0.4) !important;
    color: #f87171 !important;
}

html.dark-mode .reject-btn:hover {
    background: rgba(220, 38, 38, 0.25) !important;
}

/* Pending alert banner */
html.dark-mode .pending-alert {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
}

html.dark-mode .pending-alert .alert-text {
    color: #fcd34d !important;
}

html.dark-mode .pending-alert .alert-action {
    color: #fbbf24 !important;
}

/* Feature toggle */
html.dark-mode .feature-toggle {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode .feature-toggle .toggle-label {
    color: var(--text-secondary) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   BOOK BUILDER - DARK MODE
   Global styles for BookBuilder page (bypasses Blazor CSS isolation)
   ════════════════════════════════════════════════════════════════════════════ */

/* BookBuilder Layout */
html.dark-mode .bb-layout {
    background: var(--bg-primary) !important;
}

html.dark-mode .bb-header {
    background: var(--bg-secondary) !important;
    border-bottom-color: var(--border-primary) !important;
}

/* BookBuilder Sidebar */
html.dark-mode .bb-sidebar {
    background: var(--bg-secondary) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

html.dark-mode .bb-sidebar .sidebar-header {
    border-bottom-color: var(--border-primary) !important;
}

html.dark-mode .bb-sidebar .sidebar-header h3 {
    color: var(--text-primary) !important;
}

html.dark-mode .page-count {
    color: var(--text-tertiary) !important;
}

html.dark-mode .page-list {
    background: var(--bg-secondary) !important;
}

html.dark-mode .page-item {
    color: var(--text-primary) !important;
}

html.dark-mode .page-item:hover {
    background: var(--bg-tertiary) !important;
}

html.dark-mode .page-item.active {
    background: rgba(59, 130, 246, 0.2) !important;
    border-color: #3b82f6 !important;
}

html.dark-mode .page-number {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

html.dark-mode .page-label {
    color: var(--text-secondary) !important;
}

/* BookBuilder Editor */
html.dark-mode .bb-editor {
    background: var(--bg-secondary) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

html.dark-mode .bb-editor .editor-header {
    border-bottom-color: var(--border-primary) !important;
}

html.dark-mode .spread-indicator {
    color: var(--text-primary) !important;
}

html.dark-mode .nav-btn {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-secondary) !important;
    color: var(--text-secondary) !important;
}

html.dark-mode .nav-btn:hover:not(:disabled) {
    background: var(--bg-hover) !important;
}

/* Page Edit Panels - CRITICAL */
html.dark-mode .page-edit {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode .page-edit.blank {
    background: var(--bg-secondary) !important;
}

html.dark-mode .blank-indicator {
    color: var(--text-muted) !important;
}

/* All inputs/textareas in page-edit */
html.dark-mode .page-edit input,
html.dark-mode .page-edit textarea,
html.dark-mode .page-edit select {
    background: var(--bg-secondary) !important;
    border-color: var(--border-secondary) !important;
    color: var(--text-primary) !important;
}

html.dark-mode .page-edit input::placeholder,
html.dark-mode .page-edit textarea::placeholder {
    color: var(--text-muted) !important;
}

/* Form groups in BookBuilder */
html.dark-mode .page-edit .form-group label,
html.dark-mode .bb-editor .form-group label,
html.dark-mode .bb-editor label {
    color: var(--text-secondary) !important;
}

/* Spread grid */
html.dark-mode .spread-grid {
    border-color: var(--border-primary) !important;
}

/* Page title input */
html.dark-mode .page-title-input {
    background: var(--bg-secondary) !important;
    border-color: var(--border-secondary) !important;
    color: var(--text-primary) !important;
}

/* Text area for content */
html.dark-mode .page-content-textarea,
html.dark-mode .prompt-textarea {
    background: var(--bg-secondary) !important;
    border-color: var(--border-secondary) !important;
    color: var(--text-primary) !important;
}

/* Function/Template section */
html.dark-mode .function-upload textarea {
    background: var(--bg-secondary) !important;
    border-color: var(--border-secondary) !important;
    color: var(--text-primary) !important;
}

/* Character checkbox labels */
html.dark-mode .char-check,
html.dark-mode .chars-label {
    color: var(--text-primary) !important;
}

html.dark-mode .char-check {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-primary) !important;
}

/* Approval checkbox */
html.dark-mode .approval-check {
    color: var(--text-secondary) !important;
}

/* Upload overlay button - keep visible */
html.dark-mode .upload-btn {
    background: #3b82f6 !important;
    color: white !important;
}

/* Delete buttons in page edit */
html.dark-mode .page-edit .delete-btn,
html.dark-mode .page-delete-btn {
    background: rgba(220, 38, 38, 0.15) !important;
    border-color: rgba(248, 113, 113, 0.4) !important;
    color: #f87171 !important;
}

/* Text edit buttons */
html.dark-mode .text-edit-btn,
html.dark-mode .page-edit button {
    background: var(--bg-secondary) !important;
    border-color: var(--border-secondary) !important;
    color: var(--text-secondary) !important;
}

html.dark-mode .text-edit-btn:hover,
html.dark-mode .page-edit button:hover {
    background: var(--bg-hover) !important;
}

/* Section labels in page edit */
html.dark-mode .section-label,
html.dark-mode .page-edit h4,
html.dark-mode .page-edit h5 {
    color: var(--text-secondary) !important;
}

/* Thumbnail/preview area */
html.dark-mode .page-thumbnail,
html.dark-mode .overlay-preview {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   MODAL STYLES - DARK MODE
   Global modal styles for all admin modals
   ════════════════════════════════════════════════════════════════════════════ */

/* Modal Backdrop - Dark Mode with blur */
html.dark-mode .modal-backdrop,
html.dark-mode .txt-modal-overlay,
html.dark-mode .img-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1000 !important;
}

/* Modal Container */
html.dark-mode .editor-modal,
html.dark-mode .txt-modal,
html.dark-mode .img-modal,
html.dark-mode .modal-content {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-primary) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

/* Modal Header — scoped to admin modals only (not auth login/register) */
html.dark-mode .txt-modal .modal-header,
html.dark-mode .txt-modal-title-row {
    background: var(--bg-tertiary) !important;
    border-bottom-color: var(--border-primary) !important;
}

html.dark-mode .txt-modal .modal-header h3,
html.dark-mode .txt-modal h3,
html.dark-mode .txt-modal-title-row h3 {
    color: var(--text-primary) !important;
}

html.dark-mode .modal-close {
    color: var(--text-tertiary) !important;
}

html.dark-mode .modal-close:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

/* Modal Body — scoped to admin modals only */
html.dark-mode .txt-modal .modal-body {
    background: var(--bg-secondary) !important;
}

html.dark-mode .modal-description {
    color: var(--text-tertiary) !important;
}

/* ── Warning Box in Modals - Dark Mode ──────────────────────────────────────
   NOTE: Deze styles staan hier (globaal CSS) en NIET in Books.razor.css
   omdat Blazor CSS isolation dark mode selectors blokkeert in component CSS.
   Zie SKILLS.md sectie 19 "Blazor CSS Isolation & Dark Mode" voor uitleg.
   ───────────────────────────────────────────────────────────────────────── */
html.dark-mode .warning-box {
    background: #450a0a !important;
    border-color: #dc2626 !important;
}

html.dark-mode .warning-box p {
    color: #fca5a5 !important;
}

html.dark-mode .warning-box strong {
    color: #fecaca !important;
}

html.dark-mode .delete-impact-list {
    color: #fca5a5 !important;
}

html.dark-mode .delete-book-info {
    background: var(--bg-tertiary) !important;
    border-color: #7f1d1d !important;
}

/* Modal Footer — scoped to admin modals only */
html.dark-mode .txt-modal .modal-footer,
html.dark-mode .txt-modal-actions {
    background: var(--bg-tertiary) !important;
    border-top-color: var(--border-primary) !important;
}

/* Txt-Modal Specific */
html.dark-mode .txt-modal {
    background: var(--bg-secondary) !important;
}

/* ── Translations Page Dark Mode ─────────────────────────────────────────────── */
html.dark-mode .alert-banner.alert-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(217, 119, 6, 0.08) 100%) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
    color: #fbbf24 !important;
}

html.dark-mode .alert-banner.alert-warning strong {
    color: #fde68a !important;
}

html.dark-mode .alert-banner.alert-warning .alert-subtitle {
    color: #d4a846 !important;
}

html.dark-mode .alert-banner.alert-info {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(37, 99, 235, 0.08) 100%) !important;
    border-color: rgba(96, 165, 250, 0.3) !important;
    color: #93c5fd !important;
}

html.dark-mode .alert-banner.alert-info strong {
    color: #bfdbfe !important;
}

html.dark-mode .alert-banner.alert-info .alert-subtitle {
    color: #7cadda !important;
}

html.dark-mode .alert-key {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
}

html.dark-mode .alert-details {
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .alert-group-label {
    color: var(--text-primary) !important;
}

html.dark-mode .trans-sidebar {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode .trans-body {
    background: var(--bg-primary) !important;
}

html.dark-mode .sidebar-item {
    color: var(--text-secondary) !important;
}

html.dark-mode .sidebar-item:hover {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

html.dark-mode .sidebar-item.active {
    background: #2563eb !important;
    color: #ffffff !important;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.4);
}

html.dark-mode .sidebar-badge.warn {
    background: rgba(251, 191, 36, 0.2) !important;
    color: #fbbf24 !important;
}

html.dark-mode .sidebar-badge.untrans {
    background: rgba(248, 113, 113, 0.2) !important;
    color: #f87171 !important;
}

html.dark-mode .trans-table tr.untranslated {
    background: rgba(245, 158, 11, 0.08) !important;
}

html.dark-mode .trans-table tr.untranslated:hover {
    background: rgba(245, 158, 11, 0.14) !important;
}

html.dark-mode .trans-table tr.code-missing {
    background: rgba(239, 68, 68, 0.08) !important;
}

html.dark-mode .trans-table tr.code-missing:hover {
    background: rgba(239, 68, 68, 0.14) !important;
}

html.dark-mode .trans-table tr.editing {
    background: rgba(59, 130, 246, 0.1) !important;
}

html.dark-mode .col-key code {
    color: #a5b4fc !important;
    background: rgba(99, 102, 241, 0.15) !important;
}

html.dark-mode .key-badge.warn {
    background: rgba(251, 191, 36, 0.2) !important;
    color: #fbbf24 !important;
}

html.dark-mode .text-value.missing {
    color: #fbbf24 !important;
}

html.dark-mode .save-btn:hover {
    background: rgba(74, 222, 128, 0.15) !important;
    color: #4ade80 !important;
}

html.dark-mode .cancel-btn:hover {
    background: rgba(248, 113, 113, 0.15) !important;
    color: #f87171 !important;
}

html.dark-mode .summary-item.new {
    background: rgba(74, 222, 128, 0.15) !important;
    color: #4ade80 !important;
}

html.dark-mode .summary-item.update {
    background: rgba(96, 165, 250, 0.15) !important;
    color: #93c5fd !important;
}

html.dark-mode .toast.success {
    background: rgba(22, 101, 52, 0.9) !important;
    color: #dcfce7 !important;
    border-color: rgba(74, 222, 128, 0.3) !important;
}

html.dark-mode .toast.error {
    background: rgba(153, 27, 27, 0.9) !important;
    color: #fee2e2 !important;
    border-color: rgba(248, 113, 113, 0.3) !important;
}

html.dark-mode .txt-modal label {
    color: var(--text-secondary) !important;
}

html.dark-mode .txt-modal .input,
html.dark-mode .txt-modal input,
html.dark-mode .txt-modal select {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-secondary) !important;
    color: var(--text-primary) !important;
}

html.dark-mode .txt-modal .input:focus,
html.dark-mode .txt-modal input:focus,
html.dark-mode .txt-modal select:focus {
    background: var(--bg-tertiary) !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

html.dark-mode .txt-modal .muted,
html.dark-mode .txt-modal small {
    color: var(--text-muted) !important;
}

html.dark-mode .txt-modal-actions {
    border-top-color: var(--border-primary) !important;
    background: transparent !important;
}

html.dark-mode .txt-modal-actions .cta.secondary {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-secondary) !important;
    color: var(--text-secondary) !important;
}

html.dark-mode .txt-modal-actions .cta.secondary:hover {
    background: var(--bg-hover) !important;
}

html.dark-mode .txt-modal-actions .cta:not(.secondary) {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: white !important;
}

html.dark-mode .txt-modal-actions .cta:not(.secondary):hover {
    background: #2563eb !important;
}

/* Modal Textarea */
html.dark-mode .modal-textarea {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-primary) !important;
}

html.dark-mode .modal-textarea:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

html.dark-mode .modal-textarea.result {
    background: var(--bg-primary) !important;
}

/* Text Toolbar in Modals */
html.dark-mode .text-toolbar {
    background: var(--bg-tertiary) !important;
}

html.dark-mode .toolbar-btn {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-secondary) !important;
}

html.dark-mode .toolbar-btn:hover {
    background: var(--bg-hover) !important;
    border-color: var(--border-secondary) !important;
}

html.dark-mode .toolbar-sep {
    background: var(--border-primary) !important;
}

/* Character Grid in Modals */
html.dark-mode .grid-header,
html.dark-mode .indiv-grid-header {
    color: var(--text-tertiary) !important;
}

html.dark-mode .grid-input,
html.dark-mode .indiv-grid input {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-primary) !important;
}

html.dark-mode .gender-option,
html.dark-mode .indiv-gender label {
    color: var(--text-secondary) !important;
}

/* Result Label */
html.dark-mode .result-label {
    color: var(--text-primary) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   GLOBAL MODAL OVERLAY STYLES
   These styles MUST be global to work with Blazor CSS isolation
   ════════════════════════════════════════════════════════════════════════════ */

/* Modal Overlay - Light Mode with blur */
.modal-backdrop,
.txt-modal-overlay,
.img-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(15, 23, 42, 0.5) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1000 !important;
}

/* Modal Container - Light Mode */
.editor-modal,
.txt-modal,
.img-modal {
    background: white !important;
    border-radius: 16px !important;
    width: 700px;
    max-width: 90vw !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid #e2e8f0 !important;
    padding: 1.5rem 2rem !important;
}

.txt-modal h3 {
    margin: 0 0 1rem 0 !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
}

.txt-modal label {
    display: block !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #475569 !important;
    margin-bottom: 0.375rem !important;
}

.txt-modal .input,
.txt-modal input[type="text"],
.txt-modal input[type="number"],
.txt-modal input[type="color"],
.txt-modal select {
    width: 100%;
    padding: 0.625rem 0.875rem !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    font-size: 0.9rem !important;
    background: #f8fafc !important;
    color: #1e293b !important;
    transition: all 0.2s ease !important;
}

.txt-modal .input:focus,
.txt-modal input:focus,
.txt-modal select:focus {
    outline: none !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    background: white !important;
}

.txt-modal .muted,
.txt-modal small {
    display: block !important;
    font-size: 0.8rem !important;
    color: #64748b !important;
    margin-top: 0.375rem !important;
}

.txt-modal-actions {
    display: flex !important;
    gap: 0.75rem !important;
    margin-top: 1.5rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid #e2e8f0 !important;
}

.txt-modal-actions .cta {
    padding: 0.625rem 1.25rem !important;
    border-radius: 8px !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.txt-modal-actions .cta.secondary {
    background: white !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
}

.txt-modal-actions .cta.secondary:hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

.txt-modal-actions .cta:not(.secondary) {
    background: #3b82f6 !important;
    border: 1px solid #3b82f6 !important;
    color: white !important;
}

.txt-modal-actions .cta:not(.secondary):hover {
    background: #2563eb !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   GLOBAL MODAL - DARK MODE
   ════════════════════════════════════════════════════════════════════════════ */

/* Modal Overlay - Dark Mode */
html.dark-mode .modal-backdrop,
html.dark-mode .txt-modal-overlay,
html.dark-mode .img-modal-overlay {
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

/* Modal Container - Dark Mode */
html.dark-mode .editor-modal,
html.dark-mode .txt-modal,
html.dark-mode .img-modal {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-primary) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .txt-modal h3 {
    color: var(--text-primary) !important;
}

html.dark-mode .txt-modal label {
    color: var(--text-secondary) !important;
}

html.dark-mode .txt-modal .input,
html.dark-mode .txt-modal input[type="text"],
html.dark-mode .txt-modal input[type="number"],
html.dark-mode .txt-modal input[type="color"],
html.dark-mode .txt-modal select {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-secondary) !important;
    color: var(--text-primary) !important;
}

html.dark-mode .txt-modal .input:focus,
html.dark-mode .txt-modal input:focus,
html.dark-mode .txt-modal select:focus {
    background: var(--bg-tertiary) !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

html.dark-mode .txt-modal .muted,
html.dark-mode .txt-modal small {
    color: var(--text-muted) !important;
}

html.dark-mode .txt-modal-actions {
    border-top-color: var(--border-primary) !important;
}

html.dark-mode .txt-modal-actions .cta.secondary {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-secondary) !important;
    color: var(--text-secondary) !important;
}

html.dark-mode .txt-modal-actions .cta.secondary:hover {
    background: var(--bg-hover) !important;
}

html.dark-mode .txt-modal-actions .cta:not(.secondary) {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: white !important;
}

html.dark-mode .txt-modal-actions .cta:not(.secondary):hover {
    background: #2563eb !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GIFT CARD INFO BOX (AppSettings Cadeaubonnen sectie)
   ═══════════════════════════════════════════════════════════════════════════ */
.giftcard-info-box {
    margin-top: 1.5rem;
    padding: 1rem;
    background: linear-gradient(135deg, #eef2ff 0%, #e8ecff 100%);
    border: 1px solid #c7d2fe;
    border-radius: 10px;
}

.giftcard-info-box h3 {
    font-size: 1rem;
    margin: 0 0 1rem;
    color: #4338ca;
}

.giftcard-info-box ul {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.9rem;
    line-height: 1.8;
    color: #6366f1;
}

.giftcard-info-box li strong {
    color: #4338ca;
}

html.dark-mode .giftcard-info-box {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(99, 102, 241, 0.3);
}

html.dark-mode .giftcard-info-box h3 {
    color: #a5b4fc;
}

html.dark-mode .giftcard-info-box ul,
html.dark-mode .giftcard-info-box li {
    color: #c7d2fe;
}

html.dark-mode .giftcard-info-box li strong {
    color: #e0e7ff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GIFT CARD MANAGEMENT PAGE (/admin/giftcards)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Alert banners */
.gc-alert-warning {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin: 0 2rem 1rem;
    font-size: 0.875rem;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

.gc-alert-warning a {
    color: #b45309;
    font-weight: 500;
}

html.dark-mode .gc-alert-warning {
    background: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.25);
}

html.dark-mode .gc-alert-warning a {
    color: #818cf8;
}

/* Create message (success/error feedback) */
.gc-create-message {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
}

.gc-msg-success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.gc-msg-error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

html.dark-mode .gc-msg-success {
    background: rgba(74, 222, 128, 0.1);
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.25);
}

html.dark-mode .gc-msg-error {
    background: rgba(248, 113, 113, 0.1);
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.25);
}

/* ════════════════════════════════════════════════════════════════════════════
   ORDER DETAILS - DARK MODE
   Globale overrides omdat scoped :global() niet door browsers wordt verwerkt
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Geselecteerde tabelrij (afbeeldings-runs & page-runs) ──────────────── */
html.dark-mode .selected-row {
    background-color: rgba(74, 222, 128, 0.12) !important;
}

html.dark-mode .selected-label {
    color: #4ade80 !important;
}

/* ── Wachtende rij ──────────────────────────────────────────────────────── */
html.dark-mode .waiting-row td {
    color: var(--text-muted) !important;
}

/* ── Error rij ──────────────────────────────────────────────────────────── */
html.dark-mode .error-row td {
    color: #f87171 !important;
    background: rgba(248, 113, 113, 0.08) !important;
}

/* ── Run-headers (Pagina X / Karakter naam) ─────────────────────────────── */
html.dark-mode .page-run-header h3,
html.dark-mode .char-run-header h3 {
    color: var(--text-primary) !important;
}

/* ── PDF notice box (cream achtergrond) ─────────────────────────────────── */
html.dark-mode .pdf-notice-box {
    background: rgba(251, 191, 36, 0.1) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
}

html.dark-mode .pdf-notice-box strong {
    color: var(--text-primary) !important;
}

html.dark-mode .pdf-notice-box span {
    color: var(--text-secondary) !important;
}

/* ── Cloud PDF URL box (blauwe achtergrond) ─────────────────────────────── */
html.dark-mode .cloud-pdf-box {
    background: rgba(96, 165, 250, 0.1) !important;
    border-color: rgba(96, 165, 250, 0.3) !important;
}

html.dark-mode .cloud-pdf-box strong {
    color: var(--text-primary) !important;
}

html.dark-mode .cloud-pdf-link {
    color: #60a5fa !important;
}

html.dark-mode .cloud-pdf-url {
    color: var(--text-secondary) !important;
}

/* ── PDF regeneratie-waarschuwing ────────────────────────────────────────── */
html.dark-mode .pdf-regen-warning {
    color: #f87171 !important;
}

/* ── Goedgekeurde PDF tekst ─────────────────────────────────────────────── */
html.dark-mode .acknowledged-text {
    color: var(--text-secondary) !important;
}

/* ── Storage indicator (cloud/lokaal icoon) ─────────────────────────────── */
html.dark-mode .storage-indicator {
    background: rgba(30, 41, 59, 0.9) !important;
}

html.dark-mode .storage-indicator.cloud {
    background: rgba(96, 165, 250, 0.3) !important;
}

html.dark-mode .storage-indicator.local {
    background: rgba(100, 116, 139, 0.5) !important;
}

/* ── Status badges (order process statussen) ────────────────────────────── */
html.dark-mode .status-completed {
    background: rgba(74, 222, 128, 0.2) !important;
    color: #4ade80 !important;
}

html.dark-mode .status-failed {
    background: rgba(248, 113, 113, 0.2) !important;
    color: #f87171 !important;
}

html.dark-mode .status-inprogress {
    background: rgba(251, 191, 36, 0.2) !important;
    color: #fbbf24 !important;
}

html.dark-mode .status-pending {
    background: var(--bg-tertiary) !important;
    color: var(--text-muted) !important;
}

/* ── Placeholder tekst ──────────────────────────────────────────────────── */
html.dark-mode .placeholder {
    color: var(--text-muted) !important;
}

/* ── Korting-rij in prijstabel ──────────────────────────────────────────── */
html.dark-mode .discount-row td {
    color: #4ade80 !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   OPERATIONS DASHBOARD - EXPLICIT DARK MODE OVERRIDES
   These rules are in admin-shared.css (non-scoped) to avoid Blazor scoping issues
   ════════════════════════════════════════════════════════════════════════════ */

/* Operations Dashboard container background */
html.dark-mode .ops-dashboard {
    background: #0f172a !important;
    color: #f1f5f9 !important;
}

/* Card titles (h3) - CRITICAL fix for invisible text */
html.dark-mode .ops-dashboard .card-title,
html.dark-mode .ops-dashboard h3.card-title,
html.dark-mode .ops-dashboard h3 {
    color: #f1f5f9 !important;
}

/* Page title */
html.dark-mode .ops-dashboard .page-title {
    color: #f1f5f9 !important;
}

/* Metric cards */
html.dark-mode .ops-dashboard .metric-label {
    color: #94a3b8 !important;
}

html.dark-mode .ops-dashboard .metric-value {
    color: #f1f5f9 !important;
}

html.dark-mode .ops-dashboard .metric-change {
    background: transparent !important;
}

html.dark-mode .ops-dashboard .metric-sub,
html.dark-mode .ops-dashboard .metric-mini,
html.dark-mode .ops-dashboard .metric-breakdown {
    color: #94a3b8 !important;
    background: transparent !important;
}

/* Worker and queue items */
html.dark-mode .ops-dashboard .worker-item,
html.dark-mode .ops-dashboard .queue-item {
    background: #334155 !important;
    border-color: #475569 !important;
}

html.dark-mode .ops-dashboard .worker-name,
html.dark-mode .ops-dashboard .queue-name {
    color: #f1f5f9 !important;
}

html.dark-mode .ops-dashboard .worker-stats .stat-value {
    color: #f1f5f9 !important;
}

html.dark-mode .ops-dashboard .worker-stats .stat-label {
    color: #94a3b8 !important;
}

/* Error items */
html.dark-mode .ops-dashboard .error-item {
    background: #334155 !important;
}

html.dark-mode .ops-dashboard .error-message {
    color: #cbd5e1 !important;
}

/* Funnel */
html.dark-mode .ops-dashboard .funnel-label {
    color: #f1f5f9 !important;
}

html.dark-mode .ops-dashboard .funnel-rate,
html.dark-mode .ops-dashboard .summary-label {
    color: #94a3b8 !important;
}

/* All inner elements should be transparent to show card background */
html.dark-mode .ops-dashboard .metric-header,
html.dark-mode .ops-dashboard .worker-header,
html.dark-mode .ops-dashboard .queue-header,
html.dark-mode .ops-dashboard .worker-stats,
html.dark-mode .ops-dashboard .queue-stats,
html.dark-mode .ops-dashboard .queue-bars,
html.dark-mode .ops-dashboard .workers-grid,
html.dark-mode .ops-dashboard .queues-grid,
html.dark-mode .ops-dashboard .errors-list,
html.dark-mode .ops-dashboard .funnel-visual,
html.dark-mode .ops-dashboard .funnel-step,
html.dark-mode .ops-dashboard .funnel-info,
html.dark-mode .ops-dashboard .funnel-summary,
html.dark-mode .ops-dashboard .chart-container,
html.dark-mode .ops-dashboard .chart-legend,
html.dark-mode .ops-dashboard .alerts-banner {
    background: transparent !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   IMPORT CONFIRMATION MODAL - DARK MODE (EmailTemplates page)
   ════════════════════════════════════════════════════════════════════════════ */

html.dark-mode .modal-overlay {
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

html.dark-mode .modal-dialog {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-primary) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .modal-dialog h3 {
    color: var(--text-primary) !important;
}

html.dark-mode .modal-dialog p {
    color: var(--text-secondary) !important;
}

html.dark-mode .modal-dialog p strong {
    color: var(--text-primary) !important;
}

html.dark-mode .import-summary li {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-primary) !important;
    color: var(--text-primary) !important;
}

html.dark-mode .import-summary li strong {
    color: var(--text-primary) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   STORY IMPORT CONFIRMATION MODAL - DARK MODE (BookBuilder page)
   Global styles to bypass Blazor CSS isolation
   ════════════════════════════════════════════════════════════════════════════ */

/* Overlay */
html.dark-mode .bb-import-overlay {
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

/* Dialog */
html.dark-mode .bb-import-dialog {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-primary) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .bb-import-dialog h3 {
    color: var(--text-primary) !important;
}

html.dark-mode .bb-import-dialog p {
    color: var(--text-secondary) !important;
}

html.dark-mode .bb-import-dialog p strong {
    color: var(--text-primary) !important;
}

/* Warning box */
html.dark-mode .bb-import-warning {
    background: rgba(146, 64, 14, 0.2) !important;
    color: #fde68a !important;
    border-color: rgba(146, 64, 14, 0.4) !important;
}

/* Summary list items */
html.dark-mode .bb-import-summary li {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-secondary) !important;
    color: var(--text-primary) !important;
}

html.dark-mode .bb-import-summary li strong {
    color: var(--text-primary) !important;
}

/* Toast notifications */
html.dark-mode .bb-toast-success {
    background: rgba(6, 78, 59, 0.95) !important;
    color: #a7f3d0 !important;
    border-color: rgba(6, 95, 70, 0.6) !important;
}

html.dark-mode .bb-toast-error {
    background: rgba(69, 10, 10, 0.95) !important;
    color: #fca5a5 !important;
    border-color: rgba(153, 27, 27, 0.6) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   LEGAL DOCUMENTS - DARK MODE
   Global styles for legal documents page (bypasses Blazor CSS isolation)
   ════════════════════════════════════════════════════════════════════════════ */

/* Header */
html.dark-mode .legal-header {
    background: var(--bg-secondary) !important;
    border-bottom-color: var(--border-primary) !important;
}

/* Coverage Grid */
html.dark-mode .coverage-grid {
    background: var(--bg-primary) !important;
    border-bottom-color: var(--border-primary) !important;
}

html.dark-mode .coverage-card {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode .coverage-card.complete {
    background: rgba(34, 197, 94, 0.1) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}

html.dark-mode .coverage-card.incomplete {
    background: rgba(245, 158, 11, 0.1) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}

html.dark-mode .coverage-lang {
    color: var(--text-primary) !important;
}

html.dark-mode .coverage-label {
    color: var(--text-tertiary) !important;
}

/* Document Type Tabs */
html.dark-mode .doctype-tabs {
    background: var(--bg-secondary) !important;
    border-bottom-color: var(--border-primary) !important;
}

html.dark-mode .doctype-tab {
    color: var(--text-secondary) !important;
}

html.dark-mode .doctype-tab:hover {
    color: var(--text-primary) !important;
    background: var(--bg-tertiary) !important;
}

html.dark-mode .doctype-tab.active {
    color: #60a5fa !important;
    border-bottom-color: #60a5fa !important;
}

/* Language Tabs */
html.dark-mode .lang-tabs {
    background: var(--bg-primary) !important;
    border-bottom-color: var(--border-primary) !important;
}

html.dark-mode .lang-tab {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-secondary) !important;
}

html.dark-mode .lang-tab:hover {
    border-color: #60a5fa !important;
    background: rgba(59, 130, 246, 0.1) !important;
}

html.dark-mode .lang-tab.active {
    background: #3b82f6 !important;
    color: white !important;
    border-color: #3b82f6 !important;
}

html.dark-mode .lang-tab.has-content:not(.active) {
    border-color: rgba(34, 197, 94, 0.4) !important;
}

html.dark-mode .lang-tab.active .lang-check {
    color: white !important;
}

/* Editor Layout */
html.dark-mode .editor-layout {
    background: var(--bg-primary) !important;
}

html.dark-mode .editor-panel,
html.dark-mode .preview-panel {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

/* Panel Header */
html.dark-mode .panel-header {
    background: var(--bg-tertiary) !important;
    border-bottom-color: var(--border-primary) !important;
}

html.dark-mode .panel-header h3 {
    color: var(--text-primary) !important;
}

html.dark-mode .last-modified {
    color: var(--text-tertiary) !important;
}

/* Editor Help */
html.dark-mode .editor-help {
    border-bottom-color: var(--border-primary) !important;
}

html.dark-mode .editor-help summary {
    color: var(--text-secondary) !important;
}

html.dark-mode .editor-help summary:hover {
    color: #60a5fa !important;
}

html.dark-mode .help-content {
    color: var(--text-secondary) !important;
}

html.dark-mode .help-content code {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* HTML Editor (textarea) */
html.dark-mode .html-editor {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

html.dark-mode .html-editor::placeholder {
    color: var(--text-muted) !important;
}

/* Editor Footer */
html.dark-mode .editor-footer {
    background: var(--bg-secondary) !important;
    border-top: 1px solid var(--border-primary) !important;
}

html.dark-mode .char-count {
    color: var(--text-tertiary) !important;
}

/* Preview Toggle */
html.dark-mode .preview-toggle {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-secondary) !important;
}

html.dark-mode .preview-toggle:hover {
    background: var(--bg-tertiary) !important;
}

html.dark-mode .preview-toggle.active {
    background: rgba(59, 130, 246, 0.15) !important;
    border-color: rgba(96, 165, 250, 0.4) !important;
    color: #60a5fa !important;
}

/* Preview Content */
html.dark-mode .preview-content {
    background: var(--bg-secondary) !important;
}

html.dark-mode .preview-content h2 {
    color: #60a5fa !important;
    border-bottom-color: rgba(96, 165, 250, 0.2) !important;
}

html.dark-mode .preview-content h3,
html.dark-mode .preview-content strong {
    color: var(--text-primary) !important;
}

html.dark-mode .preview-content p,
html.dark-mode .preview-content li,
html.dark-mode .preview-content td {
    color: var(--text-secondary) !important;
}

html.dark-mode .preview-content th {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

html.dark-mode .preview-content th,
html.dark-mode .preview-content td {
    border-color: var(--border-primary) !important;
}

html.dark-mode .preview-content a {
    color: #60a5fa !important;
}

html.dark-mode .preview-empty {
    color: var(--text-tertiary) !important;
}

html.dark-mode .preview-empty p {
    color: var(--text-tertiary) !important;
}

/* Danger Zone */
html.dark-mode .danger-zone {
    background: rgba(220, 38, 38, 0.1) !important;
    border-color: rgba(220, 38, 38, 0.3) !important;
}

html.dark-mode .danger-zone h4 {
    color: #fca5a5 !important;
}

html.dark-mode .danger-zone p {
    color: #fecaca !important;
}

/* Empty State */
html.dark-mode .empty-state {
    color: var(--text-secondary) !important;
}

html.dark-mode .empty-state h2 {
    color: var(--text-primary) !important;
}

html.dark-mode .empty-state p {
    color: var(--text-secondary) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   KPI DASHBOARD - DARK MODE OVERRIDES
   These MUST be at the end of the file to override the [class*="-card"],
   [class*="-label"] and [class*="-value"] wildcards via source-order.
   ════════════════════════════════════════════════════════════════════════════ */
html.dark-mode .kpi-grid .kpi-card {
    background: rgba(30, 41, 59, 0.45) !important;
    border-color: rgba(51, 65, 85, 0.5) !important;
    box-shadow: none !important;
}

html.dark-mode .kpi-grid .kpi-card:hover {
    background: rgba(30, 41, 59, 0.65) !important;
    border-color: rgba(71, 85, 105, 0.6) !important;
}

html.dark-mode .kpi-names-list .kpi-name-row {
    background: rgba(255, 255, 255, 0.03) !important;
}

html.dark-mode .kpi-names-list .kpi-name-row:hover {
    background: rgba(255, 255, 255, 0.07) !important;
}

html.dark-mode .kpi-name-row .kpi-name {
    color: var(--text-tertiary, #94a3b8) !important;
}

html.dark-mode .kpi-name-row .kpi-name-count {
    color: var(--text-muted, #64748b) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   PRICING PAGE & OFFERING MODAL - DARK MODE
   Global styles (bypasses Blazor CSS isolation)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── btn-browse ("Kies" button) ─────────────────────────────────────────────── */
html.dark-mode .btn-browse {
    background: var(--bg-secondary) !important;
    border-color: var(--border-secondary) !important;
    color: var(--text-secondary) !important;
}

html.dark-mode .btn-browse:hover:not(:disabled) {
    background: var(--bg-tertiary) !important;
    border-color: var(--accent-primary) !important;
    color: var(--text-primary) !important;
}

/* ── Offering Modal layout ──────────────────────────────────────────────────── */
html.dark-mode .offering-modal {
    background: var(--bg-secondary) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6) !important;
}

html.dark-mode .offering-modal .modal-header {
    background: var(--bg-tertiary) !important;
    border-bottom-color: var(--border-primary) !important;
}

html.dark-mode .offering-modal .modal-header h3 {
    color: var(--text-primary) !important;
}

html.dark-mode .offering-modal .modal-close:hover {
    background: var(--bg-hover) !important;
}

html.dark-mode .offering-modal .modal-body {
    background: var(--bg-secondary) !important;
}

/* ── Filters ─────────────────────────────────────────────────────────────────── */
html.dark-mode .offering-modal .filter-input,
html.dark-mode .offering-modal .filter-select {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-primary) !important;
}

html.dark-mode .offering-modal .filter-input::placeholder {
    color: var(--text-muted) !important;
}

html.dark-mode .offering-modal .filter-select option {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* ── Country selector ────────────────────────────────────────────────────────── */
html.dark-mode .offering-modal .country-selector {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode .offering-modal .country-label {
    color: var(--text-secondary) !important;
}

html.dark-mode .offering-modal .country-option {
    color: var(--text-secondary) !important;
}

/* ── Filter notices ──────────────────────────────────────────────────────────── */
html.dark-mode .offering-modal .filter-notice.success {
    background: rgba(74, 222, 128, 0.1) !important;
    border-color: rgba(74, 222, 128, 0.25) !important;
    color: #4ade80 !important;
}

html.dark-mode .offering-modal .filter-notice.warning {
    background: rgba(251, 191, 36, 0.1) !important;
    border-color: rgba(251, 191, 36, 0.25) !important;
    color: #fbbf24 !important;
}

/* ── Region group ────────────────────────────────────────────────────────────── */
html.dark-mode .offering-modal .region-group {
    background: var(--bg-primary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode .offering-modal .region-title {
    color: var(--text-primary) !important;
}

html.dark-mode .offering-modal .category-title {
    color: var(--text-secondary) !important;
}

/* ── Offerings table ─────────────────────────────────────────────────────────── */
html.dark-mode .offering-modal .offerings-table {
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

html.dark-mode .offering-modal .offerings-table thead {
    background: var(--bg-tertiary) !important;
}

html.dark-mode .offering-modal .offerings-table th {
    color: var(--text-tertiary) !important;
    border-bottom-color: var(--border-primary) !important;
}

html.dark-mode .offering-modal .offerings-table td {
    color: var(--text-secondary) !important;
    border-bottom-color: var(--border-primary) !important;
}

html.dark-mode .offering-modal .offerings-table tbody tr {
    background: var(--bg-secondary) !important;
}

html.dark-mode .offering-modal .offerings-table tbody tr:hover {
    background: var(--bg-tertiary) !important;
}

/* ── Current offering highlight (subtle blue instead of bright yellow) ────── */
html.dark-mode .offering-modal .offerings-table tr.current-offering {
    background: rgba(96, 165, 250, 0.1) !important;
}

html.dark-mode .offering-modal .offerings-table tr.current-offering:hover {
    background: rgba(96, 165, 250, 0.18) !important;
}

html.dark-mode .offering-modal .current-badge {
    background: var(--accent-primary) !important;
    color: #ffffff !important;
}

/* ── Action buttons inside modal ─────────────────────────────────────────────── */
html.dark-mode .offering-modal .action-btn.primary {
    background: var(--accent-primary) !important;
    color: #ffffff !important;
}

html.dark-mode .offering-modal .action-btn.primary:hover:not(:disabled) {
    background: var(--accent-hover) !important;
}

/* ── Loading & messages ──────────────────────────────────────────────────────── */
html.dark-mode .offering-modal .loading-container {
    color: var(--text-tertiary) !important;
}

html.dark-mode .offering-modal .error-message {
    background: rgba(248, 113, 113, 0.1) !important;
    border-color: rgba(248, 113, 113, 0.25) !important;
    color: #f87171 !important;
}

html.dark-mode .offering-modal .empty-message {
    color: var(--text-muted) !important;
}

html.dark-mode .offering-modal .info-message {
    background: rgba(96, 165, 250, 0.1) !important;
    border-color: rgba(96, 165, 250, 0.25) !important;
    color: #60a5fa !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   DASHBOARD — Visitors Today Bar Dark Mode (Dashboard.razor)
   Moved from scoped CSS because :global() is not processed in .NET 10.
   ════════════════════════════════════════════════════════════════════════════ */
html.dark-mode .visitors-today-bar {
    background: linear-gradient(135deg, #052e16 0%, #0f172a 100%) !important;
    border-color: #14532d !important;
    color: #94a3b8 !important;
}
html.dark-mode .visitors-today-bar:hover {
    border-color: #16a34a !important;
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.08) !important;
}
html.dark-mode .visitors-stat strong { color: #f1f5f9 !important; }
html.dark-mode .visitors-sep { color: #334155 !important; }
html.dark-mode .visitors-goto { color: #818cf8 !important; }
html.dark-mode .visitors-label { color: #4ade80 !important; }


/* ════════════════════════════════════════════════════════════════════════════
   SITE STATISTICS — Dark Mode (SiteStatistics.razor)
   These rules MUST be in admin-shared.css because :global() processing
   is broken in .NET 10 Blazor scoped CSS — the :global() wrapper is NOT
   removed from the CSS bundle output, making the selectors invalid for
   browsers. By placing them here as normal global CSS they work correctly.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Header ────────────────────────────────────────────────────────────── */
html.dark-mode .stats-header {
    background: var(--bg-secondary) !important;
    border-bottom-color: var(--border-primary) !important;
    color: var(--text-primary) !important;
}
html.dark-mode .stats-header .breadcrumb-link { color: #60a5fa !important; }
html.dark-mode .stats-header .breadcrumb-link:hover { color: #93bbfd !important; }
html.dark-mode .stats-header .breadcrumb-sep { color: var(--text-muted) !important; }
html.dark-mode .stats-header .breadcrumb-current { color: var(--text-tertiary) !important; }
html.dark-mode .stats-header .page-title { color: var(--text-primary) !important; }
html.dark-mode .stats-header .header-subtitle { color: var(--text-tertiary) !important; }
html.dark-mode .stats-header .stats-logo { background: rgba(96, 165, 250, 0.15) !important; }
html.dark-mode .stats-header .stats-logo svg { color: #60a5fa !important; }
html.dark-mode .stats-header .action-btn {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-secondary) !important;
}
html.dark-mode .stats-header .action-btn:hover {
    background: var(--bg-hover) !important;
    border-color: var(--border-secondary) !important;
    color: var(--text-primary) !important;
}
html.dark-mode .stats-header .period-selector {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-primary) !important;
}
html.dark-mode .stats-header .period-btn { color: var(--text-tertiary) !important; }
html.dark-mode .stats-header .period-btn:hover { color: var(--text-primary) !important; background: var(--bg-hover) !important; }
html.dark-mode .stats-header .period-btn.active { background: #3b82f6 !important; color: #fff !important; }

/* ── Disabled banner ───────────────────────────────────────────────────── */
html.dark-mode .disabled-banner {
    background: #422006 !important;
    border-color: #92400e !important;
    color: #fbbf24 !important;
}
html.dark-mode .disabled-banner a { color: #fbbf24 !important; }

/* ── Today live banner ─────────────────────────────────────────────────── */
html.dark-mode .today-banner {
    background: #1e293b !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}
html.dark-mode .today-label { color: #e2e8f0 !important; }
html.dark-mode .today-value { color: #f1f5f9 !important; }
html.dark-mode .today-key   { color: #cbd5e1 !important; }
html.dark-mode .today-divider { background: #475569 !important; }
html.dark-mode .today-metric.device .today-key { color: #94a3b8 !important; }
html.dark-mode .device-bar  { background: #475569 !important; }

/* ── Summary cards ─────────────────────────────────────────────────────── */
html.dark-mode .summary-card {
    background: var(--bg-secondary) !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}
html.dark-mode .summary-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
    border-color: #64748b !important;
}
html.dark-mode .summary-card.hits .card-icon     { background: linear-gradient(135deg, #1e1b4b, #312e81) !important; }
html.dark-mode .summary-card.visitors .card-icon  { background: linear-gradient(135deg, #052e16, #14532d) !important; }
html.dark-mode .summary-card.sessions .card-icon  { background: linear-gradient(135deg, #451a03, #78350f) !important; }
html.dark-mode .summary-card.peak .card-icon      { background: linear-gradient(135deg, #4a0519, #831843) !important; }
html.dark-mode .card-value { color: #f1f5f9 !important; }
html.dark-mode .card-label { color: #e2e8f0 !important; }
html.dark-mode .card-sub   { color: #94a3b8 !important; }

/* ── Chart card ────────────────────────────────────────────────────────── */
html.dark-mode .chart-card,
html.dark-mode .detail-card,
html.dark-mode .pages-card {
    background: var(--bg-secondary) !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}
html.dark-mode .chart-header  { background: transparent !important; }
html.dark-mode .chart-title,
html.dark-mode .detail-title  { color: #f1f5f9 !important; }
html.dark-mode .chart-legend  { color: #cbd5e1 !important; }
html.dark-mode .chart-empty   { color: #94a3b8 !important; }
html.dark-mode .bar-label     { color: #94a3b8 !important; }
html.dark-mode .hits-bar      { background: linear-gradient(to top, #818cf8, #a5b4fc) !important; }
html.dark-mode .visitors-bar  { background: linear-gradient(to top, #34d399, #6ee7b7) !important; }
html.dark-mode .hits-color    { background: #818cf8 !important; }
html.dark-mode .visitors-color { background: #34d399 !important; }

/* ── Device breakdown ──────────────────────────────────────────────────── */
html.dark-mode .device-breakdown { color: #e2e8f0 !important; }
html.dark-mode .device-name     { color: #f1f5f9 !important; }
html.dark-mode .device-bar-outer { background: #334155 !important; }
html.dark-mode .device-pct      { color: #f1f5f9 !important; }
html.dark-mode .device-count    { color: #cbd5e1 !important; }

/* ── Referrers ─────────────────────────────────────────────────────────── */
html.dark-mode .referrer-row       { color: #e2e8f0 !important; }
html.dark-mode .referrer-name      { color: #f1f5f9 !important; }
html.dark-mode .referrer-bar-outer { background: #334155 !important; }
html.dark-mode .referrer-count     { color: #f1f5f9 !important; }
html.dark-mode .referrer-empty     { color: #94a3b8 !important; }
html.dark-mode .referrer-favicon   { background: #0f172a !important; border-color: #475569 !important; }

/* ── Pages table ───────────────────────────────────────────────────────── */
html.dark-mode .pages-header-row { color: #94a3b8 !important; border-color: #475569 !important; }
html.dark-mode .pages-row        { border-color: #334155 !important; color: #e2e8f0 !important; }
html.dark-mode .pages-row:hover  { background: #0f172a !important; }
html.dark-mode .pages-row.top-three { background: linear-gradient(135deg, rgba(129,140,248,0.05), rgba(129,140,248,0.1)) !important; }
html.dark-mode .col-path     { color: #f1f5f9 !important; }
html.dark-mode .col-hits     { color: #f1f5f9 !important; }
html.dark-mode .col-visitors { color: #cbd5e1 !important; }
html.dark-mode .col-rank     { color: #cbd5e1 !important; }
html.dark-mode .col-bar      { background: #334155 !important; }
html.dark-mode .pages-empty  { color: #94a3b8 !important; }

/* ── Loading / Period / Auto-refresh ───────────────────────────────────── */
html.dark-mode .loading-container { color: #cbd5e1 !important; }
html.dark-mode .loading-spinner   { border-color: #334155 !important; border-top-color: #818cf8 !important; }
html.dark-mode .period-btn.active { background: rgba(255,255,255,0.2) !important; }

html.dark-mode .auto-refresh-toggle {
    background: rgba(30, 41, 59, 0.8) !important;
    border-color: #475569 !important;
    color: #94a3b8 !important;
}
html.dark-mode .auto-refresh-toggle:hover { color: #a5b4fc !important; border-color: #818cf8 !important; background: #1e293b !important; }
html.dark-mode .auto-refresh-toggle.active {
    background: linear-gradient(135deg, #4338ca, #6d28d9) !important;
    border-color: #818cf8 !important;
    color: #fff !important;
}
html.dark-mode .auto-label { background: rgba(129, 140, 248, 0.2) !important; color: #a5b4fc !important; }

/* ── Hourly chart ──────────────────────────────────────────────────────── */
html.dark-mode .hourly-chart {
    background: #1e293b !important;
    border-color: #475569 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}
html.dark-mode .hourly-bar                     { background: linear-gradient(to top, #6366f1, #a5b4fc) !important; }
html.dark-mode .hourly-col.current .hourly-bar { background: linear-gradient(to top, #22c55e, #86efac) !important; box-shadow: 0 0 10px rgba(34,197,94,0.4) !important; }
html.dark-mode .hourly-col.future .hourly-bar  { background: #334155 !important; }
html.dark-mode .hourly-label                   { color: #c7d2fe !important; }
html.dark-mode .hourly-col.current .hourly-label { color: #4ade80 !important; }
html.dark-mode .hourly-time                    { color: #94a3b8 !important; }

/* ── Period comparison badges ──────────────────────────────────────────── */
html.dark-mode .card-change.positive { background: rgba(34, 197, 94, 0.15) !important; color: #4ade80 !important; }
html.dark-mode .card-change.negative { background: rgba(239, 68, 68, 0.15) !important; color: #f87171 !important; }

/* ════════════════════════════════════════════════════════════════════════════
   OPERATIONS DASHBOARD - DARK MODE
   Queue bar override — scoped CSS variables don't cascade reliably,
   so this must live in admin-shared.css.
   ════════════════════════════════════════════════════════════════════════════ */
html.dark-mode .queue-bar {
    background: #1e293b !important;
    border: 1px solid #475569 !important;
}

html.dark-mode .bar-label {
    color: #cbd5e1 !important;
}

/* ── BookBuilder full-page editor: prevent body scroll ──────────────────── */
html.pte-open,
html.pte-open body,
html:has(.bb-page),
html:has(.bb-page) body {
    overflow: hidden !important;
    height: 100%;
}

/* ── BookBuilder full-page editor: hide site chrome ─────────────────────── */
html:has(.bb-page) .site-header,
html:has(.bb-page) .admin-footer {
    display: none !important;
}