/* ============================================
   NSUF PUBLIC SITE - THEME STYLESHEET
   Organized, documented, maintainable
   ============================================ */

/* ============================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   Light mode defaults, dark mode overrides
   ============================================ */

@media (prefers-color-scheme: light) {
    :root {
        /* Base Colors */
        --primary: #fff;
        --secondary: #f9f9f9;
        --light: #fff;
        --dark: #222;
        /* Text & Links */
        --font: #666;
        --light-font: #ddd;
        --dark-font: #666;
        --link: #666;
        --hover: #D89328;
        --placeholder: #c0c0c0;
        /* Brand Colors */
        --accent: #DB792C;
        /* Backgrounds */
        --highlight: #fcf8e4;
        --highlight-hover: #e6e6e5;
        --well: #f5f5f5;
        --sidebar: #f6f6f6;
        /* Borders */
        --border: #cccccc;
        /* Form Elements */
        --form: #fff;
        --form-border: #cccccc;
        --addon: #eeeeee;
        --addon-border: #cccccc;
        /* Alert/Info Boxes */
        --info: #d9edf6;
        --warning: #fcf8e4;
        --warning-hover: #e6e6e5;
        /* Cards */
        --card-heading: #f5f5f5;
        --card-heading-border: #dddddd;
        --card-border: #dedede;
        /* List Items */
        --list-item: #ffffff;
        --list-item-border: #dedcdc;
        --list-item-hover: #f5f5f5;
        --list-item-parent: #fcf8e4;
        --list-item-parent-hover: #f5f5f5;
        /* Navigation */
        --sub-menu-bg: #f5f5f5;
        --sub-menu-link: #666666;
        --sub-menu-hover: #DB792C;
        /* Tabs */
        --nav-tab: #ffffff;
        --nav-tab-active: #ffffff;
        --nav-tab-hover: #eeeeee;
        --nav-tab-border: #dddddd;
        --tab-pane: #c0c0c0;
        /* Breadcrumbs */
        --breadcrumb: #f5f5f5;
        --breadcrumb-active: #747774;
        /* Modals */
        --modal-body: #ffffff;
        /* Project Specific */
        --project-header: #EEEEEE;
        --project-footer: #EEEEEE;
        /* Misc */
        --invert: 0%;
        --boxed-fade: #dddddd;
        --separator-bar: #009bfc;
        --CAES-bg: #fff;
        --inactive-item: #666666;
        --deleted-item: #666666;
        /* Chosen Select Highlighting */
        --chosen-search-highlight-color: #ffffff;
        --chosen-search-highlight-bg: #dc7b38;
        /* Bootstrap Overrides */
        --badge-primary: #0d6efd;
        /* Staff Backgrounds */
        --staff-bg1: #f9f9f9;
        --staff-bg2: #dedcdc;
        /* Table Highlight States - Light Mode */
        --table-success-bg: #d1e7dd;
        --table-success-text: #0f5132;
        --table-success-link: #0a3622;
        --table-success-link-hover: #052817;
        --table-success-hover-bg: #c3e0cf;
        --table-warning-bg: #fff3cd;
        --table-warning-text: #664d03;
        --table-warning-link: #4d3a02;
        --table-warning-link-hover: #332702;
        --table-warning-hover-bg: #ffe69c;
        --table-danger-bg: #f8d7da;
        --table-danger-text: #842029;
        --table-danger-link: #58151c;
        --table-danger-link-hover: #3d0e13;
        --table-danger-hover-bg: #f1aeb5;
        --table-info-bg: #cff4fc;
        --table-info-text: #055160;
        --table-info-link: #033b46;
        --table-info-link-hover: #022830;
        --table-info-hover-bg: #9eeaf9;
        /* NFML Cart Colors */
        --cart-bg: #f8f9fa;
        --cart-border: #6c757d;
        --cart-drag-over-bg: #d4edda;
        --cart-drag-over-border: #28a745;
        --cart-item-bg: #ffffff;
        --cart-item-border: #dee2e6;
        --cart-item-hover-shadow: rgba(0, 0, 0, 0.1);
        --cart-header-border: #dee2e6;
        --cart-hint-text: #6c757d;
        --sample-in-cart-bg: #e7f5ff;
        --sample-in-cart-border: #28a745;
        --drag-handle-color: #6c757d;
        --delete-zone-bg: #fff3cd;
        --delete-zone-border: #ffc107;
        --delete-zone-hover-bg: #ffe69c;
        --delete-zone-hover-border: #dc3545;
        /* Bootstrap standard semantic colors (badges, alerts) -- same in both modes */
        --bs-secondary: #6c757d;
        --bs-warning: #ffc107;
        --bs-success: #28a745;
        --bs-danger: #dc3545;
        --bs-info: #17a2b8;
        /* Status text (mode-aware -- darker in light mode for contrast on white) */
        --text-success-color: #28a745;
        --text-danger-color: #dc3545;
        /* Cart remove icon (no dark override in source -- preserved as same) */
        --remove-cart-color: #dc3545;
        --remove-cart-hover: #c82333;
        /* Delete drop-zone icon (Bootstrap warning text shade) */
        --delete-zone-icon: #856404;
        /* Cart drag-over glow */
        --cart-drag-shadow: rgba(40, 167, 69, 0.3);
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Base Colors */
        --primary: #2b2b2b;
        --secondary: #333333;
        --light: #fff;
        --dark: #222;
        /* Text & Links */
        --font: #dddddd;
        --dark-font: #666;
        --light-font: #666;
        --link: #DB792C;
        --hover: #D89328;
        --placeholder: #666666;
        /* Brand Colors */
        --accent: #DB792C;
        /* Backgrounds */
        --highlight: #4a4a4a;
        --highlight-hover: #747474;
        --well: #333333;
        --sidebar: #222222;
        /* Borders */
        --border: #666666;
        /* Form Elements */
        --form: #222;
        --form-border: #000000;
        --addon: #2b2b2b;
        --addon-border: #000;
        /* Alert/Info Boxes */
        --info: #374c56;
        --warning: #2b2b2b;
        --warning-hover: #333333;
        /* Cards */
        --card-heading: #333333;
        --card-heading-border: #000000;
        --card-border: #000000;
        /* List Items */
        --list-item: #4a4a4a;
        --list-item-border: #cccccc;
        --list-item-hover: #747474;
        --list-item-parent: #6b6b6b;
        --list-item-parent-hover: #222;
        /* Navigation */
        --sub-menu-bg: #515151;
        --sub-menu-link: #f2f2f2;
        --sub-menu-hover: #DB792C;
        /* Tabs */
        --nav-tab: #333333;
        --nav-tab-active: #808080;
        --nav-tab-hover: #666666;
        --nav-tab-border: #111111;
        --tab-pane: #000;
        /* Breadcrumbs */
        --breadcrumb: #666666;
        --breadcrumb-active: #d9d9d9;
        /* Modals */
        --modal-body: #4a4a4a;
        /* Project Specific */
        --project-header: #4a4a4a;
        --project-footer: #4a4a4a;
        /* Misc */
        --invert: 100%;
        --boxed-fade: #222;
        --separator-bar: #07325a;
        --CAES-bg: #555555;
        --inactive-item: #666666;
        --deleted-item: #666666;
        /* Chosen Select Highlighting */
        --chosen-search-highlight-color: #ffffff;
        --chosen-search-highlight-bg: #dc7b38;
        /* Bootstrap Overrides */
        --badge-primary: #0d6efd;
        /* Staff Backgrounds */
        --staff-bg1: #2b2b2b;
        --staff-bg2: #333333;
        /* Table Highlight States - Dark Mode */
        --table-success-bg: #1a4731;
        --table-success-text: #a3cfbb;
        --table-success-link: #75f4c1;
        --table-success-link-hover: #9ff7d4;
        --table-success-hover-bg: #235a3f;
        --table-warning-bg: #4d3a00;
        --table-warning-text: #ffeaa7;
        --table-warning-link: #ffd93d;
        --table-warning-link-hover: #ffe47a;
        --table-warning-hover-bg: #664d03;
        --table-danger-bg: #5a1a1a;
        --table-danger-text: #f8b4b4;
        --table-danger-link: #ff6b6b;
        --table-danger-link-hover: #ff8787;
        --table-danger-hover-bg: #721f1f;
        --table-info-bg: #0c4a5e;
        --table-info-text: #a3e4f7;
        --table-info-link: #6dd5ed;
        --table-info-link-hover: #8de0f3;
        --table-info-hover-bg: #0f5a73;
        /* NFML Cart Colors - Dark Mode */
        --cart-bg: #2b2b2b;
        --cart-border: #666666;
        --cart-drag-over-bg: #1a4731;
        --cart-drag-over-border: #28a745;
        --cart-item-bg: #333333;
        --cart-item-border: #555555;
        --cart-item-hover-shadow: rgba(255, 255, 255, 0.1);
        --cart-header-border: #555555;
        --cart-hint-text: #999999;
        --sample-in-cart-bg: #2c3e50;
        --sample-in-cart-border: #28a745;
        --drag-handle-color: #999999;
        --delete-zone-bg: #4d3a00;
        --delete-zone-border: #ffc107;
        --delete-zone-hover-bg: #664d03;
        --delete-zone-hover-border: #dc3545;
        /* Bootstrap standard semantic colors (badges, alerts) -- same in both modes */
        --bs-secondary: #6c757d;
        --bs-warning: #ffc107;
        --bs-success: #28a745;
        --bs-danger: #dc3545;
        --bs-info: #17a2b8;
        /* Status text (lightened for legibility on dark backgrounds) */
        --text-success-color: #5cb85c;
        --text-danger-color: #ff6b6b;
        /* Cart remove icon */
        --remove-cart-color: #dc3545;
        --remove-cart-hover: #c82333;
        /* Delete drop-zone icon */
        --delete-zone-icon: #856404;
        /* Cart drag-over glow */
        --cart-drag-shadow: rgba(40, 167, 69, 0.3);
    }
}

