/* =====================================================================
   ATFM minimal shell — sidebar, top bar, notices, status, dialogs.
   Everything is namespaced `mn-` / `--mn-` so it cannot collide with
   Bootstrap or style.css; unmigrated pages are unaffected.
   Two themes, one set of tokens: this :root block is NIGHT; the
   html[data-theme="light"] block below is DAY. A component never names
   a colour, only a token, so a new page or component is themed for free.
   Design reference: redesign/UI_AUDIT_AND_REDESIGN.md
   ===================================================================== */

:root {
  --mn-bg:        #0d1015;
  --mn-panel:     #13171d;
  --mn-raised:    #1a1f27;
  --mn-line:      #232a34;
  --mn-line-2:    #343d4a;
  --mn-ink:       #e7ebf0;
  --mn-ink-2:     #a6b0bd;
  --mn-ink-3:     #6f7a89;
  --mn-accent:    #5aa9ff;
  --mn-accent-ink:#06121f;
  --mn-accent-wash: color-mix(in srgb, var(--mn-accent) 10%, transparent);
  --mn-ok:   #4cc38a;
  --mn-warn: #e5a73b;
  --mn-crit: #ef6b6b;
  --mn-idle: #6f7a89;
  --mn-font: ui-sans-serif, -apple-system, "Inter", "Segoe UI", Roboto, sans-serif;
  --mn-mono: ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace;
  --mn-side: 232px;
  --mn-top: 48px;

  /* derived roles: every surface, overlay and highlight the components use, so nothing is hard-coded per theme */
  --mn-on-crit:   #ffffff;                 /* text on a solid danger button */
  --mn-select:    color-mix(in srgb, var(--mn-accent) 16%, var(--mn-panel));   /* a chosen / just-returned-to row */
  --mn-mars:      #a493f5;                 /* the MARS / CTOT purple */
  --mn-scrim:     rgba(0,0,0,.55);         /* behind dialogs */
  --mn-shadow-sm: 0 8px 24px rgba(0,0,0,.45);
  --mn-shadow-md: 0 12px 32px rgba(0,0,0,.45);
  --mn-shadow-lg: 0 16px 48px rgba(0,0,0,.50);
  color-scheme: dark;                      /* native controls, scrollbars and date pickers follow the theme */

  /* design scale: the customisation page changes these, never a component */
  --mn-r:      4px;     /* controls, chips, rows */
  --mn-r-lg:   8px;     /* panels, menus, dialogs */
  --mn-ctl:    32px;    /* height of a button / input / select */
  --mn-cell-y: 10px;    /* vertical padding of a table cell */
  --mn-fs:     13px;    /* body text */
  --mn-fs-sm:  12px;    /* secondary text */
  --mn-logo-h: 22px;    /* logo height in the sidebar */
}

/* ---------- DAY theme: same names, different values ---------- */
html[data-theme="light"] {
  --mn-bg:        #f5f7fa;
  --mn-panel:     #ffffff;
  --mn-raised:    #edf0f5;
  --mn-line:      #e0e5ec;
  --mn-line-2:    #c9d1dc;
  --mn-ink:       #141a22;
  --mn-ink-2:     #465162;
  --mn-ink-3:     #667284;
  --mn-accent:    #1d6fd8;
  --mn-accent-ink:#ffffff;
  --mn-ok:   #17855a;
  --mn-warn: #b06a00;
  --mn-crit: #c93a3a;
  --mn-idle: #667284;
  --mn-mars:      #6f5bd8;
  --mn-scrim:     rgba(15,23,42,.38);
  --mn-shadow-sm: 0 6px 18px rgba(15,23,42,.12);
  --mn-shadow-md: 0 10px 28px rgba(15,23,42,.14);
  --mn-shadow-lg: 0 14px 40px rgba(15,23,42,.18);
  color-scheme: light;
}

/* ---------- theme switch: one component, used by the top bar and anywhere else a [data-theme-toggle] button is placed ---------- */
.mn-theme { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px; background: transparent; color: var(--mn-ink-2);
            border: 1px solid var(--mn-line-2); border-radius: 14px; font: 500 var(--mn-fs-sm) var(--mn-font); cursor: pointer; }
.mn-theme:hover { color: var(--mn-ink); border-color: var(--mn-ink-3); }
.mn-theme:focus-visible { outline: 2px solid var(--mn-accent); outline-offset: 2px; }
.mn-theme svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mn-theme .mn-theme-day { display: none; }
html[data-theme="light"] .mn-theme .mn-theme-day { display: inline; }
html[data-theme="light"] .mn-theme .mn-theme-night { display: none; }
@media (max-width: 1024px) { .mn-theme .mn-theme-text { display: none; } .mn-theme { padding: 0 8px; } }

/* ---------- status: dot + word + shape (safe to use in either mode) ---------- */
.mn-st { display: inline-flex; align-items: center; gap: 7px; font-size: var(--mn-fs-sm); font-weight: 600;
         letter-spacing: .04em; white-space: nowrap; }
.mn-st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box;
                 background: var(--c); border: 1.5px solid var(--c); flex: none; }
.mn-st--hollow::before { background: transparent; }
.mn-st--struck { text-decoration: line-through; opacity: .7; }
.mn-st--neutral { --c: var(--mn-idle); } .mn-st--info { --c: var(--mn-accent); }
.mn-st--ok { --c: var(--mn-ok); }        .mn-st--warn { --c: var(--mn-warn); }
.mn-st--crit { --c: var(--mn-crit); }
.mn-null { color: var(--mn-ink-3); }

/* ---------- shell (only active when <body class="mn">) ---------- */
body.mn { background: var(--mn-bg); font-family: var(--mn-font); }
.mn-shell { display: grid; grid-template-columns: var(--mn-side) minmax(0, 1fr); min-height: 100vh; }

.mn-side { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 16px 12px;
           background: var(--mn-bg); border-right: 1px solid var(--mn-line);
           scrollbar-width: thin; scrollbar-color: var(--mn-line-2) transparent; }
.mn-brand { display: flex; align-items: baseline; gap: 8px; padding: 0 8px 16px; color: var(--mn-ink); }
.mn-logo { display: block; height: var(--mn-logo-h); width: auto; max-width: 150px; object-fit: contain; align-self: center; }
.mn-brand b { font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.mn-brand span { font: 12px var(--mn-mono); color: var(--mn-ink-3); }

.mn-top-link, .mn-link {
  display: block; padding: 6px 8px 6px 12px; margin: 1px 0; font-size: var(--mn-fs); line-height: 1.4;
  color: var(--mn-ink-2); text-decoration: none; border-radius: var(--mn-r); border-left: 2px solid transparent;
  transition: color 120ms ease, background 120ms ease; }
.mn-top-link { margin-bottom: 8px; font-weight: 500; }
.mn-top-link:hover, .mn-link:hover { color: var(--mn-ink); background: var(--mn-raised); }
.mn-top-link[aria-current="page"], .mn-link[aria-current="page"] {
  color: var(--mn-ink); background: var(--mn-accent-wash); border-left-color: var(--mn-accent); }

.mn-group { margin-bottom: 8px; }
.mn-group > summary { list-style: none; cursor: pointer; user-select: none; display: flex; justify-content: space-between; gap: 8px;
  padding: 6px 8px; border-radius: var(--mn-r); font-size: var(--mn-fs-sm); font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--mn-ink-3); }
.mn-group > summary::-webkit-details-marker { display: none; }
.mn-group > summary::after { content: "+"; font-family: var(--mn-mono); }
.mn-group[open] > summary::after { content: "\2212"; }
.mn-group > summary:hover { color: var(--mn-ink-2); }
.mn-sub { padding: 10px 8px 2px 12px; font-size: 11px; letter-spacing: .05em; color: var(--mn-ink-3); }

.mn-main { min-width: 0; display: flex; flex-direction: column; }
.mn-top { position: sticky; top: 0; z-index: 1010; height: var(--mn-top); display: flex; align-items: center;
  justify-content: space-between; padding: 0 24px; background: var(--mn-bg); border-bottom: 1px solid var(--mn-line); }
