/**
 * SAM Dashboard Styles
 * NCAR-themed custom styles for user and project dashboards
 *
 * Design tokens (CSS custom properties) are defined in variables.css,
 * which must be loaded before this file.
 */

/* ============================================================================
   GLOBAL STYLES
   ========================================================================= */

body {
    background-color: var(--bg-light);
    background-image: url('../img/UCAR-Waves-Lines-Only-66.png');
    background-position: 150% 0%;
    background-repeat: repeat-y;
    background-size: 53%;
    min-height: 100vh;
    font-family: var(--font-family-default);
    color: var(--text-dark);
}

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

.navbar {
    background-color: #fff;
    padding-top: 0;
    padding-bottom: 0;
}

.navbar-light {
    background-color: #fff;
}

.navbar button {
    border: 0;
    padding: 0 0.5rem;
}

/* Override Bootstrap's stepped container-lg inside the navbar.
   Unity's container-lg is fluid until 86.25rem, then caps at 88.25rem.
   Bootstrap 5's default caps at 960px at 992px — far too narrow. */
.navbar .container-lg {
    max-width: 100%;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

@media (min-width: 86.25rem) {
    .navbar .container-lg {
        max-width: 88.25rem;
    }
}

/* Logo */
.logo-ncar {
    width: 13rem;
}

.logo-ncar img {
    width: 100%;
}

@media (min-width: 768px) {
    .logo-ncar {
        width: 18.5rem;
    }
}

/* Site name */
.navbar .site-name {
    align-self: center;
    font-size: 0.875rem;
    font-weight: var(--font-weight-semi-bold);
    line-height: 1rem;
    padding-right: 1.875rem;
}

.navbar .site-name a {
    color: var(--ncar-blue);
    text-decoration: none;
}

.navbar .site-name a:hover,
.navbar .site-name a:active {
    color: var(--ncar-blue);
}

.site-name h1 {
    font-size: var(--font-size-xlg);
    font-weight: var(--font-weight-regular);
    line-height: 3rem;
    text-transform: uppercase;
    margin: 0;
}

.site-name h1 a {
    color: var(--ncar-space-blue);
    text-decoration: none;
}

.site-name h1 a:hover {
    color: var(--ncar-blue);
}

/* Nav links (desktop-only row — mobile navigation is the offcanvas drawer) */
.navbar .nav-link {
    color: var(--ncar-space-blue);
    font-size: 1rem;
    line-height: 1.5rem;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--ncar-blue);
}

.navbar .nav-item {
    list-style: none;
}

/* Mobile toggler */
.mobile-toggler {
    max-width: 4rem;
}

.mobile-toggler button {
    padding: 1.6rem;
}

/* Utility menu (desktop) */
.utility-menu {
    font-size: 0.875rem;
    line-height: 1.35;
}

.utility-menu .nav-link {
    color: var(--ncar-space-blue);
    font-weight: var(--font-weight-semi-bold);
    padding: 0;
}

.utility-menu .nav-link:hover {
    color: var(--ncar-blue);
}

/* Nav row border */
.navbar-wrapper.border-top {
    border-top-color: #dee2e6 !important;
}

.navbar .navbar-wrapper .container-lg {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

/* Desktop — md breakpoint matches navbar-expand-md */
@media (min-width: 768px) {
    .navbar {
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.175);
    }

    .navbar .nav-item {
        border-bottom: 0;
        justify-content: center;
        width: auto;
        padding-right: 1.875rem;
    }

    .navbar .nav-item.dropdown {
        padding-right: 1.125rem;
    }

    /* Unity dropdown styling (ported from Kyle Davis's
       refactor/app-route-structure prototype): navy panel, white items,
       sky-blue hover, Font Awesome caret. Applies to both the section
       dropdowns (row 2) and the user-account dropdown (row 1). */
    .dropdown-header {
        border-bottom: 1px solid #000;
        font-size: 0.875rem;
        line-height: 1rem;
        text-transform: uppercase;
    }

    .navbar .nav-item.dropdown .dropdown-menu {
        --bs-dropdown-zindex: 1000;
        --bs-dropdown-min-width: 18.75rem;
        --bs-dropdown-padding-x: 0;
        --bs-dropdown-padding-y: 0.5rem;
        --bs-dropdown-spacer: 0.125rem;
        --bs-dropdown-font-size: 1rem;
        --bs-dropdown-color: #011837;
        --bs-dropdown-bg: #00357a;
        --bs-dropdown-border-color: var(--bs-border-color-translucent);
        --bs-dropdown-border-radius: 0;
        --bs-dropdown-border-width: 0;

        background-color: var(--ncar-navy);
        border: 1px solid rgba(255, 255, 255, 0.1);
        min-width: 18.75rem;
        margin: 0;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        border-radius: 0;
    }

    .navbar .dropdown-toggle::after {
        content: '\f107';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        border: 0;
        font-size: 0.75rem;
        margin-left: 0.5rem;
        vertical-align: middle;
    }

    .navbar .dropdown-toggle[aria-expanded="true"]::after {
        transform: rotate(180deg);
    }

    .navbar .nav-item.dropdown .dropdown-item {
        color: #fff;
        padding: 0.5rem 1rem;
        font-weight: 400;
        line-height: 1.313rem;
        white-space: normal;
    }

    .navbar .nav-item.dropdown .dropdown-item:hover,
    .navbar .nav-item.dropdown .dropdown-item:focus {
        background-color: transparent;
        color: var(--ncar-sky);
    }

    .navbar .nav-item.dropdown .dropdown-item.active {
        background-color: transparent;
        color: #fff;
        font-weight: var(--font-weight-semi-bold);
    }

    .navbar .nav-item.dropdown .dropdown-item.active:hover,
    .navbar .nav-item.dropdown .dropdown-item.active:focus {
        background-color: transparent;
        color: var(--ncar-sky);
    }

    /* Split caret button next to each section label. It's a .nav-link for
       color inheritance but must not pick up the label's active underline. */
    .navbar .nav-link.nav-caret {
        border: 0;
        background: none;
        padding: 0 0.25rem;
        cursor: pointer;
    }

    .navbar .nav-link.nav-caret::after {
        margin-left: 0;
    }

    .navbar .nav-link.nav-caret.active {
        border-bottom: 0;
        margin-bottom: 0;
    }

    .navbar .nav-link {
        padding: 0;
    }

    .navbar .nav-link.active {
        border-bottom: 0.1875rem solid var(--ncar-blue);
        margin-bottom: -0.1875rem;
        color: var(--ncar-space-blue);
    }

    .navbar .site-name {
        font-size: 1rem;
        line-height: 1.2rem;
    }

    .site-name h1 {
        font-size: var(--font-size-xsm);
        line-height: 1.2rem;
    }
}

