/*
 * Admin dark mode.
 *
 * The Dash UI theme darkens its own components through [data-theme=dark], and Bootstrap 5.3 does the
 * same through [data-bs-theme=dark] (both are set by partials/theme-init). The admin pages add their
 * own styles with fixed light colours (white cards, #f8fafc inputs, pastel pills...). This file maps
 * those onto one dark palette so every page follows the theme without per-page changes.
 *
 * Selectors are prefixed with html[data-theme="dark"] so they outrank the pages' own rules.
 * New pages: prefer the variables below (or Bootstrap's --bs-* ones) over fixed colours.
 */

html[data-theme="dark"] {
    color-scheme: dark;

    --adm-bg: #0f172a;
    --adm-surface: #1e293b;
    --adm-surface-2: #162133;
    --adm-hover: #253349;
    --adm-border: #334155;
    --adm-text: #e2e8f0;
    --adm-heading: #f8fafc;
    --adm-muted: #94a3b8;

    /* Bootstrap 5.3 colour mode, aligned with the theme's slate palette */
    --bs-body-bg: var(--adm-bg);
    --bs-body-color: var(--adm-text);
    --bs-emphasis-color: var(--adm-heading);
    --bs-secondary-color: var(--adm-muted);
    --bs-secondary-bg: var(--adm-surface);
    --bs-tertiary-bg: var(--adm-surface-2);
    --bs-border-color: var(--adm-border);
    --bs-heading-color: var(--adm-heading);

    /* Variables the admin pages define for themselves */
    --um-border: var(--adm-border);
    --um-text: var(--adm-text);
    --um-muted: var(--adm-muted);
    --um-primary-soft: rgba(99, 102, 241, 0.18);
    --surface-card: var(--adm-surface);
    --surface-glass: var(--adm-surface);
    --text-main: var(--adm-text);
    --text-muted: var(--adm-muted);
}

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

/* ---------------------------------------------------------------- Text */
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6,
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .um-stat-value,
html[data-theme="dark"] .um-user-name,
html[data-theme="dark"] .db-tile-value,
html[data-theme="dark"] .db-card-title,
html[data-theme="dark"] .db-activity a,
html[data-theme="dark"] .tm-name,
html[data-theme="dark"] .acc-session-meta strong,
html[data-theme="dark"] .db-health-label {
    color: var(--adm-heading) !important;
}

/* The template inverts .text-white / .bg-dark in dark mode (its "white" variable becomes slate), which
   makes white text on coloured headers unreadable. Keep both literal. */
