:root {
    /* Intrinsiq brand palette */
    --iq-primary: #042c54;
    --iq-primary-rgb: 4, 44, 84;
    --iq-accent-blue: #0daaea;
    --iq-accent-blue-rgb: 13, 170, 234;
    --iq-accent-orange: #f46a34;
    --iq-accent-orange-rgb: 244, 106, 52;
    --iq-primary-tint: rgba(4, 44, 84, 0.08);
    --iq-accent-blue-tint: rgba(13, 170, 234, 0.12);

    /* Light theme (default) */
    --iq-bg: #f4f7fa;
    --iq-surface: #ffffff;
    --iq-surface-alt: #f8fafc;
    --iq-border: #e2e8f0;
    /* Form/toolbar controls: distinct from surface (esp. cards / toolbars) */
    --iq-input-bg: #ffffff;
    --iq-input-border: #ced4da;
    --iq-text: #1a2332;
    --iq-muted-text: #64748b;
    --iq-overlay-bg: rgba(255, 255, 255, 0.82);
    --iq-panel-shadow: 0 4px 16px rgba(4, 44, 84, 0.08);
    --iq-radius: 4px;
    --iq-radius-sm: 3px;
    --iq-brand-gradient: linear-gradient(90deg, var(--iq-accent-blue) 0%, var(--iq-accent-orange) 100%);
    --iq-brand-border-width: 2px;

    /* Bootstrap alignment.
       Bootstrap 5.3 paints cards, modals, dropdowns, inputs, list groups and table cells with
       --bs-body-bg, so it is the surface colour; the page background is set on body below. */
    --bs-primary: var(--iq-primary);
    --bs-primary-rgb: var(--iq-primary-rgb);
    --bs-link-color: var(--iq-accent-blue);
    --bs-link-color-rgb: var(--iq-accent-blue-rgb);
    --bs-link-hover-color: #0989c4;
    --bs-link-hover-color-rgb: 9, 137, 196;
    --bs-border-radius: var(--iq-radius-sm);
    --bs-border-radius-sm: 2px;
    --bs-border-radius-lg: var(--iq-radius);
    --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-color: var(--iq-text);
    --bs-body-color-rgb: 26, 35, 50;
    --bs-body-bg: var(--iq-surface);
    --bs-emphasis-color: var(--iq-text);
    --bs-emphasis-color-rgb: 26, 35, 50;
    --bs-secondary-color: var(--iq-muted-text);
    --bs-tertiary-bg: var(--iq-surface-alt);
    --bs-border-color: var(--iq-border);
}

body {
    font-family: var(--bs-body-font-family);
    -webkit-font-smoothing: antialiased;
}

body.dark-theme {
    /* Slightly lighter background and slightly softer text,
       still well above WCAG AA contrast against surfaces */
    --iq-bg: #181a1f;
    --iq-surface: #1f2227;
    --iq-surface-alt: #252932;
    --iq-border: #3b4252;
    /* Must contrast with --iq-surface (toolbars/cards); surface-alt alone is too close */
    --iq-input-bg: #323844;
    --iq-input-border: #6b7385;
    --iq-text: #e4e6eb;
    --iq-muted-text: #a0a4b0;
    --iq-overlay-bg: rgba(0, 0, 0, 0.75);
    --iq-panel-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    --iq-primary-tint: rgba(13, 170, 234, 0.12);
    --iq-accent-blue-tint: rgba(13, 170, 234, 0.18);

    /* Custom properties resolve where declared, so the Bootstrap aliases are repeated here */
    --bs-primary-rgb: var(--iq-accent-blue-rgb);
    --bs-link-color: #4cc3f7;
    --bs-link-color-rgb: 76, 195, 247;
    --bs-link-hover-color: #7dd4fa;
    --bs-link-hover-color-rgb: 125, 212, 250;
    --bs-body-color: var(--iq-text);
    --bs-body-color-rgb: 228, 230, 235;
    --bs-body-bg: var(--iq-surface);
    --bs-emphasis-color: var(--iq-text);
    --bs-emphasis-color-rgb: 228, 230, 235;
    --bs-secondary-color: var(--iq-muted-text);
    --bs-secondary-bg: var(--iq-surface-alt);
    --bs-tertiary-bg: var(--iq-surface-alt);
    --bs-border-color: var(--iq-border);
}

body.dark-theme {
    color-scheme: dark;
}

body {
    background-color: var(--iq-bg);
    color: var(--iq-text);
}

