/* static/styles.css */
:root{
  --bg: #0f1218;
  --panel: #141924;
  --panel-2: #101520;
  --fg: #eee;
  --muted: #9aa3af;
  --accent: #4b8bff;
  --danger: #d7191c;
  --ok: #1a9641;
  --hold: #fdae61;
  --border: #232b3a;
}

.topbar .brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  letter-spacing: .5px;
  font-size: 18px;
}
.brand-logo {
  height: 26px;
  width: auto;
  display: block;
}


* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; }

.topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 16px; background: #0b0f17; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.topbar .brand { font-weight: 700; letter-spacing: .5px; }
.topbar .actions { display: flex; gap: 8px; }

.page { max-width: 1150px; margin: 16px auto; padding: 0 12px; }
.page.narrow { max-width: 980px; }

.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 16px; overflow: hidden; }
.panel-head { display:flex; align-items:center; justify-content:space-between; padding: 10px 12px; background: var(--panel-2); border-bottom: 1px solid var(--border); }
.panel-head h2 { margin: 0; font-size: 16px; }
.filters { display:flex; gap: 8px; align-items:center; }
.filters label { display:flex; gap:6px; align-items:center; color: var(--muted); }
.filters input, .filters select { background: #0c111b; color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
th { text-align:left; color: var(--muted); font-weight: 600; background: #10151f; position: sticky; top: 53px; z-index: 5; }
td.actions { white-space: nowrap; }

.map { height: 360px; }
.map.tall { height: 520px; }
@media (max-width: 900px){
  .map { height: 300px; }
  .filters { flex-wrap: wrap; }
}

button, .ghost, .primary, a.button {
  border: 1px solid var(--border); background: #0e1320; color: var(--fg); padding: 8px 10px; border-radius: 8px; cursor: pointer;
}
button:disabled { opacity: .5; cursor: not-allowed; }
button.primary, a.button.primary { background: var(--accent); border-color: #2b6fff; color: white; }
button.ghost, .ghost { background: transparent; }

button.purple, a.button.purple {
  background: rebeccapurple;      /* or your preferred purple */
  border-color: rebeccapurple;
  color: white;
}
button.purple:hover, a.button.purple:hover {
  background: #5b21b6;            /* darker purple on hover */
  border-color: #5b21b6;
}
a.btn{ text-decoration:none; display:inline-flex; align-items:center; justify-content:center }


a.button {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* routes page uses .btn, not .button */
a.btn{
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 12px 0;
  text-align: center;
  font-size: 13px;
  background: var(--bg, #f7f7fb); /* match page background */
  color: var(--muted, #666);
  border-top: 1px solid var(--line, #e6e8ef);
}


.btn-purple {
  background: rebeccapurple;   /* pick your purple */
  border-color: rebeccapurple;
  color: #fff;
}
.btn-purple:hover {
  background: #5b21b6;        /* darker purple on hover */
  border-color: #5b21b6;
}
a.btn {
  text-decoration: none;       /* removes underline */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


.pill { padding: 3px 7px; border-radius: 999px; background:#1e2636; color:#ddd; font-weight:600; }
.pill.GO { background: var(--ok); color:#0b1a0b; }
.pill.HOLD { background: var(--hold); color:#1b1306; }
.pill.NO_GO { background: var(--danger); color:#1b0706; }

dialog {
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--fg);
  border-radius: 10px;
  padding: 12px;
  width: 680px;
  max-width: calc(100vw - 24px);
}
dialog::backdrop { background: rgba(0,0,0,.5); }
dialog h3 { margin: 0 0 8px 0; }
dialog .hint { color: var(--muted); margin: 8px 0 0; }
.dialog-actions { display:flex; justify-content:flex-end; gap: 8px; padding-top: 8px; }

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.grid label { display:flex; flex-direction:column; gap:6px; color: var(--muted); }
.grid input[type="text"], .grid input:not([type]) , .grid input[type="datetime-local"], .grid input[type="file"], .grid input[type="password"] {
  background: #0c111b; color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px;
}
.code { background: #0b0f17; padding: 10px; border-top: 1px solid var(--border); overflow: auto; }
.xsection-wrap {
    position: relative;
    width: 100%;
    min-height: 360px;
    height: 360px;
    background: #111827;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 12px;
    overflow: hidden;
}

#rd_xsection_svg {
    display: block;
    width: 100%;
    height: 100%;
    background: #071225;
}
.xsection-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin: 8px 0 12px 0;
    color: #b8c1d9;
    font-size: 12px;
}

.xsection-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.legend-line {
    display: inline-block;
    width: 26px;
    height: 0;
    border-top: 4px solid #67e8f9;
    border-radius: 999px;
}

.legend-patch {
    display: inline-block;
    width: 20px;
    height: 12px;
    border-radius: 4px;
}

.legend-terrain {
    background: rgba(128, 92, 55, .56);
    border: 1px solid rgba(0, 0, 0, .90);
}

.legend-scale {
    display: inline-block;
    width: 108px;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        #4ade80 0%,
        #a3e635 24%,
        #facc15 48%,
        #fb923c 72%,
        #ef4444 100%
    );
    border: 1px solid rgba(255,255,255,.18);
}

.legend-cloudbase {
    display: inline-block;
    width: 26px;
    height: 0;
    border-top: 3px solid rgba(255,255,255,.98);
    border-radius: 999px;
}

.xsection-title-note {
    color: #94a3b8;
    font-size: 12px;
    max-width: 520px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xsection-tooltip {
    position: absolute;
    z-index: 40;
    pointer-events: none;
    display: none;
    min-width: 200px;
    max-width: 360px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(8, 15, 27, 0.96);
    border: 1px solid rgba(148, 163, 184, 0.28);
    color: #e5eefc;
    font-size: 12px;
    line-height: 1.35;
    box-shadow: 0 10px 30px rgba(0,0,0,.42);
    white-space: pre-line;
}

.xsection-wind-cell {
    transition: fill-opacity 120ms ease, filter 120ms ease;
}

.xsection-wind-cell:hover {
    fill-opacity: .84 !important;
    filter: brightness(1.06) saturate(1.04);
}
.xsection-wind-band-segment {
    shape-rendering: geometricPrecision;
}

.xsection-wind-sky-underlay {
    fill: transparent;
    pointer-events: none;
}

.xsection-wind-band-segment {
    shape-rendering: geometricPrecision;
}

.xsection-under-cloud-fill {
    fill: rgba(93, 119, 34, 0.13);
    pointer-events: none;
}

.xsection-cloud-haze {
    fill: rgba(255, 255, 255, 0.075);
    stroke: rgba(255, 255, 255, 0.055);
    stroke-width: 0.8;
    pointer-events: none;
}

.xsection-cloud-puff {
    fill: rgba(255, 255, 255, 0.18);
    stroke: rgba(255, 255, 255, 0.10);
    stroke-width: 0.55;
    pointer-events: none;
}

.xsection-cloud-puff-soft {
    fill: rgba(255, 255, 255, 0.105);
    stroke: rgba(255, 255, 255, 0.065);
    stroke-width: 0.45;
    pointer-events: none;
}
.xsection-wind-band {
    shape-rendering: geometricPrecision;
    pointer-events: none;
}
.xsection-layer-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.xsection-layer-btn {
    appearance: none;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.045);
    color: rgba(230,240,255,.82);
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 12px;
    line-height: 1.2;
    cursor: pointer;
}

.xsection-layer-btn:hover {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.25);
}

.xsection-layer-btn.is-active {
    background: rgba(103,232,249,.15);
    border-color: rgba(103,232,249,.55);
    color: #e8fbff;
}

.xsection-atmosphere-curtain {
    pointer-events: none;
}

.xsection-atmosphere-cell {
    shape-rendering: geometricPrecision;
}

.xsection-precip-symbols {
    pointer-events: none;
}
.legend-scale-humidity {
    background: linear-gradient(
        90deg,
        #b45309 0%,
        #d6b45c 35%,
        #7dd3fc 70%,
        #38bdf8 100%
    );
}

.legend-scale-visibility {
    background: linear-gradient(
        90deg,
        rgba(248,250,252,.95) 0%,
        rgba(203,213,225,.75) 35%,
        rgba(125,211,252,.45) 70%,
        rgba(125,211,252,.15) 100%
    );
}

.legend-scale-precip {
    background: linear-gradient(
        90deg,
        rgba(255,255,255,.05) 0%,
        rgba(70,140,255,.35) 45%,
        rgba(225,240,255,.65) 100%
    );
}

.legend-scale-wind {
    background: linear-gradient(
        90deg,
        #4ade80 0%,
        #a3e635 24%,
        #facc15 48%,
        #fb923c 72%,
        #ef4444 100%
    );
}

.xsection-rain-drop {
    fill: rgba(100, 170, 255, 0.82);
    stroke: rgba(170, 215, 255, 0.70);
    stroke-width: 0.5;
    pointer-events: none;
}

.xsection-snowflake {
    stroke: rgba(240, 248, 255, 0.88);
    stroke-width: 1.1;
    stroke-linecap: round;
    pointer-events: none;
}

.xsection-atmosphere-cell {
    shape-rendering: geometricPrecision;
}
.legend-scale-temp {
    background: linear-gradient(
        90deg,
        #2563eb 0%,
        #22d3ee 32%,
        #facc15 66%,
        #ef4444 100%
    );
}

.legend-scale-pressure {
    background: linear-gradient(
        90deg,
        #7c3aed 0%,
        #38bdf8 50%,
        #facc15 100%
    );
}

.legend-scale-icing {
    background: linear-gradient(
        90deg,
        rgba(186,230,253,.25) 0%,
        #7dd3fc 30%,
        #facc15 65%,
        #ef4444 100%
    );
}

.legend-scale-turbulence {
    background: linear-gradient(
        90deg,
        rgba(254,240,138,.25) 0%,
        #facc15 35%,
        #fb923c 65%,
        #dc2626 100%
    );
}
.energy-runtime-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0 12px;
}

.energy-config-card {
  padding: 12px;
  border: 1px solid var(--line, rgba(255,255,255,.10));
  border-radius: 14px;
  background: rgba(255,255,255,.045);
}

.energy-cargo-card {
  background: rgba(245, 158, 11, .055);
  border-color: rgba(245, 158, 11, .22);
}

.energy-card-title {
  font-weight: 900;
  margin-bottom: 10px;
}

.energy-config-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.energy-config-grid.cargo-grid {
  grid-template-columns: minmax(180px, 260px);
}

.energy-config-grid label {
  font-size: 12px;
  color: var(--muted, #a5adbd);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.energy-config-grid input {
  width: 100%;
  background: var(--panel2, #1b2231);
  color: var(--ink, #e8ebf1);
  border: 1px solid var(--line, #222733);
  border-radius: 12px;
  padding: 8px 10px;
  font-weight: 800;
}

.energy-metric-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.energy-metric-card {
  border: 1px solid var(--line, rgba(255,255,255,.10));
  border-radius: 14px;
  padding: 10px;
  background: rgba(255,255,255,.045);
  min-height: 92px;
}

.energy-metric-card.go {
  border-color: rgba(22,163,74,.35);
  background: rgba(22,163,74,.08);
}

.energy-metric-card.hold {
  border-color: rgba(245,158,11,.35);
  background: rgba(245,158,11,.08);
}

.energy-metric-card.no_go,
.energy-metric-card.no {
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.08);
}

.metric-label {
  font-size: 12px;
  color: var(--muted, #a5adbd);
  margin-bottom: 4px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.metric-value {
  font-size: 20px;
  font-weight: 900;
}

.metric-sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted, #a5adbd);
  line-height: 1.35;
}

.energy-detail-lines {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
}

.energy-phase-details {
  margin-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 8px;
}

.energy-phase-details summary {
  cursor: pointer;
  font-weight: 900;
  color: var(--ink, #e8ebf1);
  padding: 6px 0;
}

@media (max-width: 1100px) {
  .energy-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .energy-config-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .energy-metric-grid,
  .energy-config-grid,
  .energy-config-grid.cargo-grid {
    grid-template-columns: 1fr;
  }
}
/* =========================
   Energy and Weight Summary
   ========================= */

.energySummaryCard{
  position: relative;
  background:
    radial-gradient(900px 280px at 0% 0%, rgba(49, 92, 173, 0.12), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.10);
}

.energySummaryHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.energySummaryHeadText{
  min-width:0;
}

.energySummaryTitle{
  margin:0;
}

.energySummarySub{
  margin-top:6px;
  color:var(--muted);
  line-height:1.4;
  max-width:680px;
}

.energyDecisionBanner{
  position:static !important;
  white-space:nowrap;
  padding:12px 16px;
  border-radius:16px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 10px 30px rgba(0,0,0,.22);
}

.energySummaryIntro{
  margin-bottom:14px;
}

.energySummaryLines{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.energySummaryLine{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:var(--ink);
  line-height:1.45;
}

.energySummaryLineAccent{
  background:rgba(59,130,246,.08);
  border-color:rgba(59,130,246,.18);
}

.energyFormGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(160px, 1fr));
  gap:12px;
}

.energyField{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.energyInput{
  width:100%;
  height:44px;
  text-align:left;
  cursor:text;
  border-radius:14px;
  background:rgba(9,18,37,.72);
  border:1px solid rgba(255,255,255,.08);
  font-weight:800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.energyPhaseWrap{
  margin-top:14px;
}

.energyPhaseDetails{
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:12px;
}

.energyPhaseDetails summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}

.energyPhaseDetails summary::-webkit-details-marker{
  display:none;
}

.energyPhaseTable{
  margin-top:6px;
}

/* Runtime battery/cargo blocks */
.energyRuntimeStack{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.energyRuntimeSection{
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
}

.energyRuntimeSectionCargo{
  border-color:rgba(245,158,11,.20);
  background:linear-gradient(180deg, rgba(245,158,11,.07), rgba(245,158,11,.03));
}

.energy-card-title{
  font-size:13px;
  font-weight:900;
  color:var(--ink);
  margin-bottom:12px;
}

.energyRuntimeGrid{
  display:grid;
  gap:12px;
}

.energyRuntimeGridBattery{
  grid-template-columns:repeat(3, minmax(160px, 1fr));
}

.energyRuntimeGridCargo{
  grid-template-columns:minmax(220px, 340px);
}

@media (max-width: 980px){
  .energySummaryHead{
    flex-direction:column;
    align-items:stretch;
  }

  .energyDecisionBanner{
    align-self:flex-start;
  }

  .energyFormGrid{
    grid-template-columns:1fr;
  }

  .energyRuntimeGridBattery,
  .energyRuntimeGridCargo{
    grid-template-columns:1fr;
  }
}
/* Route detail restored layout */
.topGrid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:14px;
  margin-bottom:14px;
  align-items:start;
}

.mapCard{
  width:100%;
  margin-top:14px;
}

.energySummaryCard{
  position:relative;
}

.energySummaryIntro{
  margin-top:12px;
  margin-bottom:12px;
}

/* Runtime inputs should live between header and KPI cards */
#rd_energy_runtime_config{
  margin:12px 0;
}

.energyRuntimeGridBattery{
  grid-template-columns:repeat(3, minmax(150px, 1fr));
}

.energyRuntimeGridCargo{
  grid-template-columns:minmax(220px, 360px);
}

/* KPI cards */
.energy-metric-grid{
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:12px;
  margin-top:12px;
}

.energy-metric-card{
  min-height:118px;
}

/* Per-phase block below cards/details */
.energyPhaseWrap,
.energy-phase-details{
  margin-top:14px;
}

.energy-phase-details summary{
  cursor:pointer;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}

@media (max-width: 1100px){
  .topGrid{
    grid-template-columns:1fr;
  }

  .energy-metric-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .energyRuntimeGridBattery{
    grid-template-columns:repeat(2, minmax(150px, 1fr));
  }
}

@media (max-width: 720px){
  .energy-metric-grid,
  .energyRuntimeGridBattery,
  .energyRuntimeGridCargo{
    grid-template-columns:1fr;
  }
}
.energy-detail-lines strong {
  color: var(--ink, #e8ebf1);
}

.energyPhaseTable td,
.energyPhaseTable th {
  font-variant-numeric: tabular-nums;
}

.energy-metric-card.no_go {
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.08);
}
.energy-stale-banner {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(245, 158, 11, 0.38);
  background: rgba(245, 158, 11, 0.10);
  color: var(--ink, #e8ebf1);
  line-height: 1.4;
}

.energySummaryCard.evaluation-stale {
  border-color: rgba(245, 158, 11, 0.45);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.10), 0 18px 42px rgba(0,0,0,.22);
}

button.needs-reeval,
.btn.needs-reeval {
  border-color: rgba(245, 158, 11, 0.55) !important;
  background: rgba(245, 158, 11, 0.16) !important;
  color: #ffd28a !important;
}