/* ============================================================
   ServePoint HUD THEME (GLOBAL) — Token-First + Organized
   ============================================================ */

/* ============================================================
   1) TOKENS
   ============================================================ */
:root {
    /* Background */
    --bg0: #050708;
    --bg1: #071012;
    /* Surfaces */
    --surface-0: rgba(0, 0, 0, 0.10); /* subtle fill */
    --surface-1: rgba(5, 10, 11, 0.62); /* cards/panels */
    --surface-2: rgba(6, 18, 18, 0.95); /* sidebar/offcanvas */
    --surface-3: rgba(10, 22, 24, 0.55); /* hud panel */
    /* Text */
    --ink: rgba(235,255,250,.92);
    --muted: rgba(235,255,250,.62);
    --muter: rgba(235,255,250,.45);
    /* Fonts */
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
    /* Accent */
    --accent: #7fffe6;
    --accent2: #b6fff1;
    --accent-soft: rgba(127,255,230,.08);
    --accent-soft2: rgba(127,255,230,.12);
    --accent-border: rgba(127,255,230,.18);
    --accent-strong: rgba(127,255,230,.28);
    --accent-ring: rgba(127,255,230,.22);
    /* Lines / borders */
    --line: rgba(160,255,232,.18);
    --line2: rgba(160,255,232,.10);
    --border-subtle: rgba(127,255,230,.10);
    --border: rgba(127,255,230,.12);
    --border-strong: rgba(127,255,230,.35);
    /* Status */
    --warn: #ffd46a;
    /* Danger (slightly easier to see, not neon) */
    --danger: #ff7b7b;
    --danger-border: rgba(255,123,123,.55);
    --danger-bg: rgba(255,123,123,.10);
    --danger-glow: 0 0 14px rgba(255,123,123,.10);
    /* Compatibility aliases (so older rules don’t break) */
    --bad: var(--danger);
    --bad-border: var(--danger-border);
    --bad-bg: var(--danger-bg);
    --bad-glow: var(--danger-glow);
    /* Effects */
    --radius: 14px;
    --radius-sm: 10px;
    --shadow: 0 18px 60px rgba(0,0,0,.55);
    --glow: 0 0 22px rgba(127,255,227,.16);
    --glow-soft: 0 0 18px rgba(127,255,230,.08);
    --glow-hover: 0 0 18px rgba(127,255,230,.08);
    --glow-active: 0 0 18px rgba(127,255,230,.12);
    /* HUD primitives */
    --hud-bg: rgba(7, 16, 18, 0.92);
    --hud-panel: var(--surface-3);
    --hud-border: rgba(127, 255, 230, 0.22);
    --hud-border-strong: rgba(127, 255, 230, 0.35);
    --hud-glow: 0 0 0 1px var(--hud-border), var(--glow-soft);
    /* Grid/scanlines */
    --grid-x: rgba(160,255,232,.08);
    --grid-y: rgba(160,255,232,.06);
    --scan: rgba(255,255,255,.05);
    /* Bootstrap link vars (force HUD) */
    --bs-link-color: rgba(127,255,230,0.85);
    --bs-link-hover-color: rgba(127,255,230,1);
    /*Glass Buttons*/
    --glass-btn-text-color: 230, 241, 240;
    --glass-btn-blue: 0, 123, 255;
    --glass-btn-green: 34, 197, 94;
    --glass-btn-red: 220, 53, 69;
    --glass-btn-yellow: 255, 193, 7;
    --glass-btn-fill-alpha: 0.35;
    --glass-btn-border-alpha: 0.90;
    --glass-btn-hvr-fill-alpha: 0.55;
    --glass-btn-hvr-border-alpha: 1;
    --muted-teal-white-green: 77, 191, 166;
}

/* ============================================================
   2) BASE + BACKGROUND FX
   ============================================================ */
html, body {
    height: 100%;
}