.mn-title { font-size: var(--mn-fs); font-weight: 500; color: var(--mn-ink); }
.mn-top-right { display: flex; align-items: center; gap: 20px; font-size: var(--mn-fs-sm); color: var(--mn-ink-2); }
.mn-clock { font: 500 13px var(--mn-mono); color: var(--mn-ink); font-variant-numeric: tabular-nums; }
.mn-clock small { color: var(--mn-ink-3); font-weight: 400; margin-left: 4px; }
.mn-db { font: 12px var(--mn-mono); color: var(--mn-ink-3); }

.mn-user { position: relative; }
.mn-user > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; color: var(--mn-ink); font-size: var(--mn-fs); }
.mn-user > summary::-webkit-details-marker { display: none; }
.mn-user > summary::after { content: ""; border: 4px solid transparent; border-top-color: var(--mn-ink-3); margin-top: 4px; }
.mn-user > summary small { color: var(--mn-ink-3); font-size: var(--mn-fs-sm); }
.mn-menu { position: absolute; right: 0; top: calc(100% + 10px); min-width: 240px; padding: 8px;
  background: var(--mn-panel); border: 1px solid var(--mn-line-2); border-radius: var(--mn-r-lg);
  box-shadow: var(--mn-shadow-md); }
.mn-menu a, .mn-menu .mn-row { display: flex; justify-content: space-between; padding: 7px 10px; border-radius: var(--mn-r);
  font-size: var(--mn-fs); color: var(--mn-ink-2); text-decoration: none; }
.mn-menu a:hover { background: var(--mn-raised); color: var(--mn-ink); }
.mn-menu .mn-row b { font: 500 12px var(--mn-mono); color: var(--mn-ink); }
.mn-menu hr { border: 0; border-top: 1px solid var(--mn-line); margin: 6px 0; opacity: 1; }

.mn-page { padding: 24px; flex: 1; min-width: 0; }

/* ---------- flash notices ---------- */
.mn-flash { padding: 16px 24px 0; }
.mn-flash--float { position: fixed; top: 16px; right: 16px; z-index: 9999; width: 340px; padding: 0; }
.mn-notice { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px 10px 16px; margin-bottom: 8px;
  background: var(--mn-raised); border-left: 2px solid var(--c, var(--mn-accent)); border-radius: 0 var(--mn-r) var(--mn-r) 0;
  font-size: var(--mn-fs); color: var(--mn-ink); }
.mn-notice > span { flex: 1; }
.mn-notice > button { background: none; border: 0; color: var(--mn-ink-3); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }   /* the dismiss cross only */
.mn-notice > button:hover { color: var(--mn-ink); }
.mn-notice--bar { align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.mn-notice-actions { display: flex; gap: 8px; }
.mn-notice--ok { --c: var(--mn-ok); } .mn-notice--warn { --c: var(--mn-warn); }
.mn-notice--crit { --c: var(--mn-crit); } .mn-notice--info { --c: var(--mn-accent); }

/* ---------- dialog (atfmConfirm / atfmPrompt) and toast (atfmToast) ---------- */
.mn-scrim { position: fixed; inset: 0; z-index: 20001; background: var(--mn-scrim); display: flex; align-items: center; justify-content: center; padding: 16px; }
.mn-dialog { width: min(440px, 100%); background: var(--mn-panel); color: var(--mn-ink); border: 1px solid var(--mn-line-2);
  border-radius: var(--mn-r-lg); padding: 24px; box-shadow: var(--mn-shadow-lg); font-family: var(--mn-font); }
.mn-dialog .mn-msg { font-size: 14px; line-height: 1.5; margin-bottom: 20px; }
.mn-dialog input { width: 100%; height: 34px; padding: 0 12px; margin-bottom: 20px; background: var(--mn-bg); color: var(--mn-ink);
  border: 1px solid var(--mn-line-2); border-radius: var(--mn-r); font: var(--mn-fs) var(--mn-font); }
.mn-dialog input:focus { outline: none; border-color: var(--mn-accent); box-shadow: 0 0 0 3px var(--mn-accent-wash); }
.mn-dialog footer { display: flex; justify-content: flex-end; gap: 8px; }
.mn-btn { height: var(--mn-ctl); padding: 0 14px; border-radius: var(--mn-r); border: 1px solid var(--mn-line-2); background: transparent;
  color: var(--mn-ink); font: 500 var(--mn-fs) var(--mn-font); cursor: pointer; }
.mn-btn:hover { background: var(--mn-raised); }
.mn-btn--primary { background: var(--mn-accent); border-color: var(--mn-accent); color: var(--mn-accent-ink); }
.mn-btn--primary:hover { background: var(--mn-accent); filter: brightness(1.08); }
.mn-btn--danger { background: var(--mn-crit); border-color: var(--mn-crit); color: var(--mn-on-crit); }
.mn-btn--danger:hover { background: var(--mn-crit); filter: brightness(1.08); }
.mn-btn:focus-visible, .mn-top-link:focus-visible, .mn-link:focus-visible, .mn-group > summary:focus-visible,
.mn-user > summary:focus-visible { outline: 2px solid var(--mn-accent); outline-offset: 2px; }

#atfmToastHost { top: 64px !important; }
.mn-toast { min-width: 280px; max-width: 420px; padding: 10px 16px; background: var(--mn-raised); color: var(--mn-ink);
  border-left: 2px solid var(--c, var(--mn-accent)); border-radius: var(--mn-r); font: var(--mn-fs)/1.45 var(--mn-font);
  box-shadow: var(--mn-shadow-sm); opacity: 0; transform: translateY(-6px); transition: opacity 120ms ease, transform 120ms ease; }
.mn-toast--show { opacity: 1; transform: none; }
.mn-toast--success { --c: var(--mn-ok); } .mn-toast--danger { --c: var(--mn-crit); }
.mn-toast--warning { --c: var(--mn-warn); } .mn-toast--info { --c: var(--mn-accent); }

/* ---------- narrow screens: sidebar stacks above the page ---------- */
@media (max-width: 1024px) {
  .mn-shell { grid-template-columns: minmax(0, 1fr); }
  .mn-side { position: static; height: auto; max-height: 60vh; border-right: 0; border-bottom: 1px solid var(--mn-line); }
  .mn-top { position: static; padding: 0 16px; }
  .mn-page { padding: 16px; }
  .mn-db { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mn-toast, .mn-link, .mn-top-link { transition: none; } }

/* =====================================================================
   Page components for migrated screens (all mn- namespaced).
   Used first by the dashboard. No inline styles needed in templates.
   ===================================================================== */

.mn-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.mn-h1 { font-size: 24px; font-weight: 600; letter-spacing: -.01em; color: var(--mn-ink); margin: 0; line-height: 1.2; }
.mn-lede { margin: 4px 0 0; font-size: var(--mn-fs); color: var(--mn-ink-3); }
.mn-lede b { color: var(--mn-ink-2); font-weight: 500; }

/* filters: one quiet row */
.mn-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 8px; }
.mn-field { display: flex; flex-direction: column; gap: 6px; }
.mn-label { font-size: var(--mn-fs-sm); font-weight: 500; color: var(--mn-ink-2); }
.mn-input, .mn-select { height: var(--mn-ctl); width: 152px; padding: 0 12px; background: var(--mn-panel); color: var(--mn-ink);
  border: 1px solid var(--mn-line-2); border-radius: var(--mn-r); font: var(--mn-fs) var(--mn-font); color-scheme: dark; }
.mn-input:focus, .mn-select:focus { outline: none; border-color: var(--mn-accent); box-shadow: 0 0 0 3px var(--mn-accent-wash); }
.mn-btn--ghost { border-color: transparent; color: var(--mn-ink-2); }
.mn-btn--quiet-danger { color: var(--mn-crit); }
.mn-btn--quiet-danger:hover { border-color: var(--mn-crit); }
.mn-tools form { margin: 0; }
.mn-btn--ghost:hover { color: var(--mn-ink); }
a.mn-btn, label.mn-btn { display: inline-flex; align-items: center; text-decoration: none; cursor: pointer; }
.mn-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 24px; font-size: var(--mn-fs-sm); color: var(--mn-ink-3); }
.mn-quick .mn-btn { height: 26px; padding: 0 10px; font-size: var(--mn-fs-sm); }
.mn-quick span { margin-right: 4px; }

