/* Base */
body {
  margin: 0;
  font-family: Arial, sans-serif; /* default font only */
  font-size: 0.82vw;
  line-height: 1.15;
  background: black;
  color: #000;
  height: 100vh;
  overflow: hidden; /* no page scroll */
}

/* Ensure padding is included in measured widths (prevents right overflow) */
*, *::before, *::after { box-sizing: border-box; }

/* Let grid children shrink properly (prevents subtle width bleed) */
.right-inner-container, .left-inner-container,
.top-controls, .telemetry-section { min-width: 0; }

h1, h2, h3 { margin: 0; color: #333; }
p { margin: 5px 0; }

/* Layout grid */
.container {
  display: grid;
  grid-template-columns: 2fr 3fr;
  height: 100vh;
  gap: 10px;
  padding: 10px 0.3vw;
  box-sizing: border-box;
}

/* LEFT (2 equal panels) — stretch perfectly to column height */
.left-panel {
  display: block;
  height: 100%;
  min-height: 0;
}

.left-inner-container {
  display: grid;
  grid-template-rows: minmax(0,1fr) minmax(0,1fr); /* 1:1 split, shrink-safe */
  gap: 10px;
  height: 100%;
  min-height: 0;
}

/* Remove the fixed vh height; let the grid control the height */
.media-section,
.messages-section {
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  padding: 10px;
  height: auto;          /* was: calc((100vh - 70px)/2) */
  min-height: 0;
  overflow: hidden;
}

.media-section { background: black; }

/* media box */
.media-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: black;
}
.media-img,.media-video {
  width: 100%; height: 100%;
  object-fit: contain; display: block; pointer-events: none;
}

/* overlay on media */
.media-description {
  position: absolute; bottom: 10px;
  max-width: 100%;
  background: rgba(255,255,255,0.6);
  color: black; text-align: center;
  padding: 3px; border-radius: 4px; font-size: 0.8em;
}

/* Logged messages list */
.messages-section {
  background: linear-gradient(to bottom, rgba(250,250,250,.95), rgba(236,236,236,.95));
}
#message-list {
  height: calc(100% - 28px);
  overflow: hidden;
  font-size: 0.8em;
}
#message-list p { margin: 12px 0; }

/* RIGHT (6 panels) — fixed grid that always fits the viewport */
:root {
  /* tune these to change vertical proportions (sum of frs is free) */
  --r3: 0.8;  /* header */
  --r4: 2.1;  /* Telemetry Data */
  --r5: 1.0;  /* Speed/Distance bars */
  --r6: 3.0;  /* Ship image */
  --r7: 1.3;  /* Reactor/Fuels/Rads bars */
  --r8: 2.2;  /* Energy */
}
.right-panel { display: flex; flex-direction: column; }
.right-inner-container {
  display: grid;
  grid-template-rows: var(--r3)fr var(--r4)fr var(--r5)fr var(--r6)fr var(--r7)fr var(--r8)fr;
  gap: 10px;
  height: 100%;
  min-height: 0; /* allow children to shrink */
}

/* Panel shells */
.top-controls,
.telemetry-section {
  background: linear-gradient(to bottom, rgba(250,250,250,.95), rgba(236,236,236,.95));
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  padding: 10px 15px;
  width: 100%;
  min-height: 0;          /* critical for fixed grids */
  overflow: hidden;       /* default: forbid scroll */
  display: flex; flex-direction: column;
}

.telemetry-section.no-scroll { overflow: hidden !important; }
.telemetry-section h3 { width: 100%; text-align: center; margin-bottom: 8px; }

