/* wwwroot/app.css */

:root {
    --ac-brand-green: #95bb9b;
    --ac-brand-green-border: #6f9475;
    --ac-brand-green-soft: #d7e6da;
    --ac-brand-slate: #436477;
    --ac-brand-danger: #d8636e;
    --ac-neutral-secondary: #6c757d;
    --ac-focus-border: #95bb9b;
    --ac-focus-shadow: 0 0 0 0.25rem rgba(149, 187, 155, 0.35);
}

:root,
html.dark-mode .light-surface {
    color-scheme: light;
    --ac-canvas: #ffffff;
    --ac-surface: #ffffff;
    --ac-surface-muted: rgba(0, 0, 0, 0.03);
    --ac-surface-muted-strong: #f8f9fa;
    --ac-surface-sunken: #ffffff;
    --ac-surface-hover: #e6f0e8;
    --ac-border: #dee2e6;
    --ac-border-soft: rgba(0, 0, 0, 0.125);
    --ac-overlay-border: rgba(0, 0, 0, 0.2);
    --ac-text: #212529;
    --ac-text-muted: #6c757d;
    --ac-text-disabled: #6c757d;
    --ac-heading-ink: #000000;
    --ac-link: #436477;
    --ac-link-hover: #2f4755;
    --ac-header-icon: #094886;
    --ac-accent-blue: #436477;
    --ac-outline-primary-border: #436477;
    --ac-outline-secondary-text: #6c757d;
    --ac-outline-secondary-border: #6c757d;
    --ac-outline-danger-text: #b0424d;
    --ac-outline-danger-border: #c05762;
    --ac-field-border: #ced4da;
    --ac-field-addon-bg: #e9ecef;
    --ac-field-readonly-bg: #e9ecef;
    --ac-field-disabled-bg: #e9ecef;
    --ac-field-disabled-border: #ced4da;
    --ac-field-disabled-text: #212529;
    --ac-placeholder: #6c757d;
    --ac-check-bg: #ffffff;
    --ac-check-border: rgba(0, 0, 0, 0.25);
    --ac-scrollbar: #adb5bd;
    --ac-scrollbar-hover: #6c757d;
    --ac-table-stripe: rgba(0, 0, 0, 0.05);
    --ac-table-hover: rgba(0, 0, 0, 0.075);
    --ac-table-active: rgba(0, 0, 0, 0.1);
    --ac-table-light-bg: #f8f9fa;
    --ac-table-light-border: #dfe0e1;
    --ac-page-hover-bg: #e9ecef;
    --ac-page-hover-text: #000000;
    --ac-page-disabled-bg: #ffffff;
    --ac-page-disabled-border: #dee2e6;
    --ac-page-disabled-text: #6c757d;
    --ac-sidebar-surface: #95bb9b;
    --ac-select-caret: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    --ac-switch-knob: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
    --ac-shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

html.dark-mode {
    color-scheme: dark;
    --ac-canvas: #21262e;
    --ac-surface: #2b313a;
    --ac-surface-muted: #333a44;
    --ac-surface-muted-strong: #333a44;
    --ac-surface-sunken: #2b313a;
    --ac-surface-hover: #3b4350;
    --ac-border: #3a424d;
    --ac-border-soft: #3a424d;
    --ac-overlay-border: #3a424d;
    --ac-text: #e4e7ea;
    --ac-text-muted: #a6adb6;
    --ac-text-disabled: #8a929c;
    --ac-heading-ink: #e4e7ea;
    --ac-link: #7fb3d5;
    --ac-link-hover: #a9cde4;
    --ac-header-icon: #e4e7ea;
    --ac-accent-blue: #5090b5;
    --ac-outline-primary-border: #5b87a0;
    --ac-outline-secondary-text: #a6adb6;
    --ac-outline-secondary-border: #8a929c;
    --ac-outline-danger-text: #e08d96;
    --ac-outline-danger-border: #b95560;
    --ac-field-border: #58616b;
    --ac-field-addon-bg: #2b313a;
    --ac-field-readonly-bg: #2b313a;
    --ac-field-disabled-bg: #21262e;
    --ac-field-disabled-border: #3a424d;
    --ac-field-disabled-text: #8a929c;
    --ac-placeholder: #8a929c;
    --ac-check-bg: #3a424d;
    --ac-check-border: #58616b;
    --ac-scrollbar: #4a525c;
    --ac-scrollbar-hover: #5a636e;
    --ac-table-stripe: rgba(255, 255, 255, 0.035);
    --ac-table-hover: rgba(255, 255, 255, 0.06);
    --ac-table-active: rgba(255, 255, 255, 0.08);
    --ac-table-light-bg: #333a44;
    --ac-table-light-border: #3a424d;
    --ac-page-hover-bg: #3b4350;
    --ac-page-hover-text: #ffffff;
    --ac-page-disabled-bg: #21262e;
    --ac-page-disabled-border: #3a424d;
    --ac-page-disabled-text: #6c757d;
    --ac-sidebar-surface: #2b313a;
    --ac-select-caret: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e4e7ea' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    --ac-switch-knob: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23a6adb6'/%3e%3c/svg%3e");
    --ac-shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

html.dark-mode .modal-content {
    --ac-surface-sunken: #21262e;
    --ac-field-addon-bg: #21262e;
    --ac-field-readonly-bg: #21262e;
    --ac-field-disabled-bg: #1a1e24;
}

html, body {
    height: 100%;
    margin: 0;
    font-family: sans-serif;
    /* Body should not scroll if page-content-column and page-sidebar-column manage their own scrolling */
    overflow: hidden;
}

/* Overall container for the app layout */
.app-layout-container {
    /* height: 100vh; -- Handled by html, body and vh-100 on MainLayout root if needed */
    /* Using vh-100 on MainLayout root div directly */
}

/* The main row that holds content and sidebar */
.main-row-wrapper {
    height: 100%; /* Make this row fill its parent (app-layout-container or main-area-wrapper) */
    /* If app-layout-container is not flex-column vh-100, then this might need
       height: calc(100vh - 60px); if header is outside and fixed */
}

/* --- Header Styling --- */
.top-row-header {
    height: 60px; /* Fixed header height */
    background-color: var(--ac-canvas);
    border-bottom: 1px solid var(--ac-border);
    color: var(--ac-text);
    /* padding for items inside the header is handled by container-fluid within it */
    z-index: 1030;
    flex-shrink: 0; /* Important for when parent is flex-column */
    /* The header is now *inside* the main content column, so its width is naturally constrained */
}

.header-logo img {
    max-height: 40px;
    width: auto;
}

/* --- Main Content Column (Left side) --- */
.page-content-column {
    display: flex;
    flex-direction: column; /* Stack header and article vertically */
    height: 100vh; /* Make the content column take full viewport height initially */
    height: 100dvh; /* Use the dynamic viewport on mobile browsers with collapsing toolbars */
    /* The sidebar will sit next to it, also taking full viewport height */
    overflow: hidden; /* This column itself should not scroll */
}

/* The article where @Body renders, below the header */
.main-body-content {
    flex-grow: 1; /* Takes up space remaining after its own header */
    overflow-y: auto; /* SCROLLS this main body content if it overflows */
    background-color: var(--ac-canvas);
    color: var(--ac-text);
}

    .main-body-content .content { /* The <article class="content"> element */
        padding: 1rem; /* Padding for the actual page content */
    }


/* --- Desktop Right Sidebar Column --- */
.page-sidebar-column {
    background-color: #95bb9b; /* Your green color */
    border-left: 1px solid #ccc;
    height: 100vh; /* Make sidebar take full viewport height */
    height: 100dvh; /* Use the dynamic viewport on mobile browsers with collapsing toolbars */
    padding: 0; /* Remove padding from the aside itself */
    display: flex; /* Ensure flex context for child */
    flex-direction: column; /* Stack NavLinks content */
    overflow: hidden; /* This column itself should not scroll */
}

    /* Target the NavigationLinks component's root wrapper *inside* the sidebar */
    .page-sidebar-column > .navigation-links-wrapper {
        height: 100%; /* Fill the sidebar column */
        min-height: 0;
        overflow: hidden; /* The nav list scrolls, the footer stays pinned */
        display: flex;
        flex-direction: column;
        /* Padding for the content of navlinks can be inside the navlinks component
       or applied here if consistent padding is needed around the scrollable area */
    }

        /* SCROLLS the quick links only, so the footer is always visible */
        .page-sidebar-column > .navigation-links-wrapper > .sidebar-nav-section {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
        }

        .page-sidebar-column > .navigation-links-wrapper > .sidebar-footer {
            flex: 0 0 auto;
        }

.navigation-links-wrapper .sidebar-nav-section {
    padding: 1rem; /* Padding for the actual ul/nav items */
}


/* --- Mobile Offcanvas Styling --- */
/* Reuse page-sidebar-column styles for background if desired, or new class */
.offcanvas.page-sidebar-offcanvas {
    background-color: var(--ac-sidebar-surface);
}

    .page-sidebar-offcanvas .offcanvas-body {
        padding: 0; /* Let NavigationLinks control its padding */
    }
        /* Ensure the inner div for offcanvas content scrolls */
        .page-sidebar-offcanvas .offcanvas-body > .h-100.overflow-y-auto {
            /* Ensure NavigationLinks' root fills this and scrolls */
        }

    .page-sidebar-offcanvas .navigation-links-wrapper { /* If you use this wrapper in offcanvas too */
        padding: 0; /* Offcanvas body already has some padding often */
    }

        .page-sidebar-offcanvas .navigation-links-wrapper .sidebar-nav-section {
            padding: 1rem;
        }


.page-content-column.app-content-fill {
    flex: 1 1 0%;
    min-width: 0;
}

.page-sidebar-column.app-desktop-sidebar {
    display: none;
}

.app-desktop-welcome {
    display: none;
}

@media (min-width: 1200px),
       (orientation: landscape) and (min-width: 768px) and (min-height: 800px) {
    .page-sidebar-column.app-desktop-sidebar {
        display: flex;
    }

    .app-mobile-nav-toggler {
        display: none;
    }

    .app-desktop-welcome {
        display: inline;
    }
}


@media (max-width: 1199.98px) {
    .main-body-content .container,
    .main-body-content .container-fluid {
        max-width: 100%;
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
}

@media (max-width: 575.98px) {
    .main-body-content .container,
    .main-body-content .container-fluid {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}


/* --- NavigationLinks Styling (largely from your existing CSS) --- */
.sidebar-nav-item {
    margin-bottom: 0.75rem;
    /* margin-top: 0.75rem; -- Handled by ul padding if needed */
}

.sidebar-nav-button {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100%;
    padding: 0.8rem 1rem !important;
    font-weight: 500;
    color: #000 !important; /* White text on green buttons */
    background-color: transparent; /* Buttons transparent, rely on sidebar background */
    border: 1px solid #FFFFFF; /* White border */
    border-radius: 0.5rem;
    text-align: left;
    text-decoration: none !important;
    transition: none !important;
}

    .sidebar-nav-button:hover,
    .sidebar-nav-button.active {
        border-color: #000;
        color: #000 !important;
    }


/* Branding variants for markup that must paint correctly before the circuit is interactive.
   The `hide-branding` class is set on <html> by the head script on the very first load. */
.unbranded-content {
    display: none !important;
}

html.hide-branding .branded-content {
    display: none !important;
}

html.hide-branding .unbranded-content {
    display: revert !important;
}

.sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.3); /* Lighter border for green bg */
    padding: 1rem; /* Ensure footer has padding */
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px)); /* Clear the iOS home indicator */
    color: #FFFFFF; /* White text for footer */
}

    .sidebar-footer img { /* AllClear logo at bottom */
        /* Styles are inline, but consider filter: brightness(0) invert(1); if it's not white */
    }

    .sidebar-footer p {
        color: #FFFFFF; /* White text for paragraphs */
        margin-bottom: 0.25rem;
    }

