/* ===================================================
   New Heights Case Management System - Brand Styles
   Colors: Yellow (#FFC40C), Navy (#1B2D5A)
   =================================================== */

/* Wave 7 (2026-07-27): Poppins self-hosted (was a Google Fonts @import — an
   external dependency and worst-case serialized font chain from school
   networks). Files vendored from @fontsource/poppins (OFL license). */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/poppins-latin-500-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/poppins-latin-600-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/poppins-latin-700-normal.woff2') format('woff2');
}

/* Lock the page — no horizontal scroll at any level. html only: body
   used to carry the same overflow-x, which (with no overflow-y set on either)
   made BOTH html and body independent non-visible-overflow scroll boxes.
   The viewport scroll belongs to html alone (confirmed: document.scrollingElement
   is html); body having its own overflow turned it into a second, invisible
   scroll container that every position:sticky sidebar and topbar (every
   console shares .sidebar/.topbar from this file) was sticking relative to
   instead of the real viewport - since body's own box never scrolls (scrollTop
   stays 0), sticky had nothing to react to and just scrolled away with the
   page. 2026-09-23, Patrick: "the nav should extend, not scroll, when the
   page is longer than the nav." */
html {
    overflow-x: hidden !important;
    max-width: 100vw;
}

:root {
    /* Brand Colors */
    --nh-yellow: #FFC40C;
    --nh-navy: #1B2D5A;
    --nh-navy-dark: #0F1A38;
    --nh-navy-light: #2A4070;

    /* New Heights 2026 brand standards (Karis). Applied to the core CMS
       chrome only — isolated consoles (C&C, Admissions, ID Card) are scoped
       under their own wrappers and never reference these tokens. */
    --nh-frank-blue: #02084B;        /* nav / structure / headings */
    --nh-frank-blue-dark: #01052F;   /* darker stop for the nav gradient */
    --nh-dynamic-blue: #057EE6;      /* interactive: links, primary buttons, progress */
    --nh-dynamic-blue-dark: #0466BC; /* hover/active for interactive */
    --nh-regale-blue: #A4CBFA;       /* light accents */
    --nh-confident-yellow: #FFCC00;  /* attention / follow-up accent */
    --nh-heading-font: "Poppins", "Aptos", "Segoe UI", system-ui, sans-serif;
    --nh-body-font: "Avenir", "Avenir Next", "Aptos", "Segoe UI", Tahoma, sans-serif;
    
    /* UI Colors */
    --primary-color: var(--nh-navy);
    --secondary-color: var(--nh-yellow);
    --accent-color: #4A90E2;
    
    /* Status Colors */
    --success-color: #28A745;
    --warning-color: #FFA500;
    --danger-color: #DC3545;
    --info-color: #17A2B8;
    
    /* Neutrals */
    --gray-50: #F8F9FA;
    --gray-100: #E9ECEF;
    --gray-200: #DEE2E6;
    --gray-300: #CED4DA;
    --gray-400: #ADB5BD;
    --gray-500: #6C757D;
    --gray-600: #495057;
    --gray-700: #343A40;
    --gray-800: #212529;
    
    /* Layout */
    --sidebar-width: 180px;
    --topbar-height: 64px;
    --border-radius: 8px;
    --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --box-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);
    
    /* Typography */
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-size-base: 14px;
    --font-size-sm: 12px;
    --font-size-lg: 16px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
}

/* ===================================================
   Global Styles
   =================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--gray-800);
    background-color: var(--gray-50);
    line-height: 1.6;
}

/* ===================================================
   Layout Components
   =================================================== */

.app-container {
    display: flex;
    min-height: 100vh;
    /* overflow-x:hidden used to live here too. With overflow-y left unset ("visible"),
       the CSS overflow spec forces the visible axis to compute as "auto" whenever
       the other axis is non-visible - so this rule silently turned .app-container
       into its own scroll box as well, breaking .sidebar's position:sticky the
       same way the html/body rule did (see above). html's overflow-x:hidden plus
       .content-area's own overflow-x:auto (below) already contain wide content;
       verified live on /interactions (44k-row table) with no horizontal scrollbar
       after removing this. */
}

