/* ===========================================================================
   FlightBox redesign stylesheet (web design system "flightbox-web-design-system").

   Sections
     1. Brand webfonts (Space Grotesk, Roboto Mono FBX)
     2. Redesign tokens (--fbx-*). Brand tokens (--primary-*, --accent-*, ...)
        stay in app.css and are shared with the old layout.
     3. Design-system component rules (verbatim from the DS bundle, all scoped
        under .fbx-*; base element styles are in app.css)
      4. App shell adaptations: viewport-height shell, navigation drawer,
         top-bar menus, responsive helpers.
      5. Document manager (/documents)
      6. Dashboard (/dashboard)
      7. Information pages (/info/imprint, /info/legal)
      8. Statistics (/statistics)
      9. Profile (/userprofile)
     10. Aircraft list + editor (/aircrafts, /aircrafts/{id})
     11. Flight recordings list + detail (/sessions, /sessions/{id})
     12. Logbook list, entry, carried forward (/logbook, /logbook/{id}, /logbook/base)
     13. Sign-in flow (index.html boot card, /login, /authentication/*, /userinit)
     14. Feedback: spinner (LoadingDiv), toasts, update banner, print helper

   Typography is scoped to .fbx-root (FbxMainLayout, PreLoginLayout and the
   boot card of index.html).
   =========================================================================== */

/* == 1. Fonts ============================================================= */
@font-face { font-family: "Space Grotesk"; src: url("/fonts/SpaceGrotesk-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/fonts/SpaceGrotesk-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/fonts/SpaceGrotesk-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/fonts/SpaceGrotesk-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/fonts/SpaceGrotesk-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Mono FBX"; src: url("/fonts/RobotoMono-Medium.ttf") format("truetype"); font-weight: 400 700; font-style: normal; font-display: swap; }

/* == 2. Tokens ============================================================ */
:root {
    /* surfaces */
    --fbx-canvas: #F4F5F7;
    --fbx-surface: #FFFFFF;
    --fbx-surface-sunken: #FAFAFA;
    --fbx-border: #E3E4E8;
    --fbx-border-strong: var(--silver-mid);

    /* text */
    --fbx-text: #1F2430;
    --fbx-text-muted: var(--silver-darker);
    --fbx-text-subtle: var(--silver-dark);
    --fbx-text-on-dark: #FFFFFF;
    --fbx-text-on-dark-muted: rgba(255, 255, 255, .72);

    /* typography */
    --fbx-font: "Space Grotesk", "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
    --fbx-font-mono: "Roboto Mono FBX", ui-monospace, SFMono-Regular, Consolas, monospace;
    --fbx-font-icon: "Font Awesome 6 Free";
    --fbx-text-xs: 11px;
    --fbx-text-sm: 12px;
    --fbx-text-base: 14px;
    --fbx-text-lg: 16px;
    --fbx-text-xl: 20px;
    --fbx-text-2xl: 26px;
    --fbx-text-metric: 34px;

    /* spacing */
    --fbx-space-1: 4px;
    --fbx-space-2: 8px;
    --fbx-space-3: 12px;
    --fbx-space-4: 16px;
    --fbx-space-5: 24px;
    --fbx-space-6: 32px;

    /* shape + elevation */
    --fbx-radius-sm: 3px;
    --fbx-radius: 6px;
    --fbx-radius-lg: 10px;
    --fbx-radius-pill: 999px;
    --fbx-shadow-sm: 0 1px 2px rgba(26, 37, 56, .06);
    --fbx-shadow: 0 1px 3px rgba(26, 37, 56, .10), 0 1px 2px rgba(26, 37, 56, .06);
    --fbx-shadow-lg: 0 8px 24px rgba(26, 37, 56, .12);

    /* chrome */
    --fbx-sidebar-width: 260px;
    --fbx-topbar-height: 44px;

    /* status */
    --fbx-status-ok: #2E7D32;
    --fbx-status-ok-bg: #E7F4E8;
    --fbx-status-warn: var(--accent-dark-color);
    --fbx-status-warn-bg: #FDF0DA;
    --fbx-status-danger: #C62828;
    --fbx-status-danger-bg: #FBE9E9;
    --fbx-status-neutral: var(--silver-darker);
    --fbx-status-neutral-bg: var(--silver-white);

    /* breakpoints (documentation only - media queries cannot read custom properties):
       desktop >= 1280px, tabletL >= 1024px, tabletP >= 768px, phone < 768px */
}

/* == 3. Design-system component rules ===================================== */

.fbx-root {
    font-family: var(--fbx-font);
    font-size: var(--fbx-text-base);
    color: var(--fbx-text);
    background: var(--fbx-canvas);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}
.fbx-root *, .fbx-root *::before, .fbx-root *::after { box-sizing: border-box; }
.fbx-root a { color: var(--primary-light-color); text-decoration: none; }
.fbx-root a:hover { color: var(--primary-color); text-decoration: underline; }
/* :where() keeps specificity at (0,1,0) so .fbx-btn--* variants below still win */
.fbx-root :where(input, select, textarea, button) { font: inherit; color: inherit; }
.fbx-mono { font-family: var(--fbx-font-mono); }

/* -- AppShell (layout behaviour is redefined in section 4) ---------------- */
.fbx-topbar {
    grid-area: topbar;
    display: flex;
    align-items: center;
    gap: var(--fbx-space-3);
    padding: 0 var(--fbx-space-4);
    background: var(--fbx-surface);
    border-bottom: 1px solid var(--fbx-border);
}
.fbx-topbar__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex: none;
    border: 1px solid transparent; border-radius: var(--fbx-radius-sm);
    background: none; color: var(--fbx-text); cursor: pointer; font-size: 16px;
}
.fbx-topbar__toggle:hover { background: var(--silver-white); }
.fbx-topbar__spacer { flex: 1; }
.fbx-topbar__user { display: flex; align-items: center; gap: var(--fbx-space-2); }
.fbx-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--primary-color); color: var(--fbx-text-on-dark);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fbx-text-sm); font-weight: 600; flex: none;
}
.fbx-topbar__identity { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.fbx-topbar__name { font-size: var(--fbx-text-sm); font-weight: 600; white-space: nowrap; }
.fbx-topbar__mail { font-size: var(--fbx-text-xs); color: var(--fbx-text-muted); white-space: nowrap; }

/* -- Sidebar -------------------------------------------------------------- */
.fbx-sidebar {
    grid-area: sidebar;
    width: var(--fbx-sidebar-width);
    background: var(--sidebar-color);
    color: var(--sidebar-text-color);
    padding: var(--fbx-space-2) 0;
    overflow-y: auto;
}
.fbx-navgroup__label {
    display: flex; align-items: center; gap: var(--fbx-space-3);
    padding: var(--fbx-space-3) var(--fbx-space-4);
    font-weight: 600; color: var(--sidebar-text-color);
    background: var(--sidebar-light-color);
}
.fbx-navitem {
    display: flex; align-items: center; gap: var(--fbx-space-3);
    padding: var(--fbx-space-3) var(--fbx-space-4) var(--fbx-space-3) var(--fbx-space-6);
    color: var(--sidebar-text-color); text-decoration: none; cursor: pointer;
    border-left: 3px solid transparent;
}
.fbx-root .fbx-navitem, .fbx-root .fbx-navitem:hover { color: var(--sidebar-text-color); text-decoration: none; }
.fbx-navitem:hover { background: var(--sidebar-light-color); }
.fbx-navitem--active, .fbx-root .fbx-navitem--active, .fbx-root .fbx-navitem--active:hover {
    color: var(--accent-color); font-weight: 600;
    background: var(--sidebar-light-color); border-left-color: var(--accent-color);
}
.fbx-navitem__icon { width: 18px; text-align: center; flex: none; opacity: .95; }

/* -- Breadcrumbs + PageTitle ---------------------------------------------- */
.fbx-breadcrumbs {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--fbx-space-2);
    padding: var(--fbx-space-2) 0 var(--fbx-space-3);
    font-size: var(--fbx-text-base); color: var(--primary-light-color);
}
.fbx-breadcrumbs__item { display: inline-flex; align-items: center; gap: var(--fbx-space-2); }
.fbx-breadcrumbs a { color: var(--primary-light-color); text-decoration: none; cursor: pointer; }
.fbx-breadcrumbs a:hover { text-decoration: underline; }
.fbx-breadcrumbs__sep { color: var(--silver-mid); }
.fbx-breadcrumbs__current { color: var(--fbx-text-muted); }

.fbx-pagetitle { margin: 0 0 var(--fbx-space-4); }
.fbx-pagetitle__eyebrow {
    font-size: var(--fbx-text-xs); letter-spacing: .08em; text-transform: uppercase;
    color: var(--fbx-text-subtle); margin-bottom: var(--fbx-space-1);
}
.fbx-pagetitle__row { display: flex; align-items: center; gap: var(--fbx-space-4); }
.fbx-pagetitle__heading { font-size: var(--fbx-text-2xl); font-weight: 700; line-height: 1.2; margin: 0; flex: 1; min-width: 0; }
.fbx-pagetitle__sub { color: var(--fbx-text-muted); margin-top: var(--fbx-space-1); }
.fbx-pagetitle__actions { display: flex; gap: var(--fbx-space-2); flex: none; }

/* -- Card / FormCard ------------------------------------------------------ */
.fbx-card {
    background: var(--fbx-surface);
    border: 1px solid var(--fbx-border);
    border-radius: var(--fbx-radius);
    box-shadow: var(--fbx-shadow-sm);
}
.fbx-card__header {
    display: flex; align-items: center; gap: var(--fbx-space-2);
    padding: var(--fbx-space-4) var(--fbx-space-4) 0;
    font-size: var(--fbx-text-lg); font-weight: 600;
}
.fbx-card__body { padding: var(--fbx-space-4); }

/* -- FieldGrid / Field ---------------------------------------------------- */
.fbx-fieldgrid { display: grid; gap: var(--fbx-space-4) var(--fbx-space-5); }
.fbx-fieldgrid--1 { grid-template-columns: 1fr; }
.fbx-fieldgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fbx-fieldgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .fbx-fieldgrid--2, .fbx-fieldgrid--3 { grid-template-columns: 1fr; } }

.fbx-field { display: flex; flex-direction: column; gap: var(--fbx-space-1); min-width: 0; }
.fbx-field__label { font-size: var(--fbx-text-sm); color: var(--fbx-text-muted); }
.fbx-field__control {
    border: 1px solid var(--fbx-border-strong); border-radius: var(--fbx-radius-sm);
    padding: var(--fbx-space-2) var(--fbx-space-3); background: var(--fbx-surface);
    font: inherit; color: var(--fbx-text); min-height: 34px;
    display: flex; align-items: center; justify-content: space-between; gap: var(--fbx-space-2);
}
.fbx-field__control--readonly { background: var(--fbx-surface-sunken); color: var(--fbx-text-muted); }
.fbx-field__hint { font-size: var(--fbx-text-xs); color: var(--fbx-text-subtle); }
.fbx-field__chev { color: var(--fbx-text-subtle); flex: none; }