body {
    margin: 0;
    background: var(--bg0);
    color: var(--ink);
    font-family: var(--sans);
}

    /* HUD background + grid + scanlines across the WHOLE APP */
    body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -2;
        background: radial-gradient(1200px 700px at 25% 15%, rgba(127,255,227,.10), transparent 60%), radial-gradient(900px 600px at 80% 0%, rgba(127,255,227,.06), transparent 55%), linear-gradient(180deg, var(--bg1), var(--bg0));
    }

    body::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background: linear-gradient(to right, var(--grid-x) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(to bottom, var(--grid-y) 1px, transparent 1px) 0 0 / 56px 56px, repeating-linear-gradient(to bottom, var(--scan) 0px, var(--scan) 1px, transparent 3px, transparent 7px);
        opacity: .35;
        mix-blend-mode: screen;
    }

/* ============================================================
   3) GLOBAL LINKS (KILL BOOTSTRAP BLUE)
   ============================================================ */
a, a:visited {
    color: var(--bs-link-color) !important;
    text-decoration: none !important;
}

    a:hover, a:focus {
        color: var(--bs-link-hover-color) !important;
        text-shadow: 0 0 14px rgba(127,255,230,.55);
        text-decoration: none !important;
    }

    /* Bootstrap "make it blue" utilities */
    .link-primary,
    .text-primary,
    a.text-primary,
    a.link-primary {
        color: var(--bs-link-color) !important;
    }

/* button-link */
.btn-link,
.btn.btn-link {
    color: var(--bs-link-color) !important;
    text-decoration: none !important;
}

    .btn-link:hover,
    .btn.btn-link:hover {
        color: var(--bs-link-hover-color) !important;
        text-shadow: 0 0 10px rgba(127,255,230,0.35);
    }

/* ============================================================
   4) TYPOGRAPHY
   ============================================================ */
h1, h2, h3 {
    font-family: var(--mono);
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--accent2);
    text-shadow: 0 0 18px rgba(127,255,227,.14);
}

/* ============================================================
   5) BOOTSTRAP OVERRIDES (CARDS / TABLES / BUTTONS / FORMS)
   ============================================================ */

/* Cards */
.card {
    background: var(--surface-1) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow), var(--glow) !important;
    overflow: hidden;
}

.card-header,
.card-footer {
    background: rgba(255,255,255,.03) !important;
    border-bottom: 1px solid var(--line2) !important;
    color: var(--ink) !important;
}

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

.card .text-muted,
.card small {
    color: var(--muted) !important;
    opacity: 1 !important;
}

/* Tables (kills white cells + black text) */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ink);
    --bs-table-striped-color: var(--ink);
    --bs-table-hover-color: var(--ink);
    --bs-table-striped-bg: rgba(127,255,230,.04);
    --bs-table-hover-bg: rgba(127,255,230,.06);
    color: var(--ink) !important;
}

    .table > :not(caption) > * > * {
        background-color: transparent !important;
        color: var(--ink) !important;
    }

    .table thead th {
        font-family: var(--mono);
        letter-spacing: .10em;
        text-transform: uppercase;
        font-size: .72rem;
        color: var(--muted) !important;
        background: rgba(255,255,255,.04) !important;
        border-bottom: 1px solid var(--line2) !important;
    }

    .table tbody td,
    .table tbody th {
        border-bottom: 1px solid var(--line2) !important;
    }

.table-hover tbody tr:hover > * {
    background-color: rgba(127,255,230,.06) !important;
    color: var(--ink) !important;
}

.table .text-muted,
.table small.text-muted {
    color: color-mix(in srgb, var(--ink) 65%, transparent) !important;
}

