/* ─── Reset & Base ────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:        #0f172a;
    --bg-card:   #1e293b;
    --bg-input:  #334155;
    --border:    #475569;
    --text:      #e2e8f0;
    --text-dim:  #94a3b8;
    --primary:   #3b82f6;
    --primary-h: #2563eb;
    --accent:    #06b6d4;
    --success:   #22c55e;
    --warning:   #f59e0b;
    --error:     #ef4444;
    --danger:    #ef4444;
    --radius:    10px;
    --shadow:    0 4px 24px rgba(0,0,0,.35);
}

html { font-size: 16px; scroll-behavior: smooth; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }

/* ─── App shell: sidebar + main ──────────── */
:root {
    --sidebar-w: 240px;
    --topbar-h: 56px;
}

.app-shell { display: flex; min-height: 100vh; }

/* Hidden checkbox drives the mobile hamburger — no JS needed. */
.sidebar-toggle { position: absolute; opacity: 0; pointer-events: none; }

/* Mobile-only topbar with the hamburger. Hidden on desktop. */
.topbar {
    display: none;
    position: sticky; top: 0; z-index: 90;
    align-items: center; justify-content: space-between;
    height: var(--topbar-h);
    padding: 0 1rem;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-bottom: 1px solid var(--border);
}
.topbar-brand {
    display: flex; align-items: center; gap: .6rem;
    font-weight: 700; color: var(--text);
}
.topbar-brand i { color: var(--primary); font-size: 1.15rem; }
.topbar-brand:hover { text-decoration: none; }

.hamburger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 8px;
    color: var(--text-dim); cursor: pointer;
    transition: background .15s, color .15s;
}
.hamburger:hover { background: rgba(255,255,255,.06); color: var(--text); }
.hamburger:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ─── Sidebar ────────────────────────────── */
.sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--sidebar-w);
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    border-right: 1px solid var(--border);
    padding: 1.5rem 0;
    display: flex; flex-direction: column; gap: 1.5rem;
    overflow-y: auto;
    z-index: 100;
}
.sidebar-brand {
    display: flex; align-items: center; gap: .6rem;
    padding: 0 1.25rem;
    font-weight: 700; font-size: 1.15rem; color: var(--text);
}
.sidebar-brand i { color: var(--primary); font-size: 1.3rem; }
.sidebar-brand:hover { text-decoration: none; }

.sidebar-nav { display: flex; flex-direction: column; gap: 1.25rem; padding: 0 .5rem; }

.nav-section { display: flex; flex-direction: column; gap: .15rem; }
.nav-section-label {
    padding: 0 .75rem .25rem;
    font-size: .7rem; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-dim);
}

.nav-link {
    display: flex; align-items: center; gap: .75rem;
    padding: .55rem .75rem; border-radius: 8px;
    color: var(--text-dim); font-size: .9rem; font-weight: 500;
    transition: color .15s, background .15s, border-color .15s;
    border-left: 2px solid transparent;
}
.nav-link i { width: 1.1rem; text-align: center; font-size: .95rem; }
.nav-link:hover { color: var(--text); background: rgba(255,255,255,.06); text-decoration: none; }
.nav-link.active {
    color: var(--primary);
    background: rgba(59,130,246,.12);
    border-left-color: var(--primary);
}

/* Backdrop behind the sidebar on mobile when expanded */
.sidebar-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5); z-index: 95;
}

/* ─── Main ───────────────────────────────── */
.app-main {
    flex: 1; min-width: 0;
    margin-left: var(--sidebar-w);
    display: flex; flex-direction: column;
    min-height: 100vh;
    /* Safety net: if anything inside (a wide table, a long <pre>, an image
       without max-width) tries to exceed the content column, clip it here
       instead of letting it blow out the viewport. Using `clip` avoids
       creating a scrolling container (which `hidden` would); the wide
       element itself is expected to provide its own scroll wrapper below. */
    overflow-x: clip;
}
.main-content { flex: 1; padding: 3rem 0 2rem; }

/* Wide-table scroll containers. Admin/data tables can exceed the content
   column on narrow displays or when they have many columns. Keeping the
   horizontal scrollbar on the result wrapper means the table scrolls
   within its card — the page layout (and the sidebar) stay put. */