/* Flush menu to viewport: no rounding on the left edge */
html,
body,
#app,
.menu-panel,
.menu-panel .iq-menu-container,
.menu-panel .iq-menu-search,
.menu-panel .iq-menu-search-header,
.menu-panel .iq-menu-quicksearch,
.menu-panel .iq-menu-quicksearch .quicksearch-header,
.menu-panel .iq-menu-quicksearch .quicksearch-container {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.menu-panel {
    overflow: hidden;
    box-shadow: var(--iq-panel-shadow);
}

/* Brand accents on shared controls (Bootstrap 5.3 button states read these variables) */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--iq-primary);
    --bs-btn-border-color: var(--iq-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #053a6e;
    --bs-btn-hover-border-color: #053a6e;
    --bs-btn-focus-shadow-rgb: var(--iq-primary-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #053a6e;
    --bs-btn-active-border-color: #053a6e;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--iq-primary);
    --bs-btn-disabled-border-color: var(--iq-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--iq-primary);
    --bs-btn-border-color: var(--iq-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--iq-primary);
    --bs-btn-hover-border-color: var(--iq-primary);
    --bs-btn-focus-shadow-rgb: var(--iq-primary-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--iq-primary);
    --bs-btn-active-border-color: var(--iq-primary);
    --bs-btn-disabled-color: var(--iq-primary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--iq-primary);
}

/* Keep toolbar ExtraActions (local + IQ5) the same size/chrome as each other */
.iq-brand-border .iq-toolbar-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.875rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25;
    vertical-align: middle;
    box-shadow: none;
}

.iq-brand-border .iq-toolbar-action-btn.btn-outline-primary:disabled {
    color: var(--iq-primary);
    border-color: var(--iq-primary);
    background-color: transparent;
    opacity: 0.45;
}

body.dark-theme .iq-brand-border .iq-toolbar-action-btn.btn-outline-primary:disabled {
    color: var(--iq-accent-blue);
    border-color: var(--iq-accent-blue);
}

a,
.btn-link {
    color: var(--iq-accent-blue);
}

a:hover,
.btn-link:hover {
    color: var(--bs-link-hover-color);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--iq-accent-blue);
    box-shadow: 0 0 0 0.2rem rgba(var(--iq-accent-blue-rgb), 0.2);
}

/* student-portal.css is loaded globally in Staff and forces date inputs to 2.75rem. */
input.form-control[type="date"],
input.form-control[type="time"],
input.form-control[type="datetime-local"] {
    min-height: 2.125rem;
    height: 2.125rem;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    font-size: 0.875rem;
    line-height: 1.25;
}

/* Bootstrap 5.3 borders inputs with --bs-border-color, which is lighter than the control border */
.form-control,
.form-select,
.form-check-input,
.input-group-text {
    border-color: var(--iq-input-border);
}

.form-check-input:checked {
    background-color: var(--iq-accent-blue);
    border-color: var(--iq-accent-blue);
}

/* Bootstrap 5.3 gives every cell an opaque background and its own text colour, which hides
   row-level classes such as <tr class="bg-light"> or <tr class="text-muted">. Contextual table
   variants (table-light, table-warning …) keep their colours. */
.table:not(.table-primary, .table-secondary, .table-success, .table-danger, .table-warning, .table-info, .table-light, .table-dark) {
    --bs-table-bg: transparent;
    --bs-table-color: currentcolor;
    --bs-table-striped-color: currentcolor;
    --bs-table-active-color: currentcolor;
    --bs-table-hover-color: currentcolor;
}

.card {
    border-color: var(--iq-border);
    border-radius: var(--iq-radius) !important;
    box-shadow: var(--iq-panel-shadow);
}

/* Toolbar, filter panels, and other cards across shared components */
.iq-brand-border,
.card.iq-brand-border,
.quicksearch-result-card {
    border-radius: var(--iq-radius) !important;
}

.menu-panel .iq-menu-quicksearch .quicksearch-result-card {
    border-radius: var(--iq-radius-sm) !important;
}

/* Reusable Intrinsiq cyan-to-orange gradient border */
.iq-brand-border {
    border: var(--iq-brand-border-width) solid transparent !important;
    background:
        linear-gradient(var(--iq-surface), var(--iq-surface)) padding-box,
        var(--iq-brand-gradient) border-box !important;
    box-shadow: var(--iq-panel-shadow);
}