/* Sidebar — sticky to the viewport with the header pinned and the nav
   list scrolling internally when items overflow the available height.
   Replaces an earlier min-height:100vh approach that grew the page and
   cut items off on shorter monitors after the nav reorg added groups. */
.sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--nh-frank-blue-dark) 0%, var(--nh-frank-blue) 100%);
    color: white;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 1000;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.sidebar-header {
    padding: 14px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.sidebar-logo {
    height: 40px;
    width: auto;
}

.sidebar-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: white;
}

.sidebar-nav {
    padding: 8px 0;
    flex: 1;
    overflow-y: auto;
    /* Subtle scrollbar styling so it doesn't feel intrusive on the dark sidebar. */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.sidebar-nav::-webkit-scrollbar {
    width: 6px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 3px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.45);
}

.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.nav-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-item {
    padding: 10px 14px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s;
    border-left: 3px solid transparent;
    font-size: 13px;
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-left-color: var(--nh-confident-yellow);
}

.nav-item.active {
    background: rgba(255, 204, 0, 0.16);
    color: white;
    border-left-color: var(--nh-confident-yellow);
    font-weight: 600;
}

.nav-icon {
    width: 20px;
    height: 20px;
    opacity: 0.8;
}

/* Main Content — sidebar is now in flex flow, so margin-left is no longer
   needed. flex: 1 fills the remaining row width; min-width: 0 lets flex
   shrink the column so wide tables can't force the row past 100vw. */
.main-content {
    flex: 1;
    min-width: 0;
    max-width: calc(100vw - var(--sidebar-width));
    /* overflow-x:hidden removed 2026-09-23 - same sticky-breaking mismatch as
       .app-container above (this rule left overflow-y unset, forcing it to
       "auto" and making .main-content a scroll box, which broke .topbar's
       position:sticky). max-width already caps this column's width; .content-area's
       overflow-x:auto (below) catches any wide child before it reaches here. */
    display: flex;
    flex-direction: column;
}

.topbar {
    height: var(--topbar-height);
    background: white;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 900;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.page-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--nh-frank-blue);
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.campus-selector {
    padding: 8px 16px;
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    background: white;
    cursor: pointer;
    min-width: 180px;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background 0.2s;
}

.user-profile:hover {
    background: var(--gray-100);
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--nh-navy);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.content-area {
    flex: 1;
    min-width: 0;
    width: 100%;                 /* fill parent, never exceed */
    padding: 4px 8px;
    overflow-y: auto;
    overflow-x: auto;            /* horizontal scroll for wide tables */
}

/* ===================================================
   Dashboard Widgets
   =================================================== */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
}

.widget {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 20px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.widget:hover {
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-lg);
}

.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.widget-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--nh-navy);
}

.widget-menu {
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background 0.2s;
}

.widget-menu:hover {
    background: var(--gray-100);
}

/* Metric Widget */
.metric-widget {
    text-align: center;
}

.metric-value {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--nh-navy);
    margin: 12px 0;
}

.metric-label {
    font-size: var(--font-size-sm);
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metric-change {
    font-size: var(--font-size-sm);
    margin-top: 8px;
    font-weight: 600;
}

.metric-change.positive {
    color: var(--success-color);
}

.metric-change.negative {
    color: var(--danger-color);
}

/* Chart Widget */
.chart-widget {
    min-height: 300px;
}

.chart-container {
    width: 100%;
    height: 250px;
}

/* List Widget */
.list-widget-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.list-widget-item:last-child {
    border-bottom: none;
}

/* ===================================================
   Cards & Components
   NOTE: Do NOT override .card, .card-header, .card-body
   globally — Bootstrap uses these. Use .widget for
   custom-styled cards instead.
   =================================================== */

.card-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--nh-navy);
}

/* Student Card */
.student-card {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: white;
    border-radius: var(--border-radius);
    border: 1px solid var(--gray-200);
    margin-bottom: 12px;
    transition: all 0.2s;
    cursor: pointer;
}