[id$="-results"],
[id$="-list"],
.results-container {
    max-width: 100%;
    overflow-x: auto;
}

.page-header { margin-bottom: 1.75rem; }
.page-header h1 { font-size: 1.75rem; font-weight: 700; }
.page-header h1 i { color: var(--primary); margin-right: .4rem; }
.subtitle { color: var(--text-dim); margin-top: .25rem; }

.page-header-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    flex-wrap: wrap; gap: .75rem;
}

/* ─── Cards ──────────────────────────────── */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow);
}
.card h2 { font-size: 1.2rem; margin-bottom: .75rem; }
.card h2 i { color: var(--primary); margin-right: .4rem; }
.card-subtitle { color: var(--text-dim); font-size: .9rem; margin-top: -.25rem; margin-bottom: 1rem; }

/* ─── Stat Cards ─────────────────────────── */
.stats-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem; margin-bottom: 1.5rem;
}
.stat-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.25rem;
    display: flex; align-items: center; gap: 1rem;
    box-shadow: var(--shadow);
}
.stat-icon {
    width: 48px; height: 48px; border-radius: 12px;
    background: rgba(59,130,246,.15); color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
}
.stat-number { display: block; font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.stat-label { color: var(--text-dim); font-size: .85rem; }
/* Stat cards are links into the directories: same look at rest, obvious on hover/focus. */
a.stat-link { color: inherit; text-decoration: none; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
a.stat-link:hover, a.stat-link:focus-visible { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.35); text-decoration: none; color: inherit; }
a.stat-link:active { transform: translateY(0); }
.stat-arrow { font-size: .7rem; opacity: 0; transition: opacity .15s, transform .15s; margin-left: .2rem; }
a.stat-link:hover .stat-arrow, a.stat-link:focus-visible .stat-arrow { opacity: 1; transform: translateX(2px); }

/* ─── Forms ──────────────────────────────── */
input[type="text"], input[type="number"], input[type="url"],
input[type="email"], input[type="password"],
textarea, select, .select-input {
    width: 100%;
    background: var(--bg-input); border: 1px solid var(--border);
    color: var(--text); border-radius: 8px;
    padding: .6rem .85rem; font-size: .9rem;
    font-family: inherit; transition: border-color .15s;
}
input:focus, textarea:focus, select:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59,130,246,.2);
}
::placeholder { color: var(--text-dim); opacity: .7; }

label { display: block; font-size: .85rem; font-weight: 500; margin-bottom: .3rem; color: var(--text-dim); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; margin-bottom: .75rem; }
.form-group { margin-bottom: .5rem; }
.form-group-wide { grid-column: 1 / -1; }
.form-group-btn { display: flex; align-items: flex-end; }

.form-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-row .form-group { flex: 1; min-width: 180px; }

.search-bar { display: flex; gap: .5rem; margin-bottom: .75rem; }
.search-bar input { flex: 1; }

.filter-row { display: flex; align-items: center; gap: .75rem; }
.filter-row label { margin: 0; white-space: nowrap; }
.filter-row .select-input { max-width: 280px; }