/* KPI row: numbers, not boxes */
.mn-kpis { display: flex; flex-wrap: wrap; gap: 32px 48px; padding: 16px 0 24px; margin-bottom: 24px; border-bottom: 1px solid var(--mn-line); }
.mn-kpi-n { font: 500 28px/1.1 var(--mn-mono); color: var(--mn-ink); font-variant-numeric: tabular-nums; }
.mn-kpi-l { margin-top: 6px; font-size: var(--mn-fs-sm); color: var(--mn-ink-3); }

/* sections + tables */
.mn-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 32px; }
.mn-section > header { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px;
  border-bottom: 1px solid var(--mn-line); }
.mn-section h2 { margin: 0; font-size: 16px; font-weight: 600; color: var(--mn-ink); }
.mn-section header span { font-size: var(--mn-fs-sm); color: var(--mn-ink-3); }
.mn-table { width: 100%; border-collapse: collapse; font-size: var(--mn-fs); }
.mn-table th { padding: var(--mn-cell-y) 12px; text-align: left; font-size: var(--mn-fs-sm); font-weight: 500; color: var(--mn-ink-3);
  border-bottom: 1px solid var(--mn-line); background: transparent; }
.mn-table td { padding: var(--mn-cell-y) 12px; border-bottom: 1px solid var(--mn-line); color: var(--mn-ink-2); background: transparent; vertical-align: middle; }
.mn-table tbody tr:hover td { background: var(--mn-raised); }
.mn-table .mn-num { text-align: right; font-family: var(--mn-mono); font-variant-numeric: tabular-nums; color: var(--mn-ink); }
.mn-table .mn-zero { color: var(--mn-ink-3); }
.mn-table th.mn-num { font-family: var(--mn-font); color: var(--mn-ink-3); }   /* headers of numeric columns stay header-styled */
.mn-table .mn-code { font-family: var(--mn-mono); color: var(--mn-ink); }
.mn-table .mn-share { width: 40%; }
.mn-table a { color: inherit; text-decoration: none; }
.mn-table a:hover { color: var(--mn-accent); }
.mn-empty { padding: 24px 12px; color: var(--mn-ink-3); font-size: var(--mn-fs); }
.mn-empty a { color: var(--mn-accent); text-decoration: none; }

/* share bar: native <progress>, neutral so colour stays reserved for status */
.mn-bar { appearance: none; -webkit-appearance: none; width: 100%; height: 6px; border: 0; border-radius: 3px;
  overflow: hidden; background: var(--mn-raised); vertical-align: middle; }
.mn-bar::-webkit-progress-bar { background: var(--mn-raised); }
.mn-bar::-webkit-progress-value { background: var(--mn-ink-3); border-radius: 3px; }
.mn-bar::-moz-progress-bar { background: var(--mn-ink-3); border-radius: 3px; }

@media (max-width: 1024px) {
  .mn-head { flex-direction: column; align-items: flex-start; }
  .mn-kpis { gap: 24px 32px; }
  .mn-input, .mn-select { width: 100%; }
  .mn-field { flex: 1 1 140px; }
}

/* ---------- wide data tables (flights list and similar) ---------- */
.mn-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.mn-btn--sm { height: 26px; padding: 0 10px; font-size: var(--mn-fs-sm); }

/* the table gets its own scroll area so the header stays put while rows scroll */
.mn-scroll { max-height: calc(100vh - 300px); min-height: 320px; overflow: auto; border-bottom: 1px solid var(--mn-line); }
.mn-scroll .mn-table thead th { position: sticky; top: 0; z-index: 2; background: var(--mn-bg); }
.mn-table--wide th, .mn-table--wide td { white-space: nowrap; }
.mn-table tr[id^="flight-"] { scroll-margin-top: 90px; }
.mn-table .mn-mid { text-align: center; }
.mn-table .mn-dim { color: var(--mn-ink-3); }
.mn-table td.mn-strong { color: var(--mn-ink); font-weight: 600; }
.mn-date { color: var(--mn-ink-2); }
.mn-time { font-family: var(--mn-mono); color: var(--mn-ink); font-variant-numeric: tabular-nums; }

/* the Actions column stays pinned at the right edge while the table scrolls sideways */
.mn-table--wide th:last-child, .mn-table--wide td:last-child { position: sticky; right: 0; background: var(--mn-bg); box-shadow: -1px 0 0 var(--mn-line); }
.mn-scroll .mn-table thead th:last-child { z-index: 3; }

/* returning to a row: highlight that fades out (opaque, so the pinned cell does not show content through it) */
.mn-table td { transition: background 600ms ease; }
.mn-table tr.mn-row-flash td { background: var(--mn-select); box-shadow: inset 0 1px 0 var(--mn-accent), inset 0 -1px 0 var(--mn-accent); }

/* inline stand / runway editor */
.mn-inline { display: inline-flex; gap: 4px; align-items: center; margin: 0; }
.mn-select--sm { height: 26px; width: 96px; padding: 0 6px; font-size: var(--mn-fs-sm); }

/* row actions: quiet text buttons; the destructive ones are red text */
.mn-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; }
.mn-acts form { display: inline; margin: 0; }
.mn-table--wide .mn-acts { flex-wrap: nowrap; }   /* one line per row; the table scrolls sideways instead */
.mn-act { background: none; border: 0; padding: 2px 0; font: 500 var(--mn-fs) var(--mn-font); color: var(--mn-accent); cursor: pointer; text-decoration: none; }
.mn-act:hover { text-decoration: underline; }
.mn-act--danger { color: var(--mn-crit); }
.mn-act:focus-visible { outline: 2px solid var(--mn-accent); outline-offset: 2px; border-radius: 2px; }
.mn-dialog .mn-st { margin-left: 6px; font-size: var(--mn-fs); }

@media (max-width: 1024px) { .mn-scroll { max-height: none; } }

/* ---------- record / detail pages ---------- */
.mn-crumbs { margin: 0 0 8px; font-size: var(--mn-fs); }
.mn-crumbs a { color: var(--mn-ink-3); text-decoration: none; }
.mn-crumbs a:hover { color: var(--mn-accent); }
.mn-h1 .mn-st { margin-left: 12px; vertical-align: middle; font-size: var(--mn-fs); }
.mn-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mn-stack > * + * { margin-top: 32px; }

/* key / value list: label left, value right, hairline between rows */
.mn-dl { margin: 0; }
.mn-kv { display: grid; grid-template-columns: minmax(130px, 38%) minmax(0, 1fr); gap: 16px; padding: 9px 12px;
  border-bottom: 1px solid var(--mn-line); font-size: var(--mn-fs); transition: background 600ms ease; }
.mn-k { color: var(--mn-ink-3); font-weight: 400; margin: 0; }
.mn-v { color: var(--mn-ink); margin: 0; min-width: 0; overflow-wrap: anywhere; }
.mn-v.mn-code { font-family: var(--mn-mono); }
.mn-v small { display: block; color: var(--mn-ink-3); font-size: var(--mn-fs-sm); }
.mn-v a { color: var(--mn-accent); text-decoration: none; }
.mn-v a:hover { text-decoration: underline; }
.mn-kv--missing { background: color-mix(in srgb, var(--mn-crit) 22%, transparent); box-shadow: inset 2px 0 0 var(--mn-crit); }   /* fields to fill in after a failed Activate */
.mn-dl--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }

/* schedule note under the page title */
.mn-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 10px 16px; margin-bottom: 24px;
  background: var(--mn-raised); border-left: 2px solid var(--mn-idle); border-radius: 0 var(--mn-r) var(--mn-r) 0; font-size: var(--mn-fs); color: var(--mn-ink-2); }
.mn-note--sched { border-left-color: var(--mn-ok); }
.mn-note b { color: var(--mn-ink); font-weight: 600; }
.mn-note a { color: var(--mn-accent); text-decoration: none; }
.mn-note a:hover { text-decoration: underline; }
.mn-note .mn-spread { margin-left: auto; }
.mn-note small { color: var(--mn-ink-3); margin-right: 4px; }

