/* ═══════════════════════════════════════════════════════════════════
   Private Aviation Nav — Aviation Color Standard
   Per Applied Avionics / MIL-PRF-22885 chromaticity spec:
   Green  = normal/safe      #00dd00
   Red    = warning/danger   #cc1111
   Amber  = caution/advisory #ffb300
   Blue   = in-use/selected  #1a7fff
   White  = labels/data      #ffffff
   Cyan   = status/FMS data  #00cccc
   Background: opaque black per sunlight-readable display standard
═══════════════════════════════════════════════════════════════════ */

.pan-app {
  /* ── Aviation color palette ── */
  --av-green:  #00dd00;   /* Normal ops, safe, airborne */
  --av-red:    #cc1111;   /* Warning, emergency, alert */
  --av-amber:  #ffb300;   /* Caution, advisory */
  --av-blue:   #1a7fff;   /* Selected, in-use, IFR */
  --av-white:  #ffffff;   /* Labels, data readouts */
  --av-cyan:   #00cccc;   /* Status, climb, FMS */
  --av-magenta:#cc44cc;   /* GPS/FMS source indicator */

  /* ── Tinted versions for backgrounds ── */
  --av-green-dim:  rgba(0,221,0,0.12);
  --av-red-dim:    rgba(204,17,17,0.12);
  --av-amber-dim:  rgba(255,179,0,0.12);
  --av-blue-dim:   rgba(26,127,255,0.12);
  --av-cyan-dim:   rgba(0,204,204,0.12);

  /* ── Border/stroke versions ── */
  --av-green-bdr:  rgba(0,221,0,0.35);
  --av-amber-bdr:  rgba(255,179,0,0.35);
  --av-red-bdr:    rgba(204,17,17,0.35);
  --av-blue-bdr:   rgba(26,127,255,0.35);
  --av-cyan-bdr:   rgba(0,204,204,0.35);

  /* ── Display background — opaque black per MIL spec ── */
  --bg:   #000000;
  --bg2:  #080808;
  --bg3:  #0f0f0f;
  --bg4:  #141414;
  --bdr:  1px solid rgba(255,255,255,0.12);

  font-family: 'Courier New', Courier, monospace;
  background: var(--bg);
  color: var(--av-white);
  width: 100%;
  min-height: 820px;
  position: relative;
  overflow: hidden;
}



/* ─── Header ──────────────────────────────────────────────────────────────── */
.pan-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 14px; background: var(--bg2);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  flex-shrink: 0; gap: 8px; flex-wrap: wrap;
}
.pan-header-left   { display: flex; align-items: center; gap: 10px; flex: 1; }
.pan-header-centre { flex: 1; text-align: center; }
.pan-header-right  { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* Logo — WHITE per aviation label standard */
.pan-logo    { font-size: 13px; font-weight: bold; letter-spacing: 2px; color: var(--av-white); }

/* HUD dot — GREEN = system normal */
.pan-hud-dot { font-size: 10px; color: var(--av-green); animation: pan-blink 1.2s infinite; }
.pan-hud-txt { font-size: 10px; color: rgba(255,255,255,0.5); letter-spacing: 1px; }

/* Clock — CYAN = status/data display */
.pan-clock   { font-size: 13px; letter-spacing: 2px; color: var(--av-cyan); }

.pan-hdr-btn {
  background: transparent; border: 1px solid rgba(255,255,255,0.25);
  color: var(--av-white); font-family: inherit; font-size: 10px;
  letter-spacing: 1px; padding: 4px 10px; cursor: pointer; transition: background .15s;
}
.pan-hdr-btn:hover    { background: rgba(255,255,255,0.08); }
/* Full-screen button — AMBER = advisory/action */
.pan-hdr-btn--fs      { border-color: var(--av-amber); color: var(--av-amber); }
.pan-hdr-btn--fs:hover{ background: var(--av-amber-dim); }

/* ─── Tabs ────────────────────────────────────────────────────────────────── */
.pan-tabs {
  display: flex; border-bottom: 1px solid rgba(255,255,255,0.12);
  background: var(--bg2); flex-shrink: 0;
}
.pan-tab {
  flex: 1; background: transparent; border: none;
  border-right: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.45); font-family: inherit;
  font-size: 11px; letter-spacing: 1.5px; padding: 8px 4px;
  cursor: pointer; transition: all .15s;
}
.pan-tab:last-child { border-right: none; }
.pan-tab:hover      { background: rgba(255,255,255,0.05); color: var(--av-white); }
/* Active tab — GREEN = selected/normal */
.pan-tab--on        { background: var(--av-green-dim); color: var(--av-green);
                      box-shadow: inset 0 -2px 0 var(--av-green); font-weight: bold; }

/* ─── Panes ───────────────────────────────────────────────────────────────── */
.pan-pane     { display: none; flex-direction: column; }
.pan-pane--on { display: flex; }

