/* ============================================================
   STARG L I D E R
   MacArthur Bridge Layout – Layered Command Deck
   ------------------------------------------------------------
   - Clear upper/lower hierarchy
   - Tactical screen framed
   - Heavy instrument deck
   - Borders reduced (cleaner hierarchy)
   ============================================================ */


/* ================= TOP BAR ================= */

#top-bar {
  height: 28px;
  background: #10151c;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

.app-title {
  font-size: 14px;
  letter-spacing: 3px;
  color: #6fe3a3;
}

.utc-clock {
  font-size: 12px;
  color: #7f8b99;
}


/* ================= APP STRUCTURE ================= */

#app {
  display: flex;
  height: calc(100vh - 28px);
}


/* ================= FULL WIDTH LAYOUT ================= */

#main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #000005;
  overflow: hidden;  /* Prevent scrollbar */
}


/* ============================================================
   ROW 1: MAPS (Earth left, Celestial right)
   ============================================================ */

#maps-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Flexible height: min 200px, grows up to 35% of viewport */
  min-height: 200px;
  height: 35vh;
  max-height: 400px;
  flex-shrink: 0;
  gap: 12px;
  padding: 8px 16px;
  background: transparent;
}

/* Globe panels (celestial + earth) */
.globe-panel {
  width: 100%;
  height: 100%;
  background: rgba(10, 22, 40, 0.3);
  border: 1px solid rgba(111, 227, 163, 0.15);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SVG/Canvas inside globe panels - fill container */
.globe-panel svg,
.globe-panel canvas {
  display: block;
}

#world-map-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Inner wrapper for celestial map - isolates vendor library inline styles */
#celestial-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}




/* ============================================================
   ROW 2: SIGNAL STATUS (three-column layout)
   ============================================================ */

#status-row {
  padding: 6px 16px;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}

.signal-panel {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  background: linear-gradient(180deg, #1a222c 0%, #131922 100%);
  border: 1px solid rgba(111, 227, 163, 0.15);
  border-radius: 6px;
  padding: 10px 20px;
}

/* LEFT: Signal Info Table */
.signal-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: monospace;
}

.signal-table .table-header,
.signal-table .table-values {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  text-align: center;
}

/* CENTER: Classification (large) */
.classification-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* RIGHT: Metrics Table */
.metrics-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: monospace;
}

.metrics-table .table-header,
.metrics-table .table-values {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  text-align: center;
}

/* Unified table styling */
.table-header {
  font-size: 10px;
  color: #b0bec5;
  text-align: center;
}

.table-values {
  font-size: 12px;
  color: #6fe3a3;
  text-align: center;
}

/* Logic Panel (separate) */
.logic-panel {
  margin-top: 6px;
  padding: 6px 12px;
  background: rgba(10, 22, 40, 0.4);
  border: 1px solid rgba(111, 227, 163, 0.08);
  border-radius: 4px;
}

.logic-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  font-family: monospace;
  font-size: 10px;
}

.logic-step {
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.logic-step .check-name {
  color: #7f8b99;
}

.logic-step .check-expr {
  color: #9aa5b0;
}

.logic-step .check-result {
  font-weight: bold;
}

.logic-step .check-result.pass {
  color: #6fe3a3;
}

.logic-step .check-result.fail {
  color: #d94a4a;
}


/* ============================================================
   INSTRUMENT DECK (LOWER LAYER)
   ============================================================ */

#detail-panel {
  flex: 1;
  min-height: 0;  /* Allow flex shrinking */
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  background: transparent;
  overflow: hidden;
}


/* ================= Station summary ================= */
/* (Moved to .signal-header in #upper-row) */


/* ================= Plot grid layout ================= */

#detail-panels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
  gap: 12px;
  flex: 1;
  min-height: 0;
  align-items: stretch;
}

#detail-panels .panel-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: rgba(10, 22, 40, 0.3);
  border: 1px solid rgba(111, 227, 163, 0.15);
  border-radius: 6px;
  overflow: hidden;
}

#detail-panels .panel-title {
  flex-shrink: 0;
  padding: 8px 12px;
  font-size: 11px;
  letter-spacing: 2px;
  color: #6fe3a3;
  border-bottom: 1px solid rgba(111, 227, 163, 0.1);
}

#detail-panels .eigen-bars,
#detail-panels .reconstructed-spectrum {
  flex: 1;
  min-height: 0;
}

.detail-waterfall,
.radon-sinogram {
  flex: 1;
  min-height: 0;
  max-height: 100%;
  width: 100%;
  background: #000;
  display: block;
  border: 1px solid rgba(120, 255, 120, 0.2);
}

/* Ensure all canvases in panel-box fit their container */
#detail-panels .panel-box canvas {
  max-width: 100%;
  max-height: 100%;
}


