/* ── Reset & Tokens ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
:root {
  --green:      #93c11c;
  --green-dim:  #6e9115;
  --green-glow: rgba(147,193,28,.15);
  --green-hi:   rgba(147,193,28,.28);
  --red:        #e05c5c;
  --red-dim:    rgba(224,92,92,.12);
  --radius:     12px;
  --radius-sm:  8px;
  --ease:       cubic-bezier(.4,0,.2,1);
}
/* Light Mode */
:root, [data-theme="light"] {
  --bg:        #eef3f5;
  --bg-2:      #e4ecf0;
  --surface:   #ffffff;
  --surface-2: #f5f8fa;
  --border:    rgba(4,45,57,.08);
  --border-hi: rgba(147,193,28,.45);
  --text-hi:   #07202a;
  --text-mid:  #3a6878;
  --text-lo:   #8ab5c0;
  --teal:      #0d6882;
  --shadow-sm: 0 2px 8px rgba(4,45,57,.07);
  --shadow-md: 0 4px 20px rgba(4,45,57,.11);
}
/* Dark Mode */
[data-theme="dark"] {
  --bg:        #07151c;
  --bg-2:      #0c1f28;
  --surface:   #112633;
  --surface-2: #162d3a;
  --border:    rgba(255,255,255,.07);
  --border-hi: rgba(147,193,28,.35);
  --text-hi:   #e8f4f8;
  --text-mid:  #7db8c8;
  --text-lo:   #3d6878;
  --teal:      #1a8ca8;
  --red:       #e06060;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.35);
  --shadow-md: 0 4px 20px rgba(0,0,0,.45);
  color-scheme: dark; /* Sorgt dafür dass Browser-native Elemente (select-Dropdown) dunkel gerendert werden */
}
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg); color: var(--text-hi);
  min-height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom);
  transition: background .3s var(--ease), color .3s var(--ease);
}