/* Buttons */
.btn {
    border-radius: var(--radius-sm) !important;
    font-family: var(--mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .82rem;
}

.btn-primary {
    background: rgba(127,255,230,.20) !important;
    border-color: rgba(127,255,230,.35) !important;
    color: var(--ink) !important;
}

    .btn-primary:hover {
        background: rgba(127,255,230,.30) !important;
    }

.btn-outline-secondary {
    border-color: rgba(160,255,232,.22) !important;
    color: var(--ink) !important;
}

    .btn-outline-secondary:hover {
        background: rgba(127,255,230,.08) !important;
    }

.btn-outline-danger {
    border-color: var(--danger-border) !important;
    color: color-mix(in srgb, var(--danger) 92%, white) !important;
}

    .btn-outline-danger:hover {
        background: var(--danger-bg) !important;
        box-shadow: var(--danger-glow) !important;
    }

/* Inputs */
.form-control,
.form-select,
textarea,
input {
    background: rgba(0,0,0,.35) !important;
    color: var(--ink) !important;
    border: 1px solid rgba(160,255,232,.20) !important;
    border-radius: var(--radius-sm) !important;
}

    .form-control:focus,
    .form-select:focus,
    textarea:focus,
    input:focus {
        outline: none;
        box-shadow: 0 0 0 .2rem rgba(127,255,230,.12) !important;
        border-color: rgba(127,255,230,.55) !important;
    }

::placeholder {
    color: var(--muter) !important;
}

/* Badges */
.badge {
    font-family: var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: 999px;
}

    .badge.bg-success {
        background: rgba(127,255,230,.18) !important;
        color: var(--accent2) !important;
    }

    .badge.bg-warning {
        background: rgba(255,212,106,.14) !important;
        color: var(--warn) !important;
    }

/* Alerts */
.alert {
    background: rgba(0,0,0,.40) !important;
    border: 1px solid var(--line2) !important;
    color: var(--ink) !important;
}

/* ============================================================
   6) SELECT DROPDOWNS (BEST-EFFORT)
   ============================================================ */
select,
.form-select {
    color-scheme: dark;
}

    .form-select,
    select.form-select {
        background-color: rgba(6, 18, 18, 0.65) !important;
        color: color-mix(in srgb, var(--ink) 92%, transparent) !important;
        border: 1px solid var(--border-strong) !important;
    }

        select.form-select option {
            background-color: rgba(6, 18, 18, 0.98);
            color: color-mix(in srgb, var(--ink) 92%, transparent);
        }

            select.form-select option:checked,
            select.form-select option:hover {
                background-color: rgba(127, 255, 230, 0.22) !important;
                color: color-mix(in srgb, var(--ink) 96%, transparent) !important;
            }

/* ============================================================
   7) SIDEBAR LAYOUT (NO MORE “SCROLL TO SEE FOOTER”)
   ============================================================ */
/*
    This section is the fix.
    - sidebar is 100vh flex column
    - nav-scrollable is the ONLY scroll area (and only when needed)
    - footer stack is pinned to bottom
*/
.sidebar {
    background: var(--surface-2) !important;
    border-right: 1px solid var(--border) !important;
    display: flex;
    flex-direction: column;
    height: 100vh; /* pin to viewport */
    overflow: hidden; /* IMPORTANT: prevents whole sidebar scrolling */
    box-sizing: border-box;
}

    /* top header area stays as-is; just ensure it doesn't force overflow */
    .sidebar .top-row {
        flex: 0 0 auto;
    }

    /* Main menu scroll area */
    .sidebar .nav-scrollable {
        flex: 1 1 auto;
        min-height: 0; /* CRITICAL: allows the flex child to shrink */
        overflow-y: auto; /* scroll only if menu is too tall */
        overflow-x: hidden;
    }

    /* Optional: make scrollbar minimal (won’t show unless needed) */
    .sidebar .nav-scrollable {
        scrollbar-width: thin;
        scrollbar-color: rgba(127,255,230,.35) transparent;
    }

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

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

        .sidebar .nav-scrollable::-webkit-scrollbar-thumb {
            background: rgba(127,255,230,.20);
            border: 2px solid transparent;
            background-clip: padding-box;
            border-radius: 999px;
        }

            .sidebar .nav-scrollable::-webkit-scrollbar-thumb:hover {
                background: rgba(127,255,230,.32);
                background-clip: padding-box;
            }

    /* Sidebar nav buttons (including footer About button) */
    .sidebar :is(.nav-scrollable a, .nav-scrollable .nav-link, nav a, nav .nav-link, .sp-sidebar-footer a, .sp-sidebar-footer .nav-link) {
        display: flex;
        align-items: center;
        gap: .55rem;
        text-decoration: none !important;
        color: color-mix(in srgb, var(--ink) 98%, transparent) !important;
        padding: .65rem .85rem;
        margin: .18rem .75rem;
        border-radius: var(--radius-sm);
        background: var(--surface-0);
        border: 1px solid var(--border-subtle);
        box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
    }

    .sidebar :is(.nav-scrollable a:hover, .nav-scrollable .nav-link:hover, nav a:hover, nav .nav-link:hover, .sp-sidebar-footer a:hover, .sp-sidebar-footer .nav-link:hover) {
        background: var(--accent-soft);
        border-color: var(--accent-border);
        box-shadow: 0 0 0 1px rgba(127,255,230,.14), var(--glow-hover);
    }

    .sidebar :is(.nav-scrollable a.active, .nav-scrollable .nav-link.active, nav a.active, nav .nav-link.active, .sp-sidebar-footer a.active, .sp-sidebar-footer .nav-link.active) {
        background: var(--accent-soft2);
        border-color: var(--accent-strong);
        box-shadow: 0 0 0 1px rgba(127,255,230,.22), var(--glow-active);
    }

    /* ============================================================
   8) FOOTER STACK (USER CARD + ABOUT) PINNED TO BOTTOM
   ============================================================ */
    .sidebar .sp-sidebar-footerstack {
        flex: 0 0 auto;
        margin-top: auto;
        padding: .75rem 0 calc(.75rem + env(safe-area-inset-bottom));
        border-top: 1px solid var(--border);
    }

        /* About button */
        .sidebar .sp-sidebar-footerstack .sp-sidebar-footer .nav-link {
            margin: 0 .75rem;
        }

    /* Prevent the user-card link from inheriting nav button styling */
    .sidebar .sp-usercard-link {
        display: block;
        margin: .25rem .75rem .75rem;
        text-decoration: none !important;
        color: inherit !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

/* ============================================================
   9) USER CARD (MATCH YOUR DRAWING)
   ============================================================ */
.sp-usercard {
    display: flex;
    flex-direction: column; /* <- stack */
    align-items: center;
    text-align: center;
    padding: 1.25rem 1rem;
    border-radius: 22px;
    background: rgba(0,0,0,.12);
    border: 1px solid rgba(127,255,230,.18);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}

/* Emblem: 150x150 centered */
.sp-usercard-emblem {
    width: 150px;
    height: 150px;
    object-fit: contain;
    opacity: .98;
    margin-bottom: .75rem;
}

/* Service name */
.sp-usercard-sub {
    font-family: var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .78rem;
    color: color-mix(in srgb, var(--ink) 85%, transparent);
    margin-bottom: .35rem;
}

/* User identity */
.sp-usercard-name {
    font-family: var(--mono);
    font-size: .80rem;
    letter-spacing: .06em;
    color: color-mix(in srgb, var(--ink) 95%, transparent);
}

/* Optional: if you put Logout INSIDE the card */
.sp-usercard .sp-usercard-actions {
    margin-top: .85rem;
    width: 100%;
    display: flex;
    justify-content: center;
}

    .sp-usercard .sp-usercard-actions .btn,
    .sp-usercard .sp-usercard-actions .nav-link {
        width: 80%;
        justify-content: center;
    }

/* ============================================================
   10) HAMBURGER (CLEAN, VISIBLE, CENTERED)
   ============================================================ */
.sidebar .navbar-toggler {
    width: 3.25rem;
    height: 2.5rem;
    border-radius: 10px;
    border: 1px solid rgba(127,255,230,.22);
    background-color: rgba(0,0,0,.22);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16' stroke='rgba(127,255,230,0.95)' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 1.35rem 1.35rem !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}

    .sidebar .navbar-toggler:hover {
        background-color: rgba(127,255,230,.08);
        border-color: rgba(127,255,230,.35);
        box-shadow: 0 0 0 1px rgba(127,255,230,.18), 0 0 14px rgba(127,255,230,.10);
    }

    .sidebar .navbar-toggler:checked {
        background-color: rgba(127,255,230,.14);
        border-color: rgba(127,255,230,.55);
    }

/* ============================================================
   11) OFFCANVAS / MODAL (EDIT OPPORTUNITY)
   ============================================================ */
.offcanvas,
.offcanvas-header,
.offcanvas-body {
    background: var(--surface-2) !important;
    color: var(--ink) !important;
    border-left: 1px solid var(--border) !important;
    box-shadow: -18px 0 60px rgba(0,0,0,.55) !important;
}

.modal-content {
    background: var(--surface-2) !important;
    color: var(--ink) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow), var(--glow) !important;
}

.offcanvas-title,
.modal-title,
.offcanvas h1, .offcanvas h2, .offcanvas h3,
.modal h1, .modal h2, .modal h3 {
    font-family: var(--mono);
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--accent2) !important;
    text-shadow: 0 0 18px rgba(127,255,227,.14);
}

.offcanvas .btn-close,
.modal .btn-close {
    filter: invert(1) grayscale(1);
    opacity: .75;
}

    .offcanvas .btn-close:hover,
    .modal .btn-close:hover {
        opacity: 1;
    }

/* ============================================================
   12) IDENTITY MANAGE (NAV-PILLS)
   ============================================================ */
.nav-pills .nav-link {
    color: var(--ink) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-sm) !important;
    transition: all .15s ease;
}

