/* sat.css - Componenti del Satellite Tracker. Prefisso .sat- ; il resto dello stile viene da base.css (stesso aspetto delle altre sezioni). */
.sat-app { margin: .5rem 0 1.5rem; }
.sat-toolbar { display: flex; flex-wrap: wrap; gap: .6rem .9rem; align-items: center; margin-bottom: .6rem; }
.sat-search { position: relative; flex: 1 1 260px; max-width: 420px; }
.sat-search input { width: 100%; padding: .55rem .8rem; border-radius: 10px; border: 1px solid var(--prp-line); background: var(--prp-card); color: var(--prp-ink); }
.sat-sug { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); background: var(--prp-card); border: 1px solid var(--prp-line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); max-height: 320px; overflow: auto; }
.sat-sug[hidden] { display: none; }
.sat-sug button { display: flex; gap: .5rem; align-items: center; width: 100%; text-align: left; padding: .5rem .8rem; border: 0; background: none; color: var(--prp-ink); cursor: pointer; }
.sat-sug button:hover, .sat-sug button:focus-visible { background: var(--prp-soft); }
.sat-sug i { margin-left: auto; font-style: normal; color: var(--prp-mute); }
.sat-seg { display: inline-flex; border: 1px solid var(--prp-line); border-radius: 10px; overflow: hidden; background: var(--prp-card); }
.sat-seg button { border: 0; background: none; padding: .45rem .8rem; cursor: pointer; color: var(--prp-ink); font-weight: 600; }
.sat-seg button + button { border-left: 1px solid var(--prp-line); }
.sat-seg button.on { background: var(--prp-accent); color: #fff; }
.sat-clock { font-variant-numeric: tabular-nums; font-weight: 700; margin-left: auto; }
.sat-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; }
.sat-chip { border: 1px solid var(--c); background: transparent; color: var(--prp-ink); border-radius: 2rem; padding: .25rem .7rem; cursor: pointer; opacity: .5; }
.sat-chip i { font-style: normal; color: var(--prp-mute); margin-left: .2rem; }
.sat-chip.on { background: color-mix(in srgb, var(--c) 22%, transparent); opacity: 1; }
.sat-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: .9rem; align-items: start; }
.sat-stage { position: relative; background: #03060e; border-radius: 14px; overflow: hidden; border: 1px solid #14233f; }
.sat-stage canvas { display: block; width: 100%; height: min(72vh, 680px); min-height: 380px; touch-action: none; cursor: grab; }
.sat-stage canvas:active { cursor: grabbing; }
.sat-stage-sm canvas { height: 360px; min-height: 260px; }
.sat-hud { position: absolute; left: .7rem; bottom: .6rem; color: #b9c8e4; pointer-events: none; text-shadow: 0 1px 3px #000; }
main.prp .sat-hud { font-size: .95rem !important; }
.sat-tip { position: absolute; background: rgba(5,10,20,.92); color: #fff; padding: .25rem .55rem; border-radius: 6px; pointer-events: none; white-space: nowrap; border: 1px solid #2a3b60; }
main.prp .sat-tip { font-size: .9rem !important; }
.sat-tip[hidden] { display: none; }
.sat-zoom { position: absolute; right: .6rem; top: .6rem; display: flex; flex-direction: column; gap: .3rem; }
.sat-zoom button { width: 2.2rem; height: 2.2rem; border-radius: 8px; border: 1px solid #2a3b60; background: rgba(5,10,20,.8); color: #fff; font-size: 1.2rem; cursor: pointer; }
.sat-side { display: flex; flex-direction: column; gap: .8rem; }
.sat-side .prp-card { padding: .8rem; }
.sat-side h3, .sat-side h4 { margin: 0 0 .5rem; font-size: 1.05rem !important; }
.sat-obs { display: flex; gap: .4rem; flex-wrap: wrap; }
.sat-obs input { flex: 1 1 120px; min-width: 0; padding: .45rem .6rem; border-radius: 8px; border: 1px solid var(--prp-line); background: var(--prp-card); color: var(--prp-ink); }
.sat-obs button, .sat-btn { padding: .45rem .8rem; border-radius: 8px; border: 1px solid var(--prp-accent); background: var(--prp-accent); color: #fff; cursor: pointer; font-weight: 600; }
.sat-obs button.alt { background: transparent; color: var(--prp-accent); }
.sat-obs-out { margin: .5rem 0 0; color: var(--prp-mute); }
.sat-obs-out.bad { color: var(--prp-poor); }
main.prp .sat-obs-out { font-size: .95rem !important; }
.sat-radarbox canvas { width: 100%; aspect-ratio: 1 / 1; display: block; border-radius: 12px; cursor: crosshair; }
.sat-name { display: flex; align-items: center; gap: .5rem; }
.sat-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; flex: none; }
.sat-sub { color: var(--prp-mute); margin: .15rem 0 .5rem; }
.sat-hint { color: var(--prp-mute); margin: .3rem 0; }
.sat-dl { display: grid; grid-template-columns: auto 1fr; gap: .15rem .8rem; margin: .3rem 0 .6rem; }
.sat-dl dt { color: var(--prp-mute); font-weight: 500; }
.sat-dl dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.sat-up { color: var(--prp-good); font-weight: 700; }
.sat-passlist { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; }
.sat-passlist button { width: 100%; text-align: left; border: 1px solid var(--prp-line); background: var(--prp-card); color: var(--prp-ink); border-radius: 8px; padding: .4rem .6rem; cursor: pointer; display: flex; flex-direction: column; }
.sat-passlist button.on { border-color: #d98f00; background: var(--prp-fair-bg); color: #3a2a00; }
.sat-passlist span { color: var(--prp-mute); }
.sat-tx td, .sat-tx th { padding: .3rem .4rem; }
main.prp .sat-tx td, main.prp .sat-tx th { font-size: .9rem !important; }
.sat-demo { border: 1px solid #d98f00; background: var(--prp-fair-bg); color: #4a3300; border-radius: 10px; padding: .6rem .9rem; margin: .5rem 0 1rem; }
.sat-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .6rem; margin: .6rem 0; }
.sat-fact { border: 1px solid var(--prp-line); border-radius: 10px; padding: .55rem .8rem; background: var(--prp-card); }
.sat-fact b { display: block; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.sat-fact span { color: var(--prp-mute); }
.sat-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .7rem; align-items: end; }
.sat-form select, .sat-form input { width: 100%; padding: .45rem .6rem; border-radius: 8px; border: 1px solid var(--prp-line); background: var(--prp-card); color: var(--prp-ink); }
.sat-two { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: .9rem; align-items: start; }
.sat-passtable tbody tr { cursor: pointer; }
.sat-passtable tbody tr:hover, .sat-passtable tbody tr.on { background: var(--prp-soft); }
.sat-amtable td { vertical-align: top; }
.sat-amtable tr.sat-above { background: var(--prp-good-bg); }
.sat-amtable .sat-dop { display: block; color: var(--prp-mute); }
.sat-list { columns: 3 220px; column-gap: 1.5rem; padding-left: 1.1rem; }
.sat-pager { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1rem 0; }
.sat-pager a { padding: .35rem .8rem; border: 1px solid var(--prp-line); border-radius: 8px; text-decoration: none; }
@media (max-width: 991px) { .sat-main, .sat-two { grid-template-columns: 1fr; } .sat-stage canvas { height: 60vh; min-height: 320px; } .sat-clock { margin-left: 0; } }