/* assets/theme.css
   Zentrale Theme-Schicht
   Light: hell/clean, Dark: neutraler Grau-Look ohne blauen Grundton.
*/
:root{
  --bg:#f5f7fb;
  --bg2:#eef2f7;
  --card:#ffffff;
  --card2:#f8fafc;
  --text:#0f172a;
  --muted:#64748b;
  --accent:#2563eb;
  --accent2:#1d4ed8;
  --danger:#dc2626;
  --ok:#16a34a;
  --warn:#f59e0b;
  --shadow:0 10px 30px rgba(2,6,23,.08);
  --border:rgba(15,23,42,.12);
}

html[data-theme="dark"]{
  --bg:#121314;
  --bg2:#17191c;
  --card:#1b1d20;
  --card2:#24272b;
  --text:#f2f3f5;
  --muted:#a5aab1;
  --accent:#6b7280;
  --accent2:#9ca3af;
  --danger:#f87171;
  --ok:#4ade80;
  --warn:#fbbf24;
  --shadow:0 18px 42px rgba(0,0,0,.36);
  --border:rgba(255,255,255,.12);
}

/* Basis */
html,body{
  background:var(--bg)!important;
  color:var(--text)!important;
}
html[data-theme="dark"] body{
  background:
    radial-gradient(circle at top left,rgba(255,255,255,.045),transparent 34%),
    radial-gradient(circle at top right,rgba(255,255,255,.030),transparent 30%),
    var(--bg)!important;
}

/* Container, Karten, Tabellenflächen */
.card,.panel,.box,.content-box,.table-wrap,.settings-card,
.modal,.modal .card,.modal-card,.popup{
  background:var(--card)!important;
  color:var(--text)!important;
  border:1px solid var(--border)!important;
  box-shadow:var(--shadow)!important;
}
.tile,.dash-tile,.menu-tile,.grid-item,.quicklink,.card-tile,a.tile{
  background:linear-gradient(180deg,var(--card),var(--card2))!important;
  color:var(--text)!important;
  border:1px solid var(--border)!important;
  box-shadow:var(--shadow)!important;
}
.tile *,.dash-tile *,.menu-tile *,.grid-item *,.quicklink *{color:inherit;}

/* Header */
.topbar,header,.header,.nav-top{
  background:linear-gradient(180deg,var(--bg2),var(--bg))!important;
  border-bottom:1px solid var(--border)!important;
  color:var(--text)!important;
}
.brand,.brand *{color:var(--text)!important;}
.theme-toggle{
  background:var(--card)!important;
  border:1px solid var(--border)!important;
  color:var(--text)!important;
  box-shadow:none!important;
}

/* Buttons: Primär darf blau bleiben, Darkmode-Grau gilt für Flächen, nicht für Hauptaktionen */
.btn,button,input[type="submit"],.button,.smallbtn{
  border-radius:14px;
}
.btn:not(.secondary),button.btn:not(.secondary),a.btn:not(.secondary),
.smallbtn:not(.secondary),button.smallbtn:not(.secondary),a.smallbtn:not(.secondary),
input[type="submit"]{
  background:linear-gradient(135deg,#2563eb,#1d4ed8)!important;
  color:#fff!important;
  border:0!important;
}
.btn:not(.secondary):hover,a.btn:not(.secondary):hover,
.smallbtn:not(.secondary):hover,a.smallbtn:not(.secondary):hover{
  color:#fff!important;
  text-decoration:none!important;
}
.btn.secondary,.smallbtn.secondary,
a.btn.secondary,a.smallbtn.secondary,button.btn.secondary,button.smallbtn.secondary{
  background:var(--card2)!important;
  color:var(--text)!important;
  border:1px solid var(--border)!important;
  box-shadow:none!important;
}
.btn.secondary:hover,.smallbtn.secondary:hover,
a.btn.secondary:hover,a.smallbtn.secondary:hover{
  color:var(--text)!important;
  text-decoration:none!important;
}
.btn.danger,.smallbtn.danger,.btn-danger{
  background:linear-gradient(135deg,#ef4444,#dc2626)!important;
  color:#fff!important;
  border:0!important;
}

/* Eingaben */
input,select,textarea{
  background:var(--card)!important;
  color:var(--text)!important;
  border:1px solid var(--border)!important;
}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--muted) 78%,transparent)!important;}