body.dark-theme .iq-brand-border {
    background:
        linear-gradient(var(--iq-surface), var(--iq-surface)) padding-box,
        var(--iq-brand-gradient) border-box !important;
}

.iq-menu-container {
    background: var(--iq-surface);
}

.iq-menu-container .iq-menu-search,
.iq-menu-container .iq-menu-search-header {
    background-color: var(--iq-primary) !important;
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
    color: #fff;
    border-radius: 0 !important;
}

.iq-menu-container .iq-menu-search .btn,
.iq-menu-container .iq-menu-search-header .btn,
.iq-menu-container .iq-menu-search .btn-link,
.iq-menu-container .iq-menu-search-header .btn-link {
    color: #fff !important;
    text-decoration: none;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.iq-menu-container .iq-menu-search .btn:hover,
.iq-menu-container .iq-menu-search .btn:focus,
.iq-menu-container .iq-menu-search-header .btn:hover,
.iq-menu-container .iq-menu-search-header .btn-link:hover,
.iq-menu-container .iq-menu-search-header .btn-link:focus,
.iq-menu-container .iq-menu-collapse-btn:hover,
.iq-menu-container .iq-menu-collapse-btn:focus {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
}

.iq-menu-collapse-btn {
    color: #fff !important;
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: var(--iq-radius-sm) !important;
    padding: 0.25rem 0.5rem !important;
    line-height: 1;
}

.iq-menu-collapse-btn .bi {
    font-size: 1rem;
}

/* Hard guard: menu icons must stay 16px (DB menu imgs can be large SVGs/PNGs) */
.iq-menu-container .iq-menu-item-icon,
.menu-panel .iq-menu-item-icon {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    flex-shrink: 0 !important;
    object-fit: contain !important;
    display: inline-block !important;
}

.iq-menu-container .iq-menu-item-icon-font,
.menu-panel .iq-menu-item-icon-font {
    width: 16px !important;
    height: 16px !important;
    font-size: 16px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

.iq-menu-container .iq-menu-item-content,
.menu-panel .iq-menu-item-content {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

/* Quick search panel: square edges inside the side menu */
.menu-panel .iq-menu-quicksearch .form-control,
.menu-panel .iq-menu-quicksearch .input-group-text,
.menu-panel .iq-menu-quicksearch .btn,
.menu-panel .iq-menu-quicksearch .input-group,
.menu-panel .iq-menu-quicksearch .input-group > * {
    border-radius: 0 !important;
}

.iq-menu-section-header {
    background-color: var(--iq-surface-alt);
    border-color: var(--iq-border);
    color: var(--iq-primary);
}

.iq-menu-section-header:hover {
    background-color: var(--iq-primary-tint);
}

.iq-menu-item-content:hover {
    background-color: var(--iq-surface-alt);
}

.iq-menu-item.actionable .iq-menu-item-content:hover {
    background-color: var(--iq-accent-blue-tint);
    color: var(--iq-primary);
}

.iq-menu-item-content.highlighted {
    background-color: rgba(var(--iq-accent-orange-rgb), 0.14);
}

.iq-menu-children {
    border-left-color: var(--iq-border);
}

.iq-menu-items::-webkit-scrollbar-thumb {
    background: rgba(var(--iq-primary-rgb), 0.25);
    border-radius: 3px;
}

.iq-menu-items::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--iq-primary-rgb), 0.4);
}

.iq-spinner .ring {
    border-color: rgba(var(--iq-primary-rgb), 0.2);
    border-top-color: var(--iq-primary);
}

.mobile-menu-toggle {
    border-radius: var(--iq-radius-sm);
    box-shadow: var(--iq-panel-shadow);
}

.mobile-menu-toggle:hover {
    border-color: var(--iq-accent-blue);
    color: var(--iq-primary);
}

/* Dashboard layout */
.dashboard-container {
    background: var(--iq-bg);
}

.dashboard-toolbar .iq-brand-border {
    margin-bottom: 0;
}

/* Toolbar search button – brand primary fill (native button, same chrome as ExtraActions) */
.iq-brand-border .iq-toolbar-search-btn {
    background-color: var(--iq-primary) !important;
    background: var(--iq-primary) !important;
    border-color: var(--iq-primary) !important;
    color: #fff !important;
}

