/* Shared light/dark tokens. Loaded last by _Layout so MVC views and embedded
   Blazor/MudBlazor components use the same surfaces and contrast. */
:root {
    --app-bg: #f8fafc;
    --app-surface: #ffffff;
    --app-surface-alt: #f1f5f9;
    --app-surface-hover: #e9eef5;
    --app-text: #1e293b;
    --app-text-muted: #64748b;
    --app-border: #dbe3ec;
    --app-shadow: rgba(15, 23, 42, .10);
}

html[data-theme='dark'] {
    color-scheme: dark;
    --app-bg: #111827;
    --app-surface: #1f2937;
    --app-surface-alt: #273449;
    --app-surface-hover: #303e54;
    --app-text: #f1f5f9;
    --app-text-muted: #a5b4c9;
    --app-border: #3b495d;
    --app-shadow: rgba(0, 0, 0, .34);

    /* MudBlazor palette variables. !important is required because the provider
       writes its light palette after prerendering. */
    --mud-palette-background: var(--app-bg) !important;
    --mud-palette-background-gray: var(--app-surface-alt) !important;
    --mud-palette-surface: var(--app-surface) !important;
    --mud-palette-surface-darken: var(--app-surface-alt) !important;
    --mud-palette-text-primary: var(--app-text) !important;
    --mud-palette-text-secondary: var(--app-text-muted) !important;
    --mud-palette-text-disabled: #728096 !important;
    --mud-palette-lines-default: var(--app-border) !important;
    --mud-palette-lines-inputs: #526177 !important;
    --mud-palette-divider: var(--app-border) !important;
    --mud-palette-divider-light: rgba(165, 180, 201, .16) !important;
    --mud-palette-table-lines: var(--app-border) !important;
    --mud-palette-table-striped: var(--app-surface-alt) !important;
    --mud-palette-action-default: var(--app-text-muted) !important;
    --mud-palette-action-disabled: #728096 !important;
    --mud-palette-action-disabled-background: #263244 !important;
    --mud-palette-drawer-background: var(--app-surface) !important;
    --mud-palette-drawer-text: var(--app-text) !important;
    --mud-palette-appbar-background: var(--app-surface) !important;
    --mud-palette-appbar-text: var(--app-text) !important;
}

html[data-theme='dark'] body,
html[data-theme='dark'] #mainWrapper,
html[data-theme='dark'] main,
html[data-theme='dark'] .container,
html[data-theme='dark'] .container-fluid {
    background-color: var(--app-bg);
    color: var(--app-text);
}

html[data-theme='dark'] .card,
html[data-theme='dark'] .accordion-item,
html[data-theme='dark'] .accordion-button,
html[data-theme='dark'] .modal-content,
html[data-theme='dark'] .dropdown-menu,
html[data-theme='dark'] .list-group-item,
html[data-theme='dark'] .offcanvas,
html[data-theme='dark'] .filter-section,
html[data-theme='dark'] .datatable-container,
html[data-theme='dark'] .index-page-container {
    background-color: var(--app-surface) !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}

html[data-theme='dark'] .card-header,
html[data-theme='dark'] .card-footer,
html[data-theme='dark'] .modal-header,
html[data-theme='dark'] .modal-footer,
html[data-theme='dark'] .dropdown-item:hover,
html[data-theme='dark'] .dropdown-item:focus,
html[data-theme='dark'] .accordion-button:not(.collapsed) {
    background-color: var(--app-surface-alt) !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}

html[data-theme='dark'] .custom-card,
html[data-theme='dark'] .fixed-info-header-container,
html[data-theme='dark'] .info-program-card,
html[data-theme='dark'] .info-programdetail-flag,
html[data-theme='dark'] .identity-card,
html[data-theme='dark'] .auth-card {
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
    box-shadow: 0 4px 16px var(--app-shadow) !important;
}

html[data-theme='dark'] .info-input,
html[data-theme='dark'] .info-input:focus {
    background: var(--app-surface-alt) !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}

html[data-theme='dark'] .form-control,
html[data-theme='dark'] .form-select,
html[data-theme='dark'] .input-group-text,
html[data-theme='dark'] .filter-field input,
html[data-theme='dark'] .filter-field select,
html[data-theme='dark'] textarea {
    background-color: var(--app-surface-alt) !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}

html[data-theme='dark'] .form-control::placeholder,
html[data-theme='dark'] textarea::placeholder {
    color: var(--app-text-muted) !important;
}

html[data-theme='dark'] .table {
    --bs-table-bg: var(--app-surface);
    --bs-table-color: var(--app-text);
    --bs-table-border-color: var(--app-border);
    --bs-table-striped-bg: var(--app-surface-alt);
    --bs-table-hover-bg: var(--app-surface-hover);
}

html[data-theme='dark'] .text-dark,
html[data-theme='dark'] .text-body,
html[data-theme='dark'] .dropdown-item,
html[data-theme='dark'] label,
html[data-theme='dark'] legend {
    color: var(--app-text) !important;
}

html[data-theme='dark'] .text-muted,
html[data-theme='dark'] .form-text,
html[data-theme='dark'] small {
    color: var(--app-text-muted) !important;
}

/* MudBlazor renders overlays outside the view that opened them. */
html[data-theme='dark'] .mud-paper,
html[data-theme='dark'] .mud-card,
html[data-theme='dark'] .mud-dialog,
html[data-theme='dark'] .mud-popover,
html[data-theme='dark'] .mud-picker,
html[data-theme='dark'] .mud-menu-list,
html[data-theme='dark'] .mud-expansion-panel {
    background-color: var(--app-surface) !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}

