/* ==================== EMPLOYEE PICKER ==================== */
.submission-app {
  max-width: 900px;
  margin: 0 auto;
}

.employee-picker h2 {
  text-align: center;
  margin-bottom: var(--space-4);
  color: var(--text-primary);
}

.employee-search {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto var(--space-6);
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-xl);
  font-size: var(--text-base);
  background: var(--bg-input);
  color: var(--text-primary);
  min-height: 48px;
}

.employee-search:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
}

.employee-empty {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--text-secondary);
  font-style: italic;
  font-size: var(--text-base);
}

/* REHAB picks short-circuit the regular flow and post directly to the
   server, which renders the dedicated pass/fail page. Without feedback
   the auto-submit feels like a glitch — this panel makes the transition
   intentional. Reuses @keyframes forge-spin from style.css. */
.rehab-loading {
  text-align: center;
  padding: var(--space-12) var(--space-4);
}
.rehab-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-color);
  border-top-color: var(--brand-primary);
  border-radius: 50%;
  animation: forge-spin 0.7s linear infinite;
  margin: 0 auto var(--space-6);
}
.rehab-loading h2 {
  color: var(--text-primary);
  margin: 0 0 var(--space-2) 0;
}
.rehab-loading p {
  color: var(--text-secondary);
  margin: 0;
}

.employee-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Recent picks — surfaced above the full pod grid so frequent users
   don't have to scan their pod every visit. localStorage-backed,
   rebuilt on each page load. */
.recent-employees {
  background: color-mix(in srgb, var(--brand-primary) 8%, var(--bg-card));
  border: 1px solid var(--brand-primary);
  border-radius: var(--radius-3xl);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
}

.recent-label {
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--brand-primary);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.recent-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
}

.recent-btn {
  background: var(--bg-card);
  border: 2px solid var(--brand-primary);
  border-radius: var(--radius-2xl);
  padding: var(--space-4) var(--space-3);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.recent-btn:hover {
  background: var(--brand-primary);
  color: var(--text-inverse);
}

.recent-btn .recent-pod {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-weight: 500;
}

.recent-btn:hover .recent-pod {
  color: var(--text-inverse);
  opacity: 0.85;
}

.pod-section {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-3xl);
  padding: var(--space-4);
}

.pod-label {
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--brand-primary);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-color);
}

.employee-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-3);
}

.employee-btn {
  background: var(--bg-input);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-2xl);
  padding: var(--space-4) var(--space-3);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 56px;
}

.employee-btn:hover {
  border-color: var(--brand-primary);
  background: var(--bg-hover);
}

.employee-btn:active {
  transform: scale(0.98);
  background: var(--brand-primary);
  color: var(--text-inverse);
}

/* ==================== ASSEMBLY ENTRY ==================== */
.assembly-entry {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.entry-header {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-3xl);
  padding: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.selected-employee {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.employee-name-display {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

.employee-pod-badge {
  background: var(--brand-primary);
  color: var(--text-inverse);
  padding: var(--space-1) var(--space-3);
  border-radius: 20px;
  font-size: var(--text-sm);
  font-weight: 600;
}

/* Change button extends btn-ghost btn-sm */
.change-btn {
  margin-left: auto;
}

.change-btn:hover {
  color: var(--brand-primary);
}

/* ==================== DRAFT BANNER ====================
   Shown when a returning worker has a saved draft for the selected
   employee. Lives between the entry-header and the first assembly row. */
.draft-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--brand-primary) 8%, var(--bg-card));
  border: 1px solid var(--brand-primary);
  border-radius: var(--radius-2xl);
}

.draft-banner-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
  min-width: 200px;
}

.draft-banner-text strong {
  color: var(--text-primary);
  font-size: var(--text-base);
}

.draft-banner-meta {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.draft-banner-actions {
  display: flex;
  gap: var(--space-2);
}

/* ==================== ASSEMBLY ROW ==================== */
.assembly-row {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-3xl);
  /* Tighter padding/margin than the default card tier so a worker can see
     more rows on screen at once without losing tablet touch ergonomics —
     the inputs themselves keep their 48px min-height. */
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  position: relative;
}

.row-number {
  position: absolute;
  top: -8px;
  left: 12px;
  background: var(--brand-primary);
  color: var(--text-inverse);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 0.15rem var(--space-2);
  border-radius: var(--radius-2xl);
}

.row-fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: end;
}

.row-fields > .field {
  min-width: 120px;
}

.row-fields > .field:first-child {
  flex: 1;
  min-width: 150px;
}

.row-fields > .field-assembly {
  flex: 2;
  min-width: 200px;
}

/* Simplified row for CASE/FINISHING/QA (just Unit + Variants + Amount) */
.row-fields-simple {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: end;
}

.row-fields-simple > .field:first-child {
  flex: 1;
  min-width: 150px;
}

/* Variant fields container */
.variant-fields {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: end;
}

.variant-fields .field {
  min-width: 90px;
  flex: 0 0 auto;
}

.variant-fields .field select {
  padding: 0.6rem var(--space-2);
  font-size: var(--text-sm);
  min-height: 44px;
}

.variant-fields .field label {
  font-size: var(--text-xs);
}

/* Mark variant dropdowns as required. The parent .variant-fields and any
   individual .field-variant-* may be display:none for units that don't
   carry that variant type — in that case the asterisk is hidden too. */
.field-variant-standard > label::after,
.field-variant-voltage > label::after,
.field-variant-color > label::after {
  content: " *";
  color: var(--danger-600);
  font-weight: 700;
}

