/* ===== Design tokens ===== */
:root{
  --bg: #F3F5EF;
  --surface: #FFFFFF;
  --surface-2: #EAEEE4;
  --ink: #232B22;
  --ink-soft: #5B6459;
  --line: #D7DECC;
  --accent: #2F4B3C;
  --accent-contrast: #F3F5EF;
  --gold: #B9822F;
  --danger: #A3402F;
  --ok: #2E7D4F;
  --shadow: 0 8px 24px rgba(35, 43, 34, 0.08);
  --radius: 10px;
  --font-display: "Source Serif 4", Georgia, serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
}

[data-theme="dark"]{
  --bg: #171D18;
  --surface: #202821;
  --surface-2: #263029;
  --ink: #E9EEE3;
  --ink-soft: #A6B2A0;
  --line: #384539;
  --accent: #8FBF9F;
  --accent-contrast: #131A14;
  --gold: #D6A34E;
  --danger: #E08571;
  --ok: #7FCB98;
  --shadow: 0 8px 28px rgba(0,0,0,0.4);
}

*{ box-sizing: border-box; }

body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
  transition: background .2s ease, color .2s ease;
}

/* ===== Header ===== */
.app-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 1.25rem 1.75rem;
  border-bottom: 1px solid var(--line);
}
.app-title{
  font-family: var(--font-display);
  font-weight:600;
  font-size: 1.6rem;
  margin:0;
  letter-spacing: 0.01em;
  color: var(--danger);
}
.app-title-accent{ color: var(--danger); }

/* ===== Statuszeile ===== */
.app-status{
  margin: 0;
  padding: .6rem 1.75rem;
  font-size: .85rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
}
.app-status[data-kind="error"]{
  background: color-mix(in srgb, var(--danger) 14%, var(--surface));
  color: var(--danger);
  font-weight: 500;
}
.app-status[data-kind="success"]{
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
}

/* ===== Empfehlungen ===== */
.panel-recommendations{
  margin: 1.75rem 1.75rem 0;
}
.panel-recommendations .panel-sub{ margin-bottom: 0; }
.recommendations-row{
  display:flex;
  gap:1rem;
  overflow-x:auto;
}
.recommendations-row:not(:empty){ margin-top:1rem; padding-bottom:.3rem; }
.recommendation-card{
  flex: 1 1 0;
  min-width: 190px;
  display:flex;
  flex-direction:column;
  gap:.4rem;
  padding:.8rem;
  background: var(--surface);
  border:1px solid var(--line);
  border-radius:8px;
  text-align:left;
  color: var(--ink);
  cursor:pointer;
  font-family: var(--font-body);
  transition: transform .08s ease, box-shadow .15s ease;
}
.recommendation-card:hover{ box-shadow: var(--shadow); transform: translateY(-2px); }
.recommendation-thumb{
  width:100%; height:90px;
  object-fit:cover;
  border-radius:6px;
  background: var(--surface-2);
}
.recommendation-thumb-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.8rem;
}
.recommendation-name{
  font-family: var(--font-display);
  font-size:.98rem;
  font-weight:600;
}
.recommendation-desc{ font-size:.8rem; color: var(--ink-soft); }
.recommendation-badge{
  align-self:flex-start;
  font-size:.72rem;
  font-weight:600;
  padding:.15rem .55rem;
  border-radius:999px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--accent);
}
.recommendation-badge-filler{
  background: var(--surface-2);
  color: var(--ink-soft);
}
.recommendation-detail{ font-size:.75rem; color: var(--ink-soft); }
.recommendation-detail strong{ color: var(--ink); font-weight:600; }
.recommendation-missing strong{ color: var(--danger); }
/* "Da:" - vorhandene Zutaten komplett gruen (Label und Aufzaehlung) */
.recommendation-have,
.recommendation-have strong{ color: var(--ok); }

/* ===== Layout ===== */
.layout{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap: 1.75rem;
  padding: 1.75rem;
  align-items:start;
}
@media (max-width: 860px){
  .layout{ grid-template-columns: 1fr; }
}

.panel{
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
}
.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  margin-bottom: .5rem;
}
.panel h2{
  font-family: var(--font-display);
  font-weight:600;
  font-size:1.15rem;
  margin: 0;
}
.panel-sub{
  color: var(--ink-soft);
  font-size: .85rem;
  margin: 0 0 1rem;
}

/* ===== Recipe toolbar (Suche + Sortierung) ===== */
.recipe-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem;
  margin-top: .9rem;
}
.recipe-search-wrap{ flex: 1 1 220px; min-width: 180px; }
.recipe-sort-wrap{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex: 0 0 auto;
}
.recipe-sort-wrap label{
  font-size:.82rem;
  color: var(--ink-soft);
  white-space:nowrap;
}
.recipe-sort-wrap select{ width:auto; min-width: 200px; }
#recipeResetFiltersBtn{ flex: 0 0 auto; margin-left: auto; }