/* status timeline: one column per stage, a hairline across the top */
.mn-steps { display: flex; border-top: 1px solid var(--mn-line); margin-top: 16px; }
.mn-step { flex: 1 1 0; min-width: 0; padding: 14px 12px 0 0; font-size: var(--mn-fs-sm); color: var(--mn-ink-3); }
.mn-step .mn-st { margin-bottom: 6px; }
.mn-step .mn-when { display: block; font-family: var(--mn-mono); color: var(--mn-ink); font-size: var(--mn-fs); }
.mn-step .mn-by { display: block; margin-top: 2px; }
.mn-step--todo .mn-lbl { font-size: var(--mn-fs-sm); font-weight: 600; letter-spacing: .04em; }

/* native <dialog> forms (edit ops / arrival ops) */
dialog.mn-modal { margin: auto; /* style.css resets every margin to 0, which would pin the dialog top-left */
  width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; padding: 24px; background: var(--mn-panel); color: var(--mn-ink);
  border: 1px solid var(--mn-line-2); border-radius: var(--mn-r-lg); box-shadow: var(--mn-shadow-lg); font-family: var(--mn-font); }
dialog.mn-modal::backdrop { background: var(--mn-scrim); }
.mn-modal h2 { margin: 0 0 16px; font-size: 16px; font-weight: 600; }
.mn-modal h2 span { color: var(--mn-ink-2); font-weight: 400; }
.mn-modal .mn-field { margin-bottom: 16px; }
.mn-modal .mn-input, .mn-modal .mn-select { width: 100%; }
.mn-modal .mn-hint { font-size: var(--mn-fs-sm); color: var(--mn-ink-3); }
.mn-modal .mn-context { margin-bottom: 16px; padding: 10px 12px; background: var(--mn-raised); border-radius: var(--mn-r); font-size: var(--mn-fs-sm); color: var(--mn-ink-3); }
.mn-modal .mn-context b { display: block; margin-top: 2px; font: 600 16px var(--mn-mono); color: var(--mn-ink); }
.mn-modal hr { border: 0; border-top: 1px solid var(--mn-line); margin: 4px 0 16px; opacity: 1; }
.mn-modal footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

@media (max-width: 1024px) {
  .mn-cols--2 { grid-template-columns: minmax(0, 1fr); }
  .mn-dl--2 { grid-template-columns: minmax(0, 1fr); }
  .mn-steps { flex-wrap: wrap; }
  .mn-step { flex: 1 1 33%; padding-bottom: 12px; }
}

/* ---------- live boards (A-CDM board first) ---------- */
.mn-tools .mn-input { width: 160px; }
.mn-updated { align-self: center; font-size: var(--mn-fs-sm); color: var(--mn-ink-3); white-space: nowrap; }
.mn-input--search { width: 220px; }
.mn-kpi--crit .mn-kpi-n { color: var(--mn-crit); }     /* only exceptions are coloured, and only when there is one */
.mn-kpi--warn .mn-kpi-n { color: var(--mn-warn); }
.mn-scroll--board { max-height: calc(100vh - 430px); }
.mn-table .mn-est { color: var(--mn-warn); font-weight: 600; }   /* estimate differs from schedule */
.mn-table .mn-sub-line { display: block; margin-top: 2px; font-size: var(--mn-fs-sm); color: var(--mn-ink-3); }
.mn-table tr.mn-row--missed td:first-child { box-shadow: inset 2px 0 0 var(--mn-crit); }
.mn-table tr.mn-row--risk td:first-child { box-shadow: inset 2px 0 0 var(--mn-warn); }
.mn-table td.mn-state { text-align: center; padding: 40px 12px; color: var(--mn-ink-3); }
.mn-table td.mn-state--error { color: var(--mn-crit); }

/* milestone progress: bar plus counts (words, never colour alone) */
.mn-ms { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.mn-ms-counts { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--mn-fs-sm); color: var(--mn-ink-3); }
.mn-ms-counts .mn-st { font-size: var(--mn-fs-sm); font-weight: 500; letter-spacing: 0; }
.mn-ms-counts .mn-st::before { width: 6px; height: 6px; }

/* ---------- turnaround board ---------- */
.mn-select--wide { width: 260px; }
.mn-table .mn-conf { color: var(--mn-ink-3); font-size: var(--mn-fs-sm); }
@media (max-width: 1024px) { .mn-select--wide { width: 100%; } }

/* ---------- stand board: Gantt (vis-timeline) + side lists ---------- */


.mn-board { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.mn-tl { height: 560px; }

/* source key: the same classes colour the bars and the legend swatches */
.mn-keys { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 16px; font-size: var(--mn-fs-sm); color: var(--mn-ink-2); }
.mn-key { display: inline-flex; align-items: center; gap: 6px; }
.mn-key i { display: inline-block; width: 14px; height: 10px; border-radius: 2px; border: 1px solid; }

/* bar colours: a tint, a solid edge, and the ink colour for text. Colour family = the source. */
.mn-src-PLAN            { background: color-mix(in srgb, var(--mn-ok) 24%, transparent);  border-color: var(--mn-ok); }
.mn-src-AIRLINE_REQUEST { background: color-mix(in srgb, var(--mn-accent) 24%, transparent);  border-color: var(--mn-accent); }
.mn-src-AUTO,
.mn-src-OTHER           { background: color-mix(in srgb, var(--mn-idle) 32%, transparent); border-color: var(--mn-idle); }
.mn-src-MANUAL          { background: color-mix(in srgb, var(--mn-warn) 26%, transparent);  border-color: var(--mn-warn); }
.mn-src-REASSIGNMENT    { background: color-mix(in srgb, var(--mn-crit) 28%, transparent); border-color: var(--mn-crit); }
/* hatched = blocked, so it never depends on colour alone */
.mn-hatch-closed { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--mn-crit) 38%, transparent), color-mix(in srgb, var(--mn-crit) 38%, transparent) 5px, color-mix(in srgb, var(--mn-crit) 12%, transparent) 5px, color-mix(in srgb, var(--mn-crit) 12%, transparent) 10px); border-color: var(--mn-crit); }
.mn-hatch-mars   { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--mn-mars) 40%, transparent), color-mix(in srgb, var(--mn-mars) 40%, transparent) 5px, color-mix(in srgb, var(--mn-mars) 14%, transparent) 5px, color-mix(in srgb, var(--mn-mars) 14%, transparent) 10px); border-color: color-mix(in srgb, var(--mn-mars) 80%, #000); }
.mn-hatch-mars-manual { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--mn-mars) 55%, transparent), color-mix(in srgb, var(--mn-mars) 55%, transparent) 5px, color-mix(in srgb, var(--mn-mars) 22%, transparent) 5px, color-mix(in srgb, var(--mn-mars) 22%, transparent) 10px); border-color: var(--mn-mars); }

