/* Bootstrap 5 dropped .form-group's default spacing; kept here so the
   many existing .form-group markup blocks don't need a full markup pass. */
.form-group {
    margin-bottom: 1rem;
}

/* Bootstrap 5 removed .input-group-append/.input-group-prepend and expects
   .input-group-text to be a direct flex child of .input-group for the
   joined-border layout. display:contents drops the wrapper from the box
   tree (children behave as direct flex items) without a markup pass
   across the ~20 forms that still use the old wrapper markup. */
.input-group-append,
.input-group-prepend {
    display: contents;
}

/* Bootstrap 5 dropped .custom-file-input's invisible-overlay styling.
   These inputs are triggered via a proxy "Upload Photo" button + .click(),
   so the native control should just stay hidden rather than render inline. */
.custom-file-input {
    display: none;
}

/* ============================================================
   THEME SYSTEM (COLOR FAMILY x LIGHT/DARK MODE)

   Each family (sky blue, midnight ocean, sunset, forest, purple, sepia)
   ships a light and a dark variant sharing the same brand hue, selected
   as data-app-theme="<family>-<light|dark>". Family is chosen from the
   palette dropdown; light/dark mode is toggled independently via the
   sun/moon switch (see _Layout.cshtml). Dark variants share the same
   neutral dark surface/text colors (#212529 / #e9ecef) so tables and
   cards read consistently across families — only --app-bg, the muted
   text tint, and the brand/nav color carry the family's hue.
   ============================================================ */

/* ─────────────────────────────────────────────
   SKY BLUE
───────────────────────────────────────────── */
:root,
[data-app-theme="skyblue-light"] {
    --app-brand: #127497;
    --app-brand-hover: #0f5f7a;
    --app-brand-alt: #3276bb;
    --app-brand-text: #ffffff;
    --app-bg: #ffffff;
    --app-surface: #ffffff;
    --app-surface-alt: #f8f9fa;
    --app-text: #2a2a2a;
    --app-text-muted: #6c757d;
    --app-border: rgba(0,0,0,0.08);
    --app-nav-bg: #127497;
    --app-nav-text: #ffffff;
    --app-nav-muted: rgba(255,255,255,0.85);
    --app-nav-hover: rgba(255,255,255,0.15);
    --app-nav-active: rgba(255,255,255,0.25);
    --app-card-header: #127497;
}

[data-app-theme="skyblue-dark"] {
    --app-brand: #127497;
    --app-brand-hover: #0f5f7a;
    --app-bg: #0f1e22;
    --app-text-muted: #9cc2cc;
    --app-nav-bg: #127497;
    --app-nav-text: #ffffff;
    --app-nav-hover: rgba(255,255,255,0.10);
    --app-nav-active: rgba(255,255,255,0.18);
    --app-surface: #212529;
    --app-surface-alt: #2b3035;
    --app-text: #e9ecef;
    --app-border: rgba(255,255,255,0.10);
    --app-card-header: #127497;
}

/* ─────────────────────────────────────────────
   MIDNIGHT OCEAN
───────────────────────────────────────────── */
[data-app-theme="midnightocean-light"] {
    --app-brand: #0d3a4d;
    --app-brand-hover: #0a2d3c;
    --app-bg: #f5f9fb;
    --app-surface: #ffffff;
    --app-surface-alt: #eaf2f5;
    --app-text: #14202a;
    --app-text-muted: #5c7889;
    --app-border: rgba(13,58,77,0.15);
    --app-nav-bg: #0d3a4d;
    --app-nav-text: #ffffff;
    --app-nav-hover: rgba(255,255,255,0.15);
    --app-nav-active: rgba(255,255,255,0.25);
    --app-card-header: #0d3a4d;
}

[data-app-theme="midnightocean-dark"] {
    --app-brand: #0d3a4d;
    --app-brand-hover: #0a2d3c;
    --app-brand-alt: #1f5e7d;
    --app-bg: #1a1d20;
    --app-surface: #212529;
    --app-surface-alt: #2b3035;
    --app-text: #e9ecef;
    --app-text-muted: #adb5bd;
    --app-border: rgba(255,255,255,0.10);
    --app-nav-bg: #0d3a4d;
    --app-nav-text: #e9ecef;
    --app-nav-muted: rgba(233,236,239,0.85);
    --app-nav-hover: rgba(255,255,255,0.10);
    --app-nav-active: rgba(255,255,255,0.18);
    --app-card-header: #0d3a4d;
}

/* ─────────────────────────────────────────────
   SUNSET
───────────────────────────────────────────── */
[data-app-theme="sunset-light"] {
    --app-brand: #c7543a;
    --app-brand-hover: #a8462f;
    --app-bg: #fff8f5;
    --app-surface: #ffffff;
    --app-text: #3d2419;
    --app-text-muted: #8a6a5d;
    --app-border: rgba(199,84,58,0.15);
    --app-nav-bg: #c7543a;
    --app-nav-text: #ffffff;
    --app-nav-hover: rgba(255,255,255,0.15);
    --app-nav-active: rgba(255,255,255,0.25);
    --app-card-header: #c7543a;
    --app-surface-alt: #fdeee9;
}

[data-app-theme="sunset-dark"] {
    --app-brand: #c7543a;
    --app-brand-hover: #a8462f;
    --app-bg: #1f1310;
    --app-text-muted: #c9a696;
    --app-nav-bg: #c7543a;
    --app-nav-text: #ffffff;
    --app-nav-hover: rgba(255,255,255,0.10);
    --app-nav-active: rgba(255,255,255,0.18);
    --app-surface: #212529;
    --app-surface-alt: #2b3035;
    --app-text: #e9ecef;
    --app-border: rgba(255,255,255,0.10);
    --app-card-header: #c7543a;
}

/* ─────────────────────────────────────────────
   FOREST
───────────────────────────────────────────── */
[data-app-theme="forest-light"] {
    --app-brand: #2d5f3f;
    --app-brand-hover: #234a31;
    --app-bg: #f7faf7;
    --app-surface: #ffffff;
    --app-text: #1f3326;
    --app-text-muted: #5a7062;
    --app-border: rgba(45,95,63,0.15);
    --app-nav-bg: #2d5f3f;
    --app-nav-text: #ffffff;
    --app-nav-hover: rgba(255,255,255,0.15);
    --app-nav-active: rgba(255,255,255,0.25);
    --app-card-header: #2d5f3f;
    --app-surface-alt: #eef4ee;
}

[data-app-theme="forest-dark"] {
    --app-brand: #2d5f3f;
    --app-brand-hover: #234a31;
    --app-bg: #10201a;
    --app-text-muted: #a8c2ae;
    --app-nav-bg: #2d5f3f;
    --app-nav-text: #ffffff;
    --app-nav-hover: rgba(255,255,255,0.10);
    --app-nav-active: rgba(255,255,255,0.18);
    --app-surface: #212529;
    --app-surface-alt: #2b3035;
    --app-text: #e9ecef;
    --app-border: rgba(255,255,255,0.10);
    --app-card-header: #2d5f3f;
}

/* ─────────────────────────────────────────────
   MIDNIGHT PURPLE
───────────────────────────────────────────── */
[data-app-theme="purple-light"] {
    --app-brand: #5b3f8f;
    --app-brand-hover: #4a3374;
    --app-bg: #f9f7fc;
    --app-surface: #ffffff;
    --app-surface-alt: #f1ecf7;
    --app-text: #241f42;
    --app-text-muted: #7c6fa0;
    --app-border: rgba(91,63,143,0.15);
    --app-nav-bg: #5b3f8f;
    --app-nav-text: #ffffff;
    --app-nav-hover: rgba(255,255,255,0.15);
    --app-nav-active: rgba(255,255,255,0.25);
    --app-card-header: #5b3f8f;
}

[data-app-theme="purple-dark"] {
    --app-brand: #2a2350;
    --app-brand-hover: #201b3d;
    --app-bg: #15122a;
    --app-text-muted: #a8a2c8;
    --app-nav-bg: #2a2350;
    --app-nav-text: #ffffff;
    --app-nav-hover: rgba(255,255,255,0.10);
    --app-nav-active: rgba(255,255,255,0.18);
    /* table body — match the shared neutral dark surface */
    --app-surface: #212529;
    --app-surface-alt: #2b3035;
    --app-text: #e9ecef;
    --app-border: rgba(255,255,255,0.10);
    /* keep midnight purple for page header + card headers */
    --app-card-header: #2a2350;
}

/* ─────────────────────────────────────────────
   SEPIA
───────────────────────────────────────────── */
[data-app-theme="sepia-light"] {
    --app-brand: #8b6f47;
    --app-brand-hover: #6f5838;
    --app-bg: #f5ecd4;
    --app-surface: #faf5e8;
    --app-text: #3d2f1f;
    --app-text-muted: #8a7857;
    --app-border: rgba(139,111,71,0.2);
    --app-nav-bg: #8b6f47;
    --app-nav-text: #ffffff;
    --app-nav-hover: rgba(255,255,255,0.15);
    --app-nav-active: rgba(255,255,255,0.25);
    --app-card-header: #8b6f47;
    --app-surface-alt: #f0e6cf;
}

[data-app-theme="sepia-dark"] {
    --app-brand: #8b6f47;
    --app-brand-hover: #6f5838;
    --app-bg: #1e1811;
    --app-text-muted: #c9b896;
    --app-nav-bg: #8b6f47;
    --app-nav-text: #ffffff;
    --app-nav-hover: rgba(255,255,255,0.10);
    --app-nav-active: rgba(255,255,255,0.18);
    --app-surface: #212529;
    --app-surface-alt: #2b3035;
    --app-text: #e9ecef;
    --app-border: rgba(255,255,255,0.10);
    --app-card-header: #8b6f47;
}



[data-app-theme$="-dark"] .table-hover tbody tr:hover,
[data-app-theme$="-dark"] .flightsTable tbody tr:hover {
    background: color-mix(in srgb, #fff 8%, var(--app-surface));
    color: var(--app-text);
}

/* ============================================================
   GLOBAL STRUCTURE
   ============================================================ */

html {
    font-size: 14px;
}

body {
    background: var(--app-bg);
    color: var(--app-text);
    overflow-x: hidden;
}

/* ============================================================
   HEADER (TOP NAVBAR)
   ============================================================ */

.app-header {
    background: var(--app-nav-bg) !important;
    border-bottom: 1px solid var(--app-border);
}

    .app-header .nav-link {
        color: var(--app-nav-text) !important;
    }

        .app-header .nav-link:hover {
            background: var(--app-nav-hover);
            border-radius: 0.375rem;
        }

.theme-picker-toggle,
.theme-mode-toggle {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.35) !important;
    color: var(--app-nav-text) !important;
}

/* ============================================================
   SIDEBAR
   ============================================================ */

.app-sidebar {
    background: var(--app-nav-bg) !important;
}

    .app-sidebar .nav-link {
        color: var(--app-nav-muted) !important;
        border-radius: 0.4rem;
        margin: 0.15rem 0.25rem;
    }

        .app-sidebar .nav-link:hover {
            background: var(--app-nav-hover);
            color: var(--app-nav-text) !important;
        }

        .app-sidebar .nav-link.active {
            background: var(--app-nav-active);
            color: var(--app-nav-text) !important;
        }

#sidebarLogo {
    transition: all 0.2s ease;
}

