/* menu.css - Glas Design */
/* Standalone CSS für Menükomponenten im Glas-Design */
/* Hinweis: Die hier definierten Variablen werden normalerweise global in :root in einer Haupt-CSS-Datei definiert. */

:root {
  /* Glas Effekt Variablen (benötigt von Menüelementen) */
  --glass-bg: rgba(255, 255, 255, 0.15);
  --glass-border: 1px solid rgba(255, 255, 255, 0.2);
  --glass-blur: blur(10px);
  --glass-radius: 12px;
  --glass-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

  /* Farbpalette & Akzente (benötigt von Menüelementen) */
  --main-text-color: #FFFFFF; /* Wird für Text/Icons verwendet */
  --accent-base-color: #E040FB; /* Für Highlights, Badges, Sub-Menü etc. */
  --run-inactive-color: rgba(255, 255, 255, 0.5); /* Für Streak Icon */

  /* Menü Icon/Text Farben */
  --main-icon-base-color: rgba(255, 255, 255, 0.7); /* Inaktiv */
  --main-text-base-color: rgba(255, 255, 255, 0.7); /* Inaktiv Text (falls separate Steuerung nötig) */
  --main-icon-active-color: #FFFFFF;            /* Generisch Aktiv / Hover */

  /* Badge Farben */
  --badage-color: var(--accent-base-color);     /* Hintergrund für Badges */
  --badage-text-color: #FFFFFF;                 /* Text auf Badges */

  /* Spezifische Farben für aktive Menügruppen */
  --main-color-01: #00FFFF; /* Cyan */
  --main-color-02: #87CEFA; /* Light Blue */
  --main-color-03: #DA70D6; /* Orchid */
  --main-color-04: #98FB98; /* Pale Green */
  --main-color-05: #FFD700; /* Gold */
  --main-color-06: #FA8072; /* Salmon */
  --main-color-07: #87CEEB; /* Sky Blue */
  --main-color-08: #9370DB; /* Medium Purple */
  --main-color-09: #FFB6C1; /* Light Pink */
  --main-color-10: #7FFFD4; /* Aquamarine */
}

/* --- Menü Styling - Glas Design --- */

div#dynamic_island {
  position: fixed;
  top: -99px; /* Bleibt ggf. für Animation/Effekte */
  left: 0;
  background: transparent; /* Zeigt Body-Gradient */
  height: 100px;
  width: 100%;
  z-index: 100; /* Über Menüs */
}

menu {
  position: fixed;
  padding: 0;
  margin: 0;
  z-index: 10; /* Unter dynamic_island, über content */
  left: 0;
  right: 0;
  border: none; /* Entfernt Standard-Ränder */
}

/* Oberes Menü */
menu[name="top"] {
  top: 0;
  /* Transparenter Rand behält Layout-Funktion bei */
  border-top: 110px solid transparent;
  /* Glaseffekt auf den Menübalken selbst */
  background-color: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  /* Nur untere Ecken abrunden */
  border-radius: 0 0 var(--glass-radius) var(--glass-radius);
}

/* Unteres Menü */
menu[name="bottom"] {
  bottom: 0;
  /* Glaseffekt auf den Menübalken */
  background-color: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  /* Nur obere Ecken abrunden */
  border-radius: var(--glass-radius) var(--glass-radius) 0 0;
  /* Dynamischer Top-Border (beibehalten) */
  border-top: 4px solid var(--main-icon-base-color); /* Standardfarbe */
}

/* Tabelle im Menü */
menu table {
  padding: 0;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse; /* Verhindert Lücken */
}

/* Menüpunkte (Zellen) */
menu td {
  height: 50px;
  text-align: center;
  background-color: transparent; /* Hintergrund kommt von menu */
  color: var(--main-text-base-color); /* Standard Textfarbe für Links */
  border: 0;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  overflow: hidden;
  vertical-align: middle; /* Bessere vertikale Ausrichtung */
  transition: background-color 0.2s ease; /* Sanfter Übergang für active/hover */
}

/* Aktiver Menüpunkt */
menu td.active {
  background-color: rgba(255, 255, 255, 0.1); /* Leichte Aufhellung */
  /* Farben für active state werden unten spezifischer gesetzt */
}
menu td:hover {
    background-color: rgba(255, 255, 255, 0.05); /* Leichte Aufhellung bei Hover (wenn nicht active) */
}
menu td.active:hover {
    background-color: rgba(255, 255, 255, 0.15); /* Etwas stärkere Aufhellung bei Hover auf Active */
}


