/* ============================================================
   manage.css — Manage tools: Solari override for the
   dummy-queue and country-gap tables (and their inputs/buttons).
   Consumes theme.css tokens.
   ============================================================ */

/* ---- Manage category toggle (2026-09-18) ----
   Single-select segmented control filtering the one shared tile carousel,
   replacing the old fixed two-section layout. Amber text/border only on
   .active, never a filled amber background (house rule). */
.mg-category-toggle { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
/* Single-tile categories (Import Status) render no carousel below the
   toggle at all - .bx-home's own padding/margin (sized for a box that
   normally also holds a tile row) then left a conspicuously oversized gap
   above the next section (2026-09-21, "Das ist zuviel"). Trims the box's
   own bottom padding/margin and the toggle's bottom margin (which had
   nothing left to separate from) specifically in that case. */
.bx-home.mg-category-box-compact { padding-bottom: 2px; margin-bottom: 0; }
.mg-category-box-compact .mg-category-toggle,
.mg-category-box-compact .area-tabs { margin-bottom: 0; }
.mg-cat-btn {
    background: var(--sol-panel-2);
    color: var(--sol-ink-dim);
    border: 1px solid var(--sol-line);
    border-radius: 999px;
    padding: 6px 14px;
    font-family: var(--font-mono);
    font-size: 12px;
    cursor: pointer;
}
.mg-cat-btn:hover { border-color: var(--sol-amber); color: var(--sol-ink); }
.mg-cat-btn.active { border-color: var(--sol-amber); color: var(--sol-amber); background: var(--sol-panel); }

/* Import Status "Data to Fix" jump filter (2026-09-22) - sits at the far
   right of the same toggle row via margin-left:auto on the flex
   container, same right-alignment trick as the nav bar's Quick Lookup
   input. Scoped to this one label/select pair, not .mg-cat-btn itself,
   since every other .mg-category-toggle user (the Manage tile switcher,
   Airline/Type's own view toggles) has no such trailing control. Only
   rendered at all while Data to Fix is the active view
   (isViewToggleHtml(), manage.js) - per the user, it "macht nur Sinn im
   Kontext von Data to fix", and hiding it there also avoids it wrapping
   onto its own line on Overview/Details, where it never had enough
   reason to be shown to justify the space anyway. */
.is-fix-filter-label { margin-left: auto; align-self: center; }
.is-fix-filter-select {
    background: var(--sol-panel-2);
    color: var(--sol-ink);
    border: 1px solid var(--sol-line);
    border-radius: var(--sol-radius);
    padding: 5px 8px;
    font-family: var(--font-mono);
    font-size: 12px;
}

/* ---- table heads ---- */
.dummy-queue-table th,
.country-gap-table th {
    background: var(--sol-bg-grain) !important;
    color: var(--sol-ink) !important;
    border-bottom: 1px solid var(--sol-line) !important;
}
/* .country-gap-table th-specific sizing - kept separate from the shared rule
   above so it doesn't bleed into .dummy-queue-table th, which has its own
   sizing (see its own checklist item in docs/style-css-migration.md).
   padding/font-size here match style.css's *later* (winning) declaration for
   this selector, not its first one - the two disagreed (10px 14px/14px vs.
   7px 12px/13px), and the second one was what was actually live. */
.country-gap-table th {
    width: auto;
    max-width: 600px;
    border-collapse: collapse;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    text-align: left;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 600;
}
/* .dummy-queue-table th-specific sizing - kept separate for the same reason
   as .country-gap-table th above. */
.dummy-queue-table th {
    padding: 8px 10px;
    text-align: left;
    position: sticky;
    top: 0;
}

/* ---- table body ---- */
.dummy-queue-table td,
.country-gap-table td {
    color: var(--sol-ink) !important;
    border-bottom: 1px solid var(--sol-line-soft) !important;
}
.dummy-queue-table td {
    padding: 5px 10px;
}
.country-gap-table {
    background: var(--sol-panel) !important;
    box-shadow: none !important;
    border: 1px solid var(--sol-line) !important;
    border-radius: var(--sol-radius) !important;
    width: auto;
    border-collapse: collapse;
    max-width: 600px;
    overflow: hidden;
}
.country-gap-table tr:hover td {
    background: var(--sol-panel-hi) !important;
}
/* load-bearing, moved verbatim from style.css (2026-09-17) - not overridden
   by anything, so no property analysis needed for these */
.country-gap-table td { padding: 5px 12px; font-size: 13px; }
@media (max-width: 600px) {
    .country-gap-table th,
    .country-gap-table td { padding: 6px 8px; font-size: 13px; }
}
.dummy-queue-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.dq-narrow { max-width: 100px; }
/* Same capping trick as .dq-narrow, wider - for Version/CN when these
   inputs sit inline in a flex row (Data to Fix's "Unidentified" card,
   2026-09-21) rather than one-per-table-cell (the full Unidentified
   Airframes tile): .dq-input's own width:100% otherwise makes each input
   claim the full flex-row width and wrap onto its own line. */
.dq-medium { max-width: 140px; }
.dq-actions { white-space: nowrap; }
.dq-actions button {
    border: none; border-radius: 4px; padding: 4px 8px;
    cursor: pointer; margin-right: 3px; font-size: 14px;
}
.dq-reg {
    cursor: pointer;
    user-select: none;
}
.dq-reg:hover {
    text-decoration: underline;
}
.dummy-queue-table .dq-reg {
    color: var(--sol-amber) !important;
}
.dq-reg-copied {
    color: #5cba6a !important;
}

/* ---- inputs ---- */
.dq-input {
    background: var(--sol-bg-grain) !important;
    color: var(--sol-ink) !important;
    border: 1px solid var(--sol-line) !important;
    border-radius: var(--sol-radius) !important;
    width: 100%;
    box-sizing: border-box;
    padding: 4px 6px;
    font-size: 13px;
}
.dq-input::placeholder { color: var(--sol-ink-faint) !important; }
.dq-input:focus {
    border-color: var(--sol-amber) !important;
    outline: none !important;
}

/* ---- known-match select (2026-09-16) ---- */
.dq-match-select {
    background: var(--sol-bg-grain) !important;
    color: var(--sol-amber) !important;
    border: 1px solid var(--sol-line) !important;
    border-radius: var(--sol-radius) !important;
    font-family: var(--font-mono);
    font-size: 12px;
    max-width: 150px;
}
.dq-match-select:focus { border-color: var(--sol-amber) !important; outline: none !important; }
.dq-nomatch { color: var(--sol-ink-faint) !important; }

/* ---- action buttons (kept as dimmed signal colours) ---- */
.dq-save     { background: #2e6b32 !important; color: #e8edf2 !important; }
.dq-hopeless { background: #9e3232 !important; color: #e8edf2 !important; }
.dq-notint   { background: #4a5765 !important; color: #e8edf2 !important; }
.dq-save:hover     { filter: brightness(1.15) !important; }
.dq-hopeless:hover { filter: brightness(1.15) !important; }
.dq-notint:hover   { filter: brightness(1.15) !important; }

.dx-result { margin-top: 20px; }
.ci-intro { margin-bottom: 16px; }
.ci-intro h3 { font-family: var(--font-display); color: var(--sol-amber); font-size: 18px; margin: 0 0 8px; }
.ci-intro p { color: var(--sol-ink-dim); font-size: 13px; margin: 0; }
/* Import Status: heading + explanation on one line instead of stacked
   (2026-09-21, per the user, to save vertical space) - .ci-intro-sub
   mirrors .bx-section-label .bx-sub's small-mono-dim look (e.g. Galleries'
   tile subtitles) rather than a full paragraph. .ci-intro-head's own h3
   margin is zeroed since baseline-alignment with the sub handles the
   vertical rhythm instead. */
.ci-intro-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ci-intro-head h3 { margin: 0; }
.ci-intro-sub { font-family: var(--font-mono); font-size: 11px; color: var(--sol-ink-faint); }
/* Same "toggle right after the intro shouldn't butt up against it" fix as
   before, just re-scoped now that the explanation moved from a <p> to
   .ci-intro-head's inline .ci-intro-sub. */
.ci-intro-head + .mg-category-toggle { margin-top: 14px; }
.ci-cleanup-note { color: var(--sol-warn) !important; margin-top: 6px !important; }

.ci-list { display: flex; flex-direction: column; gap: 12px; }
.ci-card {
    display: flex; gap: 16px;
    background: var(--sol-panel); border: 1px solid var(--sol-line);
    border-radius: var(--sol-radius); padding: 12px;
    transition: opacity 0.3s;
}
/* Bereits kategorisierte Bilder, die zur Nachbesserung (fehlender Cockpit-Mod
   o.ae.) erneut in der Warteschlange auftauchen - dezent per Randfarbe von
   frisch unkategorisierten Karten unterschieden. */
.ci-card--cleanup { border-color: var(--sol-warn); }
.ci-cleanup-badge {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--sol-warn);
    border: 1px solid var(--sol-warn);
    border-radius: var(--sol-radius);
    padding: 1px 6px;
    white-space: nowrap;
}
/* Bewusst deutlich breiter als hoch (270x110, statt urspruenglich 160x110):
   bei diesem Seitenverhaeltnis schneidet object-fit:cover von sich aus
   oben/unten (Himmel/Asphalt) ab, weil das Foto relativ "schmaler" ist als
   die Box - und zeigt dabei automatisch die volle Breite (Nase bis Heck,
   Cockpit inklusive), statt wie ein reiner Zoom um die Bildmitte (= meist
   Rumpfmitte) zu vergroessern. Achtung beim weiteren Verbreitern: mehr
   Breite bei fixer Hoehe heisst automatisch mehr vertikaler Zuschnitt (das
   Bild wird auf die neue Breite hochskaliert, 110px Hoehe bleiben fix) - ab
   einem gewissen Punkt faengt das an, den Flieger selbst oben/unten
   anzuschneiden, nicht nur Himmel/Asphalt. Card-Layout hat genug Platz. */
.ci-thumb {
    position: relative; flex: 0 0 270px; width: 270px; height: 110px;
    cursor: pointer; border-radius: var(--sol-radius); overflow: hidden;
    background: var(--sol-bg-grain);
}
.ci-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.15s ease;
}
/* Lupen-Zoom (Desktop), der der Maus folgt - fuers Cockpit an der Nase
   oder Sticker am Heck bewegt man die Maus einfach dorthin, statt fix um
   die Bildmitte zu zoomen. transform-origin wird per JS aus der Mausposition
   berechnet (siehe ciThumbZoomFollow/-Reset in manage.js), .ci-thumb:hover
   setzt hier nur den z-index, damit das vergroesserte Bild nicht von
   Nachbarkarten verdeckt wird. */
.ci-thumb:hover { z-index: 5; }
/* Overlay-Text im Manage-Thumb kleiner als in Galleries (160x110px ist schmaler
   als eine Galleries-Kachel); nowrap+Ellipsis als Sicherheitsnetz, damit die
   Airport/Datum/Uhrzeit-Zeile nie in eine dritte Zeile umbricht. */
.ci-thumb .gx-cell-ov { padding: 10px 6px 4px; gap: 0; }
.ci-thumb .gx-cell-ov span { font-size: 8.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-zoom { position: absolute; top: 4px; right: 6px; font-size: 14px; opacity: 0.8; }
.ci-nopic { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--sol-ink-dim); font-size: 11px; }
/* No photo (slide / no image, IATA Types 2026-10-14): a narrow box the card's height
   instead of the 270x110 photo frame */
.ci-thumb--compact { flex: 0 0 96px; width: 96px; height: auto; min-height: 44px; cursor: default; }
.ci-thumb--compact .ci-nopic { text-align: center; padding: 4px; font-size: 10.5px; line-height: 1.35; }

.ci-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ci-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.ci-reg { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--sol-amber); }
.ci-meta { font-family: var(--font-mono); font-size: 12px; color: var(--sol-ink-dim); }
.ci-loc { font-family: var(--font-mono); font-size: 11px; color: var(--sol-ink-dim); }
/* First Flight Amendments: IATA / version / airline edited by click in the head (2026-10-27) */
.ff-head .ff-airline { max-width: 220px; }
.ff-airline-filter { max-width: 220px; }
/* planespotters take-over (2026-10-27): link in the head, the handed-over values below the fields */
.ff-ps-link { font-family: var(--font-mono); font-size: 11px; color: var(--sol-ink-dim); text-decoration: none; margin-left: auto; }
.ff-ps-link:hover { color: var(--sol-amber); }
.ff-ps-info { font-family: var(--font-mono); font-size: 12px; color: var(--sol-ink); }
.ff-ps-info:empty { display: none; }
.ff-ps-src { color: var(--sol-amber); margin-right: 6px; }
.ff-ps-warn { display: block; color: var(--sol-warn); }

.ci-fields { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ci-select { background: var(--sol-panel-2); color: var(--sol-ink); border: 1px solid var(--sol-line); border-radius: var(--sol-radius); padding: 5px 8px; font-size: 13px; }
/* Categorize Images steps and suggestions (2026-10-17, per the user): "1 Livery" /
   "2 Cockpit" say what has to be picked before saving - amber while open, green once done;
   the green select on the right of the chip row offers the airline's own variants and,
   switched on with "🔁 N", the same aircraft's classifications (renderCiSuggest()). */
.ci-step {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sol-amber);
    border: 1px solid var(--sol-amber);
    border-radius: var(--sol-radius);
    padding: 2px 6px;
    white-space: nowrap;
    flex: 0 0 auto;
}
.ci-step.done { color: var(--sol-good); border-color: var(--sol-good); }
.ci-step.done::after { content: " ✓"; }
.ci-suggest { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.ci-suggest:empty { display: none; }
.ci-suggest-select { color: var(--sol-good); border-color: var(--sol-good); max-width: 100%; }
.ci-same-toggle { color: var(--sol-good); }
.ci-same-toggle.picked { border-color: var(--sol-good); color: var(--sol-good); }
.ci-save:disabled { opacity: 0.35; cursor: not-allowed; }
.ci-note-similar { font-family: var(--font-mono); font-size: 11.5px; color: var(--sol-ink-dim); }
.ci-note-similar:empty { display: none; }
.ci-note-similar-btn { padding: 2px 8px; font-size: 12px; color: var(--sol-good); border-color: var(--sol-good); }
.ci-more-btn {
    -webkit-appearance: none; appearance: none;
    margin-left: auto;
    background: transparent;
    color: var(--sol-ink-dim);
    border: 1px dashed var(--sol-line);
    border-radius: var(--sol-radius);
    font-family: var(--font-mono);
    font-size: 11.5px;
    padding: 2px 8px;
    cursor: pointer;
}
.ci-more-btn.picked { color: var(--sol-amber); border-color: var(--sol-amber); }

/* Categorize Images: category / variant chips and the text row (2026-10-16, renderCiChips()
   in manage.js) - touch-sized for the phone; picked = amber border/text (house rule, no fill) */
.ci-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ci-chip {
    -webkit-appearance: none; appearance: none;
    background: var(--sol-panel-2);
    color: var(--sol-ink);
    border: 1px solid var(--sol-line);
    border-radius: 14px;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    line-height: 1.2;
}
.ci-chip:hover { border-color: var(--sol-amber); }
.ci-chip.picked { border-color: var(--sol-amber); color: var(--sol-amber); }
.ci-chip-var { font-size: 12px; padding: 5px 10px; }
.ci-chip-sep { color: var(--sol-ink-faint); font-family: var(--font-mono); }
.ci-note-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.ci-note-select { max-width: 100%; min-width: 180px; }
.ci-prefix-wrap { display: inline-block; max-width: 100%; }
.ci-filter-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
/* Airline/Type tiles: search box + "+ New ..." button, no left-side label
   like the other .ci-filter-row users have - space-between (plus
   .gx-mode-group's own margin-left:auto) was shoving both all the way to
   the right edge instead of keeping them together. This modifier keeps
   them left-aligned as one group instead. */
.ci-filter-row-left { justify-content: flex-start; }
.ci-filter-row-left .gx-mode-group { margin-left: 0; }

/* Manage / Type tile - on-demand "Usage" drill-down (TYPE -> AIRFRAME ->
   AIRCRAFT -> SLIDE/AIRCRAFT_IMAGE), three lazily-loaded nesting levels. */
.ty-usage {
    margin: 0 0 8px; padding: 8px 10px;
    background: var(--sol-panel-2); border: 1px solid var(--sol-line); border-radius: var(--sol-radius);
    font-family: var(--font-mono); font-size: 12px; color: var(--sol-ink-dim);
}
.ty-usage-summary { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
/* Airline usage: fleet table (2026-10-04) */
.al-usage-table { margin-top: 8px; width: 100%; }
.ty-airframe-row {
    display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
    padding: 6px 0; border-top: 1px solid var(--sol-line-soft);
}
.ty-airframe-row:first-child { border-top: none; }
.ty-photos-loading, .ty-airframe-row > div[id^="ty-photos-"], .ty-airframe-row > div[id^="ty-aircraft-"] { flex-basis: 100%; }
.ty-photo-row {
    display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
    padding: 4px 0 4px 16px; border-top: 1px dashed var(--sol-line-soft); font-size: 11px;
}
.ty-photo-media { font-weight: 600; letter-spacing: 0.03em; color: var(--sol-ink-faint); min-width: 46px; }

/* Unmatched Flights: fixed-column candidate grid (2026-09-21, per the
   user) - same aligned-columns idea as .is-daf-stat-row, so rows stay
   lined up even when a candidate is missing a field. */
/* Unmatched Flights as a table (2026-10-04): icons with tooltips */
.uf-table .uf-status-icon { font-size: 14px; cursor: help; color: var(--sol-amber); }
.uf-table .uf-actions { white-space: nowrap; }
.uf-table .uf-icon-btn { padding: 0 7px; font-size: 13px; line-height: 1.6; }
.uf-table tr.uf-cand-row td { background: var(--sol-panel-2); padding: 8px 12px; }
.uf-candidate-row {
    display: grid; grid-template-columns: 60px 50px 150px 150px 50px;
    gap: 8px; padding: 2px 0;
    font-family: var(--font-mono); font-size: 12px; color: var(--sol-ink-dim);
}
.uf-candidate-head {
    color: var(--sol-ink-faint); font-size: 11px; margin: 4px 0 2px;
}
.uf-candidate-relevant { color: var(--sol-amber); font-weight: 600; }
.uf-candidate-fix {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 4px 0 8px 68px; /* aligns roughly under the Flight column */
}
/* Brief highlight after "Use photo time" resets the field - visible even
   when the reset value is identical to what was already there. */
.uf-candidate-fix input.uf-flash {
    outline: 2px solid var(--sol-amber);
    transition: outline-color 0.5s ease;
}
.ci-filters { display: flex; gap: 8px; flex: 0 0 auto; }
.ci-note { background: var(--sol-panel-2); color: var(--sol-ink); border: 1px solid var(--sol-line); border-radius: var(--sol-radius); padding: 5px 8px; font-size: 13px; flex: 0 1 200px; min-width: 120px; }
.ci-save {
    flex: 0 0 auto;
    background: var(--sol-panel-2);
    color: var(--sol-amber);
    border: 1px solid var(--sol-amber);
    border-radius: var(--sol-radius);
    padding: 5px 12px;
    cursor: pointer;
    font-size: 14px;
}
.ci-save:hover {
    background: var(--sol-panel);
}
/* First Flight Amendments: "undetermined" = save '00000000', secondary next to ✓ */
.ci-save.ff-undet {
    color: var(--sol-ink-dim);
    border-color: var(--sol-line);
    font-family: var(--font-mono);
    font-size: 12px;
}
.ci-save.ff-undet:hover { color: var(--sol-ink); }

/* Kompakter Icon-Button-Stil, u.a. fuer den Airline-Speichern-Button
   (.ci-head-actions) - erscheint erst nach Auswahl aus der Trefferliste. */
.ci-quick {
    flex: 0 0 auto;
    background: var(--sol-panel-2);
    color: var(--sol-amber);
    border: 1px solid var(--sol-amber);
    border-radius: var(--sol-radius);
    padding: 5px 8px;
    cursor: pointer;
    font-size: 14px;
}
.ci-quick:hover {
    background: var(--sol-panel);
}

/* Preset-Spalte (Categorize Images) - Ein-Klick-Buttons fuer die per SQL
   ermittelten haeufigsten Kategorie/Modifikations-Kombinationen (siehe
   CI_PRESETS in manage.js), speichern sofort. Eigene Spalte ganz links in
   der Karte (vor .ci-thumb) statt inline, damit sie unabhaengig von der
   Kartenbreite eine feste, sofort erreichbare Position behaelt - fuer den
   Grossteil der Bilder soll die Maus gar nicht erst zum Thumbnail/Body
   wandern muessen. */
.ci-presets {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}
.ci-preset-btn {
    flex: 0 0 auto;
    width: 36px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sol-panel-2);
    color: var(--sol-amber);
    border: 1px solid var(--sol-amber);
    border-radius: var(--sol-radius);
    cursor: pointer;
}
.ci-preset-btn svg { width: 24px; height: 15px; display: block; }
.ci-preset-btn:hover {
    background: var(--sol-panel);
}

.ci-status { color: var(--sol-amber); font-size: 13px; }
/* "Resolved, waiting on the next batch run" indicator (Missing Types,
   Airline Ambiguous - Data to Fix, 2026-09-21) - green per the user,
   distinct from .ci-status's amber "still needs attention" meaning. */
.ci-status-ok { color: var(--sol-good); font-size: 13px; font-weight: 600; }

.ci-mods {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 0;
}
/* Modifikator-Gruppe (aktuell nur "Cockpit") - Icon-Buttons statt Checkboxen,
   Klick waehlt aus (single-select innerhalb der Gruppe) und speichert sofort,
   analog zu .ci-presets. Bewusst als benannte Gruppe statt flacher Liste
   gebaut, damit sich spaeter weitere Gruppen (z.B. "Shot type": Takeoff/
   Approach/Ramp/...) danebensetzen lassen, sobald LIVERY_MODIFICATION eine
   Gruppenspalte hat (siehe CLAUDE.md TODO) - momentan rein im Frontend. */
.ci-mod-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ci-mod-group-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sol-ink-faint);
}
.ci-mod-icons { display: flex; gap: 5px; flex-wrap: wrap; }
.ci-mod-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sol-panel-2, #1b2735);
    border: 1px solid var(--sol-line);
    border-radius: var(--sol-radius);
    padding: 4px 6px;
    cursor: pointer;
    color: var(--sol-ink-dim);
}
.ci-mod-btn svg { width: 20px; height: 13px; display: block; }
.ci-mod-btn:hover { border-color: var(--sol-amber); color: var(--sol-ink); }
.ci-mod-btn.picked {
    border-color: var(--sol-good);
    color: var(--sol-good);
    background: rgba(79, 180, 119, 0.12);
}
.ci-mods-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}
.ci-progress {
    margin-top: 12px;
    max-width: 480px;
}
.ci-progress-bar {
    height: 10px;
    background: var(--sol-panel-2);
    border: 1px solid var(--sol-line);
    border-radius: 6px;
    overflow: hidden;
}
.ci-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3fa34d, #5cc65f);
    border-radius: 6px 0 0 6px;
    transition: width 0.4s ease;
}
.ci-progress-label {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 6px;
}
.ci-progress-pct {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: #5cc65f;
}
.ci-progress-count {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--sol-ink-dim);
}
.ci-inactive { font-size: 12px; color: var(--sol-ink-dim); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; }

