/* ══════════════════════════════════════════════════════════
   imports.css — Imports design system
   ══════════════════════════════════════════════════════════ */

/* ── Shell ── */
.imp-shell {
  padding: 1.25rem 1.5rem 3rem;
  max-width: 1400px;
  margin: 0 auto;
}

/* ── Hero ── */
.imp-hero {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.5rem; padding: 1.5rem 1.75rem;
  border-radius: 1.25rem;
  background: linear-gradient(135deg, #1a0050 0%, #2d0080 45%, #7c3aed 100%);
  color: #fff; margin-bottom: 1.25rem; position: relative; overflow: hidden;
}
.imp-hero::before {
  content: ""; position: absolute; width: 320px; height: 320px;
  border-radius: 50%; background: rgba(255,255,255,.04);
  right: -80px; top: -80px;
}
.imp-hero::after {
  content: ""; position: absolute; width: 180px; height: 180px;
  border-radius: 50%; background: rgba(255,255,255,.03);
  left: 40%; bottom: -60px;
}
.imp-eyebrow {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 0.4rem;
}
.imp-hero h1 {
  font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 900;
  letter-spacing: -0.02em; color: #fff; margin-bottom: 0.35rem; line-height: 1.1;
}
.imp-hero p { font-size: 0.88rem; line-height: 1.6; color: rgba(255,255,255,.72); max-width: 38rem; }

.imp-hero-actions { display: flex; gap: 0.65rem; flex-shrink: 0; align-items: center; position: relative; z-index: 1; }
.imp-btn-primary {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.55rem 1.15rem; border-radius: 9px; border: 0;
  background: #fff; color: #5b21b6; font-family: Poppins, sans-serif;
  font-size: 0.78rem; font-weight: 800; cursor: pointer; letter-spacing: 0.04em;
  transition: opacity 140ms; white-space: nowrap; text-decoration: none;
}
.imp-btn-primary:hover { opacity: .88; color: #5b21b6; }
.imp-btn-ghost {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.55rem 1.15rem; border-radius: 9px;
  border: 1.5px solid rgba(255,255,255,.3);
  background: transparent; color: rgba(255,255,255,.9); font-family: Poppins, sans-serif;
  font-size: 0.78rem; font-weight: 700; cursor: pointer; letter-spacing: 0.04em;
  transition: background 140ms; white-space: nowrap;
}
.imp-btn-ghost:hover { background: rgba(255,255,255,.08); }

/* ── Panels ── */
.imp-panel {
  padding: 1.25rem; border-radius: 1.1rem; background: #fff;
  border: 1px solid #e5e3f0; box-shadow: 0 2px 12px rgba(26,0,80,.05);
  margin-bottom: 1rem;
}
.imp-panel-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; margin-bottom: 1rem; padding-bottom: 0.75rem;
  border-bottom: 1px solid #f0eeff;
}
.imp-panel-kicker {
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: #7c3aed; margin-bottom: 0.25rem;
}
.imp-panel h2 { font-size: 0.95rem; font-weight: 800; color: #1a1a2e; letter-spacing: -0.01em; margin: 0; }
.imp-panel-meta { font-size: 0.72rem; color: #7a7a9a; letter-spacing: 0.02em; white-space: nowrap; padding-top: 0.15rem; }

/* ── Stat tiles ── */
.imp-stat-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0.65rem;
  margin-bottom: 1.1rem;
}
.imp-stat-grid-6 {
  display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 0.65rem;
  margin-bottom: 1.1rem;
}
.imp-stat {
  padding: 0.85rem 1rem; border-radius: 0.85rem; border: 1px solid #ede9fb; background: #faf8ff;
}
.imp-stat-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #7a7a9a; }
.imp-stat-value { font-size: 1.65rem; font-weight: 900; letter-spacing: -0.03em; color: #1a1a2e; line-height: 1.05; margin: 0.2rem 0 0.15rem; }
.imp-stat-detail { font-size: 0.72rem; color: #7a7a9a; line-height: 1.4; }
.imp-stat--blue { border-color: rgba(59,130,246,.25); }
.imp-stat--blue .imp-stat-value { color: #2563eb; }
.imp-stat--green { border-color: rgba(34,197,94,.25); }
.imp-stat--green .imp-stat-value { color: #16a34a; }
.imp-stat--warn { border-color: rgba(245,158,11,.25); }
.imp-stat--warn .imp-stat-value { color: #d97706; }
.imp-stat--red { border-color: rgba(239,68,68,.25); }
.imp-stat--red .imp-stat-value { color: #dc2626; }
.imp-stat--accent { border-color: rgba(124,58,237,.25); }
.imp-stat--accent .imp-stat-value { color: #7c3aed; }
.imp-stat--muted { border-color: #e5e3f0; }
.imp-stat--muted .imp-stat-value { color: #5a5a7a; }

/* ── Two-col layout ── */
.imp-two-col { display: grid; grid-template-columns: 1fr 340px; gap: 1rem; }

/* ── Table ── */
.imp-table { width: 100%; border-collapse: collapse; }
.imp-table thead th {
  font-size: 0.68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.1em; color: #7a7a9a; padding: 0.5rem 0.85rem;
  border-bottom: 2px solid #f0eeff; text-align: left; white-space: nowrap;
}
.imp-table tbody tr { border-bottom: 1px solid #f5f3ff; transition: background 100ms; }
.imp-table tbody tr:hover { background: #faf8ff; }
.imp-table td { padding: 0.65rem 0.85rem; font-size: 0.8rem; color: #1a1a2e; vertical-align: middle; }
.imp-table td.muted { color: #7a7a9a; font-size: 0.74rem; }

/* ── Status badges ── */
.imp-badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  border-radius: 999px; padding: 0.18rem 0.6rem;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em;
}
.imp-badge--completed { background: rgba(34,197,94,.1); color: #15803d; }
.imp-badge--warn { background: rgba(245,158,11,.1); color: #b45309; }
.imp-badge--failed { background: rgba(239,68,68,.1); color: #dc2626; }
.imp-badge--running { background: rgba(59,130,246,.1); color: #2563eb; }
.imp-badge--draft { background: rgba(148,163,184,.12); color: #5a7a9a; }
.imp-badge--validated { background: rgba(124,58,237,.1); color: #7c3aed; }

/* ── Open button ── */
.imp-open-btn {
  padding: 0.28rem 0.7rem; border-radius: 7px;
  border: 1px solid rgba(124,58,237,.3); background: transparent;
  color: #7c3aed; font-family: Poppins, sans-serif;
  font-size: 0.7rem; font-weight: 700; cursor: pointer; letter-spacing: 0.04em;
  transition: background 120ms, border-color 120ms; white-space: nowrap;
}
.imp-open-btn:hover { background: rgba(124,58,237,.06); border-color: #7c3aed; }

/* ── Supported types sidebar ── */
.imp-type-list { display: flex; flex-direction: column; gap: 0.5rem; }
.imp-type-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.65rem 0.85rem; border-radius: 0.8rem;
  background: #faf8ff; border: 1px solid #ede9fb;
  transition: border-color 120ms, background 120ms; cursor: pointer;
  text-decoration: none; color: inherit;
}
.imp-type-row:hover { border-color: rgba(124,58,237,.3); background: #f5f0ff; color: inherit; }
.imp-type-icon {
  width: 2rem; height: 2rem; border-radius: 8px;
  background: linear-gradient(135deg,#5b21b6,#7c3aed);
  display: grid; place-items: center; flex-shrink: 0;
  color: #fff; font-size: 0.72rem;
}
.imp-type-name { font-size: 0.82rem; font-weight: 700; color: #1a1a2e; }
.imp-type-desc { font-size: 0.7rem; color: #7a7a9a; }
.imp-type-arrow { margin-left: auto; color: #b8b0d8; font-size: 0.7rem; flex-shrink: 0; }

/* ── Stepper ── */
.imp-stepper { display: flex; gap: 0; margin-bottom: 1.5rem; flex-wrap: wrap; }
.imp-step {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.9rem 0.5rem 0.65rem;
  font-size: 0.75rem; font-weight: 700; color: #7a7a9a;
  cursor: pointer; border-radius: 0.6rem; transition: background 120ms;
  letter-spacing: 0.04em; border: 0; background: transparent; font-family: Poppins, sans-serif;
}
.imp-step:disabled { cursor: default; opacity: .5; }
.imp-step-num {
  width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 2px solid #d8d4f0;
  display: grid; place-items: center; font-size: 0.68rem; font-weight: 800;
  flex-shrink: 0; transition: background 140ms, border-color 140ms;
}
.imp-step--done .imp-step-num { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.imp-step--active { color: #1a1a2e; }
.imp-step--active .imp-step-num { border-color: #7c3aed; color: #7c3aed; }
.imp-step-divider { width: 1.5rem; border-top: 2px dashed #e0daf0; margin: 0 -0.2rem; align-self: center; flex-shrink: 0; }

/* ── Type cards (choose type step) ── */
.imp-type-cards { display: grid; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); gap: 0.85rem; }
.imp-type-card {
  padding: 1.1rem 1.15rem; border-radius: 0.95rem; background: #fff;
  border: 1.5px solid #e5e3f0; cursor: pointer; transition: border-color 140ms, box-shadow 140ms, transform 140ms;
}
.imp-type-card:hover { border-color: rgba(124,58,237,.3); box-shadow: 0 6px 20px rgba(124,58,237,.08); transform: translateY(-1px); }
.imp-type-card--selected { border-color: #7c3aed !important; box-shadow: 0 0 0 3px rgba(124,58,237,.12) !important; }
.imp-type-card-icon {
  width: 2.4rem; height: 2.4rem; border-radius: 10px;
  background: linear-gradient(135deg,#5b21b6,#7c3aed); display: grid;
  place-items: center; color: #fff; font-size: 0.88rem; margin-bottom: 0.75rem;
}
.imp-type-card-name { font-size: 0.88rem; font-weight: 800; color: #1a1a2e; margin-bottom: 0.3rem; }
.imp-type-card-desc { font-size: 0.73rem; color: #7a7a9a; line-height: 1.5; margin-bottom: 0.75rem; }
.imp-type-card-formats { font-size: 0.68rem; font-weight: 700; color: #7c3aed; letter-spacing: 0.04em; text-transform: uppercase; }

/* ── Upload area ── */
.imp-upload-zone {
  border: 2px dashed #d0cbf0; border-radius: 1rem; padding: 2.5rem 1.5rem;
  text-align: center; background: #faf8ff; cursor: pointer; transition: border-color 150ms, background 150ms;
}
.imp-upload-zone:hover { border-color: #7c3aed; background: #f5f0ff; }
.imp-upload-icon { font-size: 2rem; color: #c4b8f0; margin-bottom: 0.75rem; }
.imp-upload-label { font-size: 0.88rem; font-weight: 700; color: #1a1a2e; margin-bottom: 0.3rem; }
.imp-upload-sub { font-size: 0.75rem; color: #7a7a9a; }
.imp-upload-formats { margin-top: 0.75rem; display: flex; justify-content: center; gap: 0.4rem; }
.imp-format-pill {
  padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.66rem;
  font-weight: 700; background: rgba(124,58,237,.08); color: #5b21b6; letter-spacing: 0.04em;
}
.imp-file-selected {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem;
  border-radius: 0.85rem; background: #f0ebff; border: 1px solid rgba(124,58,237,.2); margin-top: 0.85rem;
}
.imp-file-icon { color: #7c3aed; font-size: 1.1rem; }
.imp-file-name { font-size: 0.82rem; font-weight: 700; color: #1a1a2e; }
.imp-file-size { font-size: 0.7rem; color: #7a7a9a; }

/* ── Config grid ── */
.imp-config-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.85rem; }
.imp-config-field label { font-size: 0.72rem; font-weight: 700; color: #5a5a7a; letter-spacing: 0.04em; display: block; margin-bottom: 0.35rem; text-transform: uppercase; }
.imp-select {
  width: 100%; padding: 0.55rem 0.75rem; border-radius: 8px;
  border: 1.5px solid #ddd8f5; background: #fff; font-family: Poppins, sans-serif;
  font-size: 0.8rem; color: #1a1a2e; appearance: none; outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237a7a9a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.75rem center;
  transition: border-color 140ms;
}
.imp-select:focus { border-color: #7c3aed; }
.imp-checkbox-group { display: grid; grid-template-columns: repeat(2,1fr); gap: 0.6rem; margin-top: 0.5rem; }
.imp-check-row { display: flex; align-items: center; gap: 0.5rem; }
.imp-check-row input[type=checkbox] { width: 1rem; height: 1rem; accent-color: #7c3aed; }
.imp-check-row label { font-size: 0.78rem; font-weight: 600; color: #3a3a5a; cursor: pointer; margin: 0; }

/* ── Mapping table ── */
.imp-map-table { width: 100%; border-collapse: collapse; }
.imp-map-table thead th { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: #7a7a9a; padding: 0.5rem 0.85rem; border-bottom: 2px solid #f0eeff; text-align: left; }
.imp-map-table tbody tr { border-bottom: 1px solid #f5f3ff; }
.imp-map-table td { padding: 0.5rem 0.85rem; font-size: 0.8rem; vertical-align: middle; }
.imp-map-source { font-weight: 600; color: #1a1a2e; }
.imp-required-dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #7c3aed; display: inline-block; }

/* ── Validation result tiles ── */
.imp-val-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 0.6rem; margin-bottom: 1rem; }
.imp-val-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.6rem; margin-bottom: 1rem; }
.imp-val-tile { padding: 0.75rem 0.85rem; border-radius: 0.85rem; border: 1px solid #ede9fb; background: #faf8ff; text-align: center; }
.imp-val-label { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #7a7a9a; }
.imp-val-value { font-size: 1.5rem; font-weight: 900; color: #1a1a2e; line-height: 1.1; margin: 0.15rem 0; letter-spacing: -0.02em; }

/* ── Row action buttons ── */
.imp-row-approve { padding: 0.25rem 0.6rem; border-radius: 6px; border: 0; background: rgba(34,197,94,.12); color: #15803d; font-family: Poppins, sans-serif; font-size: 0.68rem; font-weight: 700; cursor: pointer; margin-right: 0.3rem; transition: background 120ms; }
.imp-row-approve:hover { background: rgba(34,197,94,.22); }
.imp-row-reject { padding: 0.25rem 0.6rem; border-radius: 6px; border: 0; background: rgba(239,68,68,.1); color: #dc2626; font-family: Poppins, sans-serif; font-size: 0.68rem; font-weight: 700; cursor: pointer; transition: background 120ms; }
.imp-row-reject:hover { background: rgba(239,68,68,.2); }

/* ── Wizard bottom nav ── */
.imp-wiz-nav { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-radius: 0 0 1.1rem 1.1rem; border-top: 1px solid #f0eeff; background: #faf8ff; margin-top: 1.25rem; }
.imp-btn-outline {
  padding: 0.48rem 1.1rem; border-radius: 9px;
  border: 1.5px solid #d0cbf0; background: transparent; color: #5a5a7a;
  font-family: Poppins, sans-serif; font-size: 0.78rem; font-weight: 700;
  cursor: pointer; letter-spacing: 0.04em; transition: border-color 120ms, color 120ms;
}
.imp-btn-outline:hover { border-color: #7c3aed; color: #7c3aed; }
.imp-btn-outline:disabled { opacity: .45; cursor: default; }
.imp-btn-filled {
  padding: 0.48rem 1.25rem; border-radius: 9px; border: 0;
  background: #7c3aed; color: #fff; font-family: Poppins, sans-serif;
  font-size: 0.78rem; font-weight: 800; cursor: pointer; letter-spacing: 0.04em;
  transition: background 120ms;
}
.imp-btn-filled:hover { background: #5b21b6; }
.imp-btn-filled:disabled { background: #b8b0d8; cursor: not-allowed; }

/* ── Confirm run card ── */
.imp-confirm-card {
  border: 1.5px solid rgba(124,58,237,.25); border-radius: 1rem;
  padding: 1.5rem 1.75rem; background: #faf8ff; max-width: 560px;
}
.imp-confirm-card h3 { font-size: 1.05rem; font-weight: 800; color: #1a1a2e; margin-bottom: 0.4rem; }
.imp-confirm-card p { font-size: 0.82rem; color: #5a5a7a; line-height: 1.6; margin-bottom: 1rem; }

/* ── Alerts ── */
.imp-alert { padding: 0.75rem 1rem; border-radius: 0.75rem; font-size: 0.8rem; font-weight: 600; line-height: 1.5; }
.imp-alert--info { background: rgba(59,130,246,.08); color: #1d4ed8; border: 1px solid rgba(59,130,246,.2); }
.imp-alert--success { background: rgba(34,197,94,.08); color: #15803d; border: 1px solid rgba(34,197,94,.2); }
.imp-alert--warn { background: rgba(245,158,11,.08); color: #92400e; border: 1px solid rgba(245,158,11,.2); }

/* ── Empty state ── */
.imp-empty { padding: 2.5rem; text-align: center; color: #7a7a9a; }
.imp-empty i { font-size: 2rem; margin-bottom: 0.75rem; color: #c4b8f0; display: block; }
.imp-empty-title { font-size: 0.92rem; font-weight: 800; color: #1a1a2e; margin-bottom: 0.3rem; }
.imp-empty-sub { font-size: 0.78rem; }

/* ── Quick-tip promo card ── */
.imp-promo-card {
  border-radius: 1.1rem; padding: 1.25rem;
  background: linear-gradient(135deg,#1a0050 0%,#2d0080 60%,#7c3aed 100%);
  border: none; color: #fff;
}
.imp-promo-kicker { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 0.4rem; }
.imp-promo-title { font-weight: 800; font-size: 0.92rem; margin-bottom: 0.4rem; }
.imp-promo-body { font-size: 0.78rem; line-height: 1.6; color: rgba(255,255,255,.72); margin-bottom: 0.85rem; }

/* ── Section heading above imp-panel ── */
.imp-section-kicker { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #7c3aed; margin-bottom: 0.25rem; }
.imp-section-title { font-size: 0.95rem; font-weight: 800; color: #1a1a2e; margin-bottom: 1rem; }

/* ── Responsive ── */
@media(max-width:1100px){ .imp-two-col{grid-template-columns:1fr;} }
@media(max-width:900px){ .imp-val-grid{grid-template-columns:repeat(3,1fr);} .imp-stat-grid-6{grid-template-columns:repeat(3,1fr);} }
@media(max-width:768px){ .imp-stat-grid{grid-template-columns:repeat(2,1fr);} .imp-config-grid{grid-template-columns:1fr;} }