/* Tabellen */
table,.table{color:var(--text)!important;}
.table th,.table td,table th,table td{border-color:var(--border)!important;}
.table thead th,table thead th{
  background:var(--card2)!important;
  color:var(--muted)!important;
}

/* Badges/Pills neutral */
.badge,.pill,.status-pill,.chip,.chip-button,.pill-button{
  border:1px solid var(--border)!important;
  background:var(--card2)!important;
  color:var(--text)!important;
}
.badge.ordered,.badge.bestellt,.pill.ok,.badge.ok{
  background:rgba(22,163,74,.12)!important;
  border-color:rgba(22,163,74,.28)!important;
  color:color-mix(in srgb,var(--ok),var(--text) 18%)!important;
}
.badge.canceled,.badge.abbestellt,.badge.cancel,.badge.absent,.pill.cancel{
  background:rgba(239,68,68,.12)!important;
  border-color:rgba(239,68,68,.28)!important;
  color:color-mix(in srgb,var(--danger),var(--text) 16%)!important;
}
.badge.holiday,.badge.orange,.pill.warn{
  background:rgba(245,158,11,.13)!important;
  border-color:rgba(245,158,11,.30)!important;
  color:color-mix(in srgb,var(--warn),var(--text) 25%)!important;
}

/* Kalender/Listen/alte Inline-Elemente */
.calendar,#calendar,.calendar-wrap,.calendar-container,.cal,.cal-grid,.calendar-grid{
  background:var(--card)!important;
  border:1px solid var(--border)!important;
  box-shadow:var(--shadow)!important;
}
.cal-head,.cal-header,.calendar-header,.cal-weekdays,.weekday-row,.cal-weekday{
  background:var(--card2)!important;
  color:var(--muted)!important;
  border-bottom:1px solid var(--border)!important;
}
.cal-cell,.day-cell,.calendar-day,.day,.cell,.day-row{
  background:var(--card2)!important;
  color:var(--text)!important;
  border:1px solid var(--border)!important;
}
.cal-cell:hover,.day-cell:hover,.calendar-day:hover{
  border-color:color-mix(in srgb,var(--accent2) 38%,var(--border))!important;
}
.meal-pill,.menu-pill,.pill.meal,.mchip,.sbadge{
  background:var(--card2)!important;
  border:1px solid var(--border)!important;
  color:var(--text)!important;
}

/* Tabs / Schalter */
.tabs a,.tabs button,.tab,.tab-btn,.tab-button,
.segmented button,.segmented .btn,.view-switch button,.view-switch .btn,
.nav-tabs a,.nav-tabs button{
  background:var(--card2)!important;
  color:var(--text)!important;
  border:1px solid var(--border)!important;
  box-shadow:none!important;
}
.tabs a.active,.tabs button.active,.tab.active,.tab-btn.active,.tab-button.active,
.segmented button.active,.view-switch button.active,.nav-tabs a.active,.nav-tabs button.active{
  background:color-mix(in srgb,var(--accent2) 14%,var(--card2))!important;
  border-color:color-mix(in srgb,var(--accent2) 32%,var(--border))!important;
  color:var(--text)!important;
  font-weight:700;
}

/* Modal-Overlay */
#modal,.modal{background:var(--card)!important;opacity:1!important;}
.modal-overlay,#modalOverlay,.overlay{background:rgba(15,23,42,.45)!important;}
html[data-theme="dark"] .modal-overlay,
html[data-theme="dark"] #modalOverlay,
html[data-theme="dark"] .overlay{background:rgba(0,0,0,.58)!important;}

/* Footer */
.footer,.app-footer{color:var(--muted)!important;}

/* Links */
a{color:var(--accent2)!important;}
a:hover{color:var(--accent2)!important;}