.user-panel {
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

/* AdminLTE3 positioned .content-wrapper/.main-header/.main-footer with a
   fixed-position sidebar + margin-left offset, and needed the hover-lock
   below to fight its default hover-to-peek expansion. AdminLTE4 lays the
   whole shell out as a CSS grid (.app-wrapper: "auto 1fr" columns), so the
   content column already reflows to match the sidebar's actual width with
   no margin needed — adding the old margin-left back double-offsets it and
   leaves a blank column the height of the page. Hover-lock is now the
   native `sidebar-without-hover` class on <body> (see _Layout.cshtml)
   instead of a CSS override; nothing here needs porting to .app-sidebar. */


/* ============================================================
   CONTENT AREA
   ============================================================ */
.app-content {
    background: var(--app-bg);
    min-height: 0;
}


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

.card {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 0.5rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    color: var(--app-text);
}

.card-header {
    background: var(--app-card-header) !important;
    color: #fff !important;
    border: none !important;
}

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

.btn-primary {
    background: var(--app-brand);
    border-color: var(--app-brand);
}

    .btn-primary:hover {
        background: var(--app-brand-hover);
    }

/* "btn-outline" (no color suffix) isn't a real Bootstrap class — only
   btn-outline-primary/-secondary/etc. exist — so buttons using it (the
   "Back to Account" links on License/CMA/Renewal pages) got no color at
   all from Bootstrap, just bare .btn padding. These buttons all sit
   inside .card-primary > .card-header, which is itself var(--app-brand)
   colored (!important) — so border/text need to contrast against THAT,
   not the page background. Use the same white nav-text/hover tokens the
   header/sidebar already use on brand-colored surfaces. */
.btn-outline {
    background: transparent;
    border: 1px solid var(--app-nav-text);
    color: var(--app-nav-text);
}

    .btn-outline:hover,
    .btn-outline:focus {
        background: var(--app-nav-hover);
        border-color: var(--app-nav-text);
        color: var(--app-nav-text);
    }


/* ============================================================
   TABLES (THEMED)
   ============================================================ */

.flightsTable {
    background: var(--app-surface);
    color: var(--app-text);
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--app-border);
    width: max-content;
    min-width: 100%;
    font-size: clamp(0.55rem, 0.75vw, 0.85rem);
}

    .flightsTable th,
    .flightsTable td {
        white-space: nowrap;
/*        overflow: hidden;*/
        text-overflow: ellipsis;
        text-align: center;
        padding: 0.3rem 0.2rem;
    }

    .flightsTable thead tr:first-child th {
        font-size: 0.9em;
        padding: 0.2rem 0.15rem;
    }

    .flightsTable thead th {
        background: var(--app-card-header);
        color: #fff;
        position: sticky;
        top: 0;
        z-index: 2;
        font-weight: 600;
        box-shadow: inset 1px 0 0 rgba(255,255,255,0.35), inset -1px 0 0 rgba(255,255,255,0.35), inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -1px 0 rgba(255,255,255,0.35);
    }

    .flightsTable tbody td {
        vertical-align: middle;
        border: 1px solid var(--app-border);
        height: 42px;
        line-height: 1.4;
    }

    .flightsTable tbody tr:nth-child(odd) {
        background: var(--app-surface);
    }

    .flightsTable tbody tr:nth-child(even) {
        background: var(--app-surface-alt);
    }

    .flightsTable tbody tr:hover {
        background: color-mix(in srgb, var(--app-brand) 8%, var(--app-surface));
    }

    /* Add-row / new-row anchors */
    .flightsTable tbody tr.add-flight-row td,
    .flightsTable tbody tr.new-flights-anchor td {
        height: 48px;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .flightsTable tbody tr.new-flights-anchor td {
        padding: 0 !important;
        height: 20px !important;
    }

    /* Row action buttons */
    .flightsTable .edit-row-btn,
    .flightsTable .delete-button,
    .flightsTable .save-row-btn,
    .flightsTable .cancel-row-btn {
        padding: 0.35rem 0.55rem;
        font-size: 0.8rem;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Control column — keep all action buttons in a tidy horizontal row */
    .flightsTable td[data-field="actions"] {
        white-space: nowrap;
    }

        .flightsTable td[data-field="actions"] .btn {
            margin: 0 0.1rem;
            padding: 0.3rem 0.5rem;
            font-size: 0.8rem;
            line-height: 1;
            vertical-align: middle;
        }

        .flightsTable td[data-field="actions"] .row-status-icon {
            vertical-align: middle;
        }

.flight-logs-body .flight-table-wrapper:not(.d-none) {
    overflow: auto;
}
/* Column widths — second header row (the one with actual field names) */
.flightsTable thead tr:nth-child(2) th {
    /* default: all columns share equally — override specific ones below */
}

    /* Date, Registration, Type, From, To — need more room for text */
    .flightsTable thead tr:nth-child(2) th:nth-child(1),
    .flightsTable thead tr:nth-child(2) th:nth-child(2),
    .flightsTable thead tr:nth-child(2) th:nth-child(3),
    .flightsTable thead tr:nth-child(2) th:nth-child(5),
    .flightsTable thead tr:nth-child(2) th:nth-child(6) {
        width: 5%;
    }

    /* Engines — just a single digit */
    .flightsTable thead tr:nth-child(2) th:nth-child(4) {
        width: 2.5%;
    }

    /* H/M columns (7–28) — 2-digit numbers, squeeze them */
    .flightsTable thead tr:nth-child(2) th:nth-child(n+7):nth-child(-n+28) {
        width: 2.5%;
    }

/* Control column — pin it like every other column.
       The old rule targeted a 29th <th> in the 2nd header row that
       doesn't exist (the actions header there is commented out), so
       Control was the only un-pinned column and absorbed ALL of the
       table's leftover width. These selectors hit the cells that DO
       exist: the Control header (last th in the FIRST header row) and
       the body actions cell. */
.flightsTable thead tr:first-child th:last-child,
.flightsTable td[data-field="actions"] {
    width: 4%;
}
/* ============================================================
   INLINE EDITING — force inputs to respect fixed column widths
   ============================================================ */
.flightsTable tr.new-flight-row td,
.flightsTable tr[data-row-state="editing"] td {
    overflow: hidden;
    max-width: 0; /* lets table-layout: fixed fully control width */
}


    /* Don't collapse/clip the Control cell in create or edit mode.
   The blanket "max-width:0; overflow:hidden" above is meant for the
   data-input cells; on the actions cell it crushes the save/cancel/⋮
   buttons and clips them when the window narrows. */
    .flightsTable tr.new-flight-row td:last-child,
    .flightsTable tr[data-row-state="editing"] td[data-field="actions"],
    .flightsTable tr[data-row-state="editing"] td:last-child {
        overflow: visible;
        max-width: none;
        width: 1%; /* shrink-to-fit: only as wide as the buttons */
        white-space: nowrap; /* keep the buttons on one line */
    }

        /* In edit mode the row has its own Save/Cancel — the Edit/Delete (⋮)
   menu is redundant, and it gets left open (the Edit handler stops
   propagation, so Bootstrap never closes it), showing as a clipped
   white sliver. Hide it entirely while editing. */
        .flightsTable tr[data-row-state="editing"] td[data-field="actions"] .view-actions,
        .flightsTable tr[data-row-state="editing"] td[data-field="actions"] .view-actions .dropdown-menu {
            display: none !important;
        }

.flightsTable tr.new-flight-row input,
.flightsTable tr[data-row-state="editing"] input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.15rem 2px;
    font-size: inherit;
}

    /* Date inputs are extra wide by default — override the browser chrome */
    .flightsTable tr.new-flight-row input[type="date"],
    .flightsTable tr[data-row-state="editing"] input[type="date"] {
        min-width: 0;
      
    }

/* Autocomplete dropdown wrapper must not push the cell wider */
.flightsTable tr.new-flight-row .position-relative,
.flightsTable tr[data-row-state="editing"] .position-relative {
    max-width: 100%;
    overflow: visible; /* so the dropdown still floats out */
}
/* Edit mode: let the autocomplete dropdowns escape their cells,
   same as the create-row tds (which carry .position-relative directly) */
.flightsTable tr[data-row-state="editing"] td[data-field="Registration"],
.flightsTable tr[data-row-state="editing"] td[data-field="AircraftTypeName"],
.flightsTable tr[data-row-state="editing"] td[data-field="DepartureAirport"],
.flightsTable tr[data-row-state="editing"] td[data-field="ArrivalAirport"] {
    overflow: visible;
}
/* ============================================================
   FOOTER
   ============================================================ */

.app-footer {
    background: var(--app-surface);
    border-top: 1px solid var(--app-border);
    color: var(--app-text-muted);
}

/* ============================================================
   MOBILE — COLLAPSIBLE / TIME BREAKDOWN
   ============================================================ */
.collapsible-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    user-select: none;
}

.collapse-chevron {
    transition: transform 0.2s ease;
    margin-left: auto;
}

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

.time-breakdown-item {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--app-border);
}

    .time-breakdown-item:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .time-breakdown-item > .form-label {
        font-weight: 600;
        margin-bottom: 0.25rem;
    }

/* ============================================================
   MOBILE FLIGHT MODAL
   ============================================================ */
.mobile-flight-modal .section-heading {
    background-color: var(--app-card-header);
    color: #fff;
    padding: 0.65rem 0.85rem;
    border-radius: 0.375rem;
    margin: 0 0 0.85rem 0;
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .mobile-flight-modal .section-heading i {
        font-size: 1rem;
    }

/* Collapsible heading variant — same header bar, shows it's tappable */
.mobile-flight-modal .collapsible-heading {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease;
}

    .mobile-flight-modal .collapsible-heading:hover,
    .mobile-flight-modal .collapsible-heading:active {
        background-color: var(--app-brand-hover);
    }

.mobile-flight-modal .collapse-chevron {
    margin-left: auto;
    transition: transform 0.2s ease;
}

.mobile-flight-modal .collapsible-heading[aria-expanded="true"] .collapse-chevron {
    transform: rotate(180deg);
}

/* Section spacing */
.mobile-flight-modal .mobile-form-section {
    margin-bottom: 1.25rem;
}

    .mobile-flight-modal .mobile-form-section:last-child {
        margin-bottom: 0;
    }

.mobile-flight-modal .modal-header {
    background-color: var(--app-card-header);
    color: #fff;
    border-bottom: none;
}

    .mobile-flight-modal .modal-header .modal-title {
        color: #fff;
        font-weight: 600;
    }

    /* Make the close X visible on the dark header (paired with .btn-close-white in markup) */
    .mobile-flight-modal .modal-header .btn-close {
        opacity: 0.9;
    }

        .mobile-flight-modal .modal-header .btn-close:hover {
            opacity: 1;
        }

/* The modal body/content should follow the theme surface */
.mobile-flight-modal {
    background: var(--app-surface);
    color: var(--app-text);
}

/* ============================================================
   MOBILE FLIGHT CARD VIEW
   ============================================================ */
.mobile-month-header {
    background-color: var(--app-card-header);
    color: #fff;
    padding: 0.5rem 0.85rem;
    border-radius: 0.375rem;
    margin: 1rem 0 0.5rem 0;
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.flight-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 0.5rem;
    padding: 0.85rem 1rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.05s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

    .flight-card:hover {
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }

    .flight-card:active {
        transform: scale(0.98);
    }

.flight-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
}

.flight-card-date {
    font-weight: 600;
    color: var(--app-brand);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.flight-card-reg {
    font-family: monospace;
    font-size: 0.95rem;
    color: var(--app-text);
    background: var(--app-surface-alt);
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
}

.flight-card-route {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--app-text);
    margin: 0.5rem 0;
    padding: 0.4rem 0;
    border-top: 1px solid var(--app-border);
    border-bottom: 1px solid var(--app-border);
}

    .flight-card-route .airport {
        font-family: monospace;
        letter-spacing: 0.05em;
    }

    .flight-card-route .bi-arrow-right {
        color: var(--app-brand);
    }

.flight-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.4rem;
    font-size: 0.9rem;
    color: var(--app-text-muted);
}

.flight-card-total {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 500;
}

    .flight-card-total .bi-clock {
        color: var(--app-brand);
    }

/* Detail modal list styling */
.detail-list {
    margin: 0;
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 0.4rem 0.75rem;
}

    .detail-list dt {
        font-weight: 500;
        color: var(--app-text-muted);
        font-size: 0.9rem;
    }

    .detail-list dd {
        margin: 0;
        color: var(--app-text);
        font-weight: 500;
        word-break: break-word;
    }

        .detail-list dd:empty::before {
            content: "—";
            color: var(--app-text-muted);
            opacity: 0.5;
        }