.iq-brand-border .iq-toolbar-search-btn:hover {
    background-color: #053a6e !important;
    background: #053a6e !important;
    border-color: #053a6e !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* Keyboard focus — theme had box-shadow:none on :focus, so Tab into Search showed no ring. */
.iq-brand-border .iq-toolbar-search-btn:focus-visible {
    background-color: #053a6e !important;
    background: #053a6e !important;
    border-color: #0daaea !important;
    color: #fff !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--iq-accent-blue-rgb), 0.45) !important;
}

.iq-brand-border .iq-toolbar-search-btn:disabled {
    background-color: var(--iq-primary) !important;
    background: var(--iq-primary) !important;
    border-color: var(--iq-primary) !important;
    color: #fff !important;
    opacity: 0.65;
}

body.dark-theme .iq-brand-border .iq-toolbar-search-btn {
    background-color: var(--iq-accent-blue) !important;
    background: var(--iq-accent-blue) !important;
    border-color: var(--iq-accent-blue) !important;
}

body.dark-theme .iq-brand-border .iq-toolbar-search-btn:hover {
    background-color: #0b8ec4 !important;
    background: #0b8ec4 !important;
    border-color: #0b8ec4 !important;
}

body.dark-theme .iq-brand-border .iq-toolbar-search-btn:focus-visible {
    background-color: #0b8ec4 !important;
    background: #0b8ec4 !important;
    border-color: #7dd3fc !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--iq-accent-blue-rgb), 0.5) !important;
}

body.dark-theme .dashboard-section,
body.dark-theme .dashboard-metric-row {
    background: var(--iq-surface);
}

body.dark-theme .dashboard-metric-row {
    background: var(--iq-surface-alt);
}

body.dark-theme .dashboard-metric-row:hover {
    background: var(--iq-primary-tint);
}

/* Section / metric headings use --iq-primary (navy) in light mode;
   switch to accent blue so they remain readable on dark surfaces */
body.dark-theme .dashboard-section-title,
body.dark-theme .dashboard-metric-card-title {
    color: var(--iq-accent-blue);
}

/* Staff menu dark-mode overrides for shared IQ.Blazor.IQS components */
body.dark-theme .iq-menu-container {
    background: var(--iq-surface);
    color: var(--iq-text);
}

body.dark-theme .iq-menu-search,
body.dark-theme .iq-menu-search-header {
    background-color: #0a223d;
    border-color: var(--iq-border);
    color: var(--iq-text);
}

body.dark-theme .iq-menu-section-header {
    background-color: var(--iq-surface-alt);
    border-color: var(--iq-border);
    color: var(--iq-text);
}

body.dark-theme .iq-menu-section-header:hover,
body.dark-theme .iq-menu-item-content:hover {
    background-color: #2b3038;
}

body.dark-theme .iq-menu-item.actionable .iq-menu-item-content:hover {
    background-color: var(--iq-accent-blue-tint);
    color: var(--iq-text);
}

body.dark-theme .iq-menu-container .iq-menu-search,
body.dark-theme .iq-menu-container .iq-menu-search-header {
    background-color: #0a223d !important;
    border-color: var(--iq-border) !important;
    color: var(--iq-text);
}

body.dark-theme .iq-menu-container .iq-menu-search .btn-link,
body.dark-theme .iq-menu-container .iq-menu-search-header .btn-link {
    color: var(--iq-text) !important;
}

body.dark-theme .btn-primary {
    --bs-btn-bg: var(--iq-accent-blue);
    --bs-btn-border-color: var(--iq-accent-blue);
    --bs-btn-hover-bg: #0b8ec4;
    --bs-btn-hover-border-color: #0b8ec4;
    --bs-btn-focus-shadow-rgb: var(--iq-accent-blue-rgb);
    --bs-btn-active-bg: #0b8ec4;
    --bs-btn-active-border-color: #0b8ec4;
    --bs-btn-disabled-bg: var(--iq-accent-blue);
    --bs-btn-disabled-border-color: var(--iq-accent-blue);
}

/* Outline buttons keep light-theme navy (--iq-primary) unless overridden */
body.dark-theme .btn-outline-primary {
    --bs-btn-color: var(--iq-accent-blue);
    --bs-btn-border-color: var(--iq-accent-blue);
    --bs-btn-hover-bg: var(--iq-accent-blue);
    --bs-btn-hover-border-color: var(--iq-accent-blue);
    --bs-btn-focus-shadow-rgb: var(--iq-accent-blue-rgb);
    --bs-btn-active-bg: var(--iq-accent-blue);
    --bs-btn-active-border-color: var(--iq-accent-blue);
    --bs-btn-disabled-color: var(--iq-accent-blue);
    --bs-btn-disabled-border-color: var(--iq-accent-blue);
    --bs-btn-disabled-opacity: 0.45;
}

body.dark-theme .btn-outline-secondary {
    --bs-btn-color: var(--iq-muted-text);
    --bs-btn-border-color: var(--iq-border);
    --bs-btn-hover-color: var(--iq-text);
    --bs-btn-hover-bg: #2b3038;
    --bs-btn-hover-border-color: var(--iq-border);
    --bs-btn-active-color: var(--iq-text);
    --bs-btn-active-bg: #2b3038;
    --bs-btn-active-border-color: var(--iq-border);
    --bs-btn-disabled-color: var(--iq-muted-text);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--iq-border);
    --bs-btn-disabled-opacity: 0.45;
}