/* Sichtbarkeitsregeln für Top-Menü (unverändert) */
menu[name="top"] td[data-group="main"]     { display: table-cell; }
menu[name="top"] td[data-group="run"]      { display: none; }
menu[name="top"] td[data-group="user"]     { display: none; }
menu[name="top"] td[data-group="user2"]    { display: none; }
menu[name="top"] td[data-group="other"]    { display: none; }
menu[name="top"] td[data-group="mod"]      { display: none; }
menu[name="top"] td[data-group="admin"]    { display: none; }
menu[name="top"] td[data-group="login"]    { display: none; }
menu[name="top"] td[data-group="info"]     { display: none; }
menu[name="top"] td[data-group="settings"] { display: none; }
menu[name="top"] td[data-group="edit"]     { display: none; }

menu td.disable {
  display: none !important;
}

/* SVG Icons im Menü */
menu svg {
  height: 30px; /* Evtl. etwas kleiner für Glasdesign */
  width: auto;
  display: block;
  margin: 2px auto 0 auto; /* Kleiner Abstand nach oben */
  vertical-align: middle;
}

/* Links/Text im Menü */
menu a {
  text-decoration: none;
  font-size: 10px;
  font-weight: 600; /* Etwas weniger fett? */
  display: block; /* Stellt sicher, dass Text unter dem Icon steht */
  margin-top: 0px; /* Kleiner Abstand zum Icon */
  line-height: 1.2;
  color: inherit; /* Erbt Farbe von td */
}

/* Kein Hover/Fokus Effekt auf Links selbst, Steuerung über TD */
menu a:hover,
menu a:focus,
menu a:active {
  text-decoration: none;
  color: inherit; /* Behält Farbe bei */
  cursor: default;
  pointer-events: none; /* Klick wird von TD abgefangen */
}

/* Standard Icon/Text Farben */
menu td svg, menu td a {
  fill: var(--main-icon-base-color);
  color: var(--main-text-base-color);
  transition: fill 0.2s ease, color 0.2s ease; /* Übergang hinzufügen */
}
/* Generische Active/Hover Farben (Fallback) */
menu td.active svg, menu td.active a,
menu td:hover svg, menu td:hover a {
  fill: var(--main-icon-active-color);
  color: var(--main-icon-active-color);
}

/* --- Spezifische Farben für aktive Gruppen --- */

/* Top Menü Gruppen (nur wenn .active) */
menu[name="top"] td[data-group="main"].active svg,
menu[name="top"] td[data-group="main"].active a {
  fill: var(--main-color-01); color: var(--main-color-01);
}
/* ... (Weitere Top-Menü Gruppen hier hinzufügen, falls spezifische Farben benötigt) ... */


