/* ============================================================================
   item-editor.css — styling for medalmenu.components.item-editor

   Material 3-structured editor shell with a neutral surface + the app's
   existing primary (#337AB7). Every rule is .ie- namespaced (plus a few
   framework-class overrides scoped under .ie-sheet / .ie-details-dialog), so
   nothing here leaks into the rest of the app.
   ============================================================================ */

/* Root wrapper for one item-editor instance. `isolation: isolate` makes it a
   stacking context so all of the editor's fixed-position layers (backdrop,
   detail dialogs, confirm overlays) stack *within* it. A nested item-editor
   (the meal-part editor) is then placed above the parent's layers as a single
   unit via .ie-root--elevated, instead of its individual layers colliding with
   the parent's. `position: relative` is required for z-index to apply; it does
   not create a containing block for the fixed descendants. */
.ie-root {
  isolation: isolate;
  position: relative;
  z-index: 1050;
}
.ie-root--elevated {
  /* Above the parent editor's .ie-details-overlay (1100). */
  z-index: 1200;
}

/* Backdrop flex-centers the sheet. We deliberately avoid a transform-based
   centering on .ie-sheet: a `transform` makes the sheet a containing block
   for descendant popovers (re-com info-button help popups), which both
   mis-positions them and subjects them to .ie-sheet's overflow:hidden. */
