/* css/style-hud.css */

/* ================================
   HUD PANEL (fixed, top-left)
   ================================ */

#settings-panel{
  position:fixed;
  top:max(10px, env(safe-area-inset-top));
  left:max(10px, env(safe-area-inset-left));
  z-index:2100;

  max-height:calc(100dvh - max(10px, env(safe-area-inset-top)) - 10px);

  overflow-x:hidden;
  overflow-y:auto;

  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  color-scheme:dark;
}

/* Glassy shell */
#settings-panel .hud-shell{
  display:inline-block;
  max-width:92vw;

  background:rgba(20,20,20,0.7);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,0.45);

  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);

  color:#fff;
}

/* ================================
   TOP ROW (desktop)
   ================================ */

.hud-topbar-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px 6px;
  border-bottom:1px solid rgba(255,255,255,0.12);
}

.hud-tabs{
  display:flex;
  gap:6px;
  margin-left:4px;
  flex:1;
}

/* Burger hidden by default (desktop) */
.hud-burger{ display:none; border:0; background:transparent; padding:0; cursor:pointer; }

/* Tabs */
.hud-tab{
  border:none;
  background:transparent;
  color:#b5b5b5;
  padding:4px 6px;
  border-radius:999px;
  cursor:pointer;
  outline:none;
  transition:background 150ms ease,color 150ms ease;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hud-tab:hover{ background:rgba(255,255,255,0.06); color:#fff; }
.hud-tab.is-active{ background:rgba(255,255,255,0.16); color:#fff; }

.hud-tab-icon{ width:32px; height:32px; display:block; }

/* ================================
   TAB PANELS
   ================================ */

.hud-tabpanels{ padding:4px 4px 10px; }

.hud-tabpanel{ display:none; padding:6px 8px 8px; }
.hud-tabpanel.is-active{ display:block; }

.hud-tabpanels.is-collapsed{ padding:0; display:none; }

/* Fade */
#settings-panel .hud-shell > *:not(.hud-topbar-row){
  animation:dropdownFade 180ms ease-out;
}
@keyframes dropdownFade{
  from{opacity:0;transform:translateY(-4px);}
  to{opacity:1;transform:translateY(0);}
}

/* ================================
   CONTENT / FORM ELEMENTS
   ================================ */

.settings-section{ margin-top:4px; padding-top:4px; }

#settings-panel select,
#settings-panel input[type="number"],
#settings-panel input[type="text"]{
  appearance:none;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.15);
  color:#fff;
  border-radius:8px;
  padding:6px 8px;
  height:30px;
  outline:none;
}

#settings-panel select:focus,
#settings-panel input[type="number"]:focus,
#settings-panel input[type="text"]:focus{
  border-color:rgba(100,149,237,0.9);
  box-shadow:0 0 0 2px rgba(100,149,237,0.35);
}

#settings-panel select option,
#settings-panel select optgroup{
  background-color:#1b1b1b;
  color:#fff;
}

#settings-panel input[type="checkbox"]{ accent-color:#9ad; }

/* Utility */
.stack{ display:flex; flex-direction:column; gap:4px; }
.field-row{ display:flex; align-items:center; gap:6px; font-size:16px; }
.muted{ font-size:12px; opacity:0.8; }
.grid-2{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.hidden{ display:none !important; }

/* ================================
   Console table
   ================================ */

#console-table{
  display:block;
  width:max-content;
  max-width:100%;
  overflow-x:auto;
  border-collapse:collapse;
  margin-top:6px;
  margin-left:8px;
  font-size:14px;
}

#console-table th,
#console-table td{
  padding:6px 8px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  text-align:left;
  white-space:nowrap;
}

#console-table th{ font-weight:600; opacity:0.9; }
#console-table tbody tr:hover{ background:rgba(255,255,255,0.04); }

.label.star-label{
  margin-top:-10px;
  white-space:nowrap;
  text-shadow:0 0 4px rgba(0,0,0,0.8);
  font-size:11px;
}

/* ================================
   SUBTABS
   ================================ */

.hud-subtabs{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin:-20px 0 6px;
  padding-bottom:4px;
  border-bottom:1px solid rgba(255,255,255,0.12);
}

.hud-subtab{
  border:none;
  background:transparent;
  color:#b5b5b5;
  cursor:pointer;
  transition:background 150ms ease,color 150ms ease;

  display:flex;
  align-items:center;
  justify-content:center;

  width:52px;
  height:52px;

  border-radius:999px;
  line-height:0;
  padding:0;
}

