/* ============================================================
   Flightbook — Aviation Instrument Theme
   Bootstrap 5.3 + data-bs-theme="light|dark"
   Fonts: Barlow Condensed (sans) · IBM Plex Mono (data)
   ============================================================ */

/* ── Local font-face ────────────────────────────────────────── */
@font-face {
    font-family: 'Barlow Condensed';
    font-style:  normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/barlow-condensed-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Barlow Condensed';
    font-style:  normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/barlow-condensed-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Barlow Condensed';
    font-style:  normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/barlow-condensed-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Barlow Condensed';
    font-style:  normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/barlow-condensed-700.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style:  normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style:  normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/ibm-plex-mono-600.woff2') format('woff2');
}

/* ── Design Tokens — Light ─────────────────────────────────── */
:root {
    --fb-font-sans:          'Barlow Condensed', system-ui, -apple-system, sans-serif;
    --fb-font-mono:          'IBM Plex Mono', 'Courier New', monospace;

    --fb-bg:                 #F2F3F5;
    --fb-surface:            #FFFFFF;
    --fb-surface-2:          #EDEEF1;
    --fb-text:               #1C1F26;
    --fb-text-2:             #5E6470;
    --fb-accent:             #E8A800;
    --fb-accent-rgb:         232, 168, 0;
    --fb-accent-faint:       rgba(232, 168, 0, 0.09);
    --fb-secondary:          #2C5FDB;
    --fb-secondary-rgb:      44, 95, 219;
    --fb-positive:           #1A7A4A;
    --fb-positive-faint:     rgba(26, 122, 74, 0.08);
    --fb-negative:           #C42B2B;
    --fb-negative-faint:     rgba(196, 43, 43, 0.08);
    --fb-warn:               #E8A800;
    --fb-warn-faint:         rgba(232, 168, 0, 0.09);
    --fb-border:             #CDD1D8;
    --fb-border-2:           #B8BEC8;
    --fb-shadow:             0 1px 3px rgba(28,31,38,0.07), 0 1px 2px rgba(28,31,38,0.04);
    --fb-shadow-md:          0 4px 16px rgba(28,31,38,0.10), 0 2px 6px rgba(28,31,38,0.06);
    --fb-radius:             2px;
    --fb-radius-md:          3px;
}

/* ── Design Tokens — Dark ──────────────────────────────────── */
[data-bs-theme="dark"] {
    --fb-bg:                 #111318;
    --fb-surface:            #1A1D25;
    --fb-surface-2:          #21242E;
    --fb-text:               #E2E5EC;
    --fb-text-2:             #7A8192;
    --fb-accent:             #FFB800;
    --fb-accent-rgb:         255, 184, 0;
    --fb-accent-faint:       rgba(255, 184, 0, 0.08);
    --fb-secondary:          #4D8EF5;
    --fb-secondary-rgb:      77, 142, 245;
    --fb-positive:           #34D399;
    --fb-positive-faint:     rgba(52, 211, 153, 0.10);
    --fb-negative:           #F87171;
    --fb-negative-faint:     rgba(248, 113, 113, 0.10);
    --fb-warn:               #FFB800;
    --fb-warn-faint:         rgba(255, 184, 0, 0.10);
    --fb-border:             #272B35;
    --fb-border-2:           #333848;
    --fb-shadow:             0 1px 3px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.30);
    --fb-shadow-md:          0 4px 16px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.38);
}

/* ── Bootstrap variable overrides ──────────────────────────── */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-body-font-family:          var(--fb-font-sans);
    --bs-body-bg:                   var(--fb-bg);
    --bs-body-color:                var(--fb-text);
    --bs-card-bg:                   var(--fb-surface);
    --bs-border-color:              var(--fb-border);
    --bs-border-color-translucent:  rgba(28, 31, 38, 0.09);
    --bs-secondary-bg:              var(--fb-surface-2);
    --bs-secondary-color:           var(--fb-text-2);
    --bs-primary:                   var(--fb-accent);
    --bs-primary-rgb:               var(--fb-accent-rgb);
    --bs-font-monospace:            var(--fb-font-mono);
    --bs-link-color:                var(--fb-secondary);
    --bs-navbar-color:              var(--fb-text-2);
    --bs-navbar-hover-color:        var(--fb-text);
    --bs-navbar-active-color:       var(--fb-accent);
    --bs-success:                   var(--fb-positive);
    --bs-danger:                    var(--fb-negative);
    --bs-warning:                   var(--fb-warn);
    --bs-border-radius:             var(--fb-radius-md);
    --bs-border-radius-lg:          4px;
    --bs-border-radius-sm:          var(--fb-radius);
}

