/* wwwroot/app.css */

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: #ffffff;
    border-bottom: 1px solid #dee2e6;
    /* 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: #ffffff;
}

    .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 */
.page-sidebar-offcanvas {
    background-color: #95bb9b;
}

    .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;
    }


.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: #436477 !important; }

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

.icon-common {
    color: #436477;
    font-size: 2rem; /* roughly display-6 */
}

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

.card-setup .card-title {
    color: #000;
}

.card-setup .card-text {
    color: #6c757d;
}

/* 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: #FFF;
    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: #495057;
}

.page-breadcrumb-link {
    color: #436477;
    font-weight: 600;
    text-decoration: none;
}

.page-breadcrumb-link:hover,
.page-breadcrumb-link:focus {
    color: #2f4755;
    text-decoration: none;
}

.page-breadcrumb-current {
    color: #212529;
    font-weight: 600;
}

.page-breadcrumb-separator {
    color: #6c757d;
}

.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;
}

/* ===== Date picker (flatpickr) theming — uses site green/blue palette ===== */

/* 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: #436477;
}

    a:hover,
    a:focus {
        color: #2f4755;
    }

.btn-link {
    color: #436477;
}

    .btn-link:hover,
    .btn-link:focus {
        color: #2f4755;
    }

.nav-link {
    color: #436477;
}

    .nav-link:hover,
    .nav-link:focus {
        color: #2f4755;
    }

.btn-check:focus + .btn,
.btn:focus {
    box-shadow: 0 0 0 0.25rem rgba(149, 187, 155, 0.35);
}

.btn-close:focus {
    box-shadow: 0 0 0 0.25rem rgba(149, 187, 155, 0.35);
}

.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: #436477;
    border-color: #436477;
}

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

.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: #436477;
    border-color: #436477;
}

.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
    color: #436477;
    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: #b0424d;
    border-color: #c05762;
}

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

.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: #d8636e;
    border-color: #d8636e;
}

.btn-outline-danger:disabled,
.btn-outline-danger.disabled {
    color: #b0424d;
    background-color: transparent;
}

.text-primary {
    color: #436477 !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: #000;
    background-color: #e6f0e8;
}

.dropdown-item.active,
.dropdown-item:active {
    color: #000;
    background-color: #95bb9b;
}

.list-group-item-action:active {
    color: #000;
    background-color: #d7e6da;
}

.list-group-item.active {
    color: #000;
    background-color: #95bb9b;
    border-color: #95bb9b;
}

.page-link {
    color: #436477;
}

    .page-link:hover {
        color: #2f4755;
    }

    .page-link:focus {
        color: #2f4755;
        box-shadow: 0 0 0 0.25rem rgba(149, 187, 155, 0.35);
    }

.page-item.active .page-link {
    color: #000;
    background-color: #95bb9b;
    border-color: #95bb9b;
}

.form-control:focus,
.form-select:focus {
    border-color: #95bb9b;
    box-shadow: 0 0 0 0.25rem rgba(149, 187, 155, 0.35);
}

.form-check-input:focus {
    border-color: #95bb9b;
    box-shadow: 0 0 0 0.25rem rgba(149, 187, 155, 0.35);
}

.form-check-input:checked {
    background-color: #95bb9b;
    border-color: #6f9475;
}

    .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: #95bb9b;
    border-color: #6f9475;
    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;
    }

.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;
}

html.dark-mode .top-row-header {
    background-color: #21262e;
}

    html.dark-mode .top-row-header .app-desktop-welcome {
        color: #e4e7ea;
    }

    html.dark-mode .top-row-header .navbar-toggler {
        color: #e4e7ea;
    }

    html.dark-mode .top-row-header button[aria-label="Recent Notifications"] {
        color: #e4e7ea !important;
    }

html.dark-mode .main-body-content {
    background-color: #21262e;
    color: #e4e7ea;
    color-scheme: dark;
}

html.dark-mode .main-body-content .light-surface {
    color-scheme: light;
}

    html.dark-mode .main-body-content h1,
    html.dark-mode .main-body-content h2,
    html.dark-mode .main-body-content h3,
    html.dark-mode .main-body-content h4,
    html.dark-mode .main-body-content h5,
    html.dark-mode .main-body-content h6,
    html.dark-mode .main-body-content p,
    html.dark-mode .main-body-content label,
    html.dark-mode .main-body-content li {
        color: #e4e7ea;
    }

    html.dark-mode .main-body-content .text-muted {
        color: #a6adb6 !important;
    }

    html.dark-mode .main-body-content .text-dark:not(.alert) {
        color: #e4e7ea !important;
    }

    /* Cards & app surface boxes */
    html.dark-mode .main-body-content .card,
    html.dark-mode .main-body-content .data-table-shell {
        background-color: #2b313a;
        color: #e4e7ea;
    }

    html.dark-mode .main-body-content .card-title,
    html.dark-mode .main-body-content .card-setup .card-title {
        color: #e4e7ea;
    }

    html.dark-mode .main-body-content .card-text,
    html.dark-mode .main-body-content .card-setup .card-text {
        color: #a6adb6;
    }

    html.dark-mode .main-body-content .card-header {
        background-color: #333a44;
        color: #e4e7ea;
        border-color: #3a424d;
    }

    html.dark-mode .main-body-content .card-header.bg-light {
        background-color: #333a44 !important;
    }

    html.dark-mode .main-body-content .light-surface,
    html.dark-mode .main-body-content .light-surface :is(h1, h2, h3, h4, h5, h6, p, label, li, small, strong, span, a, div, td, th, caption) {
        color: #212529;
    }

    html.dark-mode .main-body-content .light-surface .text-muted {
        color: #6c757d !important;
    }

    html.dark-mode .main-body-content .light-surface .card-header {
        background-color: #f8f9fa;
        color: #212529;
        border-color: #dee2e6;
    }

    html.dark-mode .main-body-content .light-surface .card-header.bg-light {
        background-color: #f8f9fa !important;
    }

    html.dark-mode .main-body-content .light-surface :is(.form-control, .form-select, .input-group-text) {
        background-color: #fff;
        color: #212529;
        border-color: #ced4da;
    }

    html.dark-mode .main-body-content .light-surface .form-check-input:not(:checked) {
        background-color: #fff;
        border-color: rgba(0, 0, 0, 0.25);
    }

    html.dark-mode .main-body-content .light-surface .table {
        --bs-table-bg: transparent;
        --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
        --bs-table-striped-color: #212529;
        --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
        --bs-table-hover-color: #212529;
        --bs-table-active-bg: rgba(0, 0, 0, 0.1);
        --bs-table-active-color: #212529;
        color: #212529;
        background-color: #fff;
        border-color: #dee2e6;
    }

        html.dark-mode .main-body-content .light-surface .table > :not(caption) > * > * {
            border-color: #dee2e6;
        }

    html.dark-mode .main-body-content .light-surface .table-light {
        --bs-table-bg: #f8f9fa;
        color: #000;
        border-color: #dfe0e1;
    }

    html.dark-mode .main-body-content .light-surface :is(.dataTables_wrapper, .dt-container) {
        color: #212529;
    }

    html.dark-mode .main-body-content .light-surface :is(.dt-container, .dataTables_wrapper) :is(select, input) {
        background-color: #fff;
        color: #212529;
        border-color: #ced4da;
    }

    html.dark-mode .main-body-content .light-surface .dt-paging .page-link,
    html.dark-mode .main-body-content .light-surface .dataTables_paginate .page-link {
        background-color: #fff;
        border-color: #dee2e6;
        color: #436477;
    }

    html.dark-mode .main-body-content .light-surface .dt-paging .page-item.active .page-link,
    html.dark-mode .main-body-content .light-surface .dataTables_paginate .page-item.active .page-link {
        background-color: #95bb9b;
        border-color: #95bb9b;
        color: #000;
    }

    html.dark-mode .main-body-content .light-surface .dt-paging .page-item.disabled .page-link,
    html.dark-mode .main-body-content .light-surface .dataTables_paginate .page-item.disabled .page-link {
        background-color: #fff;
        border-color: #dee2e6;
        color: #6c757d;
    }

    html.dark-mode .main-body-content .table {
        --bs-table-bg: transparent;
        --bs-table-accent-bg: transparent;
        --bs-table-striped-bg: rgba(255, 255, 255, 0.035);
        --bs-table-striped-color: inherit;
        --bs-table-active-bg: rgba(255, 255, 255, 0.08);
        --bs-table-active-color: inherit;
        --bs-table-hover-bg: rgba(255, 255, 255, 0.06);
        --bs-table-hover-color: inherit;
        color: #e4e7ea;
        background-color: #2b313a;
        border-color: #3a424d;
    }

        /* A touch more breathing room so the dark fill isn't tight to the text */
        html.dark-mode .main-body-content .table > :not(caption) > * > * {
            padding: 0.5rem 0.6rem;
            border-color: #3a424d;
        }

    html.dark-mode .main-body-content .table-responsive {
        background-color: #2b313a;
        padding: 0.6rem;
        border-radius: 6px;
    }

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

    html.dark-mode .main-body-content .table-light {
        --bs-table-bg: #333a44;
        color: #e4e7ea;
        border-color: #3a424d;
    }

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

    html.dark-mode .main-body-content table.dataTable.table-bordered > tbody > tr > td,
    html.dark-mode .main-body-content table.dataTable.table-bordered > thead > tr > th {
        border-color: #3a424d;
    }

    html.dark-mode .main-body-content .dataTables_wrapper,
    html.dark-mode .main-body-content .dt-container {
        color: #e4e7ea;
    }

    html.dark-mode .main-body-content .dt-container select,
    html.dark-mode .main-body-content .dt-container input,
    html.dark-mode .main-body-content .dataTables_wrapper select,
    html.dark-mode .main-body-content .dataTables_wrapper input {
        background-color: #2b313a;
        color: #e4e7ea;
        border-color: #58616b;
    }

    html.dark-mode .main-body-content .dt-container select.form-select,
    html.dark-mode .main-body-content .dataTables_wrapper select.form-select {
        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='%23e4e7ea' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    }

    html.dark-mode .main-body-content .dt-paging .page-link,
    html.dark-mode .main-body-content .dataTables_paginate .page-link {
        background-color: #2b313a;
        border-color: #3a424d;
        color: #e4e7ea;
    }

        html.dark-mode .main-body-content .dt-paging .page-link:hover,
        html.dark-mode .main-body-content .dataTables_paginate .page-link:hover {
            background-color: #3b4350;
            border-color: #3a424d;
            color: #fff;
        }

    html.dark-mode .main-body-content .dt-paging .page-item.active .page-link,
    html.dark-mode .main-body-content .dataTables_paginate .page-item.active .page-link {
        background-color: #95bb9b;
        border-color: #95bb9b;
        color: #000;
    }

    html.dark-mode .main-body-content .dt-paging .page-item.disabled .page-link,
    html.dark-mode .main-body-content .dataTables_paginate .page-item.disabled .page-link {
        background-color: #21262e;
        border-color: #3a424d;
        color: #6c757d;
    }

    /* Form controls */
    html.dark-mode .main-body-content .form-control,
    html.dark-mode .main-body-content .form-select,
    html.dark-mode .main-body-content .input-group-text {
        background-color: #2b313a;
        color: #e4e7ea;
        border-color: #58616b;
    }

    html.dark-mode .main-body-content .form-select {
        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='%23e4e7ea' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    }

    html.dark-mode .main-body-content .form-control:disabled,
    html.dark-mode .main-body-content .form-select:disabled {
        background-color: #21262e;
        border-color: #3a424d;
        color: #8a929c;
    }

        html.dark-mode .main-body-content .form-control::placeholder {
            color: #8a929c;
        }

        html.dark-mode .main-body-content .form-control.flatpickr-input[readonly]:not(:disabled) {
            background-color: #2b313a;
            color: #e4e7ea;
        }

    html.dark-mode .main-body-content .form-check-input:not(:checked) {
        background-color: #3a424d;
        border-color: #58616b;
    }

    /* List groups */
    html.dark-mode .main-body-content .list-group-item {
        background-color: #2b313a;
        color: #e4e7ea;
        border-color: #3a424d;
    }

    /* Dropdowns */
    html.dark-mode .main-body-content .dropdown-menu {
        background-color: #2b313a;
        color: #e4e7ea;
        border-color: #58616b;
    }

    html.dark-mode .main-body-content .dropdown-item {
        color: #e4e7ea;
    }

        html.dark-mode .main-body-content .dropdown-item:hover,
        html.dark-mode .main-body-content .dropdown-item:focus {
            background-color: #3b4350;
            color: #fff;
        }

    /* Breadcrumbs */
    html.dark-mode .main-body-content .page-breadcrumb {
        color: #a6adb6;
    }

    html.dark-mode .main-body-content .page-breadcrumb-current {
        color: #e4e7ea;
    }

    html.dark-mode .main-body-content .page-breadcrumb-link {
        color: #7fb3d5;
    }