/* ============================================================================
   MOBILE NAVIGATION DRAWER (offcanvas, < md)
   ========================================================================= */

.mobile-nav {
    width: 85vw;
    max-width: 20rem;
}

.mobile-nav .offcanvas-header {
    background-color: var(--ncar-navy);
}

.mobile-nav .offcanvas-title {
    color: #fff;
    font-size: 1rem;
}

.mobile-nav .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.mobile-nav .accordion-button {
    color: var(--ncar-space-blue);
    font-weight: var(--font-weight-semi-bold);
    padding: 0.875rem 1rem;
}

.mobile-nav .accordion-button:not(.collapsed) {
    background: none;
    color: var(--ncar-blue);
    box-shadow: none;
}

.mobile-nav .accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--ncar-blue-rgb), 0.2);
}

.mobile-nav .mobile-nav-link {
    display: block;
    padding: 0.625rem 1rem 0.625rem 1.75rem;
    color: var(--ncar-space-blue);
    text-decoration: none;
}

.mobile-nav .mobile-nav-link:hover,
.mobile-nav .mobile-nav-link:focus {
    color: var(--ncar-blue);
}

.mobile-nav .mobile-nav-link.active {
    color: var(--ncar-blue);
    font-weight: var(--font-weight-semi-bold);
    border-left: 3px solid var(--ncar-blue);
    background-color: rgba(var(--ncar-blue-rgb), 0.06);
}

.mobile-nav-footer a {
    color: var(--ncar-blue);
}

/* ============================================================================
   BREADCRUMBS (dashboards/fragments/breadcrumbs.html) — compact, muted trail
   above the page header. Replaces the old .back-link buttons.
   ========================================================================= */

.sam-breadcrumbs {
    margin-bottom: 0.75rem;
}

.sam-breadcrumbs .breadcrumb {
    font-size: 0.875rem;
}

.sam-breadcrumbs .breadcrumb-item a {
    color: var(--ncar-blue);
    text-decoration: none;
}

.sam-breadcrumbs .breadcrumb-item a:hover {
    text-decoration: underline;
}

.sam-breadcrumbs .breadcrumb-item.active {
    color: var(--bs-secondary-color);
}

/* ============================================================================
   MOBILE COMPACTION (< md) — this is a data-heavy site; the goal is
   "better", not mobile perfection. Unity's CTA-scale buttons and desktop
   heading sizes read comically large on phones; page-header flex rows must
   be allowed to wrap so action buttons stack under the title.
   ========================================================================= */