/* ── Global base ───────────────────────────────────────────── */
body {
    font-family: var(--fb-font-sans);
    font-size: 1rem;
    font-weight: 400;
    background: var(--fb-bg);
    color: var(--fb-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-bottom: 3rem;
    letter-spacing: 0.01em;
}

/* ── Smooth theme transitions ──────────────────────────────── */
body,
.card,
.modal-content,
.navbar,
#utilityStrip,
#flightDetailCard,
.table,
.form-control,
.form-select,
.btn,
.badge,
.nav-link {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ── Navbar ────────────────────────────────────────────────── */
#mainNav {
    background: var(--fb-bg) !important;
    border-bottom: 1px solid var(--fb-border) !important;
    box-shadow: none !important;
    padding-top: 0;
    padding-bottom: 0;
}

#mainNav .navbar-brand {
    font-family: var(--fb-font-sans);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fb-text) !important;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

#mainNav .navbar-brand i {
    color: var(--fb-accent);
}

#mainNav .nav-link {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fb-text-2) !important;
    padding: 0.55rem 0.6rem;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    transition: color 0.12s, border-color 0.12s;
}

#mainNav .nav-link:hover {
    color: var(--fb-text) !important;
    border-bottom-color: var(--fb-border-2);
    background: none;
}

#mainNav .nav-link.active {
    color: var(--fb-accent) !important;
    border-bottom-color: var(--fb-accent);
    background: none;
    font-weight: 700;
}

/* ── Cards ─────────────────────────────────────────────────── */
.card {
    background: var(--fb-surface);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius-md);
    box-shadow: var(--fb-shadow);
}

/* ── Metrics grid ───────────────────────────────────────────── */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
}

@media (min-width: 992px) {
    .metrics-grid {
        grid-template-columns: repeat(12, 1fr);
        gap: 0.75rem;
    }
    .metrics-grid > :nth-child(-n+4) { grid-column: span 3; }
    .metrics-grid > :nth-child(n+5)  { grid-column: span 4; }
}

/* ── Metric cards ──────────────────────────────────────────── */
.metric-card {
    background: var(--fb-surface);
    border: 1px solid var(--fb-border);
    border-top: 2px solid var(--fb-accent);
    border-radius: 0;
    padding: 0.9rem 1.1rem 0.85rem;
    box-shadow: var(--fb-shadow);
    height: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.metric-card:hover {
    border-color: var(--fb-accent);
    box-shadow: 0 0 0 1px var(--fb-accent), var(--fb-shadow);
}

.metric-card .metric-label {
    font-family: var(--fb-font-sans);
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--fb-text-2);
    margin-bottom: 0.45rem;
}

.metric-card .metric-sep {
    border: none;
    border-top: 1px solid var(--fb-border);
    margin: 0 0 0.5rem;
}

.metric-card .metric-value {
    font-size: 1.45rem;
    font-weight: 600;
    font-family: var(--fb-font-mono);
    color: var(--fb-text);
    letter-spacing: -0.02em;
    line-height: 1.15;
}

#metricTotalTime {
    font-size: clamp(0.85rem, 1.0vw + 0.2rem, 1.15rem);
    word-break: break-word;
}

.metric-card .metric-value small {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--fb-text-2);
    letter-spacing: 0;
}

/* ── Flight detail card ─────────────────────────────────────── */
#flightDetailCard {
    background: var(--fb-surface);
    border: 1px solid var(--fb-border);
    border-left: 3px solid var(--fb-accent);
    border-radius: 0;
    box-shadow: var(--fb-shadow-md);
}

#flightDetailCard .text-muted {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fb-text-2) !important;
}

#flightDetailCard strong {
    font-family: var(--fb-font-mono);
    font-size: 0.85rem;
    font-weight: 400;
}

/* ── Tables ────────────────────────────────────────────────── */
.table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: var(--fb-accent-faint);
    --bs-table-cell-padding-x: 0.4rem;
    font-size: 0.875rem;
    color: var(--fb-text);
    font-variant-numeric: tabular-nums;
}

.table thead th {
    font-family: var(--fb-font-sans);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fb-text-2);
    border-bottom: 1px solid var(--fb-border-2) !important;
    border-top: none;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    white-space: nowrap;
    background: transparent;
}

.table thead th i,
.table thead th small {
    font-size: 1rem;
    letter-spacing: 0;
    color: var(--fb-secondary);
}

.icon-takeoff { display: inline-block; transform: rotate( 45deg); }
.icon-landing { display: inline-block; transform: rotate(135deg); }

