/* v0.32.0-rc1 (Data Quality & Integration Foundation, ADR 0037). Built only from the design tokens of tokens.css - no new colours.
   Rule of the module: nothing may make the PAGE wider than the viewport (390 px phones included). Wide tables scroll inside their own container;
   the column mapping and the field-by-field comparison switch to stacked cards on narrow screens, so both values and the decision stay readable. */

.int-page { min-width: 0; max-width: 100%; }
.int-page .card, .int-page section, .int-page .alert, .int-page .stat-card { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.int-page .form-grid, .int-page .form-grid > label { min-width: 0; }
.int-page select, .int-page input, .int-page textarea { max-width: 100%; box-sizing: border-box; }
.int-page code, .int-wrap { overflow-wrap: anywhere; word-break: break-word; }
.int-tabs { max-width: 100%; }
@media (max-width: 70rem) { .int-tabs { flex-wrap: wrap; overflow-x: visible; } }
.int-tab { margin-top: var(--space-md); min-width: 0; max-width: 100%; }

.int-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: flex-end; margin: var(--space-sm) 0; }
.int-toolbar > label { display: grid; gap: var(--space-3xs); min-width: min(12rem, 100%); flex: 1 1 12rem; max-width: 22rem; }
/* v0.32.0-rc2 (DATA-QUALITY-SCOPE-SELECT-OVERFLOW-001): a grid track sized "auto" grows to a select's intrinsic width - the longest option, e.g. a long
   organizational unit name - and pushed the page 5-64 px wider than the viewport. The track may shrink to the label, the select fills the track and
   truncates the CLOSED value only (the opened list still shows full names; the full name is also in the title of each option). */
.int-toolbar > label, .mapping-profile label, .mapping-values label { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.int-toolbar select, .mapping-profile select, .mapping-values select { width: 100%; min-width: 0; max-width: 100%; text-overflow: ellipsis; }
.int-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; margin-top: var(--space-sm); }

/* "POBIERZ PRZYKŁADOWY SZABLON" - the same panel at every file import */
.import-template { display: grid; gap: var(--space-xs); padding: var(--space-sm); border: 1px dashed var(--color-border-strong); border-radius: 8px; background: var(--color-surface-sunken); margin: var(--space-sm) 0; }
.import-template__head { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; justify-content: space-between; }
.import-template__title { font-weight: 700; letter-spacing: .02em; }
.import-template__notice { margin: 0; }
.import-template__buttons { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

/* column mapping editor */
.mapping-table { overflow-x: auto; max-width: 100%; }
.mapping-table .data-table { min-width: 40rem; }
.mapping-sample { color: var(--color-text-secondary); font-size: .85rem; display: block; max-width: 22rem; overflow-wrap: anywhere; }
.mapping-required { list-style: none; margin: var(--space-xs) 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.mapping-values { display: grid; gap: var(--space-xs); grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }
.mapping-values label { display: grid; gap: var(--space-3xs); }
.mapping-issues { list-style: none; margin: var(--space-xs) 0; padding: 0; display: grid; gap: var(--space-2xs); }
.mapping-issue { padding: var(--space-2xs) var(--space-xs); border-left: 4px solid var(--color-border-strong); background: var(--color-surface); border-radius: 4px; }
.mapping-issue--error { border-left-color: var(--color-danger-solid); }
.mapping-issue--warning { border-left-color: var(--color-warning-solid); }
.mapping-issue--info { border-left-color: var(--color-info-solid); }
.mapping-profile { display: grid; gap: var(--space-xs); grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); align-items: end; }
.mapping-profile label { display: grid; gap: var(--space-3xs); }

/* reconciliation: one card per record, one row per field (canonical | source | decision) */
.recon-record { padding: var(--space-sm); border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); margin-bottom: var(--space-sm); }
.recon-record__head { display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: space-between; align-items: center; margin-bottom: var(--space-xs); }
.recon-field { display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr) minmax(0, 1fr) minmax(12rem, 16rem); gap: var(--space-xs); align-items: start;
    padding: var(--space-xs) 0; border-top: 1px solid var(--color-border); }
.recon-field__label { font-weight: 600; }
.recon-value { display: grid; gap: var(--space-3xs); min-width: 0; }
.recon-value__caption { font-size: .78rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.recon-value__text { overflow-wrap: anywhere; }
.recon-value__meta { font-size: .8rem; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.recon-decision { display: grid; gap: var(--space-3xs); }
.recon-field--official { background: var(--color-warning-bg); }
.recon-field--stale { background: var(--color-info-bg); }

/* identity matching rows */
.identity-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-sm); padding: var(--space-sm); border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); margin-bottom: var(--space-xs); }
.identity-row__candidates { display: grid; gap: var(--space-2xs); }

/* data quality */
.dq-findings { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.dq-finding { padding: var(--space-sm); border: 1px solid var(--color-border); border-left-width: 5px; border-radius: 8px; background: var(--color-surface); overflow-wrap: anywhere; }
.dq-finding--info { border-left-color: var(--color-info-solid); }
.dq-finding--warning { border-left-color: var(--color-warning-solid); }
.dq-finding--high, .dq-finding--critical { border-left-color: var(--color-danger-solid); }
.dq-finding__head { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; justify-content: space-between; }
.dq-samples { margin: var(--space-xs) 0 0; padding-left: 1.1rem; }

/* change set */
.changeset-table { overflow-x: auto; max-width: 100%; }
.changeset-table .data-table { min-width: 44rem; }

@media (max-width: 52rem) {
    .recon-field { grid-template-columns: 1fr; }
    .identity-row { grid-template-columns: 1fr; }
    .int-toolbar > label { max-width: none; }
}

/* Mapping table as cards on phones: every row keeps its header, sample and target choice together. */
@media (max-width: 40rem) {
    .mapping-table .data-table { min-width: 0; }
    .mapping-table thead { display: none; }
    .mapping-table tr { display: grid; gap: var(--space-3xs); padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-border); }
    .mapping-table td { display: block; border: 0; padding: 0; }
    .mapping-table td[data-label]::before { content: attr(data-label); display: block; font-size: .78rem; color: var(--color-text-secondary); }
}