/* CubeSat Orbit v5b — layout mobile-safe */
:root{
  --bg:#0b1022;--ink:#eaf1ff;--mut:#93a4cc;--line:#1c2550;--card:#101739;
  --vh:1vh;
}
html,body{
  height:100%;
  margin:0;
  background:radial-gradient(1200px 600px at 50% -20%, #172042, var(--bg));
  color:var(--ink);
  font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial;
}

/* Fix per altezza su iPhone */
body::before{
  content:"";
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:transparent;
  pointer-events:none;
}

#app{display:flex;flex-direction:column;height:calc(var(--vh,1vh)*100)}
header{
  position:sticky;top:0;
  background:#0e1533cc;backdrop-filter:blur(6px);
  padding:12px;border-bottom:1px solid var(--line);
  text-align:center;font-weight:600;
}
main{flex:1;overflow:auto;padding:8px}
footer{text-align:center;padding:12px;color:var(--mut)}
.ver{font-size:11px;opacity:.55;}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px;
  margin:12px 0;
}

/* === VIEWER: fix iOS tap + hit-test === */
#viewer{
  position:relative;
  width:100%;
  height:calc(var(--vh,1vh)*70); /* mantiene proporzione anche su iOS */
  min-height:60vh;
  border-radius:12px;
  border:1px solid var(--line);
  overflow:visible;            /* <— importante: NO hidden su iOS */
  z-index:1;
  background:#000;
}

/* Mantieni gli angoli arrotondati al canvas senza usare overflow hidden */
.cesium-widget, .cesium-widget canvas{ border-radius:12px; }

/* Toolbar Cesium sempre “sopra” e cliccabile su iOS */
.cesium-viewer-toolbar,
.cesium-sceneModePicker-wrapper,
.cesium-home-button,
.cesium-navigationHelpButton-wrapper,
.cesium-viewer-fullscreenContainer{
  z-index:5 !important;
  pointer-events:auto !important;
}

/* Pannelli tuoi non devono coprire i controlli Cesium */
.card.controls{ position:relative; z-index:0; }

/* iOS: forza un layer proprio per evitare glitch */
@supports (-webkit-touch-callout: none){
  #viewer{ -webkit-transform:translateZ(0); }
}

textarea,input,button,pre{
  width:100%;
  background:#0f1840;
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:10px;
  font-family:ui-monospace,monospace;
}
textarea{min-height:100px;padding:10px}
button{cursor:pointer;padding:10px;margin:4px 2px}
pre{padding:10px;white-space:pre-wrap;overflow:auto}

.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pill{display:inline-block;margin-top:8px;padding:4px 10px;border:1px solid var(--line);border-radius:999px}

/* === Ground Station === */
.gs-btns{ margin-top:6px; }
.gs-btns button{ font-size:13px; padding:8px; }

/* Pulsante in modalità pick: bordo arancione + pulsazione */
.btn-picking{
  border-color:#ff8800 !important;
  color:#ff8800 !important;
  animation:gs-pulse 1.2s ease-in-out infinite;
}
@keyframes gs-pulse{
  0%,100%{ opacity:1; }
  50%{ opacity:.55; }
}