.ie-backdrop {
  position: fixed; inset: 0;
  background: rgba(28, 27, 31, 0.4);
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ie-fade-in 200ms cubic-bezier(0.2, 0, 0, 1);
}
.ie-sheet {
  position: relative;
  background: #FFFFFF;
  border-radius: 24px;
  box-shadow: 0 6px 10px rgba(0,0,0,0.10), 0 12px 32px rgba(0,0,0,0.18);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: width 320ms cubic-bezier(0.2, 0, 0, 1),
              height 320ms cubic-bezier(0.2, 0, 0, 1);
  animation: ie-pop-in 280ms cubic-bezier(0.2, 0, 0, 1);
  font-family: 'Roboto', system-ui, sans-serif;
  color: #1F1F1F;
}
.ie-sheet--compact {
  width: 520px;
  max-height: 90vh;
  /* Anchor the compact sheet near the top of the viewport so that growth on
     type switch (which adds a compact row-button) extends only downward,
     instead of the flex-centered sheet expanding equally up and down.
     Spacious is unaffected — its height is fixed at 92vh, so it can't grow,
     and it stays vertically centered by the backdrop's default. */
  align-self: flex-start;
  margin-top: 5vh;
}
.ie-sheet--spacious {
  /* Preferred width = left col (720) + right col cap (1400). On smaller
     monitors clamp to viewport minus a small margin so the sheet still
     fits. */
  width: min(2120px, calc(100vw - 32px));
  height: 92vh;
}
@keyframes ie-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes ie-pop-in {
  from { transform: scale(0.96); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
.ie-header {
  flex: 0 0 auto;
  padding: 16px 24px 12px 24px;
  background: #FFFFFF;
  z-index: 2;
  border-bottom: 1px solid #E5E7EB;
}
.ie-header-top {
  display: flex; align-items: center; gap: 8px;
}
.ie-icon-btn {
  border: none; background: transparent;
  width: 40px; height: 40px; border-radius: 20px;
  cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center;
  color: #545458; transition: background 150ms;
}
.ie-icon-btn:hover  { background: rgba(31, 31, 31, 0.06); }
.ie-icon-btn:active { background: rgba(31, 31, 31, 0.12); }
.ie-title {
  flex: 0 1 auto;
  font-size: 22px; line-height: 28px; font-weight: 500;
  color: #1F1F1F; margin: 0;
  letter-spacing: -0.01em;
}
/* Push the trailing action buttons (max / ellipses / close) to the right
   edge of the header. Applied to the first .ie-icon-btn after the chip. */
.ie-header-top .ie-section-chip-wrap + .ie-icon-btn { margin-left: auto; }
.ie-header-top > .ie-icon-btn:nth-child(2)          { margin-left: auto; }
/* Section pill — same dropdown pattern as the type chip but outlined so the
   two pills read as different controls. Anchors its menu beneath it. */
.ie-section-chip-wrap { position: relative; display: inline-block; max-width: 100%; }
.ie-section-chip {
  display: inline-flex; align-items: center;
  gap: 4px; padding: 7px 8px 7px 14px;
  border-radius: 8px;
  background: #FFFFFF; color: #1F1F1F;
  font-size: 14px; font-weight: 500;
  border: 1px solid #D0D5DB; cursor: pointer;
  transition: background 150ms, border-color 150ms;
  max-width: 100%;
}
.ie-section-chip:hover  { background: #F6F7F9; border-color: #B8BFC7; }
.ie-section-chip .zmdi  { font-size: 18px; line-height: 1; color: #6B7280; }
.ie-section-chip > span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ie-section-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  max-width: 340px;
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10), 0 8px 24px rgba(0,0,0,0.16);
  padding: 6px 0;
  z-index: 10;
  animation: ie-fade-in 120ms cubic-bezier(0.2, 0, 0, 1);
}

/* The "Add new section" entry sits at the foot of the section menu,
   visually separated from the regular choices. */
.ie-section-menu-item--add {
  border-top: 1px solid #ECEEF1;
  margin-top: 4px;
  padding-top: 12px;
  color: #1F4E72;
  font-weight: 500;
}
.ie-section-menu-item--add .zmdi { margin-right: 4px; }
/* In maximized view the section picker should track the left form column
   (720 px wide, starting at the header's 24 px inset) rather than stretching
   the full sheet width. */
/* Type options — a horizontal strip directly under the Title input. The
   currently-selected type is a filled pill; the rest are the same shape with
   a transparent background. All options share padding, radius, and weight so
   switching active swaps only the bg/colour and doesn't shift the layout. */
.ie-type-options {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.ie-type-option {
  border: none;
  background: transparent;
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #6B7280;
  cursor: pointer;
  transition: background 150ms, color 150ms;
}
.ie-type-option:hover {
  background: rgba(31, 31, 31, 0.06);
  color: #1F1F1F;
}
.ie-type-option--active,
.ie-type-option--active:hover {
  background: #E1F0FA;
  color: #1F4E72;
  cursor: default;
}

/* Shared transparent backdrop reused by the section and overflow menus. */
.ie-type-menu-backdrop {
  position: fixed; inset: 0;
  z-index: 5;
  background: transparent;
}
.ie-type-menu-item {
  display: block;
  width: 100%; text-align: left;
  padding: 10px 16px;
  background: transparent; border: none;
  color: #1F1F1F; font-size: 14px; font-weight: 400;
  cursor: pointer;
  transition: background 150ms;
}
.ie-type-menu-item:hover { background: rgba(31, 31, 31, 0.06); }
.ie-type-menu-item--selected {
  font-weight: 500; color: #1F4E72;
  background: rgba(225, 240, 250, 0.5);
}
/* Overflow menu (ellipses) — same look as the type dropdown but anchored to
   the ellipses icon on the right edge of the header. */
.ie-overflow-wrap { position: relative; display: inline-block; }
.ie-overflow-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10), 0 8px 24px rgba(0,0,0,0.16);
  padding: 6px 0;
  z-index: 10;
  animation: ie-fade-in 120ms cubic-bezier(0.2, 0, 0, 1);
}
.ie-overflow-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  padding: 10px 16px;
  background: transparent; border: none;
  color: #1F1F1F; font-size: 14px; font-weight: 400;
  cursor: pointer;
  transition: background 150ms;
}
.ie-overflow-item:hover { background: rgba(31, 31, 31, 0.06); }
.ie-overflow-item .zmdi { color: #545458; font-size: 18px; }
.ie-overflow-item:disabled {
  color: rgba(31, 31, 31, 0.38);
  cursor: not-allowed;
}
.ie-overflow-item:disabled .zmdi { color: rgba(31, 31, 31, 0.38); }
.ie-overflow-item:disabled:hover { background: transparent; }
/* Quill's .ql-container / .ql-editor don't paint a background by default, so
   inside .ie-body-right (which is light-gray surface) they pick up the gray.
   Force white inside the sheet so the editor reads as a writable surface. */
.ie-sheet .ql-container,
.ie-sheet .ql-editor,
.ie-details-dialog .ql-container,
.ie-details-dialog .ql-editor {
  background: #FFFFFF;
}
/* Give the Quill editor a definite height (not min-height) so the inner
   .ql-editor's own overflow-y:auto kicks in — long instructions scroll
   inside Quill rather than growing the outer right column.

   The calc subtracts the surrounding chrome (sheet header/footer + right-col
   padding + prep/cook row + divider + Quill toolbar ≈ 400 px) so the editor
   fits in the spacious sheet without forcing the right column to scroll. The
   max() floor keeps it usable on very short viewports. */
.ie-sheet .ql-container,
.ie-details-dialog .ql-container {
  height: max(240px, calc(92vh - 440px));
}
/* The app-wide .ql-toolbar is position:sticky; inside our editor that detaches
   the toolbar from the editor body (which has its own internal scroll) when
   the surrounding dialog scrolls. Keep the toolbar pinned to its editor. */
.ie-sheet .ql-toolbar,
.ie-details-dialog .ql-toolbar {
  position: static;
}
/* Ingredient list rows / group headers don't paint a background, so they
   inherit the light-gray right-column surface. Force white. */
.ie-sheet .ingredient-list-item,
.ie-sheet .ingredient-group,
.ie-sheet .mm-meal-parts-list,
.ie-details-dialog .ingredient-list-item,
.ie-details-dialog .ingredient-group,
.ie-details-dialog .mm-meal-parts-list {
  background: #FFFFFF;
}
/* Lift library-dialog's modal-panel above .ie-backdrop (which is at 1050).
   re-com's default is z-index: 1020 so without this it renders behind the
   sheet. */
.ie-library-mount .rc-modal-panel {
  z-index: 1200 !important;
}
.ie-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  position: relative;
  background: #FFFFFF;
}
/* Compact mode: the body sizes to the form content so there's no gap above
   the row buttons; .ie-body scrolls if the content is tall. */