/* Rechtsbuendige Gruppe in .ci-head: Airline-Korrektur, Inactive-Checkbox. Feste Position unabhaengig von der (stark variierenden)
   Laenge von .ci-meta, statt einer eigenen vollen Zeile darunter. */
.ci-head-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex-basis: 100%; justify-content: flex-end; }

/* Direkte Airline-Korrektur (Categorize Images). Wiederverwendet .dup-airline-input/.dup-airline-list
   (app.js/style.css), Speichern-Icon erscheint erst nach Auswahl aus der
   Trefferliste (kein Save fuer nichts). Sitzt in .ci-head-actions statt in
   einer eigenen Zeile, um die Karten nicht unnoetig zu strecken. */
.ci-airline-search { flex: 0 1 160px; min-width: 110px; }

.ci-progress-sub { font-family: var(--font-mono); font-size: 11px; color: var(--sol-ink-dim); margin-top: 4px; }

/* Sichtbarer Trenner zwischen "mit Foto/Dia" und "ohne Foto/Dia" in der
   IATA-Types-Arbeitsliste (manage.js: loadIataTypes/iataCard). */
.ci-group-sep {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 2px;
    color: var(--sol-ink-dim);
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ci-group-sep::before,
.ci-group-sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--sol-line);
}

/* Airframe Conversions: a card holds *all* AIRCRAFT rows of one airframe stacked
   vertically (not the thumb+body side-by-side layout .ci-card normally uses),
   since each row needs its own small thumb + assignment select. */
