/* ==========================================================================
   YOLO Learning App — Global Styles (Materialize-basiert)
   - Aufgeräumt & kommentiert
   - Keine globalen Layout-Eingriffe, die andere Seiten brechen
   - Opt-in Equal-Height-Grid via .cards-row
   - Robuste "Coming Soon" / disabled-Cards
   ========================================================================== */

/* ========== 1) Theme-Variablen  ========== */
:root {
  --primary:   #007A33; /* Grün (Primär) */
  --secondary: #4CAF50; /* Akzentgrün */
  --title:     #1C1C1C; /* sehr dunkles Grau für Texte in der Nav */
  --background:#FFE9D2; /* (optional) Hintergrund-Ton */
  --text:      #2E2E2E; /* Standardtext */
  --accent:    #A7D7A7; /* zartes Grün für Hover o.ä. */
}

/* ========== 2) Base / Accessibility / Utilities ========== */
html, body {
  color: var(--text);
  background: #fff;
}

a:focus-visible, button:focus-visible, .sidenav-trigger:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ========== 3) Navbar ========== */
nav {
  background: var(--primary);
  border-bottom: 10px solid var(--secondary);
}
nav a {
  text-transform: uppercase;
  color: var(--title);
}
nav a span {
  font-weight: bold;
  font-size: 1.4rem;
}
nav .sidenav-trigger { margin: 0; }

/* Hover-Effekt für Navbar-Links */
nav ul li a:hover {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

/* ========== 4) Layout-Container ========== */
/* Begrenzt die Seitenbreite auf großen (Ultrawide) Displays */
.container {
  max-width: 1200px;
}

/* ========== 5) Karten (generelle Optik) ========== */
.card .card-image img {
  height: 180px;        /* einheitliche Kartenkopfhöhe */
  object-fit: cover;    /* Bild sauber beschneiden */
}

/* ========== 6) Equal-Height Karten-Grid (Opt-in) ==========
   WICHTIG: Nur dort verwenden, wo du gleich hohe Cards brauchst.
   HTML: <div class="row cards-row"> ... </div>
   So bleibt das Standard-Materialize-Grid auf anderen Seiten unberührt.
   ---------------------------------------------------------- */
.cards-row {
  display: flex;
  flex-wrap: wrap;
}
.cards-row > .col {
  display: flex;
}
.cards-row > .col > .card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;      /* Karte füllt die Spaltenhöhe */
}
.cards-row > .col > .card .card-content {
  flex-grow: 1;        /* Inhalt füllt, damit .card-action unten bündig ist */
}

/* ========== 7) "Coming Soon" / deaktivierte Cards ==========
   - Graustufe + reduzierte Deckkraft
   - Klicks deaktiviert
   - Overlay "Coming Soon"
   - robust mit !important, damit Materialize-Hover/Waves nicht „drüberbügelt“
   ---------------------------------------------------------- */
.card.disabled {
  position: relative;
  overflow: hidden;
  filter: grayscale(100%) brightness(0.92) !important;
  -webkit-filter: grayscale(100%) brightness(0.92) !important;
  opacity: 0.7 !important;
  pointer-events: none !important;
  box-shadow: none !important;
}
.card.disabled .card-image img {
  filter: grayscale(100%) brightness(0.9) !important;
  -webkit-filter: grayscale(100%) brightness(0.9) !important;
}
.card.disabled .card-action a {
  color: #9e9e9e !important;
  text-decoration: none !important;
  cursor: default !important;
  pointer-events: none !important;
}
/* Hover/Animationen neutralisieren */
.card.disabled:hover { transform: none !important; }
.card.disabled .waves-effect,
.card.disabled .waves-ripple {
  pointer-events: none !important;
  display: none !important;
}
/* Overlay-Label */
.card.disabled::after {
  content: "Coming Soon";
  position: absolute; inset: 0;
  z-index: 3;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.82);
  color: #424242; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase;
}

/* ========== 8) (Optional) Legacy-Listenlayout (module/feature) ==========
   Falls du noch die älteren "card-panel" Zeilen nutzt (Liste statt Grid),
   bleiben diese Styles erhalten.
   ---------------------------------------------------------- */
.modules, .features {
  margin-top: 20px;
}

.card-panel.module, .card-panel.feature {
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 1px 3px rgba(90,90,90,0.1);
  display: grid;
  grid-template-columns: 2fr 6fr 1fr;
  grid-template-areas: "image details delete";
  position: relative;
}
.module img, .feature img {
  grid-area: image;
  max-width: 60px;
}
.module-details, .feature-details {
  grid-area: details;
  margin-top: 6px;
}
.module-delete, .feature-delete {
  grid-area: delete;
  position: absolute;
  bottom: 0; right: 0;
}
.module-delete i, .feature-delete i { font-size: 18px; }
.module-title, .feature-title { font-weight: bold; }
.module-description, .feature-description { font-size: 0.8em; }

/* ========== 9) Formulare / Buttons (Side-Form etc.) ========== */
.add-btn {
  background: var(--title) !important;
}
input {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}
.side-form button {
  background: var(--title);
  box-shadow: 1px 1px 3px rgba(90,90,90,0.2);
}
form .input-field { margin-top: 30px; }