/* Truck asset import — aligned with Taoyen tokens (taoyen.css) and dashboard stat cards */

/*
 * Upload / import tiles: explicit padding classes on markup.
 * Global .card-body / .card-head rules (dashboard, workflow) can collapse insets; these win.
 */
body.ty-app .import-upload-tile-pad-head {
  padding: 1rem 1.75rem !important;
  box-sizing: border-box !important;
}

body.ty-app .import-upload-tile-pad {
  padding: 1.35rem 1.75rem 1.5rem !important;
  box-sizing: border-box !important;
}

body.ty-app .vehicle-import-lead.import-upload-lead-pad {
  padding: 1.125rem 1.75rem 1.35rem !important;
  box-sizing: border-box !important;
}

@media (max-width: 640px) {
  body.ty-app .import-upload-tile-pad-head {
    padding: 0.875rem 1.25rem !important;
  }

  body.ty-app .import-upload-tile-pad {
    padding: 1.125rem 1.25rem 1.25rem !important;
  }

  body.ty-app .vehicle-import-lead.import-upload-lead-pad {
    padding: 1rem 1.25rem 1.125rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   IMPORT PAGES - MAXIMIZE WIDTH, REDUCE MARGINS
════════════════════════════════════════════════════════════════ */

/* CRITICAL: Override taoyen_app_shell.css .ty-content-wrapper max-width: 1400px */
body.ty-app .ty-main-content > .ty-content-wrapper:has(.import-upload-page) {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Override workflow.css constraints for import upload pages */
body.workflow-page .import-upload-page {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.workflow-page .import-upload-page .workflow-container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.workflow-page .import-upload-page .workflow-body {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* CRITICAL: Override workflow.css padding: 28px 32px 80px */
body.workflow-page .import-upload-page .workflow-main {
  width: 100% !important;
  max-width: none !important;
  padding: 28px 8px 80px !important; /* Reduced from 32px to 8px on sides */
  margin: 0 !important;
}

/* Content cards centered with reasonable max-width for readability */
body.workflow-page .import-upload-page .workflow-main > * {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* Workflow cards on upload pages — match import batch cards */
.import-upload-page .workflow-main .card {
  border-radius: 12px;
  border: 1px solid var(--slate-200);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.import-upload-form-card .card-head h2,
.import-upload-reference-card .card-head h2 {
  font-weight: 600;
  color: var(--slate-800);
}

.import-upload-form-actions {
  padding-top: 0.25rem;
}

.pm-outcome-import-mapping-list {
  margin: 0;
  padding-left: 1.75rem;
  list-style-position: outside;
  line-height: 1.55;
  color: var(--slate-700);
  box-sizing: border-box;
}

.pm-outcome-import-mapping-list li {
  margin-bottom: 0.35rem;
}

.pm-outcome-import-mapping-list li:last-child {
  margin-bottom: 0;
}

.pm-outcome-import-page .pm-outcome-import-lead,
.vehicle-import-upload-page .vehicle-import-page-lead {
  margin-bottom: 0;
}

.import-upload-page .vehicle-import-main,
.import-upload-page .pm-outcome-import-main {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.vehicle-import-lead {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--slate-600);
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, var(--teal-50) 0%, var(--navy-50) 100%);
  border: 1px solid var(--teal-200);
  border-radius: 10px;
  border-left: 4px solid var(--teal-500);
}

.import-upload-page .vehicle-import-lead {
  margin-bottom: 0;
}

/* Outside markers + Taoyen * reset → need explicit left gutter (see upload_page_inline_css on import pages). */
body.ty-app .vehicle-import-steps {
  list-style-position: outside;
  margin: 0;
  padding: 0 0 0 2.5rem;
  color: var(--slate-700);
  line-height: 1.65;
  box-sizing: border-box;
}

.vehicle-import-steps li {
  margin-bottom: 0.65rem;
}

.vehicle-import-steps li:last-child {
  margin-bottom: 0;
}

body.ty-app .import-upload-page .vehicle-import-limits {
  margin: 1rem 0 0;
  margin-left: 0;
  padding: 1rem 0 0 2.5rem;
  border-top: 1px dashed var(--slate-200);
  font-size: 0.875rem;
  color: var(--slate-500);
  font-family: var(--ty-font-code, "JetBrains Mono", ui-monospace, monospace);
  box-sizing: border-box;
}

.vehicle-import-form .vehicle-import-file-field {
  margin-bottom: 0.5rem;
}

.vehicle-import-form .form-input[type="file"] {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 2px dashed var(--slate-300);
  border-radius: 10px;
  background: var(--slate-50);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  font-size: 0.875rem;
}

.vehicle-import-form .form-input[type="file"]:hover {
  border-color: var(--teal-400);
  background: var(--teal-50);
}

.vehicle-import-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--slate-200);
}

.vehicle-import-alert ul.vehicle-import-error-list {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}

/* ——— Import batch show ——— */

.import-batch-show {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.5rem 1rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.import-batch-nav-strip-wrap {
  padding: 1rem 1.25rem;
  background: linear-gradient(180deg, var(--slate-50) 0%, #fff 100%);
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.import-batch-nav-strip-wrap .import-batch-nav-strip {
  row-gap: 0.5rem;
  column-gap: 0.75rem;
}

.import-batch-live-metrics {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.import-batch-toolbar {
  margin-bottom: 0;
  padding: 0.75rem 1rem;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.import-batch-status-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.import-batch-status-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.import-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.import-status-pill--queued {
  background: var(--slate-100);
  color: var(--slate-700);
  border: 1px solid var(--slate-200);
}

.import-status-pill--running {
  background: var(--info-100);
  color: var(--info-700);
  border: 1px solid var(--info-100);
}

.import-status-pill--completed {
  background: var(--success-100);
  color: var(--success-700);
  border: 1px solid var(--success-100);
}

.import-status-pill--failed {
  background: var(--error-100);
  color: var(--error-700);
  border: 1px solid var(--error-200);
}

.import-status-pill--rolled_back {
  background: var(--warning-100);
  color: var(--warning-700);
  border: 1px solid var(--warning-100);
}

.import-batch-stats.stats-row {
  margin-bottom: 0;
}

.import-progress-card,
.import-activity-card {
  margin-bottom: 0;
  border: 1px solid var(--slate-200);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  border-radius: 12px;
  overflow: hidden;
}

.import-progress-card .card-head,
.import-progress-card .card-body,
.import-activity-card .card-head {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.import-progress-card .card-body {
  padding-bottom: 1.25rem;
}

.import-progress-track {
  height: 2.25rem;
  background: var(--slate-100);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--slate-200);
}

.import-progress-fill {
  height: 100%;
  min-width: 2.5rem;
  background: linear-gradient(90deg, var(--teal-500), var(--teal-600));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.import-progress-label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.card-body--flush {
  padding: 0 !important;
}

.import-activity-card .import-activity-card-body {
  padding: 1.25rem 1.5rem 1.5rem;
}

.import-activity-list {
  max-height: 440px;
  overflow-y: auto;
  padding: 0.75rem;
  background: var(--slate-100);
  border: 1px solid var(--slate-200);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.import-activity-empty {
  border-radius: 10px;
  background: var(--slate-50);
  border: 1px dashed var(--slate-300);
}

.import-no-logs {
  margin: 0;
  padding: 2.75rem 1.5rem;
  text-align: center;
  color: var(--slate-500);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.import-batch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0;
  padding-top: 0.25rem;
}

/* Activity log rows (shared partial) */
.import-activity-list .log-entry {
  padding: 0.875rem 1.125rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.45;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.import-activity-list .log-entry__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.import-activity-list .log-entry__body {
  font-size: 0.8125rem;
  color: var(--slate-600);
  word-break: break-word;
}

.import-activity-list .log-entry__body:empty {
  display: none;
}

.import-activity-list .log-entry .timestamp {
  color: var(--slate-500);
  font-family: var(--ty-font-code, "JetBrains Mono", monospace);
  font-size: 0.8125rem;
  font-weight: 500;
}

.import-activity-list .log-entry .plate {
  font-weight: 600;
  color: var(--slate-900);
}

.import-activity-list .log-entry .action {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--slate-100);
  color: var(--slate-700);
  border: 1px solid var(--slate-200);
}

.import-activity-list .log-entry .action--created,
.import-activity-list .log-entry .action--pm_started,
.import-activity-list .log-entry .action--pm_preflight,
.import-activity-list .log-entry .action--pm_progress,
.import-activity-list .log-entry .action--pm_completed {
  background: var(--teal-50);
  color: var(--teal-800);
  border-color: var(--teal-200);
}

.import-activity-list .log-entry .action--updated {
  background: var(--info-50);
  color: var(--info-700);
  border-color: var(--info-100);
}

.import-activity-list .log-entry .action--error,
.import-activity-list .log-entry .action--pm_row_skipped {
  background: var(--error-50);
  color: var(--error-700);
  border-color: var(--error-100);
}

.import-activity-list .log-entry .changes {
  display: block;
  color: var(--slate-600);
}

.import-activity-list .log-entry .error-message--alert {
  display: block;
  color: var(--error-700);
  font-weight: 500;
}

.import-activity-list .log-entry .error-message--muted {
  display: block;
  color: var(--slate-600);
  font-weight: 400;
}

/* Upload page: batch shortcuts card (body uses .import-upload-tile-pad in partial) */
.import-upload-nav-links .list-unstyled li {
  padding: 0.15rem 0;
}

.import-upload-nav-links h3.h6 {
  margin-top: 0.5rem;
  color: var(--slate-800);
}

.import-upload-nav-links h3.h6:first-child {
  margin-top: 0;
}

@media (max-width: 640px) {
  /* Mobile: minimal padding, full width content */
  body.workflow-page .import-upload-page .workflow-main {
    padding: 28px 4px 80px !important;
  }

  body.workflow-page .import-upload-page .workflow-main > * {
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .import-upload-page {
    padding: 0 !important;
  }

  .import-batch-show {
    padding: 0.25rem 0.75rem 1.75rem;
    gap: 1.125rem;
  }

  .import-batch-nav-strip-wrap {
    padding: 0.875rem 1rem;
  }

  .import-activity-card .import-activity-card-body {
    padding: 1rem;
  }

  .import-activity-list {
    padding: 0.5rem;
    max-height: 50vh;
  }

  .vehicle-import-actions,
  .import-batch-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .vehicle-import-actions .btn,
  .import-batch-actions .btn {
    justify-content: center;
  }
}