/* ============================================================================
   plan-library-embed.css — Library tab embedded on /plan.
   Redesigns the scoped library styles (plan-library.css) for in-tab use:
     • slim, sticky one-row top bar (search / filters / tags / add)
     • folders as a horizontal chip strip pinned above the grid
     • always-compact "compact-plus" meal cards (accent bar, stat chips,
       capped tag pills)
     • dish detail & Edit Meal take over app-main instead of popping up:
       full screen on small viewports, clipped to the app-main area (sidebar
       stays visible) with a centered width-capped card on large ones
   All selectors are anchored to #library-view / #library-modals so nothing
   here can leak into the rest of the plan page.
   ========================================================================== */

/* ── Own the tab's height instead of the whole page ───────────────────────
   main-shell-header is a fixed 104px (plan.css) and #app-container keeps
   its own bottom padding below us, so #library-view's height is exactly
   what's left of the viewport — nothing above it, so #app-container's top
   padding (2rem desktop / 3rem tablet / 1rem phone) is cancelled by the
   negative margin below, minus a small 8px breathing gap above the header.
   Only the meals grid scrolls inside this box (see "Meals area" further
   down); the search bar, folders strip and "Your meals" heading stay put. */
#library-view {
  margin-top: calc(-2rem + 8px);
  display: flex;
  flex-direction: column;
  height: calc(100vh - 104px - 2.25rem - 8px);
  overflow: hidden;
}

@supports (height: 100dvh) {
  #library-view {
    height: calc(100dvh - 104px - 2.25rem - 8px);
  }
}

#library-view .library-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: auto;
  min-height: 0;
  overflow: hidden;
}

/* ── Top bar: one slim row, no longer needs to stick — nothing above it
   scrolls anymore. Visually fused with .folders-sidebar below it into a
   single outlined card (one border, one shadow, rounded only on the outer
   corners) with a hairline divider between the two rows — see
   ".folders-sidebar" further down for the matching bottom half. ────────── */
#library-view .library-header {
  flex-shrink: 0;
  padding: 8px 10px;
  border: 1px solid var(--border-subtle);
  border-bottom: 1px solid rgba(8, 52, 99, 0.08);
  border-radius: 14px 14px 0 0;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(8, 52, 99, 0.07);
  margin-bottom: 0;
  position: relative;
  z-index: 10;
}

#library-view .library-controls-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
}

#library-view .search-field {
  min-height: 38px;
  background: #f4f9ff;
}

/* plan.css's global `input { margin-bottom: 0.5rem }` reset survives
   .search-input's own overrides (it never sets margin), which pushes the
   input's margin box down inside .search-field's centered flex row —
   the text renders visibly above center. Cancel it. */
#library-view .search-input {
  margin-bottom: 0;
}

/* Segmented icon group: Filters + Manage Tags */
#library-view .header-control-buttons {
  min-height: 38px;
}

#library-view .filter-toggle-btn,
#library-view #manage-tags-btn {
  width: 36px;
  min-height: 0;
  height: auto;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--text-header);
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
}

#library-view .filter-toggle-btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

#library-view #manage-tags-btn {
  margin-left: 1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

#library-view #manage-tags-btn:hover {
  background: #edf5ff;
}

#library-view .filter-toggle-btn.active {
  background: var(--primary-blue);
  color: #fff;
}

/* Icon-only controls in the slim bar */
#library-view .library-controls-row .mobile-control-label {
  display: none;
}

#library-view #open-add-own-meal-btn {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 13px;
}

/* Filter panel hangs from the sticky bar; never wider than the tab itself. */
#library-view .filter-panel {
  width: min(760px, 100%);
}

/* ── Folders: horizontal chip strip, always at the top ────────────────────── */
#library-view .library-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: transparent;
}

#library-view .folders-sidebar {
  flex-shrink: 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border-subtle);
  border-top: none;
  border-radius: 0 0 14px 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 4px 14px rgba(8, 52, 99, 0.07);
  margin-bottom: 14px;
  overflow: hidden;
}

#library-view .sidebar-header {
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

#library-view .sidebar-title {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

#library-view .create-folder-btn {
  width: 26px;
  height: 26px;
  font-size: 16px;
}

#library-view .folders-list {
  flex-direction: row;
  flex-wrap: nowrap;
  flex: 1;
  min-height: 0;
  gap: 8px;
  padding: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

#library-view .folder-item {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12.5px;
}

/* ── Meals area: the only thing that actually scrolls ─────────────────────── */
#library-view .meals-main {
  flex: 1;
  min-height: 0;
  padding: 0 0 20px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: transparent;
}

#library-view .meals-grid.compact-grid {
  grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
  gap: 10px;
}

/* ── Compact-plus cards (embedded look) ───────────────────────────────────── */
#library-view .meal-card-embedded {
  position: relative;
  padding: 9px 11px 8px 13px;
  gap: 7px;
  min-height: 0;
}

#library-view .meal-card-embedded::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--primary-blue);
  opacity: 0.85;
}

