/* Import Equipment (vehicle-import.html) - on top of css/vehicle-setup.css */
.imp-steps { display: flex; gap: 10px; margin-bottom: 16px; }
.imp-step { display: flex; align-items: center; gap: 9px; padding: 8px 14px 8px 8px; border: 1px solid var(--border); border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--text-dim); background: var(--bg-card); }
.imp-step b { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg-input); font-size: 12px; }
.imp-step.active { color: var(--text); border-color: var(--accent); }
.imp-step.active b { background: var(--accent); color: #fff; }
.imp-step.done b { background: var(--green); color: #fff; }

.imp-src { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.imp-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 34px 24px; border: 2px dashed var(--border); cursor: pointer; }
.imp-drop.over { border-color: var(--accent); background: rgba(30, 130, 255, 0.08); }
.imp-dropico { width: 40px; height: 40px; color: var(--accent); }
.imp-dropico svg { width: 40px; height: 40px; }
.imp-dropt { font-size: 17px; font-weight: 800; }
.imp-dropd { font-size: 12.5px; color: var(--text-dim); max-width: 360px; }
.imp-drop .btn { margin-top: 8px; }
.imp-dropname { font-size: 12.5px; color: var(--text-dim); min-height: 16px; }
.imp-paste { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; }
.imp-paste textarea { flex: 1; min-height: 150px; width: 100%; box-sizing: border-box; resize: vertical; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; color: var(--text); font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; overflow: auto; }
.imp-paste textarea:focus { outline: none; border-color: var(--accent); }
.imp-pasterow { display: flex; gap: 10px; align-items: center; }
.imp-pasterow select, .imp-map select, .imp-kind select { background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; color: var(--text); padding: 9px 10px; font-size: 12.5px; font-weight: 600; }
.imp-pasterow select { flex: 1; }
.imp-hint { font-size: 12.5px; margin: 0; }
.imp-cols { padding: 18px 20px; margin-bottom: 14px; }
.imp-colgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 16px; margin: 6px 0 12px; }
.imp-colgrid div { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.imp-colgrid span { color: var(--text-dim); font-size: 11.5px; }
.imp-err { color: var(--red); font-size: 13px; font-weight: 600; min-height: 18px; }

/* step 2 */
.imp-sheet { padding: 16px 18px; margin-bottom: 14px; }
.imp-sheethead { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.imp-sheethead .t { font-size: 16px; font-weight: 800; }
.imp-sheethead .n { color: var(--text-dim); font-size: 12.5px; }
.imp-kind { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-dim); }
.imp-kind select { min-width: 240px; }
.imp-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 14px; }
.imp-map label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-dim); }
.imp-map label.req { color: var(--text); }
.imp-map label.req select { border-color: var(--accent); }
.imp-map label .ex { font-weight: 400; font-size: 11px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imp-map select { width: 100%; }
.imp-sample { margin-top: 12px; overflow: auto; border: 1px solid var(--border-soft); border-radius: 8px; }
.imp-sample table { font-size: 11.5px; white-space: nowrap; }
.imp-sample thead th { position: sticky; top: 0; background: var(--bg-card); }
.imp-sample .m { color: var(--accent); font-weight: 800; font-size: 10px; text-transform: none; display: block; letter-spacing: 0; }
.imp-skip { opacity: 0.55; }

/* step 3 */
.imp-sum { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 14px; }
.imp-sum .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.imp-sum .card b { display: block; font-size: 22px; font-weight: 800; }
.imp-sum .card span { font-size: 12px; color: var(--text-dim); }
.imp-sum .card.ok b { color: var(--green); }
.imp-sum .card.warn b { color: var(--yellow); }
.imp-sum .card.err b { color: var(--red); }
.imp-prev { padding: 14px 16px; margin-bottom: 14px; }
.imp-prevhead { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.imp-chk { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-dim); cursor: pointer; }
.imp-chk:first-of-type { margin-left: auto; }
.imp-tablewrap { max-height: 60vh; overflow: auto; border: 1px solid var(--border-soft); border-radius: 8px; }
.imp-table { white-space: nowrap; }
.imp-table thead th { position: sticky; top: 0; background: var(--bg-card); z-index: 1; }
.imp-table tr.err td { background: rgba(239, 68, 68, 0.10); }
.imp-table tr.warn td { background: rgba(234, 179, 8, 0.08); }
.imp-table tr.exists td { color: var(--text-dim); }
.imp-table tr.off td { opacity: 0.5; }
.imp-table td.msg { white-space: normal; max-width: 360px; font-size: 11.5px; line-height: 1.35; }
.imp-table td.msg .p { color: var(--red); }
.imp-table td.msg .w { color: var(--yellow); }
.imp-table td.msg .e { color: var(--text-dim); }
.imp-table select { background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; color: var(--text); padding: 4px 6px; font-size: 12px; max-width: 170px; }
.imp-table input[type=checkbox] { width: 15px; height: 15px; }
.imp-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
.imp-pill.truck { background: rgba(30, 130, 255, 0.15); color: var(--accent); }
.imp-pill.trailer { background: rgba(34, 197, 94, 0.15); color: var(--green); }
.imp-hooks { padding: 14px 16px; margin-bottom: 14px; font-size: 12.5px; }
.imp-hooks .vs2-h { margin-bottom: 6px; }
.imp-hooks ul { margin: 6px 0 0; padding-left: 18px; color: var(--text-dim); }
#prevValid { margin-bottom: 14px; }
.imp-progress { font-size: 13px; color: var(--text-dim); }

/* step 4 */
.imp-result { padding: 20px 22px; margin-bottom: 14px; }
.imp-result .big { font-size: 20px; font-weight: 800; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.imp-result .big svg { width: 26px; height: 26px; color: var(--green); }
.imp-result table { margin-top: 10px; }
.imp-result .fail td { color: var(--red); }

@media (max-width: 1100px) {
  .imp-src { grid-template-columns: 1fr; }
  .imp-colgrid { grid-template-columns: repeat(2, 1fr); }
  .imp-sum { grid-template-columns: repeat(3, 1fr); }
}

/* ?source=samsara: waiting for / failing to read the Samsara lists */
.imp-loading { padding: 22px 24px; margin-bottom: 16px; }
.imp-loading.bad { border-color: var(--yellow); background: rgba(234, 179, 8, 0.08); }
.imp-loading a { color: var(--accent); }