.detail-time-row {
    font-family: monospace;
    font-size: 1rem;
    font-weight: 500;
    color: var(--app-text);
}

    .detail-time-row:empty::before {
        content: "—";
        color: var(--app-text-muted);
        opacity: 0.5;
        font-family: inherit;
    }

.detail-list dd.time-edit-row .row {
    margin: 0;
}

.detail-list dd.time-edit-row input {
    text-align: center;
}
@media (max-width: 767.98px) {
    /* AdminLTE's layout-fixed pins heights; let mobile scroll naturally */
    html, body {
        overflow-y: auto !important;
        height: auto !important;
    }

    .wrapper,
    .content-wrapper {
        overflow-y: visible !important;
        height: auto !important;
        min-height: 100vh;
    }
}
/* ============================================================
   DESKTOP / MOBILE VISIBILITY TOGGLE
   ============================================================ */
.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}

@media (max-width: 767.98px) {
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: block !important;
    }

    /* ============================================================
       PAGE HEADER (the card-header at the top of the list)
       ============================================================ */

    /* Stack title column and form column vertically */
    .card-header .d-flex.flex-wrap.align-items-start {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.5rem;
    }

    /* Title + Add button column takes full width */
    .card-header .d-flex.flex-column {
        width: 100%;
        margin: 0 !important;
    }

    /* Title sizing so long titles don't overflow */
    .card-header h2 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem !important;
    }

    /* Add button full width */
    .card-header .btn-header.align-self-start {
        align-self: stretch !important;
        width: 100%;
    }

    /* Search/filter form full width, no auto-margin pushing it right */
    .card-header form.ml-md-auto {
        margin-left: 0 !important;
        width: 100%;
    }

    /* Inside the form, stack the inputs/buttons vertically */
    .card-header form .d-flex.flex-wrap {
        flex-direction: column;
        align-items: stretch !important;
    }

    /* Filter label on its own line, full width */
    .card-header form label {
        margin-right: 0 !important;
        margin-bottom: 0.25rem !important;
        width: 100%;
    }

    /* Filter dropdown full width */
    .card-header form select.form-control {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 0.5rem !important;
    }

    /* Search input and form buttons full width */
    .card-header form .form-control,
    .card-header form .btn {
        margin-right: 0 !important;
        margin-bottom: 0.5rem;
        width: 100%;
    }
    /* Search input wrapper: override the inline width:280px so it
   matches the full-width button instead of staying at 280px */
    .card-header form .position-relative {
        width: 100% !important;
    }
    .card-fill .table-responsive thead th {
        position: sticky;
        top: 0;
        z-index: 20;
        background: var(--app-card-header);
        color: #fff;
        box-shadow: inset 0 -1px 0 var(--app-border);
    }

    /* ============================================================
       MOBILE ENTITY CARDS (Airport, Aircraft, AircraftType)
       ============================================================ */

    .entity-card-name {
        font-weight: 600;
        font-size: 1rem;
    }

    .entity-card-meta div {
        margin-bottom: 0.15rem;
    }

    /* Card header strip — themed */
    .entity-card-header {
        background-color: var(--app-card-header);
        color: #fff;
        padding: 0.75rem 1rem !important;
        gap: 0.75rem;
    }

        .entity-card-header .entity-card-name {
            color: #fff;
            line-height: 1.2;
        }

        .entity-card-header .badge.text-bg-light {
            background-color: rgba(255, 255, 255, 0.9);
            color: var(--app-card-header);
            font-weight: 600;
        }

        /* Action buttons: horizontal row in the corner instead of stacked */
        .entity-card-header .d-flex.flex-column {
            flex-direction: row !important;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 0.25rem;
            flex-shrink: 0;
            width: auto !important; /* override the page-header width:100% rule above */
        }

            .entity-card-header .d-flex.flex-column .btn {
                margin: 0 !important;
                padding: 0.25rem 0.5rem;
                font-size: 0.85rem;
                width: auto !important; /* override the form-button width:100% rule above */
            }

        /* Title area: allow long names to wrap rather than push buttons off-screen */
        .entity-card-header .flex-grow-1 {
            min-width: 0;
        }

    /* Badge row inside the card header */
    .entity-card-codes {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

        .entity-card-codes .badge {
            margin: 0 !important;
            white-space: normal;
            text-align: left;
        }
    .mobile-fab {
        position: fixed;
        right: 1rem;
        bottom: 1rem;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--app-brand);
        color: #fff;
        border: none;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        font-size: 1.6rem;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1040;
    }

        .mobile-fab:hover,
        .mobile-fab:active {
            background: var(--app-brand-hover);
        }


    /* View button is invisible on the brand-colored card header
   (.btn-info is themed to --app-brand, same as --app-card-header).
   Render it as a white chip with a brand-colored icon. */
    .entity-card-header .btn-info {
        background: rgba(255, 255, 255, 0.92) !important;
        border-color: rgba(255, 255, 255, 0.92) !important;
        color: var(--app-brand) !important;
    }

        .entity-card-header .btn-info:hover,
        .entity-card-header .btn-info:focus {
            background: #fff !important;
            border-color: #fff !important;
            color: var(--app-brand) !important;
        }

    /* Same brand-on-brand invisibility as .btn-info above — .btn-outline-primary
   is themed to --app-brand text/border on transparent, same color as the
   header background (e.g. the "View PDF" action on MyFlightPlans cards). */
    .entity-card-header .btn-outline-primary {
        background: rgba(255, 255, 255, 0.92) !important;
        border-color: rgba(255, 255, 255, 0.92) !important;
        color: var(--app-brand) !important;
    }

        .entity-card-header .btn-outline-primary:hover,
        .entity-card-header .btn-outline-primary:focus {
            background: #fff !important;
            border-color: #fff !important;
            color: var(--app-brand) !important;
        }

    /* Card body is hardcoded bg-white in markup so it stays legible even if
       theme CSS fails to load; in dark mode it must follow the dark surface
       instead, or the (light) --app-text body copy goes unreadable on white. */
    [data-app-theme$="-dark"] .entity-card.bg-white {
        background-color: var(--app-surface) !important;
        color: var(--app-text);
    }
}
/* ============================================================
   DASHBOARD — make AdminLTE stat boxes follow the theme
   ============================================================ */
.small-box.bg-gradient-cyan {
    background: var(--app-card-header) !important;
    background-image: none !important;
    color: #fff !important;
}

    .small-box.bg-gradient-cyan .icon i,
    .small-box.bg-gradient-cyan h3,
    .small-box.bg-gradient-cyan p {
        color: #fff !important;
    }

    /* footer strip — slightly darker than the box */
    .small-box.bg-gradient-cyan .small-box-footer {
        background: rgba(0,0,0,0.15) !important;
        color: rgba(255,255,255,0.9) !important;
    }

        .small-box.bg-gradient-cyan .small-box-footer:hover {
            background: rgba(0,0,0,0.25) !important;
            color: #fff !important;
        }

/* Info-box icon squares */
.info-box .info-box-icon.bg-info {
    background: var(--app-brand) !important;
    color: #fff !important;
}

