/*
 * Import ingredients / items: the sheet on a meal or group editor (a
 * picker-dialog, full screen on a phone), its source form, the waiting
 * and failed states, the review, and imported rows in the editor.
 */
@layer components {
  .picker-dialog .import-sheet__state { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
  .import-sheet__body { display: grid; gap: var(--space-4); align-content: start; overflow-y: auto; min-height: 0; flex: 1 1 auto;
    padding: 0 var(--space-4) max(var(--space-4), env(safe-area-inset-bottom)); }
  .import-sheet__actions { flex-wrap: wrap; align-items: center; }
  /* As a page of its own (no JavaScript), the sheet reads as a panel. */
  main > turbo-frame#item_import_sheet { display: block; padding: var(--space-4) 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }

  /* The source: text first, then pictures; the drop zone shrinks once some are picked. */
  .import-source { display: grid; gap: var(--space-4); }
  .import-source__text { min-height: 9rem; font-family: var(--font-ui); }
  .import-source__photos { display: grid; gap: var(--space-2); }
  .import-source__photos .field__error:empty { display: none; }
  .import-source[data-picked] .when-empty,
  .import-source:not([data-picked]) .when-picked { display: none; }
  .import-source[data-picked] .photo-drop { padding: var(--space-4); }
  .import-source[data-picked] .photo-drop__icon { width: 28px; height: 28px; }
  .import-source[data-picked] .photo-drop__hint { display: none; }

  /* Reading: after a while, say it's still going and that closing is fine. */
  .import-status { padding: var(--space-5) 0; }
  .import-status h2 { margin: 0; font-size: var(--text-lg); }
  .import-status__slow { opacity: 0; animation: import-slow 300ms ease 20s forwards; }
  @keyframes import-slow { to { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .import-status__slow { animation-duration: 1ms; } }

  /* The review: one row per thing, its fields on one line on a wide screen,
     stacked on a phone; facts beneath. */
  .import-review { display: grid; gap: var(--space-3); }
  .import-entries { display: grid; margin: 0; padding: 0; list-style: none; }
  .import-entry {
    display: grid;
    grid-template-columns: var(--touch) minmax(0, 1fr);
    gap: var(--space-1) var(--space-2);
    padding-block: var(--space-3);
    border-top: 1px solid var(--line);
  }
  .import-entry:first-child { border-top: 0; }
  .import-entry__include { display: grid; place-items: center; width: var(--touch); height: var(--touch); cursor: pointer; }
  .import-entry__include input { width: 22px; height: 22px; accent-color: var(--leaf); }
  /* The name on a row of its own, the whole width; the amount and the note
     beneath it. A note is "Add note" until there is one. */
  .import-entry__fields { display: grid; grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr); gap: var(--space-2); align-items: center; }
  .import-entry__name { grid-column: 1 / -1; }
  .import-entry__note > summary { justify-self: start; width: fit-content; list-style: none; cursor: pointer; }
  .import-entry__note > summary::-webkit-details-marker { display: none; }
  .import-entry__note > summary svg { width: 16px; height: 16px; }
  .import-entry__note[open] > summary { display: none; }
  .import-entry__facts { grid-column: 2; display: grid; gap: var(--space-2); min-width: 0; font-size: var(--text-sm); }
  .import-entry__facts p { margin: 0; }
  .import-entry__match { display: flex; align-items: center; gap: var(--space-1); color: var(--muted); font-weight: 800; }
  .import-entry__match svg { width: 16px; height: 16px; }
  .import-entry__match--linked { color: var(--leaf); }
  .import-entry__match .item-combobox__choice--new { padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--sunny-soft); color: var(--ink); font-size: var(--text-xs); }
  .import-entry__choices { display: grid; gap: var(--space-2); margin: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
  .import-entry__choices legend { padding: 0 var(--space-1); font-weight: 800; }
  .import-entry__check { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--sunny-soft); }
  .import-entry__amounts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  .import-entry__parts { flex-basis: 100%; color: var(--muted); }
  .import-entry__part-list { flex-basis: 100%; margin: 0; padding-left: var(--space-4); color: var(--muted); font-size: var(--text-xs); overflow-wrap: anywhere; }
  .import-entry__original { overflow-wrap: anywhere; color: var(--muted); font-size: var(--text-xs); }
  .import-entry--left-out .import-entry__fields,
  .import-entry--left-out .import-entry__facts { opacity: 0.45; }
  .import-entry--problem { margin-inline: calc(-1 * var(--space-2)); padding-inline: var(--space-2); border-radius: var(--radius-md); background: var(--danger-soft); }
  .import-review__more .button svg { width: 18px; height: 18px; }
  /* Add stays at the foot of the sheet while the list scrolls under it. */
  .picker-dialog .import-review__actions { position: sticky; bottom: calc(-1 * max(var(--space-4), env(safe-area-inset-bottom))); z-index: 1;
    margin: 0 calc(-1 * var(--space-4)); padding: var(--space-3) var(--space-4) max(var(--space-3), env(safe-area-inset-bottom));
    border-top: 1px solid var(--line); background: var(--cream); }
  .import-review__actions { gap: var(--space-1) var(--space-3); }
  .import-review__actions .field__hint { font-size: var(--text-xs); }

  .import-photos { display: grid; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }
  .import-photos__problems { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
  .import-photos__add { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  .import-photos__add label { flex-basis: 100%; margin: 0; }
  .import-photos__add .input { flex: 1 1 12rem; min-width: 0; }

  /* Imported rows in the editor, until it's saved; and what an import
     said about a line that was already there. */
  .ingredient-row--imported { margin-inline: calc(-1 * var(--space-2)); padding-inline: var(--space-2); border-radius: var(--radius-md); background: var(--mint-soft); }
  .ingredient-row__imported { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: var(--text-xs); overflow-wrap: anywhere; }
  .ingredient-row__import-choice { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: 0; padding: var(--space-2) var(--space-3);
    border: 0; border-radius: var(--radius-md); background: var(--sunny-soft); font-size: var(--text-sm); }
  .ingredient-row__import-choice legend { float: left; margin-right: var(--space-2); font-weight: 800; }
  .ingredient-row__import-choice label { display: inline-flex; align-items: center; gap: var(--space-1); cursor: pointer; }
  .ingredient-row__import-choice input { accent-color: var(--leaf); }
}