body.dark-theme .form-label {
    color: var(--iq-text);
}

body.dark-theme .iq-menu-search .btn,
body.dark-theme .iq-menu-search-header .btn {
    color: var(--iq-text);
}

body.dark-theme .iq-menu-search .btn:hover,
body.dark-theme .iq-menu-search .btn:focus,
body.dark-theme .iq-menu-search-header .btn:hover,
body.dark-theme .iq-menu-search-header .btn:focus {
    color: var(--iq-text);
    background-color: #2b3038;
}

body.dark-theme .iq-menu-item-content.highlighted {
    background-color: #4b4123;
}

body.dark-theme .iq-menu-expand-icon,
body.dark-theme .iq-menu-item-icon-font {
    color: var(--iq-muted-text);
}

body.dark-theme .iq-menu-item-icon {
    filter: brightness(0) invert(0.9);
    opacity: 0.95;
}

body.dark-theme .iq-menu-children {
    border-left-color: var(--iq-border);
}

body.dark-theme .support-ticket-modal-content {
    background: var(--iq-surface);
    color: var(--iq-text);
}

body.dark-theme .support-ticket-modal-header {
    border-bottom-color: var(--iq-border);
}

body.dark-theme .modal-content {
    background-color: var(--iq-surface);
    color: var(--iq-text);
    border-color: var(--iq-border);
}

body.dark-theme .modal-header,
body.dark-theme .modal-footer {
    background-color: var(--iq-surface-alt);
    border-color: var(--iq-border);
    color: var(--iq-text);
}

body.dark-theme .modal-title,
body.dark-theme .modal-body {
    color: var(--iq-text);
}

body.dark-theme .modal-body {
    background-color: var(--iq-surface);
}

body.dark-theme .btn-close {
    filter: invert(1) grayscale(100%);
    opacity: 0.85;
}

/* Bootstrap utility/control fallbacks that stay too light in dark mode */
body.dark-theme .bg-light {
    background-color: var(--iq-surface-alt) !important;
    color: var(--iq-text);
}

body.dark-theme .form-control,
body.dark-theme .form-select,
body.dark-theme input.form-control,
body.dark-theme select.form-select,
body.dark-theme textarea.form-control {
    background-color: var(--iq-input-bg) !important;
    border: 1px solid var(--iq-input-border) !important;
    color: var(--iq-text) !important;
    color-scheme: dark;
}

body.dark-theme .form-control:focus,
body.dark-theme .form-select:focus,
body.dark-theme input.form-control:focus,
body.dark-theme select.form-select:focus,
body.dark-theme textarea.form-control:focus {
    background-color: var(--iq-input-bg) !important;
    border-color: var(--iq-accent-blue) !important;
    color: var(--iq-text) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--iq-accent-blue-rgb), 0.25);
}

body.dark-theme .form-control::placeholder {
    color: var(--iq-muted-text) !important;
}

/* Native date/time controls otherwise keep a light OS chrome in dark mode */
body.dark-theme input[type="date"].form-control,
body.dark-theme input[type="datetime-local"].form-control,
body.dark-theme input[type="time"].form-control,
body.dark-theme input[type="month"].form-control,
body.dark-theme input[type="week"].form-control {
    background-color: var(--iq-input-bg) !important;
    border: 1px solid var(--iq-input-border) !important;
    color: var(--iq-text) !important;
    color-scheme: dark;
}

body.dark-theme input[type="date"].form-control::-webkit-calendar-picker-indicator,
body.dark-theme input[type="datetime-local"].form-control::-webkit-calendar-picker-indicator,
body.dark-theme input[type="time"].form-control::-webkit-calendar-picker-indicator {
    filter: invert(0.85);
    opacity: 0.85;
}

