/* ==========================================================================
   HMPM Style Guide - KYC Formular
   Light Mode First, Dark Mode Support
   ========================================================================== */

/* Dark Mode Tokens (default — form is dark for all users) */
:root {
    /* Core Colors */
    --hmpm-white: #ffffff;
    --hmpm-red: #C41914;
    --hmpm-gray-dark: rgba(255,255,255,0.62);
    --hmpm-gray-medium: rgba(255,255,255,0.2);
    --hmpm-gray-light: rgba(255,255,255,0.12);

    /* Accent Colors */
    --color-accent: #FFC000;
    --color-focus: rgba(255,192,0,0.4);
    --color-success: #2EEC96;
    /* HMPM-Styleguide Token: error = #C41914. Konsistent mit --hmpm-red. */
    --color-error: #C41914;

    /* Semantic Colors - Dark */
    --color-text: #ffffff;
    --color-text-muted: rgba(255,255,255,0.62);
    --color-background: #000000;          /* schwarz (vormals #1a1d28 dunkelblau) */
    --color-surface: rgba(255,255,255,0.06);
    --color-surface-light: rgba(255,255,255,0.12);
    --color-border: rgba(255,255,255,0.3);

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    /* Border Radius */
    --border-radius: 0;

    /* Font */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ==========================================================================
   Light Mode Tokens (opt-in via <html data-theme="light">)
   ========================================================================== */
:root[data-theme="light"] {
    color-scheme: light;
    --color-text: #000000;
    /* WCAG-AA: rgba(26, 29, 40, 0.62) ergab 4.46:1 auf weißem BG —
       knapp unter 4.5:1. Fest definierte Farbe statt Alpha-Blending
       (Browser-Color-Management variiert sonst). */
    --color-text-muted: #5a5e6b;
    --color-background: #f3f4f7;
    --color-surface: rgba(26, 29, 40, 0.04);
    --color-surface-light: rgba(26, 29, 40, 0.08);
    --color-border: rgba(26, 29, 40, 0.18);
}

/* Respect system preference when no explicit theme is set. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]):not([data-theme="light"]) {
        color-scheme: light;
        --color-text: #000000;
        --color-text-muted: #5a5e6b;
        --color-background: #f3f4f7;
        --color-surface: rgba(26, 29, 40, 0.04);
        --color-surface-light: rgba(26, 29, 40, 0.08);
        --color-border: rgba(26, 29, 40, 0.18);
    }
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    background-color: var(--color-background);
    background-image: url('assets/page_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--color-text);
    line-height: 1.6;
    min-height: 100vh;
    padding: var(--spacing-xl) var(--spacing-md);
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1 {
    font-size: 1.75rem;
    color: var(--hmpm-white);
    margin-bottom: var(--spacing-xs);
}

h2 {
    font-size: 1.125rem;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
    color: var(--hmpm-white);
}

h3 {
    font-size: 1rem;
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    color: var(--hmpm-white);
    font-weight: 600;
}

:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3 {
    color: var(--color-text);
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]):not([data-theme="light"]) h1,
    :root:not([data-theme="dark"]):not([data-theme="light"]) h2,
    :root:not([data-theme="dark"]):not([data-theme="light"]) h3 {
        color: var(--color-text);
    }
}

/* KYC-Compliance-Hierarchie
   H2 (Compliance) > .compliance-area (Themen-Card)
   > H3.subsection-header (Thema: Bestechung/Menschenrechte/Umwelt/Lieferkette)
   > .compliance-subgroup (Zertifizierungen bzw. Fragen)
   > H4.subheading (Zertifizierung Details / Folge-Fragen).
   Visuell vier deutlich unterscheidbare Ebenen:
   - H2: Abschnittstitel (1 rem Inset, Standard-H2-Look mit Bottom-Border)
   - .compliance-area: Themen-Card mit voller Border + dickerem
     gelben Akzentstrich links, Surface-Hintergrund — hebt sich vom
     Formular-Hintergrund ab.
   - H3.subsection-header: Card-Header mit Surface-Light + Bottom-Border,
     gelbem Akzentstrich links. Negativ-Margins ziehen ihn bis zum Card-Rand.
   - .compliance-subgroup: dezent gelb getönter Sub-Bereich innerhalb der
     Card — die existierenden H4.subheading („Zertifizierung Details",
     „Folge-Fragen …") sitzen hier drin und übernehmen die Beschriftung.
   - Mobile (<600px): linke Einrückung der Card entfällt, Card-Innenabstand
     reduziert sich. Sub-Bereich behält eingerückten linken Akzentstrich. */
#compliance-section > h2 {
    /* Abschnittstitel leicht einrücken — 1 rem. */
    padding-left: var(--spacing-md);
}

.compliance-area {
    /* Themen-Card: 4 rem vom Formular-Rand absetzen (margin + padding je 1.5 rem),
       Card-Hintergrund + voller Border + dicker gelber Akzentstrich links. */
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    margin: 0 0 var(--spacing-xl) var(--spacing-lg);
    padding: var(--spacing-lg);
}