/* ============================================
   BASE LAYOUT & STRUCTURE
   ============================================ */

body {
    color: var(--font);
    background: var(--primary);
}

body:not(.dynamic-body) .container:not(.transparent) {
    color: var(--font);
    background: var(--secondary);
}

.wrap-alt {
    background: var(--secondary) !important;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

#page-content h1,
#page-content h2,
#page-content h3 {
    color: var(--font) !important;
}

legend {
    color: var(--font) !important;
}

#page-content li span {
    color: var(--font) !important;
}

h6.admin {
    color: var(--dark-font);
}

/* Text Utilities */
small,
.text-muted {
    color: var(--font) !important;
    opacity: 0.7;
}

/* ============================================
   LINKS
   ============================================ */

/* Base link styles - underlined by default except for specific components */
a:not(.btn, .no-link, .chosen-single, .list-group-item) {
    text-decoration: underline !important;
}

a.note-dropdown-item,
a.btn,
a.no-link,
a.chosen-single,
a.list-group-item,
ul.dropdown-menu > li > a,
a.nav-link {
    text-decoration: none !important;
}

body a,
.card-body a:not(.btn-danger):not(.btn-success) {
    color: var(--link);
}

    body a:hover,
    body a:focus,
    .card-body a:hover:not(.btn-danger):not(.btn-success),
    .card-body a:focus:not(.btn-danger):not(.btn-success) {
        color: var(--hover);
    }

#page-content a {
    background: var(--primary) !important;
}

    #page-content a.btn {
        color: var(--light) !important;
        background: var(--accent) !important;
    }

        #page-content a.btn span {
            color: var(--light) !important;
            background: var(--accent) !important;
        }

.breadcrumb a:hover {
    color: antiquewhite !important;
}

/* Home Page Specific Links */
.showme-content h3 a {
    color: var(--font);
}

    .showme-content h3 a:hover {
        color: var(--hover);
    }

a.nav-link {
    color: var(--link) !important;
}

/* ============================================
   CARDS
   ============================================ */

.card,
.bg-light {
    color: var(--font) !important;
    background: var(--secondary) !important;
    border-color: var(--card-border) !important;
}

#cardbody,
.card-body,
.popover-content {
    background: var(--primary) !important;
    color: var(--font) !important;
}

.card-heading,
.card-header,
.popover-title {
    background: var(--card-heading) !important;
    border-color: var(--card-heading-border) !important;
    color: var(--font) !important;
}
/* Nested text inside card headers needs the same --font color. Without this,
   .dynamic-content p { color: var(--dark) } repaints any <p> inside a header
   to #222 -- which is unreadable against the dark-grey header background in
   dark mode (the bug originally reported on /Home/Projects). */
.card-heading p,
.card-heading strong,
.card-header p,
.card-header strong,
.popover-title p,
.popover-title strong {
    color: var(--font) !important;
}

.card-footer {
    background: var(--secondary);
    color: var(--font) !important;
    border-top: var(--primary);
}

.card-default {
    background: var(--primary) !important;
}

.popover {
    background: var(--card-heading) !important;
    border-color: var(--card-heading-border) !important;
}

/* ============================================
   ALERTS
   ============================================ */

.alert-info {
    background: var(--info) !important;
    color: var(--font) !important;
}

.alert-warning {
    background: var(--warning) !important;
    color: var(--font) !important;
}

/* ============================================
   FORMS
   ============================================ */

.form-control,
.form-select,
.bootstrap-tagsinput,
.chosen-select,
.chosen-single,
.chosen-choices,
.chosen-drop,
.chosen-results,
.tt-menu,
.tt-suggestion,
.tt-selectable,
input,
ul.formbuilder-autocomplete-list > li,
.input-control,
button.dt-button,
.ui-menu,
.ui-menu-item,
.ui-menu-item-wrapper,
input[role="combobox"],
div.ts-control {
    background-color: var(--form) !important;
    color: var(--font) !important;
    border-color: var(--form-border) !important;
}

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

    .input-control:hover {
        background-color: var(--nav-tab-hover) !important;
    }

.input-group-text {
    background: var(--addon) !important;
    border-color: var(--addon-border) !important;
    color: var(--font) !important;
}

/* Form Builder Specific */
.form-elements,
.form-elements > div,
.field-options,
.field-options > div,
.form-wrap.form-builder .frmb .sortable-options > li {
    background-color: var(--form) !important;
    color: var(--font) !important;
    border-color: var(--form-border) !important;
    background: var(--secondary) !important;
}

.sortable-options {
    border-color: var(--form-border) !important;
}

li.form-field,
label.field-label {
    background-color: var(--secondary) !important;
    color: var(--font) !important;
}

.rendered-form span {
    color: var(--font) !important;
}

/* Summernote / WYSIWYG Editor */
div.note-editable,
div.note-resizebar {
    background-color: var(--form) !important;
    color: var(--font) !important;
}

.note-palette-title,
.note-color-reset,
.note-color-palette {
    color: var(--dark) !important;
}

.note-editor .dropdown-toggle::after {
    all: unset;
}

.note-editor .note-dropdown-menu {
    box-sizing: content-box;
}

.note-editor .note-modal-footer {
    box-sizing: content-box;
}

div.dropdown-list-styles > li {
    list-style-type: none !important;
}

/* Tom Select Specific */
.ts-dropdown-content,
.ts-dropdown-content > div.create {
    background: var(--sub-menu-bg) !important;
    color: var(--sub-menu-hover) !important;
}

    .ts-dropdown-content > div.option > span.highlight {
        background: var(--sub-menu-hover) !important;
        color: var(--light) !important;
    }

    .ts-dropdown-content > div.active {
        background: var(--primary) !important;
        color: var(--font) !important;
    }

/* Bootstrap Tagsinput */
.bootstrap-tagsinput .tag {
    color: var(--font) !important;
}

/* Chosen Select */
ul.chosen-results > li.active-result em,
ul.chosen-results > li.no-results {
    background-color: var(--chosen-search-highlight-bg) !important;
    color: var(--chosen-search-highlight-color) !important;
}

/* List Box */
.list-box:disabled {
    color: var(--dark) !important;
}