@media (max-width: 767.98px) {
    .btn {
        font-size: 1rem;
        line-height: 1.25rem;
        padding: 0.5rem 1rem;
    }

    /* Brand row must actually fit a phone: at the desktop sizes
       (13rem logo + site name + 1.6rem-padded hamburger) the header row
       exceeded the viewport and forced document-level horizontal scroll —
       the root cause of the old "menu opens and the page shifts" bug. */
    .logo-ncar {
        width: 9.5rem;
        flex-shrink: 0;
    }

    .navbar .site-name {
        font-size: 0.875rem;
        line-height: 1.1rem;
        min-width: 0;
    }

    .mobile-toggler button {
        padding: 0.875rem 0.75rem;
    }

    .main-content h1,
    .main-content .h1 {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    /* Page headers (h1 + action buttons) wrap instead of squeezing. */
    .main-content > .d-flex,
    .main-content .container-fluid > .d-flex {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Preset button strips (time-range pickers etc.) wrap instead of
       forcing document-level horizontal scroll. */
    .main-content .btn-group {
        flex-wrap: wrap;
    }

    /* Any utility flex row wraps rather than squeezing or overflowing the
       viewport: card headers with action buttons ("Search Projects" +
       "Create Project"), tab-pane toolbars (date picker + Extend/Renew/Add
       on Manage Project), etc. flex-wrap only engages when the row would
       otherwise overflow, so fitting rows are untouched. Deliberately broad
       — the precise per-container list kept growing (see #359's page-header
       rule above, now one instance of this). Vertical stacks are excluded:
       wrapping a flex-column makes align-items:stretch size children to
       fit-content, which lets an inner table blow the card out to its
       intrinsic width. */
    .main-content .d-flex:not(.flex-column) {
        flex-wrap: wrap;
    }

    .card-header.d-flex {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Tab strips scroll horizontally by design; fade the right edge as a
       "more tabs off-screen" affordance. Purely cosmetic — 2.5rem is narrow
       enough not to obscure a strip that happens to fit exactly. */
    .nav-tabs {
        mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
    }

    /* Tap targets: expandable drill-down rows and sortable column headers
       are finger-hostile at desktop padding. */
    .expandable-row td {
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
    }

    .main-content table.table th a {
        display: inline-block;
        padding: 0.25rem 0;
    }

    /* Slightly smaller table type on phones: trades a notch of size for a
       lot less horizontal scrolling on data-heavy tables. */
    .main-content .table {
        font-size: 0.8125rem;
    }
}

/* Below lg (phones AND portrait tablets — the widest data tables exceed even
   an iPad's 820px): any table not already inside a .table-responsive scroller
   gets its own horizontal scrollbox instead of widening the document. The
   child-combinator guard leaves deliberately-wrapped tables (allocations
   summary, admin access-grid with its sticky column) untouched. Known
   tradeoff of display:block — a table narrower than the screen no longer
   stretches to full width. */
@media (max-width: 991.98px) {
    .main-content :not(.table-responsive) > table.table {
        display: block;
        overflow-x: auto;
    }
}

/* ============================================================================
   MAIN CONTENT
   ========================================================================= */

.main-content {
    padding: 0.5rem 0;
    /* Reserve viewport space for header (136px) + footer margin (50px) + footer
       (~99px) = 285px. Previously 200px, which left ~85px of always-on overflow
       and a noisy scrollbar on otherwise-fitting pages like /admin/. */
    min-height: calc(100vh - 285px);
}

@media (min-width: 64rem) {
    .main-content {
        padding-top: 1.875rem;
    }
}

/* ============================================================================
   HEADINGS — Unity NCAR typography. Sizes/weights/line-heights match Unity's
   responsive scale. h1/h2 use ncar-navy in main content; h3-h6 inherit body.
   ========================================================================= */

h1, .h1 { font-size: 1.875rem; line-height: 2.625rem; font-weight: var(--font-weight-semi-bold); }
h2, .h2 { font-size: 1.25rem;  line-height: 1.875rem; font-weight: var(--font-weight-semi-bold); }
h3, .h3 { font-size: 1.125rem; line-height: 1.875rem; font-weight: var(--font-weight-semi-bold); }
h4, .h4 { font-size: 1rem;     line-height: 1.5rem;   font-weight: var(--font-weight-semi-bold); }
h5, .h5 { font-size: 0.875rem; line-height: 1.35;     font-weight: var(--font-weight-semi-bold); }
h6, .h6 { font-size: 0.875rem; line-height: 1.35;     font-weight: var(--font-weight-semi-bold); }

@media (min-width: 64rem) {
    h1, .h1 { font-size: 3rem;     line-height: 3.75rem;  font-weight: var(--font-weight-bold); }
    h2, .h2 { font-size: 2.25rem;  line-height: 3rem;     font-weight: var(--font-weight-bold); }
    h3, .h3 { font-size: 1.875rem; line-height: 2.625rem; }
    h4, .h4 { font-size: 1.5rem;   line-height: 2.25rem; }
    h5, .h5 { font-size: 1.25rem;  line-height: 1.875rem; }
    h6, .h6 { font-size: 1.125rem; line-height: 1.875rem; }
}

.main-content h1,
.main-content h2 {
    color: var(--ncar-navy);
}

.page-header {
    margin-bottom: 1.875rem;
    padding-bottom: 1.25rem;
    border-bottom: 3px solid var(--ncar-blue);
}

.page-header p {
    color: var(--ncar-gray);
    font-size: 1rem;
}

/* ============================================================================
   ACCORDION — Bootstrap CSS variable overrides to match Unity NCAR tokens
   ========================================================================= */

.accordion {
    --bs-accordion-color: var(--ncar-space-blue);
    --bs-accordion-btn-color: var(--ncar-space-blue);
    --bs-accordion-active-color: #fff;
    --bs-accordion-active-bg: rgba(var(--ncar-blue-rgb), 0.1);
    --bs-accordion-btn-focus-border-color: var(--ncar-blue);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--ncar-blue-rgb), 0.25);
    /* Chevron icon filled with space-blue for collapsed state */
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23011837'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    /* Chevron icon filled with white for expanded state */
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:not(.collapsed) {
    background-color: var(--ncar-blue);
    color: #fff;
}

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

.card {
    /* Override Bootstrap card vars to match Unity's flat editorial style.
       No border, no shadow — cards are just padded content blocks. */
    --bs-card-spacer-y: 1.875rem;
    --bs-card-spacer-x: 1.875rem;
    --bs-card-border-radius: 0;
    --bs-card-inner-border-radius: 0;
    --bs-card-border-width: 0;
    --bs-card-color: var(--ncar-space-blue);
    --bs-card-bg: #fff;
    --bs-card-cap-padding-y: 0.9375rem;
    --bs-card-cap-padding-x: 1.875rem;
    --bs-card-cap-bg: #fff;
    margin-bottom: 1.5rem;
}

.inner-card {
    padding: 1.875rem;
}

.inner-card > .card-header {
    padding: 0 !important;
    font-weight: var(--font-weight-semi-bold);
    color: var(--ncar-space-blue);
}

.inner-card > .card-header h5 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    color: var(--ncar-navy);
}

.inner-card > .card-body {
    padding: 0;
}

.inner-card p {
    font-size: 1.125rem;
    line-height: 1.875rem;
}

/* Opt-in modifier: a card with a visible 1px hairline border. Use when a
   card needs to read as a self-contained panel (e.g. wrapping a chart or
   a contacts list). Matches Unity's bordered editorial card look. */
.card-bordered {
    --bs-card-border-width: 1px;
    border-color: var(--ncar-gray-light);
}

.card-header h5 {
    color: var(--ncar-space-blue);
    font-weight: var(--font-weight-semi-bold);
    margin: 0;
}

.inner-card {
    border: 1px solid var(--ncar-blue);
    box-shadow: none !important;
}

/* ============================================================================
   BUTTONS — Unity NCAR style: flat (0 radius), bold (700), 3px border,
   inverting hover (filled ↔ outlined). Uses Bootstrap btn CSS variables.
   ========================================================================= */

.btn {
    --bs-btn-font-weight: var(--font-weight-bold);
    --bs-btn-border-width: 3px;
    --bs-btn-border-radius: 0;
    --bs-btn-box-shadow: none;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    line-height: 24px;
    font-size: 1.25rem;
    padding: .75rem 1.5rem;
}

/* Identifiers inside a button render in the case they're stored in: the
   uppercase treatment above is right for button *labels* but wrong for a
   name the user has to match against a shell prompt or a ticket. It also
   erases the convention that tells the two apart at a glance — projcodes
   are uppercase (SCSG0001), usernames lowercase (benkirk) — which the
   entity quick-view links on the job-history tables and histogram
   drill-downs lean on. Covers both spellings in use: <code> and
   .font-monospace. */
.btn code,
.btn .font-monospace {
    text-transform: none;
}

.btn-primary {
    --bs-btn-bg: var(--ncar-blue);
    --bs-btn-border-color: var(--ncar-blue);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--ncar-blue);
    --bs-btn-hover-color: var(--ncar-blue);
    --bs-btn-active-bg: var(--ncar-blue);
    --bs-btn-active-border-color: var(--ncar-blue);
    --bs-btn-active-color: #fff;
}

