/* NOTAM Sidebar cards list */
/* Title, live-update status and the filter bar (ALL / A / C / AIS) are one row —
   .notam-meta-row — pinned to the top of the sidebar's scroll area while the card list
   scrolls beneath it, both desktop and mobile. The scroller's top padding is zeroed
   (see .flex-scroll-section) so overflow clips flush at the row, and the row supplies
   its own padding instead. .flex-scroll-section is used only by the NOTAM section. */
.notam-meta-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0 -1rem 0.75rem;
  padding: 0.6rem 1rem;
  background: rgba(10, 12, 16, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--glass-border);
}

.notam-title-count {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}

/* Matches .notam-title-count's size/weight/case — same visual weight in the header row,
   just muted a shade darker so the count stays the primary read. Holds either the TODAY
   scope's date or, taking priority, a stale-feed fetch time; it is absent from the DOM
   in the normal case, and that vacated width is what the scope segments spend. */
.notam-update-time {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Only ever rendered when the feed IS stale, so it is always a warning when visible —
   accent-coloured rather than the muted grey the old always-on timestamp used. */
.notam-update-time.stale {
  color: var(--color-accent);
}

.notam-filter-bar {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  margin-left: auto;
}

/* Icon-only — logo, no "AIS" text, same on desktop and mobile. */
.notam-ais-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem;
  text-decoration: none;
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.18s ease;
}

.notam-ais-link svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

.notam-ais-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* Shared shell for BOTH filter groups — time scope (NOW/TODAY/ALL) and series (A/C).
   One outer border with an inset button tray, rather than loose pills, so the whole
   filter bar reads as a single system rather than five unrelated buttons.
   The two groups behave differently — scope is single-select, series is multi-select —
   and that shows itself in use rather than in the styling: the series group is the only
   one that can ever have two segments lit at once.
   Container shape matches .atis-tabs (the DEP/ARR toggle, css/06-weather-warnings.css):
   soft rounded-rect, inset padding, individually-rounded buttons with no divider lines —
   replacing the previous capsule (radius 20px, overflow:hidden, border-left dividers
   between segments) so the two filter idioms in the app read as one system.
   Desktop only in practice: mobile hides this group in favour of the dropdowns in
   css/16-notam-filter-mobile.css, so there is no competing size constraint here.
   Active colour deliberately does NOT copy the ATIS toggle's neutral highlight — that
   toggle just switches which view you're looking at, while this is a FILTER selection,
   and --color-accent is this app's established "this is the active filter/state" signal
   (.tab-btn.active uses the same token). Matching shape, not meaning. */
.notam-seg-group {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  padding: 0.2rem;
  box-sizing: border-box;
}

.notam-seg {
  /* Single-character labels (A / C) would otherwise shrink to ~21px — a smaller tap
     target than the detached pills they replaced, on a phone used in an ops environment.
     The min-width spends part of the width that joining the groups gave back. */
  min-width: 28px;
  padding: 0.3rem 0.55rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
}

.notam-seg:hover:not(.active) {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
}

.notam-seg.active {
  background: var(--color-accent-dim);
  color: var(--color-accent);
}

/* Count badge for coincident NOTAMs. 16 of the 23 A-series NOTAMs share one centre and
   radius at VHHH, so a single ring is all the map can honestly draw there — this badge
   says how many are stacked and is the only way to reach the ones underneath. Fill is
   the most serious severity in the stack; text/border colour is picked in JS from the
   fill's luminance, because UAS geometry is #ffffff in dark mode and white-on-white
   would erase the number. */
.notam-count-anchor {
  background: none;
  border: 0;
}

.notam-count-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid currentColor;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.notam-cards-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.notam-card-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.notam-card-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--glass-border-hover);
}

.notam-card-item.selected {
  background: var(--color-accent-dim);
  border-color: var(--color-accent);
}

.notam-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.35rem;
}

.notam-id {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-main);
}

.notam-badge {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}

