/* Group-exchange import (M-334): the upload modal on the group manager, plus the mandatory dry-run preview
 * screen. Token-styled so it re-skins with the theme (incl. dark mode); mobile-first (sections stack on
 * narrow viewports, the modal fits the small screen). Presentation only — behaviour is the `group-import`
 * Stimulus controller (open/close) and native <details> for the collapsible change sections
 * (coding-standards §4). The modal chrome mirrors the quick-add modal's token vocabulary rather than
 * inventing a new overlay look. */

/* ── The upload modal ─────────────────────────────────────────────────────────────────────────────── */
.platform-group-import-modal {
    width: min(40rem, calc(100vw - 2 * var(--platform-space-lg)));
    max-height: calc(100vh - 2 * var(--platform-space-lg));
    padding: 0;
    color: var(--platform-color-text);
    background: var(--platform-color-surface);
    border: 1px solid var(--platform-color-border);
    border-radius: var(--platform-radius-lg);
    box-shadow: var(--platform-shadow-lg, var(--platform-shadow-md));
    overflow: hidden;
}

.platform-group-import-modal::backdrop {
    background: rgba(0, 0, 0, 0.45);
}

.platform-group-import-modal__panel {
    display: flex;
    flex-direction: column;
    max-height: inherit;
}

.platform-group-import-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--platform-space-md);
    padding: var(--platform-space-md) var(--platform-space-lg);
    border-bottom: 1px solid var(--platform-color-border);
}

.platform-group-import-modal__title {
    margin: 0;
    font-size: var(--platform-font-size-lg);
    font-weight: 600;
}

.platform-group-import-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--platform-color-text-muted, var(--platform-color-text));
    background: none;
    border: 0;
    border-radius: var(--platform-radius-md);
    cursor: pointer;
}

.platform-group-import-modal__close:hover,
.platform-group-import-modal__close:focus-visible {
    background: var(--platform-color-surface-muted);
}

.platform-group-import-modal__close-icon {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* The form scrolls inside the fixed-height dialog so the mode explanations never push the action off. */
.platform-group-import__form {
    padding: var(--platform-space-lg);
    overflow-y: auto;
}

/* ── The mode radio: each choice states its behaviour in words, right next to the control ──────────── */
.platform-group-import__modes {
    margin: var(--platform-space-md) 0;
    padding: 0;
    border: 0;
}

.platform-group-import__mode {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--platform-space-sm);
    align-items: start;
    padding: var(--platform-space-sm) 0;
}

.platform-group-import__mode-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.platform-group-import__mode-name {
    font-weight: 600;
}

.platform-group-import__mode-help {
    font-size: var(--platform-font-size-sm, 0.875rem);
    color: var(--platform-color-text-muted, var(--platform-color-text));
}

.platform-group-import__doc {
    margin: var(--platform-space-sm) 0 0;
    font-size: var(--platform-font-size-sm, 0.875rem);
    color: var(--platform-color-text-muted, var(--platform-color-text));
}

.platform-group-import__noscript {
    margin-top: var(--platform-space-lg);
}

/* ── The preview screen ───────────────────────────────────────────────────────────────────────────── */
.platform-group-import__summary-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--platform-space-sm) var(--platform-space-md);
    margin: 0;
    font-weight: 600;
}

.platform-group-import__summary-skips {
    color: var(--platform-color-text-muted, var(--platform-color-text));
    font-weight: 400;
}

.platform-group-import__empty {
    margin: var(--platform-space-sm) 0 0;
    color: var(--platform-color-text-muted, var(--platform-color-text));
}

.platform-group-import__destructive-note {
    margin: var(--platform-space-md) 0 0;
    padding: var(--platform-space-sm) var(--platform-space-md);
    color: var(--platform-color-error, #c0392b);
    background: var(--platform-color-error-surface, rgba(192, 57, 43, 0.08));
    border: 1px solid var(--platform-color-error, #c0392b);
    border-radius: var(--platform-radius-md);
    font-weight: 600;
}

.platform-group-import__warnings {
    margin: var(--platform-space-md) 0 0;
    padding-left: var(--platform-space-lg);
    color: var(--platform-color-text-muted, var(--platform-color-text));
    font-size: var(--platform-font-size-sm, 0.875rem);
}

/* Each change kind is a native <details> — collapsed by default, one per card-like block. */
.platform-group-import__group {
    margin-top: var(--platform-space-md);
    padding: var(--platform-space-sm) var(--platform-space-md);
    background: var(--platform-color-surface);
    border: 1px solid var(--platform-color-border);
    border-radius: var(--platform-radius-md);
}

.platform-group-import__group > summary {
    cursor: pointer;
    font-weight: 600;
}

.platform-group-import__group--destructive {
    border-color: var(--platform-color-error, #c0392b);
}

.platform-group-import__group--destructive > summary {
    color: var(--platform-color-error, #c0392b);
}

.platform-group-import__list {
    margin: var(--platform-space-sm) 0 0;
    padding-left: var(--platform-space-lg);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.platform-group-import__skipped {
    margin-top: var(--platform-space-md);
}

.platform-group-import__row {
    display: inline-block;
    min-width: 4.5rem;
    color: var(--platform-color-text-muted, var(--platform-color-text));
    font-variant-numeric: tabular-nums;
}

/* The apply/cancel row reuses the shared `.platform-form__actions` (which carries `--platform-btn-surface`
 * so a --ghost button stays readable on a themed background photo, §12) — no bespoke actions rule here. */