/**
 * NavCore EFB — Dark Mode Design System
 * ====================================
 * THE LAW. Do not deviate.
 *
 * Surface scale: true neutral grey, zero colour temperature.
 * Semantic colours: meaning only, never decoration.
 * Typography: IBM Plex Sans (UI) + IBM Plex Mono (data).
 */


/* ================================================================
   TOKENS
   ================================================================ */

:root {
  /* Surface scale */
  --s0: #111113;
  --s1: #18181b;
  --s2: #1f1f23;
  --s3: #26262c;
  --s4: #2e2e36;
  --s5: #38383f;
  --s6: #48484f;

  /* Text scale — all pass WCAG AA (4.5:1+) on s1/s2/s3 backgrounds */
  --t1: #f0f0f2;    /* primary — 14:1+ */
  --t2: #b4b4bc;    /* secondary — 7:1+ */
  --t3: #9e9ea6;    /* tertiary — 5.7:1+ */
  --t4: #8e8e98;    /* quaternary — 4.6:1+ */

  /* Semantic — meaning only */
  --ok:     #4caf7d;
  --warn:   #d4913a;
  --danger: #c0574a;
  --info:   #5b8fc9;

  /* Accent — aviation blue */
  --ac:     #4a8fd4;
  --ac-dim: rgba(74,143,212,.12);
  --ac-mid: rgba(74,143,212,.28);

  /* Fonts */
  --sans: 'IBM Plex Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  /* Radii */
  --r1: 4px;
  --r2: 7px;
  --r3: 11px;

  /* Layout */
  --sb: 228px;
  --sb-collapsed: 56px;
  --topbar-h: 52px;
}


/* ================================================================
   RESET
   ================================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 13px; }

body {
  font-family: var(--sans);
  background: var(--s1);
  color: var(--t1);
  height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--ac); text-decoration: none; }
a:hover { text-decoration: underline; }

button {
  cursor: pointer;
  font-family: var(--sans);
  background: none;
  border: none;
  color: var(--t1);
}

input, select, textarea {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--t1);
}

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--s5); border-radius: 2px; }


/* ================================================================
   SHELL LAYOUT
   ================================================================ */

.shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
}


/* ================================================================
   SIDEBAR
   ================================================================ */

.sidebar {
  width: var(--sb);
  flex-shrink: 0;
  background: var(--s2);
  border-right: 1px solid var(--s5);
  display: flex;
  flex-direction: column;
  transition: width .2s ease;
  overflow: hidden;
  z-index: 10;
}

.sidebar.collapsed { width: var(--sb-collapsed); }

/* Header */
.sb-head {
  height: var(--topbar-h);
  border-bottom: 1px solid var(--s5);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  flex-shrink: 0;
}

.sb-logo {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: var(--ac-dim);
  border: 1px solid var(--ac-mid);
  border-radius: var(--r1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ac);
  letter-spacing: .04em;
}

.sb-brand { overflow: hidden; white-space: nowrap; }
.sb-brand-name { font-size: 15px; font-weight: 600; color: var(--t1); line-height: 28px; }
.sb-brand-ac   { color: var(--ac); }
.sb-brand-dim  { color: var(--t4); font-weight: 400; font-size: 13px; margin-left: 2px; }

.sb-toggle {
  margin-left: auto;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: var(--r1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t4);
  font-size: 12px;
  transition: background .1s, color .1s;
}
.sb-toggle:hover { background: var(--s4); color: var(--t2); }

/* Navigation */
.sb-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 8px;
}

.sb-section-lbl {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--t4);
  padding: 8px 6px 4px;
  white-space: nowrap;
  overflow: hidden;
}

.sb-section-lbl + .sb-section-lbl,
.nav-item + .sb-section-lbl { margin-top: 4px; }

/* (collapsed section labels handled below in collapsed block) */

.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  margin-bottom: 4px;
  border-radius: var(--r1);
  color: var(--t2);
  font-size: 12px;
  cursor: pointer;
  transition: background .1s, color .1s;
  white-space: nowrap;
  position: relative;
}

.nav-item:hover { background: var(--s4); color: var(--t1); }
.nav-item.active {
  background: var(--ac-dim);
  color: var(--ac);
  font-weight: 500;
  border-left: 3px solid var(--ac);
  padding-left: 5px;
  border-radius: 0 var(--r1) var(--r1) 0;
}

.nav-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.nav-item.active .nav-icon { color: var(--ac); }

.nav-label { overflow: hidden; white-space: nowrap; }

.nav-badge {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 2px;
  background: var(--ac-dim);
  border: 1px solid var(--ac-mid);
  color: var(--ac);
  flex-shrink: 0;
}

/* Sidebar tree expand/collapse */
.nav-tree-parent { position: relative; }
.nav-tree-arrow {
  margin-left: auto;
  display: flex;
  align-items: center;
  transition: transform .15s;
  color: var(--t4);
}
.nav-tree-parent.expanded .nav-tree-arrow { transform: rotate(180deg); }
/* Tree spine — dashed vertical line + dashed horizontal branches (T1) */
.nav-tree-children {
  max-height: 0;
  overflow: hidden;
  transition: max-height .2s ease;
  position: relative;
  margin-left: 20px;
  padding-left: 14px;
}
.nav-tree-children.open { max-height: 300px; overflow: visible; }

/* Vertical dashed spine */
.nav-tree-children::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px dashed var(--s6);
}

.nav-sub-item {
  padding-left: 8px !important;
  font-size: 11px !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  gap: 9px !important;
  position: relative;
}

/* Horizontal dashed branch per sub-item */
.nav-sub-item::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 50%;
  width: 12px;
  height: 0;
  border-top: 1px dashed var(--s6);
}
.nav-sub-item.active::before {
  border-top-color: var(--ac);
  border-top-style: solid;
}

/* Terminate spine at last child center (mask over the vertical line) */
.nav-sub-item:last-child::after {
  content: '';
  position: absolute;
  left: -15px;
  top: calc(50% + 1px);
  bottom: -6px;
  width: 3px;
  background: var(--s2);
  z-index: 1;
}

.nav-sub-item.active {
  background: var(--ac-dim);
  color: var(--ac);
  font-weight: 500;
  border-left: 3px solid var(--ac);
  padding-left: 5px;
  border-radius: 0 var(--r1) var(--r1) 0;
}

/* Sidebar collapsed states — C8 compact rail with micro labels */
.sidebar.collapsed .nav-tree-arrow,
.sidebar.collapsed .sb-brand,
.sidebar.collapsed .nav-badge { display: none; }
.sidebar.collapsed .nav-tree-children { max-height: 0 !important; overflow: hidden !important; }
.sidebar.collapsed .sb-logo { cursor: pointer; }

/* Stack icon + label vertically */
.sidebar.collapsed .nav-item {
  flex-direction: column;
  gap: 2px;
  padding: 6px 2px;
  align-items: center;
  justify-content: center;
  border-left: none;
  border-radius: var(--r1);
}

/* Micro labels under icons — use abbreviated text from data-abbr */
.sidebar.collapsed .nav-label {
  display: block;
  font-size: 0;
  color: var(--t4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 48px;
  text-align: center;
}
.sidebar.collapsed .nav-item[data-abbr] .nav-label::after {
  content: attr(data-abbr);
  font-size: 8px;
}
/* Fallback for items without data-abbr (sub-items etc) */
.sidebar.collapsed .nav-item:not([data-abbr]) .nav-label {
  font-size: 8px;
}
.sidebar.collapsed .nav-item.active .nav-label,
.sidebar.collapsed .nav-item.active .nav-label::after { color: var(--ac); }
.sidebar.collapsed .nav-item.active {
  border-left: none;
  padding-left: 2px;
  border-radius: var(--r1);
}

/* Section labels become thin separator lines */
.sidebar.collapsed .sb-section-lbl {
  font-size: 0;
  height: 1px;
  padding: 0;
  margin: 4px 6px;
  background: var(--s5);
  overflow: hidden;
  opacity: 1;
}

/* ---- Tree group wrapper ---- */
.nav-tree-group { position: relative; }

/* ---- Collapsed flyout (JS-driven, appended to body) ---- */
.sb-flyout {
  position: fixed;
  z-index: 9999;
  min-width: 130px;
  background: var(--s3);
  border: 1px solid var(--s5);
  border-radius: var(--r2);
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  padding: 4px 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-4px);
  transition: opacity .12s ease, transform .12s ease;
}
.sb-flyout.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
.sb-flyout-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 11px;
  color: var(--t2);
  cursor: pointer;
  white-space: nowrap;
  border-radius: 0;
  transition: background .1s, color .1s;
}
.sb-flyout-item:hover { background: var(--s4); color: var(--t1); }
.sb-flyout-item.active {
  background: var(--ac-dim);
  color: var(--ac);
  font-weight: 500;
}

/* Footer */
.sb-footer {
  border-top: 1px solid var(--s5);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.sb-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  flex-shrink: 0;
}

.sb-status-text {
  font-family: var(--mono);
  font-size:11px;
  color: var(--t3);
  overflow: hidden;
  white-space: nowrap;
}

.sb-clock {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--warn);
  margin-left: auto;
  flex-shrink: 0;
}

.sidebar.collapsed .sb-status-text { display: none; }
.sidebar.collapsed .sb-clock { display: none; }
.sidebar.collapsed .sb-footer { justify-content: center; padding: 8px 0; }


/* ================================================================
   MAIN AREA
   ================================================================ */

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}


/* ================================================================
   TOPBAR
   ================================================================ */

.topbar {
  height: var(--topbar-h);
  border-bottom: 1px solid var(--s5);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  flex-shrink: 0;
  background: var(--s2);
}

.tb-title { font-size: 14px; font-weight: 600; color: var(--t1); }
.tb-sub   { font-family: var(--mono); font-size:11px; color: var(--t4); }
.tb-sep   { width: 1px; height: 16px; background: var(--s5); flex-shrink: 0; }
.tb-spacer { flex: 1; }

.tb-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: var(--r1);
  background: var(--s3);
  border: 1px solid var(--s5);
  font-family: var(--mono);
  font-size:11px;
  color: var(--t2);
  transition: border-color .1s;
}
.tb-pill[onclick]:hover { border-color: var(--s6); }

.pill-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}


/* ================================================================
   CONTENT AREA
   ================================================================ */

.content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.section { display: none; }
.section.active {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
  animation: sectionIn .15s ease-out;
}

@keyframes sectionIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* Keyboard shortcut hints removed */


/* ================================================================
   LAYOUT HELPERS
   ================================================================ */

.row   { display: flex; gap: 14px; }
.col   { display: flex; flex-direction: column; gap: 14px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.flex-1 { flex: 1; min-width: 0; }
.w240  { width: 240px; flex-shrink: 0; }
.w300  { width: 300px; flex-shrink: 0; }


/* ================================================================
   CARDS
   ================================================================ */

.card {
  background: var(--s3);
  border: 1px solid var(--s5);
  border-radius: var(--r2);
  overflow: hidden;
}

.card-head {
  padding: 7px 12px;
  border-bottom: 1px solid var(--s5);
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--s3);
}

.card-title {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--t2);
  letter-spacing: .02em;
}

.card-body { padding: 8px 12px; }
.card-body.no-pad { padding: 0; }


/* ================================================================
   BUTTONS
   ================================================================ */