@media (max-width: 600px) {
  /* ---- Stacked field layout ---- */
  .row-fields,
  .row-fields-simple {
    flex-direction: column;
  }
  .row-fields > .field,
  .row-fields-simple > .field,
  .variant-fields .field {
    width: 100%;
    min-width: unset;
  }
  .variant-fields {
    width: 100%;
    flex-direction: column;
  }

  /* ---- Compact entry header ---- */
  .entry-header {
    padding: var(--space-3);
    border-radius: var(--radius-2xl);
  }
  .employee-name-display {
    font-size: var(--text-lg);
  }

  /* ---- Compact rows ----
     Drop the absolute row-number floater (it overlaps the row above on a
     dense list), drop the row-actions divider line, and shrink padding. */
  .assembly-row {
    padding: var(--space-3);
    margin-bottom: var(--space-2);
    border-radius: var(--radius-2xl);
  }
  .row-number {
    position: static;
    display: inline-block;
    margin-bottom: var(--space-2);
  }
  .row-actions {
    border-top: none;
    padding-top: var(--space-2);
    margin-top: var(--space-2);
    gap: var(--space-2);
  }

  /* ---- Sticky bottom action bar ----
     Submit is the destination — promote it above Add on phone. Position
     sticky keeps it visible while the worker scrolls through their rows.
     The negative margins push the bar to the viewport edges (escaping
     .employee-container's 16px padding) so it reads as a system bar. */
  .form-actions {
    position: sticky;
    bottom: 0;
    background: var(--bg-card);
    padding: var(--space-3);
    padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -4px 12px rgba(0,0,0,0.12);
    margin: var(--space-4) calc(-1 * var(--space-4)) 0;
    z-index: 10;
    flex-direction: column-reverse;
    gap: var(--space-2);
  }
  .btn-add,
  .btn-submit {
    width: 100%;
    min-width: 0;
  }

  /* ---- Header shrink ---- */
  .save-status { padding: 0.25rem var(--space-2); font-size: var(--text-xs); }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.field label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
}

.field select,
.field input[type="text"],
.field input[type="number"] {
  padding: var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: var(--text-base);
  background: var(--bg-input);
  color: var(--text-primary);
  min-height: 48px;
}

.field select:focus,
.field input:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 18%, transparent);
}

/* Assembly search with dropdown */
.field-assembly {
  position: relative;
}

.assembly-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  max-height: 250px;
  overflow-y: auto;
  z-index: 100;
  display: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  margin-top: 4px;
}

.assembly-dropdown.show {
  display: block;
}

.assembly-option {
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}

.assembly-option:last-child {
  border-bottom: none;
}

.assembly-option:hover, .assembly-option.highlighted {
  background: var(--bg-hover);
}

/* Empty-state row inside the dropdown — visually distinct from selectable
   options (italic, lighter color, no hover) so the worker knows there's
   nothing to tap. */
.assembly-option-empty {
  padding: var(--space-3) var(--space-4);
  text-align: center;
  color: var(--text-tertiary);
  font-style: italic;
  font-size: var(--text-sm);
  cursor: default;
}
.assembly-option-empty:hover {
  background: transparent;
}

.assembly-option .pod-tag {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-inverse);
  background: var(--text-secondary);
  padding: 0.15rem var(--space-2);
  border-radius: 4px;
}

/* Use global pod colors for consistency */
.assembly-option .pod-tag.pcb { background: var(--pod-pcb, #3b82f6); }
.assembly-option .pod-tag.mod { background: var(--pod-mod, #10b981); }
.assembly-option .pod-tag.flex { background: var(--pod-flex, #f59e0b); }
.assembly-option .pod-tag.case { background: var(--pod-case, #8b5cf6); }
.assembly-option .pod-tag.finishing { background: var(--pod-finishing, #ec4899); }
.assembly-option .pod-tag.qa { background: var(--pod-qa, #06b6d4); }

/* Row actions */
.row-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-color);
}

.partial-wrap {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.partial-wrap input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.partial-wrap label {
  font-size: var(--text-sm);
  color: var(--text-primary);
  cursor: pointer;
}

/* Row-level destructive button. Deliberately not .btn-danger.btn-sm —
   the global compact danger button is 30px tall with 10px font, which is
   below the comfortable touch-target threshold for tablet use on the
   factory floor. This variant keeps the danger color treatment but
   stays at 44px / 14px so it can be tapped reliably with gloves on. */
.btn-remove {
  background: transparent;
  border: 1px solid var(--danger-600);
  color: var(--danger-600);
  border-radius: 6px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  cursor: pointer;
  margin-left: auto;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-remove:hover {
  background: var(--danger-600);
  color: var(--text-inverse);
}

/* ==================== FORM ACTIONS ==================== */
.form-actions {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}

.btn-add {
  flex: 1;
  min-width: 150px;
  background: var(--bg-card);
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-3xl);
  padding: var(--space-4);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition: all 0.15s ease;
}

.btn-add:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.btn-add-icon {
  font-size: 1.5rem;
  line-height: 1;
}

/* Visual sizing for .btn-submit is provided by .btn-flow-cta (style.css).
   This rule only owns the layout-specific bits (flex weight + min-width). */
.btn-submit {
  flex: 1;
  min-width: 200px;
}

.btn-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==================== UTILITIES ==================== */
.is-hidden {
  display: none !important;
}