/* Market State Indikator */
.market-state {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
  background-color: var(--accent-green);
  /* Default offen */
}

.market-state.closed {
  background-color: var(--accent-red);
}

.market-state.afterhours,
.market-state.after_hours,
.market-state.pre_market {
  background-color: var(--accent-yellow);
}

/* Stock Card Layout */
.card--stock .card-content {
  padding: var(--spacing-small);
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Sehr geringer Abstand zwischen Zeilen */
}

/* Header Row with Symbol and Market */
.card__stock-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  /* Kein extra Abstand */
}

.card__symbol {
  font-size: 1.5em;
  /* text-lg */
  font-weight: 700;
  color: var(--accent-blue);
  /* Blau für Symbol */
}

.card__market {
  display: flex;
  align-items: center;
}

.card__market-name {
  font-size: 1em;
}

/* Company Row */
.card__company-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: -10px;
  /* Negative margin to pull closer to header */
  margin-bottom: 0px;
}

.card__company {
  font-size: 1.17em;
  /* text-md */
  font-weight: 700;
  color: var(--text-primary);
}

.card__timestamp {
  font-size: 1.0em;
  color: var(--text-secondary);
}

/* Price Row - Combined with HI/LO */
.card__price-row {
  display: flex;
  justify-content: center;
  /* Statt flex-end -> Alle Elemente am rechten Rand */
  align-items: center;
  gap: 4px;
}

.card__price-label {
  font-size: 1.17em;
  font-weight: 700;
  color: var(--accent-blue);
}

.card__price-label::before {
  font-family: "Font Awesome 6 Free";
  content: "\f201";
  /* chart-line */
  font-weight: 900;
  margin-right: 4px;
}

.card__price-amount {
  font-size: 1.17em;
  /* text-md */
  font-weight: 700;
}

.card__price-percent {
  font-size: 1.17em;
  /* text-md */
  font-weight: 700;
}

/* Profit Row */
.card__profit-row {
  display: flex;
  justify-content: center;
  /* Statt flex-end -> Alle Elemente am rechten Rand */
  align-items: center;
  gap: 4px;
}

.card__profit-label {
  font-size: 1.17em;
  font-weight: 700;
  color: var(--accent-blue);
}

.card__profit-label::before {
  font-family: "Font Awesome 6 Free";
  content: "\f515";
  /* sack-dollar */
  font-weight: 900;
  margin-right: 4px;
}

.card__profit-amount {
  font-size: 1.17em;
  /* text-md */
  font-weight: 700;
}

.card__profit-percent {
  font-size: 1.17em;
  /* text-md */
  font-weight: 700;
}

/* Utility classes for positive/negative/CHF values */
.positive {
  color: var(--accent-green);
}

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

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