.btn {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  padding: 6px 13px;
  border-radius: var(--r1);
  border: 1px solid var(--s5);
  background: var(--s3);
  color: var(--t2);
  transition: all .12s;
  letter-spacing: .01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn:hover { background: var(--s4); border-color: var(--s6); color: var(--t1); }
.btn-primary { background: var(--ac-dim); border-color: var(--ac-mid); color: var(--ac); }
.btn-primary:hover { background: var(--ac-mid); }
.btn-solid { background: var(--ac); border-color: var(--ac); color: #fff; }
.btn-solid:hover { background: #3d7dbc; border-color: #3d7dbc; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--t3); }
.btn-ghost:hover { background: var(--s4); color: var(--t2); border-color: var(--s5); }
.btn-danger { background: rgba(192,87,74,.1); border-color: rgba(192,87,74,.25); color: var(--danger); }
.btn-danger:hover { background: rgba(192,87,74,.2); }
.btn-sm { padding: 5px 10px; font-size: 11px; }
.btn-xs { padding: 3px 8px; font-size:11px; }


/* ================================================================
   INPUTS & FORM ELEMENTS
   ================================================================ */

.field { display: flex; flex-direction: column; gap: 4px; }

.field-label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .1em;
}

.input {
  background: var(--s2);
  border: 1px solid var(--s5);
  border-radius: var(--r1);
  padding: 6px 10px;
  color: var(--t1);
  font-family: var(--mono);
  font-size: 11px;
  transition: border-color .12s;
  outline: none;
  width: 100%;
}

.input:focus { border-color: var(--ac-mid); }
.input::placeholder { color: var(--t4); }
.input-w100 { width: 100px; }
.input-w160 { width: 160px; }
.input-w200 { width: 200px; }

.search-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--s2);
  border: 1px solid var(--s5);
  border-radius: var(--r1);
  padding: 0 10px;
  height: 32px;
  transition: border-color .12s;
}
.search-wrap:focus-within { border-color: var(--ac-mid); }
.search-wrap input {
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--t1);
  flex: 1;
}
.search-wrap input::placeholder { color: var(--t4); }
.search-icon { color: var(--t4); font-size: 11px; flex-shrink: 0; }

.select {
  background: var(--s2);
  border: 1px solid var(--s5);
  border-radius: var(--r1);
  padding: 5px 26px 5px 9px;
  color: var(--t2);
  font-family: var(--mono);
  font-size: 11px;
  height: 32px;
  cursor: pointer;
  appearance: none;
  outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2348484f' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.toggle {
  width: 32px;
  height: 18px;
  background: var(--s5);
  border-radius: 9px;
  position: relative;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0;
}
.toggle.on { background: var(--ac); }
.toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}
.toggle.on::after { left: 17px; }


/* ================================================================
   BADGES
   ================================================================ */

.badge {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 2px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.badge-lc     { background: rgba(91,143,201,.14);  color: #5b8fc9; border: 1px solid rgba(91,143,201,.22); }
.badge-prt    { background: rgba(76,175,125,.14);   color: #4caf7d; border: 1px solid rgba(76,175,125,.22); }
.badge-vfa    { background: rgba(212,145,58,.14);   color: #d4913a; border: 1px solid rgba(212,145,58,.22); }
.badge-mil    { background: rgba(192,87,74,.14);    color: #c0574a; border: 1px solid rgba(192,87,74,.22); }
.badge-ok     { background: rgba(76,175,125,.14);   color: var(--ok);     border: 1px solid rgba(76,175,125,.22); }
.badge-warn   { background: rgba(212,145,58,.14);   color: var(--warn);   border: 1px solid rgba(212,145,58,.22); }
.badge-danger { background: rgba(192,87,74,.14);    color: var(--danger); border: 1px solid rgba(192,87,74,.22); }
.badge-info   { background: rgba(91,143,201,.14);   color: var(--info);   border: 1px solid rgba(91,143,201,.22); }
.badge-ac     { background: var(--ac-dim);           color: var(--ac);     border: 1px solid var(--ac-mid); }


/* ================================================================
   STAT BOXES
   ================================================================ */

.stat-box {
  background: var(--s3);
  border: 1px solid var(--s5);
  border-radius: var(--r1);
  padding: 12px 14px;
}

.stat-val {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 500;
  color: var(--t1);
  line-height: 1;
  margin-bottom: 3px;
}

.stat-val-sm {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 500;
  color: var(--t1);
  line-height: 1;
  margin-bottom: 3px;
}

.stat-unit {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--t4);
  text-transform: uppercase;
  letter-spacing: .1em;
}

.stat-label {
  font-size:11px;
  color: var(--t3);
  margin-top: 4px;
}

.stat-box:hover { border-color: var(--s6); }

/* ── Performance Metrics (2-column grid) ── */
.perf-metrics { display: flex; flex-direction: column; gap: 4px; }
.pm-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
}
.pm-item {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--s1); border-radius: var(--r1);
  padding: 6px 10px;
  min-width: 0;
}
.pm-item .pm-value-row {
  display: flex; align-items: baseline; gap: 4px;
}
.pm-label {
  font-size: 11px; color: var(--t4);
  text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap;
}
.pm-val {
  font-family: var(--mono); font-size: 14px; font-weight: 500;
  color: var(--t1); white-space: nowrap;
}
/* (pm-val-big removed — Total Fuel no longer highlighted) */
.pm-unit {
  font-family: var(--mono); font-size: 11px; color: var(--t4);
  white-space: nowrap;
}
.pm-hm {
  font-family: var(--mono); font-size: 11px; color: var(--t3);
  white-space: nowrap; margin-left: 2px;
}
/* Flight-plan cards — accent left border */
.pm-item-flight {
  border-left: 2px solid var(--ac);
}
/* Fuel cards (rows 2-4) — accent tint */
.pm-item-fuel {
  border-left: 2px solid var(--ac);
}
/* (pm-item-big removed — Total Fuel no longer highlighted) */

.contact-freq:hover { color: var(--t1); }


/* ================================================================
   TOAST NOTIFICATIONS
   ================================================================ */

.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  background: var(--s4);
  border: 1px solid var(--ok);
  border-radius: var(--r1);
  padding: 9px 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ok);
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translateY(60px);
  opacity: 0;
  transition: all .2s ease;
  pointer-events: none;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.toast-info   { border-color: var(--info);   color: var(--info); }
.toast.toast-warn   { border-color: var(--warn);   color: var(--warn); }
.toast.toast-danger { border-color: var(--danger); color: var(--danger); }


/* ================================================================
   UTILITY CLASSES
   ================================================================ */

.mono   { font-family: var(--mono); }
.dim    { color: var(--t3); }
.muted  { color: var(--t4); }
.divider { height: 1px; background: var(--s5); margin: 4px 0; }

.color-ok     { color: var(--ok); }
.color-warn   { color: var(--warn); }
.color-danger { color: var(--danger); }
.color-info   { color: var(--info); }
.color-ac     { color: var(--ac); }


/* ================================================================
   GUEST / ADMIN LOCK
   ================================================================ */

.guest-lock .admin-only { display: none !important; }
.guest-lock .admin-input {
  pointer-events: none;
  opacity: 0.45;
  user-select: none;
}


/* ================================================================
   SECTION STUB (placeholder for unbuilt sections)
   ================================================================ */

.section-stub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 20px;
  text-align: center;
}

.section-stub-icon {
  font-size: 32px;
  color: var(--t4);
  line-height: 1;
}

.section-stub-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--t2);
}

.section-stub-sub {
  font-family: var(--mono);
  font-size:11px;
  color: var(--t4);
  letter-spacing: .04em;
}


/* ================================================================
   DASHBOARD — Quick Links
   ================================================================ */

/* Dashboard row 2: true 4-column grid; routes spans cols 3-4 */
.dash-row2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.dash-col-1 {
  grid-column: span 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.dash-col-1 > .card-head { flex-shrink: 0; }
.dash-col-1 > .card-body { flex: 1; }
.dash-col-2 {
  grid-column: span 2;
  min-width: 0;
}

.quick-links-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  height: 100%;
  align-content: stretch;
}

.ql-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 9px;
  border-radius: var(--r1);
  background: var(--s4);
  border: 1px solid var(--s5);
  color: var(--t2);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all .1s;
  text-decoration: none;
}
.ql-item:hover { background: var(--s5); color: var(--t1); border-color: var(--s6); text-decoration: none; }
.ql-icon { font-size: 13px; color: var(--t4); }
.ql-featured {
  grid-column: span 2;
  background: var(--ac-dim);
  border-color: var(--ac-mid);
  color: var(--ac);
  font-weight: 600;
}
.ql-featured:hover { background: var(--ac-mid); color: var(--t1); border-color: var(--ac); }
.ql-featured .ql-icon { color: var(--ac); }

/* Dashboard METAR card: 6-col grid matching weather page */
.wx-grid-dash .wx-cell { border-bottom: none; }
.dash-wx-card { transition: border-color .15s; }
.dash-wx-card:hover { border-color: var(--s6); }


/* ================================================================
   DASHBOARD — Contacts
   ================================================================ */

.contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--s5);
}
.contact-row:last-child { border-bottom: none; }

.contact-av {
  width: 26px;
  height: 26px;
  border-radius: var(--r1);
  background: var(--s4);
  border: 1px solid var(--s5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--t3);
  flex-shrink: 0;
}
.contact-av-ac {
  background: var(--ac-dim);
  border-color: var(--ac-mid);
  color: var(--ac);
}

.contact-name { font-size: 11px; font-weight: 500; color: var(--t1); }
.contact-role { font-family: var(--mono); font-size: 11px; color: var(--t3); margin-top: 1px; }
.contact-freq { margin-left: auto; font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--warn); white-space: nowrap; }
.contact-date { font-family: var(--mono); font-size: 11px; color: var(--t4); }
.contact-section-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--t4);
  padding: 8px 0 3px;
  border-bottom: none;
}
.contact-section-label:first-child { padding-top: 2px; }


/* ================================================================
   DASHBOARD — Flight Plan Status
   ================================================================ */

/* Flight plan table — 9-column CSS grid */
.dash-fpl-table {
  display: grid;
  grid-template-columns:
    /* STATUS */  minmax(68px, auto)
    /* DATE   */  minmax(82px, auto)
    /* ROUTE  */  1fr
    /* REG    */  minmax(62px, auto)
    /* CNL    */  minmax(42px, auto)
    /* TIME   */  minmax(58px, auto)
    /* CHG    */  minmax(42px, auto)
    /* DLA    */  minmax(42px, auto)
    /* ARR    */  minmax(42px, auto);
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  width: 100%;
}
.dash-fpl-row {
  display: contents;
}
/* Active badge — green text */
.dash-fpl-active > .dash-fpl-badge { color: var(--ok); }
/* Closed badge — muted text (not green) */
.dash-fpl-closed > .dash-fpl-badge { color: var(--t3); }

/* Every cell — centered content, uniform padding */
.dash-fpl-row > * {
  padding: 10px 8px;
  white-space: nowrap;
  text-align: center;
  justify-self: center;
}
/* First column — extra left edge padding */
.dash-fpl-row > *:first-child { padding-left: 14px; }
/* Last column — extra right edge padding */
.dash-fpl-row > *:last-child  { padding-right: 14px; }

/* Row separators */
.dash-fpl-row > * {
  box-shadow: 0 1px 0 var(--s3);
}
.dash-fpl-row:last-child > * {
  box-shadow: none;
}

/* Column styling */
.dash-fpl-badge.badge {
  font-size: 11px;
  font-weight: 600;
  padding: 0;
  background: none;
  border: none;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.dash-fpl-date  { color: var(--t3); }
.dash-fpl-route { font-size: 12px; color: var(--t1); }
.dash-fpl-reg   { font-weight: 600; color: var(--t2); }
.dash-fpl-time  { color: var(--t3); }

.dash-fpl-actions-btn .btn {
  padding: 4px 10px;
  font-size: 11px;
  border: 1px solid var(--s5);
  border-radius: var(--r1);
}
.dash-fpl-actions-btn .btn.btn-danger {
  border-color: rgba(192,87,74,.4);
}
.dash-fpl-actions-btn .btn.btn-ghost {
  border-color: var(--s5);
}
.dash-fpl-actions-btn .btn.btn-ghost:hover {
  border-color: var(--t3);
  background: var(--s4);
}

.dash-fpl-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 18px 0;
}

.badge-muted {
  background: var(--s4);
  color: var(--t4);
  border: 1px solid var(--s5);
}


/* ================================================================
   DASHBOARD — Surface Pressure mini-chart
   ================================================================ */

.dash-sp-card {
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  background: var(--s2);
}
.dash-sp-card img {
  width: 100%;
  display: block;
}