/* ================= Signal Status Panel ================= */
/* (Styles moved to #upper-row section above) */

.drift-status {
  font-size: 28px;
  font-weight: bold;
  padding: 12px 32px;
  border-radius: 6px;
  text-align: center;
  letter-spacing: 2px;
  min-width: 180px;
}

.drift-status.waiting {
  background: rgba(127, 139, 153, 0.2);
  color: #7f8b99;
}

.drift-status.rfi {
  background: rgba(217, 74, 74, 0.2);
  color: #d94a4a;
  border: 1px solid rgba(217, 74, 74, 0.4);
}

.drift-status.candidate {
  background: rgba(111, 227, 163, 0.2);
  color: #6fe3a3;
  border: 1px solid rgba(111, 227, 163, 0.4);
  animation: pulse-glow 1.5s ease-in-out infinite;
}

.drift-status.no-signal {
  background: rgba(127, 139, 153, 0.1);
  color: #7f8b99;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 5px rgba(111, 227, 163, 0.3); }
  50% { box-shadow: 0 0 15px rgba(111, 227, 163, 0.6); }
}

.drift-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #7f8b99;
  font-size: 12px;
}

.drift-rate,
.drift-confidence,
.drift-duration {
  display: flex;
  justify-content: space-between;
}


/* ============================================================
   LOG PANEL
   ============================================================ */

#log-panel {
  height: 100px;
  flex-shrink: 0;
  margin: 0 16px 8px 16px;
  background: rgba(10, 22, 40, 0.4);
  border: 1px solid rgba(111, 227, 163, 0.15);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 10px;
  background: rgba(10, 22, 40, 0.6);
  border-bottom: 1px solid rgba(111, 227, 163, 0.1);
  flex-shrink: 0;
}

.log-title {
  font-size: 10px;
  letter-spacing: 2px;
  color: #6fe3a3;
}

.log-clear-btn {
  background: transparent;
  border: none;
  color: #7f8b99;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
  transition: background 0.2s, color 0.2s;
}

.log-clear-btn:hover {
  background: rgba(217, 74, 74, 0.3);
  color: #d94a4a;
}

.log-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 8px;
  font-family: "SF Mono", "Monaco", "Consolas", monospace;
  font-size: 11px;
  line-height: 1.4;
}

.log-entry {
  display: flex;
  gap: 8px;
  padding: 1px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.log-entry:last-child {
  border-bottom: none;
}

.log-time {
  color: #5a6a7a;
  flex-shrink: 0;
  min-width: 70px;
}

.log-level {
  flex-shrink: 0;
  min-width: 50px;
  font-weight: bold;
}

.log-level.info {
  color: #6fe3a3;
}

.log-level.warn {
  color: #f0ad4e;
}

.log-level.error {
  color: #d94a4a;
}

.log-level.data {
  color: #5bc0de;
}

.log-msg {
  color: #b0bec5;
  word-break: break-word;
}

/* Scrollbar styling for log */
.log-content::-webkit-scrollbar {
  width: 6px;
}

.log-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

.log-content::-webkit-scrollbar-thumb {
  background: rgba(111, 227, 163, 0.3);
  border-radius: 3px;
}

.log-content::-webkit-scrollbar-thumb:hover {
  background: rgba(111, 227, 163, 0.5);
}


/* ============================================================
   RESPONSIVE: Mobile (< 768px)
   ============================================================ */

@media screen and (max-width: 768px) {

  /* Top bar: smaller */
  #top-bar {
    height: 36px;
    padding: 0 12px;
  }

  .app-title {
    font-size: 12px;
    letter-spacing: 2px;
  }

  .utc-clock {
    font-size: 11px;
  }

  /* App: vertical scroll */
  #app {
    height: auto;
    min-height: calc(100vh - 36px);
  }

  #main {
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Maps row: stack vertically */
  #maps-row {
    grid-template-columns: 1fr;
    height: auto;
    gap: 8px;
    padding: 8px 12px;
  }

  .globe-panel {
    /* Use aspect-ratio to maintain consistent ellipse shape */
    height: auto;
    min-height: 150px;
    aspect-ratio: 2 / 1;
  }

  /* Signal panel: stack vertically */
  .signal-panel {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px;
  }

  /* Classification center: full width, prominent */
  .classification-center {
    order: -1;  /* Move to top */
  }

  .drift-status {
    font-size: 24px;
    padding: 10px 20px;
    min-width: unset;
    width: 100%;
  }

  /* Signal/Metrics tables: horizontal scroll if needed */
  .signal-table,
  .metrics-table {
    overflow-x: auto;
  }

  .signal-table .table-header,
  .signal-table .table-values,
  .metrics-table .table-header,
  .metrics-table .table-values {
    grid-template-columns: repeat(5, minmax(50px, 1fr));
    font-size: 10px;
    gap: 6px;
  }

  .table-header {
    font-size: 9px;
  }

  /* Logic panel */
  .logic-panel {
    padding: 6px 8px;
  }

  .logic-steps {
    font-size: 9px;
    gap: 2px 6px;
  }

  /* Detail panels: 2 columns on tablet, 1 column on phone */
  #detail-panel {
    padding: 8px 12px;
    flex: none;
    height: auto;
  }

  #detail-panels {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 8px;
  }

  #detail-panels .panel-box {
    height: 270px;  /* Increased for axis labels */
  }

  #detail-panels .panel-title {
    padding: 6px 10px;
    font-size: 10px;
    letter-spacing: 1px;
  }

  .detail-waterfall,
  .radon-sinogram {
    min-height: 200px;
  }

  /* Log panel mobile */
  #log-panel {
    height: 80px;
    margin: 0 12px 8px 12px;
  }

  .log-content {
    font-size: 10px;
  }

  .log-time {
    min-width: 60px;
  }

  .log-level {
    min-width: 40px;
  }
}