.hud-subtab:hover{ background:rgba(255,255,255,0.06); color:#fff; }
.hud-subtab.is-active{ background:rgba(255,255,255,0.16); color:#fff; }

.hud-subtab-icon{ width:30px; height:30px; display:block; margin:auto; }

.hud-subpanels{ margin-top:4px; }
.hud-subpanel{ display:none; }
.hud-subpanel.is-active{ display:block; }

/* ================================
   MOBILE: burger + tabs SAME ROW
   ================================ */

@media (max-width:480px){

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

  /* burger on */
  .hud-burger{
    display:inline-flex;
    width:35px;
    height:35px;
    border:0;
    border-radius:999px;
    background:transparent;
    align-items:center;
    justify-content:center;
    padding:0;
    cursor:pointer;
    flex:0 0 auto;
  }

  .hud-burger img{
    width:55px;
    height:55px;
    display:block;
    filter:drop-shadow(0 0 2px rgba(0,0,0,0.6));
  }

  /* closed: shrink wrap */
  #settings-panel{ left:4vw; right:auto; }
  #settings-panel .hud-shell{
    display:inline-block;
    width:fit-content;
    max-width:92vw;
  }

  /* top row always 1 line */
  .hud-topbar-row{
    width:100%;
    flex-wrap:nowrap;
    align-items:center;
  }

  /* tabs: hidden by default, but when open they live on SAME row */
  .hud-tabs{
    display:none;
    margin-left:-40px;
    gap:18px;
    flex:0 1 auto;

    /* prevent the “scrollbar under tabs” issue */
    min-width:0;
    overflow:hidden;
  }

  #settings-panel.is-tabs-open .hud-tabs{
    display:flex;
    align-items:center;
    justify-content:center;

    /* take remaining row width next to burger */
    flex:1 1 auto;
    width:auto;
  }

  /* keep shell full-width when open, but row stays single-line */
  #settings-panel.is-tabs-open{ right:4vw; }
  #settings-panel.is-tabs-open .hud-shell{
    display:block;
    width:100%;
    max-width:none;
  }

  /* larger tap targets */
  .hud-tab{ width:46px; height:46px; padding:0; }
  .hud-tab-icon{ width:38px; height:38px; }

  /* console */
  #console-table{
    max-width:calc(92vw - 24px);
    font-size:12px;
  }
  #console-table th,
  #console-table td{ padding:4px 6px; }
}


/* =========================================
   CLOSED HUD: make ONLY the burger visible
   Requires: #settings-panel.is-hud-closed class (set in JS)
   ========================================= */

@media (max-width:480px){

  /* remove the glass container when closed */
  #settings-panel.is-hud-closed .hud-shell{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* remove the divider/padding so it doesn't look like a bar */
  #settings-panel.is-hud-closed .hud-topbar-row{
    border-bottom: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  /* burger itself: no chrome */
  #settings-panel.is-hud-closed #hudBurger{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
  }

  /* optional: keep a larger hitbox without showing anything */
  #settings-panel.is-hud-closed #hudBurger{
    position: relative;
  }
  #settings-panel.is-hud-closed #hudBurger::before{
    content:"";
    position:absolute;
    inset:-10px;
  }
}


@media (max-width:480px){
  #settings-panel.is-hud-closed{
    overflow: hidden !important;
  }
}


@media (max-width:480px){
  #settings-panel .field-row{
    font-size:24px; /* mobile */
  }
}


/* ================================
   CONSTELLATIONS: make ONLY the list scroll,
   and keep the two top checkboxes sticky.
   Add at the VERY END of style-hud.css
   ================================ */

/* IMPORTANT: do NOT change layout for the whole subpanel.
   Only "stick" the wrapper and make the list scroll. */
#constellations-details [data-subtab="constellations-list"]{
  position:relative;
}

/* The sticky wrapper (we added in HTML above) */
#constellations-details .constellation-sticky{
  position: sticky;
  top: 0;
  z-index: 2;

  /* ensure it doesn't look transparent when the list scrolls under it */
  background: rgba(20,20,20,0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  padding: 2px 0 6px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

/* Only the constellation list scrolls */
#constellationList{
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 40dvh; /* tweak this height */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}