/* =============================================================================
   Dark Theme

   Active when <html data-theme="dark"> (set from localStorage by the inline
   script in App.razor, toggled by ThemeToggle in the top bar) AND the page is
   rendered inside the admin shell (MainLayout's .admin-shell). The customer
   portal and public/login pages always stay light.

   Layers:
     1. dark-theme.generated.css — dark values for the --dm-* variables that the
        app's stylesheets reference (see tools/dark-mode/generate-dark-theme.mjs).
     2. This file — hand-tuned overrides: the shared design tokens, Bootstrap 5.1
        (which has no built-in dark mode) and Radzen's theme variables.

   Descendant rules wrap the theme prefix in :where() so they carry only the
   specificity of the Bootstrap/Radzen selector they replace: they beat the
   framework defaults (this file loads after them) but never a component's own
   scoped styles, which already adapt through the --dm-* variables.

   Brand blue (#1b4a98) is kept for backgrounds and buttons; only brand-colored TEXT
   is lightened (--color-primary-text) so it stays readable. The sidebar is the one
   exception -- as the largest flat area of brand blue on screen, it reads as too
   bright against dark surfaces, so it gets its own deeper navy (--dt-sidebar-bg).
   ============================================================================= */

html[data-theme="dark"]:has(.admin-shell) {
    color-scheme: dark;

    /* Dark palette */
    --dt-page: #111418;
    --dt-surface: #191d22;
    --dt-surface-raised: #1f242b;
    --dt-surface-hover: #262c34;
    --dt-border: #333a44;
    --dt-border-light: #2a3038;
    --dt-text: #e4e7eb;
    --dt-text-secondary: #a9b1bc;
    --dt-text-muted: #bcc3cc;
    --dt-link: #8eb1eb;
    --dt-sidebar-bg: #13294f;

    /* Shared design tokens (shared-components.css) */
    --color-primary-light: rgba(91, 141, 224, 0.18);
    --color-primary-text: var(--dt-link);

    --color-success-bg: #1d3b27;
    --color-success-text: #86d69b;
    --color-success-hover-bg: rgba(40, 167, 69, 0.14);

    --color-danger-bg: #3f1f22;
    --color-danger-text: #f1a3aa;
    --color-danger-hover-bg: rgba(220, 53, 69, 0.14);

    --color-warning-bg: #3d3419;
    --color-warning-text: #f0d589;

    --color-info-bg: #1c2e45;
    --color-info-text: #9cc4f5;
    --color-info-bg-alt: #173338;
    --color-info-text-alt: #8fd3df;

    --color-text: var(--dt-text);
    --color-text-secondary: var(--dt-text-secondary);
    --color-text-muted: var(--dt-text-muted);
    --color-border: var(--dt-border);
    --color-border-light: var(--dt-border-light);
    --color-bg: var(--dt-surface-raised);
    --color-bg-white: var(--dt-surface);

    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.45);

    /* Bootstrap 5.1 */
    --bs-body-bg: var(--dt-page);
    --bs-body-color: var(--dt-text);
    --bs-light: var(--dt-surface-raised);
    --bs-light-rgb: 31, 36, 43;
    --bs-white-rgb: 25, 29, 34;
    --bs-dark: var(--dt-text);
    --bs-dark-rgb: 228, 231, 235;
    --bs-body-rgb: 228, 231, 235;

    /* Radzen (material) — mirrors Radzen's own material-dark theme, retuned to
       this palette. Primary/secondary accents are left at their light values. */
    --rz-base: #2a3038;
    --rz-base-50: #e4e7eb;
    --rz-base-100: #a9b1bc;
    --rz-base-200: #6b7480;
    --rz-base-300: #4a525d;
    --rz-base-400: #3a414b;
    --rz-base-500: #333a44;
    --rz-base-600: #2a3038;
    --rz-base-700: #232830;
    --rz-base-800: #191d22;
    --rz-base-900: #111418;
    --rz-base-light: #a9b1bc;
    --rz-base-lighter: #ffffff;
    --rz-base-dark: #232830;
    --rz-base-darker: #000000;
    --rz-on-base: #ffffff;
    --rz-on-base-light: #111418;
    --rz-on-base-lighter: #111418;
    --rz-body-background-color: var(--rz-base-900);
    --rz-base-background-color: var(--rz-base-800);
    --rz-text-title-color: var(--rz-base-50);
    --rz-text-color: var(--rz-base-50);
    --rz-text-secondary-color: var(--rz-base-100);
    --rz-text-tertiary-color: var(--rz-base-200);
    --rz-text-disabled-color: var(--rz-base-300);
    --rz-text-body1-color: var(--rz-text-title-color);
    --rz-text-body2-color: var(--rz-text-title-color);
    --rz-text-button-color: var(--rz-text-title-color);
    --rz-text-caption-color: var(--rz-text-title-color);
    --rz-text-overline-color: var(--rz-text-title-color);
    --rz-link-color: var(--dt-link);
    --rz-link-hover-color: #b3cbf2;
    --rz-border-normal: var(--rz-border-width) solid var(--rz-base-300);
    --rz-border-hover: var(--rz-border-width) solid var(--rz-base-100);
    --rz-border-disabled: var(--rz-border-width) solid var(--rz-base-500);
    --rz-scrollbar-color: rgba(255, 255, 255, 0.12);
    --rz-card-border: var(--rz-border-base-500);
    --rz-chart-axis-label-color: var(--rz-text-secondary-color);
    --rz-chip-background-color: var(--rz-base-600);
    --rz-datalist-border: var(--rz-border-base-600);
    --rz-datalist-item-border: var(--rz-border-base-600);
    --rz-datepicker-calendar-hover-color: var(--rz-white);
    --rz-datepicker-calendar-hover-background-color: var(--rz-base-600);
    --rz-datepicker-calendar-today-box-shadow: inset 0 0 0 1px var(--rz-base-100);
    --rz-timepicker-button-background-color: var(--rz-base-700);
    --rz-timepicker-border: var(--rz-border-base-600);
    --rz-dialog-background-color: var(--rz-base-800);
    --rz-dialog-title-background-color: var(--rz-base-800);
    --rz-dialog-mask-background-color: var(--rz-black);
    --rz-dropdown-item-hover-background-color: var(--rz-base-400);
    --rz-dropdown-item-hover-color: var(--rz-white);
    --rz-dropdown-filter-border: var(--rz-border-base-500);
    --rz-dropdown-open-background-color: var(--rz-base-600);
    --rz-editor-border: var(--rz-border-base-600);
    --rz-editor-separator-background-color: var(--rz-base-600);
    --rz-fieldset-border: var(--rz-border-base-600);
    --rz-fieldset-legend-color: var(--rz-text-secondary-color);
    --rz-form-field-filled-background-color: var(--rz-base-600);
    --rz-form-field-filled-hover-background-color: var(--rz-base-500);
    --rz-grid-cell-border: var(--rz-border-base-600);
    --rz-grid-bottom-cell-border: var(--rz-border-base-600);
    --rz-grid-hover-background-color: var(--rz-base-600);
    --rz-grid-hover-color: var(--rz-white);
    --rz-grid-header-cell-border-bottom: var(--rz-border-base-600);
    --rz-grid-header-sorted-background-color: var(--rz-base-600);
    --rz-grid-foot-background-color: var(--rz-base-600);
    --rz-grid-filter-background-color: var(--rz-base-600);
    --rz-grid-border: var(--rz-border-base-600);
    --rz-grid-stripe-background-color: var(--rz-base-900);
    --rz-grid-detail-template-background-color: var(--rz-base-900);
    --rz-menu-background-color: var(--rz-base-700);
    --rz-menu-item-hover-color: var(--rz-white);
    --rz-menu-item-hover-background-color: var(--rz-base-400);
    --rz-notification-container-background-color: var(--rz-base-800);
    --rz-overlay-background-color: var(--rz-base-600);
    --rz-pager-numeric-button-hover-background-color: var(--rz-base-600);
    --rz-pager-numeric-button-hover-color: var(--rz-white);
    --rz-pager-summary-color: var(--rz-text-secondary-color);
    --rz-skeleton-background-color: var(--rz-base-400);
    --rz-skeleton-animation-color: var(--rz-base-300);
    --rz-switch-background-color: var(--rz-base-600);
    --rz-tabs-tab-hover-background-color: var(--rz-base-600);
    --rz-tabs-tab-focus-background-color: var(--rz-base-background-color);
    --rz-tree-node-hover-background-color: var(--rz-base-600);
    --rz-tree-node-hover-color: var(--rz-white);
    --rz-upload-button-bar-background-color: var(--rz-base-700);
    --rz-upload-choose-background-color: var(--rz-base-600);
    --rz-upload-choose-hover-background-color: var(--rz-base-400);
    --rz-upload-choose-hover-color: var(--rz-white);
}