/* Table Row Color Coding (Unchanged) */
.table-row-safe-time-missing { /* ... */
}

.table-row-alert {
    background-color: #d8636e !important;
    color: #58151c !important;
}

/* Blazor Error UI (Unchanged) */
#blazor-error-ui {
    background: lightyellow; /* ... */
}

    #blazor-error-ui .dismiss { /* ... */
    }


/* Hide Blazor Server's default reconnect overlay only when our toast-based
   reconnection UX is enabled (set by wwwroot/js/reconnectInterop.js). */
html.reconnect-toast-enabled #components-reconnect-modal,
html.reconnect-toast-enabled #blazor-reconnect-modal {
    display: none !important;
}

table.dataTable.table-bordered > tbody > tr > td {
    border-top: 1px solid #dee2e6; /* This is the default Bootstrap border color */
}

/* Optional: Ensure the header has a solid bottom border if it's also missing */
table.dataTable.table-bordered > thead > tr > th {
    border-bottom-width: 2px;
}

.table-text-center th,
.table-text-center td {
    text-align: center;
    vertical-align: middle;
}

.edit-team-container {
    max-width: 1200px; /* Or another width that suits your layout */
}

.edit-team-header {
    background-color: #e4dfd3; /* Light tan color from screenshot */
    border-radius: 8px;
}