.student-card:hover {
    border-color: var(--nh-yellow);
    box-shadow: var(--box-shadow);
}

.student-photo {
    width: 64px;
    height: 64px;
    border-radius: var(--border-radius);
    object-fit: cover;
    background: var(--gray-200);
}

.student-info {
    flex: 1;
}

.student-name {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--nh-navy);
    margin-bottom: 4px;
}

.student-number {
    font-size: var(--font-size-sm);
    color: var(--gray-500);
    margin-bottom: 8px;
}

.student-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ===================================================
   Buttons
   =================================================== */

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary {
    background: var(--nh-navy);
    color: white;
}

.btn-primary:hover {
    background: var(--nh-navy-light);
}

.btn-secondary {
    background: var(--nh-yellow);
    color: var(--nh-navy);
}

.btn-secondary:hover {
    background: #FFD54F;
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--nh-navy);
    color: var(--nh-navy);
}

.btn-outline:hover {
    background: var(--nh-navy);
    color: white;
}

.btn-sm {
    padding: 6px 12px;
    font-size: var(--font-size-sm);
}

.btn-lg {
    padding: 14px 28px;
    font-size: var(--font-size-lg);
}

/* ===================================================
   Badges & Tags
   =================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    gap: 4px;
}

.badge-success {
    background: rgba(40, 167, 69, 0.1);
    color: var(--success-color);
}

.badge-warning {
    background: rgba(255, 165, 0, 0.1);
    color: var(--warning-color);
}

.badge-danger {
    background: rgba(220, 53, 69, 0.1);
    color: var(--danger-color);
}

.badge-info {
    background: rgba(23, 162, 184, 0.1);
    color: var(--info-color);
}

.badge-primary {
    background: rgba(27, 45, 90, 0.1);
    color: var(--nh-navy);
}

/* ===================================================
   Forms
   =================================================== */

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--gray-700);
}

.form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    transition: border-color 0.2s;
}

.form-control:focus {
    outline: none;
    border-color: var(--nh-navy);
    box-shadow: 0 0 0 3px rgba(27, 45, 90, 0.1);
}

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23495057' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

textarea.form-control {
    min-height: 100px;
    resize: vertical;
}

/* ===================================================
   Tables
   =================================================== */

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th {
    background: var(--gray-100);
    color: var(--gray-700);
    font-weight: 600;
    text-align: left;
    padding: 12px;
    border-bottom: 2px solid var(--gray-300);
}

.table td {
    padding: 12px;
    border-bottom: 1px solid var(--gray-200);
}

.table tbody tr:hover {
    background: var(--gray-50);
}

/* Sortable Column Headers */
th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 22px !important;
    transition: background 0.15s;
}

th.sortable:hover {
    background: var(--gray-200);
}

th.sortable::after {
    content: '\2195'; /* ↕ up-down arrow */
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    opacity: 0.35;
}

th.sortable.sort-asc::after {
    content: '\25B2'; /* ▲ */
    opacity: 0.85;
    color: var(--nh-navy);
}

th.sortable.sort-desc::after {
    content: '\25BC'; /* ▼ */
    opacity: 0.85;
    color: var(--nh-navy);
}

/* Sort performance warning */
.sort-warning {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 12px;
    color: #7b6a1a;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ===================================================
   Alerts
   =================================================== */

.alert {
    padding: 16px;
    border-radius: var(--border-radius);
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.alert-success {
    background: rgba(40, 167, 69, 0.1);
    border-left: 4px solid var(--success-color);
    color: var(--success-color);
}

.alert-warning {
    background: rgba(255, 165, 0, 0.1);
    border-left: 4px solid var(--warning-color);
    color: #856404;
}

.alert-danger {
    background: rgba(220, 53, 69, 0.1);
    border-left: 4px solid var(--danger-color);
    color: var(--danger-color);
}

.alert-info {
    background: rgba(23, 162, 184, 0.1);
    border-left: 4px solid var(--info-color);
    color: #0C5460;
}

/* ===================================================
   Modals
   =================================================== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.modal {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--nh-navy);
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--gray-200);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* ===================================================
   Utilities
   =================================================== */

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--gray-500); }
.text-primary { color: var(--nh-navy); }
.text-secondary { color: var(--nh-yellow); }
.text-success { color: var(--success-color); }
.text-danger { color: var(--danger-color); }

