/* Imports use the same white work surfaces and blue headings as Builds. */
@media screen {
  .imports-page .wrap {max-width:1240px;padding:28px 24px 60px}
  .imports-page .toolbar,.imports-page .jap-list {max-width:1440px;margin:auto;padding:24px}
  .imports-page .toolbar {padding-bottom:0}
  .imports-page .meta {background:#fff;color:#22272E;border:1px solid #BBC8D5;border-radius:18px;padding:24px;gap:18px;margin-bottom:24px}
  .imports-page .meta-label {color:#526171;font-size:13px;letter-spacing:0;text-transform:none;font-weight:650}
  .imports-page .meta-input {min-width:0;width:100%;border:1px solid #BBC8D5;padding:12px 14px;min-height:52px;font-size:18px;letter-spacing:0;font-weight:650}
  .imports-page .meta-input.title {font-size:clamp(20px,2.2vw,28px)}
  .imports-page .meta-input.vin {font-size:18px;letter-spacing:.03em}
  .imports-page .sec {margin-bottom:24px;border:1px solid #BBC8D5;border-radius:18px}
  .imports-page .sec-head {padding:20px 24px;font-size:19px;letter-spacing:0;text-transform:none;border-bottom-width:1px;font-weight:650}
  .imports-page .sec-hint {font-size:13px;line-height:1.5}
  .imports-page .sec-body {padding:24px}
  .imports-page .pay-grid {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
  .imports-page .pay-btn {min-width:0;min-height:116px;padding:18px 14px;border:1px solid #BCC8D3;border-radius:14px;background:#F5F7F9;color:#22272E;box-shadow:0 2px 5px #18222C08}
  .imports-page .pay-name {font-size:15px;font-weight:650;letter-spacing:0;text-transform:none;color:#22272E;line-height:1.3}
  .imports-page .pay-state {font-size:12px;color:#526171;line-height:1.5;margin-top:10px}
  .imports-page .pay-check {width:28px;height:28px;background:#fff;border:1.5px solid #9DAFBE;color:transparent}
  .imports-page .pay-btn.paid {background:#E2ECDE;border-color:#A1B59A}
  .imports-page .pay-btn.paid .pay-name {color:#283D2F}
  .imports-page .pay-btn.paid .pay-state {color:#405A42}
  .imports-page .pay-btn.paid .pay-check {background:#435E49;color:#fff;border-color:#435E49}
  .imports-page .pay-btn:hover {box-shadow:0 3px 10px #17243118;border-color:#365875}
  .imports-page .stage-row {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
  .imports-page .stage-pill {border-radius:12px;padding:14px 10px;min-height:50px;background:#F5F7F9;color:#354350;font-size:14px;letter-spacing:0;border:1px solid #BCC8D3}
  .imports-page .stage-pill.active {background:#365875!important;color:#fff;border-color:#365875;box-shadow:0 0 0 2px #36587526}
  .imports-page .stage-pill.active::before {content:'✓ ';font-weight:700}
  .imports-page .stage-build-link {grid-column:1/-1;background:#EDF2F6;color:#253D52;padding:14px 16px;border-radius:12px;min-height:48px;margin-top:4px}
  .imports-page .stage-total-label {font-size:12px;letter-spacing:0;text-transform:none}
  .imports-page .stage-total b {font-size:25px}
  .imports-page .notes-input {font-size:16px;min-height:120px}
  .imports-page .jap-section {margin-bottom:24px}
  .imports-page .jap-section-head {border:1px solid #7892A8;border-radius:14px;padding:20px;margin-bottom:14px}
  .imports-page .jap-section-title {font-size:20px;letter-spacing:-.3px;text-transform:none;font-weight:650}
  .imports-page .jap-section-title::before {display:none}
  .imports-page .jap-section-count {background:#fff!important;color:#253D52!important;border:0;border-radius:9px;font-size:13px;letter-spacing:0;text-transform:none;padding:7px 11px}
  .imports-page .jap-section-grid {grid-template-columns:repeat(auto-fill,minmax(min(430px,100%),1fr));gap:16px}
  .imports-page .jap-card {border:1px solid #BCC8D3;border-radius:16px;padding:22px;background:#fff;color:#22272E}
  .imports-page .jap-card-title {font-size:22px;white-space:normal;overflow-wrap:anywhere;letter-spacing:-.4px;line-height:1.3;font-weight:650}
  .imports-page .jap-vin {color:#526171;letter-spacing:.02em;font-size:13px;margin-top:12px}
  .imports-page .jap-pay-row {flex-wrap:wrap;gap:8px;margin-top:18px}
  .imports-page .jap-pay-chip {background:#F1F4F7;color:#526171;border:1px solid #CAD4DD;border-radius:9px;padding:8px 10px;font-size:12px;letter-spacing:0;text-transform:none}
  .imports-page .jap-pay-chip.paid {background:#E2ECDE;color:#304B35;border-color:#A1B59A}
  .imports-page .jap-stage-chip {border-radius:9px;padding:8px 10px;font-size:12px;letter-spacing:0;text-transform:none;color:#334452;background:#E7EDF2}
  .imports-page .jap-stage-chip[data-stage="in_transit"],.imports-page .jap-stage-chip[data-stage="ordered"] {background:#F4D6A0;color:#795528}
  .imports-page .jap-stage-chip[data-stage="in_build"] {background:#D5E5F2;color:#2B4F6C}
  .imports-page .jap-stage-chip[data-stage="delivered"],.imports-page .jap-stage-chip[data-stage="sold"] {background:#E2ECDE;color:#304B35}
  .imports-page .jap-stage-chip[data-stage="driven"] {background:#E6DFF3;color:#655280}
  .imports-page .jap-card-meta {font-size:13px;gap:12px}
  .imports-page .jap-cost {font-size:20px;letter-spacing:0}
  .imports-page .jap-modal-title,.imports-page .jap-field span {letter-spacing:0;text-transform:none}
  .imports-page .jap-modal-close {min-width:44px;border-radius:50%}
  .imports-page .jap-modal-create {background:#303B47;color:#fff}
  .imports-page .jap-field input {font-size:16px}
  @media(max-width:1000px){.imports-page .pay-grid {grid-template-columns:repeat(3,minmax(0,1fr))}.imports-page .stage-row {grid-template-columns:repeat(3,minmax(0,1fr))}}
  @media(max-width:600px){
    .imports-page .wrap,.imports-page .jap-list {padding:18px 12px 32px}.imports-page .toolbar {padding:18px 12px 0}
    .imports-page .meta,.imports-page .sec-body {padding:16px}.imports-page .sec-head {padding:18px 16px;align-items:flex-start;flex-direction:column;gap:8px}
    .imports-page .pay-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.imports-page .pay-btn:last-child {grid-column:1/-1;min-height:88px}
    .imports-page .stage-row {grid-template-columns:repeat(2,minmax(0,1fr))}.imports-page .jap-card {padding:18px}
    .imports-page .jap-card-top {flex-wrap:wrap}.imports-page .jap-card-title {font-size:21px}
    .imports-page .header {position:relative}.imports-page .header-row {gap:8px!important}
    .imports-page .jap-section-title {font-size:18px}.imports-page .jap-modal-overlay {padding:12px}
  }
}
@media screen {
  .imports-page .jap-card-wrap .jap-card {padding-left:58px}
  .imports-page .jap-pick {width:48px;min-height:52px;padding:18px 0 0 10px}
  .imports-page .jap-pick input {accent-color:#365875}
  :root body.imports-page .jap-section-count {background:#FFFFFF!important;color:#253D52!important}
  :root body.imports-page .header .header-label-btn {background:#FFFFFF!important;color:#22272E!important;border-color:#BAC8D4!important}
}

/* Compact invoice cards: three across desktop, two on iPad, one on phones. */
@media screen {
  html:root body.imports-page .sec-body:has(>#docs-list) {background:#F3F5F7!important;padding:18px}
  html:root body.imports-page #docs-list {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:14px}
  html:root body.imports-page #docs-list .doc-box {min-width:0;border:1px solid #BCC8D3;border-radius:18px;box-shadow:0 2px 6px #1724310A}
  html:root body.imports-page #docs-list .doc-box-head {display:grid;grid-template-columns:36px minmax(0,1fr) 44px;gap:8px;padding:14px 12px 8px;background:#FFFFFF!important;border:0!important;color:#22272E!important}
  html:root body.imports-page #docs-list .import-doc-icon {display:grid;place-items:center;width:36px;height:40px;background:#F4D6A0;color:#795528!important;border-radius:11px}
  html:root body.imports-page #docs-list .import-doc-icon svg {width:22px;height:22px;color:inherit!important}
  html:root body.imports-page #docs-list .doc-name-input {padding:8px 2px;width:100%;min-width:0;min-height:44px;border:1px solid transparent!important;border-radius:6px!important;font-size:15px;letter-spacing:-.2px;font-weight:650;color:#22272E!important;text-overflow:ellipsis}
  html:root body.imports-page #docs-list .doc-name-input:hover {border-color:#CAD4DD!important}
  html:root body.imports-page #docs-list .doc-box-del {display:grid;place-items:center;background:#FFFFFF!important;color:#697580!important;border:0;padding:0;width:44px;height:44px}
  html:root body.imports-page #docs-list .doc-box-del svg {width:18px;height:18px;color:inherit!important}
  html:root body.imports-page #docs-list .doc-box-del:hover {background:#F8ECEB!important;color:#883E3A!important}
  html:root body.imports-page #docs-list .doc-box-body {padding:0 14px 14px;min-width:0}
  html:root body.imports-page #docs-list .doc-controls {gap:8px;margin:0 0 12px;display:flex;justify-content:space-between;flex-wrap:wrap}
  html:root body.imports-page #docs-list .doc-price-wrap {flex:1;max-width:145px;min-width:90px;padding:7px 9px;background:#F3F5F7!important;border-color:#D6DEE5;gap:4px}
  html:root body.imports-page #docs-list .doc-price {width:100%;min-width:0;font-size:18px;font-weight:700;background:transparent!important}
  html:root body.imports-page #docs-list .doc-price-cur {font-size:15px}
  html:root body.imports-page #docs-list .doc-pills {gap:4px;flex-wrap:nowrap}
  html:root body.imports-page #docs-list .doc-pill {padding:8px 10px;min-height:44px;font-size:12px;border-radius:10px}
  html:root body.imports-page #docs-list .doc-files {margin:0 0 12px;gap:6px}
  html:root body.imports-page #docs-list .doc-file {padding:7px 8px;gap:8px;background:#F3F5F7;border:0;border-radius:10px;min-width:0}
  html:root body.imports-page #docs-list .doc-file-icon {width:28px;height:32px;font-size:15px;border-radius:8px}
  html:root body.imports-page #docs-list .doc-file-name {font-size:13px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
  html:root body.imports-page #docs-list .doc-file-meta {font-size:11px;margin-top:3px}
  html:root body.imports-page #docs-list .doc-file-del {background:transparent!important;color:#883E3A!important;padding:0;min-width:44px}
  html:root body.imports-page #docs-list .import-doc-empty {font-size:12px;color:#667587;min-height:40px;padding:6px 0 12px}
  html:root body.imports-page #docs-list .doc-add-file {width:100%;min-height:44px;padding:10px 12px;background:#EDF2F6!important;color:#253D52!important;border:1px solid #BCC8D3;font-size:13px;border-radius:11px}
  html:root body.imports-page #docs-list .doc-add-file:hover {background:#DCE8F1!important}
  html:root body.imports-page #docs-list .doc-box-body.dragover {background:#E6EFF7!important;outline:2px dashed #365875;outline-offset:-4px}
  @media(max-width:1100px){html:root body.imports-page #docs-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:700px){html:root body.imports-page #docs-list{grid-template-columns:minmax(0,1fr)}html:root body.imports-page .sec-body:has(>#docs-list){padding:12px}}
}