/* ============================================================
   layout.css — Header, search panel, status bar
   Ottimizzato per mobile-first
   ============================================================ */

/* ── Header ────────────────────────────────────────────────── */
header {
  position:               sticky;
  top:                    0;
  z-index:                200;
  /* vetro scuro semitrasparente — si fonde con lo sfondo durante lo scroll */
  background:             rgba(10, 14, 26, 0.82);
  backdrop-filter:        blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  padding:                20px 0 16px;
  border-bottom:          1px solid var(--border);
  margin-bottom:          24px;
  /* safe area iPhone notch */
  padding-top:            max(20px, env(safe-area-inset-top));
  /* promuove in un layer compositing dedicato → scroll senza jank */
  will-change:            transform;
}

.header-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
}

.logo {
  display:     flex;
  align-items: center;
  gap:         12px;
  min-width:   0; /* permette il testo di troncarsi su mobile */
}

.logo-icon {
  width:           40px;
  height:          40px;
  min-width:       40px;
  background:      linear-gradient(135deg, var(--accent), #0070ff);
  border-radius:   10px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       20px;
}

.logo-text h1 {
  font-size:      1.15rem;
  font-weight:    800;
  color:          var(--text);
  letter-spacing: -0.02em;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}

.logo-text span {
  font-family:    'DM Mono', monospace;
  font-size:      0.65rem;
  color:          var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display:        block;
}

.header-right {
  display:     flex;
  align-items: center;
  gap:         10px;
  white-space: nowrap;
}

.header-refresh-time {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            1px;
  line-height:    1;
}

.header-refresh-label {
  font-family:    'DM Mono', monospace;
  font-size:      0.52rem;
  color:          var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  /* su mobile il label è troppo largo: si mostra solo da tablet */
  display:        none;
}

.header-right strong {
  font-family: 'DM Mono', monospace;
  font-size:   1rem;
  color:       var(--accent);
  font-weight: 700;
}

.btn-refresh {
  background:    none;
  border:        1px solid var(--border);
  border-radius: 8px;
  color:         var(--text-dim);
  cursor:        pointer;
  font-size:     1rem;
  line-height:   1;
  padding:       5px 8px;
  transition:    color 0.2s, border-color 0.2s, transform 0.2s;
}

.btn-refresh:hover:not(:disabled) {
  border-color: var(--accent);
  color:        var(--accent);
}

.btn-refresh:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.btn-refresh.spinning {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Search panel ──────────────────────────────────────────── */
.search-panel {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       16px;
  margin-bottom: 28px;
  display:       flex;
  align-items:   flex-end;
  gap:           10px;
  flex-wrap:     wrap;
}

.search-group {
  display:       flex;
  flex-direction: column;
  gap:           6px;
}

/* Su mobile la città prende tutta la larghezza */
.search-group--city {
  flex:      1 1 100%;
  min-width: 0;
}

.search-group--coords {
  flex: 1 1 80px;
}

.search-group label {
  font-family:    'DM Mono', monospace;
  font-size:      0.6rem;
  color:          var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.search-group input {
  width:         100%;
  background:    var(--bg);
  border:        1px solid var(--border);
  border-radius: 8px;
  padding:       11px 14px;
  color:         var(--text);
  font-family:   'Syne', sans-serif;
  font-size:     1rem; /* min 16px su iOS evita lo zoom automatico */
  outline:       none;
  transition:    border-color 0.2s;
  /* evita zoom iOS su focus */
  -webkit-text-size-adjust: 100%;
}

.search-group input:focus       { border-color: var(--accent); }
.search-group input::placeholder { color: var(--text-muted); font-size: 0.9rem; }

.search-divider {
  font-family:    'DM Mono', monospace;
  font-size:      0.7rem;
  color:          var(--text-muted);
  align-self:     flex-end;
  padding-bottom: 12px;
  flex:           0 0 auto;
}

.search-actions {
  display:     flex;
  gap:         8px;
  align-items: flex-end;
  flex:        0 0 auto;
}

/* ── Bottoni ───────────────────────────────────────────────── */
.btn {
  padding:       11px 20px;
  border-radius: 8px;
  border:        none;
  cursor:        pointer;
  font-family:   'Syne', sans-serif;
  font-weight:   600;
  font-size:     0.9rem;
  transition:    all 0.2s;
  white-space:   nowrap;
  /* area tap minima 44px raccomandato da Apple/Google */
  min-height:    44px;
  touch-action:  manipulation;
}

.btn-primary  { background: var(--accent); color: var(--bg); }
.btn-primary:hover  { background: #33ddff; }
.btn-primary:active { background: #00b8d9; transform: scale(0.97); }

.btn-secondary {
  background: transparent;
  color:      var(--text-dim);
  border:     1px solid var(--border);
  padding:    11px 14px;
}
.btn-secondary:hover  { border-color: var(--accent); color: var(--accent); }
.btn-secondary:active { transform: scale(0.97); }

/* ── Sezione "Dove mi trovo" ───────────────────────────────── */
#locationSection,
#omLocationSection {
  margin-bottom: 28px;
}

.location-prompt {
  display:     flex;
  align-items: center;
  gap:         12px;
  flex-wrap:   wrap;
  min-height:  44px;
}

.btn-location {
  background:    transparent;
  color:         var(--success);
  border:        1px solid var(--success);
  padding:       11px 20px;
  border-radius: 8px;
  cursor:        pointer;
  font-family:   'Syne', sans-serif;
  font-weight:   600;
  font-size:     0.9rem;
  transition:    all 0.2s;
  min-height:    44px;
  touch-action:  manipulation;
}

.btn-location:hover  { background: rgba(0, 230, 118, 0.08); }
.btn-location:active { transform: scale(0.97); }

.location-loading {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-family: 'DM Mono', monospace;
  font-size:   0.72rem;
  color:       var(--text-muted);
}

.location-loading .spinner {
  margin:      0;
  flex-shrink: 0;
}

.location-error {
  font-family: 'DM Mono', monospace;
  font-size:   0.72rem;
  color:       var(--danger);
}

/* ── Status bar ────────────────────────────────────────────── */
.status-bar {
  background:  var(--surface);
  border-top:  1px solid var(--border);
  padding:     8px 16px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  font-family: 'DM Mono', monospace;
  font-size:   0.6rem;
  color:       var(--text-muted);
  display:     flex;
  justify-content: space-between;
  align-items: center;
  position:    sticky;
  bottom:      0;
  z-index:     100;
}

.status-right {
  display: none; /* nascosto su mobile per risparmiare spazio */
}

.status-dot {
  display:       inline-block;
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    var(--success);
  margin-right:  6px;
  animation:     pulse 2s infinite;
}

.status-dot.error { background: var(--danger); animation: none; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ── Tablet (≥ 600px) ──────────────────────────────────────── */
@media (min-width: 600px) {
  header { padding: 24px 0 18px; margin-bottom: 28px; padding-top: max(24px, env(safe-area-inset-top)); }

  .logo-icon { width: 44px; height: 44px; font-size: 22px; }
  .logo-text h1 { font-size: 1.3rem; }

  .search-group--city { flex: 1 1 200px; }

  .status-right { display: block; }
  .header-refresh-label { display: block; }
}

/* ── Desktop (≥ 900px) ─────────────────────────────────────── */
@media (min-width: 900px) {
  header { padding: 28px 0 20px; margin-bottom: 32px; padding-top: max(28px, env(safe-area-inset-top)); }

  .search-panel { padding: 20px 24px; gap: 16px; }

  .btn { font-size: 0.85rem; }
}