/* Mentions Input */
.mentions-input-box {
    background: var(--card-border) !important;
}

    .mentions-input-box .mentions-autocomplete-list {
        background: var(--secondary) !important;
        border: var(--card-border) !important;
    }

        .mentions-input-box .mentions-autocomplete-list li {
            background-color: var(--primary) !important;
            border-bottom: 1px solid var(--card-border) !important;
        }

            .mentions-input-box .mentions-autocomplete-list li:hover,
            .mentions-input-box .mentions-autocomplete-list li.active {
                background: var(--sub-menu-bg) !important;
                color: var(--sub-menu-hover) !important;
            }

            .mentions-input-box .mentions-autocomplete-list li b {
                background: var(--sub-menu-hover) !important;
                color: var(--light) !important;
            }

/* ============================================
   BUTTONS
   ============================================ */

.btn-primary,
.btn-success,
.btn-danger,
.btn-default,
.btn-secondary {
    color: var(--light) !important;
}

.btn-warning {
    background: var(--accent) !important;
    color: var(--light) !important;
}

    .btn-warning:hover {
        background: var(--hover) !important;
    }

.btn-danger,
.btn-success {
    color: var(--light) !important;
}

/* ============================================
   BADGES
   ============================================ */

.badge-primary {
    background-color: var(--badge-primary) !important;
}

.text-bg-warning {
    color: var(--light) !important;
    background-color: var(--accent) !important;
}

@media (prefers-color-scheme: dark) {
    .badge.bg-secondary {
        background-color: var(--bs-secondary) !important;
        color: var(--light) !important;
    }

    .badge.bg-warning {
        background-color: var(--bs-warning) !important;
        color: var(--dark) !important;
    }

    .badge.bg-success {
        background-color: var(--bs-success) !important;
        color: var(--light) !important;
    }

    .badge.bg-primary {
        background-color: var(--badge-primary) !important;
        color: var(--light) !important;
    }

    .badge.bg-danger {
        background-color: var(--bs-danger) !important;
        color: var(--light) !important;
    }

    .badge.bg-info {
        background-color: var(--bs-info) !important;
        color: var(--light) !important;
    }
}

/* ============================================
   TEXT UTILITY CLASSES
   ============================================ */

.text-warning {
    color: var(--accent) !important;
}

.text-success {
    color: var(--text-success-color) !important;
}

.text-danger {
    color: var(--text-danger-color) !important;
}

.card-body .text-success {
    color: var(--text-success-color) !important;
}

.card-body .text-danger {
    color: var(--text-danger-color) !important;
}

/* ============================================
   TABLES
   ============================================ */

/* Table Rows - Base Striping */ tr.odd, tr:nth-child(even) {
    color: var(--font) !important;
    background: var(--secondary) !important;
}

tr.even, th.sorting, tr:nth-child(odd) {
    color: var(--font) !important;
    background: var(--primary) !important;
}
    /* Info Rows */

    tr.info > td, tr.even.info > td, tr.odd.info > td {
        color: var(--light-font) !important;
        background-color: var(--info) !important;
    }
/* DataTables Specific */

table.dataTable > thead > th:nth-child(odd), table.dataTable > thead > tr:nth-child(odd), table.dataTable > tbody > tr:nth-child(odd), table.table.dataTable > :not(caption) > * > *, .table > :not(caption) > * > * {
    color: var(--font) !important;
    background: var(--primary) !important;
}

table.dataTable > thead > th:nth-child(even), table.dataTable > thead > tr:nth-child(even), table.dataTable > tbody > tr:nth-child(even) {
    color: var(--font) !important;
    background: var(--secondary) !important;
}
/* Table Borders */

.table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > thead > tr > th, .table-bordered {
    border-color: var(--border) !important;
}
/* ============================================ 
    Table Highlight States Uses CSS variables for easy theme management 
============================================ */ 
/* SUCCESS (Green) - Selected/Confirmed Items */

.table > tbody > tr.table-success, .table-striped > tbody > tr.table-success {
    background-color: var(--table-success-bg) !important;
    color: var(--table-success-text) !important;
}

    .table > tbody > tr.table-success > *, .table-striped > tbody > tr.table-success > * {
        background-color: var(--table-success-bg) !important;
        color: var(--table-success-text) !important;
    }

.table-hover > tbody > tr.table-success:hover, .table-hover > tbody > tr.table-success:hover > * {
    background-color: var(--table-success-hover-bg) !important;
    color: var(--table-success-text) !important;
}

.table > tbody > tr.table-success a:not(.btn) {
    color: var(--table-success-link) !important;
    text-decoration: underline;
}

    .table > tbody > tr.table-success a:not(.btn):hover {
        color: var(--table-success-link-hover) !important;
    }
/* WARNING (Yellow) - Cautionary Items */

.table > tbody > tr.table-warning, .table-striped > tbody > tr.table-warning {
    background-color: var(--table-warning-bg) !important;
    color: var(--table-warning-text) !important;
}

    .table > tbody > tr.table-warning > *, .table-striped > tbody > tr.table-warning > * {
        background-color: var(--table-warning-bg) !important;
        color: var(--table-warning-text) !important;
    }

.table-hover > tbody > tr.table-warning:hover, .table-hover > tbody > tr.table-warning:hover > * {
    background-color: var(--table-warning-hover-bg) !important;
    color: var(--table-warning-text) !important;
}

.table > tbody > tr.table-warning a:not(.btn) {
    color: var(--table-warning-link) !important;
}

    .table > tbody > tr.table-warning a:not(.btn):hover {
        color: var(--table-warning-link-hover) !important;
    }
/* DANGER (Red) - Error/Critical Items */

.table > tbody > tr.table-danger, .table-striped > tbody > tr.table-danger {
    background-color: var(--table-danger-bg) !important;
    color: var(--table-danger-text) !important;
}

    .table > tbody > tr.table-danger > *, .table-striped > tbody > tr.table-danger > * {
        background-color: var(--table-danger-bg) !important;
        color: var(--table-danger-text) !important;
    }

.table-hover > tbody > tr.table-danger:hover, .table-hover > tbody > tr.table-danger:hover > * {
    background-color: var(--table-danger-hover-bg) !important;
    color: var(--table-danger-text) !important;
}

.table > tbody > tr.table-danger a:not(.btn) {
    color: var(--table-danger-link) !important;
}

    .table > tbody > tr.table-danger a:not(.btn):hover {
        color: var(--table-danger-link-hover) !important;
    }
/* INFO (Blue) - Informational Items */

.table > tbody > tr.table-info, .table-striped > tbody > tr.table-info {
    background-color: var(--table-info-bg) !important;
    color: var(--table-info-text) !important;
}

    .table > tbody > tr.table-info > *, .table-striped > tbody > tr.table-info > * {
        background-color: var(--table-info-bg) !important;
        color: var(--table-info-text) !important;
    }

.table-hover > tbody > tr.table-info:hover, .table-hover > tbody > tr.table-info:hover > * {
    background-color: var(--table-info-hover-bg) !important;
    color: var(--table-info-text) !important;
}

.table > tbody > tr.table-info a:not(.btn) {
    color: var(--table-info-link) !important;
}

    .table > tbody > tr.table-info a:not(.btn):hover {
        color: var(--table-info-link-hover) !important;
    }
/* DataTables Info */

.dataTables_info {
    color: var(--font) !important;
}

/* ============================================
   PAGINATION
   ============================================ */

.page-item .page-link {
    color: var(--font) !important;
    background-color: var(--secondary) !important;
    border-color: var(--primary) !important;
}

.page-item.active .page-link {
    color: var(--light) !important;
    background: var(--accent) !important;
    border-color: var(--addon-border) !important;
}

/* ============================================
   LIST GROUPS
   ============================================ */

.list-group-item {
    background: var(--list-item) !important;
    color: var(--font) !important;
    border-color: var(--list-item-border) !important;
}

    .list-group-item:hover {
        background: var(--list-item-hover) !important;
        color: var(--font) !important;
    }

.list-group-item-heading {
    color: var(--font) !important;
}

.list-group-item.parent-item,
.list-group-item.new-item {
    background: var(--list-item-parent) !important;
    color: var(--font) !important;
}

    .list-group-item.parent-item:hover,
    .list-group-item.new-item:hover {
        background: var(--list-item-parent-hover) !important;
        color: var(--font) !important;
    }