.ac-gen-card { flex-direction: column; gap: 10px; }
/* rows of one airframe: only a thin separator between them, no box per row (2026-10-27) */
.ac-gen-rows { display: flex; flex-direction: column; }
.ac-gen-row + .ac-gen-row { border-top: 1px solid var(--sol-line); }
/* One table per airframe (2026-10-27): every row the same fixed grid, so the
   columns line up across the rows - thumb · reg · IATA · version · airline ·
   assignment chips · ⋯ ; on the phone wrapped onto three lines (below) */
.ac-gen-row {
    display: grid; align-items: center; gap: 4px 10px;
    grid-template-columns: 64px 100px 48px minmax(90px, 160px) minmax(90px, 1fr) minmax(0, 2fr) 28px;
    grid-template-areas: "thumb reg iata ver air assign more";
    padding: 6px 0;
    transition: opacity 0.3s;
}
.ac-thumb { grid-area: thumb; }
.ac-c-reg { grid-area: reg; min-width: 0; display: flex; flex-direction: column; }
.ac-c-iata { grid-area: iata; justify-self: start; }
.ac-c-ver { grid-area: ver; justify-self: start; max-width: 100%; min-width: 0; }
.ac-c-air { grid-area: air; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ac-c-air > .ie-field { align-self: flex-start; max-width: 100%; }
.ac-c-assign { grid-area: assign; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.ac-more-btn { grid-area: more; margin-left: 0; justify-self: end; padding: 2px 6px; }
.ac-more { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 4px; border-top: 1px dashed var(--sol-line); }
.ac-afassign-search { flex: 0 1 220px; min-width: 150px; }
.ac-chips { gap: 4px; }
.ac-chips .ci-chip { padding: 4px 9px; font-size: 12px; font-family: var(--font-mono); }
.ac-chip-add { display: inline-flex; align-items: center; gap: 2px; color: var(--sol-ink-dim); border-style: dashed; }
.ac-chip-add svg { width: 20px; height: 13px; display: block; color: var(--sol-amber); }
@media (max-width: 640px) {
    .ac-gen-row {
        grid-template-columns: 56px minmax(0, auto) 40px minmax(0, 1fr) 28px;
        grid-template-areas:
            "thumb reg iata ver more"
            "thumb air air air air"
            ".     assign assign assign assign";
        gap: 4px 8px;
    }
    .ac-thumb { width: 56px !important; height: 38px !important; align-self: start; }
    .ac-thumb .hl-icons { display: none; }
}
.ac-thumb {
    position: relative;
    width: 64px; height: 43px;
    border-radius: var(--sol-radius); overflow: hidden;
    background: var(--sol-bg-grain); cursor: pointer;
}
.ac-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Re-Assign Aircraft direkt auf dem Thumbnail, wie im Lookup-Ergebnis (dort
   .reassign-btn auf .media-item) - hier kleiner, da .ac-thumb nur 64x43px ist. */
.ac-reassign-btn {
    position: absolute; top: 2px; right: 2px;
    background: rgba(14, 22, 33, 0.65);
    border: 1px solid var(--sol-line);
    border-radius: var(--sol-radius);
    color: var(--sol-ink);
    font-size: 10.5px;
    line-height: 1;
    padding: 2px 3px;
    cursor: pointer;
}
.ac-reassign-btn:hover { border-color: var(--sol-amber); }
.ac-nopic { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--sol-ink-dim); font-size: 10px; }
/* .ac-thumb is only 64x43px - shrink the shared highlight icons to fit */
.ac-thumb .hl-icons { bottom: 2px; right: 2px; gap: 2px; }
.ac-thumb .hl-icon-btn { width: 16px; height: 16px; font-size: 8px; }
.ac-gen-reg { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--sol-amber); }
.iata-freighter { font-family: var(--font-mono); font-size: 11px; color: var(--sol-amber); }
.iata-bulk { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 8px; }
.ac-gen-meta { font-family: var(--font-mono); font-size: 11px; color: var(--sol-ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-gen-dates { font-family: var(--font-mono); font-size: 10.5px; color: var(--sol-ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Airframe Conversions > Winglets queue: reason + factory/retrofit (2026-10-05) */
.ac-winglets-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 8px; }
.ac-winglets-bar .ci-meta { flex: 1 1 auto; }
.ac-retro { display: inline-flex; align-items: center; gap: 4px; }
.ac-ff { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.ac-type-corr { display: inline-flex; align-items: center; gap: 4px; }
.ac-type-corr .ac-airline-search { max-width: 200px; }
.ac-ff-input { width: 96px !important; }
/* stage dates, editable afterwards (2026-10-05) */
.ac-stages { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 2px 0 8px; font-family: var(--font-mono); font-size: 12px; }
.ac-stage-date { width: 80px !important; margin-left: 4px; }
.ac-stage { display: inline-flex; align-items: center; gap: 3px; }
.ac-stage-type { max-width: 130px; padding: 3px 6px; font-size: 12px; }
.ac-stage-btn { padding: 0 5px; font-size: 11px; line-height: 1.6; }
.ac-stage-btn:disabled { opacity: 0.35; cursor: default; }
/* Airline-Korrektur in der Kopfzeile - wiederverwendet .dup-airline-input/-list
   (style.css) wie .ci-airline-search bei Categorize Images, nur etwas schmaler
   fuer den kompakteren Zeilen-Kontext hier. */
.ac-airline-search { flex: 0 1 150px; min-width: 100px; }
/* Kennzeichen/C/N-Suche im 'done'-Reviewmodus, gleiche Optik wie .gx-mode-select
   (daneben in .gx-mode-group), aber ein Text-Input statt Select. */
.ac-search-input {
    background: var(--sol-panel-2);
    color: var(--sol-ink);
    border: 1px solid var(--sol-line);
    border-radius: var(--sol-radius);
    padding: 4px 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    width: 150px;
}
.ac-gen-newform {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: var(--sol-panel-2); border: 1px dashed var(--sol-amber);
    border-radius: var(--sol-radius); padding: 8px;
}
/* Queue-Auswahl im selben Font/Stil wie die Mode-Dropdowns bei Galleries
   (.gx-mode-group/-label/-select, definiert in galleries.css - das laedt vor
   manage.css, siehe CLAUDE.md CSS-Reihenfolge). Sitzt in derselben Zeile wie
   der Fortschrittsbalken statt in einer eigenen Zeile darueber - .ci-progress
   behaelt seine max-width (wird von anderen Manage-Kacheln mitbenutzt),
   .gx-mode-group's margin-left:auto schiebt sich hier an den rechten Rand.	*/
.ac-progress-row { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }

/* ---- Import Status tile ---- */
/* Gap halved 2026-09-22 (per the user, "halb so groß etwa") - also now
   used to wrap Overview's and Data to Fix's own .is-job blocks (below),
   not just Details' - those two views had no wrapper at all before, so
   their sections had zero gap between them ("kleben aneinander"). Width
   is capped per view via an inline max-width (IS_VIEW_MAX_WIDTH,
   manage.js's isRenderView()) rather than a fixed CSS rule here, since
   each of the 3 views needs a different amount of room; every .is-job
   inside stretches to fill it via flex's default align-items:stretch. */
.is-job-list { display: flex; flex-direction: column; gap: 8px; }
.is-job {
    background: var(--sol-panel-2);
    border: 1px solid var(--sol-line);
    border-radius: var(--sol-radius);
    padding: 12px 14px;
}
.is-job-head {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    margin-bottom: 8px;
    /* Capped at the same width as .is-compact-table/.is-metric-row/
       .is-totals below it (2026-09-22, per the user) - otherwise the
       margin-left:auto run-select pushes all the way to the panel's own
       right edge, past where the numbers column actually ends. */
    max-width: 480px;
}
/* Amber (2026-09-22, per the user - "wenn wir alle Überschriften Amber
   machen passt es für mich") - was --sol-ink (plain white/ink). */
.is-job-title { font-family: var(--font-display); font-size: 15px; color: var(--sol-amber); }
/* Standalone section heading for Overview/Data to Fix (2026-09-22, per
   the user) - same look as .is-job-title, but usable outside .is-job-head
   (which supplies its own margin-bottom via the whole row, not the title
   alone) so it needs its own margin here instead. Kept as a separate
   class rather than reusing .is-job-title directly, to avoid double
   margins if it were ever nested inside a .is-job-head row too. */
.is-section-title {
    font-family: var(--font-display); font-size: 15px; color: var(--sol-amber);
    margin-bottom: 8px;
}
.is-run-meta { font-family: var(--font-mono); font-size: 12px; color: var(--sol-ink-dim); }
.is-job-head .gx-mode-group { margin-left: auto; }
/* Run-history select used directly (no .gx-mode-group/-label wrapper) as
   the job head's date+status display (2026-09-22, per the user - the
   static date text and the "run" dropdown used to repeat the same date
   twice; the select's own current option is now that date, so there's
   nothing left to say statically). */
.is-job-head .is-run-select { margin-left: auto; }
/* One-time metric description under the job head, replacing the label
   text that used to repeat on every scope row of the compact table below
   (2026-09-22, per the user). */
.is-job-desc { font-family: var(--font-mono); font-size: 11px; color: var(--sol-ink-faint); margin-bottom: 8px; }
.is-scopes { display: flex; flex-direction: column; gap: 14px; }
.is-scope { display: flex; flex-direction: column; gap: 3px; }
.is-scope-label {
    font-family: var(--font-mono); font-size: 12px; color: var(--sol-amber);
    margin-bottom: 2px;
}
/* One label:count pair per line, not an inline wrap - a scope with many
   metrics (e.g. Aircraft Image Processing's single "Batch" scope, ~16
   rows) reads far better as a scannable list than as wrapped inline text
   (2026-09-18, per the user). Capped width so label/count stay aligned
   instead of stretching across the whole panel. */
.is-metric-row { display: flex; flex-direction: column; gap: 1px; max-width: 480px; }
.is-metric {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: 12px;
    padding: 1px 0;
}
/* Label/count stay a clean 2-column, right-aligned-count pair via
   space-between. (Used to also make room for a sibling jump-to-fix
   button, removed 2026-09-22 - see .is-metric's own history.) */
.is-metric-main { display: flex; justify-content: space-between; flex: 1 1 auto; gap: 12px; }
.is-metric-count { font-weight: 600; }
.is-metric-ok { color: var(--sol-ink-dim); }
.is-metric-warn { color: var(--sol-amber); }
.is-metric-none { color: var(--sol-ink-faint); }
.is-metric-error { color: var(--sol-warn); }
/* Aircraft Image Processing funnel (isPaiFunnelHtml): section heads in
   full ink, their breakdown indented below. */
.is-pai-funnel .is-metric-head { margin-top: 6px; }
.is-pai-funnel .is-metric-head.is-metric-ok { color: var(--sol-ink); }
.is-pai-funnel .is-metric-head:first-child { margin-top: 0; }
.is-pai-funnel .is-metric-sub { padding-left: 16px; }
.is-pai-funnel .is-metric-gap { height: 8px; }

/* Compact re-run icon in Flights Import / Match flights rows, so it doesn't
   stretch the table's row height (2026-10-02, per the user). */
.is-compact-row .is-rerun-btn { padding: 0 5px; font-size: 11px; line-height: 1.4; }

/* Not-imported reason -> popup with its images (#isPopup) */
.is-metric-link { color: inherit; text-decoration: underline dotted; cursor: pointer; }
.is-metric-link:hover { color: var(--sol-ink); }
.is-popup-note { margin-bottom: 10px; }
.is-popup-row { display: flex; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--sol-line-soft); }
.is-popup-thumb {
    flex: 0 0 120px; height: 72px; border-radius: var(--sol-radius); overflow: hidden;
    background: var(--sol-bg-grain); cursor: pointer;
}
.is-popup-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.is-popup-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.is-empty { font-family: var(--font-mono); font-size: 12px; color: var(--sol-ink-dim); }
.is-error {
    font-family: var(--font-mono); font-size: 12px; color: var(--sol-warn);
    background: var(--sol-bg-grain); border: 1px solid var(--sol-warn);
    border-radius: var(--sol-radius); padding: 6px 10px; margin-bottom: 8px;
    white-space: pre-wrap; word-break: break-word;
    max-height: 120px; overflow-y: auto;
}
/* Grand-total rollup (e.g. "Bilder aus S3 übernommen — gesamt: 82") shown
   above the per-scope breakdown when a run has more than one scope - the
   removed DAF_Import_from_S3.py email had this, the tile didn't
   (2026-09-18, per the user). Slightly emphasized vs. a regular .is-metric
   (border-top separator) since it's a summary of what follows, not one
   more row in the list. */
.is-totals {
    display: flex; flex-direction: column; gap: 1px; max-width: 480px;
    padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--sol-line);
}
.is-totals .is-metric-label, .is-totals .is-metric-count { font-weight: 700; }

/* Compact per-scope table (2026-09-22, per the user: "pro Import S3 eine
   Zeile, in Spalten nebeneinander, Gesamtsumme unten") - replaces
   isTotalsHtml()/isScopesHtml()'s vertical list for jobs with many scopes
   but only 1-2 metrics each (S3 Import / Flights Import / Match flights,
   see IMPORT_STATUS_TOTAL_KEYS). Column count varies per job (S3 Import
   has 2 value columns, the other two have 1), so grid-template-columns is
   set inline per row rather than as a fixed CSS rule. */
.is-compact-table { display: flex; flex-direction: column; max-width: 480px; }
.is-compact-row {
    display: grid; gap: 8px; align-items: baseline; padding: 2px 0;
    font-family: var(--font-mono); font-size: 12px; color: var(--sol-ink-dim);
}
.is-compact-row span:not(:first-child) { text-align: right; font-weight: 600; }
.is-compact-head {
    color: var(--sol-ink-faint); font-size: 11px; font-weight: 400;
    border-bottom: 1px solid var(--sol-line-soft); padding-bottom: 4px; margin-bottom: 2px;
}
.is-compact-head span:not(:first-child) { font-weight: 400; }
.is-compact-total {
    border-top: 1px solid var(--sol-line); margin-top: 2px; padding-top: 5px;
    font-weight: 700; color: var(--sol-ink);
}

/* Import Status: coarse per-job overview line, shown above the detailed
   job cards (2026-09-20, per the user - "grober Überblick zuerst"). Same
   .is-job panel shell as a detailed card, but each row is just
   title/stats/status in one line rather than a full metric list.
   Rebuilt as a proper grid table with its own header row (2026-09-22, per
   the user - "ordentliche Tabellen... Überschriften und proper layout"),
   matching the DAF_IMPORT status breakdown table's look right below it -
   was flex-based with no header, this job's title/stats/status columns
   now line up in the same grid every row, same 3-column widths the head
   row uses. */
.is-overview-table { display: flex; flex-direction: column; max-width: 620px; }
/* Status column widened 80px -> 100px (2026-09-22) to fit "✓ 22.09.2026" /
   "❌ 22.09.2026" (the last run's own date, not just "done"/"failed"). */
.is-overview-head {
    display: grid; grid-template-columns: 180px 1fr 150px; gap: 10px;
    color: var(--sol-ink-faint); font-size: 11px;
    border-bottom: 1px solid var(--sol-line-soft); padding-bottom: 4px; margin-bottom: 2px;
}
.is-overview-head span:last-child { text-align: right; }
.is-overview-row {
    display: grid; grid-template-columns: 180px 1fr 150px; gap: 10px; align-items: baseline;
    font-family: var(--font-mono); font-size: 12px;
    padding: 3px 0;
}
.is-overview-title { color: var(--sol-ink); font-weight: 600; }
.is-overview-stats { color: var(--sol-ink-dim); }
.is-overview-status { color: var(--sol-ink-dim); text-align: right; }
/* 2026-10-03: Flights Import's "rest by reason" under its result, and
   "(N runs)" when several runs of that day are summed (status widened to 150px). */
.is-overview-sub { display: block; font-size: 10.5px; color: var(--sol-ink-faint); }
.is-overview-runs { color: var(--sol-ink-faint); }
/* 2026-10-03: a row expands to its job card (former "Details" view) */
.is-overview-row-open { cursor: pointer; }
.is-overview-row-open:hover .is-overview-title { color: var(--sol-amber); }
.is-overview-caret { display: inline-block; width: 14px; color: var(--sol-ink-faint); }
.is-overview-detail { margin: 4px 0 10px 14px; }

/* Import Status: DAF_IMPORT_STATS snapshot comparison table (2026-09-20,
   per the user) - the same before/after breakdown
   Process_Aircraft_Images.py's stat_display() prints to the console.
   Grid instead of .is-metric's simple flex row since this needs 4 aligned
   numeric columns, not just one count. */
/* Label column changed from `1fr` (grew to fill the whole, uncapped panel
   width, leaving a big empty gap before the right-aligned numbers - "Daten
   hängen komplett ganz rechts") to a fixed width matching Overview's own
   title column (2026-09-22, per the user - "die Ansicht als Tabelle, wie
   die Statistics darüber auch"), now that the enclosing .is-job-list is
   also capped narrower for this view (isRenderView(), manage.js). */
.is-daf-stats-head, .is-daf-stat-row {
    display: grid; grid-template-columns: 180px repeat(4, 64px);
    gap: 8px; align-items: baseline;
    font-family: var(--font-mono); font-size: 12px;
}
.is-daf-stats-head {
    color: var(--sol-ink-faint); font-size: 11px; margin-bottom: 3px;
}
.is-daf-stats-head span, .is-daf-stat-num { text-align: right; }
.is-daf-stat-row { padding: 1px 0; color: var(--sol-ink-dim); }
.is-daf-stat-label { color: var(--sol-ink); }
.is-daf-stat-pos { color: var(--sol-amber); }
.is-daf-stat-neg { color: var(--sol-warn); }
.is-daf-stat-total {
    margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--sol-line);
    font-weight: 700; color: var(--sol-ink);
}

/* Unidentified Airframes: banner shown while scoped to one Import Status
   run's aircraft_aid_in filter (2026-09-18). */
.dq-aid-filter-banner {
    font-family: var(--font-mono); font-size: 12px; color: var(--sol-amber);
    background: var(--sol-panel-2); border: 1px solid var(--sol-amber);
    border-radius: var(--sol-radius); padding: 6px 10px; margin-bottom: 8px;
}
.dq-aid-filter-banner a { color: var(--sol-ink); text-decoration: underline; cursor: pointer; }

/* ---- Data to Fix heads (2026-10-02): title, count and explanation on one
   line instead of stacked; the count replaces the old green "all clear"
   line of an empty list. ---- */
.is-fix-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 8px; }
.is-fix-head .is-section-title { margin-bottom: 0; }
/* Details sections collapse (2026-10-03) - the title is the toggle */
.is-fix-toggle { cursor: pointer; }
/* Registrations in Details: click copies (same look as .dq-reg - underline
   on hover, green "✓ REG"), double-click edits (unidentified aircraft) */
