/* ============================================
   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;
    }
}

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

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

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

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

.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: #6c757d !important;
        color: var(--light) !important;
    }

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

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

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

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

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

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

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

.text-success {
    color: #28a745 !important;
}

.text-danger {
    color: #dc3545 !important;
}

@media (prefers-color-scheme: dark) {
    .text-success,
    .card-body .text-success {
        color: #5cb85c !important;
    }

    .text-danger,
    .card-body .text-danger {
        color: #ff6b6b !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: #d9edf6 !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;
    }

/* ============================================
   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);
}

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

    .remove-from-cart:hover {
        color: #c82333 !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 rgba(40, 167, 69, 0.3);
    }

/* 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: #856404; /* 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: #dc3545;
    transition: color 0.2s;
}

    .remove-from-cart:hover {
        color: #c82333;
    }

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