/* =====================================================
   V3: Glass Dashboard "Leicht"
   Baut auf V2 (graphit, body.glass) auf. Reine CSS-Deltas,
   ausschliesslich auf body.v3 gescoped. Laedt NACH v2.css,
   gewinnt bei gleicher Spezifitaet ueber Source-Order.
   V1 (body ohne glass) und V2 (body.glass ohne v3) bleiben
   unberuehrt.

   Ziel: weniger "DOS-Eingabefelder", mehr Luft, weiche
   schwebende Felder statt harter Kaesten. Struktur (HTML/JS)
   und Farbwelt von V2 bleiben unangetastet.

   Prinzip: Tiefe durch Flaeche (--surface-2, heller als die
   Karte) + weichen Schatten, NICHT durch Umrandung. Der Rahmen
   erscheint nur im Fokus -> genau EIN Feld leuchtet, der Rest
   tritt zurueck.

   MUSS-Regeln (Tester): input font-size wird NICHT angefasst
   (16px kommt aus main.css -> kein iOS-Zoom). Touch-Target
   >= 44px. Label bleibt sichtbar. Kontrast hell + dunkel lesbar.
   ===================================================== */

/* ---------------------------------------------------------
   1) EINGABEFELDER: weiche gefuellte Flaeche statt harter Box
   Ruhezustand rahmenlos (border: 1px solid transparent -> kein
   Layout-Shift beim Fokus, nur border-color wechselt). Groesserer
   Radius + mehr Innen-Luft. Tiefe ueber Fuellung + weichen
   Schatten (in DUNKEL traegt v.a. die hellere Flaeche).
   font-size wird BEWUSST nicht gesetzt (bleibt 16px).
   --------------------------------------------------------- */