/* Bootstrap cards used in filter/header panels */
body.dark-theme .card {
    background-color: var(--iq-surface);
    border-color: var(--iq-border);
    color: var(--iq-text);
}

body.dark-theme .card-body {
    background-color: transparent;
    color: var(--iq-text);
}

body.dark-theme .form-check-label {
    color: var(--iq-text);
}

body.dark-theme .form-text,
body.dark-theme .text-muted {
    color: var(--iq-muted-text) !important;
}

body.dark-theme .form-check-input {
    background-color: var(--iq-input-bg);
    border-color: var(--iq-input-border);
}

body.dark-theme .scheduled-item-form .trigger-grid {
    background-color: var(--iq-input-bg);
    border-color: var(--iq-input-border);
    color: var(--iq-text);
}

body.dark-theme .scheduled-item-form .trigger-grid .form-check-label {
    color: var(--iq-text);
}

/* Dark tables: cell-level colours so shared-package row styles stay readable */
body.dark-theme .table {
    --bs-table-color: var(--iq-text);
    --bs-table-bg: var(--iq-surface);
    --bs-table-border-color: var(--iq-border);
    --bs-table-striped-color: var(--iq-text);
    --bs-table-striped-bg: var(--iq-surface-alt);
    --bs-table-hover-color: var(--iq-text);
    --bs-table-hover-bg: var(--iq-primary-tint);
    --bs-table-active-color: var(--iq-text);
    --bs-table-active-bg: var(--iq-surface-alt);
    --bs-table-accent-bg: transparent;
    color: var(--iq-text) !important;
    border-color: var(--iq-border);
}

body.dark-theme .table > :not(caption) > * > * {
    color: var(--iq-text) !important;
    border-color: var(--iq-border) !important;
    background-color: var(--iq-surface) !important;
}

body.dark-theme .table-striped > tbody > tr:nth-of-type(odd),
body.dark-theme .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: var(--iq-surface-alt);
    color: var(--iq-text) !important;
    background-color: var(--iq-surface-alt) !important;
}

body.dark-theme .table-hover > tbody > tr:hover,
body.dark-theme .table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: var(--iq-primary-tint);
    color: var(--iq-text) !important;
    background-color: var(--iq-primary-tint) !important;
}

body.dark-theme .table-light,
body.dark-theme thead.table-light,
body.dark-theme .table-light > tr,
body.dark-theme .table-light th,
body.dark-theme .table-light td,
body.dark-theme .table thead th,
body.dark-theme thead.sticky-top,
body.dark-theme thead.sticky-top th {
    --bs-table-color: var(--iq-text);
    --bs-table-bg: var(--iq-surface-alt);
    --bs-table-striped-color: var(--iq-text);
    --bs-table-hover-color: var(--iq-text);
    color: var(--iq-text) !important;
    background-color: var(--iq-surface-alt) !important;
    border-color: var(--iq-border) !important;
}

/* Report/QuickSearch table styles from shared packages that hardcode white backgrounds */
body.dark-theme .tableFixHead table,
body.dark-theme .tableFixHead th,
body.dark-theme .tableFixHead td,
body.dark-theme .tableFixHead thead th,
body.dark-theme .tableFixHead .sticky {
    background-color: var(--iq-surface) !important;
    color: var(--iq-text) !important;
    border-color: var(--iq-border) !important;
}

/* Prevent unreadable "text-white on light-ish header" combinations in dark theme */
body.dark-theme .card-header.text-white,
body.dark-theme .card-header.bg-info.text-white {
    background-color: #2b3038 !important;
    border-color: var(--iq-border) !important;
    color: var(--iq-text) !important;
}

/* QuickSearch result cards ship with inline light backgrounds in shared package */
body.dark-theme .quicksearch-result-card {
    background-color: var(--iq-surface) !important;
    border-color: var(--iq-border) !important;
    color: var(--iq-text) !important;
}

body.dark-theme .quicksearch-result-card .card-body,
body.dark-theme .quicksearch-result-card .fw-semibold,
body.dark-theme .quicksearch-result-card .text-muted {
    color: var(--iq-text) !important;
}

/* Icon tile inside QuickSearch card uses inline #e7f3ff */
body.dark-theme .quicksearch-result-card [style*="background-color: #e7f3ff"],
body.dark-theme .quicksearch-result-card [style*="background-color:#e7f3ff"] {
    background-color: #22354a !important;
}