.icon-wing {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-color: var(--fb-secondary);
    -webkit-mask-image: url('../img/favicon.svg');
            mask-image: url('../img/favicon.svg');
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    vertical-align: -0.15em;
}

[data-bs-theme="dark"] .table thead th i,
[data-bs-theme="dark"] .table thead th small {
    color: var(--fb-accent);
}

[data-bs-theme="dark"] .icon-wing {
    background-color: var(--fb-accent);
}

thead.table-light {
    --bs-table-bg: transparent;
    --bs-table-color: var(--fb-text-2);
}

[data-bs-theme="dark"] thead.table-light {
    --bs-table-bg:          transparent;
    --bs-table-color:       var(--fb-text-2);
    --bs-table-border-color: var(--fb-border);
    --bs-table-accent-bg:   transparent;
    --bs-table-striped-bg:  transparent;
    --bs-table-active-bg:   transparent;
    --bs-table-hover-bg:    transparent;
}

[data-bs-theme="dark"] thead.table-light > tr > th {
    background-color: transparent !important;
    border-color: var(--fb-border) !important;
}

/* ── Year chart ─────────────────────────────────────────────── */
.chart-wrap { position: relative; height: 160px; }

.fixed-table-container table { table-layout: fixed; }

.table tbody td {
    border-bottom: 1px solid var(--fb-border);
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table tbody tr:last-child td { border-bottom: none; }

.table-hover tbody tr { cursor: pointer; transition: background 0.08s; }
.table-hover tbody tr:hover { background: var(--fb-accent-faint); }

/* ── Utility strip ──────────────────────────────────────────── */
#utilityStrip {
    position: sticky;
    bottom: 0;
    z-index: 1030;
    background: var(--fb-surface-2);
    border-top: 1px solid var(--fb-border);
    padding: 0 1rem;
    height: calc(2.6rem + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    font-size: 0.8125rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 -1px 0 var(--fb-border);
}

#stripVersion {
    font-size: 0.62rem;
    font-family: var(--fb-font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.4;
    user-select: none;
}

#sessionBanner {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.65rem;
    font-family: var(--fb-font-mono);
    letter-spacing: 0.04em;
    color: var(--fb-text-2);
    opacity: 0.38;
    pointer-events: none;
    transition: color 0.4s ease, opacity 0.4s ease;
    user-select: none;
    white-space: nowrap;
}

#sessionBanner.warn     { color: var(--fb-warn);      opacity: 0.9; }
#sessionBanner.critical { color: var(--fb-negative);  opacity: 1; font-weight: 700; }

#displayName {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fb-text-2);
    opacity: 0.55;
    user-select: none;
}

/* ── Form controls ──────────────────────────────────────────── */
.form-control,
.form-select {
    border-color: var(--fb-border-2);
    border-radius: var(--fb-radius);
    font-size: 0.9rem;
    background: var(--fb-surface);
    color: var(--fb-text);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--fb-accent);
    box-shadow: 0 0 0 3px rgba(var(--fb-accent-rgb), 0.14);
    background: var(--fb-surface);
    color: var(--fb-text);
}

.form-label {
    font-size: 0.66rem;
    font-weight: 700;
    font-family: var(--fb-font-sans);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--fb-text-2);
    margin-bottom: 0.3rem;
}

.form-check-input { border-color: var(--fb-border-2); background: var(--fb-surface); }
.form-check-input:checked { background-color: var(--fb-accent); border-color: var(--fb-accent); }
.form-check-input:focus { border-color: var(--fb-accent); box-shadow: 0 0 0 3px rgba(var(--fb-accent-rgb), 0.14); }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
    font-family: var(--fb-font-sans);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--fb-radius);
}

.btn-primary {
    --bs-btn-bg:               var(--fb-accent);
    --bs-btn-border-color:     var(--fb-accent);
    --bs-btn-color:            #1C1F26;
    --bs-btn-hover-bg:         color-mix(in srgb, var(--fb-accent) 85%, white);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--fb-accent) 85%, white);
    --bs-btn-hover-color:      #1C1F26;
    --bs-btn-focus-shadow-rgb: var(--fb-accent-rgb);
}

.btn-outline-primary {
    --bs-btn-color:            var(--fb-accent);
    --bs-btn-border-color:     var(--fb-accent);
    --bs-btn-hover-bg:         var(--fb-accent-faint);
    --bs-btn-hover-color:      var(--fb-accent);
    --bs-btn-hover-border-color: var(--fb-accent);
}

