/* ===================================================================
   Widebody Aircraft Tracker — theme + layout
   Same palette as its sibling tools (light ~ ttkbootstrap
   "flatly", dark ~ "darkly") so every window looks like a set.
   =================================================================== */

:root {
  --pad: 8px;
  --radius: 6px;
  --border-w: 1px;
}

/* ---- Light theme (flatly-ish) ---- */
.theme-light {
  --bg: #ffffff;
  --panel-bg: #f8f9fa;
  --panel-border: #dee2e6;
  --input-bg: #ffffff;
  --input-fg: #212529;
  --input-border: #ced4da;
  --muted: #6c757d;
  --title-fg: #2c3e50;

  --primary: #2c3e50;
  --primary-fg: #ffffff;
  --success: #18bc9c;
  --info: #3498db;
  --warning: #f39c12;
  --danger: #e74c3c;
  --secondary: #95a5a6;

  --err-bg: #ffd6d6;
  --warn-bg: #fff3b0;
  --sel-bg: #e8f4fd;
  --tile-shadow: 0 1px 2px rgba(0,0,0,.06);
  --tile-shadow-hover: 0 6px 18px rgba(0,0,0,.12);
}

/* ---- Dark theme (darkly-ish) ---- */
.theme-dark {
  --bg: #222222;
  --panel-bg: #2b2b2b;
  --panel-border: #3a3a3a;
  --input-bg: #303030;
  --input-fg: #e9ecef;
  --input-border: #4a4a4a;
  --muted: #adb5bd;
  --title-fg: #e9ecef;

  --primary: #375a7f;
  --primary-fg: #ffffff;
  --success: #00bc8c;
  --info: #3498db;
  --warning: #f39c12;
  --danger: #e74c3c;
  --secondary: #444444;

  --err-bg: #5a2d2d;
  --warn-bg: #5a4b1f;
  --sel-bg: #2f4257;
  --tile-shadow: 0 1px 2px rgba(0,0,0,.4);
  --tile-shadow-hover: 0 6px 20px rgba(0,0,0,.55);
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  background: var(--bg);
  color: var(--input-fg);
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hidden { display: none !important; }
code { font-family: Consolas, monospace; font-size: 12px; }

/* ---------------- top bar ---------------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--pad) 12px;
  flex: 0 0 auto;
  gap: 12px;
}
.topbar h1 { margin: 0; font-size: 18px; font-weight: 600; color: var(--title-fg); }
.topbar-left { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.topbar-sub { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.topbar-right { display: flex; align-items: center; gap: 6px; }

/* ---------------- body ---------------- */
.body {
  flex: 1 1 auto;
  display: flex;
  gap: var(--pad);
  padding: 0 var(--pad) var(--pad);
  min-height: 0;
}

.panel {
  background: var(--panel-bg);
  border: var(--border-w) solid var(--panel-border);
  border-radius: var(--radius);
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.panel-tools  { flex: 1 1 0; min-width: 0; }

.panel-title {
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
  flex: 0 0 auto;
}
.panel-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
  flex: 0 0 auto;
}
.panel-scroll { flex: 1 1 auto; overflow: auto; min-height: 0; padding: 2px; }

/* ---------------- tool tiles ---------------- */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  align-content: start;
}

.tool-tile {
  display: flex;
  flex-direction: column;
  border: var(--border-w) solid var(--panel-border);
  border-radius: 10px;
  background: var(--bg);
  box-shadow: var(--tile-shadow);
  overflow: hidden;
  transition: box-shadow .15s, border-color .15s, transform .15s;
}
.tool-tile:hover { box-shadow: var(--tile-shadow-hover); transform: translateY(-1px); }
.tool-tile.unavailable { opacity: .6; }
.tool-tile.unavailable:hover { transform: none; box-shadow: var(--tile-shadow); }

/* the whole upper half is the launch button — a launcher's main verb should
   be the biggest target on screen */
.tool-open {
  font: inherit;
  text-align: left;
  color: var(--input-fg);
  background: transparent;
  border: none;
  border-bottom: var(--border-w) solid var(--panel-border);
  padding: 16px 16px 14px;
  cursor: pointer;
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 4px;
  align-items: center;
  min-height: 132px;
}
.tool-open:disabled { cursor: not-allowed; }
.tool-open:not(:disabled):hover { background: var(--sel-bg); }
.tool-open:focus-visible { outline: 2px solid var(--info); outline-offset: -2px; }