/* ================================================================
   DASHBOARD — NOTAMs
   ================================================================ */

.notam-item {
  padding: 8px 10px;
  border-radius: var(--r1);
  background: var(--s4);
  border: 1px solid var(--s5);
  border-left-width: 2px;
  margin-bottom: 5px;
}
.notam-item:last-child { margin-bottom: 0; }
.notam-item.ni-warn   { border-left-color: var(--warn); }
.notam-item.ni-info   { border-left-color: var(--info); }
.notam-item.ni-danger { border-left-color: var(--danger); }

.notam-ref {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 2px;
}

.notam-text {
  font-family: var(--mono);
  font-size:11px;
  color: var(--t2);
  line-height: 1.5;
}


/* ================================================================
   DASHBOARD — Section wrappers (compact layout)
   ================================================================ */

.dash-sec { /* each logical section */ }
.dash-sec-shortcuts { }
.dash-sec-info { }

/* METAR + Contacts side-by-side: 3fr + 1fr */
.dash-sec-metar-row {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 8px;
  align-items: stretch;
}
.dash-metar-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: opacity .15s;
}
.dash-metar-col:hover { opacity: .92; }
.dash-metar-col .dash-gauge-row { flex: 1; align-items: center; }

/* METAR card header — stretch so the condition end-cap fills full height */
.dash-metar-head {
  align-items: stretch;
  gap: 10px;
}

/* Condition end-cap — colored section bleeding to the right card edge */
.dash-cond-cap {
  margin-top: -7px;
  margin-right: -12px;
  margin-bottom: -7px;
  padding: 0 16px;
  border-left: 1px solid var(--s5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  flex-shrink: 0;
  white-space: nowrap;
}
.dash-cond-cap.cond-ok     { background: rgba(76,175,125,.14);  color: var(--ok);     border-left-color: rgba(76,175,125,.25); }
.dash-cond-cap.cond-warn   { background: rgba(212,145,58,.14);  color: var(--warn);   border-left-color: rgba(212,145,58,.25); }
.dash-cond-cap.cond-danger { background: rgba(192,87,74,.14);   color: var(--danger); border-left-color: rgba(192,87,74,.25); }
.dash-cond-cap.cond-info   { background: rgba(91,143,201,.14);  color: var(--info);   border-left-color: rgba(91,143,201,.25); }
.dash-cond-nosig {
  font-size:11px;
  font-weight: 600;
  opacity: .7;
}

/* Contacts column — stretches to match METAR height */
.dash-contacts-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.dash-contacts-col > .card-head {
  padding-top: 9px;
  padding-bottom: 9px;
}
.dash-cf-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.dash-cf-body .dash-cf-row {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: center;
}


/* ================================================================
   DASHBOARD — METAR Card Header Elements
   ================================================================ */

.dash-ident-icao {
  align-self: center;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--t1);
  letter-spacing: .04em;
}
.dash-ident-name {
  align-self: center;
  font-size: 11px;
  color: var(--t3);
}
.dash-ident-time {
  align-self: center;
  margin-left: auto;
  font-family: var(--mono);
  font-size:11px;
  color: var(--t2);
  line-height: 1.35;
  text-align: right;
}
/* Age sits inside the raw strip, pushed to far right */
.dash-ident-age {
  font-family: var(--mono);
  font-size:11px;
  font-weight: 600;
  margin-left: auto;
  flex-shrink: 0;
}


/* ================================================================
   DASHBOARD — Gauge Row
   ================================================================ */

.dash-gauge-row {
  display: flex;
  justify-content: space-around;
  padding: 10px 0 12px;
  background: transparent;
}
.dash-gauge {
  text-align: center;
}
.dash-gauge-ring {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: 2px solid var(--s5);
  background: var(--s2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  transition: border-color .25s;
}
.dash-gauge-val {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--t1);
}
.dash-gauge-sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--t3);
  margin-top: 1px;
}
.dash-gauge-label {
  font-family: var(--mono);
  font-size:11px;
  color: var(--t4);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 4px;
}


/* ================================================================
   DASHBOARD — Raw Strip
   ================================================================ */

.dash-raw-strip {
  background: var(--s2);
  border-top: 1px solid var(--s5);
  padding: 5px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0;
}
.dash-raw-lbl {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space: nowrap;
  padding-top: 1px;
}
.dash-raw-txt {
  font-family: var(--mono);
  font-size:11px;
  color: var(--t1);
  line-height: 1.6;
  word-break: break-all;
}


/* ================================================================
   DASHBOARD — Glass HUD Link Tiles
   ================================================================ */

.dash-links-bar {
  display: grid;
  grid-template-columns: 3fr 1fr;
  align-items: stretch;
  gap: 8px;
  margin: 0;
}
.dash-links-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 8px;
}
.dash-link-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 7px 4px;
  background: var(--s3);
  border: 1px solid var(--s5);
  border-radius: var(--r2);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, background .15s;
  min-width: 0;
}
.dash-link-tile:hover {
  border-color: var(--ac);
  background: var(--ac-dim);
  text-decoration: none;
}
.dash-link-featured {
  background: var(--ac-dim);
  border-color: var(--ac-mid);
}
.dash-link-featured:hover {
  background: var(--ac-mid);
  border-color: var(--ac);
}
.dash-link-ico {
  font-size: 18px;
  line-height: 1;
}
.dash-link-lbl {
  font-family: var(--mono);
  font-size:11px;
  color: var(--t3);
}
.dash-link-featured .dash-link-lbl {
  color: var(--ac);
}
.dash-link-sep {
  width: 1px;
  background: var(--s5);
  align-self: stretch;
  flex-shrink: 0;
  margin: 4px 0;
}


/* ================================================================
   DASHBOARD — Info Grid (2-col x 2-row: chart | info cards)
   ================================================================ */

.dash-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 8px;
}

/* Chart spans the entire left column (both rows) */
.dash-info-chart {
  grid-column: 1;
  grid-row: 1 / 3;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.dash-info-chart .card-body { flex: 1; }

/* Right column cards — each in its own row */
.dash-info-r1 { grid-column: 2; grid-row: 1; min-width: 0; }
.dash-info-r2 { grid-column: 2; grid-row: 2; min-width: 0; }
/* Match card header height for Flight Plans & NOTAMs */
.dash-info-r1 > .card-head,
.dash-info-r2 > .card-head {
  min-height: 37.2px;
  box-sizing: border-box;
}


/* Legacy grid classes (kept for compatibility, no longer used on dashboard) */
.dash-grid-main {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 10px;
  margin-bottom: 10px;
}
.dash-chart-col { min-width: 0; }
.dash-right-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.dash-grid-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}


/* ================================================================
   DASHBOARD — Contacts & Frequencies table
   ================================================================ */

.dash-cf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--s3);
}
.dash-cf-row:last-child {
  border-bottom: none;
}
.dash-cf-cell {
  padding: 6px 14px;
}
.dash-cf-cell:first-child {
  border-right: 1px solid var(--s3);
}
.dash-cf-label {
  font-family: var(--mono);
  font-size:11px;
  color: var(--t4);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.dash-cf-val {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .1s;
}
.dash-cf-val:hover {
  opacity: .8;
}
.dash-cf-phone {
  color: var(--t2);
}
.dash-cf-freq {
  color: var(--warn);
}


/* ================================================================
   WEATHER
   ================================================================ */

/* Tag-based multi-ICAO input */
.wx-tag-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  background: var(--s2);
  border: 1px solid var(--s5);
  border-radius: var(--r1);
  padding: 4px 8px;
  min-height: 32px;
  min-width: 280px;
  max-width: 420px;
  cursor: text;
  transition: border-color .12s;
}
.wx-tag-wrap:focus-within { border-color: var(--ac-mid); }
.wx-tag-wrap input {
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--t1);
  text-transform: uppercase;
  min-width: 60px;
  flex: 1;
  padding: 2px 0;
}
.wx-tag-wrap input::placeholder { color: var(--t4); }

.wx-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 2px;
  background: var(--ac-dim);
  border: 1px solid var(--ac-mid);
  font-family: var(--mono);
  font-size:11px;
  font-weight: 600;
  color: var(--ac);
  white-space: nowrap;
  line-height: 1.4;
}
.wx-tag-x {
  cursor: pointer;
  color: var(--t3);
  font-size:11px;
  line-height: 1;
}
.wx-tag-x:hover { color: var(--danger); }

/* --- Control area: two bands --------------------------------- */
/* Band 1: utility row (links left, charts right)              */
/* Band 2: toolbar card (saved btn, tag input, action buttons) */
/* ------------------------------------------------------------ */
.wx-control-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --- Utility row (links + charts) --- */
.wx-utility-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.wx-utility-spacer { flex: 1; }
/* Data Products dropdown trigger (sits alongside chart buttons) */
.wx-dataprod-trigger {
  position: relative;
  flex: 0 0 auto;
}
.wx-dataprod-btn {
  min-width: 155px;
  justify-content: center;
}
.wx-dataprod-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 180px;
  background: var(--s3);
  border: 1px solid var(--s5);
  border-radius: var(--r2);
  padding: 4px;
  z-index: 120;
  flex-direction: column;
  gap: 2px;
}
.wx-dataprod-menu.open { display: flex; }
.wx-dataprod-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 12px;
  border: none;
  border-radius: var(--r1);
  background: transparent;
  color: var(--t2);
  font-family: var(--sans);
  font-size: 11px;
  cursor: pointer;
  transition: background .1s;
  white-space: nowrap;
  text-align: left;
}
.wx-dataprod-item:hover { background: var(--s4); color: var(--t1); }

/* Uniform-width link group + chart group */
.wx-utility-row .wx-link {
  flex: 0 0 auto;
  min-width: 105px;
  justify-content: center;
}
.wx-utility-row .wx-chart-btn {
  flex: 0 0 auto;
  min-width: 155px;
  justify-content: center;
}

/* Chart buttons */
.wx-chart-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--r1);
  border: 1px solid var(--s5);
  background: var(--s3);
  color: var(--t2);
  font-size: 11px;
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
  text-decoration: none;
}
.wx-chart-btn:hover { background: var(--s4); border-color: var(--s6); color: var(--t1); text-decoration: none; }
.wx-chart-icon { font-size: 13px; color: var(--ac); display: inline-flex; vertical-align: middle; }

/* --- Toolbar card --- */
.wx-toolbar {
  background: var(--s3);
  border: 1px solid var(--s5);
  border-radius: var(--r2);
  display: flex;
  align-items: stretch;
  padding: 5px 6px;
  gap: 6px;
}
.wx-toolbar .wx-tag-wrap {
  min-height: 32px;
  padding: 5px 10px;
  min-width: 180px;
  max-width: none;
  flex: 1;
}
.wx-toolbar .wx-tag-wrap input { padding: 2px 0; font-size: 11px; }
.wx-toolbar .btn {
  font-size: 11px;
  padding: 0 14px;
  white-space: nowrap;
}
.wx-hint { font-family: var(--mono); font-size:11px; color: var(--t3); align-self: center; }
.wx-api-toggle {
  font-family: var(--mono);
  font-size:11px;
  padding: 0 10px;
  min-width: 90px;
  text-align: center;
  justify-content: center;
  white-space: nowrap;
  color: var(--t3);
  border-color: var(--s5);
  margin-left: auto;
}
.wx-api-toggle:hover { color: var(--t1); border-color: var(--s6); }

