/*
 * Datei: assets/styles/recipes-overview.css
 * Zweck: Ergänzende Overlay-Darstellung für die Rezepte-Kachel- und Listenansicht.
 * Status: ergänzend aktiv
 * Verantwortet: Rezepte-Overlay inklusive Toolbar, Segmentumschalter und Listen-/Kachelflächen.
 */

:root{
  --zmr-top: calc(var(--app-header-safe, 0px) + var(--app-header-h, 76px) + 12px);
  --zmr-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  --zmr-side: 22px;
  --zmr-gap: 16px;
  --zmr-radius: 28px;
  --zmr-radius-sm: 18px;
}

body.zmr-overlay-open{
  overflow:hidden;
}

.zmr-hidden{
  display:none !important;
}

.zmr-overlay{
  position:fixed;
  inset:0;
  z-index:80;
  background:rgba(4,7,12,.56);
  backdrop-filter:blur(10px);
}

.zmr-shell{
  position:absolute;
  top:var(--zmr-top);
  right:var(--zmr-side);
  bottom:var(--zmr-bottom);
  left:var(--zmr-side);
  display:grid;
  grid-template-rows:auto 1fr;
  gap:14px;
  pointer-events:auto;
}

.zmr-toolbar{
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:56px;
}

.zmr-heading{
  font-size:14px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}

.zmr-toolbar-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.zmr-segment{
  display:inline-grid;
  grid-auto-flow:column;
  gap:8px;
  padding:4px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface);
  box-shadow:var(--shadow);
}

.zmr-segment-btn{
  min-height:40px;
  padding:0 14px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--text);
  font:inherit;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.zmr-segment-btn .material-symbols-rounded{
  font-size:20px;
  line-height:1;
}

.zmr-segment-btn.is-active{
  background:rgba(215,181,109,.16);
  box-shadow:0 0 0 1px rgba(215,181,109,.22) inset;
}

.zmr-close{
  width:44px;
  height:44px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface);
  color:var(--text);
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:var(--shadow);
  padding:0;
}

.zmr-close .material-symbols-rounded{
  font-size:22px;
  line-height:1;
}

.zmr-content{
  min-height:0;
  overflow:auto;
  padding-bottom:4px;
}

.zmr-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
  gap:14px;
  align-content:start;
}

.zmr-list{
  display:grid;
  gap:10px;
  align-content:start;
}

.zmr-card,
.zmr-row{
  width:100%;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text);
  border-radius:24px;
  box-shadow:var(--shadow);
  cursor:pointer;
  text-align:left;
}

.zmr-card{
  padding:0;
  overflow:hidden;
}

.zmr-card-media{
  aspect-ratio:1/1;
  overflow:hidden;
  background:var(--surface-2);
}

.zmr-card-media img,
.zmr-row-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.zmr-card-body{
  padding:12px 12px 14px;
}

.zmr-card-title,
.zmr-row-title{
  font-size:18px;
  line-height:1.22;
  font-weight:700;
  color:var(--text);
}

.zmr-row{
  display:grid;
  grid-template-columns:68px 1fr;
  align-items:center;
  gap:14px;
  padding:10px 12px;
  border-radius:22px;
}

.zmr-row-media{
  width:68px;
  height:68px;
  overflow:hidden;
  border-radius:16px;
  background:var(--surface-2);
}

.zmr-row-main{
  min-width:0;
}

.zmr-fallback{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  font-size:34px;
  font-weight:800;
  color:var(--text);
  background:var(--surface-2);
}

.zmr-fallback--small{
  font-size:22px;
}

.zmr-empty{
  padding:18px 16px;
  border:1px solid var(--line);
  border-radius:22px;
  background:var(--surface);
  color:var(--muted);
}

.zmr-search-hidden{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translateY(18px);
}