.btn-outline-primary {
    --bs-btn-color: var(--ncar-blue);
    --bs-btn-border-color: var(--ncar-blue);
    --bs-btn-hover-bg: var(--ncar-blue);
    --bs-btn-hover-border-color: var(--ncar-blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--ncar-blue);
    --bs-btn-active-border-color: var(--ncar-blue);
    --bs-btn-active-color: #fff;
}

.btn-outline-secondary {
    --bs-btn-color: var(--ncar-navy);
    --bs-btn-border-color: var(--ncar-navy);
    --bs-btn-hover-bg: var(--ncar-navy);
    --bs-btn-hover-border-color: var(--ncar-navy);
    --bs-btn-hover-color: #fff;
}

/* Unity .btn-outline-white — for buttons on dark/navy backgrounds (e.g.
   inside .filter-sidebar). White outline, transparent fill; hover dims to
   a translucent white wash matching Unity's exact spec (not a full invert). */
.btn-outline-white {
    --bs-btn-color: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.1);
    --bs-btn-hover-border-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: rgba(255, 255, 255, 0.1);
    --bs-btn-active-border-color: #fff;
    --bs-btn-active-color: #fff;
}

/* Unity-style :disabled — transparent fill, transparent 3px border (keeps
   the button's footprint so layout doesn't shift / nothing visually
   disappears), gray text. opacity:1 overrides Bootstrap's default .65 fade.
   Mirrors source/scss/_theme-colors.scss .ncar .btn-primary:disabled but
   keeps the border slot so it reads as "available shape, just inert". */
.btn-primary:disabled,
.btn-primary[disabled],
.btn-outline-primary:disabled,
.btn-outline-primary[disabled],
.btn-outline-secondary:disabled,
.btn-outline-secondary[disabled] {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--ncar-gray) !important;
    opacity: 1;
}

.btn-link {
    --bs-btn-color: var(--ncar-blue);
    --bs-btn-hover-color: var(--ncar-sky);
    text-decoration: none;
}

.btn-link:hover {
    text-decoration: underline;
}

.btn.btn-sm,
.btn-group-sm > .btn {
    line-height: 18px;
    font-size: 0.95rem;
    padding: 0.45rem 0.9rem;
}

.btn-group-sm > .btn {
    --bs-btn-border-width: 2px;
    line-height: 18px;
    font-size: 0.95rem;
    padding: 0.45rem 0.9rem;
}

.btn-group-sm > .btn:not(:first-child) {
    margin-left: calc(-1 * var(--bs-btn-border-width));
}

/* Unity NCAR defines only .btn-primary and .btn-outline-primary. Other
   semantic variants (.btn-success/.btn-danger/.btn-warning/.btn-info) are
   intentionally NOT styled here — templates should use btn-primary for
   positive actions and btn-outline-primary for destructive/informational
   actions instead. */

/* Toggle button groups (.btn-group with .btn-secondary / .btn-outline-secondary
   pair, used by time_range_picker, date_range_picker, system_user_proj_chart_card,
   and other quick-select preset rows). Match the Unity .nav-tabs invert pattern:
   inactive = solid NCAR-blue, active = white with blue text. Scoped to .btn-group
   so non-group .btn-secondary uses (modal Cancel, queue_history Back) keep their
   existing treatments. The active vars also cover .btn-check radio toggles
   (create-project projcode mode), which Bootstrap styles via
   .btn-check:checked + .btn → --bs-btn-active-*. */
.btn-group .btn-outline-secondary {
    --bs-btn-bg: var(--ncar-blue);
    --bs-btn-border-color: var(--ncar-blue);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--ncar-navy);
    --bs-btn-hover-border-color: var(--ncar-navy);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: var(--ncar-blue);
    --bs-btn-active-color: var(--ncar-blue);
}

.btn-group .btn-secondary,
.btn-group .btn-secondary.active,
.btn-group .btn-secondary:active {
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--ncar-blue);
    --bs-btn-color: var(--ncar-blue);
    --bs-btn-hover-bg: rgba(var(--ncar-teal-rgb), 0.08);
    --bs-btn-hover-border-color: var(--ncar-blue);
    --bs-btn-hover-color: var(--ncar-blue);
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: var(--ncar-blue);
    --bs-btn-active-color: var(--ncar-blue);
}

/* Unity-style focus ring on interactive button-like elements — upstream
   uses box-shadow 0 0 0 .2rem rgba(ncar-blue, .2) across .btn and .nav-link.
   Replaces Bootstrap's default outline so the ring matches palette. */
.btn:focus,
.btn:focus-visible,
.nav-tabs .nav-link:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(var(--ncar-blue-rgb), 0.2);
    outline: none;
}

/* ============================================================================
   FOOTER
   ========================================================================= */

.footer {
    background: linear-gradient(135deg, var(--bg-gray-light) 0%, var(--bg-gray-medium) 100%);
    padding: 24px 0;
    margin-top: 50px;
    border-top: 3px solid var(--ncar-blue);
}

.footer small {
    color: var(--ncar-gray);
    font-weight: var(--font-weight-semi-bold);
}

/* ============================================================================
   PROGRESS BARS
   ========================================================================= */

.progress {
    height: 28px;
    border-radius: var(--radius-md);
    background-color: var(--bg-gray-medium);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.progress-bar {
    font-size: 14px;
    font-weight: 700;
    line-height: 28px;
    border-radius: var(--radius-md);
    transition: width var(--transition-base);
}

/* Progress bar color variants */
.bg-success {
    background-color: var(--success-color) !important;
}

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

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

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

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

.badge {
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
    letter-spacing: 0.3px;
}

/* Note: the hyphenated `.badge-success` / `.badge-primary` / etc. variants
   were intentionally removed — no template uses them (every callsite uses
   the Bootstrap `.badge.bg-X` utility form). The live badge palette is the
   subtle Bootstrap 5.3 .bg-X-bg-subtle override applied lower in this file. */

/* ============================================================================
   LOADING SPINNER
   ========================================================================= */

.loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.spinner-border-primary {
    color: var(--ncar-blue) !important;
}

.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline-block;
}

