/* app.css — Layout der Anwendung (ergänzt tokens.css + styles.css) */

body { background: var(--bg-app); color: var(--text-primary); font-family: var(--font-sans); }

/* ── Topbar ──────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
}
.topbar__inner {
  max-width: 80rem; margin: 0 auto; padding: 0 var(--space-4);
  display: flex; align-items: center; gap: var(--space-4); min-height: 3.5rem;
}
.topbar__brand {
  display: flex; align-items: center; gap: var(--space-2);
  font-weight: 700; color: var(--c-primary-600); text-decoration: none;
  font-size: var(--fs-base); white-space: nowrap;
}
[data-theme="dark"] .topbar__brand { color: var(--c-primary-300); }

.mainnav { display: flex; gap: var(--space-1); flex: 1; min-width: 0; overflow-x: auto; }
.mainnav a {
  padding: var(--space-2) var(--space-3); border-radius: var(--r-md);
  color: var(--text-secondary); text-decoration: none; font-size: var(--fs-sm);
  white-space: nowrap; transition: background var(--t-fast) var(--ease);
}
.mainnav a:hover { background: var(--bg-hover); color: var(--text-primary); }
.mainnav a.active { background: var(--bg-primary-soft); color: var(--c-primary-600); font-weight: 600; }
[data-theme="dark"] .mainnav a.active { color: var(--c-primary-300); }

.topbar__actions { display: flex; align-items: center; gap: var(--space-2); }
.iconbtn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: var(--r-md); border: 0;
  background: transparent; color: var(--text-secondary); cursor: pointer;
}
.iconbtn:hover { background: var(--bg-hover); color: var(--text-primary); }
.iconbtn .badge {
  position: absolute; top: 2px; right: 2px; min-width: 1rem; height: 1rem;
  background: var(--c-danger-500); color: #fff; border-radius: 999px;
  font-size: 0.65rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
}

/* Nutzer-Menü */
.usermenu { position: relative; }
.usermenu__btn {
  display: flex; align-items: center; gap: var(--space-2); border: 0; background: transparent;
  cursor: pointer; padding: var(--space-1); border-radius: var(--r-md); color: var(--text-primary);
}
.usermenu__btn:hover { background: var(--bg-hover); }
.avatar {
  width: 2rem; height: 2rem; border-radius: 999px; background: var(--c-primary-500);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: 700; flex-shrink: 0; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar--sm { width: 1.6rem; height: 1.6rem; font-size: 0.6rem; }
.name-cell { display: inline-flex; align-items: center; gap: var(--space-2); }

/* Banner-Bild oben in einer Karte (Ausbildungsgang) */
.card-banner {
  margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-4);
  height: 6.5rem; overflow: hidden;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.card-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Breiter Banner-Streifen über einer Seite */
.page-banner { height: 9rem; overflow: hidden; border-radius: var(--r-lg); margin-bottom: var(--space-6); box-shadow: var(--shadow-sm); }
.page-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.usermenu__panel {
  position: absolute; right: 0; top: calc(100% + 0.4rem); min-width: 13rem;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: var(--space-2);
  display: none; z-index: 50;
}
.usermenu__panel.open { display: block; }
.usermenu__panel a, .usermenu__panel button {
  display: block; width: 100%; text-align: left; padding: var(--space-2) var(--space-3);
  border-radius: var(--r-sm); color: var(--text-primary); text-decoration: none;
  background: transparent; border: 0; font-size: var(--fs-sm); cursor: pointer;
}
.usermenu__panel a:hover, .usermenu__panel button:hover { background: var(--bg-hover); }
.usermenu__meta { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-2); }

/* ── Seiten-Layout ───────────────────────────────────────────────── */
.page { max-width: 80rem; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-12); }
.page--narrow { max-width: 46rem; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; }
.page-head h1 { font-size: var(--fs-2xl); font-weight: 700; }
.page-head .sub { color: var(--text-muted); font-size: var(--fs-sm); margin-top: var(--space-1); }
.section { margin-bottom: var(--space-8); }
.section > h2 { font-size: var(--fs-lg); font-weight: 600; margin-bottom: var(--space-4); }

