/* heute-view.css — Copilot-Startseite. 2026-06-15 */

/* ── Header ──────────────────────────────────────────────────────── */
.heute-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-4) var(--space-2);
}
.heute-header__datum {
  font-family: var(--font-family-serif, Georgia, serif);
  font-style: italic;
  font-size: clamp(1.2rem, 3.5vw, 1.75rem);
  color: var(--foreground);
  margin: 0;
}

/* ── Plus-Button ─────────────────────────────────────────────────── */
.heute-plus {
  background: var(--primary, oklch(0.62 0.18 250));
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px oklch(0.62 0.18 250 / 0.35);
  transition: transform 0.1s;
  flex-shrink: 0;
}
.heute-plus:active { transform: scale(0.93); }

/* ── Familien-Zeile ──────────────────────────────────────────────── */
.heute-familien-zeile {
  margin: 0 var(--space-4) var(--space-3);
  background: var(--julia-tint);
  border: 1px solid var(--julia);
  border-radius: var(--radius-lg, 0.75rem);
  padding: var(--space-2) var(--space-3);
}
.heute-familien-zeile__label {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--julia-strong);
  margin-bottom: var(--space-2);
}
.heute-familien-events {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ── Familien-Chip ───────────────────────────────────────────────── */
.heute-familien-chip {
  border-left: 2px solid var(--chip-farbe, var(--border-strong));
  border-radius: 0 var(--radius-md, 0.5rem) var(--radius-md, 0.5rem) 0;
  padding: var(--space-1) var(--space-2);
}
.heute-familien-chip--geburtstag {
  --chip-farbe: oklch(0.65 0.25 340);
  background: oklch(0.65 0.25 340 / 0.08);
}
.heute-familien-chip--reise {
  --chip-farbe: oklch(0.62 0.18 250);
  background: oklch(0.62 0.18 250 / 0.08);
}
.heute-familien-chip__typ {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--chip-farbe);
}
.heute-familien-chip__titel {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--foreground);
}

/* ── Personen-Grid ───────────────────────────────────────────────── */
.heute-personen-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  padding: 0 var(--space-4) var(--space-6);
}
@media (max-width: 900px) {
  .heute-personen-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .heute-personen-grid { grid-template-columns: 1fr; }
}

/* ── Personen-Spalte ─────────────────────────────────────────────── */
.heute-spalte__kopf {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-3);
}
.heute-spalte__avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}
.heute-spalte__name {
  font-weight: 600;
  font-size: var(--font-size-sm, 0.875rem);
}

/* ── Item ────────────────────────────────────────────────────────── */
.heute-item {
  border-left: 2px solid var(--item-farbe, var(--border-strong));
  border-radius: 0 var(--radius-md, 0.5rem) var(--radius-md, 0.5rem) 0;
  padding: var(--space-1) var(--space-2);
  margin-bottom: var(--space-2);
  cursor: pointer;
  transition: opacity 0.12s;
}
.heute-item:hover { opacity: 0.8; }