html[data-theme='dark'] .mud-card-header,
html[data-theme='dark'] .mud-dialog-title,
html[data-theme='dark'] .mud-dialog-content,
html[data-theme='dark'] .mud-dialog-actions,
html[data-theme='dark'] .mud-picker-header,
html[data-theme='dark'] .mud-expand-panel-header {
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}

html[data-theme='dark'] .mud-input,
html[data-theme='dark'] .mud-input-control,
html[data-theme='dark'] .mud-select-input,
html[data-theme='dark'] .mud-typography,
html[data-theme='dark'] .mud-table-cell,
html[data-theme='dark'] .mud-list-item-text {
    color: var(--app-text);
}

html[data-theme='dark'] .mud-input-slot,
html[data-theme='dark'] .mud-input-slot input,
html[data-theme='dark'] .mud-input-slot textarea {
    color: var(--app-text) !important;
}

html[data-theme='dark'] .mud-input-label,
html[data-theme='dark'] .mud-select-input,
html[data-theme='dark'] .mud-icon-root.mud-svg-icon {
    color: var(--app-text-muted);
}

html[data-theme='dark'] .mud-dark-text,
html[data-theme='dark'] .project-period-card .mud-typography,
html[data-theme='dark'] .project-period-card .mud-icon-root {
    color: var(--app-text) !important;
}

html[data-theme='dark'] .project-period-card .mud-avatar,
html[data-theme='dark'] .project-period-card .mud-card-header,
html[data-theme='dark'] .project-period-card .mud-card-content,
html[data-theme='dark'] .project-period-card .mud-card-actions {
    background: var(--app-surface-alt) !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}

html[data-theme='dark'] .mud-table,
html[data-theme='dark'] .mud-table-container,
html[data-theme='dark'] .mud-table-root,
html[data-theme='dark'] .mud-toolbar,
html[data-theme='dark'] .mud-card-content,
html[data-theme='dark'] .mud-card-actions {
    background-color: var(--app-surface) !important;
    color: var(--app-text) !important;
}

html[data-theme='dark'] .mud-table-row:hover,
html[data-theme='dark'] .mud-list-item-clickable:hover,
html[data-theme='dark'] .mud-tabs-tabbar {
    background-color: var(--app-surface-alt) !important;
}

/* Third-party widgets used by MVC views. */
html[data-theme='dark'] .flatpickr-calendar,
html[data-theme='dark'] .flatpickr-months,
html[data-theme='dark'] .flatpickr-weekdays,
html[data-theme='dark'] .flatpickr-month,
html[data-theme='dark'] .flatpickr-current-month .flatpickr-monthDropdown-months,
html[data-theme='dark'] .flatpickr-current-month input.cur-year {
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
}

html[data-theme='dark'] .flatpickr-day,
html[data-theme='dark'] span.flatpickr-weekday {
    color: var(--app-text);
}

html[data-theme='dark'] .flatpickr-day:hover {
    background: var(--app-surface-hover);
    border-color: var(--app-border);
}

html[data-theme='dark'] div.dt-container .dt-input,
html[data-theme='dark'] div.dt-container select.dt-input {
    background: var(--app-surface-alt);
    color: var(--app-text);
    border-color: var(--app-border);
}

html[data-theme='dark'] .datatable-container table.dataTable tbody tr:nth-child(odd),
html[data-theme='dark'] .datatable-container table.dataTable tbody tr:nth-child(even),
html[data-theme='dark'] .datatable-container .dataTables_paginate .paginate_button,
html[data-theme='dark'] .datatable-container .dataTables_paginate .paginate_button.disabled,
html[data-theme='dark'] .dt-themed .dataTables_length select,
html[data-theme='dark'] .dt-themed .dt-length select {
    background-color: var(--app-surface-alt) !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}

html[data-theme='dark'] .datatable-container table.dataTable tbody tr:hover {
    background: var(--app-surface-hover) !important;
}

html[data-theme='dark'] .datatable-container table.dataTable tbody td,
html[data-theme='dark'] .datatable-container .dataTables_info {
    color: var(--app-text) !important;
}

html[data-theme='dark'] .swal2-popup {
    background: var(--app-surface);
    color: var(--app-text);
}

/* Known view/component blocks that previously embedded a light-only surface. */
html[data-theme='dark'] #app-init-overlay,
html[data-theme='dark'] .program-element-card,
html[data-theme='dark'] .info-section,
html[data-theme='dark'] .attachment-header-card,
html[data-theme='dark'] .project-code {
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}

html[data-theme='dark'] .attachment-row {
    border-color: var(--app-border) !important;
}

html[data-theme='dark'] .attachment-row:hover,
html[data-theme='dark'] .action-date {
    background: var(--app-surface-alt) !important;
}

html[data-theme='dark'] .btn-light,
html[data-theme='dark'] .btn-outline-secondary,
html[data-theme='dark'] .page-header-btn-create:hover {
    background: var(--app-surface-alt) !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}

html[data-theme='dark'] .admin-nav-item:hover,
html[data-theme='dark'] .admin-nav-item.active {
    background: var(--app-surface-hover) !important;
    color: var(--app-text) !important;
}

@media (prefers-reduced-motion: reduce) {
    html[data-theme='dark'] *,
    html[data-theme='dark'] *::before,
    html[data-theme='dark'] *::after {
        transition-duration: .01ms !important;
    }
}

html[data-theme='dark'] .info-section:hover {
    background: var(--app-surface-alt) !important;
}