/* --- Saved popover trigger --- */
.wx-saved-trigger {
  position: relative;
  flex-shrink: 0;
}
.wx-saved-btn {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  padding: 0 12px;
  height: 100%;
  background: var(--s4);
  border: 1px solid var(--s5);
  border-radius: var(--r1);
  color: var(--t2);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all .12s;
  white-space: nowrap;
}
.wx-saved-btn:hover { background: var(--s5); border-color: var(--s6); color: var(--t1); }
.wx-saved-count {
  background: var(--ac-dim);
  color: var(--ac);
  border-radius: 2px;
  padding: 1px 5px;
  font-size: 11px;
  font-weight: 700;
}
/* Popover panel */
.wx-saved-popover {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--s3);
  border: 1px solid var(--s5);
  border-radius: var(--r2);
  padding: 12px 14px;
  min-width: 280px;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  flex-direction: column;
  gap: 10px;
}
.wx-saved-popover.open { display: flex; }
.wx-saved-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
}
.wx-saved-add {
  display: flex;
  gap: 6px;
  align-items: stretch;
  border-top: 1px solid var(--s5);
  padding-top: 10px;
}
.wx-saved-add input { flex: 3; min-width: 0; }
.wx-saved-add .btn  { flex: 1; padding: 0; display: flex; align-items: center; justify-content: center; }
.wx-saved-empty { font-family: var(--mono); font-size:11px; color: var(--t4); }

/* Saved chips inside popover */
.wx-fav-chip {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  flex: 1 1 auto;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--r1);
  background: var(--s4);
  border: 1px solid var(--s5);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--t2);
  cursor: pointer;
  transition: all .1s;
  letter-spacing: .03em;
}
.wx-fav-chip:hover { background: var(--s5); border-color: var(--s6); color: var(--t1); }
.wx-fav-chip.wx-fav-ok     { border-color: rgba(76,175,125,.30); color: var(--ok); }
.wx-fav-chip.wx-fav-warn   { border-color: rgba(212,145,58,.30); color: var(--warn); }
.wx-fav-chip.wx-fav-danger { border-color: rgba(192,87,74,.30);  color: var(--danger); }
.wx-fav-x {
  font-size: 11px;
  color: var(--t4);
  cursor: pointer;
  line-height: 1;
  margin-left: auto;
}
.wx-fav-x:hover { color: var(--danger); }

/* 2-column METAR grid */
.wx-metar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* --- Bridge: connected METAR+TAF with inward condition stripe --- */
.wx-metar-cell {
  display: flex;
  flex-direction: column;
  border-radius: var(--r2);
  overflow: hidden;
  position: relative;
  min-width: 0;
}
/* Inward accent stripe along left edge */
.wx-metar-cell::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--s5);
  border-radius: var(--r2) 0 0 var(--r2);
  z-index: 1;
}
.wx-metar-cell.cond-vmc::before  { background: var(--ok); }
.wx-metar-cell.cond-mvfr::before { background: var(--warn); }
.wx-metar-cell.cond-imc::before  { background: var(--danger); }

/* METAR card — standalone (dashboard etc.) */
.metar-card-big {
  background: var(--s3);
  border: 1px solid var(--s5);
  border-radius: var(--r2);
  overflow: hidden;
}
/* When inside a bridge cell: top-only radius, no bottom border */
.wx-metar-cell .metar-card-big {
  border-radius: var(--r2) var(--r2) 0 0;
  border-bottom: none;
}

.mcb-head {
  padding: 10px 14px;
  background: var(--s4);
  border-bottom: 1px solid var(--s5);
  display: flex;
  align-items: stretch;
  gap: 10px;
}
/* Squared condition badge — stretches to fill header height */
.mcb-cond-badge {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 0 11px;
  line-height: 1;
  border-radius: 3px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mcb-cond-badge.badge-ok     { background: rgba(76,175,125,.14);  color: var(--ok);     border: 1px solid rgba(76,175,125,.25); }
.mcb-cond-badge.badge-warn   { background: rgba(212,145,58,.14);  color: var(--warn);   border: 1px solid rgba(212,145,58,.25); }
.mcb-cond-badge.badge-danger { background: rgba(192,87,74,.14);   color: var(--danger); border: 1px solid rgba(192,87,74,.25); }
.mcb-cond-badge.badge-info   { background: rgba(91,143,201,.14);  color: var(--info);   border: 1px solid rgba(91,143,201,.25); }
.mcb-cond-badge.badge-ac     { background: var(--ac-dim);         color: var(--ac);     border: 1px solid var(--ac-mid); }
.mcb-ident { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.mcb-icao  { font-family: var(--mono); font-size: 17px; font-weight: 600; color: var(--t1); letter-spacing: .04em; line-height: 1.1; }
.mcb-apt   { font-family: var(--sans); font-size: 11px; color: var(--t2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcb-right { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 2px; flex-shrink: 0; }
.mcb-age   { font-family: var(--mono); font-size:11px; font-weight: 600; }
.mcb-time  { font-family: var(--mono); font-size:11px; color: var(--t2); line-height: 1.35; text-align: right; }
.mcb-source { font-family: var(--mono); font-size: 11px; color: var(--t3, #888); text-transform: uppercase; letter-spacing: 0.5px; }

.wx-grid { display: grid; grid-template-columns: repeat(6, 1fr); }
.wx-cell { padding: 8px 10px; border-right: 1px solid var(--s5); }
.wx-cell:last-child { border-right: none; }
.wx-label  { font-family: var(--mono); font-size: 11px; color: var(--t3); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.wx-val    { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--t1); line-height: 1; }
.wx-sub    { font-family: var(--mono); font-size:11px; color: var(--t2); margin-top: 3px; }

.mcb-raw {
  padding: 8px 16px;
  background: var(--s2);
  border-top: 1px solid var(--s5);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.mcb-raw-lbl { font-family: var(--mono); font-size: 11px; color: var(--t3); text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; padding-top: 1px; }
.mcb-raw-txt { font-family: var(--mono); font-size:11px; color: var(--t1); line-height: 1.6; word-break: break-all; }

.taf-block {
  background: var(--s2);
  border: 1px solid var(--s5);
  border-radius: var(--r1);
  padding: 10px 14px;
  font-family: var(--mono);
  font-size:11px;
  color: var(--t2);
  line-height: 2;
}

/* TAF card — bottom of connected block */
.wx-taf-card {
  margin-top: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: 0 0 var(--r2) var(--r2);
  border-top: 1px solid var(--s5);
}
.wx-taf-card .card-head { padding: 6px 12px; flex-shrink: 0; }
.wx-taf-card .card-body { padding: 0; flex: 1; display: flex; flex-direction: column; }
.wx-taf-card .taf-block { border: none; border-radius: 0; flex: 1; }

.wx-link {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--r1);
  background: var(--s4);
  border: 1px solid var(--s5);
  color: var(--t2);
  font-size: 11px;
  cursor: pointer;
  transition: all .1s;
  text-decoration: none;
  white-space: nowrap;
}
.wx-link:hover { background: var(--s5); border-color: var(--s6); color: var(--t1); text-decoration: none; }
.wx-link-icon { font-size: 13px; color: var(--ac); display: inline-flex; vertical-align: middle; }

.wx-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 16px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--t3);
}

.wx-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--s5);
  border-top-color: var(--ac);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex-shrink: 0;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* (watch list redesigned as wx-fav-bar chips above — old watch-row styles removed) */

/* ================================================================
   WIND & TEMP CHART MODAL
   ================================================================ */
/* ── Modal overlay ─────────────────────────────────────────────── */
.wx-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,.88);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

/* ── Sidebar + main area layout ─────────────────────────────────── */
.wx-modal-sidebar-layout {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

/* ── Left sidebar ──────────────────────────────────────────────── */
.wx-chart-sidebar {
  width: 180px;
  flex-shrink: 0;
  background: var(--s1, #1e1e1e);
  border-right: 1px solid var(--s5, #444);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 12px;
  overflow-y: auto;
}
.wx-chart-sel-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wx-sel-label {
  font-family: var(--mono);
  font-size:11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--t4);
  margin-bottom: 3px;
}
.wx-chart-sel-chips {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
/* 2-column grid variant for time / altitude chips */
.wx-chips-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}
.wx-chips-grid .wx-chip {
  text-align: center;
}
.wx-chip-span {
  grid-column: 1 / -1;
}
.wx-chip {
  font-family: var(--mono);
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 3px;
  border: 1px solid var(--s5);
  background: var(--s2);
  color: var(--t3);
  cursor: pointer;
  transition: background .1s, border-color .1s, color .1s;
  line-height: 1.35;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wx-chip:hover {
  background: var(--s4);
  border-color: var(--s6);
  color: var(--t1);
}
.wx-chip-active {
  background: var(--ac-dim, rgba(100,160,255,.12));
  border-color: var(--ac-mid, rgba(100,160,255,.35));
  color: var(--ac, #6ea8fe);
}
.wx-chip-active:hover {
  background: var(--ac-dim, rgba(100,160,255,.18));
}

/* Selected-but-unavailable chip — red accent */
.wx-chip-unavail {
  background: rgba(220,60,60,.12);
  border-color: rgba(220,60,60,.35);
  color: #e06060;
}
.wx-chip-unavail:hover {
  background: rgba(220,60,60,.20);
}

/* ── Action buttons ─────────────────────────────────────────────── */
.wx-chart-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 12px;
  border-top: 1px solid var(--s5, #444);
}
.wx-action-btn {
  font-family: var(--mono);
  font-size: 11px;
  padding: 6px 8px;
  border-radius: 3px;
  border: 1px solid var(--s5);
  background: var(--s2);
  color: var(--t2);
  cursor: pointer;
  text-align: left;
  transition: background .1s, color .1s;
}
.wx-action-btn:hover {
  background: var(--s4);
  color: var(--t1);
}

/* ── Main chart area ────────────────────────────────────────────── */
.wx-chart-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
}
.wx-modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  z-index: 10;
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.15);
  color: var(--t2);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 4px;
  line-height: 1;
}
.wx-modal-close:hover { background: rgba(255,255,255,.12); color: var(--t1); }

/* ── Chart pair — base ─────────────────────────────────────────── */
/*
 * All charts form ONE visual unit that must fit entirely within the
 * viewport.  No clipping in any direction — if too large the whole
 * unit scales down uniformly.  The 24px gap is the "glue" spacing.
 *
 * Uses absolute positioning inside the relative .wx-chart-main so
 * it always gets a definite pixel size.  This is critical for grid
 * layouts (n>=4) where 1fr rows need a resolved container height
 * to divide space properly — without it, portrait images overflow
 * their grid tracks.
 */
.wx-chart-pair {
  position: absolute;
  inset: 10px;           /* same as the parent's padding */
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  justify-content: center;
}

/* n=1 — single chart, centred */
.wx-pair-single { flex-direction: column; }

/* n=2..3 portrait — side by side in a row.
   align-items:stretch gives wrappers a definite height
   so portrait images scale to fit vertically. */
.wx-pair-row {
  flex-direction: row;
  align-items: stretch;
}

/* n=2..3 landscape — stacked in a column.
   align-items:stretch gives wrappers a definite width
   so landscape images scale to fit horizontally. */
.wx-pair-col {
  flex-direction: column;
  align-items: stretch;
}

/* Surface pressure charts: no gap (images have built-in margins) */
.sp-no-gap { gap: 0; }

/* SigWx region chips — smaller to fit 16 regions */
#swRegionRow .wx-chip {
  font-size:11px;
  padding: 4px 6px;
}

/* n=4 — 2x2 grid */
.wx-pair-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 24px;
}

/* n=5 — 2-col grid, last item centred */
.wx-pair-grid-odd {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 24px;
}
.wx-pair-grid-odd .wx-chart-img-wrap:last-child {
  grid-column: 1 / -1;
}

/* ── Image wrapper — shared ───────────────────────────────────── */
.wx-chart-img-wrap {
  flex: 1;
  min-height: 0;
  min-width: 0;
  /* In grid contexts, fill the cell so the image has a definite
     height/width to scale within.  overflow:hidden prevents any
     residual content from breaking the track size. */
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.wx-chart-img-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.wx-chart-placeholder {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--t4);
  text-align: center;
  padding: 60px 20px;
}
.wx-chart-err {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--t4);
  padding: 40px 20px;
  text-align: center;
}


/* ================================================================
   VFR WAYPOINTS
   ================================================================ */

.wp-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.wp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px;
  max-height: calc(100vh - 260px);
  overflow-y: auto;
}