#isViewBody .is-reg-text, #isViewBody .ci-head > strong { cursor: pointer; user-select: none; }
#isViewBody .is-reg-text:hover, #isViewBody .ci-head > strong:hover { text-decoration: underline; }
.is-reg-input { width: 100px; text-transform: uppercase; }
.is-fix-toggle:hover .is-section-title { color: var(--sol-amber); }
/* one box, one line per section (2026-10-04) */
.is-fix-sections .is-fix-section + .is-fix-section { border-top: 1px solid var(--sol-line-soft); }
.is-fix-sections .is-fix-head { margin-bottom: 0; padding: 7px 0; }
.is-fix-sections .is-fix-body { padding: 0 0 12px 14px; }
.is-fix-sections .is-fix-intro { display: flex; margin-bottom: 8px; padding-left: 14px; }
/* two top-level groups (2026-10-04): sections indented below them */
.is-fix-sections .is-fix-group + .is-fix-group { border-top: 1px solid var(--sol-line); margin-top: 4px; }
.is-fix-sections .is-fix-group-head .is-section-title { color: var(--sol-amber); }
.is-fix-sections .is-fix-group-body { padding-left: 16px; }
.is-fix-head-extra .rv-filter { margin: 0; }
.is-fix-head-extra .is-fix-filter-select { margin: 0; }
/* filters sit right-aligned in the head line (2026-10-04) */
.is-fix-sections .is-fix-head-extra { margin-left: auto; }
/* group counts, visible while folded (2026-10-04) */
.is-fix-sections .is-fix-group-sub { font-size: 11px; padding: 0 0 7px 14px; }
.is-fix-sections .is-fix-group-sub:empty { display: none; }
.tm-table .tm-flight-pick { cursor: pointer; }
.tm-table .tm-flight-pick:hover { text-decoration: underline; }
.tm-cand-row { cursor: pointer; padding: 6px 4px; }
.tm-cand-row:hover strong { color: var(--sol-amber); }
.tm-cand-inactive { opacity: 0.6; }
/* Airline / Type missing: values as text, click to edit (2026-10-04) */
.tm-table .tm-pick { cursor: pointer; }
.tm-table .tm-pick:hover { text-decoration: underline; }
.tm-table .tm-missing { color: var(--sol-amber); }
/* an ICAO code the TYPE table doesn't know (2026-10-09) */
.tm-table .tm-unknown { color: var(--sol-warn); }
.tm-table .tm-todo-text { color: var(--sol-ink-dim); }
.is-fix-sections .is-fix-bare { padding: 0 0 12px; }
.is-fix-count { font: inherit; color: inherit; }
/* nothing to do: title + count in the explanation-text colour (2026-10-04) */
.is-fix-sections .is-fix-section.is-fix-empty .is-section-title { color: var(--sol-ink-dim); }
.is-fix-sections .is-fix-group.is-fix-empty > .is-fix-group-head .is-section-title { color: var(--sol-ink-dim); }
.is-fix-intro { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.is-fix-note:empty { display: none; }
.is-fix-note { margin-bottom: 8px; font-size: 12px; }

/* Missing Types and Airlines as a table (one row per aircraft) */
.is-fix-table td { vertical-align: middle; }
.is-fix-table .tm-type-search { max-width: 140px; }
.is-fix-table .dup-airline-input.tm-ok { border-color: var(--sol-good) !important; }
.is-fix-table .dup-airline-input.tm-open { border-color: var(--sol-amber) !important; }

/* Aircraft Ambiguous: candidate table next to the photo */
.ff-table.am-table { width: auto; }  /* .ff-table (info.css) is the shared table look */
.am-table tr.am-nomatch td { color: var(--sol-ink-faint); }
.am-table .am-pick { padding: 0 6px; font-size: 12px; line-height: 1.5; }
.am-table .am-pick.active { color: var(--sol-good); border-color: var(--sol-good); }

/* Airline Keys table: one line per key - photos summarized, airline search
   with a compact "+ new airline" icon and the mapped airline behind it */
.akm-table .akm-airline-cell { white-space: nowrap; }
.akm-table .akm-search { width: 200px; display: inline-block; vertical-align: middle; }
.akm-table .akm-new-btn { padding: 0 6px; font-size: 13px; line-height: 1.5; vertical-align: middle; }

/* Unidentified Airframes table: one group row per shoot, then its inputs.
   The group row is set off clearly (gap above, amber left bar, bold) so a
   new Airport · Date reads as a new block; inputs are sized so the whole
   row incl. the save icon fits the 760px Data to Fix panel - long type
   names wrap instead of widening the table. */
.ud-table tr.ud-group td,
.is-grouped tr.ud-group td {
    background: var(--sol-panel-2);
    border-top: 12px solid var(--sol-panel);   /* gap between shoots */
    box-shadow: inset 3px 0 0 var(--sol-amber);
    padding: 6px 10px;
    font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--sol-amber);
}
.ud-table tbody:first-of-type tr.ud-group td,
.is-grouped tbody:first-of-type tr.ud-group td { border-top: 0; }
/* group rows fold (2026-10-04) */
.ud-table tr.ud-group, .is-grouped tr.ud-group { cursor: pointer; }
.is-group-caret { display: inline-block; width: 14px; color: var(--sol-ink-faint); font-weight: 400; }
tbody.is-collapsed tr:not(.ud-group) { display: none; }
.ud-table tr.ud-group .ci-meta,
.is-grouped tr.ud-group .ci-meta { font-weight: 400; margin-left: 6px; }
/* Import Status Details (2026-10-03): review tables + airline cell */
.is-grouped .rv-flight { color: var(--sol-amber); font-family: var(--font-mono); }
.is-fix-table .tm-airline-cell { white-space: nowrap; }
.is-fix-table .tm-airline-cell .inline-search { display: inline-block; vertical-align: middle; }
.is-fix-table .akm-new-btn { padding: 0 6px; font-size: 13px; line-height: 1.5; vertical-align: middle; }
.ud-table td, .ud-table th { padding: 3px 4px; }
.ud-table td.ff-reg { white-space: nowrap; }
.ud-table td:nth-child(2) { white-space: normal; max-width: 130px; }
.ud-type-pick { cursor: pointer; }
.ud-type-pick:hover { text-decoration: underline; }
/* Airline column (2026-10-04) wraps too - with it and the group/section
   indentation the table ran past the box */
