/*
 * Modul Konfiguration – Erscheinungsbild (Formular, Live-Vorschau, Kontrastprüfung), Versionen & Vorlagen,
 * Import/Export und Einrichtungsassistent (am Ende der Datei).
 * Keine eigenen Farben oder Schriften: nur Tokens und --brand-*-Variablen des Designsystems.
 * Die Vorschau definiert die --brand-*-Variablen lokal neu (Inline-Stil, vom Server bzw. vom
 * Stimulus-Controller berechnet), damit Komponenten wie .btn die Entwurfsfarben zeigen.
 */

/* ---- Seitenaufbau: Formular + mitlaufende Vorschau ------------------------ */

.branding {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem);
    gap: var(--space-5);
    align-items: start;
}

.branding__main {
    container-type: inline-size;
    min-width: 0;
}

.branding__alert {
    margin-bottom: var(--space-5);
}

.branding__alert p {
    margin: 0;
}

.branding__aside {
    position: sticky;
    top: calc(4rem + var(--space-4));
}

.branding__preview-body {
    display: grid;
    gap: var(--space-5);
}

@media (max-width: 75rem) {
    .branding {
        grid-template-columns: minmax(0, 1fr);
    }

    .branding__aside {
        position: static;
    }
}

/* Abschnitte im schmalen Formularbereich untereinander statt nebeneinander */
@container (max-width: 46rem) {
    .branding-form .form-section {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
    }
}

.branding-form .form-section {
    padding-top: var(--space-5);
}

.branding-form .form-section:first-of-type {
    padding-top: 0;
}

.branding-postal {
    grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr);
}

.branding-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.branding-fieldset > legend {
    padding: 0;
    margin-bottom: var(--space-1);
}

.branding-fieldset__fields {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-2);
    padding-left: var(--space-4);
    border-left: 3px solid var(--line);
}

/* ---- Logo ------------------------------------------------------------------ */

.logo-field {
    display: grid;
    gap: var(--space-2);
}

.logo-field > .field__label {
    margin: 0;
}

.logo-field__current {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}

/* Schachbrettmuster macht transparente Bereiche des Logos sichtbar */
.logo-stage {
    display: grid;
    place-items: center;
    width: 12rem;
    height: 6.5rem;
    padding: var(--space-3);
    border: var(--border);
    border-radius: var(--radius-md);
    background-color: var(--surface);
    background-image: conic-gradient(var(--surface-sunken) 25%, transparent 0 50%, var(--surface-sunken) 0 75%, transparent 0);
    background-size: 16px 16px;
}

.logo-stage img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 5rem;
    object-fit: contain;
}

.logo-field__meta {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}

.logo-field__meta p {
    margin: 0;
}

.logo-field__hint {
    color: var(--ink-muted);
    font-size: var(--text-sm);
}

.logo-field__name {
    font-weight: var(--weight-medium);
    overflow-wrap: anywhere;
}

.logo-field__status:empty {
    display: none;
}

.logo-field__status {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

.logo-field__status[data-tone="danger"] {
    color: var(--danger);
}

/* ---- Farbfelder ------------------------------------------------------------ */

.color-field__control {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
}

.color-field__picker {
    flex: none;
    width: var(--target-min);
    height: var(--target-min);
    padding: 3px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    cursor: pointer;
}

.color-field__picker[hidden] {
    display: none;
}

.color-field__picker::-webkit-color-swatch-wrapper {
    padding: 0;
}

.color-field__picker::-webkit-color-swatch {
    border: 0;
    border-radius: 2px;
}

.color-field__picker::-moz-color-swatch {
    border: 0;
    border-radius: 2px;
}

.field input.color-field__input {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Mehrere Kontrastmeldungen untereinander statt nebeneinander */
.color-field .field__error {
    flex-direction: column;
}

.color-field__suggestion .btn {
    text-align: left;
}

.color-field__suggestion code {
    background: none;
    padding: 0;
}

/* ---- Abgeleitete Farben ---------------------------------------------------- */

.derived__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
    gap: var(--space-2);
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
}

.derived__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    font-size: var(--text-xs);
    line-height: 1.35;
}