.compliance-area > .subsection-header {
    /* Card-Header: eingenistet im Card-Padding, eigener hellerer Hintergrund
       + Bottom-Border, damit er sich vom Card-Body absetzt.
       Negativ-Margins ziehen den Header bis zum Card-Rand. */
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--hmpm-white);
    margin: calc(var(--spacing-lg) * -1) calc(var(--spacing-lg) * -1) var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: var(--color-surface-light);
    border-bottom: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    letter-spacing: 0;
    text-transform: none;
}

:root[data-theme="light"] .compliance-area > .subsection-header {
    color: var(--color-text);
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]):not([data-theme="light"])
        .compliance-area > .subsection-header {
        color: var(--color-text);
    }
}

.compliance-subgroup {
    /* Sub-Bereich „Zertifizierungen bzw. Fragen" innerhalb der Card.
       Kein eigenes Label — die bestehenden <h4 class="subheading">
       (Zertifizierung Details / Folge-Fragen) übernehmen die Beschriftung.
       Cert-Cards liegen bündig mit dem Card-Rand (kein zusätzliches
       padding-left + kein zweiter gelber Akzentstrich — der Card-Akzentstrich
       links genügt als visueller Anker). */
    margin-top: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) 0;
    background-color: rgba(255, 192, 0, 0.04);
}

.compliance-area > .subheading,
.compliance-area .subheading {
    /* Original-Styling bleibt — die Einrückung kommt jetzt über den
       .compliance-subgroup-Wrapper (padding-left + border-left). */
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin: var(--spacing-md) 0 var(--spacing-xs);
}

:root[data-theme="light"] .compliance-area .subheading {
    color: var(--color-text-muted);
}

@media (max-width: 600px) {
    /* Mobile: linke Einrückung der Card entfällt, Innenabstand reduziert. */
    .compliance-area {
        margin-left: 0;
        padding: var(--spacing-md);
    }
    .compliance-area > .subsection-header {
        margin: calc(var(--spacing-md) * -1) calc(var(--spacing-md) * -1) var(--spacing-sm);
        padding: var(--spacing-sm) var(--spacing-md);
    }
    .compliance-subgroup {
        padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 0;
    }
}

.text-muted {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

a {
    color: var(--color-accent);
    text-decoration: none;
}

/* Light-Mode-Override: HMPM-yellow (#FFC000) auf weißem BG = 1.38:1,
   WCAG-Verstoß. Stattdessen HMPM text-primary + underline für
   Link-Charakter. Hover-Brand-Akzent bleibt gelb. */
:root[data-theme="light"] a,
:root[data-theme="light"] a:visited {
    color: var(--color-text);
    text-decoration: underline;
}
:root[data-theme="light"] a:hover {
    color: var(--hmpm-red);
}

a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.container {
    background-color: #252a35;            /* lifted from #1e1e1e, slight blue tint */
    border-radius: 0;
    padding: var(--spacing-xl);
    max-width: 1000px;
    margin: 0 auto;
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

:root[data-theme="light"] .container {
    background-color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]):not([data-theme="light"]) .container {
        background-color: #ffffff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
}

.form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    text-align: left;
    margin-bottom: var(--spacing-xl);
    flex-wrap: wrap;
}

/* Top panel — unified header bar (logo + user preferences).
   Sits above the form-header. Logo on the left, controls on the right. */
.top-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.top-panel__group {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Logo in the top-panel is slightly smaller than the form-header
   variant — it shares the bar with controls, so size it down a bit. */
.top-panel .brand-logo--header {
    height: 36px;
    margin: 0;
}

.form-header-text {
    flex: 1 1 auto;
    min-width: 0;
}

.subtitle {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ==========================================================================
   Card Component
   ========================================================================== */

.card-plain {
    background-color: var(--color-surface);
    border-radius: 0;
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    border: 1px solid var(--color-border);
}

.card-plain-header {
    background-color: var(--hmpm-gray-light);
    padding: var(--spacing-md);
    border-radius: 0;
    margin: calc(var(--spacing-lg) * -1);
    margin-bottom: var(--spacing-md);
}

.card-plain-title {
    color: var(--hmpm-white);
    font-weight: 600;
}

/* Hero-Heading für die erste Section: Section-Titel links,
   "KYC - Know Your Customer" rechts als Brand-Marker.
   Bewusst nur in Section 1 eingesetzt, damit die visuelle
   Gewichtung eindeutig bei den Stammdaten liegt. */
.card-plain-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
}

.card-plain-heading .card-plain-title {
    font-size: 1.25rem;
    margin: 0;
    line-height: 1.2;
}

.card-plain-heading__brand {
    /* Standard-Textfarbe: weiß (Dark) / schwarz (Light) via Token — kein
       Light-Mode-Override nötig, --color-text schaltet automatisch. */
    color: var(--color-text);
    font-size: 1.25rem;          /* kleiner als vorher (1.625rem) */
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1;
    white-space: nowrap;
}

:root[data-theme="light"] .card-plain-heading .card-plain-title {
    color: var(--color-text);
}

@media (max-width: 640px) {
    .card-plain-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
    .card-plain-heading__brand {
        font-size: 1.125rem;
    }
}

.card-plain-body {
    padding-top: var(--spacing-sm);
}

/* ==========================================================================
   Form Components
   ========================================================================== */

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group[hidden] {
    /* Native [hidden] ist `display: none`, aber die display:flex-Regel oben
       gewinnt mit höherer Spezifität → Feld trotzdem sichtbar. Explizit
       zurücksetzen, damit z. B. das Freitext-Feld unter "Land Andere" nur
       dann erscheint, wenn es eingeblendet werden soll. */
    display: none;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-row {
    grid-column: 1 / -1;
    display: grid;
    gap: var(--spacing-md);
    align-items: start;
}

.form-row.split-2-1 {
    grid-template-columns: 2fr 1fr;
}

.form-row.split-1-1 {
    grid-template-columns: 1fr 1fr;
}

label {
    margin-bottom: var(--spacing-xs);
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.section-note {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-md);
    font-style: italic;
}

.link-note {
    font-size: 0.875rem;
    margin-bottom: var(--spacing-sm);
}

.document-note {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-sm);
    padding-left: var(--spacing-lg);
}

.document-note li {
    margin-bottom: var(--spacing-xs);
}

.hint {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: var(--spacing-xs);
}

/* ==========================================================================
   Input Component (from Style Guide)
   ========================================================================== */

.input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
select,
textarea {
    width: 100%;
    padding: var(--spacing-md);
    background-color: var(--color-surface-light);
    border: 1px solid var(--color-border);
    border-radius: 0;
    color: var(--color-text);
    font-family: var(--font-family);
    /* HMPM-Styleguide text-base: 0.9375rem = 15px. Konsistent mit der
       primären Button-Größe und reduziert visuelle Sprünge zwischen
       Label (14px) und Input. */
    font-size: 0.9375rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-focus);
}