/* Top controls */
.mission-title { font-size: 2.3vh; font-weight: bold; text-align: center; margin-bottom: .6vh; }
#daySlider { opacity: 0; pointer-events: none; width:0; height:0; }
.top-controls-content {
  display: flex; align-items: center; gap: 1vw;
}
.mission-time { font-size: 2.0vh; font-weight: bold; }
.mission-description { font-size: 1.5vh; color:#555; }
.logo {
  height: 4vh;
  object-fit: contain;
  margin-left: auto; /* pushes buttons right while keeping a gap */
}
.buttons-group { display: flex; gap: .6vw; }
.home-page-button {
  padding: 5px 10px; font-size: 1.5vh; background:#000; color:#fff;
  border: none; border-radius: 4px; text-decoration: none; cursor: pointer;
}

/* Sliders (Panels 5 & 7) */
.sliders-container {
  display:flex;
  flex-direction:column;
  gap:.3vh;
  width:100%;
  font-size: calc((1vw + 1vh) * 0.5);
}
.slider {
  display:flex;
  align-items:center;
  gap:.4vw;
  width:100%;
}
.slider span {
  width: var(--label-width, 6.5vw);
  text-align:left;
  font-size:75%;
  color:#000;
}
#telemetry-1 .slider span { --label-width: 6.5vw; }
#telemetry-4 .slider span { --label-width:10.5vw; } /* more room for long labels */

.slider-track {
  flex:1;
  height:1vh;
  background: lightgray;
  border-radius:2px;
  position:relative;
  overflow:hidden;
}
.slider-track.thin { height:.5vh; } /* half height where requested */
.slider-fill {
  position:absolute;
  top:0; left:0;
  height:100%;
  width:0;
  background:green;
  transition: width .25s linear;
}
.slider-fill.dashed {
  background-color: transparent !important;
  background-image: repeating-linear-gradient(90deg, currentColor 0 8px, transparent 8px 16px);
}
.slider-mark {
  position:absolute;
  top:0; bottom:0;
  width:2px;
  background:#000;
  transform:translateX(-50%);
  z-index:1;
}

/* ==== Panel 6: auto-fit ship image + pinned indicators ==== */
#telemetry-3 {
  position: relative;
  overflow: hidden;                  /* no scroll in this panel */
  /* You can fine-tune the indicator position via these vars */
  --indicators-x: 0.54;              /* fraction across the rendered image (0..1) */
  --indicators-width-frac: 0.18;     /* fraction of the rendered image width */
}

#ship-visualization-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: top;
  justify-content: center;
}

#ship-image {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;               /* preserve aspect ratio; fill available height */
}

/* The strip will be placed by JS relative to the rendered image box */
.binary-indicators-container {
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.2vh;                     /* keep your visual size */
  gap: 0.6vh;
  /* top/left/width are set by JS; leave unset here */
  z-index: 2;
}

.binary-indicator {
  width: 15%;
  height: 50%;
  border-radius: 3px;
  background-color: gray;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  transition: background-color .3s;
}

.binary-indicator span {
  position: absolute;
  top: 100%;
  font-size: .75em;
  color: #000;
  text-align: center;
  white-space: nowrap;
}

#telemetry-3 {
  --indicators-center-y-frac: 0.86; /* center Y as a fraction of panel height */
  --indicators-y-offset: 0px;       /* optional fine-tune in px (positive = lower) */
  --ship-image-height-frac: 0.9;    /* image = 86% of panel height; tune 0–1 */
}