.htmx-request.htmx-indicator {
    display: inline-block;
}

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

.table {
    color: var(--text-dark);
}

.table thead th {
    border-bottom: 2px solid var(--ncar-blue);
    color: var(--ncar-navy);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

.table-hover tbody tr:hover {
    background-color: rgba(var(--ncar-teal-rgb), 0.05);
}

.table-bordered {
    border: 1px solid var(--border-color);
}

.table-bordered th,
.table-bordered td {
    border: 1px solid var(--border-color);
}

.table-sm th,
.table-sm td {
    padding: 0.5rem;
}

/* Clickable table rows */
.resource-row {
    cursor: pointer;
    transition: all var(--transition-fast);
}

.resource-row:hover {
    background-color: rgba(var(--ncar-teal-rgb), 0.08) !important;
    transform: scale(1.01);
}

/* Date-bounds group header row in resources table */
.date-group-header td {
    background-color: #f1f3f5;
    border-top: 2px solid #dee2e6 !important;
}

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

/* Unity flat-fill treatment (source/scss/components/_alerts.scss): solid
   color fill, no border, no left accent, 0 radius. Color carries the
   semantic; text auto-picks for legibility. Info kept as NCAR blue rather
   than Unity's literal yellow — most users expect info=blue, yellow reads
   as warning. */
.alert {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--ncar-space-blue);
    padding: 0.875rem 1rem;
}

.alert a,
.alert button {
    color: var(--ncar-space-blue);
    text-decoration: underline;
    font-weight: var(--font-weight-semi-bold);
}

.alert a:hover,
.alert button:hover {
    color: var(--ncar-navy);
}

.alert-info {
    background-color: var(--ncar-blue);
    color: #fff;
}

.alert-info a,
.alert-info button {
    color: #fff;
}

.alert-warning {
    background-color: var(--ncar-orange);
    color: var(--ncar-space-blue);
}

.alert-danger {
    background-color: var(--ncar-vermilion);
    color: #fff;
}

.alert-danger a,
.alert-danger button {
    color: #fff;
}

.alert-success {
    background-color: #10b981;
    color: #fff;
}

.alert-success a,
.alert-success button {
    color: #fff;
}

/* ============================================================================
   MODALS — Unity NCAR style. The HTMX modal system (modal_scaffold +
   htmx_form macros) predates the Unity restyle, so templates still emit
   Bootstrap utility classes (bg-success/warning/danger/primary/secondary on
   .modal-header, .btn-secondary on Cancel). The rules below repaint those
   to NCAR palette tokens, flatten the surface, and scope a Cancel-button
   restyle to .modal-footer so toggle groups using .btn-secondary elsewhere
   stay untouched. CSS-only — no template edits needed.
   ========================================================================= */

.modal-content {
    border-radius: 0;
    border: 1px solid var(--ncar-gray-light);
    box-shadow: var(--shadow-md);
}

/* Create variant + hand-coded bg-primary (e.g. user/allocation_modals.html). */
.modal-header.bg-success,
.modal-header.bg-primary {
    background-color: var(--ncar-blue) !important;
    color: #fff;
    border-bottom: none;
}

/* Edit variant — darker palette blue, subtle UX cue for modifying existing data. */
.modal-header.bg-warning {
    background-color: var(--ncar-navy) !important;
    color: #fff;
    border-bottom: none;
}

/* Destructive confirmation (samConfirmModal, outage delete). */
.modal-header.bg-danger {
    background-color: var(--ncar-vermilion) !important;
    color: #fff;
    border-bottom: none;
}

/* Neutral variant (one outage_modals case). */
.modal-header.bg-secondary {
    background-color: var(--ncar-gray) !important;
    color: #fff;
    border-bottom: none;
}

/* bg-success/danger/primary already get .btn-close-white from the template;
   bg-warning + bg-secondary headers don't, so invert the close button on those
   two so it's legible against the dark fill. */
.modal-header.bg-warning .btn-close,
.modal-header.bg-secondary .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.modal-title {
    font-size: 1.125rem;
    font-weight: var(--font-weight-semi-bold);
    letter-spacing: 0.02em;
}

.modal-header {
    padding: 0.875rem 1.25rem;
}

.modal-footer {
    border-top: 1px solid var(--ncar-gray-light);
    padding: 0.875rem 1.25rem;
}

/* Cancel button — scoped to .modal-footer so .btn-secondary used as a toggle
   active-state in time-range / date-range pickers stays Bootstrap-stock. */
.modal-footer .btn-secondary {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--ncar-gray-light);
    --bs-btn-color: var(--ncar-navy);
    --bs-btn-hover-bg: var(--ncar-navy);
    --bs-btn-hover-border-color: var(--ncar-navy);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--ncar-navy);
    --bs-btn-active-border-color: var(--ncar-navy);
    --bs-btn-active-color: #fff;
}

/* ============================================================================
   TABS — Unity NCAR style: inactive = solid blue, active = white with blue text
   Mirrors Unity's cascade: base color set first, :not(.active) overrides inactive.
   ========================================================================= */

/* Pills — same white-is-active convention as .nav-tabs below and the
   .btn-group selector rows above, at the lighter rounded-pill weight.
   Pills carry the machine / filesystem / chart-series choosers (jobs and
   filesystem-scan subtabs, the allocations pie tabs, the allocation-tree
   resource types); they used to run blue-is-active, which read backwards
   next to every other selector on the same page.

   Bootstrap 5 exposes custom properties for the ACTIVE pill only, so the
   inactive treatment needs the explicit :not(.active) rules — mirroring
   how .nav-tabs is written. */
.nav-pills {
    --bs-nav-link-color: var(--ncar-blue);
    --bs-nav-link-hover-color: var(--ncar-navy);
    --bs-nav-pills-link-active-color: var(--ncar-blue);
    --bs-nav-pills-link-active-bg: #fff;
}

.nav-pills .nav-link:not(.active) {
    background-color: var(--ncar-blue);
    color: #fff;
}