input::placeholder,
textarea::placeholder {
    color: rgba(255,255,255,0.5);
}

:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder {
    color: rgba(26, 29, 40, 0.45);
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]):not([data-theme="light"]) input::placeholder,
    :root:not([data-theme="dark"]):not([data-theme="light"]) textarea::placeholder {
        color: rgba(26, 29, 40, 0.45);
    }
}


    


select {
    cursor: pointer;
    background-color: var(--color-surface-light);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    color: rgb(255, 255, 255);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='rgba(255,255,255,0.62)' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-md) center;
    padding-right: var(--spacing-xl);

}

/* Select options - Dark Mode (default) */
select option {
    background-color: #2a2a2a;
    color: #ffffff;
    padding: 8px;
}

/* Select — Light Mode overrides: dark text, dark dropdown arrow,
   light-bg option list with dark text. */
:root[data-theme="light"] select {
    color: #000000;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='rgba(26,29,40,0.62)' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}
:root[data-theme="light"] select option {
    background-color: #ffffff;
    color: #000000;
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]):not([data-theme="light"]) select {
        color: #000000;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='rgba(26,29,40,0.62)' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    }
    :root:not([data-theme="dark"]):not([data-theme="light"]) select option {
        background-color: #ffffff;
        color: #000000;
    }
}

select[multiple] {
    background-image: none;
    padding-right: var(--spacing-md);
    min-height: 100px;
}

textarea {
    resize: vertical;
    min-height: 80px;
}

input[type="file"] {
    padding: var(--spacing-sm);
    background-color: var(--color-surface-light);
    border: 1px solid var(--color-border);
    border-radius: 0;
    color: var(--color-text);
    font-size: 0.875rem;
    min-height: 48px;
}

input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
    background-color: var(--color-accent);
    color: #1a1a1a;
    border: none;
    padding: var(--spacing-md) var(--spacing-xl);
    margin-right: var(--spacing-md);
    border-radius: 0;
    cursor: pointer;
    font-family: 'Outfit', Arial, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    transition: background-color 0.2s, transform 0.1s;
}

input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
    background-color: #E6AE00;
}

input[type="file"]::file-selector-button:active,
input[type="file"]::-webkit-file-upload-button:active {
    transform: scale(0.98);
}

/* ==========================================================================
   Button Components (from Style Guide)
   ========================================================================== */

.button,
button[type="submit"] {
    width: 100%;
    max-width: 300px;
    padding: var(--spacing-md) var(--spacing-xl);
    background-color: var(--color-accent);
    color: #1a1a1a;
    border: none;
    border-radius: 0;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

.button:hover,
button[type="submit"]:hover {
    background-color: #E6AE00;
}

.button:active,
button[type="submit"]:active {
    transform: scale(0.98);
}

.button:disabled,
button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.button-secondary,
.btn-secondary {
    background-color: transparent;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 0;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

/* Light-Mode: HMPM-gelb auf weißem BG = 1.52:1, WCAG-Verstoß. Outline
   auf HMPM text-primary umstellen, Hover mit Brand-Akzent. */
:root[data-theme="light"] .button-secondary,
:root[data-theme="light"] .btn-secondary {
    color: var(--color-text);
    border-color: var(--color-border);
}
:root[data-theme="light"] .button-secondary:hover,
:root[data-theme="light"] .btn-secondary:hover {
    color: var(--hmpm-red);
    border-color: var(--hmpm-red);
    background-color: rgba(196, 25, 20, 0.06);
}

.button-secondary:hover,
.btn-secondary:hover {
    background-color: rgba(255,192,0,0.1);
}

/* §8 Übernahme aus gesetzlichen Vertretern: Auswahl bei mehreren Personen */
.copy-picker {
    margin: var(--spacing-sm) 0 var(--spacing-md);
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}
.copy-picker.hidden {
    display: none;
}
.copy-picker-hint {
    margin: 0 0 var(--spacing-sm);
    color: var(--color-text-muted);
    font-size: 0.875rem;
}
.copy-picker-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}
.copy-picker-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    color: var(--color-text);
    font-size: 0.9375rem;
}
.copy-picker-option input {
    margin: 0;
}