.derived__swatch {
    width: 2rem;
    height: 2rem;
    flex: none;
}

.derived__label {
    display: block;
    color: var(--ink-muted);
}

.derived__item code {
    padding: 0;
    background: none;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
}

/* ---- Vorschau (DIWA-Layout im Kleinformat) -------------------------------- */

.branding__preview-stage {
    display: grid;
    gap: var(--space-3);
    user-select: none;
}

.brand-preview {
    overflow: hidden;
    border: var(--border);
    border-radius: var(--radius-md);
    background: var(--paper);
    box-shadow: var(--shadow-raised);
    color: var(--ink);
    font-size: var(--text-xs);
    line-height: 1.35;
}

/* Weißer Kopf: Logo links, Navigation rechts (aktiver Punkt in Akzentfarbe unterstrichen) */
.brand-preview__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--surface);
    border-bottom: var(--border);
}

.brand-preview__brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.brand-preview__logo {
    flex: none;
    width: auto;
    max-width: 3.5rem;
    height: 1.5rem;
    object-fit: contain;
}

.brand-preview__name {
    overflow: hidden;
    max-width: 7rem;
    font-size: 0.6875rem;
    font-weight: var(--weight-bold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-preview__nav {
    display: flex;
    gap: var(--space-2);
    font-size: 0.6875rem;
    font-weight: var(--weight-medium);
}

.brand-preview__nav-item {
    padding: 0.2rem 0;
    border-bottom: 2px solid transparent;
    color: var(--ink-muted);
}

.brand-preview__nav-item--active {
    border-bottom-color: var(--brand-accent);
    color: var(--brand-accent);
}

/* Hellgraue Seite mit weißer Karte und Kennzahl-Kachel */
.brand-preview__page {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--paper);
}

.brand-preview__card,
.brand-preview__metric {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
    border: var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.brand-preview__metric {
    gap: 0;
    border-left: 4px solid var(--brand-primary);
}

.brand-preview__title {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
}

.brand-preview__text,
.brand-preview__metric-label {
    color: var(--ink-muted);
}

.brand-preview__link {
    color: var(--brand-accent);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.brand-preview__metric-value {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
}

.brand-preview .btn {
    min-height: 0;
    padding: 0.35rem 0.6rem;
    font-size: var(--text-xs);
    pointer-events: none;
}

/* Fußleiste in Primärfarbe mit dunkler Schaltfläche */
.brand-preview__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--brand-primary);
    color: var(--brand-on-primary);
    font-size: 0.6875rem;
}

.brand-preview__footer-button {
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-sm);
    background: var(--brand-primary-dark);
    color: var(--brand-on-primary);
    font-weight: var(--weight-bold);
}

/* Mini-Display: Aufruffläche in Akzentfarbe */
.brand-preview--display {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--surface);
}

.brand-preview__display-label {
    color: var(--ink-muted);
    font-size: 0.6875rem;
    font-weight: var(--weight-bold);
}

.brand-preview__call {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--brand-accent);
    color: var(--brand-on-accent);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
}

.brand-preview__history {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-3);
    color: var(--ink-muted);
    font-size: var(--text-sm);
}

/* ---- Kontrastprüfung ------------------------------------------------------- */

.branding-checks__title {
    font-size: var(--text-md);
}

.branding-checks__hint {
    margin: var(--space-1) 0 0;
    color: var(--ink-muted);
    font-size: var(--text-sm);
}

.contrast-list {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
}

.contrast-check {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.contrast-check[data-state="fail"] {
    border-color: color-mix(in srgb, var(--danger) 45%, transparent);
    background: var(--danger-soft);
}

.contrast-check[data-state="invalid"] {
    border-style: dashed;
}

.contrast-check__sample {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 0 1px var(--line-strong);
    font-size: var(--text-md);
    font-weight: var(--weight-heavy);
}

.contrast-check__body {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.contrast-check__label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: 1.3;
}

.contrast-check__result {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--success);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
}

.contrast-check[data-state="fail"] .contrast-check__result {
    color: var(--danger);
}