/* ============================================
   NAVIGATION
   ============================================ */

.sub-menu {
    background: var(--sub-menu-bg) !important;
}

    .sub-menu i {
        color: var(--sub-menu-bg) !important;
    }

.sub-menu-item a {
    color: var(--font) !important;
}

    .sub-menu-item a:hover {
        color: var(--sub-menu-hover) !important;
    }

/* ============================================
   TABS
   ============================================ */

div.tab-content {
    border-radius: 0px 5px 5px 5px !important;
}

div.select-tab {
    background: var(--primary) !important;
    border: none !important;
    color: var(--font) !important;
}

div.tab-pane {
    color: var(--tab-pane) !important;
}

    div.tab-pane > div > div > span {
        color: var(--font) !important;
    }

ul.nav-tabs {
    background: var(--primary) !important;
    border: none !important;
}

.nav-tabs > li.nav-item > a.active,
.nav-tabs > li.nav-item > a.active:focus {
    color: var(--font) !important;
    background-color: var(--nav-tab-hover) !important;
    border-top: 1px solid var(--nav-tab-border) !important;
    border-left: 1px solid var(--nav-tab-border) !important;
    border-right: 1px solid var(--nav-tab-border) !important;
    border-bottom: transparent !important;
}

.select-tab-content {
    background-color: var(--nav-tab-hover) !important;
    border-top: transparent !important;
    border-left: 1px solid var(--nav-tab-border) !important;
    border-right: 1px solid var(--nav-tab-border) !important;
    border-bottom: 1px solid var(--nav-tab-border) !important;
}

.nav > li > a:hover {
    background-color: var(--nav-tab-hover) !important;
    border: 1px solid transparent !important;
}

/* ============================================
   BREADCRUMBS
   ============================================ */

.breadcrumb {
    background: var(--breadcrumb) !important;
    color: var(--font) !important;
    border-color: var(--list-item-border) !important;
}

ol.breadcrumb > li.active {
    color: var(--breadcrumb-active) !important;
}

/* ============================================
   MODALS
   ============================================ */

.modal-header {
    background: var(--secondary);
    color: var(--font) !important;
}

.modal-body {
    background: var(--modal-body);
    color: var(--font) !important;
}

.modal-footer {
    background: var(--secondary);
    color: var(--font) !important;
}

/* ============================================
   ACCORDIONS
   ============================================ */

.accordion {
    background: var(--well) !important;
    color: var(--font) !important;
}

.accordion-header {
    background: var(--well) !important;
}

.accordion-item {
    background-color: var(--dark) !important;
    border: none !important;
}

.accordion-body {
    background: var(--well) !important;
    color: var(--font) !important;
}

.accordion-button {
    background: var(--list-item-hover) !important;
    color: var(--font) !important;
}

    .accordion-button:not(.collapsed) {
        background: var(--accent) !important;
        color: var(--light) !important;
    }

/* ============================================
   WELLS & JUMBOTRONS
   ============================================ */

.well,
.well h3 {
    background: var(--well) !important;
    color: var(--font) !important;
}

/* ============================================
   IMAGES & ICONS
   ============================================ */

img.nsuf-logo {
    filter: invert(var(--invert)) !important;
}

.boxed {
    box-shadow: 0px 0px 5px 3px var(--boxed-fade);
}

/* ============================================
   HOME PAGE SPECIFIC ELEMENTS
   ============================================ */

.counter,
h4.counter_title {
    color: var(--font);
}

.showmelist h2,
.showmelist .container p {
    color: var(--font);
}

.partners h2,
.partners .container p {
    color: var(--font);
}

/* Page headings inside dynamic chrome render in Cherenkov Blue in light
   mode (matches INL's heading treatment). Dark mode falls through to the
   existing var(--font) rule above -> #dddddd (white-ish on dark surfaces).
   :where() keeps specificity at 0,0,0,1 so any more-specific rule
   (e.g. .staff-list h2 { color: white } inside the navy band) still wins. */
@media (prefers-color-scheme: light) {
    .dynamic-content :where(h1, h2, h3, h4) {
        color: #07519E;
    }
}

/* Jumbotron heading sits on top of a photo background with a dark text-shadow,
   so it needs to render white in both modes -- the Cherenkov-blue heading rule
   above (light mode) and the var(--font) rule (dark mode) would otherwise
   paint it brand-blue or light-grey, both of which lose contrast against the
   image. Higher specificity than the :where() rule (0,0,2,1 vs 0,0,0,1) wins
   without needing !important. */
.dynamic-content .jumbotron h1,
.dynamic-content .jumbotron h2,
.dynamic-content .jumbotron h3,
.dynamic-content .jumbotron h4 {
    color: #ffffff;
}

.slick-list {
    background: var(--light);
}

.researchers .container h2,
.researchers .container p {
    color: var(--font);
    background: var(--primary);
}

.work-list .container h2,
.work-list .container p {
    color: var(--light);
}

/* ============================================
   PROJECT SPECIFIC ELEMENTS
   ============================================ */

.project-header {
    background: var(--project-header) !important;
}

.project-footer {
    background: var(--project-footer) !important;
}

dd > div.pull-left {
    background: var(--primary) !important;
}

div.logo-shadow > dl > dt,
div.logo-shadow > dl > dd {
    color: var(--dark) !important;
}

div.private {
    color: var(--font);
}

#Export,
#References {
    background: var(--addon) !important;
}

/* ============================================
   SEPARATOR BARS
   ============================================ */

.top-separator-bar {
    border-top-style: solid;
    border-top-width: 15px;
    border-top-color: var(--separator-bar) !important;
}

.bottom-separator-bar {
    border-bottom-style: solid;
    border-bottom-width: 15px;
    border-bottom-color: var(--separator-bar) !important;
}

/* ============================================
   STAFF & WORK SECTIONS
   ============================================ */

.work-footer,
.staff-list,
.work-list {
    background-color: var(--CAES-bg);
    background-blend-mode: multiply;
}

.staff-row h2 {
    color: var(--font) !important;
}

.staff-bg1 {
    background-color: var(--staff-bg1) !important;
}

.staff-bg2 {
    background-color: var(--staff-bg2) !important;
}

/* ============================================
   STATUS INDICATORS
   ============================================ */

.inactive-item {
    color: var(--inactive-item) !important;
}

.deleted-item {
    color: var(--deleted-item) !important;
}

/* ============================================
   MD-EDIT (DOCTOR EDIT) EDITOR
   ============================================ */

.md-editor-container {
    background-color: var(--form) !important;
    border-color: var(--border) !important;
}

.md-editor-toolbar {
    background-color: var(--card-heading) !important;
    border-bottom-color: var(--border) !important;
}

.md-editor-btn {
    background-color: var(--form) !important;
    color: var(--font) !important;
    border-color: var(--border) !important;
}

    .md-editor-btn:hover {
        background-color: var(--highlight) !important;
        color: var(--font) !important;
    }

.md-editor-toolbar > div[style*="width: 1px"] {
    background-color: var(--border) !important;
}

.md-editor-content,
.md-editor-source {
    background-color: var(--form) !important;
    color: var(--font) !important;
}

.heading-dropdown {
    background-color: var(--form) !important;
    color: var(--font) !important;
    border-color: var(--border) !important;
}

.heading-dropdown-item {
    color: var(--font) !important;
    background-color: transparent !important;
    border-bottom-color: var(--border) !important;
}

    .heading-dropdown-item:hover {
        background-color: var(--highlight) !important;
        color: var(--font) !important;
    }

.md-editor-btn[data-command="code-block"] {
    background-color: var(--form) !important;
    color: var(--font) !important;
    border-color: var(--border) !important;
}

    .md-editor-btn[data-command="code-block"]:hover {
        background-color: var(--highlight) !important;
    }

.code-language-input,
.code-content-input {
    background-color: var(--form) !important;
    color: var(--font) !important;
    border-color: var(--border) !important;
}

    .code-language-input::placeholder,
    .code-content-input::placeholder {
        color: var(--placeholder) !important;
    }