.btn-sm {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.75rem;
}

.btn-ghost-sm {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    padding: var(--spacing-xs);
    cursor: pointer;
}

.btn-remove {
    background-color: var(--color-error);
    color: white;
    border: none;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 0;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

/* Der innere <span data-i18n="..."> erbt color NICHT automatisch
   (body setzt explizit color, Browser resolved span-Color darüber
   statt via Button-Inheritance). Explizit weiß erzwingen, sonst
   hat der "Entfernen"-Text im Light Mode 2.80:1 Kontrast. */
.btn-remove,
.btn-remove span,
.btn-remove span[data-i18n] {
    color: #ffffff;
}

.btn-remove:hover {
    background-color: #A31510;
}

/* Last entry of a required repeatable section: cannot be removed. */
.btn-remove.is-locked,
.btn-remove.is-locked:hover {
    background-color: var(--color-error);
    opacity: 0.35;
    cursor: not-allowed;
}

/* ==========================================================================
   Radio & Checkbox Groups
   ========================================================================== */

.radio-group,
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.bereich-liste {
    margin: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);
    color: var(--color-text);
    font-size: 0.875rem;
    line-height: 1.5;
    list-style: disc;
}

.radio-group-horizontal {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.radio-label,
.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--color-text);
    line-height: 1.4;
}

.radio-label input,
.checkbox-label input,
input[type="radio"],
input[type="checkbox"] {
    width: auto;
    margin-top: 0.25rem;
    cursor: pointer;
    accent-color: var(--color-accent);
    /* HMPM-Styleguide: text-base = 15px. Browser-Default für inputs
       ist 13.33px (Chrome); explizit überschreiben, damit Checkboxen
       und Radios mit Labels (14px) und Inputs (15px) konsistent sind. */
    font-size: 0.9375rem;
    line-height: 1;
}

.checkbox-label.required {
    font-weight: 500;
}

/* Bedingtes Pflichtfeld-Sternchen (§1 Kundennummer bei "bereits Kunde = Ja").
   Als ::after statt Kind-<span>, weil applyTranslations() das Label per
   textContent neu rendert und dabei jedes Kind-Element löschen würde. */
.required-star::after {
    content: " *";
}

/* ==========================================================================
   Info Toggle
   ========================================================================== */

.info-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-text);
    cursor: pointer;
    font-size: 0.875rem;
    width: 100%;
    text-align: left;
    font-family: var(--font-family);
}

.info-toggle:hover {
    background-color: var(--color-surface-light);
}

.info-toggle-icon {
    font-size: 1rem;
}

.info-toggle-text {
    flex: 1;
}

.info-content {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0;
    padding: var(--spacing-md);
    margin-top: var(--spacing-sm);
    font-size: 0.875rem;
    line-height: 1.6;
}

.info-content p {
    margin-bottom: var(--spacing-sm);
}

.info-content p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Repeatable Entries
   ========================================================================== */

.repeatable-entry {
    background-color: var(--color-surface);
    border-radius: 0;
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    border: 1px solid var(--color-border);
}

.entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
}

.entry-header span {
    font-weight: 500;
    color: var(--color-text);
}

/* ==========================================================================
   Declaration Box
   ========================================================================== */

.declaration-box {
    background-color: var(--color-surface);
    border-radius: 0;
    padding: var(--spacing-lg);
    border: 1px solid var(--color-border);
}

.declaration-box .checkbox-label {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

.declaration-box .checkbox-label:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* Die Visibility-Wrapper für die Matrizen (produkt_fields,
   abfall_herkunft_field) sind direkte Kinder von .form-grid — müssen
   aber ebenfalls die volle Zeile spannen, damit die darin liegenden
   .form-group.full-width ebenfalls die volle Container-Breite kriegen.
   Sonst kollabieren sie auf eine ~280px-Spalte und die Tabelle scrollt
   innerhalb dieser Mini-Spalte. */
.form-grid > #produkt_fields,
.form-grid > #abfall_herkunft_field {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
}

/* ==========================================================================
   Matrix Table
   Flache Tabellen-Darstellung (12 Branchen-Spalten × N Choice-Zeilen).
   Bleibt innerhalb des Formulars (.container, max-width: 1000px) und
   scrollt horizontal INNERHALB des Wrappers, falls die Mindest-Breite
   nicht in den Container passt. Choice- und Andere-Spalte fix, die
   12 Branchen teilen sich den Rest gleichmäßig (table-layout: fixed).
   ========================================================================== */