/* Info-box body should follow the surface, not stay white */
.info-box {
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

    .info-box .info-box-text {
        color: var(--app-text-muted) !important;
    }

    .info-box .info-box-number {
        color: var(--app-text) !important;
    }

/* Pilot dashboard — attention strip, quick actions, time by category */
.dashboard-muted {
    color: var(--app-text-muted);
}

.dashboard-actions .btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.dashboard-attention-item {
    background: var(--app-surface);
    color: var(--app-text);
    border-radius: 8px;
    padding: 10px 12px;
}

.dashboard-card {
    background: var(--app-surface);
    color: var(--app-text);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

    /* Compact so the whole dashboard fits one desktop screen */
    .dashboard-card > .card-body {
        padding: 0.75rem 1rem;
    }

.dashboard-greeting {
    font-size: 1.75rem;
}

/* Name + detail on one line; the detail wraps under the name only when the card is narrow */
.dashboard-row-text {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.5rem;
}

/* Desktop: the card grid stretches to fill the screen below the header.
   Each shell level becomes a flex column so the leftover height reaches
   .dashboard-grid; its rows then share it and cards stretch (h-100).
   The attention strip sits above the grid, so when it shows the page
   simply scrolls. */
@media (min-width: 992px) {
    .app-main:has(.dashboard-page),
    .app-main:has(.dashboard-page) > .app-content,
    .app-main:has(.dashboard-page) > .app-content > .container-fluid,
    .dashboard-page,
    .dashboard-page > .content,
    .dashboard-page > .content > .container-fluid {
        display: flex;
        flex-direction: column;
        flex: 1 0 auto;
    }

    .dashboard-grid {
        flex: 1 0 auto;
        align-content: stretch;
    }

    .dashboard-chart-wrap {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

        .dashboard-chart-wrap .dashboard-chart {
            flex: 1 1 auto;
            height: auto;
            min-height: 120px;
        }
}

/* Time by category: two columns whenever the card is wide enough */
.dashboard-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    column-gap: 20px;
}

.dashboard-wonderlic-score {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

/* On phones the three quick actions become an even row of big tap targets */
@media (max-width: 575.98px) {
    .dashboard-header-tools {
        width: 100%;
    }

    .dashboard-actions {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

        .dashboard-actions .btn {
            min-height: 44px;
            flex-direction: column;
            justify-content: center;
            font-size: 0.8rem;
            line-height: 1.2;
            padding: 8px 4px;
        }
}

.dashboard-periods {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    flex: 1 1 420px;
    max-width: 560px;
}

@media (max-width: 575.98px) {
    .dashboard-periods {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.dashboard-period,
.dashboard-callout {
    background: var(--app-surface-alt);
    border-radius: 8px;
    padding: 8px 10px;
}

.dashboard-callout {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dashboard-chart {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 6px;
    height: 120px;
}

.dashboard-chart-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.dashboard-chart-value,
.dashboard-chart-label {
    font-size: 0.75rem;
    color: var(--app-text-muted);
    white-space: nowrap;
}

.dashboard-chart-track {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-bottom: 1px solid var(--app-border);
}

.dashboard-chart-bar {
    width: 100%;
    max-width: 40px;
    border-radius: 4px 4px 0 0;
    background: var(--app-brand);
    opacity: 0.45;
}

    .dashboard-chart-bar.is-current {
        opacity: 1;
    }

@media (max-width: 575.98px) {
    .dashboard-chart {
        height: 130px;
        gap: 3px;
    }

    .dashboard-chart-value {
        display: none;
    }

    .dashboard-chart-label {
        font-size: 0.65rem;
    }
}

.dashboard-rows > li {
    padding: 6px 0;
    border-bottom: 1px solid var(--app-border);
}

    .dashboard-rows > li:last-child {
        border-bottom: 0;
    }

.dashboard-row-link {
    color: inherit !important;
    text-decoration: none;
}

/* Licenses & documents card: all licenses collapse into one row */
.dashboard-license-toggle {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    text-align: inherit;
}

    .dashboard-license-toggle:focus-visible {
        outline: 2px solid var(--app-brand);
        outline-offset: 4px;
        border-radius: 4px;
    }

.dashboard-license-chevron {
    color: var(--app-text-muted);
    transition: transform 0.2s ease;
}

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

.dashboard-license-list {
    margin-top: 8px !important;
    padding-left: 12px;
    border-left: 2px solid var(--app-border);
}

    .dashboard-license-list > li {
        padding: 4px 0;
        font-size: 0.925rem;
    }

@media (prefers-reduced-motion: reduce) {
    .dashboard-license-chevron {
        transition: none;
    }
}

/* Card-header and attention buttons ("Manage", "Open logbook", "Renew"...)
   use the themed .btn-outline-primary. Dark families' brand colors are too
   dark to read as outline text on the dark surface, so they're lightened
   there; hover still fills with the brand color. */
[data-app-theme$="-dark"] .dashboard-card .btn-outline-primary,
[data-app-theme$="-dark"] .dashboard-attention .btn-outline-primary {
    color: color-mix(in srgb, var(--app-brand) 45%, #fff) !important;
    border-color: color-mix(in srgb, var(--app-brand) 45%, #fff) !important;
}

    [data-app-theme$="-dark"] .dashboard-card .btn-outline-primary:hover,
    [data-app-theme$="-dark"] .dashboard-card .btn-outline-primary:focus-visible,
    [data-app-theme$="-dark"] .dashboard-attention .btn-outline-primary:hover,
    [data-app-theme$="-dark"] .dashboard-attention .btn-outline-primary:focus-visible {
        color: #fff !important;
        background: var(--app-brand) !important;
        border-color: color-mix(in srgb, var(--app-brand) 45%, #fff) !important;
    }

.dashboard-card .min-w-0 {
    min-width: 0;
}

.dashboard-tag {
    background: var(--app-surface-alt);
    color: var(--app-text);
    border: 1px solid var(--app-border);
    font-weight: 600;
}

.dashboard-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--app-text);
}

    .dashboard-table th {
        color: var(--app-text-muted);
        font-weight: 600;
        font-size: 0.85rem;
    }

.dashboard-score-bar {
    width: 72px;
    height: 6px;
    flex-shrink: 0;
    background: var(--app-border);
}

    .dashboard-score-bar .progress-bar {
        background: var(--app-brand);
    }

.dashboard-icon-btn {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 992px) {
    .dashboard-icon-btn {
        min-width: 26px;
        min-height: 26px;
        padding: 0 6px;
        font-size: 0.8rem;
    }
}

.dashboard-total,
.dashboard-category {
    color: inherit;
    text-decoration: none;
}

.dashboard-total-value {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

    .dashboard-total-value small {
        font-size: 1.25rem;
        color: var(--app-text-muted);
        font-weight: 600;
    }

.dashboard-category {
    display: block;
    padding: 3px 8px;
    margin: 0 -8px;
    border-radius: 6px;
}

    .dashboard-category:hover,
    .dashboard-category:focus-visible {
        background: var(--app-surface-alt);
        color: inherit;
    }

    /* Rows that aren't links (time by aircraft type) shouldn't look clickable */
    .dashboard-category:not([href]):hover {
        background: none;
        cursor: default;
    }

    .dashboard-category .progress {
        height: 4px;
        margin-top: 3px;
        background: var(--app-border);
    }

    .dashboard-category .progress-bar {
        background: var(--app-brand);
    }

.dashboard-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.small-box .icon i {
    opacity: 0.3;
}

.small-box.bg-gradient-cyan {
    background: var(--app-card-header) !important;
    background-image: none !important;
}
/* ============================================================
   THEME COMPLETION
   ------------------------------------------------------------
   Append this to your existing site stylesheet (the file with
   the --app-* variables). It fills the gaps where Bootstrap /
   AdminLTE defaults were showing through instead of the theme.

   Nothing here requires editing any .cshtml file — every rule
   targets classes that already exist in the markup.
   ============================================================ */


/* ============================================================
   BUTTONS — full theme coverage
   (base stylesheet only themed .btn-primary)
   ============================================================ */

.btn-primary,
.btn-info {
    background: var(--app-brand);
    border-color: var(--app-brand);
    color: var(--app-brand-text, #fff);
}

    .btn-primary:hover,
    .btn-info:hover,
    .btn-primary:focus,
    .btn-info:focus {
        background: var(--app-brand-hover);
        border-color: var(--app-brand-hover);
        color: var(--app-brand-text, #fff);
    }

/* Success — uses brand-alt where a theme defines it, else a green */
.btn-success {
    background: var(--app-brand-alt, #2d7d46);
    border-color: var(--app-brand-alt, #2d7d46);
    color: #fff;
}

    .btn-success:hover,
    .btn-success:focus {
        background: color-mix(in srgb, var(--app-brand-alt, #2d7d46) 85%, #000);
        border-color: color-mix(in srgb, var(--app-brand-alt, #2d7d46) 85%, #000);
        color: #fff;
    }

/* Secondary / outline-secondary — neutral surface tone */
.btn-secondary,
.btn-outline-secondary {
    background: var(--app-surface-alt);
    border: 1px solid color-mix(in srgb, var(--app-text) 28%, transparent);
    color: var(--app-text);
}

    .btn-secondary:hover,
    .btn-outline-secondary:hover,
    .btn-secondary:focus,
    .btn-outline-secondary:focus {
        background: color-mix(in srgb, var(--app-text) 12%, var(--app-surface-alt));
        border-color: color-mix(in srgb, var(--app-text) 40%, transparent);
        color: var(--app-text);
    }

/* Danger stays red on purpose — destructive actions should read
   as red in every theme. Only the hover is normalized. */
.btn-danger:hover,
.btn-danger:focus {
    filter: brightness(0.92);
}

/* btn-header — the translucent button on the page header bar */
.btn-header {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.35);
    color: #fff;
}

    .btn-header:hover,
    .btn-header:focus {
        background: rgba(255,255,255,0.25);
        color: #fff;
    }


/* ============================================================
   CARDS — info / primary / outline variants follow the theme
   ============================================================ */

.card-info > .card-header,
.card-primary > .card-header {
    background: var(--app-card-header) !important;
    color: #fff !important;
}

.card-primary.card-outline {
    border-top: 3px solid var(--app-brand);
}

.card-info .card-title,
.card-primary .card-title {
    color: #fff;
}


/* ============================================================
   NAV PILLS / ACCOUNT-PAGE TABS (.btn-secondary-me)
   ------------------------------------------------------------
   btn-secondary-me is a custom class with no base-stylesheet
   rule, so these tabs were showing Bootstrap defaults.
   ============================================================ */

.nav-pills .nav-link {
    color: var(--app-text);
    background: transparent;
}

    .nav-pills .nav-link:hover {
        background: var(--app-surface-alt);
    }

    .nav-pills .nav-link.btn-secondary-me {
        background: var(--app-surface-alt);
        color: var(--app-text);
        border: 1px solid var(--app-border);
        margin-right: 0.25rem;
        font-weight: 500;
    }

        .nav-pills .nav-link.btn-secondary-me:hover {
            background: color-mix(in srgb, var(--app-brand) 12%, var(--app-surface-alt));
            color: var(--app-text);
        }

        /* Active tab — !important needed to beat Bootstrap's own
   high-specificity .nav-pills .nav-link.active rule. */
        .nav-pills .nav-link.active,
        .nav-pills .nav-link.btn-secondary-me.active {
            background: var(--app-brand) !important;
            border-color: var(--app-brand) !important;
            color: #fff !important;
        }


/* ============================================================
   SIDEBAR USER PANEL — profile link follows the theme
   ------------------------------------------------------------
   The link wraps the whole panel (image + name), not just the
   name, so it's still clickable when the sidebar is collapsed
   and `.info` is hidden. Both `.app-sidebar` and `.sidebar` are
   targeted so it works regardless of which is the sidebar root.
   ============================================================ */

.app-sidebar .user-panel > a,
.sidebar .user-panel > a {
    color: var(--app-nav-text) !important;
    text-decoration: none;
}

    .app-sidebar .user-panel > a:hover,
    .sidebar .user-panel > a:hover,
    .app-sidebar .user-panel > a:focus,
    .sidebar .user-panel > a:focus {
        color: var(--app-nav-text) !important;
        text-decoration: none;
    }
 


/* ============================================================
   COLUMN-HEADER FILTER DROPDOWNS
   ------------------------------------------------------------
   The base stylesheet had no rules for the filter UI, so the
   dropdown rendered as a horizontal strip inside the nowrap
   centered <th>. These rules float it as a vertical list.
   ============================================================ */

.filterable-header {
    position: relative; /* anchor for the absolute dropdown */
    cursor: pointer;
    white-space: nowrap;
}

.filter-icon {
    margin-left: 0.35rem;
    font-size: 0.75rem;
    opacity: 0.6;
}

.filterable-header.has-active-filter .filter-icon {
    opacity: 1;
    color: #ffd84d; /* highlight when a filter is set */
}

.filter-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 220px;
    max-width: 300px;
    background: var(--app-surface);
    color: var(--app-text);
    border: 1px solid var(--app-border);
    border-radius: 0.375rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    padding: 0.5rem;
    text-align: left; /* override the th's center align */
    white-space: normal; /* override the th's nowrap */
    font-weight: 400;
}

    .filter-dropdown .filter-search {
        margin-bottom: 0.4rem;
    }

.filter-options {
    max-height: 220px;
    overflow-y: auto;
    display: flex; /* stack options vertically */
    flex-direction: column;
    gap: 0.1rem;
}

.filter-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.25rem 0.35rem;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--app-text);
}

    .filter-option:hover {
        background: var(--app-surface-alt);
    }

    .filter-option input[type="checkbox"] {
        margin: 0;
        flex-shrink: 0;
    }

.filter-actions {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid var(--app-border);
    margin-top: 0.4rem;
    padding-top: 0.35rem;
}
.app-sidebar .user-panel,
.sidebar .user-panel {
    border-bottom: none;
}
/* kill the border of the element directly above the user panel */
.app-sidebar .brand-link,
.sidebar .brand-link {
    border-bottom: none;
}
/* AdminLTE4's .sidebar-brand wrapper ships its own border-bottom in
   --bs-border-color, unthemed by any of the 6 custom themes below */
.app-sidebar .sidebar-brand {
    border-bottom: none;
}
/* ============================================================
   LOCKED CARD — header + footer fixed, body scrolls
   ============================================================ */
/* Locked-card layout is a DESKTOP pattern only.
   On mobile the page scrolls normally and card lists flow. */
@media (min-width: 768px) {
    .card-fill {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 57px - 46px - 0.5rem);
        overflow: auto;
    }

        .card-fill .card-body {
            flex: 1;
            overflow: auto;
            min-height: 0;
        }
}
    .card-fill .table-responsive thead th {
        position: sticky;
        top: 0;
        z-index: 20;
        background: var(--app-surface);
        color: var(--app-card-header);
        font-weight: 600;
        box-shadow: inset 0 -1px 0 var(--app-border);
    }

[data-app-theme$="-dark"] .card-fill .table-responsive thead th {
    color: #fff;
}

.btn-header-outline {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.6);
    color: #fff;
}

    .btn-header-outline:hover,
    .btn-header-outline:focus {
        background: rgba(255,255,255,0.15);
        color: #fff;
    }
tr.new-flight-row input[type="number"],
tr.new-flight-row input[type="text"],
tr.new-flight-row input[type="date"] {
    min-width: 0;
    width: 100%;
    padding-left: 2px;
    padding-right: 2px;
}
/* ============================================================
   FLIGHT TABLE FOOTER LABELS
   ------------------------------------------------------------
   The "Page Total / Previous Page Total / Total To Date" label
   cells are <th> elements inside <tbody>. In create/edit mode the
   row inputs widen the data columns and steal width from these
   label cells, which makes long translated strings (e.g. Spanish
   "Total hasta la página anterior:") wrap to 3 lines and break
   the footer layout. Forcing nowrap keeps them on one line.
   ============================================================ */
.flightsTable tbody th {
    white-space: nowrap;
}


/* Tighten cells so the table starts smaller before scaling */
/*@media (max-width: 1600px) {
    .flightsTable {
        font-size: 0.78rem;
    }

        .flightsTable tbody td,
        .flightsTable thead th {
            padding: 0.35rem 0.25rem;
        }
}*/
/* Ensure flight table wrappers scroll horizontally */
.flight-table-wrapper.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* Open sidebar — full logo */
.app-sidebar .brand-link {
    height: 5rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0 !important;
    line-height: normal !important;
}

    .app-sidebar .brand-link img {
        height: 3.1rem !important;
        max-width: 100% !important;
        object-fit: contain;
        transform: translateY(-0.4rem);
    }

/* Collapsed sidebar — small logo */
.sidebar-collapse .app-sidebar .brand-link img {
    height: 2.4rem !important;
    transform: translateY(-0.4rem);
}
.login-logo {
    margin-bottom: 0;
    padding-bottom: .5rem;
}
.data-closed-logo{
    height:2rem;
}

.login-box .card {
    margin-top: 0;
}
/* ============================================================
   DASHBOARD — MOBILE FIT (all phones, down to 320px)
   ============================================================ */
.login-logo {
    margin-bottom: 0;
    padding-bottom: .5rem;
}

.login-box .card {
    margin-top: 0;
}

@media (max-width: 767.98px) {

    /* ---- Content area: prevent any horizontal overflow ---- */
    .content,
    .content .container-fluid {
        padding-left: 0.4rem;
        padding-right: 0.4rem;
        overflow-x: hidden;
    }

        /* ---- Stat-box grid: tighter gutters ---- */
        .content .row {
            margin-left: -0.3rem;
            margin-right: -0.3rem;
        }

            .content .row > [class*="col-"] {
                padding-left: 0.3rem;
                padding-right: 0.3rem;
            }

    /* ---- Stat boxes ---- */
    .small-box {
        margin-bottom: 0.5rem;
        min-height: 0;
        overflow: hidden;
        border-radius: 0.4rem;
    }

        .small-box .inner {
            padding: 0.55rem 0.5rem;
        }

            .small-box .inner h3 {
                font-size: clamp(0.95rem, 4.5vw, 1.5rem);
                margin-bottom: 0.1rem;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .small-box .inner p {
                font-size: clamp(0.65rem, 2.5vw, 0.85rem);
                margin-bottom: 0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

        .small-box .icon {
            display: none; /* free up horizontal space */
        }

        .small-box .small-box-footer {
            font-size: 0.75rem;
            padding: 0.3rem 0.5rem;
        }
    /* ---- Info boxes: 2-up on mobile ---- */
    .content .row > .col-md-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .info-box {
        margin-bottom: 0.5rem;
        min-width: 0;
        overflow: hidden;
    }

        .info-box .info-box-icon {
            width: 55px;
            min-width: 55px;
            height: 55px;
            font-size: 1.2rem;
            line-height: 55px;
        }

        .info-box .info-box-content {
            padding: 0.35rem 0.6rem;
            min-width: 0; /* let flexbox shrink text */
        }

        .info-box .info-box-text {
            font-size: 0.78rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .info-box .info-box-number {
            font-size: 1rem;
        }

    /* ---- Page header ---- */
    .content-header {
        padding: 0.5rem 0;
    }

        .content-header h1 {
            font-size: clamp(1.1rem, 4vw, 1.4rem);
        }

        .content-header .breadcrumb {
            font-size: 0.75rem;
            margin-bottom: 0;
        }
}

/* ---- Very small phones (SE, Galaxy A01, etc.) ---- */
@media (max-width: 359px) {

    .small-box .inner h3 {
        font-size: 0.85rem;
    }

    .small-box .inner p {
        font-size: 0.6rem;
    }

    .small-box .inner {
        padding: 0.4rem;
    }

    .small-box .small-box-footer {
        font-size: 0.7rem;
        padding: 0.25rem 0.4rem;
    }
}
/* ============================================================
   SPONSOR BANNER IN FOOTER — remove extra spacing
   ============================================================ */
.app-footer {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

    .app-footer #sponsor-banners {
        margin-bottom: 0.35rem;
    }

        .app-footer #sponsor-banners .carousel-item a {
            padding: 0;
            line-height: 0;
        }

.footer-version-text {
    color: var(--app-brand) !important;
}

@media (max-width: 767.98px) {
    .app-sidebar .bottom-div {
        color: #fff;
    }
}

.sidebar-feature-request {
    border-top: 1px solid var(--app-border, rgba(255,255,255,0.10));
    padding: 0.75rem 1rem;
}
@media (max-width: 767.98px) {
    .card-header .nav-pills {
        flex-wrap: nowrap;
        gap: 0.25rem;
    }

        .card-header .nav-pills .nav-link.btn-secondary-me {
            margin-right: 0;
            padding: 0.3rem 0.4rem;
            font-size: 1rem;
            white-space: nowrap;
            text-align: center;
            flex: 1 1 0;
        }
}

.impersonation-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    background: #ffc107;
    color: #1f2d3d;
    text-align: center;
    padding: 8px 12px;
    font-size: .9rem;
    box-shadow: 0 -2px 6px rgba(0,0,0,.25);
}

    .impersonation-banner a {
        color: #0b3d91;
        font-weight: 600;
        text-decoration: underline;
        margin-left: 8px;
    }

body.is-impersonating .wrapper {
    padding-bottom: 44px;
}
.filterable-header {
    overflow: visible;
}

/* full size by default (desktop) */
.pilot-contact-text {
    font-size: 1rem;
}

/* shrink below the lg breakpoint (mobile/tablet) */
@media (max-width: 991.98px) {
    .pilot-contact-text {
        font-size: 0.79rem;
    }
}

/* Account-page tabs sit ON the colored card-header bar */
.card-header .nav-pills .nav-link.btn-secondary-me {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.45);
    color: #fff;
}

    .card-header .nav-pills .nav-link.btn-secondary-me:hover {
        background: rgba(255,255,255,0.28);
        color: #fff;
    }

    /* Active tab — solid white box, brand-colored text, so it stands out
   against the bar instead of blending into it */
    .card-header .nav-pills .nav-link.active,
    .card-header .nav-pills .nav-link.btn-secondary-me.active {
        background: #fff !important;
        border-color: #fff !important;
        color: var(--app-brand) !important;
    }

/* Bootstrap nav-tabs inside the brand-colored card header (E6B): inactive
   tabs default to the link color, which vanishes against the brand bar */
.card-header-tabs .nav-link {
    color: rgba(255,255,255,0.85);
}

    .card-header-tabs .nav-link:hover,
    .card-header-tabs .nav-link:focus {
        color: #fff;
        border-color: rgba(255,255,255,0.45) rgba(255,255,255,0.45) transparent;
        background: rgba(255,255,255,0.15);
    }

    .card-header-tabs .nav-link.active {
        color: var(--bs-body-color);
        background: var(--bs-card-bg, var(--bs-body-bg));
        border-color: transparent;
    }
/* ---- Info boxes: 2-up on mobile ---- */
/*.content .row > .col-md-4 {
    flex: 0 0 50%;
    max-width: 50%;
}
*/
/* Center hours/minutes (and other number) inputs in create/edit flows */
.flightsTable tr.new-flight-row input[type="number"],
.flightsTable tr[data-row-state="editing"] input[type="number"],
.mobile-flight-modal .time-row input[type="number"],
.mobile-flight-modal .time-breakdown-item input[type="number"] {
    text-align: center;
}

.btn-success {
    background: #2e7d32;
    border-color: #2e7d32;
    color: #fff;
}

    .btn-success:hover,
    .btn-success:focus {
        background: #256a29;
        border-color: #256a29;
        color: #fff;
    }

@media (max-width: 767.98px) {
    /* Stack the Licenses-tab tables into cards on mobile */
    .mobile-stack-table thead {
        display: none;
    }

    .mobile-stack-table,
    .mobile-stack-table tbody,
    .mobile-stack-table tr,
    .mobile-stack-table td {
        display: block;
        width: 100%;
    }

        .mobile-stack-table tr {
            margin-bottom: .75rem;
            border: 1px solid var(--app-border);
            border-radius: .375rem;
            padding: .25rem .5rem;
            background: var(--app-surface);
        }

        .mobile-stack-table td {
            border: none;
            text-align: right;
            padding: .4rem .5rem;
            padding-left: 45%;
            position: relative;
            color: var(--app-text);
        }

            .mobile-stack-table td::before {
                content: attr(data-label);
                position: absolute;
                left: .5rem;
                width: 40%;
                font-weight: 600;
                text-align: left;
                color: var(--app-text-muted);
            }

            /* Control buttons become a right-aligned footer */
            .mobile-stack-table td.control-cell {
                padding-left: .5rem;
                padding-top: .5rem;
                margin-top: .25rem;
                text-align: right;
                border-top: 1px solid var(--app-border);
            }

                .mobile-stack-table td.control-cell::before {
                    content: "";
                }
}
.flight-card-line {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.fc-date {
    flex-shrink: 0;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--app-brand);
    min-width: 3.2rem;
}

.fc-reg {
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--app-text);
    background: var(--app-surface-alt);
    padding: 0.1rem 0.45rem;
    border-radius: 0.25rem;
}

.fc-route {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--app-text);
    white-space: nowrap;
    overflow: hidden;
}

    .fc-route .bi-arrow-right {
        color: var(--app-brand);
        font-size: 0.85rem;
    }

.fc-time {
    flex-shrink: 0;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--app-text);
    font-variant-numeric: tabular-nums;
}

.fc-chevron {
    flex-shrink: 0;
    font-size: 0.9rem;
}

/* View Flight modal — detail typography */
.detail-list {
    margin: 0;
    display: grid;
    grid-template-columns: 38% 62%;
    gap: 0.55rem 0.75rem;
    align-items: baseline;
}

    .detail-list dt {
        margin: 0;
        font-weight: 600;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--app-text-muted);
    }

    .detail-list dd {
        margin: 0;
        font-size: 0.95rem;
        font-weight: 500;
        color: var(--app-text);
        word-break: break-word;
    }

        .detail-list dd:empty::before {
            content: "—";
            color: var(--app-text-muted);
            opacity: 0.5;
        }

/* Time values — match modal font, just align the digits */
.detail-time-row {
    font-family: inherit; /* was: monospace */
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--app-text);
    font-variant-numeric: tabular-nums;
}

    .detail-time-row:empty::before {
        content: "—";
        color: var(--app-text-muted);
        opacity: 0.5;
    }

/* Outline-primary + btn-check toggle, themed */
.btn-outline-primary {
    color: var(--app-brand);
    border-color: var(--app-brand);
    background: transparent;
}

    .btn-outline-primary:hover {
        color: #fff;
        background: var(--app-brand);
        border-color: var(--app-brand);
    }

.btn-outline-primary {
    color: var(--app-brand) !important;
    border-color: var(--app-brand) !important;
    background: transparent !important;
}

    .btn-check:checked + .btn-outline-primary,
    .btn-outline-primary.active {
        color: #fff !important;
        background: var(--app-brand) !important;
        border-color: var(--app-brand) !important;
    }

    .btn-outline-primary:hover {
        color: #fff !important;
        background: var(--app-brand) !important;
        border-color: var(--app-brand) !important;
    }

.btn-group .btn-check {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    pointer-events: none;
}
/* ============================================================
   MOBILE — COLLAPSIBLE YEAR TOGGLE
   ============================================================ */
/*.year-toggle-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    margin: 1rem 0 0.25rem 0;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 0.75rem;
    background: var(--app-brand);
    color: var(--app-brand-text, #fff);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: box-shadow 0.15s ease, transform 0.05s ease;
}

    .year-toggle-btn:active {
        transform: scale(0.99);
    }

.ytb-year {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ytb-meta {
    display: flex;
    gap: 0.4rem;
    margin-left: auto;
}

.ytb-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ytb-chevron {
    font-size: 1rem;
    transition: transform 0.2s ease;
}

.year-toggle-btn[aria-expanded="true"] .ytb-chevron {
    transform: rotate(180deg);
}*/

/* indent the months slightly so the hierarchy reads */
/*.year-collapse {
    padding-left: 0.25rem;
}*/
    /* ============================================================
   MOBILE — MONTH HEADERS RESTYLED (ghost rows under the year)
   ============================================================ */
    /*.year-collapse .mobile-month-header {
        background: var(--app-surface-alt);
        color: var(--app-text);
        border-left: 4px solid var(--app-brand);
        border-radius: 0.375rem;
        margin: 0.5rem 0 0.4rem 0.75rem;*/ /* indent under the year */
        /*padding: 0.45rem 0.75rem;
        font-weight: 600;
        font-size: 0.9rem;
    }*/

        /* calendar icon picks up the brand color instead of white */
        /*.year-collapse .mobile-month-header .bi-calendar3 {
            color: var(--app-brand);
        }*/

        /* count badge: brand-tinted instead of white-on-brand */
        /*.year-collapse .mobile-month-header .text-bg-light {
            background: color-mix(in srgb, var(--app-brand) 14%, var(--app-surface));
            color: var(--app-brand);
            font-weight: 700;
        }*/

        /* chevron follows the muted text color */
        /*.year-collapse .mobile-month-header .collapse-chevron {
            color: var(--app-text-muted);
        }*/

    /* indent the flight cards one more step so the tree reads:
   year → month → flights */
    /*.year-collapse .collapse .flight-card {
        margin-left: 1.5rem;
    }*/
/* ============================================================
   MOBILE — COLLAPSIBLE FLIGHT TREE
   Contrast system: 3 layers + a visible rail
     L1 Year   = solid brand, gradient depth, the loudest thing
     L2 Month  = brand-tinted ghost, lights up when expanded
     L3 Flight = quiet neutral surface with a crisp border
   ============================================================ */

/* ─────────────────────────────────────────────
   L1 — YEAR TOGGLE
───────────────────────────────────────────── */
.year-toggle-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    margin: 1rem 0 0.25rem 0;
    padding: 0.8rem 1rem;
    border-radius: 0.75rem;
    color: var(--app-brand-text, #fff);
    /* top-lit gradient instead of a flat fill — gives it physical depth */
    background: linear-gradient( 180deg, color-mix(in srgb, var(--app-brand) 88%, #fff) 0%, var(--app-brand) 45%, color-mix(in srgb, var(--app-brand) 90%, #000) 100% );
    /* hairline edge so it still pops on dark themes where shadows die */
    border: 1px solid color-mix(in srgb, #fff 22%, var(--app-brand));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), /* top highlight */
    0 2px 10px color-mix(in srgb, var(--app-brand) 35%, transparent);
    transition: box-shadow 0.15s ease, transform 0.05s ease, filter 0.15s ease;
}

    .year-toggle-btn:active {
        transform: scale(0.99);
        filter: brightness(0.96);
    }

    /* collapsed years recede slightly so the open one dominates */
    .year-toggle-btn.collapsed {
        filter: saturate(0.85);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
    }

.ytb-year {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px rgba(0,0,0,0.18);
}

.ytb-meta {
    display: flex;
    gap: 0.4rem;
    margin-left: auto;
}

.ytb-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ytb-chevron {
    font-size: 1rem;
    transition: transform 0.2s ease;
}

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

/* ─────────────────────────────────────────────
   THE RAIL — visible spine connecting the tree
───────────────────────────────────────────── */
.year-collapse {
    margin-left: 0.65rem; /* roughly under the year text */
    padding-left: 0.75rem;
    border-left: 2px solid color-mix(in srgb, var(--app-brand) 35%, transparent);
}

    /* ─────────────────────────────────────────────
   L2 — MONTH HEADERS
───────────────────────────────────────────── */
    .year-collapse .mobile-month-header {
        background: var(--app-surface-alt);
        color: var(--app-text);
        border: 1px solid var(--app-border);
        border-left: 4px solid var(--app-brand);
        border-radius: 0.375rem;
        margin: 0.5rem 0 0.4rem 0;
        padding: 0.5rem 0.75rem;
        font-weight: 600;
        font-size: 0.9rem;
        transition: background 0.15s ease, border-color 0.15s ease;
    }

        /* the OPEN month lights up — closed siblings stay ghosted */
        .year-collapse .mobile-month-header[aria-expanded="true"] {
            background: color-mix(in srgb, var(--app-brand) 12%, var(--app-surface));
            border-color: color-mix(in srgb, var(--app-brand) 35%, transparent);
            border-left-color: var(--app-brand);
        }

        .year-collapse .mobile-month-header .bi-calendar3 {
            color: var(--app-brand);
        }

        .year-collapse .mobile-month-header .text-bg-light {
            background: color-mix(in srgb, var(--app-brand) 14%, var(--app-surface));
            color: var(--app-brand);
            font-weight: 700;
            font-variant-numeric: tabular-nums;
        }

/* on dark surfaces the brand color can get muddy inside a tint —
   brighten the badge text so it stays legible */
[data-app-theme="dark"] .year-collapse .mobile-month-header .text-bg-light,
[data-app-theme="midnight"] .year-collapse .mobile-month-header .text-bg-light {
    color: color-mix(in srgb, var(--app-brand) 45%, #fff);
}

/* month chevron rotates like the year one */
.year-collapse .mobile-month-header .collapse-chevron {
    color: var(--app-text-muted);
    transition: transform 0.2s ease;
}

.year-collapse .mobile-month-header[aria-expanded="true"] .collapse-chevron {
    transform: rotate(180deg);
    color: var(--app-brand);
}

/* ─────────────────────────────────────────────
   L3 — FLIGHT CARDS (the quiet layer)
───────────────────────────────────────────── */
.year-collapse .collapse .flight-card {
    margin: 0 0 0.35rem 1rem; /* one more indent step */
    padding: 0.55rem 0.75rem;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 0.375rem;
    transition: background 0.1s ease, transform 0.05s ease;
}

    .year-collapse .collapse .flight-card:active {
        background: color-mix(in srgb, var(--app-brand) 8%, var(--app-surface));
        transform: scale(0.995);
    }

.flight-card-line {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: var(--app-text);
}

.fc-date {
    color: var(--app-text-muted);
    min-width: 3.4rem; /* keeps the column aligned */
    font-variant-numeric: tabular-nums;
}

.fc-reg {
    font-weight: 700;
    letter-spacing: 0.02em;
}

.fc-route {
    color: var(--app-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .fc-route .bi-arrow-right {
        color: var(--app-brand);
        font-size: 0.75rem;
    }

/* the time is the payoff number on every row — make it the anchor */
.fc-time {
    margin-left: auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--app-text);
}

.fc-chevron {
    font-size: 0.8rem;
}

@media (max-width: 767.98px) {
    .document-add-buttons {
        display: flex;
        flex-wrap: nowrap;
        gap: 2px;
        margin-bottom: 0.5rem;
    }

        .document-add-buttons .btn {
            flex: 1 1 0;
            font-size: 0.74rem;
            padding: 0.45rem 2px; /* vertical padding kept so it's still tappable */
            white-space: nowrap;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            min-width: 0; /* lets flex actually shrink below content size */
        }

            .document-add-buttons .btn .bi-plus,
            .document-add-buttons .btn .bi-plus-lg {
                margin: 0 -2px 0 0; /* pull the icon tight against the text */
                font-size: 0.9em;
            }
}
@media (max-width: 767.98px) {
    /* space between the card top (tab bar) and the button row */
    .document-add-buttons {
        margin-top: 0.2rem;
        margin-bottom: 1.85rem;
    }

        /* ---- elevated brand chips (mobile only) ---- */
        .document-add-buttons .btn {
            background: linear-gradient( 180deg, color-mix(in srgb, var(--app-brand) 86%, #fff) 0%, var(--app-brand) 50%, color-mix(in srgb, var(--app-brand) 88%, #000) 100% );
            border: 1px solid color-mix(in srgb, #fff 25%, var(--app-brand));
            color: var(--app-brand-text, #fff);
            font-weight: 600;
            border-radius: 0.5rem;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 2px 8px color-mix(in srgb, var(--app-brand) 35%, transparent);
            transition: box-shadow 0.15s ease, transform 0.08s ease, filter 0.15s ease;
        }

            .document-add-buttons .btn:active {
                transform: scale(0.97);
                filter: brightness(0.95);
                box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
            }

            .document-add-buttons .btn .bi-plus,
            .document-add-buttons .btn .bi-plus-lg {
                font-weight: 700;
                text-shadow: 0 1px 1px rgba(0,0,0,0.15);
            }

            .document-add-buttons .btn:focus-visible {
                outline: 2px solid color-mix(in srgb, var(--app-brand) 60%, #fff);
                outline-offset: 2px;
            }

}
/* Control buttons: always side by side, never stacked */
.mobile-stack-table td.control-cell {
    display: flex;
    flex-wrap: nowrap; /* the guarantee */
    justify-content: flex-end;
    align-items: center;
    gap: 0.35rem;
}

    .mobile-stack-table td.control-cell .btn {
        flex: 0 0 auto; /* don't shrink, don't grow, don't wrap */
        margin: 0;
    }
/* Table control columns on desktop: keep edit/delete on one line */
.table td.control-cell,
.table .control-cell {
    white-space: nowrap;
}

    .table .control-cell .btn {
        display: inline-flex;
        margin: 0 0.1rem;
    }
@media (max-width: 767.98px) {

    /* ─────────────────────────────────────────
       1. INNER RECORD CARDS — real separation
    ───────────────────────────────────────── */
    .mobile-stack-table tr {
        background: var(--app-surface-alt); /* tinted, not white-on-white */
        border: 1px solid color-mix(in srgb, var(--app-brand) 22%, var(--app-border));
        border-left: 4px solid var(--app-brand); /* brand spine — instantly reads as "a record" */
        border-radius: 0.5rem;
        padding: 0.35rem 0.6rem;
        margin-bottom: 0.85rem; /* clear gap between records */
        box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    }

        .mobile-stack-table tr:last-child {
            margin-bottom: 0.35rem;
        }

    /* ─────────────────────────────────────────
       2. LABEL / VALUE ROWS — readable pairs
    ───────────────────────────────────────── */
    .mobile-stack-table td {
        padding: 0.45rem 0.25rem;
        border-bottom: 1px dashed color-mix(in srgb, var(--app-text) 12%, transparent);
    }

    .mobile-stack-table tr td:nth-last-child(2) {
        border-bottom: none; /* last data row before controls */
    }

    /* labels: smaller, uppercase — clearly "the name of the field" */
    .mobile-stack-table td::before {
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--app-text-muted);
    }

    /* values: darker and heavier — clearly "the data" */
    .mobile-stack-table td {
        font-weight: 600;
        color: var(--app-text);
        font-size: 0.95rem;
    }

        /* ─────────────────────────────────────────
       3. CONTROL FOOTER — anchored, not floating
    ───────────────────────────────────────── */
        .mobile-stack-table td.control-cell {
            border-bottom: none;
            border-top: 1px solid color-mix(in srgb, var(--app-brand) 18%, var(--app-border));
            margin-top: 0.25rem;
            padding-top: 0.55rem;
        }
}
@media (max-width: 767.98px) {

    /* the p-0 body is right for desktop tables, wrong for stacked cards —
       give the records an inset on mobile */
    .card-body:has(> .mobile-stack-table) {
        padding: 0.75rem !important;
    }

    /* records no longer need to fight the card edge */
    .mobile-stack-table tr {
        margin-bottom: 0.75rem;
    }

        .mobile-stack-table tr:last-child {
            margin-bottom: 0;
        }
}

/* ============================================================
   ROW ACTIONS DROPDOWN (ellipsis → Edit / Delete)
   ============================================================ */

/* The trigger: square it off, subtle so the ellipsis reads as the focus */
.flightsTable .view-actions .btn {
    padding: 0.25rem 0.5rem;
    border-radius: 0.4rem;
    line-height: 1;
}

/* The popout surface — follows the theme instead of staying white */
.view-actions .dropdown-menu {
    min-width: 9rem;
    padding: 0.3rem;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 0.55rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    overflow: hidden;
}

/* Items: comfortable hit area, aligned icon + label */
.view-actions .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.7rem;
    border-radius: 0.4rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--app-text);
    transition: background 0.12s ease, color 0.12s ease;
}

    .view-actions .dropdown-item i {
        font-size: 0.95rem;
        opacity: 0.85;
    }
    /* Edit → solid brand fill on hover, white text. The old tinted-bg +
   brand-text version went invisible in dark/midnight, where --app-brand
   is a near-black teal/purple sitting on an already-dark surface. */
    .view-actions .dropdown-item.edit-row-btn:hover,
    .view-actions .dropdown-item.edit-row-btn:focus,
    .view-actions .dropdown-item.edit-row-btn:active {
        background: var(--app-brand);
        color: #fff;
    }

        .view-actions .dropdown-item.edit-row-btn:hover i {
            opacity: 1;
        }

    /* Delete → red text on the normal surface; fills solid red on hover.
   !important + the doubled class beat Bootstrap's .text-danger and
   link-color rules that were keeping it red-on-red. */
    .view-actions .dropdown-item.delete-button.delete-button {
        color: #dc3545 !important;
        background: transparent !important;
    }

    .view-actions .dropdown-item.delete-button:hover,
    .view-actions .dropdown-item.delete-button:focus,
    .view-actions .dropdown-item.delete-button:active {
        background: #dc3545 !important;
        color: #fff !important;
    }

        .view-actions .dropdown-item.delete-button:hover i {
            opacity: 1;
        }

/* Add CMA / Add Courses / Add License buttons sit on the brand card-header */
.card-tools .btn-primary {
    background: rgba(255,255,255,0.92);
    border-color: rgba(255,255,255,0.92);
    color: var(--app-brand);
}

    .card-tools .btn-primary:hover,
    .card-tools .btn-primary:focus {
        background: #fff;
        border-color: #fff;
        color: var(--app-brand);
    }

/* Let the ellipsis dropdown menu escape the table-responsive clip.
   table-responsive's overflow-x: auto forces overflow-y to auto too
   (CSS overflow spec), which clips the absolutely-positioned Bootstrap
   .dropdown-menu popup — hiding Edit/Delete for Licenses, CMA and
   Courses rows. Only relax the clip while a menu in that table is
   actually open, so horizontal scrolling still works the rest of the
   time. Was previously scoped to mobile-stack-table @ mobile width
   only, which left desktop (all tables) and Licenses (no
   mobile-stack-table class) still clipped. */
.card-body.table-responsive:has(.dropdown-menu.show) {
    overflow: visible !important;
}

.mobile-stack-table td a.btn:has(i.bi-file-earmark-pdf) {
    color: var(--app-brand);
    border-color: var(--app-brand);
    background: transparent;
}

    .mobile-stack-table td a.btn:has(i.bi-file-earmark-pdf):hover {
        background: var(--app-brand);
        border-color: var(--app-brand);
        color: var(--app-brand-text, #fff);
    }

/* Midnight Ocean / Midnight Purple dark brands (#0d3a4d, #2a2350) are
   nearly the same as the #212529 table surface, so the brand-colored
   outline text above disappears until hover. Lighten text/border there,
   same approach as the dashboard outline buttons; hover still fills with
   the brand color. */
[data-app-theme="midnightocean-dark"] .mobile-stack-table td a.btn:has(i.bi-file-earmark-pdf),
[data-app-theme="purple-dark"] .mobile-stack-table td a.btn:has(i.bi-file-earmark-pdf) {
    color: color-mix(in srgb, var(--app-brand) 35%, #fff);
    border-color: color-mix(in srgb, var(--app-brand) 35%, #fff);
}

    [data-app-theme="midnightocean-dark"] .mobile-stack-table td a.btn:has(i.bi-file-earmark-pdf):hover,
    [data-app-theme="purple-dark"] .mobile-stack-table td a.btn:has(i.bi-file-earmark-pdf):hover {
        color: #fff;
        border-color: color-mix(in srgb, var(--app-brand) 35%, #fff);
    }
.alert .btn-close {
    opacity: 1;
    font-size: 1.5rem;
}

/* ============================================================
   SIDEBAR NAV HIERARCHY
   ------------------------------------------------------------
   Three item types were rendering identically: top-level links,
   collapsible parents, and treeview children. These rules give
   each one a distinct weight and connect children to their
   parent with a rail.
   ============================================================ */

/* ─────────────────────────────────────────────
   SECTION HEADERS  ("Flying" / "Administration")
───────────────────────────────────────────── */
.app-sidebar .nav-sidebar > .nav-header {
    padding: 0.9rem 1rem 0.35rem;
    margin-top: 0.5rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: rgba(255,255,255,0.55);
    background: transparent;
    border-top: 1px solid rgba(255,255,255,0.10);
}

    /* first header shouldn't carry a top rule — the user panel is above it */
    .app-sidebar .nav-sidebar > .nav-header:first-child {
        border-top: none;
        margin-top: 0;
        padding-top: 0.35rem;
    }

/* When collapsed, the label is useless — degrade it into a divider line */
.sidebar-collapse .app-sidebar .nav-sidebar > .nav-header {
    display: block !important;
    height: 1px;
    padding: 0;
    margin: 0.6rem 1rem;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    border-top: none;
    background: rgba(255,255,255,0.18);
}

/* ─────────────────────────────────────────────
   L1 — TOP-LEVEL ITEMS
   Every row gets the darker fill AND the elevation
   shadow that AdminLTE applies only to .active.
   !important because AdminLTE's own active rule
   would otherwise keep the current page different.
───────────────────────────────────────────── */
.app-sidebar .nav-sidebar > .nav-item > .nav-link,
.app-sidebar .nav-sidebar > .nav-item > .nav-link.active {
    background: rgba(0,0,0,0.12) !important;
    color: var(--app-nav-text) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

    .app-sidebar .nav-sidebar > .nav-item > .nav-link:hover,
    .app-sidebar .nav-sidebar > .nav-item > .nav-link.active:hover {
        background: rgba(0,0,0,0.18) !important;
        color: var(--app-nav-text) !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.16), 0 1px 3px rgba(0,0,0,0.28);
    }

/* Chevron: points left when closed, down when open */
.app-sidebar .nav-sidebar .nav-link > p > .right {
    transition: transform 0.2s ease;
}

.app-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link > p > .right,
.app-sidebar .nav-sidebar > .nav-item.menu-is-opening > .nav-link > p > .right {
    transform: rotate(-90deg);
}
/* ─────────────────────────────────────────────
   L2 — TREEVIEW CHILDREN (the rail)
───────────────────────────────────────────── */
.app-sidebar .nav-sidebar .nav-treeview {
    margin-left: 1.35rem;
    padding-left: 0.55rem;
    border-left: 2px solid rgba(255,255,255,0.22);
}

    .app-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link {
        font-weight: 400;
        font-size: 0.86rem;
        padding: 0.4rem 0.6rem;
        margin: 0.1rem 0.2rem;
        background: transparent;
        color: rgba(255,255,255,0.72) !important;
    }

        .app-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link .nav-icon {
            font-size: 0.85rem;
            opacity: 0.75;
            width: 1.3rem;
        }

        .app-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link:hover {
            background: var(--app-nav-hover);
            color: var(--app-nav-text) !important;
        }

        .app-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
            background: rgba(255,255,255,0.16);
            color: #fff !important;
            font-weight: 600;
            box-shadow: inset 3px 0 0 #fff;
        }

            .app-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link.active .nav-icon {
                opacity: 1;
            }

/* Collapsed sidebar: no rail, no indent */
.sidebar-collapse .app-sidebar .nav-sidebar .nav-treeview {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
}

/* ============================================================
   SIDEBAR USER PANEL — same chip as a top-level nav row
   ============================================================ */

.app-sidebar .user-panel,
.sidebar .user-panel {
    margin: 0.6rem 0.25rem 0.15rem;
    padding: 0.5rem 1rem;
    border-radius: 0.4rem;
    background: rgba(0,0,0,0.12);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    border-bottom: none;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

    .app-sidebar .user-panel:hover,
    .sidebar .user-panel:hover {
        background: rgba(0,0,0,0.18);
        box-shadow: 0 2px 5px rgba(0,0,0,0.16), 0 1px 3px rgba(0,0,0,0.28);
    }

    .app-sidebar .user-panel .image,
    .sidebar .user-panel .image {
        padding: 0;
        width: 1.6rem;
        margin-right: 0.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .app-sidebar .user-panel .image img,
        .sidebar .user-panel .image img {
            box-shadow: none;
        }

    .app-sidebar .user-panel .info span,
    .sidebar .user-panel .info span {
        font-weight: 400;
        font-size: 1rem;
        line-height: 1.5;
        color: var(--app-nav-text) !important;
    }

/* collapsed sidebar — chip shrinks to the avatar */
.sidebar-collapse .app-sidebar .user-panel,
.sidebar-collapse .sidebar .user-panel {
    padding: 0.5rem;
    justify-content: center;
}

    .sidebar-collapse .app-sidebar .user-panel .image,
    .sidebar-collapse .sidebar .user-panel .image {
        margin-right: 0;
    }

/* ============================================================
   COLLAPSED SIDEBAR - HARD LOCK
   AdminLTE mini sidebar hover completely disabled
============================================================ */


/* ------------------------------------------------------------
   SIDEBAR WIDTH NEVER CHANGES
------------------------------------------------------------ */

body.sidebar-mini.sidebar-collapse .main-sidebar,
body.sidebar-mini.sidebar-collapse .main-sidebar:hover,
body.sidebar-mini.sidebar-collapse .main-sidebar .sidebar,
body.sidebar-mini.sidebar-collapse .main-sidebar:hover .sidebar,
body.sidebar-mini.sidebar-collapse .brand-link,
body.sidebar-mini.sidebar-collapse .brand-link:hover {
    width: 4.6rem !important;
    min-width: 4.6rem !important;
    max-width: 4.6rem !important;
}



    /* ------------------------------------------------------------
   DISABLE ALL INTERNAL HOVER EXPANSION
------------------------------------------------------------ */
/*
    body.sidebar-mini.sidebar-collapse .main-sidebar:hover * {
        width: auto;
    }*/


    body.sidebar-mini.sidebar-collapse .main-sidebar:hover {
        width: 4.6rem !important;
    }


        body.sidebar-mini.sidebar-collapse .main-sidebar:hover .sidebar,
        body.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar,
        body.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-item {
            width: 4.6rem !important;
            max-width: 4.6rem !important;
        }

        /* Same box as the rest-state nav-link lock (COLLAPSED NAV ICON LOCK,
           further down) — this selector's higher specificity (.main-sidebar:hover
           vs .app-sidebar) was winning and snapping the icon tile from 43px back
           to 4.6rem the moment the mouse entered the sidebar at all, not just on
           a specific icon. */
        body.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-link {
            width: 43px !important;
            max-width: 43px !important;
        }



        /* ------------------------------------------------------------
   COLLAPSED TEXT NEVER RETURNS
------------------------------------------------------------ */

        body.sidebar-mini.sidebar-collapse .nav-link p,
        body.sidebar-mini.sidebar-collapse .brand-text,
        body.sidebar-mini.sidebar-collapse .user-panel .info,
        body.sidebar-mini.sidebar-collapse .main-sidebar:hover p,
        body.sidebar-mini.sidebar-collapse .main-sidebar:hover .info,
        body.sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-text {
            display: none !important;
        }



/* ------------------------------------------------------------
   REMOVE ADMINLTE NAV MOVEMENT
------------------------------------------------------------ */

body.sidebar-mini.sidebar-collapse .app-sidebar .nav-link,
body.sidebar-mini.sidebar-collapse .app-sidebar .nav-link:hover {
    transform: none !important;
    top: 0 !important;
    height: 35px !important;
    min-height: 35px !important;
    max-height: 35px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: .15rem !important;
    margin-bottom: .15rem !important;
    box-sizing: border-box !important;
}



/* ------------------------------------------------------------
   ICON LOCK
------------------------------------------------------------ */

body.sidebar-mini.sidebar-collapse .nav-icon {
    width: 1.6rem !important;
    min-width: 1.6rem !important;
    margin-left: 0 !important;
    margin-right: .2rem !important;
    transform: none !important;
}



/* ------------------------------------------------------------
   PROFILE / USER PANEL LOCK
   THIS WAS THE MOVING PART
------------------------------------------------------------ */

body.sidebar-mini.sidebar-collapse .user-panel,
body.sidebar-mini.sidebar-collapse .main-sidebar:hover .user-panel {
    height: 35px !important;
    min-height: 35px !important;
    max-height: 35px !important;
    margin: .15rem .25rem !important;
    padding: 0 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    /* top-level nav-links keep their rgba(0,0,0,.12) tile at all times
       (see .app-sidebar .nav-sidebar > .nav-item > .nav-link, ~line 2486) —
       match that here instead of going transparent-until-hover */
    background: rgba(0,0,0,0.12) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) !important;
}

    body.sidebar-mini.sidebar-collapse .user-panel:hover {
        background: rgba(0,0,0,0.18) !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.16), 0 1px 3px rgba(0,0,0,0.28) !important;
    }



    body.sidebar-mini.sidebar-collapse .user-panel .image,
    body.sidebar-mini.sidebar-collapse .main-sidebar:hover .user-panel .image {
        width: 1.5rem !important;
        height: 1.5rem !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }



    body.sidebar-mini.sidebar-collapse .user-panel img {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }



/* ------------------------------------------------------------
   TREEVIEW
   CLICK ONLY
------------------------------------------------------------ */

body.sidebar-mini.sidebar-collapse .nav-treeview {
    transition: none !important;
    animation: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}


/* Closed treeviews */

body.sidebar-mini.sidebar-collapse
.nav-item:not(.menu-open) > .nav-treeview {
    display: none !important;
}


/* Open treeviews */

body.sidebar-mini.sidebar-collapse
.nav-item.menu-open > .nav-treeview {
    display: block !important;
    position: static !important;
    width: 4.6rem !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}


/* Child rows */

body.sidebar-mini.sidebar-collapse
.nav-treeview .nav-link {
    height: 35px !important;
    min-height: 35px !important;
    max-height: 35px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 1rem !important;
    margin: .15rem .25rem !important;
    box-sizing: border-box !important;
}


    body.sidebar-mini.sidebar-collapse
    .nav-treeview .nav-link p {
        display: none !important;
    }

/* ============================================================
   SIDEBAR + TOP NAV SYNC
   ------------------------------------------------------------
   AdminLTE4's .app-wrapper is a CSS grid ("auto 1fr" columns), and
   .app-sidebar already ships its own min/max-width + margin transitions
   (see adminlte.css) matching these exact values (250px <-> 4.6rem via
   --lte-sidebar-width). The margin-left/width-pinning system that used to
   live here was for AdminLTE3's fixed-position sidebar; kept under grid it
   double-offsets .app-main/.app-header/.app-footer past where the grid
   already placed them, leaving a blank column the height of the page.
   ============================================================ */

/* Match nav animation to sidebar — only fade the nav-item backgrounds/colors.
   Do NOT let every item run its own 0.3s "all" transition: that animated their
   width/padding on top of the sidebar's own width collapse, which made the
   sidebar stutter and lag behind the top nav's cheap margin-left slide. */
body.sidebar-mini .nav-sidebar .nav-item,
body.sidebar-mini .nav-sidebar .nav-link,
body.sidebar-mini .nav-treeview > .nav-item > .nav-link {
    transition: background-color .15s ease-in-out, color .15s ease-in-out !important;
}


/* ============================================================
   COLLAPSED PROFILE LOCK
   ============================================================ */

body.sidebar-mini.sidebar-collapse .user-panel {
    height: 35px !important;
    min-height: 35px !important;
    max-height: 35px !important;
    margin: .15rem .25rem !important;
    padding: 0 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}


    /* Hide profile text */
    body.sidebar-mini.sidebar-collapse .user-panel .info,
    body.sidebar-mini.sidebar-collapse .main-sidebar:hover .user-panel .info {
        display: none !important;
        width: 0 !important;
        max-width: 0 !important;
        overflow: hidden !important;
    }


    /* Center profile image */
    body.sidebar-mini.sidebar-collapse .user-panel .image,
    body.sidebar-mini.sidebar-collapse .main-sidebar:hover .user-panel .image {
        width: 1.5rem !important;
        min-width: 1.5rem !important;
        height: 1.5rem !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transform: none !important;
    }


    /* Avatar size */
    body.sidebar-mini.sidebar-collapse .user-panel img {
        width: 1.5rem !important;
        height: 1.5rem !important;
        object-fit: cover !important;
        transform: none !important;
    }



/* ============================================================
   COLLAPSED NAV ICON LOCK
   ============================================================ */


body.sidebar-mini.sidebar-collapse .app-sidebar .nav-link {
    width: 43px !important;
    min-width: 43px !important;
    max-width: 43px !important;
    height: 35px !important;
    min-height: 35px !important;
    max-height: 35px !important;
    padding: 0 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
}

    /* Hide text */
    body.sidebar-mini.sidebar-collapse .app-sidebar .nav-link p {
        display: none !important;
    }


/* Center icons */
body.sidebar-mini.sidebar-collapse .app-sidebar .nav-icon {
    width: 1.6rem !important;
    height: 35px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    transform: none !important;
}


/* Stop hover icon movement */
body.sidebar-mini.sidebar-collapse .app-sidebar .nav-link:hover .nav-icon,
body.sidebar-mini.sidebar-collapse .app-sidebar .nav-item:hover > .nav-link .nav-icon {
    margin: 0 !important;
    transform: none !important;
}


/* Stop profile movement on hover */
body.sidebar-mini.sidebar-collapse .main-sidebar:hover .user-panel,
body.sidebar-mini.sidebar-collapse .main-sidebar:hover .user-panel .image,
body.sidebar-mini.sidebar-collapse .main-sidebar:hover .user-panel img {
    transform: none !important;
}


/* ============================================================
   ACCOUNT PROFILE PHOTO — force 1:1 ratio
   ------------------------------------------------------------
   AdminLTE3 shipped a fixed 100x100px .profile-user-img rule
   that kept this avatar square regardless of the uploaded
   photo's native dimensions. AdminLTE4 dropped that class
   entirely, so with only .img-fluid (max-width:100%) applied
   the image rendered at its native aspect ratio/size, breaking
   the circular avatar on the account page.
   ============================================================ */

.profile-user-img {
    width: 100px !important;
    height: 100px !important;
    object-fit: cover !important;
}

/* ============================================================
   QUIZ INDEX — GROUP CARDS
   ------------------------------------------------------------
   Each batch/topic group renders as its own card instead of a
   bare collapsible heading, matching the year-collapse pattern
   used on the flight-log breakdown (branded left rail, tinted
   "open" state, count badge).
   ============================================================ */
/* The whole catalog sits in one centered card; each category is a tinted, accented row. */
.quiz-catalog {
    max-width: 960px;
    margin: 0 auto;
}

.quiz-catalog-card {
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: 0.8rem;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}

.quiz-category + .quiz-category {
    border-top: 1px solid var(--app-border);
}

.quiz-category-title {
    margin: 0;
}

.quiz-category-toggle {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 1rem 1.25rem;
    border: 0;
    border-left: 5px solid transparent;
    background: var(--app-surface);
    color: inherit;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-align: left;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.quiz-category-toggle:hover {
    background: color-mix(in srgb, var(--app-brand) 6%, var(--app-surface));
    border-left-color: color-mix(in srgb, var(--app-brand) 45%, transparent);
}

.quiz-category-toggle[aria-expanded="true"] {
    background: color-mix(in srgb, var(--app-brand) 10%, var(--app-surface));
    border-left-color: var(--app-brand);
}

.quiz-category-toggle:focus-visible {
    outline: 2px solid var(--app-brand);
    outline-offset: -2px;
}

.quiz-category-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2.25rem;
    height: 2.25rem;
    border-radius: 0.6rem;
    background: color-mix(in srgb, var(--app-brand) 14%, transparent);
    color: var(--app-brand);
    font-size: 1.1rem;
}

.quiz-category-toggle .collapse-chevron {
    color: var(--app-text-muted);
    transition: transform 0.2s ease, color 0.2s ease;
}

.quiz-category-toggle[aria-expanded="true"] .collapse-chevron {
    transform: rotate(180deg);
    color: var(--app-brand);
}

.quiz-category-body {
    padding: 1rem 1.25rem 0.25rem;
    background: var(--app-surface-alt);
    border-top: 1px solid var(--app-border);
}

@media (max-width: 575.98px) {
    .quiz-category-toggle {
        padding: 0.85rem 0.9rem;
        font-size: 1.05rem;
    }

    .quiz-category-body {
        padding: 0.85rem 0.75rem 0.1rem;
    }
}

.quiz-group {
    border: 1px solid var(--app-border);
    border-radius: 0.6rem;
    overflow: hidden;
    margin-bottom: 1rem;
    background: var(--app-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.quiz-group:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.quiz-group-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1.1rem;
    background: var(--app-surface-alt);
    border-left: 4px solid var(--app-brand);
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    transition: background 0.15s ease;
}

.quiz-group-header:hover {
    background: color-mix(in srgb, var(--app-brand) 8%, var(--app-surface-alt));
}

.quiz-group-header[aria-expanded="true"] {
    background: color-mix(in srgb, var(--app-brand) 12%, var(--app-surface));
}

.quiz-group-header .bi-collection {
    color: var(--app-brand);
    font-size: 1.05rem;
}

.quiz-group-count {
    background: color-mix(in srgb, var(--app-brand) 14%, var(--app-surface));
    color: var(--app-brand);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.78rem;
}

[data-app-theme$="-dark"] .quiz-group-count {
    color: color-mix(in srgb, var(--app-brand) 45%, #fff);
}

.quiz-group-header .collapse-chevron {
    margin-left: auto;
    color: var(--app-text-muted);
    transition: transform 0.2s ease, color 0.2s ease;
}

.quiz-group-header[aria-expanded="true"] .collapse-chevron {
    transform: rotate(180deg);
    color: var(--app-brand);
}

.quiz-group-body {
    padding: 1rem 1.1rem;
    border-top: 1px solid var(--app-border);
}

/* Shared figure sizing for quiz question images (Take + Result review) —
   keeps a tall reference diagram from dominating the screen on mobile. */
.quiz-figure {
    max-height: 40vh;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
    margin: 0 auto 1rem;
}

/* Answer highlight tints on Take.cshtml: the flat low-opacity rgba() green/red
   was tuned against a white card and goes nearly invisible on a dark surface
   (same failure mode as the tinted-badge issue elsewhere in this file — a faint
   tint over an already-dark background reads as no tint at all). Boost both the
   fill and the outline in dark themes so correct/incorrect stays legible. */
[data-app-theme$="-dark"] .quiz-option-correct {
    background-color: color-mix(in srgb, #22c55e 22%, var(--app-surface));
    outline-color: color-mix(in srgb, #22c55e 55%, transparent);
}

[data-app-theme$="-dark"] .quiz-option-incorrect {
    background-color: color-mix(in srgb, #ef4444 22%, var(--app-surface));
    outline-color: color-mix(in srgb, #ef4444 55%, transparent);
}

/* Bootstrap's .text-success/.text-danger/.border-success/.border-danger are tuned
   for a white background — on this app's dark surface (#212529) they measure well
   under 2:1 contrast (essentially unreadable). Scoped to the quiz feedback/review
   UI rather than overridden globally, since that's the surface this was reported on. */
[data-app-theme$="-dark"] .quiz-feedback.text-success,
[data-app-theme$="-dark"] .quiz-review-option.text-success {
    color: color-mix(in srgb, #22c55e 55%, #fff) !important;
}

[data-app-theme$="-dark"] .quiz-feedback.text-danger,
[data-app-theme$="-dark"] .quiz-review-option.text-danger {
    color: color-mix(in srgb, #ef4444 55%, #fff) !important;
}

[data-app-theme$="-dark"] .quiz-review-card.border-success {
    border-color: color-mix(in srgb, #22c55e 55%, #fff) !important;
}

[data-app-theme$="-dark"] .quiz-review-card.border-danger {
    border-color: color-mix(in srgb, #ef4444 55%, #fff) !important;
}