/* Spacer for iOS Safe Area (Status Bar) when viewport-fit=cover is used */
.status-bar-spacer {
  /* Set height to the top safe area inset, fallback to 0 if not supported */
  /* Standardhöhe über env(), Fallback 0 */
  height: env(safe-area-inset-top, 0px);
  /* Background color to match header */
  background-color: var(--box-background);
  width: 100%;
  /* Ensure it takes full width */
  flex-shrink: 0;
  /* Prevent shrinking in flex contexts */

  /* NEU: Fixiere den Spacer am oberen Rand */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  /* Über dem Header (z-index: 1000) und anderem Content */
}

/* Header Styles */

.header {
  position: sticky;
  /* Make header sticky *below* the spacer */
  /* Standard top über env(), Fallback 0 */
  top: env(safe-area-inset-top, 0px);
  z-index: 1000;
  width: 100%;
  height: var(--min-touch-size);
  background: var(--box-background);
  padding: 0 var(--spacing-small);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-medium);
  user-select: none;
  box-shadow: var(--box-shadow);
  box-sizing: border-box;
}

/* Menu Button */
.header__menu-btn {
  width: var(--min-touch-size);
  height: var(--min-touch-size);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--text-primary);
  transition: transform var(--transition-fast);
}

.header__menu-btn:active {
  transform: scale(0.95);
}

/* Back Button (e.g., on admin page) */
.header__back-btn {
  width: var(--min-touch-size);
  height: var(--min-touch-size);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  /* Passend zu anderen Icons */
  color: var(--text-primary);
  text-decoration: none;
  /* Link-Unterstrich entfernen */
  transition: transform var(--transition-fast);
}

.header__back-btn:active {
  transform: scale(0.95);
}

@media (hover: hover) {
  .header__back-btn:hover {
    color: var(--accent-blue);
  }
}

/* Title */
.header__title {
  flex: 1;
  font-size: 1.2rem;
  font-weight: 600;
  text-align: left;
  color: var(--accent-blue);
  margin: 0 0 0 var(--spacing-small);
  /* Verhindert Text-Wrapping */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Actions Container */
.header__actions {
  position: relative;
  /* NEU: Für absolute Positionierung des Kindelements */
  display: flex;
  align-items: center;
  /* Hinzugefügt für vertikale Zentrierung */
  gap: var(--spacing-small);
}

/* Action Buttons */
.header__refresh,
.header__currency,
.header__logout {
  width: var(--min-touch-size);
  height: var(--min-touch-size);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;

  /* iOS Touch-Verhalten kontrollieren */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  /* Erhöht für bessere Sichtbarkeit des Icons */
  color: var(--text-primary);
  transition: all var(--transition-fast);
}

.header__refresh:active,
.header__currency:active,
.header__logout:active {
  transform: scale(0.95);
}

/* Specific styles for the currency toggle button */
.header__currency {
  width: auto;
  /* Breite an Inhalt anpassen */
  height: 30px;
  /* Höhe mit 2px Abstand oben/unten */
  padding: 0 var(--spacing-small);
  /* Horizontaler Innenabstand */
  background-color: #555;
  /* Dunkleres Grau */
  border-radius: 8px;
  /* Leichte Rundung */
  /* Pillenform */
  /* font-weight: bold; */
  font-size: 1.3rem;
  /* Fette Schrift */
  border: 1px solid var(--text-primary);
  /* Test-Border hinzugefügt */
  /* font-size: 1.6rem; bleibt von oben geerbt */
  /* color: var(--text-primary); bleibt von oben geerbt */
  /* display, align-items, justify-content, transition bleiben geerbt */
}

/* Refresh Button Animation */
.header__refresh {
  transition: transform var(--transition-default);
}

.header__refresh.refreshing {
  animation: spin 1s linear infinite;
}

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

/* Farbe für den Spinner im deaktivierten Refresh-Button */
.header__refresh:disabled i.fa-spinner {
  color: var(--accent-yellow);
  /* Optional: Animation beibehalten, falls sie durch :disabled beeinflusst wird */
  animation: spin 1s linear infinite;
  /* Sicherstellen, dass die Animation weiterläuft */
}

/* Farbe für den Spinner beim Hard Refresh (spezifischer) */
.header__refresh.header__refresh--hard-refresh:disabled i.fa-spinner {
  color: var(--accent-blue);
  /* Blau für Hard Refresh */
}

/* Farbe für den Spinner beim Single-Stock Refresh */
.header__refresh.header__refresh--single-stock:disabled i.fa-spinner {
  color: var(--accent-red);
  /* Rote Farbe für Single-Stock Refresh - besser unterscheidbar */
}

/* Desktop Hover Effects */
@media (hover: hover) {

  .header__menu-btn:hover,
  .header__refresh:hover,
  .header__currency:hover,
  .header__logout:hover {
    color: var(--accent-blue);
  }
}

/* Larger Screens */
@media (min-width: 768px) {
  .header {
    padding: 0 var(--spacing-medium);
  }

  .header__title {
    font-size: 1.3rem;
  }
}

/* --- Refresh Timer Display --- */
.header__refresh-time {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 0px;
  font-size: 0.9em;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  white-space: nowrap;
  pointer-events: none;
}

.header__refresh-time.visible {
  opacity: 1;
}

.header__refresh-time.fade-out {
  opacity: 0;
  transition-duration: 1.2s;
}

/* Farbvarianten (verwenden die Farben aus base.css) */
.header__refresh-time.accent-yellow {
  color: var(--accent-yellow);
}

.header__refresh-time.accent-blue {
  color: var(--accent-blue);
}

.header__refresh-time.accent-red {
  color: var(--accent-red);
}

/* Anpassung für breitere Bildschirme: Innenabstand erhöhen */
@media (min-width: 768px) {
  .header {
    padding-left: max(var(--spacing-medium), calc((100vw - 450px) / 2));
    padding-right: max(var(--spacing-medium), calc((100vw - 450px) / 2));
  }
}