/* Flight planner pages (flightplanner.html, plan.html, pilot-dashboard.html).
   Builds on style.css tokens. Link as flight.css?v=N and bump N on changes. */

/* the `hidden` attribute must win over any display rule below (fields, toolbars, buttons) */
[hidden] { display: none !important; }

:root { --go: #3ccf6e; --marginal: #ffb020; --nogo: #ff3b3b; }
:root[data-theme="light"] { --go: #1a8a3c; --marginal: #b86a00; --nogo: #d00000; }

.panel {
  position: relative; background: var(--surface); border: 1px solid var(--surface-border);
  border-radius: 12px; padding: 28px; margin-bottom: 22px;
}
.panel-title {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--red-ink); margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid var(--surface-border);
}
.panel-title .sub { color: var(--text-dim); font-weight: 400; letter-spacing: 0.06em; text-transform: none; }

/* steps */
.fp-steps { display: flex; gap: 8px; margin-bottom: 26px; flex-wrap: wrap; }
.fp-step {
  flex: 1; min-width: 140px; padding: 9px 14px; border-radius: 999px; text-align: center;
  font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim); border: 1px solid var(--surface-border);
}
.fp-step.active { color: var(--text); border-color: var(--red); }
.fp-step.done { color: var(--yellow-ink); border-color: var(--surface-border); }
.fp-section { display: none; }
.fp-section.active { display: block; }

/* form */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
.field label .opt { font-weight: 400; letter-spacing: 0.04em; text-transform: none; }
.field input, .field select, .field textarea, .fp-input {
  width: 100%; font-family: 'Oswald', sans-serif; font-size: 1rem; font-weight: 300; color: var(--text);
  background: var(--bg); border: 1px solid var(--surface-border); border-radius: 8px; padding: 11px 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input, .field select { height: 48px; }
.field textarea, textarea.fp-input { min-height: 110px; resize: vertical; line-height: 1.6; }
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat;
}
:root:not([data-theme="light"]) .field input[type="date"] { color-scheme: dark; }
.field input:focus, .field select:focus, .field textarea:focus, .fp-input:focus {
  outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.22);
}
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--red-ink); }
.err { color: var(--red-ink); font-size: 0.92rem; min-height: 1.3em; margin-top: 10px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.btn.ghost { background: none; color: var(--text); border: 1px solid var(--surface-border); }
.btn.ghost:hover { border-color: var(--text-dim); box-shadow: none; background: none; }
.btn.small { padding: 8px 16px; font-size: 0.85rem; }
.fine { font-size: 0.85rem; color: var(--text-dim); line-height: 1.6; margin-top: 16px; }

/* verdict + weather */
.verdict { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 10px; border: 1px solid; margin-bottom: 16px; }
.verdict .badge { font-size: 1.1rem; font-weight: 700; letter-spacing: 0.08em; white-space: nowrap; }
.verdict .why { color: var(--text-dim); line-height: 1.5; }
.verdict.go       { border-color: var(--go); }       .verdict.go .badge { color: var(--go); }
.verdict.marginal { border-color: var(--marginal); } .verdict.marginal .badge { color: var(--marginal); }
.verdict.no-go    { border-color: var(--nogo); }     .verdict.no-go .badge { color: var(--nogo); }
.wx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 16px; }
.wx { background: var(--bg); border: 1px solid var(--surface-border); border-radius: 10px; padding: 14px; text-align: center; }
.wx .k { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; }
.wx .v { font-size: 1.4rem; font-weight: 700; }
.wx .u { font-size: 0.75rem; color: var(--text-dim); margin-left: 2px; }
.ai-box { background: var(--bg); border: 1px solid var(--surface-border); border-left: 3px solid var(--yellow-ink); border-radius: 8px; padding: 14px 18px; line-height: 1.7; white-space: pre-wrap; }
.ai-box .tag-ai { display: block; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yellow-ink); margin-bottom: 6px; }

/* links */
.link-box { display: flex; gap: 10px; align-items: center; background: var(--bg); border: 1px solid var(--surface-border); border-radius: 8px; padding: 10px 12px; margin: 8px 0 16px; }
.link-box code { flex: 1; font-size: 0.85rem; word-break: break-all; color: var(--text); }

/* status */
.status { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; border: 1px solid; }
.status.pending   { color: var(--marginal); border-color: var(--marginal); }
.status.reviewing { color: #5aa9ff; border-color: #5aa9ff; }
.status.confirmed { color: var(--go); border-color: var(--go); }
.status.cancelled { color: var(--nogo); border-color: var(--nogo); }

/* detail grid */
.details { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.details .k { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 4px; }
.details .v { font-size: 1.02rem; white-space: pre-wrap; word-break: break-word; }
.details .wide { grid-column: 1 / -1; }

/* map */
#map { height: 460px; width: 100%; border-radius: 10px; border: 1px solid var(--surface-border); z-index: 0; }
.map-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.map-tool {
  font-family: 'Oswald', sans-serif; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  background: var(--bg); color: var(--text); border: 1px solid var(--surface-border);
}
.map-tool:hover { border-color: var(--text-dim); }
.map-tool.active { border-color: var(--red); color: var(--red-ink); }
.map-hint { font-size: 0.88rem; color: var(--text-dim); min-height: 1.3em; margin-bottom: 8px; }
.legend, .airspace { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: 0.85rem; color: var(--text-dim); align-items: center; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.legend i.line { width: 20px; height: 3px; border-radius: 2px; vertical-align: 3px; }
.airspace label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.airspace b { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); }
.laanc-label { font-size: 11px; font-weight: 700; color: #1a5c1a; text-shadow: 0 0 3px #fff, 0 0 3px #fff; white-space: nowrap; }
.leaflet-popup-content { font-family: 'Oswald', sans-serif; }

/* messages */
.msgs { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; max-height: 520px; overflow-y: auto; }
.msg { max-width: 85%; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--surface-border); background: var(--bg); }
.msg.pilot  { align-self: flex-start; border-color: var(--red); }
.msg.client { align-self: flex-end; }
.msg .meta { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 5px; }
.msg .text { line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.no-msgs { color: var(--text-dim); text-align: center; padding: 16px 0; }
.reply { display: flex; gap: 10px; align-items: flex-end; }
.reply textarea { min-height: 70px; }

.spinner { display: inline-block; width: 15px; height: 15px; border: 2px solid var(--surface-border); border-top-color: var(--red); border-radius: 50%; animation: fpSpin 0.7s linear infinite; vertical-align: -2px; margin-right: 6px; }
@keyframes fpSpin { to { transform: rotate(360deg); } }
.center-note { text-align: center; padding: 60px 20px; color: var(--text-dim); }

/* dashboard */
.dash-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.dash-list { display: flex; flex-direction: column; gap: 10px; }
.dash-item {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: center; text-align: left; width: 100%;
  background: var(--surface); border: 1px solid var(--surface-border); border-radius: 10px; padding: 14px 18px;
  color: var(--text); font-family: 'Oswald', sans-serif; cursor: pointer;
}
.dash-item:hover, .dash-item.sel { border-color: var(--red); }
.dash-item .t { font-size: 1.05rem; font-weight: 700; }
.dash-item .s { font-size: 0.9rem; color: var(--text-dim); }
.dash-cols { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 22px; align-items: start; }

@media (max-width: 800px) { .dash-cols { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .panel { padding: 20px; }
  .form-grid { grid-template-columns: 1fr; }
  .fp-step { min-width: 0; font-size: 0.7rem; padding: 8px 8px; }
  #map { height: 340px; }
  .msg { max-width: 100%; }
  .reply { flex-direction: column; align-items: stretch; }
}