/* Scoped CSS for 6-Step Guided Fuel & Fluid Issuance Flow */

.issuance-flow-layout {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding-bottom: 40px;
}

.issuance-banner {
  margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(26, 111, 196, 0.1) 0%, var(--glass-bg) 70%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
  display: flex;
  align-items: center;
  gap: 16px;
}

[data-theme="dark"] .issuance-banner {
  background: linear-gradient(135deg, rgba(30, 58, 138, 0.35) 0%, rgba(15, 26, 42, 0.85) 70%);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

.issuance-banner-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(140deg, var(--fill-brand), var(--fill-brand-hover));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 20px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(26, 111, 196, 0.35);
}

.issuance-banner-title {
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: var(--text);
}

.issuance-banner-sub {
  font-size: 13.5px;
  color: var(--text-2);
  margin-top: 3px;
  line-height: 1.45;
}

[data-theme="dark"] .issuance-banner-sub {
  color: #cbd5e1;
}

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

/* Natural descending stacking context ladder: earlier cards stack on top of later cards */
.entry-step[data-step="1"] { z-index: 30; }
.entry-step[data-step="2"] { z-index: 25; }
.entry-step[data-step="3"] { z-index: 20; }
.entry-step[data-step="4"] { z-index: 15; }
.entry-step[data-step="5"] { z-index: 10; }
.entry-step[data-step="6"] { z-index: 5; }

/* The step being used rises above the other steps (max 30) so its dropdowns overlap the cards
   below, but stays under the sticky page header (.topbar, 50) when the page scrolls. */
.entry-step:focus-within,
.entry-step.combobox-active {
  z-index: 40 !important;
}

/* Combobox picker popup elevation */
.vehicle-picker-combobox {
  position: relative;
  width: 100%;
  z-index: 100;
}

.vehicle-picker-combobox.open {
  z-index: 120;
}

.vehicle-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  max-height: 280px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.24), 0 4px 14px rgba(15, 23, 42, 0.1);
  display: flex;
  flex-direction: column;
}

.entry-step.done {
  border-color: var(--ok-border);
  background: linear-gradient(180deg, var(--ok-bg) 0%, var(--glass-bg) 60%);
}

/* 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.current .entry-step-num {
  box-shadow: 0 0 0 4px rgba(26, 111, 196, 0.22), 0 4px 10px rgba(26, 111, 196, 0.35);
}

.entry-step-num {
  position: absolute;
  top: -14px;
  left: 18px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--fill-brand);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13.5px;
  box-shadow: 0 4px 10px rgba(26, 111, 196, 0.35);
  transition: background-color 0.2s, box-shadow 0.2s;
}

.entry-step.done .entry-step-num {
  background: var(--fill-ok);
  box-shadow: 0 4px 10px rgba(15, 123, 83, 0.35);
}

.entry-step-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.2px;
  margin-bottom: 12px;
  padding-left: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}

.entry-step-hint {
  font-size: 12.5px;
  color: var(--text-2);
  margin-bottom: 14px;
  line-height: 1.5;
  background: var(--info-bg);
  border-left: 3px solid var(--info);
  padding: 8px 12px;
  border-radius: 6px;
}

[data-theme="dark"] .entry-step-hint {
  background: rgba(18, 42, 72, 0.65);
  color: #e2e8f0;
  border-left-color: #60a5fa;
}

/* Vehicle Highlight Card */
.vehicle-info-card {
  margin-top: 12px;
  animation: fadeIn 0.2s ease-in-out;
}

.vehicle-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.v-info-item {
  background: var(--card-2);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 8px 12px;
}

.v-info-item .l {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 700;
}

.v-info-item .v {
  font-size: 13px;
  font-weight: 600;
  margin-top: 2px;
  color: var(--text);
}

/* Person Picker inline */
.person-picker {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.person-picker select {
  flex: 1;
}

.person-picker .btn {
  flex-shrink: 0;
  padding: 0 14px;
  min-height: 42px;
}

/* Purpose Toggle Cards */
.purpose-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.purpose-btn {
  padding: 14px 12px;
  border: 2px solid var(--field-border);
  border-radius: 10px;
  background: var(--card);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  font-weight: 700;
  font-size: 13.5px;
  transition: all 0.15s ease;
  color: var(--text-2);
  cursor: pointer;
}

.purpose-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-50);
}

.purpose-btn.on {
  border-color: var(--brand);
  background: var(--brand-50);
  color: var(--brand);
  box-shadow: 0 0 0 3px rgba(26, 111, 196, 0.13);
}

.purpose-btn i {
  font-size: 22px;
}

.purpose-btn small {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}

/* Live Slip Receipt Preview */
.slip-preview {
  background: linear-gradient(135deg, #eaf2fb, #ffffff);
  border: 2px dashed var(--brand);
  border-radius: 14px;
  padding: 18px 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .slip-preview {
  background: linear-gradient(135deg, #0f2440, #16263c);
}

.slip-preview .sp-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  padding: 6px 0;
  color: var(--text);
}

.slip-preview .sp-row .k {
  color: var(--muted);
  font-weight: 600;
}

.slip-preview .sp-row .v {
  font-weight: 700;
}

/* One row per product on the slip, its quantity and rate underneath. */
.slip-preview .sp-products { padding-bottom: 4px; margin-bottom: 4px; 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 {
  border-top: 2px dashed var(--brand);
  margin-top: 10px;
  padding-top: 14px;
  font-size: 22px;
  font-weight: 900;
  color: var(--brand);
}

.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; }
@media (max-width: 400px) {
  .big-submit { font-size: 15px; padding: 12px 14px; gap: 8px; letter-spacing: 0; }
}

@media (max-width: 640px) {
  .vehicle-info-grid {
    grid-template-columns: 1fr;
  }
  .purpose-toggle {
    grid-template-columns: 1fr;
  }
  .entry-step {
    padding: 18px 14px 16px;
  }
}

/* Vehicle typeahead input with a leading icon and a clear button */
.picker-field { position: relative; }
.picker-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
  z-index: 2;
}
.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; }
.unit-tag { color: var(--brand); font-weight: 800; }
.purpose-toggle.two { margin-bottom: 14px; }
.entry-step .person-picker + .person-picker, .entry-step .field + .field { margin-top: 14px; }
/* Side-by-side fields (Quantity | Issue date) start on one line; the grid gap spaces them. */
.entry-step .form-grid > .field + .field { margin-top: 0; }
#ne-blocker { margin: 12px 0; }

/* Step 2: the products on the slip, one card each: the product, how it is entered, how much. */
.slip-lines { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.slip-line {
  min-width: 0;
  padding: 12px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}
.slip-line.has-problem { border-color: var(--warn-border); box-shadow: 0 0 0 2px var(--warn-bg); }
.slip-line-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; margin-bottom: 8px; }
.slip-line-no { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.line-remove { color: var(--danger); }
.slip-line .entry-mode { margin-top: 12px; }
.add-line { border-style: dashed; }

/* Each product: enter the quantity, or the amount in taka and let the quantity follow. */
.entry-mode {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.entry-mode-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}