/* MobilGastro — Richtung-2 Token-Override für App/Auth.
   WICHTIG: NACH app.css laden — überschreibt die :root-Tokens auf die
   neutrale "Leitstand"-Palette + Hell-Variante. Teal/Amber/Ampel bleiben. */
:root{
  --bg0:#0d0f13;
  --bg1:#15181d;
  --bg2:#1c2026;
  --surface:#15181d;
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.07);
  --txt:#e9edf2;
  --muted:#9aa3ad;
  --faint:#6b727b;
  --shadow:0 18px 50px -20px rgba(0,0,0,.55);
}
html[data-theme="light"]{
  --bg0:#f6f6f3;
  --bg1:#ffffff;
  --bg2:#f0f0ec;
  --surface:#ffffff;
  --line:rgba(15,24,28,.12);
  --line-soft:rgba(15,24,28,.08);
  --txt:#15181c;
  --muted:#4a5057;
  --faint:#8a9098;
  --shadow:0 18px 50px -22px rgba(15,24,28,.20);
}
/* warme Radial-Gradients neutralisieren */
body{ background:var(--bg0); transition:background-color .3s ease, color .3s ease; }

/* ---------- Schlanker Auth-Header ---------- */
.mg-authbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; border-bottom:1px solid var(--line-soft);
  position:sticky; top:0; background:var(--bg0); z-index:10;
}
.mg-authbar-logo{ font-family:var(--font-head); font-weight:800; font-size:20px; letter-spacing:-.02em; color:var(--txt); }
.mg-authbar-logo strong{ color:var(--teal-300); font-weight:800; }
.mg-auth{ min-height:calc(100vh - 61px); }

/* ---------- Theme-Toggle (wie öffentliche Nav) ---------- */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:9px;
  border:1px solid var(--line-soft); background:transparent;
  color:var(--muted); cursor:pointer; transition:color .2s, border-color .2s;
}
.theme-toggle:hover{ color:var(--teal-300); border-color:var(--line); }
.theme-toggle svg{ width:18px; height:18px; }
.theme-toggle .i-moon{ display:none; }
html[data-theme="light"] .theme-toggle .i-sun{ display:none; }
html[data-theme="light"] .theme-toggle .i-moon{ display:block; }

/* ---------- App-Shell: SVG-Icons statt Emojis ---------- */
.mg-brand-mark{ display:inline-flex; align-items:center; filter:none; }
.mg-brand-mark svg{ width:24px; height:24px; color:var(--teal-300); }
.mg-nav-ico{ display:inline-flex; align-items:center; justify-content:center; }
.mg-nav-ico svg{ width:18px; height:18px; }
.mg-side-foot .theme-toggle{ margin-bottom:12px; }

/* ---------- Button-Hover-Fix ----------
   app.css setzte .mg-btn:hover{background:#2a231c} hart — das überschrieb
   sogar farbige Buttons und ergab dunklen Text auf dunkel. Hier token-basiert
   und pro Variante, mit lesbarem Kontrast in beiden Themes. */
.mg-btn:hover{ background:var(--bg1); border-color:var(--line); color:var(--txt); }
.mg-btn--cta:hover{ background:linear-gradient(180deg,var(--amber),var(--amber-600)); color:#1a1206; filter:brightness(1.06); }
.mg-btn--teal:hover{ background:#0d8579; color:#fff; }
.mg-btn--ghost:hover{ background:transparent; color:var(--txt); border-color:var(--line); }

/* ---------- Handy: kein Tap-Highlight / keine Textmarkierung auf Bedienelementen ---------- */
.mg-btn, .theme-toggle, .mg-nav a, .mg-burger, .mg-logout, .mg-authbar-logo, .mg-brand{
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}