/* Syncfusion input wrappers (multiselect/dropdown/combobox) — toolbar filters */
body.dark-theme .e-input-group,
body.dark-theme .e-input-group.e-control-wrapper,
body.dark-theme .e-control-wrapper.e-input-group,
body.dark-theme .e-float-input,
body.dark-theme .e-float-input.e-control-wrapper {
    background: var(--iq-input-bg) !important;
    background-color: var(--iq-input-bg) !important;
    border: 1px solid var(--iq-input-border) !important;
    border-color: var(--iq-input-border) !important;
    color: var(--iq-text) !important;
    box-shadow: none !important;
}

/* Inner MultiSelect chrome sits inside .e-input-group — fill only, no second border */
body.dark-theme .e-multi-select-wrapper {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    color: var(--iq-text) !important;
    box-shadow: none !important;
}

body.dark-theme .e-input-group.e-input-focus,
body.dark-theme .e-input-group.e-control-wrapper.e-input-focus,
body.dark-theme .e-control-wrapper.e-input-group.e-input-focus {
    border-color: var(--iq-accent-blue) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--iq-accent-blue-rgb), 0.25) !important;
}

body.dark-theme .e-input-group input,
body.dark-theme .e-input-group input.e-input,
body.dark-theme .e-control-wrapper input.e-input,
body.dark-theme input.e-input,
body.dark-theme input.e-multiselect,
body.dark-theme .e-multi-select-wrapper input[type="text"] {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--iq-text) !important;
    /* Syncfusion bootstrap5 sets -webkit-text-fill-color to #212529; that wins over color */
    -webkit-text-fill-color: var(--iq-text) !important;
}

body.dark-theme .e-input-group input::placeholder,
body.dark-theme input.e-input::placeholder,
body.dark-theme input.e-multiselect::placeholder,
body.dark-theme .e-multi-select-wrapper input[type="text"]::placeholder {
    color: var(--iq-muted-text) !important;
    -webkit-text-fill-color: var(--iq-muted-text) !important;
    opacity: 1 !important;
}

/* MultiSelect selected/placeholder text ("1 selected", delim values, etc.) */
body.dark-theme .e-multi-select-wrapper,
body.dark-theme .e-multi-select-wrapper .e-delim-view,
body.dark-theme .e-multi-select-wrapper .e-delim-values,
body.dark-theme .e-multi-select-wrapper .e-remain,
body.dark-theme .e-multi-select-wrapper .e-searcher,
body.dark-theme .e-multiselect .e-multi-select-wrapper .e-delim-values,
body.dark-theme .e-multiselect .e-multi-select-wrapper .e-remain {
    color: var(--iq-text) !important;
    -webkit-text-fill-color: var(--iq-text) !important;
}

body.dark-theme .e-multi-select-wrapper .e-remain {
    color: var(--iq-muted-text) !important;
    -webkit-text-fill-color: var(--iq-muted-text) !important;
}

body.dark-theme .e-input-group .e-input-group-icon,
body.dark-theme .e-input-group .e-ddl-icon,
body.dark-theme .e-input-group .e-clear-icon,
body.dark-theme .e-multi-select-wrapper .e-ddl-icon,
body.dark-theme .e-multi-select-wrapper .e-chips-close,
body.dark-theme .e-multi-select-wrapper .e-chips-close::before,
body.dark-theme .e-input-group .e-ddl-icon::before {
    background: transparent !important;
    color: var(--iq-muted-text) !important;
    -webkit-text-fill-color: var(--iq-muted-text) !important;
}

body.dark-theme .e-multi-select-wrapper .e-chips {
    background-color: #3d4658 !important;
    color: var(--iq-text) !important;
}

body.dark-theme .e-multi-select-wrapper .e-chips .e-chipcontent,
body.dark-theme .e-multi-select-wrapper .e-chips > .e-chipcontent {
    color: var(--iq-text) !important;
    -webkit-text-fill-color: var(--iq-text) !important;
}

/* Syncfusion dropdown popup/list styles */
body.dark-theme .e-popup,
body.dark-theme .e-dropdownbase,
body.dark-theme .e-virtual-ddl-content,
body.dark-theme .e-list-parent {
    background-color: var(--iq-surface) !important;
    color: var(--iq-text) !important;
}