/* vis-timeline restyled to the shell (all scoped to .mn-tl) */
.mn-tl .vis-timeline { border: 1px solid var(--mn-line); border-radius: var(--mn-r-lg); background: var(--mn-panel); font: var(--mn-fs-sm) var(--mn-font); }
.mn-tl .vis-panel.vis-center, .mn-tl .vis-panel.vis-left, .mn-tl .vis-panel.vis-right,
.mn-tl .vis-panel.vis-top, .mn-tl .vis-panel.vis-bottom { border-color: var(--mn-line); }
.mn-tl .vis-labelset .vis-label { color: var(--mn-ink); font: 500 12px var(--mn-mono); border-bottom: 1px solid var(--mn-line); }
.mn-tl .vis-labelset .vis-label .vis-inner { padding: 4px 10px; }
.mn-tl .vis-time-axis .vis-text { color: var(--mn-ink-3); }
.mn-tl .vis-time-axis .vis-grid.vis-minor, .mn-tl .vis-time-axis .vis-grid.vis-major,
.mn-tl .vis-foreground .vis-group { border-color: var(--mn-line); }
.mn-tl .vis-current-time { background: var(--mn-accent); }
.mn-tl .vis-item { border-width: 1px; border-style: solid; border-radius: var(--mn-r); color: var(--mn-ink); font-size: var(--mn-fs-sm); }
.mn-tl .vis-item .vis-item-content { padding: 2px 6px; }
.mn-tl .vis-item.vis-selected { box-shadow: 0 0 0 2px var(--mn-accent); }
.mn-tl .vis-item.vis-background { border-width: 1px 0; }
.mn-tl .vis-item.mn-src-PLAN, .mn-tl .vis-item.mn-src-AIRLINE_REQUEST, .mn-tl .vis-item.mn-src-AUTO, .mn-tl .vis-item.mn-src-OTHER,
.mn-tl .vis-item.mn-src-MANUAL, .mn-tl .vis-item.mn-src-REASSIGNMENT { cursor: pointer; }
.mn-tl .vis-item.mn-src-PLAN.vis-selected { background: color-mix(in srgb, var(--mn-ok) 24%, transparent); border-color: var(--mn-ok); }
.mn-tl .vis-item.mn-src-AIRLINE_REQUEST.vis-selected { background: color-mix(in srgb, var(--mn-accent) 24%, transparent); border-color: var(--mn-accent); }
.mn-tl .vis-item.mn-src-AUTO.vis-selected, .mn-tl .vis-item.mn-src-OTHER.vis-selected { background: color-mix(in srgb, var(--mn-idle) 32%, transparent); border-color: var(--mn-idle); }
.mn-tl .vis-item.mn-src-MANUAL.vis-selected { background: color-mix(in srgb, var(--mn-warn) 26%, transparent); border-color: var(--mn-warn); }
.mn-tl .vis-item.mn-src-REASSIGNMENT.vis-selected { background: color-mix(in srgb, var(--mn-crit) 28%, transparent); border-color: var(--mn-crit); }
div.vis-tooltip { background: var(--mn-panel); color: var(--mn-ink); border: 1px solid var(--mn-line-2); border-radius: var(--mn-r); padding: 8px 10px;
  font: var(--mn-fs-sm)/1.45 var(--mn-font); white-space: pre-line; box-shadow: var(--mn-shadow-sm); }
.mn-flag { color: var(--mn-warn); }                      /* MARS stand marker */
.mn-tag { margin-left: 4px; padding: 0 5px; border-radius: 3px; font-size: 11px; background: color-mix(in srgb, var(--mn-accent) 30%, transparent); border: 1px solid var(--mn-accent); }
.mn-board-empty { margin: 8px 0 0; font-size: var(--mn-fs); color: var(--mn-ink-3); }

/* side lists */
.mn-side-lists > .mn-section + .mn-section { margin-top: 20px; }
.mn-side-lists header h2 { font-size: 14px; }
.mn-list { max-height: 170px; overflow: auto; }
.mn-li { display: block; padding: 8px 4px; border-bottom: 1px solid var(--mn-line); font-size: var(--mn-fs); color: var(--mn-ink-2); text-decoration: none; }
a.mn-li:hover { background: var(--mn-raised); color: var(--mn-ink); }
.mn-li b { color: var(--mn-ink); font-family: var(--mn-mono); font-weight: 500; }
.mn-li small { display: block; margin-top: 2px; font-size: var(--mn-fs-sm); color: var(--mn-ink-3); }
.mn-li--none { color: var(--mn-ink-3); }
.mn-li .mn-chip { margin-left: 6px; padding: 0 6px; border-radius: 3px; font-size: 11px; font-weight: 600; letter-spacing: .03em; color: var(--mn-ink-2); background: var(--mn-raised); border: 1px solid var(--mn-line-2); }

@media (max-width: 1100px) { .mn-board { grid-template-columns: minmax(0, 1fr); } .mn-tl { height: 480px; } }

/* the bare classes above colour the legend swatches; inside the Gantt they must out-rank vis-timeline's own item colours */
.mn-tl .vis-item.mn-src-PLAN            { background: color-mix(in srgb, var(--mn-ok) 24%, transparent);  border-color: var(--mn-ok); }
.mn-tl .vis-item.mn-src-AIRLINE_REQUEST { background: color-mix(in srgb, var(--mn-accent) 24%, transparent);  border-color: var(--mn-accent); }
.mn-tl .vis-item.mn-src-AUTO,
.mn-tl .vis-item.mn-src-OTHER           { background: color-mix(in srgb, var(--mn-idle) 32%, transparent); border-color: var(--mn-idle); }
.mn-tl .vis-item.mn-src-MANUAL          { background: color-mix(in srgb, var(--mn-warn) 26%, transparent);  border-color: var(--mn-warn); }
.mn-tl .vis-item.mn-src-REASSIGNMENT    { background: color-mix(in srgb, var(--mn-crit) 28%, transparent); border-color: var(--mn-crit); }
.mn-tl .vis-item.mn-hatch-closed        { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--mn-crit) 38%, transparent), color-mix(in srgb, var(--mn-crit) 38%, transparent) 5px, color-mix(in srgb, var(--mn-crit) 12%, transparent) 5px, color-mix(in srgb, var(--mn-crit) 12%, transparent) 10px); border-color: var(--mn-crit); }
.mn-tl .vis-item.mn-hatch-mars          { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--mn-mars) 40%, transparent), color-mix(in srgb, var(--mn-mars) 40%, transparent) 5px, color-mix(in srgb, var(--mn-mars) 14%, transparent) 5px, color-mix(in srgb, var(--mn-mars) 14%, transparent) 10px); border-color: color-mix(in srgb, var(--mn-mars) 80%, #000); }
.mn-tl .vis-item.mn-hatch-mars-manual   { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--mn-mars) 55%, transparent), color-mix(in srgb, var(--mn-mars) 55%, transparent) 5px, color-mix(in srgb, var(--mn-mars) 22%, transparent) 5px, color-mix(in srgb, var(--mn-mars) 22%, transparent) 10px); border-color: var(--mn-mars); }

/* ---------- runway board ---------- */
.mn-kpi-s { margin-top: 2px; font-size: var(--mn-fs-sm); color: var(--mn-ink-3); }
.mn-kpi--info .mn-kpi-n { color: var(--mn-accent); }

/* slot source: a small square, named in the legend and in the cell's tooltip */
.mn-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.mn-dot--AUTO { background: var(--mn-accent); } .mn-dot--MANUAL { background: var(--mn-warn); } .mn-dot--CTOT_INTERNAL { background: var(--mn-mars); }
.mn-dot--CTOT_EXTERNAL { background: var(--mn-ok); } .mn-dot--SWAPPED { background: var(--mn-crit); }

.mn-rwy-card + .mn-rwy-card { margin-top: 28px; }
.mn-rwy-card > header { align-items: center; gap: 12px; flex-wrap: wrap; }
.mn-rwy-id { display: flex; align-items: center; gap: 10px; }
.mn-rwy { margin: 0; font: 600 17px var(--mn-mono); letter-spacing: .02em; color: var(--mn-ink); }
.mn-xscroll { overflow-x: auto; }
.mn-table .mn-held { margin-left: 6px; font-size: var(--mn-fs-sm); color: var(--mn-warn); }   /* held back by the publication gate */
.mn-table .mn-ctot { font-weight: 600; color: var(--mn-ink); }

/* small word tags (type, ended / from, in force) */
.mn-chip { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 3px; font-size: 11px; font-weight: 600; letter-spacing: .03em;
  color: var(--mn-ink-2); background: var(--mn-raised); border: 1px solid var(--mn-line-2); white-space: nowrap; }
.mn-chip--info { color: var(--mn-accent); border-color: var(--mn-accent); background: var(--mn-accent-wash); }
.mn-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mn-keys .mn-dot { margin-right: 0; }
.mn-list--full { max-height: none; overflow: visible; }
.mn-input--short { width: 96px; text-transform: uppercase; font-family: var(--mn-mono); }
.mn-daynav { display: flex; gap: 4px; }
.mn-daynav .mn-input { width: 152px; }
.mn-held { color: var(--mn-warn); font-size: var(--mn-fs-sm); }
/* a table that scrolls sideways but does not pin its last column */
.mn-table--flat th:last-child, .mn-table--flat td:last-child { position: static; background: transparent; box-shadow: none; }
.mn-table--flat thead th { position: static; }
@media (max-width: 1024px) { .mn-input--short { width: 100%; } .mn-daynav { flex-wrap: wrap; } }