/* Bottom Menü Gruppen (nur wenn .active) */
menu[name="bottom"] td.active[onclick*="loadMenu('main')"] svg,
menu[name="bottom"] td.active[onclick*="loadMenu('main')"] a {
  fill: var(--main-color-01); color: var(--main-color-01);
}
menu[name="bottom"] td.active[onclick*="loadMenu('run')"] svg,
menu[name="bottom"] td.active[onclick*="loadMenu('run')"] a {
  fill: var(--main-color-02); color: var(--main-color-02);
}
menu[name="bottom"] td.active[onclick*="loadMenu('user')"] svg,
menu[name="bottom"] td.active[onclick*="loadMenu('user')"] a {
  fill: var(--main-color-03); color: var(--main-color-03);
}
menu[name="bottom"] td.active[onclick*="loadMenu('user2')"] svg,
menu[name="bottom"] td.active[onclick*="loadMenu('user2')"] a {
  fill: var(--main-color-03); color: var(--main-color-03); /* Gleiche Farbe wie user */
}
menu[name="bottom"] td.active[onclick*="loadMenu('history')"] svg, /* Annahme: Gehört zu user? */
menu[name="bottom"] td.active[onclick*="loadMenu('history')"] a {
  fill: var(--main-color-03); color: var(--main-color-03);
}
menu[name="bottom"] td.active[onclick*="loadMenu('other')"] svg,
menu[name="bottom"] td.active[onclick*="loadMenu('other')"] a {
  fill: var(--main-color-04); color: var(--main-color-04);
}
menu[name="bottom"] td.active[onclick*="loadMenu('mod')"] svg,
menu[name="bottom"] td.active[onclick*="loadMenu('mod')"] a {
  fill: var(--main-color-05); color: var(--main-color-05);
}
menu[name="bottom"] td.active[onclick*="loadMenu('admin')"] svg,
menu[name="bottom"] td.active[onclick*="loadMenu('admin')"] a {
  fill: var(--main-color-06); color: var(--main-color-06);
}
menu[name="bottom"] td.active[onclick*="loadMenu('login')"] svg,
menu[name="bottom"] td.active[onclick*="loadMenu('login')"] a {
  fill: var(--main-color-07); color: var(--main-color-07);
}
menu[name="bottom"] td.active[onclick*="loadMenu('info')"] svg,
menu[name="bottom"] td.active[onclick*="loadMenu('info')"] a {
  fill: var(--main-color-08); color: var(--main-color-08);
}
menu[name="bottom"] td.active[onclick*="loadMenu('settings')"] svg,
menu[name="bottom"] td.active[onclick*="loadMenu('settings')"] a {
  fill: var(--main-color-09); color: var(--main-color-09);
}
menu[name="bottom"] td.active[onclick*="loadMenu('system')"] svg, /* Annahme: Gehört zu settings? */
menu[name="bottom"] td.active[onclick*="loadMenu('system')"] a {
  fill: var(--main-color-09); color: var(--main-color-09);
}
menu[name="bottom"] td.active[onclick*="loadMenu('data')"] svg, /* Annahme: Gehört zu settings? */
menu[name="bottom"] td.active[onclick*="loadMenu('data')"] a {
  fill: var(--main-color-09); color: var(--main-color-09);
}
menu[name="bottom"] td.active[onclick*="loadMenu('edit')"] svg,
menu[name="bottom"] td.active[onclick*="loadMenu('edit')"] a {
  fill: var(--main-color-10); color: var(--main-color-10);
}
menu[name="bottom"] td.active[onclick*="loadMenu('streak')"] svg, /* Annahme: Gehört zu edit oder user? */
menu[name="bottom"] td.active[onclick*="loadMenu('streak')"] a {
    fill: var(--main-color-10); color: var(--main-color-10); /* Beispiel: Farbe 10 */
}


/* --- Dynamischer Top Border für Bottom Menü --- */
menu[name="bottom"]:has(td.active[onclick*="loadMenu('main')"])     { border-top-color: var(--main-color-01); }
menu[name="bottom"]:has(td.active[onclick*="loadMenu('run')"])      { border-top-color: var(--main-color-02); }
menu[name="bottom"]:has(td.active[onclick*="loadMenu('user')"])     { border-top-color: var(--main-color-03); }
menu[name="bottom"]:has(td.active[onclick*="loadMenu('user2')"])    { border-top-color: var(--main-color-03); }
menu[name="bottom"]:has(td.active[onclick*="loadMenu('streak')"])   { border-top-color: var(--main-color-10); } /* Farbe für Streak angepasst */
menu[name="bottom"]:has(td.active[onclick*="loadMenu('other')"])    { border-top-color: var(--main-color-04); }
menu[name="bottom"]:has(td.active[onclick*="loadMenu('mod')"])      { border-top-color: var(--main-color-05); }
menu[name="bottom"]:has(td.active[onclick*="loadMenu('admin')"])    { border-top-color: var(--main-color-06); }
menu[name="bottom"]:has(td.active[onclick*="loadMenu('login')"])    { border-top-color: var(--main-color-07); }
menu[name="bottom"]:has(td.active[onclick*="loadMenu('info')"])     { border-top-color: var(--main-color-08); }
menu[name="bottom"]:has(td.active[onclick*="loadMenu('settings')"]) { border-top-color: var(--main-color-09); }
menu[name="bottom"]:has(td.active[onclick*="loadMenu('edit')"])     { border-top-color: var(--main-color-10); }
/* Fehlende hinzufügen falls nötig: history, system, data */
menu[name="bottom"]:has(td.active[onclick*="loadMenu('history')"])  { border-top-color: var(--main-color-03); }
menu[name="bottom"]:has(td.active[onclick*="loadMenu('system')"])   { border-top-color: var(--main-color-09); }
menu[name="bottom"]:has(td.active[onclick*="loadMenu('data')"])     { border-top-color: var(--main-color-09); }


/* Glow Animation (auskommentiert, kann bei Bedarf angepasst werden) */
/*
menu td[data-group="main"].info svg,
menu td[data-group="main"].info a {
    animation: glow-animation 4s infinite;
}
@keyframes glow-animation { ... }
*/

/* Submenu Indikator */
menu td.sub {
  /* Hintergrund bleibt transparent, Indikator ist der Schatten */
  box-shadow: inset 0 -3px 0 0 var(--accent-base-color); /* Etwas dickerer Schatten */
  background-color: transparent; /* Sicherstellen, dass kein alter BG übrig ist */
}