/* =============================================================================
   Page shell
   ============================================================================= */

html[data-theme="dark"]:has(.admin-shell),
:where(html[data-theme="dark"]:has(.admin-shell)) body {
    background-color: var(--dt-page);
    color: var(--dt-text);
}

:where(html[data-theme="dark"]:has(.admin-shell)) h1,
:where(html[data-theme="dark"]:has(.admin-shell)) h2,
:where(html[data-theme="dark"]:has(.admin-shell)) h3,
:where(html[data-theme="dark"]:has(.admin-shell)) h4,
:where(html[data-theme="dark"]:has(.admin-shell)) h5,
:where(html[data-theme="dark"]:has(.admin-shell)) h6 {
    color: inherit;
}

:where(html[data-theme="dark"]:has(.admin-shell)) hr {
    border-color: var(--dt-border);
    opacity: 1;
}

:where(html[data-theme="dark"]:has(.admin-shell)) ::placeholder {
    color: #6b7480;
}

:where(html[data-theme="dark"]:has(.admin-shell)) ::selection {
    background-color: rgba(91, 141, 224, 0.4);
}

:where(html[data-theme="dark"]:has(.admin-shell)) #blazor-error-ui {
    background: #3d3419;
    color: var(--dt-text);
}

/* =============================================================================
   Bootstrap 5.1 components
   ============================================================================= */