/* ---------- demand-capacity board: heatmap + lists ---------- */
/* One scale for the chart cells and the key. Every cell also prints its percentage, so colour is never alone. */
:root {
  --mn-band-under: #2a7a56; --mn-band-low: #a8791f; --mn-band-medium: #b8621a; --mn-band-high: #c24a2b; --mn-band-critical: #b32d2d;
}
.mn-band { border-color: transparent !important; }
.mn-band--under { background: var(--mn-band-under); } .mn-band--low { background: var(--mn-band-low); }
.mn-band--medium { background: var(--mn-band-medium); } .mn-band--high { background: var(--mn-band-high); } .mn-band--critical { background: var(--mn-band-critical); }

.mn-h1 .mn-h1-sub { margin-left: 10px; font: 500 16px var(--mn-mono); color: var(--mn-ink-3); }
.mn-heat-head { margin-bottom: 12px; }
.mn-heat-title { margin: 0 0 8px; font-size: var(--mn-fs); font-weight: 600; color: var(--mn-ink); }
.mn-heat-head .mn-keys { margin: 0; }
.mn-heat-scroll { overflow-x: auto; overflow-y: hidden; padding-top: 4px; }
.mn-heat-empty { margin: 0; padding: 24px 0; font-size: var(--mn-fs); color: var(--mn-ink-3); }
.mn-heat-empty b { color: var(--mn-ink-2); font-weight: 600; }
.mn-heat-note { margin: 0; padding: 24px 0; font-size: var(--mn-fs); color: var(--mn-warn); }
.mn-heat .apexcharts-text { font-family: var(--mn-font); }
.mn-heat .apexcharts-toolbar svg { fill: var(--mn-ink-3); }
.mn-heat .apexcharts-menu { background: var(--mn-panel) !important; border: 1px solid var(--mn-line-2) !important; border-radius: 6px; box-shadow: var(--mn-shadow-sm); padding: 4px 0; }
.mn-heat .apexcharts-menu-item { color: var(--mn-ink) !important; font-size: var(--mn-fs); padding: 6px 14px; }
.mn-heat .apexcharts-menu-item:hover { background: var(--mn-raised) !important; color: var(--mn-accent) !important; }
.mn-heat .apexcharts-tooltip { background: var(--mn-panel) !important; color: var(--mn-ink) !important; border: 1px solid var(--mn-line-2) !important; box-shadow: var(--mn-shadow-sm) !important; }

/* a muted note under a capped list */
.mn-note-line { padding: 8px 4px; border-top: 1px solid var(--mn-line); font-size: var(--mn-fs-sm); line-height: 1.5; color: var(--mn-ink-3); }
.mn-note-line a { color: var(--mn-accent); text-decoration: none; }
.mn-note-line a:hover { text-decoration: underline; }
.mn-btn[disabled] { opacity: .5; cursor: progress; }

/* ---------- ground flow board ---------- */
.mn-chip--warn { color: var(--mn-warn); border-color: var(--mn-warn); }          /* the last-read chip when a read has been missed */
.mn-h1 .mn-chip { margin-left: 12px; vertical-align: middle; font: 500 12px var(--mn-mono); letter-spacing: 0; }
.mn-table td.mn-end, .mn-table th.mn-end { text-align: right; }
.mn-table .mn-acts { justify-content: flex-end; }
.mn-table td .mn-sub-line { display: block; margin-top: 2px; font-size: var(--mn-fs-sm); color: var(--mn-ink-3); }

/* ---------- pushback queue: history drawer ---------- */
dialog.mn-modal.mn-modal--wide { width: min(780px, calc(100vw - 32px)); }
.mn-modal--wide h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mn-drawer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; margin-bottom: 16px; }
.mn-modal .mn-kv { padding: 7px 0; grid-template-columns: minmax(110px, 40%) minmax(0, 1fr); }
.mn-modal h3 { margin: 4px 0 8px; font-size: 14px; font-weight: 600; color: var(--mn-ink); }
.mn-modal .mn-xscroll { max-height: 260px; overflow: auto; }
.mn-modal-note { padding: 18px 0; color: var(--mn-ink-3); font-size: var(--mn-fs); }
@media (max-width: 1024px) { .mn-drawer-cols { grid-template-columns: minmax(0, 1fr); } }
.mn-filters .mn-updated { margin-left: auto; align-self: flex-end; padding-bottom: 8px; }   /* the "N flights" count sits at the right edge of the filter row */

/* ---------- holding bays: tabs, occupancy, form dialogs ---------- */
.mn-tabs { display: flex; flex-wrap: wrap; gap: 0 24px; border-bottom: 1px solid var(--mn-line); margin-bottom: 20px; }
.mn-tab { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 8px 0; color: var(--mn-ink-3);
  font: 500 var(--mn-fs) var(--mn-font); cursor: pointer; }
.mn-tab:hover { color: var(--mn-ink); }
.mn-tab[aria-selected="true"] { color: var(--mn-ink); border-bottom-color: var(--mn-accent); }
.mn-tab:focus-visible { outline: 2px solid var(--mn-accent); outline-offset: 2px; border-radius: 2px; }

.mn-section > header .mn-head-hint { display: block; margin-top: 2px; font-size: var(--mn-fs-sm); font-weight: 400; color: var(--mn-ink-3); }
.mn-section > header .mn-head-act { display: flex; align-items: center; gap: 16px; }
.mn-check { display: inline-flex; align-items: center; gap: 8px; font-size: var(--mn-fs-sm); color: var(--mn-ink-2); cursor: pointer; }
.mn-check input { accent-color: var(--mn-accent); width: 15px; height: 15px; margin: 0; }

/* occupancy: green when empty, amber when partly used, red when full (the figures "2 / 4" are always printed too) */
.mn-occ { display: flex; align-items: center; gap: 10px; }
.mn-occ .mn-bar { width: 90px; flex: none; }
.mn-bar--ok::-webkit-progress-value { background: var(--mn-ok); } .mn-bar--ok::-moz-progress-bar { background: var(--mn-ok); }
.mn-bar--warn::-webkit-progress-value { background: var(--mn-warn); } .mn-bar--warn::-moz-progress-bar { background: var(--mn-warn); }
.mn-bar--crit::-webkit-progress-value { background: var(--mn-crit); } .mn-bar--crit::-moz-progress-bar { background: var(--mn-crit); }