.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }

.p-1 { padding: 8px; }
.p-2 { padding: 16px; }
.p-3 { padding: 24px; }

.d-flex { display: flex; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.gap-2 { gap: 16px; }

.rounded { border-radius: var(--border-radius); }
.shadow { box-shadow: var(--box-shadow); }

/* ===================================================
   Responsive
   =================================================== */

/* Eliminate Bootstrap container-fluid padding inside content area and prevent overflow */
.content-area .container-fluid {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
    overflow-x: hidden;
}

/* Pages that use mt-3 inside content-area — reduce top margin */
.content-area .container-fluid.mt-3 {
    margin-top: 4px !important;
}

/* Ensure tables scroll horizontally on any screen */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Mobile off-canvas nav controls — inert on desktop */
.cms-nav-toggle { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.cms-hamburger { display: none; }
.cms-scrim { display: none; }

@media (max-width: 1024px) {
    /* Sidebar becomes a fixed off-canvas drawer (removed from flow so it leaves
       no gap); the hamburger + #cms-nav-toggle checkbox slide it in, the scrim
       (or tapping a nav link) closes it. The legacy .sidebar.open class is kept
       working in case anything toggles it directly. */
    .app-container .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }

    .app-container > .cms-nav-toggle:checked ~ .sidebar,
    .app-container .sidebar.open {
        transform: translateX(0);
    }

    .app-container > .cms-nav-toggle:checked ~ .cms-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 950;
        background: rgba(2, 8, 75, 0.45);
        border: none;
        margin: 0;
        cursor: pointer;
    }

    .cms-hamburger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 8px;
        color: var(--nh-frank-blue);
        cursor: pointer;
        flex-shrink: 0;
        transition: background 0.15s;
    }

    .cms-hamburger:hover { background: var(--gray-100); }
    .cms-hamburger svg { width: 24px; height: 24px; }

    .main-content {
        margin-left: 0;
        max-width: 100vw;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .topbar {
        padding: 0 8px;
        gap: 8px;
    }

    .page-title {
        font-size: var(--font-size-lg);
    }

    .topbar-right {
        gap: 8px;
    }

    /* Non-essential on phones — the global student search and the user-name
       label are dropped to keep the topbar from crowding the hamburger. */
    .topbar-search {
        display: none;
    }

    .user-name {
        display: none;
    }

    .content-area {
        padding: 8px 12px;
    }

    .campus-selector {
        min-width: auto;
        width: 100%;
    }

    .topbar-right .campus-selector {
        min-width: 110px;
        width: auto;
    }
}

/* ===================================================
   New Heights 2026 brand application — CORE CMS ONLY
   Every rule below is scoped to .app-container (the MainLayout
   wrapper). The College & Career, Admissions, and ID Card consoles
   render under their own layouts (.cc-app / .adm-app / ID Card) and
   are NEVER inside .app-container, so none of this reaches them.
   Bootstrap's semantic status colors (success / danger / warning)
   are intentionally left untouched.
   =================================================== */

/* Typography: Avenir-stack body, Poppins headings */
.app-container {
    font-family: var(--nh-body-font);
}

.app-container h1, .app-container h2, .app-container h3,
.app-container h4, .app-container h5, .app-container h6,
.app-container .page-title, .app-container .sidebar-title,
.app-container .widget-title, .app-container .card-title,
.app-container .metric-value, .app-container .modal-title {
    font-family: var(--nh-heading-font);
}

/* Structural headings/titles on light surfaces → Frank Blue
   (.sidebar-title is excluded — it sits on the dark nav and stays white) */
.app-container .page-title, .app-container .widget-title,
.app-container .card-title, .app-container .metric-value,
.app-container .modal-title, .app-container .student-name {
    color: var(--nh-frank-blue);
}