body.v3 input,
body.v3 select,
body.v3 textarea {
  padding: 14px 14px;
  min-height: 48px;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: 14px;
  /* faint bottom line (Ruhe) + weicher Schwebe-Schatten, kein harter Rahmen */
  box-shadow: inset 0 -1px 0 var(--border), 0 2px 8px rgba(0, 0, 0, .05);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* Fokus = einziges starkes Signal: Akzent-Rahmen + weicher Ring.
   Hintergrund wird etwas solider, damit das aktive Feld ruhig
   hervortritt. */
body.v3 input:focus,
body.v3 select:focus,
body.v3 textarea:focus {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}

body.v3 textarea { min-height: 96px; }

/* HELL: das Feld war heller als die Karte und dadurch praktisch unsichtbar.
   Jetzt leicht ABGESETZT (dunkler als die weisse Karte) plus sichtbare Kante,
   damit man auf den ersten Blick erkennt: hier wird etwas eingegeben. */
body.v3.theme-light input,
body.v3.theme-light select,
body.v3.theme-light textarea {
  background: rgba(18, 26, 44, .055);
  border-color: rgba(18, 26, 44, .12);
  box-shadow: inset 0 -1px 0 rgba(18, 26, 44, .14), 0 1px 2px rgba(30, 40, 70, .04);
}
body.v3.theme-light input:hover,
body.v3.theme-light select:hover,
body.v3.theme-light textarea:hover { background: rgba(18, 26, 44, .075); }
body.v3.theme-light input:focus,
body.v3.theme-light select:focus,
body.v3.theme-light textarea:focus {
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Gleiches Prinzip fuer die schmalen Felder und das Wochenraster. */
body.v3.theme-light .wg-cell,
body.v3.theme-light .live-row input,
body.v3.theme-light .rep-field,
body.v3.theme-light .goal-input {
  background: rgba(18, 26, 44, .06);
  border-color: rgba(18, 26, 44, .13);
}
body.v3.theme-light .wg-cell:focus,
body.v3.theme-light .live-row input:focus { background: #fff; border-color: var(--accent); }

/* Platzhalter in beiden Themes lesbar (leichter als der Wert,
   aber klar ueber 3:1 auf der halbtransparenten Fuellung -> --text-dim
   statt --text-faint, sonst zu blass in DUNKEL). */
body.v3 input::placeholder,
body.v3 textarea::placeholder {
  color: var(--text-dim);
}

/* ---------------------------------------------------------
   1b) SCHMALE FELDER: weiche Optik uebernehmen, aber Padding
   zuruecknehmen, sonst sprengt 14px-Horizontal-Padding die
   schmalen Felder. Explizite Klassen sind spezifischer als die
   generische input-Regel. font-size bleibt 16px, Touch >= 44px.
   --------------------------------------------------------- */

/* Satz-Wiederholungen (64px breit) */
body.v3 .rep-field { padding: 14px 8px; }

/* Ziel-Eingabe (72px breit) */
body.v3 .goal-input { padding: 14px 8px; }

/* Live-Satz-Eingabe (Gewicht/Wdh zwischen den Saetzen): wird
   verschwitzt aus Armlaenge getroffen -> starke Fuellung als
   klare Trefferflaeche, rahmenlos in Ruhe, min-height sichert
   den Touch-Target trotz schlankem Padding. */
body.v3 .live-row input {
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 12px 4px;
  min-height: 46px;
  box-shadow: none;
}
body.v3 .live-row input:focus {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ---------------------------------------------------------
   2) LABELS: leise statt laut. Kein uppercase / kein
   letter-spacing / kein 700. Weich in --text-dim. Label bleibt
   sichtbar (nie als Platzhalter versteckt).
   --------------------------------------------------------- */
body.v3 .form-group label,
body.v3 .form-group .form-label,
body.v3 .label-strong {
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-dim);
}

/* Sektions-Titel entschaerfen (uppercase-800 = Admin-Signal). */
body.v3 .form-section h2 {
  font-weight: 600;
  font-size: 16px;
  text-transform: none;
  letter-spacing: -.01em;
  color: var(--text);
}

/* Live-Kopfzeile der Satz-Tabelle ebenfalls entschaerfen. */
body.v3 .live-row-head span {
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-dim);
}

/* ---------------------------------------------------------
   3) MEHR LUFT zwischen Feldern (4px-Raster, kein Tabellen-Gefuehl).
   Luft kommt aus Abstaenden, nicht aus kleineren Klickflaechen.
   --------------------------------------------------------- */
body.v3 .form-group { margin-bottom: 20px; }
body.v3 .track-grid,
body.v3 .energy-inputs { gap: 16px; }
body.v3 .energy-inputs .form-group { margin-bottom: 20px; }

/* ---------------------------------------------------------
   4) WOCHENRASTER ENTKASTELN: kein aeusserer Rahmen, kein
   Zellgitter. Zellen schweben luftig auf der Karte, groesserer
   Gap gegen die Excel-Optik. Die Karte bleibt die EINE
   begrenzende Ebene.
   --------------------------------------------------------- */
body.v3 .week-grid {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  gap: 8px;
}

/* wg-cell ist ein <input type=number>: explizit von der
   generischen Feld-Regel abkoppeln (schmal halten, sonst sprengt
   das Padding die 7 Spalten auf 375px). Spezifitaet (0,2,1)
   schlaegt body.v3 input (0,1,1). font-size bleibt 16px,
   min-height sichert den Touch-Target. */
body.v3 .wg-cell {
  min-height: 46px;
  padding: 8px 1px;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: 12px;
  box-shadow: none;
}
body.v3 .wg-cell:focus {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* Zeilen-Label links: entkastet, kein Rahmen im Ruhezustand. */
body.v3 .wg-rowlabel {
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: 12px;
}
body.v3 .wg-rowlabel:hover {
  color: var(--accent);
  border-color: transparent;
  background: var(--accent-soft);
}

/* Etwas mehr Luft zwischen gestapelten Satz-Zeilen (nicht in
   den Feldern selbst). */
body.v3 .set-row { margin-bottom: 12px; }