html.dark-mode .modal-content {
    background-color: #2b313a;
    color: #e4e7ea;
    border-color: #3a424d;
    color-scheme: dark;
}

html.dark-mode .modal-header,
html.dark-mode .modal-footer {
    border-color: #3a424d;
}

html.dark-mode .modal .text-dark:not(.alert) {
    color: #e4e7ea !important;
}

html.dark-mode .modal .text-muted {
    color: #a6adb6 !important;
}

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

html.dark-mode .modal .form-control,
html.dark-mode .modal .form-select,
html.dark-mode .modal .input-group-text {
    background-color: #21262e;
    color: #e4e7ea;
    border-color: #58616b;
}

html.dark-mode .modal .form-select {
    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='%23e4e7ea' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

html.dark-mode .modal .form-control:disabled,
html.dark-mode .modal .form-select:disabled {
    background-color: #1a1e24;
    border-color: #3a424d;
    color: #8a929c;
}

    html.dark-mode .modal .form-control::placeholder {
        color: #8a929c;
    }

html.dark-mode .modal .list-group-item {
    background-color: #21262e;
    color: #e4e7ea;
    border-color: #3a424d;
}

    html.dark-mode .modal .list-group-item-action:hover,
    html.dark-mode .modal .list-group-item-action:focus {
        background-color: #3b4350;
        color: #fff;
    }

html.dark-mode .offcanvas {
    background-color: #2b313a;
    color: #e4e7ea;
}

html.dark-mode .offcanvas-title {
    color: #e4e7ea;
}

html.dark-mode .offcanvas-header,
html.dark-mode .offcanvas-footer {
    border-color: #3a424d;
}

html.dark-mode .offcanvas .text-dark:not(.alert) {
    color: #e4e7ea !important;
}

html.dark-mode .offcanvas .text-muted {
    color: #a6adb6 !important;
}

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

html.dark-mode .offcanvas .btn-link.text-secondary {
    color: #a6adb6 !important;
}

html.dark-mode .offcanvas .list-group-item {
    background-color: #2b313a;
    color: #e4e7ea;
    border-color: #3a424d;
}

    html.dark-mode .offcanvas .list-group-item-action:hover,
    html.dark-mode .offcanvas .list-group-item-action:focus {
        background-color: #3b4350;
        color: #fff;
    }

html.dark-mode .main-body-content,
html.dark-mode .modal-content,
html.dark-mode .offcanvas {
    scrollbar-width: thin;
    scrollbar-color: #4a525c transparent;
}

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

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

html.dark-mode .main-body-content::-webkit-scrollbar-thumb,
html.dark-mode .main-body-content ::-webkit-scrollbar-thumb,
html.dark-mode .modal-content::-webkit-scrollbar-thumb,
html.dark-mode .modal-content ::-webkit-scrollbar-thumb,
html.dark-mode .offcanvas::-webkit-scrollbar-thumb,
html.dark-mode .offcanvas ::-webkit-scrollbar-thumb {
    background-color: #4a525c;
    border-radius: 8px;
    border: 3px solid transparent;
    background-clip: padding-box;
}

html.dark-mode .main-body-content::-webkit-scrollbar-thumb:hover,
html.dark-mode .main-body-content ::-webkit-scrollbar-thumb:hover,
html.dark-mode .modal-content::-webkit-scrollbar-thumb:hover,
html.dark-mode .modal-content ::-webkit-scrollbar-thumb:hover,
html.dark-mode .offcanvas::-webkit-scrollbar-thumb:hover,
html.dark-mode .offcanvas ::-webkit-scrollbar-thumb:hover {
    background-color: #5a636e;
}

html.dark-mode :is(.main-body-content, .modal, .offcanvas) a:where(:not(.btn):not(.page-link):not(.dropdown-item):not(.nav-link)) {
    color: #7fb3d5;
}

html.dark-mode :is(.main-body-content, .modal, .offcanvas) a:where(:not(.btn):not(.page-link):not(.dropdown-item):not(.nav-link)):where(:hover, :focus) {
    color: #a9cde4;
}

html.dark-mode :is(.main-body-content, .modal, .offcanvas) .btn-link {
    color: #7fb3d5;
}

    html.dark-mode :is(.main-body-content, .modal, .offcanvas) .btn-link:hover,
    html.dark-mode :is(.main-body-content, .modal, .offcanvas) .btn-link:focus {
        color: #a9cde4;
    }

html.dark-mode :is(.main-body-content, .modal, .offcanvas) .text-primary {
    color: #7fb3d5 !important;
}

html.dark-mode :is(.main-body-content, .modal, .offcanvas) .btn-outline-primary {
    color: #7fb3d5;
    border-color: #5b87a0;
}

    html.dark-mode :is(.main-body-content, .modal, .offcanvas) .btn-outline-primary:hover,
    html.dark-mode :is(.main-body-content, .modal, .offcanvas) .btn-outline-primary:active,
    html.dark-mode :is(.main-body-content, .modal, .offcanvas) .btn-outline-primary.active {
        color: #fff;
        background-color: #436477;
        border-color: #436477;
    }

    html.dark-mode :is(.main-body-content, .modal, .offcanvas) .btn-outline-primary:disabled,
    html.dark-mode :is(.main-body-content, .modal, .offcanvas) .btn-outline-primary.disabled {
        color: #5b87a0;
        background-color: transparent;
    }

html.dark-mode :is(.main-body-content, .modal, .offcanvas) .btn-outline-secondary {
    color: #a6adb6;
    border-color: #8a929c;
}

    html.dark-mode :is(.main-body-content, .modal, .offcanvas) .btn-outline-secondary:hover,
    html.dark-mode :is(.main-body-content, .modal, .offcanvas) .btn-outline-secondary:active,
    html.dark-mode :is(.main-body-content, .modal, .offcanvas) .btn-outline-secondary.active {
        color: #fff;
        background-color: #6c757d;
        border-color: #6c757d;
    }

    html.dark-mode :is(.main-body-content, .modal, .offcanvas) .btn-outline-secondary:disabled,
    html.dark-mode :is(.main-body-content, .modal, .offcanvas) .btn-outline-secondary.disabled {
        color: #8a929c;
        background-color: transparent;
    }

html.dark-mode :is(.main-body-content, .modal, .offcanvas) .btn-outline-danger {
    color: #e08d96;
    border-color: #b95560;
}

    html.dark-mode :is(.main-body-content, .modal, .offcanvas) .btn-outline-danger:hover,
    html.dark-mode :is(.main-body-content, .modal, .offcanvas) .btn-outline-danger:active,
    html.dark-mode :is(.main-body-content, .modal, .offcanvas) .btn-outline-danger.active {
        color: #000;
        background-color: #d8636e;
        border-color: #d8636e;
    }

    html.dark-mode :is(.main-body-content, .modal, .offcanvas) .btn-outline-danger:disabled,
    html.dark-mode :is(.main-body-content, .modal, .offcanvas) .btn-outline-danger.disabled {
        color: #e08d96;
        background-color: transparent;
    }

html.dark-mode :is(.main-body-content, .modal, .offcanvas) :is(.form-control, .form-select):focus {
    border-color: #95bb9b;
    box-shadow: 0 0 0 0.25rem rgba(149, 187, 155, 0.35);
}

html.dark-mode :is(.main-body-content, .modal, .offcanvas) .form-check-input:focus {
    border-color: #95bb9b;
    box-shadow: 0 0 0 0.25rem rgba(149, 187, 155, 0.35);
}

html.dark-mode :is(.main-body-content, .modal, .offcanvas) .form-switch .form-check-input:not(:checked):not(: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='%23a6adb6'/%3e%3c/svg%3e");
}

html.dark-mode .main-body-content .nav-tabs {
    border-bottom-color: #3a424d;
}

    html.dark-mode .main-body-content .nav-tabs .nav-link {
        color: #7fb3d5;
    }

        html.dark-mode .main-body-content .nav-tabs .nav-link:hover,
        html.dark-mode .main-body-content .nav-tabs .nav-link:focus {
            color: #a9cde4;
            border-color: #3a424d;
        }

        html.dark-mode .main-body-content .nav-tabs .nav-link.active {
            color: #e4e7ea;
            background-color: #21262e;
            border-color: #3a424d #3a424d #21262e;
        }

html.dark-mode .main-body-content .dropdown-item:active,
html.dark-mode .main-body-content .dropdown-item.active {
    color: #000;
    background-color: #95bb9b;
}

html.dark-mode :is(.main-body-content, .modal, .offcanvas) .list-group-item.active {
    color: #000;
    background-color: #95bb9b;
    border-color: #95bb9b;
}

html.dark-mode .main-body-content .light-surface .btn-outline-secondary:not(:hover):not(:active):not(.active) {
    color: #6c757d;
    border-color: #6c757d;
    background-color: transparent;
}

html.dark-mode .main-body-content .light-surface .btn-outline-primary:not(:hover):not(:active):not(.active) {
    color: #436477;
    border-color: #436477;
    background-color: transparent;
}

html.dark-mode .main-body-content .light-surface .btn-outline-danger:not(:hover):not(:active):not(.active) {
    color: #b0424d;
    border-color: #c05762;
    background-color: transparent;
}

html.dark-mode .main-body-content .light-surface .btn-link {
    color: #436477;
}

    html.dark-mode .main-body-content .light-surface .btn-link:hover,
    html.dark-mode .main-body-content .light-surface .btn-link:focus {
        color: #2f4755;
    }

html.dark-mode .main-body-content .light-surface .text-primary {
    color: #436477 !important;
}

html.dark-mode :is(.main-body-content, .modal, .offcanvas) select::picker(select) {
    background-color: #2b313a;
    color: #e4e7ea;
    border-color: #58616b;
}

html.dark-mode :is(.main-body-content, .modal, .offcanvas) select option:hover,
html.dark-mode :is(.main-body-content, .modal, .offcanvas) select option:focus {
    background-color: #3b4350;
    color: #fff;
}

html.dark-mode :is(.main-body-content, .modal, .offcanvas) select option:checked {
    background-color: #95bb9b;
    color: #000;
}

html.dark-mode .main-body-content .light-surface select::picker(select) {
    background-color: #fff;
    color: #212529;
    border-color: #ced4da;
}

html.dark-mode .main-body-content .light-surface select option:hover,
html.dark-mode .main-body-content .light-surface select option:focus {
    background-color: #e6f0e8;
    color: #000;
}

html.dark-mode .main-body-content .light-surface select option:checked {
    background-color: #95bb9b;
    color: #000;
}