/* -- Buttons / SaveRevertBar ---------------------------------------------- */
.fbx-actionbar { display: flex; gap: var(--fbx-space-2); padding-top: var(--fbx-space-4); }
.fbx-btn {
    display: inline-flex; align-items: center; gap: var(--fbx-space-2);
    padding: var(--fbx-space-2) var(--fbx-space-4);
    border-radius: var(--fbx-radius-sm); border: 1px solid var(--fbx-border-strong);
    background: var(--fbx-surface); color: var(--fbx-text);
    font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
.fbx-btn:hover:not(:disabled) { background: var(--silver-white); }
.fbx-btn--primary { background: var(--primary-color); border-color: var(--primary-color); color: var(--fbx-text-on-dark); }
.fbx-btn--primary:hover:not(:disabled) { background: var(--primary-dark-color); }
.fbx-btn--accent { background: var(--accent-color); border-color: var(--accent-color); color: #3A2600; }
.fbx-btn--accent:hover:not(:disabled) { background: var(--accent-light-color); }
.fbx-btn--ghost { background: transparent; border-color: transparent; color: var(--primary-light-color); }
.fbx-btn:disabled { opacity: .5; cursor: default; }

/* -- Badges --------------------------------------------------------------- */
.fbx-badge {
    display: inline-flex; align-items: center; gap: var(--fbx-space-1);
    padding: .25em .6em; border-radius: var(--fbx-radius-sm);
    font-size: var(--fbx-text-sm); font-weight: 700; line-height: 1;
    white-space: nowrap; vertical-align: baseline;
}
.fbx-badge--pill { border-radius: var(--fbx-radius-pill); }
.fbx-badge__icon { font-size: .9em; }
.fbx-badge--aircraft { background: var(--primary-light-color); color: var(--primary-text-color); }
.fbx-badge--vfr { background: var(--flightrules-vfr); color: #17300A; }
.fbx-badge--vfr-muted { background: var(--flightrules-vfr-unselected); color: #17300A; }
.fbx-badge--ifr { background: var(--flightrules-ifr); color: #3A2600; }
.fbx-badge--ifr-muted { background: var(--flightrules-ifr-unselected); color: #3A2600; }
.fbx-badge--pic { background: var(--flightrole-pic); color: var(--primary-text-color); }
.fbx-badge--dual { background: var(--flightrole-other); color: var(--primary-text-color); }
.fbx-badge--ok { background: var(--fbx-status-ok-bg); color: var(--fbx-status-ok); }
.fbx-badge--warn { background: var(--fbx-status-warn-bg); color: var(--fbx-status-warn); }
.fbx-badge--danger { background: var(--fbx-status-danger-bg); color: var(--fbx-status-danger); }
.fbx-badge--neutral { background: var(--fbx-status-neutral-bg); color: var(--fbx-status-neutral); }
.fbx-badge--solid-ok { background: var(--fbx-status-ok); color: #fff; }
.fbx-badge--solid-warn { background: var(--accent-color); color: #3A2600; }
.fbx-badge--solid-danger { background: var(--fbx-status-danger); color: #fff; }

/* -- StatTile / MetricCard ------------------------------------------------ */
.fbx-stat {
    position: relative; overflow: hidden;
    border-radius: var(--fbx-radius); padding: var(--fbx-space-4);
    min-height: 118px; display: flex; flex-direction: column; gap: var(--fbx-space-1);
}
.fbx-stat__label { font-size: var(--fbx-text-sm); position: relative; z-index: 1; }
.fbx-stat__value { font-size: var(--fbx-text-metric); font-weight: 300; line-height: 1.1; position: relative; z-index: 1; }
.fbx-stat__caption { font-size: var(--fbx-text-sm); position: relative; z-index: 1; }
.fbx-stat__icon { position: absolute; top: -8px; right: -10px; font-size: 5rem; opacity: .15; pointer-events: none; z-index: 0; line-height: 1; }
.fbx-stat--dark { background: var(--primary-darker-color); color: var(--fbx-text-on-dark); }
.fbx-stat--dark .fbx-stat__caption, .fbx-stat--dark .fbx-stat__label { color: var(--fbx-text-on-dark-muted); }
.fbx-stat--dark .fbx-stat__icon { color: #fff; }
.fbx-stat--navy { background: var(--primary-dark-color); color: var(--fbx-text-on-dark); }
.fbx-stat--navy .fbx-stat__caption, .fbx-stat--navy .fbx-stat__label { color: var(--fbx-text-on-dark-muted); }
.fbx-stat--navy .fbx-stat__icon { color: #fff; }
.fbx-stat--steel { background: var(--primary-light-color); color: var(--fbx-text-on-dark); }
.fbx-stat--steel .fbx-stat__caption, .fbx-stat--steel .fbx-stat__label { color: var(--fbx-text-on-dark-muted); }
.fbx-stat--steel .fbx-stat__icon { color: #fff; }
.fbx-stat--light { background: var(--fbx-surface); color: var(--fbx-text); border: 1px solid var(--fbx-border); box-shadow: var(--fbx-shadow-sm); }
.fbx-stat--light .fbx-stat__label, .fbx-stat--light .fbx-stat__caption { color: var(--fbx-text-muted); }
.fbx-stat--light .fbx-stat__icon { color: var(--primary-color); }
.fbx-stat__accent { color: var(--accent-dark-color); }
.fbx-metric { display: flex; align-items: baseline; gap: var(--fbx-space-1); }
.fbx-metric__value { font-size: var(--fbx-text-metric); font-weight: 300; line-height: 1; }
.fbx-metric__unit { font-size: var(--fbx-text-sm); color: var(--fbx-text-muted); }
.fbx-metriccard__row { display: flex; flex-wrap: wrap; gap: var(--fbx-space-5); }

/* -- DataTable ------------------------------------------------------------ */
.fbx-tablewrap { overflow-x: auto; border-radius: var(--fbx-radius); border: 1px solid var(--fbx-border); background: var(--fbx-surface); }
.fbx-table { width: 100%; border-collapse: collapse; font-size: var(--fbx-text-base); }
.fbx-table thead th {
    background: var(--sidebar-color); color: var(--primary-text-color);
    /* collapsed same-colour borders hide the anti-aliasing seams Chrome paints between
       adjacent dark cells at fractional column boundaries */
    border: 1px solid var(--sidebar-color);
    text-align: left; font-weight: 600; padding: var(--fbx-space-3) var(--fbx-space-3);
    white-space: nowrap;
}
.fbx-table th.fbx-table__num, .fbx-table td.fbx-table__num { text-align: right; }
.fbx-table tbody td { padding: var(--fbx-space-3); border-bottom: 1px solid var(--fbx-border); vertical-align: middle; }
.fbx-table tbody tr:last-child td { border-bottom: none; }
.fbx-table tbody tr:hover td { background: var(--fbx-surface-sunken); }
.fbx-table__group td { background: var(--silver-white); font-weight: 600; border-bottom: 1px solid var(--fbx-border); border-left: 1px solid var(--silver-white); border-right: 1px solid var(--silver-white); }
.fbx-table tbody tr.fbx-table__group:hover td { background: var(--silver-white); }
.fbx-table__group-inner { display: flex; gap: var(--fbx-space-4); }
.fbx-table__group-label { flex: 1; }
.fbx-table__groupsum { color: var(--fbx-text-muted); font-weight: 600; white-space: nowrap; }
.fbx-table__gotodetail {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border: none; border-radius: var(--fbx-radius-sm);
    background: var(--primary-light-color); color: #fff; cursor: pointer; font-size: 10px;
}
.fbx-table__gotodetail:hover { background: var(--primary-color); }
.fbx-table__open-col { width: 48px; }
.fbx-table__empty { padding: var(--fbx-space-6); text-align: center; color: var(--fbx-text-muted); }
.fbx-table__toolbar {
    display: flex; align-items: center; gap: var(--fbx-space-2); flex-wrap: wrap;
    padding: var(--fbx-space-2) var(--fbx-space-3);
    border-bottom: 1px solid var(--fbx-border); background: var(--fbx-surface);
}
.fbx-table__toolbar .fbx-btn { padding: 0 12px; min-height: 40px; font-size: 13px; white-space: nowrap; }
.fbx-table__toolbar-spacer { flex: 1; }
.fbx-table__search {
    border: 1px solid var(--fbx-border-strong); border-radius: var(--fbx-radius-sm);
    padding: 0 var(--fbx-space-3); min-width: 0; min-height: 40px; flex: 0 1 300px;
    color: var(--fbx-text); background: var(--fbx-surface);
    display: flex; align-items: center; gap: var(--fbx-space-2);
}
.fbx-table__search > .fas { color: var(--silver-dark); font-size: 12px; flex: none; }
.fbx-table__search input {
    flex: 1; min-width: 0; border: none; background: transparent; outline: none;
    font-size: 13px; padding: 8px 0; color: var(--fbx-text);
}
.fbx-table__search input::placeholder { color: var(--fbx-text-subtle); }
.fbx-table__search input::-webkit-search-cancel-button, .fbx-table__search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.fbx-table__search-clear {
    border: none; background: none; color: var(--silver-dark); cursor: pointer;
    min-width: 28px; min-height: 28px; padding: 0; font-size: 12px; flex: none;
}
.fbx-table__search-clear:hover { color: var(--fbx-text); }
@media (max-width: 767.98px) {
    .fbx-table__search { flex: 1 1 100%; }
}

/* cell helpers used by list pages */
.fbx-cell-primary { font-family: var(--fbx-font-mono); font-size: 13px; font-weight: 600; white-space: nowrap; }
.fbx-cell-sub { font-size: var(--fbx-text-xs); color: var(--fbx-text-subtle); white-space: nowrap; }
.fbx-cell-muted { font-size: 13px; color: var(--fbx-text-muted); }
.fbx-cell-num { font-family: var(--fbx-font-mono); white-space: nowrap; }
.fbx-cell-num--strong { font-weight: 600; }
.fbx-cell-none { color: var(--silver-mid); }
.fbx-route { display: flex; align-items: center; gap: var(--fbx-space-2); flex-wrap: wrap; }
.fbx-route__ident { font-family: var(--fbx-font-mono); font-size: 14px; font-weight: 700; }
.fbx-route__arrow { color: var(--silver-mid); }
.fbx-route__via {
    font-family: var(--fbx-font-mono); font-size: var(--fbx-text-sm); color: var(--fbx-text-muted);
    border: 1px solid var(--fbx-border); border-radius: 3px; padding: 1px 6px; white-space: nowrap;
}

/* -- Layout: MasterDetail / MapDetailSplit -------------------------------- */
.fbx-masterdetail { display: grid; gap: var(--fbx-space-4); grid-template-columns: minmax(0, 1fr); }
.fbx-masterdetail--split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
@media (max-width: 980px) { .fbx-masterdetail--split { grid-template-columns: 1fr; } }
.fbx-mapsplit { display: grid; gap: var(--fbx-space-4); grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
@media (max-width: 980px) { .fbx-mapsplit { grid-template-columns: 1fr; } }
.fbx-mapsplit__map {
    border: 1px solid var(--fbx-border); border-radius: var(--fbx-radius);
    background: var(--silver-white); min-height: 260px; overflow: hidden;
    display: flex; align-items: center; justify-content: center; color: var(--fbx-text-subtle);
}
.fbx-mapsplit__aside { display: flex; flex-direction: column; gap: var(--fbx-space-4); }

/* -- StatusRow ------------------------------------------------------------ */
.fbx-statusrow {
    display: flex; align-items: center; gap: var(--fbx-space-3);
    padding: var(--fbx-space-3); border: 1px solid var(--fbx-border);
    border-radius: var(--fbx-radius); background: var(--fbx-surface-sunken);
}
.fbx-statusrow__icon {
    width: 34px; height: 34px; border-radius: var(--fbx-radius-sm); flex: none;
    background: var(--primary-color); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
.fbx-statusrow__body { flex: 1; min-width: 0; }
.fbx-statusrow__eyebrow { font-size: var(--fbx-text-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--fbx-text-subtle); }
.fbx-statusrow__title { font-weight: 600; }
.fbx-statusrow__meta { font-size: var(--fbx-text-sm); color: var(--accent-dark-color); }

/* -- misc ----------------------------------------------------------------- */
.fbx-stack { display: flex; flex-direction: column; gap: var(--fbx-space-4); }
.fbx-tilegrid { display: grid; gap: var(--fbx-space-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.fbx-tabs { display: flex; gap: var(--fbx-space-5); border-bottom: 1px solid var(--fbx-border); margin-bottom: var(--fbx-space-4); }
.fbx-tab { padding: var(--fbx-space-2) 0; cursor: pointer; color: var(--fbx-text-muted); border-bottom: 2px solid transparent; }
.fbx-tab--active { color: var(--fbx-text); font-weight: 600; border-bottom-color: var(--primary-color); }

/* == 4. App shell adaptations ============================================= */

/* The shell fills the viewport; the main area scrolls, the sidebar scrolls
   independently. Pages that want to fill the remaining height use
   .fbx-page__fill (flex: 1, internal scrolling). */
.fbx-shell {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: var(--fbx-topbar-height) minmax(0, 1fr);
    grid-template-areas: "topbar topbar" "sidebar main";
    height: 100vh;
    height: 100dvh;
    background: var(--fbx-canvas);
}
.fbx-topbar { position: relative; z-index: 70; min-width: 0; }
.fbx-topbar__brand { display: inline-flex; align-items: center; flex: none; }
.fbx-topbar__brand img { height: 20px; width: auto; display: block; }
.fbx-topbar__divider { width: 1px; height: 24px; background: var(--fbx-border); margin: 0 var(--fbx-space-1); flex: none; }

.fbx-main {
    --fbx-main-gutter: var(--fbx-space-4);
    grid-area: main;
    min-width: 0; min-height: 0;
    overflow: auto;
    padding: var(--fbx-main-gutter) var(--fbx-main-gutter) 0;
    display: flex; flex-direction: column;
}
.fbx-page { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* The page is sized to the main area, so a page taller than the viewport overflows it and a bottom
   padding on .fbx-main would end up behind the page box, not below the content (the last card sat
   flush on the screen edge). The bottom gutter is a trailing spacer inside the page instead. */
.fbx-page::after { content: ""; flex: none; height: var(--fbx-main-gutter); }
.fbx-page__fill { flex: 1; min-height: 0; overflow: auto; }
.fbx-card--list { padding: 14px; }

/* phone: tighter shell gutter, the list card bleeds to the gutter, compact table cells */
@media (max-width: 767.98px) {
    .fbx-main { --fbx-main-gutter: var(--fbx-space-2); }
    .fbx-card--list { padding: 0; }
    .fbx-card--list .fbx-tablewrap { border: none; border-radius: 0; }
    .fbx-card--list .fbx-table__toolbar { padding: var(--fbx-space-2); }
    .fbx-card--list .fbx-table thead th, .fbx-card--list .fbx-table tbody td { padding: var(--fbx-space-2); }
    .fbx-card--list .fbx-table thead th:first-child, .fbx-card--list .fbx-table tbody td:first-child { padding-left: 10px; }
    .fbx-card--list .fbx-table thead th:last-child, .fbx-card--list .fbx-table tbody td:last-child { padding-right: 10px; }
}

/* sidebar as a flex column so the footer sticks to the bottom */
.fbx-sidebar { min-height: 0; display: flex; flex-direction: column; }
.fbx-sidebar__inner { min-height: 100%; display: flex; flex-direction: column; }
.fbx-sidebar__foot {
    margin-top: auto;
    padding: var(--fbx-space-3) var(--fbx-space-4) var(--fbx-space-2);
    border-top: 1px solid rgba(255, 255, 255, .1);
    display: flex; flex-direction: column; gap: 2px;
    font-size: var(--fbx-text-xs); line-height: 1.4; color: var(--fbx-text-on-dark-muted);
}
.fbx-sidebar__version { font-family: var(--fbx-font-mono); margin-top: 2px; opacity: .8; }

/* desktop (>= 1280px): sidebar is a grid column; toggling hides it */
.fbx-shell:not(.fbx-shell--nav-open) { grid-template-areas: "topbar topbar" "main main"; grid-template-columns: minmax(0, 1fr); }
.fbx-shell:not(.fbx-shell--nav-open) .fbx-sidebar { display: none; }
.fbx-shell__backdrop { display: none; }

/* below desktop: sidebar becomes an overlay drawer under the top bar */
@media (max-width: 1279.98px) {
    .fbx-shell, .fbx-shell--nav-open { grid-template-areas: "topbar topbar" "main main"; grid-template-columns: minmax(0, 1fr); }
    .fbx-shell .fbx-sidebar {
        grid-area: auto;
        position: absolute; top: var(--fbx-topbar-height); bottom: 0; left: 0; z-index: 60;
        box-shadow: var(--fbx-shadow-lg);
    }
    .fbx-shell--nav-open .fbx-sidebar { display: flex; }
    .fbx-shell--nav-open .fbx-shell__backdrop {
        display: block; position: absolute; top: var(--fbx-topbar-height); left: 0; right: 0; bottom: 0;
        z-index: 55; background: transparent;
    }
}

/* top-bar dropdown menus (language, user) */
.fbx-topmenu { position: relative; flex: none; }
.fbx-topbar__trigger {
    display: flex; align-items: center; gap: var(--fbx-space-2);
    min-height: 40px; padding: 0 var(--fbx-space-2);
    border: 1px solid transparent; border-radius: var(--fbx-radius-sm);
    background: transparent; color: var(--fbx-text); cursor: pointer;
}
.fbx-topbar__trigger:hover { background: var(--silver-white); }
.fbx-topbar__trigger--open { background: var(--fbx-surface-sunken); border-color: var(--fbx-border-strong); }
.fbx-topbar__trigger .fbx-topbar__chev { font-size: 10px; color: var(--silver-dark); }
.fbx-topbar__lang-code { font-family: var(--fbx-font-mono); font-size: var(--fbx-text-sm); font-weight: 600; }
.fbx-topbar__lang-icon { color: var(--silver-dark); font-size: 13px; }
.fbx-menu {
    position: absolute; top: calc(100% + 6px); right: 0; min-width: 180px; z-index: 80;
    background: var(--fbx-surface); border: 1px solid var(--fbx-border-strong);
    border-radius: var(--fbx-radius); box-shadow: var(--fbx-shadow-lg);
    padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.fbx-menu__item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    min-height: 40px; padding: 0 12px; border: none; border-radius: var(--fbx-radius-sm);
    background: none; color: var(--fbx-text); font-size: 13px; text-align: left; cursor: pointer;
    text-decoration: none;
}
.fbx-menu__item:hover { background: var(--fbx-surface-sunken); }
.fbx-menu__item--selected { background: var(--fbx-surface-sunken); font-weight: 600; }
.fbx-menu__item--danger { color: var(--fbx-status-danger); }
.fbx-menu__item--danger:hover { background: var(--fbx-status-danger-bg); }
.fbx-menu__item > .fas, .fbx-menu__item > .far { width: 14px; text-align: center; color: var(--fbx-text-muted); flex: none; }
.fbx-menu__item--danger > .fas { color: inherit; }
.fbx-menu__code { font-family: var(--fbx-font-mono); font-size: var(--fbx-text-xs); font-weight: 600; width: 22px; color: var(--fbx-text-muted); }
.fbx-menu__label { flex: 1; }
.fbx-menu__sep { height: 1px; background: var(--fbx-border); margin: 4px 0; }
.fbx-menu__header { padding: 6px 12px 8px; border-bottom: 1px solid var(--fbx-border); margin-bottom: 4px; }
.fbx-menu__header-name { font-size: 13px; font-weight: 600; }
.fbx-menu__header-mail { font-size: var(--fbx-text-xs); color: var(--fbx-text-muted); }
.fbx-menu-backdrop { position: fixed; inset: 0; z-index: 75; background: transparent; }

/* page-head actions (Statistics, information pages): 40px buttons on the title line, 44px touch targets on phones;
   secondary actions sit in a "more" menu behind a square ellipsis button, as on the aircraft and flight plan editors */
.fbx-headbtn { min-height: 40px; height: 40px; padding: 0 14px; flex: none; white-space: nowrap; }
.fbx-headbtn--icon { width: 40px; padding: 0; justify-content: center; }
.fbx-headbtn--open { background: var(--fbx-surface-sunken); }
.fbx-headmenu { width: 220px; }
@media (max-width: 767.98px) {
    .fbx-headbtn { min-height: 44px; height: 44px; }
    .fbx-headbtn--icon { width: 44px; }
}

/* responsive visibility helpers (breakpoints: 1280 / 1024 / 768) */
@media (max-width: 1279.98px) { .fbx-hide-lt-1280 { display: none !important; } }
@media (max-width: 1023.98px) { .fbx-hide-lt-1024 { display: none !important; } }
@media (max-width: 767.98px)  { .fbx-hide-lt-768  { display: none !important; } }
@media (min-width: 768px)     { .fbx-show-lt-768  { display: none !important; } }
@media (min-width: 1024px)    { .fbx-show-lt-1024 { display: none !important; } }
@media (min-width: 1280px)    { .fbx-show-lt-1280 { display: none !important; } }
.fbx-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* links styled as buttons keep the button colours */
.fbx-root a.fbx-btn, .fbx-root a.fbx-btn:hover { color: var(--fbx-text); text-decoration: none; }
.fbx-root a.fbx-btn--primary, .fbx-root a.fbx-btn--primary:hover { color: var(--fbx-text-on-dark); }

/* -- Form controls (plain inputs inside .fbx-field__control) --------------- */
input.fbx-field__control, select.fbx-field__control { width: 100%; min-height: 38px; display: block; }
input.fbx-field__control:focus, select.fbx-field__control:focus, .fbx-icao__control:focus-within, .fbx-create__routebar:focus-within {
    outline: none; border-color: var(--primary-light-color); box-shadow: 0 0 0 3px var(--primary-lighter-color);
}
input.fbx-field__control::placeholder { color: var(--fbx-text-subtle); }
.fbx-input--mono { font-family: var(--fbx-font-mono); }
select.fbx-select {
    appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%236B7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat; background-position: right 12px center;
}

/* ICAO input with suggestions (FbxAirportIcaoInput) */
.fbx-icao { position: relative; }
.fbx-icao__control { padding: 0 var(--fbx-space-3); min-height: 38px; }
.fbx-icao__control--ok { border-color: var(--fbx-status-ok); }
.fbx-icao__input { flex: 1; min-width: 0; border: none; background: transparent; font-family: var(--fbx-font-mono); font-size: 15px; text-transform: uppercase; padding: 0; min-height: 36px; }
.fbx-icao__input:focus { outline: none; }
.fbx-icao__input::placeholder { text-transform: none; font-family: var(--fbx-font); font-size: var(--fbx-text-sm); color: var(--fbx-text-subtle); }
.fbx-icao__ok { color: var(--fbx-status-ok); font-size: 12px; flex: none; }
.fbx-icao__clear { border: none; background: none; color: var(--silver-dark); cursor: pointer; min-width: 24px; min-height: 24px; padding: 0; flex: none; }
.fbx-icao__clear:hover { color: var(--fbx-text); }
/* button at the end of the field (e.g. the aircraft's home base), covers the field's right border */
.fbx-icao__quick {
    flex: none; align-self: stretch; margin: -1px calc(-1 * var(--fbx-space-3)) -1px 0; min-height: 0; padding: 0 12px; gap: 6px;
    font-size: 12px; border-radius: 0 var(--fbx-radius-sm) var(--fbx-radius-sm) 0; background: var(--fbx-surface-sunken); box-shadow: none;
}
.fbx-icao__quick > .fas { font-size: 11px; }
.fbx-icao__quick-label { font-family: var(--fbx-font-mono); }
.fbx-icao__menu {
    position: absolute; left: 0; right: 0; top: calc(100% - 18px); z-index: 20; margin: 0; padding: 4px; list-style: none;
    background: var(--fbx-surface); border: 1px solid var(--fbx-border-strong); border-radius: var(--fbx-radius); box-shadow: var(--fbx-shadow-lg);
    max-height: 264px; overflow: auto;
}
.fbx-icao__option { display: flex; align-items: center; gap: var(--fbx-space-3); padding: 8px 10px; border-radius: var(--fbx-radius-sm); cursor: pointer; font-size: 13px; }
.fbx-icao__option--active { background: var(--fbx-surface-sunken); }
.fbx-icao__code { font-family: var(--fbx-font-mono); font-weight: 700; width: 46px; flex: none; }
.fbx-icao__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fbx-text-muted); }

/* VFR / IFR toggle */
.fbx-rules { display: flex; gap: var(--fbx-space-2); }
.fbx-rules__btn {
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px;
    border: 2px solid var(--fbx-border-strong); border-radius: var(--fbx-radius-sm); background: var(--fbx-surface);
    font-size: 13px; font-weight: 600; cursor: pointer; color: var(--fbx-text);
}
.fbx-rules__btn > .fas { display: none; font-size: 12px; }
.fbx-rules__btn--on > .fas { display: inline; }
.fbx-rules__btn--vfr.fbx-rules__btn--on { border-color: var(--flightrules-vfr); background: var(--fbx-status-ok-bg); }
.fbx-rules__btn--vfr > .fas { color: var(--flightrules-vfr); }
.fbx-rules__btn--ifr.fbx-rules__btn--on { border-color: var(--flightrules-ifr); background: var(--fbx-status-warn-bg); }
.fbx-rules__btn--ifr > .fas { color: var(--flightrules-ifr); }

/* -- Page head with optional back button (below desktop) ------------------ */
.fbx-pagehead { display: flex; align-items: flex-start; gap: 4px; }
.fbx-pagehead__back { min-height: 44px; width: 44px; justify-content: center; padding: 0; margin-left: -8px; margin-top: 4px; flex: none; }
.fbx-pagehead__title { flex: 1; min-width: 0; }

/* -- Flight plan create page ----------------------------------------------- */
.fbx-create { flex: 1; min-height: 0; display: flex; flex-direction: row; gap: 12px; }
.fbx-create__map {
    flex: 1; min-height: 220px; min-width: 0; position: relative;
    border-radius: var(--fbx-radius); overflow: hidden; border: 1px solid var(--fbx-border); background: var(--fbx-surface-sunken);
}
.fbx-root .fbx-create__map .fbx-flightmap { border: none; }
.fbx-create__routebar {
    position: absolute; top: 12px; left: 12px; right: 12px; z-index: 5;
    display: flex; align-items: center; gap: var(--fbx-space-2);
    background: var(--fbx-surface); border: 1px solid var(--fbx-border-strong); border-radius: var(--fbx-radius);
    padding: 8px 12px; box-shadow: var(--fbx-shadow-lg);
}
.fbx-create__routebar > .fas { color: var(--silver-dark); flex: none; }
.fbx-create__routebar input { flex: 1; min-width: 0; border: none; background: transparent; font-family: var(--fbx-font-mono); font-size: 15px; text-transform: uppercase; }
.fbx-create__routebar input:focus { outline: none; }
.fbx-create__routebar input::placeholder { text-transform: none; font-family: var(--fbx-font); font-size: var(--fbx-text-sm); color: var(--fbx-text-subtle); }
.fbx-create__maphint { font-size: var(--fbx-text-xs); color: var(--fbx-text-subtle); white-space: nowrap; }
.fbx-create__panel { width: 420px; flex: none; display: flex; flex-direction: column; gap: 12px; overflow: auto; min-height: 0; }
.fbx-create__form { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.fbx-create__grid2 { gap: 12px; }
@media (max-width: 760px) { .fbx-create__grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fbx-create__imported {
    display: flex; align-items: center; gap: 10px; font-size: 13px;
    background: var(--fbx-status-ok-bg); border: 1px solid var(--fbx-status-ok); border-radius: var(--fbx-radius-sm); padding: 8px 10px;
}
.fbx-create__imported > .fas { color: var(--fbx-status-ok); flex: none; }
.fbx-create__imported-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fbx-create__imported-clear { min-height: 32px; padding: 0 12px; font-size: 12px; flex: none; }
.fbx-create__startfrom { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.fbx-create__eyebrow { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fbx-text-subtle); }
.fbx-recentroute {
    display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 10px; text-align: left; cursor: pointer;
    background: var(--fbx-surface-sunken); border: 1px solid var(--fbx-border); border-radius: var(--fbx-radius-sm); color: var(--fbx-text);
}
.fbx-recentroute:hover { border-color: var(--primary-light-color); }
.fbx-recentroute > .fas { color: var(--primary-light-color); font-size: 12px; flex: none; }
.fbx-recentroute__label { flex: 1; min-width: 0; font-family: var(--fbx-font-mono); font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fbx-recentroute__stats { font-family: var(--fbx-font-mono); font-size: 12px; color: var(--fbx-text-muted); white-space: nowrap; }
.fbx-dropzone {
    position: relative; display: flex; align-items: center; gap: 12px; margin-top: 2px; padding: 12px 14px; cursor: pointer;
    border: 2px dashed var(--primary-light-color); background: var(--primary-lighter-color); border-radius: var(--fbx-radius);
}
.fbx-dropzone:hover, .fbx-dropzone:focus-within { background: var(--silver-white); }
.fbx-dropzone--busy { opacity: .7; pointer-events: none; }
.fbx-dropzone__icon {
    width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center;
    border-radius: var(--fbx-radius-sm); background: var(--fbx-surface); color: var(--primary-color); font-size: 15px;
}
.fbx-dropzone__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fbx-dropzone__title { font-size: 13px; font-weight: 600; color: var(--primary-dark-color); }
.fbx-dropzone__sub { font-size: 12px; color: var(--fbx-text-muted); }
.fbx-dropzone__sub u { color: var(--primary-color); }
/* the real file input covers the whole zone (transparent) so click and native drag & drop both work */
.fbx-dropzone__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.fbx-create__actions { display: flex; gap: var(--fbx-space-2); margin-top: auto; padding: 8px 0 2px; position: sticky; bottom: 0; background: var(--fbx-canvas); }
.fbx-create__actions .fbx-btn { min-height: 44px; }
.fbx-create__submit { flex: 1; justify-content: center; }
@media (max-width: 1279.98px) { .fbx-create__panel { width: 380px; } }
@media (max-width: 1023.98px) {
    .fbx-create { flex-direction: column; }
    .fbx-create__map { flex: none; height: 320px; }
    .fbx-create__panel { width: 100%; overflow: visible; flex: 1; }
}


/* -- Extra button variants ------------------------------------------------ */
.fbx-btn--danger { background: var(--fbx-status-danger); border-color: var(--fbx-status-danger); color: #fff; }
.fbx-btn--danger:hover:not(:disabled) { background: #A51F1F; }
.fbx-btn--danger-outline { color: var(--fbx-status-danger); border-color: var(--fbx-status-danger); }
.fbx-btn--danger-outline:hover:not(:disabled) { background: var(--fbx-status-danger-bg); }
.fbx-btn--dashed { border-style: dashed; justify-content: center; min-height: 44px; font-size: 12px; }

/* -- Plain HTML modal ------------------------------------------------------ */
.fbx-modal {
    position: fixed; inset: 0; z-index: 90; background: rgba(27, 34, 48, .45);
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.fbx-modal__panel {
    width: 100%; max-width: 540px; max-height: 100%; display: flex; flex-direction: column;
    background: var(--fbx-surface); border-radius: var(--fbx-radius-lg); box-shadow: var(--fbx-shadow-lg); overflow: hidden;
}
.fbx-modal__panel--sm { max-width: 460px; }
.fbx-modal__head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--fbx-border); flex: none; }
.fbx-modal__icon { color: var(--primary-light-color); width: 18px; text-align: center; flex: none; }
.fbx-modal__icon--danger { color: var(--fbx-status-danger); }
.fbx-modal__titles { flex: 1; min-width: 0; }
.fbx-modal__title { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbx-modal__subtitle { font-size: 11px; color: var(--fbx-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbx-modal__close { min-height: 36px; width: 36px; justify-content: center; padding: 0; flex: none; color: var(--fbx-text-muted); }
.fbx-modal__body { padding: 16px; display: flex; flex-direction: column; gap: 12px; overflow: auto; }
.fbx-modal__body p { margin: 0; }
.fbx-modal__actions { display: flex; gap: 8px; justify-content: flex-end; }
.fbx-modal__actions .fbx-btn { min-height: 40px; }
.fbx-field__hint--ok { color: var(--fbx-status-ok); }

/* -- Segmented control (phone Map / Route) ---------------------------------- */
.fbx-segmented { display: flex; background: var(--fbx-surface-sunken); border: 1px solid var(--fbx-border); border-radius: var(--fbx-radius-pill); padding: 3px; margin-bottom: 10px; flex: none; }
.fbx-segmented__btn {
    flex: 1; min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 6px;
    font: inherit; font-size: 13px; border: none; cursor: pointer; border-radius: var(--fbx-radius-pill);
    background: transparent; color: var(--fbx-text-muted);
}
.fbx-segmented__btn--on { background: var(--fbx-surface); color: var(--fbx-text); font-weight: 600; box-shadow: var(--fbx-shadow-sm); }

/* -- Chips ------------------------------------------------------------------ */
.fbx-chip {
    flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 10px;
    border: 1px solid var(--fbx-border-strong); background: var(--fbx-surface); color: var(--fbx-text-muted);
    border-radius: var(--fbx-radius-pill); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.fbx-chip--on { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.fbx-chip__count { font-family: var(--fbx-font-mono); font-size: 10px; opacity: .75; }

/* -- Flight plan editor ------------------------------------------------------ */
.fbx-edit { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fbx-edit__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; position: relative; }
.fbx-edit__title { font-size: 24px; font-weight: 600; white-space: nowrap; margin: 0; }
.fbx-edit__date { font-family: var(--fbx-font-mono); font-size: 12px; color: var(--fbx-text-muted); white-space: nowrap; }
.fbx-edit__spacer { flex: 1; }
.fbx-edit__head > .fbx-btn { min-height: 40px; }
.fbx-edit__menuwrap { position: relative; }
.fbx-edit__menubtn { min-height: 40px; width: 40px; justify-content: center; padding: 0; }
.fbx-edit__menubtn--open { background: var(--fbx-surface-sunken); }
.fbx-edit__menu { min-width: 220px; }

.fbx-edit__body { flex: 1; min-height: 0; display: flex; gap: 12px; position: relative; }

/* rail */
.fbx-rail {
    width: 400px; flex: none; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
    background: var(--fbx-surface); border: 1px solid var(--fbx-border); border-radius: var(--fbx-radius); box-shadow: var(--fbx-shadow-sm);
}
.fbx-rail__details {
    display: flex; align-items: center; gap: 8px; padding: 0 14px; min-height: 40px; width: 100%;
    background: var(--fbx-surface-sunken); border: none; border-bottom: 1px solid var(--fbx-border);
    font: inherit; color: var(--fbx-text); cursor: pointer; text-align: left;
}
.fbx-rail__details > .fas { font-size: 11px; color: var(--fbx-text-muted); }
.fbx-rail__details-label { font-size: 13px; font-weight: 600; white-space: nowrap; flex: none; }
.fbx-rail__details-summary { font-family: var(--fbx-font-mono); font-size: 12px; color: var(--fbx-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.fbx-rail__details-pen { color: var(--primary-light-color) !important; }
.fbx-rail__detailsform { padding: 12px 14px; border-bottom: 1px solid var(--fbx-border); }
.fbx-edit__details { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.fbx-edit__details-wide { grid-column: 1 / -1; }
.fbx-edit__details .fbx-rules__btn { min-height: 38px; padding: 5px 12px; }

.fbx-rail__routehead { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 14px; border-bottom: 1px solid var(--fbx-border); }
.fbx-rail__routetitle { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.fbx-rail__routetitle > .fas { color: var(--primary-light-color); }
.fbx-rail__routeactions { display: flex; gap: 2px; }
.fbx-rail__iconbtn { padding: 0 8px; min-height: 32px; font-size: 12px; }

.fbx-rail__list { flex: 1; min-height: 0; overflow: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.fbx-rail__leg { display: flex; align-items: center; gap: 8px; padding: 0 12px 0 17px; height: 24px; font-family: var(--fbx-font-mono); font-size: 11px; color: var(--fbx-text-muted); white-space: nowrap; }
.fbx-rail__legbar { width: 2px; height: 24px; background: var(--fbx-border-strong); flex: none; }
.fbx-rail__leg--selected { color: var(--accent-dark-color); font-weight: 600; }
.fbx-rail__leg--selected .fbx-rail__legbar { background: var(--accent-color); }
.fbx-rail__row {
    display: flex; align-items: center; gap: 10px; padding: 0 10px 0 12px; min-height: 48px; cursor: pointer;
    border: 1px solid var(--fbx-border); border-radius: var(--fbx-radius-sm); background: var(--fbx-surface-sunken); color: var(--fbx-text);
    outline-offset: 1px; position: relative; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
    transition: background .12s, border-color .12s, opacity .12s, box-shadow .12s;
}
.fbx-rail__row--airport { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.fbx-rail__row--airport .fbx-rail__sub, .fbx-rail__row--airport .fbx-rail__meta, .fbx-rail__row--airport .fbx-rail__eta { color: var(--fbx-text-on-dark-muted); }
.fbx-rail__row--airport.fbx-rail__row--selected { outline: 2px solid var(--accent-color); }
.fbx-rail__row--airport.fbx-rail__row--selected .fbx-rail__rowicon, .fbx-rail__row--airport.fbx-rail__row--selected .fbx-rail__meta { color: var(--accent-color); }
.fbx-rail__row--waypoint.fbx-rail__row--selected { background: var(--fbx-status-warn-bg); border-color: var(--accent-color); box-shadow: var(--fbx-shadow-sm); }
.fbx-rail__row--waypoint.fbx-rail__row--selected .fbx-rail__meta, .fbx-rail__row--waypoint.fbx-rail__row--selected .fbx-rail__eta { color: var(--accent-dark-color); }
.fbx-rail__rowicon { font-size: 12px; width: 14px; text-align: center; color: rgba(255,255,255,.9); flex: none; }
.fbx-rail__grip {
    display: flex; align-items: center; justify-content: center; width: 30px; align-self: stretch; margin: 0 -8px; flex: none;
    color: var(--silver-mid); font-size: 12px;
}
.fbx-rail__row--selected .fbx-rail__grip { color: var(--accent-dark-color); }
.fbx-rail__num {
    width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--primary-light-color); color: var(--primary-color);
    display: flex; align-items: center; justify-content: center; font-family: var(--fbx-font-mono); font-size: 11px; font-weight: 700; flex: none;
}
.fbx-rail__row--selected .fbx-rail__num { border-color: var(--accent-color); background: var(--accent-color); color: #3A2600; }
.fbx-rail__rowbody { flex: 1; min-width: 0; }
.fbx-rail__ident { font-family: var(--fbx-font-mono); font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.fbx-rail__sub { font-size: 11px; color: var(--fbx-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbx-rail__meta { display: flex; gap: 8px; font-size: 11px; color: var(--fbx-text-muted); white-space: nowrap; }
.fbx-rail__eta { font-family: var(--fbx-font-mono); font-size: 12px; color: var(--fbx-text-muted); min-width: 40px; text-align: right; }
.fbx-rail__trash { border: none; background: none; color: var(--fbx-status-danger); cursor: pointer; padding: 6px; margin: -6px -4px -6px 0; min-width: 32px; min-height: 32px; font-size: 12px; }
.fbx-rail__chev { font-size: 11px; opacity: .6; }
.fbx-rail__add { margin-top: 6px; }

/* row reordering: the dragged row fades, the other waypoints turn into dashed drop targets, the row under the
   pointer is filled and shows a line on the side the dragged waypoint will be inserted */
.fbx-rail__list[data-wp-drag="true"] .fbx-rail__grip { cursor: grab; touch-action: none; }
.fbx-rail__list.fbx-rail__list--dragging .fbx-rail__grip { cursor: grabbing; }
.fbx-rail__list--dragging .fbx-rail__row--airport { opacity: .55; }
.fbx-rail__row.fbx-rail__row--dragging { opacity: .45; border-style: dashed; box-shadow: none; }
.fbx-rail__row.fbx-rail__row--droptarget { background: var(--primary-lighter-color); border: 1px dashed var(--primary-light-color); box-shadow: none; }
.fbx-rail__row--droptarget .fbx-rail__grip { color: var(--primary-color); }
.fbx-rail__row.fbx-rail__row--dropover { background: var(--primary-light-color); border: 1px solid var(--primary-color); color: var(--fbx-text-on-dark); box-shadow: var(--fbx-shadow); }
.fbx-rail__row.fbx-rail__row--dropover .fbx-rail__sub, .fbx-rail__row.fbx-rail__row--dropover .fbx-rail__meta, .fbx-rail__row.fbx-rail__row--dropover .fbx-rail__eta { color: var(--fbx-text-on-dark-muted); }
.fbx-rail__row--dropover .fbx-rail__grip { color: var(--fbx-text-on-dark); }
.fbx-rail__row--dropover .fbx-rail__num { border-color: var(--fbx-text-on-dark); background: transparent; color: var(--fbx-text-on-dark); }
.fbx-rail__row--dropbefore::before, .fbx-rail__row--dropafter::after {
    content: ""; position: absolute; left: -5px; right: -5px; height: 3px; border-radius: 2px; background: var(--primary-color); pointer-events: none;
}
.fbx-rail__row--dropbefore::before { top: -4px; }
.fbx-rail__row--dropafter::after { bottom: -4px; }
.fbx-rail__totals { border-top: 1px solid var(--fbx-border); padding: 10px 14px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; background: var(--fbx-surface-sunken); }
.fbx-rail__totallabel { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--fbx-text-subtle); }
.fbx-rail__totalvalue { font-family: var(--fbx-font-mono); font-size: 18px; font-weight: 700; }
.fbx-rail__totalvalue > span { font-size: 11px; color: var(--fbx-text-muted); }

/* map */
.fbx-edit__map { flex: 1; min-height: 0; position: relative; border-radius: var(--fbx-radius); overflow: hidden; border: 1px solid var(--fbx-border); background: var(--fbx-surface-sunken); }
.fbx-edit__map .fbx-flightmap { border: none; }
.fbx-edit__map--hidden { display: none; }
.fbx-edit__maphint {
    position: absolute; top: 12px; right: 12px; display: flex; align-items: center; gap: 6px; max-width: 70%;
    background: rgba(255,255,255,.94); border: 1px solid var(--fbx-border); border-radius: var(--fbx-radius-pill); padding: 5px 12px;
    box-shadow: var(--fbx-shadow); font-size: 12px; color: var(--fbx-text-muted); pointer-events: none;
}
.fbx-edit__maphint > .fas { color: var(--primary-light-color); }
.fbx-edit__maphint > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbx-edit__popover {
    position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 5; width: 320px; max-width: calc(100% - 24px);
    background: var(--fbx-surface); border: 1px solid var(--fbx-border-strong); border-radius: var(--fbx-radius); box-shadow: var(--fbx-shadow-lg); padding: 12px 14px;
}
.fbx-edit__popover-title { font-weight: 600; font-size: 14px; }
.fbx-edit__popover-sub { font-family: var(--fbx-font-mono); font-size: 12px; color: var(--fbx-text-muted); margin: 2px 0 10px; }
.fbx-edit__popover-actions { display: flex; gap: 8px; }
.fbx-edit__popover-actions .fbx-btn { min-height: 36px; }

/* inspector placement */
.fbx-edit__inspector { background: var(--fbx-surface); border: 1px solid var(--accent-color); border-radius: var(--fbx-radius); box-shadow: var(--fbx-shadow-lg); overflow: hidden; display: flex; flex-direction: column; }
.fbx-edit__inspector--floating { position: absolute; left: 12px; bottom: 12px; width: 440px; max-width: calc(100% - 24px); max-height: calc(100% - 24px); z-index: 6; }
.fbx-edit__inspector--sheet { order: 2; height: 480px; flex: none; border-radius: var(--fbx-radius-lg) var(--fbx-radius-lg) var(--fbx-radius) var(--fbx-radius); }
.fbx-edit__inspector--full { position: absolute; inset: 0; z-index: 20; border-radius: var(--fbx-radius); }
.fbx-insp--airport { --fbx-insp-head: var(--primary-color); --fbx-insp-head-text: #fff; --fbx-insp-head-sub: var(--fbx-text-on-dark-muted); --fbx-insp-badge: var(--accent-color); --fbx-insp-badge-text: #3A2600; }
.fbx-insp--waypoint { --fbx-insp-head: var(--accent-color); --fbx-insp-head-text: #3A2600; --fbx-insp-head-sub: rgba(58,38,0,.75); --fbx-insp-badge: #3A2600; --fbx-insp-badge-text: var(--accent-color); }
.fbx-edit__inspector:has(.fbx-insp--airport) { border-color: var(--primary-light-color); }

/* inspector */
.fbx-insp { display: flex; flex-direction: column; min-height: 0; height: 100%; font-size: 14px; }
.fbx-insp__head { display: flex; align-items: center; gap: 10px; padding: 0 8px 0 14px; min-height: 48px; background: var(--fbx-insp-head); color: var(--fbx-insp-head-text); flex: none; }
.fbx-insp__headbtn { border: none; background: none; color: inherit; cursor: pointer; min-width: 40px; min-height: 40px; font-size: 14px; }
.fbx-insp__badge { width: 24px; height: 24px; border-radius: 50%; background: var(--fbx-insp-badge); color: var(--fbx-insp-badge-text); display: flex; align-items: center; justify-content: center; font-family: var(--fbx-font-mono); font-size: 11px; font-weight: 700; flex: none; }
.fbx-insp__badge > .fas { font-size: 10px; }
.fbx-insp__titles { flex: 1; min-width: 0; }
.fbx-insp__title { font-family: var(--fbx-font-mono); font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbx-insp__subtitle { font-size: 11px; color: var(--fbx-insp-head-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbx-insp__body { flex: 1; min-height: 0; overflow: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; }
.fbx-insp__legstrip {
    display: flex; align-items: center; gap: 10px; background: var(--fbx-surface-sunken); border: 1px solid var(--fbx-border); border-radius: var(--fbx-radius-sm);
    padding: 7px 10px; font-family: var(--fbx-font-mono); font-size: 12px; white-space: nowrap; overflow: hidden;
}
.fbx-insp__legfrom { font-family: var(--fbx-font); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--fbx-text-subtle); }
.fbx-insp__legeta { margin-left: auto; }
.fbx-insp__grid { display: grid; gap: 10px; }
.fbx-insp__grid--wp { grid-template-columns: 1.2fr 1fr 1fr; }
.fbx-insp__grid--apt { grid-template-columns: 1.4fr 1fr .9fr; align-items: start; }
.fbx-insp__grid--2 { grid-template-columns: 1fr 1fr; }
.fbx-insp__grid .fbx-icao .fbx-field__hint { display: none; }
.fbx-insp__name { font-weight: 700; }
.fbx-insp__legnote { display: flex; align-items: center; gap: 6px; margin-top: -6px; font-size: 11px; color: var(--fbx-text-subtle); }
.fbx-insp__coords { display: flex; align-items: center; gap: 8px; font-family: var(--fbx-font-mono); font-size: 12px; color: var(--fbx-text-muted); white-space: nowrap; }
.fbx-insp__coords > .fas { color: var(--silver-dark); }
.fbx-insp__spacer { flex: 1; }
.fbx-insp__smallbtn { min-height: 36px; padding: 0 10px; font-size: 12px; }
.fbx-insp__labelhint { color: var(--fbx-text-subtle); }
.fbx-insp__note { min-height: 68px; resize: vertical; font-size: 13px; line-height: 1.45; display: block; width: 100%; }
.fbx-insp__chartlist { gap: 6px; }
.fbx-insp__chart { display: flex; align-items: center; gap: 10px; background: var(--fbx-surface-sunken); border: 1px solid var(--fbx-border); border-radius: var(--fbx-radius-sm); padding: 0 4px 0 10px; min-height: 44px; }
.fbx-insp__chart--missing { color: var(--fbx-status-danger); background: var(--fbx-status-danger-bg); border-color: var(--fbx-status-danger); }
.fbx-insp__pdf { color: var(--fbx-status-danger); }
.fbx-insp__chartdoc { flex: 1; font-size: 13px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbx-insp__charttag { font-family: var(--fbx-font-mono); font-size: 11px; background: var(--silver-white); border: 1px solid var(--fbx-border); border-radius: var(--fbx-radius-sm); padding: 2px 6px; white-space: nowrap; max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
.fbx-insp__detach { border: none; background: none; color: var(--silver-dark); cursor: pointer; min-width: 36px; min-height: 36px; font-size: 12px; }
.fbx-insp__suggest { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 10px; border: 1px dashed var(--fbx-border-strong); border-radius: var(--fbx-radius-sm); font-size: 12px; color: var(--fbx-text-muted); min-height: 40px; }
.fbx-insp__suggest > .fas { color: var(--fbx-status-ok); }
.fbx-insp__suggesttext { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbx-insp__foot { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-top: 1px solid var(--fbx-border); background: var(--fbx-surface-sunken); flex: none; flex-wrap: wrap; }
.fbx-insp__footbtn { min-height: 40px; padding: 0 8px; font-size: 12px; white-space: nowrap; }
.fbx-insp__movebtn { min-height: 44px; flex: 1; justify-content: center; font-size: 13px; }
.fbx-insp__foothint { flex: 1; min-width: 0; text-align: right; font-size: 11px; color: var(--fbx-text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* chart picker */
.fbx-picker { height: 600px; }
.fbx-picker__back { min-height: 34px; width: 34px; padding: 0; justify-content: center; flex: none; }
.fbx-picker__search { padding: 10px 14px; border-bottom: 1px solid var(--fbx-border); flex: none; }
.fbx-picker__searchbox { display: flex; align-items: center; gap: 8px; border: 1px solid var(--fbx-border-strong); border-radius: var(--fbx-radius-sm); background: var(--fbx-surface); padding: 0 10px; min-height: 40px; }
.fbx-picker__searchbox:focus-within { border-color: var(--primary-light-color); box-shadow: 0 0 0 3px var(--primary-lighter-color); }
.fbx-picker__searchbox > .fas { font-size: 12px; color: var(--silver-dark); }
.fbx-picker__searchbox > input { flex: 1; min-width: 0; border: none; background: transparent; font: inherit; font-size: 13px; outline: none; color: var(--fbx-text); }
.fbx-picker__clear { border: none; background: none; color: var(--fbx-text-muted); cursor: pointer; padding: 4px; }
.fbx-picker__chips { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.fbx-picker__list { flex: 1; min-height: 0; overflow: auto; padding: 6px 14px 14px; }
.fbx-picker__group { padding-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.fbx-picker__grouptitle { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--fbx-text-subtle); padding: 0 2px 2px; }
.fbx-picker__grouptitle--likely { color: var(--accent-dark-color); display: flex; align-items: center; gap: 6px; }
.fbx-picker__doc {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; color: var(--fbx-text);
    background: var(--fbx-surface); border: 1px solid var(--fbx-border); border-radius: var(--fbx-radius-sm); padding: 8px 10px; min-height: 52px; cursor: pointer;
}
.fbx-picker__doc:hover { background: var(--fbx-surface-sunken); border-color: var(--fbx-border-strong); }
.fbx-picker__docicon { color: var(--silver-dark); font-size: 14px; width: 18px; text-align: center; flex: none; }
.fbx-picker__docicon--chart { color: var(--primary-light-color); }
.fbx-picker__docbody { flex: 1; min-width: 0; }
.fbx-picker__docfile { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fbx-picker__filename { font-family: var(--fbx-font-mono); font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbx-picker__why { flex: none; font-size: 10px; font-weight: 600; letter-spacing: .03em; color: var(--accent-dark-color); background: var(--fbx-status-warn-bg); border-radius: var(--fbx-radius-pill); padding: 2px 7px; white-space: nowrap; }
.fbx-picker__docname { font-size: 11px; color: var(--fbx-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbx-picker__docmeta { font-size: 10px; color: var(--fbx-text-subtle); font-family: var(--fbx-font-mono); }
.fbx-picker__attached { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--fbx-status-ok); }
.fbx-picker__chev { font-size: 11px; color: var(--silver-mid); flex: none; }
.fbx-picker__bm {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; color: var(--fbx-text);
    border: 1px solid var(--fbx-border); background: var(--fbx-surface); border-radius: var(--fbx-radius-sm); padding: 6px 10px; min-height: 42px; cursor: pointer;
}
.fbx-picker__bm:hover { border-color: var(--fbx-border-strong); }
.fbx-picker__bm--likely { min-height: 46px; padding: 7px 10px; }
.fbx-picker__bm--likely:hover { border-color: var(--accent-color); }
.fbx-picker__bm--attached { border-color: var(--fbx-status-ok); background: var(--fbx-status-ok-bg); }
.fbx-picker__page { flex: none; font-family: var(--fbx-font-mono); font-size: 11px; color: var(--fbx-text-muted); min-width: 30px; }
.fbx-picker__bmbody { flex: 1; min-width: 0; }
.fbx-picker__bmlabel { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbx-picker__bmlabel--single { flex: 1; min-width: 0; font-weight: 400; }
.fbx-picker__bmtype { font-size: 10px; color: var(--fbx-text-subtle); }
.fbx-picker__rwy { flex: none; font-family: var(--fbx-font-mono); font-size: 10px; color: var(--fbx-text-muted); background: var(--fbx-surface-sunken); border-radius: var(--fbx-radius-pill); padding: 2px 7px; }
.fbx-picker__check { color: var(--fbx-status-ok); font-size: 12px; }
.fbx-picker__empty { text-align: center; padding: 36px 20px 8px; color: var(--fbx-text-muted); font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fbx-picker__empty > .fas { font-size: 22px; color: var(--silver-mid); margin-bottom: 4px; }
.fbx-picker__empty--sm { padding: 20px; font-size: 12px; }
.fbx-picker__emptytitle { font-weight: 600; color: var(--fbx-text); }
.fbx-picker__foot { flex: none; border-top: 1px solid var(--fbx-border); background: var(--fbx-surface-sunken); padding: 9px 14px; display: flex; align-items: flex-end; gap: 8px; }
.fbx-picker__pagebox { flex: 1; min-width: 0; }
.fbx-picker__pagehint { font-size: 10px; color: var(--fbx-text-subtle); margin-bottom: 3px; }
.fbx-picker__pagerow { display: flex; align-items: center; gap: 6px; }
.fbx-picker__pageinput { width: 74px; border: 1px solid var(--fbx-border-strong); border-radius: var(--fbx-radius-sm); background: var(--fbx-surface); padding: 6px 8px; font-family: var(--fbx-font-mono); font-size: 13px; }
.fbx-picker__pageof { font-family: var(--fbx-font-mono); font-size: 11px; color: var(--fbx-text-subtle); flex: none; }
.fbx-picker__pagerow .fbx-btn { min-height: 34px; padding: 0 12px; font-size: 12px; white-space: nowrap; }
.fbx-picker__done { min-height: 38px; padding: 0 16px; font-size: 13px; white-space: nowrap; flex: none; }

/* tablet landscape */
@media (max-width: 1279.98px) {
    .fbx-rail { width: 320px; }
    .fbx-edit__inspector--floating { width: 400px; }
}
/* tablet portrait: stacked map + rail, details bar above */
.fbx-edit__detailsbar {
    display: flex; align-items: center; gap: 8px; padding: 0 12px; min-height: 44px; width: 100%; margin-bottom: 10px; flex: none;
    background: var(--fbx-surface); border: 1px solid var(--fbx-border); border-radius: var(--fbx-radius); font: inherit; color: var(--fbx-text); cursor: pointer; text-align: left;
}
.fbx-edit__detailsbar > .fas { font-size: 11px; color: var(--fbx-text-muted); }
.fbx-edit__detailsbar-label { font-size: 13px; font-weight: 600; white-space: nowrap; }
.fbx-edit__detailsbar-summary { font-family: var(--fbx-font-mono); font-size: 12px; color: var(--fbx-text-muted); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbx-edit__detailsbar-totals { font-family: var(--fbx-font-mono); font-size: 12px; font-weight: 700; white-space: nowrap; }
.fbx-edit__detailscard { padding: 12px 14px; margin-bottom: 10px; flex: none; }
.fbx-edit--tabletp .fbx-edit__body { flex-direction: column; overflow: auto; }
.fbx-edit--tabletp .fbx-edit__map { flex: none; min-height: 240px; height: 360px; order: 1; }
.fbx-edit--tabletp .fbx-rail { width: 100%; height: 480px; flex: none; order: 2; }
/* phone */
.fbx-edit--phone .fbx-edit__title { font-size: 19px; }
.fbx-edit--phone .fbx-edit__map { min-height: 200px; }
.fbx-edit--phone .fbx-rail { width: 100%; flex: 1; }
.fbx-edit__phoneactions { flex: none; padding-top: 10px; display: flex; gap: 8px; }
.fbx-edit__phoneactions .fbx-btn { min-height: 44px; justify-content: center; }
.fbx-edit__phoneactions .fbx-btn:first-child { flex: 1; }
.fbx-edit__phoneactions .fbx-btn--primary { flex: 2; }
.fbx-edit--phone .fbx-insp__grid--wp, .fbx-edit--phone .fbx-insp__grid--apt { grid-template-columns: 1fr 1fr; }
.fbx-edit--phone .fbx-insp__legstrip { flex-wrap: wrap; white-space: normal; row-gap: 2px; }
.fbx-edit--phone .fbx-insp__movebtn { white-space: nowrap; font-size: 12px; padding: 0 8px; }
@media (max-width: 767.98px) {
    .fbx-modal { padding: 8px; }
    .fbx-picker { height: 100%; }
}

@media print {
    .fbx-root, .fbx-shell { background: #fff; }
    .fbx-shell { height: auto; display: block; }
    .fbx-topbar, .fbx-sidebar, .fbx-shell__backdrop, .fbx-breadcrumbs { display: none !important; }
    .fbx-main { overflow: visible; padding: 0; }
    .fbx-page::after { display: none; }
}

/* == 5. Document manager ================================================== */

/* -- shelf ----------------------------------------------------------------- */
.fbx-docs { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; position: relative; }
/* page-wide file drop: fbxFileDrop (fbxscripts.js) sets data-drag="on" while PDFs are dragged over the page */
.fbx-docs__dropoverlay {
    display: none; position: absolute; inset: 0; z-index: 40; align-items: center; justify-content: center; pointer-events: none;
    border: 2px dashed var(--primary-light-color); border-radius: var(--fbx-radius-lg);
    background: color-mix(in srgb, var(--primary-lighter-color) 22%, rgba(255, 255, 255, .9));
}
.fbx-docs[data-drag=on] .fbx-docs__dropoverlay { display: flex; }
.fbx-docs__dropoverlaybody { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; text-align: center; color: var(--primary-color); }
.fbx-docs__dropoverlaybody > .fas { font-size: 34px; }
.fbx-docs__dropoverlaytitle { font-size: 18px; font-weight: 600; }
.fbx-docs__dropoverlayhint { font-size: 13px; color: var(--fbx-text-muted); }
.fbx-docs__spacer { flex: 1; min-width: 0; }
.fbx-docs__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fbx-docs__title { margin: 0; font-size: 24px; font-weight: 600; white-space: nowrap; line-height: 1.2; }
.fbx-docs__tabs { display: flex; background: var(--fbx-surface-sunken); border: 1px solid var(--fbx-border); border-radius: var(--fbx-radius); padding: 3px; gap: 2px; flex: none; }
.fbx-docs__tab {
    display: flex; align-items: center; gap: 7px; padding: 0 14px; height: 32px; border: none; border-radius: var(--fbx-radius-sm);
    background: transparent; color: var(--fbx-text-muted); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.fbx-docs__tab > .fas { font-size: 11px; }
.fbx-docs__tab--on { background: var(--primary-color); color: #fff; font-weight: 600; }
.fbx-docs__tabshort { display: none; }
.fbx-docs__count { font-family: var(--fbx-font-mono); font-size: 11px; opacity: .75; }
.fbx-docs__search {
    display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; flex: 1; min-width: 150px; max-width: 260px;
    background: var(--fbx-surface); border: 1px solid var(--fbx-border-strong); border-radius: var(--fbx-radius-pill); color: var(--fbx-text);
}
.fbx-docs__search:focus-within { border-color: var(--primary-light-color); box-shadow: 0 0 0 3px var(--primary-lighter-color); }
.fbx-docs__search > .fas { color: var(--fbx-text-subtle); font-size: 12px; flex: none; }
.fbx-docs__search input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font-size: 13px; color: var(--fbx-text); }
.fbx-docs__search input::placeholder { color: var(--fbx-text-subtle); }
.fbx-docs__search input::-webkit-search-cancel-button, .fbx-docs__search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.fbx-docs__searchclear { border: none; background: none; color: var(--fbx-text-subtle); cursor: pointer; padding: 0; min-width: 24px; min-height: 24px; font-size: 12px; }
.fbx-docs__searchclear:hover { color: var(--fbx-text); }
.fbx-docs__ref {
    display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; background: var(--fbx-surface); border: 1px solid var(--fbx-border-strong);
    border-radius: var(--fbx-radius); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; color: var(--fbx-text);
}
.fbx-docs__ref:hover, .fbx-docs__ref--open { border-color: var(--primary-color); }
.fbx-docs__ref > .fas:first-child { font-size: 11px; color: var(--primary-color); }
.fbx-docs__reffrom { color: var(--fbx-text-muted); font-weight: 400; }
.fbx-docs__refmenu { width: 300px; }
.fbx-docs__menutitle { padding: 6px 10px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--fbx-text-subtle); }
.fbx-docs__refitem { align-items: center; min-height: 48px; padding: 8px 10px; }
.fbx-docs__refitem--static { cursor: default; }
.fbx-docs__refitem--static:hover { background: none; }
.fbx-docs__refitem:disabled { opacity: .5; cursor: default; }
.fbx-docs__refbody { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; text-align: left; }
.fbx-docs__reflabel { font-size: 13px; font-weight: 600; }
.fbx-docs__refhint { font-size: 11.5px; color: var(--fbx-text-muted); font-weight: 400; }
.fbx-docs__refcheck { color: var(--primary-color) !important; font-size: 11px; }
.fbx-docs__refother { padding: 0 10px 6px 36px; }
.fbx-docs__refother .fbx-field__label:empty { display: none; }
.fbx-docs__refother .fbx-field__hint { font-size: 11px; }
.fbx-docs__upload { height: 36px; flex: none; white-space: nowrap; }
.fbx-docs__stats {
    display: flex; align-items: center; gap: 10px 16px; padding: 8px 14px; min-height: 36px; flex-wrap: wrap;
    background: var(--fbx-surface); border: 1px solid var(--fbx-border); border-radius: var(--fbx-radius);
}
.fbx-docs__statsline { font-size: 12.5px; color: var(--fbx-text-muted); white-space: nowrap; }
.fbx-docs__statshint { font-size: 12.5px; color: var(--fbx-text-muted); white-space: nowrap; }
.fbx-docs__storage { display: flex; align-items: center; gap: 8px; padding-left: 16px; border-left: 1px solid var(--fbx-border); white-space: nowrap; }
.fbx-docs__storagelabel { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--fbx-text-subtle); }
.fbx-docs__storagebar {
    width: 80px; height: 6px; border-radius: var(--fbx-radius-pill); overflow: hidden;
    background: var(--fbx-surface-sunken); box-shadow: inset 0 0 0 1px var(--fbx-border);
}
.fbx-docs__storagefill { height: 100%; background: var(--primary-color); }
.fbx-docs__storagetext { font-size: 12.5px; color: var(--fbx-text-muted); }
.fbx-docs__storage--warn .fbx-docs__storagefill { background: var(--fbx-status-warn); }
.fbx-docs__storage--full .fbx-docs__storagefill { background: var(--fbx-status-danger); }
.fbx-docs__storage--full .fbx-docs__storagetext { color: var(--fbx-status-danger); }

.fbx-docs__body { flex: 1; min-height: 0; display: flex; gap: 14px; min-width: 0; align-items: stretch; }
.fbx-docs__rail { width: 210px; flex: none; display: flex; flex-direction: column; gap: 10px; }
.fbx-docs__filters { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.fbx-docs__raillabel { padding: 2px 8px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--fbx-text-subtle); }
.fbx-docs__filter {
    display: flex; align-items: center; gap: 8px; padding: 6px 10px; min-height: 34px; border: 1px solid transparent; border-radius: var(--fbx-radius-sm);
    background: transparent; color: var(--fbx-text-muted); font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; text-align: left;
}
.fbx-docs__filter:hover { background: var(--fbx-surface-sunken); }
.fbx-docs__filter > .fas { font-size: 11px; width: 14px; text-align: center; }
.fbx-docs__filter .fbx-docs__count { margin-left: auto; padding-left: 6px; }
.fbx-docs__filter--on, .fbx-docs__filter--on:hover { background: var(--primary-color); border-color: var(--primary-color); color: #fff; font-weight: 600; }
.fbx-docs__groups { padding: 10px 12px; }
.fbx-docs__groups .fbx-docs__raillabel { padding: 0 0 8px; }
.fbx-docs__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.fbx-docs__chips .fbx-chip { min-height: 26px; padding: 0 11px; font-weight: 400; }
.fbx-docs__chips .fbx-chip--on { font-weight: 600; }
.fbx-docs__drop { flex-direction: column; text-align: center; gap: 6px; padding: 14px 12px; margin: 0; background: color-mix(in srgb, var(--primary-lighter-color) 10%, #fff); border-width: 1.5px; }
.fbx-docs__drop .fbx-dropzone__icon { background: transparent; color: var(--primary-light-color); font-size: 17px; width: auto; height: auto; }
.fbx-docs__drop .fbx-dropzone__text { align-items: center; }
.fbx-docs__drop .fbx-dropzone__title { color: var(--primary-light-color); font-size: 12.5px; }
.fbx-docs__drop .fbx-dropzone__sub { font-size: 11px; line-height: 1.4; }
/* drop column next to the plain document list (flight plans / other, desktop only) */
.fbx-docs__droprail {
    position: relative; width: 210px; flex: none; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; padding: 20px 16px; text-align: center; cursor: pointer; color: var(--primary-light-color);
    border: 1.5px dashed var(--primary-light-color); border-radius: var(--fbx-radius);
    background: color-mix(in srgb, var(--primary-lighter-color) 10%, #fff);
}
.fbx-docs__droprail:hover, .fbx-docs__droprail:focus-within { background: color-mix(in srgb, var(--primary-lighter-color) 18%, #fff); }
.fbx-docs__droprail--busy { opacity: .7; pointer-events: none; }
.fbx-docs__droprail > .fas { font-size: 26px; }
.fbx-docs__droprailtitle { font-size: 14px; font-weight: 600; }
.fbx-docs__droprailhint { font-size: 12px; line-height: 1.45; color: var(--fbx-text-muted); text-wrap: pretty; }
.fbx-docs__droprailbrowse { font-size: 12px; font-weight: 600; text-decoration: underline; }

.fbx-docs__list { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; padding: 0; }
.fbx-docs__section { display: flex; flex-direction: column; }
.fbx-docs__sectionhead {
    display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 30px; background: var(--silver-white);
    border-bottom: 1px solid var(--fbx-border); border-top: 1px solid var(--fbx-border); position: sticky; top: 0; z-index: 3;
}
.fbx-docs__section:first-child .fbx-docs__sectionhead { border-top: none; }
.fbx-docs__sectionlabel { font-family: var(--fbx-font-mono); font-size: 12px; font-weight: 700; color: var(--silver-black); white-space: nowrap; }
.fbx-docs__sectioncount { font-family: var(--fbx-font-mono); font-size: 11px; color: var(--fbx-text-muted); }
.fbx-docs__cards { display: grid; gap: 10px; padding: 10px 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.fbx-docs__card {
    display: flex; flex-direction: column; gap: 6px; padding: 9px 11px; text-align: left; font: inherit; color: var(--fbx-text); cursor: pointer;
    border: 1px solid var(--fbx-border); border-radius: var(--fbx-radius); background: var(--fbx-surface); position: relative;
}
.fbx-docs__card:hover { border-color: var(--primary-color); box-shadow: var(--fbx-shadow-sm); }
.fbx-docs__cardhead { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.fbx-docs__icao { font-family: var(--fbx-font-mono); font-size: 18px; font-weight: 700; line-height: 1; }
.fbx-docs__airport { font-size: 12px; color: var(--fbx-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.fbx-docs__dist { font-family: var(--fbx-font-mono); font-size: 11px; color: var(--fbx-text-muted); white-space: nowrap; }
.fbx-docs__cells { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--fbx-border); border: 1px solid var(--fbx-border); }
.fbx-docs__cell { background: #fff; padding: 4px 0; text-align: center; }
.fbx-docs__cellvalue { font-family: var(--fbx-font-mono); font-size: 14px; font-weight: 700; line-height: 1.1; }
.fbx-docs__cellvalue--none { color: var(--silver-mid); }
.fbx-docs__celllabel { font-size: 9px; letter-spacing: .05em; color: var(--fbx-text-subtle); }
.fbx-docs__cardfoot { display: flex; align-items: center; gap: 5px; min-height: 19px; }
.fbx-docs__rwy { display: inline-flex; align-items: center; height: 19px; padding: 0 8px; border-radius: var(--fbx-radius-pill); background: var(--primary-color); color: #fff; font-family: var(--fbx-font-mono); font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.fbx-docs__rwy--more { background: var(--silver-mid); color: var(--fbx-text); }
.fbx-docs__bmcount { font-family: var(--fbx-font-mono); font-size: 10.5px; white-space: nowrap; color: var(--fbx-text-muted); }
.fbx-docs__bmcount--none { color: var(--primary-light-color); font-weight: 700; }
.fbx-docs__meta { font-family: var(--fbx-font-mono); font-size: 10.5px; color: var(--fbx-text-subtle); white-space: nowrap; }
.fbx-docs__row {
    display: flex; align-items: center; gap: 12px; padding: 0 14px; min-height: 52px; width: 100%; text-align: left; font: inherit; color: var(--fbx-text);
    border: none; border-bottom: 1px solid var(--fbx-border); background: transparent; cursor: pointer;
}
.fbx-docs__row:hover { background: var(--fbx-surface-sunken); }
.fbx-docs__rowicon { color: var(--flightrole-other); font-size: 15px; flex: none; }
.fbx-docs__rowbody { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.fbx-docs__rowfile { font-family: var(--fbx-font-mono); font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbx-docs__rowsub { font-size: 11.5px; color: var(--fbx-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbx-docs__row .fbx-docs__bmcount, .fbx-docs__row .fbx-docs__meta { font-size: 11.5px; }
.fbx-docs__rowchev { font-size: 11px; color: var(--silver-mid); flex: none; }
.fbx-docs__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; padding: 28px; text-align: center; }
.fbx-docs__emptyicon { font-size: 28px; color: var(--primary-light-color); }
.fbx-docs__emptyicon--muted { color: var(--silver-mid); }
.fbx-docs__emptytext { display: flex; flex-direction: column; gap: 6px; max-width: 430px; }
.fbx-docs__emptytitle { font-size: 17px; font-weight: 600; }
.fbx-docs__emptybody { font-size: 13px; line-height: 1.55; color: var(--fbx-text-muted); }
.fbx-docs__emptyactions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.fbx-docs__emptyactions .fbx-btn { min-height: 38px; }
.fbx-docs__danger { color: var(--fbx-status-danger); font-weight: 600; }

@media (max-width: 1279.98px) {
    .fbx-docs { flex: none; }
    .fbx-docs__body { flex-direction: column; }
    .fbx-docs__rail { width: 100%; flex-direction: row; flex-wrap: wrap; }
    .fbx-docs__filters { flex-direction: row; flex-wrap: wrap; flex: 1; min-width: 0; gap: 6px; }
    .fbx-docs__raillabel { display: none; }
    .fbx-docs__filter { border-radius: var(--fbx-radius-pill); border-color: var(--fbx-border-strong); flex: 0 0 auto; }
    .fbx-docs__groups { flex: none; }
    .fbx-docs__drop, .fbx-docs__droprail { display: none; }
    .fbx-docs__list { overflow: visible; flex: none; }
    .fbx-docs__sectionhead { position: static; }
    .fbx-docs__cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
@media (max-width: 767.98px) {
    .fbx-docs__title { font-size: 20px; }
    .fbx-docs__tablabel { display: none; }
    .fbx-docs__tabshort { display: inline; }
    .fbx-docs__tab { padding: 0 10px; }
    .fbx-docs__search { max-width: none; order: 5; flex: 1 1 100%; }
    .fbx-docs__cards { grid-template-columns: 1fr; }
    .fbx-docs__filter { padding: 6px 10px; }
    .fbx-docs__rail { flex-direction: column; }
    .fbx-docs__filters, .fbx-docs__groups { flex: none; width: 100%; }
    .fbx-docs__storage { padding-left: 0; border-left: none; }
}

/* -- editor ---------------------------------------------------------------- */
.fbx-doced { flex: 1; min-height: 0; display: flex; flex-direction: column; min-width: 0; position: relative; background: var(--fbx-surface); border: 1px solid var(--fbx-border); border-radius: var(--fbx-radius); overflow: hidden; }
.fbx-doced__spacer { flex: 1; min-width: 0; }
.fbx-doced__head { display: flex; align-items: center; gap: 10px; padding: 0 14px; min-height: 54px; border-bottom: 1px solid var(--fbx-border); flex: none; min-width: 0; }
.fbx-doced__iconbtn { min-height: 36px; width: 36px; padding: 0; justify-content: center; flex: none; color: var(--fbx-text-muted); }
.fbx-doced__pdficon { color: var(--flightrole-other); font-size: 15px; flex: none; }
.fbx-doced__titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fbx-doced__file { font-family: var(--fbx-font-mono); font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbx-doced__sub { font-size: 11px; color: var(--fbx-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbx-doced__modes { margin: 0; padding: 2px; border-radius: var(--fbx-radius); }
.fbx-doced__modes .fbx-segmented__btn { min-height: 28px; padding: 0 11px; border-radius: var(--fbx-radius-sm); font-size: 12.5px; flex: none; }
.fbx-doced__modes .fbx-segmented__btn > .fas { font-size: 10px; }
.fbx-doced__modes .fbx-segmented__btn--on { background: var(--primary-color); color: #fff; box-shadow: none; }
.fbx-doced__detect { min-height: 32px; padding: 0 12px; font-size: 12.5px; border: 1.5px solid var(--primary-color); color: var(--primary-color); background: transparent; gap: 7px; }
.fbx-doced__detect:hover:not(:disabled), .fbx-doced__detect--open { background: color-mix(in srgb, var(--primary-lighter-color) 14%, #fff); }
.fbx-doced__detect > .fas:first-child { font-size: 11px; }
.fbx-doced__detectmenu { width: 320px; }
.fbx-doced__menuitem { min-height: 52px; align-items: center; }
.fbx-doced__menubody { display: flex; flex-direction: column; gap: 1px; text-align: left; }
.fbx-doced__menulabel { font-size: 13px; font-weight: 600; }
.fbx-doced__menulabel--plain { font-weight: 400; }
.fbx-doced__menuhint { font-size: 11.5px; color: var(--fbx-text-muted); line-height: 1.45; }
.fbx-doced__menunote { padding: 6px 10px 8px; font-size: 11.5px; line-height: 1.5; color: var(--fbx-text-muted); }
.fbx-doced__morebtn { color: var(--fbx-text); }
.fbx-doced__morebtn--open { background: var(--fbx-surface-sunken); }
.fbx-doced__done { min-height: 32px; flex: none; }
.fbx-doced__proposals { display: flex; align-items: center; gap: 10px; padding: 8px 14px; min-height: 46px; background: var(--fbx-status-warn-bg); border-bottom: 1px solid var(--accent-color); flex: none; min-width: 0; flex-wrap: wrap; }
.fbx-doced__proposals > .fas { color: var(--accent-dark-color); font-size: 13px; }
.fbx-doced__proposalline { font-size: 13px; font-weight: 600; color: var(--fbx-status-warn); white-space: nowrap; }
.fbx-doced__proposalhint { font-size: 12.5px; color: var(--fbx-status-warn); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbx-doced__proposalbtn { min-height: 30px; padding: 0 12px; font-size: 12.5px; }
.fbx-doced__proposalbtn--discard { background: transparent; border-color: var(--accent-dark-color); color: var(--accent-dark-color); }
.fbx-doced__phonetabs { margin: 0; border-radius: 0; border-left: none; border-right: none; border-top: none; padding: 6px 12px; }
.fbx-doced__tabcount { font-size: 11px; }
.fbx-doced__loading { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; min-height: 240px; }
.fbx-doced__failed { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px; color: var(--fbx-status-danger); font-weight: 600; }

.fbx-doced__panes { flex: 1; min-height: 0; display: flex; }
.fbx-doced__rail { width: 116px; flex: none; display: flex; flex-direction: column; border-right: 1px solid var(--fbx-border); background: var(--fbx-surface-sunken); overflow-y: auto; overflow-x: hidden; }
.fbx-doced__railhead { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 34px; border-bottom: 1px solid var(--fbx-border); position: sticky; top: 0; background: var(--fbx-surface-sunken); z-index: 2; flex: none; }
.fbx-doced__eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--fbx-text-subtle); }
.fbx-doced__railcount { font-size: 11px; color: var(--fbx-text-subtle); }
.fbx-doced__tiles { display: grid; gap: 8px; padding: 10px; grid-template-columns: 1fr; }
.fbx-doced__tile { display: flex; flex-direction: column; gap: 4px; padding: 0; border: none; background: none; cursor: pointer; font: inherit; color: inherit; text-align: left; }
/* the tile is a fixed-ratio frame; PdfAccessor.js drops an <img> with the rendered page into it once it is visible */
.fbx-doced__thumb {
    display: flex; align-items: center; justify-content: center; overflow: hidden; aspect-ratio: 3 / 4; width: 100%;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><rect x='8' y='9' width='24' height='4' fill='%23E3E4E8'/><rect x='8' y='17' width='18' height='3' fill='%23EFEFEF'/><rect x='8' y='24' width='22' height='3' fill='%23EFEFEF'/></svg>") center 30% / 60% no-repeat;
    box-shadow: var(--fbx-shadow-sm); border: 2px solid transparent;
}
.fbx-doced__thumb[data-thumb-key] { background-image: none; }
.fbx-doced__thumb > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.fbx-doced__tile--on .fbx-doced__thumb { border-color: var(--primary-color); }
.fbx-doced__tile--proposed:not(.fbx-doced__tile--on) .fbx-doced__thumb { border-color: var(--accent-color); }
.fbx-doced__tilefoot { display: flex; align-items: center; gap: 5px; }
.fbx-doced__tilenum { font-size: 11px; font-weight: 700; color: var(--fbx-text-muted); }
.fbx-doced__tile--on .fbx-doced__tilenum { color: var(--primary-color); }
.fbx-doced__tilecount { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 5px; border-radius: var(--fbx-radius-pill); font-family: var(--fbx-font-mono); font-size: 10px; font-weight: 700; background: var(--fbx-status-ok-bg); color: var(--fbx-status-ok); }
.fbx-doced__tilecount--proposed { background: var(--accent-color); color: #3A2600; }

.fbx-doced__viewer { flex: 1; min-width: 0; min-height: 0; background: var(--silver-white); display: flex; flex-direction: column; align-items: center; padding: 12px; gap: 10px; position: relative; }
.fbx-doced__pager { display: flex; align-items: center; gap: 2px; background: var(--fbx-surface); border: 1px solid var(--fbx-border-strong); border-radius: var(--fbx-radius-pill); padding: 4px 6px; box-shadow: var(--fbx-shadow-sm); flex: none; z-index: 2; }
.fbx-doced__pagerbtn { border: none; background: none; color: var(--fbx-text-muted); cursor: pointer; font-size: 11px; min-width: 32px; min-height: 28px; border-radius: var(--fbx-radius-pill); }
.fbx-doced__pagerbtn:hover:not(:disabled) { background: var(--fbx-surface-sunken); color: var(--fbx-text); }
.fbx-doced__pagerbtn:disabled { opacity: .35; cursor: default; }
.fbx-doced__pagehint { font-size: 12px; font-weight: 600; white-space: nowrap; padding: 0 6px; }
.fbx-doced__pagersep { width: 1px; height: 16px; background: var(--fbx-border); margin: 0 4px; }
.fbx-doced__sheet { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.fbx-doced__sheet > canvas.fbx-pdf-page { max-width: 100%; max-height: 100%; border: 1px solid var(--silver-mid); box-shadow: var(--fbx-shadow); background: #fff; }

.fbx-doced__inspector { width: 380px; flex: none; display: flex; flex-direction: column; min-height: 0; background: var(--fbx-surface-sunken); border-left: 1px solid var(--fbx-border); }
.fbx-doced__insphead { display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 40px; border-bottom: 1px solid var(--fbx-border); background: var(--fbx-surface); flex: none; }
.fbx-doced__insptitle { font-size: 13px; font-weight: 600; white-space: nowrap; }
.fbx-doced__inspcount { font-size: 11.5px; color: var(--fbx-text-subtle); white-space: nowrap; }
.fbx-doced__confirmpage { min-height: 28px; height: 28px; padding: 0 10px; gap: 6px; font-size: 12px; white-space: nowrap; }
.fbx-doced__confirmpage > .fas { font-size: 10px; }
.fbx-doced__inspbody { flex: 1; min-height: 0; overflow: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.fbx-doced__bm { background: var(--fbx-surface); border: 1px solid var(--fbx-border); border-left: 3px solid var(--fbx-border); border-radius: var(--fbx-radius); padding: 9px 11px; display: flex; flex-direction: column; gap: 7px; }
.fbx-doced__bm--proposed { border-color: var(--accent-color); }
.fbx-doced__bmtags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fbx-doced__tag { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--fbx-radius-sm); font-size: 9.5px; font-weight: 700; letter-spacing: .04em; }
.fbx-doced__tag--proposed { background: var(--fbx-status-warn-bg); color: var(--fbx-status-warn); font-size: 10px; }
.fbx-doced__tag--type { background: var(--silver-black); color: #fff; font-family: var(--fbx-font-mono); }
.fbx-doced__tag--ifr { background: var(--flightrules-ifr); color: #3A2600; }
.fbx-doced__tag--vfr { background: var(--flightrules-vfr); color: #17300A; }
.fbx-doced__bmrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fbx-doced__bmdesc { font-size: 14px; font-weight: 700; min-width: 0; flex: 1; overflow-wrap: anywhere; }
.fbx-doced__rwy { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: var(--fbx-radius-pill); background: var(--primary-color); color: #fff; font-family: var(--fbx-font-mono); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.fbx-doced__rwy--all { background: var(--silver-darker); }
.fbx-doced__bmactions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.fbx-doced__bmbtn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--fbx-radius-sm); border: 1px solid var(--fbx-border-strong); background: var(--fbx-surface); color: var(--fbx-text-muted); cursor: pointer; font-size: 11px; }
.fbx-doced__bmbtn:hover { border-color: var(--primary-color); color: var(--primary-color); }
.fbx-doced__bmbtn--remove:hover { border-color: var(--fbx-status-danger); color: var(--fbx-status-danger); }
.fbx-doced__bmbtn--confirm { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.fbx-doced__bmbtn--confirm:hover { color: #fff; background: var(--primary-dark-color); }
.fbx-doced__inspempty { padding: 18px 10px; text-align: center; display: flex; flex-direction: column; gap: 6px; }
.fbx-doced__inspemptytitle { font-size: 13px; font-weight: 600; color: var(--fbx-text-muted); }
.fbx-doced__inspemptyhint { font-size: 12px; line-height: 1.5; color: var(--fbx-text-subtle); }
.fbx-doced__addbm { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; min-height: 44px; border: 1px dashed var(--fbx-border-strong); border-radius: var(--fbx-radius); background: transparent; color: var(--primary-light-color); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; flex: none; }
.fbx-doced__addbm:hover { border-color: var(--primary-color); background: #fff; }
.fbx-doced__addbm > .fas { font-size: 11px; }

/* table mode */
.fbx-doced__tablewrap { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; --fbx-doced-cols: 28px 52px 1fr 30px; }
.fbx-doced__tablewrap--chart { --fbx-doced-cols: 28px 52px 150px 1fr 150px 30px; }
.fbx-doced__selbar { display: flex; align-items: center; gap: 10px; padding: 6px 12px; min-height: 42px; background: var(--primary-color); color: #fff; flex: none; flex-wrap: wrap; }
.fbx-doced__selline { font-size: 13px; font-weight: 600; white-space: nowrap; }
.fbx-doced__selsep { width: 1px; height: 20px; background: rgba(255,255,255,.25); }
.fbx-doced__selbtn { min-height: 28px; padding: 0 10px; font-size: 12.5px; }
.fbx-doced__selbtn--ghost { background: rgba(255,255,255,.12); border-color: transparent; color: #fff; }
.fbx-doced__selbtn--ghost:hover:not(:disabled) { background: rgba(255,255,255,.22); color: #fff; }
.fbx-doced__selclear { border: none; background: none; color: rgba(255,255,255,.85); font: inherit; font-size: 12.5px; cursor: pointer; min-height: 28px; }
.fbx-doced__rwymenu { position: absolute; left: 12px; top: 44px; right: auto; width: 280px; padding: 11px 12px; gap: 9px; }
.fbx-doced__rwychoices { display: flex; flex-wrap: wrap; gap: 6px; }
.fbx-doced__rwyactions { display: flex; gap: 6px; }
.fbx-doced__rwyactions .fbx-btn { flex: 1; justify-content: center; min-height: 32px; font-size: 12.5px; }
.fbx-doced__thead, .fbx-doced__trow { display: grid; align-items: center; gap: 10px; padding: 0 12px; grid-template-columns: var(--fbx-doced-cols); }
.fbx-doced__thead { height: 32px; background: var(--fbx-surface-sunken); border-bottom: 1px solid var(--fbx-border); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--fbx-text-subtle); flex: none; }
.fbx-doced__tbody { flex: 1; min-height: 0; overflow: auto; }
.fbx-doced__trow { min-height: 44px; border-bottom: 1px solid var(--fbx-border); border-left: 3px solid transparent; }
.fbx-doced__trow--selected { background: var(--fbx-surface-sunken); }
.fbx-doced__trow--proposed { background: color-mix(in srgb, var(--accent-color) 7%, #fff); border-left-color: var(--accent-color); }
.fbx-doced__check { width: 18px; height: 18px; padding: 0; border-radius: 3px; border: 1px solid var(--fbx-border-strong); background: transparent; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; }
.fbx-doced__check > .fas { display: none; }
.fbx-doced__check--on { background: var(--primary-color); border-color: var(--primary-color); }
.fbx-doced__check--on > .fas { display: inline; }
.fbx-doced__pagelink { border: none; background: none; color: var(--primary-light-color); font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: left; padding: 0; min-height: 32px; }
.fbx-doced__pagelink:hover { text-decoration: underline; }
.fbx-doced__ttype { font-size: 12.5px; color: var(--fbx-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbx-doced__tdesc { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbx-doced__trwys { display: flex; gap: 5px; flex-wrap: wrap; }
.fbx-doced__trwys .fbx-doced__rwy { height: 21px; padding: 0 9px; font-size: 11px; }
.fbx-doced__tedit { border: none; background: none; color: var(--fbx-text-subtle); cursor: pointer; font-size: 11px; min-height: 32px; min-width: 30px; }
.fbx-doced__tedit:hover { color: var(--primary-color); }
.fbx-doced__tempty { padding: 40px 20px; text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.fbx-doced__tempty > .fas { font-size: 22px; color: var(--silver-mid); }
.fbx-doced__temptytitle { font-size: 14px; font-weight: 600; }
.fbx-doced__temptyhint { font-size: 12.5px; color: var(--fbx-text-muted); max-width: 340px; line-height: 1.5; }
.fbx-doced__tadd { display: flex; align-items: center; gap: 10px; padding: 0 12px; min-height: 44px; width: 100%; border: none; background: none; color: var(--primary-light-color); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; }
.fbx-doced__tadd > .fas { font-size: 11px; }
.fbx-doced__taddpage { font-size: 11px; color: var(--fbx-text-subtle); font-weight: 400; }

/* bookmark sheet */
.fbx-doced__sheetpanel { max-width: 460px; }
.fbx-doced__sheetpage { font-size: 11.5px; color: var(--fbx-text-subtle); white-space: nowrap; }
.fbx-doced__sheetbody { gap: 13px; max-height: 60vh; }
.fbx-doced__field { display: flex; flex-direction: column; gap: 5px; }
.fbx-doced__fieldlabel { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--fbx-text-subtle); }
.fbx-doced__fieldhint { font-size: 11.5px; color: var(--fbx-text-subtle); line-height: 1.45; }
.fbx-doced__typechips { display: flex; flex-wrap: wrap; gap: 5px; }
.fbx-doced__typechip { display: inline-flex; align-items: center; min-height: 30px; padding: 0 11px; border-radius: var(--fbx-radius-sm); border: 1px solid var(--fbx-border-strong); background: transparent; color: var(--fbx-text-muted); font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.fbx-doced__typechip--on { background: var(--primary-color); border-color: var(--primary-color); color: #fff; font-weight: 600; }
.fbx-doced__descinput { min-height: 42px; border: 1.5px solid var(--primary-color); font-size: 14px; font-weight: 600; }
.fbx-doced__rwychip { min-height: 40px; padding: 0 18px; font-size: 13px; font-weight: 700; }
.fbx-doced__pagepick { display: flex; align-items: center; gap: 8px; }
.fbx-doced__pagepickbtn { width: 40px; min-height: 40px; padding: 0; justify-content: center; color: var(--fbx-text-muted); }
.fbx-doced__pagepickval { font-size: 15px; font-weight: 700; min-width: 60px; text-align: center; }
.fbx-doced__sheetfoot { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--fbx-border); flex: none; }
.fbx-doced__sheetfoot .fbx-btn { min-height: 44px; }
.fbx-doced__sheetdelete { width: 44px; padding: 0; justify-content: center; }

/* tablet */
@media (max-width: 1279.98px) {
    .fbx-doced__inspector { width: 300px; }
    .fbx-doced__rail { width: 96px; }
    .fbx-doced__tablewrap--chart { --fbx-doced-cols: 28px 44px 110px 1fr 120px 28px; }
}
/* phone: viewer and inspector stacked, the editor scrolls with the page */
@media (max-width: 767.98px) {
    .fbx-doced { flex: none; }
    .fbx-doced__head { flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
    .fbx-doced__titles { flex: 1; min-width: 0; }
    .fbx-doced__panes { flex-direction: column; }
    .fbx-doced__viewer { height: 380px; flex: none; }
    .fbx-doced__inspector { width: auto; border-left: none; border-top: 1px solid var(--fbx-border); }
    .fbx-doced__inspbody { overflow: visible; }
    .fbx-doced__bmbtn { width: 40px; height: 40px; }
    .fbx-doced__tablewrap { --fbx-doced-cols: 24px 32px 1fr 24px; }
    .fbx-doced__tablewrap--chart { --fbx-doced-cols: 24px 32px 1fr 58px 24px; }
    .fbx-doced__tbody { overflow: visible; }
    .fbx-doced__sheetmodal { align-items: flex-end; padding: 0; }
    .fbx-doced__sheetpanel { max-width: none; border-radius: 16px 16px 0 0; }
}

/* == 6. Dashboard ========================================================= */

/* The dashboard measures its own width (container queries), so the breakpoints follow the
   content area and not the viewport (see the breakpoint block at the end of this section). */
.fbx-dash { container-type: inline-size; container-name: dash; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fbx-dash__spacer { flex: 1; min-width: 8px; }
.fbx-dash__card { background: var(--fbx-surface); border: 1px solid var(--fbx-border); border-radius: var(--fbx-radius); }
.fbx-dash__card-title { font-size: 15px; font-weight: 600; }
.fbx-dash__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--fbx-text-subtle); }
.fbx-dash__eyebrow--dark { color: var(--fbx-text-on-dark-muted); }
.fbx-dash__mono { font-family: var(--fbx-font-mono); }
.fbx-dash__strong { font-weight: 700; }
.fbx-dash__muted { color: var(--fbx-text-muted); }
.fbx-dash__subtle { color: var(--fbx-text-subtle); }
.fbx-dash__small { font-size: 12.5px; }
.fbx-dash__tiny { font-size: 11.5px; }
.fbx-dash__row-title { font-size: 13.5px; font-weight: 600; }
.fbx-dash__row-body { font-size: 12.5px; color: var(--fbx-text-muted); line-height: 1.5; }
.fbx-dash__band-title { font-size: 14px; font-weight: 600; }
.fbx-dash__link {
    border: none; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600;
    color: var(--primary-light-color); cursor: pointer; white-space: nowrap;
}
.fbx-dash__link:hover { color: var(--primary-color); text-decoration: underline; }
.fbx-dash__band-action { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.fbx-dash__btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.fbx-dash__btn-md { height: 34px; padding: 0 14px; font-size: 13px; }
.fbx-dash__btn-xs { height: 26px; padding: 0 10px; font-size: 12px; border-radius: var(--fbx-radius-sm); }
.fbx-dash__btn-xs:hover:not(:disabled) { border-color: var(--primary-color); color: var(--primary-color); }
.fbx-dash__action { height: 36px; padding: 0 14px; white-space: nowrap; }
.fbx-dash__grow { flex: 1; justify-content: center; }
.fbx-dash__count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 4px; margin-left: 2px;
    border-radius: var(--fbx-radius-pill); background: var(--accent-color); color: #fff; font-family: var(--fbx-font-mono); font-size: 10.5px; font-weight: 700;
}
.fbx-dash__icontile {
    width: 34px; height: 34px; flex: none; border-radius: var(--fbx-radius-sm); display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.fbx-dash__icontile--soft { width: 36px; height: 36px; background: var(--primary-lighter-color); color: var(--primary-color); }
.fbx-dash__icontile--ok { background: var(--fbx-status-ok); color: #fff; }

/* tones: chips, pills, band items */
.fbx-dash__chip, .fbx-dash__pill {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; border-radius: var(--fbx-radius-pill); font-weight: 700;
}
.fbx-dash__chip { height: 24px; padding: 0 10px; font-size: 12px; }
.fbx-dash__pill { height: 22px; padding: 0 9px; font-size: 11.5px; }
.fbx-dash__chip > .fas, .fbx-dash__pill > .fas { font-size: 9px; }
.fbx-dash__chip.fbx-dash__tone--ok, .fbx-dash__pill.fbx-dash__tone--ok { background: var(--fbx-status-ok-bg); color: var(--fbx-status-ok); }
.fbx-dash__chip.fbx-dash__tone--warn, .fbx-dash__pill.fbx-dash__tone--warn { background: var(--fbx-status-warn-bg); color: var(--fbx-status-warn); }
.fbx-dash__chip.fbx-dash__tone--danger, .fbx-dash__pill.fbx-dash__tone--danger { background: var(--fbx-status-danger-bg); color: var(--fbx-status-danger); }
.fbx-dash__chip.fbx-dash__tone--neutral, .fbx-dash__pill.fbx-dash__tone--neutral { background: var(--fbx-surface-sunken); color: var(--fbx-text-muted); }

/* meters */
.fbx-dash__meters { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fbx-dash__meter-row { display: flex; align-items: center; gap: 10px; }
.fbx-dash__meter-label { width: 88px; flex: none; font-size: 11.5px; color: var(--fbx-text-muted); }
.fbx-dash__meter { flex: 1; min-width: 20px; height: 6px; border-radius: 3px; background: var(--fbx-surface-sunken); overflow: hidden; }
.fbx-dash__meter-fill { height: 100%; background: var(--fbx-status-ok); }
.fbx-dash__meter-fill--primary { background: var(--primary-color); }
.fbx-dash__meter-fill--ok { background: var(--fbx-status-ok); }
.fbx-dash__meter-fill--warn { background: var(--fbx-status-warn); }
.fbx-dash__meter-fill--danger { background: var(--fbx-status-danger); }
.fbx-dash__meter-fill--off { background: var(--fbx-surface-sunken); }
.fbx-dash__meter-value { width: 106px; flex: none; white-space: nowrap; text-align: right; font-family: var(--fbx-font-mono); font-size: 12px; font-weight: 600; color: var(--fbx-text); }
.fbx-dash__meter-value--warn { color: var(--fbx-status-warn); }
.fbx-dash__meter-value--danger { color: var(--fbx-status-danger); }
.fbx-dash__meter-value--off { color: var(--fbx-text-subtle); }
.fbx-dash__ask { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; color: var(--fbx-text-muted); line-height: 1.5; }
.fbx-dash__ask > .fas { font-size: 12px; color: var(--primary-light-color); flex: none; margin-top: 2px; }

/* -- header ---------------------------------------------------------------- */
.fbx-dash__head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.fbx-dash__title { min-width: 0; }
.fbx-dash__greeting { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.fbx-dash__subline { display: flex; align-items: center; gap: 9px; margin-top: 5px; font-size: 13.5px; color: var(--fbx-text-muted); flex-wrap: wrap; }
.fbx-dash__wxlead { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.fbx-dash__wxlead > .fas { font-size: 12px; }
.fbx-dash__dot { color: var(--silver-mid); }
.fbx-dash__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fbx-dash__clock { text-align: right; padding-bottom: 2px; }
.fbx-dash__clock-date { font-family: var(--fbx-font-mono); font-size: 13px; font-weight: 600; white-space: nowrap; }
.fbx-dash__clock-sub { font-family: var(--fbx-font-mono); font-size: 11.5px; color: var(--fbx-text-subtle); white-space: nowrap; }

/* -- setup checklist --------------------------------------------------------- */
.fbx-dash__setup { padding: 16px 18px 8px; }
.fbx-dash__setup-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.fbx-dash__setup-meter { flex: 1; max-width: 200px; min-width: 70px; }
.fbx-dash__setup-row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--fbx-border); flex-wrap: wrap; }
.fbx-dash__setup-text { flex: 1; min-width: 170px; }
.fbx-dash__setup-text .fbx-dash__row-body { margin-top: 2px; }
.fbx-dash__setup-actions { display: flex; gap: 8px; flex: none; flex-wrap: wrap; }

/* -- attention band / calm ----------------------------------------------------- */
.fbx-dash__band { display: flex; align-items: stretch; flex-wrap: wrap; overflow: hidden; }
.fbx-dash__band-item { display: flex; align-items: center; gap: 12px; padding: 12px 18px; flex: 0 1 auto; min-width: 260px; }
.fbx-dash__band-item + .fbx-dash__band-item { border-left: 1px solid var(--fbx-border); }
.fbx-dash__band-text { min-width: 0; }
.fbx-dash__band-item.fbx-dash__tone--danger { background: var(--fbx-status-danger-bg); }
.fbx-dash__band-item.fbx-dash__tone--danger .fbx-dash__band-icon { background: var(--fbx-status-danger); color: #fff; }
.fbx-dash__band-item.fbx-dash__tone--warn { background: var(--fbx-status-warn-bg); }
.fbx-dash__band-item.fbx-dash__tone--warn .fbx-dash__band-icon { background: var(--fbx-status-warn); color: #fff; }
.fbx-dash__band-item.fbx-dash__tone--info .fbx-dash__band-icon { background: var(--primary-lighter-color); color: var(--primary-color); }
.fbx-dash__band-item.fbx-dash__tone--quiet .fbx-dash__band-icon, .fbx-dash__band-item.fbx-dash__tone--neutral .fbx-dash__band-icon { background: var(--fbx-surface-sunken); color: var(--fbx-text-muted); }
.fbx-dash__band-item .fbx-dash__band-action { margin-left: 6px; }
.fbx-dash__band-clear { display: flex; align-items: center; gap: 9px; padding: 12px 18px; font-size: 12.5px; color: var(--fbx-text-muted); min-width: 0; }
.fbx-dash__band-clear > .fas { font-size: 12px; color: var(--fbx-status-ok); flex: none; }
.fbx-dash__calm { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--fbx-status-ok-bg); border: 1px solid var(--fbx-border); border-radius: var(--fbx-radius); }

/* -- split ------------------------------------------------------------------- */
.fbx-dash__split { display: flex; gap: 14px; align-items: flex-start; }
.fbx-dash__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.fbx-dash__side { width: 352px; flex: none; display: flex; flex-direction: column; gap: 14px; }
.fbx-dash__plain { padding: 15px 16px; display: flex; flex-direction: column; gap: 10px; }

/* -- ready to fly ------------------------------------------------------------ */
.fbx-dash__rtf { padding: 16px 18px 6px; }
.fbx-dash__rtf-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
/* the status chip sits under the row title, so a long chip never runs into the meters */
.fbx-dash__rtf-row {
    display: grid; grid-template-columns: 180px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 20px; row-gap: 8px;
    align-items: start; padding: 12px 0; border-top: 1px solid var(--fbx-border);
}
.fbx-dash__rtf-row > .fbx-dash__meters { grid-column: 2; grid-row: 1 / span 2; }
.fbx-dash__rtf-chip { grid-column: 1; grid-row: 2; text-align: left; }

/* -- chart ---------------------------------------------------------------------- */
.fbx-dash__chart { padding: 16px 18px 14px; }
.fbx-dash__chart-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.fbx-dash__seg { display: flex; background: var(--fbx-surface-sunken); border: 1px solid var(--fbx-border); border-radius: var(--fbx-radius-sm); padding: 2px; }
.fbx-dash__seg-item {
    padding: 0 10px; height: 24px; display: inline-flex; align-items: center; font: inherit; font-size: 12px; border: none; border-radius: 3px;
    background: transparent; color: var(--fbx-text-muted); cursor: pointer;
}
.fbx-dash__seg-item--on { font-weight: 600; background: var(--fbx-surface); box-shadow: var(--fbx-shadow-sm); color: var(--fbx-text); }
.fbx-dash__chart-body {
    container-type: inline-size; height: 120px; display: flex; align-items: flex-end; gap: 6px; position: relative; padding-bottom: 20px; border-bottom: 1px solid var(--fbx-border);
}
.fbx-dash__avg { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--silver-mid); display: flex; justify-content: flex-end; pointer-events: none; }
.fbx-dash__avg > span { font-family: var(--fbx-font-mono); font-size: 10px; color: var(--fbx-text-subtle); background: var(--fbx-surface); padding: 0 4px; transform: translateY(-50%); }
.fbx-dash__bar { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; position: relative; }
.fbx-dash__bar-value, .fbx-dash__bar-label { font-family: var(--fbx-font-mono); font-size: 11px; color: var(--fbx-text-muted); white-space: nowrap; }
.fbx-dash__bar-label { position: absolute; bottom: -20px; font-size: 10.5px; }
.fbx-dash__bar--current .fbx-dash__bar-value, .fbx-dash__bar--current .fbx-dash__bar-label { font-weight: 700; color: var(--primary-color); }
.fbx-dash__bar-fill { width: 100%; border-radius: 2px 2px 0 0; }
.fbx-dash__bar-fill:hover { filter: brightness(.94); }
/* dense charts (13+ seasons) drop every second label when the columns get narrower than ~26px */
@container (max-width: 400px) {
    .fbx-dash__chart-body--dense .fbx-dash__bar--thin .fbx-dash__bar-value,
    .fbx-dash__chart-body--dense .fbx-dash__bar--thin .fbx-dash__bar-label { visibility: hidden; }
    .fbx-dash__chart-body--dense .fbx-dash__avg { visibility: hidden; }
}
.fbx-dash__chart-foot { display: flex; align-items: center; gap: 20px; padding-top: 12px; flex-wrap: wrap; }
.fbx-dash__figure { font-family: var(--fbx-font-mono); font-size: 16px; font-weight: 700; }
.fbx-dash__figure-label { font-size: 12px; color: var(--fbx-text-muted); margin-left: 7px; }

/* -- how FlightBox fits together ------------------------------------------------ */
.fbx-dash__fit { padding: 16px 18px; }
.fbx-dash__fit .fbx-dash__card-title { margin-bottom: 4px; }
.fbx-dash__fit-sub { margin-bottom: 14px; }
.fbx-dash__fit-grid { display: grid; grid-template-columns: 1fr 24px 1fr 24px 1fr; align-items: stretch; }
.fbx-dash__fit-card { border: 1px solid var(--fbx-border); border-radius: var(--fbx-radius); padding: 13px 15px; display: flex; flex-direction: column; gap: 6px; }
.fbx-dash__fit-card--accent { border-color: var(--primary-lighter-color); background: color-mix(in srgb, var(--primary-lighter-color) 12%, #fff); }
.fbx-dash__fit-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fbx-dash__fit-head > .fas { font-size: 13px; color: var(--primary-color); }
.fbx-dash__fit-arrow { display: flex; align-items: center; justify-content: center; }
.fbx-dash__fit-arrow > .fas { font-size: 11px; color: var(--silver-mid); }
.fbx-dash__tag { font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 2px 6px; border-radius: var(--fbx-radius-sm); background: var(--fbx-surface-sunken); color: var(--fbx-text-muted); }
.fbx-dash__tag--dark { background: var(--primary-color); color: #fff; }

/* -- weather -------------------------------------------------------------------- */
.fbx-dash__wx { overflow: hidden; }
.fbx-dash__wx--dashed { border-style: dashed; border-color: var(--fbx-border-strong); }
.fbx-dash__wx-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px 10px; }
.fbx-dash__wx-head > .fas { font-size: 13px; }
.fbx-dash__wx-homeicon { color: var(--primary-color); }
.fbx-dash__wx-icao { font-family: var(--fbx-font-mono); font-size: 20px; font-weight: 700; line-height: 1; }
.fbx-dash__wx-name { font-size: 12.5px; color: var(--fbx-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fbx-dash__wxcat {
    display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--fbx-radius-pill); flex: none;
    font-family: var(--fbx-font-mono); font-size: 11.5px; font-weight: 700; color: #fff;
}
.fbx-dash__wxcat.fbx-dash__wxcat--vfr { background: var(--weather-vfr); }
.fbx-dash__wxcat.fbx-dash__wxcat--mvfr { background: var(--weather-mvfr); }
.fbx-dash__wxcat.fbx-dash__wxcat--ifr { background: var(--weather-ifr); }
.fbx-dash__wxcat.fbx-dash__wxcat--lifr { background: var(--weather-lifr); }
.fbx-dash__wxcat.fbx-dash__wxcat--unknown { background: var(--fbx-text-muted); }
.fbx-dash__wxcat.fbx-dash__wxcat--none { background: var(--fbx-status-neutral-bg); color: var(--fbx-status-neutral); }
/* the header lead line uses the category as text colour */
.fbx-dash__wxlead.fbx-dash__wxcat--vfr { color: var(--weather-vfr); }
.fbx-dash__wxlead.fbx-dash__wxcat--mvfr { color: var(--weather-mvfr); }
.fbx-dash__wxlead.fbx-dash__wxcat--ifr { color: var(--weather-ifr); }
.fbx-dash__wxlead.fbx-dash__wxcat--lifr { color: var(--weather-lifr); }
.fbx-dash__wxlead.fbx-dash__wxcat--unknown { color: var(--fbx-text-muted); }
.fbx-dash__wx-substitute { padding: 0 16px 9px; font-size: 11.5px; color: var(--fbx-text-subtle); }
.fbx-dash__wx-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--fbx-border); border-top: 1px solid var(--fbx-border); border-bottom: 1px solid var(--fbx-border); }
.fbx-dash__wx-cell { background: var(--fbx-surface); padding: 9px 6px; text-align: center; }
.fbx-dash__wx-cell-value { display: flex; align-items: center; justify-content: center; gap: 4px; font-family: var(--fbx-font-mono); font-size: 15px; font-weight: 700; line-height: 1.1; }
.fbx-dash__wx-arrow { font-size: 10px; color: var(--primary-light-color); }
.fbx-dash__wx-cell-label { font-size: 9.5px; letter-spacing: .05em; color: var(--fbx-text-subtle); margin-top: 3px; white-space: nowrap; }
.fbx-dash__wx-body { padding: 10px 16px; display: flex; flex-direction: column; gap: 8px; }
.fbx-dash__wx-body--top { padding: 12px 16px; border-top: 1px solid var(--fbx-border); gap: 10px; }
.fbx-dash__wx-plain { padding: 15px 16px; display: flex; flex-direction: column; gap: 10px; }
.fbx-dash__wx-line { display: flex; align-items: center; gap: 9px; }
.fbx-dash__wx-line > .fas { font-size: 13px; }
.fbx-dash__wx-note { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.45; }
.fbx-dash__wx-note > .fas { font-size: 11px; margin-top: 2px; flex: none; }
.fbx-dash__wx-note-icon { color: var(--weather-mvfr); }
.fbx-dash__wx-note-icon--info { color: var(--primary-light-color); }
.fbx-dash__wx-facts { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--fbx-text-muted); flex-wrap: wrap; }
.fbx-dash__wx-facts > span > .fas { font-size: 10px; margin-right: 5px; color: var(--fbx-text-subtle); }
.fbx-dash__sun { display: grid; grid-template-columns: auto auto auto minmax(24px, 1fr) auto auto; column-gap: 8px; row-gap: 2px; align-items: center; }
.fbx-dash__sun > .fas { font-size: 10px; color: var(--fbx-text-subtle); }
.fbx-dash__sun-time { font-family: var(--fbx-font-mono); font-size: 12px; font-weight: 700; text-align: center; }
.fbx-dash__sun-time--twilight { font-weight: 400; color: var(--fbx-text-muted); }
.fbx-dash__sun-label { font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--fbx-text-subtle); text-align: center; white-space: nowrap; }
.fbx-dash__wx-raw { padding-top: 8px; border-top: 1px solid var(--fbx-border); display: flex; align-items: baseline; gap: 8px; }
.fbx-dash__wx-rawtext { font-family: var(--fbx-font-mono); font-size: 11px; color: var(--fbx-text-muted); line-height: 1.5; word-break: break-word; flex: 1; }
.fbx-dash__wx-source { font-family: var(--fbx-font-mono); font-size: 10.5px; color: var(--fbx-text-subtle); white-space: nowrap; }
.fbx-dash__wx-box { display: flex; align-items: center; gap: 11px; padding: 9px 11px; background: var(--fbx-surface-sunken); border-radius: var(--fbx-radius-sm); }
.fbx-dash__wx-box-text { flex: 1; min-width: 0; line-height: 1.45; }
.fbx-dash__wx-box .fbx-btn { flex: none; }
.fbx-dash__wx-links { display: flex; flex-direction: column; gap: 7px; }
.fbx-dash__wx-link {
    display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid var(--fbx-border); border-radius: var(--fbx-radius-sm);
    background: none; font: inherit; color: var(--fbx-text); text-align: left; cursor: pointer; text-decoration: none;
}
.fbx-root .fbx-dash__wx-link, .fbx-root .fbx-dash__wx-link:hover { color: var(--fbx-text); text-decoration: none; }
.fbx-dash__wx-link:hover { border-color: var(--primary-color); }
.fbx-dash__wx-link > .fas { font-size: 12px; }
.fbx-dash__wx-link > .fas:last-child { font-size: 10px; }
.fbx-dash__wx-link > span { font-size: 12.5px; font-weight: 600; flex: 1; }
.fbx-dash__wx .fbx-field__label:empty { display: none; }
.fbx-dash__wx .fbx-icao__control { border-radius: var(--fbx-radius); }

/* -- next flight plan ----------------------------------------------------------- */
.fbx-dash__plan { padding: 13px 16px; }
.fbx-dash__plan.fbx-dash__plain { padding: 15px 16px; }
.fbx-dash__plan-head { margin-bottom: 9px; }
.fbx-dash__plan-route { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.fbx-dash__plan-icao { font-family: var(--fbx-font-mono); font-size: 17px; font-weight: 700; }
.fbx-dash__plan-line { flex: 1; height: 1px; background: var(--fbx-border-strong); position: relative; }
.fbx-dash__plan-line > .fas { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--primary-light-color); background: var(--fbx-surface); padding: 0 4px; }
.fbx-dash__plan-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--fbx-text-muted); flex-wrap: wrap; }
.fbx-dash__plan-meta .fbx-dash__strong { color: var(--fbx-text); }
.fbx-dash__rules { font-weight: 700; }
.fbx-dash__rules--vfr { color: var(--flightrules-vfr); }
.fbx-dash__rules--ifr { color: var(--accent-dark-color); }
.fbx-dash__plan-actions { display: flex; gap: 8px; }

/* -- last flights ------------------------------------------------------------------ */
.fbx-dash__flights { padding: 13px 16px; }
.fbx-dash__flights-head { margin-bottom: 10px; }
.fbx-dash__flights-list { display: flex; flex-direction: column; }
.fbx-dash__flight {
    display: flex; align-items: center; gap: 10px; padding: 8px 0; border: none; border-top: 1px solid var(--fbx-border); background: none;
    font: inherit; color: var(--fbx-text); text-align: left; cursor: pointer; width: 100%;
}
.fbx-dash__flight:hover { background: var(--fbx-surface-sunken); }
.fbx-dash__flight-date { font-family: var(--fbx-font-mono); font-size: 12px; color: var(--fbx-text-muted); width: 52px; flex: none; }
.fbx-dash__flight-route { font-family: var(--fbx-font-mono); font-size: 12.5px; font-weight: 600; flex: 1; min-width: 0; }
.fbx-dash__flight-time { font-family: var(--fbx-font-mono); font-size: 12px; color: var(--fbx-text-muted); }
.fbx-dash__role { height: 19px; padding: 0 7px; font-size: 10.5px; }

/* -- all-time band ----------------------------------------------------------------- */
.fbx-dash__alltime { display: flex; align-items: stretch; background: var(--sidebar-color); border-radius: var(--fbx-radius); color: var(--fbx-text-on-dark); overflow: hidden; }
.fbx-dash__alltime-label { padding: 14px 20px; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.fbx-dash__alltime-sub { font-size: 12.5px; color: var(--fbx-text-on-dark-muted); }
.fbx-dash__alltime-grid { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); }
.fbx-dash__alltime-stat { padding: 14px 20px; border-left: 1px solid rgba(255, 255, 255, .12); min-width: 0; }
.fbx-dash__alltime-figure { font-family: var(--fbx-font-mono); font-size: 26px; font-weight: 700; line-height: 1.1; }
.fbx-dash__alltime-caption { font-size: 12px; color: var(--fbx-text-on-dark-muted); margin-top: 3px; }
.fbx-dash__phone-only { display: none; }

/* -- breakpoints ---------------------------------------------------------------------- */
/* Thresholds are content widths (the shell's sidebar is a column only >= 1280px viewport):
   desktop >= 960px (two columns), tabletL >= 840px (one column), tabletP/"stacked" >= 600px, phone below. */
@container dash (max-width: 959.98px) {
    .fbx-dash__split { flex-direction: column; align-items: stretch; }
    .fbx-dash__side { width: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
    .fbx-dash__band { flex-direction: column; flex-wrap: nowrap; }
    .fbx-dash__band-item + .fbx-dash__band-item { border-left: none; border-top: 1px solid var(--fbx-border); }
}
/* tabletL only: the readiness rows stack (see the phone block) */
@container dash (min-width: 840px) and (max-width: 959.98px) {
    .fbx-dash__rtf-row { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 11px 0; }
    .fbx-dash__rtf-chip { text-align: right; }
}
/* tabletP and below ("stacked"): no clock, no all-time label, no "fits together" card */
@container dash (max-width: 839.98px) {
    .fbx-dash__clock, .fbx-dash__stacked-hide { display: none !important; }
    .fbx-dash__alltime-stat:first-child { border-left: none; }
}
/* phone */
@container dash (max-width: 599.98px) {
    .fbx-dash__head { flex-direction: column; align-items: stretch; gap: 10px; }
    .fbx-dash__greeting { font-size: 21px; }
    .fbx-dash__head .fbx-dash__spacer { display: none; }
    .fbx-dash__phone-hide { display: none !important; }
    .fbx-dash__phone-only { display: inline; }
    .fbx-dash__rtf-row { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 11px 0; }
    .fbx-dash__rtf-chip { text-align: right; }
    .fbx-dash__alltime-grid { grid-template-columns: repeat(3, 1fr); }
    .fbx-dash__alltime-stat { padding: 12px 14px; }
    .fbx-dash__alltime-figure { font-size: 18px; }
    .fbx-dash__band-item { min-width: 0; }
    .fbx-dash__side { grid-template-columns: 1fr; }
}

/* == 7. Information pages (imprint / legal texts) ========================== */

/* Design "Legal Pages". The page fills the main area; the document card and the rail scroll
   independently, so the page head and the tab bar stay visible while reading.
   Breakpoints follow the design (viewport widths): the rail needs >= 1120px, below 900px the page
   switches to the compact ("narrow") typography of the tablet-portrait / phone frames. */

.fbx-legal { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.fbx-legal__spacer { flex: 1; min-width: 0; }

/* -- page head ------------------------------------------------------------- */
.fbx-legal__head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.fbx-legal__titlebox { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fbx-legal__eyebrow {
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--fbx-text-subtle);
}
.fbx-legal__title { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
.fbx-legal__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.fbx-legal__asof {
    display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px;
    border-radius: var(--fbx-radius-pill); background: var(--fbx-surface); border: 1px solid var(--fbx-border);
    font-size: 12px; color: var(--fbx-text-muted); white-space: nowrap;
}
.fbx-legal__asof > .fas { font-size: 11px; }

/* -- tab bar (legal texts) -------------------------------------------------- */
.fbx-legal__tabs {
    display: flex; gap: 4px; border-bottom: 1px solid var(--fbx-border);
    margin-bottom: -2px; overflow-x: auto; scrollbar-width: none;
}
.fbx-legal__tabs::-webkit-scrollbar { display: none; }
.fbx-legal__tab {
    display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px;
    border: none; border-bottom: 2px solid transparent; background: none; margin-bottom: -1px;
    font-size: 14px; font-weight: 400; color: var(--fbx-text-muted); white-space: nowrap; cursor: pointer;
}
.fbx-legal__tab > .fas { font-size: 12px; }
.fbx-legal__tab:hover { color: var(--fbx-text); }
.fbx-legal__tab--on { font-weight: 600; color: var(--fbx-text); border-bottom-color: var(--primary-color); }

/* -- body: document card + rail --------------------------------------------- */
.fbx-legal__body { flex: 1; min-height: 0; min-width: 0; display: flex; gap: 16px; align-items: stretch; }
.fbx-legal__doc {
    flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; position: relative;
    background: var(--fbx-surface); border: 1px solid var(--fbx-border); border-radius: var(--fbx-radius);
}
.fbx-legal__doc::-webkit-scrollbar { width: 9px; }
.fbx-legal__doc::-webkit-scrollbar-thumb { background: var(--silver-mid); border-radius: 5px; }
.fbx-legal__doc::-webkit-scrollbar-track { background: transparent; }
.fbx-legal__page { padding: 30px 34px; max-width: 860px; margin: 0 auto; }

.fbx-legal__dochead {
    display: flex; flex-direction: column; gap: 6px;
    padding-bottom: 20px; margin-bottom: 26px; border-bottom: 1px solid var(--fbx-border);
}
.fbx-legal__doctitle { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.fbx-legal__docdate { font-size: 12.5px; color: var(--fbx-text-muted); }

/* -- chapters --------------------------------------------------------------- */
.fbx-legal__section { margin-bottom: 30px; scroll-margin-top: 16px; }
.fbx-legal__sechead { display: flex; align-items: baseline; gap: 11px; margin-bottom: 11px; }
.fbx-legal__secnum { font-size: 12.5px; font-weight: 500; color: var(--primary-light-color); flex: none; min-width: 21px; }
.fbx-legal__sectitle { margin: 0; font-size: 17.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.fbx-legal__text { margin-left: 32px; max-width: 70ch; }
.fbx-legal__intro { margin-left: 0; margin-bottom: 26px; }
.fbx-legal__text p { margin: 0 0 13px; font-size: 14.5px; line-height: 1.72; color: var(--fbx-text); text-wrap: pretty; }
.fbx-legal__text p:last-child { margin-bottom: 0; }
.fbx-legal__text h3, .fbx-legal__text h4 {
    margin: 20px 0 9px; font-size: 15px; font-weight: 600; letter-spacing: -.005em; line-height: 1.35;
}
.fbx-legal__text ul, .fbx-legal__text ol { margin: 0 0 13px; padding-left: 20px; }
.fbx-legal__text li { font-size: 14.5px; line-height: 1.72; margin-bottom: 4px; }
.fbx-legal__text strong { font-weight: 600; }
.fbx-legal__text code { font-family: var(--fbx-font-mono); font-size: 13px; }
.fbx-legal__text table { border-collapse: collapse; margin: 0 0 13px; font-size: 14px; }
.fbx-legal__text th, .fbx-legal__text td { border: 1px solid var(--fbx-border); padding: 6px 10px; text-align: left; }
/* licence texts of the open-source document (here and in the sign-in card): keep their line layout, wrap on
   narrow screens, scroll when long */
.fbx-legal__text pre, .fbx-signin__legaltext pre {
    margin: 0 0 13px; padding: 12px 14px; max-height: 360px; overflow: auto;
    background: var(--fbx-surface-sunken); border-radius: var(--fbx-radius-sm);
    white-space: pre-wrap; overflow-wrap: anywhere;
}
.fbx-legal__text pre code, .fbx-signin__legaltext pre code {
    font-family: var(--fbx-font-mono); font-size: 12px; line-height: 1.5; color: var(--fbx-text-muted);
}

/* address / contact blocks of the documents */
.fbx-legal__note {
    padding: 12px 16px; margin: 0 0 13px;
    border-left: 2px solid var(--primary-lighter-color); background: var(--fbx-surface-sunken);
    border-radius: 0 var(--fbx-radius-sm) var(--fbx-radius-sm) 0;
}
.fbx-legal__note p { margin: 0; font-size: 14px; line-height: 1.55; }

/* -- provider card (imprint) ------------------------------------------------- */
.fbx-legal__provider {
    display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap;
    padding: 18px 20px; margin-bottom: 30px;
    background: var(--fbx-surface-sunken); border: 1px solid var(--fbx-border); border-radius: var(--fbx-radius);
}
.fbx-legal__providerlogo { width: 46px; height: 46px; flex: none; }
.fbx-legal__providerbox { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fbx-legal__label {
    font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--fbx-text-subtle); margin-bottom: 3px;
}
.fbx-legal__providername { font-size: 16px; font-weight: 600; }
.fbx-legal__providerline { font-size: 14px; color: var(--fbx-text-muted); line-height: 1.5; }
.fbx-legal__providermail { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; }
.fbx-legal__providermail > .fas { font-size: 12px; }

/* -- document footer ---------------------------------------------------------- */
.fbx-legal__foot {
    display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap;
    padding-top: 18px; border-top: 1px solid var(--fbx-border);
}
.fbx-legal__footnote { font-size: 13px; color: var(--fbx-text-muted); }
.fbx-legal__totop {
    display: flex; align-items: center; gap: 8px; border: none; background: none; padding: 0;
    font-size: 13px; color: var(--primary-light-color); white-space: nowrap; cursor: pointer;
}
.fbx-legal__totop:hover { color: var(--primary-color); }
.fbx-legal__totop > .fas { font-size: 11px; }

.fbx-legal__error { display: flex; flex-direction: column; gap: 6px; color: var(--fbx-status-warn); font-size: 14px; }
.fbx-legal__errordetail { color: var(--fbx-text-muted); font-size: 12px; }

/* -- rail: table of contents + related ----------------------------------------- */
.fbx-legal__rail {
    flex: none; width: 262px; display: flex; flex-direction: column; gap: 12px;
    overflow-y: auto; overflow-x: hidden;
}
.fbx-legal__toc {
    flex: none; background: var(--fbx-surface); border: 1px solid var(--fbx-border);
    border-radius: var(--fbx-radius); padding: 12px 10px;
}
.fbx-legal__raillabel {
    padding: 2px 10px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--fbx-text-subtle);
}
.fbx-legal__raillabel--aside { padding: 0 0 2px; }
.fbx-legal__toclist { display: flex; flex-direction: column; gap: 1px; }
.fbx-legal__tocitem {
    display: flex; align-items: baseline; gap: 9px; width: 100%; padding: 6px 10px;
    border: none; background: transparent; border-radius: var(--fbx-radius-sm);
    font-size: 13px; line-height: 1.35; text-align: left; color: var(--fbx-text-muted); cursor: pointer;
}
.fbx-legal__tocitem:hover { background: var(--fbx-surface-sunken); }
.fbx-legal__tocitem--on {
    background: var(--primary-lighter-color); color: var(--primary-darker-color); font-weight: 600;
}
.fbx-legal__tocnum { font-size: 11px; flex: none; opacity: .8; }
.fbx-legal__toctitle { min-width: 0; }

.fbx-legal__aside {
    flex: none; display: flex; flex-direction: column; gap: 10px;
    background: var(--fbx-surface); border: 1px solid var(--fbx-border);
    border-radius: var(--fbx-radius); padding: 14px 16px;
}
.fbx-legal__asidelink {
    display: flex; align-items: center; gap: 10px; padding: 0; border: none; background: none;
    font-size: 13.5px; text-align: left; color: var(--primary-light-color); cursor: pointer;
}
.fbx-legal__asidelink:hover { color: var(--primary-color); text-decoration: underline; }
.fbx-legal__asidelink > .fas { font-size: 12px; width: 14px; color: var(--fbx-text-subtle); flex: none; }
.fbx-legal__asidesep { height: 1px; background: var(--fbx-border); }
.fbx-legal__asidecontact { display: flex; flex-direction: column; gap: 4px; }
.fbx-legal__asidehint { font-size: 12px; color: var(--fbx-text-muted); }
.fbx-legal__asidemail { font-size: 12.5px; word-break: break-all; }

/* -- tabletL and below: no room for the rail ------------------------------------ */
@media (max-width: 1119.98px) {
    .fbx-legal__rail { display: none; }
}

/* -- tabletP / phone: compact head and page padding ----------------------------- */
@media (max-width: 899.98px) {
    .fbx-legal__title { font-size: 22px; }
    .fbx-legal__doctitle { font-size: 24px; }
    .fbx-legal__page { padding: 22px 20px; }
    .fbx-legal__asof { display: none; }
}

/* -- phone: the head stacks, chapter bodies use the full width -------------------- */
@media (max-width: 619.98px) {
    .fbx-legal__head { align-items: stretch; gap: 10px; }
    .fbx-legal__head .fbx-legal__spacer { display: none; }
    .fbx-legal__actions { justify-content: flex-end; }
    .fbx-legal__page { padding: 18px 16px; }
    .fbx-legal__text { margin-left: 0; }
    .fbx-legal__provider { gap: 12px; padding: 14px 16px; }
}

/* -- print: only the document, without card chrome --------------------------------- */
@media print {
    .fbx-legal__head .fbx-legal__actions, .fbx-legal__tabs, .fbx-legal__rail, .fbx-legal__totop { display: none !important; }
    .fbx-legal, .fbx-legal__body { display: block; overflow: visible; }
    .fbx-legal__doc { overflow: visible; border: none; border-radius: 0; }
    .fbx-legal__page { padding: 0; max-width: none; }
    /* Chapters may flow across pages - keeping them together leaves half-empty pages in front of long
       chapters. Only the pieces that must not be torn apart are protected: a heading stays with the text
       that follows it, callout boxes and single paragraphs / list items stay in one piece where possible. */
    .fbx-legal__section { break-inside: auto; }
    .fbx-legal__sechead, .fbx-legal__dochead, .fbx-legal__text h3, .fbx-legal__text h4 {
        break-inside: avoid; break-after: avoid;
    }
    .fbx-legal__note, .fbx-legal__provider { break-inside: avoid; }
    .fbx-legal__text p, .fbx-legal__text li { orphans: 3; widows: 3; }
    .fbx-legal__text pre { max-height: none; overflow: visible; }
    .fbx-legal__foot { break-before: avoid; }
}

/* == 8. Statistics ======================================================== */

/* Design "Statistics". One date window, three tabs (Logbook / Places / Trends). The wide (tables) vs.
   narrow (cards) switch is made in C# from the viewport width (900px), because the two variants have
   different markup; the finer steps are media queries with the thresholds of the design frames:
   desktop >= 1280px (the shell shows the sidebar), tabletL >= 900px, tabletP >= 620px, phone below. */

.fbx-stats { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding-bottom: 8px; }
.fbx-stats__stack { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fbx-stats__spacer { flex: 1; min-width: 8px; }
.fbx-stats__mono { font-family: var(--fbx-font-mono); font-variant-numeric: tabular-nums; }
.fbx-stats__strong { font-weight: 600; }
.fbx-stats__muted { color: var(--fbx-text-muted); }
.fbx-stats__subtle { color: var(--fbx-text-subtle); }
.fbx-stats__on-dark-muted { color: var(--fbx-text-on-dark-muted); }
.fbx-stats__small { font-size: 12.5px; }
.fbx-stats__tiny { font-size: 11.5px; }
.fbx-stats__ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fbx-stats__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--fbx-text-subtle); flex: none; }
.fbx-stats__panel { background: var(--fbx-surface); border: 1px solid var(--fbx-border); border-radius: var(--fbx-radius); padding: 14px 16px; min-width: 0; }
.fbx-stats__panel-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.fbx-stats__panel-title { font-size: 15px; font-weight: 600; }
.fbx-stats__panel-title--mb { margin-bottom: 12px; }

/* -- header ---------------------------------------------------------------- */
.fbx-stats__head { display: flex; align-items: center; gap: 16px; }
.fbx-stats__titlebox { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fbx-stats__title { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.fbx-stats__subline { font-size: 13px; color: var(--fbx-text-muted); text-wrap: pretty; }
.fbx-stats__actions { display: flex; align-items: center; gap: 8px; flex: none; }

/* -- window box -------------------------------------------------------------- */
.fbx-stats__window {
    background: var(--fbx-surface); border: 1px solid var(--fbx-border); border-radius: var(--fbx-radius);
    padding: 10px 13px 11px; display: flex; flex-direction: column; gap: 9px;
}
.fbx-stats__window-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fbx-stats__pills { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; min-width: 0; flex: 1; }
.fbx-stats__pill {
    display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: var(--fbx-radius-pill);
    font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap;
    background: var(--fbx-surface-sunken); border: 1px solid var(--fbx-border); color: var(--fbx-text);
}
.fbx-stats__pill > .fas { font-size: 11px; opacity: .75; }
.fbx-stats__pill:hover { border-color: var(--primary-light-color); }
.fbx-stats__pill--on, .fbx-stats__pill--on:hover { background: var(--primary-color); border-color: var(--primary-color); color: #fff; font-weight: 600; }
.fbx-stats__applies { font-size: 12px; color: var(--fbx-text-muted); flex: none; margin-left: 10px; }
.fbx-stats__range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--fbx-border); }
.fbx-stats__date {
    height: 28px; padding: 0 8px; border: 1px solid var(--fbx-border-strong); border-radius: var(--fbx-radius-sm);
    font-family: var(--fbx-font-mono); font-size: 12.5px; background: var(--fbx-surface); color: var(--fbx-text); cursor: pointer;
}
.fbx-stats__date:focus { outline: 2px solid var(--primary-lighter-color); outline-offset: 1px; }
.fbx-stats__range-to { font-size: 12px; color: var(--fbx-text-subtle); }
.fbx-stats__range-note { font-size: 12px; color: var(--fbx-text-muted); }
.fbx-stats__filter {
    display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 6px 0 10px; border-radius: var(--fbx-radius-pill);
    background: var(--primary-lighter-color); color: var(--primary-dark-color); font-size: 12px; font-weight: 600; white-space: nowrap;
}
.fbx-stats__filter-clear { border: none; background: none; padding: 2px; font-size: 12px; color: inherit; cursor: pointer; display: inline-flex; }

/* -- tab bar -------------------------------------------------------------------- */
.fbx-stats__tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--fbx-border); }
.fbx-stats__tab {
    padding: 8px 0; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none;
    font: inherit; font-size: 14px; color: var(--fbx-text-muted); cursor: pointer; white-space: nowrap;
}
.fbx-stats__tab:hover { color: var(--fbx-text); }
.fbx-stats__tab--on { color: var(--fbx-text); font-weight: 600; border-bottom-color: var(--primary-color); }

/* -- verdict strip -------------------------------------------------------------- */
.fbx-stats__verdict { border: 1px solid var(--fbx-border); border-left: 3px solid var(--fbx-status-ok); border-radius: var(--fbx-radius); background: var(--fbx-surface); padding: 9px 14px 10px; }
.fbx-stats__verdict.fbx-stats__tone--warn { border-left-color: var(--fbx-status-warn); }
.fbx-stats__verdict.fbx-stats__tone--info { border-left-color: var(--primary-light-color); }
.fbx-stats__verdict-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; }
.fbx-stats__verdict-icon { font-size: 13px; color: var(--fbx-status-ok); }
.fbx-stats__tone--warn .fbx-stats__verdict-icon { color: var(--fbx-status-warn); }
.fbx-stats__tone--info .fbx-stats__verdict-icon { color: var(--primary-light-color); }
.fbx-stats__verdict-title { font-size: 15px; font-weight: 600; }
.fbx-stats__verdict-sub { font-size: 13px; color: var(--fbx-text-muted); }
.fbx-stats__verdict-source { font-size: 12px; color: var(--fbx-text-subtle); white-space: nowrap; }
.fbx-stats__reqs { display: grid; grid-template-columns: repeat(var(--req-count, 4), minmax(0, 1fr)); gap: 10px; }
.fbx-stats__req { border: 1px solid var(--fbx-border); border-radius: var(--fbx-radius-sm); padding: 6px 11px; background: var(--fbx-surface); min-width: 0; }
.fbx-stats__req--warn { background: var(--fbx-status-warn-bg); }
.fbx-stats__req-label { font-size: 11.5px; color: var(--fbx-text-muted); margin-bottom: 3px; }
.fbx-stats__req-values { display: flex; align-items: baseline; gap: 6px; font-family: var(--fbx-font-mono); }
.fbx-stats__req-value { font-size: 19px; font-weight: 600; }
.fbx-stats__req-target { font-size: 12.5px; color: var(--fbx-text-muted); }
.fbx-stats__req-meter { height: 4px; border-radius: 2px; background: rgba(0, 0, 0, .09); margin: 5px 0 3px; overflow: hidden; }
.fbx-stats__req-fill { height: 100%; background: var(--fbx-status-ok); }
.fbx-stats__req--warn .fbx-stats__req-fill { background: var(--fbx-status-warn); }
.fbx-stats__req--info .fbx-stats__req-fill { background: var(--primary-light-color); }
.fbx-stats__req-note { font-size: 11.5px; font-weight: 600; color: var(--fbx-status-ok); }
.fbx-stats__req--warn .fbx-stats__req-note { color: var(--fbx-status-warn); }
.fbx-stats__req--info .fbx-stats__req-note { color: var(--primary-light-color); }

/* -- tables (logbook sheet, places) ---------------------------------------------- */
.fbx-stats__tablewrap { border: 1px solid var(--fbx-border); border-radius: var(--fbx-radius); overflow-x: auto; background: var(--fbx-surface); }
.fbx-stats__table { width: 100%; border-collapse: collapse; font-size: 12.5px; --rp: 6px; }
.fbx-stats__table th {
    background: var(--sidebar-color); color: var(--primary-text-color); font-size: 11px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; padding: 7px 9px; text-align: right; white-space: nowrap;
}
.fbx-stats__groups th { padding-bottom: 0; }
.fbx-stats__table .fbx-stats__group { text-align: center; padding-bottom: 2px; color: var(--silver-mid); font-weight: 500; }
.fbx-stats__groups + tr th { padding-top: 2px; }
.fbx-stats__table .fbx-stats__th--left { text-align: left; }
.fbx-stats__th--sort { cursor: pointer; user-select: none; }
.fbx-stats__th--sort:hover { color: var(--accent-color); }
.fbx-stats__table td {
    padding: var(--rp) 9px; text-align: right; font-family: var(--fbx-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap;
    border-bottom: 1px solid var(--fbx-border);
}
.fbx-stats__table .fbx-stats__td--left { text-align: left; }
.fbx-stats__table .fbx-stats__td--text { font-family: var(--fbx-font); }
.fbx-stats__sep { border-left: 1px solid var(--fbx-border); }
.fbx-stats__sep-dark { border-left: 1px solid rgba(255, 255, 255, .2); }
.fbx-stats__row--hov, .fbx-stats__row--carry { cursor: pointer; }
.fbx-stats__row--hov:hover td { background: var(--fbx-surface-sunken); }
.fbx-stats__row--carry td { background: var(--silver-white); }
.fbx-stats__row--open td { background: var(--fbx-surface-sunken); color: var(--fbx-text-muted); }
.fbx-stats__row--open .fbx-stats__label { font-weight: 600; }
.fbx-stats__label > .fas { font-size: 10px; margin-right: 7px; color: var(--fbx-text-subtle); }
.fbx-stats__row--sum td { background: var(--primary-lighter-color); color: var(--primary-dark-color); font-weight: 600; }
.fbx-stats__row--sum .fbx-stats__label > .fas { color: inherit; }
.fbx-stats__row--sum .fbx-stats__strong { font-weight: 700; }
.fbx-stats__row--close td { background: var(--sidebar-color); color: var(--fbx-text-on-dark); border-bottom: none; }
.fbx-stats__row--close .fbx-stats__label { font-weight: 600; }
.fbx-stats__row--close .fbx-stats__strong { font-weight: 700; }
.fbx-stats__row--close .fbx-stats__sep-dark { border-left: 1px solid rgba(255, 255, 255, .2); }
.fbx-stats__table .fbx-stats__empty { padding: 22px 14px; color: var(--fbx-text-muted); text-align: center; white-space: normal; }
.fbx-stats__col-date { width: 96px; } .fbx-stats__col-ac { width: 82px; } .fbx-stats__col-se { width: 112px; }
.fbx-stats__col-time { width: 66px; } .fbx-stats__col-total { width: 74px; } .fbx-stats__col-ldg { width: 52px; }
.fbx-stats__col-icao { width: 74px; } .fbx-stats__col-bar { width: 260px; } .fbx-stats__col-visits { width: 84px; } .fbx-stats__col-win { width: 100px; }
.fbx-stats__homeicon { font-size: 10px; margin-left: 6px; color: var(--primary-light-color); }
.fbx-stats__win { font-weight: 600; color: var(--primary-dark-color); }
.fbx-stats__bar { display: inline-flex; align-items: center; gap: 9px; width: 100%; }
.fbx-stats__bar-track { flex: 1; max-width: 170px; height: 7px; border-radius: 4px; background: var(--fbx-surface-sunken); overflow: hidden; display: block; }
.fbx-stats__bar-fill { display: block; height: 100%; background: var(--primary-light-color); }
.fbx-stats__bar-value { font-weight: 600; min-width: 34px; text-align: right; }
.fbx-stats__foot { display: flex; gap: 18px; font-size: 12px; color: var(--fbx-text-subtle); flex-wrap: wrap; }

/* -- cards (tablet portrait / phone) --------------------------------------------- */
.fbx-stats__cards { display: flex; flex-direction: column; gap: 8px; }
.fbx-stats__cards--tight { gap: 7px; }
.fbx-stats__card { background: var(--fbx-surface); border: 1px solid var(--fbx-border); border-radius: var(--fbx-radius); padding: 10px 12px; min-width: 0; }
.fbx-stats__card--hov, .fbx-stats__card--carry { cursor: pointer; }
.fbx-stats__card--hov:hover { border-color: var(--primary-light-color); }
.fbx-stats__card--carry { background: var(--silver-white); }
.fbx-stats__card--open { background: var(--fbx-surface-sunken); }
.fbx-stats__card--open .fbx-stats__card-title { color: var(--fbx-text-muted); }
.fbx-stats__card--sum { background: var(--primary-lighter-color); border-color: var(--primary-lighter-color); color: var(--primary-dark-color); }
.fbx-stats__card--sum .fbx-stats__card-title { font-weight: 700; }
.fbx-stats__card--sum .fbx-stats__kv-label { opacity: .75; color: inherit; }
.fbx-stats__card--close { background: var(--sidebar-color); border-color: var(--sidebar-color); color: var(--fbx-text-on-dark); }
.fbx-stats__card--close .fbx-stats__card-title { font-weight: 700; }
.fbx-stats__card--close .fbx-stats__kv-label { color: var(--fbx-text-on-dark-muted); }
.fbx-stats__card--empty { border-style: dashed; border-color: var(--fbx-border-strong); padding: 20px; text-align: center; font-size: 13px; color: var(--fbx-text-muted); }
.fbx-stats__card-title { font-size: 12px; font-weight: 600; margin-bottom: 7px; }
.fbx-stats__card-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; min-width: 0; }
.fbx-stats__card-head .fbx-stats__mono { font-size: 13px; }
.fbx-stats__card-ac { font-size: 12.5px; color: var(--primary-dark-color); }
.fbx-stats__kv4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.fbx-stats__kv-label { font-size: 10.5px; color: var(--fbx-text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbx-stats__kv-value { font-family: var(--fbx-font-mono); font-size: 14px; white-space: nowrap; }
.fbx-stats__kv-value--lg { font-size: 15px; }
.fbx-stats__placecard { display: flex; align-items: center; gap: 12px; }
.fbx-stats__placecard-text { min-width: 0; flex: 1; }
.fbx-stats__placecard-text .fbx-stats__card-head { margin-bottom: 0; }
.fbx-stats__placecard-icao { font-size: 13.5px; font-weight: 700; }
.fbx-stats__placecard-text .fbx-stats__tiny { margin-top: 3px; }
.fbx-stats__placecard-num { text-align: right; flex: none; }
.fbx-stats__placecard-ldg { font-size: 16px; font-weight: 600; }

/* -- places tiles ------------------------------------------------------------------ */
.fbx-stats__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.fbx-stats__tile { background: var(--fbx-surface); border: 1px solid var(--fbx-border); border-radius: var(--fbx-radius); padding: 12px 14px; min-width: 0; }
.fbx-stats__tile--dark { background: var(--sidebar-color); border-color: var(--sidebar-color); color: var(--fbx-text-on-dark); }
.fbx-stats__tile-label { font-size: 11.5px; color: var(--fbx-text-muted); margin-bottom: 5px; }
.fbx-stats__tile--dark .fbx-stats__tile-label, .fbx-stats__tile--dark .fbx-stats__tile-sub { color: var(--fbx-text-on-dark-muted); }
.fbx-stats__tile-row { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.fbx-stats__tile-value { font-family: var(--fbx-font-mono); font-size: 26px; font-weight: 600; line-height: 1.1; }
.fbx-stats__tile-sub { font-size: 12px; color: var(--fbx-text-muted); }

/* -- trends ------------------------------------------------------------------------ */
.fbx-stats__trend-top { display: flex; gap: 12px; align-items: stretch; }
.fbx-stats__buckets { flex: 1; min-width: 0; padding-bottom: 12px; container-type: inline-size; }
/* narrow chart: thin the axis of dense charts and keep only the value of the tallest column */
@container (max-width: 560px) {
    .fbx-stats__chart--dense .fbx-stats__bucket:not(.fbx-stats__bucket--max) .fbx-stats__bucket-value { visibility: hidden; }
    .fbx-stats__chart-labels.fbx-stats__chart--dense .fbx-stats__bucket-label:nth-child(even):not(:last-child) { visibility: hidden; }
}
.fbx-stats__chart { display: flex; align-items: flex-end; gap: 12px; height: 118px; padding-bottom: 2px; border-bottom: 1px solid var(--fbx-border); }
.fbx-stats__chart--dense, .fbx-stats__chart-labels.fbx-stats__chart--dense { gap: 8px; }
.fbx-stats__chart--years { height: 96px; gap: 7px; }
.fbx-stats__chart-labels { display: flex; gap: 12px; margin-top: 6px; }
.fbx-stats__chart-labels.fbx-stats__chart--years { gap: 7px; height: auto; border-bottom: none; padding-bottom: 0; }
.fbx-stats__bucket { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.fbx-stats__bucket-value { font-family: var(--fbx-font-mono); font-size: 10.5px; color: var(--fbx-text-subtle); white-space: nowrap; min-height: 13px; }
.fbx-stats__chart--years .fbx-stats__bucket-value { font-size: 10px; }
.fbx-stats__bucket-fill { width: 100%; border-radius: 3px 3px 0 0; background: var(--primary-light-color); }
.fbx-stats__bucket-fill--dark { background: var(--sidebar-light-color); }
.fbx-stats__bucket-fill--accent { background: var(--accent-color); }
.fbx-stats__bucket-fill--off { background: var(--fbx-border-strong); }
.fbx-stats__bucket-label { flex: 1; text-align: center; font-size: 10.5px; color: var(--fbx-text-muted); min-width: 0; white-space: nowrap; overflow: hidden; }
.fbx-stats__projection { width: 330px; flex: none; background: var(--sidebar-color); border-color: var(--sidebar-color); color: var(--fbx-text-on-dark); }
.fbx-stats__projection .fbx-stats__panel-title { margin-bottom: 3px; }
.fbx-stats__projection-sub { margin-bottom: 14px; }
.fbx-stats__projection-row { display: flex; align-items: baseline; gap: 8px; font-family: var(--fbx-font-mono); }
.fbx-stats__projection-value { font-size: 32px; font-weight: 600; line-height: 1.1; }
.fbx-stats__projection-target { font-size: 14px; color: var(--fbx-text-on-dark-muted); }
.fbx-stats__projection-meter { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .16); margin: 10px 0 12px; overflow: hidden; }
.fbx-stats__projection-fill { height: 100%; background: var(--accent-color); }
.fbx-stats__projection-text { font-size: 13px; line-height: 1.55; }
.fbx-stats__facts { display: flex; gap: 18px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .14); flex-wrap: wrap; }
.fbx-stats__fact-label { font-size: 11.5px; color: var(--fbx-text-on-dark-muted); }
.fbx-stats__fact-value { font-family: var(--fbx-font-mono); font-size: 17px; font-weight: 600; }
.fbx-stats__trend-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 12px; }
.fbx-stats__acrow { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; min-width: 0; }
.fbx-stats__ac-reg { width: 72px; flex: none; font-family: var(--fbx-font-mono); font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.fbx-stats__ac-cls { width: 38px; flex: none; font-size: 11.5px; color: var(--fbx-text-muted); }
.fbx-stats__ac-time { width: 52px; flex: none; text-align: right; font-family: var(--fbx-font-mono); font-size: 12.5px; }
.fbx-stats__ac-count { width: 32px; flex: none; text-align: right; font-family: var(--fbx-font-mono); font-size: 11.5px; color: var(--fbx-text-subtle); }
.fbx-stats__meter { flex: 1; min-width: 0; height: 8px; border-radius: 4px; background: var(--fbx-surface-sunken); overflow: hidden; display: block; }
.fbx-stats__meter-fill { display: block; height: 100%; background: var(--primary-light-color); }
.fbx-stats__meter-fill--pic { background: var(--flightrole-pic); }
.fbx-stats__meter-fill--dual { background: var(--flightrole-other); }
.fbx-stats__meter-fill--ifr { background: var(--flightrules-ifr); }
.fbx-stats__meter-fill--night { background: var(--sidebar-light-color); }
.fbx-stats__shares { display: flex; flex-direction: column; gap: 11px; }
.fbx-stats__share-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; margin-bottom: 5px; }

/* -- tabletL (< 1280px): denser table, two trend columns, no "applies" note --------- */
@media (max-width: 1279.98px) {
    .fbx-stats__applies { display: none; }
    .fbx-stats__table { font-size: 11.5px; --rp: 5px; }
    .fbx-stats__trend-grid { grid-template-columns: 1fr 1fr; }
}

/* -- tabletP (< 900px, "stacked"): scrollable preset row, stacked panels ------------- */
@media (max-width: 899.98px) {
    .fbx-stats__pills { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 1px; scrollbar-width: none; }
    .fbx-stats__pills::-webkit-scrollbar { height: 0; }
    .fbx-stats__verdict-head { flex-wrap: wrap; gap: 8px; }
    .fbx-stats__verdict-source { display: none; }
    .fbx-stats__reqs { grid-template-columns: 1fr 1fr; }
    .fbx-stats__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fbx-stats__trend-top { flex-direction: column; }
    .fbx-stats__projection { width: auto; }
    .fbx-stats__trend-grid { grid-template-columns: 1fr; }
}

/* -- phone (< 620px): stacked head, smaller title ------------------------------------- */
@media (max-width: 619.98px) {
    .fbx-stats__head { flex-direction: column; align-items: stretch; gap: 10px; }
    .fbx-stats__head .fbx-stats__spacer { display: none; }
    .fbx-stats__title { font-size: 21px; }
    .fbx-stats__actions { justify-content: flex-end; }
    .fbx-stats__tabs { gap: 18px; }
    .fbx-stats__kv4 { gap: 6px; }
}

/* -- print head + signature lines: the pilot block of the printed sheet (print only) ---------- */
.fbx-stats__printhead, .fbx-stats__signatures { display: none; }
.fbx-stats__printhead-top { display: flex; align-items: flex-start; gap: 20px; padding-bottom: 10px; border-bottom: 2px solid var(--sidebar-color); }
.fbx-stats__printhead-who { min-width: 0; flex: 1; }
.fbx-stats__printhead-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fbx-text-subtle); }
.fbx-stats__printhead-name { font-size: 20px; font-weight: 700; margin-top: 3px; }
.fbx-stats__printhead-licence { font-size: 12px; color: var(--fbx-text-muted); margin-top: 2px; }
.fbx-stats__printhead-meta { flex: none; text-align: right; font-size: 11.5px; color: var(--fbx-text-muted); }
.fbx-stats__printhead-meta > div + div { margin-top: 2px; }
.fbx-stats__printhead-creds { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 8px 0 0; }
.fbx-stats__printhead-cred { font-size: 11.5px; }
.fbx-stats__signatures { gap: 48px; align-items: flex-end; margin-top: 22px; }
.fbx-stats__signature { flex: 1; border-top: 1px solid var(--sidebar-color); padding-top: 5px; font-size: 11px; color: var(--fbx-text-muted); }

/* -- print: the sheet with the pilot block, without chrome ------------------------------ */
@media print {
    .fbx-stats__head, .fbx-stats__window, .fbx-stats__tabs { display: none !important; }
    .fbx-stats__printhead { display: block; margin-bottom: 14px; }
    .fbx-stats__signatures { display: flex; break-inside: avoid; }
    .fbx-stats__tablewrap { border: none; overflow: visible; }
    .fbx-stats__table { font-size: 10pt; }
    .fbx-stats__table thead { display: table-header-group; }
    .fbx-stats__table th, .fbx-stats__row--close td, .fbx-stats__row--sum td, .fbx-stats__row--open td,
    .fbx-stats__card--sum, .fbx-stats__card--close, .fbx-stats__card--open { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .fbx-stats__table tbody tr, .fbx-stats__card, .fbx-stats__verdict { break-inside: avoid; }
}

/* == 9. Profile =========================================================== */
/* Design "Profile": header with avatar + Save/Revert, three tabs; the tab content scrolls, the phone gets a
   bottom action bar. Breakpoints: desktop >= 1280px (breadcrumbs, widest side columns), tablet landscape
   >= 1024px (narrower side columns), tablet portrait >= 768px (single column), phone < 768px. */

.fbx-profile { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fbx-profile__minw0 { min-width: 0; }
.fbx-profile__spacer { flex: 1; }
.fbx-profile__grow { flex: 1; min-width: 0; }
.fbx-profile__muted { font-size: 12.5px; color: var(--fbx-text-muted); line-height: 1.55; }
.fbx-profile__danger-text { color: var(--fbx-status-danger); }
.fbx-profile__btn40 { min-height: 40px; justify-content: center; }
.fbx-profile__control--error, .fbx-profile .fbx-field__control.fbx-profile__control--error { border-color: var(--fbx-status-danger); }
.fbx-profile__hint--warn { color: var(--accent-dark-color); }
.fbx-profile__loading { padding: 48px; text-align: center; color: var(--fbx-text-subtle); font-size: 20px; }

/* -- header ------------------------------------------------------------------------------ */
.fbx-profile__head { flex: none; display: flex; align-items: center; gap: 14px; margin: 4px 0 10px; flex-wrap: wrap; }
.fbx-profile__avatar {
    width: 46px; height: 46px; border-radius: 50%; flex: none;
    background: var(--primary-color); color: var(--fbx-text-on-dark);
    display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600;
}
.fbx-profile__who { flex: 1; min-width: 0; }
.fbx-profile__titlerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fbx-profile__title { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; line-height: 1.25; }
.fbx-profile__alert {
    display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: none;
    border-radius: var(--fbx-radius-pill); font-size: 12px; font-weight: 700; cursor: pointer;
}
.fbx-profile__alert > .fas { font-size: 10px; }
.fbx-profile__alert--warn { background: var(--accent-color); color: var(--fbx-text); }
.fbx-profile__alert--danger { background: var(--fbx-status-danger); color: var(--fbx-text-on-dark); }
.fbx-profile__subline { font-size: 12.5px; color: var(--fbx-text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbx-profile__actions { display: flex; align-items: center; gap: 8px; }
.fbx-profile__actions .fbx-btn { min-height: 40px; padding: 0 14px; }
.fbx-profile__actions .fbx-btn--primary { padding: 0 16px; }
.fbx-profile__unsaved {
    display: inline-flex; align-items: center; gap: 7px; margin-right: 4px; white-space: nowrap;
    font-size: 12.5px; font-weight: 600; color: var(--accent-dark-color);
}
.fbx-profile__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-color); }

/* -- tabs + scrolling content --------------------------------------------------------------- */
.fbx-profile__tabs { flex: none; margin-bottom: 12px; }
.fbx-profile__tab {
    display: inline-flex; align-items: center; gap: 7px; min-height: 40px;
    background: none; border: none; border-bottom: 2px solid transparent; font: inherit;
}
.fbx-profile__tab.fbx-tab--active { border-bottom-color: var(--primary-color); }
.fbx-profile__tabdot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-color); }
.fbx-profile__scroll { flex: 1; min-height: 0; overflow: auto; padding-bottom: 16px; }
.fbx-profile__stack { display: flex; flex-direction: column; gap: 16px; }
.fbx-profile__col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* -- cards + fields ------------------------------------------------------------------------ */
.fbx-profile__cardhead + .fbx-card__body { padding-top: 12px; }
.fbx-profile__cardhead--wrap { flex-wrap: wrap; }
.fbx-profile__cardnote { font-size: 12px; font-weight: 400; color: var(--fbx-text-subtle); }
.fbx-profile__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--fbx-text-subtle); margin-bottom: 7px; }
.fbx-profile__gen2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; align-items: start; }
.fbx-profile__fields2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.fbx-profile__fields3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 20px; }
.fbx-profile .fbx-field__hint { line-height: 1.4; }
.fbx-profile__readonly { min-height: 38px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; line-height: 20px; }

/* chips (flight time, licences) */
.fbx-profile__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.fbx-profile__chip {
    display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px;
    border: 1px solid var(--fbx-border-strong); border-radius: var(--fbx-radius-pill);
    background: var(--fbx-surface); color: var(--fbx-text-muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.fbx-profile__chip--licence { min-height: 36px; }
.fbx-profile__chip--on { background: var(--primary-color); border-color: var(--primary-color); color: var(--fbx-text-on-dark); }
.fbx-profile__chipsample { font-family: var(--fbx-font-mono); font-weight: 400; }
.fbx-profile__chipcheck { font-size: 10px; }

/* -- share links --------------------------------------------------------------------------- */
.fbx-profile__share { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.fbx-profile__sharemain { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fbx-profile__toggles { display: flex; flex-direction: column; }
.fbx-profile__toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%;
    padding: 10px 0; min-height: 52px; border: none; border-bottom: 1px solid var(--fbx-border);
    background: none; cursor: pointer; text-align: left;
}
.fbx-profile__toggle:last-child { border-bottom-color: transparent; }
.fbx-profile__toggletitle { display: block; font-size: 13px; font-weight: 600; }
.fbx-profile__togglesub { display: block; font-size: 11.5px; color: var(--fbx-text-subtle); margin-top: 1px; }
.fbx-profile__switch {
    width: 38px; height: 22px; border-radius: 11px; padding: 2px; flex: none;
    background: var(--silver-mid); display: inline-flex; align-items: center; justify-content: flex-start;
}
.fbx-profile__switch--on { background: var(--primary-color); justify-content: flex-end; }
.fbx-profile__knob { width: 18px; height: 18px; border-radius: 50%; background: var(--fbx-surface); box-shadow: var(--fbx-shadow-sm); }
.fbx-profile__preview { min-width: 0; }
.fbx-profile__previewcard { border: 1px solid var(--fbx-border); border-radius: var(--fbx-radius); background: var(--fbx-surface); overflow: hidden; box-shadow: var(--fbx-shadow-sm); }
.fbx-profile__previewhead { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.fbx-profile__previewavatar {
    width: 32px; height: 32px; border-radius: 50%; flex: none; background: var(--primary-light-color); color: var(--fbx-text-on-dark);
    display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600;
}
.fbx-profile__previewtitle { font-size: 14px; font-weight: 600; }
.fbx-profile__previewline { font-size: 11.5px; color: var(--fbx-text-muted); font-family: var(--fbx-font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbx-profile__previewtrack, .fbx-profile__previewnotrack {
    border-top: 1px solid var(--fbx-border); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px;
}
.fbx-profile__previewtrack { height: 96px; color: var(--fbx-text-muted); background: repeating-linear-gradient(135deg, var(--fbx-surface-sunken) 0 10px, var(--fbx-surface) 10px 20px); }
.fbx-profile__previewnotrack { height: 56px; color: var(--fbx-text-subtle); background: var(--fbx-surface-sunken); }
.fbx-profile__previewfoot { font-size: 11.5px; color: var(--fbx-text-subtle); line-height: 1.55; margin-top: 9px; }

/* -- validity strip ------------------------------------------------------------------------- */
.fbx-profile__timeline { display: flex; flex-direction: column; gap: 7px; }
.fbx-profile__tlrow { display: grid; grid-template-columns: 210px minmax(0, 1fr) 92px; gap: 14px; align-items: center; }
.fbx-profile__tlaxis { font-size: 10.5px; color: var(--fbx-text-subtle); }
.fbx-profile__tlmonths { display: grid; grid-template-columns: repeat(8, 1fr); font-family: var(--fbx-font-mono); }
.fbx-profile__tlexpires { text-align: right; letter-spacing: .06em; text-transform: uppercase; }
.fbx-profile__tltitle { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbx-profile__tltitle--muted { color: var(--fbx-text-muted); }
.fbx-profile__tlbar { height: 20px; border-radius: var(--fbx-radius-sm); background: var(--fbx-surface-sunken); position: relative; overflow: hidden; }
.fbx-profile__tlbar--noexpiry {
    display: flex; align-items: center; padding-left: 9px; font-size: 11.5px; color: var(--fbx-text-subtle);
    background: repeating-linear-gradient(90deg, var(--fbx-surface-sunken) 0 10px, transparent 10px 20px);
}
.fbx-profile__tlfill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--primary-light-color); }
.fbx-profile__tlfill--ok.fbx-profile__tlfill--ifr { background: var(--flightrules-ifr); }
.fbx-profile__tlfill--warn { background: var(--fbx-status-warn); }
.fbx-profile__tlfill--danger { background: repeating-linear-gradient(135deg, var(--fbx-status-danger-bg) 0 8px, transparent 8px 16px); }
.fbx-profile__tldate { font-family: var(--fbx-font-mono); font-size: 12px; text-align: right; }
.fbx-profile__tldate--warn { color: var(--accent-dark-color); font-weight: 700; }
.fbx-profile__tldate--danger { color: var(--fbx-status-danger); font-weight: 700; }
.fbx-profile__tldate--muted { color: var(--fbx-text-subtle); }
.fbx-profile__empty {
    border: 1px dashed var(--fbx-border-strong); border-radius: var(--fbx-radius); background: var(--fbx-surface);
    padding: 22px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.fbx-profile__emptyicon {
    width: 44px; height: 44px; border-radius: var(--fbx-radius); flex: none; font-size: 18px;
    background: var(--primary-lighter-color); color: var(--primary-color); display: flex; align-items: center; justify-content: center;
}
.fbx-profile__emptytext { flex: 1; min-width: 220px; }
.fbx-profile__emptytitle { font-size: 15px; font-weight: 600; }
.fbx-profile__emptysub { display: block; font-size: 12px; color: var(--fbx-text-muted); margin-top: 1px; line-height: 1.5; }
.fbx-profile__emptytext .fbx-profile__emptysub { font-size: 13px; margin-top: 3px; }

/* -- licences + rating cards ------------------------------------------------------------------ */
.fbx-profile__lic2 { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.fbx-profile__licbody { display: flex; flex-direction: column; gap: 14px; }
.fbx-profile__question { font-size: 12px; color: var(--fbx-text-muted); margin-bottom: 7px; }
.fbx-profile__ratingcard { overflow: visible; }
.fbx-profile__ratinghead { position: relative; }
.fbx-profile__addbtn { min-height: 34px; font-size: 13px; }
.fbx-profile__addbtn > .fas { font-size: 11px; }
.fbx-profile__addmenu { top: calc(100% - 4px); right: 12px; min-width: 250px; font-size: 13px; font-weight: 400; }
.fbx-profile__addoption { min-height: 42px; }
.fbx-menu__item.fbx-profile__addoption > .fas { width: 16px; color: var(--primary-light-color); }
.fbx-profile__addtitle { display: block; font-size: 13px; font-weight: 600; }
.fbx-profile__addsub { display: block; font-size: 11.5px; color: var(--fbx-text-subtle); }
.fbx-profile__ratingbody { display: flex; flex-direction: column; gap: 7px; }
.fbx-profile__rrow {
    display: grid; grid-template-columns: 32px minmax(0, 1fr) 150px 108px 34px; grid-template-areas: "t n d s x";
    align-items: center; gap: 8px 12px; padding: 8px 10px 8px 12px;
    border: 1px solid var(--fbx-border); border-radius: var(--fbx-radius-sm); background: var(--fbx-surface);
}
.fbx-profile__rrow--warn { border-color: var(--fbx-status-warn); background: var(--fbx-status-warn-bg); }
.fbx-profile__rrow--danger { border-color: var(--fbx-status-danger); background: var(--fbx-status-danger-bg); }
.fbx-profile__rrow--missing { border-color: var(--fbx-status-warn); }
.fbx-profile__rtile {
    grid-area: t; width: 32px; height: 32px; border-radius: var(--fbx-radius-sm); font-size: 13px;
    background: var(--primary-color); color: var(--fbx-text-on-dark); display: inline-flex; align-items: center; justify-content: center;
}
.fbx-profile__rtile--ifr { background: var(--flightrules-ifr); color: var(--silver-black); }
.fbx-profile__rtile--warn { background: var(--accent-color); color: var(--fbx-text); }
.fbx-profile__rtile--danger { background: var(--fbx-status-danger); color: var(--fbx-text-on-dark); }
.fbx-profile__rname { grid-area: n; min-width: 0; }
.fbx-profile__rtitle { font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.fbx-profile__rsub { display: flex; align-items: center; gap: 6px; margin-top: 1px; font-size: 11.5px; color: var(--fbx-text-subtle); }
.fbx-profile__minisel { border: 1px solid var(--fbx-border-strong); border-radius: 4px; background: var(--fbx-surface); font-size: 12px; padding: 1px 4px; color: var(--fbx-text); }
.fbx-profile__rdate { grid-area: d; min-width: 0; }
.fbx-profile__dateinput {
    width: 100%; min-height: 34px; padding: 3px 8px; border: 1px solid var(--fbx-border-strong); border-radius: var(--fbx-radius-sm);
    background: var(--fbx-surface); font-family: var(--fbx-font-mono); font-size: 12.5px;
}
.fbx-profile__dateinput--warn, .fbx-profile__dateinput--missing { border-color: var(--fbx-status-warn); }
.fbx-profile__dateinput--danger { border-color: var(--fbx-status-danger); }
.fbx-profile__dateinput:focus { outline: none; border-color: var(--primary-light-color); box-shadow: 0 0 0 3px var(--primary-lighter-color); }
.fbx-profile__nodate { font-size: 12.5px; color: var(--fbx-text-subtle); font-family: var(--fbx-font-mono); padding-left: 8px; }
.fbx-profile__status {
    grid-area: s; justify-self: start; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px;
    border-radius: var(--fbx-radius-pill); font-size: 11.5px; font-weight: 700; white-space: nowrap;
    background: var(--fbx-status-ok-bg); color: var(--fbx-status-ok);
}
.fbx-profile__status > .fas { font-size: 10px; }
.fbx-profile__status--warn { background: var(--accent-color); color: var(--fbx-text); }
.fbx-profile__status--danger { background: var(--fbx-status-danger); color: var(--fbx-text-on-dark); }
.fbx-profile__status--missing { background: var(--fbx-status-warn-bg); color: var(--fbx-text); }
.fbx-profile__rremove {
    grid-area: x; justify-self: end; width: 34px; height: 34px; border: none; background: none; cursor: pointer;
    border-radius: var(--fbx-radius-sm); color: var(--fbx-text-subtle); font-size: 12px;
}
.fbx-profile__rremove:hover { background: var(--fbx-status-danger-bg); color: var(--fbx-status-danger); }
.fbx-profile__ratingempty {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; cursor: pointer; text-align: left;
    border: 1px dashed var(--fbx-border-strong); border-radius: var(--fbx-radius-sm); background: transparent;
}
.fbx-profile__ratingempty:hover { border-color: var(--primary-light-color); background: var(--fbx-surface-sunken); }
.fbx-profile__ratingempty > .fas { color: var(--primary-light-color); }
.fbx-profile__notheld { font-size: 12px; color: var(--fbx-text-subtle); padding: 2px 2px 0; }

/* -- currency + note ---------------------------------------------------------------------------- */
.fbx-profile__cardhead + .fbx-profile__currency { padding-top: 10px; }
.fbx-profile__currency { display: flex; flex-direction: column; gap: 11px; }
.fbx-profile__curow { display: flex; align-items: center; gap: 10px; }
.fbx-profile__cudot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--fbx-status-ok); }
.fbx-profile__cudot--warn { background: var(--fbx-status-warn); }
.fbx-profile__cudot--danger { background: var(--fbx-status-danger); }
.fbx-profile__cutext { flex: 1; min-width: 0; }
.fbx-profile__cutitle { font-size: 13px; font-weight: 600; }
.fbx-profile__cusub { font-size: 11.5px; color: var(--fbx-text-muted); }
.fbx-profile__cuvalue { font-family: var(--fbx-font-mono); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.fbx-profile__cuvalue--danger { color: var(--fbx-status-danger); }
.fbx-profile__culink { font-size: 12.5px; font-weight: 600; padding-top: 2px; }
.fbx-profile__note { display: flex; gap: 12px; }
.fbx-profile__note > .fas, .fbx-profile__info > .fas { color: var(--primary-light-color); margin-top: 2px; }

/* -- account ------------------------------------------------------------------------------------ */
.fbx-profile__account { max-width: 980px; }
.fbx-profile__signin { display: flex; flex-direction: column; gap: 14px; }
.fbx-profile__pwrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fbx-profile__info { display: flex; gap: 12px; align-items: flex-start; background: var(--fbx-surface-sunken); border-radius: var(--fbx-radius-sm); padding: 11px 13px; }
.fbx-profile__actionrow { display: flex; flex-direction: row; align-items: center; gap: 14px; }
.fbx-profile__actionrow > .fbx-btn { flex: none; }
.fbx-profile__dangercard { border-color: var(--fbx-status-danger); }
.fbx-profile__dlgactions { flex-wrap: wrap; }

/* -- phone bottom bar ----------------------------------------------------------------------------- */
.fbx-profile__bottombar { flex: none; padding-top: 10px; display: flex; gap: 8px; border-top: 1px solid var(--fbx-border); }
.fbx-profile__bottombar .fbx-btn { min-height: 44px; justify-content: center; }
.fbx-profile__bbrevert { flex: 1; }
.fbx-profile__bbsave { flex: 2; }

/* -- change password dialog ----------------------------------------------------------------------- */
.fbx-pwdlg__icon { color: var(--primary-color); width: 18px; text-align: center; flex: none; }
.fbx-pwdlg__banner {
    display: flex; gap: 11px; align-items: flex-start; padding: 10px 12px;
    border: 1px solid var(--fbx-status-danger); background: var(--fbx-status-danger-bg); border-radius: var(--fbx-radius-sm);
}
.fbx-pwdlg__banner > .fas { color: var(--fbx-status-danger); margin-top: 2px; }
.fbx-pwdlg__banner-title { font-size: 13px; font-weight: 600; color: var(--fbx-status-danger); }
.fbx-pwdlg__banner-text { font-size: 12.5px; line-height: 1.5; margin-top: 2px; }
.fbx-pwdlg__control { padding-right: 4px; min-height: 38px; }
.fbx-pwdlg__control:focus-within { border-color: var(--primary-light-color); box-shadow: 0 0 0 3px var(--primary-lighter-color); }
.fbx-pwdlg__control--error, .fbx-pwdlg__control--error:focus-within { border-color: var(--fbx-status-danger); }
.fbx-pwdlg__control input {
    flex: 1; width: 100%; min-width: 0; border: none; background: transparent; outline: none;
    font-family: var(--fbx-font-mono); letter-spacing: .04em;
}
.fbx-pwdlg__eye {
    flex: none; width: 28px; height: 24px; margin: -4px 0; padding: 0; border: none; background: none; cursor: pointer;
    border-radius: var(--fbx-radius-sm); color: var(--fbx-text-subtle);
}
.fbx-pwdlg__eye:hover { background: var(--fbx-surface-sunken); }
.fbx-pwdlg__error { color: var(--fbx-status-danger); display: flex; gap: 6px; align-items: center; }
.fbx-pwdlg__error > .fas { font-size: 11px; }
.fbx-pwdlg__rules { display: flex; flex-direction: column; gap: 5px; background: var(--fbx-surface-sunken); border-radius: var(--fbx-radius-sm); padding: 10px 12px; }
.fbx-pwdlg__rule { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fbx-text-muted); }
.fbx-pwdlg__rule > i { width: 14px; font-size: 11px; text-align: center; }
.fbx-pwdlg__rule--ok { color: var(--fbx-status-ok); }
.fbx-pwdlg__rule--failed { color: var(--fbx-status-danger); }
.fbx-pwdlg__submit { min-width: 164px; justify-content: center; }
.fbx-pwdlg__foot { font-size: 11.5px; color: var(--fbx-text-subtle); line-height: 1.5; }

/* -- tablet landscape (< 1280px): narrower side columns --------------------------------------------- */
@media (max-width: 1279.98px) {
    .fbx-profile__share { grid-template-columns: minmax(0, 1fr) 320px; }
    .fbx-profile__lic2 { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* -- tablet portrait (< 1024px): one column ------------------------------------------------------- */
@media (max-width: 1023.98px) {
    .fbx-profile__gen2, .fbx-profile__share, .fbx-profile__lic2 { grid-template-columns: minmax(0, 1fr); }
    .fbx-profile__fields3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -- phone (< 768px): single field column, two-line rating rows, bottom action bar -------------------- */
@media (max-width: 767.98px) {
    .fbx-profile__avatar { width: 38px; height: 38px; }
    .fbx-profile__title { font-size: 20px; }
    .fbx-profile__fields2, .fbx-profile__fields3 { grid-template-columns: minmax(0, 1fr); }
    .fbx-profile__rrow { grid-template-columns: 32px minmax(0, 1fr) auto 34px; grid-template-areas: "t n n x" "t d s x"; }
    .fbx-profile__tlrow { grid-template-columns: 104px minmax(0, 1fr) 84px; }
    .fbx-profile__actionrow { flex-direction: column; align-items: stretch; }
    .fbx-profile__addmenu { right: 0; min-width: 0; width: min(280px, calc(100vw - 48px)); }
    /* toasts stay clear of the bottom action bar */
    .fbx-toasts.fbx-profile-toast { margin-bottom: 60px; }
}

/* == 10. Aircraft ========================================================= */
/* Design "Aircrafts": list (grouped table, logbook figures load later) and editor (header with "in use" switch,
   General / Planning tabs, side column with logbook figures / data sheet). Breakpoints: desktop >= 1280px
   (breadcrumbs, header actions, side column 340px), tablet landscape >= 1024px (back button, icon actions next to
   the tabs, side column 300px), tablet portrait >= 768px (one column), phone < 768px (bottom action bar). */

/* -- shared bits ------------------------------------------------------------------------------ */
@keyframes fbxAcftShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes fbxAcftSpin { to { transform: rotate(360deg); } }
.fbx-acft__skeleton {
    display: inline-block; height: 12px; border-radius: 4px; vertical-align: middle;
    background: linear-gradient(90deg, var(--fbx-surface-sunken) 25%, var(--silver-light) 50%, var(--fbx-surface-sunken) 75%);
    background-size: 200% 100%; animation: fbxAcftShimmer 1.4s linear infinite;
}
.fbx-acft__skeleton--46 { width: 46px; }
.fbx-acft__skeleton--64 { width: 64px; }
.fbx-acft__skeleton--78 { width: 78px; }
.fbx-acft__skeleton--90 { width: 90px; }
.fbx-acft__spinner {
    width: 14px; height: 14px; border-radius: 50%; flex: none; display: inline-block; vertical-align: -2px; box-sizing: border-box;
    border: 2px solid var(--fbx-border-strong); border-top-color: var(--primary-color); animation: fbxAcftSpin .8s linear infinite;
}
.fbx-acft__linkbtn { border: none; background: none; padding: 0; color: var(--primary-light-color); font: inherit; font-weight: 600; cursor: pointer; }
.fbx-acft__linkbtn:hover { color: var(--primary-color); text-decoration: underline; }
.fbx-acft__error { font-size: 12px; color: var(--fbx-status-danger); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fbx-acft__error > .fas { font-size: 11px; }
.fbx-acft__error .fbx-acft__linkbtn { font-size: 12px; }
.fbx-acft__upper { text-transform: uppercase; }
.fbx-acft__upper::placeholder { text-transform: none; }
.fbx-acft__control--error, .fbx-acft .fbx-field__control.fbx-acft__control--error, .fbx-acdlg .fbx-field__control.fbx-acft__control--error { border-color: var(--fbx-status-danger); }
.fbx-acft__control--dirty { border-color: var(--accent-color); box-shadow: 0 0 0 2px var(--accent-light-color); }
.fbx-acft__hint--error, .fbx-field__hint.fbx-acft__hint--error { color: var(--fbx-status-danger); display: flex; gap: 6px; align-items: center; }
.fbx-acft__hint--error > .fas { font-size: 11px; }
.fbx-acft__hint--missing { color: var(--accent-dark-color); }
.fbx-acft__eqchip {
    display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--fbx-radius-pill);
    font-size: 11px; font-weight: 700; white-space: nowrap;
}
.fbx-acft__eqchip--vfr { background: var(--flightrules-vfr); color: var(--fbx-text-on-dark); }
.fbx-acft__eqchip--ifr { background: var(--flightrules-ifr); color: var(--silver-black); }
.fbx-acft__warnpill {
    display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: var(--fbx-radius-pill);
    background: var(--fbx-status-warn-bg); font-size: 11.5px; font-weight: 700; color: var(--fbx-text); white-space: nowrap;
}
.fbx-acft__warnpill > .fas { font-size: 10px; color: var(--fbx-status-warn); }

/* -- list ------------------------------------------------------------------------------------ */
.fbx-acftlist { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fbx-acftlist__nowrap { white-space: nowrap; }
.fbx-acftlist__type { min-width: 0; max-width: 280px; }
.fbx-acftlist__title { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbx-acftlist__sub { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
.fbx-acftlist__class { font-size: 13px; }
.fbx-acftlist__chips { display: flex; gap: 4px; }
.fbx-acftlist__missing { font-size: 11.5px; font-weight: 600; color: var(--accent-dark-color); white-space: nowrap; }
.fbx-acftlist__status { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fbx-text-muted); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fbx-acftlist__status--error { color: var(--fbx-status-danger); }
.fbx-acftlist__status--error > .fas { font-size: 12px; }
.fbx-acftlist__status .fbx-acft__linkbtn { font-size: 12.5px; }
.fbx-acftlist__table .fbx-table__toolbar { flex-wrap: nowrap; }
.fbx-acftlist__empty { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 24px; }
.fbx-acftlist__emptyinner { max-width: 440px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.fbx-acftlist__emptyicon {
    width: 56px; height: 56px; border-radius: var(--fbx-radius-lg); font-size: 22px;
    background: var(--primary-lighter-color); color: var(--primary-color); display: inline-flex; align-items: center; justify-content: center;
}
.fbx-acftlist__emptytitle { font-size: 18px; font-weight: 600; }
.fbx-acftlist__emptytext { font-size: 13.5px; line-height: 1.55; color: var(--fbx-text-muted); text-wrap: pretty; }
.fbx-acftlist__emptybtn { min-height: 44px; padding: 0 18px; margin-top: 4px; }

/* -- editor: header ---------------------------------------------------------------------------- */
.fbx-acft { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fbx-acft__notfound { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fbx-acft__notfound > .fas { color: var(--primary-light-color); }
.fbx-acft__head { flex: none; display: flex; align-items: center; gap: 12px; margin: 4px 0 10px; }
.fbx-acft__iconbtn { min-height: 44px; min-width: 44px; padding: 0; justify-content: center; flex: none; }
.fbx-acft__btn40 { min-height: 40px; padding: 0 14px; }
.fbx-acft__btn40.fbx-acft__iconbtn { min-height: 40px; min-width: 40px; padding: 0; }
.fbx-acft__btn40.fbx-btn--primary { padding: 0 16px; }
.fbx-acft__danger, .fbx-btn--ghost.fbx-acft__danger { color: var(--fbx-status-danger); }
.fbx-acft__tile {
    width: 46px; height: 46px; border-radius: var(--fbx-radius); flex: none; font-size: 17px;
    background: var(--primary-color); color: var(--fbx-text-on-dark); display: inline-flex; align-items: center; justify-content: center;
}
.fbx-acft__who { flex: 1; min-width: 0; }
.fbx-acft__titlerow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fbx-acft__title { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: .01em; font-family: var(--fbx-font-mono); white-space: nowrap; line-height: 1.25; }
.fbx-acft__classpill {
    display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: var(--fbx-radius-pill);
    background: var(--primary-lighter-color); color: var(--primary-color); font-size: 12px; font-weight: 700;
}
.fbx-acft__missingpill {
    display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: none; border-radius: var(--fbx-radius-pill);
    background: var(--fbx-status-warn-bg); color: var(--fbx-text); font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.fbx-acft__missingpill > .fas { font-size: 10px; color: var(--fbx-status-warn); }
.fbx-acft__subline { font-size: 12.5px; color: var(--fbx-text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbx-acft__unsaved { display: inline-flex; align-items: center; gap: 7px; flex: none; margin-right: 2px; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--accent-dark-color); }
.fbx-acft__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-color); }
.fbx-acft__inuse {
    flex: none; display: flex; align-items: center; gap: 10px; padding: 0 12px; min-height: 40px; white-space: nowrap; cursor: pointer;
    border: 1px solid var(--fbx-border); border-radius: var(--fbx-radius-sm); background: var(--fbx-surface); color: var(--fbx-text); font: inherit;
}
.fbx-acft__inuselabel { font-size: 13px; font-weight: 600; }
.fbx-acft__switch {
    width: 38px; height: 22px; border-radius: 11px; padding: 2px; flex: none; box-sizing: border-box;
    background: var(--silver-mid); display: inline-flex; align-items: center; justify-content: flex-start;
}
.fbx-acft__switch--on { background: var(--primary-color); justify-content: flex-end; }
.fbx-acft__knob { width: 18px; height: 18px; border-radius: 50%; background: var(--fbx-surface); box-shadow: var(--fbx-shadow-sm); }
.fbx-acft__headactions { display: flex; gap: 8px; flex: none; }

/* -- editor: tabs + scrolling body ------------------------------------------------------------- */
.fbx-acft__tabrow { flex: none; display: flex; align-items: flex-end; gap: 8px; margin-bottom: 12px; }
.fbx-acft__tabs { flex: 1; min-width: 0; margin-bottom: 0; }
.fbx-acft__tab { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; background: none; border: none; border-bottom: 2px solid transparent; font: inherit; }
.fbx-acft__tab.fbx-tab--active { border-bottom-color: var(--primary-color); }
.fbx-acft__tabdot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-color); }
.fbx-acft__compactactions { display: flex; gap: 4px; flex: none; padding-bottom: 2px; }
.fbx-acft__morebtn--open { background: var(--fbx-surface-sunken); }
.fbx-acft__moremenu { min-width: 220px; }
.fbx-acft__scroll { flex: 1; min-height: 0; overflow: auto; padding-bottom: 16px; }
.fbx-acft__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.fbx-acft__col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* -- editor: cards + fields -------------------------------------------------------------------- */
.fbx-acft__cardhead + .fbx-card__body { padding-top: 12px; }
.fbx-acft__cardhead--wrap { flex-wrap: wrap; }
.fbx-acft__cardnote { font-size: 12px; font-weight: 400; color: var(--fbx-text-subtle); }
.fbx-acft .fbx-field__hint { line-height: 1.4; }
.fbx-acft__fields3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 20px; }
.fbx-acft__fields2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.fbx-acft__span { grid-column: 1 / -1; }
.fbx-acft__stack14 { display: flex; flex-direction: column; gap: 14px; }
.fbx-acft__right { text-align: right; }

/* equipment + unit chips */
.fbx-acft__eqchips { display: flex; gap: 8px; flex-wrap: wrap; }
.fbx-acft__eqbtn {
    display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px 0 11px; white-space: nowrap; cursor: pointer;
    border: 1px dashed var(--fbx-border-strong); border-radius: var(--fbx-radius-pill); background: var(--fbx-surface);
    color: var(--fbx-text-subtle); font: inherit; font-size: 13px; font-weight: 600;
}
.fbx-acft__eqbtn > .fas { font-size: 12px; }
.fbx-acft__eqbtn--vfr { border-style: solid; border-color: var(--flightrules-vfr); background: var(--flightrules-vfr); color: var(--fbx-text-on-dark); }
.fbx-acft__eqbtn--ifr { border-style: solid; border-color: var(--flightrules-ifr); background: var(--flightrules-ifr); color: var(--silver-black); }
.fbx-acft__eqbtn--fixed { cursor: default; }
.fbx-acft__units { display: grid; grid-template-columns: repeat(4, auto); gap: 14px 24px; justify-content: start; }
.fbx-acft__unitgroup { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fbx-acft__unitchips { display: flex; gap: 6px; flex-wrap: wrap; }
.fbx-acft__unitchip {
    display: inline-flex; align-items: center; min-height: 36px; padding: 0 13px; white-space: nowrap; cursor: pointer;
    border: 1px solid var(--fbx-border-strong); border-radius: var(--fbx-radius-pill); background: var(--fbx-surface);
    color: var(--fbx-text-muted); font: inherit; font-size: 13px; font-weight: 600;
}
.fbx-acft__unitchip--on { border-color: var(--primary-color); background: var(--primary-color); color: var(--fbx-text-on-dark); }

/* numeric fields: input + unit suffix; dashed amber = missing, amber glow = changed, red = invalid */
.fbx-acft__num { min-height: 38px; padding-top: 0; padding-bottom: 0; }
.fbx-acft__num:focus-within { border-color: var(--primary-light-color); box-shadow: 0 0 0 3px var(--primary-lighter-color); }
.fbx-acft__num input {
    flex: 1; width: 100%; min-width: 0; border: none; background: transparent; outline: none;
    text-align: right; font-family: var(--fbx-font-mono); color: var(--fbx-text); padding: 8px 0;
}
.fbx-acft__num input::placeholder { color: var(--fbx-text-subtle); }
.fbx-acft__num--missing { border-color: var(--fbx-status-warn); border-style: dashed; }
.fbx-acft__num--dirty { border-color: var(--accent-color); box-shadow: 0 0 0 2px var(--accent-light-color); }
.fbx-acft__num--error, .fbx-acft__num--error:focus-within { border-color: var(--fbx-status-danger); box-shadow: none; }
select.fbx-acft__select--missing { border-color: var(--fbx-status-warn); border-style: dashed; }
.fbx-acft__unit { flex: none; min-width: 30px; font-size: 11.5px; color: var(--fbx-text-subtle); white-space: nowrap; }

/* flight profile */
.fbx-acft__phase {
    display: grid; grid-template-columns: 30px minmax(0, 1fr) 150px 150px; grid-template-areas: "i n s f";
    align-items: center; gap: 8px 12px; padding: 8px 0; border-bottom: 1px solid var(--fbx-border);
}
.fbx-acft__phase:last-child { border-bottom-color: transparent; }
.fbx-acft__phasehead {
    padding: 0 0 6px; border-bottom: none; grid-template-areas: none;
    font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--fbx-text-subtle);
}
.fbx-acft__phaseicon {
    grid-area: i; width: 30px; height: 30px; border-radius: var(--fbx-radius-sm); font-size: 12px;
    background: var(--primary-lighter-color); color: var(--primary-color); display: inline-flex; align-items: center; justify-content: center;
}
.fbx-acft__phasename { grid-area: n; min-width: 0; }
.fbx-acft__phasetitle { font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.fbx-acft__phasesub { font-size: 11.5px; color: var(--fbx-text-subtle); margin-top: 1px; }
.fbx-acft__phasespeed { grid-area: s; }
.fbx-acft__phasefuel { grid-area: f; }

.fbx-acft__info { display: flex; gap: 12px; align-items: flex-start; background: var(--fbx-surface-sunken); border-radius: var(--fbx-radius-sm); padding: 10px 12px; font-size: 12.5px; color: var(--fbx-text-muted); line-height: 1.55; }
.fbx-acft__info > .fas { color: var(--primary-light-color); margin-top: 3px; }

/* -- editor: side column ------------------------------------------------------------------------ */
.fbx-acft__cardhead + .fbx-acft__kvbody, .fbx-acft__cardhead + .fbx-acft__sheet { padding-top: 8px; }
.fbx-acft__kv { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; border-bottom: 1px solid var(--fbx-border); }
.fbx-acft__kv--last { border-bottom-color: transparent; }
.fbx-acft__k { font-size: 12.5px; color: var(--fbx-text-muted); }
.fbx-acft__v { font-size: 12.5px; font-family: var(--fbx-font-mono); text-align: right; }
.fbx-acft__v--missing { color: var(--accent-dark-color); }
.fbx-acft__cardlink { display: block; margin-top: 10px; font-size: 12.5px; }
.fbx-acft__kvbody .fbx-acft__error { margin-top: 8px; }
.fbx-acft__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--fbx-text-subtle); margin-bottom: 6px; }
.fbx-acft__eyebrow--gap { margin: 12px 0 0; }
.fbx-acft__gauge { height: 10px; border-radius: 5px; background: var(--fbx-surface-sunken); overflow: hidden; display: flex; }
.fbx-acft__gauge-empty { background: var(--primary-color); }
.fbx-acft__gauge-fuel { background: var(--primary-light-color); }
.fbx-acft__gauge-pay { background: var(--accent-color); }
.fbx-acft__gauge-pay--over { background: var(--fbx-status-danger); }
.fbx-acft__gaugelabels { display: flex; justify-content: space-between; gap: 6px; margin-top: 5px; font-size: 11px; color: var(--fbx-text-subtle); font-family: var(--fbx-font-mono); }
.fbx-acft__metric { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--fbx-border); }
.fbx-acft__metric--last { border-bottom-color: transparent; }
.fbx-acft__metricval { font-family: var(--fbx-font-mono); font-size: 22px; font-weight: 600; letter-spacing: -.01em; color: var(--fbx-text); }
.fbx-acft__metricval--danger { color: var(--fbx-status-danger); }
.fbx-acft__metricunit { font-size: 12px; color: var(--fbx-text-muted); font-weight: 400; margin-left: 3px; }
.fbx-acft__metriclabel { font-size: 12px; color: var(--fbx-text-muted); }
.fbx-acft__was { font-size: 12px; color: var(--accent-dark-color); display: flex; gap: 6px; align-items: baseline; }
.fbx-acft__was > .fas { font-size: 10px; }
.fbx-acft__usednote { font-size: 11.5px; color: var(--fbx-text-subtle); line-height: 1.5; margin-top: 6px; }

/* -- phone bottom bar ---------------------------------------------------------------------------- */
.fbx-acft__bottombar { flex: none; padding-top: 10px; display: flex; gap: 8px; border-top: 1px solid var(--fbx-border); }
.fbx-acft__bottombar .fbx-btn { min-height: 44px; flex: 1; justify-content: center; }

/* -- add / duplicate / delete dialogs -------------------------------------------------------------- */
.fbx-acdlg { padding: 20px 22px; gap: 14px; overflow: auto; box-sizing: border-box; }
.fbx-acdlg__head { display: flex; align-items: center; gap: 10px; }
.fbx-acdlg__icon { color: var(--primary-color); }
.fbx-acdlg__icon--danger { color: var(--fbx-status-danger); }
.fbx-acdlg__icon--info { color: var(--primary-light-color); }
.fbx-acdlg__title { flex: 1; min-width: 0; font-size: 17px; font-weight: 600; }
.fbx-acdlg__close { border: none; background: none; cursor: pointer; color: var(--fbx-text-subtle); min-width: 36px; min-height: 36px; flex: none; }
.fbx-acdlg__text { font-size: 13.5px; line-height: 1.55; color: var(--fbx-text-muted); text-wrap: pretty; display: flex; gap: 10px; align-items: center; }
.fbx-acdlg__startfrom { display: flex; flex-direction: column; gap: 8px; }
.fbx-acdlg__option {
    display: flex; gap: 12px; align-items: flex-start; padding: 11px 13px; cursor: pointer;
    border: 2px solid var(--fbx-border-strong); border-radius: var(--fbx-radius); background: var(--fbx-surface);
}
.fbx-acdlg__option--on { border-color: var(--primary-color); background: var(--primary-lighter-color); }
.fbx-acdlg__radio { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--fbx-border-strong); flex: none; margin-top: 3px; box-sizing: border-box; background: var(--fbx-surface); }
.fbx-acdlg__option--on .fbx-acdlg__radio { border: 5px solid var(--primary-color); }
.fbx-acdlg__optbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.fbx-acdlg__opttitle { font-size: 13.5px; font-weight: 600; }
.fbx-acdlg__optsub { font-size: 12px; color: var(--fbx-text-muted); margin-top: 2px; }
.fbx-acdlg__source { min-height: 38px; }
.fbx-acdlg__copylist { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; padding: 10px 12px; background: var(--fbx-surface-sunken); border-radius: var(--fbx-radius-sm); font-size: 12.5px; }
.fbx-acdlg__copyitem { display: flex; gap: 7px; align-items: center; color: var(--fbx-text); }
.fbx-acdlg__copyitem > .fas { font-size: 11px; width: 12px; color: var(--fbx-status-ok); }
.fbx-acdlg__copyitem--no, .fbx-acdlg__copyitem--no > .fas { color: var(--fbx-text-subtle); }
.fbx-acdlg__actions { flex-wrap: wrap; }

/* -- tablet landscape (< 1280px) ------------------------------------------------------------------- */
@media (max-width: 1279.98px) {
    .fbx-acft__grid { grid-template-columns: minmax(0, 1fr) 300px; }
    .fbx-acft__fields3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fbx-acft__units { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -- tablet portrait (< 1024px): one column ----------------------------------------------------------- */
@media (max-width: 1023.98px) {
    .fbx-acft__grid { grid-template-columns: minmax(0, 1fr); }
    .fbx-acft__phase { grid-template-columns: 30px minmax(0, 1fr) 130px 130px; }
    .fbx-acftlist__type { max-width: 200px; }
}

/* -- phone (< 768px) --------------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .fbx-acftlist__table .fbx-table__toolbar { flex-wrap: wrap; }
    .fbx-acftlist__type { max-width: 150px; }
    .fbx-acft__head { gap: 10px; }
    .fbx-acft__tile { width: 38px; height: 38px; }
    .fbx-acft__title { font-size: 20px; }
    .fbx-acft__fields3, .fbx-acft__fields2, .fbx-acft__units { grid-template-columns: minmax(0, 1fr); }
    .fbx-acft__phase { grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "i n n" "i s f"; }
    .fbx-acdlg__copylist { grid-template-columns: minmax(0, 1fr); }
    /* toasts stay clear of the bottom action bar */
    .fbx-toasts.fbx-acft-toast { margin-bottom: 60px; }
}

/* == 11. Flight recordings ================================================= */
/* Design "Recordings" (Claude Design). List: RecordingList.razor, detail: RecordingDetail.razor with
   Components/Recording/*. Breakpoints like everywhere: desktop >= 1280px, tabletL >= 1024px, tabletP >= 768px. */

/* -- list -------------------------------------------------------------------------------------------- */
.fbx-reclist { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fbx-reclist__table .fbx-table__toolbar { flex-wrap: nowrap; }
.fbx-reclist__nowrap { white-space: nowrap; }
.fbx-reclist__chip {
    display: inline-flex; align-items: center; flex: none; height: 32px; padding: 0 12px; border-radius: var(--fbx-radius-pill);
    font: inherit; font-size: 12.5px; white-space: nowrap; cursor: pointer;
    background: var(--fbx-surface-sunken); color: var(--fbx-text); border: 1px solid var(--fbx-border);
}
.fbx-reclist__chip--on { background: var(--primary-color); border-color: var(--primary-color); color: var(--fbx-text-on-dark); font-weight: 600; }
.fbx-reclist__chipcount { font-family: var(--fbx-font-mono); margin-left: 6px; font-weight: 700; color: var(--fbx-status-warn); }
.fbx-reclist__chip--on .fbx-reclist__chipcount { color: var(--fbx-text-on-dark); }
.fbx-reclist__route { font-family: var(--fbx-font-mono); font-size: 14px; font-weight: 700; white-space: nowrap; }
.fbx-reclist__note { font-size: 13px; }
.fbx-reclist__note--generated { color: var(--fbx-text-subtle); }
.fbx-reclist__logged { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--fbx-text-muted); white-space: nowrap; }
.fbx-reclist__logged > .fas { color: var(--fbx-status-ok); font-size: 11px; }
.fbx-reclist__dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--fbx-status-warn); }
.fbx-reclist__skeleton {
    display: inline-block; width: 64px; height: 12px; border-radius: 3px; background-size: 200% 100%;
    background-image: linear-gradient(90deg, var(--silver-white), var(--fbx-surface-sunken), var(--silver-white)); animation: fbx-recshimmer 1.2s linear infinite;
}
@keyframes fbx-recshimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* -- detail: header + figures ---------------------------------------------------------------------- */
.fbx-rec { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fbx-rec__head { flex: none; display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; min-width: 0; position: relative; }
.fbx-rec__back { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; margin-left: -8px; flex: none; }
.fbx-rec__who { flex: 1; min-width: 0; }
.fbx-rec__titlerow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fbx-rec__title { margin: 0; font-size: 26px; font-weight: 600; font-family: var(--fbx-font-mono); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fbx-rec__nowrap { white-space: nowrap; flex: none; }
.fbx-rec__rules { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.fbx-rec__rulesarrow { font-size: 9px; color: var(--silver-dark); }
.fbx-rec__subline { font-size: 13px; color: var(--fbx-text-muted); margin-top: 2px; min-width: 0; }
.fbx-rec__subline > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.fbx-rec__kpis {
    flex: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 10px; overflow: hidden;
    background: var(--fbx-surface); border: 1px solid var(--fbx-border); border-radius: var(--fbx-radius); box-shadow: var(--fbx-shadow-sm);
}
.fbx-rec__kpi { padding: 7px 14px; border-right: 1px solid var(--fbx-border); min-width: 0; }
.fbx-rec__kpi:last-child { border-right: none; }
.fbx-rec__kpilabel { font-size: 11.5px; color: var(--fbx-text-muted); }
.fbx-rec__kpiline { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.fbx-rec__kpivalue { font-family: var(--fbx-font-mono); font-size: 17px; font-weight: 600; white-space: nowrap; }
.fbx-rec__kpiunit { font-family: var(--fbx-font-mono); font-size: 11.5px; color: var(--fbx-text-muted); }
.fbx-rec__kpisub { font-size: 11px; color: var(--fbx-text-subtle); margin-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fbx-rec__phonetabs { margin-bottom: 8px; }

/* -- detail: map + timeline ---------------------------------------------------------------------------- */
.fbx-rec__body { flex: 1; min-height: 0; display: flex; gap: 12px; }
.fbx-rec__main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.fbx-rec__main.fbx-rec__main--hidden, .fbx-rec__rail.fbx-rec__rail--hidden { display: none; }
.fbx-rec__map {
    flex: 1; min-height: 200px; position: relative; overflow: hidden;
    background: var(--fbx-surface-sunken); border: 1px solid var(--fbx-border); border-radius: var(--fbx-radius) var(--fbx-radius) 0 0;
}
.fbx-root .fbx-rec__map .fbx-flightmap { border: none; position: absolute; inset: 0; }
.fbx-rec__readout {
    position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 80px);
    background: var(--fbx-surface); border: 1px solid var(--fbx-border-strong); border-radius: var(--fbx-radius); box-shadow: var(--fbx-shadow);
    padding: 5px 10px; font-family: var(--fbx-font-mono); font-size: 12px; pointer-events: none;
}
.fbx-rec__readoutdot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-color); flex: none; }
.fbx-rec__readoutclock { font-weight: 700; white-space: nowrap; }
.fbx-rec__readoutdata { color: var(--fbx-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbx-rec__maptools { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; flex-direction: column; gap: 4px; }
.fbx-rec__maptool { width: 36px; height: 36px; min-height: 36px; padding: 0; justify-content: center; background: var(--fbx-surface); }
.fbx-rec__selbar {
    display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; width: 100%; text-align: left; cursor: pointer; font: inherit; color: var(--fbx-text);
    background: var(--fbx-surface); border: 1px solid var(--fbx-border); border-top: none;
}
.fbx-rec__seltime { font-family: var(--fbx-font-mono); font-size: 12.5px; font-weight: 700; flex: none; }
.fbx-rec__seltext { font-size: 12.5px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbx-rec__selchev { font-size: 11px; color: var(--silver-dark); }
.fbx-rec__timeline {
    flex: none; padding: 10px 16px 8px; background: var(--fbx-surface);
    border: 1px solid var(--fbx-border); border-top: none; border-radius: 0 0 var(--fbx-radius) var(--fbx-radius);
}

/* timeline: a label column (hidden on the phone) and the lanes; all positions are fractions of the recording (--f).
   With the speed line, the speed axis labels take --tl-right to the right of the lanes (not on the phone). */
.fbx-rectl {
    --tl-label: 84px; --tl-gap: 12px; --tl-off: calc(var(--tl-label) + var(--tl-gap)); --tl-right: 0px;
    position: relative; padding-right: var(--tl-right); user-select: none; -webkit-user-select: none;
}
.fbx-rectl--speed { --tl-right: 36px; }
.fbx-rectl--compact { --tl-off: 0px; --tl-right: 0px; }
.fbx-rectl__row { display: grid; grid-template-columns: var(--tl-label) minmax(0, 1fr); column-gap: var(--tl-gap); align-items: center; }
.fbx-rectl--compact .fbx-rectl__row { grid-template-columns: minmax(0, 1fr); }
.fbx-rectl--compact .fbx-rectl__label { display: none; }
.fbx-rectl__row + .fbx-rectl__row { margin-top: 8px; }
.fbx-rectl__row + .fbx-rectl__row--rules { margin-top: 4px; }
.fbx-rectl__label { position: relative; font-size: 11.5px; color: var(--fbx-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbx-rectl__row--alt .fbx-rectl__label { align-self: stretch; overflow: visible; }
.fbx-rectl__altname { position: absolute; left: 0; bottom: -2px; }
.fbx-rectl__lane { position: relative; min-width: 0; }
.fbx-rectl__phases { height: 18px; }
.fbx-rectl__phase { position: absolute; top: 0; height: 18px; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; font-size: 11px; font-weight: 600; }
.fbx-rectl__phase--parked { background: var(--silver-light); color: var(--fbx-text-muted); }
.fbx-rectl__phase--ground { background: var(--silver-dark); color: #fff; }
.fbx-rectl__phase--air { background: var(--primary-color); color: #fff; }
.fbx-rectl__rules { height: 14px; }
.fbx-rectl__rule {
    position: absolute; top: 0; height: 14px; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap;
    color: var(--fbx-text-on-dark); font-size: 10px; font-weight: 700; letter-spacing: .04em; border-right: 2px solid var(--fbx-surface);
}
.fbx-rectl__rule--vfr { background: var(--flightrules-vfr); }
.fbx-rectl__rule--ifr { background: var(--flightrules-ifr); }
.fbx-rectl__events { height: 26px; }
.fbx-rectl__row--pilot .fbx-rectl__events { border-bottom: 1px solid var(--fbx-border); }
.fbx-rectl__ev {
    position: absolute; left: calc(var(--f) * 100%); top: 2px; transform: translateX(-50%); width: 22px; height: 22px; padding: 0;
    border-radius: 50%; border: 1.5px solid; display: flex; align-items: center; justify-content: center; cursor: pointer;
    font-family: var(--fbx-font-mono); font-size: 10px; font-weight: 700; line-height: 1;
}
.fbx-rectl__ev::after { content: ""; position: absolute; inset: -6px; }
.fbx-rectl__ev--detected { background: var(--sidebar-color); color: #fff; border-color: var(--sidebar-color); }
.fbx-rectl__ev--pilot { background: var(--fbx-surface); color: var(--accent-color); border-color: var(--accent-color); }
.fbx-rectl__ev--cluster { background: var(--fbx-surface); color: var(--fbx-text); border-color: var(--fbx-border-strong); }
.fbx-rectl__ev--unfinished { background: var(--fbx-status-warn-bg); color: var(--fbx-status-warn); border-color: var(--fbx-status-warn); border-style: dashed; }
.fbx-rectl__ev--selected { box-shadow: 0 0 0 2px var(--fbx-surface), 0 0 0 4px var(--primary-color); z-index: 1; }
.fbx-rectl__alt { height: 84px; cursor: pointer; touch-action: none; }
.fbx-rectl__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fbx-rectl__grid { stroke: var(--fbx-border); stroke-width: 1; }
.fbx-rectl__area { fill: var(--primary-lighter-color); opacity: .35; }
.fbx-rectl__terrain { fill: #C9B193; stroke: #A88C6C; stroke-width: 1; }
.fbx-rectl__line { fill: none; stroke: var(--primary-color); stroke-width: 2; }
.fbx-rectl__speed { fill: none; stroke: var(--accent-dark-color); stroke-width: 1.75; stroke-dasharray: 5 3; stroke-linejoin: round; }
.fbx-rectl__speedname { color: var(--accent-dark-color); }
.fbx-rectl__speedlabel {
    position: absolute; left: calc(100% + 6px); transform: translateY(-50%); pointer-events: none;
    font-family: var(--fbx-font-mono); font-size: 10.5px; color: var(--accent-dark-color); white-space: nowrap;
}
.fbx-rectl--compact .fbx-rectl__speedlabel { display: none; }
.fbx-rectl__noprofile { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--fbx-text-subtle); }
.fbx-rectl__altlabel { position: absolute; right: 0; transform: translateY(-50%); font-family: var(--fbx-font-mono); font-size: 10.5px; color: var(--fbx-text-subtle); }
.fbx-rectl__thumb {
    position: absolute; width: 28px; height: 28px; transform: translate(-50%, -50%); z-index: 2;
    display: flex; align-items: center; justify-content: center; cursor: ew-resize; touch-action: none; outline: none;
}
.fbx-rectl__thumbdot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent-color); box-shadow: 0 0 0 2px var(--fbx-surface), var(--fbx-shadow-sm); }
.fbx-rectl__thumb:focus-visible .fbx-rectl__thumbdot { box-shadow: 0 0 0 2px var(--fbx-surface), 0 0 0 4px var(--primary-color); }
.fbx-rectl__cursor {
    position: absolute; top: -4px; bottom: 15px; width: 0; margin-left: -1px; pointer-events: none;
    left: calc(var(--tl-off) + (100% - var(--tl-off) - var(--tl-right)) * var(--f)); border-left: 2px solid var(--accent-color);
}
.fbx-rectl__ticks { position: relative; height: 16px; margin: 3px 0 0 var(--tl-off); }
.fbx-rectl__tick { position: absolute; left: calc(var(--f) * 100%); top: 0; transform: translateX(-50%); font-family: var(--fbx-font-mono); font-size: 10.5px; color: var(--fbx-text-subtle); white-space: nowrap; }

/* -- detail: rail ------------------------------------------------------------------------------------ */
.fbx-rec__rail {
    width: 380px; flex: none; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
    background: var(--fbx-surface); border: 1px solid var(--fbx-border); border-radius: var(--fbx-radius); box-shadow: var(--fbx-shadow-sm);
}
.fbx-rec__tabs { padding: 0 14px; flex: none; margin-bottom: 0; }
.fbx-rec__tab { background: none; border: none; border-bottom: 2px solid transparent; font: inherit; padding: 10px 0 8px; }
.fbx-rec__tab.fbx-tab--active { border-bottom-color: var(--primary-color); }
.fbx-rec__tabcount { font-family: var(--fbx-font-mono); font-size: 11px; color: var(--fbx-text-subtle); font-weight: 400; }
.fbx-rec__filters { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--fbx-border); flex: none; flex-wrap: wrap; }
.fbx-rec__chip {
    display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 11px; border-radius: var(--fbx-radius-pill); cursor: pointer;
    background: var(--fbx-surface-sunken); color: var(--fbx-text); border: 1px solid var(--fbx-border); font: inherit; font-size: 12px;
}
.fbx-rec__chip--on { background: var(--primary-color); border-color: var(--primary-color); color: #fff; font-weight: 600; }
.fbx-rec__evlist { flex: 1; min-height: 0; overflow: auto; }
.fbx-rec__evempty { padding: 20px 14px; font-size: 13px; color: var(--fbx-text-muted); }
.fbx-rec__evgroup { display: flex; align-items: baseline; gap: 8px; padding: 6px 14px; background: var(--fbx-surface-sunken); border-bottom: 1px solid var(--fbx-border); font-size: 12px; }
.fbx-rec__evgrouplabel { font-weight: 700; }
.fbx-rec__evgroupsub { margin-left: auto; font-family: var(--fbx-font-mono); color: var(--fbx-text-muted); white-space: nowrap; }
.fbx-rec__ev { display: flex; gap: 10px; padding: 9px 12px 9px 14px; min-height: 44px; border-bottom: 1px solid var(--fbx-border); cursor: pointer; }
.fbx-rec__ev:hover { background: var(--fbx-surface-sunken); }
.fbx-rec__ev--selected, .fbx-rec__ev--selected:hover { background: var(--primary-lighter-color); box-shadow: inset 3px 0 0 var(--primary-color); }
.fbx-rec__evtime { font-family: var(--fbx-font-mono); font-size: 12.5px; font-weight: 600; width: 38px; flex: none; padding-top: 3px; }
.fbx-rec__evdot {
    width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1.5px solid; display: flex; align-items: center; justify-content: center; font-size: 10px;
}
.fbx-rec__evdot--detected { background: var(--sidebar-color); color: #fff; border-color: var(--sidebar-color); }
.fbx-rec__evdot--pilot { background: var(--fbx-surface); color: var(--accent-color); border-color: var(--accent-color); }
/* unfinished pilot entry (time + position stamped, content missing): dashed amber, like the app's card */
.fbx-rec__evdot--unfinished { background: var(--fbx-status-warn-bg); color: var(--fbx-status-warn); border-color: var(--fbx-status-warn); border-style: dashed; }
.fbx-rec__evbody { flex: 1; min-width: 0; }
.fbx-rec__evtitle { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 13px; font-weight: 600; }
.fbx-rec__unfinished {
    font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; line-height: 16px; padding: 0 5px; border-radius: 3px;
    color: var(--fbx-status-warn); background: var(--fbx-status-warn-bg); border: 1px dashed var(--fbx-status-warn);
}
.fbx-rec__evdetail { font-size: 12px; line-height: 1.45; color: var(--fbx-text-muted); margin-top: 2px; text-wrap: pretty; overflow-wrap: anywhere; }
.fbx-rec__ev--selected .fbx-rec__evdetail { color: var(--fbx-text); }
.fbx-rec__evrules { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.fbx-rec__evrules > .fas { font-size: 10px; color: var(--silver-dark); }
.fbx-rec__evoffs { display: flex; gap: 10px; margin-top: 3px; }
.fbx-rec__evoffs > span { display: inline-flex; align-items: center; gap: 4px; font-family: var(--fbx-font-mono); font-size: 11px; color: var(--fbx-text-subtle); }
.fbx-rec__ev--selected .fbx-rec__evoffs > span { color: var(--fbx-text-muted); }
.fbx-rec__evoffs .fas { font-size: 9px; }

/* summary */
.fbx-rec__summary { flex: 1; min-height: 0; overflow: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 16px; }
.fbx-rec__spacer { flex: 1; }
.fbx-rec__logcard { border: 1px solid var(--fbx-border); border-radius: var(--fbx-radius); }
.fbx-rec__logcard--open { background: var(--fbx-status-warn-bg); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.fbx-rec__logcardhead { display: flex; align-items: flex-start; gap: 9px; }
.fbx-rec__logcardhead > .fas { color: var(--fbx-status-warn); margin-top: 3px; }
.fbx-rec__logcardtitle { font-size: 13.5px; font-weight: 600; }
.fbx-rec__logcardtext { font-size: 12.5px; color: var(--fbx-text-muted); margin-top: 2px; text-wrap: pretty; }
.fbx-rec__logbtn { height: 40px; min-height: 40px; justify-content: center; align-self: flex-start; }
.fbx-rec__logcard--done { background: var(--fbx-status-ok-bg); padding: 10px 14px; min-height: 44px; display: flex; align-items: center; gap: 9px; font-size: 13px; flex-wrap: wrap; }
.fbx-rec__logcard--done > .fas { color: var(--fbx-status-ok); }
.fbx-rec__logcard--done .fbx-rec__logcardtitle { font-size: 13px; }
.fbx-rec__loglink { font-weight: 600; }
.fbx-rec__kpigrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fbx-rec__kpitile { background: var(--fbx-surface-sunken); border-radius: var(--fbx-radius-sm); padding: 8px 10px; min-width: 0; }
.fbx-rec__kpitile .fbx-rec__kpiline { margin-top: 2px; }
.fbx-rec__kpitile .fbx-rec__kpisub { display: block; margin: 1px 0 0; }
.fbx-rec__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--fbx-text-subtle); margin-bottom: 10px; }
.fbx-rec__times { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.fbx-rec__timesline { position: absolute; left: 12.5%; right: 12.5%; top: 5px; height: 2px; background: var(--fbx-border); }
.fbx-rec__timesair { position: absolute; left: 37.5%; right: 37.5%; top: 5px; height: 2px; background: var(--primary-color); }
.fbx-rec__timept { display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative; }
.fbx-rec__timeptdot { width: 12px; height: 12px; border-radius: 50%; background: var(--fbx-surface); border: 2px solid var(--silver-mid); }
.fbx-rec__timeptdot--air { border-color: var(--primary-color); }
.fbx-rec__timeptvalue { font-family: var(--fbx-font-mono); font-size: 15px; font-weight: 600; }
.fbx-rec__timeptlabel { font-size: 11.5px; color: var(--fbx-text-muted); text-align: center; }
.fbx-rec__facts { display: flex; flex-direction: column; }
.fbx-rec__facts > .fbx-rec__eyebrow { margin-bottom: 4px; }
.fbx-rec__fact { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--fbx-border); font-size: 13px; }
.fbx-rec__fact:last-child { border-bottom: none; }
.fbx-rec__factlabel { color: var(--fbx-text-muted); flex: none; }
.fbx-rec__factvalue { text-align: right; min-width: 0; }
a.fbx-rec__factvalue { font-weight: 600; }
.fbx-rec__planlink { font-weight: 600; }
.fbx-rec__plansub { display: block; font-family: var(--fbx-font-mono); font-size: 11.5px; color: var(--fbx-text-subtle); margin-top: 2px; }
.fbx-rec__plansub--text { font-family: inherit; text-wrap: pretty; }
.fbx-rec__plangone { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--fbx-text-muted); }
.fbx-rec__plangone > .fas { font-size: 11px; }
.fbx-rec__icao { font-weight: 600; }
.fbx-rec__airportname { color: var(--fbx-text-muted); margin-left: 5px; }
.fbx-rec__noteshead { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.fbx-rec__noteshead > .fbx-rec__eyebrow { margin-bottom: 0; }
.fbx-rec__smallbtn { height: 32px; min-height: 32px; padding: 0 10px; font-size: 12.5px; }
.fbx-rec__notetext { font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.fbx-rec__notetext--generated { color: var(--fbx-text-subtle); }
.fbx-rec__notehint { font-size: 11.5px; color: var(--fbx-text-subtle); margin-top: 4px; }
textarea.fbx-rec__notearea { display: block; width: 100%; min-height: 76px; resize: vertical; font-size: 13.5px; line-height: 1.5; }
.fbx-rec__noteactions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }

/* -- map: event pins + position (content of Google Maps advanced markers, see wwwroot/GoogleMaps.js) -- */
.fbx-map-evpin { --fbx-evpin-size: 30px; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.fbx-map-evpin--selected { --fbx-evpin-size: 38px; }
.fbx-map-evpin__dot {
    box-sizing: border-box; width: var(--fbx-evpin-size); height: var(--fbx-evpin-size); flex: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 13px;
    background: #fff; color: var(--accent-color); border: 3px solid var(--accent-color); box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.fbx-map-evpin--selected .fbx-map-evpin__dot { font-size: 16px; border-width: 4px; }
.fbx-map-evpin--ground .fbx-map-evpin__dot { background: var(--sidebar-color); color: #fff; border-color: #fff; }
.fbx-map-evpin--ground.fbx-map-evpin--selected .fbx-map-evpin__dot { border-color: var(--primary-lighter-color); }
.fbx-map-evpin--unfinished .fbx-map-evpin__dot { background: var(--fbx-status-warn-bg); color: var(--fbx-status-warn); border-color: var(--fbx-status-warn); border-style: dashed; }
.fbx-map-evpin__dot--count { font-family: var(--fbx-font-mono, monospace); font-weight: 700; font-size: 14px; }
.fbx-map-evpin__label {
    background: var(--sidebar-color); color: #fff; font-family: var(--fbx-font-mono, monospace); font-size: 12px; font-weight: 600;
    padding: 4px 8px; border-radius: 4px; white-space: nowrap; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.fbx-map-position { box-sizing: border-box; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-color); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }

/* -- share dialog ------------------------------------------------------------------------------------ */
.fbx-recshare__panel { max-width: 760px; }
.fbx-recshare__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 12px 20px; border-bottom: 1px solid var(--fbx-border); flex: none; }
.fbx-recshare__headicon { color: var(--primary-color); }
.fbx-recshare__title { font-size: 17px; font-weight: 600; flex: 1; min-width: 0; }
.fbx-recshare__close { width: 40px; height: 40px; min-height: 40px; padding: 0; justify-content: center; color: var(--fbx-text-muted); }
.fbx-recshare__body { flex: 1; min-height: 0; overflow: auto; padding: 16px 20px; }
.fbx-recshare__intro { font-size: 13px; color: var(--fbx-text-muted); line-height: 1.5; margin-bottom: 14px; text-wrap: pretty; }
.fbx-recshare__grid { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 22px; align-items: start; }
.fbx-recshare__settings { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fbx-recshare__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fbx-recshare__changed { display: inline-block; font-size: 10.5px; font-weight: 600; color: var(--primary-color); background: var(--primary-lighter-color); border-radius: 3px; padding: 1px 6px; margin-left: 7px; vertical-align: 1px; }
.fbx-recshare__reset { align-self: flex-start; border: none; background: none; padding: 0; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--primary-light-color); }
.fbx-recshare__reset:hover { color: var(--primary-color); text-decoration: underline; }
.fbx-recshare__reset > .fas { font-size: 11px; margin-right: 5px; }
.fbx-recshare__previewline { font-size: 11.5px; color: var(--fbx-text-muted); font-family: var(--fbx-font-mono); line-height: 1.4; }
.fbx-recshare__previewtrack { height: 150px; border-top: 1px solid var(--fbx-border); background: var(--fbx-surface-sunken); display: flex; }
.fbx-recshare__previewtrack > svg { width: 100%; height: 100%; }
.fbx-recshare__trackcasing { fill: none; stroke: #fff; stroke-width: 6px; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fbx-recshare__trackline { fill: none; stroke: #C4009A; stroke-width: 3px; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fbx-recshare__foot { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--fbx-border); flex: none; flex-wrap: wrap; }
.fbx-recshare__footlink { font-size: 12.5px; flex: 1; min-width: 0; }
.fbx-recshare__footbtn { height: 40px; min-height: 40px; }

/* -- tablet landscape (< 1280px) -------------------------------------------------------------------- */
@media (max-width: 1279.98px) {
    .fbx-rec__head { margin: 0 0 8px; }
    .fbx-rec__rail { width: 340px; }
    .fbx-rectl__alt { height: 70px; }
}

/* -- tablet portrait (< 1024px): map and timeline above the rail, the body scrolls ---------------------- */
@media (max-width: 1023.98px) {
    .fbx-rec__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fbx-rec__kpi:nth-child(3n) { border-right: none; }
    .fbx-rec__kpi:nth-child(-n+3) { border-bottom: 1px solid var(--fbx-border); }
    .fbx-rec__body { flex-direction: column; gap: 10px; overflow: auto; }
    .fbx-rec__main { flex: none; }
    .fbx-rec__map { flex: none; height: 440px; }
    .fbx-rec__rail { width: auto; flex: none; height: 480px; }
    .fbx-rectl__alt { height: 92px; }
}

/* -- phone (< 768px): Map / Events / Summary tabs ------------------------------------------------------- */
@media (max-width: 767.98px) {
    .fbx-reclist__table .fbx-table__toolbar { flex-wrap: wrap; }
    .fbx-reclist__chip { height: 40px; }
    .fbx-table__toolbar .fbx-reclist__refresh { min-width: 44px; min-height: 44px; padding: 0; justify-content: center; }
    .fbx-rec__title { font-size: 20px; }
    .fbx-rec__refresh { width: 44px; padding: 0; justify-content: center; }
    .fbx-rec__body { gap: 0; overflow: visible; }
    .fbx-rec__main { flex: 1; }
    .fbx-rec__map { flex: 1; height: auto; min-height: 220px; }
    .fbx-rec__maptool { width: 44px; height: 44px; min-height: 44px; }
    .fbx-rec__timeline { padding: 10px 12px 6px; }
    .fbx-rec__rail { flex: 1; height: auto; }
    .fbx-rec__chip { height: 32px; }
    .fbx-rec__logbtn { height: 44px; min-height: 44px; align-self: stretch; }
    .fbx-rectl__alt { height: 56px; }
    .fbx-rectl__thumb { width: 44px; height: 44px; }
    .fbx-recshare { padding: 0; align-items: stretch; }
    .fbx-recshare__panel { max-width: 100%; border-radius: 0; }
    .fbx-recshare__grid, .fbx-recshare__fields { grid-template-columns: minmax(0, 1fr); }
    .fbx-recshare__previewtrack { height: 120px; }
}

/* == 12. Logbook =========================================================== */
/* Design "Logbook" (Claude Design). List: LogbookList.razor; flight entry: LogbookEntryDetail.razor; carried-forward
   totals: LogbookBaseEntry.razor (same frame as the entry). Breakpoints like everywhere: desktop >= 1280px (breadcrumbs,
   side column 320px), tabletL >= 1024px (back button, side column 280px), tabletP >= 768px (one column, side cards
   side by side below), phone (bottom action bar). */

/* -- list -------------------------------------------------------------------------------------------- */
.fbx-loglist { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fbx-loglist__table .fbx-table__toolbar { flex-wrap: nowrap; }
.fbx-loglist__nowrap { white-space: nowrap; }
.fbx-loglist__divider { width: 1px; height: 22px; background: var(--fbx-border); margin: 0 4px; flex: none; }
.fbx-loglist__chips { display: flex; gap: 6px; align-items: center; flex: none; min-width: 0; }
.fbx-loglist__chip {
    display: inline-flex; align-items: center; flex: none; height: 32px; padding: 0 12px; border-radius: var(--fbx-radius-pill);
    font: inherit; font-size: 12.5px; white-space: nowrap; cursor: pointer;
    background: var(--fbx-surface-sunken); color: var(--fbx-text); border: 1px solid var(--fbx-border);
}
.fbx-loglist__chip--on { background: var(--primary-color); border-color: var(--primary-color); color: var(--fbx-text-on-dark); font-weight: 600; }
.fbx-loglist__chipcount { font-family: var(--fbx-font-mono); margin-left: 6px; opacity: .75; }
.fbx-loglist__search { flex: 0 1 320px; }
.fbx-loglist__route { font-family: var(--fbx-font-mono); font-size: 14px; font-weight: 700; white-space: nowrap; }
.fbx-loglist__remarks { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.fbx-loglist__recicon { font-size: 11px; color: var(--silver-dark); flex: none; }
.fbx-loglist__base { display: flex; align-items: center; gap: 10px; }
.fbx-loglist__base > .fas { color: var(--primary-color); font-size: 14px; }
.fbx-loglist__basetitle { font-size: 14px; font-weight: 600; white-space: nowrap; }
.fbx-loglist__basesplit { font-family: var(--fbx-font-mono); font-size: 12.5px; color: var(--fbx-text-muted); white-space: nowrap; }
.fbx-loglist__baseadd { font-size: 13px; font-weight: 600; color: var(--primary-light-color); }
.fbx-loglist__basetotal { font-weight: 700; }
.fbx-table tbody tr.fbx-loglist__baserow > td { background: var(--fbx-surface-sunken); border-top: 1px solid var(--fbx-border-strong); }

/* -- entry / carried forward: header ---------------------------------------------------------------------- */
.fbx-logentry { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fbx-logentry__head { flex: none; display: flex; align-items: center; gap: 8px; margin: 6px 0 12px; min-width: 0; position: relative; }
.fbx-logentry__back { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; flex: none; }
.fbx-logentry__tile {
    width: 44px; height: 44px; border-radius: var(--fbx-radius); flex: none; font-size: 17px;
    background: var(--primary-lighter-color); color: var(--primary-color); display: inline-flex; align-items: center; justify-content: center;
}
.fbx-logentry__who { flex: 1; min-width: 0; }
.fbx-logentry__titlerow { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.fbx-logentry__title { margin: 0; font-size: 26px; font-weight: 600; font-family: var(--fbx-font-mono); letter-spacing: -.01em; white-space: nowrap; line-height: 1.25; }
.fbx-logentry__title--text { font-family: var(--fbx-font); }
.fbx-logentry__nowrap { white-space: nowrap; }
.fbx-logentry__subline { font-size: 13px; color: var(--fbx-text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbx-logentry__headactions { display: flex; gap: 8px; flex: none; }

/* -- entry: body ---------------------------------------------------------------------------------------- */
.fbx-logentry__scroll { flex: 1; min-height: 0; overflow: auto; padding-bottom: 8px; }
.fbx-logentry__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.fbx-logentry__col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fbx-logentry__side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; align-items: start; min-width: 0; }
.fbx-logentry__pair { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.fbx-logentry__stack { display: flex; flex-direction: column; gap: 12px; }
.fbx-logentry__fields3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.fbx-logentry__fields4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; }
.fbx-logentry__fieldssplit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.fbx-logentry__remarks { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px 16px; }
.fbx-logentry__span { grid-column: 1 / -1; display: flex; flex-direction: column; }
.fbx-logentry__minw { min-width: 0; }
.fbx-logentry .fbx-field__hint { line-height: 1.4; }

/* inputs: blue ring = changed, red = cannot be stored, amber = worth a look */
.fbx-logentry__input { min-height: 38px; width: 100%; box-sizing: border-box; }
.fbx-logentry__input:focus { outline: none; border-color: var(--primary-light-color); box-shadow: 0 0 0 3px var(--primary-lighter-color); }
.fbx-logentry__input:disabled { background: var(--fbx-surface-sunken); color: var(--fbx-text-muted); }
.fbx-logentry__input--dirty, .fbx-logentry__input--dirty:focus { border-color: var(--primary-color); box-shadow: 0 0 0 1px var(--primary-color); }
.fbx-logentry__input--error, .fbx-logentry__input--error:focus { border-color: var(--fbx-status-danger); box-shadow: 0 0 0 1px var(--fbx-status-danger); }
.fbx-logentry__input--warn, .fbx-logentry__input--warn:focus { border-color: var(--fbx-status-warn); box-shadow: 0 0 0 1px var(--fbx-status-warn); }
.fbx-logentry__select--empty { color: var(--fbx-text-subtle); }
.fbx-field__hint.fbx-logentry__hint--error { color: var(--fbx-status-danger); }
.fbx-field__hint.fbx-logentry__hint--warn { color: var(--fbx-status-warn); }

/* flight rules segments + role buttons */
.fbx-logentry__seg { display: flex; gap: 4px; }
.fbx-logentry__segbtn {
    flex: 1; min-height: 38px; border-radius: var(--fbx-radius-sm); border: 1px solid var(--fbx-border-strong); cursor: pointer;
    background: var(--fbx-surface); color: var(--fbx-text-muted); font: inherit; font-size: 13px; font-weight: 600;
}
.fbx-logentry__segbtn--vfr.fbx-logentry__segbtn--on { background: var(--flightrules-vfr); border-color: var(--flightrules-vfr); color: var(--fbx-text); }
.fbx-logentry__segbtn--ifr.fbx-logentry__segbtn--on { background: var(--flightrules-ifr); border-color: var(--flightrules-ifr); color: var(--fbx-text); }
.fbx-logentry__roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.fbx-logentry__role {
    min-width: 0; min-height: 44px; padding: 5px 6px; border-radius: var(--fbx-radius-sm); border: 1px solid var(--fbx-border-strong);
    background: var(--fbx-surface); color: var(--fbx-text); cursor: pointer; font: inherit;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1.2;
}
.fbx-logentry__role--pic { background: var(--flightrole-pic); border-color: var(--flightrole-pic); color: var(--fbx-text-on-dark); }
.fbx-logentry__role--other { background: var(--flightrole-other); border-color: var(--flightrole-other); color: var(--fbx-text-on-dark); }
.fbx-logentry__rolelabel { font-size: 13px; font-weight: 700; }
.fbx-logentry__rolesub { font-size: 10.5px; opacity: .85; text-align: center; text-wrap: balance; max-width: 100%; }
.fbx-logentry__picrow { display: grid; grid-template-columns: minmax(0, 1fr) 90px; gap: 12px 16px; }
.fbx-logentry__info {
    display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--fbx-radius-sm);
    background: var(--fbx-surface-sunken); font-size: 13px; line-height: 1.45;
}
.fbx-logentry__info > .fas { margin-top: 2px; }
.fbx-logentry__info--pic { color: var(--flightrole-pic); }
.fbx-logentry__info--other { color: var(--flightrole-other); }
.fbx-logentry__info--error { color: var(--fbx-status-danger); }

/* check lines under a card */
.fbx-logentry__sumline {
    display: flex; align-items: center; gap: 6px 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--fbx-border);
    font-size: 13px; flex-wrap: wrap;
}
.fbx-logentry__sumline--flat { margin-top: 0; padding-top: 0; border-top: none; }
.fbx-logentry__muted { color: var(--fbx-text-muted); }
.fbx-logentry__strong { font-weight: 600; }
.fbx-logentry__strongest { font-weight: 700; }
.fbx-logentry__dot { color: var(--fbx-border-strong); }
.fbx-logentry__spacer { flex: 1; }
.fbx-logentry__check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.fbx-logentry__check--line { display: flex; align-items: flex-start; padding-top: 10px; border-top: 1px solid var(--fbx-border); }
.fbx-logentry__check--line > .fas { margin-top: 2px; }
.fbx-logentry__check--ok { color: var(--fbx-status-ok); }
.fbx-logentry__check--warn { color: var(--fbx-status-warn); }
.fbx-logentry__check--error { color: var(--fbx-status-danger); }
.fbx-logentry__sumcheck { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--fbx-border); }
.fbx-logentry__bar { height: 6px; border-radius: 3px; background: var(--fbx-surface-sunken); overflow: hidden; }
.fbx-logentry__barfill { height: 100%; border-radius: 3px; background: var(--fbx-border-strong); }
.fbx-logentry__barfill--ok { background: var(--fbx-status-ok); }
.fbx-logentry__barfill--warn { background: var(--fbx-status-warn); }

/* -- entry: side column ---------------------------------------------------------------------------------- */
.fbx-logentry__rec { overflow: hidden; }
.fbx-logentry__map { height: 190px; position: relative; background: var(--fbx-surface-sunken); border-bottom: 1px solid var(--fbx-border); }
.fbx-root .fbx-logentry__map .fbx-flightmap { border: none; position: absolute; inset: 0; }
.fbx-logentry__recbody { padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; }
.fbx-logentry__rectitle { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.fbx-logentry__rectitle > .fas { color: var(--primary-color); }
.fbx-logentry__recline { font-size: 12.5px; color: var(--fbx-text-muted); line-height: 1.5; }
.fbx-logentry__reclink { display: block; font-size: 13px; font-weight: 600; margin-top: 3px; }
.fbx-logentry__kvbody { display: flex; flex-direction: column; font-size: 13px; padding-top: 8px; }
.fbx-logentry__kvbody > .fbx-logentry__reclink { margin-top: 10px; }
.fbx-logentry__kv { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--fbx-border); }
.fbx-logentry__kv--last { border-bottom: none; }
.fbx-logentry__k { color: var(--fbx-text-muted); }
.fbx-logentry__v { display: inline-flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0 6px; text-align: right; }
.fbx-logentry__v > .fas { font-size: 11px; color: var(--fbx-text-subtle); }
.fbx-logentry__v.fbx-mono { font-size: 12.5px; }
.fbx-logentry__vdate { font-size: 12px; color: var(--fbx-text-subtle); }
.fbx-logentry__sumrow { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--fbx-border); }
.fbx-logentry__sumhead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.fbx-logentry__sumtotal { font-family: var(--fbx-font-mono); font-size: 15px; font-weight: 700; }
.fbx-logentry__sumsub { font-size: 11.5px; color: var(--fbx-text-subtle); font-family: var(--fbx-font-mono); }

/* -- phone bottom bar -------------------------------------------------------------------------------------- */
.fbx-logentry__bottombar { flex: none; padding-top: 10px; display: flex; gap: 8px; border-top: 1px solid var(--fbx-border); }
.fbx-logentry__bottombar .fbx-btn { min-height: 44px; flex: 1; justify-content: center; }

/* -- tablet landscape (< 1280px) ------------------------------------------------------------------------------ */
@media (max-width: 1279.98px) {
    .fbx-loglist__table .fbx-table__toolbar { flex-wrap: wrap; }
    .fbx-loglist__search { flex: 1 1 220px; }
    .fbx-loglist__remarks { max-width: 200px; }
    .fbx-loglist__remarkstext { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .fbx-logentry__head { margin: 0 0 10px; }
    .fbx-logentry__grid { grid-template-columns: minmax(0, 1fr) 280px; }
}

/* -- tablet portrait (< 1024px): one column, the side cards side by side below ------------------------------- */
@media (max-width: 1023.98px) {
    .fbx-logentry__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .fbx-logentry__side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fbx-logentry__pair { grid-template-columns: minmax(0, 1fr); }
    .fbx-logentry__fieldssplit { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* -- phone (< 768px) ----------------------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .fbx-loglist__chips { flex: 1 1 100%; overflow-x: auto; }
    .fbx-loglist__chip { height: 40px; }
    .fbx-loglist__search { flex: 1 1 100%; min-height: 44px; }
    .fbx-table__toolbar .fbx-loglist__toolbtn { min-height: 44px; }
    .fbx-table__toolbar .fbx-loglist__refresh { min-width: 44px; padding: 0; justify-content: center; }
    .fbx-logentry__title { font-size: 20px; }
    .fbx-logentry__refresh { width: 44px; padding: 0; justify-content: center; }
    .fbx-logentry__side { grid-template-columns: minmax(0, 1fr); }
    .fbx-logentry__map { height: 150px; }
    .fbx-logentry__fields3, .fbx-logentry__fields4, .fbx-logentry__roles, .fbx-logentry__fieldssplit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fbx-logentry__fields3.fbx-logentry__fields3--keep { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* toasts stay clear of the bottom action bar */
    .fbx-toasts.fbx-logentry-toast { margin-bottom: 60px; }
}

/* -- print (Print entry): the form without the page chrome -------------------------------------------------- */
@media print {
    .fbx-logentry__back, .fbx-logentry__refresh, .fbx-logentry .fbx-topmenu, .fbx-logentry__headactions, .fbx-logentry__bottombar,
    .fbx-logentry__rec, .fbx-menu-backdrop { display: none !important; }
    .fbx-logentry, .fbx-logentry__scroll { display: block; overflow: visible; }
    .fbx-logentry__grid { grid-template-columns: minmax(0, 1fr); }
    .fbx-logentry .fbx-card { break-inside: avoid; box-shadow: none; }
    .fbx-logentry__role--pic, .fbx-logentry__role--other, .fbx-logentry__segbtn--on { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* == 13. Sign-in flow ===================================================== */

/* Design "Sign-in": everything from the first byte until the dashboard - the boot card of index.html (Load app),
   /login (Sign in), /authentication/* (Verify, sign-out) and /userinit (Prepare data). One card on the clouds,
   the same markup in index.html and in FbxSignInCard. The legal texts open inside the card, which then grows to
   the reading width and scrolls internally. Breakpoints: desktop >= 1280, tabletL >= 1024, tabletP >= 768, phone. */

.fbx-signin {
    position: relative;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: var(--fbx-canvas) url("/assets/bg_main_clouds.jpg") center bottom / cover no-repeat;
}
.fbx-signin__page {
    position: absolute; inset: 0; overflow-y: auto;
    display: flex; flex-direction: column; align-items: center;
    padding: 96px 24px 48px;
}
.fbx-signin__card {
    --fbx-signin-bh: 40px;
    width: 100%; max-width: 440px; flex: none; min-height: 0;
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--fbx-surface); border-radius: var(--fbx-radius-lg); box-shadow: var(--fbx-shadow-lg);
}

/* -- head: wordmark, step label, phase segments ------------------------------------------------------------ */
.fbx-signin__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px 0; }
.fbx-signin__logo { display: block; height: 18px; width: auto; flex: none; }
.fbx-signin__phase { font-size: 12px; color: var(--fbx-text-subtle); text-align: right; }
.fbx-signin__segs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 12px 24px 0; }
.fbx-signin__seg { height: 3px; border-radius: 2px; background: var(--fbx-border); transition: background .3s; }
.fbx-signin__seg--done { background: var(--primary-color); }
.fbx-signin__seg--active { background: var(--primary-light-color); }
.fbx-signin__seg--failed { background: var(--fbx-status-danger); }

/* -- body ---------------------------------------------------------------------------------------------------- */
.fbx-signin__body { display: flex; flex-direction: column; gap: 16px; padding: 20px 24px 24px; }
.fbx-signin__notice {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--fbx-radius);
    background: var(--fbx-status-ok-bg); color: var(--fbx-status-ok); font-size: 13px; font-weight: 500;
}
.fbx-signin__notice[hidden] { display: none; }
.fbx-signin__titlerow { display: flex; align-items: center; gap: 12px; }
.fbx-signin__icon {
    flex: none; width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
    background: var(--fbx-surface-sunken); color: var(--primary-light-color);
}
.fbx-signin__icon--danger { background: var(--fbx-status-danger-bg); color: var(--fbx-status-danger); }
.fbx-signin__icon--ok { background: var(--fbx-status-ok-bg); color: var(--fbx-status-ok); }
/* the boot card shows its icon only while an update installs */
.fbx-signin__icon--boot { display: none; }
[data-boot="updating"] .fbx-signin__icon--boot { display: inline-flex; }
.fbx-signin__spin { display: inline-block; animation: fbx-signin-spin .9s linear infinite; }
@keyframes fbx-signin-spin { to { transform: rotate(360deg); } }
.fbx-signin__title { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.fbx-signin__text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--fbx-text-muted); text-wrap: pretty; }

/* progress bar: determinate while Blazor downloads its files (CSS variables set by Blazor), else sliding */
.fbx-signin__progress { display: flex; flex-direction: column; gap: 8px; }
.fbx-signin__progresshead { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--fbx-text-muted); }
.fbx-signin__pct { font-family: var(--fbx-font-mono); color: var(--fbx-text); }
[data-boot="loading"] .fbx-signin__pct::after { content: var(--blazor-load-percentage-text, "0%"); }
.fbx-signin__track { position: relative; height: 6px; border-radius: 3px; background: var(--fbx-surface-sunken); overflow: hidden; }
.fbx-signin__fill {
    height: 100%; width: var(--blazor-load-percentage, 0%); border-radius: 3px;
    background: var(--primary-light-color); transition: width .15s linear;
}
.fbx-signin__progress--indet .fbx-signin__fill,
[data-boot="checking"] .fbx-signin__fill,
[data-boot="updating"] .fbx-signin__fill {
    position: absolute; top: 0; bottom: 0; left: 0; width: 40%; transition: none;
    animation: fbx-signin-slide 1.1s ease-in-out infinite;
}
@keyframes fbx-signin-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* "taking longer than usual" */
.fbx-signin__slow {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 10px 10px 10px 14px;
    border-radius: var(--fbx-radius); background: var(--fbx-status-warn-bg);
}
.fbx-signin__slow > span { flex: 1 1 180px; min-width: 0; font-size: 13px; line-height: 1.45; }
.fbx-signin__slow > .fbx-btn { flex: none; height: var(--fbx-signin-bh); min-height: var(--fbx-signin-bh); }

/* init steps (/userinit) */
.fbx-signin__steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border: 1px solid var(--fbx-border); border-radius: var(--fbx-radius); }
.fbx-signin__step { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; padding: 7px 12px; }
.fbx-signin__step + .fbx-signin__step { border-top: 1px solid var(--fbx-border); }
.fbx-signin__stepicon { display: inline-flex; justify-content: center; font-size: 14px; line-height: 20px; }
.fbx-signin__steplabel { font-size: 13.5px; line-height: 20px; }
.fbx-signin__stepdetail { font-size: 12px; line-height: 1.4; color: var(--fbx-text-subtle); }
.fbx-signin__step--done .fbx-signin__stepicon { color: var(--fbx-status-ok); }
.fbx-signin__step--active .fbx-signin__stepicon { color: var(--primary-light-color); }
.fbx-signin__step--active .fbx-signin__steplabel { font-weight: 600; }
.fbx-signin__step--pending .fbx-signin__stepicon { color: var(--fbx-border-strong); }
.fbx-signin__step--pending .fbx-signin__steplabel { color: var(--fbx-text-subtle); }
.fbx-signin__step--failed .fbx-signin__stepicon,
.fbx-signin__step--failed .fbx-signin__steplabel,
.fbx-signin__step--failed .fbx-signin__stepdetail { color: var(--fbx-status-danger); }
.fbx-signin__step--failed .fbx-signin__steplabel { font-weight: 600; }

/* sign-in: button, redirect hint, "no account yet" */
.fbx-signin__cta { display: flex; flex-direction: column; gap: 10px; }
.fbx-signin__cta .fbx-btn { width: 100%; height: 44px; min-height: 44px; justify-content: center; font-size: 15px; }
.fbx-signin__hint { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.45; color: var(--fbx-text-subtle); }
.fbx-signin__hint > i { padding-top: 2px; font-size: 12px; }
.fbx-signin__divider { height: 1px; background: var(--fbx-border); }
.fbx-signin__noaccount { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.fbx-signin__noaccount-text { flex: 1 1 200px; min-width: 0; }
.fbx-signin__noaccount-title { font-size: 14px; font-weight: 600; }
.fbx-signin__noaccount-sub { margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--fbx-text-muted); }
.fbx-signin__badge { flex: none; }
.fbx-signin__badge img { display: block; width: 136px; margin: -8px; }

/* technical details */
.fbx-signin__details { display: flex; flex-direction: column; gap: 8px; }
.fbx-signin__detailstoggle {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 28px;
    padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--fbx-text-muted); cursor: pointer;
}
.fbx-signin__detailstoggle > i { width: 10px; font-size: 10px; }
.fbx-signin__detailsbox {
    display: flex; gap: 8px; align-items: flex-start; padding: 8px 8px 8px 12px; border-radius: var(--fbx-radius-sm);
    background: var(--fbx-surface-sunken); font-family: var(--fbx-font-mono); font-size: 12px; line-height: 1.5; color: var(--fbx-text-muted);
}
.fbx-signin__detailstext { flex: 1; min-width: 0; padding-top: 3px; word-break: break-word; }
.fbx-signin__copy { flex: none; width: 28px; height: 28px; min-height: 28px; padding: 0; justify-content: center; }

/* actions */
.fbx-signin__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.fbx-signin__actions .fbx-btn { flex: 1 1 0; height: var(--fbx-signin-bh); min-height: var(--fbx-signin-bh); justify-content: center; white-space: nowrap; }
.fbx-signin__link { align-self: center; padding: 4px 0; font-size: 13px; }

/* -- footer ------------------------------------------------------------------------------------------------ */
.fbx-signin__foot {
    flex: none; margin-top: auto; min-height: 40px; padding: 11px 24px;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px;
    background: var(--fbx-surface-sunken); border-top: 1px solid var(--fbx-border);
    font-size: 11.5px; color: var(--fbx-text-subtle);
}
.fbx-signin__footlinks { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.fbx-signin__linkbtn { padding: 0; border: 0; background: none; font: inherit; color: var(--primary-light-color); cursor: pointer; }
.fbx-signin__linkbtn:hover { color: var(--primary-color); text-decoration: underline; }

/* -- legal texts inside the card --------------------------------------------------------------------------- */
.fbx-signin__page--legal { padding: 48px 24px; overflow-y: hidden; }
.fbx-signin__card--legal { max-width: 760px; flex: 1 1 auto; }
.fbx-signin__legalhead { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 24px 4px 12px; }
.fbx-signin__legaltitle { flex: 1; min-width: 0; margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.fbx-signin__legalhead .fbx-signin__logo { height: 16px; }
.fbx-signin__back { flex: none; width: var(--fbx-signin-bh); height: var(--fbx-signin-bh); min-height: var(--fbx-signin-bh); padding: 0; justify-content: center; }
.fbx-signin__legaltabs { flex: none; margin-bottom: 0; padding: 0 24px; overflow-x: auto; scrollbar-width: none; }
.fbx-signin__legaltabs .fbx-tab {
    min-height: var(--fbx-signin-bh); padding: 0; border: 0; border-bottom: 2px solid transparent; background: none;
    font: inherit; white-space: nowrap;
}
.fbx-signin__legaltabs .fbx-tab--active { border-bottom-color: var(--primary-color); font-weight: 600; color: var(--fbx-text); }
.fbx-signin__legalbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px 24px 28px; display: flex; flex-direction: column; gap: 18px; }
.fbx-signin__asof { margin: 0; font-size: 12px; color: var(--fbx-text-subtle); }
.fbx-signin__provider { display: flex; flex-wrap: wrap; gap: 16px 32px; padding: 14px 16px; border-radius: var(--fbx-radius); background: var(--fbx-surface-sunken); }
.fbx-signin__providerbox { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; line-height: 1.5; }
.fbx-signin__providerbox strong { font-weight: 600; }
.fbx-signin__label { margin-bottom: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--fbx-text-subtle); }
.fbx-signin__mail { font-family: var(--fbx-font-mono); font-size: 13px; }
.fbx-signin__legalsec { display: flex; flex-direction: column; gap: 6px; }
.fbx-signin__legalsec h2 { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.fbx-signin__legaltext { font-size: 13.5px; line-height: 1.6; color: var(--fbx-text-muted); text-wrap: pretty; }
.fbx-signin__legaltext :where(p, ul, ol) { margin: 0 0 6px; }
.fbx-signin__legaltext :where(ul, ol) { padding-left: 20px; }
.fbx-signin__legaltext > :last-child { margin-bottom: 0; }
.fbx-signin__legaltext pre { margin-bottom: 6px; }
.fbx-signin__legaltext strong { font-weight: 600; color: var(--fbx-text); }
.fbx-signin__legaltext table { border-collapse: collapse; margin: 0 0 6px; font-size: 13px; }
.fbx-signin__legaltext :where(th, td) { border: 1px solid var(--fbx-border); padding: 4px 8px; text-align: left; }
/* address / contact blocks of the markdown documents (LegalDocumentParser), compact as in the design */
.fbx-signin__legaltext .fbx-legal__note { margin: 0 0 6px; padding: 10px 14px; border-left: 0; border-radius: var(--fbx-radius-sm); }
.fbx-signin__legaltext .fbx-legal__note p { font-size: 13px; line-height: 1.5; color: var(--fbx-text); }
.fbx-signin__legalerror { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--fbx-status-danger); }

/* -- unhandled error bar (#blazor-error-ui in index.html, shown by Blazor with display: block) --------------- */
#blazor-error-ui {
    display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
    background: var(--fbx-status-danger-bg); border-top: 1px solid var(--fbx-status-danger); box-shadow: var(--fbx-shadow);
    font-family: var(--fbx-font); color: var(--fbx-text);
}
.fbx-crash { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px 10px 20px; }
.fbx-crash__icon { color: var(--fbx-status-danger); font-size: 16px; }
.fbx-crash__text { flex: 1 1 220px; min-width: 0; font-size: 13.5px; line-height: 1.4; }
.fbx-crash__text strong { font-weight: 600; }
.fbx-crash__actions { display: flex; gap: 4px; margin-left: auto; }
.fbx-crash .fbx-btn { height: 40px; min-height: 40px; text-decoration: none; }
.fbx-crash .fbx-btn--primary, .fbx-crash .fbx-btn--primary:hover { color: var(--fbx-text-on-dark); }
.fbx-crash .dismiss { width: 40px; padding: 0; justify-content: center; }

/* -- tablet landscape (< 1280px): touch-sized buttons -------------------------------------------------------- */
@media (max-width: 1279.98px) {
    .fbx-signin__page { padding: 80px 24px 48px; }
    .fbx-signin__card { --fbx-signin-bh: 44px; }
    .fbx-signin__page--legal { padding: 40px 24px; }
    .fbx-signin__card--legal { max-width: 720px; }
    .fbx-crash .fbx-btn { height: 44px; min-height: 44px; }
    .fbx-crash .dismiss { width: 44px; }
}

/* -- tablet portrait (< 1024px): wider card, roomier padding --------------------------------------------------- */
@media (max-width: 1023.98px) {
    .fbx-signin__page { padding: 160px 32px 48px; }
    .fbx-signin__card { max-width: 480px; }
    .fbx-signin__head { padding: 20px 28px 0; }
    .fbx-signin__segs { padding: 12px 28px 0; }
    .fbx-signin__body { padding: 22px 28px 28px; }
    .fbx-signin__foot { padding: 12px 28px; }
    .fbx-signin__title { font-size: 22px; }
    .fbx-signin__page--legal { padding: 48px 32px; }
    .fbx-signin__card--legal { max-width: none; }
}

/* -- phone (< 768px): the card spans the shell gutter ----------------------------------------------------------- */
@media (max-width: 767.98px) {
    .fbx-signin__page { padding: 16px 8px 24px; }
    .fbx-signin__card { max-width: none; }
    .fbx-signin__head { padding: 16px 16px 0; }
    .fbx-signin__segs { padding: 12px 16px 0; }
    .fbx-signin__body { padding: 18px 16px 20px; }
    .fbx-signin__foot { padding: 11px 16px; }
    .fbx-signin__title { font-size: 19px; }
    .fbx-signin__page--legal { padding: 8px; }
    .fbx-signin__legalhead { padding: 8px 12px 4px 4px; }
    .fbx-signin__legaltabs { padding: 0 12px; }
    .fbx-signin__legalbody { padding: 16px; }
    .fbx-crash { padding: 10px 8px 10px 14px; }
}


/* == 14. Feedback ========================================================== */

/* -- Spinner / LoadingDiv -------------------------------------------------- */
.fbx-spinner {
    display: inline-block; flex: none; width: 32px; height: 32px; box-sizing: border-box;
    border: 3px solid var(--fbx-border); border-top-color: var(--primary-light-color); border-radius: 50%;
    animation: fbx-spin .8s linear infinite;
}
.fbx-spinner--sm { width: 18px; height: 18px; border-width: 2px; }
@keyframes fbx-spin { to { transform: rotate(360deg); } }

.fbx-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; color: var(--fbx-text-muted); }
.fbx-loading--small { min-height: 40px; }
.fbx-loading--small .fbx-spinner { width: 24px; height: 24px; }
.fbx-loading--medium { padding: 48px 0; }
.fbx-loading--large { width: 100%; min-height: 300px; }
.fbx-loading--large .fbx-spinner { width: 40px; height: 40px; }
.fbx-loading__text { margin: 0; font-size: var(--fbx-text-base); }

/* -- Toasts (FbxToastMessage, FbxLoadingToast) ----------------------------- */
.fbx-toasts {
    position: fixed; right: 16px; bottom: 16px; z-index: 1000;
    display: flex; flex-direction: column; gap: 8px; width: min(360px, calc(100vw - 32px));
    pointer-events: none;
    font-family: var(--fbx-font); font-size: 13px; line-height: 1.45; color: var(--fbx-text);
}
.fbx-toasts--top { top: 16px; bottom: auto; right: auto; left: 50%; transform: translateX(-50%); }
.fbx-toast {
    --fbx-toast-tone: var(--primary-light-color);
    pointer-events: auto; display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 8px 10px 12px; box-sizing: border-box;
    background: var(--fbx-surface); border: 1px solid var(--fbx-border); border-left: 3px solid var(--fbx-toast-tone);
    border-radius: var(--fbx-radius); box-shadow: var(--fbx-shadow-lg);
    animation: fbx-toast-in .18s ease-out;
}
.fbx-toast--success { --fbx-toast-tone: var(--fbx-status-ok); }
.fbx-toast--error { --fbx-toast-tone: var(--fbx-status-danger); }
.fbx-toast--loading { padding-right: 16px; }
.fbx-toast__icon { color: var(--fbx-toast-tone); font-size: 16px; margin-top: 1px; flex: none; }
.fbx-toast__body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fbx-toast__title { font-size: var(--fbx-text-sm); font-weight: 600; color: var(--fbx-text-muted); }
.fbx-toast__text { color: var(--fbx-text); }
.fbx-toast__close {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 28px; height: 28px; margin: -4px 0; padding: 0;
    border: none; border-radius: var(--fbx-radius-sm); background: none; color: var(--fbx-text-subtle); cursor: pointer;
}
.fbx-toast__close:hover { background: var(--silver-white); color: var(--fbx-text); }
@keyframes fbx-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* -- "New version available" banner (fbxscripts.js, signed-in pages only) -- */
.fbx-update-banner {
    position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 100000;
    display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); box-sizing: border-box;
    padding: 8px 8px 8px 16px;
    background: var(--primary-darker-color); color: var(--fbx-text-on-dark);
    border-radius: var(--fbx-radius-lg); box-shadow: var(--fbx-shadow-lg);
    font-family: var(--fbx-font); font-size: 13px; line-height: 1.4;
}
.fbx-update-banner__text { flex: 1; min-width: 0; }
.fbx-update-banner .fbx-btn { min-height: 36px; white-space: nowrap; }
.fbx-update-banner__dismiss {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 32px; height: 32px; padding: 0; border: none; border-radius: var(--fbx-radius-sm);
    background: none; color: var(--fbx-text-on-dark-muted); cursor: pointer;
}
.fbx-update-banner__dismiss:hover { color: var(--fbx-text-on-dark); background: rgba(255, 255, 255, .1); }
/* the toasts move up while the banner is shown */
body:has(> .fbx-update-banner) .fbx-toasts:not(.fbx-toasts--top) { bottom: 80px; }

/* -- Logbook export dialog ------------------------------------------------- */
.fbx-lbexport__range { margin-top: 6px; }
.fbx-lbexport__range .fbx-field__label { color: var(--fbx-text); }

@media (max-width: 767.98px) {
    .fbx-toasts { left: 8px; right: 8px; bottom: 8px; width: auto; }
    .fbx-toasts--top { top: 8px; bottom: auto; transform: none; }
    .fbx-update-banner { left: 8px; right: 8px; bottom: 8px; transform: none; max-width: none; }
}

@media print {
    .fbx-print-hide, .fbx-toasts, .fbx-update-banner { display: none !important; }
}