:where(html[data-theme="dark"]:has(.admin-shell)) .text-muted,
:where(html[data-theme="dark"]:has(.admin-shell)) .text-secondary {
    color: var(--dt-text-secondary) !important;
}

:where(html[data-theme="dark"]:has(.admin-shell)) .text-dark,
:where(html[data-theme="dark"]:has(.admin-shell)) .text-body,
:where(html[data-theme="dark"]:has(.admin-shell)) .text-black {
    color: var(--dt-text) !important;
}

:where(html[data-theme="dark"]:has(.admin-shell)) .text-primary {
    color: var(--dt-link) !important;
}

/* Status text (overdue dates, warnings, ...) as soft pastels: Bootstrap's saturated
   reds and yellows are harsh against a dark surface. Matches the generated palette. */
:where(html[data-theme="dark"]:has(.admin-shell)) .text-danger {
    color: #ea868f !important;
}

:where(html[data-theme="dark"]:has(.admin-shell)) .text-warning {
    color: #eac27a !important;
}

:where(html[data-theme="dark"]:has(.admin-shell)) .text-success {
    color: #86d69b !important;
}

:where(html[data-theme="dark"]:has(.admin-shell)) .text-info {
    color: #8fd3df !important;
}

:where(html[data-theme="dark"]:has(.admin-shell)) .bg-white,
:where(html[data-theme="dark"]:has(.admin-shell)) .bg-body {
    background-color: var(--dt-surface) !important;
}

:where(html[data-theme="dark"]:has(.admin-shell)) .bg-light {
    background-color: var(--dt-surface-raised) !important;
}

