/* css/style-hud.css */

#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;
}

#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;
}

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

#hudBurger.hud-burger{
  width:46px;
  height:46px;
  line-height:0;
  padding:0;
}

#hudBurger.hud-burger img{
  display:block;
  width:38px;
  height:38px;
}

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

.hud-burger{ display:none; border:0; background:transparent; cursor:pointer; }

.hud-tab{
  border:none;
  background:transparent;
  color:#b5b5b5;
  border-radius:999px;
  cursor:pointer;
  outline:none;
  transition:background 150ms ease,color 150ms ease;

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

  width:46px;
  height:46px;
  padding:0;
  line-height:0;
}

.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:38px; height:38px; display:block; }

.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; }

#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);}
}

.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; }

.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{
  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;
}

.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; }

@media (max-width:480px){

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

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

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

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

  .hud-topbar-row{
    width:100%;
    flex-wrap:nowrap;
    align-items:center;
  }

  .hud-tabs{
    display:none;
    margin-left:-40px;
    gap:18px;
    flex:0 1 auto;
    min-width:0;
    overflow:hidden;
  }

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

  #settings-panel.is-tabs-open{ right:4vw; }
  #settings-panel.is-tabs-open .hud-shell{
    display:block;
    width:100%;
    max-width:none;
  }

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

@media (max-width:480px){

  #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;
  }

  #settings-panel.is-hud-closed .hud-topbar-row{
    border-bottom: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  #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;
  }

  #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;
  }
}

#constellations-details [data-subtab="constellations-list"]{
  position:relative;
}

#constellations-details .constellation-sticky{
  position: sticky;
  top: 0;
  z-index: 2;

  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);
}

#constellationList{
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 40dvh;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

@media (min-width:481px){

  body.is-min-ui #settings-panel{
    left:25px !important;
    right:auto !important;
    overflow:hidden !important;
  }

  body.is-min-ui .hud-burger{
    display:inline-flex !important;
    width:46px;
    height:46px;
    background:transparent;
    border:0;
    padding:0;
    cursor:pointer;
    flex:0 0 auto;
    line-height:0;
    align-items:center;
    justify-content:center;
  }

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

  body.is-min-ui #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;
  }

  body.is-min-ui #settings-panel.is-hud-closed .hud-topbar-row{
    padding:0 !important;
    border-bottom:0 !important;
    gap:0 !important;
  }

  body.is-min-ui #settings-panel.is-hud-closed .hud-tabs{
    display:none !important;
  }

  body.is-min-ui #settings-panel.is-tabs-open .hud-shell{
    display:block !important;
    width:100% !important;
    max-width:none !important;

    background:rgba(20,20,20,0.7) !important;
    border:1px solid rgba(255,255,255,0.08) !important;
    box-shadow:0 8px 24px rgba(0,0,0,0.45) !important;
    backdrop-filter:blur(6px) !important;
    -webkit-backdrop-filter:blur(6px) !important;
  }

  body.is-min-ui #settings-panel.is-tabs-open .hud-topbar-row{
    padding:8px 10px 6px !important;
    gap:10px !important;
    border-bottom:1px solid rgba(255,255,255,0.12) !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
  }

  body.is-min-ui #settings-panel.is-tabs-open .hud-tabs{
    display:flex !important;
    align-items:center;
    justify-content:center;
    gap:18px;
    flex:1 1 auto;
    margin-left:4px !important;
    min-width:0;
    overflow:hidden;
  }
}

@media (min-width:481px){

  body.is-min-ui #hudBurger{
    opacity:1;
    transition:opacity 300ms ease;
    animation:burgerAutoHide 0s linear 3s forwards;
  }

  @keyframes burgerAutoHide{
    to{ opacity:0; }
  }

  body.is-min-ui #settings-panel:hover #hudBurger,
  body.is-min-ui #hudBurger:hover{
    opacity:1 !important;
    animation:none !important;
  }

  body.is-min-ui #hudBurger{
    pointer-events:auto;
  }
}