/* Import Poppins Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

/* CSS Variables */
:root {
  /* Colors */
  --primary-bg: #002328;
  --box-background: #3f5882;
  --menu-background: rgba(63, 88, 130, 0.7);
  --menu-border: rgba(220, 220, 220, 0.2);
  --text-primary: rgb(220, 220, 220);
  --text-secondary: rgb(150, 150, 150);
  --accent-blue: #34d7e6;
  --accent-green: #3bdd48;
  --accent-red: #fb806b;
  --accent-yellow: #fbf16b;
  --accent-orange: #fb9f6b;

  /* Alert System */
  --header-height: var(--min-touch-size, 44px);
  /* Verwende die Touch-Größe als Header-Höhe */
  --alert-bg-milestone: rgba(59, 221, 72, 0.15);
  --alert-bg-info: rgba(52, 215, 230, 0.15);
  --alert-bg-warning: rgba(251, 241, 107, 0.15);
  --alert-border-milestone: var(--accent-green);
  --alert-border-info: var(--accent-blue);
  --alert-border-warning: var(--accent-yellow);
  --alert-z-index: 1500;
  /* Konsistent mit dem z-index in alert-bar.css */

  /* Shadow */
  --box-shadow: 0 3px 5px rgba(100, 100, 100, 0.6);

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-small: 8px;
  --spacing-medium: 16px;
  --spacing-large: 24px;

  /* Touch Targets */
  --min-touch-size: 44px;

  /* Border */
  --border-radius: 10px;
  --border-radius-small: 5px;

  /* NEU: Safe Area Insets als Variablen */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
}

/* Reset und Basis-Styling */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Poppins', sans-serif;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--primary-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scrollbars verstecken aber Funktionalität erhalten */
@media (max-width: 768px) {
  html {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE und Edge */
  }

  html::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari und Opera */
  }

  /* Horizontalen Scroll verhindern */
  body {
    overflow-x: hidden;
    width: 100%;
  }
}

/* Button Reset */
button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Status Utility Classes */
.positive {
  color: var(--accent-green);
}

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

.chf {
  color: var(--accent-yellow);
}

/* Text Alignment */
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

/* Font Weights */
.font-normal {
  font-weight: 400;
}

.font-bold {
  font-weight: 700;
}

/* Text Colors */
.text-primary {
  color: var(--text-primary);
}

.text-secondary {
  color: var(--text-secondary);
}

/* Zusätzliche Textfarbe für accent-blue */
.text-accent {
  color: var(--accent-blue);
}

/* Text Sizes */
.text-lg {
  font-size: 1.5em;
  /* h2-ähnlich */
}

.text-md {
  font-size: 1.17em;
  /* h3-ähnlich */
}

.text-base {
  font-size: 1em;
  /* Standard */
}

/* Margins */
.mt-1 {
  margin-top: var(--spacing-xs);
}

.mt-2 {
  margin-top: var(--spacing-small);
}

.mt-3 {
  margin-top: var(--spacing-medium);
}

.mt-4 {
  margin-top: var(--spacing-large);
}

.mb-1 {
  margin-bottom: var(--spacing-xs);
}

.mb-2 {
  margin-bottom: var(--spacing-small);
}

.mb-3 {
  margin-bottom: var(--spacing-medium);
}

.mb-4 {
  margin-bottom: var(--spacing-large);
}

/* Flex Utilities */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

/* Flexbox-Erweiterungen für gemischte Ausrichtung */
.flex-1 {
  flex: 1;
}

.gap-1 {
  gap: var(--spacing-xs);
}

.gap-2 {
  gap: var(--spacing-small);
}

/* Visibility */
.hidden {
  display: none;
}

.visible {
  display: block;
}