/* ── Header ───────────────────────────────────────────── */
.app-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg-2); border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .app-header { background: #0a1e28; }

.header-row1 {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 9px 16px;
  max-width: 960px; margin: 0 auto;
}
.header-row2 {
  display: flex; align-items: center;
  gap: 0; padding: 0 8px 6px;
  max-width: 960px; margin: 0 auto;
  border-top: 1px solid var(--border);
  overflow-x: auto; overflow-y: visible;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.header-row2::-webkit-scrollbar { display: none; }

@media (min-width: 640px) {
  .header-row1 { padding-bottom: 9px; }
  .header-row2 { display: none; }
  .header-nav-desktop { display: flex !important; }
  .header-nav-mobile  { display: none !important; }
  /* Datum-Pill nur auf Desktop sichtbar in Zeile 1 */
  .header-date-pill { display: flex !important; }
}
@media (max-width: 639px) {
  .header-nav-desktop { display: none !important; }
  .header-nav-mobile  { display: flex !important; }
  /* Datum-Pill in Zeile 1 auf Mobile anzeigen, aber kompakt */
  .header-date-pill { display: flex !important; }
  .header-date-pill strong { font-size: .78rem; }
}

.logo-block { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.logo-img   { height: 32px; width: auto; display: block; flex-shrink: 0; }
.logo-badge {
  background: var(--green); color: #07201a;
  font-family: 'DM Mono', monospace; font-weight: 500;
  font-size: .75rem; letter-spacing: 1px;
  padding: 4px 9px; border-radius: 5px; line-height: 1; flex-shrink: 0;
}
.logo-text { min-width: 0; }
.logo-title {
  font-size: .86rem; font-weight: 600; color: var(--text-hi);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.logo-sub { font-size: .68rem; color: var(--text-mid); margin-top: 1px; }

/* Date Pill */
.date-pill {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; padding: 5px 12px 5px 8px;
  font-size: .78rem; color: var(--text-mid);
  cursor: pointer; transition: border-color .2s;
  white-space: nowrap; flex-shrink: 0; position: relative;
}
.date-pill:hover { border-color: var(--border-hi); }
.date-pill-icon {
  width: 20px; height: 20px; background: var(--green-glow);
  border-radius: 5px; display: flex; align-items: center;
  justify-content: center; font-size: .7rem;
}
.date-pill strong { color: var(--text-hi); font-weight: 500; font-size: .8rem; }
.date-pill input[type=date] {
  position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none;
}

/* Nav */
.header-nav { display: flex; gap: 2px; align-items: center; flex-shrink: 0; }
.nav-btn {
  font-family: 'DM Sans', sans-serif; font-size: .75rem; font-weight: 500;
  padding: 6px 10px; border-radius: 7px; border: none; cursor: pointer;
  background: transparent; color: var(--text-mid); transition: all .15s;
  text-decoration: none; display: inline-block; -webkit-tap-highlight-color: transparent;
  white-space: nowrap; flex-shrink: 0;
}
.nav-btn:hover  { color: var(--text-hi); background: var(--surface); }
.nav-btn.active { color: var(--green);   background: var(--green-glow); font-weight: 600; }
.nav-btn.logout { color: var(--red); }
.nav-btn.logout:hover { background: rgba(224,92,92,.1); }

/* Mobile Nav: scrollbar wenn zu viele Buttons */
@media (max-width: 639px) {
  .header-row2 {
    overflow-x: auto; overflow-y: visible;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE */
    justify-content: flex-start; padding-right: 8px;
  }
  .header-row2::-webkit-scrollbar { display: none; }
  .header-nav-mobile {
    flex-shrink: 0; gap: 2px;
  }
  /* "Vorbestellungen" auf Mobile kürzen */
  .nav-btn[href="vorbestellungen.php"] { font-size: .72rem; padding: 6px 8px; }
}

.theme-toggle {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface);
  cursor: pointer; font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s; color: var(--text-mid);
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover { border-color: var(--border-hi); color: var(--green); }

/* Swipe-Hint (nur Schicht-Seite) */
.swipe-hint {
  display: none;
  align-items: center; justify-content: center; gap: 6px;
  font-size: .65rem; color: var(--text-lo); padding: 4px 16px 6px;
  font-family: 'DM Mono', monospace;
}
@media (max-width: 639px) { .swipe-hint { display: flex; } }
.swipe-hint span { opacity: .5; }

/* Toast */
.toast {
  position: fixed; top: 72px; left: 50%;
  transform: translateX(-50%) translateY(-16px);
  width: max-content; max-width: min(90vw, 400px);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 18px;
  font-size: .82rem; font-weight: 600; color: var(--text-hi);
  box-shadow: var(--shadow-md); opacity: 0;
  transition: all .25s var(--ease); pointer-events: none;
  white-space: nowrap; z-index: 999;
}
.toast.show    { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.success { border-left: 3px solid var(--green); color: var(--green); }
.toast.error   { border-left: 3px solid rgba(224,92,92,.6); color: var(--red); }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── Desktop-Overrides ────────────────────────────────── */
@media (min-width: 640px) {
  .nav-btn {
    font-size: 1rem !important; padding: 9px 18px !important;
    border-radius: 9px !important; font-weight: 500 !important;
  }
  .nav-btn.active { font-size: 1rem !important; }
  .theme-toggle { width: 42px !important; height: 42px !important; }
  .theme-toggle svg { width: 20px !important; height: 20px !important; }
  .header-nav { gap: 6px !important; }
  .header-row1 { padding: 13px 24px !important; max-width: 1200px !important; }
  .header-row2 { max-width: 1200px !important; }
  .logo-title { font-size: 1.05rem !important; }
  .logo-sub   { font-size: .75rem !important; }
  .logo-img   { height: 38px !important; }
  .date-pill { font-size: .88rem !important; padding: 6px 14px 6px 10px !important; }
  .date-pill strong { font-size: .9rem !important; }
  .date-pill-icon { width: 24px !important; height: 24px !important; font-size: .8rem !important; }
}