.super-admin-box {
    background-color: #F3F4E7;
    border: 1px solid #ccc;
    border-radius: 8px;
    height: 100%;
}

/* Provide background utility classes for toasts if Bootstrap version lacks text-bg-* */
.text-bg-success {
    background-color: #95bb9b !important; /* Bootstrap success */
    color: #000 !important;
    font-size: 16px;
}

.text-bg-danger {
    background-color: #d8636e !important; /* Bootstrap danger */
    color: #000 !important;
    font-size: 16px;
}

.text-bg-warning {
    background-color: #f3e9a5 !important; /* Yellow-ish caution */
    color: #000 !important;
    font-size: 16px;
}

.text-bg-primary {
    background-color: #436477 !important; /* Site blue */
    color: #fff !important;
    font-size: 16px;
}



.card-setup {
    /* Enforce a visible outline even if Bootstrap sets its own border */
    border-style: solid !important;
    border-width: 2px !important;
    border-color: transparent !important;
    border-radius: .5rem;
    transition: transform .08s ease-in-out, box-shadow .08s ease-in-out;
}

.card-setup:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.08);
}

.card-setup.reconnect-test-card:hover {
    transform: none;
    box-shadow: none;
}

.card-outline-common { border-color: var(--ac-accent-blue) !important; }