/* Interactive: links + primary actions → Dynamic Blue.
   Scoped to .content-area so the white sidebar nav links are untouched;
   :not(.btn) leaves anchor-styled buttons (e.g. <a class="btn btn-success">)
   keeping their own text color. Bootstrap's !important text utilities
   (.text-danger etc.) still win over this, which is intended. */
.app-container .content-area a:not(.btn) {
    color: var(--nh-dynamic-blue);
}

.app-container .content-area a:not(.btn):hover {
    color: var(--nh-dynamic-blue-dark);
}

.app-container .btn-primary {
    background: var(--nh-dynamic-blue);
    border-color: var(--nh-dynamic-blue);
    color: #fff;
}

.app-container .btn-primary:hover,
.app-container .btn-primary:focus,
.app-container .btn-primary:active {
    background: var(--nh-dynamic-blue-dark);
    border-color: var(--nh-dynamic-blue-dark);
    color: #fff;
}

.app-container .btn-outline-primary {
    color: var(--nh-dynamic-blue);
    border-color: var(--nh-dynamic-blue);
}

.app-container .btn-outline-primary:hover {
    background: var(--nh-dynamic-blue);
    border-color: var(--nh-dynamic-blue);
    color: #fff;
}

/* Bootstrap utility overrides (utilities use !important, so match it) */
.app-container .text-primary {
    color: var(--nh-dynamic-blue) !important;
}

.app-container .bg-primary {
    background-color: var(--nh-frank-blue) !important;
}

/* Active tabs + focused inputs pick up the interactive blue */
.app-container .nav-tabs .nav-link.active {
    color: var(--nh-frank-blue);
    border-bottom: 2px solid var(--nh-dynamic-blue);
}

.app-container .form-control:focus,
.app-container .form-select:focus {
    border-color: var(--nh-dynamic-blue);
    box-shadow: 0 0 0 0.2rem rgba(5, 126, 230, 0.20);
}

/* ===================================================
   Team palette tokens (2026-09-18, track features).
   One colour family per team on the Tailwind scale.
     -deep   = 950, console sidebar background (white text AAA)
     -accent = 600/700, hub card border + headings ON WHITE
     -nav    = 400, active nav item + icons INSIDE the dark sidebar
   The -accent step does NOT survive on its own sidebar (7 of 11
   fall below 3:1), which is why -nav exists. Do not collapse them.
   Advising keeps Frank Blue as its -deep (Patrick, 2026-09-18).
   Reserved and unused here: green = completion, red = high risk,
   Confident Yellow = attention.
   =================================================== */
:root {
    --team-admin-deep:         #020617;
    --team-admin-accent:       #475569;
    --team-admin-nav:          #94A3B8;
    --team-admissions-deep:    #083344;
    --team-admissions-accent:  #0891B2;
    --team-admissions-nav:     #22D3EE;
    --team-advising-deep:      #02084B;
    --team-advising-accent:    #2563EB;
    --team-advising-nav:       #60A5FA;
    --team-alumni-deep:        #082F49;
    --team-alumni-accent:      #0284C7;
    --team-alumni-nav:         #38BDF8;
    --team-collegecareer-deep:   #1E1B4B;
    --team-collegecareer-accent: #4F46E5;
    --team-collegecareer-nav:    #818CF8;
    --team-curriculum-deep:    #0B3D39;
    --team-curriculum-accent:  #0F766E;
    --team-curriculum-nav:     #2DD4BF;
    --team-idcard-deep:        #2E1065;
    --team-idcard-accent:      #7C3AED;
    --team-idcard-nav:         #A78BFA;
    --team-leadership-deep:    #D4AF37;
    --team-leadership-accent:  #B8860B;
    --team-leadership-nav:     #02084B;
    --team-registrar-deep:     #3B0764;
    --team-registrar-accent:   #9333EA;
    --team-registrar-nav:      #C084FC;
    --team-rollcall-deep:      #1C1917;
    --team-rollcall-accent:    #57534E;
    --team-rollcall-nav:       #A8A29E;
    --team-sped-deep:          #500724;
    --team-sped-accent:        #DB2777;
    --team-sped-nav:           #F472B6;
}