/* New Issuance (pages/new_entry/page.js): the slip's date and purpose, three steps and the slip
   summary. Two columns once the page is wide enough (container queries, so the sidebar's width
   counts), one column below that; up to 1024px a bar above the bottom navigation holds the total
   and the buttons, and the page is only as tall as its content. */

.ne {
  container: ne / inline-size;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ne-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.ne-form {
  container: neform / inline-size;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

@container ne (min-width: 900px) {
  .ne-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); }
  .ne-summary { position: sticky; top: calc(var(--topbar-h) + 16px); }
}

/* Drafts offered on an empty form */
.ne-resume {
  padding: 14px 16px;
  border: 1px solid var(--info-border);
  border-radius: 14px;
  background: var(--info-bg);
}
.ne-resume-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; margin-bottom: 10px; }
.ne-resume-title { margin: 0; font-size: 14px; font-weight: 700; color: var(--info); }
.ne-resume-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ne-resume-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  min-height: 52px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ne-resume-item:hover { border-color: var(--brand); }
.ne-resume-item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ne-resume-item > i { color: var(--brand); }
.ne-resume-text { display: flex; flex-direction: column; min-width: 0; }
.ne-resume-reg { font-family: var(--font-mono); font-size: 13px; font-weight: 700; }
.ne-resume-sub { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }

/* Date and purpose: set first, they price every product */
.ne-context {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 20px;
  padding: 14px 18px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);
}
.ne-context .field { margin-bottom: 0; }
.ne-date { flex: 0 1 200px; }
.ne-context-hint { flex: 1 1 200px; margin: 0; padding-bottom: 10px; font-size: 13px; color: var(--muted); }

/* The three steps */
.entry-step {
  position: relative;
  padding: 16px 18px 18px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* Earlier steps stack above later ones, and the step being used rises above them all (but stays
   under the sticky topbar, 50) so its dropdowns overlap the cards below. */
.entry-step[data-step="1"] { z-index: 30; }
.entry-step[data-step="2"] { z-index: 20; }
.entry-step[data-step="3"] { z-index: 10; }
.entry-step:focus-within,
.entry-step.combobox-active { z-index: 40 !important; }

/* The next step to fill (set by page.js): a blue outline and one soft ring lead the eye there. */
.entry-step.current {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(26, 111, 196, 0.12);
}

.entry-step-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 12px; }
.entry-step-num {
  width: 28px;
  height: 28px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 700;
}
.entry-step.current .entry-step-num { background: var(--fill-brand); color: #fff; }
.entry-step.done .entry-step-num { background: var(--fill-ok); color: #fff; }
.entry-step-num .step-done,
.entry-step.done .entry-step-num .step-n { display: none; }
.entry-step.done .entry-step-num .step-done { display: inline; }
.entry-step-title { flex: 1 1 auto; margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.2px; color: var(--text); }
.entry-step-aside { font-size: 13px; color: var(--muted); }
.entry-step-hint { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.entry-step-empty {
  margin: 0;
  padding: 12px 0;
  font-size: 14px;
  text-align: center;
  color: var(--muted);
}

/* Step 1: vehicle typeahead with a leading icon and a clear button */
.vehicle-picker-combobox { position: relative; width: 100%; z-index: 100; }
.vehicle-picker-combobox.open { z-index: 120; }
.vehicle-picker-combobox .field { margin-bottom: 0; }
.vehicle-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  max-height: 280px;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.24), 0 4px 14px rgba(15, 23, 42, 0.1);
}
.picker-field { position: relative; }
.picker-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  color: var(--muted);
  pointer-events: none;
}
.picker-field .picker-input { padding-left: 40px; padding-right: 42px; font-weight: 600; text-overflow: ellipsis; }
/* The clear button is hidden while the field is empty, so the placeholder may use its room. */
.picker-field .picker-input:placeholder-shown { padding-right: 14px; }
.picker-field .picker-input::placeholder { font-weight: 400; }
.picker-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.picker-clear:hover { background: var(--bg-2); color: var(--text); }
.vs-footer { padding: 10px 14px 14px; }

/* The chosen vehicle: registration and model, then its fuel, make and type (those recorded) as
   columns split by thin rules (on phones, a list of label and value rows). */