.card-outline-admin {
    border-color: #d8636e !important;
}

.icon-common {
    color: var(--ac-accent-blue);
    font-size: 2rem; /* roughly display-6 */
}

.icon-admin {
    color: #d8636e;
    font-size: 2rem;
}

/* DataTables button + pagination styling */
.dt-btn-green {
    background-color: #95bb9b !important;
    border-color: #95bb9b !important;
    color: #000 !important;
    border-radius: 5px !important;
    box-shadow: none;
}

.dt-btn-green:hover,
.dt-btn-green:focus {
    background-color: #7ca482 !important;
    border-color: #7ca482 !important;
    color: #000 !important;
}

.dt-btn-green:active {
    background-color: #6f9475 !important;
    border-color: #6f9475 !important;
    color: #000 !important;
}

.dt-btn-green:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(149, 187, 155, 0.35) !important;
}

.dt-btn-green:disabled,
.dt-btn-green.disabled {
    background-color: #c6d9ca !important;
    border-color: #c6d9ca !important;
    color: #6c757d !important;
}

.dataTables_wrapper .dataTables_paginate,
.dt-container .dt-paging {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.3rem;
    text-align: right;
    padding-top: 0.25rem;
}

.dataTables_wrapper .dataTables_paginate .page-link,
.dt-container .dt-paging .page-link {
    color: #000;
}

.dataTables_wrapper .dataTables_paginate .page-link:hover,
.dt-container .dt-paging .page-link:hover {
    color: #000;
}

.dataTables_wrapper .dataTables_paginate .page-item.active .page-link,
.dt-container .dt-paging .page-item.active .page-link {
    background-color: #95bb9b;
    border-color: #95bb9b;
    color: #000;
}

.dataTables_wrapper .dataTables_paginate .page-link:focus,
.dt-container .dt-paging .page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(149, 187, 155, 0.35);
}

.data-table-shell {
    background-color: var(--ac-surface);
    border-radius: 8px;
    position: relative;
}

.data-table-shell:not(.data-table-ready) {
    min-height: 7rem;
}

.data-table-shell:not(.data-table-ready) > table,
.data-table-shell.data-table-initializing .dt-container {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    visibility: hidden;
    width: 100%;
}

.data-table-loading {
    align-items: center;
    animation: data-table-loading-reveal 1ms linear var(--data-table-loading-delay, 400ms) forwards;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 7rem;
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
}

.data-table-loading.data-table-loading-visible {
    animation: none;
    opacity: 1;
}

@keyframes data-table-loading-reveal {
    to {
        opacity: 1;
    }
}

.page-breadcrumb {
    font-size: 0.95rem;
    color: var(--ac-text-muted);
}

.page-breadcrumb-link {
    color: var(--ac-link);
    font-weight: 600;
    text-decoration: none;
}

.page-breadcrumb-link:hover,
.page-breadcrumb-link:focus {
    color: var(--ac-link-hover);
    text-decoration: none;
}

.page-breadcrumb-current {
    color: var(--ac-text);
    font-weight: 600;
}

.page-breadcrumb-separator {
    color: var(--ac-text-muted);
}

.current-institution-option {
    border-color: #436477 !important;
}

.current-institution-badge {
    color: #fff;
    background-color: #436477;
}

.info-tooltip-icon {
    color: #436477; /* Site blue */
    cursor: help;
    font-size: 0.95em;
    vertical-align: baseline;
}

.info-tooltip-icon:hover,
.info-tooltip-icon:focus {
    color: #2f4755;
    outline: none;
}

.tooltip .tooltip-inner {
    background-color: #436477; /* Site blue */
    color: #fff;
    border: 1px solid #2f4755;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    font-weight: 500;
}

.tooltip[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: #436477;
}

.tooltip[data-popper-placement^="bottom"] .tooltip-arrow::before {
    border-bottom-color: #436477;
}

.tooltip[data-popper-placement^="left"] .tooltip-arrow::before {
    border-left-color: #436477;
}

.tooltip[data-popper-placement^="right"] .tooltip-arrow::before {
    border-right-color: #436477;
}