.nav-pills .nav-link:not(.active):hover {
    background-color: var(--ncar-navy);
    color: #fff;
}

/* Counter badges sit inside pills whose background flips with state, so they
   have to flip too — a stock .bg-light badge vanishes on the white active
   pill. Both declarations need !important: the background beats .badge.bg-X
   (same as the tinted badge palette further down this file) and the color
   beats the .text-dark / .text-* utilities, which Bootstrap ships as
   !important. Callers therefore don't have to strip those utilities off
   badges they drop into a pill. */
.nav-pills .nav-link:not(.active) .badge {
    background-color: #fff !important;
    color: var(--ncar-blue) !important;
}

.nav-pills .nav-link.active .badge {
    background-color: var(--ncar-blue) !important;
    color: #fff !important;
}

.nav-tabs {
    border-bottom: 0;
    /* Never wrap to a second row — horizontal scroll if necessary. Explicitly
       clamp overflow-y to hidden: setting only overflow-x:auto causes the
       browser to also force overflow-y:auto (CSS spec quirk — the orthogonal
       axis can't stay `visible` when one axis is scrollable), which produces
       a stray 1px vertical scrollbar from sub-pixel layout rounding. */
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

.nav-tabs .nav-item {
    flex-shrink: 0;
    font-size: 1rem !important;
    font-weight: 600;
    color: var(--ncar-blue);
}

/* When tabs are followed by tab-content, kill any mb-* utility margin so the
   active tab attaches seamlessly to the panel below. !important matches
   Bootstrap utility specificity. */
.nav-tabs:has(+ .tab-content) {
    margin-bottom: 0 !important;
}

/* Bootstrap's .card-header-tabs pulls the strip down over the header's cap
   padding with a negative bottom margin — correct only when the tabs are the
   header's LAST child. The usage card puts a custom date-range row after
   them, and that negative margin dropped the tab bottoms ~16px into a ~30px
   row, overlapping the range readout by half. Reset it whenever something
   follows; the seamless-attach case above is unaffected because tab-content
   is a sibling of the strip, not part of the header. */
.card-header-tabs:not(:last-child) {
    margin-bottom: 0;
}

.nav-tabs .nav-link {
    color: var(--ncar-blue);
    font-weight: var(--font-weight-semi-bold);
    background-color: #fff;
    border: none;
    border-radius: 0;
    padding: 1.125rem 1.875rem;
    transition: background-color var(--transition-base), color var(--transition-base);
}

.nav-tabs .nav-link:not(.active) {
    background-color: var(--ncar-blue);
    color: #fff;
}

.nav-tabs .nav-link:not(.active):hover {
    background-color: var(--ncar-navy);
    color: #fff;
    border-color: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--ncar-blue);
    background-color: #fff;
    border: none;
}

/* Tab content panel — flat white surface attached to .nav-tabs above, matching
   Unity's seamless tab→panel transition. No borders — content just flows. */
.tab-content {
    background-color: #fff;
    padding: 1.25rem;
}

/* ============================================================================
   JOB FACET CHIPS — the live value-count strip between the jobs explorer's
   filter panel and its tab strip (_jobs_facet_chips.html).

   One grid row per dimension: the label column self-sizes to the widest
   label and the values wrap inside their own cell, so "Exit code" can
   never end up mid-line with its chips orphaned under "QoS". White
   surface with the bottom edge open, so the strip reads as the top of the
   card the .nav-tabs below continue.
   ========================================================================= */

.jobs-facets {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 0.75rem;
    row-gap: 0.375rem;
    align-items: baseline;
    padding: 0.625rem 0.875rem;
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-bottom: 0;
}

.jobs-facet-label {
    justify-self: end;
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: var(--font-weight-semi-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ncar-gray);
}

.jobs-facet-values {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

/* Deliberately not a .btn. The Unity button treatment above (uppercase,
   700 weight, 3px border, 1.25rem type) is right for an action and far
   too loud for two dozen read-mostly value tokens — and its uppercasing
   would misreport identifiers, the same reason .btn code carves itself
   out. These stay <button>s for the keyboard and for the shared
   set-filter-submit action; only the styling opts out. */
.facet-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.375rem;
    padding: 0.125rem 0.5rem;
    background-color: var(--bg-gray-light);
    border: 1px solid var(--border-color);
    color: var(--text-dark);
    /* Both inherited from .btn until now: a bare <button> takes the
       system UI font and the default arrow cursor. */
    cursor: pointer;
    font-family: inherit;
    font-size: 0.8125rem;
    line-height: 1.6;
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast);
}

.facet-chip:hover {
    background-color: #fff;
    border-color: var(--ncar-blue);
    color: var(--ncar-blue);
}

.facet-chip:focus-visible {
    outline: 2px solid var(--ncar-blue);
    outline-offset: 1px;
}

/* Counts are a secondary reading — subdued, and tabular so a column of
   chips doesn't jitter as the digits change. */
.facet-chip-count {
    font-size: 0.75rem;
    color: var(--ncar-gray);
    font-variant-numeric: tabular-nums;
}

.facet-chip.is-active {
    background-color: var(--ncar-blue);
    border-color: var(--ncar-blue);
    color: #fff;
}

.facet-chip.is-active .facet-chip-count {
    color: rgba(255, 255, 255, 0.75);
}

/* Phones: the label column costs more than it aligns — give each
   dimension its own line above its values. */
@media (max-width: 575.98px) {
    .jobs-facets {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0.125rem;
    }

    .jobs-facet-label {
        justify-self: start;
    }

    .jobs-facet-label:not(:first-child) {
        margin-top: 0.375rem;
    }
}

/* ============================================================================
   FILTER SIDEBAR — Unity NCAR navy panel for any filter form on the site.
   Defined here (not allocations.css) so it's available on every page.
   ========================================================================= */

.filter-sidebar {
    background-color: var(--ncar-navy);
    color: #fff;
    padding: 1.5rem;
}

.filter-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    /* Negative horizontal margin cancels .filter-sidebar's 1.5rem padding so
       the divider spans the full panel width; inner padding re-establishes
       the text inset. */
    margin: 0 -1.5rem 1.25rem;
    padding: 0 1.5rem 0.75rem;
    border-bottom: 1px solid var(--ncar-gray-light);
}

