/* Vertretungsplan – Hallenmonitor.
   Nutzt die bg-bernau Design-Tokens (Farben/Radien/Schrift). KEIN neues
   Farbschema. Fokus: grosse Touch-Targets, gut ablesbar aus Distanz. */

.vp {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Fuellt den Viewport unter der Topbar, damit die Liste scrollt statt der Seite. */
  height: calc(100vh - 200px);
  min-height: 0;
}

/* --- Tag-Tabs (Heute / Morgen) --- */
.vp-tabs {
  display: flex;
  gap: 10px;
}
.vp-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 800;
  font-size: 20px;
  text-decoration: none;
  appearance: none;
  font-family: inherit;
  cursor: pointer;
}
.vp-tab:hover { background: var(--color-surface-2); }
.vp-tab.active {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

/* --- Kopfzeile: Buttons + Datum/Stand nebeneinander --- */
.vp-topbar {
  display: flex;
  align-items: center;
  gap: 12px 24px;
  flex-wrap: wrap;
}
.vp-topbar .vp-head__main { margin: 0; }
.vp-topbar .vp-stale { margin-left: auto; }

/* --- Kopf --- */
.vp-head {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 20px;
}
.vp-head__day {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.3px;
}
.vp-head__stand {
  color: var(--color-muted);
  font-size: 16px;
  margin-top: 4px;
}
.vp-stale {
  background: rgba(215, 0, 21, .10);
  color: var(--color-danger);
  border: 1px solid rgba(215, 0, 21, .35);
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 15px;
}
.is-hidden { display: none !important; }

/* --- Meta (Klappzeilen) --- */
.vp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.vp-fold {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  min-width: 180px;
}
.vp-fold > summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  padding: 6px 0;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.vp-fold > summary::-webkit-details-marker { display: none; }
.vp-fold__count {
  background: rgba(var(--color-accent-rgb), .1);
  color: var(--color-accent);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 13px;
}
.vp-fold[open] > summary { margin-bottom: 8px; }
.vp-fold .pillrow { padding-bottom: 8px; }
.vp-fold .pill { font-size: 15px; }

/* --- Sticky Filterleiste --- */
.vp-filterbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.vp-tbtn {
  appearance: none;
  min-height: 48px;
  min-width: 56px;
  padding: 10px 18px;
  border-radius: 12px;
  border: 1px solid rgba(var(--color-accent-rgb), .2);
  background: rgba(var(--color-accent-rgb), .08);
  color: var(--color-accent);
  font-weight: 700;
  font-size: 18px;
  cursor: pointer;
}
.vp-tbtn:hover { background: rgba(var(--color-accent-rgb), .16); }
.vp-tbtn.active {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

/* --- Scrollbare Liste --- */
.vp-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.vp-row {
  display: grid;
  grid-template-columns: 84px 1.4fr 72px 1.1fr 1.1fr 1.2fr 1.6fr;
  gap: 12px;
  align-items: center;
  padding: 14px 18px;
  min-height: 56px;
  border-bottom: 1px solid var(--color-border);
  font-size: 20px;
}
.vp-row:nth-child(even) { background: var(--color-surface-2); }
.vp-row:last-child { border-bottom: none; }
.vp-cell { min-width: 0; overflow-wrap: anywhere; }
.vp-cell--lesson { font-weight: 800; }
.vp-cell--classes { font-weight: 700; }
.vp-cell--info { color: var(--color-muted); }
.vp-cell--text { color: var(--color-muted); font-size: 17px; }
.vp-row.is-filtered-out { display: none; }

.new-value { font-weight: 700; }
.old-value {
  color: var(--color-muted);
  text-decoration: line-through;
  font-size: 15px;
  margin-left: 6px;
}

/* Entfall: ganze Zeile durchgestrichen/rot. */
.vp-row.cancelled { color: var(--color-danger); }
.vp-row.cancelled .new-value { text-decoration: line-through; }
.vp-row.cancelled .vp-cell--info { color: var(--color-danger); font-weight: 700; }

.vp-empty {
  padding: 40px;
  text-align: center;
  color: var(--color-muted);
  font-size: 20px;
}

@media (max-width: 720px) {
  .vp { height: calc(100vh - 180px); }
  .vp-row {
    grid-template-columns: 64px 1fr 1fr;
    font-size: 17px;
  }
  .vp-cell--subject,
  .vp-cell--info,
  .vp-cell--text { grid-column: 1 / -1; }
}