/* =====================================================================================================
   ATFM DESIGN SYSTEM
   Loaded after atfm-shell.css. Read redesign/DESIGN_SYSTEM.md before adding to it.

   Three layers, from the bottom up:
     1. TOKENS      core colour / type / shape tokens (--mn-*, defined in atfm-shell.css) and the COMPONENT tokens
                    below (--ds-*): the one place that says how big, how round, how heavy each component is.
     2. STYLES      html[data-style="apple"] and html[data-style="classic"]: a style is nothing but values for the
                    tokens (plus the few rules that change structure, e.g. tabs). Add a style = add one block.
     3. COMPONENTS  .mn-btn, .mn-input, .mn-card, .mn-tile, .mn-badge, .mn-seg ... read only tokens, never a raw
                    value. The BRIDGE at the end maps old Bootstrap classes (.btn, .badge, .form-control, .card,
                    .alert ...) onto the same tokens, so pages that are not migrated yet look the same as migrated ones.

   To restyle the whole app: change a token. To restyle one component: change its --ds-* tokens.
   Colours and sizes chosen in Admin > Customisation still win (their selectors out-rank everything here).
   ===================================================================================================== */

/* ============================== 1. COMPONENT TOKENS (default = classic minimal) ============================== */
:root {
  /* shape */
  --ds-r-ctl: var(--mn-r);            /* buttons, inputs, selects */
  --ds-r-card: var(--mn-r-lg);        /* cards and panels */
  --ds-r-tile: var(--mn-r);           /* small tiles inside a card */
  --ds-r-pill: 999px;                 /* badges, chips */
  --ds-r-dialog: var(--mn-r-lg);      /* dialogs, menus, toasts */
  --ds-r-seg: 0px;                    /* segmented tab bar (0 = underline tabs) */
  /* size */
  --ds-h-ctl: var(--mn-ctl);          /* default control height */
  --ds-h-ctl-sm: 28px;
  --ds-h-ctl-lg: 44px;
  --ds-pad-card: 18px 20px;
  --ds-pad-tile: 12px 14px;
  --ds-pad-badge: 2px 8px;
  /* buttons */
  --ds-btn-bg: transparent;  --ds-btn-bg-hover: var(--mn-raised);  --ds-btn-bd: var(--mn-line-2);  --ds-btn-fg: var(--mn-ink);
  --ds-btn-shadow: none;     --ds-btn-weight: 500;                  --ds-press-scale: 1;
  /* inputs */
  --ds-input-bg: var(--mn-panel);  --ds-input-bd: var(--mn-line-2);
  /* surfaces */
  --ds-card-bg: var(--mn-panel);   --ds-card-bd: var(--mn-line);    --ds-card-shadow: none;
  --ds-tile-bg: var(--mn-raised);  --ds-tile-bd: var(--mn-line);
  /* focus */
  --ds-focus-outline: 2px solid var(--mn-accent);                   /* what a keyboard user sees on a control */
  --ds-focus-ring: 0 0 0 3px var(--mn-accent-wash);                 /* extra halo on text inputs */
  /* bars (top bar, sidebar) */
  --ds-bar-bg: var(--mn-bg);  --ds-bar-filter: none;
  /* navigation */
  --ds-nav-active-bg: var(--mn-accent-wash);  --ds-nav-active-bar: var(--mn-accent);  --ds-nav-r: var(--mn-r);
  --ds-group-case: uppercase;  --ds-group-track: .05em;
  /* type */
  --ds-h1-size: 24px;  --ds-h1-weight: 600;  --ds-h1-track: -.01em;  --ds-h2-size: 16px;
  /* motion */
  --ds-ease: ease;  --ds-dur: 120ms;
  /* tinted status backgrounds (badges, alerts) */
  --ds-tint: 16%;
  /* text on a solid fill of each status colour (Night values; Day below) */
  --mn-on-ok: #04140a;  --mn-on-warn: #1a0f00;
}
html[data-theme="light"] { --mn-on-ok: #ffffff;  --mn-on-warn: #ffffff; }

/* ============================== 2. STYLE: APPLE (default) ==============================
   Human Interface Guidelines: system colours and font, grouped cards on a grey canvas, soft continuous-feeling
   corners, segmented tabs, frosted bars, spring easing, a visible 4px focus halo. Day colours are the darker
   "accessible" variants so text passes 4.5:1.                                                                  */
html[data-style="apple"] {
  --mn-bg: #000000;  --mn-panel: #1c1c1e;  --mn-raised: #2c2c2e;
  --mn-line: #38383a;  --mn-line-2: #48484a;
  --mn-ink: #ffffff;  --mn-ink-2: #c7c7cc;  --mn-ink-3: #9a9aa0;
  --mn-accent: #409cff;  --mn-accent-ink: #04101f;
  --mn-ok: #30d158;  --mn-warn: #ff9f0a;  --mn-crit: #ff453a;  --mn-on-crit: #1a0400;  --mn-idle: #8e8e93;  --mn-mars: #bf5af2;
  --mn-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
  --mn-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --mn-r: 10px;  --mn-r-lg: 14px;  --mn-ctl: 36px;  --mn-fs: 13px;  --mn-fs-sm: 12px;  --mn-cell-y: 11px;
  --mn-shadow-sm: 0 4px 16px rgba(0,0,0,.40);  --mn-shadow-md: 0 8px 28px rgba(0,0,0,.45);  --mn-shadow-lg: 0 18px 56px rgba(0,0,0,.55);
  --ds-r-card: 18px;  --ds-r-tile: 14px;  --ds-r-dialog: 20px;  --ds-r-seg: 11px;
  --ds-btn-bg: var(--mn-panel);  --ds-btn-bg-hover: color-mix(in srgb, var(--mn-panel) 88%, var(--mn-ink));  --ds-btn-bd: var(--mn-line);
  --ds-press-scale: .97;
  --ds-card-bd: color-mix(in srgb, var(--mn-line) 55%, transparent);  --ds-card-shadow: 0 0 0 transparent;
  --ds-tile-bg: var(--mn-raised);  --ds-tile-bd: transparent;
  --ds-focus-outline: none;  --ds-focus-ring: 0 0 0 4px color-mix(in srgb, var(--mn-accent) 34%, transparent);
  --ds-bar-bg: color-mix(in srgb, var(--mn-bg) 74%, transparent);  --ds-bar-filter: saturate(180%) blur(22px);
  --ds-nav-active-bg: color-mix(in srgb, var(--mn-accent) 16%, transparent);  --ds-nav-active-bar: transparent;
  --ds-group-case: none;  --ds-group-track: 0;
  --ds-h1-size: 30px;  --ds-h1-weight: 700;  --ds-h1-track: -.022em;  --ds-h2-size: 17px;
  --ds-ease: cubic-bezier(.32,.72,0,1);  --ds-dur: 220ms;
  --ds-seg-track: #1c1c1e;  --ds-seg-on: #636366;
  --ds-lift: 0 0 0 transparent;
}
html[data-style="apple"][data-theme="light"] {
  --mn-bg: #f2f2f7;  --mn-panel: #ffffff;  --mn-raised: #f2f2f7;
  --mn-line: #e5e5ea;  --mn-line-2: #c7c7cc;
  --mn-ink: #1c1c1e;  --mn-ink-2: #48484a;  --mn-ink-3: #606064;
  --mn-accent: #005bc4;  --mn-accent-ink: #ffffff;
  --mn-ok: #17802f;  --mn-warn: #9a5200;  --mn-crit: #d70015;  --mn-on-crit: #ffffff;  --mn-idle: #606064;  --mn-mars: #8944ab;
  --mn-shadow-sm: 0 4px 16px rgba(0,0,0,.10);  --mn-shadow-md: 0 8px 28px rgba(0,0,0,.12);  --mn-shadow-lg: 0 18px 56px rgba(0,0,0,.18);
  --ds-card-bd: transparent;
  --ds-seg-track: #e3e3e8;  --ds-seg-on: #ffffff;
  --ds-lift: 0 1px 2px rgba(0,0,0,.05), 0 1px 12px rgba(0,0,0,.04);
  --ds-btn-shadow: 0 1px 2px rgba(0,0,0,.05);
  --ds-card-shadow: 0 1px 2px rgba(0,0,0,.05), 0 1px 12px rgba(0,0,0,.04);
}
/* the classic style needs the tab tokens too, so the rules below never reference an undefined name */
:root { --ds-seg-track: transparent;  --ds-seg-on: transparent;  --ds-lift: none; }

/* ============================== 3. SHARED COMPONENT RULES (tokens only) ============================== */
body.mn { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* bars */
body.mn .mn-top { background: var(--ds-bar-bg); -webkit-backdrop-filter: var(--ds-bar-filter); backdrop-filter: var(--ds-bar-filter); }
body.mn .mn-side { background: var(--ds-bar-bg); -webkit-backdrop-filter: var(--ds-bar-filter); backdrop-filter: var(--ds-bar-filter); }
@media (prefers-reduced-transparency: reduce) { body.mn .mn-top, body.mn .mn-side { background: var(--mn-bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* navigation */
body.mn .mn-top-link, body.mn .mn-link { border-radius: var(--ds-nav-r); transition: background var(--ds-dur) var(--ds-ease), color var(--ds-dur) var(--ds-ease); }
body.mn .mn-top-link[aria-current="page"], body.mn .mn-link[aria-current="page"] { background: var(--ds-nav-active-bg); border-left-color: var(--ds-nav-active-bar); }
html[data-style="apple"] .mn-top-link, html[data-style="apple"] .mn-link { border-left: 0; padding: 7px 12px; }
html[data-style="apple"] .mn-top-link[aria-current="page"], html[data-style="apple"] .mn-link[aria-current="page"] { font-weight: 600; }
body.mn .mn-group > summary { text-transform: var(--ds-group-case); letter-spacing: var(--ds-group-track); }
/* headings */
body.mn .mn-h1 { font-size: var(--ds-h1-size); font-weight: var(--ds-h1-weight); letter-spacing: var(--ds-h1-track); }
body.mn .mn-section h2 { font-size: var(--ds-h2-size); }

/* buttons: .mn-btn, with --primary, --danger, --ghost, --quiet-danger */
body.mn .mn-btn { height: var(--ds-h-ctl); border-radius: var(--ds-r-ctl); border: 1px solid var(--ds-btn-bd); background: var(--ds-btn-bg); color: var(--ds-btn-fg);
  box-shadow: var(--ds-btn-shadow); font-weight: var(--ds-btn-weight);
  transition: transform var(--ds-dur) var(--ds-ease), background var(--ds-dur) var(--ds-ease), filter var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease); }
body.mn .mn-btn:hover { background: var(--ds-btn-bg-hover); }
body.mn .mn-btn:active { transform: scale(var(--ds-press-scale)); }
body.mn .mn-btn--primary { background: var(--mn-accent); border-color: var(--mn-accent); color: var(--mn-accent-ink); box-shadow: none; }
body.mn .mn-btn--primary:hover { background: var(--mn-accent); filter: brightness(1.1); }
body.mn .mn-btn--danger { background: var(--mn-crit); border-color: var(--mn-crit); color: var(--mn-on-crit); box-shadow: none; }
body.mn .mn-btn--danger:hover { background: var(--mn-crit); filter: brightness(1.1); }
body.mn .mn-btn--ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--mn-ink-2); }
body.mn .mn-btn--ghost:hover { background: var(--ds-btn-bg-hover); color: var(--mn-ink); }
body.mn .mn-btn--quiet-danger { background: transparent; border-color: transparent; box-shadow: none; color: var(--mn-crit); }
body.mn .mn-btn--quiet-danger:hover { background: var(--ds-btn-bg-hover); border-color: var(--mn-crit); }
html[data-style="apple"] .mn-btn--ghost { color: var(--mn-accent); }
/* inputs: .mn-input, .mn-select */
body.mn .mn-input, body.mn .mn-select, body.mn .mn-dialog input, body.mn .mn-textarea { height: var(--ds-h-ctl); border-radius: var(--ds-r-ctl); background: var(--ds-input-bg); border: 1px solid var(--ds-input-bd);
  transition: border-color var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease); }
body.mn .mn-textarea { height: auto; }
/* focus: one rule for every control */
body.mn .mn-btn:focus-visible, body.mn .mn-top-link:focus-visible, body.mn .mn-link:focus-visible, body.mn .mn-group > summary:focus-visible,
body.mn .mn-user > summary:focus-visible, body.mn .mn-ftab:focus-visible, body.mn .mn-tab:focus-visible, body.mn .mn-empties summary:focus-visible {
  outline: var(--ds-focus-outline); outline-offset: 2px; box-shadow: var(--ds-focus-ring); }
body.mn .mn-input:focus, body.mn .mn-select:focus, body.mn .mn-textarea:focus, body.mn .mn-dialog input:focus { outline: none; border-color: var(--mn-accent); box-shadow: var(--ds-focus-ring); }
/* cards: any .mn-section inside a flight-detail pane, and the generic .mn-card */
body.mn .mn-card, body.mn .mn-pane .mn-section { background: var(--ds-card-bg); border: 1px solid var(--ds-card-bd); border-radius: var(--ds-r-card); box-shadow: var(--ds-card-shadow); padding: var(--ds-pad-card); }
body.mn .mn-pane .mn-section > header { border-bottom: 0; padding-bottom: 12px; }
body.mn .mn-card > header { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; }
body.mn .mn-card h2 { margin: 0; font-size: var(--ds-h2-size); font-weight: 600; color: var(--mn-ink); }
body.mn .mn-card > header span { color: var(--mn-ink-3); font-size: var(--mn-fs-sm); }
/* tiles: .mn-tile and the labelled rows shown as tiles */
body.mn .mn-tile, body.mn .mn-dl--tiles .mn-kv, body.mn .mn-spec > div, body.mn .mn-hero-t, body.mn .mn-feed-item {
  background: var(--ds-tile-bg); border: 1px solid var(--ds-tile-bd); border-radius: var(--ds-r-tile); }
body.mn .mn-tile { display: flex; flex-direction: column; gap: 4px; padding: var(--ds-pad-tile); }
body.mn .mn-tile small { color: var(--mn-ink-3); font-size: var(--mn-fs-sm); }
body.mn .mn-tile b { font: 600 18px var(--mn-mono); color: var(--mn-ink); }
body.mn .mn-hero { border-radius: calc(var(--ds-r-card) + 4px); }
html[data-style="apple"] .mn-dl--tiles .mn-kv:hover { border-color: transparent; transform: translateY(-2px) scale(1.01); transition: transform .25s var(--ds-ease); }
html[data-style="apple"] .mn-dl--tiles .mn-kv--missing { background: color-mix(in srgb, var(--mn-crit) 22%, var(--mn-raised)); box-shadow: inset 0 0 0 1.5px var(--mn-crit); }
body.mn .mn-pane { animation-timing-function: var(--ds-ease); }
/* badges: .mn-badge with --ok --warn --crit --info */
body.mn .mn-badge { --b: var(--mn-ink-3); display: inline-flex; align-items: center; gap: 6px; padding: var(--ds-pad-badge); border-radius: var(--ds-r-pill); font-size: var(--mn-fs-sm); font-weight: 600; line-height: 1.4;
  background: color-mix(in srgb, var(--b) var(--ds-tint), var(--mn-panel)); color: color-mix(in srgb, var(--b) 72%, var(--mn-ink)); }
body.mn .mn-badge--ok { --b: var(--mn-ok); } body.mn .mn-badge--warn { --b: var(--mn-warn); } body.mn .mn-badge--crit { --b: var(--mn-crit); } body.mn .mn-badge--info { --b: var(--mn-accent); }
/* segmented tabs (flight detail) and the tab bars on settings pages */
html[data-style="apple"] .mn-ftabs-on > .mn-ftabs, html[data-style="apple"] .mn-tabs, html[data-style="apple"] .nav-tabs, html[data-style="apple"] .nav-pills {
  display: inline-flex; width: fit-content; max-width: 100%; gap: 2px; padding: 2px; background: var(--ds-seg-track); border: 0; border-radius: var(--ds-r-seg); }
html[data-style="apple"] .mn-tabs { margin-bottom: 20px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
html[data-style="apple"] .mn-ftab, html[data-style="apple"] .mn-tab { height: 32px; padding: 0 16px; margin: 0; border: 0; border-radius: calc(var(--ds-r-seg) - 2px); color: var(--mn-ink-2); flex: 0 0 auto;
  transition: background var(--ds-dur) var(--ds-ease), color var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease); }
html[data-style="apple"] .mn-ftab:hover, html[data-style="apple"] .mn-tab:hover { color: var(--mn-ink); }
html[data-style="apple"] .mn-ftab[aria-selected="true"], html[data-style="apple"] .mn-tab[aria-selected="true"] { background: var(--ds-seg-on); color: var(--mn-ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
html[data-style="apple"] .mn-ftab[aria-selected="true"]::after { content: none; }
html[data-style="apple"] .mn-ftab-n { background: color-mix(in srgb, var(--mn-ink) 10%, transparent); color: var(--mn-ink-2); }
/* dialogs, toasts */
body.mn dialog.mn-modal { border-radius: var(--ds-r-dialog); }
html[data-style="apple"] dialog.mn-modal { border: 0; box-shadow: var(--mn-shadow-lg); }
html[data-style="apple"] dialog.mn-modal::backdrop { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
body.mn .mn-toast { border-radius: var(--ds-r-dialog); }
html[data-style="apple"] .mn-toast { border-left: 0; box-shadow: var(--mn-shadow-md); }
/* touch screens: 44 pt targets */
@media (pointer: coarse) {
  html[data-style="apple"] { --mn-ctl: 44px; }
  html[data-style="apple"] .mn-tab, html[data-style="apple"] .mn-ftab { height: 40px; }
  html[data-style="apple"] .mn-link, html[data-style="apple"] .mn-top-link { padding-top: 11px; padding-bottom: 11px; }
}
@media (prefers-reduced-motion: reduce) { html[data-style="apple"] * { transition-duration: .01ms !important; } }

/* ============================== 4. BRIDGE: Bootstrap classes -> the components above ==============================
   Pages that are not migrated yet still use Bootstrap (btn, badge, form-control, card, alert ...) and a few classes
   from style.css. Inside the minimal shell they are drawn with the same tokens as the migrated components, so one
   change to a token restyles old and new pages together. When a page is migrated, delete its bridge dependency by
   using the .mn-* component instead; nothing here needs to change.                                               */
/* ---- buttons ---- */
body.mn .btn { --b: var(--mn-ink-3); --on: var(--mn-ink); display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--ds-h-ctl); padding: 0 14px;
  border-radius: var(--ds-r-ctl); border: 1px solid var(--ds-btn-bd); background: var(--ds-btn-bg); color: var(--ds-btn-fg); font: var(--ds-btn-weight) var(--mn-fs)/1.2 var(--mn-font);
  box-shadow: var(--ds-btn-shadow); text-decoration: none; cursor: pointer;
  transition: transform var(--ds-dur) var(--ds-ease), background var(--ds-dur) var(--ds-ease), filter var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease); }
body.mn .btn:hover { background: var(--ds-btn-bg-hover); color: var(--ds-btn-fg); }
body.mn .btn:active { transform: scale(var(--ds-press-scale)); }
body.mn .btn:focus-visible { outline: var(--ds-focus-outline); outline-offset: 2px; box-shadow: var(--ds-focus-ring); }
body.mn .btn-sm, body.mn .btn-group-sm > .btn { min-height: var(--ds-h-ctl-sm); padding: 0 10px; font-size: var(--mn-fs-sm); }
body.mn .btn-lg { min-height: var(--ds-h-ctl-lg); padding: 0 18px; font-size: 15px; }
body.mn .btn:disabled, body.mn .btn.disabled { opacity: .45; pointer-events: none; }
/* filled: primary info accent | success warning danger */
body.mn .btn-primary, body.mn .btn-info, body.mn .btn-accent { --b: var(--mn-accent); --on: var(--mn-accent-ink); }
body.mn .btn-success { --b: var(--mn-ok); --on: var(--mn-on-ok); }
body.mn .btn-warning { --b: var(--mn-warn); --on: var(--mn-on-warn); }
body.mn .btn-danger { --b: var(--mn-crit); --on: var(--mn-on-crit); }
body.mn .btn-primary, body.mn .btn-info, body.mn .btn-accent, body.mn .btn-success, body.mn .btn-warning, body.mn .btn-danger {
  background: var(--b); border-color: var(--b); color: var(--on); box-shadow: none; }
body.mn .btn-primary:hover, body.mn .btn-info:hover, body.mn .btn-accent:hover, body.mn .btn-success:hover, body.mn .btn-warning:hover, body.mn .btn-danger:hover { background: var(--b); color: var(--on); filter: brightness(1.1); }
/* neutral filled */
body.mn .btn-secondary, body.mn .btn-light, body.mn .btn-dark { background: var(--mn-raised); border-color: var(--mn-line); color: var(--mn-ink); box-shadow: none; }
body.mn .btn-secondary:hover, body.mn .btn-light:hover, body.mn .btn-dark:hover { background: color-mix(in srgb, var(--mn-raised) 86%, var(--mn-ink)); color: var(--mn-ink); }
/* outline: coloured text on the surface, tinted on hover (also the custom names used in style.css) */
body.mn .btn-outline-primary, body.mn .btn-outline-info, body.mn .btn-outline-accent, body.mn .btn-action-view, body.mn .btn-action-fpl { --b: var(--mn-accent); }
body.mn .btn-outline-success, body.mn .btn-outline-ok { --b: var(--mn-ok); }
body.mn .btn-outline-warning, body.mn .btn-outline-warn, body.mn .btn-action-edit { --b: var(--mn-warn); }
body.mn .btn-outline-danger, body.mn .btn-outline-del, body.mn .btn-action-del { --b: var(--mn-crit); }
body.mn .btn-outline-primary, body.mn .btn-outline-info, body.mn .btn-outline-accent, body.mn .btn-outline-success, body.mn .btn-outline-ok, body.mn .btn-outline-warning, body.mn .btn-outline-warn,
body.mn .btn-outline-danger, body.mn .btn-outline-del, body.mn .btn-action-view, body.mn .btn-action-fpl, body.mn .btn-action-edit, body.mn .btn-action-del {
  background: transparent; border-color: color-mix(in srgb, var(--b) 50%, var(--mn-line)); color: color-mix(in srgb, var(--b) 78%, var(--mn-ink)); box-shadow: none; }
body.mn .btn-outline-primary:hover, body.mn .btn-outline-info:hover, body.mn .btn-outline-accent:hover, body.mn .btn-outline-success:hover, body.mn .btn-outline-ok:hover, body.mn .btn-outline-warning:hover,
body.mn .btn-outline-warn:hover, body.mn .btn-outline-danger:hover, body.mn .btn-outline-del:hover, body.mn .btn-action-view:hover, body.mn .btn-action-fpl:hover, body.mn .btn-action-edit:hover, body.mn .btn-action-del:hover {
  background: color-mix(in srgb, var(--b) 14%, transparent); color: color-mix(in srgb, var(--b) 78%, var(--mn-ink)); }
body.mn .btn-outline-secondary, body.mn .btn-outline-light, body.mn .btn-outline-dark { background: transparent; border-color: var(--mn-line-2); color: var(--mn-ink-2); box-shadow: none; }
body.mn .btn-outline-secondary:hover, body.mn .btn-outline-light:hover, body.mn .btn-outline-dark:hover { background: var(--mn-raised); color: var(--mn-ink); }
body.mn .btn-link { background: transparent; border-color: transparent; box-shadow: none; color: var(--mn-accent); }
body.mn .btn-link:hover { background: transparent; text-decoration: underline; }
body.mn .btn-close { filter: none; opacity: .7; background-color: transparent; }
html[data-theme="dark"] body.mn .btn-close, html:not([data-theme="light"]) body.mn .btn-close { filter: invert(1) grayscale(1); }
/* ---- badges ---- */
body.mn .badge { --b: var(--mn-ink-3); padding: var(--ds-pad-badge); border-radius: var(--ds-r-pill); font-size: var(--mn-fs-sm); font-weight: 600; line-height: 1.4; letter-spacing: 0; text-transform: none;
  background: color-mix(in srgb, var(--b) var(--ds-tint), var(--mn-panel)) !important; color: color-mix(in srgb, var(--b) 72%, var(--mn-ink)) !important; }
body.mn .badge.bg-primary, body.mn .badge.bg-info { --b: var(--mn-accent); }
body.mn .badge.bg-success { --b: var(--mn-ok); }
body.mn .badge.bg-warning { --b: var(--mn-warn); }
body.mn .badge.bg-danger { --b: var(--mn-crit); }
body.mn .badge.bg-secondary, body.mn .badge.bg-dark, body.mn .badge.bg-light { --b: var(--mn-ink-3); }
/* ---- forms ---- */
body.mn .form-control, body.mn .form-select, body.mn textarea.form-control { min-height: var(--ds-h-ctl); padding: 6px 12px; border-radius: var(--ds-r-ctl); background-color: var(--ds-input-bg); color: var(--mn-ink);
  border: 1px solid var(--ds-input-bd); font: var(--mn-fs)/1.4 var(--mn-font); transition: border-color var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease); }
body.mn .form-control::placeholder { color: var(--mn-ink-3); opacity: 1; }
body.mn .form-control:focus, body.mn .form-select:focus { background-color: var(--ds-input-bg); color: var(--mn-ink); border-color: var(--mn-accent); box-shadow: var(--ds-focus-ring); outline: none; }
body.mn .form-control:disabled, body.mn .form-select:disabled, body.mn .form-control[readonly] { background-color: var(--mn-raised); color: var(--mn-ink-2); opacity: .8; }
body.mn .form-control-sm, body.mn .form-select-sm { min-height: var(--ds-h-ctl-sm); padding: 3px 10px; font-size: var(--mn-fs-sm); }
body.mn .form-control-lg, body.mn .form-select-lg { min-height: var(--ds-h-ctl-lg); }
body.mn .form-label, body.mn label.form-label { color: var(--mn-ink-2); font-size: var(--mn-fs-sm); font-weight: 500; margin-bottom: 6px; }
body.mn .form-text, body.mn .text-muted, body.mn .text-secondary, body.mn small.text-muted { color: var(--mn-ink-3) !important; }
body.mn .form-check-input { background-color: var(--ds-input-bg); border-color: var(--mn-line-2); }
body.mn .form-check-input:checked { background-color: var(--mn-accent); border-color: var(--mn-accent); }
body.mn .form-check-input:focus { box-shadow: var(--ds-focus-ring); border-color: var(--mn-accent); }
body.mn .form-check-label { color: var(--mn-ink); }
body.mn .input-group-text { background: var(--mn-raised); border: 1px solid var(--ds-input-bd); color: var(--mn-ink-2); border-radius: var(--ds-r-ctl); }
body.mn .invalid-feedback, body.mn .text-danger { color: var(--mn-crit) !important; }
body.mn .text-success { color: var(--mn-ok) !important; } body.mn .text-warning { color: var(--mn-warn) !important; }
body.mn .text-info { color: var(--mn-accent) !important; }   /* .text-primary is "primary text" in style.css (= ink): left to the legacy alias */
/* ---- cards, tables, alerts ---- */
body.mn .card { background: var(--ds-card-bg); color: var(--mn-ink); border: 1px solid var(--ds-card-bd); border-radius: var(--ds-r-card); box-shadow: var(--ds-card-shadow); }
body.mn .card-header, body.mn .card-footer { background: transparent; color: var(--mn-ink); border-color: var(--mn-line); font-weight: 600; }
body.mn .card-header:first-child { border-radius: var(--ds-r-card) var(--ds-r-card) 0 0; }
body.mn .card-body { color: var(--mn-ink); }
body.mn .table { --bs-table-bg: transparent; --bs-table-color: var(--mn-ink); --bs-table-border-color: var(--mn-line); --bs-table-hover-bg: var(--mn-raised); --bs-table-striped-bg: var(--mn-raised); color: var(--mn-ink); }
body.mn .table > thead > tr > th, body.mn .table th { color: var(--mn-ink-3) !important; font-size: var(--mn-fs-sm); font-weight: 500; border-bottom: 1px solid var(--mn-line-2); border-color: var(--mn-line) !important; background-color: var(--mn-raised) !important; }
body.mn .table > tbody > tr > td { border-color: var(--mn-line); padding-block: var(--mn-cell-y); vertical-align: middle; }
body.mn .table-hover > tbody > tr:hover > * { background-color: var(--mn-raised); color: var(--mn-ink); }
body.mn .alert { --b: var(--mn-ink-3); border-radius: var(--ds-r-card); background: color-mix(in srgb, var(--b) 12%, var(--mn-panel)); border: 1px solid color-mix(in srgb, var(--b) 32%, var(--mn-line)); color: var(--mn-ink); }
body.mn .alert-info, body.mn .alert-primary { --b: var(--mn-accent); } body.mn .alert-success { --b: var(--mn-ok); } body.mn .alert-warning { --b: var(--mn-warn); } body.mn .alert-danger { --b: var(--mn-crit); }
body.mn .alert .alert-link, body.mn .alert a:not(.btn) { color: var(--mn-accent); }
/* ---- navigation, menus, overlays ---- */
body.mn .nav-tabs .nav-link, body.mn .nav-pills .nav-link { color: var(--mn-ink-2); border: 0; background: transparent; }
body.mn .nav-tabs .nav-link:hover, body.mn .nav-pills .nav-link:hover { color: var(--mn-ink); }
body.mn .nav-tabs .nav-link.active, body.mn .nav-pills .nav-link.active { color: var(--mn-ink); background: var(--mn-raised); border-bottom: 2px solid var(--mn-accent); }
html[data-style="apple"] .nav-tabs .nav-link, html[data-style="apple"] .nav-pills .nav-link { border-radius: calc(var(--ds-r-seg) - 2px); padding: 6px 16px; }
html[data-style="apple"] .nav-tabs .nav-link.active, html[data-style="apple"] .nav-pills .nav-link.active { background: var(--ds-seg-on); border-bottom: 0; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
body.mn .dropdown-menu { background: var(--mn-panel); color: var(--mn-ink); border: 1px solid var(--mn-line); border-radius: var(--ds-r-card); box-shadow: var(--mn-shadow-sm); }
body.mn .dropdown-item { color: var(--mn-ink); } body.mn .dropdown-item:hover, body.mn .dropdown-item:focus { background: var(--mn-raised); color: var(--mn-ink); }
body.mn .modal-content { background: var(--mn-panel); color: var(--mn-ink); border: 1px solid var(--mn-line); border-radius: var(--ds-r-dialog); box-shadow: var(--mn-shadow-lg); }
body.mn .modal-header, body.mn .modal-footer { border-color: var(--mn-line); }
body.mn .list-group-item { background: var(--mn-panel); color: var(--mn-ink); border-color: var(--mn-line); }
body.mn .page-link { background: var(--mn-panel); color: var(--mn-accent); border-color: var(--mn-line); }
body.mn .page-item.active .page-link { background: var(--mn-accent); border-color: var(--mn-accent); color: var(--mn-accent-ink); }
body.mn .progress { height: 6px; background: var(--mn-raised); border-radius: var(--ds-r-pill); }
body.mn .progress-bar { background-color: var(--mn-accent); }
body.mn .breadcrumb-item, body.mn .breadcrumb-item a { color: var(--mn-ink-2); }
body.mn .border, body.mn .border-top, body.mn .border-bottom, body.mn .border-secondary { border-color: var(--mn-line) !important; }
body.mn .bg-dark, body.mn .bg-secondary { background-color: var(--mn-raised) !important; color: var(--mn-ink) !important; }
body.mn hr { border-color: var(--mn-line); opacity: 1; }

/* ---- legacy colour names -> tokens, in both themes (the older pages read these) ---- */
html[data-style="apple"] {
  --bg-primary: var(--mn-bg);  --bg-sidebar: var(--mn-bg);  --bg-card: var(--mn-panel);  --bg-card-hover: var(--mn-raised);  --surface-1: 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-secondary-bg: var(--mn-raised);  --bs-tertiary-bg: var(--mn-raised);
}
/* ---- tables: the dark header band becomes a quiet header row; header text stays sentence case ---- */
body.mn .table th { text-transform: none; letter-spacing: 0; padding: var(--mn-cell-y) 12px; }
body.mn .table-dark, body.mn .table-dark > tr > *, body.mn thead.table-dark th, body.mn .table > thead.table-dark > tr > th {
  --bs-table-bg: var(--mn-raised); --bs-table-color: var(--mn-ink-3); background-color: var(--mn-raised) !important; color: var(--mn-ink-3) !important; border-color: var(--mn-line) !important; }
/* ---- inline code and the white-text helper ---- */
body.mn code { background: var(--mn-raised); color: color-mix(in srgb, var(--mn-accent) 80%, var(--mn-ink)); padding: 1px 6px; border-radius: 6px; font-size: .92em; }
body.mn .text-white:not(.btn):not(.badge), body.mn .text-light { color: var(--mn-ink) !important; }
/* ---- plain links take the accent (Bootstrap's own blue is 3.4:1 on dark) ---- */
body.mn a:not([class]), body.mn a.text-decoration-none:not([class*="mn-"]):not([class*="btn"]):not(.nav-link):not(.dropdown-item):not(.page-link), body.mn a.link-primary { color: var(--mn-accent); }
body.mn a:not([class]):hover, body.mn a.text-decoration-none:not([class*="mn-"]):not([class*="btn"]):hover { color: var(--mn-accent); filter: brightness(1.15); }

/* ============================== 5. NARROW SCREENS (shell structure) ==============================
   Top bar: the title, theme button, clock and user menu wrap instead of pushing the page wider than the screen.
   Badges and buttons may wrap their text so one long label cannot create a horizontal scroll bar.            */
@media (max-width: 640px) {
  body.mn .mn-top { flex-wrap: wrap; height: auto; min-height: var(--mn-top); padding: 8px 16px; gap: 4px 12px; }
  body.mn .mn-top-right { flex-wrap: wrap; gap: 6px 12px; min-width: 0; max-width: 100%; }
  body.mn .mn-title { min-width: 0; overflow-wrap: anywhere; }
  body.mn .mn-user > summary small, body.mn .mn-db { display: none; }
  body.mn .badge, body.mn .mn-badge, body.mn .btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
}
/* inputs inside Bootstrap flex rows may shrink below their natural width (otherwise a nowrap row pushes the page wide on phones) */
body.mn .d-flex > .form-control, body.mn .d-flex > .form-select, body.mn .d-flex > input, body.mn .d-flex > select, body.mn .d-flex > .input-group { min-width: 0; }
body.mn .form-control, body.mn .form-select { max-width: 100%; }
@media (max-width: 640px) { body.mn .d-flex:not(.flex-nowrap):not(.flex-column) { flex-wrap: wrap; } }
/* ---- filter bars and file inputs from style.css (it forces dark fills with !important) ---- */
body.mn .filter-bar { background-color: var(--ds-card-bg); border: 1px solid var(--ds-card-bd); border-radius: var(--ds-r-card); }
body.mn .filter-select, body.mn .filter-bar .form-control, body.mn .filter-bar .form-select { background-color: var(--ds-input-bg) !important; border-color: var(--ds-input-bd) !important; color: var(--mn-ink) !important; }
body.mn select option { background-color: var(--mn-panel); color: var(--mn-ink); }
body.mn input[type="file"].form-control { background-color: var(--ds-input-bg); color: var(--mn-ink-2); }
body.mn input[type="file"].form-control::file-selector-button { background-color: var(--mn-accent); color: var(--mn-accent-ink); border-radius: calc(var(--ds-r-ctl) - 2px); }
/* ---- coloured background utilities on things that are not badges (style.css gives them light text for dark pages) ---- */
body.mn .bg-success:not(.badge), body.mn .bg-danger:not(.badge), body.mn .bg-warning:not(.badge), body.mn .bg-primary:not(.badge), body.mn .bg-info:not(.badge) {
  --b: var(--mn-ink-3); background-color: color-mix(in srgb, var(--b) 14%, var(--mn-panel)) !important; color: color-mix(in srgb, var(--b) 72%, var(--mn-ink)) !important; }
body.mn .bg-success:not(.badge) { --b: var(--mn-ok); } body.mn .bg-danger:not(.badge) { --b: var(--mn-crit); } body.mn .bg-warning:not(.badge) { --b: var(--mn-warn); }
body.mn .bg-primary:not(.badge), body.mn .bg-info:not(.badge) { --b: var(--mn-accent); }
/* ---- date picker popup (flatpickr) ---- */
body.mn .flatpickr-calendar, body.mn .flatpickr-innerContainer, body.mn .flatpickr-rContainer { background: var(--mn-panel) !important; border-color: var(--mn-line) !important; box-shadow: var(--mn-shadow-md); }
body.mn .flatpickr-calendar { border-radius: var(--ds-r-card); }
body.mn .flatpickr-months, body.mn .flatpickr-month, body.mn .flatpickr-weekday { background: var(--mn-raised) !important; }
body.mn .flatpickr-month, body.mn .flatpickr-current-month, body.mn .flatpickr-current-month input, body.mn .flatpickr-current-month .cur-month { color: var(--mn-ink) !important; }
body.mn .flatpickr-weekday { color: var(--mn-ink-3) !important; }
body.mn .flatpickr-prev-month, body.mn .flatpickr-next-month { color: var(--mn-ink-2) !important; fill: var(--mn-ink-2) !important; }
body.mn .flatpickr-prev-month svg, body.mn .flatpickr-next-month svg { fill: var(--mn-ink-2); }
body.mn .flatpickr-day { color: var(--mn-ink) !important; }
body.mn .flatpickr-day:hover { background: var(--mn-raised) !important; color: var(--mn-ink) !important; }
body.mn .flatpickr-day.prevMonthDay, body.mn .flatpickr-day.nextMonthDay, body.mn .flatpickr-day.flatpickr-disabled { color: var(--mn-ink-3) !important; }
body.mn .flatpickr-day.today { color: var(--mn-accent) !important; border-color: var(--mn-accent); }
body.mn .flatpickr-day.selected, body.mn .flatpickr-day.startRange, body.mn .flatpickr-day.endRange { background: var(--mn-accent) !important; border-color: var(--mn-accent) !important; color: var(--mn-accent-ink) !important; }