/* ─── Buttons ────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .6rem 1.2rem; border: none; border-radius: 8px;
    font-size: .9rem; font-weight: 600; cursor: pointer;
    transition: all .15s; font-family: inherit; text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-h); }
.btn-secondary { background: var(--bg-input); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--primary); color: var(--primary); }
.btn-danger { background: rgba(239,68,68,.15); color: var(--error); border: 1px solid rgba(239,68,68,.3); }
.btn-danger:hover { background: rgba(239,68,68,.25); }
.btn-link { color: var(--accent); background: none; padding: .25rem .5rem; font-size: .85rem; }
.btn-full { width: 100%; justify-content: center; }
.btn-sm { padding: .35rem .7rem; font-size: .8rem; }
.btn-icon {
    background: none; border: 1px solid var(--border); color: var(--text-dim);
    width: 32px; height: 32px; border-radius: 6px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.btn-icon:hover { border-color: var(--primary); color: var(--primary); }

/* ─── Chips ──────────────────────────────── */
.filter-chips { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.chip-label { font-size: .8rem; color: var(--text-dim); }
.chip {
    background: rgba(59,130,246,.12); color: var(--primary); border: 1px solid rgba(59,130,246,.3);
    padding: .3rem .7rem; border-radius: 20px; font-size: .8rem; cursor: pointer;
    font-family: inherit; transition: all .15s;
}
.chip:hover { background: rgba(59,130,246,.25); }

/* ─── Results Tables ─────────────────────── */
.results-container { margin-top: 1rem; }

.result-table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
}
.result-table th.sortable-th {
    user-select: none;
    transition: background .12s ease, color .12s ease;
}
.result-table th.sortable-th:hover {
    background: rgba(255,255,255,.08);
    color: var(--text);
}
.result-table th .sort-indicator {
    color: var(--primary);
    font-size: .8em;
    margin-left: .25rem;
}
.result-table th {
    text-align: left; padding: .7rem 1rem;
    background: rgba(255,255,255,.04); color: var(--text-dim);
    font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
    border-bottom: 1px solid var(--border);
}
.result-table td {
    padding: .65rem 1rem; border-bottom: 1px solid rgba(71,85,105,.4);
    font-size: .9rem;
}
.result-table tbody tr { transition: background .1s; }
.result-table tbody tr:hover { background: rgba(59,130,246,.08); }
.result-table tbody tr:last-child td { border-bottom: none; }
.result-table tbody tr[data-id] { cursor: pointer; }

.results-meta {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: .75rem; color: var(--text-dim); font-size: .85rem;
}