/* Details Card */
.card--details .card-content {
  padding: var(--spacing-small);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card__details-header {
  font-size: 1.5em;
  font-weight: 700;
  color: var(--accent-blue);
  margin-bottom: 4px;
}

.card__details-row {
  font-size: 1em;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.card__details-value {
  font-weight: 700;
}

/* HI/LO Werte mit Farben */
.card__details-value.hi {
  color: var(--accent-green);
}

.card__details-value.lo {
  color: var(--accent-red);
}

.card__details-value.blue {
  color: var(--accent-blue);
}

.card__details-company {
  font-size: 1.17em;
  font-weight: 700;
  color: var(--accent-blue);
}

/* Targets Card */
.card--targets .card-content {
  padding: var(--spacing-small);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card__targets-header {
  font-size: 1.5em;
  font-weight: 700;
  color: var(--accent-blue);
  margin-bottom: 4px;
}

.card__targets-row {
  display: flex;
  justify-content: space-between;
  font-size: 1.0em;
  color: var(--text-primary);
  margin-bottom: 4px;
  white-space: nowrap;
  /* Verhindert Umbrüche in iOS */
}

.card__targets-label {
  flex-shrink: 0;
  text-align: left;
  margin-right: 8px;
}

.card__targets-value {
  flex-grow: 1;
  text-align: right;
}

/* Einzelne Komponenten in flexibler Struktur */
.card__targets-price,
.card__targets-pricepercent,
.card__targets-profit,
.card__targets-profitpercent {
  font-weight: 700;
}

/* Trennlinie für Targets-Card */
.card__targets-divider {
  width: 100%;
  height: 1px;
  background-color: var(--text-secondary);
  margin: 8px 0;
  position: relative;
}

/* Optional: Text innerhalb der Trennlinie */
.card__targets-divider-label {
  position: absolute;
  top: -10px;
  left: 50%;
  /* Positioniere es in der Mitte */
  transform: translateX(-50%);
  /* Zentriere es perfekt */
  padding: 0 8px;
  background-color: var(--box-background);
  color: var(--text-secondary);
  font-size: 0.85em;
}

/* Minimaler Slider für Test */
.card__slider-section {
  /* margin: 12px 0; */
  /* padding: 8px 0; */
  margin: 0;
  padding: 0;
}

.card__slider-container {
  width: 90%;
  /* Erhöhte Breite für bessere Auflösung */
  margin: 12px auto;
  position: relative;
  /* Wichtig für absolute Positionierung des Markers */
  /* Optional: Padding hinzufügen, falls der Marker über den Rand hinausgeht */
  /* padding: 0 1px; */
}

/* NEU: Marker für aktuellen Kurs */
.card__slider-marker {
  position: absolute;
  top: -4px;
  /* Etwas über den Track */
  bottom: -4px;
  /* Etwas unter den Track */
  width: 2px;
  /* Breite der Linie */
  background-color: var(--accent-red);
  /* Farbe anpassen (z.B. Rot) */
  left: 50%;
  /* Standardposition, wird per JS überschrieben */
  transform: translateX(-50%);
  /* Zentrieren */
  z-index: 1;
  /* Unter dem Slider-Thumb, aber über dem Track */
  pointer-events: none;
  /* Verhindert Interaktion mit der Linie */
  display: none;
  /* Initial versteckt, wird per JS angezeigt */
  border-radius: 1px;
}


.card__slider-value {
  text-align: center;
  margin-bottom: 8px;
  font-weight: bold;
}

/* Basisstil für den Slider */
.card__slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: var(--text-secondary);
  border-radius: 3px;
}

/* Slider-Griff */
.card__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  background: var(--accent-blue);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--text-primary);
}

.card__slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  background: var(--accent-blue);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--text-primary);
}

/* Behalte die Wert-Formatierung bei */
.card__slider-price-value,
.card__slider-profit-value,
.card__slider-price-percent,
.card__slider-profit-percent {
  font-weight: bold;
}

/* Transactions Card */
.card--transactions .card-content {
  padding: var(--spacing-small);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card__transactions-header {
  font-size: 1.5em;
  font-weight: 700;
  color: var(--accent-blue);
  margin-bottom: 4px;
}

.card__transactions-row {
  display: flex;
  font-size: 1.0em;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.card__transaction-date {
  margin-right: 8px;
}

.card__transaction-type {
  font-weight: 700;
  margin-right: 8px;
}

.card__transaction-amount {
  margin-right: 8px;
}

.card__transaction-price {
  font-weight: 700;
}

/* Chart Card */
.card--chart .card-content {
  padding: 8px 4px;
  /* Reduziertes seitliches Padding */
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Reduzierter Abstand */
}

.card__chart-header {
  font-size: 1.5em;
  font-weight: 700;
  color: var(--accent-blue);
  margin-bottom: 4px;
  padding-left: var(--spacing-small);
}

.card__chart-image {
  width: 100%;
  display: block;
  /* Block statt flex für bessere Kontrolle */
}

.card__chart-img {
  width: 100%;
  /* Volle Breite statt max-width */
  height: auto;
  border-radius: 4px;
  display: block;
  /* Verhindert unerwünschte Abstände */
}

.card__chart-subtitle {
  font-size: 1.0em;
  color: var(--text-secondary);
  text-align: center;
  padding: 0 var(--spacing-small);
}