/* Console › Settings › Data Import (18 Oct 2026). AM navy, soft cards. */
.data-import__body { display: flex; flex-direction: column; gap: 20px; padding: 0 var(--gutter, 24px) 32px; }
/* .page-surface is a fixed-height column that clips: the body takes the leftover
   height and scrolls. Below 900px the page grows and the stage scrolls. */
.data-import__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
@media (max-width: 900px) { .data-import__body { flex: none; overflow-y: visible; } }
.data-import__card {
    display: flex; flex-direction: column; gap: 14px; padding: 20px 22px;
    border: 1px solid var(--border-default); border-radius: 8px; background: var(--surface-subtle);
}
.data-import__title { margin: 0; font-size: 15px; font-weight: 700; color: var(--am-blue, #19213b); }
.data-import__subtitle { margin: 0; font-size: 13px; font-weight: 700; color: var(--am-blue, #19213b); cursor: default; }
.data-import__details > summary { cursor: pointer; }
.data-import__text { margin: 0; font-size: var(--font-size-small, 13px); color: var(--text-muted, #667085); line-height: 1.5; }
.data-import__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.data-import__field { margin: 0; }
.data-import__meta { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--font-size-small, 13px); color: var(--text-primary, #101828); }
.data-import__meta .icon { color: var(--status-success); flex: none; }
.data-import__check { display: flex; align-items: flex-start; gap: 10px; font-size: var(--font-size-small, 13px); color: var(--text-secondary, #344054); line-height: 1.5; cursor: pointer; }
.data-import__check input { margin-top: 3px; accent-color: var(--am-blue, #19213b); }
.data-import__actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.data-import__hint { font-size: var(--font-size-small, 13px); color: var(--status-warning, #b54708); }
.data-import__section { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--border-default); border-radius: 6px; background: var(--surface-panel); }
.data-import__table { width: 100%; }
.data-import__table th, .data-import__table td { text-align: left; vertical-align: middle; }
.data-import__table td small { display: block; color: var(--text-muted, #667085); font-size: var(--font-size-tiny, 12px); }
.data-import__select { min-width: 240px; max-width: 100%; }
.data-import__empty { color: var(--text-muted, #667085); }
.data-import__warn { color: var(--status-warning, #b54708); }
.data-import__list { margin: 0; padding-left: 18px; font-size: var(--font-size-small, 13px); color: var(--text-secondary, #344054); line-height: 1.7; }
.data-import__note--danger .state-message__glyph { color: var(--status-danger, #d92d20); }
.data-import__note--success .state-message__glyph { color: var(--status-success); }
.data-import .summary-counters { margin: 0; }
.data-import__links { min-height: 96px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; resize: vertical; }
@media (max-width: 720px) {
    .data-import__row { grid-template-columns: 1fr; }
    .data-import__select { min-width: 0; width: 100%; }
}

/* =============================================================================
   RM-071 (23 Oct 2026): an agency's own Data Import page and the import
   wizard (a slide-over). AM Navy soft: white sheet, light navy tint on the
   cards, 5px corners, slow hover. Sizes come from the tokens; the wizard
   responds to the panel's own width (.slide-over__body is a container).
   ============================================================================= */

.page-surface.aimport-page { overflow-y: auto; gap: 24px; padding-bottom: 40px; }
.page-surface.aimport-page > * { flex: none; }

/* ---- Type cards ---- */
.aimport-cards {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px;
    margin: 0 var(--gutter, 24px);
}
.aimport-card {
    display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 16px 18px;
    border: 1px solid rgba(25, 33, 59, 0.08); border-radius: 5px; background: rgba(25, 33, 59, 0.045);
    transition: border-color 280ms ease, background-color 280ms ease;
}
.aimport-card:hover { border-color: rgba(25, 33, 59, 0.16); background: rgba(25, 33, 59, 0.06); }
.aimport-card__head { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.aimport-card__icon,
.aimport-section__icon {
    display: inline-flex; flex: none; align-items: center; justify-content: center; width: 34px; height: 34px;
    border: 1px solid var(--accent-border, #d3d8e6); border-radius: 5px; background: var(--surface-panel, #fff);
    color: var(--am-blue, #19213b);
}
.aimport-card__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.aimport-card__title { margin: 0; font-size: var(--font-size-base, 14px); font-weight: 600; color: var(--am-blue, #19213b); }
.aimport-card__hint { margin: 0; font-size: var(--font-size-small, 13px); line-height: 1.45; color: var(--text-muted, #667085); }
.aimport-card__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- History ---- */
.aimport-history { display: flex; flex-direction: column; gap: 12px; margin: 0 var(--gutter, 24px); min-width: 0; }
.aimport-history__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.aimport-history__title { margin: 0; font-size: 15px; font-weight: 600; color: var(--am-blue, #19213b); }
.aimport-history__hint { margin: 2px 0 0; font-size: var(--font-size-small, 13px); color: var(--text-muted, #667085); }
.aimport-history .data-table-scroll { flex: none; min-height: auto; overflow-x: auto; overflow-y: visible; }
.aimport-history__actions { white-space: nowrap; text-align: right; }
.aimport-history__actions .am-btn + .am-btn { margin-left: 6px; }

/* ---- Tables (history and preview) ---- */
.aimport-table { width: 100%; }
.aimport-table th, .aimport-table td { text-align: left; vertical-align: top; }
.aimport-table td small { display: block; margin-top: 2px; color: var(--text-muted, #667085); font-size: var(--font-size-tiny, 12px); line-height: 1.4; }
.aimport-table__number { width: 56px; color: var(--text-muted, #667085); font-variant-numeric: tabular-nums; }
.aimport-table__outcome small { white-space: normal; }
.aimport-table-scroll { border: 1px solid var(--border-subtle, #eef0f3); border-radius: 5px; }

/* ---- Wizard ---- */
.aimport-wizard { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.aimport-step { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.aimport-steps { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.aimport-steps__item {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 5px;
    font-size: var(--font-size-small, 13px); color: var(--text-muted, #667085); background: rgba(25, 33, 59, 0.03);
    transition: background-color 280ms ease, color 280ms ease;
}
.aimport-steps__number {
    display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 5px;
    background: var(--surface-panel, #fff); border: 1px solid var(--accent-border, #d3d8e6); font-weight: 600;
    font-size: var(--font-size-tiny, 12px);
}
.aimport-steps__item--current { color: var(--am-blue, #19213b); background: rgba(25, 33, 59, 0.07); font-weight: 600; }
.aimport-steps__item--current .aimport-steps__number {
    background: var(--am-blue, #19213b); border-color: var(--am-blue, #19213b); color: var(--surface-panel, #fff);
}
.aimport-steps__item--done { color: var(--am-blue, #19213b); }
.aimport-steps__item--done .aimport-steps__number { color: var(--status-success); }

.aimport-section {
    display: flex; flex-direction: column; gap: 14px; padding-bottom: 18px;
    border-bottom: var(--divider-width, 1px) solid var(--divider-colour, var(--border-default, #e4e7ec));
}
.aimport-section:last-child { border-bottom: 0; padding-bottom: 0; }
.aimport-section__head { display: flex; align-items: flex-start; gap: 12px; }
.aimport-section__title { margin: 0; font-size: var(--font-size-base, 14px); font-weight: 600; color: var(--am-blue, #19213b); }
.aimport-section__hint { margin: 2px 0 0; font-size: var(--font-size-small, 13px); line-height: 1.45; color: var(--text-muted, #667085); }

.aimport-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.aimport-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.aimport-actions--start { justify-content: flex-start; }
.aimport-muted { margin: 0; font-size: var(--font-size-small, 13px); color: var(--text-muted, #667085); }
.aimport-problem { margin: 0; min-height: 1em; font-size: var(--font-size-small, 13px); color: var(--status-danger, #d92d20); }

.aimport-drop {
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 18px; text-align: center;
    border: 1px dashed var(--accent-border, #d3d8e6); border-radius: 5px; background: rgba(25, 33, 59, 0.03);
    cursor: pointer; transition: border-color 280ms ease, background-color 280ms ease;
}
.aimport-drop:hover, .aimport-drop--over { border-color: var(--am-blue, #19213b); background: rgba(25, 33, 59, 0.06); }
.aimport-drop:focus-visible { outline: 2px solid var(--am-blue, #19213b); outline-offset: 2px; }
.aimport-drop--loaded { border-style: solid; }
.aimport-drop__icon { color: var(--am-blue, #19213b); }
.aimport-drop--loaded .aimport-drop__icon { color: var(--status-success); }
.aimport-drop__title { font-size: var(--font-size-base, 14px); color: var(--am-blue, #19213b); overflow-wrap: anywhere; }
.aimport-drop__hint { font-size: var(--font-size-small, 13px); color: var(--text-muted, #667085); }

.aimport-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.aimport-map__row { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.aimport-map__sample {
    min-height: 1.4em; line-height: 1.4; padding: 0 4px; font-size: var(--font-size-tiny, 12px); color: var(--text-muted, #667085);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.aimport-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.aimport-tile {
    display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; min-width: 0;
    border: 1px solid rgba(25, 33, 59, 0.08); border-radius: 5px; background: rgba(25, 33, 59, 0.045);
}
.aimport-tile__label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size-tiny, 12px); color: var(--text-muted, #667085); }
.aimport-tile__value { font-size: var(--font-size-large, 20px); font-weight: 600; color: var(--am-blue, #19213b); font-variant-numeric: tabular-nums; }
.aimport-tile__hint { font-size: var(--font-size-tiny, 12px); color: var(--text-muted, #667085); }

.aimport-dupes { display: flex; flex-direction: column; border: 1px solid var(--border-subtle, #eef0f3); border-radius: 5px; }
.aimport-dupes__row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px;
    border-bottom: 1px solid var(--border-subtle, #eef0f3);
}
.aimport-dupes__row:last-child { border-bottom: 0; }
.aimport-dupes__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--font-size-small, 13px); }
.aimport-dupes__text strong { color: var(--am-blue, #19213b); overflow-wrap: anywhere; }
.aimport-dupes__text span { color: var(--text-muted, #667085); overflow-wrap: anywhere; }
.aimport-dupes__select {
    flex: none; max-width: 220px; height: var(--input-height, 36px); padding: 0 8px; border-radius: 5px;
    border: 1px solid var(--border-default, #e4e7ec); background: var(--surface-panel, #fff); font: inherit;
    font-size: var(--font-size-small, 13px); color: var(--text-primary, #101828);
}

.aimport-progress { height: 10px; border-radius: 5px; background: rgba(25, 33, 59, 0.08); overflow: hidden; }
.aimport-progress__bar { display: block; height: 100%; border-radius: 5px; background: var(--am-blue, #19213b); transition: width 320ms ease; }

.aimport-errors { margin: 0; padding: 0; list-style: none; border: 1px solid var(--border-subtle, #eef0f3); border-radius: 5px; }
.aimport-errors li {
    display: flex; gap: 12px; padding: 8px 12px; font-size: var(--font-size-small, 13px);
    border-bottom: 1px solid var(--border-subtle, #eef0f3);
}
.aimport-errors li:last-child { border-bottom: 0; }
.aimport-errors strong { flex: none; min-width: 64px; color: var(--am-blue, #19213b); }
.aimport-errors span { color: var(--text-secondary, #344054); overflow-wrap: anywhere; }

/* The wizard follows the panel's width, not the window's: the panel can be
   dragged narrow on a wide screen, and is the whole screen on a phone. */
@container (max-width: 560px) {
    .aimport-grid, .aimport-map { grid-template-columns: 1fr; }
    .aimport-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aimport-dupes__row { flex-direction: column; align-items: stretch; }
    .aimport-dupes__select { max-width: none; width: 100%; }
    .aimport-steps__label { display: none; }
    .aimport-steps__item--current .aimport-steps__label { display: inline; }
    .aimport-errors li { flex-direction: column; gap: 2px; }
}

@media (max-width: 900px) {
    .aimport-history__by { display: none; }
}
@media (max-width: 560px) {
    .aimport-cards, .aimport-history { margin: 0 var(--gutter-tight, 12px); }
    .aimport-cards { grid-template-columns: 1fr; }
    .aimport-card__actions .am-btn { flex: 1 1 0; justify-content: center; }
    .aimport-history__actions { white-space: normal; text-align: left; }
    .aimport-history__actions .am-btn { margin: 0 0 6px; }
    .aimport-history__actions .am-btn + .am-btn { margin-left: 0; }
    /* iOS zooms into a focused control under 16px. */
    .aimport-dupes__select { font-size: 16px; }
}