.table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* Keep narrow-screen tables wider than their viewport so the wrapper can scroll horizontally. */
.table-responsive > table,
.table-responsive table.dataTable {
    white-space: nowrap;
}

/* Flatpickr is appended to body outside themed containers, so its popup intentionally stays light. */

/* flatpickr makes its input readonly; Bootstrap greys readonly inputs. Keep the
   field looking like a normal, editable control (but still grey out real disabled ones). */
.form-control.flatpickr-input[readonly]:not(:disabled) {
    background-color: #fff;
    cursor: pointer;
}

.flatpickr-calendar {
    border-radius: 8px;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .15);
    border: 1px solid #dee2e6;
    font-family: sans-serif;
}

.flatpickr-day.selected,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: #95bb9b;
    border-color: #95bb9b;
    color: #000;
}

.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: #7ca482;
    border-color: #7ca482;
    color: #000;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
    background: #e6f0e8;
    border-color: #e6f0e8;
}

.flatpickr-day.today {
    border-color: #436477;
}

.flatpickr-day.today:hover {
    background: #436477;
    border-color: #436477;
    color: #fff;
}

.flatpickr-day.inRange {
    background: #d7e6da;
    border-color: #d7e6da;
    box-shadow: -5px 0 0 #d7e6da, 5px 0 0 #d7e6da;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    color: #436477;
    font-weight: 600;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: #95bb9b;
}

span.flatpickr-weekday {
    color: #436477;
    font-weight: 600;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: #ccc;
}

.flatpickr-calendar {
    width: 296px;
}

.flatpickr-innerContainer {
    justify-content: center;
}

.flatpickr-days,
.dayContainer {
    width: 248px;
}

.dayContainer {
    min-width: 248px;
    max-width: 248px;
}

.flatpickr-day {
    height: 32px;
    line-height: 32px;
}

.flatpickr-weekdays {
    height: 22px;
}

/* Quick-pick preset shortcut buttons injected below the calendar */
.fp-presets {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    padding: .45rem;
    border-top: 1px solid #eceff1;
    justify-content: center;
}

.fp-preset-btn {
    border: 1px solid #95bb9b;
    background: #fff;
    color: #2f5d3a;
    border-radius: 999px;
    padding: .15rem .55rem;
    font-size: .72rem;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color .08s ease-in-out, color .08s ease-in-out;
}

.fp-preset-btn:hover {
    background: #95bb9b;
    color: #000;
}

a {
    color: var(--ac-link);
}

    a:hover,
    a:focus {
        color: var(--ac-link-hover);
    }

.btn-link {
    color: var(--ac-link);
}

    .btn-link:hover,
    .btn-link:focus {
        color: var(--ac-link-hover);
    }

.nav-link {
    color: var(--ac-link);
}

    .nav-link:hover,
    .nav-link:focus {
        color: var(--ac-link-hover);
    }

.btn-check:focus + .btn,
.btn:focus {
    box-shadow: var(--ac-focus-shadow);
}

.btn-close:focus {
    box-shadow: var(--ac-focus-shadow);
}

.btn-primary {
    color: #fff;
    background-color: #436477;
    border-color: #436477;
}

    .btn-primary:hover {
        color: #fff;
        background-color: #3a5666;
        border-color: #36505f;
    }

.btn-check:focus + .btn-primary,
.btn-primary:focus {
    color: #fff;
    background-color: #3a5666;
    border-color: #36505f;
    box-shadow: 0 0 0 0.25rem rgba(67, 100, 119, 0.45);
}

.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #2f4755;
    border-color: #2c4250;
}

.btn-check:checked + .btn-primary:focus,
.btn-check:active + .btn-primary:focus,
.btn-primary:active:focus,
.btn-primary.active:focus,
.show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(67, 100, 119, 0.45);
}

.btn-primary:disabled,
.btn-primary.disabled {
    color: #fff;
    background-color: #436477;
    border-color: #436477;
}

.btn-outline-primary {
    color: var(--ac-link);
    border-color: var(--ac-outline-primary-border);
}

    .btn-outline-primary:hover {
        color: #fff;
        background-color: var(--ac-brand-slate);
        border-color: var(--ac-brand-slate);
    }

.btn-check:focus + .btn-outline-primary,
.btn-outline-primary:focus {
    box-shadow: 0 0 0 0.25rem rgba(67, 100, 119, 0.45);
}

.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show {
    color: #fff;
    background-color: var(--ac-brand-slate);
    border-color: var(--ac-brand-slate);
}

.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
    color: var(--ac-outline-primary-border);
    background-color: transparent;
}

.btn-danger {
    color: #000;
    background-color: #d8636e;
    border-color: #d8636e;
}

    .btn-danger:hover {
        color: #000;
        background-color: #cd4f5b;
        border-color: #c94a57;
    }