.notam-badge.danger { background: rgba(239, 68, 68, 0.15); color: var(--color-lifr); }
.notam-badge.warning { background: rgba(245, 158, 11, 0.15); color: var(--color-ifr); }
.notam-badge.info { background: rgba(59, 130, 246, 0.15); color: var(--color-mvfr); }

.notam-card-summary {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-main);
  margin-bottom: 0.2rem;
}
/* Clamp rather than a fixed height: a hard height clips mid-word and looks broken
   when one summary is 1 line and the next is 3. */
.notam-card-item.collapsed .notam-card-summary {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0;
}

.notam-card-body-snippet {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* UAS / Mass UAS badge — white, matching the white map geometry driven by the same
   match. Needs its own light-theme rule or it vanishes on a white background. */
.notam-badge.uas {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}
body.light-theme .notam-badge.uas {
  background: rgba(17, 24, 39, 0.12);
  color: #111827;
}

.notam-badge.pyro {
  background: rgba(168, 85, 247, 0.16);
  color: #c084fc;
}
body.light-theme .notam-badge.pyro {
  background: rgba(126, 34, 206, 0.12);
  color: #7e22ce;
}

/* ---- Expanded card: the full original NOTAM text ---- */
.notam-raw-wrap {
  position: relative;
  margin-top: 0.5rem;
  cursor: default;
}
.notam-raw {
  font-size: 0.75rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
  /* 280px, not the original 160px: measured against the live feed at the mobile card
     width, 160px forced an inner scroll on 25 of 33 NOTAMs (76%) — a thumb dragging the
     sidebar list could get caught inside the card instead. 280px cuts that to 7 of 33
     (21%), the genuinely long NOTAMs, while keeping the E)-first anchor for them. Going
     capless instead (card just grows, list scrolls through it) would hit 0 of 33, but the
     E)-first anchor needs an overflow to scroll to — capless means the preamble is back
     at the top of every card. Deliberately keeping the cap for that reason. */
  max-height: 280px;
  overflow-y: auto;
  background: #020304;
  padding: 0.35rem 0.5rem 0.35rem 0.35rem;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  /* Thin, always-visible track (WebKit) so the scrollable region reads as scrollable
     before a thumb ever touches it — the 12px card gutter alone wasn't enough of a
     target, and overscroll-behavior:auto already lets a drag past the end continue
     into the sidebar list, but that escape hatch isn't obvious without a visible track. */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 159, 10, 0.35) transparent;
  margin: 0;
  color: var(--text-main);
}
body.light-theme .notam-raw {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}
/* The preamble above E) is scrolled out of view, not removed. The fade over its last
   line is the cue that there is more above, so no extra label is needed. */
.notam-raw-wrap::before {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 1px;
  height: 20px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(#020304 35%, rgba(2, 3, 4, 0));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 2;
}
body.light-theme .notam-raw-wrap::before {
  background: linear-gradient(#f2f2f3 35%, rgba(242, 242, 243, 0));
}
.notam-raw-wrap.scrolled::before { opacity: 1; }

/* WebKit/iOS Safari ignores scrollbar-width/scrollbar-color — needs its own pseudo-
   elements for the same thin always-visible track. Kept deliberately narrow (4px) so
   it reads as a scroll indicator, not a drag handle; the drag target stays the whole
   box via native touch scrolling. */
.notam-raw::-webkit-scrollbar { width: 4px; }
.notam-raw::-webkit-scrollbar-track { background: transparent; }
.notam-raw::-webkit-scrollbar-thumb {
  background: rgba(255, 159, 10, 0.35);
  border-radius: 2px;
}
body.light-theme .notam-raw::-webkit-scrollbar-thumb {
  background: rgba(255, 159, 10, 0.5);
}

.notam-card-footer {
  margin-top: 0.4rem;
}

.geo-coord-badge {
  display: inline-block;
  font-size: 0.65rem;
  color: var(--color-accent);
  background: var(--color-accent-dim);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-weight: 600;
}