.btn-outline-secondary {
    --bs-btn-color:            var(--fb-text-2);
    --bs-btn-border-color:     var(--fb-border-2);
    --bs-btn-hover-bg:         var(--fb-surface-2);
    --bs-btn-hover-color:      var(--fb-text);
    --bs-btn-hover-border-color: var(--fb-border-2);
}

.btn-outline-danger {
    --bs-btn-color:            var(--fb-negative);
    --bs-btn-border-color:     var(--fb-negative);
    --bs-btn-hover-bg:         var(--fb-negative-faint);
    --bs-btn-hover-color:      var(--fb-negative);
    --bs-btn-hover-border-color: var(--fb-negative);
}

/* ── Form validation states ─────────────────────────────────── */
.was-validated .form-control:invalid,
.was-validated .form-select:invalid,
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--fb-negative) !important;
    background-image: none;
}

.was-validated .form-control:invalid:focus,
.was-validated .form-select:invalid:focus,
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: var(--fb-negative) !important;
    box-shadow: 0 0 0 3px rgba(196, 43, 43, 0.14);
}

.invalid-feedback {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--fb-negative);
}

.form-label .text-danger {
    color: var(--fb-negative) !important;
    font-style: normal;
}

/* ── Modals ─────────────────────────────────────────────────── */
.modal-content {
    background: var(--fb-surface);
    border: 1px solid var(--fb-border-2);
    border-radius: var(--fb-radius-md);
    box-shadow: var(--fb-shadow-md);
}

.modal-header {
    border-bottom: 1px solid var(--fb-border);
    padding: 1rem 1.4rem 0.9rem;
    background: var(--fb-surface-2);
    border-radius: var(--fb-radius-md) var(--fb-radius-md) 0 0;
}

.modal-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fb-text);
}

.modal-body   { padding: 1.2rem 1.4rem; }
.modal-footer {
    border-top: 1px solid var(--fb-border);
    padding: 0.85rem 1.4rem;
}

/* ── Alerts ─────────────────────────────────────────────────── */
.alert {
    border-radius: var(--fb-radius);
    font-size: 0.875rem;
}

.alert .btn-close { flex-shrink: 0; width: 0.875rem; height: 0.875rem; padding: 0; }

.alert.auto-dismiss { animation: fadeOutAlert 4s forwards; }

@keyframes fadeOutAlert {
    0%  { opacity: 1; }
    80% { opacity: 1; }
    100%{ opacity: 0; }
}

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
    border-radius: var(--fb-radius);
    font-family: var(--fb-font-sans);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ── Card header ────────────────────────────────────────────── */
.card-header {
    background: var(--fb-surface-2);
    border-bottom: 1px solid var(--fb-border);
    border-radius: var(--fb-radius-md) var(--fb-radius-md) 0 0;
    padding: 0.65rem 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fb-text-2);
}

/* ── Typography ─────────────────────────────────────────────── */
h4, h5, h6 {
    font-family: var(--fb-font-sans);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fb-text);
}

hr { border-color: var(--fb-border); opacity: 1; }

/* ── Login page ─────────────────────────────────────────────── */
.card .h4 {
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar         { width: 5px; height: 5px; }
::-webkit-scrollbar-track   { background: transparent; }
::-webkit-scrollbar-thumb   { background: var(--fb-border-2); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--fb-text-2); }

/* ── Flight detail card ──────────────────────────────────────── */
.detail-accent {
    color: var(--fb-accent);
    font-weight: 600;
}

.detail-lines > div {
    margin-bottom: 0.3rem;
    line-height: 1.5;
}

.detail-note {
    color: var(--fb-accent);
    font-weight: 600;
    font-style: italic;
}

/* ── Bootstrap Table pagination ─────────────────────────────── */
.fixed-table-pagination {
    padding: 0.5rem 1rem;
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .metrics-grid {
        grid-template-areas:
            "totaltime totaltime"
            "flights   avgtime"
            "totaldist totaligc"
            "avgdist   avgigc";
    }
    .metrics-grid > :nth-child(1) { grid-area: flights; }
    .metrics-grid > :nth-child(2) { grid-area: totaltime; }
    .metrics-grid > :nth-child(3) { grid-area: totaldist; }
    .metrics-grid > :nth-child(4) { grid-area: totaligc; }
    .metrics-grid > :nth-child(5) { grid-area: avgdist; }
    .metrics-grid > :nth-child(6) { grid-area: avgigc; }
    .metrics-grid > :nth-child(7) { grid-area: avgtime; }
    .metric-card { padding: 0.7rem 0.9rem; }
    .metric-card .metric-value { font-size: 1rem; }
    #metricTotalTime { font-size: 0.9rem; }
}