/* Darkmode: letzte blauschwarze Altlasten überschreiben */
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .tile,
html[data-theme="dark"] .cal-cell,
html[data-theme="dark"] .day-row,
html[data-theme="dark"] .cell,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background-color:var(--card)!important;
}
html[data-theme="dark"] .cal-cell,
html[data-theme="dark"] .day-row,
html[data-theme="dark"] .cell{
  background:var(--card2)!important;
}

/* ==========================================================================
   Header – gemeinsame Komponente
   ========================================================================== */
.eem-account-toggle{
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--card);
  color:#64748b;
  cursor:pointer;
  padding:0;
}
.eem-account-toggle:hover,
.eem-account-toggle:focus{
  background:rgba(100,116,139,.10);
  color:#334155;
  outline:none;
}
.eem-account-icon{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
html[data-theme="dark"] .eem-account-toggle{
  color:#e5e7eb;
  background:rgba(255,255,255,.06);
}
html[data-theme="dark"] .eem-account-toggle:hover,
html[data-theme="dark"] .eem-account-toggle:focus{
  color:#ffffff;
  background:rgba(255,255,255,.10);
}
.eem-user-menu-link,
.eem-user-menu-link:hover,
.eem-user-menu-link:focus,
.eem-user-menu-link:visited{
  text-decoration:none !important;
  color:var(--text);
}
.eem-user-menu-item{
  display:grid;
  grid-template-columns:26px 1fr;
  align-items:center;
  column-gap:10px;
}
.eem-user-menu-icon{
  width:28px;
  min-width:28px;
  height:24px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  color:#64748b;
}
.eem-user-menu-icon svg{
  width:18px;
  height:18px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
html[data-theme="dark"] .eem-user-menu-icon{
  color:#e5e7eb;
}

.eem-user-menu-wrap{position:relative}
.eem-user-menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:220px;
  padding:8px;
  border-radius:18px;
  border:1px solid var(--border);
  background:var(--card);
  box-shadow:0 20px 48px rgba(0,0,0,.22);
  z-index:9999;
}
.eem-user-menu-item{
  width:100%;
  display:grid;
  grid-template-columns:28px 1fr;
  align-items:center;
  column-gap:10px;
  border:0;
  background:transparent;
  color:var(--text);
  border-radius:14px;
  padding:12px 14px;
  font:inherit;
  cursor:pointer;
  text-align:left;
  box-sizing:border-box;
}
.eem-user-menu-item:hover{
  background:rgba(59,130,246,.10);
}

.eem-password-modal-backdrop{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,.58);
  z-index:99999;
}
.eem-password-modal-backdrop.open{display:flex}
.eem-password-modal{
  width:min(520px,96vw);
  border:1px solid var(--border);
  border-radius:22px;
  background:var(--card);
  color:var(--text);
  box-shadow:0 22px 90px rgba(0,0,0,.48);
  padding:18px;
}
.eem-password-modal h3{margin:0 0 6px}
.eem-password-modal .field{margin-top:12px}
.eem-password-modal label{display:block;margin-bottom:5px;color:var(--muted);font-weight:700}
.eem-password-field{position:relative;display:block}
.eem-password-field input{width:100%;padding-right:46px}
.eem-eye-btn{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:32px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:999px;
  background:transparent;
  color:#7b8494;
  cursor:pointer;
  padding:0;
}
.eem-eye-btn:hover,
.eem-eye-btn:focus{
  background:rgba(100,116,139,.10);
  color:#4b5563;
  outline:none;
}
.eem-eye-btn .eye-icon{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.eem-eye-btn .eye-closed{display:none}
.eem-eye-btn.is-visible .eye-open{display:none}
.eem-eye-btn.is-visible .eye-closed{display:block}
.eem-password-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:16px}
.eem-password-message{display:none;margin-top:12px;border-radius:14px;padding:10px 12px;border:1px solid var(--border)}
.eem-password-message.ok{display:block;border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.10)}
.eem-password-message.error{display:block;border-color:rgba(239,68,68,.45);background:rgba(239,68,68,.10)}