:where(html[data-theme="dark"]:has(.admin-shell)) .border,
:where(html[data-theme="dark"]:has(.admin-shell)) .border-top,
:where(html[data-theme="dark"]:has(.admin-shell)) .border-bottom,
:where(html[data-theme="dark"]:has(.admin-shell)) .border-start,
:where(html[data-theme="dark"]:has(.admin-shell)) .border-end {
    border-color: var(--dt-border) !important;
}

:where(html[data-theme="dark"]:has(.admin-shell)) .form-control,
:where(html[data-theme="dark"]:has(.admin-shell)) .form-select,
:where(html[data-theme="dark"]:has(.admin-shell)) .input-group-text {
    background-color: var(--dt-surface-raised);
    border-color: var(--dt-border);
    color: var(--dt-text);
}

:where(html[data-theme="dark"]:has(.admin-shell)) .form-control:focus,
:where(html[data-theme="dark"]:has(.admin-shell)) .form-select:focus {
    background-color: var(--dt-surface-raised);
    color: var(--dt-text);
}

:where(html[data-theme="dark"]:has(.admin-shell)) .form-control:disabled,
:where(html[data-theme="dark"]:has(.admin-shell)) .form-control[readonly],
:where(html[data-theme="dark"]:has(.admin-shell)) .form-select:disabled {
    background-color: var(--dt-surface);
    color: var(--dt-text-secondary);
}

:where(html[data-theme="dark"]:has(.admin-shell)) .form-select {
    /* Bootstrap's chevron is a dark SVG; swap in a light one. */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a9b1bc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

:where(html[data-theme="dark"]:has(.admin-shell)) .form-select option {
    background-color: var(--dt-surface-raised);
    color: var(--dt-text);
}

:where(html[data-theme="dark"]:has(.admin-shell)) .form-check-input {
    background-color: var(--dt-surface-raised);
    border-color: #4a525d;
}

:where(html[data-theme="dark"]:has(.admin-shell)) .form-check-input:checked {
    background-color: #1b4a98;
    border-color: #2d6fd6;
}

:where(html[data-theme="dark"]:has(.admin-shell)) .form-switch .form-check-input:not(:checked) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%236b7480'/%3e%3c/svg%3e");
}

:where(html[data-theme="dark"]:has(.admin-shell)) .darker-border-checkbox.form-check-input {
    border-color: #6b7480;
}

:where(html[data-theme="dark"]:has(.admin-shell)) .table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-striped-color: var(--dt-text);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
    --bs-table-hover-color: var(--dt-text);
    --bs-table-active-bg: rgba(255, 255, 255, 0.07);
    --bs-table-active-color: var(--dt-text);
    color: var(--dt-text);
    border-color: var(--dt-border);
}

:where(html[data-theme="dark"]:has(.admin-shell)) .table > :not(caption) > * > * {
    border-bottom-color: var(--dt-border);
}

:where(html[data-theme="dark"]:has(.admin-shell)) .table-light,
:where(html[data-theme="dark"]:has(.admin-shell)) .table-light > th,
:where(html[data-theme="dark"]:has(.admin-shell)) .table-light > td {
    --bs-table-bg: var(--dt-surface-raised);
    color: var(--dt-text);
    border-color: var(--dt-border);
}

:where(html[data-theme="dark"]:has(.admin-shell)) .card,
:where(html[data-theme="dark"]:has(.admin-shell)) .list-group-item,
:where(html[data-theme="dark"]:has(.admin-shell)) .accordion-item,
:where(html[data-theme="dark"]:has(.admin-shell)) .modal-content,
:where(html[data-theme="dark"]:has(.admin-shell)) .popover,
:where(html[data-theme="dark"]:has(.admin-shell)) .toast {
    background-color: var(--dt-surface);
    border-color: var(--dt-border);
    color: var(--dt-text);
}

:where(html[data-theme="dark"]:has(.admin-shell)) .card-header,
:where(html[data-theme="dark"]:has(.admin-shell)) .card-footer,
:where(html[data-theme="dark"]:has(.admin-shell)) .modal-header,
:where(html[data-theme="dark"]:has(.admin-shell)) .modal-footer {
    background-color: var(--dt-surface-raised);
    border-color: var(--dt-border);
}