.ud-table td:nth-child(3) { white-space: normal; max-width: 110px; }
/* CN + Known versions (2026-10-15) made the row too wide for the 760px panel:
   smaller inputs, short headers (Reg., F/F) */
.ud-table .dq-input { width: 100%; font-size: 12px; padding: 3px 4px; }
.ud-in-version, .ud-in-cn { width: 72px !important; }
.ud-in-versions { width: 104px !important; }
/* CN of an airframe we already have (type + CN) */
.ud-table .ud-cn-known { border-color: var(--sol-good) !important; }
.ud-in-ff { width: 70px !important; }
.ud-in-ln { width: 44px !important; }
.ud-table td:last-child { white-space: nowrap; }
.ud-table .ud-save-btn { padding: 0 6px; font-size: 13px; line-height: 1.5; }
/* known airframes of the registration, a line below the row (2026-10-17) */
.ud-table tr.ud-known td { white-space: normal; padding-top: 0; font-size: 12px; color: var(--sol-ink-dim); border-top: 0; }
.ud-known-item { display: inline-block; margin-right: 14px; }
.ud-known-item strong { color: var(--sol-ink); font-family: var(--font-mono); }
.ud-known-item .ud-in-ff { width: 64px !important; display: inline-block; }

/* Aircraft Ambiguous: the candidate table must fit next to the 270px photo -
   wrap long airline/type names, scroll as a last resort */