/* Key–value tables (Panels 4 & 8) */
.kv-table { width:100%; border-collapse:collapse; table-layout:fixed; }
.kv-two-cols th, .kv-two-cols td {
  padding: .1vh .1vw;
  border-bottom: 1px solid #ddd;
  vertical-align: top;
  word-wrap: break-word;
  text-align: left;        /* do not center labels */
}
.kv-two-cols th { width:38%; color:#444; }
.kv-two-cols td { width:28%; color:#555; }

/* Message coloring (kept) */
.message-default  { color:black; }
.message-info     { color:black; background:#fff; }
.message-event    { color:blue; }
.message-anomaly  { color:black; background:orange; font-weight:bold; }
.message-alert    { color:black; background:yellow; font-weight:bold; }
.message-emergency{ color:white; background:red; font-weight:bold; }
.message-status   { color:grey; background:#fff; }

/* Center the slider groups vertically in Panels 5 & 7 */
#telemetry-1,
#telemetry-4 { justify-content: center; }

#telemetry-1 .sliders-container,
#telemetry-4 .sliders-container { margin-block: auto; }

/* ===== Medium screens ===== */
@media (max-width: 3000px) {
  #telemetry-3 {
    --indicators-center-y-frac: 0.76;
    --indicators-y-offset: 0px;
    --ship-image-height-frac: 0.85;
  }
}

/* ===== Small Landscape ===== */
@media (min-width: 800px) and (max-width: 1500px) {
  #telemetry-3 { display: none !important; }
}

/* ===== Small screens ===== */
@media (max-width: 800px) {

  /* Keep your stacked layout */
  html { font-size: 2.5vw; }
  body { font-size: 2.5vw; overflow: auto; }
  .container {
    display: flex;
    flex-direction: column;
    height: auto;
    gap: 20px;
    padding: 10px 8px;
  }
  .right-panel { order: 1; width: 100%; }
  .left-panel  { order: 2; width: 100%; }

  /* Hide media panel entirely */
  .media-section { display: none !important; }

  /* ---------- Panel 1 (Header) ---------- */
  .mission-title { font-size: clamp(22px, 2.5vh, 34px); line-height: 1.1; }
  .mission-time  { font-size: clamp(18px, 1.8vh, 28px); line-height: 1.1; }
  .mission-description { font-size: 1.0vh; }
  .logo { height: 2.5vh; }
  .home-page-button { font-size: 1.2vh; padding: 3px 6px; }

  /* ---------- Panel 2 (Telemetry Data) ---------- */
  #panel-4 .kv-table { font-size: 1.1vh; }
  #panel-4 .kv-two-cols th,
  #panel-4 .kv-two-cols td { padding: 3px 4px; }

  /* ---------- Panel 3 & 5 (Sliders) ---------- */
  /* Speed/Distance group */
  #telemetry-1 { justify-content: center; }
  #telemetry-1 .sliders-container { margin-block: auto; }
  #telemetry-1 .slider span { width: 30vw; font-size: 1.1vh; }
  #telemetry-1 .slider-track { height: 1.2vh; }
  #telemetry-1 .slider-track.thin { height: 0.7vh; }

  /* If any other sliders are shown, give them the same label room */
  #telemetry-4 .sliders-container { margin-block: auto; }
  #telemetry-4 .slider span { width: 30vw; font-size: 1.1vh; }

  /* ---------- Panel 6 (Ship + indicators) ---------- */
  #telemetry-3 {
    --ship-image-height-frac: 1.0;
    --indicators-center-y-frac: 0.80;
    min-height: 200px;
  }
  #telemetry-3 .binary-indicators-container {
    gap: 2.2vw;
    height: 2.0vh;
  }
  #telemetry-3 .binary-indicator span { font-size: 0.7vh; }

  /* ---------- Panel 8 (Energy) ---------- */
  #panel-8 .kv-table { font-size: 1.1vh; }
  #panel-8 .kv-two-cols th,
  #panel-8 .kv-two-cols td { padding: 3px 4px; }

  /* ---------- Recent System Messages ---------- */
  /* Switch the left column's inner grid off (media is hidden), so no phantom row remains */
  .left-inner-container { display: block; height: auto; gap: 0; }

  .container { align-items: stretch; }
  .left-panel, .left-inner-container { width:100%; }

  /* Make messages panel full-width and remove artificial list cap */
  .messages-section {
    width: 100%;
    max-width: none;
    align-self: stretch;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
    min-height: 22vh;
    max-height: 32vh;
  }
  .messages-section h3 { font-size: 1.5vh; }

  #message-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  #message-list p {
    font-size: 1.0vh;
    line-height: 1.1;
  }
}