/* MD-Editor Tables */
.md-editor-content table {
    border-collapse: collapse;
    margin: 10px 0;
    width: 100%;
}

    .md-editor-content table td,
    .md-editor-content table th {
        border: 1px solid var(--border) !important;
        padding: 8px;
        min-width: 50px;
        background-color: var(--form) !important;
        color: var(--font) !important;
    }

    .md-editor-content table th {
        background-color: var(--card-heading) !important;
        font-weight: bold;
    }

    .md-editor-content table tr:hover td {
        background-color: var(--highlight) !important;
    }

/* Shopping Cart Container */
.shopping-cart-container {
    background: var(--cart-bg) !important;
    border-color: var(--cart-border) !important;
    color: var(--font) !important;
}

    .shopping-cart-container.drag-over {
        border-color: var(--cart-drag-over-border) !important;
        background: var(--cart-drag-over-bg) !important;
    }

/* Cart Header */
.cart-header {
    border-bottom-color: var(--cart-header-border) !important;
    color: var(--font) !important;
}

/* Cart Drop Hint */
.cart-drop-hint {
    color: var(--cart-hint-text) !important;
}

/* Cart Items */
.cart-item {
    background: var(--cart-item-bg) !important;
    border-color: var(--cart-item-border) !important;
    color: var(--font) !important;
}

    .cart-item:hover {
        box-shadow: 0 2px 8px var(--cart-item-hover-shadow) !important;
    }

.cart-item-title {
    color: var(--font) !important;
}

.cart-item-details {
    color: var(--font) !important;
    opacity: 0.8;
}

/* Sample Cards in Browse Area */
.sample-result-card.in-cart {
    background: var(--sample-in-cart-bg) !important;
    border-left-color: var(--sample-in-cart-border) !important;
}

.drag-handle {
    color: var(--drag-handle-color) !important;
}

/* Delete Drop Zone */
.delete-drop-zone {
    background: var(--delete-zone-bg) !important;
    border-color: var(--delete-zone-border) !important;
    color: var(--font) !important;
}

    .delete-drop-zone.drag-over {
        background: var(--delete-zone-hover-bg) !important;
        border-color: var(--delete-zone-hover-border) !important;
    }

/* Browse Area Border */
.nfml-browse-area {
    border-right-color: var(--border) !important;
}

@media (max-width: 768px) {
    .nfml-browse-area {
        border-bottom-color: var(--border) !important;
    }
}

/* Remove from Cart Icon */
.remove-from-cart {
    color: var(--remove-cart-color) !important;
}

    .remove-from-cart:hover {
        color: var(--remove-cart-hover) !important;
    }


/* ============================================
   NFML Materials Browser + Cart (Theme-aware)
   ============================================ */

.nfml-browser-container {
    min-height: 600px;
}

.nfml-browse-area {
    padding-right: 20px;
    border-right: 2px solid var(--border);
}

.nfml-cart-area {
    position: sticky;
    top: 20px;
    height: fit-content;
    max-height: calc(100vh - 100px);
}

/* Cart stage shell */
.shopping-cart-container {
    border: 2px dashed var(--cart-border);
    border-radius: 8px;
    padding: 15px;
    background: var(--cart-bg);
    min-height: 400px;
    transition: all 0.3s ease;
    color: var(--font);
}

    .shopping-cart-container.drag-over {
        border-color: var(--cart-drag-over-border);
        background: var(--cart-drag-over-bg);
        box-shadow: 0 0 20px var(--cart-drag-shadow);
    }

/* Cart header */
.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--cart-header-border);
    color: var(--font);
}

/* Delete drop zone (class or id) */
.delete-drop-zone,
#delete-drop-zone {
    border: 2px dashed var(--delete-zone-border);
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 15px;
    text-align: center;
    background: var(--delete-zone-bg);
    transition: all 0.3s ease;
    color: var(--font);
}

    .delete-drop-zone.drag-over,
    #delete-drop-zone.drag-over {
        border-color: var(--delete-zone-hover-border);
        background: var(--delete-zone-hover-bg);
        transform: scale(1.05);
    }

    .delete-drop-zone i,
    #delete-drop-zone i {
        color: var(--delete-zone-icon); /* icon color distinct from text */
        transition: all 0.3s ease;
    }

    .delete-drop-zone.drag-over i,
    #delete-drop-zone.drag-over i {
        color: var(--delete-zone-hover-border);
        animation: shake 0.5s;
    }

/* Animated hint in empty cart */
.cart-drop-hint {
    text-align: center;
    padding: 40px 20px;
    display: none;
    color: var(--cart-hint-text);
}

.shopping-cart-container:empty .cart-drop-hint,
#selected-samples-list:empty ~ .cart-drop-hint {
    display: block;
}

/* Scrollable items area */
.cart-items {
    max-height: calc(100vh - 250px);
    overflow-y: auto;
}

/* Cart item card */
.cart-item {
    background: var(--cart-item-bg);
    border: 1px solid var(--cart-item-border);
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 10px;
    transition: all 0.2s ease;
    cursor: move;
    color: var(--font);
}

    .cart-item:hover {
        box-shadow: 0 2px 8px var(--cart-item-hover-shadow);
    }

    .cart-item.dragging {
        opacity: 0.5;
    }

/* Cart item header + title/details */
.cart-item-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 5px;
}

.cart-item-title {
    font-weight: bold;
    color: var(--font);
    font-size: 0.95em;
}

.cart-item-details {
    font-size: 0.85em;
    color: var(--font);
    opacity: 0.8;
}

/* Remove (X) */
.remove-from-cart {
    cursor: pointer;
    color: var(--remove-cart-color);
    transition: color 0.2s;
}

    .remove-from-cart:hover {
        color: var(--remove-cart-hover);
    }

/* Sample cards in browse list */
.sample-result-card {
    display: flex;
    align-items: flex-start;
    transition: all 0.2s ease;
    margin-bottom: 10px;
}

    .sample-result-card.draggable-sample {
        cursor: grab;
    }

        .sample-result-card.draggable-sample:active {
            cursor: grabbing;
        }

    .sample-result-card.dragging {
        opacity: 0.4;
        cursor: grabbing;
        transform: rotate(2deg);
    }

    .sample-result-card.in-cart {
        background: var(--sample-in-cart-bg);
        border-left: 4px solid var(--sample-in-cart-border);
    }

/* Selection & info layout */
.sample-selection-area {
    flex-shrink: 0;
    width: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.drag-handle {
    cursor: grab;
    padding: 5px;
    color: var(--drag-handle-color);
}

.sample-info-area {
    flex-grow: 1;
}

.scrollable {
    max-height: 15vh;
    overflow: auto;
}

#selection-count {
    font-size: 0.9em;
    vertical-align: middle;
}

/* Prevent text selection during drag */
.draggable-sample,
.draggable-sample *:not(input):not(textarea) {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Keyframes for delete zone icon shake */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }

    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }

    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .nfml-browse-area {
        border-right: none;
        border-bottom: 2px solid var(--border);
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .nfml-cart-area {
        position: relative;
        top: 0;
    }

    .drag-handle {
        display: none;
    }
}

/* LLM */
.chat-message {
    color: var(--dark) !important;
}
.chat-message.bg-light {
    color: var(--font) !important;
}

/* ============================================
   NSUF BRAND UTILITY CLASSES (BS5 extensions)
   Used by the INL Brand layout chrome. Brand colors are stable in both
   modes -- not theme tokens. If a future rebrand needs theme-driven
   values, promote these to dat_LayoutConfig tokens and route through
   var(--brand-*) instead of literals.
   ============================================ */