.nav-pills .nav-link:hover {
    background: var(--accent-soft) !important;
    border: 1px solid var(--accent-border) !important;
    box-shadow: 0 0 0 1px rgba(127,255,230,.14), var(--glow-hover);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: var(--accent2) !important;
    background: var(--accent-soft2) !important;
    border: 1px solid var(--accent-strong) !important;
    box-shadow: 0 0 0 1px rgba(127,255,230,.22), var(--glow-active);
}

/* ============================================================
   13) DANGER UTILS
   ============================================================ */
.sp-danger,
.badge.sp-danger,
.btn.sp-danger {
    border: 1px solid var(--danger-border) !important;
    color: color-mix(in srgb, var(--danger) 92%, white) !important;
}

    .sp-danger:hover {
        background: var(--danger-bg) !important;
        box-shadow: var(--danger-glow) !important;
    }

/* ============================================================
   SIDEBAR LAYOUT FIX
   - Make sidebar a full-height flex column
   - Make nav-scrollable consume remaining space
   - Pin bottom stack (user card + About) to bottom
   ============================================================ */

/* Ensure the left rail is a real full-height column */
.sidebar {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important; /* key */
    min-height: 100vh !important; /* key */
    overflow: hidden !important; /* prevents the “page scroll to see footer” crap */
}

