:root{font-family:system-ui,Segoe UI,Arial,sans-serif;color:#dceefa;background:#08131f}*{box-sizing:border-box}html,body,.app{margin:0;height:100%;min-height:100%;} .app{display:flex;flex-direction:column}header{padding:14px 20px;border-bottom:1px solid #28495c;display:flex;justify-content:space-between;gap:10px;align-items:center;background:#0b1b29}.brand{display:flex;flex-direction:column;letter-spacing:.14em}.brand span{color:#53c5ed}.brand small{font-size:10px;color:#789bad;margin-top:3px}.system{display:flex;gap:16px;align-items:center;font:12px monospace}.pill{background:#184a65;border:1px solid #348fbd;padding:5px 9px;border-radius:4px}.warn{color:#ffc17a}nav{display:flex;gap:4px;padding:7px 10px;background:#0a1825;overflow-x:auto}button{background:#13293a;color:#a9d4e8;border:1px solid #315368;padding:10px 14px;border-radius:4px;cursor:pointer;font-weight:700;font-size:11px;letter-spacing:.04em}button:hover,button.active{border-color:#54c3ed;color:white;background:#164c67}main{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 300px;min-height:0;gap:8px;padding:8px}.map-pane{position:relative;min-height:350px;background:#091f2d;border:1px solid #315368;border-radius:5px;overflow:hidden}#map{position:absolute;inset:0;background:#102634}.map-toolbar{position:absolute;z-index:600;left:10px;bottom:12px;display:flex;gap:6px}.overlay{position:absolute;z-index:500;top:10px;right:10px;max-width:240px;padding:12px;background:#0a1b2be8;border:1px solid #315368;border-radius:5px;font-size:12px;pointer-events:none}.overlay p{color:#8faebf;line-height:1.45}aside{overflow:auto;display:flex;flex-direction:column;gap:8px}aside section{background:#101f2c;border:1px solid #263e50;border-radius:5px;padding:14px}h2{font-size:11px;color:#6ec7ed;letter-spacing:.22em;margin:0 0 12px}aside p{font-size:13px}.muted{color:#88a5b6}footer{padding:9px 12px;border-top:1px solid #28495c;display:flex;justify-content:space-between;gap:8px;color:#7d9dae;font-size:11px}@media(max-width:800px){main{grid-template-columns:1fr;overflow:auto}aside{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.map-pane{height:60vh}footer{flex-direction:column}}@media(max-width:500px){aside{grid-template-columns:1fr}.system{gap:6px;font-size:10px}button{padding:8px}header{padding:10px}}

/* MIZ inspector: uses the existing sidebar, without modifying Leaflet layout. */
aside label[for="mizFile"] {
  display: block;
  margin-bottom: 8px;
  color: #a9d4e8;
  font-size: 12px;
}

#mizFile {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  font-size: 12px;
  color: #dceefa;
}

#mizFile::file-selector-button {
  margin-right: 8px;
  padding: 7px 9px;
  border: 1px solid #315368;
  border-radius: 4px;
  background: #13293a;
  color: #a9d4e8;
  cursor: pointer;
}

.miz-summary {
  margin: 12px 0;
  padding: 10px;
  overflow-wrap: anywhere;
  border: 1px solid #315368;
  border-radius: 4px;
  background: #0a1b29;
}

.miz-summary p {
  margin: 8px 0;
  line-height: 1.5;
}

.miz-summary strong {
  color: #6ec7ed;
}

/* Planned DCS mission layers: never styled like live radar traffic. */
.atc-airfield-icon {
  background: transparent;
  border: 0;
}

.atc-airfield-symbol {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid #d4bf71;
  border-radius: 50%;
  background: #102634;
  color: #f3d783;
  font-size: 16px;
}

.atc-airfield-label {
  display: inline-block;
  max-width: 100px;
  padding: 3px 5px;
  overflow: hidden;
  border: 1px solid #4f6576;
  border-radius: 3px;
  background: #0a1b29ed;
  color: #f0deaa;
  font-size: 11px;
  text-overflow: ellipsis;
  vertical-align: top;
  white-space: nowrap;
}

/* Leaflet defaults to a white tooltip. Use one consistent dark style
 * for all mission objects, including airport references and waypoints. */
.map-pane .leaflet-tooltip,
.map-pane .leaflet-tooltip.atc-route-tooltip {
  background: #0b2131;
  color: #e8f6ff;
  border: 1px solid #4da7cb;
  border-radius: 6px;
  box-shadow: 0 6px 20px #0009;
  padding: 9px 12px;
  max-width: min(340px, 78vw);
  white-space: normal;
  overflow-wrap: anywhere;
  font: 12px/1.6 system-ui, Segoe UI, Arial, sans-serif;
  opacity: 1;
}
.map-pane .leaflet-tooltip strong {
  color: #78d0f5;
}
.map-pane .leaflet-tooltip em {
  color: #f1cd80;
  font-style: normal;
  font-size: 11px;
}
.map-pane .leaflet-tooltip-top::before {
  border-top-color: #4da7cb;
}
.map-pane .leaflet-tooltip-bottom::before {
  border-bottom-color: #4da7cb;
}
.map-pane .leaflet-tooltip-left::before {
  border-left-color: #4da7cb;
}
.map-pane .leaflet-tooltip-right::before {
  border-right-color: #4da7cb;
}

#selectedAirfield {
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  .map-toolbar {
    flex-wrap: wrap;
    max-width: calc(100% - 20px);
  }
}

/* Mission selection is a compact operational panel, not a raw dump. */
.miz-brief {
  margin: 10px 0;
  color: #b9e3f4;
  font-size: 12px;
  line-height: 1.5;
}

.mission-details {
  margin-top: 10px;
  border-top: 1px solid #315368;
  padding-top: 10px;
}

.mission-details summary {
  color: #79ccf3;
  cursor: pointer;
  font-size: 12px;
}

.mission-layer-options {
  display: grid;
  gap: 9px;
  margin-bottom: 14px;
}

.mission-layer-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  color: #c4e4f3;
  cursor: pointer;
}

.mission-layer-options input {
  accent-color: #38b9ed;
}

#mizGroupSelect {
  width: 100%;
  padding: 9px;
  border: 1px solid #315368;
  border-radius: 4px;
  color: #dceefa;
  background: #112a3c;
  font-size: 12px;
}

.flight-card {
  margin-top: 12px;
  padding: 11px;
  border: 1px solid #315368;
  border-radius: 5px;
  background: #0b2030;
  color: #dceefa;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.flight-card > strong {
  display: block;
  margin-bottom: 9px;
  color: #74cef3;
}

.flight-card p {
  font-size: 12px;
  margin: 5px 0;
}

.flight-card ul {
  padding-left: 19px;
  margin: 7px 0 10px;
  line-height: 1.5;
}

.flight-card small {
  color: #9bb7c5;
}

/* Saved airfield catalogue: independent of imported mission details. */
#catalogTheatre {
  width: 100%;
  margin: 8px 0;
  padding: 9px;
  border: 1px solid #315368;
  border-radius: 4px;
  background: #112a3c;
  color: #dceefa;
}
.catalog-list {
  display: grid;
  gap: 6px;
  max-height: 50vh;
  overflow-y: auto;
  padding-right: 3px;
}
.catalog-airport {
  display: grid;
  gap: 4px;
  width: 100%;
  text-align: left;
  letter-spacing: normal;
  font-weight: normal;
}
.catalog-airport strong {
  color: #e8f6ff;
  font-size: 12px;
}
.catalog-airport small {
  color: #9db9c9;
  font-size: 11px;
}