body.zmr-overlay-open #sideRail,
body.zmr-force-rail-collapsed #sideRail,
body.zmr-overlay-open .drawer-nav,
body.zmr-force-rail-collapsed .drawer-nav,
body.zmr-overlay-open .side-rail,
body.zmr-force-rail-collapsed .side-rail{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translateX(24px);
}

#sideRail,
.drawer-nav,
.side-rail,
.search-shell,
.bottom-search,
.search-wrap,
.search-container,
.search-bar,
#searchDock{
  transition:opacity .2s ease, visibility .2s ease, transform .2s ease;
}

@media (max-width:900px){
  .zmr-shell{
    right:18px;
    left:18px;
  }

  .zmr-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:640px){
  .zmr-shell{
    top:96px;
    right:16px;
    bottom:calc(14px + env(safe-area-inset-bottom, 0px));
    left:16px;
    gap:12px;
  }

  .zmr-toolbar{
    gap:10px;
  }

  .zmr-heading{
    font-size:13px;
  }

  .zmr-toolbar-actions{
    gap:10px;
  }

  .zmr-segment-btn{
    min-height:38px;
    padding:0 12px;
  }

  .zmr-segment-btn .material-symbols-rounded{
    font-size:19px;
  }

  .zmr-close{
    width:42px;
    height:42px;
  }

  .zmr-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }

  .zmr-card-title,
  .zmr-row-title{
    font-size:17px;
  }

  .zmr-row{
    grid-template-columns:60px 1fr;
    gap:12px;
    padding:10px;
  }

  .zmr-row-media{
    width:60px;
    height:60px;
  }
}

/* AP-29D-REV14-PHASE3 | 2026-05-18 | Rezepte-Overlay auf zentrale Surface-Tokens zurückgeführt; keine zweite blaue Kartenfamilie. */

/* AP-29D-REV14-PHASE4-B | Rezepte-Overlay in gleicher DG-Grammatik wie Home und Detail. */
:root{
  --zmr-radius:var(--dg-card-radius, 36px);
  --zmr-radius-sm:var(--radius-m, 22px);
}
.zmr-overlay{
  background:rgba(0,0,0,.40);
  backdrop-filter:blur(var(--shell-blur, 18px));
}
.zmr-shell{
  color:var(--dg-text, var(--text));
}
.zmr-segment,
.zmr-close,
.zmr-card,
.zmr-row,
.zmr-empty{
  border-color:var(--dg-line-soft, rgba(255,255,255,.065));
  background:var(--dg-surface, rgba(8,8,9,.40));
  box-shadow:var(--dg-shadow-card, 0 8px 18px rgba(0,0,0,.24));
}
.zmr-segment-btn.is-active{
  color:var(--dg-accent, var(--brand));
  background:var(--dg-accent-soft, rgba(215,181,109,.28));
  box-shadow:0 0 0 1px var(--shell-accent-ring-soft, rgba(215,181,109,.12)) inset;
}
.zmr-card,
.zmr-row{
  border-radius:var(--dg-card-radius, 36px);
}
.zmr-card-media,
.zmr-row-media,
.zmr-fallback{
  background:var(--dg-surface-solid, #121316);
}
.zmr-card-media{
  border-radius:var(--dg-card-radius, 36px) var(--dg-card-radius, 36px) 0 0;
}
.zmr-row-media{
  border-radius:18px;
}
.zmr-card-title,
.zmr-row-title{
  color:var(--dg-text, var(--text));
}
.zmr-heading{
  color:var(--dg-muted, var(--muted));
}

/* AP-29D-REV14-PHASE4-C-REV4 | Listenansicht durch kategorisierte Spalten ersetzt; keine neue Datenquelle. */
.zmr-category-board{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
  align-content:start;
  min-height:0;
}

.zmr-category-column{
  min-width:0;
  border:1px solid var(--dg-line-soft, rgba(255,255,255,.065));
  border-radius:var(--dg-card-radius, 36px);
  background:var(--dg-surface, rgba(8,8,9,.40));
  box-shadow:var(--dg-shadow-card, 0 8px 18px rgba(0,0,0,.24));
  overflow:hidden;
}

.zmr-category-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:52px;
  padding:12px 14px;
  border-bottom:1px solid var(--dg-line-soft, rgba(255,255,255,.065));
}