#library-view .meal-card-embedded--side::before {
  background: #22c55e;
}

#library-view .meal-card-embedded .meal-card-title {
  font-size: 12.5px;
}

#library-view .embedded-meta-row {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 4px;
}

#library-view .embedded-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #f2f7fd;
  border: 1px solid #e2edf9;
  color: #51667f;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

#library-view .embedded-stat i {
  font-size: 9px;
  opacity: 0.8;
}

#library-view .embedded-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

#library-view .embedded-tags-row .tag-pill {
  font-size: 9px;
  padding: 2px 8px;
  line-height: 1.35;
}

#library-view .tag-pill-more {
  background: #eef2f7;
  color: #6b7c93;
  border-color: #dde6f0;
}

/* ── Dish detail & Edit Meal: take over app-main instead of popping up ────────
   Both dialogs share the .meal-detail-content class on their modal-content.
   On phones/tablets the sidebar is already off-canvas, so the view covers
   the full screen. From 769px up (#app-sidebar's fixed 250px starts eating
   into the layout, see plan.css #app-main) the view is clipped to the
   app-main area only — the sidebar stays put and clickable — and the card
   inside it is width-capped and centered, same as a normal app-main view. */
#library-modals #meal-detail-modal,
#library-modals #edit-meal-modal {
  padding: 0;
  background: #f3f9fd;
  backdrop-filter: none;
}

#library-modals #meal-detail-modal .meal-detail-content,
#library-modals #edit-meal-modal .meal-detail-content {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  border-radius: 0;
  border: none;
}

@media (min-width: 769px) {
  #library-modals #meal-detail-modal,
  #library-modals #edit-meal-modal {
    left: 250px;
    padding: 20px;
  }

  #library-modals #meal-detail-modal .meal-detail-content,
  #library-modals #edit-meal-modal .meal-detail-content {
    max-width: 900px;
    border-radius: 20px;
    border: 1px solid var(--border-subtle);
  }
}

/* When the sidebar itself is collapsed (manual toggle), app-main spans the
   full width — match it. Unconditional so it also no-ops harmlessly on
   phones, where the base rule is already left: 0. */
body.sidebar-collapsed #library-modals #meal-detail-modal,
body.sidebar-collapsed #library-modals #edit-meal-modal {
  left: 0;
}

/* plan.css's global `input { padding: 14px; border: 1px solid ...; }` reset
   applies to input[type=range] too. .scale-slider never sets its own
   border/padding, so those survive underneath its height:5px track,
   forcing the box open to fit the 28px of padding — the thin track bar
   ends up floating inside a tall bordered rectangle instead of reading as
   a slider. Strip them back out. */
#library-modals .scale-slider {
  padding: 0;
  border: none;
  margin-bottom: 0;
}

/* ── Plan-page context resets ─────────────────────────────────────────────── */
/* plan.css forces a fixed height on .modal-content (its own popup system);
   library dialogs must size to their content instead. The detail view above
   re-asserts its full-height layout with higher specificity. */
#library-modals .modal-content {
  height: auto;
}

#library-modals .modal-content.meal-detail-content {
  height: 100%;
}

/* plan.css animates .modal-content via transform/opacity helper classes the
   library never adds — neutralise the transition so dialogs open instantly. */
#library-modals .modal-content {
  transform: none;
  transition: none;
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* #app-container's top padding grows to 3rem and main-shell-header shrinks
     to ~82px at this breakpoint (both set in plan.css). */
  #library-view {
    margin-top: calc(-3rem + 8px);
    height: calc(100vh - 82px - 1.5rem - 8px);
  }

  @supports (height: 100dvh) {
    #library-view {
      height: calc(100dvh - 82px - 1.5rem - 8px);
    }
  }

  #library-view .library-header {
    padding: 6px 8px;
    border-radius: 12px 12px 0 0;
    margin-bottom: 0;
  }

  #library-view .library-controls-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 6px;
  }

  #library-view #open-add-own-meal-btn {
    min-height: 36px;
    padding: 0 10px;
    font-size: 12px;
  }

  #library-view .folders-sidebar {
    padding: 6px 10px;
    border-radius: 0 0 12px 12px;
    margin-bottom: 10px;
  }

  /* Keep the strip lean: the + button stays, the label goes. */
  #library-view .sidebar-title {
    display: none;
  }

  #library-view .meals-grid.compact-grid {
    grid-template-columns: repeat(auto-fill, minmax(157px, 1fr));
    gap: 8px;
  }

  #library-view .filter-panel.is-open {
    max-height: calc(100dvh - 150px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* #app-container's top and bottom padding both shrink to 1rem at this
   breakpoint. */
@media (max-width: 640px) {
  #library-view {
    margin-top: calc(-1rem + 8px);
    height: calc(100vh - 82px - 1rem - 8px);
  }

  @supports (height: 100dvh) {
    #library-view {
      height: calc(100dvh - 82px - 1rem - 8px);
    }
  }
}