.mn-modal .mn-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mn-modal .mn-hint { display: block; margin-top: 4px; }
.mn-modal .mn-help { margin: 4px 0 16px; font-size: var(--mn-fs-sm); line-height: 1.5; color: var(--mn-ink-3); }
.mn-modal .mn-input[type="datetime-local"] { padding-right: 6px; }
@media (max-width: 1024px) { .mn-modal .mn-row2 { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================
   DAY theme bridge for pages not yet migrated.
   Those pages are drawn with style.css / Bootstrap variables, not --mn-*.
   Pointing the old names at the new tokens themes every one of them that
   uses a variable, with no per-page work. Anything a page hard-codes
   (an inline colour, a fixed rgba) stays as it was until that page is
   migrated; it is the reason to keep migrating, not a reason to patch here.
   ===================================================================== */
html[data-theme="light"] {
  --bg-primary: var(--mn-bg);       --bg-sidebar: var(--mn-bg);
  --bg-card: var(--mn-panel);       --bg-card-hover: var(--mn-raised);
  --accent: var(--mn-accent);       --accent-dark: var(--mn-accent);
  --accent-glow: var(--mn-accent-wash);
  --success: var(--mn-ok);          --danger: var(--mn-crit);   --warning: var(--mn-warn);
  --text-primary: var(--mn-ink);    --text-muted: var(--mn-ink-2);
  --border: var(--mn-line);

  --bs-body-bg: var(--mn-bg);       --bs-body-color: var(--mn-ink);
  --bs-border-color: var(--mn-line);
  --bs-card-bg: var(--mn-panel);    --bs-card-border-color: var(--mn-line);   --bs-card-color: var(--mn-ink);
  --bs-table-bg: var(--mn-panel);   --bs-table-color: var(--mn-ink);          --bs-table-border-color: var(--mn-line);
  --bs-table-striped-bg: var(--mn-raised);  --bs-table-striped-color: var(--mn-ink);
  --bs-table-hover-bg: var(--mn-accent-wash); --bs-table-hover-color: var(--mn-ink);
  --bs-table-active-bg: var(--mn-accent-wash); --bs-table-active-color: var(--mn-ink);
  --bs-body-bg-rgb: 245,247,250;
  --bs-secondary-bg: var(--mn-raised);  --bs-tertiary-bg: var(--mn-raised);
}

/* =====================================================================
   Customisation page: only the pieces no existing component covers.
   ===================================================================== */
.mn-swatch { width: 40px; height: var(--mn-ctl); padding: 2px; background: var(--mn-panel); border: 1px solid var(--mn-line-2); border-radius: var(--mn-r); cursor: pointer; }
.mn-swatch::-webkit-color-swatch-wrapper { padding: 0; } .mn-swatch::-webkit-color-swatch { border: 0; border-radius: calc(var(--mn-r) - 1px); }
.mn-swatch::-moz-color-swatch { border: 0; border-radius: calc(var(--mn-r) - 1px); }
.mn-colorrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mn-k small { display: block; margin-top: 2px; font-size: var(--mn-fs-sm); font-weight: 400; color: var(--mn-ink-3); }
.mn-imgprev { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mn-imgprev img { height: 40px; max-width: 180px; object-fit: contain; padding: 6px 10px; background: var(--mn-raised); border: 1px solid var(--mn-line); border-radius: var(--mn-r); }
.mn-input--wide { width: min(100%, 420px); }
.mn-sticky { position: sticky; top: calc(var(--mn-top) + 8px); z-index: 5; }
.mn-k small.mn-err { color: var(--mn-crit); }
.mn-k small.mn-err:empty { display: none; }
.mn-imgprev input[type="file"] { max-width: 100%; min-width: 0; }

/* a multi-line text box for pasting data: the input look, at any height */
.mn-textarea { display: block; width: 100%; min-height: 280px; padding: 10px 12px; background: var(--mn-panel); color: var(--mn-ink);
  border: 1px solid var(--mn-line-2); border-radius: var(--mn-r); font: var(--mn-fs-sm)/1.5 var(--mn-mono); white-space: pre; overflow: auto; resize: vertical; }
.mn-textarea:focus { outline: none; border-color: var(--mn-accent); box-shadow: 0 0 0 3px var(--mn-accent-wash); }

/* ---- flight detail hero: route, progress line, key times, cropped aircraft nose ---- */
.mn-hero { position: relative; display: flex; align-items: stretch; overflow: hidden; margin-bottom: 20px; min-height: 280px;
           background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--mn-accent) 16%, var(--mn-panel)), var(--mn-panel) 62%);
           border: 1px solid var(--mn-line); border-radius: 14px; }
.mn-hero-body { position: relative; z-index: 1; flex: 0 1 54%; min-width: 0; display: flex; flex-direction: column; gap: 22px; padding: 24px 26px; }
.mn-hero-route { display: flex; align-items: center; gap: 18px; }
.mn-hero-route > div { display: flex; flex-direction: column; min-width: 0; }
.mn-hero-route small, .mn-hero-t small, .mn-hero-meta small { color: var(--mn-ink-3); font-size: var(--mn-fs-sm); }
.mn-hero-code { font: 600 clamp(28px, 4vw, 44px)/1 var(--mn-mono, ui-monospace, monospace); color: var(--mn-ink); letter-spacing: .02em; }
.mn-hero-r { text-align: right; align-items: flex-end; }
.mn-hero-line { position: relative; flex: 1 1 80px; height: 24px; color: var(--mn-accent); }
.mn-p0 { --p: 0%; } .mn-p1 { --p: 25%; } .mn-p2 { --p: 50%; } .mn-p3 { --p: 75%; } .mn-p4 { --p: 100%; }
.mn-hero-line::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed var(--mn-line-2); }
.mn-hero-line i { position: absolute; left: 0; top: 50%; width: var(--p); border-top: 2px solid var(--mn-accent); transition: width .8s cubic-bezier(.3,.7,.2,1); }
.mn-hero-line svg { position: absolute; top: 0; left: var(--p); width: 24px; height: 24px; transform: translateX(-50%) rotate(90deg);
                    transition: left .8s cubic-bezier(.3,.7,.2,1); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mn-accent) 60%, transparent)); }
.mn-hero-times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 440px; }
.mn-hero-t { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; background: color-mix(in srgb, var(--mn-panel) 70%, transparent);
             border: 1px solid var(--mn-line); border-radius: 10px; backdrop-filter: blur(4px); }
.mn-hero-t b { white-space: nowrap; font: 600 var(--mn-fs, 14px) var(--mn-mono, ui-monospace, monospace); color: var(--mn-ink); }
.mn-hero-t--est b { color: var(--mn-ink-2); font-weight: 500; }
.mn-hero-meta { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.mn-hero-meta span { display: flex; flex-direction: column; gap: 2px; }
.mn-hero-img { position: absolute; z-index: 0; right: 1%; bottom: 0; height: 100%; width: auto; max-width: 48%; object-fit: contain; object-position: right bottom;
               filter: drop-shadow(0 18px 30px rgba(0,0,0,.35)); pointer-events: none;
               -webkit-mask-image: linear-gradient(to right, transparent 0, #000 52%); mask-image: linear-gradient(to right, transparent 0, #000 52%); }
html[data-theme="light"] .mn-hero-img { filter: drop-shadow(0 14px 22px rgba(30,60,110,.28)); }
@media (max-width: 900px) { .mn-hero-body { flex-basis: 100%; } .mn-hero-img { opacity: .3; max-width: 70%; } }
@media (max-width: 640px) { .mn-hero-body { padding: 18px 16px; } .mn-hero-route { gap: 10px; } .mn-hero-img { opacity: .18; } }
@media (prefers-reduced-motion: reduce) { .mn-hero-line i, .mn-hero-line svg { transition: none; } }

/* ---- flight detail: cards, stat tiles, flight path, ruler, route arc, event rail ---- */
@keyframes mnPaneIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes mnPulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mn-accent) 45%, transparent); } 50% { box-shadow: 0 0 0 7px transparent; } }
@keyframes mnFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.mn-pane { animation: mnPaneIn .32s cubic-bezier(.2,.7,.2,1) both; }
.mn-pane .mn-section { background: var(--mn-panel); border: 1px solid var(--mn-line); border-radius: 12px; padding: 18px 20px; }
.mn-pane .mn-section > header { border-bottom: 0; padding-bottom: 12px; }
.mn-var { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 9px; font-size: var(--mn-fs-sm); color: var(--mn-ink-2); background: color-mix(in srgb, var(--mn-ok) 14%, transparent); }
.mn-var--warn { background: color-mix(in srgb, var(--mn-warn) 18%, transparent); }
.mn-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; align-items: start; }
.mn-empties { margin-top: 10px; }
.mn-empties summary { cursor: pointer; color: var(--mn-accent); font-size: var(--mn-fs-sm); padding: 6px 0; }
/* tiles: the same labelled rows, shown as small cards (the labels stay, so the missing-field highlight still finds them) */
.mn-dl--tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.mn-dl--tiles .mn-kv { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--mn-line); border-radius: 10px; background: var(--mn-raised);
                       transition: transform .18s, border-color .18s; }