.am-table-wrap { overflow-x: auto; max-width: 100%; }
.ff-table.am-table td { white-space: normal; padding: 3px 6px; }
.ff-table.am-table th { padding: 4px 6px; }
.is-fix-table .tm-airline-ok { color: var(--sol-good); }
.is-fix-table .tm-airline-search { max-width: 220px; }

/* Type Codes (2026-10-06): linked codes as chips, × unlinks */
.tc-count { margin-bottom: 6px; }
.tc-table td.tc-name { white-space: normal; min-width: 180px; }
.tc-table td.tc-links { white-space: normal; min-width: 160px; }
.tc-chip {
    display: inline-flex; align-items: center; gap: 4px; margin: 1px 4px 1px 0; padding: 0 6px;
    border: 1px solid var(--sol-line); border-radius: var(--sol-radius);
    font-family: var(--font-mono); color: var(--sol-ink);
}
.tc-chip.tc-unofficial { border-style: dashed; color: var(--sol-ink-dim); }
.tc-chip.tc-missing { border-color: var(--sol-warn); color: var(--sol-warn); }
.tc-chip.tc-derived { color: var(--sol-ink-dim); }
.tc-chip.tc-direct { border-style: dotted; color: var(--sol-ink-dim); }
.tc-x { cursor: pointer; color: var(--sol-ink-faint); }
.tc-x:hover { color: var(--sol-warn); }
.tc-add { padding: 0 6px; }
.tc-flag { font-family: var(--font-mono); font-size: 10px; color: var(--sol-amber); border: 1px solid var(--sol-amber); border-radius: var(--sol-radius); padding: 0 4px; }
.tc-link-edit { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tc-link-input { width: 140px; }
.tc-cands { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.tc-cand { padding: 1px 6px; }
/* IATA Groups: group rows fold open, members indented below (2026-10-06) */
.tc-table td.tc-group-toggle { cursor: pointer; user-select: none; }
.tc-caret { display: inline-block; width: 14px; color: var(--sol-ink-dim); }
.tc-table tr.tc-member td { background: var(--sol-panel); border-bottom-color: var(--sol-line-soft); }
.tc-table tr.tc-member td.tc-member-code { padding-left: 28px; font-weight: 400; }
.tc-table tr.tc-member td.tc-name { padding-left: 18px; color: var(--sol-ink-dim); }

/* ---- Prefix Assignment tile (2026-10-06) ---- */
.pa-bulk { margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pa-bulk:empty { display: none; }
.pa-matches { margin: 4px 0 6px; }
.pa-table { width: 100%; }
.pa-table td.ff-actions { white-space: nowrap; }
.pa-select { max-width: 260px; }
.pa-odd { color: var(--sol-warn); cursor: help; }
.pa-more { margin-top: 10px; }

/* ---- My Flights tile (Manage > Personal, 2026-10-06) ---- */
.mf-entry {
    display: flex; flex-direction: column; gap: 10px; margin: 12px 0 16px;
    padding: 12px; border: 1px solid var(--sol-line); border-radius: var(--sol-radius);
    background: var(--sol-panel);
}
.mf-entry-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mf-pax { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--sol-ink); }
.mf-seat { width: 56px; }
.mf-iata { width: 56px; }
.mf-remarks { width: 220px; }
.mf-none { display: flex; align-items: center; gap: 10px; }
.mf-table { width: 100%; }
.mf-table td { padding: 4px 6px; vertical-align: top; }
.mf-table td.mf-ac { white-space: normal; max-width: 240px; }
.mf-ac-name { white-space: nowrap; }
.mf-ac-edit { padding: 0 4px; }
.mf-sub { display: block; font-size: 11px; color: var(--sol-ink-dim); }
.mf-ac-select { max-width: 200px; }
.mf-paxcell { white-space: nowrap; }
.mf-more { color: var(--sol-amber); }
.mf-flight { font-family: var(--font-mono); margin-right: 6px; }
.mf-wd { font-family: var(--font-mono); font-size: 11px; color: var(--sol-ink-dim); }
/* Journeys view (2026-10-07) */
.mj-caret { cursor: pointer; color: var(--sol-ink-dim); margin-right: 4px; }
.mj-caret:hover { color: var(--sol-amber); }
.mj-gap { color: var(--sol-amber); }
.mf-table tr.mj-sub td { font-size: 12px; color: var(--sol-ink-dim); background: var(--sol-bg-grain); }
.mj-loose-head td { color: var(--sol-ink-dim); }
.mj-auto { border: 1px solid var(--sol-line); border-radius: var(--sol-radius); padding: 10px 12px; margin: 8px 0; }
.mj-auto-list { margin: 6px 0; padding-left: 18px; max-height: 260px; overflow-y: auto; font-size: 12px; }
.mf-pax-popup { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mf-chip {
    display: inline-flex; align-items: center; gap: 2px; margin: 1px 4px 1px 0;
    border: 1px solid var(--sol-line); border-radius: var(--sol-radius); padding: 0 2px 0 6px;
    font-family: var(--font-mono); font-size: 11px;
}
.mf-chip-text { cursor: pointer; }
.mf-chip-text:hover { color: var(--sol-amber); }
.mf-chip-x { background: none; border: none; color: var(--sol-ink-dim); cursor: pointer; padding: 0 4px; font-size: 13px; }
.mf-chip-x:hover { color: var(--sol-warn); }
.mf-addpax { padding: 0 6px; font-size: 11px; }
.mf-addpax-select { font-size: 11px; padding: 1px 4px; }
.mf-remarks-icon { cursor: pointer; font-size: 12px; }
.mf-remarks-empty { opacity: 0.25; }
.mf-remarks-empty:hover { opacity: 0.8; }
.mf-photo { white-space: nowrap; font-family: var(--font-mono); font-size: 12px; }
.mf-photo-link { cursor: pointer; }
.mf-photo-link:hover { text-decoration: underline; }
.mf-assign { padding: 2px 8px; }
.mf-table.is-grouped tr.ud-group { cursor: pointer; }
.pa-table td.ff-actions { text-align: left; }
/* Airline "looks like" (2026-10-06) */
.al-livery { font-family: var(--font-mono); font-size: 11px; color: var(--sol-amber); }
.al-target-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.al-target-row .ci-note { width: 180px; }
.al-target-list { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; }

/* Manage > Airline > FR24 Pairs (2026-10-07) */
.fp-table td.fp-airline { white-space: normal; min-width: 220px; }
.fp-table td.fp-note { white-space: normal; max-width: 260px; color: var(--sol-ink-dim); font-size: 12px; }
.fp-open { color: var(--sol-amber); font-family: var(--font-mono); font-size: 12px; }
.fp-edit { margin-top: 6px; }

/* Journeys from photos (2026-10-08) */
.mj-photo-route { font-family: var(--font-mono); font-size: 12px; color: var(--sol-ink); }
.mf-table tr.mj-sugg td { background: transparent; }
.mj-sugg-wrap { margin-bottom: 16px; }

/* Categorize Images - "Same aircraft" (bulk) view (2026-10-08) */
.ci-view-toggle { margin: 10px 0; }
.ci-bulk-intro { font-size: 13px; }
.ci-bulk-card { align-items: flex-start; }
.ci-bulk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ci-bulk-sel { font-family: var(--font-mono); font-size: 11px; color: var(--sol-ink-dim); margin-left: auto; }
.ci-bulk-sel a { color: var(--sol-ink-dim); }
.ci-bulk-sel a:hover { color: var(--sol-amber); }
.ci-bulk-photos { display: flex; flex-wrap: wrap; gap: 8px; }
.ci-bulk-photo { display: flex; flex-direction: column; gap: 3px; }
/* same 270x110 box as the single cards - wide enough to show nose to tail (cockpit).
   .ci-thumb's flex: 0 0 270px is meant for the row of a single card; inside this
   column (.ci-bulk-photo) the basis would set the HEIGHT to 270px -> a square box that
   cut nose and tail off. */
.ci-bulk-photo .ci-thumb { flex: none; width: 270px; height: 110px; }
.ci-bulk-check { font-family: var(--font-mono); font-size: 11px; color: var(--sol-ink-dim); display: flex; align-items: center; gap: 4px; cursor: pointer; }
.ci-bulk-side { flex: 0 0 260px; display: flex; flex-direction: column; gap: 6px; }
.ci-bulk-side-label { font-family: var(--font-mono); font-size: 10.5px; color: var(--sol-ink-faint); text-transform: uppercase; letter-spacing: 0.05em; }
.ci-bulk-chip {
    -webkit-appearance: none; appearance: none;
    display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer;
    background: var(--sol-panel-2); color: var(--sol-ink); border: 1px solid var(--sol-line);
    border-radius: var(--sol-radius); padding: 4px 8px 4px 4px; font-size: 12px;
}
.ci-bulk-chip img { width: 81px; height: 33px; object-fit: cover; border-radius: 2px; flex: 0 0 81px; }
.ci-bulk-chip-text { flex: 1; min-width: 0; }
.ci-bulk-chip-n { font-family: var(--font-mono); font-size: 11px; color: var(--sol-ink-dim); }
.ci-bulk-chip:hover { border-color: var(--sol-ink-dim); }
.ci-bulk-chip.picked { border-color: var(--sol-amber); color: var(--sol-amber); }
.ci-bulk-chip-row { display: flex; align-items: stretch; gap: 4px; }
.ci-bulk-chip-row .ci-bulk-chip { flex: 1; min-width: 0; }
.ci-bulk-merge {
    -webkit-appearance: none; appearance: none; cursor: pointer;
    background: var(--sol-panel-2); color: var(--sol-ink-dim); border: 1px solid var(--sol-line);
    border-radius: var(--sol-radius); padding: 0 7px; font-size: 13px;
}
.ci-bulk-merge:hover { color: var(--sol-amber); border-color: var(--sol-amber); }
.ci-bulk-chip-row.picked .ci-bulk-merge { visibility: hidden; }
.ci-bulk-apply { align-self: flex-start; }
.ci-bulk-more { margin-top: 12px; }
@media (max-width: 760px) {
    .ci-bulk-card { flex-direction: column; }
    .ci-bulk-side { flex: 1 1 auto; width: 100%; }
}
.ci-progress-pair { display: flex; flex-wrap: wrap; gap: 0 32px; }

/* Categorize Images - "Conflicts" view (2026-10-28) */
.ci-lc-card { flex-direction: column; align-items: stretch; gap: 8px; }
.ci-lc-findings { margin: 0; padding-left: 18px; font-size: 12.5px; }
.ci-lc-findings li { margin: 2px 0; }
.ci-lc-rule { font-family: var(--font-mono); font-size: 11px; color: var(--sol-amber); text-transform: uppercase; letter-spacing: 0.04em; margin-right: 4px; }
.ci-lc-dates { font-family: var(--font-mono); font-size: 11px; color: var(--sol-ink-faint); margin-left: 6px; }
.ci-lc-photo { width: 270px; }
.ci-lc-photo .ci-thumb { border: 1px solid transparent; }
.ci-lc-hit .ci-thumb { border-color: var(--sol-warn); }
.ci-lc-label { font-size: 12px; color: var(--sol-ink); }
.ci-lc-cockpit { font-family: var(--font-mono); font-size: 10.5px; color: var(--sol-ink-dim); }
.ci-lc-pick { display: flex; gap: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--sol-ink-dim); }
.ci-lc-pick label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.ci-lc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ci-lc-unused { margin-top: 16px; }
.ci-lc-unused .bx-sub { margin-top: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--sol-ink-dim); }
.ci-lc-unused-list { margin: 4px 0; padding-left: 18px; font-size: 12.5px; }
.ci-lc-unused-list li { margin: 3px 0; }
.ci-lc-unused-list .ci-bulk-merge { margin-left: 6px; padding: 0 5px; font-size: 11px; }
@media (max-width: 640px) {
    .ci-lc-photo, .ci-lc-photo .ci-thumb { width: 100%; }
}
.ci-progress-pair .ci-progress { flex: 1 1 280px; }


/* Import Status > Details: "NEW" stamp before a newly photographed aircraft's
   registration (2026-10-09) - slanted, framed, green like My Journeys' new */
.rv-new {
    display: inline-block; margin-right: 6px; padding: 0 3px;
    border: 1px solid var(--sol-good); border-radius: 2px; color: var(--sol-good);
    font-family: var(--font-mono); font-size: 9px; font-weight: 700; line-height: 13px;
    letter-spacing: 0.05em; transform: rotate(-12deg); vertical-align: middle;
}
.rv-new.rv-new-af { margin: 0 0 0 6px; }
.rv-new-count { color: var(--sol-good); }
.tm-table .tm-todo { font-size: 12px; }
.tm-table .tm-todo .ci-quick { margin-left: 4px; padding: 1px 6px; }

/* Manage > Type > Usage: C/N filter above the airframes (2026-10-09) */
.ty-cn-filter { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.ty-cn-filter input { width: 160px; }

/* Manage > Airline: room between the find row and the results (2026-10-10) */
#alList { margin-top: 14px; }
#alFieldChips { margin-right: 10px; }

/* Airline ICAO Duplicates (2026-10-10) */
.icd-table .icd-code { color: var(--sol-amber); font-family: var(--font-mono); font-weight: 600; }
.icd-table .icd-open { color: var(--sol-amber); }
.icd-table .icd-none { color: var(--sol-warn); }
.icd-table tr.icd-inactive td { color: var(--sol-ink-dim); }
.icd-table .icd-status { white-space: nowrap; }
.icd-table .icd-keys { font-family: var(--font-mono); font-size: 11px; color: var(--sol-ink-dim); max-width: 220px; }
.icd-table tr.icd-fleet-row td { padding: 4px 8px 10px; }
.icd-table .icd-refs { font-size: 11px; color: var(--sol-ink-dim); max-width: 200px; }
.icd-table .icd-actions { white-space: nowrap; }
.icd-table .icd-merge { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ty-usage .icd-merge { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }  /* Airline tile ⇢ Merge (2026-10-12) */

/* Type > Usage > airframes: ✎ edit in place (2026-10-16) */
.ty-af-edit { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center;
    margin: 4px 0 6px; padding: 6px 8px; border: 1px solid var(--sol-line); border-radius: var(--sol-radius); }
.ty-af-edit label { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 12px; color: var(--sol-ink-dim); }
.ty-af-edit input { width: 120px; }
.ty-af-edit .inline-search { position: relative; display: inline-block; }
.ty-airframe-row > div[id^="ty-afedit-"] { flex-basis: 100%; }

/* Airline / Type missing: 📷 before the registration opens the photo (2026-10-18) */
.tm-photo { text-decoration: none; margin-right: 6px; opacity: .75; cursor: pointer; }
.tm-photo:hover { opacity: 1; }

/* Airline / Type missing: Aircraft column + Import now (2026-10-18) */
.tm-aircraft-select { max-width: 260px; }
.tm-aircraft-cell { white-space: nowrap; }

/* Condition ticks as chips (MT-02 R1, 2026-10-28) - Categorize Images + lightbox livery form */
.liv-conds { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0; }
.liv-cond-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-family: var(--font-mono); font-size: 11px; color: var(--sol-ink);
    border: 1px solid var(--sol-line); border-radius: 999px; padding: 2px 4px 2px 9px;
    background: var(--sol-panel-2);
}
.liv-cond-chip button {
    background: none; border: none; color: var(--sol-ink-dim); cursor: pointer;
    font-size: 13px; line-height: 1; padding: 0 3px;
}
.liv-cond-chip button:hover { color: var(--sol-warn); }
.liv-cond-add-wrap { position: relative; display: inline-flex; }
.liv-cond-add {
    font-family: var(--font-mono); font-size: 11px; color: var(--sol-ink-dim);
    background: none; border: 1px dashed var(--sol-line); border-radius: 999px;
    padding: 2px 9px; cursor: pointer;
}
.liv-cond-add:hover { color: var(--sol-amber); border-color: var(--sol-amber); }
.liv-cond-menu {
    position: absolute; top: 100%; left: 0; z-index: 30; margin-top: 3px;
    flex-direction: column; min-width: 170px;
    background: var(--sol-panel); border: 1px solid var(--sol-line); border-radius: var(--sol-radius);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.liv-cond-menu button {
    text-align: left; background: none; border: none; color: var(--sol-ink);
    font-family: var(--font-mono); font-size: 12px; padding: 6px 10px; cursor: pointer;
}
.liv-cond-menu button:hover { color: var(--sol-amber); background: var(--sol-panel-2); }

/* Livery generations as tails (MT-02 R5, 2026-10-28) - Categorize Images, lightbox, Airline popup */
.liv-gens { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0; }
.liv-gen-btn {
    display: flex; align-items: center; justify-content: center;
    height: 48px; min-width: 36px; padding: 2px; cursor: pointer;
    background: var(--sol-panel-2); border: 1px solid var(--sol-line); border-radius: var(--sol-radius);
    color: var(--sol-ink-dim); font-family: var(--font-mono); font-size: 11px;
}
.liv-gen-btn img { height: 42px; width: auto; max-width: 90px; object-fit: contain; display: block; }
.liv-gen-btn:hover { border-color: var(--sol-amber); }
.liv-gen-btn.picked { border-color: var(--sol-good); background: rgba(79, 180, 119, 0.12); box-shadow: 0 0 0 1px var(--sol-good); }
.liv-gen-mini { height: 18px; width: auto; max-width: 36px; object-fit: contain; vertical-align: middle; margin-right: 4px; }
.al-gens { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.al-gen {
    display: flex; flex-direction: column; align-items: center; gap: 4px; width: 104px;
    padding: 4px; border: 1px solid var(--sol-line); border-radius: var(--sol-radius); background: var(--sol-panel-2);
}
.al-gen img, .al-gen .ci-nopic { height: 64px; width: auto; max-width: 96px; object-fit: contain; }
.al-gen .ci-nopic { width: 96px; display: flex; align-items: center; justify-content: center; font-size: 10px; text-align: center; }
/* .ci-note's flex basis (200px) would turn into a height in this column */
.al-gen-label { flex: none; width: 100%; min-width: 0; box-sizing: border-box; font-size: 11px; padding: 3px 5px; }
.al-gen-actions { display: flex; align-items: center; gap: 3px; }
.al-gen-actions .ci-quick { padding: 1px 5px; }
.al-gen-add {
    justify-content: center; align-self: stretch; cursor: pointer; border-style: dashed;
    color: var(--sol-ink-dim); font-family: var(--font-mono); font-size: 12px; background: none;
}
.al-gen-add:hover { color: var(--sol-amber); border-color: var(--sol-amber); }
/* type from the flight (2026-10-31): FR24 type of the row's flights as a one-click chip */
.tm-table .tm-type-suggest { margin-left: 4px; padding: 1px 7px; font-size: 11px; font-family: var(--font-mono); }