/* app/static/app.css
 * Projektspezifische Styles für "Grünes Klassenzimmer".
 * Grundlayout, Topbar, Buttons, Formulare, Tabellen kommen aus dem
 * bg-bernau-design Submodul (siehe /shared/css/... in templates/base.html).
 * Hier nur eintragen, was wirklich nur in diesem Projekt gebraucht wird.
 */

/* Der Schulname im geteilten Header-Submodul ist dort (noch) groß
 * geschrieben ("Barnim-Gymnasium Bernau"); Eigenschreibweise der Schule ist
 * klein ("barnim-gymnasium bernau"). Bis das im gemeinsamen
 * bg-bernau-design-Submodul korrigiert ist (das auch andere Dienste
 * verwenden), hier rein visuell für diesen Dienst korrigiert. */
.sitebrand__sub { text-transform: lowercase; }

/* --- Kalender-Monatsansicht --- */
.gkcal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.gkcal-nav__label { margin: 0; }

.gkcal__weekdays,
.gkcal__week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.gkcal__weekdays { margin-bottom: 6px; }
.gkcal__weekday {
  text-align: center;
  font-size: 12px;
  color: var(--color-muted);
  font-weight: 600;
}
.gkcal__week + .gkcal__week { margin-top: 6px; }

.gkcal__day {
  min-height: 74px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  background: var(--color-surface);
}
.gkcal__day--muted { opacity: .45; }
.gkcal__day--past { background: var(--color-surface-2); }
.gkcal__day--today { border-color: rgba(var(--color-accent-rgb), .55); box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb), .12); }

.gkcal__day-number { font-size: 13px; font-weight: 600; }

.gkcal__badges { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.gkcal__badge {
  display: block;
  font-size: 10px;
  line-height: 1.3;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(217, 118, 6, .16);
  color: #92400e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 720px) {
  .gkcal__weekdays, .gkcal__week { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
  .gkcal__day { min-height: 54px; padding: 4px; }
  .gkcal__badge { font-size: 9px; }
}

/* --- Volle Breite fürs Zweck-Textfeld (.field deckt in components.css nur
   input/select ab, nicht textarea) --- */
.field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  outline: none;
  font: inherit;
  resize: vertical;
}
.field textarea:focus {
  border-color: rgba(var(--color-accent-rgb), .5);
  box-shadow: 0 0 0 4px rgba(var(--color-accent-rgb), .12);
}
.field--wide { grid-column: 1 / -1; }

/* --- Status-Badges --- */
.gk-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.gk-status--pending { background: rgba(217, 118, 6, .14); color: #92400e; }
.gk-status--accepted { background: rgba(22, 163, 74, .14); color: #15803d; }
.gk-status--declined { background: rgba(215, 0, 21, .12); color: var(--color-danger); }

/* --- Flash-Meldungen --- */
.gk-flash {
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 14px;
  margin: 14px 0;
}
.gk-flash--success { background: rgba(22, 163, 74, .12); color: #15803d; }
.gk-flash--error { background: rgba(215, 0, 21, .1); color: var(--color-danger); }
.gk-flash ul { margin: 4px 0 0; padding-left: 18px; }

/* --- Rückfrage-Verlauf --- */
.gk-messages { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.gk-message {
  border-left: 3px solid rgba(var(--color-accent-rgb), .35);
  padding: 6px 12px;
  background: var(--color-surface-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}