.matrix-table-wrapper {
    /* Bleibt innerhalb des Formular-Containers — kein Full-Bleed. */
    /* Flex-Spezifika: das Eltern-Element ``.form-group`` ist ein
       flex-column-Container; ``width: 100%`` allein reicht dort nicht,
       weil Flex-Items per Default ``min-width: auto`` haben und damit
       nicht unter ihren Inhalt schrumpfen. ``min-width: 0`` + ``width:
       100%`` + ``align-self: stretch`` zwingen den Wrapper auf volle
       verfügbare Breite (Grid-Zeile). */
    width: 100%;
    min-width: 0;
    align-self: stretch;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: visible;
    border: 1px solid var(--color-border);
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.matrix-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    /* table-layout: fixed → die 12 unconstrained Branch-Spalten teilen sich
       den Restplatz gleichmäßig, statt sich am Inhalt (Checkbox) zu
       orientieren. */
    table-layout: fixed;
    min-width: 1100px;  /* Untergrenze, ab der die horizontale Scrollbar erscheint */
    font-size: 0.875rem;
}

.matrix-table thead {
    background-color: var(--color-surface);
}

.matrix-table thead th {
    font-weight: 600;
    text-align: center;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 2px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    color: var(--color-text);
    white-space: normal;
    /* Top-Align: lange Labels (3 Zeilen) und kurze Labels (1 Zeile) starten
       beide oben in der Zelle — sonst kleben kurze Labels am unteren Rand
       einer 3-zeiligen Zelle und überlappen visuell mit dem Body-Bereich. */
    vertical-align: top;
    line-height: 1.35;
    /* Wort-Umbruch erzwingen — bei ~35px pro Branchen-Spalte sonst
       horizontaler Overflow. */
    overflow-wrap: anywhere;
    hyphens: auto;
    /* Mindest-Höhe verhindert, dass kurze Header die Zeilenhöhe
       zusammenquetschen (verhindert das "Über-die-Zeilen-schauen"-Effekt). */
    min-height: 64px;
    /* Hintergrund opak machen — sonst scheint der Body bei langen Tabellen
       optisch durch die Header-Zeile. NICHT sticky-top: bei vertikalem
       Scrollen würde der Header sonst die Body-Checkboxes überdecken. */
    background-color: var(--color-surface);
}

.matrix-table thead th:last-child {
    border-right: none;
}

/* Choice-Spalte (links): fix breit, damit lange Labels umbrechen können.
   Bewusst KEIN sticky-left: die Bezugsquellen-Labels scrollen mit dem
   Rest der Tabelle horizontal mit, statt am linken Rand zu kleben —
   das ist die Erwartungshaltung der Kund:innen ("normale Tabelle").
   Voll opaker Hintergrund in der visuell gleichen Farbe wie die Card-
   Surface, damit die Choice-Spalte sich optisch von den 12
   Branch-Spalten abhebt. */
