/* Nexus V2 — base stylesheet. Each app may add its own on top. */

:root {
  /* Shared CAWG / CAP brand palette (sourced from SAREX signup.html). Every
     Nexus page uses the same navy banner; per-app CSS may override accents. */
  --nx-navy:     #0B2D52;
  --nx-navy2:    #163F70;
  --nx-blue:     #1B5FA8;
  --nx-amber:    #C97A10;
  --nx-white:    #ffffff;

  --bg:        #f5f4f1;     /* page bg outside the navy banner (matches Sarex gray0) */
  --panel:     #ffffff;
  --panel-2:   #f0efe9;
  --border:    #d5d2cb;
  --text:      #1a1d22;
  --muted:     #5e5a55;
  --accent:    var(--nx-blue);
  --accent-hover: #2a78c8;
  --danger:    #a12b2b;
  --ok:        #216a1d;

  /* Height of the sticky navy header (.nexus-header). Sticky sub-headers that
     need to freeze *below* it (e.g. the Aircraft Status column headers) offset
     by this. In the native app webview the global header isn't rendered
     (embed_mode), so `body.embed` zeroes it — otherwise those sub-headers would
     freeze 64px down with nothing above, covering the first rows (issue #672). */
  --nexus-header-h: 64px;
}

body.embed { --nexus-header-h: 0px; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
h1, h2, h3 { margin: 0 0 0.6em; font-weight: 600; }
button { cursor: pointer; font: inherit; }

/* ── Header (navy banner, CAP + CAWG logos) ─────────────────────────────── */
.nexus-header {
  background: var(--nx-navy);
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  height: 64px;
  gap: 12px;
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid rgba(0,0,0,0.2);
  color: #fff;
}
.nexus-brand {
  display: flex; align-items: center; flex-shrink: 0;
  text-decoration: none;
}
.nexus-logo {
  width: auto;
  object-fit: contain;
  /* black-on-transparent PNGs blend out against the navy */
  mix-blend-mode: screen;
  flex-shrink: 0;
}
.nexus-logo-cap  { height: 36px; }
.nexus-logo-cawg { height: 54px; }

.nexus-header-center {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}
.nexus-app-switch { display: flex; gap: 0.25rem; flex-shrink: 0; }
.nexus-app-link {
  padding: 0.35rem 0.7rem;
  border-radius: 4px;
  color: rgba(255,255,255,0.55);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.nexus-app-link:hover { color: #fff; background: rgba(255,255,255,0.08); }
.nexus-app-link.active {
  color: #fff;
  background: var(--nx-navy2);
  border-color: rgba(255,255,255,0.15);
}

.nexus-page-info {
  display: flex; align-items: center; gap: 0.6rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.nexus-badge {
  background: var(--nx-blue);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 4px;
  letter-spacing: 0.07em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
  flex-shrink: 0;
}
.nexus-page-title {
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.01em;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nexus-user-menu {
  display: flex; align-items: center; gap: 0.85rem;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  flex-shrink: 0;
}
.nexus-user-name { color: #fff; font-weight: 500; }
.nexus-user-name .nexus-user-badge,
.nexus-user-badge {
  margin-left: 0.35rem;
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  font-size: 10px;
  background: var(--nx-amber);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.nexus-user-menu a { color: rgba(255,255,255,0.7); text-decoration: none; }
.nexus-user-menu a:hover { color: #fff; }
.nexus-user-menu form.inline { display: inline; margin: 0; }
.nexus-user-menu button.link {
  background: none; border: 0;
  color: rgba(255,255,255,0.7);
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.nexus-user-menu button.link:hover { color: #fff; }

/* ── Main / layout ──────────────────────────────────────────────────────── */
.nexus-main { flex: 1; }

/* ── Auth pages ─────────────────────────────────────────────────────────── */
.nexus-auth .nexus-main {
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem;
}
.auth-card {
  width: 100%; max-width: 380px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.auth-logo { display: block; height: 160px; width: auto; margin: 0 auto 1.2rem; }
.auth-card h1 { margin-bottom: 1.2rem; color: var(--nx-navy); }
.auth-card form label { display: block; margin-bottom: 0.85rem; }
.auth-card form label > span {
  display: block; font-size: 0.8rem; color: var(--muted);
  margin-bottom: 0.25rem; text-transform: uppercase; letter-spacing: 0.04em;
}
.auth-card input {
  width: 100%; padding: 0.55rem 0.7rem;
  background: #fff; color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  font: inherit;
}
.auth-card input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.auth-card button[type=submit] {
  width: 100%; margin-top: 0.6rem;
  padding: 0.65rem; border-radius: 4px;
  background: var(--nx-navy); color: white; border: 0;
  font-weight: 600;
}
.auth-card button[type=submit]:hover { background: var(--nx-navy2); }
.auth-help { color: var(--muted); font-size: 0.85rem; margin-top: 1rem; }
.auth-legal { text-align: center; }

/* Mobile app store badges (shared: login card + dashboard footer). */
.store-apps { text-align: center; border-top: 1px solid var(--border); }
.store-apps-title {
  margin: 0 0 0.6rem; font-size: 0.8rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.store-badges {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 0.6rem;
}
/* Login-card variant: sits inside the narrow auth card. */
.auth-apps { margin-top: 1.4rem; padding-top: 1.2rem; }
/* Dashboard variant: centered footer under the app grid. */
.dash-apps { max-width: 960px; margin: 2.5rem auto 1.5rem; padding: 1.4rem 1.5rem 0; }
.store-badge { position: relative; display: inline-flex; }
.store-badge img { display: block; height: 44px; width: auto; }
.store-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
/* Google Play is in testing — show the badge dimmed with a "Coming soon" tooltip. */
.store-badge--soon { cursor: default; }
.store-badge--soon img { filter: grayscale(1); opacity: 0.55; }
.store-badge--soon::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%);
  background: var(--nx-navy); color: #fff;
  font-size: 0.72rem; font-weight: 600; white-space: nowrap;
  padding: 0.25rem 0.5rem; border-radius: 4px;
  opacity: 0; pointer-events: none; transition: opacity 0.12s ease;
}
.store-badge--soon::before {
  content: ""; position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%);
  border: 4px solid transparent; border-top-color: var(--nx-navy);
  opacity: 0; pointer-events: none; transition: opacity 0.12s ease;
}
.store-badge--soon:hover::after, .store-badge--soon:focus-visible::after,
.store-badge--soon:hover::before, .store-badge--soon:focus-visible::before { opacity: 1; }

/* Public legal pages (Privacy Policy / Terms of Service). */
.legal-doc {
  max-width: 760px; margin: 2rem auto; padding: 0 1.2rem 3rem;
  line-height: 1.6; color: var(--text);
}
.legal-doc h1 { color: var(--nx-navy); margin-bottom: 0.3rem; }
.legal-doc h2 { color: var(--nx-navy); margin-top: 1.8rem; font-size: 1.15rem; }
.legal-doc .legal-updated { color: var(--muted); font-size: 0.85rem; margin-top: 0; }
.legal-doc ul { padding-left: 1.3rem; }
.legal-doc li { margin-bottom: 0.4rem; }
.legal-doc .legal-nav { margin-top: 2.2rem; font-size: 0.9rem; }

/* Public homepage / landing page. */
.home-lead { font-size: 1.1rem; color: var(--muted); margin-top: 0; }
.home-signin {
  display: inline-block; padding: 0.55rem 1.4rem; border-radius: 6px;
  background: var(--nx-navy); color: #fff; text-decoration: none; font-weight: 600;
}
.home-signin:hover { background: var(--nx-navy2); }
.auth-welcome {
  padding: 0.7rem 0.9rem; margin-bottom: 1.1rem;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 6px; font-size: 0.9rem; line-height: 1.4; color: var(--text);
}
.auth-email-confirm { background: var(--panel-2); border-radius: 6px; padding: 0.75rem 1rem; margin: 1rem 0; }
.auth-email-address { font-family: monospace; font-size: 1.05rem; }
.auth-error {
  padding: 0.6rem 0.8rem; margin-bottom: 1rem;
  background: #fbeaea; color: var(--danger);
  border: 1px solid rgba(161,43,43,0.3); border-radius: 4px;
}
.auth-message {
  padding: 0.6rem 0.8rem; margin-bottom: 1rem;
  background: #ddf0d8; color: var(--ok);
  border: 1px solid rgba(33,106,29,0.3); border-radius: 4px;
}

/* ── Passkeys ───────────────────────────────────────────────────────────── */
.auth-divider {
  display: flex; align-items: center; gap: 0.7rem;
  margin: 1.1rem 0; color: var(--muted); font-size: 0.8rem;
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}
.auth-passkey-btn {
  width: 100%; padding: 0.65rem; border-radius: 4px;
  background: var(--panel-2); color: var(--nx-navy);
  border: 1px solid var(--nx-navy); font-weight: 600; cursor: pointer;
}
.auth-passkey-btn:hover:not(:disabled) { background: var(--border); }
.auth-passkey-btn:disabled { opacity: 0.6; cursor: default; }
.auth-google-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  box-sizing: border-box; text-decoration: none;
}
.auth-google-icon { width: 18px; height: 18px; flex-shrink: 0; }
.passkey-status {
  margin-top: 0.5rem; font-size: 0.85rem; color: var(--muted);
  min-height: 1.1rem;
}
.passkey-status-error { color: var(--danger); }
.passkey-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.passkey-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border);
}
.passkey-meta { display: flex; flex-direction: column; gap: 0.15rem; }
.passkey-name { font-weight: 600; color: var(--text); }
.passkey-sub { font-size: 0.8rem; color: var(--muted); }
.passkey-remove { color: var(--danger); }
.nexus-account .auth-passkey-btn { width: auto; padding: 0.55rem 1rem; }

/* ── Dashboard ──────────────────────────────────────────────────────────── */
.dash-hero {
  max-width: 960px; margin: 2rem auto 1rem; padding: 0 1.5rem;
}
.dash-hero h1 { font-size: 1.6rem; margin-bottom: 0.2rem; color: var(--nx-navy); }
.dash-hero p { color: var(--muted); }
.dash-tiles {
  max-width: 960px; margin: 1rem auto; padding: 0 1.5rem;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
/* Grouped dashboard sections: the .dash-group provides the centered container,
   so the inner .dash-tiles grid fills it (no double centering/padding). */
.dash-group { max-width: 960px; margin: 1.75rem auto 0; padding: 0 1.5rem; }
.dash-group-title {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.09em;
  font-weight: 700; color: var(--muted); margin: 0;
  padding: 0.75rem 0 0; border-top: 1px solid var(--border);
}
.dash-group .dash-tiles { max-width: none; margin: 0.7rem 0 0; padding: 0; }
.dash-tile {
  display: block;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 1.4rem;
  color: var(--text); text-decoration: none;
  transition: transform 0.08s ease, border-color 0.1s ease, box-shadow 0.1s ease;
  box-shadow: 0 1px 2px rgba(11,45,82,0.04);
}
.dash-tile:hover {
  border-color: var(--nx-blue);
  box-shadow: 0 4px 10px rgba(11,45,82,0.08);
  transform: translateY(-1px);
}
.dash-tile-tasks { position: relative; }
.dash-tile-badge {
  position: absolute; top: -8px; right: -8px;
  background: #c0392b; color: #fff; font-size: 0.75rem; font-weight: 700;
  min-width: 1.4rem; height: 1.4rem; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 0.35rem; box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.dash-tile-icon { font-size: 1.8rem; margin-bottom: 0.6rem; }
.dash-tile-name { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.25rem; color: var(--nx-navy); }
.dash-tile-desc { color: var(--muted); font-size: 0.85rem; }
.dash-empty {
  grid-column: 1 / -1;
  padding: 2rem; text-align: center;
  background: var(--panel); border: 1px dashed var(--border); border-radius: 8px;
  color: var(--muted);
}

/* ── Dashboard tabs + search (issue #220) ───────────────────────────────────
   Findability layer over the categories: an always-visible tab row plus a
   search box that filters across every app. Progressive enhancement — the tabs
   and search are JS-only, and without JS every .dash-group renders (the
   original full grouped list). The `js-dash` class is set on <html> before
   paint, so the no-JS list never flashes. */
.dash-tasks-row { margin-bottom: 0; }

/* Search box */
.dash-controls { display: none; }             /* JS-only */
html.js-dash .dash-controls {
  display: block; max-width: 960px; margin: 1.25rem auto 0; padding: 0 1.5rem;
}
.dash-search { position: relative; }
.dash-search-icon {
  position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%);
  font-size: 0.95rem; opacity: 0.7; pointer-events: none;
}
.dash-search input {
  width: 100%; box-sizing: border-box;
  padding: 0.6rem 0.9rem 0.6rem 2.4rem;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  font-size: 0.95rem;
}
.dash-search input:focus {
  outline: none; border-color: var(--nx-blue);
  box-shadow: 0 0 0 3px rgba(27,95,168,0.12);
}

/* Tab row */
.dash-tabs { display: none; }                 /* JS-only */
html.js-dash .dash-tabs {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  max-width: 960px; margin: 1rem auto 0; padding: 0 1.5rem;
}
.dash-tab {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  background: var(--panel); color: var(--text); text-decoration: none;
  border: 1px solid var(--border); border-radius: 999px;
  font-size: 0.9rem; font-weight: 600; white-space: nowrap;
  transition: border-color 0.1s ease, background 0.1s ease, color 0.1s ease;
}
.dash-tab:hover { border-color: var(--nx-blue); }
.dash-tab-active {
  background: var(--nx-navy); border-color: var(--nx-navy); color: #fff;
}
.dash-tab-count {
  font-size: 0.78rem; font-weight: 700; color: var(--muted);
  background: rgba(11,45,82,0.06); border-radius: 999px;
  padding: 0.05rem 0.4rem; min-width: 1.1rem; text-align: center;
}
.dash-tab-active .dash-tab-count { color: #fff; background: rgba(255,255,255,0.22); }

/* Results count while searching */
.dash-results-info {
  max-width: 960px; margin: 0.9rem auto 0; padding: 0 1.5rem;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.09em;
  font-weight: 700; color: var(--muted);
}
.dash-no-results {
  max-width: 960px; margin: 1rem auto; padding: 2rem; text-align: center;
  background: var(--panel); border: 1px dashed var(--border); border-radius: 8px;
  color: var(--muted);
}

/* Group visibility: with JS, only the active group(s) show. */
html.js-dash .dash-group { display: none; }
html.js-dash .dash-group.dash-group-active { display: block; }
/* In tab mode the active tab already names the area, so the group heading is
   redundant; while searching, several groups show, so keep the headings as
   category labels. */
html.js-dash .dash-shell.mode-tabs .dash-group-active .dash-group-title { display: none; }
html.js-dash .dash-shell.mode-tabs .dash-group-active { margin-top: 0; }
/* "All" tab (issue #725): every category shows at once, so keep the group
   headings as separators and restore the inter-group spacing the single-tab
   rules above collapse. Higher specificity (mode-tabs.mode-all) wins. */
html.js-dash .dash-shell.mode-tabs.mode-all .dash-group-active .dash-group-title { display: block; }
html.js-dash .dash-shell.mode-tabs.mode-all .dash-group-active { margin-top: 1.75rem; }

/* Pin (favorite) button — overlaid on each app tile; JS-only. The tile is
   wrapped so the button can be a sibling of the <a> (valid + keyboard-operable)
   rather than nested inside it. */
.dash-tile-wrap { position: relative; height: 100%; }
.dash-tile-wrap .dash-tile { height: 100%; box-sizing: border-box; }
.dash-pin { display: none; }                  /* JS-only */
html.js-dash .dash-pin {
  position: absolute; top: 0.5rem; right: 0.5rem;
  display: flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; padding: 0;
  border: none; border-radius: 999px; background: transparent;
  color: var(--muted); font-size: 1.15rem; line-height: 1; cursor: pointer;
  opacity: 0.4; transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease;
}
.dash-tile-wrap:hover .dash-pin { opacity: 0.85; }
.dash-pin:hover { background: rgba(11,45,82,0.07); color: var(--nx-blue); opacity: 1; }
.dash-pin[aria-pressed="true"] { opacity: 1; color: #e0a400; }   /* gold filled star */
.dash-pin:focus-visible { outline: 2px solid var(--nx-blue); outline-offset: 1px; opacity: 1; }

/* Personalized rows: pinned + recent. JS-only; shown in tab mode (each block
   hides itself when empty), hidden while searching. */
.dash-personal { display: none; }
html.js-dash .dash-shell.mode-tabs .dash-personal { display: block; }
.dash-personal-block { max-width: 960px; margin: 1.5rem auto 0; padding: 0 1.5rem; }
.dash-personal-title {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.09em;
  font-weight: 700; color: var(--muted); margin: 0 0 0.6rem;
}
.dash-personal-block .dash-tiles { margin: 0; }

/* Matched-text highlight in search results */
.dash-hl { background: #fde68a; color: inherit; border-radius: 2px; padding: 0 1px; }

/* Always-on-top tile (Mishap Reporting) — sits next to Tasks, carries an alert
   accent so the safety hotline reads as urgent. */
.dash-tile-top { border-left: 4px solid #c0392b; }

/* Top-row quick tile next to Mishap (issue #220) — JS drops a single cloned app
   tile in: WMAO when the user is on duty / next duty officer, else the most-
   recently-used app. The empty slot takes no grid cell. A small eyebrow labels
   it so its purpose is clear ("Recently used" / "On duty" / "Next duty officer"),
   with the duty variant tinted green to match the On-duty badge. */
.dash-recent-slot:empty { display: none; }
.dash-slot-label {
  display: block;
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); margin-bottom: 0.4rem;
}
.dash-slot-label--duty { color: #1e7d46; }

/* Per-category accent: a colored left edge on each app tile, so categories read
   at a glance and pinned/recent rows double as a color legend. The accent is
   set inline per tile (--cat-accent) so it survives cloning into those rows. */
.dash-tile-wrap .dash-tile { border-left: 4px solid var(--cat-accent, var(--border)); }

/* Live status badge (issue #220) — a small status pill that JS stamps onto a
   tile (GET /api/dashboard/badges) only when an app has something to report
   (you're on duty, N active …). The element is created by JS, so it never
   exists without JS — no js-dash display gotcha. It sits bottom-right to clear
   the top-right pin star, and is pointer-events:none so a click still falls
   through to the tile link. `data-level` drives the color. */
.dash-badge {
  position: absolute; bottom: 0.5rem; right: 0.5rem;
  pointer-events: none;
  font-size: 0.7rem; font-weight: 700; line-height: 1; letter-spacing: 0.01em;
  padding: 0.2rem 0.45rem; border-radius: 999px;
  color: #fff; background: #475569;                 /* default = info (slate) */
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.dash-badge[data-level="ok"]    { background: #1e7d46; }   /* green */
.dash-badge[data-level="info"]  { background: #475569; }   /* slate */
.dash-badge[data-level="warn"]  { background: #b45309; }   /* amber */
.dash-badge[data-level="alert"] { background: #c0392b; }   /* red   */

/* ── Member Search ──────────────────────────────────────────────────────── */
.ms-page { max-width: 920px; margin: 1.5rem auto; padding: 0 1.5rem; }

.ms-search {
  display: flex; gap: 0.6rem; align-items: end; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 6px; padding: 1rem 1.25rem; margin-bottom: 1.25rem;
}
.ms-search label {
  font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em;
}
.ms-search input {
  flex: 1; min-width: 220px;
  padding: 0.5rem 0.7rem; background: #fff; color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px;
}
.ms-search input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.ms-btn {
  padding: 0.55rem 1.2rem; border-radius: 4px;
  background: var(--nx-navy); color: #fff; border: 0; font-weight: 600;
  cursor: pointer;
}
.ms-btn:hover { background: var(--nx-navy2); }

.ms-error {
  padding: 0.6rem 0.85rem; margin-bottom: 1rem;
  background: #fbeaea; color: var(--danger);
  border: 1px solid rgba(161,43,43,0.3); border-radius: 4px;
}
.ms-hint { color: var(--muted); }

.ms-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  padding: 1.25rem 1.5rem; box-shadow: 0 1px 2px rgba(11,45,82,0.04);
}
.ms-card-head { border-bottom: 1px solid var(--border); padding-bottom: 1rem; margin-bottom: 1rem; }
.ms-id { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.ms-rank {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--panel-2); padding: 2px 8px; border-radius: 3px;
  font-size: 13px; color: var(--nx-navy); font-weight: 600;
}
.ms-name { margin: 0; font-size: 1.4rem; color: var(--nx-navy); }

.ms-meta {
  display: flex; gap: 1.5rem; margin: 0.8rem 0 0; flex-wrap: wrap;
}
.ms-meta > div { display: flex; flex-direction: column; gap: 0.15rem; }
.ms-meta dt { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 0; }
.ms-meta dd { margin: 0; font-size: 14px; }

.ms-group { margin-top: 1rem; }
.ms-group-title {
  font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin: 0 0 0.4rem;
}
.ms-quals {
  width: 100%; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--border); border-radius: 4px; overflow: hidden;
  /* Fixed layout + shared column widths (below) so every qualification-group
     table on the page lines its Code/Qualification/Status/Expires columns up
     vertically, instead of each table sizing its columns to its own rows (#641). */
  table-layout: fixed;
}
.ms-quals th, .ms-quals td {
  padding: 0.5rem 0.8rem; text-align: left; font-size: 13px;
  border-bottom: 1px solid var(--border); overflow-wrap: break-word;
}
.ms-quals th {
  background: var(--panel-2); color: var(--nx-navy);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.ms-quals tbody tr:last-child td { border-bottom: 0; }
/* Column widths shared by every .ms-quals table (via <colgroup>); Qualification
   is left unsized so it absorbs the remaining width. Code/Expires are widened to
   fit their common content — a short achievement code and an MM/DD/YYYY date — on
   one line (#726). Expires stays nowrap (a date must never split, e.g. the year
   orphaning to a second line). Code does NOT force nowrap: some CAPWATCH pilot
   achievements have no "CODE - Label" split, so their whole name is uppercased
   into the "code" (e.g. CAP INSTRUMENT PILOT) — far wider than any sane fixed
   column. With table-layout:fixed, nowrap made that overflow and overlap the
   Qualification cell (#749); letting it wrap (via .ms-quals td overflow-wrap)
   keeps it inside its column instead.

   Code must therefore be wide enough for the longest SINGLE WORD a value can
   contain, or that word breaks mid-word (#823): `overflow-wrap: break-word`
   splits a word only as a last resort, when the word alone cannot fit its
   column — so at 92px (a ~66px content box) "INSTRUCTOR PILOT" could never
   reach the space and broke as "INSTRUCTO"/"R PILOT". 140px gives a ~114px
   content box: ~14 chars of the 13px monospace stack, whose per-char advance
   runs ~7.15px (Consolas, the generic-monospace fallback on Windows, where
   ui-monospace/SF Mono/Menlo do not resolve) to ~7.8px (SF Mono on macOS).

   That covers the observed data with headroom — these codes come from CAPWATCH
   `core_member_achievements`, whose longest words are ~10 chars (INSTRUCTOR,
   INSTRUMENT); every curated sarex RATINGS code is <= 5. A multi-word value gets
   here via `_achv_code` (migrate/import_capwatch.py): an achievement whose Achv
   string has no " - " separator becomes its whole uppercased label. But those
   codes are free text, so this bounds today's data, NOT all data: a 15+
   char single word would still break mid-word. If one shows up, widen THIS (the
   flexible, unsized Qualification column absorbs it) — do not touch .ms-quals'
   overflow-wrap, which is the #749 overlap guard. Sizing the column from the
   rendered codes server-side is the real fix if that ever stops being rare. */
.ms-col-code   { width: 140px; }
.ms-col-status { width: 150px; }
.ms-col-exp    { width: 118px; }
.ms-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600; color: var(--nx-navy);
}
.ms-exp { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }

.ms-tag {
  display: inline-block;
  padding: 1px 7px; border-radius: 3px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
  margin-left: 0.2rem;
}
.ms-tag-active   { background: #ddf0d8; color: var(--ok); }
.ms-tag-training { background: #fef0d6; color: var(--nx-amber); }
.ms-tag-expired  { background: var(--panel-2); color: var(--muted); }
.ms-tag-set      { background: var(--nx-blue); color: #fff; }
.ms-tag-cadet    { background: var(--nx-amber); color: #fff; }
.ms-tag-dnc      { background: #fbeaea; color: var(--danger); text-transform: none; letter-spacing: 0; }
.ms-cadet-phone  { font-style: normal; color: var(--muted); font-size: 12px; }
.ms-tag-senior   { background: var(--nx-navy); color: #fff; }
.ms-tag-lvl      { background: var(--panel-2); color: var(--nx-navy); }
.ms-row-expired td { opacity: 0.55; }

.ms-duty-list { list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.ms-duty {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.8rem; font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.ms-duty:last-child { border-bottom: 0; }
.ms-duty-name { font-weight: 600; color: var(--nx-navy); }
.ms-duty-unit { margin-left: auto; color: var(--muted); font-size: 12px; text-align: right; }
.ms-source       { color: var(--muted); font-size: 11px; margin: 0.6rem 0 0; font-style: italic; }
.ms-source-warn  { color: var(--nx-amber); }

.ms-empty { color: var(--muted); }

/* Mode toggle — segmented control at the top of the page */
.ms-toggle {
  display: inline-flex;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px;
  gap: 2px;
  margin-bottom: 1.25rem;
}
.ms-toggle-btn {
  padding: 0.4rem 1.1rem;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s;
}
.ms-toggle-btn:hover { color: var(--text); background: var(--panel-2); }
.ms-toggle-btn.ms-toggle-active {
  background: var(--nx-navy);
  color: #fff;
}
.ms-toggle-btn.ms-toggle-active:hover { color: #fff; background: var(--nx-navy2); }

/* ── Roster Search form ──────────────────────────────────────────────────── */
.ms-roster-form { display: flex; flex-direction: column; gap: 1rem; }

.ms-form-section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem 1.25rem;
}
.ms-form-section-title {
  font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600;
  margin: 0 0 0.75rem;
}

/* Echelon row — three dropdowns side-by-side */
.ms-echelon-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.85rem;
}

/* Shared field layout used by both echelon and criteria panels */
.ms-field { display: flex; flex-direction: column; gap: 0.25rem; }
.ms-field-label {
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.ms-field select {
  padding: 0.5rem 0.65rem;
  font: inherit; font-size: 14px;
  background: #fff; color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  min-width: 200px;
}
.ms-field select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.ms-field select:disabled { background: var(--panel-2); opacity: 0.65; cursor: default; }
/* Keep the echelon dropdowns inside their grid cells (issue #303): a long
   squadron name must not push the <select> outside the panel behind it.
   Grid items default to min-width:auto, so they won't shrink below the widest
   <option>'s intrinsic width — min-width:0 lets the cell shrink and width:100%
   fills it, so the native control truncates long option text instead. */
.ms-echelon-row .ms-field select { width: 100%; min-width: 0; }
/* ── Checkbox filter groups (replaces multi-select dropdowns) ────────────── */
.ms-cb-layout {
  display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start;
}
.ms-cb-section { display: flex; flex-direction: column; gap: 0.15rem; flex: 1 1 180px; }
.ms-cb-section-narrow { flex: 0 0 auto; min-width: 150px; }
.ms-cb-section-title {
  font-size: 10px; font-weight: 700; color: var(--nx-navy);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin: 0 0 0.4rem;
}

/* Search filter input above a checkbox scroll list */
.ms-cb-filter {
  width: 100%; box-sizing: border-box;
  font-size: 12px; padding: 0.25rem 0.5rem;
  border: 1px solid var(--border); border-radius: 4px;
  background: #fff; color: var(--text);
  margin-bottom: 0.3rem;
  outline-offset: 2px;
}
.ms-cb-filter:focus { border-color: var(--nx-blue); outline: 2px solid color-mix(in srgb, var(--nx-blue) 30%, transparent); }
.ms-cb-filter::placeholder { color: var(--text-muted, #888); }

/* Select-all header row per group */
.ms-cb-all {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 12px; font-weight: 700; color: var(--nx-navy);
  cursor: pointer; padding: 0.2rem 0 0.3rem;
  border-bottom: 1px solid var(--border); margin-bottom: 0.3rem;
  user-select: none;
}
.ms-cb-all:hover { color: var(--nx-blue); }
.ms-cb-all input[type="checkbox"] { margin: 0; accent-color: var(--nx-blue); cursor: pointer; }

/* Individual checkbox items */
.ms-cb-item {
  display: flex; align-items: baseline; gap: 0.4rem;
  font-size: 13px; cursor: pointer; padding: 0.18rem 0;
  user-select: none; line-height: 1.3;
}
.ms-cb-item:hover { color: var(--nx-blue); }
.ms-cb-item input[type="checkbox"] {
  margin: 0; accent-color: var(--nx-blue);
  flex-shrink: 0; cursor: pointer; position: relative; top: 1px;
}
/* Visual separator before SET options */
.ms-cb-item-sep { margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px solid var(--border); }

/* Scrollable list for long checkbox sets (duty positions, specialty tracks) */
.ms-cb-scroll {
  max-height: 220px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 4px;
  padding: 0.35rem 0.6rem;
  background: #fff;
}
.ms-cb-scroll::-webkit-scrollbar { width: 6px; }
.ms-cb-scroll::-webkit-scrollbar-track { background: var(--panel-2); }
.ms-cb-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* Two-column layout inside a scroll box */
.ms-cb-cols2 { column-count: 2; column-gap: 0.5rem; }
.ms-cb-cols2 .ms-cb-item { break-inside: avoid; }

/* Category selector — radio buttons styled as pill tabs */
.ms-cat-pills {
  display: inline-flex; flex-wrap: wrap;
  background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 3px; gap: 2px;
  margin-bottom: 1rem;
}
.ms-cat-pills input[type="radio"] {
  position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0;
}
.ms-cat-label {
  padding: 0.38rem 0.95rem; border-radius: 4px;
  font-size: 13px; font-weight: 500; color: var(--muted);
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: background 0.1s, color 0.1s;
}
.ms-cat-label:hover { color: var(--text); background: var(--panel); }
.ms-cat-pills input[type="radio"]:checked + .ms-cat-label {
  background: var(--nx-navy); color: #fff;
}

/* Sub-panels — hidden by default; CSS :has() reveals the active one */
.ms-sub-panel { display: none; }
.ms-criteria-section:has(#ms-cat-es:checked)       .ms-sub-panel-es       { display: block; }
.ms-criteria-section:has(#ms-cat-set:checked)      .ms-sub-panel-set      { display: block; }
.ms-criteria-section:has(#ms-cat-duty:checked)     .ms-sub-panel-duty     { display: block; }
.ms-criteria-section:has(#ms-cat-specialty:checked) .ms-sub-panel-specialty { display: block; }
.ms-criteria-section:has(#ms-cat-volu:checked)     .ms-sub-panel-volu     { display: block; }
.ms-criteria-section:has(#ms-cat-waldo:checked)    .ms-sub-panel-waldo    { display: block; }
.ms-criteria-section:has(#ms-cat-pilot:checked)    .ms-sub-panel-pilot    { display: block; }
.ms-criteria-section:has(#ms-cat-driver:checked)   .ms-sub-panel-driver   { display: block; }

.ms-sub-panel-row {
  display: flex; flex-wrap: wrap;
  gap: 0.85rem; align-items: flex-end;
  margin-bottom: 0.85rem;
}
.ms-sub-panel-note {
  color: var(--muted); font-size: 12px; font-style: italic;
  margin: 0 0 0.5rem;
}

.ms-search-actions { margin-top: 0.25rem; display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.ms-zip-field { display: flex; flex-direction: column; gap: 0.25rem; }
.ms-zip-label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

/* Org summary line below the echelon dropdowns */
.ms-org-summary { margin: 0.5rem 0 0; font-size: 12px; color: var(--muted); }
.ms-org-summary strong { color: var(--nx-navy); }

/* Results section */
.ms-roster-results { margin-top: 0; }
.ms-results-count {
  font-size: 15px; font-weight: 500; color: var(--nx-navy);
  margin: 0 0 0.65rem;
}

.ms-results-table {
  width: 100%; background: var(--panel);
  border: 1px solid var(--border); border-radius: 6px;
  border-collapse: separate; border-spacing: 0; overflow: hidden;
}
.ms-results-table th, .ms-results-table td {
  padding: 0.55rem 0.85rem; text-align: left; font-size: 13px;
  border-bottom: 1px solid var(--border); vertical-align: middle;
}
.ms-results-table th {
  background: var(--panel-2); color: var(--nx-navy);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.ms-results-table tbody tr:last-child td { border-bottom: 0; }
.ms-results-table tbody tr:hover { background: rgba(11,45,82,0.03); }
.ms-result-row { cursor: pointer; }
.ms-result-row:hover { background: rgba(11,45,82,0.07) !important; }

/* Zip code distance input */
.ms-zip-input {
  padding: 0.45rem 0.65rem; font: inherit; font-size: 14px;
  background: #fff; color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  width: 110px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.ms-zip-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.ms-zip-hint { font-size: 11px; color: var(--muted); font-style: italic; margin: 0.3rem 0 0; }
.ms-dist-input { width: 80px; }

/* Member detail popup modal */
.ms-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 1000; display: flex; align-items: flex-start;
  justify-content: center; padding: 2rem 1rem; overflow-y: auto;
}
.ms-modal-overlay[hidden] { display: none; }
.ms-modal {
  background: #fff; border-radius: 8px; padding: 1.5rem 1.75rem 2rem;
  width: 100%; max-width: 760px; position: relative;
  box-shadow: 0 8px 40px rgba(0,0,0,.28); flex-shrink: 0;
}
.ms-modal-close {
  position: absolute; top: 1rem; right: 1rem;
  background: none; border: none; font-size: 1.25rem;
  cursor: pointer; color: var(--muted); line-height: 1; padding: 0.25rem;
}
.ms-modal-close:hover { color: var(--text); }
.ms-modal-header { margin-bottom: 1rem; }
.ms-modal-link { margin: 0.5rem 0 0; font-size: 13px; }
.ms-modal-loading { color: var(--muted); font-style: italic; }

/* Sortable column headers */
.ms-sortable th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
.ms-sortable th[data-sort]:hover { background: var(--border); }
.sort-ind { font-size: 9px; margin-left: 0.3rem; opacity: 0.4; vertical-align: middle; }
.ms-sortable th[data-dir] .sort-ind { opacity: 1; color: var(--nx-blue); }

.ms-res-rank  { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--muted); margin-right: 0.25rem; }
.ms-res-name  { font-weight: 600; color: var(--nx-navy); }
.ms-res-duty  { font-weight: 600; color: var(--nx-navy); }
.ms-res-code  { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 700; color: var(--nx-navy); margin-right: 0.3rem; }
.ms-res-label { font-size: 12px; color: var(--muted); }
.ms-res-mono  { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--muted); }

/* Driver Qual picker: put the vehicle code in a fixed-width column so the type
   descriptions are left-aligned and the longest code (TT>2000) never crowds the
   label column (issue #763). */
.ms-sub-panel-driver .ms-res-code {
  display: inline-block; min-width: 3.75rem; margin-right: 0.5rem;
}

@media (max-width: 640px) {
  .ms-echelon-row { grid-template-columns: 1fr; }
  .ms-cat-pills { width: 100%; }
  .ms-cat-label { text-align: center; flex: 1 1 auto; }
  .ms-field select { min-width: 0; width: 100%; }
}

/* Multi-match picker (name search returned more than one CAPWATCH member). */
.ms-matches {
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  padding: 1.1rem 1.25rem; margin-bottom: 1rem;
}
.ms-matches-title, .ms-results-count { margin: 0; font-size: 1.05rem; color: var(--nx-navy); }
.ms-matches-header {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  margin-bottom: 0.2rem;
}
.ms-copy-emails-btn {
  padding: 0.3rem 0.85rem; border-radius: 4px;
  background: var(--nx-navy); color: #fff; border: 0;
  font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background 0.1s;
}
.ms-copy-emails-btn:hover { background: var(--nx-navy2); }
.ms-copy-emails-btn--done { background: var(--ok) !important; }
.ms-match-list { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.ms-match-list li { margin: 0; padding: 0; }
.ms-match {
  display: grid;
  grid-template-columns: 80px 1fr auto auto auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.55rem 0.65rem;
  border-radius: 4px;
  color: var(--text);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.08s, border-color 0.08s;
}
.ms-match:hover { background: var(--panel-2); border-color: var(--nx-blue); }
.ms-match-rank {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-weight: 600; color: var(--nx-navy);
}
.ms-match-name { font-weight: 500; }
.ms-match-charter, .ms-match-capid {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--muted);
}
.ms-match-callsign { font-weight: 400; font-size: 12px; color: var(--accent, #1a4f9c); }
.ms-callsign { white-space: nowrap; }
.ms-callsign-prio {
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); border: 1px solid var(--border, #b0c4d8);
  border-radius: 8px; padding: 0 5px; margin-left: 2px;
}
.ms-match-status {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
  padding: 2px 6px; border-radius: 3px;
}
.ms-match-status-active { background: #ddf0d8; color: var(--ok); }
.ms-match-status-patron { background: #fef0d6; color: var(--nx-amber); }
.ms-match-status-unknown,
.ms-match-status-      { background: var(--panel-2); color: var(--muted); }
@media (max-width: 720px) {
  .ms-match { grid-template-columns: 1fr; gap: 0.25rem; padding: 0.7rem 0.75rem; }
  .ms-match-rank, .ms-match-name, .ms-match-charter, .ms-match-capid, .ms-match-status { font-size: 13px; }
}

/* ── Aircraft Status ───────────────────────────────────────────────────── */
.acs-page { max-width: 1200px; margin: 1.5rem auto; padding: 0 1.5rem; }
.acs-head h1 { color: var(--nx-navy); margin: 0 0 0.2rem; font-size: 1.4rem; }
.acs-sub { color: var(--muted); font-size: 13px; margin: 0 0 1.25rem; }

.acs-table {
  width: 100%;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 6px; border-collapse: separate; border-spacing: 0;
  /* No overflow:hidden here — it would make the table a scroll container and
     break the sticky column headers below. Corner rounding is applied to the
     corner cells instead (see thead first/last-child rules). */
}
.acs-table th, .acs-table td {
  padding: 0.55rem 0.85rem; text-align: left; font-size: 13px;
  border-bottom: 1px solid var(--border); vertical-align: middle;
}
.acs-table th {
  background: var(--panel-2); color: var(--nx-navy);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  font-weight: 600;
  /* Sticky column headers: stay visible below the sticky global header
     (.nexus-header, --nexus-header-h) as the long aircraft list scrolls
     (issue #613). z-index below the header's 50 so the navy bar stays on top.
     In the native app webview the global header is absent (embed_mode → the
     var is 0), so the column headers freeze flush at the top instead of 64px
     down over the first rows (issue #672). */
  position: sticky; top: var(--nexus-header-h, 64px); z-index: 5;
}
/* Round the header's outer top corners to match the table's border-radius,
   which the removed overflow:hidden used to clip. */
.acs-table thead tr:first-child th:first-child { border-top-left-radius: 6px; }
.acs-table thead tr:first-child th:last-child  { border-top-right-radius: 6px; }
.acs-table tbody tr:last-child td { border-bottom: 0; }
.acs-row:hover { background: rgba(11,45,82,0.03); }

.acs-tail {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600; color: var(--nx-navy);
}
.acs-pending { color: var(--muted); font-family: ui-monospace, Menlo, monospace; text-align: center; }
.acs-last-seen { color: var(--muted); font-family: ui-monospace, Menlo, monospace; }
.acs-empty { padding: 1.5rem; text-align: center; color: var(--muted); }
.acs-ttaf { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); }

/* Inspection-countdown hour chips, colour-coded by hours-until-due. */
.acs-hr {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600; font-size: 12px;
  padding: 2px 8px; border-radius: 3px;
  min-width: 48px; text-align: center;
}
.acs-hr-ok       { background: #ddf0d8; color: var(--ok); }
.acs-hr-warning  { background: #fef0d6; color: var(--nx-amber); }
.acs-hr-critical { background: #fbe2cc; color: #b35a00; }
.acs-hr-overdue  { background: var(--danger); color: #fff; }
.acs-hr-unknown  { background: var(--panel-2); color: var(--muted); font-weight: 400; }

.acs-tag {
  display: inline-block;
  padding: 2px 7px; border-radius: 3px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
/* WMIRS mission-capable status. Color hierarchy follows the operational
   meaning: green (good to fly), amber (limited), red (grounded). */
.acs-tag-fmc      { background: #ddf0d8; color: var(--ok); }
.acs-tag-pmc      { background: #fef0d6; color: var(--nx-amber); }
.acs-tag-grounded { background: var(--danger); color: #fff; }
.acs-tag-unknown  { background: var(--panel-2); color: var(--muted); }

.acs-row.acs-status-nmc td      { background: rgba(161,43,43,0.03); }
.acs-row.acs-status-unknown td  { opacity: 0.7; }

.acs-footnote { color: var(--muted); font-size: 11px; margin-top: 1rem; }

/* ── Form 14 ────────────────────────────────────────────────────────────── */
.f14-page { max-width: 1100px; margin: 1.5rem auto; padding: 0 1.5rem; }
.f14-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.2rem; }
.f14-head h1 { margin: 0 0 0.2rem; font-size: 1.4rem; color: var(--nx-navy); }
.f14-sub { color: var(--muted); font-size: 13px; margin: 0; max-width: 64ch; }
.f14-back { display: inline-block; color: var(--muted); font-size: 13px; margin-bottom: 0.5rem; }
.f14-wingpick {
  margin: 0 0 1.2rem; padding: 0.8rem 1rem;
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
}
.f14-wingpick-form { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.4rem; }
.f14-wingpick-form label { font-weight: 600; color: var(--nx-navy); font-size: 14px; }
.f14-wingpick-form select { padding: 0.35rem 0.5rem; border: 1px solid var(--border); border-radius: 4px; }
.f14-empty {
  padding: 2rem; text-align: center; color: var(--muted);
  background: var(--panel); border: 1px dashed var(--border); border-radius: 6px;
}

.f14-table {
  width: 100%; background: var(--panel);
  border: 1px solid var(--border); border-radius: 6px;
  border-collapse: separate; border-spacing: 0; overflow: hidden;
}
.f14-table th, .f14-table td {
  padding: 0.6rem 0.85rem; text-align: left; font-size: 13px;
  border-bottom: 1px solid var(--border); vertical-align: middle;
}
.f14-table th {
  background: var(--panel-2); color: var(--nx-navy);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.f14-table tbody tr:last-child td { border-bottom: 0; }
.f14-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Superadmin "My / All" view toggle (receipts inbox + submissions list). */
.f14-view-toggle { display: flex; align-items: center; gap: 0.4rem; margin: 0.2rem 0 0.9rem; flex-wrap: wrap; }
.f14-view-label { font-size: 12px; font-weight: 600; color: #667; text-transform: uppercase; letter-spacing: 0.03em; margin-right: 0.1rem; }
.f14-toggle-btn { font-size: 13px; padding: 4px 12px; border: 1px solid #cdd3dd; border-radius: 14px; color: #334; background: #fff; text-decoration: none; line-height: 1.4; }
.f14-toggle-btn:hover { background: #f3f5f9; }
.f14-toggle-btn.is-active { background: #1f3a5f; border-color: #1f3a5f; color: #fff; }
.f14-view-wing { font-size: 11px; font-weight: 700; color: #445; background: #eef1f5; border-radius: 10px; padding: 2px 9px; letter-spacing: 0.02em; }
.f14-right { text-align: right; }
.f14-link { font-weight: 500; }

.f14-form { display: grid; gap: 1.2rem; }
.f14-form fieldset {
  border: 1px solid var(--border); border-radius: 6px;
  padding: 1rem 1.2rem; background: var(--panel);
}
.f14-form legend {
  padding: 0 0.4rem; color: var(--nx-navy);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}
.f14-grid {
  display: grid; gap: 0.85rem;
  grid-template-columns: repeat(3, 1fr);
}
.f14-grid label { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.f14-grid label > span {
  font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em;
}
.f14-grid label > span em,
.f14-grid label > span .f14-req { color: var(--danger); font-style: normal; font-weight: 400; margin-left: 0.15rem; text-transform: none; letter-spacing: normal; }
.f14-grid label > span small {
  display: block; text-transform: none; letter-spacing: normal;
  color: var(--muted); font-size: 11px; margin-top: 0.15rem;
}
.f14-grid input, .f14-grid select {
  padding: 0.5rem 0.65rem; font: inherit; font-size: 14px;
  background: #fff; color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
}
.f14-grid input:focus, .f14-grid select:focus {
  outline: 2px solid var(--accent); outline-offset: -1px;
}
.f14-grid input.mission-input-missing, .f14-grid select.mission-input-missing {
  background: #fdecec;
}
.f14-col2 { grid-column: span 2; }
.f14-col3 { grid-column: span 3; }
.f14-status { color: var(--muted); font-weight: 400; }

.f14-totals {
  background: var(--panel-2); border: 1px dashed var(--border);
  border-radius: 4px; padding: 0.55rem 0.85rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.f14-totals-row { display: flex; justify-content: space-between; font-size: 13px; padding: 0.15rem 0; }
.f14-totals-row.f14-total {
  border-top: 1px solid var(--border); margin-top: 0.3rem; padding-top: 0.4rem;
  font-weight: 700; color: var(--nx-navy); font-size: 14px;
}

.f14-submit-row { display: flex; justify-content: flex-end; gap: 0.6rem; }

@media (max-width: 760px) {
  .f14-grid { grid-template-columns: 1fr; }
  .f14-col2, .f14-col3 { grid-column: auto; }
}

/* ── SET Search ─────────────────────────────────────────────────────────── */
.ss-page { max-width: 1100px; margin: 1.5rem auto; padding: 0 1.5rem; }
.ss-head h1 { color: var(--nx-navy); margin: 0 0 0.2rem; font-size: 1.4rem; }
.ss-sub { color: var(--muted); font-size: 13px; margin: 0 0 1.2rem; max-width: 70ch; }

.ss-form {
  display: grid; gap: 0.85rem; align-items: end;
  grid-template-columns: 1fr 1fr auto;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 6px; padding: 1rem 1.25rem; margin-bottom: 1.25rem;
}
.ss-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.ss-field > span {
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.ss-field select {
  padding: 0.5rem 0.65rem; font: inherit; font-size: 14px;
  background: #fff; color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
}
.ss-field select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.ss-results-title { margin: 0 0 0.6rem; font-size: 1rem; color: var(--nx-navy); font-weight: 500; }
.ss-empty {
  padding: 1.5rem; text-align: center; color: var(--muted);
  background: var(--panel); border: 1px dashed var(--border); border-radius: 6px;
}

.ss-table {
  width: 100%; background: var(--panel);
  border: 1px solid var(--border); border-radius: 6px;
  border-collapse: separate; border-spacing: 0; overflow: hidden;
}
.ss-table th, .ss-table td {
  padding: 0.55rem 0.85rem; text-align: left; font-size: 13px;
  border-bottom: 1px solid var(--border); vertical-align: middle;
}
.ss-table th {
  background: var(--panel-2); color: var(--nx-navy);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.ss-table tbody tr:last-child td { border-bottom: 0; }
.ss-table tbody tr:hover { background: rgba(11,45,82,0.03); }

.ss-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--text); }
.ss-rank {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--nx-navy); font-weight: 600; margin-right: 0.4rem;
}
.ss-name { font-weight: 500; }
.ss-pt { color: var(--muted); font-size: 10px; margin-left: 0.3rem; text-transform: lowercase; }
.ss-tag {
  display: inline-block;
  padding: 1px 6px; border-radius: 3px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
  margin-left: 0.3rem;
}
.ss-tag-mbr { background: var(--panel-2); color: var(--muted); }
.ss-tag-dnc { background: var(--danger); color: #fff; }

@media (max-width: 720px) {
  .ss-form { grid-template-columns: 1fr; }
}

/* ── User admin page ────────────────────────────────────────────────────── */
.user-admin { max-width: 1200px; margin: 1.5rem auto; padding: 0 1.5rem; }

.ua-flashes { margin-bottom: 1rem; display: grid; gap: 0.4rem; }
.ua-flash {
  padding: 0.55rem 0.85rem; border-radius: 4px; font-size: 13px;
  border: 1px solid transparent;
}
.ua-flash-ok    { background: #ddf0d8; color: var(--ok);     border-color: rgba(33,106,29,0.3); }
.ua-flash-error { background: #fbeaea; color: var(--danger); border-color: rgba(161,43,43,0.3); }

.ua-add {
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  margin-bottom: 1.5rem;
}
.ua-add > summary {
  list-style: none; cursor: pointer;
  padding: 0.75rem 1rem; user-select: none;
  color: var(--nx-navy);
}
.ua-add > summary::-webkit-details-marker { display: none; }
.ua-add[open] > summary { border-bottom: 1px solid var(--border); }

.ua-add-form {
  padding: 1rem;
  display: grid; gap: 0.85rem;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
}
.ua-add-form > label { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.ua-add-form > label > span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.ua-add-form input {
  padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 4px;
  font: inherit; background: #fff; color: var(--text);
}
.ua-roles-pick {
  grid-column: 1 / -1;
  border: 1px dashed var(--border); border-radius: 4px;
  padding: 0.6rem 0.9rem;
  display: grid; gap: 0.35rem;
}
.ua-roles-pick legend { padding: 0 0.3rem; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.ua-role { display: flex; gap: 0.5rem; align-items: baseline; }
.ua-role code { background: var(--panel-2); padding: 1px 6px; border-radius: 3px; font-size: 12px; color: var(--nx-navy); }
.ua-role-desc { color: var(--muted); font-size: 12px; }
.ua-role-super code { background: rgba(201,122,16,0.15); color: var(--nx-amber); }
.ua-add-form .ua-btn-primary {
  grid-column: 1 / -1; justify-self: start;
  margin-top: 0.4rem;
}

.ua-table {
  width: 100%;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 6px; border-collapse: separate; border-spacing: 0;
  overflow: hidden;
}
.ua-table th, .ua-table td {
  padding: 0.65rem 0.85rem; text-align: left; font-size: 13px;
  border-bottom: 1px solid var(--border); vertical-align: top;
}
.ua-table th {
  background: var(--panel-2); color: var(--nx-navy);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  font-weight: 600;
}
.ua-table tbody tr:last-child td { border-bottom: 0; }
.ua-row-disabled { opacity: 0.55; }

.ua-capid { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; color: var(--nx-navy); }
.ua-you {
  margin-left: 0.4rem; font-size: 10px; padding: 1px 5px;
  background: var(--nx-blue); color: #fff; border-radius: 3px;
  text-transform: uppercase; letter-spacing: 0.05em; font-family: inherit;
  font-weight: 500;
}
.ua-name { font-weight: 500; }
.ua-email { font-size: 12px; color: var(--muted); }

.ua-roles-form { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.ua-role-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 2px 8px; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 14px; font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  cursor: pointer; user-select: none;
}
.ua-role-chip:has(input:checked) { background: var(--nx-blue); border-color: var(--nx-blue); color: #fff; }
.ua-role-chip input { margin: 0; accent-color: #fff; }

.ua-flags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.ua-flag {
  font-size: 10px; padding: 2px 6px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.ua-flag-super { background: var(--nx-amber); color: #fff; }
.ua-flag-guest { background: var(--nx-navy, #0B2D52); color: #fff; }
.ua-flag-ok    { background: #ddf0d8; color: var(--ok); }
.ua-flag-bad   { background: #fbeaea; color: var(--danger); }
.ua-flag-warn  { background: #fdf3d9; color: #8a6d1a; }
.ua-flag-ns    { background: #f3e3fb; color: #6b21a8; }
.ua-guest-note { margin: 0.1rem 0 0.4rem; font-size: 12px; color: var(--muted); }

/* Non-standard role chip — highlights a granted role outside the standard template. */
.ua-role-chip-ns span { background: #f3e3fb; color: #6b21a8; border-radius: 3px; }

.ua-last { color: var(--muted); font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ua-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.ua-actions form { margin: 0; }

.ua-pwd > summary {
  list-style: none; cursor: pointer; user-select: none;
  font-size: 12px; color: var(--accent);
}
.ua-pwd > summary::-webkit-details-marker { display: none; }
.ua-pwd-form { display: inline-flex; gap: 0.35rem; margin-top: 0.3rem; }
.ua-pwd-form input { padding: 3px 6px; font-size: 12px; border: 1px solid var(--border); border-radius: 3px; }

.ua-btn {
  padding: 0.4rem 0.8rem; border-radius: 4px; border: 1px solid var(--border);
  background: #fff; color: var(--nx-navy); cursor: pointer; font-size: 13px;
}
.ua-btn:hover { border-color: var(--nx-blue); color: var(--nx-blue); }
.ua-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.ua-btn[disabled]:hover { border-color: var(--border); color: var(--nx-navy); }
.ua-btn-primary { background: var(--nx-navy); color: #fff; border-color: var(--nx-navy); padding: 0.55rem 1rem; font-weight: 600; }
.ua-btn-primary:hover { background: var(--nx-navy2); color: #fff; }
.ua-btn-small { padding: 3px 8px; font-size: 12px; }
.ua-btn-warn { color: var(--nx-amber); border-color: var(--nx-amber); }
.ua-btn-warn:hover { background: var(--nx-amber); color: #fff; }
.ua-btn-danger { color: var(--danger); border-color: var(--danger); }
.ua-btn-danger:hover { background: var(--danger); color: #fff; }

/* ── WMAO (Wing Mission Alerting Officer) ───────────────────────────────── */
.wmao-page { max-width: 1100px; margin: 1.5rem auto; padding: 0 1.5rem; }

.wmao-head { margin-bottom: 1rem; }
.wmao-head h1 { color: var(--nx-navy); font-size: 1.4rem; margin: 0 0 0.2rem; }
.wmao-sub { color: var(--muted); font-size: 13px; margin: 0 0 1.25rem; max-width: 72ch; }

.wmao-on-duty-banner {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.75rem 1rem; margin-bottom: 1rem;
  background: #ddf0d8; border: 1px solid var(--ok);
  border-radius: 6px; color: var(--ok);
  font-weight: 600; font-size: 14px;
}
.wmao-on-duty-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  background: var(--ok); box-shadow: 0 0 0 3px rgba(33,106,29,0.25);
  animation: wmao-pulse 2s ease-in-out infinite;
}
@keyframes wmao-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(33,106,29,0.25); }
  50%       { box-shadow: 0 0 0 6px rgba(33,106,29,0.1); }
}

.wmao-flash {
  padding: 0.55rem 0.85rem; margin-bottom: 1rem;
  background: #ddf0d8; color: var(--ok);
  border: 1px solid rgba(33,106,29,0.3); border-radius: 4px; font-size: 13px;
}
.wmao-flash-ok {   /* explicit success variant (same as default) */
  background: #ddf0d8; color: var(--ok); border-color: rgba(33,106,29,0.3);
}
.wmao-flash-warn {
  background: #fdf3d6; color: #7a5c00; border-color: rgba(160,120,0,0.35);
}

/* ── WMAO administration page (issue #660) ─────────────────────────────── */
.admin-section {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 6px; padding: 1rem 1.25rem 1.25rem; margin-bottom: 1.25rem;
}
.admin-section h2 { margin: 0 0 0.35rem; font-size: 16px; }
.admin-section h3 { margin: 1rem 0 0.5rem; font-size: 14px; }

.admin-hotline-list { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.5rem 0 0.25rem; }
.admin-hotline-row {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.3rem 0; border-bottom: 1px solid var(--border);
}
.admin-hotline-row.row-disabled { opacity: 0.55; }
.admin-hotline-head { font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 0; }
.admin-hotline-editform { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 auto; }
.admin-hotline-editform input[type="text"],
.admin-hotline-editform input[type="tel"],
.admin-hotline-editform input[type="email"],
.admin-hotline-add-row input {
  padding: 0.35rem 0.5rem; font: inherit; font-size: 13px;
  background: #fff; color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
}
.admin-hotline-row .ahl-num  { flex: 0 0 1.5rem; text-align: center; color: var(--muted); }
.admin-hotline-row .ahl-name  { flex: 1 1 20%; }
.admin-hotline-row .ahl-phone { flex: 1 1 20%; }
.admin-hotline-row .ahl-email { flex: 1 1 30%; }
.admin-hotline-row .ahl-en    { flex: 0 0 2rem; text-align: center; }
.admin-hotline-row .ahl-act   { flex: 0 0 auto; margin: 0; }
.admin-hotline-add-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.admin-hotline-add-row input { flex: 1 1 12rem; }
@media (max-width: 640px) {
  .admin-hotline-head { display: none; }
  .admin-hotline-row, .admin-hotline-editform { flex-wrap: wrap; }
}

.wmao-selector-bar {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 6px; padding: 0.85rem 1.25rem;
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.wmao-wing-form { display: flex; align-items: center; gap: 0.6rem; }
.wmao-wing-label {
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap;
}
.wmao-wing-form select {
  padding: 0.45rem 0.65rem; font: inherit; font-size: 14px;
  background: #fff; color: var(--text);
  border: 1px solid var(--border); border-radius: 4px; min-width: 240px;
}
.wmao-wing-form select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* Current duty card */
.wmao-duty-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 1.25rem 1.5rem; margin-bottom: 1.5rem;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  box-shadow: 0 1px 3px rgba(11,45,82,0.05);
}
.wmao-duty-active, .wmao-duty-vacant {
  display: flex; align-items: center; gap: 1rem; flex: 1; min-width: 0;
}
.wmao-duty-indicator {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
}
.wmao-duty-indicator.on      { background: var(--ok); box-shadow: 0 0 0 3px rgba(33,106,29,0.2); }
.wmao-duty-indicator.vacant  { background: var(--border); }

.wmao-duty-body { min-width: 0; }
.wmao-duty-title {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--muted); margin-bottom: 0.2rem; font-weight: 600;
}
.wmao-duty-name { font-size: 1.15rem; font-weight: 600; color: var(--nx-navy); }
.wmao-duty-meta { font-size: 12px; color: var(--muted); margin-top: 0.2rem; }
.wmao-sep { margin: 0 0.3rem; }
.wmao-duration { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.wmao-phone, .wmao-email { color: var(--accent); }

.wmao-rank {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; color: var(--nx-navy); font-weight: 600; margin-right: 0.3rem;
}
.wmao-duty-actions { flex-shrink: 0; }

.wmao-assume-form { flex-shrink: 0; }
.wmao-assign-form { display: flex; gap: 0.4rem; align-items: flex-start; }
.wmao-assign-form .wmao-btn-assume { margin-top: 0; }
.wmao-assign-input-wrap { display: flex; flex-direction: column; gap: 0.15rem; position: relative; }
.wmao-assign-input {
  padding: 0.5rem 0.6rem; border-radius: 4px; border: 1px solid var(--border);
  font-size: 14px; width: 14rem; max-width: 100%;
}
.wmao-assign-result { font-size: 12px; min-height: 1em; }
.wmao-assign-result.wmao-assign-ok { color: var(--ok); }
.wmao-assign-result.wmao-assign-err { color: var(--danger); }
.wmao-assign-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
  background: var(--card, #fff); border: 1px solid var(--border);
  border-radius: 4px; margin-top: 2px; max-height: 16rem; overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.wmao-assign-dropdown:empty { display: none; }
.wmao-assign-option {
  padding: 0.45rem 0.6rem; font-size: 14px; cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.wmao-assign-option:last-child { border-bottom: none; }
.wmao-assign-option:hover, .wmao-assign-option.active { background: var(--row-hover, #eef2ff); }
.wmao-assign-option .wmao-assign-capid { color: var(--muted, #667); font-size: 12px; }
.wmao-btn-alert {
  padding: 0.45rem 1.25rem; background: var(--danger); color: #fff;
  border: none; border-radius: 4px; font-size: 14px; font-weight: 700;
  cursor: pointer; white-space: nowrap; letter-spacing: 0.02em;
  box-shadow: 0 0 0 3px rgba(180,20,20,0.2);
}
.wmao-btn-alert:hover { background: #a01010; }

.wmao-btn-assume {
  padding: 0.6rem 1.4rem; border-radius: 4px;
  background: var(--nx-navy); color: #fff; border: 0;
  font-weight: 600; font-size: 14px; cursor: pointer;
  white-space: nowrap;
}
.wmao-btn-assume:hover { background: var(--nx-navy2); }

.wmao-btn-outline {
  padding: 0.4rem 0.9rem; border-radius: 4px;
  background: #fff; color: var(--danger);
  border: 1px solid var(--danger); font-size: 13px; cursor: pointer;
}
.wmao-btn-outline:hover { background: var(--danger); color: #fff; }

.wmao-btn-outline-assume {
  padding: 0.4rem 0.9rem; border-radius: 4px;
  background: #fff; color: var(--nx-navy);
  border: 1px solid var(--nx-navy); font-size: 13px; cursor: pointer;
}
.wmao-btn-outline-assume:hover { background: var(--nx-navy); color: #fff; }

/* Duty history table */
.wmao-history-title { color: var(--nx-navy); font-size: 1rem; margin: 0 0 0.75rem; }

.wmao-table {
  width: 100%; background: var(--panel);
  border: 1px solid var(--border); border-radius: 6px;
  border-collapse: separate; border-spacing: 0; overflow: hidden;
}
.wmao-table th, .wmao-table td {
  padding: 0.55rem 0.85rem; text-align: left; font-size: 13px;
  border-bottom: 1px solid var(--border); vertical-align: middle;
}
.wmao-table th {
  background: var(--panel-2); color: var(--nx-navy);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.wmao-table tbody tr:last-child td { border-bottom: 0; }
.wmao-table tbody tr:hover { background: rgba(11,45,82,0.03); }

/* Tabs (e.g. IC Alerts: Active / History) */
.wmao-tabs { display: flex; gap: 0.25rem; margin-bottom: 0.6rem; border-bottom: 1px solid var(--border); }
.wmao-tab {
  padding: 0.4rem 1rem; font-size: 13px; font-weight: 500;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-muted, #667); cursor: pointer;
}
.wmao-tab:hover { color: var(--nx-navy); }
.wmao-tab.active { color: var(--nx-navy); border-bottom-color: var(--nx-navy); }
.wmao-tab-panel[hidden] { display: none; }

/* Pager (Next/Previous) for tables */
.wmao-pager {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0.1rem; font-size: 12px; color: var(--text-muted, #667);
}
.wmao-pager button:disabled { opacity: 0.4; cursor: default; }

.wmao-row-active { background: rgba(33,106,29,0.04) !important; }
.wmao-row-active:hover { background: rgba(33,106,29,0.07) !important; }

.wmao-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.wmao-rank-sm {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--nx-navy); font-weight: 600; margin-right: 0.35rem;
}
.wmao-name-cell { font-weight: 500; }

.wmao-officer-cell { cursor: default; }
.wmao-contact-popup {
  display: none;
  position: fixed;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  white-space: nowrap;
  z-index: 200;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
  flex-direction: column;
  gap: 0.3rem;
  font-size: 12px;
  pointer-events: none;
}
.wmao-contact-popup .wmao-phone,
.wmao-contact-popup .wmao-email { color: var(--accent); text-decoration: none; }
.wmao-contact-popup .wmao-phone:hover,
.wmao-contact-popup .wmao-email:hover { text-decoration: underline; }
.wmao-popup-charter {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: var(--muted); letter-spacing: 0.04em;
}
.wmao-popup-row { display: flex; align-items: center; gap: 0.4rem; }
.wmao-copy-btn {
  font-size: 10px; padding: 0.05rem 0.4rem; border-radius: 3px;
  border: 1px solid var(--border); background: var(--panel-2);
  color: var(--text); cursor: pointer; line-height: 1.4;
}
.wmao-copy-btn:hover { background: var(--panel); }

.wmao-wing-form select:disabled {
  opacity: 0.75; cursor: default; background: var(--panel-2);
}

.wmao-badge-on {
  display: inline-block; margin-left: 0.4rem;
  padding: 1px 6px; border-radius: 3px;
  font-size: 10px; letter-spacing: 0.05em; font-weight: 700;
  background: #ddf0d8; color: var(--ok);
}

.wmao-tip {
  position: relative; cursor: help;
  border-bottom: 1px dotted var(--muted);
}
.wmao-tip::after {
  content: attr(data-unit);
  position: absolute; bottom: calc(100% + 4px); left: 50%;
  transform: translateX(-50%);
  background: #1a2a3a; color: #fff;
  padding: 3px 10px; border-radius: 4px;
  font-size: 11px; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 0.1s; z-index: 200;
}
.wmao-tip:hover::after { opacity: 1; }

/* ── WMAO Roster ──────────────────────────────────────────────────────────── */
.wmao-btn-signup-nav {
  display: inline-block; padding: 0.35rem 0.9rem;
  background: var(--ok); color: #fff; border-radius: 4px;
  font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.wmao-btn-signup-nav:hover { background: #1a6b16; }

.roster-page .wmao-page { max-width: 100%; }
/* Horizontal scroller: the calendar needs ~700px to stay legible, but that
   min-width belongs on the inner rows, NOT this container. If it sat here the
   container itself would exceed a narrow (phone) viewport and body's
   `overflow-x: clip` would clip the off-screen days with no way to reach them
   (issue #519). Keeping the container viewport-width and the rows at 700px lets
   overflow-x:auto produce a real internal scrollbar instead. */
.roster-cal-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 1rem; }

.roster-cal-dow-row {
  display: grid; grid-template-columns: 44px repeat(7, 1fr);
  min-width: 700px;
}
.roster-cal-axis-spacer { background: var(--nx-navy); }
.roster-cal-dow {
  background: var(--nx-navy); color: #fff;
  padding: 0.4rem 0.5rem; font-size: 12px; font-weight: 600;
  text-align: center;
}

/* Each week is one grid row: a time-of-day axis column followed by 7
   day columns. Each day's shifts stack independently within that day's
   cell — a shift that crosses local midnight is split (by _day_bands)
   into two segments, each rendered in its own day's cell. Card
   flex-grow (set inline from height_pct) is proportional to the actual
   local time-of-day span it covers — e.g. a shift ending at local noon
   fills about half the cell. Cards use flex-basis:auto (not 0) so a card
   is never shorter than its own content: a short segment (e.g. the 4h
   00:00–04:00 tail of an overnight shift) would otherwise get a
   proportional slice too small to fit its time + name + sign-up/cancel
   button and clip it under overflow:hidden — badly on wide screens
   where .rsc-time is visible (the reported "can't cancel" bug). The
   axis labels and the gridline overlay use the raw band_heights (pure
   proportional, basis 0), so they line up with the card boundaries on
   a full day; on a day where a short band's content (e.g. a wrapped
   member name) forces its card taller than its proportional slice they
   drift a little. That's an accepted cosmetic tradeoff — the axis and
   gridlines are a reference only (pointer-events:none) — for never
   clipping the sign-up/cancel buttons. Perfectly tracking content-driven
   card heights would need JS measurement, not worth it here. */
.roster-cal-week {
  display: grid; grid-template-columns: 44px repeat(7, 1fr);
  border-top: 1px solid var(--border); border-left: 1px solid var(--border);
  position: relative; min-width: 700px;
}
.roster-cal-week:last-child { border-bottom: 1px solid var(--border); }

/* Reference grid lines marking each band boundary, lined up with the
   time-of-day axis labels and (for non-past days, where every band is
   present) the shift block boundaries.
   The overlay stretches to the week row's ACTUAL height (top→bottom), it is
   NOT a fixed 280px (issue #784). With unit-owned bands stacked inside a card
   (#660 B4) a cell routinely grows past the 280px minimum — several units in
   one slot add ~30-55px each — and a fixed-height overlay crammed every
   gridline into the top 280px of a much taller row, so the axis and the
   gridlines pointed at nothing. Stretching keeps them spanning the same box
   the cards do. (The residual per-card drift from flex-basis:auto content
   minimums, described above, is unchanged — that's still the #519 tradeoff.)
   ⚠️ This ONLY works because `.roster-cal-cards` also grows (`flex: 1`, below).
   Stretching the overlay while the day cells' card stacks stayed at their
   280px min-height would be WORSE than the fixed height it replaced: on every
   day with no unit bands the cards would sit 280px tall at the top of a taller
   row while the gridlines spanned the whole row, so they'd point into blank
   space. Change the two together.
   The inset constants track the cell's own box: cards start at
   0.2rem cell padding + the 20px header + their 0.2rem margin-top, and end at
   the 0.2rem bottom padding. (The header can exceed 20px on the 1st of a month
   — the month label is 14px — which no static value can follow; that row's
   lines drift by a few px.) */
.roster-cal-grid-overlay {
  position: absolute; left: 0; right: 0;
  top: calc(20px + 0.4rem); bottom: 0.2rem;
  pointer-events: none;
}
.roster-cal-gridline {
  position: absolute; left: 0; right: 0; height: 1px;
  background: var(--border); opacity: 0.6;
}

.roster-cal-axis {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border);
  padding-top: 0.2rem;
}
.roster-cal-axis-header { min-height: 20px; }
.roster-cal-axis-cards { gap: 1px; }
.roster-cal-axis-label {
  font-size: 12px; color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height: 1; padding-top: 1px;
  overflow: hidden;
}

.roster-cal-cell {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border);
  padding: 0.2rem 0.3rem;
}
.roster-cal-past { background: var(--panel-2); opacity: 0.65; }
.roster-cal-today { outline: 2px solid var(--accent); outline-offset: -2px; }

.roster-cal-cell-header {
  display: flex; align-items: center; gap: 0.25rem;
  min-height: 20px;
}

/* `flex: 1` so EVERY card stack — each day's and the axis's — grows to the
   week row's height, which is set by whichever day has the most stacked unit
   bands. Without it only the tallest day filled its cell and the other six sat
   280px tall at the top, so the stretched gridline overlay above pointed into
   blank space on those columns (issue #784). The cell is already a stretched
   grid item; this passes that height down to the stack. */
.roster-cal-cards {
  display: flex; flex-direction: column; min-height: 280px; flex: 1;
  gap: 1px; margin-top: 0.2rem;
}
.roster-cal-month-label {
  font-size: 14px; font-weight: 700; color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.04em; margin-right: auto;
}
.roster-cal-day-num {
  font-size: 12px; font-weight: 600; color: var(--text); margin-left: auto;
}
.roster-cal-today .roster-cal-day-num {
  background: var(--accent); color: #fff;
  border-radius: 50%; width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center; font-size: 11px;
}

.roster-inline-form { display: contents; }
.roster-btn-add {
  padding: 0 5px; background: transparent; color: var(--accent);
  border: 1px dashed var(--accent); border-radius: 3px;
  font-size: 13px; line-height: 1.2; cursor: pointer;
}
.roster-btn-add:hover { background: rgba(11,45,82,0.08); }

.roster-shift-card {
  overflow: hidden; box-sizing: border-box; min-height: 42px;
  border-radius: 3px; padding: 2px 5px;
  font-size: 11px; border-left: 3px solid transparent;
}
.rsc-open   { background: rgba(11,45,82,0.05); border-left-color: var(--accent); }
.rsc-taken  { background: rgba(33,106,29,0.07); border-left-color: var(--ok); }
.rsc-time   { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; color: var(--muted); line-height: 1.3; }
.rsc-member { font-weight: 500; font-size: 11px; color: var(--nx-navy); margin-top: 1px; }

.rsc-open-label { font-style: italic; color: var(--muted); font-size: 10px; }
.rsc-actions { display: flex; gap: 2px; flex-wrap: wrap; margin-top: 3px; align-items: center; }

/* Unit-owned bands + legend + create form (issue #660 B4/B1) */
.rsc-unit { margin-top: 3px; padding: 2px 4px; border-radius: 3px; background: rgba(0,0,0,0.03); }
/* Open-vs-taken tint for a UNIT band. These need the compound selector: the
   card-level `.rsc-open`/`.rsc-taken` are the same specificity as `.rsc-unit`
   and lose to its later `background`, so a filled and an empty unit band
   rendered identically (issue #784). The unit's own color stays on the inline
   left border, which is why the state is carried by the background. */
.rsc-unit.rsc-open  { background: rgba(11,45,82,0.06); }
.rsc-unit.rsc-taken { background: rgba(33,106,29,0.10); }
/* Truncate rather than wrap: the day column is ~87px of content box, so a name
   like "Squadron 150 Coastal Valley" wrapped to 3-4 lines and inflated the card
   (which then drags the gridline alignment with it). The full name is on the
   element's `title` (issue #784). */
.rsc-unit-name {
  font-weight: 700; font-size: 10px; line-height: 1.2;
  color: var(--nx-navy);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.roster-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; align-items: center; margin: 0.4rem 0 0.6rem; }
.roster-legend-item { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 12px; }
.roster-legend-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid rgba(0,0,0,0.18); }
.roster-assign-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin: 0.4rem 0; font-size: 14px; }
.roster-assign-form select, .roster-assign-form input[type="date"] {
  padding: 0.35rem 0.5rem; border-radius: 4px; border: 1px solid var(--border); font-size: 14px;
}

.rsc-btn-signup {
  padding: 2px 6px; background: var(--accent); color: #fff;
  border: none; border-radius: 3px; font-size: 10px; font-weight: 600; cursor: pointer;
}
.rsc-btn-signup:hover { background: var(--nx-navy2); }
.rsc-btn-cancel {
  padding: 1px 5px; background: transparent; color: var(--danger);
  border: 1px solid var(--danger); border-radius: 3px; font-size: 10px; cursor: pointer;
  margin-top: 2px;
}
.rsc-btn-cancel:hover { background: var(--danger); color: #fff; }
.rsc-btn-delete {
  padding: 1px 4px; background: transparent; color: var(--muted);
  border: 1px solid var(--border); border-radius: 3px; font-size: 10px; cursor: pointer;
}
.rsc-btn-delete:hover { color: var(--danger); border-color: var(--danger); }

@media (max-width: 768px) {
  .rsc-time { display: none; }
}

/* ── WMAO Mission Alert ──────────────────────────────────────────────────── */
.mission-page { max-width: 760px; margin: 0 auto; padding: 0 1.5rem 3rem; }
.mission-form  { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 1rem; }
.mission-section { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 1.25rem; }
.mission-section-title { font-size: 13px; font-weight: 700; color: var(--nx-navy); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 1rem; }
.mission-row   { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.9rem; }
.mission-row:last-child { margin-bottom: 0; }
.mission-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.mission-label { font-size: 12px; font-weight: 600; color: var(--muted); display: flex; align-items: center; justify-content: space-between; }
.mission-input, .mission-textarea {
  padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: 4px;
  font-size: 13px; background: var(--panel); color: var(--text); width: 100%; box-sizing: border-box;
}
.mission-input:focus, .mission-textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.mission-textarea { resize: vertical; }
.mission-char-counter { font-size: 11px; font-weight: 400; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.mission-req { font-size: 11px; font-weight: 400; color: var(--danger); margin-left: 0.2rem; }
.mission-input-missing { background: #fdecec; }

.mission-hours-select { width: 5rem; }
.mission-warn { font-size: 12px; color: var(--danger); padding: 0.3rem 0.5rem; background: #fde8e8; border-radius: 3px; margin-top: 0.25rem; }
.mission-actions { display: flex; gap: 0.75rem; align-items: center; margin-top: 0.5rem; }
.mission-btn-submit {
  padding: 0.55rem 1.75rem; background: var(--nx-navy); color: #fff;
  border: none; border-radius: 4px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.mission-btn-submit:hover { background: var(--nx-navy2); }

/* Progress bar */
.mission-progress {
  display: flex; align-items: center; margin: 1.25rem 0;
}
.mission-step  { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; flex-shrink: 0; }
.mstep-circle  {
  width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; background: var(--panel); color: var(--muted);
}
.mstep-label   { font-size: 11px; color: var(--muted); white-space: nowrap; }
.mstep-done  .mstep-circle  { background: var(--ok); border-color: var(--ok); color: #fff; }
.mstep-done  .mstep-label   { color: var(--ok); }
.mstep-active .mstep-circle { background: var(--accent); border-color: var(--accent); color: #fff; }
.mstep-active .mstep-label  { color: var(--accent); font-weight: 700; }
.mstep-cancelled .mstep-circle { background: #c0392b; border-color: #c0392b; color: #fff; }
.mstep-cancelled .mstep-label  { color: #c0392b; font-weight: 700; }
.mstep-line    { flex: 1; height: 2px; background: var(--border); margin: 0 0.3rem; position: relative; top: -12px; }
.mstep-line-done { background: var(--ok); }

/* Mission summary */
.mission-summary { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 1rem; margin-bottom: 1rem; }
.mission-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.5rem; }
.msumm-label { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; display: block; }
.msumm-val   { font-size: 13px; overflow-wrap: break-word; word-break: break-word; }
.mission-responses { margin-top: 1rem; }
.mission-resp-summary { display: flex; gap: 0.75rem; margin-bottom: 0.5rem; }
.mresp-stat  { font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 3px; }
.mresp-accepted     { background: #ddf0d8; color: var(--ok); }
.mresp-declined     { background: #fde8e8; color: var(--danger); }
.mresp-available-in { background: #fff3cd; color: #8a6500; }
.mresp-pending      { background: var(--panel-2); color: var(--muted); }

.wmao-raw-details { font-size: 12px; }
.wmao-raw-toggle { cursor: pointer; color: var(--accent); white-space: nowrap; }
.wmao-raw-label { margin: 0.4rem 0 0.1rem; font-weight: 600; color: var(--muted); font-size: 11px; }
.wmao-raw-pre {
  margin: 0 0 0.5rem; padding: 0.5rem 0.75rem;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 4px;
  font-size: 11px; white-space: pre-wrap; word-break: break-all;
  max-width: 480px; max-height: 300px; overflow: auto;
}

.wmao-notif-row { display: flex; gap: 0.4rem; margin-top: 0.35rem; flex-wrap: wrap; }
.wmao-notif-item {
  font-size: 11px; padding: 1px 6px; border-radius: 3px; white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.wmao-notif-ok  { background: #ddf0d8; color: var(--ok); }
.wmao-notif-err { background: #fde8e8; color: var(--danger); }
.wmao-notif-ooo { background: #fff3cd; color: #664d03; }  /* out of office (issue #562) */
.wmao-popup-notif { display: flex; gap: 0.35rem; margin-top: 0.3rem; flex-wrap: wrap; }

.wmao-empty {
  padding: 1.5rem; text-align: center; color: var(--muted);
  background: var(--panel); border: 1px dashed var(--border); border-radius: 6px;
}
.wmao-empty-center { margin-top: 1rem; }

/* Admin panel */
.wmao-admin-panel {
  margin-top: 2rem; background: var(--panel);
  border: 1px solid var(--border); border-radius: 6px;
}
.wmao-admin-summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: 0.7rem 1rem; color: var(--muted); font-size: 13px;
}
.wmao-admin-summary::-webkit-details-marker { display: none; }
.wmao-admin-panel[open] > .wmao-admin-summary { border-bottom: 1px solid var(--border); }


@media (max-width: 640px) {
  .wmao-duty-card { flex-direction: column; align-items: flex-start; }
  .wmao-assume-form { width: 100%; }
  .wmao-btn-assume { width: 100%; text-align: center; }
  .wmao-assign-form { flex-direction: column; align-items: stretch; }
  .wmao-assign-select { max-width: none; }

  /* IC alert response — larger touch targets on mobile only */
  #ic-response-form .wmao-btn-assume,
  #ic-response-form .wmao-btn-outline,
  #ic-response-form .wmao-btn-outline-assume {
    padding: 0.85rem 1.4rem; font-size: 16px;
  }
  #ic-response-form .mission-hours-select {
    padding: 0.6rem 0.75rem; font-size: 16px; width: 6rem;
  }
}

/* ── Account page ───────────────────────────────────────────────────────── */
.account {
  max-width: 540px; margin: 2rem auto; padding: 0 1.5rem;
}
.account h1 { color: var(--nx-navy); }
.account-fields {
  display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem;
  margin-bottom: 1.5rem;
}
.account-fields dt { color: var(--muted); font-size: 0.85rem; }
.account-fields dd { margin: 0; }
.account form { display: grid; gap: 0.7rem; max-width: 320px; }
.account form label > span {
  display: block; font-size: 0.8rem; color: var(--muted); margin-bottom: 0.2rem;
}
.account form input {
  width: 100%; padding: 0.5rem 0.7rem; background: #fff;
  border: 1px solid var(--border); border-radius: 4px; color: var(--text);
}
.account form button {
  padding: 0.6rem 1rem; border-radius: 4px;
  background: var(--nx-navy); color: white; border: 0; font-weight: 600;
}
.account form button:hover { background: var(--nx-navy2); }

/* Account Settings/Security tabs (issue #562) */
.acct-tabs {
  display: flex; gap: 0.25rem; border-bottom: 2px solid var(--border);
  margin: 1.25rem 0 1.25rem;
}
.acct-tab {
  padding: 0.55rem 1.1rem; border: 0; background: none; cursor: pointer;
  font-weight: 600; font-size: 0.95rem; color: var(--muted);
  border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.acct-tab:hover { color: var(--text); }
.acct-tab.active { color: var(--nx-navy); border-bottom-color: var(--nx-navy); }
.acct-panel[hidden] { display: none; }
.acct-panel > h2:first-child { margin-top: 0; }

/* OOO delegate typeahead (issue #562) — reuses the wmao-assign look */
.acct-search-wrap { position: relative; }
.acct-search-input {
  width: 100%; padding: 0.5rem 0.7rem; background: #fff;
  border: 1px solid var(--border); border-radius: 4px; color: var(--text);
}
.acct-search-result { font-size: 12px; min-height: 1em; margin-top: 0.2rem; }
.acct-search-result.acct-search-ok { color: var(--ok); }
.acct-search-result.acct-search-err { color: var(--danger); }
.acct-search-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
  background: var(--card, #fff); border: 1px solid var(--border);
  border-radius: 4px; margin-top: 2px; max-height: 16rem; overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.acct-search-dropdown:empty { display: none; }
.acct-search-option {
  padding: 0.45rem 0.6rem; font-size: 14px; cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.acct-search-option:last-child { border-bottom: none; }
.acct-search-option:hover, .acct-search-option.active { background: var(--row-hover, #eef2ff); }
.acct-search-option .acct-search-capid { color: var(--muted, #667); font-size: 12px; }

/* ── About page ──────────────────────────────────────────────────────────── */
.about { max-width: 480px; margin: 1.75rem 0 2rem; padding: 0 1.5rem; }
.about h1 { color: var(--nx-navy); display: flex; align-items: baseline; gap: 0.5rem; }
.about-version { font-size: 0.9rem; font-weight: 400; color: var(--muted); }
.about-meta {
  display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem;
  margin-bottom: 1.75rem;
}
.about-meta dt { color: var(--muted); font-size: 0.85rem; }
.about-meta dd { margin: 0; }
.about h2 { color: var(--nx-navy); font-size: 1rem; margin-bottom: 0.5rem; }
.about-team { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.3rem; }
.about-team li { display: flex; gap: 0.5rem; align-items: baseline; }
.about-rank { color: var(--muted); font-size: 0.85rem; min-width: 4rem; }

/* About: collapsible "What's new" accordion — newest entry open; pure <details>, no JS (CSP-safe). */
.about-release { border-top: 1px solid var(--border); padding: 0.5rem 0; }
.about-release:last-child { border-bottom: 1px solid var(--border); }
.about-release > summary {
  cursor: pointer; list-style: none; display: flex; gap: 0.5rem;
  align-items: baseline; color: var(--nx-navy);
}
.about-release > summary::-webkit-details-marker { display: none; }
.about-release > summary::before { content: "\25B8"; color: var(--muted); font-size: 0.8rem; }
.about-release[open] > summary::before { content: "\25BE"; }
.about-rel-date { color: var(--muted); font-size: 12.5px; font-weight: 400; }
.about-release ul { margin: 0.4rem 0 0.2rem 1.4rem; }

/* ── Dev environment banner ──────────────────────────────────────────────── */
.nexus-header-dev { background: #C95200; }

/* ── Staging environment banner (issue #167) ─────────────────────────────────
   Distinct from dev-orange and prod-default; staging holds real prod-shaped
   data, so it gets a loud violet header + an explicit label. */
.nexus-header-staging { background: #6d28d9; }

/* ── "View as <member>" impersonation bar (issue #712) ───────────────────────
   Loud amber bar shown while a superadmin is viewing the app read-only as a
   specific member, with the only exit. Deliberately unmissable. */
.nexus-impersonate-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.4rem 1rem;
  background: #92400e;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  border-bottom: 2px solid #b45309;
}
.nexus-impersonate-msg strong { font-weight: 800; }
.nexus-impersonate-exit {
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0.15rem 0.7rem;
  border-radius: 5px;
  cursor: pointer;
}
.nexus-impersonate-exit:hover { background: rgba(255, 255, 255, 0.3); }

.nexus-staging-tag {
  display: inline-block;
  margin-left: 0.6rem;
  padding: 0.1rem 0.5rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── F29/160 Event Planning ──────────────────────────────────────────────── */
.f29-page { max-width: 1200px; margin: 0 auto; padding: 1rem 1.5rem 3rem; }

/* Index */
.f29-index-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.f29-index-head h1 { margin: 0 0 0.25rem; font-size: 1.4rem; color: var(--nx-navy); }
.f29-sub { margin: 0; color: var(--muted); font-size: 0.9rem; }
.f29-list-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.f29-list-table th { background: var(--nx-navy); color: #fff; text-align: left;
  padding: 0.5rem 0.75rem; font-weight: 600; }
.f29-list-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.f29-list-table tr:hover td { background: var(--nx-hover, #f0f4fa); }
.f29-event-types { font-size: 0.8rem; }
.f29-type-tag { display: inline-block; background: #e8eff8; color: var(--nx-navy2);
  border-radius: 3px; padding: 1px 6px; margin: 1px 2px; font-size: 0.78rem; }
.f29-status { display: inline-block; padding: 2px 8px; border-radius: 3px;
  font-size: 0.8rem; font-weight: 600; text-transform: uppercase; }
.f29-status-draft  { background: #fff3cd; color: #856404; }
.f29-status-final  { background: #d4edda; color: #155724; }
.f29-actions { display: flex; gap: 0.4rem; align-items: center; white-space: nowrap; }
.f29-empty { padding: 2rem; text-align: center; color: var(--muted); }

/* Edit page */
.f29-edit-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.f29-edit-head h1 { margin: 0.25rem 0 0; font-size: 1.3rem; color: var(--nx-navy); }
.f29-back { font-size: 0.85rem; color: var(--nx-blue); text-decoration: none; }
.f29-back:hover { text-decoration: underline; }
.f29-head-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }

/* Tabs */
.f29-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--nx-navy);
  margin-bottom: 1.25rem; flex-wrap: wrap; }
.f29-tab { background: none; border: none; padding: 0.6rem 1.2rem;
  font-size: 0.95rem; cursor: pointer; color: var(--muted);
  border-bottom: 3px solid transparent; margin-bottom: -2px; }
.f29-tab:hover { color: var(--nx-navy); }
.f29-tab-active { color: var(--nx-navy); font-weight: 600;
  border-bottom-color: var(--nx-blue); }
.f29-tab-panel { display: none; }
.f29-tab-panel-active { display: block; }

/* Sections */
.f29-section { margin-bottom: 1.5rem; padding: 1rem 1.25rem;
  border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.f29-section-title { margin: 0 0 0.75rem; font-size: 1rem; color: var(--nx-navy);
  font-weight: 700; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

/* Grid layouts */
.f29-grid { display: grid; gap: 0.75rem; }
.f29-grid-2 { grid-template-columns: repeat(2, 1fr); }
.f29-grid-3 { grid-template-columns: repeat(3, 1fr); }
.f29-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) {
  .f29-grid-2, .f29-grid-3, .f29-grid-4 { grid-template-columns: 1fr; }
}

/* Form fields */
.f29-field { display: flex; flex-direction: column; gap: 0.25rem; }
.f29-field-label { font-size: 0.78rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em; }
.f29-input { border: 1px solid var(--border); border-radius: 4px;
  padding: 0.4rem 0.6rem; font-size: 0.9rem; width: 100%; box-sizing: border-box; }
.f29-input:focus { outline: 2px solid var(--nx-blue); border-color: var(--nx-blue); }
.f29-select { border: 1px solid var(--border); border-radius: 4px;
  padding: 0.4rem 0.6rem; font-size: 0.9rem; }
.f29-textarea { border: 1px solid var(--border); border-radius: 4px;
  padding: 0.4rem 0.6rem; font-size: 0.88rem; width: 100%; box-sizing: border-box;
  min-height: 60px; resize: vertical; font-family: inherit; }
.f29-textarea-lg { min-height: 90px; }
.f29-textarea-sm { min-height: 48px; margin-top: 0.4rem; }
.f29-textarea:focus, .f29-input:focus { outline: 2px solid var(--nx-blue); }
.f29-hint { font-size: 0.8rem; color: var(--muted); margin: 0.25rem 0 0.75rem; }

/* Checkboxes grid (event types) */
.f29-checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.4rem; margin-bottom: 0.5rem; }
.f29-checkbox-label { display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.9rem; cursor: pointer; }

/* Yes/No rows (activity checklist) */
.f29-yn-grid { display: flex; flex-direction: column; gap: 0; }
.f29-yn-row { display: flex; align-items: center; justify-content: space-between;
  padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border); font-size: 0.88rem;
  gap: 1rem; }
.f29-yn-row:last-child { border-bottom: none; }
.f29-yn-row:nth-child(even) { background: #f9f9f9; }
.f29-yn-label { flex: 1; }
.f29-yn-toggle { display: flex; gap: 1rem; white-space: nowrap; }

/* ORM radio */
.f29-radio-row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;
  padding: 0.35rem 0; }
.f29-orm-label { display: flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.8rem; border-radius: 4px; cursor: pointer;
  font-size: 0.88rem; font-weight: 600; border: 2px solid transparent; }
.f29-orm-low      { background: #d4edda; color: #155724; }
.f29-orm-moderate { background: #fff3cd; color: #856404; }
.f29-orm-high     { background: #f8d7da; color: #721c24; }
.f29-orm-label:has(input:checked) { border-color: currentColor; }

/* Risk radio (highest residual risk) */
.f29-risk-radio-row { gap: 0.5rem; }
.f29-risk-label { display: flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.8rem; border-radius: 4px; cursor: pointer;
  font-size: 0.88rem; font-weight: 600; border: 2px solid transparent; }
.f29-risk-L { background: #d4edda; color: #155724; }
.f29-risk-M { background: #fff3cd; color: #856404; }
.f29-risk-H { background: #f8d7da; color: #721c24; }
.f29-risk-E { background: #e8d5f5; color: #4a1572; }
.f29-risk-label:has(input:checked) { border-color: currentColor; }

/* Save bars */
.f29-save-bar { display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 1.25rem; flex-wrap: wrap; }
.f29-save-bar-bottom { margin-top: 1rem; margin-bottom: 0; justify-content: flex-end; }

/* Buttons */
.f29-btn-primary { background: var(--nx-navy); color: #fff;
  border: none; border-radius: 4px; padding: 0.5rem 1.2rem;
  font-size: 0.9rem; font-weight: 600; cursor: pointer; text-decoration: none;
  display: inline-block; }
.f29-btn-primary:hover { background: var(--nx-navy2); }
.f29-btn-sm { background: #eef2f7; border: 1px solid var(--border); border-radius: 3px;
  padding: 0.25rem 0.65rem; font-size: 0.8rem; cursor: pointer; text-decoration: none;
  display: inline-block; color: var(--nx-navy); }
.f29-btn-sm:hover { background: #dde4ef; }
.f29-btn-pdf, .f29-btn-pdf-lg { background: var(--nx-blue); color: #fff;
  border-color: var(--nx-blue); }
.f29-btn-pdf-lg { padding: 0.5rem 1rem; font-size: 0.9rem; font-weight: 600; }
.f29-btn-pdf:hover, .f29-btn-pdf-lg:hover { background: var(--nx-navy2); }
.f29-btn-copy { background: #e8f4e8; border-color: #4caf50; color: #2e7d32; }
.f29-btn-template { background: #fff8e1; border-color: #f59e0b; color: #92400e; font-weight: 600; }
.f29-btn-template:hover { background: #fef3c7; }

/* CAPF 160 hazard table */
.f29-hazard-table-wrap { overflow-x: auto; }
.f29-160-toolbar { display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.f29-160-toolbar .f29-section-title { margin-bottom: 0; }
.f29-hazard-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; min-width: 860px; }
.f29-hazard-table th { background: var(--nx-navy); color: #fff;
  padding: 0.4rem 0.5rem; text-align: left; font-weight: 600; white-space: nowrap; }
.f29-hazard-table td { border: 1px solid var(--border); padding: 0.25rem 0.35rem;
  vertical-align: top; }
.f29-hazard-table tr:nth-child(even) td { background: #f9fafc; }
.f29-ht-seq  { width: 30px; text-align: center; font-weight: 600;
  color: var(--muted); font-size: 0.78rem; }
.f29-ht-sub  { width: 130px; }
.f29-ht-haz  { width: 160px; }
.f29-ht-risk { width: 80px; }
.f29-ht-ctrl { width: 240px; }
.f29-ht-who  { width: 150px; }
.f29-ht-input { width: 100%; border: none; background: transparent; resize: vertical;
  font-size: 0.82rem; font-family: inherit; min-height: 38px;
  padding: 0.15rem; line-height: 1.35; }
.f29-ht-input:focus { outline: 1px solid var(--nx-blue); background: #f0f6ff; }
.f29-ht-wide { min-height: 48px; }
.f29-risk-select { width: 100%; border: 1px solid var(--border); border-radius: 3px;
  padding: 0.2rem 0.3rem; font-size: 0.85rem; font-weight: 700;
  text-align: center; cursor: pointer; transition: background 0.15s; }

/* Collaborators */
.f29-editor-list { margin-bottom: 1rem; }
.f29-editor-row { display: flex; align-items: center; justify-content: space-between;
  padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border); gap: 0.75rem; }
.f29-editor-row:last-child { border-bottom: none; }
.f29-editor-name { font-size: 0.9rem; }
.f29-editor-empty { color: var(--muted); font-size: 0.88rem; padding: 0.5rem 0; }
.f29-editor-add { margin-top: 1rem; }
.f29-editor-add h3 { font-size: 0.9rem; font-weight: 600; color: var(--nx-navy);
  margin: 0 0 0.5rem; }
.f29-editor-search-row { position: relative; max-width: 360px; }
.f29-editor-results { position: absolute; top: 100%; left: 0; right: 0;
  background: #fff; border: 1px solid var(--border); border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12); z-index: 50; max-height: 240px; overflow-y: auto; }
.f29-result-item { padding: 0.5rem 0.75rem; cursor: pointer; font-size: 0.88rem; }
.f29-result-item:hover { background: var(--nx-hover, #f0f4fa); }
.f29-capid-badge { background: #e8eff8; color: var(--nx-navy2); border-radius: 3px;
  padding: 1px 5px; font-size: 0.78rem; margin-left: 0.3rem; }

/* Creator row + role badge */
.f29-editor-creator { background: #f5f7fa; }
.f29-role-badge { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em;
  background: var(--nx-navy, #1a2d5a); color: #fff;
  border-radius: 3px; padding: 2px 8px; white-space: nowrap; }
.f29-role-input { max-width: 160px; font-size: 0.82rem; padding: 0.2rem 0.4rem; }

/* Pending editor selection */
.f29-editor-pending { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.6rem 0.75rem; background: #f0f6ff; border-radius: 4px;
  border: 1px solid #c0d4ef; margin-top: 0.5rem; }

/* Computed risk display */
.f29-risk-display { display: inline-block; padding: 0.35rem 1rem;
  border-radius: 5px; font-size: 1rem; font-weight: 700;
  background: #27ae60; color: #fff; letter-spacing: 0.03em; }
.f29-risk-display-none { background: #d1d5db !important; color: #555 !important;
  font-weight: 400; font-size: 0.9rem; }

/* Read-only display field (e.g. activity name on CAPF 160) */
.f29-display-field { padding: 0.4rem 0.6rem; background: #f5f7fa;
  border: 1px solid var(--border); border-radius: 4px; font-size: 0.92rem;
  color: var(--body); min-height: 2rem; }

/* Locked input (prepared-by officer auto-fill) */
.f29-input-locked { background: #f0f4f8 !important; color: #555 !important;
  cursor: not-allowed; border-color: #c8d3df !important; }

/* Add Row button bar below hazard table */
.f29-add-row-bar { margin-top: 0.6rem; }
.f29-btn-secondary { background: #fff; border: 1px solid var(--border);
  color: var(--body); border-radius: 4px; padding: 0.3rem 0.75rem;
  font-size: 0.82rem; cursor: pointer; }
.f29-btn-secondary:hover { background: #f0f4fa; border-color: var(--nx-blue); }

/* Participant Restrictions inline rows */
.f29-pr-rows { display: flex; flex-direction: column; gap: 0.75rem; }
.f29-pr-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  font-size: 0.9rem; }
.f29-pr-text { white-space: nowrap; }
.f29-pr-or { color: var(--muted); font-style: italic; font-size: 0.85rem; }
.f29-pr-check { display: flex; align-items: center; gap: 0.3rem;
  white-space: nowrap; cursor: pointer; }
.f29-pr-cost { width: 120px; flex-shrink: 0; }

/* Tracking ID badge (edit page header) */
.f29-tracking-id { display: inline-block; font-size: 0.78rem; font-weight: 700;
  font-family: monospace; letter-spacing: 0.04em;
  background: var(--nx-navy, #1a2d5a); color: #fff;
  border-radius: 4px; padding: 2px 10px; margin-top: 4px; vertical-align: middle; }

/* Tracking ID column in the index table */
.f29-tracking-col { font-family: monospace; font-size: 0.82rem;
  color: #555; white-space: nowrap; }

/* ===========================================================================
   Mobile / responsive — global rules
   Goal: nothing should force the page wider than the viewport ("right side
   cut off" on phones). Wide content scrolls *inside* its own box instead.
   =========================================================================== */

/* Safety net against accidental horizontal overflow. `clip` (unlike `hidden`)
   does NOT create a scroll container, so the sticky header keeps working and
   overflow-y stays `visible`. */
html, body { overflow-x: clip; }
img, svg, video, canvas { max-width: 100%; height: auto; }

/* Reusable wrapper: a wide table scrolls horizontally within this box while
   the rest of the page still fits the screen. */
.nx-tscroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Wide result tables that share a container with their heading: the container
   (auto height) scrolls sideways — no vertical scrollbar is introduced. */
.ms-roster-results { max-width: 100%; overflow-x: auto; }

/* ── Mobile header: collapse the user menu into a hamburger dropdown ──────── */
.nexus-menu-toggle {
  display: none;                 /* shown only in the mobile media query below */
  background: none; border: 0; cursor: pointer;
  width: 40px; height: 40px; padding: 8px; margin-left: auto;
  border-radius: 6px;
  align-items: center; justify-content: center;
}
.nexus-menu-toggle:hover { background: rgba(255,255,255,0.10); }
.nexus-menu-bars { position: relative; }
.nexus-menu-bars,
.nexus-menu-bars::before,
.nexus-menu-bars::after {
  content: ""; display: block;
  width: 22px; height: 2px; border-radius: 2px; background: #fff;
}
.nexus-menu-bars::before { position: absolute; top: -7px; }
.nexus-menu-bars::after  { position: absolute; top:  7px; }

@media (max-width: 820px) {
  .nexus-header { padding: 0 0.75rem; gap: 8px; }
  .nexus-logo-cawg { display: none; }   /* big secondary logo — drop on mobile */
  .nexus-app-switch { display: none; }  /* single "◆ Nexus" chip — saves room  */

  .nexus-menu-toggle { display: inline-flex; }

  .nexus-user-menu {
    display: none;
    position: absolute; top: 64px; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0.9rem;
    min-width: 200px;
    padding: 1rem 1.1rem;
    background: var(--nx-navy);
    border: 1px solid rgba(255,255,255,0.15); border-top: none;
    border-radius: 0 0 0 10px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.35);
    z-index: 60;
  }
  .nexus-header.menu-open .nexus-user-menu { display: flex; }
  .nexus-user-menu .nexus-user-name { order: -1; }
  .nexus-user-menu form.inline { display: block; margin: 0; }
}

/* ── Trim oversized page padding on phones so content uses the full width ─── */
@media (max-width: 640px) {
  .ms-page, .acs-page, .f14-page, .ss-page, .wmao-page,
  .msn-page, .f29-page, .vres, .dash-hero, .dash-tiles {
    padding-left: 0.85rem; padding-right: 0.85rem;
  }
  .f14-head { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
}

/* ── Contact-info login banner (issue #37) ──────────────────────────────── */
.nx-contact-banner {
  display: flex; align-items: flex-start; gap: 0.75rem;
  margin: 0.6rem 1.25rem 0; padding: 0.7rem 0.9rem;
  border: 1px solid; border-radius: 8px; font-size: 0.85rem; line-height: 1.4;
}
.nx-contact-info {
  background: #fff8ec; border-color: #eccf95; color: #6b4a08;
  border-left: 5px solid var(--nx-amber);
}
.nx-contact-critical {
  background: #fbeaea; border-color: #e7a3a3; color: #7a1f1f;
  border-left: 5px solid var(--danger);
}
.nx-contact-body { flex: 1; }
.nx-contact-body strong { display: block; margin-bottom: 0.25rem; }
.nx-contact-issues { margin: 0.2rem 0 0.35rem; padding-left: 1.1rem; }
.nx-contact-issues li { margin: 0.1rem 0; }
.nx-contact-fix { display: block; font-size: 0.78rem; color: inherit; opacity: 0.92; }
.nx-contact-fix a { font-weight: 700; white-space: nowrap; }
.nx-contact-dismiss {
  flex: 0 0 auto; background: none; border: 0; cursor: pointer;
  font-size: 1.3rem; line-height: 1; color: inherit; opacity: 0.6; padding: 0 0.2rem;
}
.nx-contact-dismiss:hover { opacity: 1; }
@media (max-width: 700px) { .nx-contact-banner { margin: 0.5rem 0.6rem 0; } }

/* Superadmin "act as wing" picker in the header user menu (issue #66). */
.nexus-actwing { display: block; margin: 0.15rem 0; }
.nexus-actwing label {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.8rem; color: var(--muted);
}
.nexus-actwing select {
  flex: 1; font-size: 0.8rem; padding: 2px 6px;
  border: 1px solid var(--border); border-radius: 4px; background: #fff; color: var(--text);
}

/* ── Mobile: wide data tables scroll instead of clipping off-screen ───────────
   On phones these tables were wider than the viewport with no way to scroll, so
   the right-hand columns were cut off (issue #349 — e.g. the Support "My recent
   tickets" Submitted column ran past the card edge). Making the table a
   scrollable block (with nowrap cells so it actually overflows) gives a
   horizontal swipe to reach them. Scoped to small screens — desktop table
   layout is unchanged.

   This list covers every data table whose own scroll isn't already handled by a
   wrapper (member-search .ms-roster-results and .f29-hazard-table-wrap already
   scroll, so they're intentionally omitted). When you add a new wide table,
   add its class here. */
@media (max-width: 768px) {
  /* Support */
  .sup-table,
  /* Admin (user mgmt, audit, env diff, Twilio) */
  .ua-table, .al-audit-table, .eq-dv-table, .tw-table,
  /* Missions */
  .msn-table, .msn-tt-table, .msn-log-table, .msn-fin-table,
  .roster-table, .log-table,
  /* Aircraft status / config / staff listings */
  .acs-table, .acr-table, .acfg-table, .sl-table,
  /* NFC */
  .nfc-table,
  /* FlightWatch */
  .fw-table,
  /* NexusQuals */
  .nq-table, .dsw-table,
  /* TOLD / TOLD admin / W&B */
  .dsr-table, .td-tbl, .ta-tbl, .wt-tbl, .bw-table,
  /* Waldo (inventory / kits / outprocessing / training) */
  .wk-table, .wi-table, .w-tf-table, .w-out-table,
  /* SAREX admin */
  .tbl, .se-tbl, .rr-tbl, .cmd-tbl, .c5-tbl,
  /* CalTopo */
  .ct-table,
  /* WMAO duty history, F29/160 list, Form 14, Commander's Corner */
  .wmao-table, .f29-list-table, .f14-table, .cc-table,
  /* Member Search — lookup qualification tables (fixed layout, #641) */
  .ms-quals {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    max-width: 100%;
  }
}

/* ── Mission chat widget (#463) — floating button, modal, room list, thread ── */
.mchat-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px;
  background: #d33; color: #fff; border-radius: 9px;
  font-size: .7rem; font-weight: 700; line-height: 1; vertical-align: middle;
}
.sb-badge { margin-left: auto; }

.mchat-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 900;
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--nx-navy, #0B2D52); color: #fff; font-size: 1.5rem;
  box-shadow: 0 3px 12px rgba(0,0,0,.28); display: flex; align-items: center; justify-content: center;
}
.mchat-fab:hover { filter: brightness(1.1); }
.mchat-fab-badge {
  position: absolute; top: -2px; right: -2px;
  min-width: 20px; height: 20px; padding: 0 5px;
  background: #d33; color: #fff; border-radius: 10px; border: 2px solid #fff;
  font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
}

/* Non-blocking floating panel: the container spans the viewport but is
   click-through (pointer-events:none) with NO backdrop, so the mission page
   behind stays fully interactive; only the box itself catches events. */
.mchat-modal {
  position: fixed; inset: 0; z-index: 1000; pointer-events: none;
}
.mchat-modal[hidden] { display: none; }
.mchat-modal-box {
  position: absolute; right: 20px; bottom: 20px; pointer-events: auto;
  width: min(560px, 94vw); height: min(600px, 84vh);
  background: #fff; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.35);
  display: flex; flex-direction: column; overflow: hidden;
}
.mchat-modal-box.dragging { box-shadow: 0 16px 52px rgba(0,0,0,.45); }
.mchat-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem .9rem; background: var(--nx-navy, #0B2D52); color: #fff;
  cursor: move; user-select: none; touch-action: none;   /* draggable handle */
}
.mchat-modal-title { font-weight: 600; }
.mchat-modal-close {
  background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer;
  line-height: 1; padding: 6px 10px; margin: -4px -6px -4px 0; border-radius: 8px;
}
.mchat-modal-close:hover { background: rgba(255,255,255,.15); }
.mchat-modal-body { flex: 1; min-height: 0; display: flex; }

/* Widget layout: room list + main thread. */
.mchat { display: flex; gap: 0; width: 100%; min-height: 360px; }
.mchat-modal-body .mchat { height: 100%; }
/* Inline (Communications tab) + standalone page: bound the height so the message
   thread scrolls INTERNALLY and the composer sits at the bottom, instead of the
   whole page growing/scrolling for a long history (#463). */
[data-mchat-inline] .mchat,
[data-mchat-page] .mchat { height: min(72vh, 640px); }
.mchat-rooms {
  width: 210px; flex-shrink: 0; border-right: 1px solid #e2e6ec;
  padding: .6rem; overflow-y: auto; display: flex; flex-direction: column; gap: .35rem;
}
.mchat-roomlist { display: flex; flex-direction: column; gap: .3rem; }
.mchat-pill {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  padding: .4rem .55rem; border: 1px solid #dfe4ec; border-radius: 8px;
  background: #f6f8fc; cursor: pointer; font: inherit; font-size: .85rem; color: #222;
}
.mchat-pill:hover { background: #eef2f8; }
.mchat-pill.sel { background: #e2ebf8; border-color: #c4d3ea; font-weight: 600; }
.mchat-pill.closed { opacity: .7; font-style: italic; }
.mchat-pill-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mchat-closedwrap { margin-top: .3rem; }
.mchat-closedtoggle { background: none; border: none; cursor: pointer; color: var(--muted, #777); font-size: .8rem; padding: .2rem 0; }
.mchat-closedlist { display: flex; flex-direction: column; gap: .3rem; margin-top: .2rem; }
.mchat-newroom {
  margin-top: .4rem; padding: .4rem; border: 1px dashed #b9c4d6; border-radius: 8px;
  background: #fff; cursor: pointer; font: inherit; font-size: .82rem; color: var(--nx-navy, #0B2D52);
}
.mchat-empty { color: var(--muted, #777); font-size: .82rem; padding: .4rem; }

.mchat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mchat-pick { color: var(--muted, #777); padding: 1.2rem; text-align: center; margin: auto; }
.mchat-roomhead {
  display: flex; align-items: center; gap: 8px; padding: .55rem .8rem;
  border-bottom: 1px solid #eceff4;
}
.mchat-roomtitle { font-weight: 600; flex: 1; }
.mchat-closedtag { font-size: .72rem; color: #b00; border: 1px solid #f0c6c6; border-radius: 6px; padding: 1px 5px; }
.mchat-tools { display: flex; gap: 4px; }
.mchat-tools button {
  border: 1px solid #d7dde6; background: #f6f8fc; border-radius: 6px; cursor: pointer;
  font: inherit; font-size: .78rem; padding: .2rem .5rem;
}
.mchat-tools button:hover { background: #eef2f8; }
.mchat-members-panel { padding: .5rem .8rem; border-bottom: 1px solid #eceff4; background: #fafbfd; font-size: .84rem; }
.mchat-mtitle { font-weight: 600; margin-bottom: .3rem; }
.mchat-mlist { display: flex; flex-wrap: wrap; gap: 5px; }
.mchat-chip { background: #eef; border-radius: 12px; padding: 2px 8px; font-size: .82rem; }
.mchat-chip .mchat-rm { color: #b00; text-decoration: none; margin-left: 3px; }
.mchat-addrow { display: flex; gap: 6px; align-items: center; margin-top: .4rem; }
.mchat-addrow select { flex: 1; min-width: 0; }

.mchat-thread { flex: 1; min-height: 120px; overflow-y: auto; padding: .7rem .8rem; background: #fafafa; }
.mchat-msg { margin: 6px 0; display: flex; flex-direction: column; align-items: flex-start; }
.mchat-msg.mine { align-items: flex-end; }
.mchat-msg-meta { font-size: .7rem; color: #8a8f98; margin-bottom: 2px; }
.mchat-msg-role { color: #5a7bb5; font-weight: 600; }
.mchat-bubble { max-width: 82%; padding: 7px 11px; border-radius: 12px; white-space: pre-wrap; word-break: break-word; background: #e9eef5; color: #111; }
.mchat-msg.mine .mchat-bubble { background: #1f6feb; color: #fff; }
.mchat-closednote { padding: .7rem .8rem; color: var(--muted, #777); font-size: .84rem; border-top: 1px solid #eceff4; }

/* Emoji reactions (tapbacks) under each message. */
.mchat-reacts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 3px; }
.mchat-msg.mine .mchat-reacts { justify-content: flex-end; }
.mchat-react {
  display: inline-flex; align-items: center; gap: 3px; cursor: pointer; font: inherit;
  border: 1px solid #dfe4ec; background: #fff; border-radius: 11px; padding: 1px 7px;
  font-size: .82rem; line-height: 1.5; color: #333;
}
.mchat-react:hover { background: #eef2f8; }
.mchat-react.mine { background: #e2ebf8; border-color: #9db8e0; }
.mchat-react-n { font-size: .72rem; font-weight: 600; color: #555; }
.mchat-react.mine .mchat-react-n { color: #1f4f9e; }
.mchat-react-add {
  border: 1px solid transparent; background: none; cursor: pointer; color: #667;
  font-size: .9rem; line-height: 1; padding: 1px 5px; border-radius: 11px; opacity: .5;
}
.mchat-msg:hover .mchat-react-add { opacity: .8; }
.mchat-react-add:hover { opacity: 1; background: #eef2f8; }
.mchat-react-picker {
  position: fixed; z-index: 1100; display: flex; gap: 2px;
  background: #fff; border: 1px solid #d7dde6; border-radius: 20px; padding: 4px 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
}
.mchat-react-picker[hidden] { display: none; }
.mchat-react-pick {
  border: none; background: none; cursor: pointer; font-size: 1.2rem; line-height: 1;
  padding: 4px 5px; border-radius: 8px;
}
.mchat-react-pick:hover { background: #eef2f8; }
.mchat-compose { padding: .6rem .8rem; border-top: 1px solid #eceff4; }
.mchat-direct { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: #444; margin-bottom: 5px; }
.mchat-direct-sel { display: block; width: 100%; margin-bottom: 6px; }
.mchat-composerow { display: flex; gap: 8px; align-items: flex-end; }
.mchat-input { flex: 1; resize: vertical; padding: 8px; border: 1px solid #ccc; border-radius: 6px; font: inherit; }
.mchat-send { height: 40px; padding: 0 16px; border: none; border-radius: 6px; background: var(--nx-navy, #0B2D52); color: #fff; cursor: pointer; font: inherit; }
.mchat-note { font-size: .78rem; color: #a55; margin-top: 4px; }

@media (max-width: 640px) {
  .mchat { flex-direction: column; }
  .mchat-rooms { width: auto; border-right: none; border-bottom: 1px solid #e2e6ec; flex-direction: row; flex-wrap: wrap; }
  .mchat-roomlist { flex-direction: row; flex-wrap: wrap; }
  .mchat-modal { padding: 0; }
  /* Full-screen on phones (pinned to the viewport — overrides any dragged coords).
     dvh + safe-area insets so the header (and its close button) clear the iOS
     status bar/notch and the composer clears the home indicator — otherwise the
     whole-screen chat has no reachable close (#463). */
  .mchat-modal-box {
    inset: 0; right: auto; bottom: auto;
    width: 100vw; height: 100vh; height: 100dvh; border-radius: 0;
  }
  .mchat-modal-head {
    cursor: default;                 /* dragging is disabled at full-screen */
    padding-top: max(.6rem, env(safe-area-inset-top));
    padding-right: max(.9rem, env(safe-area-inset-right));
  }
  .mchat-modal-close { font-size: 1.9rem; padding: 8px 12px; }
  .mchat-compose { padding-bottom: max(.6rem, env(safe-area-inset-bottom)); }
}

/* Canonical eServices/WMIRS + CAPWATCH disclaimers (issue #753, _disclaimers.html) */
.nx-disclaimer {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
  margin: 0.5rem 0 0;
  max-width: 70ch;
}