/* ─── Shared controls ─────────────────────────────────────────────────────── */
.pan-tb {
  background: transparent; border: 1px solid rgba(255,255,255,0.25);
  color: var(--av-white); font-family: inherit; font-size: 10px;
  letter-spacing: 1px; padding: 4px 8px; cursor: pointer; transition: all .12s;
  white-space: nowrap;
}
.pan-tb:hover      { background: rgba(255,255,255,0.08); }
.pan-tb--on        { background: var(--av-green-dim); border-color: var(--av-green); color: var(--av-green); }
/* GREEN button = normal action */
.pan-tb--green     { border-color: var(--av-green); color: var(--av-green); }
.pan-tb--green:hover { background: var(--av-green-dim); }
/* AMBER button = advisory action */
.pan-tb--amber     { border-color: var(--av-amber); color: var(--av-amber); }
.pan-tb--amber:hover { background: var(--av-amber-dim); }
/* RED button = UAP / warning action */
.pan-tb--uap       { border-color: var(--av-red); color: var(--av-red); }
.pan-tb--uap:hover { background: var(--av-red-dim); }

.pan-input {
  background: var(--bg3); border: 1px solid rgba(255,255,255,0.2);
  color: var(--av-white); font-family: inherit; font-size: 10px;
  padding: 4px 7px; outline: none; width: 100%; box-sizing: border-box;
}
.pan-input:focus  { border-color: var(--av-blue); box-shadow: 0 0 6px var(--av-blue-dim); }
.pan-input--sm    { width: 60px; }
.pan-select       { cursor: pointer; }
.pan-textarea     { resize: vertical; min-height: 70px; }

.pan-slider {
  -webkit-appearance: none; width: 100%; height: 4px;
  background: rgba(255,255,255,0.15); outline: none; border-radius: 2px; cursor: pointer;
}
.pan-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px;
  border-radius: 50%; background: var(--av-cyan);
  box-shadow: 0 0 6px var(--av-cyan);
}

.pan-btn-row  { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.pan-chk-lbl  { display: flex; align-items: center; gap: 5px; font-size: 10px; cursor: pointer; margin-top: 4px; }
.pan-chk-lbl input { accent-color: var(--av-green); }

/* Labels — WHITE */
.pan-sb-label { font-size: 9px; letter-spacing: 2px; color: rgba(255,255,255,0.5);
                border-bottom: 1px solid rgba(255,255,255,0.08);
                padding-bottom: 3px; margin-bottom: 6px; }
.pan-muted    { color: rgba(255,255,255,0.4); font-size: 10px; }

/* ─── MAP tab ─────────────────────────────────────────────────────────────── */

/* Top control toolbar — compact single row */
.pan-map-toolbar {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--bg2);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  flex-shrink: 0;
  flex-wrap: wrap;
  padding: 4px 6px;
  gap: 8px;
}

.pan-toolbar-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding-right: 8px;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.pan-toolbar-group:last-child { border-right: none; padding-right: 0; }
.pan-toolbar-group--search { flex: 1; min-width: 160px; }
.pan-toolbar-group--filter { min-width: 0; }
.pan-toolbar-group--stat   { flex-direction: column; align-items: flex-start; gap: 1px; }

.pan-toolbar-label {
  font-size: 9px; letter-spacing: 1px;
  color: rgba(255,255,255,0.35); white-space: nowrap; flex-shrink: 0;
}
.pan-toolbar-val {
  font-size: 10px; color: var(--av-cyan); width: 36px; flex-shrink: 0;
}
.pan-toolbar-input {
  flex: 1; min-width: 0; font-size: 10px; padding: 3px 6px;
}
.pan-toolbar-input--sm { max-width: 90px; }
.pan-toolbar-slider { width: 80px; flex-shrink: 0; }

.pan-tb--icon {
  padding: 3px 6px; font-size: 12px; border-color: transparent;
  min-width: 28px; text-align: center;
}

/* Location — CYAN = GPS data */
.pan-loc-name   { font-size: 11px; font-weight: bold; color: var(--av-cyan); white-space: nowrap; }
.pan-loc-coords { font-size: 9px; color: rgba(255,255,255,0.5); white-space: nowrap; }
.pan-pick-hint  { font-size: 9px; color: var(--av-amber); white-space: nowrap; }

/* Map layer buttons */
.pan-mltb {
  background: transparent; border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.5); font-family: inherit; font-size: 9px;
  padding: 3px 7px; cursor: pointer; transition: all .12s; white-space: nowrap;
}
.pan-mltb:hover, .pan-mltb--on {
  background: var(--av-blue-dim); color: var(--av-blue); border-color: var(--av-blue);
}