.matrix-table thead th.matrix-table__choice-head {
    width: 300px;
    text-align: left !important;
    background-color: color-mix(in srgb, var(--color-surface, rgba(255,255,255,0.06)), var(--color-background, #000000));
}

/* Label innerhalb der Sticky-Choice-Header-Zelle. Soll kompakt und
   optisch leise wirken — nicht mit den langen Branch-Labels konkurrieren,
   sondern die Spalte nur als "Bezugsquelle" einordnen. */
.matrix-table__choice-head-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted, rgba(255,255,255,0.55));
    padding: 4px 8px;
    border-left: 2px solid var(--color-accent, #ffc000);
}


.matrix-table tbody td.matrix-table__choice-cell {
    width: 300px;
    text-align: left !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    font-weight: 500;
    /* Voll opaker Hintergrund in der visuell gleichen Farbe wie die Card-
       Surface (--color-surface ueber --color-background). ``color-mix``
       verrechnet das Alpha auf solid, sodass Dark UND Light Mode
       automatisch passen und nichts durchscheint. Fallback ``#0f0f0f``
       fuer Browser ohne color-mix-Support. */
    background-color: color-mix(in srgb, var(--color-surface, rgba(255,255,255,0.06)), var(--color-background, #000000));
    white-space: normal;
    line-height: 1.3;
}

/* Andere-Spalte wurde entfernt — mehr Platz für die 12 Branchen-Spalten. */

/* Die 12 Branch-Spalten dazwischen füllen mit table-layout: fixed den
   verbleibenden Platz gleichmäßig — keine explizite width nötig. */

.matrix-table tbody td {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    text-align: center;
    vertical-align: middle;
}

.matrix-table tbody td:last-child {
    border-right: none;
}

.matrix-table tbody tr:last-child td {
    border-bottom: none;
}

.matrix-table__choice-label {
    display: block;
}

.matrix-table__row--empty td {
    color: var(--color-text-muted);
    font-style: italic;
    text-align: left !important;
}

.matrix-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-accent);
    margin: 0;
}

.matrix-table tbody tr:hover {
    background-color: rgba(255, 192, 0, 0.05);
}

/* ── Choice-Row-Toggle (Zeile ein-/ausblenden) ──────────────────────────── */
/* Die Choice-Zelle jeder Daten-Zeile traegt vorne einen Haken, mit dem
   die gesamte ``<tr>`` ein- und ausgeblendet werden kann. Klick auf Label
   oder Checkbox selbst schaltet um (das ``<label>`` umschliesst beides). */

.matrix-table__row-toggle {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    line-height: 1.35;
}

.matrix-table__row-toggle-input {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 3px;
    accent-color: var(--color-accent);
    cursor: pointer;
}

.matrix-table__row-toggle .matrix-table__choice-label,
.matrix-table__row-toggle .matrix-arrow {
    pointer-events: none;
}

.matrix-table__row-hidden {
    /* Branch-Zellen der eingeklappten Zeile ausblenden. Die Choice-Celle
       (Index 0) wird NICHT versteckt, damit der User den Toggle-Haken
       weiterhin sieht und die Zeile wieder aufklappen kann.
       ``!important`` setzt sich gegen ggf. spezifischere Tabellenregeln durch. */
    display: none !important;
}

/* Wenn eine Zeile collapsed ist, Choice-Celle optisch abdunkeln, damit
   klar ist, dass die Branch-Spalten gerade nicht aktiv sind. */
.matrix-table tbody tr:has(> td .matrix-table__row-toggle-input:not(:checked))
    > .matrix-table__choice-cell {
    opacity: 0.55;
}



/* Subtiler Hinweis am rechten Rand wenn die Tabelle scrollt. */
@media (max-width: 1200px) {
    .matrix-table-wrapper {
        background: linear-gradient(to right, transparent 95%, rgba(255,192,0,0.1) 100%);
    }
}

/* ==========================================================================
   Callout Highlight
   ========================================================================== */

.callout-highlight {
    background-color: rgba(255, 192, 0, 0.12);
    border: 2px solid var(--color-accent);
    border-left-width: 6px;
    border-radius: 0;
    padding: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
    box-shadow: 0 2px 8px rgba(255, 192, 0, 0.08);
}

.callout-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid rgba(255, 192, 0, 0.3);
}

.callout-icon {
    font-size: 1.25rem;
    line-height: 1;
}

.callout-title {
    font-weight: 600;
    color: var(--hmpm-white);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Light-Mode: weißer Text auf weißem Hintergrund = 1.07:1, WCAG-Verstoß.
   Text auf HMPM text-primary, Brand-Akzent in der Border beibehalten. */
:root[data-theme="light"] .callout-title {
    color: var(--color-text);
}

.callout-question {
    font-size: 1.05rem;
    font-weight: 500;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text);
}

.callout-hint {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0;
    font-style: italic;
}

.callout-hint--muted {
    color: #888;
    font-style: normal;
    font-size: 0.8125rem;
    margin-top: var(--spacing-xs);
    opacity: 0.85;
}

/* Conditional-Reveal Folge-Block innerhalb der Callouts.
   Erscheint erst nachdem die Vorfrage (z. B. ``bietet_waren_an``)
   angehakt wurde — siehe ``setConditionalReveal`` in app.js. Einrückung
   + dünner Akzent-Border links machen die Abhängigkeit zur Vorfrage
   visuell klar, ohne den Callout-Rahmen zu duplizieren. */
.callout-followup {
    margin-left: var(--spacing-lg);
    padding-left: var(--spacing-md);
    border-left: 2px solid rgba(255, 192, 0, 0.45);
    /* ``hidden`` Attribut → display:none (Browser-Default). Wir definieren
       nur die "sichtbar"-Optik; keine Animation damit Playwright die
       Folge-Checkbox ohne Force-Click ansprechen kann. */
}
.callout-followup > .callout-question {
    margin-top: var(--spacing-sm);
}
.callout-followup > .callout-hint--muted:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Form Actions & Response
   ========================================================================== */

.form-actions {
    text-align: center;
    margin-top: var(--spacing-xl);
}

.response {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    border-radius: 0;
    text-align: center;
}

.response.success {
    background-color: rgba(46, 125, 50, 0.1);
    color: var(--color-success);
    border: 1px solid var(--color-success);
}

/* Required field left empty (or only spaces) */
input.field-invalid,
select.field-invalid,
textarea.field-invalid {
    border-color: var(--color-error);
    box-shadow: 0 0 0 1px var(--color-error);
}

.field-error-msg {
    display: block;
    margin-top: var(--spacing-xs);
    font-size: 0.8125rem;
    color: var(--color-error);
}

.response.error {
    background-color: rgba(196, 25, 20, 0.1);
    color: var(--color-error);
    border: 1px solid var(--color-error);
}

/* ==========================================================================
   Brand Logo
   ========================================================================== */

.brand-logo {
    display: block;
    /* Hard rules from HMPM styleguide: no stretch, no rotate, no shadow.
       `height` is set inline; aspect ratio is preserved automatically.
       The "white" variant asset is actually a black-text + yellow-icon
       file, so we invert it to render as a true light logo on dark. */
    filter: brightness(0) invert(1);
}