.btn-check:focus + .btn-danger,
.btn-danger:focus {
    color: #000;
    background-color: #cd4f5b;
    border-color: #c94a57;
    box-shadow: 0 0 0 0.25rem rgba(216, 99, 110, 0.45);
}

.btn-check:checked + .btn-danger,
.btn-check:active + .btn-danger,
.btn-danger:active,
.btn-danger.active,
.show > .btn-danger.dropdown-toggle {
    color: #000;
    background-color: #c74754;
    border-color: #c34350;
}

.btn-check:checked + .btn-danger:focus,
.btn-check:active + .btn-danger:focus,
.btn-danger:active:focus,
.btn-danger.active:focus,
.show > .btn-danger.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(216, 99, 110, 0.45);
}

.btn-danger:disabled,
.btn-danger.disabled {
    color: #000;
    background-color: #d8636e;
    border-color: #d8636e;
}

.btn-outline-danger {
    color: var(--ac-outline-danger-text);
    border-color: var(--ac-outline-danger-border);
}

    .btn-outline-danger:hover {
        color: #000;
        background-color: var(--ac-brand-danger);
        border-color: var(--ac-brand-danger);
    }

.btn-check:focus + .btn-outline-danger,
.btn-outline-danger:focus {
    box-shadow: 0 0 0 0.25rem rgba(216, 99, 110, 0.45);
}

.btn-check:checked + .btn-outline-danger,
.btn-check:active + .btn-outline-danger,
.btn-outline-danger:active,
.btn-outline-danger.active,
.btn-outline-danger.dropdown-toggle.show {
    color: #000;
    background-color: var(--ac-brand-danger);
    border-color: var(--ac-brand-danger);
}

.btn-outline-danger:disabled,
.btn-outline-danger.disabled {
    color: var(--ac-outline-danger-text);
    background-color: transparent;
}

.text-primary {
    color: var(--ac-link) !important;
}

.bg-primary {
    background-color: #436477 !important;
}

.badge.bg-success {
    background-color: #95bb9b !important;
    color: #000;
}

.badge.bg-danger {
    background-color: #d8636e !important;
    color: #000;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--ac-text);
    background-color: var(--ac-surface-hover);
}

.dropdown-item.active,
.dropdown-item:active {
    color: #000;
    background-color: var(--ac-brand-green);
}

.list-group-item-action:active {
    color: #000;
    background-color: var(--ac-brand-green-soft);
}

.list-group-item.active {
    color: #000;
    background-color: var(--ac-brand-green);
    border-color: var(--ac-brand-green);
}

.page-link {
    background-color: var(--ac-surface-sunken);
    border-color: var(--ac-border);
    color: var(--ac-link);
}

    .page-link:hover {
        background-color: var(--ac-page-hover-bg);
        color: var(--ac-link-hover);
    }

    .page-link:focus {
        color: var(--ac-link-hover);
        box-shadow: var(--ac-focus-shadow);
    }

.page-item.active .page-link {
    color: #000;
    background-color: var(--ac-brand-green);
    border-color: var(--ac-brand-green);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ac-focus-border);
    box-shadow: var(--ac-focus-shadow);
}

.form-check-input:focus {
    border-color: var(--ac-focus-border);
    box-shadow: var(--ac-focus-shadow);
}

.form-check-input:checked {
    background-color: var(--ac-brand-green);
    border-color: var(--ac-brand-green-border);
}

    .form-check-input:checked[type=checkbox] {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
    }

    .form-check-input:checked[type=radio] {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23000'/%3e%3c/svg%3e");
    }

.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--ac-brand-green);
    border-color: var(--ac-brand-green-border);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:focus {
    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='%236f9475'/%3e%3c/svg%3e");
}

.form-switch .form-check-input: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='%23000'/%3e%3c/svg%3e");
}

select,
.form-select,
.flatpickr-current-month .flatpickr-monthDropdown-months {
    appearance: base-select;
}

