/* Page Import / Export (data-bundle) — scopée aux classes .data-*. */

.data-export { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 1rem; align-items: start; margin-top: 1rem; }
.data-export > * { min-width: 0; }

.data-sources { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 2px; background: var(--color-surface); border-radius: var(--radius-tile); padding: .75rem; }
.data-sources-group { font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--color-muted); margin: .75rem .5rem .25rem; }
.data-sources-group:first-child { margin-top: 0; }
.data-source { display: flex; align-items: center; gap: .625rem; padding: .5rem .625rem; border-radius: var(--radius-menu-item); font-size: .875rem; color: var(--color-ink); text-decoration: none; }
.data-source i { color: var(--color-muted); }
.data-source:hover { background: var(--color-tile); }
.data-source.is-active { background: var(--color-accent-soft); color: var(--color-accent); font-weight: 600; }
.data-source.is-active i { color: var(--color-accent); }

.data-main { display: flex; flex-direction: column; gap: 1rem; }
.data-card { background: var(--color-surface); border-radius: var(--radius-tile); padding: 1.125rem 1.25rem; }
.data-card + .data-card { margin-top: 0; }
.data-card-title { display: flex; align-items: center; gap: .625rem; margin: 0 0 .25rem; font-size: .9375rem; font-weight: 700; color: var(--color-ink); }
.data-step { width: 1.5rem; height: 1.5rem; border-radius: var(--radius-item); background: var(--color-accent-soft); color: var(--color-accent); display: grid; place-items: center; font-size: .75rem; }
.data-hint { margin: 0 0 .875rem; color: var(--color-muted-2); font-size: .8125rem; }
.data-hint-after { margin: .875rem 0 0; }
.data-count { margin: .75rem 0 0; color: var(--color-muted-2); font-size: .8125rem; }
.data-count b { color: var(--color-ink); }
.data-card .filter-bar { padding: 0; }

.data-columns { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 1rem; }
.data-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 1rem; align-content: start; }
.data-fields-group { grid-column: 1 / -1; display: flex; align-items: center; margin: .625rem 0 .125rem; font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--color-muted); }
.data-fields-group:first-child { margin-top: 0; }
.data-link { margin-left: auto; border: 0; background: none; color: var(--color-accent); font-weight: 600; font-size: .75rem; text-transform: none; letter-spacing: 0; cursor: pointer; }
.data-field { display: flex; align-items: center; gap: .5rem; padding: .3125rem .375rem; border-radius: var(--radius-item); font-size: .875rem; cursor: pointer; }
.data-field:hover { background: var(--color-tile); }
.data-field input { accent-color: var(--color-accent); width: 15px; height: 15px; }
.data-field.is-locked { color: var(--color-muted); cursor: not-allowed; }
.data-field.is-locked i { font-size: .625rem; }

.data-chosen { background: var(--color-tile); border-radius: var(--radius-field); padding: .75rem; align-self: start; }
.data-chosen-head { display: flex; justify-content: space-between; margin-bottom: .5rem; font-size: .8125rem; font-weight: 600; }
.data-chosen-head span + span { color: var(--color-muted); font-weight: 400; }
.data-chosen ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow: auto; }
.data-chosen li { display: flex; align-items: center; gap: .25rem; background: var(--color-surface); border-radius: var(--radius-item); padding: .375rem .5rem; font-size: .8125rem; }
.data-chosen li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-chosen li button { border: 0; background: none; color: var(--color-muted); padding: 0 .25rem; cursor: pointer; }
.data-chosen li button:hover { color: var(--color-accent); }

.data-preview { overflow: auto; border: 1px solid var(--color-line); border-radius: var(--radius-field); }
.data-preview table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.data-preview th { text-align: left; font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); font-weight: 700; padding: .625rem .75rem; border-bottom: 1px solid var(--color-line); white-space: nowrap; }
.data-preview td { padding: .5rem .75rem; border-bottom: 1px solid var(--color-line); white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.data-preview tr:last-child td { border-bottom: 0; }
.data-preview .is-number { text-align: right; font-variant-numeric: tabular-nums; }
.data-empty { color: var(--color-muted); }
.data-actions { text-align: right; }

.data-footer { position: sticky; bottom: 1rem; display: flex; align-items: center; gap: .875rem; flex-wrap: wrap; background: var(--color-surface); border-radius: var(--radius-tile); padding: .875rem 1.25rem; box-shadow: var(--shadow-dialog); }
.data-format { cursor: pointer; }
.data-format input { position: absolute; opacity: 0; pointer-events: none; }
.data-format:has(input:checked) { background: var(--color-accent-soft); color: var(--color-accent); font-weight: 600; }
.data-summary { flex: 1; color: var(--color-muted-2); font-size: .8125rem; }
.data-summary b { color: var(--color-ink); }

@media (max-width: 1024px) {
    .data-export, .data-columns { grid-template-columns: 1fr; }
    .data-sources { position: static; }
}

/* Importer */
.data-gap { margin-top: 1rem; }
.data-list { margin: 0; padding-left: 1.125rem; font-size: .875rem; display: flex; flex-direction: column; gap: .25rem; }
.data-drop { display: flex; align-items: center; gap: .875rem; flex-wrap: wrap; padding: 1.25rem; border: 2px dashed var(--color-line); border-radius: var(--radius-field); }
.data-drop > i { font-size: 1.5rem; color: var(--color-accent); }
.data-drop input[type=file] { flex: 1; min-width: 0; font-size: .875rem; }
.data-field.is-static { cursor: default; }
.data-field.is-static:hover { background: none; }
.data-file { display: flex; align-items: center; gap: .875rem; flex-wrap: wrap; }
.data-file > i { font-size: 1.375rem; color: var(--color-accent); }
.data-file > div { flex: 1; min-width: 0; }
.data-alert { display: flex; gap: .625rem; align-items: center; color: var(--color-danger, #b42318); font-size: .875rem; }
.data-alert.is-info { color: var(--color-ink); }
.data-mapping td { vertical-align: middle; }
.data-mapping select { min-width: 240px; max-width: 320px; display: inline-block; }
.data-mapping tr.is-ignored td:first-child, .data-mapping tr.is-ignored .data-examples { color: var(--color-muted); }
.data-mapping tr.is-guessed td { background: color-mix(in srgb, #7c3aed 6%, transparent); }
.data-examples { color: var(--color-muted-2); max-width: 360px; }
.data-guess { margin-left: .5rem; font-size: .75rem; font-weight: 600; color: #7c3aed; }
.data-options { display: flex; flex-direction: column; gap: 2px; }
.data-option-gap { margin-top: .5rem; }
.data-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin: .5rem 0 1rem; }
.data-tile { background: var(--color-tile); border-radius: var(--radius-field); padding: .75rem 1rem; font-size: .8125rem; color: var(--color-muted-2); }
.data-tile b { display: block; font-size: 1.375rem; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.data-tile.is-create b { color: var(--color-success, #067647); }
.data-tile.is-update b { color: var(--color-accent); }
.data-tile.is-error b { color: var(--color-danger, #b42318); }
.data-result td { vertical-align: top; }
.data-result .data-detail { white-space: normal; max-width: none; }
.data-detail del { color: var(--color-muted); }
.data-detail ins { text-decoration: none; font-weight: 600; }
.data-error { color: var(--color-danger, #b42318); }

@media (max-width: 1024px) {
    .data-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.data-note { color: var(--color-warning, #b54708); }