/* Your NavMenu markup uses .nav-scrollable as the main shell now */
.sidebar .nav-scrollable.sp-navshell {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important; /* critical for flex children to scroll correctly */
}

/* Only this section scrolls */
.sidebar .sp-navscroll {
    flex: 1 1 auto !important;
    min-height: 0 !important; /* critical */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: .75rem; /* breathing room above bottom stack */
}

/* Bottom area pinned */
.sidebar .sp-sidebar-bottom {
    flex: 0 0 auto !important;
    margin-top: auto !important; /* pins to bottom */
    padding: .75rem 0 1rem !important;
    /*border-top: 1px solid var(--border) !important;*/
}

/* ============================================================
USER CARD (BOTTOM) — centered, fits sidebar, big emblem
============================================================ */

/* Link wrapper should not look like a nav button */
.sidebar .sp-usercard-link {
    display: block !important;
    width: 100% !important;
    text-decoration: none !important;
    color: inherit !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Center card and constrain width to sidebar */
.sidebar .sp-usercard.sp-usercard-big {
    width: min(320px, calc(100% - 1.5rem)) !important; /* fits the menu */
    margin: 0 auto .75rem !important; /* centered */
    padding: 1.25rem 1rem !important;
    border-radius: 18px !important;
    background: rgba(0,0,0,.14) !important;
    border: 1px solid rgba(127,255,230,.18) !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
    text-align: center !important;
}

/* Big emblem centered */
.sidebar .sp-usercard-emblem.sp-usercard-emblem-big {
    width: 150px !important;
    height: 150px !important;
    display: block !important;
    margin: 0 auto .75rem !important;
    object-fit: contain !important;
    opacity: .98 !important;
}

/* Service name centered */
.sidebar .sp-usercard-service {
    font-family: var(--mono) !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: var(--accent2) !important;
    font-size: .85rem !important;
    margin-bottom: .35rem !important;
}

/* Identity centered */
.sidebar .sp-usercard-identity {
    color: color-mix(in srgb, var(--ink) 92%, transparent) !important;
    font-size: .85rem !important;
    word-break: break-word !important;
    opacity: .92 !important;
}

/* If emblem is None and you still want spacing to look good */
.sidebar .sp-usercard.sp-usercard-big:has(img) .sp-usercard-service {
    margin-top: 0 !important;
}

/* ============================================================
ABOUT BUTTON — full width button like the others, but pinned
============================================================ */

.sidebar .sp-sidebar-footer .nav-link {
    width: min(320px, calc(100% - 1.5rem)) !important;
    margin: 0 auto !important; /* centered */
}

.sp-role-pill {
    background-color: rgba(0,92,255, .3) !important;
}

:root {
    --sp-warning: #f6c343;
}

.text-danger,
.validation-message,
.validation-summary-errors {
    color: var(--sp-warning) !important;
}

.is-invalid,
input.input-validation-error {
    border-color: var(--sp-warning) !important;
    box-shadow: 0 0 8px rgba(246, 195, 67, 0.4) !important;
}

/*Glass Buttons*/

.btn-blue-glass {
    background-color: rgba(var(--glass-btn-blue), var(--glass-btn-fill-alpha)); /* 35% fill */
    color: var(--glass-btn-text-color);
    border: 1px solid rgba(var(--glass-btn-blue), var(--glass-btn-border-alpha)); /* 90% border */
    font-weight: 600;
}

.btn-blue-glass:hover,
.btn-blue-glass:focus {
    background-color: rgba(var(--glass-btn-blue), var(--glass-btn-hvr-fill-alpha)); /* 55% fill */
    border-color: rgba(var(--glass-btn-blue), var(--glass-btn-hvr-border-alpha)); /* full border */
    color: var(--glass-btn-text-color);
}

.btn-green-glass {
    background-color: rgba(var(--glass-btn-green), var(--glass-btn-fill-alpha)); /* 35% fill */
    color: var(--glass-btn-text-color);
    border: 1px solid rgba(var(--glass-btn-green), var(--glass-btn-border-alpha)); /* 90% border */
    font-weight: 600;
}

.btn-green-glass:hover,
.btn-green-glass:focus {
    background-color: rgba(var(--glass-btn-green), var(--glass-btn-hvr-fill-alpha)); /* 55% fill */
    border-color: rgba(var(--glass-btn-green), var(--glass-btn-hvr-border-alpha)); /* full border */
    color: var(--glass-btn-text-color);
}

.btn-red-glass {
    background-color: rgba(var(--glass-btn-red), var(--glass-btn-fill-alpha)); /* 35% fill */
    color: var(--glass-btn-text-color);
    border: 1px solid rgba(var(--glass-btn-red), var(--glass-btn-border-alpha)); /* 90% border */
    font-weight: 600;
}

.btn-red-glass:hover,
.btn-red-glass:focus {
    background-color: rgba(var(--glass-btn-red), var(--glass-btn-hvr-fill-alpha)); /* 55% fill */
    border-color: rgba(var(--glass-btn-red), var(--glass-btn-hvr-border-alpha)); /* full border */
    color: var(--glass-btn-text-color);
}


.btn-yellow-glass {
    background-color: rgba(var(--glass-btn-yellow), var(--glass-btn-fill-alpha)); /* 35% fill */
    color: var(--glass-btn-text-color);
    border: 1px solid rgba(var(--glass-btn-yellow), var(--glass-btn-border-alpha)); /* 90% border */
    font-weight: 600;
}

    .btn-yellow-glass:hover,
    .btn-yellow-glass:focus {
        background-color: rgba(var(--glass-btn-yellow), var(--glass-btn-hvr-fill-alpha)); /* 55% fill */
        border-color: rgba(var(--glass-btn-yellow), var(--glass-btn-hvr-border-alpha)); /* full border */
        color: var(--glass-btn-text-color);
    }

.hud-muted-text {
    color: var(--muted-teal-white-green);
}

.sp-nav-toggle
{
    display: none !important; 
}

input[type="date"] {
    color-scheme: dark;
}

input[type="time"] {
    color-scheme: dark;
}

.sp-login-logo {
    max-width: 420px;
    width: 100%;
    height: auto;
    display: inline-block;
}

.sp-nav-footer-copyright {
    text-align: center;
    padding: 0.75rem 0;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.75);
}

.sp-sidebar-bottom {
    text-align: center;
}