/* app.css – Köhler's Planer PWA */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Poppins:wght@300;400;500;600&display=swap');

:root {
  --primary-color: #125b55;
  --primary-dark: #0c433f;
  --secondary-color: #d4a54f;
  --secondary-bright: #e3bd72;
  --text-color: #052f2b;
  --background-color: #f8f2e8;
  --accent-color: #f3ebe2;
  --card-border: rgba(5, 47, 43, 0.10);
  --font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
  --shadow-soft: 0 4px 16px rgba(5, 47, 43, 0.08);
  --shadow-lift: 0 12px 28px rgba(5, 47, 43, 0.16);
  --danger: #b00020;
  --ok: #1a7a4c;
  --warn: #b3791d;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overscroll-behavior-y: none;
}

body {
  font-family: var(--font-family);
  background: var(--background-color);
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

button, input, select, textarea { font-family: inherit; font-size: 1rem; }

/* ---------- Login ---------- */
#login-screen {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.2rem;
  padding-top: calc(2rem + var(--safe-top));
}
.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--accent-color);
  border-radius: 18px;
  padding: 2rem 1.6rem;
  box-shadow: var(--shadow-lift);
  text-align: center;
}
.login-card h1 {
  font-family: var(--font-display);
  color: var(--primary-color);
  font-size: 1.5rem;
  margin-bottom: 0.3rem;
}
.login-card p { font-size: 0.9rem; opacity: 0.75; margin-bottom: 1.3rem; }
.login-card input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  margin-bottom: 0.8rem;
  background: #fff;
}
.login-card button {
  width: 100%;
  padding: 0.75rem;
  border: none;
  border-radius: 10px;
  background: var(--primary-color);
  color: #fff;
  font-weight: 500;
  cursor: pointer;
}
.login-card button:active { background: var(--primary-dark); }
#login-error { color: var(--danger); font-size: 0.85rem; margin-top: 0.7rem; display: none; }

/* ---------- App shell ---------- */
#app-shell { flex: 1; display: none; flex-direction: column; min-height: 100vh; }
#app-shell.visible { display: flex; }

#top-bar {
  padding: calc(0.9rem + var(--safe-top)) 1rem 0.9rem;
  background: var(--primary-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 20;
}
#top-bar h1 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
}
.top-bar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#refresh-btn {
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.2s ease;
}
#refresh-btn:active {
  transform: scale(0.9);
}
#refresh-btn.spinning {
  animation: refresh-spin 0.7s linear infinite;
}
@keyframes refresh-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
#logout-btn {
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  font-size: 0.8rem;
  cursor: pointer;
}

/* Pull-to-refresh Hinweis: erscheint oberhalb des Inhalts, wenn man auf dem
   Handy im Übersicht-/Anfragen-Bereich nach unten zieht. */
#pull-indicator {
  position: sticky;
  top: 0;
  z-index: 15;
  text-align: center;
  font-size: 0.8rem;
  color: var(--primary-color);
  background: var(--accent-color);
  padding: 0.5rem;
  transform: translateY(-100%);
  transition: transform 0.2s ease;
  pointer-events: none;
}
#pull-indicator.visible {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  #refresh-btn.spinning { animation: none; }
}

#view-container {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1rem calc(5.5rem + var(--safe-bottom));
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}

.view { display: none; }
.view.active { display: block; animation: fadeIn 0.18s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: translateY(0);} }

/* ---------- Tab bar ---------- */
#tab-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  background: var(--accent-color);
  border-top: 1px solid var(--card-border);
  padding-bottom: var(--safe-bottom);
  z-index: 30;
}
.tab-btn {
  flex: 1;
  border: none;
  background: none;
  padding: 0.55rem 0.2rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  color: var(--text-color);
  opacity: 0.55;
  cursor: pointer;
}
.tab-btn.active { opacity: 1; color: var(--primary-color); }
.tab-btn .tab-icon { font-size: 1.3rem; line-height: 1; }
.tab-btn .tab-label { font-size: 0.68rem; font-weight: 500; }