/* ===== Recipe pager ===== */
.recipe-pager{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
}
.recipe-pager-info{ margin:0; color: var(--ink-soft); font-size:.82rem; }
.recipe-pager-controls{
  display:flex;
  align-items:center;
  gap:.4rem;
}
.recipe-pager-controls select{ width:auto; }
.recipe-page-indicator{
  font-size:.85rem;
  min-width: 108px;
  text-align:center;
  color: var(--ink);
}
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip: rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ===== Recipe table ===== */
/* Begrenzt die Tabelle auf eine feste Hoehe und gibt ihr eine eigene
   Scrollleiste - Suchleiste und Pager bleiben davon unberuehrt sichtbar,
   auch wenn die Ergebnisliste lang ist. */
.recipe-table-scroll{
  max-height: 60vh;
  overflow-y: auto;
  margin-top: 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.recipe-table-scroll::-webkit-scrollbar{ width: 8px; }
.recipe-table-scroll::-webkit-scrollbar-track{ background: transparent; }
.recipe-table-scroll::-webkit-scrollbar-thumb{ background: var(--line); border-radius: 4px; }
.recipe-table-scroll::-webkit-scrollbar-thumb:hover{ background: var(--ink-soft); }

.recipe-table{
  width:100%;
  border-collapse: collapse;
}
.recipe-table th{
  position: sticky;
  top: 0;
  background: var(--surface);
  text-align:left;
  font-weight:500;
  color: var(--ink-soft);
  font-size: .82rem;
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--line);
}
.recipe-table td{
  padding: .7rem .6rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.recipe-table tr:last-child td{ border-bottom:none; }
/* Zebra-Streifen: jede zweite Zeile in --surface-2 statt --surface -
   bewusst nur ein minimaler Farbunterschied, damit lange Listen lesbarer
   werden, ohne unruhig zu wirken. */
.recipe-table tbody tr:nth-child(even){ background: var(--surface-2); }
.recipe-name-cell{
  font-family: var(--font-display);
  font-size:1.02rem;
  display:flex;
  align-items:center;
  gap:.5rem;
}
/* Kochbild-Symbol vor dem Rezeptnamen: 16x16, zwei Zustaende */
.recipe-img-icon{
  width:16px; height:16px;
  flex:0 0 auto;
}
.recipe-img-icon.has-image{ color: var(--ok); }
.recipe-img-icon.no-image{ color: var(--ink-soft); opacity:.4; }
.col-menu{ width: 120px; }
.menu-cell{ display:flex; gap:.4rem; }

/* ===== Fridge (index-card look) ===== */
.panel-fridge{
  background: repeating-linear-gradient(var(--surface), var(--surface) 34px, var(--surface-2) 35px);
  border: 1px dashed var(--line);
  /* Bleibt beim Scrollen der (potenziell langen) Rezeptliste sichtbar und
     bekommt bei viel Inhalt eine eigene Scrollleiste statt die ganze Seite
     in die Laenge zu ziehen. */
  position: sticky;
  top: 1.75rem;
  max-height: calc(100vh - 3.5rem);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.panel-fridge::-webkit-scrollbar{ width: 8px; }
.panel-fridge::-webkit-scrollbar-track{ background: transparent; }
.panel-fridge::-webkit-scrollbar-thumb{ background: var(--line); border-radius: 4px; }
.panel-fridge::-webkit-scrollbar-thumb:hover{ background: var(--ink-soft); }
@media (max-width: 860px){
  /* Im einspaltigen Layout stuende ein fixierter Kuehlschrank der
     Rezeptliste im Weg - dort ganz normal mitscrollen lassen. */
  .panel-fridge{ position: static; max-height: none; overflow-y: visible; }
}
.fridge-form{
  display:flex;
  gap: .4rem;
  margin-bottom: .9rem;
}
.fridge-form input{ flex:1; min-width:0; }
.fridge-list{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction:column;
  gap: .4rem;
}
.fridge-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .4rem .6rem;
}
.fridge-item-name{ font-weight:500; }
.fridge-item-amount{ color: var(--ink-soft); font-size:.85rem; margin-right:auto; padding-left:.5rem; }
.fridge-item-actions{ display:flex; gap:.3rem; }

/* ===== Buttons ===== */
.btn{
  font-family: var(--font-body);
  font-size: .88rem;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: .5rem .9rem;
  cursor:pointer;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:active{ transform: scale(0.97); }
.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; }
.btn-primary{ background: var(--accent); color: var(--accent-contrast); font-weight:600; }
.btn-secondary{ background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.btn-ghost{ background: transparent; color: var(--ink); border-color: var(--line); }
.btn-danger-ghost{ background: transparent; color: var(--danger); border-color: var(--line); }
.btn-icon{ background: transparent; border-color: var(--line); padding: .35rem .55rem; }
.btn-small{ padding: .35rem .6rem; font-size:.8rem; }

input[type="text"], input[type="search"], textarea, input[type="file"], select{
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .5rem .6rem;
  width:100%;
}
textarea{ resize: vertical; }
input[type="search"]::-webkit-search-cancel-button{ cursor:pointer; }

.empty-state{ color: var(--ink-soft); font-size:.9rem; padding: .5rem 0; }
.empty-state-small{ font-size: .8rem; }

/* ===== Dialog ===== */
.recipe-dialog{
  border:none;
  border-radius: var(--radius);
  padding:0;
  width: min(640px, 92vw);
  max-height: 88vh;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.recipe-dialog::backdrop{ background: rgba(23,29,24,0.5); }
.recipe-dialog form{
  display:flex;
  flex-direction:column;
  gap: 1.1rem;
  padding: 1.5rem 1.6rem;
  overflow-y:auto;
  max-height: 88vh;
}
.dialog-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.dialog-head h2{
  font-family: var(--font-display);
  font-weight:600;
  margin:0;
  color: var(--danger);
}
.field{ display:flex; flex-direction:column; gap:.35rem; font-size:.85rem; color: var(--ink-soft); }
.field input, .field textarea{ color: var(--ink); font-size:.95rem; }

.field-group{
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .9rem 1rem 1.1rem;
}
.field-group legend{
  font-family: var(--font-display);
  font-size: .95rem;
  padding: 0 .4rem;
  color: var(--accent);
}
.ingredient-add-row{
  display:flex;
  gap: .4rem;
  margin-bottom: .7rem;
  flex-wrap: wrap;
}
.ingredient-add-row input{ flex:1; min-width: 120px; }
.ingredient-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:.35rem;
}
.ingredient-row{
  display:flex;
  align-items:center;
  gap:.5rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: .35rem;
}
.ingredient-row input{ flex:1; }
.ingredient-row .ingredient-amount{ max-width: 110px; flex: 0 0 110px; }

.upload-label{
  display:inline-block;
  font-size:.85rem;
  color: var(--accent);
  cursor:pointer;
  margin-bottom:.4rem;
}
#imageInput{ padding: .35rem; }
.image-list{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:.7rem;
}
/* Basisgroesse 84px, um 300% vergroessert (= das 4-fache) auf 336px. */
.image-thumb{
  position:relative;
  width: 336px; height:336px;
  border-radius: 6px;
  overflow:hidden;
  border: 1px solid var(--line);
}
.image-thumb img{ width:100%; height:100%; object-fit:cover; display:block; cursor: zoom-in; }
.image-remove{
  position:absolute;
  top:6px; right:6px;
  width:32px; height:32px;
  border-radius:50%;
  border:none;
  background: rgba(23,29,24,0.75);
  color:#fff;
  font-size:1rem;
  line-height:1;
  cursor:pointer;
}

.dialog-actions{
  display:flex;
  justify-content:flex-end;
  gap:.6rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

/* ===== Bild-Lightbox: Doppelklick auf ein Bild zeigt es um weitere 300%
   vergroessert (also das 4-fache der bereits vergroesserten 336px-Kachel
   = 1344px), begrenzt auf den sichtbaren Bereich. Liegt als Kind im
   <dialog>, damit sie im selben Top-Layer wie der modale Dialog steht und
   ueber dessen Backdrop erscheint. */
.image-lightbox{
  position:fixed;
  inset:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 2rem;
  background: rgba(15,18,15,0.82);
  cursor: zoom-out;
}
/* [hidden] hat dieselbe Spezifitaet wie die Klasse oben und muesste sich
   sonst rein per Kaskadenreihenfolge dagegen durchsetzen - lieber explizit
   erzwingen, damit die Lightbox bei hidden="" zuverlaessig verschwindet. */
.image-lightbox[hidden]{ display:none; }
.image-lightbox img{
  /* width/height statt max-*: das Bild soll aktiv auf die Zielgroesse
     vergroessert werden (auch kleine Quellbilder), nicht nur begrenzt
     werden, falls es zufällig groesser ist. object-fit haelt dabei das
     Seitenverhaeltnis, noetigenfalls mit Letterboxing. */
  width: min(1344px, 92vw);
  height: min(1344px, 88vh);
  object-fit: contain;
  border-radius: 8px;
  box-shadow: var(--shadow);
  background: var(--surface);
}
.image-lightbox-close{
  position:absolute;
  top: 1.1rem; right: 1.1rem;
  width:38px; height:38px;
  border-radius:50%;
  border:none;
  background: rgba(255,255,255,0.15);
  color:#fff;
  font-size:1.1rem;
  line-height:1;
  cursor:pointer;
}