select::picker(select) {
    appearance: base-select;
    background-color: #fff;
    color: #212529;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

select::picker-icon {
    display: none;
}

select option {
    padding: 0.35rem 0.75rem;
}

    select option::checkmark {
        display: none;
    }

    select option:hover,
    select option:focus {
        background-color: #e6f0e8;
        color: #000;
    }

    select option:checked {
        background-color: #95bb9b;
        color: #000;
    }

/* Alerts intentionally stay light in both themes so their semantic colors remain recognizable. */
.alert-info {
    color: #2f4755;
    background-color: #e8eef2;
    border-color: #c6d4dc;
}

.alert-success {
    color: #2f5d3a;
    background-color: #eaf2ec;
    border-color: #c6d9ca;
}

.alert-danger {
    color: #7e2f38;
    background-color: #f9e7e9;
    border-color: #eec5ca;
}

.alert-warning {
    color: #66591c;
    background-color: #f9f4d6;
    border-color: #eadf9c;
}

.top-row-header .app-desktop-welcome,
.top-row-header .navbar-toggler {
    color: var(--ac-text);
}

.top-row-header button[aria-label="Recent Notifications"] {
    color: var(--ac-header-icon) !important;
}

.main-body-content .card {
    background-color: var(--ac-surface);
    color: var(--ac-text);
    border-color: var(--ac-border-soft);
}

.main-body-content .card-title {
    color: var(--ac-text);
}

.main-body-content .card-text {
    color: var(--ac-text-muted);
}

.main-body-content .card-header {
    background-color: var(--ac-surface-muted);
    color: var(--ac-text);
    border-color: var(--ac-border-soft);
}

.main-body-content .card-header.bg-light {
    background-color: var(--ac-surface-muted-strong) !important;
}

.main-body-content .accordion-item {
    background-color: var(--ac-surface);
    color: var(--ac-text);
    border-color: var(--ac-border-soft);
}

.main-body-content .table {
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-striped-bg: var(--ac-table-stripe);
    --bs-table-striped-color: inherit;
    --bs-table-active-bg: var(--ac-table-active);
    --bs-table-active-color: inherit;
    --bs-table-hover-bg: var(--ac-table-hover);
    --bs-table-hover-color: inherit;
    background-color: var(--ac-surface);
    color: var(--ac-text);
    border-color: var(--ac-border);
}

.main-body-content .table > :not(caption) > * > * {
    border-color: var(--ac-border);
}

.main-body-content .table-light {
    --bs-table-bg: var(--ac-table-light-bg);
    color: var(--ac-heading-ink);
    border-color: var(--ac-table-light-border);
}

.main-body-content table.dataTable.table-bordered > tbody > tr > td,
.main-body-content table.dataTable.table-bordered > thead > tr > th {
    border-color: var(--ac-border);
}

.main-body-content .dataTables_wrapper,
.main-body-content .dt-container {
    color: var(--ac-text);
}

.main-body-content :is(.dt-paging, .dataTables_paginate) .page-link {
    background-color: var(--ac-surface-sunken);
    border-color: var(--ac-border);
    color: var(--ac-text);
}

.main-body-content :is(.dt-paging, .dataTables_paginate) .page-link:hover {
    background-color: var(--ac-page-hover-bg);
    border-color: var(--ac-border);
    color: var(--ac-page-hover-text);
}

.main-body-content :is(.dt-paging, .dataTables_paginate) .page-item.active .page-link {
    background-color: var(--ac-brand-green);
    border-color: var(--ac-brand-green);
    color: #000000;
}

.main-body-content :is(.dt-paging, .dataTables_paginate) .page-item.disabled .page-link {
    background-color: var(--ac-page-disabled-bg);
    border-color: var(--ac-page-disabled-border);
    color: var(--ac-page-disabled-text);
}

.form-control,
.form-select,
:is(.dt-container, .dataTables_wrapper) :is(select, input) {
    background-color: var(--ac-surface-sunken);
    color: var(--ac-text);
    border-color: var(--ac-field-border);
}

.form-select,
:is(.dt-container, .dataTables_wrapper) select.form-select {
    background-image: var(--ac-select-caret);
}

.input-group-text {
    background-color: var(--ac-field-addon-bg);
    color: var(--ac-text);
    border-color: var(--ac-field-border);
}

.form-control::placeholder {
    color: var(--ac-placeholder);
}

.form-control[readonly]:not(:disabled),
.form-select[readonly]:not(:disabled) {
    background-color: var(--ac-field-readonly-bg);
}

.form-control.flatpickr-input[readonly]:not(:disabled) {
    background-color: var(--ac-surface-sunken);
    color: var(--ac-text);
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--ac-field-disabled-bg);
    border-color: var(--ac-field-disabled-border);
    color: var(--ac-field-disabled-text);
}

.form-check-input:not(:checked) {
    background-color: var(--ac-check-bg);
    border-color: var(--ac-check-border);
}

.form-switch .form-check-input:not(:checked):not(:focus) {
    background-image: var(--ac-switch-knob);
}

.modal-content {
    background-color: var(--ac-surface);
    color: var(--ac-text);
    border-color: var(--ac-overlay-border);
}

.modal-header,
.modal-footer {
    border-color: var(--ac-border);
}

.offcanvas {
    background-color: var(--ac-surface);
    color: var(--ac-text);
    border-color: var(--ac-overlay-border);
}

.offcanvas-title {
    color: var(--ac-text);
}

.offcanvas-header,
.offcanvas-footer {
    border-color: var(--ac-border);
}