/* Loading Indicator Styles */
.loading-indicator {
  padding: 2rem;
  color: var(--text-secondary, #888);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 150px;
  padding-top: 15vh;
}

/* Optional: Bild im Ladeindikator stylen */
.loading-indicator__image {
  max-width: 100px;
  height: auto;
  animation: shake 0.5s ease-in-out infinite;
}

/* Keyframes für die Shake-Animation */
@keyframes shake {

  0%,
  100% {
    transform: translateX(0) translateY(0) rotate(0);
  }

  25% {
    transform: translateX(-2px) translateY(-1px) rotate(-1deg);
    /* Leichtes Wackeln und Drehen */
  }

  50% {
    transform: translateX(2px) translateY(1px) rotate(1deg);
  }

  75% {
    transform: translateX(-1px) translateY(-2px) rotate(-0.5deg);
  }
}

/* Wrapper für die Flug-Animation */
.loading-indicator__rocket-wrapper {
  /* Startposition ist die Mitte (durch Flexbox des Parents) */
  /* Langsame, lineare Animation nach rechts oben */
  animation: fly 6s linear infinite;
  /* Dauer an die Ladezeit anpassen? */
}

/* Keyframes für die Flug-Animation */
@keyframes fly {
  0% {
    transform: translate(0, 0);
    /* Start in der Mitte */
  }

  100% {
    /* Bewegung verdoppelt */
    transform: translate(60px, -40px);
    /* Weiter nach rechts oben */
  }
}


/* --- Header Spinner Styles --- */
/* Standard Spinner Farbe (wenn keine Hard-Refresh-Klasse gesetzt ist) */
.header__refresh:not(.header__refresh--hard-refresh) i.fa-spinner {
  color: var(--accent-yellow);
  /* Gelb für normalen/Soft Refresh */
}

/* Spinner Farbe, wenn Hard Refresh angefordert wurde */
.header__refresh.header__refresh--hard-refresh i.fa-spinner {
  color: var(--accent-blue);
  /* Blau für Hard Refresh */
}

/* ============================================= */
/* chf-total-box Area Styles                      */
/* ============================================= */

#chf-total-box-wrapper {
  /* Initial versteckt, wird per JS gesteuert */
  display: none;

  /* Positionierung: Sticky UNTER dem Header */
  position: sticky;
  top: calc(var(--safe-area-top) + var(--min-touch-size));
  z-index: 999;

  /* Wrapper soll visuell unsichtbar sein */
  background: transparent;
  pointer-events: none;

  /* Transparenter top-border verhindert das Hochscrollen */
  border-top: var(--spacing-large) solid transparent;
}

#chf-total-box {
  /* Erlaubt Klicks auf dem eigentlichen chf-total-box div */
  pointer-events: auto;

  /* Layout */
  max-width: 450px;
  margin: 0 auto var(--spacing-large);
  left: var(--spacing-medium);
  right: var(--spacing-medium);

  /* Aussehen */
  background-color: var(--box-background);
  border: 1px solid var(--menu-border);
  border-radius: var(--border-radius);
  padding: var(--spacing-small) var(--spacing-medium);

  /* Flexbox für Inhalt */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* Wrapper für Label und Betrag */
.chf-total-box__main-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--spacing-small);
  width: 100%;
}

/* Styling für die Währungszeile */
.chf-total-box__currency {
  font-size: 0.9em;
  color: var(--text-secondary);
  text-align: center;
  width: 100%;
}

/* Styles für das Label (ähnlich card__profit-label) */
.chf-total-box__label {
  font-size: 1.17em;
  font-weight: 700;
  color: var(--accent-blue);
}

.chf-total-box__label::before {
  font-family: "Font Awesome 6 Free";
  content: "\f515";
  font-weight: 900;
  margin-right: 4px;
}

/* Styles für den Betrag (ähnlich card__profit-amount) */
.chf-total-box__amount {
  font-size: 1.17em;
  font-weight: 700;
  color: var(--text-primary);
}

/* Spezifische CHF-Farbe für den Betrag (wie bei Karten) */
.chf-total-box__amount.chf {
  color: var(--accent-yellow);
}

/* Styles für die Devisenkurse */
.chf-total-box__currency {
  font-size: 1em;
  color: var(--text-secondary);
}

/* Safe Area Padding für den Body */
body {
  /* Standard-Padding beibehalten oder setzen */
  padding-top: 0;
  /* Wird durch Spacer/Header abgedeckt */
  /* Verwende die definierten Variablen */
  padding-bottom: var(--safe-area-bottom);
  padding-left: var(--safe-area-left);
  padding-right: var(--safe-area-right);
  box-sizing: border-box;
  /* Sicherstellen, dass Padding eingerechnet wird */
}

/* Layout Anpassung für fixierten Spacer und sticky Header */
#stock-list {
  /* Füge oben Padding hinzu, das NUR der Höhe des Spacers entspricht. */
  /* Der Abstand zum Header/sticky chf-total-box wird durch margins geregelt. */
  padding-top: var(--safe-area-top);
  /* Stelle sicher, dass das Padding nicht das Box-Modell unerwartet ändert */
  box-sizing: border-box;
}