.wp-card {
  background: var(--s3);
  border: 1px solid var(--s5);
  border-radius: var(--r1);
  padding: 9px 10px 28px;
  position: relative;
  cursor: pointer;
  transition: border-color .12s, background .1s;
}
.wp-card:hover { background: var(--s4); border-color: var(--s6); }
.wp-card.in-route { border-color: var(--ac-mid); background: var(--ac-dim); }

.wp-id     { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--t1); letter-spacing: .03em; margin-bottom: 1px; }
.wp-name   { font-size: 11px; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; padding-right: 44px; }
.wp-coords { font-family: var(--mono); font-size: 11px; color: var(--t4); }
.wp-type-badge { position: absolute; top: 7px; right: 8px; }

.wp-card-actions {
  position: absolute;
  bottom: 6px;
  left: 10px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity .1s;
}
.wp-card:hover .wp-card-actions { opacity: 1; }

.wp-btn {
  font-family: var(--mono);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 2px;
  cursor: pointer;
  border: 1px solid;
  line-height: 1.4;
}
.wp-btn-route { background: var(--ac-dim); border-color: var(--ac-mid); color: var(--ac); }
.wp-btn-map   { background: rgba(76,175,125,.1); border-color: rgba(76,175,125,.22); color: var(--ok); }

.wp-count { font-family: var(--mono); font-size:11px; color: var(--t3); margin-left: auto; }


/* ================================================================
   ROUTE PLANNER
   ================================================================ */

.route-layout {
  display: flex;
  gap: 14px;
  flex: 1;
  min-height: 0;
}

.route-panel {
  width: 340px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding-right: 2px;
}

/* ── Route Panel Section (card with D2-style header) ── */
.rp-sec {
  background: var(--s2);
  border: 1px solid var(--s5);
  border-radius: var(--r2);
  overflow: hidden;
  margin-bottom: 8px;
}
.rp-sec-h {
  padding: 6px 12px;
  background: var(--s3);
  border-bottom: 1px solid var(--s5);
  display: flex;
  align-items: center;
  gap: 8px;
}
.rp-sec-t {
  font-size:11px;
  font-weight: 600;
  color: var(--t2);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.rp-sec-b {
  padding: 10px 12px;
}

/* ── Departure / Destination Banner (D4-style) ── */
.rp-dep-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--s2);
}
.rp-dep-box {
  flex: 1;
  text-align: center;
}
.rp-dep-lbl {
  font-size: 11px;
  color: var(--t4);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 2px;
}
.rp-dep-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--s5);
  color: var(--ac);
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
  max-width: 90px;
  outline: none;
  padding: 2px 0;
}
.rp-dep-input::placeholder {
  color: var(--t4);
  font-weight: 400;
  font-size: 13px;
}
.rp-dep-input:focus {
  border-color: var(--ac);
}
.rp-dep-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-top: 10px;
}

/* ── Alternate Row ── */
.rp-altn-row {
  display: flex;
  gap: 10px;
  padding: 6px 14px 10px;
}
.rp-altn-spacer {
  flex-shrink: 0;
  width: 16px;
}
.rp-altn-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.rp-altn-lbl {
  font-size: 11px;
  color: var(--t4);
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: center;
}
.rp-altn-input {
  background: var(--s1);
  border: 1px solid var(--s5);
  border-radius: var(--r1);
  color: var(--warn);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  width: 100%;
  height: 26px;
  outline: none;
  padding: 0 8px;
  text-align: center;
}
.rp-altn-input::placeholder {
  color: var(--t4);
  font-weight: 400;
  font-size: 11px;
}
.rp-altn-input:focus {
  border-color: var(--warn);
}

.route-map-wrap {
  position: relative;
  border-radius: var(--r2);
  overflow: hidden;
  border: 1px solid var(--s5);
  height: 100%;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ── Route Planner Tabs ──────────────────────────────── */
.rp-tab-bar {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--s2);
  border-bottom: 1px solid var(--s5);
  flex-shrink: 0;
  z-index: 10;
  padding: 0 6px;
}
.rp-tab {
  font-family: var(--mono);
  font-size:11px;
  font-weight: 500;
  color: var(--t3);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 7px 12px 6px 12px;
  cursor: pointer;
  transition: color .12s, border-color .12s;
  white-space: nowrap;
}
.rp-tab:hover { color: var(--t1); }
.rp-tab.active { color: var(--ac); border-bottom-color: var(--ac); }

.rp-terrain-toggle {
  font-family: var(--mono);
  font-size: 11px;
  padding: 3px 8px;
  margin-left: 6px;
  border-radius: var(--r1);
  white-space: nowrap;
}
.rp-terrain-toggle.active {
  background: rgba(76,175,80,.15);
  border-color: rgba(76,175,80,.35);
  color: #4caf50;
}

.rp-split-toggle {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: var(--r1);
  white-space: nowrap;
}
.rp-split-toggle.split-on {
  background: var(--ac-dim);
  border-color: var(--ac-mid);
  color: var(--ac);
}

.rp-tab-content {
  flex: 1;
  position: relative;
  overflow: hidden;
}

/* ── Route Save/Load split panel ─────────────────────── */
.rp-tab-content.rp-routes-open {
  display: flex;
  flex-direction: row;
}
.rp-tab-content.rp-routes-open .rp-pane-map {
  flex: 1;
  min-width: 0;
}
.rp-pane-routes {
  width: 260px;
  flex-shrink: 0;
  background: var(--s2);
  border: 1px solid var(--s5);
  border-radius: var(--r2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.rp-routes-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.rp-routes-head {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--s5);
  flex-shrink: 0;
}
.rp-routes-title {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--t1);
}
#rpRoutesLoadSection {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Single mode — map fills entire content area */
.rp-tab-single { display: flex; flex-direction: column; }
.rp-tab-single .rp-pane-map { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* Split mode */
.rp-tab-split {
  display: grid;
  grid-template-rows: 55% 45%;
}
.rp-tab-split .rp-pane { display: flex; flex-direction: column; position: relative; overflow: hidden; }
.rp-tab-split .rp-pane-wpts { display: grid; grid-template-columns: 1fr 2fr; border-top: 1px solid var(--s5); overflow: hidden; }

/* Embedded waypoint pane — 1/3 VFR routes, 2/3 waypoints */
.rp-pane-wpts {
  background: var(--s2);
  display: grid;
  grid-template-columns: 1fr 2fr;
  overflow: hidden;
}
.rp-ewp-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.rp-ewp-toolbar {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 6px 8px;
  border-bottom: 1px solid var(--s5);
  background: var(--s3);
  flex-shrink: 0;
}
.rp-ewp-toolbar .input { font-size:11px; height: 26px; }
.rp-ewp-toolbar .select { font-size:11px; height: 26px; padding: 0 6px; }
.rp-ewp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 5px;
  padding: 6px;
  overflow-y: auto;
  flex: 1;
  align-content: start;
}

/* ── VFR Routes Sidebar ──────────────────────────────── */
.vfr-routes-sidebar {
  background: var(--s1);
  border-right: 1px solid var(--s5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.vrs-head {
  font-family: var(--mono);
  font-size:11px;
  font-weight: 600;
  color: var(--t2);
  letter-spacing: 0.04em;
  padding: 8px 10px;
  border-bottom: 1px solid var(--s5);
  background: var(--s3);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.vrs-form {
  padding: 8px;
  border-bottom: 1px solid var(--s5);
  background: var(--s2);
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}
.vrs-input {
  font-size:11px;
  padding: 4px 6px;
  background: var(--s1);
  border: 1px solid var(--s5);
  border-radius: var(--r1);
  color: var(--t1);
}
.vrs-input:focus {
  border-color: var(--warn);
  outline: none;
}
.vrs-search-bar {
  padding: 4px 6px;
  border-bottom: 1px solid var(--s5);
  flex-shrink: 0;
}
.vrs-search {
  width: 100%;
  font-size:11px;
  height: 24px;
  padding: 0 6px;
}
.vrs-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vfr-route-card {
  background: var(--s3);
  border: 1px solid var(--s5);
  border-radius: var(--r2);
  padding: 8px 10px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.vfr-route-card:hover {
  border-color: #e8a030;
}
.vfr-route-card.vrc-previewing {
  border-color: #e8a030;
  background: rgba(232,160,48,0.08);
}
.vrc-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}
.vrc-code {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--warn);
}
.vrc-name {
  font-size:11px;
  color: var(--t2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.vrc-del {
  color: var(--t4);
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
  padding: 0 2px;
}
.vrc-del:hover { color: var(--danger); }
.vrc-wps {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--t3);
  margin-bottom: 4px;
  line-height: 1.4;
  word-break: break-word;
}
.vrc-notes {
  font-size: 11px;
  color: var(--t4);
  margin-bottom: 6px;
  font-style: italic;
}
.vrc-add {
  width: 100%;
  font-size: 11px;
}

/* VFR Routes button */
.rp-vfr-routes-btn {
  background: var(--s4);
  color: var(--warn);
  border: 1px solid var(--s5);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--r1);
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .12s, border-color .12s;
}
.rp-vfr-routes-btn:hover {
  background: var(--s5);
  border-color: var(--warn);
}
.rp-vfr-routes-btn.active {
  background: rgba(212,145,58,.15);
  color: var(--warn);
  border-color: var(--warn);
}

/* ── Flight Plan Pane ────────────────────────────────── */
.rp-pane-fpl {
  display: grid;
  grid-template-columns: 1fr 3fr;
  overflow: hidden;
}
.rp-tab-split .rp-pane-fpl {
  display: grid;
  grid-template-columns: 1fr 3fr;
  border-top: 1px solid var(--s5);
  overflow: hidden;
}
.rp-pane-navlog {
  overflow-y: auto;
}
.rp-tab-split .rp-pane-navlog {
  border-top: 1px solid var(--s5);
  overflow-y: auto;
}

/* Sidebar */
.fpl-sidebar {
  background: var(--s1);
  border-right: 1px solid var(--s5);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.fpl-sidebar::-webkit-scrollbar { width: 3px; }
.fpl-sidebar::-webkit-scrollbar-thumb { background: var(--s5); border-radius: 2px; }
.fpl-sb-section { padding: 8px; }
.fpl-sb-divider { height: 1px; background: var(--s5); }
.fpl-sb-head {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
}
.fpl-sb-list { display: flex; flex-direction: column; gap: 4px; }
.fpl-sb-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: var(--s2);
  border: 1px solid var(--s5);
  border-radius: var(--r1);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.fpl-sb-item:hover { background: var(--s3); }
.fpl-sb-item.active { border-color: var(--ac-mid); background: var(--ac-dim); }
.fpl-sb-icon { font-size: 13px; color: var(--t3); flex-shrink: 0; }
.fpl-sb-item.active .fpl-sb-icon { color: var(--ac); }
.fpl-sb-icon-tpl { font-size:11px; }
.fpl-sb-name { font-family: var(--mono); font-size:11px; color: var(--t1); font-weight: 500; }
.fpl-sb-item.active .fpl-sb-name { color: var(--ac); }
.fpl-sb-meta { font-family: var(--mono); font-size: 11px; color: var(--t4); }
.fpl-sb-add { font-size: 11px; }

/* Main form */
.fpl-main {
  background: var(--s2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fpl-main-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--s5);
  flex-shrink: 0;
}
.fpl-title {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--t1);
}
.fpl-ac-badge {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ac);
  background: var(--ac-dim);
  border: 1px solid var(--ac-mid);
  border-radius: var(--r1);
  padding: 1px 6px;
}
.fpl-tpl-label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--t4);
}
.fpl-main-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}
.fpl-main-body::-webkit-scrollbar { width: 3px; }
.fpl-main-body::-webkit-scrollbar-thumb { background: var(--s5); border-radius: 2px; }
.fpl-main-foot {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid var(--s5);
  flex-shrink: 0;
}

/* Form layout */
.fpl-row { display: flex; gap: 6px; }
.fpl-row + .fpl-row { margin-top: 6px; }
.fpl-field { flex: 1; min-width: 0; }
.fpl-field-xs { flex: 0 0 40px; }
.fpl-divider { height: 1px; background: var(--s5); margin: 8px 0; }
.fpl-input:disabled { opacity: .55; cursor: default; }