menu td.sub svg,
menu td.sub a {
  fill: var(--accent-base-color); /* Hebt Submenu hervor */
  color: var(--accent-base-color);
}

/* Submenu Tabelle (falls als eigener Container genutzt) */
table#submen {
  background-color: var(--glass-bg); /* Glas Effekt */
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--glass-radius); /* Abrunden */
  box-shadow: var(--glass-shadow);
  border: var(--glass-border); /* Konsistenter Rand */
  margin-top: 5px; /* Kleiner Abstand zum Hauptmenü */
}


/* --- User Head Element --- */
div[name="user_head"] {
  position: fixed;
  display: inline-block;
  cursor: pointer;
  top: 17px;
  right: 15px;
  width: 65px;
  height: 65px;
  z-index: 15; /* Über Inhalt, unter dynamic_island */
  border-radius: var(--glass-radius); /* Konsistenter Radius */
  /* Glas Effekt */
  background-color: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  overflow: hidden; /* Verhindert, dass innere Elemente über den Radius hinausragen */
}

div[name="user_head"] svg { /* Standard-Icon (Platzhalter?) */
  position: absolute;
  top: 0; left: 0; /* Positionierung innerhalb des Containers */
  width: 100%; /* Füllt Container */
  height: 100%;
  border-radius: var(--glass-radius); /* Passt sich an Container an */
  fill: transparent; /* Icon selbst transparent, Glas-BG scheint durch */
  /* fill: rgba(from var(--accent-base-color) r g b / 0.3); */ /* Alternative: leicht gefärbt */
}

div[name="user_head"] img {
  display: block; /* Stellt sicher, dass es richtig positioniert wird */
  width: 100%;
  height: 100%;
  border-radius: var(--glass-radius); /* Gleicher Radius wie Container */
  object-fit: cover; /* Skaliert Bild passend */
  position: relative; /* Damit es über dem SVG liegt (falls SVG nicht transparent) */
  z-index: 1;
  /* visibility: hidden; wird vermutlich durch JS gesteuert */
}

/* Streak Element neben User Head */
div[name="user_head"] div.streak {
  position: absolute; /* Position relativ zum user_head */
  display: inline-block;
  cursor: pointer;
  width: 65px;
  height: 65px;
  right: 75px; /* Abstand zum user_head */
  top: 0;
  /* Kein eigener Rand/Hintergrund nötig */
}

div[name="user_head"] div.streak svg {
  position: absolute;
  top: 50%; /* Vertikal zentrieren */
  left: 50%; /* Horizontal zentrieren */
  transform: translate(-50%, -50%); /* Genaue Zentrierung */
  height: 50px;
  width: auto;
  fill: var(--run-inactive-color); /* Standardfarbe (semi-transparent weiß) */
  transition: fill 0.3s ease;
}

div[name="user_head"] div.streak svg.active {
  fill: var(--accent-base-color); /* Aktive Farbe (Basis) */
}

/* Spezifische Pfadfarben für aktiven Streak (beibehalten) */
div[name="user_head"] div.streak svg.active path.c1 {
  fill: rgb(252, 202, 9);
}
div[name="user_head"] div.streak svg.active path.c0 {
  fill: rgb(255, 153, 8);
  stroke-width: 10px;
  stroke: rgb(255, 153, 8);
  opacity: 1;
}

/* Touch/Select Verhalten (unverändert) */
div[name="user_head"],
div[name="user_head"] * {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

/* Positionierung Streak Text (angepasst an absolute Positionierung) */
div[name="user_head"] div.streak span {
  display: block;
  position: absolute;
  bottom: -15px; /* Unterhalb des Streak Icons */
  left: 50%;
  transform: translateX(-50%); /* Horizontal zentrieren */
  color: var(--main-text-color);
  font-size: 12px;
  text-align: center;
  width: 100%; /* Nimmt Breite des Containers ein */
}

/* Head Badge */
div[name="user_head"] span.head_badge {
  position: absolute; /* Position relativ zu user_head */
  top: -5px;
  left: -8px;
  background: var(--badage-color); /* Verwendet definierte Variable */
  color: var(--badage-text-color);
  padding: 2px 6px;
  border-radius: 8px; /* Etwas kleinerer Radius */
  font-size: 10px;
  font-weight: bold;
  z-index: 2; /* Über dem Bild/Icon */
  line-height: 1;
}

div[name="user_head"] span.head_badge:not(.active) {
  visibility: hidden; /* Wird vermutlich durch JS gesteuert */
}