/* Interaktive Rechner in App-Optik.
   Die Farbwerte stammen aus shared/.../theme/Color.kt (LightGetALifeColors), die
   Schrift ist Nunito wie im Classic-Theme. Abweichend von der App fuehrt hier das
   Violett (secondary); Pink (primary) ist nur Akzent fuer "ueber dem Ziel". */

.gal-calc {
  --gal-primary: #D65DB1;
  --gal-primary-container: #FFD8ED;
  --gal-on-primary-container: #3E0028;
  --gal-secondary: #5D48E7;
  --gal-secondary-container: #E4DFFF;
  --gal-on-secondary-container: #170065;
  --gal-surface: #FFF8F9;
  --gal-on-surface: #1C1B1E;
  --gal-surface-variant: #F0DEE6;
  --gal-on-surface-variant: #4D444A;
  --gal-outline: #7F747B;
  --gal-outline-variant: #D3C2CA;
  --gal-success: #82B73E;
  --gal-warning: #DFA41A;
  --gal-error: #BA1A1A;
  --gal-surface-violet: #EFECFF;
  --gal-track: rgba(93, 72, 231, 0.1);

  --gal-radius: 20px;
  --gal-radius-sm: 12px;
  --gal-gap: 1rem;

  font-family: Nunito, "DM Sans", system-ui, sans-serif;
  background: var(--gal-surface);
  color: var(--gal-on-surface);
  border: 1px solid var(--gal-outline-variant);
  border-radius: var(--gal-radius);
  padding: 1.5rem;
  margin: 2rem 0;
}

.gal-calc *,
.gal-calc *::before,
.gal-calc *::after {
  box-sizing: border-box;
}

.gal-calc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.gal-calc-head h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  color: var(--gal-on-surface);
}

.gal-calc-badge {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: var(--gal-secondary-container);
  color: var(--gal-on-secondary-container);
  white-space: nowrap;
}

/* Eingaben */

.gal-field {
  margin-bottom: 1.25rem;
}

.gal-field > label,
.gal-field-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--gal-on-surface-variant);
}

.gal-money {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  border: 2px solid var(--gal-outline-variant);
  border-radius: var(--gal-radius-sm);
  padding: 0.625rem 0.875rem;
  transition: border-color 0.15s ease;
}

.gal-money:focus-within {
  border-color: var(--gal-secondary);
}

.gal-money input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--gal-on-surface);
  -moz-appearance: textfield;
  appearance: textfield;
}

.gal-money input::-webkit-outer-spin-button,
.gal-money input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.gal-money .gal-currency {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--gal-on-surface-variant);
}

.gal-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.gal-choice {
  border: 2px solid var(--gal-outline-variant);
  background: #fff;
  color: var(--gal-on-surface-variant);
  border-radius: 999px;
  padding: 0.5rem 0.875rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.gal-choice:hover {
  border-color: var(--gal-secondary);
}

.gal-choice[aria-pressed="true"] {
  background: var(--gal-secondary-container);
  border-color: var(--gal-secondary);
  color: var(--gal-on-secondary-container);
}

.gal-choice:focus-visible {
  outline: 3px solid var(--gal-secondary);
  outline-offset: 2px;
}

/* Ergebnis */

.gal-result {
  background: var(--gal-secondary-container);
  color: var(--gal-on-secondary-container);
  border-radius: var(--gal-radius);
  padding: 1.25rem;
  margin-top: 1.5rem;
}

.gal-result-label {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.75;
}

.gal-result-value {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.15;
  margin: 0.25rem 0 0.5rem;
  font-variant-numeric: tabular-nums;
}

.gal-result-note {
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 0;
}

.gal-result-note strong {
  font-weight: 700;
}

.gal-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.gal-fact {
  background: rgba(255, 255, 255, 0.6);
  border-radius: var(--gal-radius-sm);
  padding: 0.75rem 0.875rem;
}

.gal-fact-value {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.gal-fact-label {
  font-size: 0.75rem;
  line-height: 1.35;
  opacity: 0.8;
}

/* Fortschrittsbalken mit der Farbsemantik der App: grau = nichts zugewiesen,
   gelb = unterfinanziert, gruen = Ziel erreicht, rot = ueberzogen,
   pink = ueber dem Ziel, violett = reiner Anteil ohne Bewertung. */

.gal-bar {
  height: 10px;
  border-radius: 999px;
  background: var(--gal-track);
  overflow: hidden;
  margin: 0.5rem 0 0.375rem;
}

.gal-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 0.25s ease, background-color 0.25s ease;
}

.gal-bar-grey > span { background: var(--gal-outline-variant); }
.gal-bar-yellow > span { background: var(--gal-warning); }
.gal-bar-green > span { background: var(--gal-success); }
.gal-bar-red > span { background: var(--gal-error); }
.gal-bar-primary > span { background: var(--gal-primary); }
.gal-bar-violet > span { background: var(--gal-secondary); }

/* Umschlag-Demonstrator */

.gal-assignable {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--gal-secondary-container);
  color: var(--gal-on-secondary-container);
  border-radius: var(--gal-radius-sm);
  padding: 0.875rem 1rem;
  margin-bottom: 1.25rem;
  /* Der Seiten-Header ist selbst sticky (16px + 80px hoch), deshalb erst darunter kleben. */
  position: sticky;
  top: 6.5rem;
  z-index: 1;
}