.vehicle-chosen {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card-2);
}
.vc-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vc-icon {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--bg-2);
  color: var(--text-2);
}
.vc-main { min-width: 0; }
.vc-reg { font-family: var(--font-mono); font-size: 16px; font-weight: 700; overflow-wrap: break-word; }
.vc-model { font-size: 13px; color: var(--muted); }
.vc-facts { display: flex; gap: 12px; margin: 0; }
.vc-fact { flex: 1 1 0; min-width: 0; }
.vc-fact + .vc-fact { padding-left: 12px; border-left: 1px solid var(--line); }
.vc-fact dt { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.vc-fact dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
/* Changing the vehicle, at the end of the step's header. */
.entry-step-head .vc-change { margin-left: auto; }

/* Step 2: the products on the slip, one row each: product, how it is entered, how much, cost */
.slip-lines { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; }
.slip-line { min-width: 0; padding: 14px 0; border-radius: var(--radius-sm); }
.slip-line:first-child { padding-top: 0; }
.slip-line:last-child { padding-bottom: 0; }
.slip-line + .slip-line { border-top: 1px solid var(--line); }
/* A line with a problem is tinted, the tint reaching past its edges so nothing shifts. */
.slip-line.has-problem { background: var(--warn-bg); box-shadow: 0 0 0 8px var(--warn-bg); }
.slip-line-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 30px; margin-bottom: 6px; }
.slip-line-no { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; color: var(--muted); }
.line-auto { text-transform: none; letter-spacing: 0; }
.line-remove { margin-left: auto; color: var(--danger); }
/* A product line lays itself out by its own width, and every box keeps room for its figures:
   - under 400px: product, how it is entered, how much and the cost each on a row of their own;
   - 400px up: how it is entered and how much share a row, the cost below;
   - 560px up: how it is entered, how much and the cost share the row under the product;
   - 720px up: all four on one row. */
.slip-line { container: line / inline-size; }
.slip-line-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px 12px;
  align-items: end;
}
.slip-line-body .field { margin-bottom: 0; }
/* On its own row: the label left, the amount right. */
.line-cost {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-2);
}
.line-cost-label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.line-cost-value { font-size: 16px; font-weight: 700; white-space: nowrap; }
.line-hint { margin: 6px 0 0; }
.unit-tag { color: var(--muted); font-weight: 600; }

@container line (max-width: 399px) {
  .slip-line .segmented { display: flex; width: 100%; }
  .slip-line .segment { flex: 1 1 0; min-height: 40px; }
}

@container line (min-width: 400px) {
  .slip-line-body { grid-template-columns: auto minmax(0, 1fr); }
  .slip-line .segment { min-height: 32px; padding-block: 4px; }
  .line-product { grid-column: 1 / -1; }
}

@container line (min-width: 560px) {
  .slip-line-body { grid-template-columns: auto minmax(0, 1fr) auto; }
  .line-cost {
    grid-column: auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    min-width: 88px;
    padding: 0;
    background: none;
  }
  .line-cost-value { display: flex; align-items: center; min-height: 40px; }
}

@container line (min-width: 720px) {
  .slip-line-body { grid-template-columns: minmax(0, 2fr) auto minmax(0, 1.2fr) auto; }
  .line-product { grid-column: auto; }
}