:where(html[data-theme="dark"]:has(.admin-shell)) .list-group-item-action:hover,
:where(html[data-theme="dark"]:has(.admin-shell)) .list-group-item-action:focus {
    background-color: var(--dt-surface-hover);
    color: var(--dt-text);
}

:where(html[data-theme="dark"]:has(.admin-shell)) .accordion-button {
    background-color: var(--dt-surface);
    color: var(--dt-text);
}

:where(html[data-theme="dark"]:has(.admin-shell)) .accordion-button:not(.collapsed) {
    background-color: var(--color-primary-light);
    color: var(--dt-link);
}

:where(html[data-theme="dark"]:has(.admin-shell)) .dropdown-menu {
    background-color: var(--dt-surface-raised);
    border-color: var(--dt-border);
    color: var(--dt-text);
}

:where(html[data-theme="dark"]:has(.admin-shell)) .dropdown-item {
    color: var(--dt-text);
}

:where(html[data-theme="dark"]:has(.admin-shell)) .dropdown-item:hover,
:where(html[data-theme="dark"]:has(.admin-shell)) .dropdown-item:focus {
    background-color: var(--dt-surface-hover);
    color: var(--dt-text);
}

:where(html[data-theme="dark"]:has(.admin-shell)) .dropdown-divider {
    border-color: var(--dt-border);
}

:where(html[data-theme="dark"]:has(.admin-shell)) .nav-tabs {
    border-bottom-color: var(--dt-border);
}

:where(html[data-theme="dark"]:has(.admin-shell)) .nav-tabs .nav-link:hover {
    border-color: var(--dt-border) var(--dt-border) transparent;
}

:where(html[data-theme="dark"]:has(.admin-shell)) .nav-tabs .nav-link.active {
    background-color: var(--dt-surface);
    border-color: var(--dt-border) var(--dt-border) var(--dt-surface);
    color: var(--dt-text);
}

:where(html[data-theme="dark"]:has(.admin-shell)) .page-link {
    background-color: var(--dt-surface);
    border-color: var(--dt-border);
    color: var(--dt-link);
}

:where(html[data-theme="dark"]:has(.admin-shell)) .page-item.disabled .page-link {
    background-color: var(--dt-surface);
    border-color: var(--dt-border);
    color: #6b7480;
}

:where(html[data-theme="dark"]:has(.admin-shell)) .progress {
    background-color: var(--dt-surface-hover);
}

:where(html[data-theme="dark"]:has(.admin-shell)) a:not([class]),
:where(html[data-theme="dark"]:has(.admin-shell)) .btn-link {
    color: var(--dt-link);
}

:where(html[data-theme="dark"]:has(.admin-shell)) .btn-light {
    background-color: var(--dt-surface-raised);
    border-color: var(--dt-border);
    color: var(--dt-text);
}

:where(html[data-theme="dark"]:has(.admin-shell)) .btn-outline-secondary {
    border-color: #4a525d;
    color: var(--dt-text-muted);
}

:where(html[data-theme="dark"]:has(.admin-shell)) .btn-outline-secondary:hover {
    background-color: var(--dt-surface-hover);
    color: var(--dt-text);
}

:where(html[data-theme="dark"]:has(.admin-shell)) .btn-outline-dark {
    border-color: var(--dt-text-secondary);
    color: var(--dt-text);
}

:where(html[data-theme="dark"]:has(.admin-shell)) .btn-outline-primary {
    border-color: #5b8de0;
    color: var(--dt-link);
}

:where(html[data-theme="dark"]:has(.admin-shell)) .btn-outline-primary:hover {
    background-color: #1b4a98;
    color: #fff;
}

:where(html[data-theme="dark"]:has(.admin-shell)) .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