.ie-sheet--compact .ie-body {
  flex: 0 1 auto;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.ie-body-two-col {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  background: #FFFFFF;
}
.ie-body-left {
  flex: 0 0 720px;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* ---- Form body ---- */
.ie-form-body {
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* Spacious: the form fills its column / body and scrolls internally. */
.ie-sheet--spacious .ie-form-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.ie-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ie-field-label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.5px;
  text-transform: uppercase; color: #6B7280;
}
/* Spacious: text fields in a growing left sub-column, Image beside them. */
.ie-form-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.ie-form-col-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ie-form-col-image {
  flex: 0 0 200px;
}
.ie-body-right {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 1400px;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding: 20px 28px;
  border-left: 1px solid #E5E7EB;
  background: #F9FAFB;
  container-type: inline-size;
}
/* Spacious + basic — keep the single-column form at a readable width so it
   doesn't stretch the full ~1900 px on a wide monitor. Left-aligned. */
.ie-sheet--spacious .ie-body:not(.ie-body-two-col) > * {
  max-width: 720px;
  margin: 0 auto 0 0;
}
/* Compact dialog body is also wide enough to host the responsive recipe
   layout — mark it as a query container. */
.ie-details-dialog-body {
  container-type: inline-size;
}
/* Responsive recipe panel — wrapper from recipe-editor-panel when called with
   :layout :responsive. Stacks vertically below 500 px, side-by-side above. */
.rep-responsive-row {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 0;
  align-items: flex-start;
}
.rep-responsive-col {
  min-width: 0;
  width: 100%;
}
/* Ingredient list (first col) is always capped at 450 px wide. */
.rep-responsive-col:first-child {
  max-width: 450px;
}
@container (min-width: 500px) {
  .rep-responsive-row {
    flex-direction: row;
    gap: 40px;
    align-items: stretch;
  }
  /* Equal 50/50 split. The ingredient column's max-width (450px) only kicks
     in once the dialog is wide enough that half would exceed it — then the
     surplus flows to the instructions column. */
  .rep-responsive-col {
    flex: 1 1 0%;
    width: auto;
  }
}
.ie-right-heading {
  font-size: 12px; font-weight: 600; letter-spacing: 0.6px;
  text-transform: uppercase; color: #6B7280;
  margin: 0 0 16px 0;
}
.ie-details-btn-row {
  flex: 0 0 auto;
  padding: 12px 24px 16px 24px;
  background: #FFFFFF;
  border-top: 1px solid #E5E7EB;
}
/* Visual break between the type-specific row (above) and the common rows
   (below) — makes clear the leading row belongs to the selected type. */
.ie-details-btn-divider {
  height: 1px;
  background: #E5E7EB;
  margin: 12px 4px;
}
.ie-details-btn {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  color: #1F1F1F;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  text-align: left;
  transition: background 150ms, border-color 150ms;
}
.ie-details-btn:hover {
  background: #F3F4F6;
  border-color: #337AB7;
}
.ie-details-btn-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.ie-details-btn-label {
  font-size: 14px; font-weight: 500;
  color: #1F1F1F;
  line-height: 20px;
}
.ie-details-btn-summary {
  font-size: 12px; font-weight: 400;
  color: #6B7280;
  line-height: 16px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ie-details-btn-icon {
  color: #C4C7CC;
  font-size: 22px;
  transition: color 150ms;
  flex: 0 0 auto;
}
.ie-details-btn-icon--filled { color: #337AB7; }
.ie-details-btn-thumb {
  width: 40px; height: 40px;
  border-radius: 6px;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid #E5E7EB;
}
.ie-footer {
  flex: 0 0 auto;
  padding: 16px 24px;
  border-top: 1px solid #E5E7EB;
  background: #FFFFFF;
  display: flex; gap: 8px; align-items: center; justify-content: flex-end;
  z-index: 2;
}
.ie-btn-text {
  padding: 10px 20px;
  border-radius: 8px;
  background: transparent;
  color: #337AB7;
  border: none;
  font-size: 14px; font-weight: 500; letter-spacing: 0.1px;
  cursor: pointer;
  transition: background 150ms;
}
.ie-btn-text:hover { background: rgba(51, 122, 183, 0.08); }
.ie-btn-filled {
  padding: 10px 24px;
  border-radius: 8px;
  background: #337AB7;
  color: #FFFFFF;
  border: none;
  font-size: 14px; font-weight: 500; letter-spacing: 0.1px;
  cursor: pointer;
  transition: background 150ms, box-shadow 150ms;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.ie-btn-filled:hover    { background: #286090; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.ie-btn-filled:disabled {
  background: rgba(31, 31, 31, 0.12);
  color: rgba(31, 31, 31, 0.38);
  cursor: not-allowed; box-shadow: none;
}
.ie-details-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(28, 27, 31, 0.4);
  display: flex; align-items: center; justify-content: center;
  animation: ie-fade-in 200ms cubic-bezier(0.2, 0, 0, 1);
}
.ie-details-dialog {
  background: #FFFFFF; border-radius: 24px;
  width: 92vw; max-width: 800px; max-height: 88vh;
  display: flex; flex-direction: column;
  box-shadow: 0 12px 32px rgba(0,0,0,0.22);
  overflow: hidden;
  font-family: 'Roboto', system-ui, sans-serif;
  color: #1F1F1F;
  transition: max-width 280ms cubic-bezier(0.2, 0, 0, 1),
              width 280ms cubic-bezier(0.2, 0, 0, 1);
}
.ie-details-dialog--max {
  width: 95vw;
  max-width: 95vw;
}
.ie-details-dialog-header {
  flex: 0 0 auto;
  padding: 20px 24px 12px 24px;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid #E5E7EB;
}
.ie-details-dialog-header .ie-icon-btn:first-of-type { margin-left: auto; }
.ie-details-dialog-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding: 20px 24px;
}
.ie-details-dialog-footer {
  flex: 0 0 auto;
  padding: 16px 24px;
  border-top: 1px solid #E5E7EB;
  display: flex; gap: 8px; align-items: center; justify-content: flex-end;
}
/* Discard-changes confirmation — sits above everything (sheet 1050, row
   dialogs 1100), so 1300. */
.ie-confirm-overlay {
  position: fixed; inset: 0; z-index: 1300;
  background: rgba(28, 27, 31, 0.4);
  display: flex; align-items: center; justify-content: center;
  animation: ie-fade-in 150ms cubic-bezier(0.2, 0, 0, 1);
}
.ie-confirm-dialog {
  background: #FFFFFF; border-radius: 24px;
  width: 90vw; max-width: 380px;
  padding: 24px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.22);
  font-family: 'Roboto', system-ui, sans-serif;
}
.ie-confirm-message {
  font-size: 16px; line-height: 24px;
  color: #1F1F1F; margin: 0 0 20px 0;
}
.ie-confirm-actions {
  display: flex; gap: 8px; justify-content: flex-end;
}
/* Import-from-URL dialog — reuses .ie-confirm-overlay / .ie-confirm-dialog. */
.ie-import-title {
  font-size: 18px; font-weight: 500;
  color: #1F1F1F; margin: 0 0 16px 0;
}
.ie-import-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  margin: 0 0 20px 0;
  border: 1px solid #C4C7CC;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: #1F1F1F;
}
.ie-import-input:focus {
  outline: none;
  border-color: #337AB7;
}
/* Paste-recipe-text dialog — wider than the URL dialog to host a textarea. */
.ie-paste-dialog { max-width: 460px; }
.ie-paste-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  margin: 0 0 20px 0;
  border: 1px solid #C4C7CC;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: #1F1F1F;
  min-height: 200px;
  resize: vertical;
}
.ie-paste-textarea:focus {
  outline: none;
  border-color: #337AB7;
}
.ie-paste-textarea:disabled {
  background: #F3F4F6;
  color: rgba(31, 31, 31, 0.5);
}
.ie-import-input:disabled {
  background: #F3F4F6;
  color: rgba(31, 31, 31, 0.5);
}