/* Approaches page (/approaches, Phase 6 UI). Loaded only on that page.
   Follows flights.css: base.css keeps body { height:100vh; overflow:hidden },
   so the page scrolls internally in #approaches-page and the wide table
   scrolls inside .table-scroll, never at body level. */

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

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

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

/* ── Filter toolbar ── */
#approaches-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); }
.ap-field { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: #667; }
.ap-field select, .ap-field input { padding: 5px 8px; border: 1px solid #ccc; border-radius: var(--radius-md); font-size: 13px; background: #fff; color: #223; }
.ap-field input:focus, .ap-field select:focus { outline: none; border-color: var(--color-accent); }
.ap-grow { flex: 1; min-width: 160px; }
.ap-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #445; padding-bottom: 6px; cursor: pointer; white-space: nowrap; }
#ap-count { font-size: 12px; color: #889; margin-left: auto; padding-bottom: 6px; }
#ap-export { padding: 6px 14px; border: none; border-radius: var(--radius-md); background: var(--color-accent); color: #fff; font-size: 13px; cursor: pointer; }
#ap-export:hover { background: var(--color-accent-hover); }

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

/* ── Table ── */
.table-scroll { overflow-x: auto; border-radius: var(--radius-lg); }
#approaches-table { width: 100%; min-width: 1180px; border-collapse: collapse; font-size: 13px; }
#approaches-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; }
#approaches-table th.sortable { cursor: pointer; user-select: none; }
#approaches-table th.sortable:hover { color: var(--color-accent); }
#approaches-table .th-arrow { display: inline-block; width: 12px; font-size: 9px; color: var(--color-accent); }
#approaches-table th.align-right, #approaches-table td.align-right { text-align: right; }
#approaches-table th.align-center, #approaches-table td.align-center { text-align: center; }
#approaches-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; }
#approaches-table tr.data-row td { padding: 7px 10px; border-bottom: 1px solid #f0f1f5; white-space: nowrap; }
#approaches-table tr.data-row { cursor: pointer; }
#approaches-table tr.data-row:hover td { background: #eef4ff; }
.ap-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; }
.rwy-badge { display: inline-block; min-width: 30px; text-align: center; padding: 1px 7px; border-radius: var(--radius-md); background: #223; color: #fff; font-weight: 700; font-size: 11px; letter-spacing: 0.4px; }
.ga-badge { display: inline-block; margin-left: 5px; padding: 1px 7px; border-radius: 9px; background: var(--color-severity-amber); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.4px; }
.sev-amber { color: var(--color-severity-amber); font-weight: 700; }
.sev-red { color: var(--color-severity-red); font-weight: 700; }
/* Footnote under the table: why there is no crab / wind column. */
.ap-caveat { margin: 0; padding: 10px 14px 12px; border-top: 1px solid #eef0f4; color: #778; font-size: 12px; line-height: 1.5; }

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