.grid-cards { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.grid-2 { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }

/* Hilfetext-Kästen (beschreibender Text zu jedem Prozess) */
.hint-box {
  display: flex; gap: var(--space-3); background: var(--bg-primary-soft);
  border-radius: var(--r-md); padding: var(--space-4); margin-bottom: var(--space-5);
  color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.55;
}
.hint-box .ico { flex-shrink: 0; width: 1.1rem; height: 1.1rem; margin-top: 2px; color: var(--c-primary-600); }

/* Heartbeat-/System-Banner */
.sysbanner {
  background: var(--c-warning-500); color: #1e293b; padding: var(--space-2) var(--space-4);
  text-align: center; font-size: var(--fs-sm); font-weight: 600;
}
.sysbanner a { color: inherit; text-decoration: underline; }

/* ── Jahresübersicht (KW-Kacheln) ────────────────────────────────── */
.weekgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); gap: var(--space-2); }
.weekcell {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--space-2); border-radius: var(--r-md); text-decoration: none;
  border: 1px solid var(--border-subtle); background: var(--bg-surface);
  color: var(--text-primary); font-size: var(--fs-xs); transition: transform var(--t-fast) var(--ease);
}
.weekcell:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.weekcell .kw { font-weight: 700; }
.weekcell .sym { font-size: 1rem; line-height: 1; }
.weekcell--freigegeben { background: var(--bg-success-soft); border-color: var(--c-success-500); }
.weekcell--eingereicht, .weekcell--bestaetigt { background: var(--bg-primary-soft); border-color: var(--c-primary-500); }
.weekcell--zurueckgewiesen { background: var(--bg-danger-soft); border-color: var(--c-danger-500); }
.weekcell--fehlt { background: var(--bg-warning-soft); border-color: var(--c-warning-500); }
.weekcell--zukunft, .weekcell--ausserhalb { opacity: 0.45; }
.weekcell--current { outline: 2px solid var(--c-primary-500); outline-offset: 1px; }

.legend { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--fs-xs); color: var(--text-muted); margin: var(--space-4) 0; }
.legend span { display: inline-flex; align-items: center; gap: var(--space-1); }

/* ── Wochenansicht: Tages-Karten ─────────────────────────────────── */
.daycard { margin-bottom: var(--space-4); }
.daycard__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.daycard__head h3 { font-size: var(--fs-base); font-weight: 600; }
.dayrow { display: grid; gap: var(--space-3); grid-template-columns: 2fr repeat(3, minmax(7rem, 1fr)); }
@media (max-width: 720px) { .dayrow { grid-template-columns: 1fr; } }

/* ── Einsatzplaner ───────────────────────────────────────────────── */
.planner { display: grid; gap: var(--space-6); grid-template-columns: 16rem 1fr; align-items: start; }
@media (max-width: 900px) { .planner { grid-template-columns: 1fr; } }
.officer-card {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border: 1px solid var(--border-subtle);
  border-radius: var(--r-md); background: var(--bg-surface); cursor: grab; margin-bottom: var(--space-2);
}
.officer-card:active { cursor: grabbing; }
.officer-card .dot { width: 10px; height: 10px; border-radius: 999px; flex-shrink: 0; }
.plannerweek {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-subtle);
  min-height: 2.6rem;
}
.plannerweek.dragover { background: var(--bg-primary-soft); }
.plannerweek .kwlabel { width: 6.5rem; flex-shrink: 0; font-size: var(--fs-xs); color: var(--text-muted); }
.plannerweek--current .kwlabel { color: var(--c-primary-600); font-weight: 700; }
.assignment-chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  border-radius: 999px; padding: 2px 10px; font-size: var(--fs-xs); font-weight: 600;
  color: #fff;
}
.assignment-chip button { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 0.8rem; padding: 0 0 0 2px; }

/* ── Fortschritt / Ampel ─────────────────────────────────────────── */
.ampel { display: inline-block; width: 10px; height: 10px; border-radius: 999px; margin-right: 6px; }
.ampel--gruen { background: var(--c-success-500); }
.ampel--gelb { background: var(--c-warning-500); }
.ampel--rot { background: var(--c-danger-500); }

/* Streak-Karte (Gamification) */
.streak {
  display: flex; align-items: center; gap: var(--space-3);
  background: linear-gradient(135deg, var(--c-primary-500), var(--c-success-500));
  color: #fff; border-radius: var(--r-lg); padding: var(--space-4) var(--space-5);
}
.streak .num { font-size: var(--fs-3xl); font-weight: 800; line-height: 1; }
.streak .lbl { font-size: var(--fs-sm); opacity: 0.9; }

/* Auth-Seiten */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.auth-card { width: 100%; max-width: 24rem; }
.auth-logo { text-align: center; font-size: var(--fs-xl); font-weight: 700; color: var(--c-primary-600); margin-bottom: var(--space-6); }

/* Modals starten versteckt — styles.css setzt display:flex, das [hidden] sonst überstimmt */
.modal-backdrop[hidden] { display: none; }

/* Toast-Stack der App (fixiert) */
.app-toasts { position: fixed; top: 4.25rem; right: 1rem; z-index: 60; display: flex; flex-direction: column; gap: var(--space-2); max-width: 24rem; }

/* Fußzeile */
.footer { text-align: center; color: var(--text-muted); font-size: var(--fs-xs); padding: var(--space-8) 0; }
.footer a { color: inherit; }

/* Kleinkram */
.actions-inline { display: inline-flex; gap: var(--space-2); align-items: center; }
.nowrap { white-space: nowrap; }
.w-100 { width: 100%; }
details.helptip { margin-top: var(--space-2); }
details.helptip summary { cursor: pointer; color: var(--c-primary-600); font-size: var(--fs-xs); }
details.helptip p { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--space-1); }