/* 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: 13.5px; font-weight: 800; 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: 12.5px; font-weight: 700; }
.ne-resume-sub { font-size: 12px; 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: 12.5px; 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 a soft ring lead the eye there. */
.entry-step.current {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(26, 111, 196, 0.16), 0 8px 24px rgba(26, 111, 196, 0.1);
}

.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: 13.5px;
  font-weight: 800;
}
.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: 15px; font-weight: 800; letter-spacing: -0.2px; color: var(--text); }
.entry-step-aside { font-size: 12px; color: var(--muted); }
.entry-step-hint { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.entry-step-empty {
  margin: 0;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  font-size: 13px;
  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 as three equal boxes
   (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(--brand-50);
  color: var(--brand);
}
.vc-main { min-width: 0; }
.vc-reg { font-family: var(--font-mono); font-size: 15px; font-weight: 700; overflow-wrap: break-word; }
.vc-model { font-size: 12.5px; color: var(--muted); }
.vc-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.vc-fact { min-width: 0; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--bg-2); }
.vc-fact dt { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.vc-fact dd { margin: 2px 0 0; font-size: 13.5px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.vc-fact .vc-fuel { color: var(--brand); }
/* Changing the vehicle, in the step's header: brand-coloured, outlined and with an icon. */
.entry-step-head .vc-change {
  margin-left: auto;
  border-color: var(--brand);
  background: var(--brand-50);
  color: var(--brand);
  font-weight: 700;
}
.entry-step-head .vc-change:hover:not(:disabled) { background: var(--fill-brand); border-color: var(--fill-brand); color: #fff; }

/* 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; gap: 10px; }
.slip-line {
  min-width: 0;
  padding: 10px 14px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card-2);
}
.slip-line.has-problem { border-color: var(--warn-border); box-shadow: 0 0 0 2px 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: 11.5px; 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: 12px; font-weight: 600; color: var(--muted); }
.line-cost-value { font-size: 15px; font-weight: 800; white-space: nowrap; }
.line-hint { margin: 6px 0 0; }
.add-line { border-style: dashed; }
.unit-tag { color: var(--brand); font-weight: 800; }

@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); }
  .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: 0;
    min-width: 88px;
    padding: 0 0 8px;
    background: none;
  }
  .line-cost-label { font-size: 11px; font-weight: 400; }
}

@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-auto-note { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 12.5px; font-weight: 600; color: var(--ok); }
.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: 13px; 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 { grid-template-columns: minmax(0, 1fr); gap: 0; border-radius: var(--radius-sm); background: var(--bg-2); }
  .vc-fact { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 12px; background: none; }
  .vc-fact + .vc-fact { 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: linear-gradient(135deg, #eaf2fb, #ffffff);
  border: 2px dashed var(--brand);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .slip-preview { background: linear-gradient(135deg, #0f2440, #16263c); }
.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: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.slip-preview .sp-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-size: 13.5px;
  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 dashed var(--line); border-bottom: 1px dashed var(--line); }
.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: 12px; font-weight: 500; 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: 2px dashed var(--brand);
  font-size: 22px;
  font-weight: 900;
  color: var(--brand);
}
#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: 800;
  letter-spacing: 0.02em;
  line-height: 1.25;
  white-space: normal;
  text-align: center;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(26, 111, 196, 0.35);
  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 grey: still a button (it points at
   the missing field), but not yet the one that records. */
.ne .btn.is-pending,
.ne .btn.is-pending:hover:not(:disabled) {
  background: #475569;
  border-color: #475569;
  color: #fff;
  box-shadow: none;
}
[data-theme="dark"] .ne .btn.is-pending,
[data-theme="dark"] .ne .btn.is-pending:hover:not(:disabled) {
  background: #334155;
  border-color: #334155;
}

.ne-draft-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ne-draft-status { font-size: 12px; line-height: 1.45; color: var(--muted); }
.ne-discard { flex-shrink: 0; font-size: 12.5px; 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: 900; line-height: 1.15; color: var(--brand); 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: 800; 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: 15px; 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: 13.5px; }
}

/* 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%; }
}

/* 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-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; }
    .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-auto-note,
    .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: 13px; border-style: solid; }
    .ne-more { display: contents; }
    .ne-more-toggle { grid-column: 2; grid-row: 1; min-height: 28px; padding: 4px 0; }
  }
}