.dropdown-menu {
    background-color: var(--ac-surface);
    color: var(--ac-text);
    border-color: var(--ac-field-border);
}

.dropdown-item {
    color: var(--ac-text);
}

.list-group-item {
    background-color: var(--ac-surface-sunken);
    color: var(--ac-text);
    border-color: var(--ac-border);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--ac-surface-hover);
    color: var(--ac-text);
}

.page-item.disabled .page-link {
    background-color: var(--ac-page-disabled-bg);
    border-color: var(--ac-page-disabled-border);
    color: var(--ac-page-disabled-text);
}

.nav-tabs {
    border-bottom-color: var(--ac-border);
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    border-color: var(--ac-border);
}

.nav-tabs .nav-link.active {
    background-color: var(--ac-canvas);
    color: var(--ac-text);
    border-color: var(--ac-border) var(--ac-border) var(--ac-canvas);
}

.btn-outline-secondary {
    color: var(--ac-outline-secondary-text);
    border-color: var(--ac-outline-secondary-border);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:active,
.btn-outline-secondary.active {
    background-color: var(--ac-neutral-secondary);
    border-color: var(--ac-neutral-secondary);
    color: #ffffff;
}

.btn-outline-secondary:disabled,
.btn-outline-secondary.disabled {
    background-color: transparent;
    color: var(--ac-text-disabled);
}

:is(.main-body-content, .modal, .offcanvas) select::picker(select) {
    background-color: var(--ac-surface-sunken);
    color: var(--ac-text);
    border-color: var(--ac-field-border);
    box-shadow: var(--ac-shadow-md);
}

:is(.main-body-content, .modal, .offcanvas) select option:hover,
:is(.main-body-content, .modal, .offcanvas) select option:focus {
    background-color: var(--ac-surface-hover);
    color: var(--ac-text);
}

:is(.main-body-content, .modal, .offcanvas) select option:checked {
    background-color: var(--ac-brand-green);
    color: #000000;
}

.text-muted,
.text-secondary {
    color: var(--ac-text-muted) !important;
}

.text-dark:not(.alert) {
    color: var(--ac-text) !important;
}

.main-body-content,
.modal-content,
.offcanvas {
    scrollbar-width: thin;
    scrollbar-color: var(--ac-scrollbar) transparent;
}

.main-body-content::-webkit-scrollbar,
.main-body-content ::-webkit-scrollbar,
.modal-content::-webkit-scrollbar,
.modal-content ::-webkit-scrollbar,
.offcanvas::-webkit-scrollbar,
.offcanvas ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.main-body-content::-webkit-scrollbar-track,
.main-body-content ::-webkit-scrollbar-track,
.modal-content::-webkit-scrollbar-track,
.modal-content ::-webkit-scrollbar-track,
.offcanvas::-webkit-scrollbar-track,
.offcanvas ::-webkit-scrollbar-track {
    background: transparent;
}

.main-body-content::-webkit-scrollbar-thumb,
.main-body-content ::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb,
.modal-content ::-webkit-scrollbar-thumb,
.offcanvas::-webkit-scrollbar-thumb,
.offcanvas ::-webkit-scrollbar-thumb {
    background-color: var(--ac-scrollbar);
    border: 3px solid transparent;
    border-radius: 8px;
    background-clip: padding-box;
}

.main-body-content::-webkit-scrollbar-thumb:hover,
.main-body-content ::-webkit-scrollbar-thumb:hover,
.modal-content::-webkit-scrollbar-thumb:hover,
.modal-content ::-webkit-scrollbar-thumb:hover,
.offcanvas::-webkit-scrollbar-thumb:hover,
.offcanvas ::-webkit-scrollbar-thumb:hover {
    background-color: var(--ac-scrollbar-hover);
}

html.dark-mode .light-surface {
    color: var(--ac-text);
}

html.dark-mode .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

html.dark-mode .light-surface .btn-close {
    filter: none;
}

html.dark-mode .main-body-content .accordion-button {
    background-color: var(--ac-surface-muted);
    color: var(--ac-text);
}

html.dark-mode .main-body-content .accordion-button::after {
    filter: invert(1) grayscale(100%) brightness(200%);
}

html.dark-mode .light-surface .accordion-button::after {
    filter: none;
}

html.dark-mode .main-body-content .table > :not(caption) > * > * {
    padding: 0.5rem 0.6rem;
}

html.dark-mode .main-body-content .table-responsive {
    padding: 0.6rem;
    border-radius: 6px;
    background-color: var(--ac-surface);
}

html.dark-mode .main-body-content .table-responsive > .table {
    margin-bottom: 0;
}

html.dark-mode .main-body-content .table-row-safe-time-missing {
    color: #14361a;
}