/* Status — CYAN */
.pan-stat             { font-size: 10px; color: var(--av-cyan); white-space: nowrap; }
.pan-elevation-inline { font-size: 9px; color: var(--av-amber); white-space: nowrap; }

/* Checkbox labels in toolbar */
.pan-chk-lbl--sm { font-size: 9px; white-space: nowrap; }

/* Full-width map */
.pan-map-full {
  flex: 1;
  min-height: 540px;
  width: 100%;
}

/* Leaflet overrides — satellite layer shows natural, others get mild filter */
#pan-leaflet-map.pan-map-full .leaflet-container { background: #1a1a2e; }
.pan-map-full .leaflet-control-zoom a {
  background: rgba(0,0,0,0.75) !important;
  color: var(--av-white) !important;
  border-color: rgba(255,255,255,0.2) !important;
  backdrop-filter: blur(4px);
}
.pan-map-full .leaflet-control-zoom { border: 1px solid rgba(255,255,255,0.2) !important; }

/* Satellite tiles — full natural color, no filter */

/* Non-satellite tiles — slight darkening */


/* Aircraft list */
.pan-aclist {
  max-height: 160px; overflow-y: auto; border-top: var(--bdr);
  display: flex; flex-wrap: wrap; gap: 4px; padding: 6px;
  background: var(--bg2); flex-shrink: 0;
}
.pan-accard {
  background: var(--bg3); border: 1px solid rgba(255,255,255,0.1);
  padding: 4px 7px; cursor: pointer; min-width: 130px; transition: border-color .12s;
}
.pan-accard:hover, .pan-accard--selected { border-color: var(--av-green); background: var(--av-green-dim); }
/* Callsign — WHITE */
.pan-ac-call        { font-size: 11px; font-weight: bold; color: var(--av-white);
                      display: flex; align-items: center; gap: 4px; }
.pan-ac-call--ground{ color: rgba(255,255,255,0.35); }
.pan-ac-row         { display: flex; justify-content: space-between; font-size: 9px; color: rgba(255,255,255,0.4); }
/* Data values — CYAN */
.pan-ac-val         { color: var(--av-cyan); }
.pan-ac-badge       { font-size: 8px; padding: 1px 4px; border-radius: 2px; }
/* AIRBORNE = GREEN, GROUND = dim white */
.pan-ac-badge--air  { background: var(--av-green-dim); color: var(--av-green); }
.pan-ac-badge--ground{ background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.4); }
.pan-ac-empty       { font-size: 10px; color: rgba(255,255,255,0.35); padding: 8px; }

/* ─── NAV STATION tab ────────────────────────────────────────────────────── */
.pan-nav-wrap {
  display: flex; flex: 1; flex-direction: column; overflow: hidden;
}
.pan-instruments {
  flex: 1; padding: 20px; overflow-y: auto; background: #000;
}
.pan-inst-title {
  font-size: 13px; letter-spacing: 4px; color: rgba(255,255,255,0.5);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 8px; margin-bottom: 20px; text-align: center;
}
.pan-inst-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; max-width: 1100px; margin: 0 auto;
}
.pan-inst-cell {
  display: flex; flex-direction: column; align-items: center;
  background: #050505; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; padding: 14px 10px 10px;
  box-shadow: 0 0 30px rgba(0,0,0,0.8), inset 0 0 20px rgba(0,0,0,0.5);
}

/* Gauges — large, per aviation color standard */
.pan-gauge      { width: 100%; max-width: 340px; }
.pan-gauge--sm  { max-width: 220px; }

/* SVG text elements use aviation colors */
.pan-gauge-label{ font-family: 'Courier New', monospace; font-size: 11px;
                  fill: rgba(255,255,255,0.8); letter-spacing: 2px; font-weight: bold; }
.pan-gauge-unit { font-family: 'Courier New', monospace; font-size: 10px;
                  fill: rgba(255,255,255,0.4); }
/* Digital readout values use aviation colors (set per-gauge in SVG) */
.pan-gauge-val  { font-family: 'Courier New', monospace; font-size: 18px;
                  fill: var(--av-white); font-weight: bold; }

/* ATI */
.pan-ati-wrap       { display: flex; flex-direction: column; align-items: center; width: 100%; }
.pan-ati-canvas     {
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.2);
  box-shadow: 0 0 20px rgba(0,0,0,0.6);
  width: 300px; height: 300px;
}
.pan-inst-label-top { font-size: 13px; letter-spacing: 2px; color: var(--av-white);
                      margin-bottom: 6px; font-weight: bold; }
.pan-inst-vals      { font-size: 14px; color: rgba(255,255,255,0.7); display: flex; gap: 20px; margin-top: 8px; }

/* NAV computer */
.pan-nav-computer   { display: none; } /* hidden — instruments take full width */

