/*
  Shared stylesheet for the advent calendar web application.
  This file defines a handful of CSS variables and basic
  components (cards, forms, buttons, grids) to loosely mirror
  the look and feel of the original Flutter app.  The design
  deliberately keeps things simple and light‑weight; you can
  customise colours or spacing by adjusting the variables
  defined on :root below.  If you choose to extend the site
  later on you may freely modify this file.
*/

:root {
  /*
    Colour palette: use a golden yellow as the primary accent throughout
    the site.  A slightly darker shade is defined for hover states.
  */
  --primary: #ffd700;
  --primary-dark: #d4af37;
  --secondary: #ffd700;
  --background: #f9f9f9;
  --surface: #ffffff;
  --text: #202124;
  --text-light: #202124;
  --border-radius: 8px;
  --max-width: 480px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: var(--background);
  color: var(--text);
  /*
    Use the festive background image uploaded by the user.  The image is
    scaled to cover the entire viewport while preserving its aspect
    ratio.  No repetition is required.
  */
  background-image: url('assets/background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

header, nav, main, footer {
  width: 100%;
}

/* Basic card container */
.card {
  background-color: var(--surface);
  border-radius: var(--border-radius);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
  margin: 1rem auto;
  max-width: var(--max-width);
}

/* Form elements */
input[type="text"], input[type="password"], input[type="number"], textarea, select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: var(--border-radius);
  font-size: 1rem;
  margin-bottom: 1rem;
}

label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 500;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  border-radius: var(--border-radius);
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  background-color: var(--primary);
  /* On a light yellow background dark text is easier to read. */
  color: var(--text);
  transition: background-color 0.15s ease;
}

/* Buttons darken slightly on hover */
.btn:hover {
  background-color: var(--primary-dark);
}

.btn.secondary {
  background-color: var(--secondary);
  color: var(--text);
}

.btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

/* Grid for advent calendar */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 0.75rem;
  /* Center the calendar grid horizontally within its container */
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
  margin-bottom: 1rem;
  max-width: 640px;
  justify-content: center;
}

.calendar-grid .door {
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1;
  border-radius: var(--border-radius);
  cursor: pointer;
  user-select: none;
  font-size: 1.25rem;
  font-weight: bold;
}

.calendar-grid .door.unlocked {
  background-color: var(--primary);
  color: var(--text);
  border: 2px solid var(--primary-dark);
}

.calendar-grid .door.locked {
  background-color: #e0e0e0;
  color: #8a8a8a;
  border: 2px solid #b0b0b0;
}

/* Table styling for teacher/admin dashboards */
table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 1rem;
}

th, td {
  text-align: left;
  padding: 0.5rem;
  border-bottom: 1px solid #ddd;
  font-size: 0.9rem;
}

th {
  background-color: var(--primary);
  color: var(--text);
}

/* Utility classes */
.hidden {
  display: none;
}

/* Status message banners for action feedback */
.status-message {
  margin-bottom: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--border-radius);
  font-weight: 600;
  text-align: center;
}

.status-message.success {
  background-color: #c8e6c9;
  color: #256029;
}

.status-message.error {
  background-color: #ffcdd2;
  color: #b71c1c;
}

.status-message.info {
  background-color: #ffecb3;
  color: #795548;
}

/* Measurement results container on vitalwerte page */
.measurement-results {
  margin-bottom: 1rem;
  padding: 0.5rem;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: var(--border-radius);
  font-size: 0.85rem;
}

.center {
  text-align: center;
}

.error {
  color: #d32f2f;
  margin-top: 0.5rem;
}

/* Circular buttons used in the interactive case screen */
.circle-btn {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: var(--primary);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 0.8rem;
  font-weight: 500;
  text-align: center;
  margin: 0.5rem;
  cursor: pointer;
  border: none;
}
.circle-btn:hover {
  background-color: var(--primary-dark);
}

/* Large call-to-action button used on the interactive case screen */
.transport-btn {
  display: block;
  width: 100%;
  padding: 1rem;
  border-radius: var(--border-radius);
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  background-color: #800000;
  color: #ffffff;
  cursor: pointer;
  margin-top: 1.5rem;
}
.transport-btn:hover {
  background-color: #600000;
}