.pills-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px; }
.pills-row .pill{ margin-top:0; }
.pill-gs{ border-color:#ff444466; color:#ffaaaa; }

#aoslosPanel{ margin-top:12px; }
#aoslosPanel strong{ display:block; font-size:13px; color:var(--mut); margin-bottom:6px; }

/* === Catalog === */
.catalog{ padding:12px 16px; }
.catalog summary{
  cursor:pointer;
  font-weight:600;
  padding:4px 0;
  user-select:none;
  list-style:none;
}
.catalog summary::-webkit-details-marker{ display:none; }
.catalog summary::before{ content:'▶  '; font-size:10px; opacity:.6; }
.catalog[open] summary::before{ content:'▼  '; }

.catalog-group{ margin-top:14px; }
.catalog-label{
  display:block;
  font-size:11px;
  color:var(--mut);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:6px;
}
.catalog-btns{ display:flex; flex-wrap:wrap; gap:6px; }
.cat-btn{
  width:auto;
  padding:5px 11px;
  font-size:12px;
  font-family:system-ui,sans-serif;
  background:#0a1230;
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--ink);
  cursor:pointer;
  margin:0;
  transition:border-color .15s,color .15s;
}
.cat-btn:hover:not(:disabled){ border-color:#00ffff66; color:#00ffff; }
.cat-btn:disabled{ opacity:.45; cursor:wait; }

/* TLE header row */
.tle-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  margin-bottom:4px;
}
.tle-header label{ flex:1; }
.btn-minor{
  width:auto;
  padding:3px 9px;
  font-size:11px;
  font-family:system-ui,sans-serif;
  background:transparent;
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--mut);
  cursor:pointer;
  margin:0;
  white-space:nowrap;
}
.btn-minor:hover{ color:var(--ink); border-color:var(--ink); }

/* === Doppler panel === */
.doppler-inputs{ margin-bottom:10px; }
.doppler-inputs input{ font-family:ui-monospace,monospace; }
.pill-gs-default{
  font-size:11px;
  color:#ffcc66;
  border-color:#ffcc6655;
  line-height:1.3;
  display:block;
  margin-top:4px;
  padding:6px 10px;
}
.pill-gs-active{
  font-size:11px;
  color:#88ff44;
  border-color:#88ff4466;
  line-height:1.3;
  display:block;
  margin-top:4px;
  padding:6px 10px;
  border:1px solid;
  border-radius:999px;
}

/* === TLE Status / age badges === */
.tle-status-header{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:10px;
}
.tle-status-header .btn-minor{ width:auto; }
.tle-auto-status{
  font-size:11px;
  color:var(--mut);
}
.tle-auto-status.offline{ color:#ff8888; }
.tle-empty{
  font-size:12px;
  color:var(--mut);
  font-style:italic;
}
.tle-status-row{
  padding:8px 0;
  border-bottom:1px solid var(--line);
}
.tle-status-row:last-child{ border-bottom:none; }
.tle-status-name{ font-weight:600; }
.tle-status-meta{
  font-size:11px;
  color:var(--mut);
  margin-top:2px;
}
.tle-badge{
  display:inline-block;
  padding:2px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:600;
  margin-left:6px;
  vertical-align:baseline;
}
.badge-green { background:rgba(0,255,136,.12); color:#00ff88; border:1px solid rgba(0,255,136,.5); }
.badge-yellow{ background:rgba(255,204,0,.12); color:#ffcc00; border:1px solid rgba(255,204,0,.5); }
.badge-orange{ background:rgba(255,136,0,.15); color:#ff8800; border:1px solid rgba(255,136,0,.55); }
.badge-red   { background:rgba(255,68,68,.15); color:#ff4444; border:1px solid rgba(255,68,68,.6); }
.tle-refresh-hint{
  display:block;
  font-size:11px;
  color:#ff6666;
  margin-top:2px;
}

/* =============================================
   MOBILE — solo schermi ≤ 768px
   Il CSS desktop sopra non viene toccato.
   ============================================= */

@media (max-width: 768px) {

  /* Viewer: ridotto per lasciare spazio ai controlli */
  #viewer {
    height: 60vh;
    min-height: unset;
    max-height: 500px;
  }

  /* Header compatto + titolo scalato con clamp */
  header { padding: 8px 12px; }
  header h1 { font-size: clamp(1.2rem, 4vw, 1.8rem); }

  /* Canvas Cesium: swipe verticale → scroll pagina, non rotazione globo */
  .cesium-widget canvas { touch-action: pan-y; }

  /* Bottoni principali: 44px minimo touch target (Apple HIG) */
  .btns > button { min-height: 44px; }
}

/* Landscape mobile (iPhone ruotato) — NON impatta MacBook (height > 500px) */
@media (orientation: landscape) and (max-height: 500px) {
  header { padding: 4px 12px; }
  header h1 { font-size: clamp(0.9rem, 3vw, 1.1rem); }
}