:where(html[data-theme="dark"]:has(.admin-shell)) .btn:focus,
:where(html[data-theme="dark"]:has(.admin-shell)) .btn:active:focus,
:where(html[data-theme="dark"]:has(.admin-shell)) .form-control:focus,
:where(html[data-theme="dark"]:has(.admin-shell)) .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--dt-page), 0 0 0 0.25rem #5b8de0;
}

:where(html[data-theme="dark"]:has(.admin-shell)) .alert-primary,
:where(html[data-theme="dark"]:has(.admin-shell)) .alert-info {
    background-color: var(--color-info-bg);
    border-color: #26456b;
    color: var(--color-info-text);
}

:where(html[data-theme="dark"]:has(.admin-shell)) .alert-success {
    background-color: var(--color-success-bg);
    border-color: #28553a;
    color: var(--color-success-text);
}

:where(html[data-theme="dark"]:has(.admin-shell)) .alert-warning {
    background-color: var(--color-warning-bg);
    border-color: #5c4d21;
    color: var(--color-warning-text);
}

:where(html[data-theme="dark"]:has(.admin-shell)) .alert-danger {
    background-color: var(--color-danger-bg);
    border-color: #5e2a2f;
    color: var(--color-danger-text);
}

:where(html[data-theme="dark"]:has(.admin-shell)) .alert-secondary,
:where(html[data-theme="dark"]:has(.admin-shell)) .alert-light {
    background-color: var(--dt-surface-raised);
    border-color: var(--dt-border);
    color: var(--dt-text-muted);
}

:where(html[data-theme="dark"]:has(.admin-shell)) .badge.bg-light {
    color: var(--dt-text) !important;
}

:where(html[data-theme="dark"]:has(.admin-shell)) .tooltip-inner {
    background-color: #e4e7eb;
    color: #111418;
}

/* =============================================================================
   Radzen HTML editor and user-authored HTML
   ============================================================================= */

:where(html[data-theme="dark"]:has(.admin-shell)) .rz-html-editor,
:where(html[data-theme="dark"]:has(.admin-shell)) .rz-html-editor-content,
:where(html[data-theme="dark"]:has(.admin-shell)) .rz-html-editor-fullscreen {
    background-color: var(--dt-surface);
    color: var(--dt-text);
}

:where(html[data-theme="dark"]:has(.admin-shell)) .rz-html-editor-toolbar {
    background-color: var(--dt-surface-raised);
    border-color: var(--dt-border);
}

/* Tables inserted by htmlEditorInsertTable (app.js) carry inline light borders. */
:where(html[data-theme="dark"]:has(.admin-shell)) .rz-html-editor-content table th,
:where(html[data-theme="dark"]:has(.admin-shell)) .rz-html-editor-content table td,
:where(html[data-theme="dark"]:has(.admin-shell)) .post-content table th,
:where(html[data-theme="dark"]:has(.admin-shell)) .post-content table td,
:where(html[data-theme="dark"]:has(.admin-shell)) .image-content table th,
:where(html[data-theme="dark"]:has(.admin-shell)) .image-content table td {
    border-color: var(--dt-border) !important;
}

:where(html[data-theme="dark"]:has(.admin-shell)) .rz-html-editor-content table th,
:where(html[data-theme="dark"]:has(.admin-shell)) .post-content table th,
:where(html[data-theme="dark"]:has(.admin-shell)) .image-content table th {
    background-color: var(--dt-surface-raised) !important;
}

/* =============================================================================
   Native scrollbars (Chromium/Edge; color-scheme covers Firefox)
   ============================================================================= */

:where(html[data-theme="dark"]:has(.admin-shell)) ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

:where(html[data-theme="dark"]:has(.admin-shell)) ::-webkit-scrollbar-track {
    background: var(--dt-page);
}

:where(html[data-theme="dark"]:has(.admin-shell)) ::-webkit-scrollbar-thumb {
    background-color: #3a414b;
    border: 3px solid var(--dt-page);
    border-radius: 8px;
}

:where(html[data-theme="dark"]:has(.admin-shell)) ::-webkit-scrollbar-thumb:hover {
    background-color: #4a525d;
}