.tool-icon {
  grid-row: 1 / span 2;
  font-size: 34px;
  line-height: 1;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--panel-bg);
  border: var(--border-w) solid var(--panel-border);
}
.tool-name { font-size: 17px; font-weight: 600; color: var(--title-fg); align-self: end; }
.tool-tag  { font-size: 13px; color: var(--info); font-weight: 600; align-self: start; }
.tool-blurb {
  grid-column: 2;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
  margin-top: 4px;
}

.tile-success .tool-tag { color: var(--success); }
.tile-warning .tool-tag { color: var(--warning); }
.tile-primary .tool-tag { color: var(--primary); }

.tool-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--panel-bg);
}
.tool-foot .spacer { flex: 1 1 auto; }
.tool-path {
  font-family: Consolas, monospace;
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------- inputs ---------------- */
.field-label { display: block; margin: 6px 0 2px; color: var(--input-fg); }
.input {
  width: 100%;
  padding: 5px 6px;
  background: var(--input-bg);
  color: var(--input-fg);
  border: var(--border-w) solid var(--input-border);
  border-radius: var(--radius);
  font: inherit;
}
.input-sm { font-size: 12.5px; padding: 3px 5px; }
.input:focus { outline: 1px solid var(--info); }
select.input { cursor: pointer; }

.hint { color: var(--muted); font-size: 11.5px; line-height: 1.4; margin: 0 0 4px; }
.muted-note { color: var(--muted); font-size: 12px; margin-top: 5px; }
.rule { border: none; border-top: var(--border-w) solid var(--panel-border); margin: 12px 0 4px; }

.status { margin-top: 8px; white-space: pre-wrap; font-size: 12.5px; line-height: 1.35; }
.status.ok    { color: var(--success); }
.status.error { color: var(--danger); }
.status.warn  { color: var(--warning); }

.empty-note {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
  padding: 14px 6px;
}

/* ---------------- buttons ---------------- */
.btn {
  font: inherit;
  border-radius: var(--radius);
  border: var(--border-w) solid transparent;
  padding: 5px 10px;
  cursor: pointer;
  background: transparent;
  color: var(--input-fg);
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:hover:not(:disabled) { filter: brightness(1.08); }

.btn-primary { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
.btn-outline-secondary { border-color: var(--secondary); color: var(--input-fg); }
.btn-outline-success   { border-color: var(--success);   color: var(--success); }
.btn-outline-info      { border-color: var(--info);      color: var(--info); }
.btn-outline-warning   { border-color: var(--warning);   color: var(--warning); }
.btn-outline-danger    { border-color: var(--danger);    color: var(--danger); }
.btn-sm { padding: 2px 7px; font-size: 12px; }

.btn-icon { border: none; padding: 2px 6px; background: none; font-size: 13px; color: var(--input-fg); }
.btn-icon.danger { color: var(--danger); }
.btn-icon:hover { filter: brightness(1.3); }

/* ---------------- pills ---------------- */
.pill {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 10px;
  border: var(--border-w) solid var(--panel-border);
  color: var(--muted);
  white-space: nowrap;
}
.pill.ok      { color: var(--success); border-color: var(--success); }
.pill.running { color: var(--info);    border-color: var(--info); }
.pill.missing { color: var(--danger);  border-color: var(--danger); }

/* ---------------- modal ---------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.modal {
  background: var(--panel-bg);
  border: var(--border-w) solid var(--panel-border);
  border-radius: var(--radius);
  padding: 16px;
  width: min(520px, 88vw);
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.modal-title { font-weight: 600; font-size: 15px; margin-bottom: 8px; color: var(--title-fg); }
/* Deliberately NOT pre-wrap — every message here is HTML; plain-text runs
   that need a break use <br>. */
.modal-message { font-size: 13px; line-height: 1.5; margin-bottom: 10px; }
.modal-message code { background: var(--input-bg); padding: 1px 4px; border-radius: 3px; }
.modal-message pre {
  background: var(--input-bg);
  border: var(--border-w) solid var(--panel-border);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 11.5px;
  line-height: 1.45;
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
}
.modal-input { margin-bottom: 10px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 6px; }

.modal.modal-wide { width: min(860px, 94vw); }
.modal.modal-wide .modal-message { max-height: 74vh; overflow: auto; }

/* ---------------- about ---------------- */
.about-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  align-items: baseline;
  font-size: 13.5px;
}
.about-grid dt { color: var(--muted); }
.about-grid dd { margin: 0; font-weight: 600; }

/* ===================================================================
   "How the suite fits together" infographic
   Plain CSS/SVG — no library. Colours come from the theme variables so it
   reads correctly in light and dark.
   =================================================================== */

.info-wrap { display: flex; flex-direction: column; gap: 12px; }

.info-svg { width: 100%; height: auto; display: block; overflow: visible; }

.info-svg .chip {
  fill: var(--panel-bg);
  stroke: var(--panel-border);
  stroke-width: 1.5;
}
.info-svg .chip.hub { stroke: var(--info); }
.info-svg .chip.store { stroke: var(--warning); }
.info-svg .cap {
  fill: var(--input-fg);
  font: 600 13px "Segoe UI", system-ui, sans-serif;
  text-anchor: middle;
}
.info-svg .sub {
  fill: var(--muted);
  font: 11px "Segoe UI", system-ui, sans-serif;
  text-anchor: middle;
}
.info-svg .glyph { font: 22px "Segoe UI Emoji", "Segoe UI", sans-serif;
                   text-anchor: middle; }
.info-svg .win    { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.info-svg .winbar { stroke: var(--muted); stroke-width: 1.5; }
.info-svg .dot    { fill: var(--muted); }
.info-svg .bar    { fill: var(--muted); opacity: .45; }
.info-svg .brace  { fill: var(--warning); text-anchor: middle;
                    font: 700 22px Consolas, monospace; }

.info-svg .flow {
  fill: none;
  stroke: var(--info);
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
  opacity: .55;
}
.info-svg .spark { fill: var(--info); }

@keyframes info-march { to { stroke-dashoffset: -20; } }
@keyframes info-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
/* Each spark travels its own connector. The dot itself is translated —
   transforms animate reliably everywhere, SVG geometry attributes do not. */
@keyframes spark-left  { 0%   { transform: translate(320px, 48px); opacity: 0; }
                         15%,85% { opacity: 1; }
                         100% { transform: translate(150px, 158px); opacity: 0; } }
@keyframes spark-mid   { 0%   { transform: translate(450px, 86px); opacity: 0; }
                         15%,85% { opacity: 1; }
                         100% { transform: translate(450px, 158px); opacity: 0; } }
@keyframes spark-right { 0%   { transform: translate(580px, 48px); opacity: 0; }
                         15%,85% { opacity: 1; }
                         100% { transform: translate(750px, 158px); opacity: 0; } }

.info-svg .flow  { animation: info-march 1s linear infinite; }
.info-svg .spark { animation: 2.6s linear infinite; }
.info-svg .spark.s1 { animation-name: spark-left; }
.info-svg .spark.s2 { animation-name: spark-mid; animation-delay: .5s; }
.info-svg .spark.s3 { animation-name: spark-right; animation-delay: 1s; }
.info-svg .bar.b1 { animation: info-pulse 2.2s ease-in-out infinite .2s; }
.info-svg .bar.b2 { animation: info-pulse 2.2s ease-in-out infinite .5s; }
.info-svg .brace  { animation: info-pulse 2.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .info-svg * { animation: none !important; }
  .info-svg .spark { opacity: 0; }
}

/* --- supporting copy --- */
.info-steps { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.65; }
.info-steps li { margin-bottom: 2px; }
.info-note {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
  border-left: 3px solid var(--warning);
  padding: 4px 0 4px 10px;
}

/* ---------------- help sections ---------------- */
.help-h {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--title-fg);
  margin: 16px 0 6px;
  padding-bottom: 3px;
  border-bottom: var(--border-w) solid var(--panel-border);
}
.help-dl { margin: 0; font-size: 13px; line-height: 1.55; }
.help-dl dt { font-weight: 600; margin-top: 9px; }
.help-dl dt:first-of-type { margin-top: 0; }
.help-dl dd { margin: 2px 0 0; color: var(--muted); }
.help-dl dd b { color: var(--input-fg); font-weight: 600; }

.help-plain { margin: 10px 0 6px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.help-plain b { color: var(--input-fg); }

.help-paths {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--muted);
  list-style: none;
  padding-left: 0;
}
.help-paths code {
  color: var(--input-fg);
  background: var(--input-bg);
  border: var(--border-w) solid var(--panel-border);
  border-radius: 3px;
  padding: 0 4px;
}

.tool-icon img { width: 40px; height: 40px; object-fit: contain; }