.heute-item__typ {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--item-farbe);
  margin-bottom: 2px;
}
.heute-item__titel {
  font-size: var(--font-size-sm, 0.875rem);
  line-height: 1.3;
  color: var(--foreground);
}
.heute-item__fortschritt {
  display: inline-block;
  background: oklch(1 0 0 / 0.06);
  border-radius: var(--radius-sm, 0.25rem);
  padding: 1px 5px;
  font-size: 0.6rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Item-Typ-Varianten */
/* Termin — bleibt Blau, mehr Sättigung */
.heute-item--termin {
  --item-farbe: oklch(0.62 0.18 250);
  background: oklch(0.62 0.18 250 / 0.14);
}
/* Aufgabe — Amber statt Grau (unterscheidbar von Termin/Blau) */
.heute-item--aufgabe {
  --item-farbe: oklch(0.60 0.20 55);
  background: oklch(0.60 0.20 55 / 0.14);
}
.heute-item--in-bearbeitung {
  --item-farbe: oklch(0.70 0.15 60);
  background: oklch(0.70 0.15 60 / 0.08);
}
/* Erledigt — bleibt Grün */
.heute-item--erledigt {
  --item-farbe: oklch(0.60 0.15 150);
  background: oklch(0.60 0.15 150 / 0.10);
  opacity: 0.55;
}
.heute-item--erledigt .heute-item__titel {
  text-decoration: line-through;
  color: var(--text-muted);
}
/* Geburtstag-Typ (falls in Zukunft in Personen-Spalten erlaubt) */
.heute-item--geburtstag {
  --item-farbe: oklch(0.55 0.20 340);
  background: oklch(0.65 0.20 340 / 0.12);
}
.heute-item--geburtstag .heute-item__typ {
  color: var(--item-farbe);
}

/* ── Detail-Drawer ───────────────────────────────────────────────── */
.heute-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: oklch(0 0 0 / 0.45);
  /* intentional: above all named z-index tokens (max: --z-konfetti = 90) */
  z-index: 200;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.heute-drawer-backdrop.ist-offen {
  opacity: 1;
  pointer-events: auto;
}

.heute-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(400px, 100vw);
  background: var(--card);
  border-left: 1px solid var(--border-strong);
  /* intentional: above all named z-index tokens (max: --z-konfetti = 90) */
  z-index: 201;
  padding: var(--space-5);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
.heute-drawer.ist-offen { transform: translateX(0); }

@media (max-width: 600px) {
  .heute-drawer {
    top: auto; right: 0; left: 0; bottom: 0;
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--border-strong);
    border-radius: var(--radius-xl, 1.25rem) var(--radius-xl, 1.25rem) 0 0;
    padding: var(--space-5) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    max-height: 85vh;
  }
  .heute-drawer.ist-offen { transform: translateY(0); }
}

.heute-drawer__kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.heute-drawer__schliessen {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 1.25rem;
  padding: var(--space-1); line-height: 1;
}
.heute-drawer__typ-badge {
  font-size: var(--font-size-xs); font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: var(--space-1);
}
.heute-drawer__titel {
  font-size: 1.1rem; font-weight: 600; color: var(--foreground); margin: 0;
}

.heute-drawer__abschnitt {
  font-size: var(--font-size-xs); font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-muted);
  margin: var(--space-3) 0 var(--space-2);
}

.heute-drawer__status-gruppe {
  display: flex; gap: var(--space-2); margin-bottom: var(--space-2);
}
.heute-drawer__status-btn {
  flex: 1; padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); background: none; cursor: pointer;
  font-size: var(--font-size-xs); font-weight: 600; color: var(--text-muted);
  transition: background 0.1s, color 0.1s;
}
.heute-drawer__status-btn.aktiv {
  background: var(--primary); color: #fff; border-color: var(--primary);
}

.heute-drawer__notiz {
  width: 100%; min-height: 80px;
  background: var(--secondary, oklch(0.2 0.01 60));
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-2); color: var(--foreground);
  font-size: var(--font-size-sm); resize: vertical;
  font-family: inherit; box-sizing: border-box;
  margin-bottom: var(--space-2);
}

.heute-drawer__aktion {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%; padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  background: var(--secondary, oklch(0.2 0.01 60));
  border: none; border-radius: var(--radius-md);
  cursor: pointer; font-size: var(--font-size-sm);
  color: var(--foreground); text-align: left;
}
.heute-drawer__aktion:hover { opacity: 0.85; }
.heute-drawer__aktion-icon { color: var(--primary); }

.heute-drawer__kette-item {
  border-left: 2px solid var(--border);
  padding: var(--space-1) var(--space-3);
  margin-bottom: var(--space-2);
  font-size: var(--font-size-xs); color: var(--text-secondary);
}
.heute-drawer__kette-item--folge { border-left-color: oklch(0.62 0.18 250); }

@media (prefers-reduced-motion: reduce) {
  .heute-plus,
  .heute-item,
  .heute-drawer-backdrop,
  .heute-drawer,
  .heute-drawer__status-btn,
  .heute-drawer__aktion {
    transition: none;
  }
}