/* In light mode, the original (non-inverted) logo shows the black text +
   yellow icon on the light container — no filter needed. */
:root[data-theme="light"] .brand-logo {
    filter: none;
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]):not([data-theme="light"]) .brand-logo {
        filter: none;
    }
}

.brand-logo--header {
    margin: 0 auto var(--spacing-md);
    height: 48px;
    width: auto;
}

.brand-logo--footer {
    height: 24px;
    width: auto;
}

/* ==========================================================================
   Form Version Footer
   ========================================================================== */

.form-version {
    margin-top: var(--spacing-xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    font-size: 0.75rem;
    color: var(--color-text-muted, #888);
    opacity: 0.7;
    letter-spacing: 0.02em;
}

.form-version-text {
    margin-left: auto;
}

/* ==========================================================================
   Login Page (SSO)
   ========================================================================== */

body.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl) var(--spacing-md);
}

.login-page .container {
    max-width: 520px;
    width: 100%;
}

.login-page .form-header {
    text-align: center;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
}

.login-page .form-header-text {
    text-align: center;
}

.login-card {
    text-align: center;
    padding: var(--spacing-xl);
}

.login-error {
    background-color: rgba(255, 93, 93, 0.1);
    border: 1px solid var(--color-error);
    color: var(--color-error);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 0;
    font-size: 0.875rem;
    margin-bottom: var(--spacing-md);
}

.login-error[hidden] {
    display: none;
}

/* Microsoft SSO button — uses Microsoft's brand colors but in a
   shape consistent with .button (full-width, rounded, accent focus ring).
   White background in both themes; dark text matches the official
   Microsoft "Sign in" guidance. */
.microsoft-btn {
    width: 100%;
    max-width: 320px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: #ffffff;
    color: #000000;
    border: 1px solid #8c8c8c;
    border-radius: 0;
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.microsoft-btn:hover:not(:disabled) {
    background-color: #f5f5f5;
    border-color: #a5a5a5;
}

.microsoft-btn:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-focus);
}

.microsoft-btn:active:not(:disabled) {
    background-color: #e7e6e6;
}

.microsoft-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.microsoft-btn__label {
    line-height: 1;
}