html[data-theme="dark"] .text-white { color: #fff !important; }
html[data-theme="dark"] .bg-dark { background-color: #020617 !important; }

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .form-text,
html[data-theme="dark"] small.text-muted,
html[data-theme="dark"] .um-stat-label,
html[data-theme="dark"] .db-card-sub,
html[data-theme="dark"] .db-tile-detail,
html[data-theme="dark"] .db-kpi-foot {
    color: var(--adm-muted) !important;
}

/* Page wrappers that set a dark text colour */
html[data-theme="dark"] .about-container,
html[data-theme="dark"] .about-editor-container,
html[data-theme="dark"] .article-container,
html[data-theme="dark"] .form-container,
html[data-theme="dark"] .geo-container,
html[data-theme="dark"] .hero-editor-container,
html[data-theme="dark"] .topic-container,
html[data-theme="dark"] .video-container,
html[data-theme="dark"] .um-container,
html[data-theme="dark"] .dashboard-wrapper {
    color: var(--adm-text);
    background: transparent;
}

html[data-theme="dark"] .form-label,
html[data-theme="dark"] .form-check-label,
html[data-theme="dark"] .form-label-premium,
html[data-theme="dark"] .um-container .form-label {
    color: #cbd5e1 !important;
}

/* ---------------------------------------------------------------- Surfaces */
html[data-theme="dark"] .card,
html[data-theme="dark"] .um-card,
html[data-theme="dark"] .um-stat,
html[data-theme="dark"] .glass-editor-card,
html[data-theme="dark"] .glass-stat-card,
html[data-theme="dark"] .smart-card,
html[data-theme="dark"] .smart-table-card,
html[data-theme="dark"] .translation-fields,
html[data-theme="dark"] .db-tile,
html[data-theme="dark"] .sl-row,
html[data-theme="dark"] .gc-upload-thumb,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-body {
    background: var(--adm-surface) !important;
    border-color: var(--adm-border) !important;
    color: var(--adm-text);
    box-shadow: none;
}

html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-light-subtle,
html[data-theme="dark"] .landmark-row,
html[data-theme="dark"] .gc-preview-tab,
html[data-theme="dark"] .tm-photo,
html[data-theme="dark"] .tm-upload-preview,
html[data-theme="dark"] .tm-grip,
html[data-theme="dark"] .tm-help,
html[data-theme="dark"] .acc-session-icon,
html[data-theme="dark"] .photo-placeholder,
html[data-theme="dark"] .sign-placeholder,
html[data-theme="dark"] .db-env,
html[data-theme="dark"] .db-bar,
html[data-theme="dark"] .db-lang .progress,
html[data-theme="dark"] .progress {
    background: var(--adm-surface-2) !important;
    border-color: var(--adm-border) !important;
    color: var(--adm-text);
}

/* Header and sidebar */
html[data-theme="dark"] .navbar-custom {
    background: rgba(15, 23, 42, 0.85) !important;
    border-bottom-color: var(--adm-border) !important;
}
html[data-theme="dark"] #nav-toggle { background: var(--adm-surface) !important; }
html[data-theme="dark"] #nav-toggle i { color: var(--adm-text) !important; }
html[data-theme="dark"] .nav-dashboard {
    background-color: var(--adm-surface) !important;
    border-right-color: var(--adm-border) !important;
}
html[data-theme="dark"] .nav-dashboard .navbar-heading { color: var(--adm-muted) !important; }
html[data-theme="dark"] .nav-dashboard .nav-link { color: #cbd5e1 !important; }
html[data-theme="dark"] .nav-dashboard .nav-link:hover,
html[data-theme="dark"] .nav-dashboard .nav-link.active {
    background: rgba(99, 102, 241, 0.16) !important;
    color: #c7d2fe !important;
}
html[data-theme="dark"] .nav-dashboard .nav-link .nav-icon { color: var(--adm-muted); }

/* Sticky save bars */
html[data-theme="dark"] .gc-savebar {
    background: rgba(15, 23, 42, 0.92) !important;
    border-top-color: var(--adm-border) !important;
}

/* ---------------------------------------------------------------- Forms */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .premium-input,
html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] .sl-url .input-group-text,
html[data-theme="dark"] .dt-input,
html[data-theme="dark"] .dataTables_filter input,
html[data-theme="dark"] .dataTables_length select {
    background-color: var(--adm-surface-2) !important;
    border-color: var(--adm-border) !important;
    color: var(--adm-text) !important;
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] .premium-input:focus {
    background-color: var(--adm-bg) !important;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2) !important;
}
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] .premium-input::placeholder {
    color: #64748b !important;
}
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly] {
    background-color: var(--adm-surface) !important;
    color: var(--adm-muted) !important;
}
html[data-theme="dark"] .form-check-input:not(:checked) {
    background-color: var(--adm-surface-2);
    border-color: #475569;
}
html[data-theme="dark"] .dropify-wrapper {
    background-color: var(--adm-surface-2) !important;
    border-color: var(--adm-border) !important;
    color: var(--adm-muted) !important;
}

/* ---------------------------------------------------------------- Tables */
html[data-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--adm-text);
    --bs-table-border-color: var(--adm-border);
    --bs-table-hover-bg: var(--adm-hover);
    --bs-table-hover-color: var(--adm-heading);
    --bs-table-striped-bg: rgba(148, 163, 184, 0.05);
    color: var(--adm-text);
}
html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .um-table thead th,
html[data-theme="dark"] .table .bg-light {
    background: var(--adm-surface-2) !important;
    color: var(--adm-muted) !important;
    border-color: var(--adm-border) !important;
}
html[data-theme="dark"] .table td,
html[data-theme="dark"] .um-table tbody td {
    border-color: var(--adm-border) !important;
    color: var(--adm-text);
}
html[data-theme="dark"] .um-table tbody tr:hover td,
html[data-theme="dark"] .article-row:hover,
html[data-theme="dark"] .article-row:hover td {
    background: var(--adm-hover) !important;
}

