/**
 * styles.css - Hausaufgaben-Mini-PWA
 * ---------------------------------------------------------------------------
 * Bewusst OHNE folgende, auf iOS 9.3.5 (Safari 9, WebKit von 2015/2016)
 * nicht unterstützte CSS-Features:
 *
 *   - CSS Custom Properties (var(--x))    -> ab Safari 9.1 / iOS 9.3, aber
 *     nicht in jeder 9.x-Unterversion zuverlässig - daher überall feste
 *     Farbwerte statt einer Variablen-Zentrale.
 *   - Flexbox "gap"                       -> erst ab Safari 14.1. Abstände
 *     stattdessen über margin auf die Kind-Elemente.
 *   - CSS Grid                            -> erst ab Safari 10.1. Layout
 *     komplett über Flexbox (Spalten/Zeilen) gelöst.
 *   - clamp()/min()/max()                 -> erst ab Safari 11.1/13.1. Feste
 *     rem-Werte plus eine einzelne @media-Breakpoint-Anpassung für Tablet/
 *     Desktop-Breiten.
 *   - :focus-visible                      -> erst ab Safari 15.4. Normales
 *     :focus wird verwendet (etwas großzügiger sichtbar, aber funktional
 *     für alle Eingabearten inkl. Tastatur/Switch-Control).
 *
 * Alle hier genutzten Eigenschaften (Flexbox ohne gap, border-radius,
 * box-shadow, einfache Transitions, System-Schriftstapel) sind seit
 * mindestens iOS 7/8 zuverlässig unterstützt.
 */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: #0b0f1a;
  color: #eef1f6;
  font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
}

/* Größere Touch-Targets + kein blaues Antipp-Overlay auf iOS/Android */
button, a, input {
  -webkit-tap-highlight-color: transparent;
}

h1 { font-size: 1.5rem; margin: 0 0 4px 0; font-weight: 700; }
h2 { font-size: 1.05rem; margin: 0; font-weight: 600; }

.screen {
  min-height: 100%;
  padding: 24px 16px 48px 16px;
}

/* ---------------------------------------------------------------- Login */

#screen-login {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.card {
  background: #131826;
  border-radius: 18px;
  padding: 28px 22px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.app-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #1c2438;
  color: #7db2ff;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  margin-bottom: 14px;
}

.subtitle {
  color: #97a1b8;
  margin: 0 0 22px 0;
  font-size: 0.95rem;
}

.field {
  display: block;
  margin-bottom: 16px;
}

.field span {
  display: block;
  font-size: 0.85rem;
  color: #97a1b8;
  margin-bottom: 6px;
}

.field input {
  width: 100%;
  padding: 14px 14px;
  border-radius: 12px;
  border: 1px solid #2a3346;
  background: #0b0f1a;
  color: #eef1f6;
  font-size: 17px; /* verhindert Auto-Zoom beim Fokussieren auf iOS */
}

.field input:focus {
  outline: none;
  border-color: #4c8dff;
}

.btn-primary {
  width: 100%;
  padding: 15px 16px;
  border: none;
  border-radius: 12px;
  background: #3d7cff;
  color: #ffffff;
  font-size: 17px;
  font-weight: 600;
  margin-top: 4px;
}

.btn-primary:active {
  background: #2f66d9;
}

.btn-primary[disabled] {
  opacity: 0.6;
}

.error-text {
  color: #ff7a7a;
  font-size: 0.9rem;
  margin: 14px 0 0 0;
}

/* ----------------------------------------------------------------- Home */

.topbar {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin-bottom: 18px;
}

.topbar-actions {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

.btn-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: none;
  background: #131826;
  color: #cfd6e6;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  margin-left: 10px;
}

.btn-icon:active {
  background: #1c2438;
}

.status-banner {
  background: #2a2210;
  color: #ffd479;
  border: 1px solid #55471c;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.9rem;
  margin-bottom: 18px;
}

.status-banner.status-banner--error {
  background: #2a1414;
  color: #ff9a9a;
  border-color: #552020;
}

.status-retry {
  display: block;
  margin-top: 8px;
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.85rem;
  font-weight: 600;
}

.list-section {
  margin-bottom: 26px;
}

.section-title {
  margin-bottom: 10px;
  color: #97a1b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.8rem;
}

.empty-state {
  color: #6b7488;
  font-size: 0.92rem;
  padding: 4px 2px;
}

.list { }

.item-card {
  background: #131826;
  border-radius: 14px;
  padding: 14px 14px;
  margin-bottom: 10px;
}

.item-top {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin-bottom: 4px;
}

.item-fach {
  font-weight: 700;
  font-size: 1rem;
}

.item-teacher {
  color: #97a1b8;
  font-size: 0.85rem;
  margin-left: 6px;
}

.item-due {
  font-size: 0.78rem;
  padding: 3px 9px;
  border-radius: 999px;
  background: #1c2438;
  color: #97a1b8;
  white-space: nowrap;
  margin-left: 8px;
}

.item-due--today {
  background: #3a2a10;
  color: #ffb94d;
}

.item-due--overdue {
  background: #3a1616;
  color: #ff7a7a;
}

.item-text {
  font-size: 0.95rem;
  color: #d3d9e6;
  margin: 6px 0 12px 0;
  white-space: pre-line;
}

.item-footer {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.item-done-label {
  color: #63d68a;
  font-size: 0.9rem;
  font-weight: 600;
}

.btn-toggle {
  border: none;
  border-radius: 10px;
  padding: 11px 16px;
  font-size: 0.92rem;
  font-weight: 600;
}

.btn-toggle--done {
  background: #234a30;
  color: #7be79b;
  width: 100%;
}

.btn-toggle--undo {
  background: transparent;
  color: #97a1b8;
  border: 1px solid #2a3346;
  padding: 8px 12px;
}

.btn-toggle[disabled] {
  opacity: 0.55;
}

/* --------------------------------------------------------- Breite Geräte */

@media (min-width: 720px) {
  .screen { padding-left: 32px; padding-right: 32px; }
  #screen-home { max-width: 640px; margin: 0 auto; width: 100%; }
}