.mn-dl--tiles .mn-kv:hover { transform: translateY(-2px); border-color: var(--mn-line-2); }
.mn-dl--tiles .mn-kv:has(.mn-v small) { grid-column: span 2; }
.mn-dl--tiles .mn-k { font-size: var(--mn-fs-sm); color: var(--mn-ink-3); }
.mn-dl--tiles .mn-v { font-size: 15px; font-weight: 600; }
.mn-dl--tiles .mn-v small { font-weight: 400; }
.mn-dl--tiles .mn-kv--missing { border-color: var(--mn-crit); }
/* flight path: steps joined by legs that carry their duration */
.mn-gg { display: flex; align-items: flex-start; margin: 10px 0 2px; padding: 0; list-style: none; }
.mn-gg-step { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 128px; text-align: center; }
.mn-gg-step > div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mn-gg-dot { position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 50%; background: var(--mn-panel); border: 2px solid var(--mn-line-2); box-sizing: border-box; }
.mn-gg-step--done .mn-gg-dot { background: var(--mn-ok); border-color: var(--mn-ok); }
.mn-gg-step--done .mn-gg-dot::after { content: "\2713"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; font-style: normal; color: var(--mn-bg); }
.mn-gg-step--now .mn-gg-dot { border-color: var(--mn-accent); animation: mnPulse 2s ease-in-out infinite; }
.mn-gg-name { color: var(--mn-ink-2); font-size: var(--mn-fs-sm); }
.mn-gg-name small { color: var(--mn-ink-3); }
.mn-gg-time { font-weight: 600; font-family: var(--mn-mono); color: var(--mn-ink); }
.mn-gg-link { position: relative; flex: 1 1 0; min-width: 40px; height: 26px; }
.mn-gg-bar { position: absolute; left: -2px; right: -2px; top: 12px; height: 2px; background: repeating-linear-gradient(90deg, var(--mn-line-2) 0 6px, transparent 6px 11px); }
.mn-gg-link--done .mn-gg-bar { background: var(--mn-ok); transform-origin: left; animation: mnFill .9s cubic-bezier(.3,.7,.2,1) both; }
.mn-gg-link--now .mn-gg-bar { background: linear-gradient(90deg, var(--mn-ok), var(--mn-accent)); opacity: .8; }
.mn-gg-dur { position: absolute; left: 50%; top: -8px; transform: translateX(-50%); white-space: nowrap; font-size: var(--mn-fs-sm); color: var(--mn-ink-3); }
/* time ruler (Times tab) */
.mn-rl { width: 100%; height: auto; display: block; }
.mn-rl-lbl { fill: var(--mn-ink-2); font: 500 14px var(--mn-font); }
.mn-rl-lane { stroke: var(--mn-line); stroke-width: 2; stroke-dasharray: 3 7; }
.mn-rl-t { fill: var(--mn-ink-2); font: 500 13px var(--mn-mono); }
.mn-rl-s { fill: var(--mn-panel); stroke: var(--mn-ink-3); stroke-width: 2.5; }
.mn-rl-e { fill: color-mix(in srgb, var(--mn-accent) 55%, transparent); stroke: var(--mn-accent); stroke-width: 2; }
.mn-rl-a { fill: var(--mn-ok); stroke: var(--mn-panel); stroke-width: 3; }
.mn-rl-var { stroke-width: 5; stroke-linecap: round; opacity: .75; }
.mn-rl-var--late { stroke: var(--mn-warn); }
.mn-rl-var--early { stroke: var(--mn-ok); }
.mn-rl-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 0; font-size: var(--mn-fs-sm); color: var(--mn-ink-3); }
.mn-rkey { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; vertical-align: -1px; }
.mn-rkey--s { border: 2px solid var(--mn-ink-3); } .mn-rkey--e { background: var(--mn-accent); opacity: .6; } .mn-rkey--a { background: var(--mn-ok); }
.mn-rkey--late { width: 14px; height: 4px; border-radius: 2px; background: var(--mn-warn); vertical-align: 2px; }
.mn-rkey--early { width: 14px; height: 4px; border-radius: 2px; background: var(--mn-ok); vertical-align: 2px; }
.mn-matrix td, .mn-matrix th { white-space: nowrap; }
.mn-pane .mn-matrix { display: block; overflow-x: auto; }
/* route card */
.mn-rt { width: 100%; height: auto; display: block; max-height: 260px; }
.mn-rt-arc { fill: none; stroke: var(--mn-accent); stroke-width: 3; stroke-dasharray: 2 10; stroke-linecap: round; }
.mn-rt-pt { fill: var(--mn-panel); stroke: var(--mn-accent); stroke-width: 4; }
.mn-rt-code { fill: var(--mn-ink); font: 600 28px var(--mn-mono); letter-spacing: .04em; }
.mn-rt-plane path { fill: var(--mn-accent); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mn-accent) 55%, transparent)); }
.mn-spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 6px; }
.mn-spec > div { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--mn-line); border-radius: 10px; background: var(--mn-raised); }
.mn-spec small { color: var(--mn-ink-3); font-size: var(--mn-fs-sm); }
.mn-spec b { font: 600 20px var(--mn-mono); color: var(--mn-ink); }
.mn-wps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
.mn-wp { padding: 4px 10px; border: 1px solid var(--mn-line-2); border-radius: 14px; font: 500 var(--mn-fs-sm) var(--mn-mono); color: var(--mn-ink); background: var(--mn-raised); }
.mn-wp--end { border-color: var(--mn-accent); color: var(--mn-accent); background: var(--mn-accent-wash); }
.mn-wp-sep { font-style: normal; color: var(--mn-ink-3); }
/* activity: an event rail */
.mn-feed { position: relative; list-style: none; margin: 0; padding: 0 0 0 26px; }
.mn-feed::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; border-left: 2px solid var(--mn-line-2); }
.mn-feed-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "when when" "what by"; gap: 4px 12px; margin: 0 0 10px; padding: 12px 14px;
                border: 1px solid var(--mn-line); border-radius: 10px; background: var(--mn-raised); }
.mn-feed-item::before { content: ""; position: absolute; left: -26px; top: 16px; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; background: var(--mn-panel); border: 3px solid var(--mn-accent); }
.mn-feed-item--msg::before { border-color: var(--mn-mars); }
.mn-feed-when { grid-area: when; font-size: var(--mn-fs-sm); color: var(--mn-ink-3); }
.mn-feed-what { grid-area: what; min-width: 0; }
.mn-feed-by { grid-area: by; align-self: end; color: var(--mn-ink-3); font-size: var(--mn-fs-sm); }
.mn-feed-kind { display: inline-block; min-width: 52px; margin-right: 8px; padding: 1px 8px; border-radius: 9px; font-size: var(--mn-fs-sm); color: var(--mn-accent); background: var(--mn-accent-wash); }
.mn-feed-item--msg .mn-feed-kind { color: var(--mn-mars); background: color-mix(in srgb, var(--mn-mars) 14%, transparent); }
@media (max-width: 640px) {
  .mn-pane .mn-section { padding: 14px; }
  .mn-gg { flex-direction: column; align-items: stretch; gap: 0; }
  .mn-gg-step { flex-direction: row; align-items: flex-start; text-align: left; min-width: 0; gap: 12px; }
  .mn-gg-step > div { align-items: flex-start; }
  .mn-gg-link { flex: 0 0 auto; height: 38px; margin-left: 12px; border-left: 2px dashed var(--mn-line-2); }
  .mn-gg-link--done { border-left: 2px solid var(--mn-ok); }
  .mn-gg-bar { display: none; }
  .mn-gg-dur { left: 16px; top: 9px; transform: none; }
  .mn-facts { grid-template-columns: minmax(0, 1fr); }
  .mn-dl--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mn-dl--tiles .mn-kv:has(.mn-v small) { grid-column: span 2; }
}
@media (prefers-reduced-motion: reduce) { .mn-pane, .mn-gg-link--done .mn-gg-bar, .mn-gg-step--now .mn-gg-dot { animation: none; } .mn-dl--tiles .mn-kv { transition: none; } }

/* ---- flight detail tabs (shown only when the script has run; without it every panel stays visible) ---- */
.mn-ftabs { display: none; }
.mn-ftabs-on > .mn-ftabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--mn-line); }
.mn-ftab { position: relative; height: 40px; padding: 0 16px; background: transparent; border: 0; color: var(--mn-ink-2); font: 500 var(--mn-fs) var(--mn-font); cursor: pointer; }
.mn-ftab:hover { color: var(--mn-ink); }
.mn-ftab[aria-selected="true"] { color: var(--mn-ink); }
.mn-ftab[aria-selected="true"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--mn-accent); }
.mn-ftab:focus-visible { outline: 2px solid var(--mn-accent); outline-offset: -2px; border-radius: 4px; }
.mn-ftab-n { margin-left: 4px; padding: 0 6px; border-radius: 9px; font-size: var(--mn-fs-sm); color: var(--mn-ink-3); background: var(--mn-raised); }
.mn-pane > * + * { margin-top: 32px; }
.mn-pane[hidden] { display: none; }
@media (max-width: 640px) { .mn-ftabs-on > .mn-ftabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .mn-ftab { flex: 0 0 auto; } }
.mn-ftab--flag::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--mn-warn); vertical-align: 1px; }