/* Flight log book page (/flights, Phase 1). Loaded only on that page, so the
   body overrides below don't affect the flight visualizer. base.css keeps
   body { height:100vh; overflow:hidden } — the page scrolls internally and
   wide tables scroll inside .table-scroll, never at body level. */

body { display: flex; flex-direction: column; background: #eef1f5; }

#flights-page { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-4); }
.fl-container { max-width: 1240px; margin: 0 auto; }

.fl-card { background: #fff; border-radius: var(--radius-lg); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

/* ── Filter toolbar ── */
#flights-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); }
.fl-field { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: #667; }
.fl-field select, .fl-field input { padding: 5px 8px; border: 1px solid #ccc; border-radius: var(--radius-md); font-size: 13px; background: #fff; color: #223; }
.fl-field input:focus, .fl-field select:focus { outline: none; border-color: var(--color-accent); }
.fl-grow { flex: 1; min-width: 160px; }
/* Checkbox field: label and box on one row, bottom-aligned with the inputs. */
.fl-check { flex-direction: row; align-items: center; gap: 6px; font-size: 13px; color: #223; padding-bottom: 6px; cursor: pointer; }
.fl-check input { padding: 0; border: none; margin: 0; width: auto; cursor: pointer; }
#fl-count { font-size: 12px; color: #889; margin-left: auto; padding-bottom: 6px; }
#fl-export { padding: 6px 14px; border: none; border-radius: var(--radius-md); background: var(--color-accent); color: #fff; font-size: 13px; cursor: pointer; }
#fl-export:hover { background: var(--color-accent-hover); }

#fl-loading, #fl-empty { text-align: center; color: #889; padding: 40px 0; font-size: 14px; }

/* ── Table ── */
.table-scroll { overflow-x: auto; border-radius: var(--radius-lg); }
#flights-table { width: 100%; min-width: 960px; border-collapse: collapse; font-size: 13px; }
#flights-table thead th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: #778; padding: 10px 10px 8px; border-bottom: 2px solid #e4e7ee; white-space: nowrap; }
#flights-table th.sortable { cursor: pointer; user-select: none; }
#flights-table th.sortable:hover { color: var(--color-accent); }
#flights-table .th-arrow { display: inline-block; width: 12px; font-size: 9px; color: var(--color-accent); }
#flights-table th.align-right, #flights-table td.align-right { text-align: right; }
#flights-table th.align-center, #flights-table td.align-center { text-align: center; }
#flights-table tr.group-row td { background: #f4f6fb; padding: 8px 10px; border-top: 1px solid #e4e7ee; border-bottom: 1px solid #e4e7ee; white-space: nowrap; }
.month-label { font-weight: 700; font-size: 13px; color: #223; margin-right: var(--space-3); }
.month-rollup { font-size: 12px; color: #778; }
#flights-table tr.data-row td { padding: 7px 10px; border-bottom: 1px solid #f0f1f5; white-space: nowrap; }
#flights-table tr.data-row { cursor: pointer; }
#flights-table tr.data-row:hover td { background: #eef4ff; }
.fl-null { color: #bbb; }

/* ── Cell decorations ── */
.chip { display: inline-block; padding: 1px 8px; border-radius: 10px; background: #e7eefb; color: #1a4f9c; font-weight: 600; font-size: 12px; }
.chip-unk { background: #ececec; color: #999; }
.fl-arrow { color: #99a; margin: 0 4px; }
.badge { display: inline-block; min-width: 20px; text-align: center; padding: 1px 6px; border-radius: 10px; color: #fff; font-size: 11px; font-weight: 700; }
.badge-high { background: var(--color-severity-red); }
.badge-med { background: var(--color-severity-amber); }
.health { font-weight: 700; }
.health::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.health-ok { color: var(--color-severity-green); }
.health-ok::before { background: var(--color-severity-green); }
.health-warn { color: var(--color-severity-amber); }
.health-warn::before { background: var(--color-severity-amber); }
.health-bad { color: var(--color-severity-red); }
.health-bad::before { background: var(--color-severity-red); }

/* ── Mobile ── */
@media (max-width: 768px) {
    #flights-page { padding: var(--space-2); }
    #flights-toolbar { gap: var(--space-2); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2); }
    #fl-count { display: none; }
}