/* Microsoft 4-square logo — kept identical to the official glyph. */
.ms-logo {
    display: inline-grid;
    grid-template-columns: repeat(2, 9px);
    grid-template-rows: repeat(2, 9px);
    gap: 2px;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.ms-logo span:nth-child(1) { background-color: #f25022; }
.ms-logo span:nth-child(2) { background-color: #7fba00; }
.ms-logo span:nth-child(3) { background-color: #00a4ef; }
.ms-logo span:nth-child(4) { background-color: #ffb900; }

.login-hint {
    margin-top: var(--spacing-md);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.login-hint code {
    background-color: var(--color-surface-light);
    border: 1px solid var(--color-border);
    border-radius: 0;
    padding: 1px 6px;
    font-size: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--color-text);
}

.login-footer {
    margin-top: var(--spacing-lg);
    text-align: center;
    font-size: 0.75rem;
}

.top-panel__back {
    color: var(--color-text-muted);
    font-size: 13px;
    text-decoration: none;
}

.top-panel__back:hover {
    color: var(--color-accent);
    text-decoration: none;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.hidden {
    display: none !important;
}

.inline-input {
    display: inline-flex;
    align-items: center;
    margin-left: 0.5rem;
}

.inline-input input {
    width: 250px;
    padding: 0.5rem;
}

/* ==========================================================================
   Upload Container
   ========================================================================== */

.upload-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.upload-container > div {
    background-color: var(--color-surface);
    padding: var(--spacing-md);
    border-radius: 0;
    border: 1px solid var(--color-border);
}

.upload-container label {
    margin-bottom: var(--spacing-xs);
}

/* ==========================================================================
   Cert Card (Compliance-Zertifikate)
   --------------------------------------------------------------------------
   Groupiert pro Zertifikat: Checkbox im <legend>, Body mit Typ-Text +
   Datei-Upload. Inaktivität wird visuell gedämpft (Border grau, Text
   muted), aktiv hebt sich der gelbe Akzent-Border ab. Eine Karte pro
   Zertifikat — vorher waren Checkbox und Upload in getrennten Containern.
   ========================================================================== */

.cert-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0;
    padding: var(--spacing-md);
    margin: 0 0 var(--spacing-md) 0;
    transition: border-color 0.15s, background-color 0.15s;
}

.cert-card--inactive {
    border-color: var(--color-border);
    background-color: var(--color-surface);
}

.cert-card--active {
    border-color: var(--color-accent);
    background-color: var(--color-surface-light);
}

.cert-card > legend {
    /* Default <legend> hat eigenes Padding/Border; reset für Card-Look. */
    padding: 0;
    margin: 0;
    border: 0;
    width: 100%;
}

.cert-card__label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    font-weight: 600;
    color: var(--color-text);
    padding: 0;
    margin: 0;
}

.cert-card--inactive .cert-card__label {
    color: var(--color-text-muted);
    font-weight: 500;
}

.cert-card__label input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
}

.cert-card__body {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.cert-card__body label {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.cert-card__body input[type="text"],
.cert-card__body input[type="file"] {
    color: var(--color-text);
    font-family: inherit;
}

.cert-card__body input[type="file"] {
    padding: var(--spacing-xs);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0;
}

@media (max-width: 600px) {
    .cert-card {
        padding: var(--spacing-sm);
    }
}

/* ==========================================================================
   Progress Indicator
   ========================================================================== */

.form-progress {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-xl);
    flex-wrap: wrap;
}

.progress-dot {
    width: 10px;
    height: 10px;
    border-radius: 0;
    background-color: var(--color-border);
    transition: background-color 0.2s;
}

.progress-dot.active {
    background-color: var(--color-accent);
}

.progress-dot.completed {
    background-color: var(--color-success);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 600px) {
    .form-grid {
        grid-template-columns: 1fr;
    }

    .container {
        padding: var(--spacing-md);
    }

    .card-plain {
        padding: var(--spacing-md);
        margin-left: calc(var(--spacing-md) * -1);
        margin-right: calc(var(--spacing-md) * -1);
    }

    .radio-group-horizontal {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
}

/* ============ Erklärungen Gate ============ */
.erklaerung-status {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-md);
    border-radius: 0;
    font-size: 0.9em;
    border: 1px solid transparent;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.erklaerung-status.not-ready {
    background-color: #fff3cd;
    border-color: #ffe69c;
    color: #664d03;
}

.erklaerung-status.ready {
    background-color: #d1e7dd;
    border-color: #a3cfbb;
    color: #0a3622;
}

.erklaerung-status-icon {
    font-size: 1.2em;
    line-height: 1;
}

.erklaerung-status-text {
    flex: 1;
}

.erklaerung-status-count {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

#submit-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.erklaerung-pending {
    border-left: 3px solid #e0a800;
    padding-left: var(--spacing-sm);
    transition: border-color 0.2s;
}

.erklaerung-ok {
    border-left: 3px solid #198754;
    padding-left: var(--spacing-sm);
    transition: border-color 0.2s;
}

/* ==========================================================================
   Language Selector
   ========================================================================== */

.language-selector {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.lang-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--color-surface);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right var(--spacing-sm) center;
    background-size: 1rem;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 0;
    padding: var(--spacing-sm) 2.25rem var(--spacing-sm) var(--spacing-md);
    font-size: 0.9rem;
    font-family: var(--font-family);
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
    min-width: 9rem;
}

.lang-select:hover {
    background-color: var(--color-surface-light);
    border-color: var(--color-accent);
}

.lang-select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-focus);
}

.lang-select option {
    background-color: var(--color-background);
    color: var(--color-text);
}

/* Theme toggle button — matches .lang-select visually, sits next to it */
.theme-toggle {
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-surface-light);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 0;
    cursor: pointer;
    font-family: var(--font-family);
    font-size: 0.95rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: border-color 0.2s, background-color 0.2s;
}

.theme-toggle:hover {
    border-color: var(--color-accent);
}

.theme-toggle:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-focus);
}

/* ==========================================================================
   File input wrapper
   Replaces the OS-rendered "Choose file" button (which can't be translated)
   with a custom label that mimics the original ::file-selector-button style
   (yellow accent background, dark text, 4px radius). The native
   <input type="file"> stays in the DOM, visually hidden but still
   focusable and clickable via the label.
   ========================================================================== */

.file-input-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    padding: var(--spacing-sm);
    background-color: var(--color-surface-light);
    border: 1px solid var(--color-border);
    border-radius: 0;
    margin-top: var(--spacing-xs);
}

/* Visually hidden but still functional (so the label can trigger it) */
input.fx-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.file-button {
    display: inline-block;
    background-color: var(--color-accent);
    color: #1a1a1a;
    border: none;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 0;
    cursor: pointer;
    font-size: 0.875rem;
    font-family: inherit;
    user-select: none;
    transition: background-color 0.15s;
}

.file-button:hover,
.file-button:focus-visible {
    background-color: #E6AE00;
    outline: none;
}

.file-button:active {
    filter: brightness(0.95);
}

.file-name {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    word-break: break-all;
}

.file-name--active {
    color: var(--color-text);
}

.file-name .file-status {
    font-weight: 600;
}

.file-name--uploading .file-status {
    color: var(--color-text-muted);
}

.file-name--done .file-status {
    color: #2e7d32;
}

.file-name--done .file-status::before {
    content: "✓ ";
}

.file-name--failed .file-status {
    color: var(--color-error);
}

.file-name--failed .file-status::before {
    content: "✗ ";
}

.file-retry {
    margin-left: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-accent);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}


/* ==========================================================================
   Dental-only mode: hide sections/fields marked data-dental-hide
   ========================================================================== */

html.kyc-dental-only [data-dental-hide] {
    display: none !important;
}

.dental-flag-callout {
    margin-top: var(--spacing-lg);
}