.bg-cherenkov     { background-color: #07519E !important; color: #fff; }
.bg-incramental   { background-color: #15345B !important; color: #fff; }
.bg-celestial     { background-color: #4A95D0 !important; color: #fff; }
.bg-orange-ochre  { background-color: #DB792C !important; color: #fff; }
.bg-gold-rush     { background-color: #D89328 !important; color: #fff; }

.text-cherenkov   { color: #07519E !important; }
.text-incramental { color: #15345B !important; }
.text-celestial   { color: #4A95D0 !important; }
.text-orange      { color: #DB792C !important; }
.text-gold-rush   { color: #D89328 !important; }

.border-cherenkov { border-color: #07519E !important; }
.border-incramental { border-color: #15345B !important; }
.border-celestial { border-color: #4A95D0 !important; }

.btn-celestial {
    background-color: #4A95D0;
    border-color: #4A95D0;
    color: #fff;
}
.btn-celestial:hover,
.btn-celestial:focus {
    background-color: #3A85C0;
    border-color: #3A85C0;
    color: #fff;
}

.btn-cherenkov {
    background-color: #07519E;
    border-color: #07519E;
    color: #fff;
}
.btn-cherenkov:hover,
.btn-cherenkov:focus {
    background-color: #15345B;
    border-color: #15345B;
    color: #fff;
}

/* ============================================
   INL BRAND DYNAMIC LAYOUT CHROME
   Everything below is scoped via .dynamic-* class names so the styling
   never reaches .navbar / .navbar-nav / .container / etc. used by the
   file-based _Layout.cshtml. Brand color classes above (.bg-cherenkov,
   .text-celestial, etc.) are intentionally global -- those are brand
   tokens usable anywhere.
   ============================================ */

/* Public.css applies `body { padding-left: 290px; background-color: white; }`
   for the old vertical-aside sidebar. The dynamic chrome doesn't use an
   <aside> and Dain runs the site in dark mode for accessibility (light
   screens trigger migraines), so both the padding AND the hard-coded
   white background have to be neutralized. !important is required because
   Public.css loads AFTER Scheme.css (via the chrome's HeadScripts) and
   would otherwise win the cascade on equal specificity. */
body.dynamic-body {
    padding-left: 0 !important;
    background: var(--primary) !important;
    color: var(--font);
    /* Prevents the ~15px horizontal scrollbar caused by full-bleed sections
       using width:100vw + margin:calc(50%-50vw). 100vw includes the vertical
       scrollbar's space, so 100vw > document width when the page scrolls.
       overflow-x:hidden clips the slop without affecting vertical scroll or
       sticky-top behavior on the masthead. */
    overflow-x: hidden;
}

/* Dynamic-chrome <header> must always render. Public.css has a leftover
   `header { display: none; }` from the old vertical-nav design. Class
   selector here beats the bare element selector on specificity. */
.dynamic-header {
    display: block;
    background-color: transparent;
}
.dynamic-header.sticky-top {
    z-index: 1080;
}

/* BS5 ships modals at z-index 1055 (.modal) / 1050 (.modal-backdrop), which
   sits below the sticky masthead (1080) and the megamenu panel (1090) --
   so a modal opens *underneath* the chrome. Lift the modal stack above
   both so any modal anywhere on the site renders as the topmost layer. */
.modal-backdrop {
    z-index: 1095 !important;
}
.modal {
    z-index: 1100 !important;
}

/* Single-row masthead. The .dynamic-page-wrapper inside .navbar needs the
   same flex treatment BS5 gives .navbar > .container, otherwise the brand /
   toggler / collapse stack vertically and the nav wraps to a second row.
   The .bg-white in the chrome HTML is overridden here so the masthead
   surface follows the active theme (var(--primary)) instead of always-white. */
/* Masthead surface uses --sidebar (the darker grey from the dark-mode
   token set -- matches the deeper "sidebar/nav area" tone of the current
   site, repositioned to the top in the new design). The body uses
   --primary which is slightly lighter than --sidebar in dark mode,
   producing the requested "masthead darker than page" hierarchy.
   Light mode falls naturally: --sidebar = #f6f6f6 vs body --primary
   = #fff. !important still beats BS5's `.bg-white !important` if it
   sneaks back into the navbar element. */
.dynamic-navbar {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    background-color: var(--sidebar) !important;
    /* Anchor for the full-width mega-menu panel below. With position:relative
       here and position:static on .dynamic-has-submenu, the megamenu's
       top:100%; left:0; right:0 references the navbar's bounds -- it spans
       the full masthead width and sits below the 4px Celestial border. */
    position: relative;
}
.dynamic-navbar > .dynamic-page-wrapper {
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between;
}
/* Thicker Celestial Blue accent stripe under the masthead -- matches INL's
   lighter-blue band rather than the hairline border-celestial would emit. */
.dynamic-navbar.border-bottom {
    border-bottom-width: 4px !important;
}

.dynamic-navbar-brand {
    padding: 0;
    margin-right: 1.5rem;
}
.dynamic-logo {
    max-height: 72px;
    width: auto;
    display: block;
}

/* INL-style nav: UPPERCASE Roboto 700 at 15px (matches the INL masthead
   typography spec exactly). color !important is required because there's
   a global `a.nav-link { color: var(--link) !important }` rule earlier in
   this file -- our chrome wants masthead nav to follow --font with
   --accent on hover, so we use !important to win the cascade against
   the other !important. Specificity is higher (2 classes > 1+1) so we
   win equal-!important comparison. */
.dynamic-navbar-nav .nav-link {
    text-transform: uppercase;
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-size: 15px;
    color: var(--font) !important;
    padding: 0.5rem 0.9rem;
    transition: color 0.15s ease;
}
.dynamic-navbar-nav .nav-link:hover,
.dynamic-navbar-nav .nav-link:focus {
    color: var(--accent) !important;
}
.dynamic-navbar-nav .nav-link.disabled {
    opacity: 0.5;
}

/* ============================================
   MEGA-MENU v1 (basic dropdown panel)
   Top-level items with children render via _NavMasthead.cshtml with
   .dynamic-has-submenu on the <li> and .dynamic-megamenu as the panel.
   This round = single-column link list; section headings, multi-column,
   and feature cards land in a later round.
   ============================================ */

.dynamic-has-submenu {
    /* Static (default) -- positioning context for the mega-menu comes from
       .dynamic-navbar above, so the panel spans the full masthead width
       instead of hugging one nav item. */
    position: static;
}

/* Caret on submenu triggers uses the Font Awesome chevron rendered by the
   partial as <i class="fa-solid fa-angle-down">. Rotate 180deg on hover
   to indicate the panel is open (no class swap, just transform). */
.dynamic-navbar-nav .dynamic-dropdown-toggle .fa-angle-down {
    margin-left: 0.35em;
    font-size: 0.9em;
    transition: transform 0.15s ease;
}
.dynamic-has-submenu:hover .dynamic-dropdown-toggle .fa-angle-down,
.dynamic-has-submenu:focus-within .dynamic-dropdown-toggle .fa-angle-down {
    transform: rotate(180deg);
}

.dynamic-megamenu {
    display: none;
    position: absolute;
    /* top: 100% on an absolutely positioned child references the parent's
       PADDING-box bottom -- which sits exactly where the navbar's 4px
       border-bottom begins. With the megamenu's own 4px border-top, the
       two 4px lines OCCUPY THE SAME VERTICAL ZONE and read as a single
       continuous blue line. (The earlier calc(100% - 4px) was too far up.) */
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--primary);
    color: var(--font);
    border-top: 4px solid #4A95D0;
    border-bottom: 1px solid var(--border);
    /* More pronounced drop shadow below the panel -- INL has a heavier
       lift on the bottom edge. Larger Y-offset, more blur, more alpha. */
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
    z-index: 1090;
}

/* User menu is now a regular .dynamic-has-submenu / .dynamic-megamenu pair
   (rendered by _NavMasthead.cshtml) -- no BS5 dropdown plugin, no separate
   small-dropdown styling. The user's submenu uses the same full-width
   megamenu panel as Resources / About / etc. */

/* Invisible hover-bridge: the 4px Celestial border-bottom on the navbar
   sits between the LI trigger and the megamenu. Mouse moving down passes
   through this zone where nothing is hovered (border isn't a hoverable
   target). Adding a pseudo-element on the toggle that extends downward
   into that zone keeps the LI in :hover via descendant propagation, so
   the menu stays open while the cursor traverses to the panel. */
.dynamic-navbar-nav .dynamic-dropdown-toggle {
    position: relative;
}
.dynamic-navbar-nav .dynamic-dropdown-toggle::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 32px;
    /* invisible -- no background, no border, just hit area. Generous enough
       to bridge link bottom -> navbar padding-bottom (~6px) -> 4px border ->
       megamenu border-top (4px) -> megamenu surface, with a few pixels of
       overlap for safety. */
}

.dynamic-megamenu-inner {
    /* Match the page-wrapper width so content aligns with the rest of the
       masthead/page (90% at lg+). The list inside gets pushed to the right
       portion, leaving the left ~25% available for a future feature card. */
    width: 90%;
    margin: 0 auto;
    padding: 1.5rem 0;
    display: flex;
    justify-content: flex-end;
}

.dynamic-megamenu-list {
    /* Right-aligned column-flow list. CSS columns gives us:
       1. Automatic balanced distribution into columns at column-width tracks
       2. Vertical separator lines via column-rule (matches INL's section dividers)
       3. Right-to-left column flow (direction: rtl) -- the first data item
          lands in the rightmost column under the trigger, additional columns
          extend leftward. Each item's `direction: ltr` restores normal text
          reading so labels aren't flipped. Callers (partial + future menu
          editors) feed items in REVERSE order so the visual order matches
          the intended reading order.
       Empty ~25% on the left is reserved for the future feature card. */
    width: 75%;
    column-width: 200px;
    column-gap: 2rem;
    column-rule: 1px solid var(--border);
    direction: rtl;
    list-style: none;
    margin: 0;
    padding: 0;
}
.dynamic-megamenu-list li {
    direction: ltr;
    break-inside: avoid;
}

/* Narrow variant for menus with few items (e.g. user menu). Forces a max
   of 2 columns and constrains width so 2 items don't spread into 2 sparse
   columns and 4 items don't fan out into 4 single-item columns.
   column-width stays inherited (200px) so the columns visually match the
   wider mega-menus. max-width = 2 cols * 200px + column-gap (2rem ~= 32px). */
.dynamic-megamenu-narrow .dynamic-megamenu-list {
    column-count: 2;
    width: auto;
    max-width: 432px;
}

.dynamic-megamenu-list li {
    padding: 0;
}

.dynamic-megamenu-list a {
    color: var(--font);
    text-decoration: none;
    display: block;
    padding: 0.45rem 0.6rem;
    border-radius: 4px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.dynamic-megamenu-list a:hover,
.dynamic-megamenu-list a:focus {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* Hover-to-open at lg+. focus-within keeps keyboard tab-through working. */
@media (min-width: 992px) {
    .dynamic-has-submenu:hover > .dynamic-megamenu,
    .dynamic-has-submenu:focus-within > .dynamic-megamenu {
        display: block;
    }
}

/* On mobile, the navbar-collapse already hides the whole nav; when it
   expands (hamburger tap), the megamenu renders inline as a flat list
   underneath its parent item instead of as a floating popover. */
@media (max-width: 991.98px) {
    .dynamic-megamenu {
        position: static;
        display: block;
        box-shadow: none;
        border: none;
        border-top: 1px solid var(--border);
        background-color: transparent;
        padding-left: 1rem;
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }
    .dynamic-megamenu-inner {
        padding: 0.5rem 0;
    }
    /* Inside the mobile navbar-collapse, force a single column so links
       stack readably regardless of available width. */
    .dynamic-megamenu-list {
        grid-template-columns: 1fr;
        row-gap: 0.1rem;
    }
}

/* Right-side affordances (search icon + user badge) */
.dynamic-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: 1rem;
}
.dynamic-search-toggle {
    color: var(--font);
    font-size: 1rem;
    padding: 0.4rem 0.6rem;
    text-decoration: none;
    border: none;
    background: transparent;
}
.dynamic-search-toggle:hover,
.dynamic-search-toggle:focus {
    color: var(--accent);
}
.dynamic-user-link {
    color: var(--font);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
}
.dynamic-user-link:hover {
    color: var(--accent);
}

/* INL-style search modal: dark backdrop, big rounded input, Cherenkov submit.
   Positioned in the top third of the viewport (just below the masthead) so
   the user's eye-line stays near where they clicked the search icon. */
.dynamic-search-modal .modal-dialog {
    margin-top: 12vh;
    margin-bottom: auto;
}
.dynamic-search-modal .modal-content {
    background-color: var(--primary);
    color: var(--font);
    border: none;
    border-radius: 8px;
    box-shadow: 0 10px 50px rgba(0,0,0,0.35);
    padding: 0.5rem;
}
.dynamic-search-modal .dynamic-search-input {
    background-color: var(--primary);
    color: var(--font);
}
.dynamic-search-modal .modal-backdrop.show {
    opacity: 0.6;
}
.dynamic-search-input {
    border: none !important;
    box-shadow: none !important;
    font-size: 1.15rem;
    padding: 0.85rem 1rem;
}
.dynamic-search-input:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none;
}
.dynamic-search-submit {
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 0.7rem 1.75rem;
    border-radius: 6px;
    white-space: nowrap;
}

/* Shared width pattern for the masthead inner row, footer rows, and main
   content area. Full-width on small/medium screens; 90% (centered) on
   large+. Replaces BS5's .container which caps at fixed breakpoints (1140
   / 1320px) and would otherwise leave conspicuous margins at wide screens. */
.dynamic-page-wrapper,
.dynamic-content {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

@media (min-width: 992px) {
    .dynamic-page-wrapper,
    .dynamic-content {
        width: 90%;
    }
}

/* Full-width breakout: a few page sections need to bleed edge-to-edge of the
   viewport (LayerSlider hero, dark navy bands, full-width banners) while
   siblings stay constrained to .dynamic-content's width. The calc(50% - 50vw)
   trick pulls the element's margins to the viewport edges. Add more
   selectors here as full-width sections are introduced. */
.dynamic-content > .slideshow,
.dynamic-content > .staff-list,
.dynamic-content > .work-list,
.dynamic-content > .work-footer,
.dynamic-content > .full-bleed {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    max-width: 100vw;
}

/* Slider sits flush against the masthead -- no top gap. Other full-bleed
   sections keep their natural margin so they breathe between siblings. */
.dynamic-content > .slideshow {
    margin-top: -1.5rem;
}

/* Page jumbotrons (page header images via _PageLayout / _ManageLayout) get
   the same full-bleed treatment as the slider:
     - Stretch edge-to-edge of the viewport
     - Sit flush against the bottom of the masthead (negative top margin
       eats the .dynamic-content's py-4 padding)
     - Celestial Blue accent line on bottom -- matches the masthead's blue
       stripe so the two together visually frame the jumbotron */
.dynamic-body .jumbotron {
    margin-top: -1.5rem;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    max-width: 100vw;
    border-bottom: 4px solid #4A95D0;
}

/* Dynamic-chrome only: shrink the LayerSlider hero to match INL's height.
   The home page view sets max-height: 80vh inline and the JS sets height
   = window.innerHeight via $.css(). Stylesheet !important beats both
   non-important inline declarations, so this rule wins only when the
   dynamic chrome is active (.dynamic-body on <body>). File-based layout
   keeps the original 80vh slider untouched. */
.dynamic-body #layerslider {
    height: calc(50vh - 100px) !important;
    max-height: calc(50vh - 100px) !important;
}

/* Body text inside the dynamic chrome reads as Incramental Blue (the dark
   brand navy) in light mode -- bolder than the default --font gray for
   prose. In dark mode --dark is still #222 (the brand navy is a permanent
   accent, not a mode-flipped foreground), so we explicitly switch to
   --font there or every <p> inside .dynamic-content (page content, card
   bodies, list items, modal bodies, etc.) renders near-black on the
   already-dark page background. This is the root-cause fix for the
   "dark-grey-on-darker-grey" contrast reports across /Home/Projects,
   card-headers, the map pin facility list, and /Page/* MD-Edit content. */
.dynamic-content p {
    color: var(--dark);
}
@media (prefers-color-scheme: dark) {
    .dynamic-content p {
        color: var(--font);
    }
}

/* ============================================
   DYNAMIC FOOTER (INL-style)
   Top accent band -> 4-column body -> light copyright bar
   ============================================ */
/* Footer accent band: thin Celestial Blue gradient stripe sitting on top of
   a thicker Cherenkov-blue band -- mirrors INL's two-tone "green stripe +
   blue bar" layout, but using our brand blues instead of their green. The
   gradient stripe matches the masthead 4px stripe and the .staff-list /
   .work-list edge stripes, so the same accent thread runs top -> bottom.
   Stripe was bumped from 4px to 7px so it reads as cleanly here as INL's
   green stripe does on theirs -- 4px disappeared at typical zoom. */
.dynamic-footer {
    position: relative;
}
.dynamic-footer-accent {
    position: relative;
    background-color: #07519E;
    height: 50px;
    width: 100%;
}
.dynamic-footer-accent::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 7px;
    background: linear-gradient(135deg, #82B5E0 0%, #4A95D0 100%);
    pointer-events: none;
}
/* Hexagon cluster -- transparent PNG. Positioned as a child of .dynamic-footer
   (not .dynamic-footer-accent) so it can hang well below the band without the
   white .dynamic-footer-block background covering its lower portion (siblings
   later in source order paint over absolutely-positioned children of earlier
   siblings, even when those children overflow). At rest the cluster's top sits
   ~35px below the top of the band -- so only the very top of the first hexagon
   tucks into the band's bottom, matching INL's rest state. Hover lifts the
   cluster up so the hexagons rise into the band; 350ms ease-out-quint.
   Hidden below lg because there's no room in the cramped layout. */
.dynamic-footer-hexagons {
    display: none;
    position: absolute;
    top: 35px;
    left: 1rem;
    width: 240px;
    height: auto;
    z-index: 1;
    pointer-events: none;
    transform: translateY(0);
    transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 992px) {
    .dynamic-footer-hexagons {
        display: block;
    }
    /* Push the footer-block content right to clear the hexagon zone -- the
       cluster lives in the left ~260px and would otherwise overlap the
       DOE lockup column. */
    .dynamic-footer-block .dynamic-page-wrapper {
        padding-left: 260px;
    }
}
.dynamic-footer:hover .dynamic-footer-hexagons {
    transform: translateY(-40px);
}

.dynamic-footer-block {
    background-color: var(--primary);
    padding: 2.25rem 0 2rem;
    color: #4D4D4D;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}
/* In dark mode the body text uses the theme's off-white instead of the
   light-mode #4D4D4D specified by INL's design tokens. */
@media (prefers-color-scheme: dark) {
    .dynamic-footer-block {
        color: var(--font);
    }
}
.dynamic-footer-doe {
    max-width: 220px;
    height: auto;
}
/* The DOE lockup is brand-blue, so a plain invert() turns it yellow (the
   complementary color of blue). Instead use the brightness-zero + invert-one
   trick: brightness(0) flattens every pixel to black, invert(1) then flips
   the whole image to white. Net effect: a white silhouette of the lockup,
   only in dark mode. Loses any fine detail in the original mark; revisit
   if a proper knockout asset becomes available. */
@media (prefers-color-scheme: dark) {
    .dynamic-footer-doe {
        filter: brightness(0) invert(1);
    }
}
/* Column headings (Idaho National Laboratory, Research Areas, About Us,
   Partnerships, Careers, Newsroom). Every heading is now an anchor with
   .no-link so the underline is suppressed; they all share the same bolder
   dark-blue uppercase treatment regardless of whether they wrap a link.
   Hover flips to black in light mode, white in dark mode. */
.dynamic-footer-block h6 {
    font-weight: 700;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 13px;
    line-height: 18px;
}
/* Outdent: links nudged right so headings sit visually flush-left of them */
.dynamic-footer-block ul.list-unstyled {
    padding-left: 0.5rem;
    margin-bottom: 0.75rem;
}
.dynamic-footer-block h6,
.dynamic-footer-block h6 a {
    color: var(--link);
}
.dynamic-footer-block h6 a:hover,
.dynamic-footer-block h6 a:focus {
    color: #000000;
}
@media (prefers-color-scheme: dark) {
    .dynamic-footer-block h6 a:hover,
    .dynamic-footer-block h6 a:focus {
        color: #ffffff;
    }
}
/* List/body links -- 13px, .no-link suppresses the global underline. In
   dark mode the default color flips to white + orange on hover so links
   read clearly against the dark footer background. */
.dynamic-footer-block a {
    color: var(--link);
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
}
.dynamic-footer-block a:hover,
.dynamic-footer-block a:focus {
    color: var(--hover);
}
@media (prefers-color-scheme: dark) {
    .dynamic-footer-block a {
        color: #ffffff;
    }
    .dynamic-footer-block a:hover,
    .dynamic-footer-block a:focus {
        color: var(--hover);
    }
}
.dynamic-footer-block ul li {
    padding: 0.1rem 0;
}
.dynamic-footer-block .small,
.dynamic-footer-block p.small,
.dynamic-footer-block address.small,
.dynamic-footer-block ul.small {
    font-size: 12px;
    line-height: 16px;
}

/* Social icon row: filled tile in NSUF Gold Rush, hover to Cherenkov.
   Matches INL's tile-style icons but in NSUF brand colors (the previously
   yellow icons on the file-based footer). */
.dynamic-footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.75rem;
}
.dynamic-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: #D89328;
    color: #fff !important;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.dynamic-social-icon:hover,
.dynamic-social-icon:focus {
    background-color: #07519E;
    color: #fff !important;
    text-decoration: none;
}

/* Bottom legal bar -- pale, with copyright on left and back-to-top on right */
.dynamic-footer-legal {
    background-color: var(--secondary);
    border-top: 1px solid var(--border);
    padding: 0.75rem 0;
    font-size: 0.85rem;
    color: var(--font);
}
.dynamic-footer-legal .back-to-top {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #07519E;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
}
.dynamic-footer-legal .back-to-top:hover {
    background-color: #15345B;
    color: #fff;
}

/* ============================================
   FULL-WIDTH DARK BANDS (Meet Our Team, Work Footer, etc.)
   Mirrors INL's dark-navy band-with-accent-stripes pattern, except using
   Celestial Blue (--accent / #4A95D0 / lighter shade) instead of INL's
   green. Background-image override beats Home.css's blue-background.jpg
   because Scheme.css now loads last. Stripes are a single-pixel-perfect
   gradient at top and bottom of the section. */
.dynamic-body .staff-list,
.dynamic-body .work-list,
.dynamic-body .work-footer {
    background: #15345B !important;
    position: relative;
    color: #fff;
}

/* Paragraphs/headings inside the dark bands need white text. The earlier
   `.dynamic-content p { color: var(--dark) }` rule wins by specificity over
   the parent's `color: #fff` cascade, so we have to be explicit. Headings
   already render white via .dynamic-content :where(...) { color: #07519E }
   in light mode (would be wrong on a navy band) -- override here too. */
.dynamic-content .staff-list,
.dynamic-content .staff-list p,
.dynamic-content .staff-list h1,
.dynamic-content .staff-list h2,
.dynamic-content .staff-list h3,
.dynamic-content .staff-list h4,
.dynamic-content .work-list,
.dynamic-content .work-list p,
.dynamic-content .work-list h1,
.dynamic-content .work-list h2,
.dynamic-content .work-list h3,
.dynamic-content .work-list h4,
.dynamic-content .work-footer,
.dynamic-content .work-footer p,
.dynamic-content .work-footer h1,
.dynamic-content .work-footer h2,
.dynamic-content .work-footer h3,
.dynamic-content .work-footer h4 {
    color: #fff;
}

.dynamic-body .staff-list::before,
.dynamic-body .work-list::before,
.dynamic-body .work-footer::before,
.dynamic-body .staff-list::after,
.dynamic-body .work-list::after,
.dynamic-body .work-footer::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, #82B5E0 0%, #4A95D0 100%);
    pointer-events: none;
}

.dynamic-body .staff-list::before,
.dynamic-body .work-list::before,
.dynamic-body .work-footer::before {
    top: 0;
}

.dynamic-body .staff-list::after,
.dynamic-body .work-list::after,
.dynamic-body .work-footer::after {
    bottom: 0;
}