.contrast-check[data-state="invalid"] .contrast-check__result {
    color: var(--ink-muted);
}

.contrast-check__icon {
    display: inline-flex;
}

.contrast-check[data-state="pass"] .contrast-check__icon--fail,
.contrast-check[data-state="fail"] .contrast-check__icon--pass,
.contrast-check[data-state="invalid"] .contrast-check__icon--pass {
    display: none;
}

.contrast-check__criterion {
    color: var(--ink-muted);
    font-size: 0.75rem;
}

@media (forced-colors: active) {
    .contrast-check__sample,
    .branding__preview-stage {
        forced-color-adjust: none;
    }
}

/* ==========================================================================
 * Versionen & Vorlagen, Import/Export, Einrichtungsassistent
 * Nur Tokens des Designsystems (--c-*, --space-*, --fs-*), keine eigenen Farben.
 * ========================================================================== */

.config-intro {
    margin-bottom: var(--space-5);
}

.config-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
    gap: var(--space-5);
    align-items: start;
}

@media (max-width: 60rem) {
    .config-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

.checksum {
    overflow-wrap: anywhere;
    font-size: var(--fs-tiny);
}

.info-list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding-left: var(--space-5);
}

/* ---- Änderungsliste ---------------------------------------------------------- */

.change-empty {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--c-success-border);
    border-radius: var(--radius);
    background: var(--c-success-bg);
    color: var(--c-success-text);
}

.change-empty p {
    margin: 0;
}

.change-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    margin-bottom: var(--space-4);
}

.change-sections {
    display: grid;
    gap: var(--space-3);
}

.change-section {
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    background: var(--c-white);
    box-shadow: var(--shadow-card);
}

.change-section__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    color: var(--c-text-strong);
    font-weight: 700;
    cursor: pointer;
}

.change-section[open] > .change-section__summary {
    border-bottom: 1px solid var(--c-line);
}

.change-section__count {
    color: var(--c-muted);
    font-size: var(--fs-small);
    font-weight: 400;
}

.change-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.change {
    display: grid;
    grid-template-columns: minmax(8.5rem, max-content) minmax(0, 1fr);
    gap: var(--space-3);
    align-items: baseline;
    padding: var(--space-2) var(--space-5);
    border-bottom: 1px solid var(--c-line);
}

.change:last-child {
    border-bottom: 0;
}

.change__type {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--fs-small);
    font-weight: 700;
}

.change--added .change__type {
    color: var(--c-success-text);
}

.change--changed .change__type {
    color: var(--c-info);
}

.change--removed .change__type {
    color: var(--c-danger-text);
}

.change__text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.change__subject {
    color: var(--c-text-strong);
    overflow-wrap: anywhere;
}

.change__detail {
    color: var(--c-muted);
    font-size: var(--fs-small);
    overflow-wrap: anywhere;
}

.change__detail del {
    color: var(--c-danger-text);
}

.change__detail ins {
    color: var(--c-success-text);
    text-decoration: none;
}

@media (max-width: 40rem) {
    .change {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-1);
    }
}

/* ---- Inhalt eines Schnappschusses ------------------------------------------- */

.snapshot-locations {
    margin-bottom: var(--space-4);
}

.snapshot-facts {
    margin-top: var(--space-2);
}

.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

/* ---- Importprüfung und Auswahl ----------------------------------------------- */

.problem-list ul {
    margin: var(--space-2) 0 0;
    padding-left: var(--space-5);
}

.problem-list__path {
    font-weight: 700;
}

.mode-choices,
.template-choices {
    display: grid;
    gap: var(--space-2);
}

.mode-choice,
.template-choice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-white);
    cursor: pointer;
}

.mode-choice:hover,
.template-choice:hover {
    border-color: var(--c-blue);
}

.mode-choice:has(input:checked),
.template-choice:has(input:checked) {
    border-color: var(--c-blue);
    box-shadow: inset 0 0 0 1px var(--c-blue);
    background: var(--c-blue-light);
}

.mode-choice input,
.template-choice input {
    margin-top: 3px;
}