.zmr-category-title{
  min-width:0;
  color:var(--dg-text, var(--text));
  font-size:15px;
  line-height:1.15;
  font-weight:780;
  letter-spacing:.02em;
}

.zmr-category-count{
  min-width:30px;
  height:30px;
  border-radius:999px;
  display:grid;
  place-items:center;
  padding:0 8px;
  color:var(--dg-muted, var(--muted));
  border:1px solid var(--dg-line-soft, rgba(255,255,255,.065));
  background:var(--dg-surface-solid, #121316);
  font-size:12px;
  font-weight:760;
}

.zmr-category-list{
  display:grid;
  gap:8px;
  padding:10px;
}

.zmr-category-row{
  width:100%;
  min-width:0;
  min-height:58px;
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  align-items:center;
  gap:10px;
  padding:8px;
  border:1px solid var(--dg-line-soft, rgba(255,255,255,.065));
  border-radius:18px;
  background:color-mix(in srgb, var(--dg-surface, rgba(8,8,9,.40)) 82%, transparent);
  color:var(--dg-text, var(--text));
  box-shadow:var(--dg-shadow-chip, 0 6px 12px rgba(0,0,0,.20));
  cursor:pointer;
  text-align:left;
}

.zmr-category-media{
  width:48px;
  height:48px;
  overflow:hidden;
  border-radius:14px;
  background:var(--dg-surface-solid, #121316);
}

.zmr-category-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.zmr-category-main{
  min-width:0;
  display:grid;
  gap:4px;
}

.zmr-category-name{
  min-width:0;
  color:var(--dg-text, var(--text));
  font-size:14px;
  line-height:1.12;
  font-weight:760;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.zmr-category-meta,
.zmr-category-empty{
  color:var(--dg-muted, var(--muted));
  font-size:11px;
  line-height:1.15;
}

.zmr-category-meta{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.zmr-category-empty{
  min-height:46px;
  display:grid;
  place-items:center;
  border:1px dashed var(--dg-line-soft, rgba(255,255,255,.065));
  border-radius:16px;
}

@media (max-width:1280px){
  .zmr-category-board{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width:900px){
  .zmr-category-board{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:640px){
  .zmr-category-board{
    grid-template-columns:minmax(0,1fr);
    gap:12px;
  }

  .zmr-category-row{
    grid-template-columns:56px minmax(0,1fr);
    min-height:68px;
  }

  .zmr-category-media{
    width:56px;
    height:56px;
  }
}

/* AP-29D-REV14-PHASE4-C-REV5 | Quadratische Kartenbilder und leichtere Getränketypografie ohne neue Farbwelt. */
.zmr-card{
  position:relative;
  border-radius:var(--dg-card-radius, 36px);
}

.zmr-card-media{
  position:relative;
  aspect-ratio:1 / 1;
  border-radius:var(--dg-card-radius, 36px);
}

.zmr-card-body{
  position:absolute;
  inset-inline:0;
  inset-block-end:0;
  padding:12px 14px 14px;
  border-radius:0 0 var(--dg-card-radius, 36px) var(--dg-card-radius, 36px);
  background:var(--dg-title-overlay);
  backdrop-filter:blur(8px);
}

.zmr-card-title,
.zmr-row-title,
.zmr-category-title,
.zmr-category-name{
  font-weight:560;
  letter-spacing:-.012em;
}

.zmr-card-title{
  font-size:clamp(15px, 2.8vw, 17px);
  line-height:1.18;
}

.zmr-category-name{
  font-size:13px;
  line-height:1.16;
}

@media (max-width:640px){
  .zmr-card-body{
    padding:10px 12px 12px;
  }

  .zmr-card-title{
    font-size:16px;
  }
}


/* AP-29D-REV14-PHASE4-C-REV13 | Rezepte-Overlay nutzt den Header-Menübutton als einzige sichtbare Schließen-Wahrheit. */
.zmr-toolbar-actions{
  grid-template-columns:minmax(0, auto);
}
.zmr-close{
  display:none;
}


/* AP-29D-REV14-PHASE4-C-REV14 | Ganzes Rezept-Element erhält Press-Feedback; kein reiner Hintergrundversatz. */
.zmr-card,
.zmr-category-row,
.zmr-segment-btn{
  transform-origin:center;
  will-change:transform;
  transition:transform var(--dg-motion-fast, 160ms) var(--dg-motion-ease, ease), box-shadow var(--dg-motion-fast, 160ms) var(--dg-motion-ease, ease), filter var(--dg-motion-fast, 160ms) var(--dg-motion-ease, ease), border-color var(--dg-motion-fast, 160ms) var(--dg-motion-ease, ease);
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

.zmr-card.is-pressing,
.zmr-category-row.is-pressing,
.zmr-segment-btn.is-pressing,
.zmr-card:active,
.zmr-category-row:active,
.zmr-segment-btn:active{
  transform:translate3d(0,1px,0) scale(.986);
  box-shadow:var(--dg-shadow-chip, var(--shadow));
  filter:brightness(.94) saturate(.98);
}

.zmr-card.is-pressing .zmr-card-media,
.zmr-card.is-pressing .zmr-card-body,
.zmr-card:active .zmr-card-media,
.zmr-card:active .zmr-card-body{
  transform:none;
}


/* AP-29D-REV14-PHASE4-C-REV16 | Rezepte-Overlay führt die aktive Vordergrundebene; keine Hintergrundbewegung. */
.zmr-overlay{
  z-index:calc(var(--shell-z-header, 240) - 1);
  overscroll-behavior:contain;
  touch-action:none;
}
.zmr-shell{
  isolation:isolate;
  transform:translate3d(0,0,0);
  will-change:transform;
}
.zmr-content{
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}
body.zmr-overlay-open #mainContent{
  pointer-events:none;
}
body.zmr-overlay-open .zmr-shell,
body.zmr-overlay-open .zmr-card,
body.zmr-overlay-open .zmr-category-row{
  pointer-events:auto;
}
.zmr-card.is-pressing,
.zmr-category-row.is-pressing,
.zmr-segment-btn.is-pressing,
.zmr-card:active,
.zmr-category-row:active,
.zmr-segment-btn:active{
  transform:translate3d(0,2px,0) scale(.982);
}

/* AP-29D-REV14-PHASE4-C-REV17 | Rezept-Typografie und Overlay-Top-Freistellung an Suchtreffer-Grammatik zurückgeführt. */
.zmr-shell{
  top:calc(var(--app-header-safe, 0px) + var(--app-header-h, 76px) + 18px);
}
.zmr-card-title,
.zmr-row-title,
.zmr-category-name{
  text-transform:none;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:14px;
  font-weight:650;
  line-height:1.17;
  letter-spacing:-.012em;
}
.zmr-card-title{
  font-size:clamp(14px, 2.4vw, 15px);
}
.zmr-category-name{
  font-size:14px;
  font-weight:650;
}
.zmr-category-meta,
.zmr-category-empty{
  font-size:12px;
  line-height:1.18;
}
.zmr-card-body{
  padding:10px 12px 12px;
}
@media (max-width:640px){
  .zmr-shell{
    top:calc(var(--app-header-safe, 0px) + var(--app-header-h, 74px) + 16px);
    right:14px;
    left:14px;
  }
  .zmr-toolbar{
    min-height:50px;
  }
  .zmr-card-title,
  .zmr-row-title,
  .zmr-category-name{
    font-size:14px;
  }
  .zmr-segment-btn{
    font-size:15px;
  }
}