/* ---------- Generic components ---------- */
h2.section-title {
  font-family: var(--font-display);
  color: var(--primary-color);
  font-size: 1.25rem;
  margin-bottom: 0.9rem;
}

.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.9rem;
}
.section-title-row .section-title { margin-bottom: 0; }
.btn.small {
  padding: 0.45rem 0.8rem;
  font-size: 0.8rem;
  border-radius: 9px;
  flex-shrink: 0;
}

.source-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--primary-color);
  background: var(--accent-color);
  border: 1px solid var(--card-border);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.7rem;
}

.checkbox-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.checkbox-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: #fff;
  font-size: 0.82rem;
  cursor: pointer;
}
.checkbox-chip input { width: auto; margin: 0; }
.checkbox-chip:has(input:checked) {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
}

.card {
  background: #fff;
  border-radius: 14px;
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow-soft);
  margin-bottom: 0.8rem;
  border: 1px solid var(--card-border);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
  margin-bottom: 1.2rem;
}
.stat-card {
  background: var(--accent-color);
  border-radius: 14px;
  padding: 0.9rem;
  text-align: center;
}
.stat-card .num { font-family: var(--font-display); font-size: 1.6rem; color: var(--primary-color); }
.stat-card .label { font-size: 0.75rem; opacity: 0.75; margin-top: 0.15rem; }

.chip-row { display: flex; gap: 0.4rem; overflow-x: auto; margin-bottom: 1rem; padding-bottom: 0.2rem; }
.chip {
  white-space: nowrap;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  background: var(--accent-color);
  font-size: 0.8rem;
  border: 1px solid var(--card-border);
  cursor: pointer;
}
.chip.active { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }

.badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  color: #fff;
}
.badge.neu { background: #b3791d; }
.badge.followup_gesendet { background: #7a7350; }
.badge.details_vollstaendig { background: #2779b3; }
.badge.angebot_erstellt { background: #6b4fb3; }
.badge.gebucht { background: #1a7a4c; }
.badge.abgelehnt { background: #7a2b2b; }
.badge.storniert { background: #555; }

.anfrage-card { cursor: pointer; }
.anfrage-card .row1 { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; }
.anfrage-card .name { font-weight: 600; }
.anfrage-card .meta { font-size: 0.8rem; opacity: 0.7; margin-top: 0.25rem; }
.anfrage-card .msg { font-size: 0.85rem; margin-top: 0.4rem; opacity: 0.85; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.empty-hint { text-align: center; opacity: 0.6; padding: 2rem 1rem; font-size: 0.9rem; }

/* ---------- Forms ---------- */
.field { margin-bottom: 0.9rem; }
.field label { display: block; font-size: 0.82rem; font-weight: 500; margin-bottom: 0.3rem; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border-radius: 9px;
  border: 1px solid var(--card-border);
  background: #fff;
}
.field textarea { resize: vertical; min-height: 70px; }
.field-row { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.field-row .field { flex: 1; min-width: 110px; }

.btn {
  display: inline-block;
  border: none;
  background: var(--primary-color);
  color: #fff;
  padding: 0.65rem 1.1rem;
  border-radius: 10px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
.btn:active { background: var(--primary-dark); }
.btn.secondary { background: var(--accent-color); color: var(--text-color); border: 1px solid var(--card-border); }
.btn.danger { background: var(--danger); }
.btn.block { width: 100%; }
.btn-row { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.7rem; }

/* ---------- Partner-Kacheln ---------- */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
}
.partner-tile {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 1.1rem 0.9rem;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.partner-tile:active { transform: scale(0.97); }
.partner-tile-name {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--primary-color);
  font-size: 1rem;
}
.partner-tile-rolle {
  font-size: 0.78rem;
  color: var(--text-color);
  opacity: 0.7;
  margin-top: 0.25rem;
}

/* ---------- Termine (innerhalb der Anfrage-Detailansicht) ---------- */
.termin-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--card-border);
}
.termin-row:last-of-type { border-bottom: none; }
.termin-row-main { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.88rem; }
.termin-row-main strong { color: var(--primary-color); font-size: 0.9rem; }
.termin-notiz { font-size: 0.8rem; opacity: 0.75; white-space: pre-wrap; }
.termin-remove {
  background: none;
  border: none;
  color: var(--danger);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  flex-shrink: 0;
}
.termin-form {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--card-border);
}

/* ---------- Modal / detail sheet ---------- */
#sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(5, 47, 43, 0.45);
  z-index: 40;
  display: none;
}
#sheet-backdrop.visible { display: block; }
#sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  max-height: 88vh;
  background: var(--background-color);
  border-radius: 20px 20px 0 0;
  z-index: 50;
  transform: translateY(110%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lift);
}
#sheet.visible { transform: translateY(0); }
#sheet-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--card-border);
}
#sheet-header h3 { font-family: var(--font-display); color: var(--primary-color); font-size: 1.1rem; }
#sheet-close {
  border: none; background: var(--accent-color); width: 32px; height: 32px; border-radius: 50%;
  font-size: 1rem; cursor: pointer;
}
#sheet-body { padding: 1rem 1.1rem calc(1.5rem + var(--safe-bottom)); overflow-y: auto; }

/* ---------- Rezepte ---------- */
.cocktail-grid { display: grid; grid-template-columns: 1fr; gap: 0.7rem; }
.cocktail-card { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.6rem; cursor: pointer; }
.cocktail-card .tags { margin-top: 0.3rem; }
.tag-pill {
  display: inline-block; font-size: 0.68rem; background: var(--accent-color);
  border-radius: 999px; padding: 0.12rem 0.5rem; margin: 0.1rem 0.2rem 0 0; opacity: 0.8;
}
.ingredient-line { padding: 0.3rem 0; border-bottom: 1px dashed var(--card-border); font-size: 0.92rem; }
.ingredient-line:last-child { border-bottom: none; }

/* ---------- Kalkulation ---------- */
.kalk-summary { background: var(--accent-color); border-radius: 14px; padding: 1rem; margin-top: 1rem; }
.kalk-summary .line { display: flex; justify-content: space-between; font-size: 0.9rem; padding: 0.25rem 0; }
.kalk-summary .line.total { font-weight: 700; font-size: 1.05rem; border-top: 1px solid var(--card-border); margin-top: 0.4rem; padding-top: 0.6rem; }
.kalk-summary .line.price { color: var(--primary-color); font-weight: 700; }

.material-row { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.material-row input { flex: 1; }
.material-row .qty { max-width: 90px; flex: none; }
.material-row button { flex: none; }

.cocktail-select-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0; border-bottom: 1px dashed var(--card-border); }
.cocktail-select-row .info { flex: 1; }
.cocktail-select-row .cname { font-weight: 500; font-size: 0.92rem; }
.cocktail-select-row input[type="number"] { width: 70px; text-align: center; }
.cocktail-select-row .price-input { width: 70px; text-align: center; }

.saved-kalk-item { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.saved-kalk-item .price { font-weight: 700; color: var(--primary-color); }

/* ---------- An/Aus-Schalter (z.B. Mail-Automatik) ---------- */
.switch-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0.5rem 0; }
.switch-row .switch-label { font-size:0.88rem; }
.switch-row .switch-sub { font-size:0.75rem; opacity:0.6; margin-top:0.1rem; }
.toggle-switch { position:relative; display:inline-block; width:48px; height:28px; flex:none; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-switch .slider { position:absolute; cursor:pointer; inset:0; background:#ccc4b4; border-radius:999px; transition:0.2s; }
.toggle-switch .slider::before { content:''; position:absolute; height:22px; width:22px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:0.2s; box-shadow:0 1px 3px rgba(0,0,0,0.25); }
.toggle-switch input:checked + .slider { background: var(--ok); }
.toggle-switch input:checked + .slider::before { transform: translateX(20px); }
.mute-badge { font-size:0.9rem; margin-left:0.3rem; }

/* ---------- Personal-Zeiterfassung ---------- */
.personal-row {
  background: var(--accent-color);
  border-radius: 12px;
  padding: 0.7rem 0.8rem;
  margin-bottom: 0.7rem;
}
.personal-row .prow-fields { display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:0.4rem; }
.personal-row input[type="text"] { flex: 1 1 100%; }
.personal-row input[type="date"] { flex: 1 1 47%; }
.personal-row input[type="time"] { flex: 1 1 22%; min-width: 70px; }
.personal-row input[type="number"] { flex: 1 1 30%; min-width: 70px; }
.personal-row .prow-auto { display:flex; align-items:center; gap:0.4rem; font-size:0.82rem; flex: 1 1 100%; }
.personal-row .prow-auto input { width:auto; }
.personal-row .prow-result { font-size:0.82rem; opacity:0.8; display:flex; justify-content:space-between; border-top:1px dashed var(--card-border); padding-top:0.4rem; margin-top:0.3rem; }
.personal-row .prow-remove { background:none; border:none; color:var(--danger); font-size:0.8rem; cursor:pointer; padding:0; margin-top:0.3rem; }

/* ---------- Kostenzeilen ---------- */
.kosten-row { display:flex; align-items:center; gap:0.5rem; padding:0.5rem 0; border-bottom:1px dashed var(--card-border); flex-wrap:wrap; }
.kosten-row .kart { flex: 1 1 100%; }
.kosten-row input.kart-name { font-weight:500; }
.kosten-row input.kbetrag { flex: 1 1 28%; min-width:80px; text-align:right; }
.kosten-row .kdiff { flex: 1 1 28%; min-width:80px; text-align:right; font-size:0.85rem; opacity:0.75; }
.kosten-row .kremove { flex: none; }
.kosten-row.locked .kart-name, .kosten-row.locked .kremove { opacity:0.6; }
.kosten-row .klabel { font-size:0.68rem; opacity:0.6; display:block; margin-bottom:0.1rem; }

.toast {
  position: fixed;
  bottom: calc(6rem + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary-dark);
  color: #fff;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.toast.visible { opacity: 1; }

.search-box { margin-bottom: 0.9rem; }
.search-box input { width: 100%; padding: 0.6rem 0.8rem; border-radius: 10px; border: 1px solid var(--card-border); background: #fff; }

pre.shopping-list {
  white-space: pre-wrap;
  font-family: var(--font-family);
  font-size: 0.88rem;
  background: #fff;
  border-radius: 10px;
  padding: 0.8rem;
  border: 1px solid var(--card-border);
}

/* =================================================================
   VERLEIH
================================================================== */

/* Status-Farben passend zu den bestehenden Badges */
.badge.angefragt  { background: #b3791d; }
.badge.bestaetigt { background: #1a7a4c; }
.badge.ausgegeben { background: #2779b3; }
.badge.zurueck    { background: #555; }

/* Bei 7 Tabs wird es eng - Beschriftung etwas kleiner */
#tab-bar .tab-btn { min-width: 0; }
#tab-bar .tab-label { font-size: 0.62rem; }

/* Schnellprüfung des Bestands */
#miet-check-card { margin-bottom: 1rem; }
.miet-check-list {
  margin-top: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.miet-check-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  font-size: 0.88rem;
  background: rgba(255, 255, 255, 0.04);
}
.miet-check-row.is-ok strong { color: #4fc3b4; }
.miet-check-row.is-part strong { color: #e3bd72; }
.miet-check-row.is-none strong { color: #ff8a80; }
.miet-check-row.is-none span { opacity: 0.6; }

/* Artikelauswahl beim Anlegen einer internen Reservierung */
.miet-pick-list {
  max-height: 44vh;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 0.3rem;
}
.miet-pick-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.miet-pick-row:last-child { border-bottom: none; }
.miet-pick-name strong { display: block; font-size: 0.92rem; }
.miet-pick-name small { display: block; font-size: 0.74rem; opacity: 0.65; }
.miet-pick-menge {
  width: 74px;
  flex: 0 0 auto;
  text-align: center;
  padding: 0.45rem;
}

/* Karte in der Reservierungsliste */
.miet-card { cursor: pointer; }
.miet-card .meta + .meta { margin-top: 0.15rem; opacity: 0.72; }