/* ============================================================
   RESPONSIVE: Small Mobile (< 480px)
   ============================================================ */

@media screen and (max-width: 480px) {

  /* Top bar */
  #top-bar {
    height: 32px;
    padding: 0 8px;
  }

  .app-title {
    font-size: 11px;
    letter-spacing: 1px;
  }

  /* Maps: smaller */
  #maps-row {
    padding: 6px 8px;
  }

  .globe-panel {
    min-height: 120px;
    aspect-ratio: 2 / 1;
  }

  /* Signal panel */
  #status-row {
    padding: 4px 8px;
  }

  .signal-panel {
    padding: 8px;
    gap: 8px;
  }

  .drift-status {
    font-size: 20px;
    padding: 8px 16px;
  }

  /* Tables: compact */
  .signal-table .table-header,
  .signal-table .table-values,
  .metrics-table .table-header,
  .metrics-table .table-values {
    grid-template-columns: repeat(5, minmax(40px, 1fr));
    font-size: 9px;
    gap: 4px;
  }

  .table-header {
    font-size: 8px;
  }

  /* Detail panels: single column */
  #detail-panel {
    padding: 6px 8px;
  }

  #detail-panels {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  #detail-panels .panel-box {
    height: 240px;  /* Increased for axis labels */
  }

  #detail-panels .panel-title {
    padding: 5px 8px;
    font-size: 9px;
  }

  .detail-waterfall,
  .radon-sinogram {
    min-height: 180px;
  }

  /* Log panel small mobile */
  #log-panel {
    height: 70px;
    margin: 0 8px 6px 8px;
  }

  .log-content {
    font-size: 9px;
    padding: 3px 6px;
  }

  .log-entry {
    gap: 4px;
  }

  .log-time {
    min-width: 50px;
  }

  .log-level {
    min-width: 35px;
  }
}


/* ============================================================
   RESPONSIVE: Landscape Mobile (width > 600px, height < 500px)
   ============================================================ */

@media screen and (max-height: 500px) and (min-width: 600px) {

  /* Allow vertical scrolling */
  #app {
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
  }

  #main {
    overflow: visible;
    display: block;  /* Override flex */
  }

  /* Maps side by side with fixed height - prevent overflow */
  #maps-row {
    grid-template-columns: 1fr 1fr;
    height: 160px;
    min-height: 160px;
    max-height: 160px;
    padding: 4px 8px;
    gap: 8px;
    overflow: hidden;
    flex-shrink: 0;
  }

  .globe-panel {
    height: 100%;
    max-height: 100%;
    min-height: unset;
    aspect-ratio: unset;
    overflow: hidden;
  }

  /* Ensure SVG/canvas don't overflow */
  .globe-panel svg,
  .globe-panel canvas {
    max-width: 100%;
    max-height: 100%;
  }

  /* Status row - ensure it doesn't get overlapped */
  #status-row {
    position: relative;
    z-index: 10;
    flex-shrink: 0;
  }

  /* Compact status panel - horizontal layout */
  .signal-panel {
    grid-template-columns: 1fr auto 1fr;
    padding: 6px 12px;
    gap: 8px;
  }

  .classification-center {
    order: 0;
  }

  .drift-status {
    font-size: 18px;
    padding: 6px 16px;
  }

  /* Detail panels: 2x2 grid */
  #detail-panel {
    flex-shrink: 0;
  }

  #detail-panels {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 6px;
  }

  #detail-panels .panel-box {
    height: 180px;
  }

  /* Log panel landscape mobile */
  #log-panel {
    height: 60px;
    margin: 0 8px 4px 8px;
  }

  .log-content {
    font-size: 9px;
  }
}