.gal-assignable.is-zero {
  background: var(--gal-success);
  color: #fff;
}

.gal-assignable-label {
  font-size: 0.8125rem;
  font-weight: 700;
}

.gal-assignable-value {
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.gal-group-name {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gal-on-surface-variant);
  margin: 1.25rem 0 0.5rem;
}

.gal-envelope {
  background: #fff;
  border: 1px solid var(--gal-outline-variant);
  border-radius: var(--gal-radius-sm);
  padding: 0.75rem 0.875rem;
  margin-bottom: 0.5rem;
}

.gal-envelope-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.gal-envelope-name {
  font-size: 0.9375rem;
  font-weight: 700;
}

.gal-envelope-available {
  font-size: 0.9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.gal-envelope-available.is-negative { color: var(--gal-error); }
.gal-envelope-available.is-funded { color: var(--gal-success); }

.gal-envelope-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.gal-envelope-controls input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: var(--gal-secondary);
}

.gal-envelope-assigned {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--gal-on-surface-variant);
  font-variant-numeric: tabular-nums;
  min-width: 5.5em;
  text-align: right;
}

.gal-envelope-hint {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--gal-on-surface-variant);
  margin: 0.25rem 0 0;
}

/* Sinking Funds: Posten mit Betrag, Laufzeit und errechneter Rate */

.gal-sf-row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  background: #fff;
  border: 1px solid var(--gal-outline-variant);
  border-radius: var(--gal-radius-sm);
  padding: 0.75rem 0.875rem;
  margin-bottom: 0.5rem;
}

.gal-sf-name {
  flex: 1 1 8rem;
  font-size: 0.9375rem;
  font-weight: 700;
}

.gal-sf-input {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--gal-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.gal-sf-input input {
  width: 5.5rem;
  border: 2px solid var(--gal-outline-variant);
  border-radius: 8px;
  padding: 0.3125rem 0.5rem;
  font: inherit;
  font-size: 0.9375rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gal-on-surface);
  -moz-appearance: textfield;
  appearance: textfield;
}

.gal-sf-input input::-webkit-outer-spin-button,
.gal-sf-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.gal-sf-input input:focus {
  outline: 0;
  border-color: var(--gal-secondary);
}

.gal-sf-rate {
  flex: 0 0 auto;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--gal-on-secondary-container);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.gal-sf-del {
  border: 0;
  background: transparent;
  color: var(--gal-on-surface-variant);
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.25rem 0.375rem;
  cursor: pointer;
  border-radius: 8px;
}

.gal-sf-del:hover { background: var(--gal-surface-violet); }

.gal-sf-del:focus-visible {
  outline: 3px solid var(--gal-secondary);
  outline-offset: 2px;
}

.gal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.gal-btn {
  border: 0;
  border-radius: 999px;
  padding: 0.625rem 1.125rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  background: var(--gal-surface-violet);
  color: var(--gal-on-secondary-container);
  transition: filter 0.15s ease;
}

.gal-btn:hover { filter: brightness(0.96); }

.gal-btn-primary {
  background: var(--gal-secondary);
  color: #fff;
}

.gal-btn:focus-visible {
  outline: 3px solid var(--gal-secondary);
  outline-offset: 2px;
}

.gal-calc-foot {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--gal-on-surface-variant);
  margin: 1.25rem 0 0;
}

.gal-calc noscript {
  display: block;
  font-size: 0.9375rem;
  color: var(--gal-on-surface-variant);
}

@media (max-width: 480px) {
  .gal-calc { padding: 1.125rem; }
  .gal-result-value { font-size: 1.875rem; }
}