body.dark-theme .e-popup .e-list-item,
body.dark-theme .e-virtual-ddl-content .e-list-item {
    background-color: transparent !important;
    color: var(--iq-text) !important;
}

body.dark-theme .e-popup .e-list-item:hover,
body.dark-theme .e-popup .e-list-item.e-hover,
body.dark-theme .e-virtual-ddl-content .e-list-item:hover,
body.dark-theme .e-virtual-ddl-content .e-list-item.e-hover {
    background-color: #2b3038 !important;
    color: var(--iq-text) !important;
}

body.dark-theme .e-popup .e-list-item.e-item-focus,
body.dark-theme .e-popup .e-list-item.e-active,
body.dark-theme .e-virtual-ddl-content .e-list-item.e-item-focus,
body.dark-theme .e-virtual-ddl-content .e-list-item.e-active {
    background-color: #22354a !important;
    color: var(--iq-text) !important;
}

/* Help overlay/modal from IQ.Blazor.UI */
body.dark-theme .help-overlay {
    background: rgba(0, 0, 0, 0.7) !important;
}

body.dark-theme .help-overlay-content {
    background: var(--iq-surface) !important;
    border: 1px solid var(--iq-border) !important;
    color: var(--iq-text) !important;
}

body.dark-theme .help-overlay-header {
    background: var(--iq-surface-alt) !important;
    border-bottom: 1px solid var(--iq-border) !important;
}

body.dark-theme .help-overlay-header h3,
body.dark-theme .help-overlay-body,
body.dark-theme .help-overlay-body p,
body.dark-theme .help-overlay-body li,
body.dark-theme .help-overlay-body h2,
body.dark-theme .help-overlay-body h3,
body.dark-theme .help-overlay-body h4,
body.dark-theme .help-overlay-body h5,
body.dark-theme .help-overlay-body strong {
    color: var(--iq-text) !important;
}

body.dark-theme .help-overlay-body .timestamp {
    color: var(--iq-muted-text) !important;
}

body.dark-theme .close-button {
    background-color: transparent !important;
    color: var(--iq-text) !important;
}

body.dark-theme .close-button:hover {
    background-color: #2b3038 !important;
    color: var(--iq-text) !important;
}

/* Bootstrap dropdown popups (e.g., Export to Excel) */
body.dark-theme .dropdown-menu {
    background-color: var(--iq-surface) !important;
    border-color: var(--iq-border) !important;
    color: var(--iq-text) !important;
}

body.dark-theme .dropdown-item {
    color: var(--iq-text) !important;
}

body.dark-theme .dropdown-item:hover,
body.dark-theme .dropdown-item:focus,
body.dark-theme .dropdown-item.active,
body.dark-theme .dropdown-item:active {
    background-color: #2b3038 !important;
    color: var(--iq-text) !important;
}

/* Shared IQ loading spinner + text (IQLoading, FullScreenLoading, iframe loaders) */
body.dark-theme .iq-spinner .ring {
    border-color: rgba(var(--iq-accent-blue-rgb), 0.3);
    border-top-color: var(--iq-accent-blue);
}

body.dark-theme .iq-loader-text {
    /* Use primary text colour for maximum readability in dark mode */
    color: var(--iq-text) !important;
}

/* Full-screen loading overlays from IQ.Blazor.UI.FullScreenLoading */
body.dark-theme .fullscreen-loading-container .iq-overlay {
    background: rgba(0, 0, 0, 0.75) !important;
}

body.dark-theme .fullscreen-loading-container .iq-loader-text {
    color: var(--iq-text) !important;
}


/* Large modal size for embedded IQ5 forms (Export Documents, Dynamic Emails) opened via IIQModalService. */
.modal-dialog.iq5-modal-xl {
    max-width: 92vw;
    width: 1400px;
}

@media (max-width: 991.98px) {
    .modal-dialog.iq5-modal-xl {
        max-width: 100vw;
        width: 100vw;
        margin: 0;
    }
}

/* IQ5 iframe popups (Export Documents, Dynamic Emails): let the embedded form fill the modal. */
.modal-body:has(> .iq5-html-content-fill) {
    padding: 0;
}

.iq5-html-content-fill {
    height: min(85vh, calc(100vh - 140px));
}

.iq5-html-content-fill iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Ask your data — keep the composer full width even if RCL scoped CSS is missing. */
.natural-query {
    max-width: 72rem;
}

.natural-query .nq-composer-input {
    width: 100%;
    min-height: 5rem;
    resize: vertical;
}