/* Selector needs to beat .main-content h2 (specificity 0,1,1) — chain the
   parent class so we hit 0,2,1 and the gold color wins over navy-on-navy.
   Fixed 1rem font keeps it from inheriting the giant h2 desktop scale. */
.filter-sidebar .filter-sidebar-title {
    color: var(--ncar-gold);
    font-size: 1rem;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

/* Collapsible filter panels: the "Filters" title is a collapse toggle.
   The toggle is the title only — NOT the whole header row — because the
   Bootstrap collapse data-api handles clicks in the capture phase, so the
   sibling "Clear filters" link could never stopPropagation out of a
   row-level toggle. Chevron tracks aria-expanded, which Bootstrap
   maintains on the toggle. */
.filter-sidebar-toggle {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}

.filter-sidebar-chevron {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.filter-sidebar-toggle[aria-expanded="false"] .filter-sidebar-chevron {
    transform: rotate(-90deg);
}

/* Collapsed panel: drop the divider and reclaim the header's bottom
   margin so the closed state reads as a tidy title bar rather than an
   empty box. (During the .collapsing animation neither state matches —
   the margin snaps when the transition ends, which reads fine.) */
.filter-sidebar-header:has(+ .collapse:not(.show)) {
    border-bottom: none;
    margin-bottom: -0.75rem;
}

.filter-sidebar-clear {
    color: #fff;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    font-weight: var(--font-weight-semi-bold);
}

.filter-sidebar-clear:hover {
    color: var(--ncar-sky);
}

.filter-sidebar .form-label,
.filter-sidebar .form-check-label {
    color: #fff;
}

.filter-sidebar .form-text {
    color: rgba(255, 255, 255, 0.7);
}

.filter-sidebar select,
.filter-sidebar input[type="date"],
.filter-sidebar input[type="text"],
.filter-sidebar input[type="search"],
.filter-sidebar input[type="email"],
.filter-sidebar input[type="number"] {
    background-color: #fff;
    color: var(--ncar-space-blue);
}

.filter-sidebar input::placeholder {
    color: var(--ncar-gray);
}

/* fk-pickers embedded in a horizontal align-items-end filter row (jobs +
   disk-scans panels, which pass wrapper_class='' to drop the stacked-form
   mb-3): the empty typeahead dropdown's mt-1 still makes the cell 4px
   taller than its siblings, floating the picker's label above the other
   columns' labels. !important is required to beat the utility class. */
.filter-sidebar .align-items-end .fk-picker-results:empty {
    margin-top: 0 !important;
}

/* On phones the horizontal filter rows wrap into a ragged multi-column mess:
   stack every field full-width instead. !important is required to beat the
   inline style="width:###px" attributes that size the fields on desktop
   (audit_filters.html, allocations/projects.html, admin/projects.html). */
@media (max-width: 575.98px) {
    .filter-sidebar .d-flex.flex-wrap > div {
        width: 100%;
    }

    .filter-sidebar input.form-control,
    .filter-sidebar select.form-control,
    .filter-sidebar select.form-select {
        width: 100% !important;
    }
}

/* ============================================================================
   PROJECT CARDS (User Dashboard Specific)
   ========================================================================= */

.project-card {
    margin-bottom: 0px !important;
}

/* Project-card headers follow the same invert pattern as .nav-tabs and
   .btn-group toggles: collapsed (inactive) = solid NCAR blue + white text,
   expanded (active) = white + blue text. Matches Unity's tab/accordion
   convention. Badge children keep their own subtle palette — only the
   title text, icons, and chevron flip with the header state. */
.project-card .card-header {
    cursor: pointer;
    user-select: none;
    padding: 16px;
    background-color: var(--bg-light);
    color: var(--ncar-blue);
    border-bottom: 1px solid #dee2e6;
    transition: background-color var(--transition-base), color var(--transition-base);
}

/* Force the title's folder icon (.text-primary overrides default inheritance)
   and the chevron to flip with the header. !important needed to win against
   the .text-primary utility class on the icon. */
.project-card .card-header h5 i,
.project-card .card-header .accordion-chevron {
    color: var(--ncar-space-blue) !important;
}

/* Match Unity's .accordion-button: fixed 1rem font, semi-bold, single weight
   (the inner <strong> tag inherits so the title stays one consistent weight). */
.project-card .card-header h5 {
    font-size: 1rem;
    line-height: 1.5;
    font-weight: var(--font-weight-semi-bold);
    color: inherit;
}

.project-card .card-header h5 strong {
    font-weight: inherit;
}

/* Expanded (active) state: white surface with blue text — the "settled" look
   matching .nav-tabs.active and .btn-group .btn-secondary.active. */
.project-card .card-header[aria-expanded="true"] {
    background-color: var(--ncar-blue);
    color: #fff;
    border-bottom-color: var(--ncar-gray-light);
}

.project-card .card-header[aria-expanded="true"] h5 i,
.project-card .card-header[aria-expanded="true"] .accordion-chevron {
    color: #fff !important;
}

/* Accordion chevron — reusable affordance for any collapsible header.
   Rotates 180° when the parent toggle is expanded. */
.accordion-chevron {
    transition: transform var(--transition-base);
}

[aria-expanded="true"] .accordion-chevron {
    transform: rotate(180deg);
}

/* Fluid 1800px cap: smoother than Bootstrap's stepped .container breakpoints
   on laptop/desktop, without stretching to ultra-wide monitor edges.  Used
   on navbar, flash messages, footer, and any content block that opts in via
   the content_container_class block override. */
.sam-fluid-1800 {
    max-width: 88.25rem;
    margin-left: auto;
    margin-right: auto;
}

.project-stats-box {
    background-color: var(--bg-gray-light);
    border-radius: 0;
    padding: 12px 16px;
    margin-bottom: 16px;
    border-left: 4px solid var(--ncar-blue);
    /* Paired auto/1fr tracks per column so labels share a per-column auto
       width and values start at a consistent x-position within each column.
       Stat-items use display:contents so their label+value become direct
       children of this grid. Column count steps by breakpoint. */
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 24px;
    row-gap: 0;
    transition: all var(--transition-base);
}

@media (min-width: 768px) {
    .project-stats-box {
        grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
    }
}

@media (min-width: 1200px) {
    .project-stats-box {
        grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    }
}

.project-stats-box:hover {
    border-left-color: var(--ncar-navy);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.project-stats-box h6 {
    color: var(--ncar-navy);
    font-weight: 700;
    margin-bottom: 6px;
    font-size: 0.9rem;
    text-transform: uppercase;
    grid-column: 1 / -1;
    letter-spacing: 0.5px;
}

/* Single-line stat-items dissolve into the parent grid so labels share
   auto-tracks within each column (see .project-stats-box above). */
.stat-item {
    display: contents;
}

.stat-item > .stat-label,
.stat-item > .stat-value {
    padding: 2px 0;
}

.stat-item > .stat-label {
    padding-right: 0.5rem;
}

/* Multi-line items (Organizations, Contracts, Directories) opt back out
   of display:contents so they can span all columns of the parent grid.
   Tighter top margin than Bootstrap's .mt-2 to keep the box compact. */
.stat-item-block {
    display: block;
    grid-column: 1 / -1;
    padding: 2px 0;
    margin-top: 4px !important;
}

.stat-label {
    color: var(--ncar-gray);
    font-weight: var(--font-weight-semi-bold);
}

.stat-value {
    font-weight: 700;
    color: var(--ncar-navy);
}

/* ============================================================================
   PROJECT TREE (Hierarchy Display)
   ========================================================================= */

.tree-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.tree-list ul {
    list-style: none;
    padding-left: 30px;
    margin: 8px 0;
}

.tree-list li {
    padding: 8px 12px;
    margin: 4px 0;
    background: var(--bg-gray-light);
    border-left: 3px solid var(--ncar-blue);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.tree-list li:hover {
    background: var(--bg-gray-medium);
    border-left-color: var(--ncar-navy);
    transform: translateX(2px);
}

.tree-list li strong {
    color: var(--ncar-navy);
    font-weight: 700;
}

/* ============================================================================
   COLLAPSIBLE SECTIONS
   ========================================================================= */

.collapse-toggle {
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid var(--ncar-gray-light);
}

.collapse-toggle::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    float: right;
    transition: transform var(--transition-base);
}

.collapse-toggle.collapsed::after {
    transform: rotate(-90deg);
}

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

.form-control:focus {
    border-color: var(--ncar-blue);
    box-shadow: 0 0 0 0.2rem rgba(var(--ncar-teal-rgb), 0.25);
}

.form-label {
    font-weight: 600;
    color: var(--ncar-navy);
    margin-bottom: 0.5rem;
}

.input-group-text {
    background-color: var(--ncar-blue);
    color: white;
    border: none;
    font-weight: 600;
}

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

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

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

.text-muted-custom {
    color: var(--ncar-gray) !important;
}

.border-ncar-blue {
    border-color: var(--ncar-blue) !important;
}

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

/* Text color utilities for table cells */
.text-primary {
    color: var(--ncar-blue) !important;
}

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

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

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

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================= */

@media (max-width: 768px) {
    .page-header h1 {
        font-size: 1.75rem;
    }

    .navbar-brand {
        font-size: 1.5rem;
    }

    .card-body {
        padding: 16px;
    }

    .project-stats-box {
        padding: 12px;
        /* Stack single-column on tablet/mobile — one auto/1fr pair. */
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 16px;
    }

    .table {
        font-size: 0.875rem;
    }
}

@media (max-width: 576px) {

    .page-header {
        margin-bottom: 20px;
    }
}

/* ===================================================================
   Chart container — global centering for SVG charts.
   Allocations dashboard further constrains pies to 720px in
   allocations.css, which is loaded after this file on those pages.
   =================================================================== */
.chart-container {
    text-align: center;
}

.chart-container svg {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

/* Disk-scans entity pie (By User / By Group tab). matplotlib renders it at a
   ~670px native width (≈ half the card); scale it up to read better without
   going full width. Centered by the wrapper's flex justify-content. */
.disk-entity-pie svg {
    width: 100%;
    max-width: 880px;
    height: auto;
}

/* ============================================================================
   MUTED BADGE PALETTE — saturated Bootstrap defaults (bg-primary/info/success/
   warning/danger) read as aggressive next to the flat Unity surfaces, especially
   when a dozen+ badges stack on a single line (group memberships, permissions,
   etc.). Override the .badge .bg-X compound so badges adopt the subtle/tinted
   palette Bootstrap 5.3 already ships (--bs-X-bg-subtle / -text-emphasis /
   -border-subtle). Scoped to .badge so non-badge .bg-X usages (progress bar
   fills, alert backgrounds, status indicators) keep their existing styling.
   The !important is required to beat Bootstrap's own .bg-X !important.
   ========================================================================= */
.badge.bg-primary,
.badge.bg-info,
.badge.bg-success,
.badge.bg-warning,
.badge.bg-danger {
    font-weight: var(--font-weight-semi-bold);
    border: 1px solid;
}

.badge.bg-primary {
    background-color: var(--bs-primary-bg-subtle) !important;
    color: var(--bs-primary-text-emphasis) !important;
    border-color: var(--bs-primary-border-subtle);
}

.badge.bg-info {
    background-color: var(--bs-info-bg-subtle) !important;
    color: var(--bs-info-text-emphasis) !important;
    border-color: var(--bs-info-border-subtle);
}

.badge.bg-success {
    background-color: var(--bs-success-bg-subtle) !important;
    color: var(--bs-success-text-emphasis) !important;
    border-color: var(--bs-success-border-subtle);
}

.badge.bg-warning {
    background-color: var(--bs-warning-bg-subtle) !important;
    color: var(--bs-warning-text-emphasis) !important;
    border-color: var(--bs-warning-border-subtle);
}

.badge.bg-danger {
    background-color: var(--bs-danger-bg-subtle) !important;
    color: var(--bs-danger-text-emphasis) !important;
    border-color: var(--bs-danger-border-subtle);
}