/* ─── Badges ─────────────────────────────── */
.badge {
    display: inline-block; padding: .15rem .55rem; border-radius: 12px;
    font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
}
.status-on_display  { background: rgba(34,197,94,.15); color: var(--success); }
.status-in_storage  { background: rgba(148,163,184,.15); color: var(--text-dim); }
.status-on_loan     { background: rgba(245,158,11,.15); color: var(--warning); }
.status-under_restoration { background: rgba(6,182,212,.15); color: var(--accent); }
.status-military { background: rgba(239,68,68,.12); color: #f87171; }
.status-civilian { background: rgba(96,165,250,.12); color: #60a5fa; }
/* User roles (contributors leaderboard) — mirror .m-badge.<role> in mobile.css */
.role-admin          { background: rgba(239,68,68,.2);   color: #f87171; }
.role-aircraft_admin { background: rgba(245,158,11,.2);  color: #fcd34d; }
.role-manager        { background: rgba(59,130,246,.2);  color: #60a5fa; }
.role-viewer         { background: rgba(148,163,184,.2); color: #cbd5e1; }
.contrib-bar { flex: 1; height: 20px; border-radius: 4px; overflow: hidden; background: var(--bg-input); }
.contrib-bar-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--success), #86efac); }

/* Role badges: rendered by users.html / _admin_nav.html as
   <span class="badge status-{{ user.role }}">{{ user.role }}</span> */
.status-admin          { background: rgba(239,68,68,.18);  color: #fca5a5; }
.status-aircraft_admin { background: rgba(245,158,11,.18); color: #fcd34d; }
.status-manager        { background: rgba(59,130,246,.18); color: #93c5fd; }
.status-viewer         { background: rgba(148,163,184,.18); color: #cbd5e1; }

/* ─── Pagination ─────────────────────────── */
/* Windowed pager (see renderPagination in app.js). flex-wrap is the safety
   net: a pager must never become a horizontal-scroll strip. */
.pagination {
    display: flex; justify-content: center; align-items: center;
    gap: .3rem; margin-top: 1rem; flex-wrap: wrap;
}
.page-btn {
    background: var(--bg-input); color: var(--text-dim); border: 1px solid var(--border);
    min-width: 2.2rem; padding: .35rem .7rem; border-radius: 6px; font-size: .85rem;
    cursor: pointer; font-family: inherit; transition: all .15s;
}
.page-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.page-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.page-btn:disabled { opacity: .35; cursor: default; }
.page-gap { color: var(--text-dim); padding: 0 .2rem; user-select: none; }
.page-status { flex-basis: 100%; text-align: center; color: var(--text-dim); font-size: .78rem; margin-top: .35rem; }
.results-more { text-align: center; margin-top: .75rem; font-size: .9rem; }

/* Only the table scrolls sideways on narrow screens; the meta row, pager and
   "view all" link stay put. */
.table-scroll { max-width: 100%; overflow-x: auto; }

/* ─── Proximity Results ──────────────────── */
.prox-origin { color: var(--text-dim); font-size: .9rem; margin-bottom: 1rem; }
.prox-list { display: flex; flex-direction: column; gap: .75rem; }
.prox-item {
    display: flex; gap: 1.25rem; align-items: flex-start;
    background: rgba(255,255,255,.03); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1rem;
    transition: border-color .15s;
}
.prox-item:hover { border-color: var(--primary); }
.prox-link { cursor: pointer; }
.prox-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.prox-link .row-link { color: inherit; text-decoration: none; }
.prox-link:hover .row-link { color: var(--primary); }
.prox-distance {
    display: flex; flex-direction: column; align-items: center;
    min-width: 72px; padding: .5rem; border-radius: 8px;
    background: rgba(59,130,246,.1);
}
.dist-num { font-size: 1.4rem; font-weight: 700; color: var(--primary); line-height: 1.2; }
.dist-unit { font-size: .7rem; color: var(--text-dim); text-transform: uppercase; }
.prox-info h4 { font-size: 1rem; font-weight: 600; margin-bottom: .2rem; }
.prox-location-text { color: var(--text-dim); font-size: .85rem; }
.prox-aircraft-text { font-size: .85rem; margin: .3rem 0; }
.prox-aircraft-text i { color: var(--primary); margin-right: .25rem; }

/* ─── Modal ──────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); }
.modal-content {
    position: relative; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 14px; padding: 2rem; width: 90%; max-width: 640px;
    max-height: 85vh; overflow-y: auto; box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.modal-close {
    position: absolute; top: .75rem; right: .75rem;
    background: none; border: none; color: var(--text-dim);
    font-size: 1.25rem; cursor: pointer;
}
.modal-close:hover { color: var(--text); }

.detail-header h2 { font-size: 1.4rem; }
.detail-name { color: var(--text-dim); font-size: 1rem; margin-top: .15rem; }
.detail-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
    margin: 1rem 0; padding: 1rem; background: rgba(255,255,255,.03);
    border-radius: 8px;
}
.detail-label { display: block; font-size: .75rem; text-transform: uppercase; color: var(--text-dim); letter-spacing: .04em; }
.detail-value { font-weight: 500; }
.detail-description { margin: 1rem 0; color: var(--text-dim); font-size: .9rem; }
.detail-section-title { font-size: 1rem; margin: 1.25rem 0 .75rem; }
.detail-section-title i { color: var(--primary); }

.detail-museum-list, .detail-aircraft-list { display: flex; flex-direction: column; gap: .5rem; }
.detail-museum-item, .detail-aircraft-item {
    padding: .6rem .85rem; background: rgba(255,255,255,.03);
    border: 1px solid var(--border); border-radius: 8px;
    font-size: .9rem;
}
.detail-museum-name, .aircraft-designation { font-weight: 600; }
.detail-museum-loc { color: var(--text-dim); font-size: .85rem; }
.aircraft-name { color: var(--text-dim); }
.aircraft-tail { color: var(--text-dim); font-size: .85rem; }

.edit-modal-actions { display: flex; gap: .5rem; margin-top: 1rem; }

/* ─── Tabs ───────────────────────────────── */
.tab-nav { display: flex; gap: .25rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.tab-btn {
    padding: .5rem 1rem; background: var(--bg-input); border: 1px solid var(--border);
    color: var(--text-dim); border-radius: 8px; font-size: .9rem;
    cursor: pointer; font-family: inherit; font-weight: 500; transition: all .15s;
}
.tab-btn:hover { color: var(--text); border-color: var(--primary); }
.tab-btn.active { background: rgba(59,130,246,.15); color: var(--primary); border-color: var(--primary); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ─── Alerts ─────────────────────────────── */
.alert { padding: .75rem 1rem; border-radius: 8px; font-size: .9rem; margin-top: .75rem; }
.alert-error { background: rgba(239,68,68,.12); color: var(--error); border: 1px solid rgba(239,68,68,.25); }
.alert-success { background: rgba(34,197,94,.12); color: var(--success); border: 1px solid rgba(34,197,94,.25); }
.alert-warning { background: rgba(245,158,11,.12); color: var(--warning); border: 1px solid rgba(245,158,11,.25); }
.alert-info { background: rgba(6,182,212,.12); color: var(--accent); border: 1px solid rgba(6,182,212,.25); }
.alert i { margin-right: .35rem; }

.form-message { margin-top: .75rem; }

.loading { text-align: center; padding: 2rem; color: var(--text-dim); }
.no-results { text-align: center; padding: 1.5rem; color: var(--text-dim); font-size: .9rem; }

/* ─── Auth pages ─────────────────────────── */
.auth-container {
    display: flex; align-items: center; justify-content: center;
    min-height: 50vh;
}
.auth-card { max-width: 420px; width: 100%; }
.auth-header { text-align: center; margin-bottom: 1.5rem; }
.auth-header i { font-size: 2rem; color: var(--primary); margin-bottom: .5rem; display: block; }
.auth-header h1 { font-size: 1.5rem; }
.auth-form .form-group { margin-bottom: 1rem; }
.auth-footer { text-align: center; margin-top: 1.25rem; color: var(--text-dim); font-size: .9rem; }

/* ─── API Keys page ──────────────────────── */
.new-key-box { margin-top: 1rem; }
.key-display {
    display: flex; align-items: center; gap: .75rem;
    margin-top: .75rem; padding: .75rem 1rem;
    background: var(--bg-input); border: 1px solid var(--border);
    border-radius: 8px;
}
.key-display code {
    flex: 1; font-size: .85rem; word-break: break-all;
    color: var(--accent); font-family: 'Fira Code', 'Consolas', monospace;
}

.code-examples { margin-top: .5rem; }
.code-examples h3 { font-size: .9rem; color: var(--text-dim); margin: 1rem 0 .5rem; }
.code-examples pre {
    background: var(--bg-input); border: 1px solid var(--border);
    border-radius: 8px; padding: .75rem 1rem; overflow-x: auto;
}
.code-examples code {
    font-size: .82rem; color: var(--accent);
    font-family: 'Fira Code', 'Consolas', monospace;
    white-space: pre;
}

/* ─── API Docs ───────────────────────────── */
.doc-text { color: var(--text-dim); font-size: .9rem; margin-bottom: .75rem; line-height: 1.7; }
.doc-text code {
    background: var(--bg-input); padding: .1rem .4rem; border-radius: 4px;
    font-size: .85rem; color: var(--accent);
}

.perm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem; margin: 1rem 0; }
.perm-card {
    padding: .75rem 1rem; background: rgba(255,255,255,.03);
    border: 1px solid var(--border); border-radius: 8px;
}
.perm-card .badge { margin-bottom: .4rem; }
.perm-card p { font-size: .82rem; color: var(--text-dim); }

.endpoint-group { margin-bottom: 2rem; }
.endpoint-group h3 { font-size: 1rem; font-weight: 600; margin-bottom: .75rem; padding-bottom: .4rem; border-bottom: 1px solid var(--border); }

.endpoint {
    padding: .85rem 1rem; margin-bottom: .5rem;
    background: rgba(255,255,255,.02); border: 1px solid var(--border);
    border-radius: 8px;
}
.endpoint-header { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; flex-wrap: wrap; }
.endpoint-header code { font-size: .85rem; color: var(--text); }
.endpoint p { font-size: .85rem; color: var(--text-dim); margin-bottom: .4rem; }
.endpoint p code { font-size: .82rem; }

.method {
    display: inline-block; padding: .15rem .5rem; border-radius: 4px;
    font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    min-width: 52px; text-align: center;
}
.method.get { background: rgba(34,197,94,.15); color: var(--success); }
.method.post { background: rgba(59,130,246,.15); color: var(--primary); }
.method.put { background: rgba(245,158,11,.15); color: var(--warning); }
.method.delete { background: rgba(239,68,68,.15); color: var(--error); }

.param-table { width: 100%; font-size: .82rem; margin-top: .3rem; }
.param-table td { padding: .25rem .5rem; border-bottom: 1px solid rgba(71,85,105,.3); }
.param-table td:first-child { color: var(--accent); font-family: 'Consolas', monospace; width: 120px; }

pre {
    background: var(--bg-input); border: 1px solid var(--border);
    border-radius: 8px; padding: .75rem 1rem; overflow-x: auto;
    margin: .5rem 0;
}
pre code {
    font-size: .82rem; color: var(--accent);
    font-family: 'Fira Code', 'Consolas', monospace;
    white-space: pre;
}

/* ─── Link editor (exhibit links inside aircraft/museum modals) ──── */
/* Used for the inline list of (other-entity, status, notes, actions) rows
   in admin_aircraft.html and admin_museums.html — replaces the standalone
   /admin/exhibits page. */
.link-editor {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    margin-top: .35rem;
}
.link-editor-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: .5rem .65rem;
    padding: .65rem .75rem;
    align-items: center;
}
.link-editor-row + .link-editor-row { border-top: 1px solid var(--border); }
.link-editor-row .le-name {
    grid-column: 1 / 4;
    font-weight: 600;
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; flex-wrap: wrap;
}
.link-editor-row .le-name .le-loc {
    font-weight: 400; color: var(--text-dim);
    font-size: .8rem;
}
.link-editor-row .le-status,
.link-editor-row .le-notes {
    background: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .35rem .5rem;
    font-size: .85rem;
    font-family: inherit;
}
.link-editor-row .le-status { grid-column: 1; min-width: 0; }
.link-editor-row .le-notes  { grid-column: 1 / 4; }
.link-editor-row .le-actions {
    grid-column: 2 / 4;
    display: flex; gap: .35rem; justify-content: flex-end;
}
.link-editor-empty {
    padding: .65rem .85rem;
    color: var(--text-dim); font-size: .85rem;
    border: 1px dashed var(--border);
    border-radius: 8px;
}
.link-editor-add {
    margin-top: .5rem; padding: .75rem;
    background: rgba(59,130,246,.06);
    border: 1px solid rgba(120,180,255,.25);
    border-radius: 8px;
    display: none;
}
.link-editor-add.open { display: block; }
.link-editor-add .le-add-grid {
    display: grid; grid-template-columns: 2fr 1fr; gap: .5rem;
}
.link-editor-add .le-add-grid input,
.link-editor-add .le-add-grid select,
.link-editor-add textarea {
    background: var(--bg-input); color: var(--text);
    border: 1px solid var(--border); border-radius: 6px;
    padding: .4rem .55rem; font-size: .85rem; font-family: inherit;
    width: 100%;
}
.link-editor-msg { margin-top: .5rem; }

/* ─── Footer ─────────────────────────────── */
.footer {
    padding: 1.25rem 0; text-align: center;
    color: var(--text-dim); font-size: .8rem;
    border-top: 1px solid var(--border); margin-top: 2rem;
}

/* ─── Responsive ─────────────────────────── */
/* Three breakpoints, each layered on top of the desktop defaults:
     <= 900px : tablet / large phone  — sidebar collapses to off-canvas drawer
     <= 700px : phone landscape       — single-column grids, smaller container padding
     <= 480px : phone portrait        — tightest paddings, smaller fonts, table cards
*/

@media (max-width: 900px) {
    .app-shell { flex-direction: column; }
    .app-main { width: 100%; }
    /* Show the topbar, reveal the hamburger, hide the sidebar off-canvas. */
    .topbar { display: flex; }
    .app-main { margin-left: 0; }

    /* Sidebar becomes a slide-in drawer. Width caps at 85vw so it never
       eats the whole viewport on a small phone. */
    .sidebar {
        width: min(280px, 85vw);
        transform: translateX(-100%);
        transition: transform .22s ease;
        padding-top: 1rem;
    }
    /* Open via the hidden toggle checkbox (flipped by the hamburger label). */
    .sidebar-toggle:checked ~ .app-shell .sidebar { transform: translateX(0); }
    .sidebar-toggle:checked ~ .app-shell .sidebar-backdrop { display: block; }
    /* The topbar already shows the brand, so hide the in-sidebar one. */
    .sidebar-brand { display: none; }

    /* Less generous top padding so the page header is visible without scroll. */
    .main-content { padding: 1.5rem 0 1.5rem; }

    /* Larger tap target (Apple HIG / Material both call for ~44px min). */
    .hamburger { width: 44px; height: 44px; }
}

@media (max-width: 700px) {
    .form-grid { grid-template-columns: 1fr; }
    .form-row { flex-direction: column; }
    .detail-grid { grid-template-columns: 1fr; }
    .prox-item { flex-direction: column; }
    .prox-distance { flex-direction: row; gap: .5rem; min-width: auto; }
    .stats-grid { grid-template-columns: 1fr; }
    .perm-grid { grid-template-columns: 1fr; }

    /* Tighter page chrome */
    .container { padding: 0 .85rem; }
    .card { padding: 1rem; margin-bottom: 1rem; }
    .page-header h1 { font-size: 1.4rem; }
    .card h2 { font-size: 1.05rem; }

    /* Tab bar (admin sub-nav) wraps and stays usable */
    .tab-nav { flex-wrap: wrap; gap: .35rem; }

    /* Tables get a bit more compact so more columns fit before scrolling */
    .result-table th,
    .result-table td { padding: .5rem .65rem; font-size: .85rem; }

    /* Buttons reach full width when they have nowhere else to go */
    .page-header-row .btn { flex: 1; min-width: 0; }
}

@media (max-width: 480px) {
    /* Real phones — squeeze further, prioritize content */
    html { font-size: 15px; }                   /* slight global text shrink */

    .topbar { height: 52px; padding: 0 .75rem; }
    .topbar-brand { font-size: .95rem; }

    .container { padding: 0 .65rem; }
    .main-content { padding: 1rem 0 1.25rem; }

    .card { padding: .85rem; border-radius: 8px; }
    .page-header { margin-bottom: 1rem; }
    .page-header h1 { font-size: 1.25rem; }
    .subtitle { font-size: .82rem; }

    /* Stat cards: smaller icon, smaller numbers, tighter gap */
    .stat-card { padding: .85rem; gap: .65rem; }
    .stat-icon { width: 38px; height: 38px; font-size: 1rem; }
    .stat-card .stat-number,
    .stat-card h3 { font-size: 1.4rem; }

    /* Tables: keep horizontal scroll for wide ones, but make rows denser */
    .result-table th,
    .result-table td { padding: .45rem .55rem; font-size: .8rem; }

    /* Form controls: easier to tap without zooming */
    .admin-form input,
    .admin-form select,
    .admin-form textarea,
    .search-bar input {
        font-size: 16px;       /* iOS won't auto-zoom into a >=16px input */
        padding: .55rem .7rem;
    }

    /* Footer: less weight, less margin */
    .footer { padding: .85rem 0; margin-top: 1rem; }
}

/* ─── Facts + Near Me (desktop) ───────────────────────── */
.fact-card { text-align: center; padding: 2rem 1.5rem; }
.fact-text { font-size: 1.25rem; line-height: 1.6; margin: 0 0 .75rem; }
.fact-meta { font-size: .85rem; color: var(--text-dim); margin: 0; }
.muted { color: var(--text-dim); }
.aircraft-panel { padding: .5rem 0; }
.ac-hits { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.ac-hit {
    background: rgba(148,163,184,.12); border: 1px solid rgba(148,163,184,.25);
    color: inherit; border-radius: 6px; padding: .2rem .5rem;
    font-size: .8rem; cursor: pointer;
}
.ac-hit:hover { border-color: var(--primary); color: var(--primary); }

@media (max-width: 700px) {
    .modal-content { width: calc(100% - 1rem); padding: 1rem; }
    .modal-close, .btn-icon, .le-actions .btn { min-width: 44px; min-height: 44px; }
    .form-grid > *, .link-editor-row > * { min-width: 0; }
    .link-editor-add .le-add-grid { grid-template-columns: minmax(0, 1fr); }
    .link-editor-row { grid-template-columns: minmax(0, 1fr) auto auto; }
    .link-editor-row .le-name { overflow-wrap: anywhere; }
    .link-editor-row .le-status, .link-editor-row .le-notes,
    .link-editor-add select, .link-editor-add textarea { font-size: 16px; }
}

/* Inline field help under an admin form input. Used by the aircraft-types
   editor, where the matching rules (blank variant = base type, manufacturer
   ignored) are not guessable from the label alone. */
.form-hint { display: block; margin-top: .25rem; color: var(--text-dim); font-size: .8rem; line-height: 1.35; }