/* Step 3: who received it */
.ne-receiver { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.ne-receiver .field { margin-bottom: 0; }
.ne-receiver-pick { flex: 1 1 260px; }
.person-picker { display: flex; gap: 8px; align-items: stretch; }
.person-picker select { flex: 1; min-width: 0; }
.person-picker .btn { flex-shrink: 0; min-height: 42px; padding: 0 14px; }
.ne-more { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.ne-more-toggle { display: inline-flex; align-items: flex-start; gap: 8px; min-height: 36px; padding: 8px 0; font-size: 14px; line-height: 1.4; text-align: left; text-decoration: none; }
.ne-more-toggle > i { margin-top: 3px; }
.ne-more-toggle:hover { text-decoration: underline; }
.ne-more-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px; margin-top: 10px; }
.ne-more-fields .field { margin-bottom: 0; }

/* Phones: every field takes its card's full width and two-way choices split it evenly; the chosen
   vehicle's fuel, make and type become label and value rows. */
@container neform (max-width: 560px) {
  .ne-more-fields { grid-template-columns: minmax(0, 1fr); }
  .ne-context { gap: 12px; }
  .ne-context .field,
  .ne-context-hint,
  .ne-receiver .field { flex: 1 1 100%; }
  .ne-context-hint { padding-bottom: 0; }
  .ne-context .segmented,
  .ne-receiver .segmented { display: flex; width: 100%; }
  .ne-context .segment,
  .ne-receiver .segment { flex: 1 1 0; min-height: 40px; }
  .vc-facts { flex-direction: column; gap: 0; }
  .vc-fact { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; }
  .vc-fact + .vc-fact { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .vc-fact dd { margin: 0; text-align: right; }
  .ne-resume-item { width: 100%; }
}


/* The slip summary */
.ne-summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  scroll-margin-top: calc(var(--topbar-h) + 12px);
}
.slip-preview {
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.sp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.sp-title { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.slip-preview .sp-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-size: 14px;
  color: var(--text);
}
.slip-preview .sp-row .k { color: var(--muted); font-weight: 600; }
.slip-preview .sp-row .v { min-width: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; }

/* One row per product on the slip, its quantity and rate underneath. */
.slip-preview .sp-products { margin: 4px 0; padding: 4px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.slip-preview .sp-line .k { display: flex; flex-direction: column; gap: 1px; min-width: 0; color: var(--text); overflow-wrap: anywhere; }
.slip-preview .sp-line .k small { font-size: 13px; font-weight: 400; color: var(--muted); }
.slip-preview .sp-line .v { flex-shrink: 0; }
.slip-preview .sp-row.total {
  align-items: baseline;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
}
#ne-blocker { margin: 0; }

.ne-actions { display: flex; flex-direction: column; gap: 10px; }
.big-submit {
  width: 100%;
  /* The label restates the slip and grows with it: it wraps inside the button (never past its
     edges) and the button grows from its 54px minimum. */
  height: auto;
  min-height: 54px;
  padding: 12px 18px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
  white-space: normal;
  text-align: center;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(26, 111, 196, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.big-submit > i, .big-submit > .spinner { flex-shrink: 0; }
#ne-submit-text { min-width: 0; overflow-wrap: anywhere; }

/* Until the slip is complete the button says what is next, in the soft brand tone: plainly a
   button (it points at the missing field), but not yet the solid one that records. */
.ne .btn.is-pending {
  background: var(--brand-50);
  border-color: var(--brand-100);
  color: var(--brand);
  box-shadow: none;
}
.ne .btn.is-pending:hover:not(:disabled) { background: var(--brand-100); border-color: var(--brand-100); color: var(--brand); }

.ne-draft-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ne-draft-status { font-size: 13px; line-height: 1.45; color: var(--muted); }
.ne-discard { flex-shrink: 0; font-size: 13px; color: var(--danger); }
.ne-discard-leave { color: var(--danger); }

/* Phones and tablets: total and buttons in a bar above the bottom navigation */
.ne-bar { display: none; }
/* The total never shrinks (a clipped amount misleads); the button gives way and wraps. */
.ne-bar-total {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 44px;
  padding: 2px 4px;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ne-bar-amount { font-size: 18px; font-weight: 700; line-height: 1.15; color: var(--text); white-space: nowrap; }
.ne-bar-save { flex: none; width: 48px; min-height: 48px; padding: 0; }
.ne-bar-submit { flex: 1 1 0; min-width: 0; min-height: 48px; font-weight: 700; line-height: 1.2; white-space: normal; }

@media (max-width: 1024px) {
  .ne { padding-bottom: 76px; }
  .ne-actions .big-submit,
  .ne-actions #ne-save-draft { display: none; }
  .ne-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--bottombar-height) + env(safe-area-inset-bottom, 0px));
    z-index: 55;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--card);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px rgba(16, 24, 40, 0.08);
  }
}

@media (max-width: 640px) {
  .entry-step { padding: 14px 14px 16px; }
  .ne-context { padding: 12px 14px; }
}

@media (max-width: 400px) {
  .big-submit { font-size: 16px; padding: 12px 14px; gap: 8px; letter-spacing: 0; }
  .ne-bar { gap: 6px; padding: 8px 10px; }
  .ne-bar-amount { font-size: 16px; }
  .ne-bar-submit { padding: 8px 10px; font-size: 14px; }
}

/* The narrowest phones: the total and Save draft on one row, the button full width below. */
@media (max-width: 330px) {
  .ne { padding-bottom: 130px; }
  .ne-bar { flex-wrap: wrap; }
  .ne-bar-total { flex: 1 1 auto; }
  .ne-bar-submit { flex: 1 1 100%; }
}

/* Labels one step up from the shared 12px: the form is read all day on scaled laptop screens. */
.ne .field label,
.ne .form-label { font-size: 13px; }
.line-hint { font-size: 13px; color: var(--muted); }

/* Tips: the sentences that explain the form (data-tip), shown for a device's first slips. */
.ne.tips-off [data-tip] { display: none; }
.ne-tips {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  min-height: 32px;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}
.ne-tips:hover { text-decoration: underline; }
/* The date's tip and the Tips button share one group, so the button never sits on a row alone. */
.ne-context-aside { flex: 1 1 240px; display: flex; align-items: center; gap: 8px 16px; min-width: 0; }
.ne-context-aside .ne-context-hint { flex: 1 1 auto; padding-bottom: 0; }
@container neform (max-width: 560px) {
  .ne-context-aside { flex: 1 1 100%; }
}

/* Who received it: the label row carries the short confirmation that the vehicle's person is in. */
.ne-label-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ne-assigned { font-size: 13px; font-weight: 600; color: var(--ok); }
.ne-assigned > i { margin-right: 5px; }
.ne-assigned-tip { font-weight: 400; color: var(--muted); }

/* The issue date's calendar (components/date_field.js) opens over the steps below it. */
.ne-context { position: relative; z-index: 35; }

/* Desktop, two columns: a slip shorter than the window still reaches its bottom edge, so no empty
   band shows below it. The page takes the window's height under the topbar (less the content's
   22px top and bottom padding); the three steps share the spare height equally, each centring its
   content, and the summary spaces its rows evenly, so both columns end on one line. A taller slip
   is laid out as before, and the summary stays one window tall while it sticks beside it. */
@media (min-width: 1025px) {
  .ne { --ne-fill: calc(100dvh - var(--topbar-h) - 44px); min-height: var(--ne-fill); }
  @container ne (min-width: 900px) {
    .ne-grid { flex: 1 0 auto; }
    .ne-form { align-self: stretch; gap: 12px; }
    .entry-step { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; }
    .ne-summary { min-height: min(100%, var(--ne-fill)); }
    .slip-preview { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: space-between; }
  }

  /* A wide form is compact, so a vehicle, a product and who received it fit a laptop's window
     (1536 x 772) without scrolling: the date and purpose take one slim row with their labels
     beside them, the chosen vehicle one row, and Add another product and More details move into
     their steps' headers. */
  @container neform (min-width: 640px) {
    .entry-step { padding-block: 14px; }
    .entry-step-head { margin-bottom: 10px; }
    .ne-context { align-items: center; padding-block: 10px; }
    .ne-context .field { flex-direction: row; align-items: center; gap: 10px; }
    .ne-context .field > :first-child { white-space: nowrap; }
    .ne-context .date-field { flex-wrap: wrap; }
    .ne-context .date-field-box { flex: 1 1 0; min-width: 0; }
    .ne-context .date-field-error { flex-basis: 100%; }
    .ne-date { flex: 0 0 250px; }
    .ne-context-hint { padding-bottom: 0; }
    .vehicle-chosen { flex-direction: row; align-items: center; gap: 16px; }
    .vc-head { flex: 0 1 220px; }
    .vc-facts { flex: 1 1 0; padding-left: 16px; border-left: 1px solid var(--line); }
    .entry-step[data-step="2"],
    .entry-step[data-step="3"] {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px 12px;
      align-content: center;
      align-items: center;
    }
    .entry-step[data-step="2"] > *,
    .entry-step[data-step="3"] > *,
    .ne-more-fields { grid-column: 1 / -1; }
    .entry-step[data-step="2"] > .entry-step-head,
    .entry-step[data-step="3"] > .entry-step-head { grid-column: 1; grid-row: 1; margin-bottom: 0; }
    .slip-lines,
    .ne-more-fields { margin-block: 0; }
    .entry-step[data-step="2"] > .add-line { grid-column: 2; grid-row: 1; width: auto; min-height: 36px; padding: 7px 12px; font-size: 14px; }
    .ne-more { display: contents; }
    .ne-more-toggle { grid-column: 2; grid-row: 1; min-height: 28px; padding: 4px 0; }
  }
}