/* ─── WEATHER tab ─────────────────────────────────────────────────────────── */
.pan-wx-wrap     { padding: 10px; flex: 1; overflow-y: auto; }
.pan-wx-toolbar  { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pan-wx-cols     { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pan-wx-col      { display: flex; flex-direction: column; gap: 6px; }
.pan-metar-list, .pan-taf-list, .pan-sigmet-list, .pan-tfr-list { display: flex; flex-direction: column; gap: 8px; }

/* METAR card */
.pan-metar-card  { background: var(--bg2); border: 1px solid rgba(255,255,255,0.1);
                   padding: 10px; font-size: 13px; line-height: 1.8; }
/* Station ID — CYAN = data source */
.pan-metar-id    { font-size: 16px; font-weight: bold; color: var(--av-cyan); }
.pan-metar-raw   { color: rgba(255,255,255,0.4); word-break: break-all; font-size: 11px; margin-top: 5px; }

/* Flight category colors — aviation standard */
.pan-fltcat      { display: inline-block; padding: 2px 7px; font-size: 11px; border-radius: 2px; margin-left: 6px; }
.pan-fltcat--VFR { background: var(--av-green-dim); color: var(--av-green); }      /* GREEN = safe */
.pan-fltcat--MVFR{ background: var(--av-blue-dim);  color: var(--av-blue); }       /* BLUE = advisory */
.pan-fltcat--IFR { background: var(--av-red-dim);   color: var(--av-red); }        /* RED = warning */
.pan-fltcat--LIFR{ background: rgba(204,44,204,0.15); color: var(--av-magenta); }  /* MAGENTA = severe */

/* TAF card */
.pan-taf-card    { background: var(--bg2); border: 1px solid rgba(255,255,255,0.1);
                   padding: 10px; font-size: 13px; line-height: 1.8; }
.pan-taf-card b  { font-size: 15px; color: var(--av-cyan); }
.pan-taf-card > div { font-size: 12px; color: rgba(255,255,255,0.6); word-break: break-word; }

/* SIGMET — RED = warning */
.pan-sigmet-card { padding: 8px 10px; font-size: 13px; line-height: 1.7;
                   border-left: 3px solid var(--av-red); background: var(--av-red-dim); }
.pan-sigmet-card b { font-size: 14px; color: var(--av-red); }

/* AIRMET — AMBER = caution */
.pan-airmet-card { padding: 8px 10px; font-size: 13px; line-height: 1.7;
                   border-left: 3px solid var(--av-amber); background: var(--av-amber-dim); }
.pan-airmet-card b { font-size: 14px; color: var(--av-amber); }

/* TFR — BLUE = restricted/selected airspace */
.pan-tfr-card    { padding: 8px 10px; font-size: 13px; line-height: 1.7;
                   border-left: 3px solid var(--av-blue); background: var(--av-blue-dim); }
.pan-tfr-card b  { font-size: 14px; color: var(--av-blue); }

/* ─── UAP Modal ───────────────────────────────────────────────────────────── */
.pan-modal {
  position: absolute; inset: 0; z-index: 8000;
  background: rgba(0,0,0,0.8);
  display: flex; align-items: center; justify-content: center;
}
.pan-modal-box   { background: var(--bg2); border: 1px solid var(--av-red);
                   min-width: 400px; max-width: 560px; width: 90%;
                   box-shadow: 0 0 40px var(--av-red-dim); }
.pan-modal-hdr   { display: flex; justify-content: space-between; align-items: center;
                   padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.1); }
/* UAP modal title — RED = alert */
.pan-modal-title { font-size: 12px; letter-spacing: 2px; font-weight: bold; color: var(--av-red); }
.pan-modal-close { background: none; border: none; color: rgba(255,255,255,0.4); font-size: 16px; cursor: pointer; }
.pan-modal-close:hover { color: var(--av-red); }
.pan-modal-body  { padding: 14px; display: flex; flex-direction: column; gap: 8px;
                   max-height: 60vh; overflow-y: auto; }
.pan-modal-footer{ padding: 10px 14px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; gap: 8px; }
.pan-form-row    { display: flex; flex-direction: column; gap: 3px; }
.pan-form-row label { font-size: 9px; color: rgba(255,255,255,0.5); letter-spacing: 1px; }
/* Context block — AMBER = advisory data */
.pan-uap-ctx     { font-size: 9px; color: var(--av-amber); background: var(--bg3);
                   padding: 6px; border: 1px solid var(--av-amber-bdr); line-height: 1.6; }

/* ─── Scrollbar ───────────────────────────────────────────────────────────── */
.pan-app *::-webkit-scrollbar       { width: 5px; height: 5px; }
.pan-app *::-webkit-scrollbar-track { background: var(--bg); }
.pan-app *::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
.pan-app *::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }

/* ─── Keyframes ───────────────────────────────────────────────────────────── */
@keyframes pan-blink { 0%,100%{opacity:1} 50%{opacity:0.2} }