/* Pill selectors */
.fpl-pills {
  display: flex;
  gap: 0;
  border: 1px solid var(--s5);
  border-radius: var(--r1);
  overflow: hidden;
}
.fpl-pill {
  flex: 1;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 6px;
  color: var(--t3);
  background: var(--s3);
  cursor: pointer;
  border-right: 1px solid var(--s5);
  transition: background .12s, color .12s;
  user-select: none;
}
.fpl-pill:last-child { border-right: none; }
.fpl-pill.active { background: var(--ac-dim); color: var(--ac); }
.fpl-pill:hover:not(.active) { background: var(--s4); }

/* ── Elevation Profile (inside map pane) ─────────────── */
#rpMapContainer {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#rpMapUpper {
  flex: 1;
  overflow: hidden;
  position: relative; /* for layers panel absolute positioning */
  min-height: 0;
}
#rpProfileDragBar {
  height: 5px;
  background: var(--s4);
  cursor: ns-resize;
  user-select: none;
  flex-shrink: 0;
  transition: background .15s;
}
#rpProfileDragBar:hover { background: var(--ac-mid); }
#rpProfileCanvasWrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #1a1a1a;
}
#rpProfileToolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px;
  background: var(--s3);
  border-bottom: 1px solid var(--s5);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.prof-collapse-btn {
  cursor: pointer;
  font-size: 11px;
  color: var(--t3);
  padding: 2px 4px;
  border-radius: 3px;
  user-select: none;
  transition: color .12s, background .12s;
  flex-shrink: 0;
}
.prof-collapse-btn:hover {
  color: var(--t1);
  background: var(--s4);
}
.prof-lbl {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--t2);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.prof-ctrl {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--t3);
  display: flex;
  align-items: center;
  gap: 3px;
}
.prof-input {
  width: 48px !important;
  height: 22px !important;
  font-size:11px !important;
  padding: 0 4px !important;
  text-align: center;
}
.prof-status {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--t4);
  margin-left: auto;
}
#profCanvas {
  flex: 1;
  display: block;
  cursor: crosshair;
}

.route-string-box {
  background: var(--s2);
  border: 1px solid var(--s5);
  border-radius: var(--r1);
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--t2);
  line-height: 1.9;
  word-break: normal;
  overflow-wrap: break-word;
  min-height: 48px;
}
.rs-dep, .rs-dest { color: var(--t1); font-weight: 600; }
.rs-dct  { color: var(--t4); }
.rs-wpt  { color: var(--ac); font-weight: 500; }
.rs-wpt.rs-coord { color: #d4913a; }
.rs-vfr  { color: var(--warn); font-weight: 700; letter-spacing: 0.03em; }

.route-wpt-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 180px;
  overflow-y: auto;
  padding: 6px 8px;
}

.rw-item {
  display: grid;
  grid-template-columns: 18px 1fr auto auto 56px 16px;
  align-items: center;
  gap: 0 6px;
  padding: 5px 8px;
  border-radius: var(--r1);
  background: var(--s4);
  border: 1px solid var(--s5);
  cursor: grab;
  transition: opacity .15s, border-color .15s;
}
.rw-item.rw-dragging   { opacity: 0.35; }
.rw-item.rw-drag-over  { border-color: var(--ac); background: rgba(100,180,255,.06); }
.rw-num      { font-family: var(--mono); font-size: 11px; color: var(--t4); text-align: right; }
.rw-id       { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--ac); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rw-id.rw-coord { font-size: 11px; color: #d4913a; }
.rw-leg-trk  { font-family: var(--mono); font-size: 11px; color: var(--t3); text-align: right; white-space: nowrap; min-width: 36px; }
.rw-leg-dst  { font-family: var(--mono); font-size: 11px; color: var(--t3); text-align: right; white-space: nowrap; min-width: 48px; }
.rw-alt {
  font-family: var(--mono);
  font-size:11px;
  color: var(--warn);
  background: var(--s2);
  border: 1px solid var(--s5);
  border-radius: var(--r1);
  width: 56px;
  padding: 3px 5px;
  text-align: right;
  -moz-appearance: textfield;
}
.rw-alt::-webkit-inner-spin-button,
.rw-alt::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.rw-alt::placeholder { color: var(--t4); font-size: 11px; }
.rw-alt:focus { border-color: var(--warn); outline: none; }
.rw-remove {
  font-size:11px; font-weight: 700; cursor: pointer; text-align: center;
  background: rgba(192,87,74,.14); color: var(--danger); border: 1px solid rgba(192,87,74,.25);
  border-radius: 3px; width: 18px; height: 18px; line-height: 16px; flex-shrink: 0;
}
.rw-remove:hover { background: rgba(192,87,74,.32); }

/* FIR editor vertex handles */
.fir-vertex-handle { cursor: grab; }
.fir-vertex-handle:active { cursor: grabbing; }

.route-empty {
  font-family: var(--mono);
  font-size:11px;
  color: var(--t4);
  text-align: center;
  padding: 20px 0;
}

.add-wpt-row {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--s5);
}

/* ── Map Layers Panel ─────────────────────────────────── */
.map-layers-panel {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 999;
  background: rgba(24,24,27,.92);
  border: 1px solid var(--s5);
  border-radius: var(--r2);
  min-width: 170px;
  backdrop-filter: blur(6px);
}
.map-layers-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  font-family: var(--mono);
  font-size:11px;
  font-weight: 600;
  color: var(--t1);
  cursor: pointer;
  user-select: none;
}
.map-layers-icon { font-size: 11px; }
.map-layers-caret { margin-left: auto; font-size: 11px; color: var(--t3); }
.map-layers-body {
  padding: 0 10px 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.map-layers-divider {
  height: 1px;
  background: var(--s5);
  margin: 4px 0 2px 0;
}
.map-layers-sub {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 1px;
}
.map-layer-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--t2);
  cursor: pointer;
  padding: 2px 0;
}
.map-layer-toggle input[type="checkbox"] {
  width: 12px;
  height: 12px;
  margin: 0;
  accent-color: var(--ac);
  cursor: pointer;
}
.mlt-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.legend-item { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; color: var(--t2); padding: 1px 0; }
.legend-dot  { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.legend-dash { width: 14px; flex-shrink: 0; }

.saved-route-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r1);
  background: var(--s4);
  border: 1px solid var(--s5);
  cursor: pointer;
  transition: background .1s;
  margin-bottom: 4px;
}
.saved-route-item:last-child { margin-bottom: 0; }
.saved-route-item:hover { background: var(--s5); }
.sri-av    { width: 24px; height: 24px; border-radius: var(--r1); background: var(--ac-dim); border: 1px solid var(--ac-mid); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ac); flex-shrink: 0; }
.sri-route { font-size: 11px; font-weight: 500; color: var(--t1); flex: 1; }
.sri-meta  { font-family: var(--mono); font-size: 11px; color: var(--t3); }
.sri-date  { font-family: var(--mono); font-size: 11px; color: var(--t4); }


/* ================================================================
   BRIEFING BOARD
   ================================================================ */

.brief-toolbar { display: flex; align-items: center; gap: 8px; }
.brief-hint    { font-family: var(--mono); font-size:11px; color: var(--t3); }
.brief-grid    { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.brief-zone {
  background: var(--s3);
  border: 1px solid var(--s5);
  border-radius: var(--r2);
  overflow: hidden;
  min-height: 160px;
  transition: border-color .15s;
}
.brief-zone.drag-over { border-color: var(--ac-mid); background: var(--ac-dim); }

.bz-head  { padding: 9px 12px; border-bottom: 1px solid var(--s5); display: flex; align-items: center; gap: 6px; background: var(--s4); }
.bz-title { font-size: 11px; font-weight: 600; color: var(--t2); }
.bz-count { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--t4); }
.bz-body  { padding: 8px 10px; }

.bz-file {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border-radius: var(--r1);
  background: var(--s4);
  border: 1px solid var(--s5);
  margin-bottom: 4px;
  cursor: pointer;
  transition: background .1s;
}
.bz-file:hover { background: var(--s5); }
.bz-file-icon   { font-size: 11px; color: var(--t3); }
.bz-file-name   { font-family: var(--mono); font-size:11px; color: var(--t2); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bz-file-size   { font-family: var(--mono); font-size: 11px; color: var(--t4); }
.bz-file-remove { color: var(--t4); font-size:11px; margin-left: 4px; cursor: pointer; }
.bz-file-remove:hover { color: var(--danger); }

.bz-drop-area {
  border: 1px dashed var(--s5);
  border-radius: var(--r1);
  padding: 12px;
  text-align: center;
  cursor: pointer;
  transition: border-color .1s;
}
.bz-drop-area:hover { border-color: var(--ac-mid); }
.bz-drop-hint { font-family: var(--mono); font-size:11px; color: var(--t4); }

/* Briefing viewer (in-workspace preview) */
.brief-viewer {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 120px);
  border: 1px solid var(--s5);
  border-radius: var(--r2);
  overflow: hidden;
  background: var(--s1);
}

.brief-viewer-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--s3);
  border-bottom: 1px solid var(--s5);
  flex-shrink: 0;
}

.brief-viewer-name {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--t1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.brief-viewer-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--t3);
  white-space: nowrap;
  flex-shrink: 0;
}

.brief-viewer-body {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--s0);
}

.brief-viewer-body iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: #fff;
}

.brief-viewer-body img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Accent button for prominent toolbar actions */
.btn-accent {
  background: var(--ac);
  color: #fff;
  font-weight: 600;
  border: none;
}
.btn-accent:hover { background: #5a9fe0; }

/* ----------------------------------------------------------------
   ANNOTATION BAR  (single unified toolbar for image viewer)
   ---------------------------------------------------------------- */

.ann-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  background: var(--s3);
  border: 1px solid var(--s5);
  border-bottom: none;
  border-radius: var(--r2) var(--r2) 0 0;
  flex-shrink: 0;
}

/* When ann-bar is active, collapse the section gap and square viewer top corners */
.ann-bar + #briefContent {
  margin-top: -10px; /* cancel .section.active gap */
}
.ann-bar + #briefContent .brief-viewer {
  border-radius: 0 0 var(--r2) var(--r2);
  border-top: none;
}

.ann-bar .brief-viewer-name {
  flex: 0 0 auto;
  max-width: none;
  overflow: visible;
  text-overflow: unset;
}

.ann-colors {
  display: flex;
  gap: 4px;
  align-items: center;
}

.ann-swatch {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  border: 2px solid var(--s5);
  cursor: pointer;
  transition: border-color .12s, transform .1s;
  padding: 0;
  outline: none;
}
.ann-swatch:hover { transform: scale(1.15); border-color: var(--t3); }
.ann-swatch-active {
  border-color: var(--t1);
  box-shadow: 0 0 0 1px var(--s0);
  transform: scale(1.15);
}

.ann-sep {
  width: 1px;
  height: 18px;
  background: var(--s5);
  margin: 0 2px;
  flex-shrink: 0;
}

/* ----------------------------------------------------------------
   ANNOTATION CANVAS CONTAINER
   ---------------------------------------------------------------- */

.ann-container {
  position: relative;
  display: inline-block;
  max-width: 100%;
  max-height: 100%;
}

.ann-container img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.ann-container canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}


/* ================================================================
   MASS & BALANCE
   ================================================================ */

.mb-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.mb-table { width: 100%; border-collapse: collapse; }
.mb-table th {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .1em;
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--s5);
  font-weight: 400;
}
.mb-table th.th-r { text-align: right; }
.mb-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--s5);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--t2);
}
.mb-table td.td-r { text-align: right; }
.mb-table tr:last-child td { border-bottom: none; }
.mb-table .mb-total td { color: var(--t1); font-weight: 600; background: var(--s4); }
.mb-table .mb-total .td-cg { color: var(--ac); }

.mb-input {
  background: var(--s2);
  border: 1px solid var(--s5);
  border-radius: 3px;
  padding: 3px 7px;
  text-align: right;
  width: 72px;
  color: var(--t1);
  font-family: var(--mono);
  font-size: 11px;
}
.mb-input:focus { border-color: var(--ac-mid); outline: none; }