/* Pagination (Laravel + DataTables) */
html[data-theme="dark"] .page-link {
    background-color: var(--adm-surface) !important;
    border-color: var(--adm-border) !important;
    color: var(--adm-text) !important;
}
html[data-theme="dark"] .page-item.disabled .page-link { color: #64748b !important; }
html[data-theme="dark"] .page-item.active .page-link {
    background-color: #6366f1 !important;
    border-color: #6366f1 !important;
    color: #fff !important;
}

/* ---------------------------------------------------------------- Interactive bits */
html[data-theme="dark"] .dropdown-item { color: #cbd5e1; }
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item.active {
    background-color: var(--adm-hover) !important;
    color: #c7d2fe !important;
}
html[data-theme="dark"] .dropdown-divider,
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end {
    border-color: var(--adm-border) !important;
}

html[data-theme="dark"] .btn-light {
    background-color: var(--adm-surface-2);
    border-color: var(--adm-border);
    color: var(--adm-text);
}
html[data-theme="dark"] .btn-light:hover { background-color: var(--adm-hover); color: var(--adm-heading); }

html[data-theme="dark"] .um-action {
    background: var(--adm-surface-2);
    border-color: var(--adm-border);
    color: var(--adm-muted);
}
html[data-theme="dark"] .um-action:hover { background: var(--adm-hover); color: var(--adm-heading); }

html[data-theme="dark"] .db-tile:hover { background: var(--adm-hover) !important; border-color: #4f46e5 !important; }

html[data-theme="dark"] .nav-pills .nav-link:not(.active) { color: #cbd5e1; }

/* Header user chip */
html[data-theme="dark"] #dropdownUser { background: var(--adm-surface) !important; border-color: var(--adm-border) !important; }

/* ---------------------------------------------------------------- Tinted pills and icons */
html[data-theme="dark"] .um-tone-indigo,
html[data-theme="dark"] .um-pill-admin { background: rgba(99, 102, 241, 0.18) !important; color: #a5b4fc !important; }
html[data-theme="dark"] .um-tone-green,
html[data-theme="dark"] .db-pill-green,
html[data-theme="dark"] .status-published,
html[data-theme="dark"] .status-approved { background: rgba(16, 185, 129, 0.16) !important; color: #6ee7b7 !important; }
html[data-theme="dark"] .um-tone-red,
html[data-theme="dark"] .db-pill-red,
html[data-theme="dark"] .status-rejected { background: rgba(239, 68, 68, 0.16) !important; color: #fca5a5 !important; }
html[data-theme="dark"] .um-tone-amber,
html[data-theme="dark"] .db-pill-amber,
html[data-theme="dark"] .status-pending,
html[data-theme="dark"] .status-draft { background: rgba(245, 158, 11, 0.16) !important; color: #fcd34d !important; }
html[data-theme="dark"] .um-pill-user,
html[data-theme="dark"] .acc-badge-current { background: var(--adm-surface-2) !important; color: #cbd5e1 !important; }
html[data-theme="dark"] .db-activity-icon { background: rgba(99, 102, 241, 0.18) !important; color: #a5b4fc !important; }

/* Team members, uploads, drag-and-drop and save states */
html[data-theme="dark"] .tm-card { background: var(--adm-surface) !important; border-color: var(--adm-border) !important; }
html[data-theme="dark"] .gc-upload { background: var(--adm-surface-2) !important; border-color: #475569 !important; }
html[data-theme="dark"] .gc-preview-logo { background: #fff !important; } /* logo plate, like the sidebar */
html[data-theme="dark"] .acc-strength { background: var(--adm-surface-2) !important; }
html[data-theme="dark"] .sl-row.is-over,
html[data-theme="dark"] .tm-grid.is-target { background: rgba(99, 102, 241, 0.12) !important; outline-color: #4f46e5 !important; }
html[data-theme="dark"] .tm-save { background: var(--adm-surface-2) !important; color: var(--adm-muted) !important; }
html[data-theme="dark"] .tm-save.is-saving { background: rgba(99, 102, 241, 0.18) !important; color: #a5b4fc !important; }
html[data-theme="dark"] .tm-save.is-saved { background: rgba(16, 185, 129, 0.16) !important; color: #6ee7b7 !important; }
html[data-theme="dark"] .tm-save.is-error { background: rgba(239, 68, 68, 0.16) !important; color: #fca5a5 !important; }
html[data-theme="dark"] .um-action-primary:hover { background: rgba(99, 102, 241, 0.18) !important; border-color: #4f46e5 !important; color: #a5b4fc !important; }
html[data-theme="dark"] .um-action-success:hover { background: rgba(16, 185, 129, 0.16) !important; border-color: #047857 !important; color: #6ee7b7 !important; }
html[data-theme="dark"] .um-action-warning:hover { background: rgba(245, 158, 11, 0.16) !important; border-color: #b45309 !important; color: #fcd34d !important; }
html[data-theme="dark"] .um-action-danger:hover { background: rgba(239, 68, 68, 0.16) !important; border-color: #b91c1c !important; color: #fca5a5 !important; }

/* Notices */
html[data-theme="dark"] .db-attention { background: rgba(245, 158, 11, 0.1) !important; border-color: rgba(245, 158, 11, 0.35) !important; color: var(--adm-text); }
html[data-theme="dark"] .db-attention.is-danger { background: rgba(239, 68, 68, 0.1) !important; border-color: rgba(239, 68, 68, 0.35) !important; }
html[data-theme="dark"] [style*="background: #fffbeb"] { background: rgba(245, 158, 11, 0.1) !important; border-color: rgba(245, 158, 11, 0.35) !important; }
html[data-theme="dark"] [style*="background: #eef2ff"] { background: rgba(99, 102, 241, 0.18) !important; }

/* ---------------------------------------------------------------- Third-party widgets */
html[data-theme="dark"] .swal2-popup,
html[data-theme="dark"] .my-popup-class {
    background-color: var(--adm-surface) !important;
    border-color: var(--adm-border) !important;
    color: var(--adm-text) !important;
}
html[data-theme="dark"] .swal2-title,
html[data-theme="dark"] .swal2-html-container { color: var(--adm-text) !important; }
html[data-theme="dark"] .simplebar-scrollbar::before { background: #475569; }

/* White badges and buttons sit on coloured page headers: keep them white. */
html[data-theme="dark"] .badge.bg-white,
html[data-theme="dark"] .um-header .btn-light,
html[data-theme="dark"] .premium-page-header .bg-white { background: #fff !important; }
html[data-theme="dark"] .um-header .btn-light { color: #4f46e5 !important; border-color: #fff !important; }

/* Rich-text editor (Quill) */
html[data-theme="dark"] .ql-toolbar.ql-snow,
html[data-theme="dark"] .ql-container.ql-snow { border-color: var(--adm-border) !important; }
html[data-theme="dark"] .ql-toolbar.ql-snow { background: var(--adm-surface-2); }
html[data-theme="dark"] .ql-snow .ql-stroke { stroke: #cbd5e1; }
html[data-theme="dark"] .ql-snow .ql-fill { fill: #cbd5e1; }
html[data-theme="dark"] .ql-snow .ql-picker { color: #cbd5e1; }
html[data-theme="dark"] .ql-snow .ql-picker-options { background: var(--adm-surface); border-color: var(--adm-border) !important; }
html[data-theme="dark"] .ql-editor { color: var(--adm-text); }
html[data-theme="dark"] .ql-editor.ql-blank::before { color: #64748b; }

/* Charts: the theme pins axis labels to a grey that is too dim on dark backgrounds. */
html[data-theme="dark"] .apexcharts-xaxis-label,
html[data-theme="dark"] .apexcharts-yaxis-label { fill: var(--adm-muted) !important; }
html[data-theme="dark"] .apexcharts-legend-text { color: var(--adm-muted) !important; }
html[data-theme="dark"] .apexcharts-gridline { stroke: var(--adm-border); }

/* Logos often have their own white background: keep them on a light plate in both themes.
   The template also whitens the whole brand in dark mode (filter: brightness(0) invert(1), meant for
   a one-colour logo), which turned the full-colour emblem into a blank white tile. */
html[data-theme="dark"] .navbar-brand { filter: none !important; }
html[data-theme="dark"] .brand-area .bg-white { background: #fff !important; }

/* ---------------------------------------------------------------- Theme toggle (header)
 * The template draws the switch as a sun (light) / moon (dark) icon, but its :focus rule always shows
 * the sun, so right after switching to dark the toggle still looked "light". Keep the icon tied to the
 * state, and show a visible focus ring for keyboard users instead.
 */
.theme-switch .form-check-input:checked:focus {
    background-image: url(../../backend/images/svg/moon.svg) !important;
}
.theme-switch .form-check-input:focus-visible {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35);
    border-radius: 50%;
}
html[data-theme="dark"] .theme-switch .form-check-input:not(:checked) { background-color: transparent; }

/* ---------------------------------------------------------------- Bootstrap light variants */
/* Bootstrap keeps .table-light and .text-bg-light light in its dark mode; follow the theme instead. */
html[data-theme="dark"] .table-light {
    --bs-table-bg: var(--adm-surface-2);
    --bs-table-color: var(--adm-muted);
    --bs-table-border-color: var(--adm-border);
    --bs-table-striped-bg: var(--adm-surface-2);
    --bs-table-hover-bg: var(--adm-hover);
    --bs-table-hover-color: var(--adm-text);
}
html[data-theme="dark"] .text-bg-light {
    background-color: var(--adm-surface-2) !important;
    color: var(--adm-text) !important;
}

/* ---------------------------------------------------------------- Secondary text and buttons */
/* The theme's "secondary" is slate-600, which is unreadable on the dark surfaces. */
html[data-theme="dark"] .text-secondary { color: var(--adm-muted) !important; }
html[data-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: var(--adm-text);
    --bs-btn-border-color: var(--adm-border);
    --bs-btn-hover-color: var(--adm-heading);
    --bs-btn-hover-bg: var(--adm-hover);
    --bs-btn-hover-border-color: var(--adm-muted);
    --bs-btn-active-color: var(--adm-heading);
    --bs-btn-active-bg: var(--adm-hover);
    --bs-btn-active-border-color: var(--adm-muted);
    color: var(--adm-text);
    border-color: var(--adm-border);
}
html[data-theme="dark"] .btn-outline-secondary:hover,
html[data-theme="dark"] .btn-outline-secondary:focus-visible { color: var(--adm-heading); background-color: var(--adm-hover); border-color: var(--adm-muted); }