.mode-choice__body,
.template-choice__body {
    display: grid;
    gap: 2px;
}

.mode-choice__body span,
.template-choice__body span {
    color: var(--c-text);
    font-size: var(--fs-small);
}

.template-choice__title {
    color: var(--c-text-strong);
}

.template-choice__body .template-choice__fit,
.template-choice__body .template-choice__counts {
    color: var(--c-muted);
}

.template-choice__preview {
    justify-self: start;
    margin: 0 0 var(--space-2) var(--space-4);
    font-size: var(--fs-small);
}

/* ---- Vorlagen ---------------------------------------------------------------- */

.template-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.template-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--c-line);
    border-top: 4px solid var(--c-blue);
    border-radius: var(--radius);
    background: var(--c-white);
    box-shadow: var(--shadow-card);
}

.template-card p {
    margin: 0;
}

.template-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
}

.template-card__title {
    margin: 0;
    font-size: var(--fs-h3);
}

.template-card__fit {
    font-size: var(--fs-small);
}

.template-card__actions {
    margin-top: auto;
    padding-top: var(--space-2);
}

/* ---- Einrichtungsassistent --------------------------------------------------- */

.onboarding-progress__body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4) var(--space-6);
}

.onboarding-progress__main {
    display: grid;
    flex: 1 1 22rem;
    gap: var(--space-2);
}

.onboarding-progress__title {
    margin: 0;
    font-size: var(--fs-h3);
}

.onboarding-progress__main p {
    margin: 0;
}

.onboarding-progress__bar {
    height: 10px;
}

.onboarding-progress__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.onboarding-stat {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--c-text);
}

.onboarding-stat strong {
    color: var(--c-text-strong);
    font-size: var(--fs-h3);
}

.onboarding-stat--error .icon {
    color: var(--c-danger);
}

.onboarding-stat--warning .icon {
    color: var(--c-warning);
}

.onboarding-steps {
    margin-top: var(--space-5);
}

.onboarding-step {
    scroll-margin-top: var(--space-6);
}

.onboarding-step__content {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    background: var(--c-white);
    box-shadow: var(--shadow-card);
}

.onboarding-step[data-state="current"] .onboarding-step__content {
    border-left: 4px solid var(--c-blue);
}

.onboarding-step[data-state="done"] .onboarding-step__content {
    border-left: 4px solid var(--c-success);
}

.onboarding-step__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.onboarding-step__title {
    margin: 0;
    font-size: var(--fs-h3);
}

.onboarding-step__text {
    max-width: 75ch;
    margin: 0;
}

.onboarding-step__links {
    margin: 0;
}

.onboarding-step__nochecks {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
}

.onboarding-step__confirm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--c-line);
}

.onboarding-step__confirm .subtle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.findings {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.finding {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: var(--space-2);
    align-items: start;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    font-size: var(--fs-small);
}

.finding__icon {
    display: inline-flex;
    padding-top: 1px;
}

.finding--error {
    background: var(--c-danger-bg);
    color: var(--c-danger-text);
}

.finding--warning {
    background: var(--c-warning-bg);
    color: var(--c-warning-text);
}

.finding--notice {
    background: var(--c-info-bg);
    color: var(--c-text-strong);
}

.finding--notice .finding__icon {
    color: var(--c-info);
}

.finding--passed {
    color: var(--c-text);
}

.finding--passed .finding__icon {
    color: var(--c-success);
}

.finding__severity {
    font-weight: 700;
}

.finding__fix {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: var(--space-2);
    font-weight: 500;
    white-space: nowrap;
}

.onboarding-sandbox,
.onboarding-golive {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px dashed var(--c-border);
    border-radius: var(--radius);
    background: var(--c-page);
}

.onboarding-sandbox h3 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--fs-base);
}

.onboarding-sandbox p,
.onboarding-golive p,
.onboarding-widget__facts p {
    margin: 0;
}

.onboarding-widget__facts {
    display: grid;
    gap: var(--space-2);
}

@media (forced-colors: active) {
    .finding,
    .change-empty {
        border: 1px solid CanvasText;
    }
}