.mb-limit-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid var(--s5);
}
.mb-limit-row:last-child { border-bottom: none; }
.mb-limit-label { font-family: var(--mono); font-size: 11px; color: var(--t3); text-transform: uppercase; letter-spacing: .1em; }
.mb-limit-val   { font-family: var(--mono); font-size: 11px; color: var(--t2); }


/* ================================================================
   NOTES
   ================================================================ */

.notes-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  height: calc(100vh - 120px);
  border: 1px solid var(--s5);
  border-radius: var(--r2);
  overflow: hidden;
}

.notes-list {
  border-right: 1px solid var(--s5);
  background: var(--s2);
  display: flex;
  flex-direction: column;
}

.notes-list-head {
  padding: 10px 12px;
  border-bottom: 1px solid var(--s5);
  display: flex;
  align-items: center;
  gap: 8px;
}

.notes-list-items { flex: 1; overflow-y: auto; }

.note-item {
  padding: 10px 12px;
  border-bottom: 1px solid var(--s5);
  cursor: pointer;
  transition: background .1s;
}
.note-item:hover { background: var(--s3); }
.note-item.active { background: var(--ac-dim); border-left: 2px solid var(--ac); }
.note-item-title   { font-size: 11px; font-weight: 500; color: var(--t1); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-item-preview { font-family: var(--mono); font-size: 11px; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-item-date    { font-family: var(--mono); font-size: 11px; color: var(--t4); margin-top: 3px; }

.note-editor {
  display: flex;
  flex-direction: column;
  background: var(--s1);
}

.note-editor-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--s5);
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--s2);
}

.note-title-input {
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--t1);
  flex: 1;
}
.note-title-input::placeholder { color: var(--t4); }

.note-toolbar {
  padding: 6px 14px;
  border-bottom: 1px solid var(--s5);
  display: flex;
  gap: 4px;
  background: var(--s2);
}

.note-tb-btn {
  padding: 3px 8px;
  border-radius: var(--r1);
  border: 1px solid transparent;
  background: transparent;
  color: var(--t3);
  font-size: 11px;
  cursor: pointer;
  font-family: var(--sans);
  transition: all .1s;
}
.note-tb-btn:hover { background: var(--s4); color: var(--t1); border-color: var(--s5); }

.note-textarea {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 16px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--t2);
  line-height: 1.8;
  resize: none;
}


/* ================================================================
   SETTINGS
   ================================================================ */

.settings-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
  border: 1px solid var(--s5);
  border-radius: var(--r2);
  overflow: hidden;
  max-width: 900px;
}

.settings-nav {
  background: var(--s2);
  border-right: 1px solid var(--s5);
}

.settings-nav-item {
  padding: 9px 14px;
  font-size: 11px;
  color: var(--t2);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: all .1s;
}
.settings-nav-item:hover { background: var(--s3); color: var(--t1); }
.settings-nav-item.active { color: var(--ac); background: var(--ac-dim); border-left-color: var(--ac); }

.settings-panel {
  padding: 20px;
  background: var(--s1);
  overflow-y: auto;
}

.settings-group { margin-bottom: 22px; }

.settings-group-title {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--s5);
}

.setting-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--s5);
}
.setting-row:last-child { border-bottom: none; }
.setting-label { font-size: 11px; color: var(--t1); flex: 1; }
.setting-sub   { font-family: var(--mono); font-size: 11px; color: var(--t3); margin-top: 2px; }


/* ================================================================
   MAP (Leaflet overrides)
   ================================================================ */

.leaflet-container { background: var(--s0); }
.leaflet-tile-pane img { filter: brightness(.85); }

.leaflet-dark-popup .leaflet-popup-content-wrapper {
  background: var(--s3);
  border: 1px solid var(--s5);
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
  padding: 0;
  border-radius: 6px;
}
.leaflet-dark-popup .leaflet-popup-content { margin: 0; }
.leaflet-dark-popup .leaflet-popup-tip { background: var(--s3); }
.leaflet-dark-popup .leaflet-popup-close-button { color: var(--t3); }
/* Runway number labels on map */
.rwy-num-label {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
.rwy-num-label span {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 4px rgba(0,0,0,.9), 0 1px 2px rgba(0,0,0,.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.leaflet-control-zoom a { background: var(--s2) !important; color: var(--t2) !important; border-color: var(--s5) !important; }
.leaflet-control-zoom a:hover { background: var(--s3) !important; color: var(--t1) !important; }


/* ================================================================
   SETOWNERSHIP PAGE
   ================================================================ */

.ownership-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--s0);
  padding: 20px;
}

.ownership-card {
  background: var(--s3);
  border: 1px solid var(--s5);
  border-radius: var(--r3);
  padding: 40px;
  max-width: 400px;
  width: 100%;
  text-align: center;
}

.ownership-card-logo {
  width: 48px;
  height: 48px;
  margin: 0 auto 20px;
  background: var(--ac-dim);
  border: 1px solid var(--ac-mid);
  border-radius: var(--r2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ac);
}

.ownership-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--t1);
  margin-bottom: 6px;
}

.ownership-sub {
  font-family: var(--mono);
  font-size:11px;
  color: var(--t3);
  margin-bottom: 28px;
}

.ownership-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 28px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
}

.ownership-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ownership-dot.admin { background: var(--ok); }
.ownership-dot.guest { background: var(--t4); }

.ownership-toggle-btn {
  width: 100%;
  padding: 10px 20px;
  border-radius: var(--r1);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  border: 1px solid;
}

.ownership-toggle-btn.enable {
  background: var(--ac-dim);
  border-color: var(--ac-mid);
  color: var(--ac);
}
.ownership-toggle-btn.enable:hover { background: var(--ac-mid); }

.ownership-toggle-btn.revoke {
  background: rgba(192,87,74,.1);
  border-color: rgba(192,87,74,.25);
  color: var(--danger);
}
.ownership-toggle-btn.revoke:hover { background: rgba(192,87,74,.2); }

.ownership-back {
  display: inline-block;
  margin-top: 20px;
  font-family: var(--mono);
  font-size:11px;
  color: var(--t3);
}
.ownership-back:hover { color: var(--ac); }

/* ════════════════════════════════════════════════════════════════════
   DATA MODALS  (Advisories / SIGMET / SYNOP)
   ════════════════════════════════════════════════════════════════════ */

/* Toolbar separator + data buttons */
.wx-toolbar-sep {
  display: inline-block;
  width: 1px;
  height: 24px;
  background: var(--s5, #444);
  margin: 0 12px;
  vertical-align: middle;
}
.wx-briefing-btn {
  margin-left: auto;
}

/* Data modal container (non-sidebar, centered scroll) */
.wx-data-modal {
  position: relative;
  width: 90%;
  max-width: 800px;
  height: 64vh;
  margin: 4vh auto auto auto;
  background: var(--s2, #2b2b2b);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}
.wx-data-modal-wide {
  max-width: 960px;
  height: 85vh;
}

.wx-data-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--t1, #e0e0e0);
  padding: 14px 18px 10px;
  margin: 0;
  border-bottom: 1px solid var(--s5, #444);
  flex-shrink: 0;
}

.wx-data-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 18px;
}

.wx-data-footer {
  display: flex;
  gap: 8px;
  padding: 10px 18px;
  border-top: 1px solid var(--s5, #444);
  flex-shrink: 0;
}

.wx-data-loading {
  text-align: center;
  color: var(--t3, #888);
  padding: 40px 0;
  font-size: 13px;
}

.wx-data-err {
  text-align: center;
  color: #ff4444;
  padding: 40px 0;
  font-size: 13px;
}

.wx-data-none {
  color: var(--t3, #888);
  font-size: 12px;
  font-style: italic;
  padding: 8px 0;
}

/* Section (collapsible) */
.wx-data-section { margin-bottom: 12px; }

.wx-data-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--t2, #ccc);
  cursor: pointer;
  padding: 6px 0;
  margin: 0;
  user-select: none;
}
.wx-data-section-title:hover { color: var(--ac, #6ea8fe); }

.wx-data-section.collapsed .wx-data-section-content { display: none; }
.wx-data-section.collapsed .wx-data-section-title::first-letter { /* arrow rotates via text */ }

/* Data block */
.wx-data-block {
  background: var(--s1, #1e1e1e);
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.wx-data-block-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--ac, #6ea8fe);
  margin-bottom: 6px;
}

.wx-data-pre {
  margin: 0;
  font-family: var(--mono, 'Fira Code', monospace);
  font-size: 11.5px;
  color: var(--t1, #d6d6d6);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}

/* Selectable block (SIGMET click-to-select) */
.wx-data-selectable {
  cursor: pointer;
  border: 1px solid transparent;
  transition: border-color .15s;
}
.wx-data-selectable:hover {
  border-color: var(--s5, #555);
}
.wx-data-block-selected {
  border-color: var(--ac, #6ea8fe) !important;
  background: rgba(110, 168, 254, .08);
}

/* SIGMET toolbar inside modal */
.wx-sig-toolbar {
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--s5, #444);
  flex-shrink: 0;
  flex-wrap: wrap;
  overflow: visible;
  position: relative;
  z-index: 10;
}
.wx-sig-toolbar .wx-saved-trigger { position: relative; }
.wx-sig-toolbar .wx-saved-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 100;
  min-width: 360px;
  display: none;
}
.wx-sig-toolbar .wx-saved-popover.open { display: flex; }
.wx-sig-toolbar .wx-tag-wrap {
  flex: 1;
  min-width: 150px;
  min-height: 32px;
  padding: 5px 10px;
  max-width: none;
}
.wx-sig-toolbar .wx-tag-wrap input {
  text-transform: uppercase;
  padding: 2px 0;
  font-size: 11px;
}
.wx-sig-toolbar .wx-saved-btn {
  white-space: nowrap;
  height: auto;
  padding: 0 14px;
  min-height: 34px;
}
.wx-sig-toolbar > .btn {
  display: flex;
  align-items: center;
  min-height: 34px;
}
.wx-sig-toolbar .wx-saved-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.wx-sig-toolbar .wx-saved-chips .wx-fav-chip {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 6px 10px;
  font-size: 11.5px;
  min-height: 30px;
  flex: none;
  width: 100%;
  box-sizing: border-box;
}
.wx-sig-toolbar .wx-saved-chips .wx-fav-chip .wx-fav-x {
  margin-left: auto;
  flex-shrink: 0;
}
.wx-sig-toolbar .wx-saved-add {
  gap: 4px;
}
.wx-sig-toolbar .wx-saved-add input {
  font-size: 11px;
  padding: 5px 8px;
  text-transform: uppercase;
}
.wx-sig-toolbar .wx-saved-add input:last-of-type {
  text-transform: none;
}


/* ================================================================
   GAMET / SIGMET  CARDS
   ================================================================ */

.sig-card {
  margin-bottom: 10px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--s2, #1f1f23);
}
.sig-card-header {
  padding: 8px 12px;
  background: var(--s3, #26262b);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sig-card-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size:11px;
  font-weight: 700;
  color: #000;
  letter-spacing: 0.5px;
}
.sig-card-hdr-text {
  font-size: 11px;
  color: var(--t2, #a0a0a8);
  font-family: var(--mono, 'Fira Code', monospace);
}
.sig-card-body {
  margin: 0;
  padding: 10px 12px;
  font-family: var(--mono, 'Fira Code', monospace);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--t1, #d6d6dd);
  white-space: pre-wrap;
  word-break: break-word;
}
.sig-secn {
  padding: 6px 0;
}
.sig-secn-title {
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--t2, #a0a0a8);
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--s3, #26262b);
  margin-bottom: 4px;
}
.sig-field {
  display: flex;
  padding: 4px 12px;
  gap: 8px;
  align-items: baseline;
}
.sig-field:hover {
  background: var(--s3, #26262b);
}
.sig-field-label {
  min-width: 130px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.sig-field-value {
  font-size: 11.5px;
  font-family: var(--mono, 'Fira Code', monospace);
  color: var(--t1, #d6d6dd);
  white-space: pre-wrap;
  line-height: 1.4;
}

/* WIND/T table */
.sig-wt-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono, 'Fira Code', monospace);
  font-size: 10.5px;
  margin: 4px 0;
}
.sig-wt-table th {
  padding: 4px 6px;
  text-align: center;
  font-weight: 600;
  color: var(--t2, #a0a0a8);
  border-bottom: 1px solid var(--s4, #2e2e33);
  font-size:11px;
}
.sig-wt-table td {
  padding: 3px 6px;
  text-align: center;
  color: var(--t1, #d6d6dd);
  border-bottom: 1px solid var(--s2, #1f1f23);
}
.sig-wt-alt {
  text-align: left !important;
  font-weight: 600;
  color: var(--t2, #a0a0a8) !important;
  white-space: nowrap;
}
.sig-wt-fzlvl td {
  color: #44bbff !important;
  font-weight: 600;
  border-top: 1px solid var(--s4, #2e2e33);
}
.sig-wt-continuation {
  margin-top: 8px;
  border-top: 1px dashed var(--s4, #2e2e33);
  padding-top: 2px;
}


/* ================================================================
   WEATHER REFERENCE GUIDE MODAL
   ================================================================ */

.wx-ref-modal {
  max-width: 720px;
  height: 78vh;
}
.wx-ref-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.wx-ref-section {
  /* each section */
}
.wx-ref-section-title {
  font-family: var(--mono, 'Fira Code', monospace);
  font-size: 11px;
  font-weight: 700;
  color: var(--ac, #6ea8fe);
  letter-spacing: .6px;
  text-transform: uppercase;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--s4, #2e2e33);
  margin: 0 0 8px 0;
}
.wx-ref-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 16px;
}
.wx-ref-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 8px;
  border-radius: 3px;
}
.wx-ref-row:hover {
  background: var(--s3, #26262b);
}
.wx-ref-long-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 3px;
}
.wx-ref-long-row:hover {
  background: var(--s3, #26262b);
}
.wx-ref-code {
  font-family: var(--mono, 'Fira Code', monospace);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--t1, #d6d6dd);
  min-width: 42px;
  flex-shrink: 0;
  white-space: nowrap;
}
.wx-ref-long-row .wx-ref-code {
  min-width: 60px;
}
.wx-ref-desc {
  font-size: 11px;
  color: var(--t2, #a0a0a8);
  line-height: 1.4;
}
.wx-ref-long-row .wx-ref-desc {
  font-size: 11px;
  line-height: 1.5;
}


/* ================================================================
   SYNOP  DECODED  CARDS
   ================================================================ */

.syn-card {
  margin-bottom: 10px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--s2, #1f1f23);
}
.syn-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--s3, #26262b);
}
.syn-station-id {
  font-family: var(--mono, 'Fira Code', monospace);
  font-size: 13px;
  font-weight: 700;
  color: var(--t1, #d6d6dd);
}
.syn-station-name {
  font-size: 12px;
  color: var(--t2, #a0a0a8);
  flex: 1;
}
.syn-time {
  font-family: var(--mono, 'Fira Code', monospace);
  font-size: 11px;
  color: var(--t3, #6e6e78);
}
.syn-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 2px;
  padding: 6px 0;
}
.syn-field {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
}
.syn-field:hover {
  background: var(--s3, #26262b);
}
.syn-field-icon {
  font-size: 13px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}
.syn-field-label {
  font-size:11px;
  color: var(--t3, #6e6e78);
  min-width: 40px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.syn-field-value {
  font-family: var(--mono, 'Fira Code', monospace);
  font-size: 12px;
  color: var(--t1, #d6d6dd);
  font-weight: 500;
}
.syn-raw-details {
  border-top: 1px solid var(--s3, #26262b);
}
.syn-raw-toggle {
  padding: 5px 12px;
  font-size:11px;
  color: var(--t3, #6e6e78);
  cursor: pointer;
  user-select: none;
}
.syn-raw-toggle:hover {
  color: var(--t2, #a0a0a8);
}
.syn-raw-code {
  margin: 0;
  padding: 6px 12px 8px;
  font-family: var(--mono, 'Fira Code', monospace);
  font-size: 10.5px;
  color: var(--t3, #6e6e78);
  white-space: pre-wrap;
  word-break: break-all;
}


/* ── Cruise alt input (no spinner) ──────────────────── */
.prof-cruise {
  width: 56px !important;
  -moz-appearance: textfield;
}
.prof-cruise::-webkit-inner-spin-button,
.prof-cruise::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Alt input (smaller variant) ────────────────────── */
.input-sm { font-size:11px; height: 26px; padding: 0 6px; }

/* ── Waypoint clear button ──────────────────────────── */
.rw-clear-btn {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--t3);
  padding: 2px 8px;
  border: 1px solid var(--s5);
  border-radius: var(--r1);
  background: var(--s3);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .03em;
  transition: color .12s, border-color .12s, background .12s;
}
.rw-clear-btn:hover {
  color: var(--danger);
  border-color: var(--danger);
  background: rgba(200,60,60,.08);
}

/* ── VFR Form waypoint cards ────────────────────────── */
.vrs-wpt-cards {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 180px;
  overflow-y: auto;
}
.vrs-wpt-card {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  background: var(--s3);
  border: 1px solid var(--s5);
  border-radius: var(--r1);
}
.vrs-wc-code {
  font-family: var(--mono);
  font-size:11px;
  font-weight: 600;
  color: var(--ac);
  flex: 1;
}
.vrs-wc-alt {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--warn);
  background: var(--s1);
  border: 1px solid var(--s5);
  border-radius: var(--r1);
  width: 40px;
  padding: 1px 3px;
  text-align: right;
  flex-shrink: 0;
  -moz-appearance: textfield;
}
.vrs-wc-alt::-webkit-inner-spin-button,
.vrs-wc-alt::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.vrs-wc-alt:focus { border-color: var(--warn); outline: none; }
.vrs-wc-del {
  color: var(--t4);
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
}
.vrs-wc-del:hover { color: var(--danger); }
.vrs-hint {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--t4);
  padding: 2px 0;
  text-align: center;
}

/* ── VFR button on wp cards ──────────────────────────── */
.wp-btn-vfr {
  background: rgba(212,145,58,.12);
  border: 1px solid rgba(212,145,58,.3);
  color: var(--warn);
}
.wp-btn-vfr:hover {
  background: rgba(212,145,58,.2);
  border-color: rgba(212,145,58,.5);
}

/* ══════════════════════════════════════════════════════════════════
   Data Manager — Aircraft Detail View
   ══════════════════════════════════════════════════════════════════ */

/* ── Aircraft card list ─────────────────────────────────────────── */
.dm-ac-card {
  background: var(--s2);
  border: 1px solid var(--s5);
  border-radius: var(--r2);
  padding: 14px 18px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  display: flex;
  align-items: center;
  gap: 16px;
}
.dm-ac-card:hover {
  border-color: var(--ac);
  background: var(--s3);
}
.dm-ac-card-reg {
  font-size: 16px;
  font-weight: 700;
  color: var(--t1);
  letter-spacing: .4px;
}
.dm-ac-card-type {
  font-size: 13px;
  color: var(--t2);
  margin-top: 2px;
}
.dm-ac-card-info {
  font-size: 11px;
  color: var(--t4);
  margin-top: 6px;
  font-family: var(--mono);
}

/* ── Detail view top bar ────────────────────────────────────────── */
.dm-detail-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--s1);
  border: 1px solid var(--s5);
  border-radius: var(--r2);
  margin-bottom: 10px;
}
.dm-detail-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--t1);
  flex: 1;
}

/* ── Horizontal sub-tabs ────────────────────────────────────────── */
.dm-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--s5);
  margin-bottom: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.dm-tab {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--t3);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  user-select: none;
}
.dm-tab:hover {
  color: var(--t1);
}
.dm-tab-active {
  color: var(--ac);
  border-bottom-color: var(--ac);
  font-weight: 600;
}

/* ── Tab content area ───────────────────────────────────────────── */
.dm-tab-content {
  min-height: 200px;
}

/* ── Editable data tables ───────────────────────────────────────── */
.dm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 6px;
}
.dm-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--t3);
  padding: 5px 6px;
  border-bottom: 1px solid var(--s5);
  white-space: nowrap;
}
.dm-table td {
  padding: 3px 4px;
  vertical-align: middle;
}
.dm-table tbody tr {
  border-bottom: 1px solid var(--s6, rgba(255,255,255,.04));
}
.dm-table tbody tr:hover {
  background: var(--s3);
}
.dm-table-input {
  width: 100%;
  padding: 4px 6px !important;
  font-size: 12px !important;
  font-family: var(--mono);
  background: var(--s1) !important;
  border: 1px solid var(--s5) !important;
  border-radius: 3px !important;
  color: var(--t1) !important;
  box-sizing: border-box;
}
.dm-table-input:focus {
  border-color: var(--ac) !important;
  outline: none;
}
/* number inputs — hide spinners for a cleaner look */
.dm-table-input[type="number"] {
  -moz-appearance: textfield;
}
.dm-table-input[type="number"]::-webkit-inner-spin-button,
.dm-table-input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ── Add-row button ─────────────────────────────────────────────── */
.dm-add-row {
  font-size: 11px;
  color: var(--ac);
  border-color: var(--ac);
  opacity: .8;
}
.dm-add-row:hover {
  opacity: 1;
  background: rgba(110,168,254,.08);
}

/* ── 2-column grid (V-speeds etc.) ──────────────────────────────── */
.dm-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
}

/* ── Checklist items ────────────────────────────────────────────── */
.dm-cl-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  border-bottom: 1px solid var(--s6, rgba(255,255,255,.04));
}
.dm-cl-num {
  font-size: 11px;
  font-weight: 600;
  color: var(--t4);
  min-width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.dm-cl-input {
  flex: 1;
  font-size: 12px !important;
  padding: 4px 6px !important;
}

/* ── Document items ─────────────────────────────────────────────── */
.dm-doc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--s1);
  border-radius: var(--r1);
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--t2);
}
.dm-doc-item span:first-child {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--t3);
  min-width: 60px;
}
.dm-doc-item a {
  color: var(--ac);
  text-decoration: none;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dm-doc-item a:hover { text-decoration: underline; }

/* ── Photo boxes ────────────────────────────────────────────────── */
.dm-photo-box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px;
  background: var(--s1);
  border: 1px solid var(--s5);
  border-radius: var(--r2);
  min-width: 140px;
}
.dm-photo-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.dm-photo-preview {
  max-width: 180px;
  max-height: 120px;
  border-radius: var(--r1);
  object-fit: cover;
}
.dm-photo-empty {
  width: 120px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--s0);
  border-radius: var(--r1);
  font-size: 11px;
  color: var(--t4);
  font-style: italic;
}

/* ── Airport card list ──────────────────────────────────────────── */
.dm-apt-card {
  background: var(--s2);
  border: 1px solid var(--s5);
  border-radius: var(--r2);
  padding: 12px 16px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dm-apt-card:hover {
  border-color: var(--ac);
  background: var(--s3);
}
.dm-apt-card-icao {
  font-size: 15px;
  font-weight: 700;
  color: var(--t1);
  letter-spacing: .5px;
  font-family: var(--mono);
}
.dm-apt-card-name {
  font-size: 12px;
  color: var(--t2);
  margin-top: 3px;
}
.dm-apt-card-info {
  font-size:11px;
  color: var(--t4);
  margin-top: 6px;
  font-family: var(--mono);
}

/* ── Waypoints toolbar ──────────────────────────────────────────── */
.dm-wp-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 0;
}
.dm-wp-drop {
  border: 1px dashed var(--s5);
  border-radius: var(--r2);
  padding: 14px 20px;
  text-align: center;
  margin: 8px 0;
  transition: border-color .15s, background .15s;
  cursor: default;
}
.dm-wp-drop-active {
  border-color: var(--ac);
  background: rgba(110,168,254,.06);
}