/*
 * Transgourmet v2 Brand-Overrides für keycloak.v2 (PatternFly 5)
 * Design-Tokens und Komponenten-Stile aus dem webshop-frontend.
 * Quelle: webshop-frontend/app/tailwind.css + ui/{button,input}.tsx
 */

/* ---------- Schrift ---------- */
@font-face {
    font-family: 'Transgourmet';
    src: url('../fonts/Transgourmet_Lt.ttf') format('truetype');
    font-weight: 100 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Transgourmet';
    src: url('../fonts/Transgourmet_Rg.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Transgourmet';
    src: url('../fonts/Transgourmet_Bd.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ---------- Design-Tokens (auf :root, damit sie alle PF5-Variablen schlagen) ---------- */
:root {
    /* Brand-Farben aus webshop-frontend (HSL → wir liefern beide HSL- und kompatible HEX-Fallbacks) */
    --tg-primary: hsl(350 100% 44%);
    --tg-primary-dark: hsl(350 100% 40%);
    --tg-primary-light: hsl(350 100% 94%);
    --tg-primary-foreground: hsl(0 0% 98%);
    --tg-secondary: hsl(0 0% 40%);
    --tg-foreground: hsl(0 0% 6%);
    --tg-muted: hsl(0 0% 96.1%);
    --tg-muted-foreground: hsl(0 0% 45.1%);
    --tg-border: hsl(0 0% 89.8%);
    --tg-input-border: hsl(0 0% 89.8%);
    --tg-destructive: hsl(0 84.2% 60.2%);
    --tg-ring: hsl(0 0% 3.9%);
    --tg-radius: 0.5rem;

    /* PatternFly 5 globale Tokens überschreiben (gilt für alle Komponenten) */
    --pf-v5-global--primary-color--100: var(--tg-primary);
    --pf-v5-global--primary-color--200: var(--tg-primary-dark);
    --pf-v5-global--link--Color: var(--tg-primary);
    --pf-v5-global--link--Color--hover: var(--tg-primary-dark);
    --pf-v5-global--active-color--100: var(--tg-primary);

    --pf-v5-global--BackgroundColor--100: #ffffff;
    --pf-v5-global--Color--100: var(--tg-foreground);
    --pf-v5-global--Color--200: var(--tg-secondary);

    --pf-v5-global--FontFamily--text: 'Transgourmet', ui-serif, Georgia, serif;
    --pf-v5-global--FontFamily--heading: 'Transgourmet', ui-serif, Georgia, serif;
    --pf-v5-global--FontFamily--monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;

    --pf-v5-global--BorderRadius--sm: var(--tg-radius);
    --pf-v5-global--BorderRadius--md: var(--tg-radius);

    --pf-v5-global--BorderColor--100: var(--tg-border);
    --pf-v5-global--BorderColor--300: var(--tg-border);

    --pf-v5-global--danger-color--100: var(--tg-destructive);
}

/* ---------- Body & globaler Container ---------- */
body,
.pf-v5-c-login,
.login-pf body {
    font-family: 'Transgourmet', ui-serif, Georgia, serif;
    background-color: #ffffff;
    color: var(--tg-foreground);
}

/* Flat white background, keine Gradients */
.pf-v5-c-login,
.login-pf-page,
.login-pf {
    background: #ffffff;
    background-image: none;
    min-height: 100vh;
}

/* Login-Container von 2-Spalten (Logo daneben) auf Column (Logo oben) zwingen */
.pf-v5-c-login__container,
.login-pf-page .container,
#kc-container,
#kc-container-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2rem;
    padding: 3rem 1rem;
    /*max-width: 480px;*/
    max-width: 640px;
    margin: 0 auto;
}

/* ---------- Login Card / Form Container ---------- */
.pf-v5-c-login__main,
.card-pf,
#kc-content {
    position: relative;
    width: 100%;
    background-color: #ffffff;
    /*border: 1px solid var(--tg-border);*/
    /*border-radius: var(--tg-radius);*/
    box-shadow: none;
    /*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);*/
    padding: 2.5rem 2.25rem;
}

/* ---------- Header in der Card (Title + Locale stacken statt nebeneinander) ---------- */
.pf-v5-c-login__main-header,
#kc-header,
#kc-form-wrapper > header,
.login-pf-page-header-wrapper {
    display: block;
    /*display: flex;*/
    width: 100%;
    /*margin-bottom: 1.75rem;*/
}

/* Locale-Switcher: Custom-Dropdown im Header-Flow, rechtsbündig via text-align.
   Der Trigger ist inline-flex und folgt damit dem Text-Align des Wrappers,
   das Menu bleibt absolute relativ zum Wrapper. */
.tg-locale-switcher {
    position: relative;
    text-align: right;
    margin: 0 0 0.5rem 0;
}

.tg-locale-switcher__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: transparent;
    border: 0;
    padding: 0.375rem 0;
    color: var(--tg-foreground);
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1;
    cursor: pointer;
    border-radius: calc(var(--tg-radius) - 2px);
    transition: background-color 0.15s ease;
}

.tg-locale-switcher__trigger:hover,
.tg-locale-switcher__trigger:focus-visible {
    /*background-color: var(--tg-muted);*/
    color: var(--tg-primary);
}

.tg-locale-switcher__trigger:focus-visible {
    outline: 2px solid var(--tg-ring);
    outline-offset: 2px;
}

.tg-locale-switcher__globe {
    /*color: var(--tg-primary);*/
    flex-shrink: 0;
}

.tg-locale-switcher__label {
    font-weight: 400;
    text-transform: uppercase;
}

.tg-locale-switcher__chevron {
    color: inherit;
    transition: transform 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.tg-locale-switcher__trigger[aria-expanded="true"] .tg-locale-switcher__chevron {
    transform: rotate(180deg);
}

.tg-locale-switcher__menu {
    position: absolute;
    top: calc(100% + 0.375rem);
    right: 0;
    min-width: 10rem;
    margin: 0;
    padding: 0.5rem;
    list-style: none;
    background: #ffffff;
    border: 1px solid var(--tg-border);
    border-radius: var(--tg-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    text-align: left;
}

.tg-locale-switcher__menu[hidden] {
    display: none;
}

.tg-locale-switcher__menu li {
    margin: 0;
    padding: 0;
}

.tg-locale-switcher__menu .tg-locale-switcher__item {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: calc(var(--tg-radius) - 2px);
    color: #000000;
    font-size: 0.875rem;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.tg-locale-switcher__menu .tg-locale-switcher__item:hover,
.tg-locale-switcher__menu .tg-locale-switcher__item:focus-visible {
    /*color: #000000;*/
    color: var(--tg-primary);
    text-decoration: none;
}

.tg-locale-switcher__item.is-active,
.tg-locale-switcher__menu .tg-locale-switcher__item.is-active,
.tg-locale-switcher__menu .tg-locale-switcher__item.is-active:hover {
    color: var(--tg-primary);
    font-weight: 700;
    text-decoration: none;
}

/* ---------- Überschriften ---------- */
h1, h2, h3,
.pf-v5-c-title,
#kc-page-title {
    font-family: 'Transgourmet', ui-serif, Georgia, serif;
    font-weight: 700;
    color: var(--tg-foreground);
    line-height: 1.25;
}

#kc-page-title,
.pf-v5-c-login__main-header h1,
.pf-v5-c-login__main-header-title {
    display: block;
    width: 100%;
    font-size: 1.5rem;
    margin: 0 0 0.5rem 0;
}

.pf-v5-c-form {
    row-gap: 0;
}

/* ---------- Form Labels ---------- */
.pf-v5-c-form__label,
.pf-v5-c-form__label-text,
.kc-form-label {
    color: var(--tg-foreground);
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: 0.375rem;
}



/* ---------- Inputs ----------
   PF5 v5 rendert form-controls als <span class="pf-v5-c-form-control"><input/></span>.
   Wrapper komplett neutralisieren, damit nur das <input> selbst sichtbare
   Border/Background trägt (vermeidet doppelten Rahmen). */
.pf-v5-c-form-control:not(input):not(textarea):not(select) {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: auto !important;
    width: 100%;
}

/* PF5 rendert die Focus-Underline (blauer Strich) via ::after-Pseudoelement
   am Wrapper — komplett ausblenden, auch im focus-within-State. */
.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after,
.pf-v5-c-form-control:focus-within::after,
.pf-v5-c-form-control:hover::after {
    display: none !important;
    border: 0 !important;
    background: none !important;
    content: none !important;
}

.pf-v5-c-form-control > input,
.pf-v5-c-form-control > textarea,
.pf-v5-c-form-control > select,
input.pf-v5-c-form-control,
textarea.pf-v5-c-form-control,
.form-control,
#kc-form input[type="text"],
#kc-form input[type="password"],
#kc-form input[type="email"] {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 2.5rem;
    border: 1px solid var(--tg-input-border) !important;
    border-radius: calc(var(--tg-radius) - 2px) !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--tg-foreground);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.pf-v5-c-form-control > input:focus,
.pf-v5-c-form-control > input:focus-visible,
input.pf-v5-c-form-control:focus,
.form-control:focus,
#kc-form input:focus {
    outline: none !important;
    border-color: var(--tg-foreground) !important;
    box-shadow: none !important;
    background-image: none !important;
}

.pf-v5-c-form-control > input::placeholder,
input.pf-v5-c-form-control::placeholder,
.form-control::placeholder {
    color: var(--tg-muted-foreground);
}

.pf-v5-c-form-control > input:disabled,
input.pf-v5-c-form-control:disabled,
.form-control:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--tg-muted) !important;
}

/* Chrome/Edge Autofill: Browser legt bei vorausgefuellten Feldern einen eigenen
   UA-Hintergrund (hellgrau/blau) ueber das Feld, der sich nur mit dem
   box-shadow-inset-Trick uebermalen laesst. Selektoren muessen mindestens so
   spezifisch sein wie '#kc-form input[type="password"] { box-shadow: none }',
   damit die Inset-Fuellung gewinnt. */
#kc-form input:-webkit-autofill,
#kc-form input:-webkit-autofill:hover,
#kc-form input:-webkit-autofill:focus,
#kc-form input:-webkit-autofill:active,
input.pf-v5-c-form-control:-webkit-autofill,
input.pf-v5-c-form-control:-webkit-autofill:hover,
input.pf-v5-c-form-control:-webkit-autofill:focus,
input.pf-v5-c-form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: var(--tg-foreground) !important;
    caret-color: var(--tg-foreground);
    transition: background-color 5000s ease-in-out 0s;
}

/* Form-Gruppen-Abstand */
.pf-v5-c-form__group,
.form-group {
    margin-bottom: 1.25rem;
}

/* "Passwort vergessen?" und ähnliche Helper-Links unter den Inputs */
#kc-form-options,
.kc-form-options,
.login-pf-settings,
#kc-info-wrapper {
    margin-top: 0.5rem;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
}

#kc-form-options .checkbox,
.login-pf-settings .checkbox,
.checkbox,
.pf-v5-c-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}

/* Label SELBST als Flex-Container, damit Input + Text vertikal mittig sitzen */
.checkbox label,
#kc-form-options .checkbox label,
.pf-v5-c-check label,
.pf-v5-c-check__label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--tg-foreground);
    cursor: pointer;
    line-height: 1.25;
}

input[type="checkbox"],
.pf-v5-c-check__input {
    -webkit-appearance: none;
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    padding: 0;
    border: 1px solid var(--tg-input-border);
    border-radius: 3px;
    background-color: #ffffff;
    color-scheme: light;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

input[type="checkbox"]:hover,
.pf-v5-c-check__input:hover {
    border-color: var(--tg-input-border);
}

input[type="checkbox"]:checked,
.pf-v5-c-check__input:checked {
    background-color: var(--tg-primary);
    border-color: var(--tg-primary);
}

input[type="checkbox"]:checked::after,
.pf-v5-c-check__input:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 45%;
    width: 5px;
    height: 10px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

input[type="checkbox"]:focus,
input[type="checkbox"]:focus-visible,
.pf-v5-c-check__input:focus,
.pf-v5-c-check__input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Submit-Button-Bereich klar abgesetzt */
#kc-form-buttons,
.kc-form-buttons,
.pf-v5-c-login__main-footer-band,
.submit {
    margin-top: 1.5rem;
}

#kc-form-buttons input[type="submit"],
#kc-form-buttons button[type="submit"],
.kc-form-buttons input[type="submit"] {
    width: 100%;
    height: 2.75rem;
    font-size: 0.9375rem;
    font-weight: 500;
}

/* ---------- Input-Group: Eye-Button absolut über dem Input, randlos ----------
   Ansatz: kein Border-Merging zwischen zwei Boxen — der Button schwebt
   border-/background-los rechts im Input. Das umgeht alle PF5-Markup-Varianten
   (mit/ohne __item-Wrapper, mit/ohne form-control-Span). */
.pf-v5-c-input-group,
.input-group {
    position: relative !important;
    display: block !important;
    width: 100%;
}

/* __item-Wrapper neutralisieren falls vorhanden */
.pf-v5-c-input-group__item {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    display: contents;
}

/* Input nimmt volle Breite, rechts Platz lassen für den Button */
.pf-v5-c-input-group input,
.pf-v5-c-input-group .pf-v5-c-form-control input,
.pf-v5-c-input-group input.pf-v5-c-form-control,
.pf-v5-c-input-group > .pf-v5-c-form-control {
    width: 100% !important;
    padding-right: 2.75rem !important;
}

/* Eye-Button: absolut rechts im Input, ohne eigene Border/Background */
.pf-v5-c-input-group .pf-v5-c-button,
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control,
.pf-v5-c-input-group button[data-password-toggle],
.pf-v5-c-input-group button[type="button"],
.input-group .btn {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    height: 2.5rem !important;
    width: 2.5rem !important;
    min-width: 2.5rem;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 calc(var(--tg-radius) - 2px) calc(var(--tg-radius) - 2px) 0 !important;
    background: transparent !important;
    color: var(--tg-muted-foreground) !important;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

.pf-v5-c-input-group .pf-v5-c-button:hover,
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control:hover,
.pf-v5-c-input-group button[data-password-toggle]:hover {
    color: var(--tg-foreground) !important;
    background: transparent !important;
}

.pf-v5-c-input-group .pf-v5-c-button:focus-visible {
    outline: 2px solid var(--tg-ring);
    outline-offset: -2px;
}

/* PF5 pf-m-control-Button rendert eine Bottom-Underline via ::after — komplett killen,
   auch im Hover/Focus/Active-State, damit unter dem Eye-Icon nichts mehr sichtbar ist. */
.pf-v5-c-input-group .pf-v5-c-button::before,
.pf-v5-c-input-group .pf-v5-c-button::after,
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control::before,
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control::after,
.pf-v5-c-input-group .pf-v5-c-button:hover::after,
.pf-v5-c-input-group .pf-v5-c-button:focus::after,
.pf-v5-c-input-group .pf-v5-c-button:focus-visible::after,
.pf-v5-c-input-group .pf-v5-c-button:active::after,
.pf-v5-c-input-group button[data-password-toggle]::before,
.pf-v5-c-input-group button[data-password-toggle]::after,
.pf-v5-c-input-group button[data-password-toggle]:hover::after {
    display: none !important;
    content: none !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

/* ---------- Buttons (entspricht webshop button.tsx default variant) ---------- */
.pf-v5-c-button,
.btn {
    font-family: 'Transgourmet', ui-serif, Georgia, serif;
    font-weight: 400;
    border-radius: calc(var(--tg-radius) - 2px);
    padding: 0.5rem 1rem; /* py-2 px-4 */
    font-size: 0.875rem; /* text-sm */
    transition: opacity 0.15s ease, background-color 0.15s ease;
    cursor: pointer;
}

.pf-v5-c-button.pf-m-primary,
.pf-v5-c-button.pf-m-primary:not(:disabled),
.btn-primary,
.btn-primary2 {
    background-color: var(--tg-primary);
    color: var(--tg-primary-foreground);
    border: 1px solid var(--tg-primary);
}

.pf-v5-c-button.pf-m-primary:hover,
.pf-v5-c-button.pf-m-primary:focus,
.btn-primary:hover,
.btn-primary2:hover {
    background-color: var(--tg-primary);
    border-color: var(--tg-primary);
    opacity: 0.9;
}

.pf-v5-c-button.pf-m-primary:disabled,
.btn-primary:disabled,
.btn-primary2:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pf-v5-c-button.pf-m-secondary,
.pf-v5-c-button.pf-m-link,
.btn-default {
    background-color: transparent;
    color: var(--tg-foreground);
    border: 1px solid var(--tg-border);
}

.pf-v5-c-button.pf-m-secondary:hover,
.pf-v5-c-button.pf-m-link:hover,
.btn-default:hover {
    background-color: var(--tg-muted);
    border-color: var(--tg-border);
}

.pf-v5-c-button.pf-m-block,
.btn-block {
    width: 100%;
    display: block;
}

.pf-v5-c-button.pf-m-large,
.btn-lg {
    height: 3rem; /* h-12 */
    padding-left: 2rem;
    padding-right: 2rem;
}

/* ---------- Links ---------- */
a,
.pf-v5-c-login__main a,
.kc-form-options a {
    color: var(--tg-primary);
    text-decoration: none;
}

a:hover,
.pf-v5-c-login__main a:hover {
    color: var(--tg-primary-dark);
    text-decoration: underline;
}

/* ---------- Registrierungs-Link im Info-Bereich („Kunde werden") ---------- */
.tg-register-link {
    font-size: 0.875rem;
    color: var(--tg-foreground);
}

.tg-register-link a {
    color: var(--tg-primary);
    font-weight: 500;
    text-decoration: none;
}

.tg-register-link a:hover,
.tg-register-link a:focus-visible {
    color: var(--tg-primary-dark);
    text-decoration: underline;
}

/* ---------- Alerts / Feedback (PF5-Alert-Struktur) ---------- */
.pf-v5-c-alert.pf-m-danger,
.alert-error {
    background-color: var(--tg-primary-light);
    border: 1px solid var(--tg-primary);
    /*border-left: 4px solid var(--tg-primary);*/
    color: var(--tg-foreground);
    padding: 0.75rem 1rem;
    border-radius: calc(var(--tg-radius) - 2px);
    margin-bottom: 1rem;
}

.pf-m-error {
    font-size: 0.875rem;
    color: var(--tg-primary);
}

/* Info-/Warning-/Success-Alerts (z.B. KC-Meldung "reauthenticate") — neutral, hell, lesbar.
   Ohne diese Regeln fallen sie auf einen ungestylten dunklen PF5-Default zurück. */
.pf-v5-c-alert.pf-m-info,
.pf-v5-c-alert.pf-m-warning,
.pf-v5-c-alert.pf-m-success {
    background-color: var(--tg-muted);
    border: 1px solid var(--tg-border);
    color: var(--tg-foreground);
    padding: 0.75rem 1rem;
    border-radius: calc(var(--tg-radius) - 2px);
    margin-bottom: 1rem;
}

.pf-v5-c-alert.pf-m-info .pf-v5-c-alert__title,
.pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__title,
.pf-v5-c-alert.pf-m-success .pf-v5-c-alert__title,
.pf-v5-c-alert.pf-m-info .kc-feedback-text,
.pf-v5-c-alert.pf-m-warning .kc-feedback-text,
.pf-v5-c-alert.pf-m-success .kc-feedback-text {
    color: var(--tg-foreground);
    font-weight: 600;
}

/* ---------- Screen-Reader-Only (für <caption>, versteckte Labels etc.) ---------- */
.tg-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Logo im Header (template.ftl rendert <img class="tg-logo">) ---------- */
.pf-v5-c-login__header,
.tg-header,
#kc-header,
#kc-header-wrapper,
.tg-brand,
.login-pf-page-header {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: none !important;
    background-image: none !important;
    border: none;
    padding: 0.5rem 0;
    min-height: 0;
}

.tg-logo {
    display: block;
    height: 144px;
    width: auto;
    max-width: 100%;
    user-select: none;
    margin-top: 0px;
    margin-bottom: 50px;
}

/* ---------- Customer Selection (custom Screen) ---------- */
/* Die Kundenauswahl-Tabelle ist mit festen Spaltenbreiten ~940px breiter als der
   Standard-Container (640px). Darum den Container nur fuer diesen Screen verbreitern,
   damit Card + Tabelle zusammen zentriert bleiben. */
.pf-v5-c-login__container:has(.tg-customer-table-wrapper),
#kc-container:has(.tg-customer-table-wrapper),
#kc-container-wrapper:has(.tg-customer-table-wrapper) {
    max-width: 1040px;
}

/* Fallback: passt die Tabelle nicht in die Card (z.B. Viewport < 1040px),
   scrollt der Wrapper horizontal statt rechts ueber die Card hinauszulaufen. */
.tg-customer-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.tg-customer-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    font-size: 0.875rem;
}

.tg-customer-table thead th {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--tg-border);
    font-weight: 700;
    color: var(--tg-foreground);
    background-color: var(--tg-muted);
}

.tg-customer-table tbody td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--tg-border);
    vertical-align: middle;
}

.tg-customer-table tbody tr:hover {
    background-color: var(--tg-primary-light);
}

.tg-customer-row-mobile {
    padding: 0.75rem;
    border: 1px solid var(--tg-border);
    border-radius: calc(var(--tg-radius) - 2px);
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.tg-customer-row-mobile:hover {
    background-color: var(--tg-primary-light);
}

.tg-customer-row-mobile .tg-customer-meta {
    color: var(--tg-muted-foreground);
    font-size: 0.8125rem;
}

.tg-submit-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--tg-primary);
    cursor: pointer;
    font: inherit;
    text-decoration: none;
}

.tg-submit-link:hover {
    text-decoration: underline;
    color: var(--tg-primary-dark);
}

.tg-filter-row {
    margin-bottom: 1rem;
}

.tg-align-left {
    text-align: left;
}

.tg-margin-top-10 {
    margin-top: 1rem;
}

/* Change-Password-Flow (login.ftl, via TransgourmetUsernamePasswordAuthenticator) */
.tg-change-password-subtitle {
    text-align: left;
    margin-bottom: 1rem;
}

.tg-button-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;
}

.tg-button-row > * {
    flex: 1 1 0;
    text-align: center;
}

/* Responsive: zeige Tabelle ab md, Karten-Liste darunter */
@media (max-width: 767px) {
    .tg-customer-table-wrapper { display: none; }
    .tg-customer-list-mobile { display: block; }
}

@media (min-width: 768px) {
    .tg-customer-table-wrapper { display: block; }
    .tg-customer-list-mobile { display: none; }
}

/* ---------- Mobile-Layout: kompaktere Abstände, kleineres Logo, kein Titel-Wrap ---------- */
@media (max-width: 767px) {
    /* Container: weniger Top-Padding, kleinerer Gap */
    .pf-v5-c-login__container,
    .login-pf-page .container,
    #kc-container,
    #kc-container-wrapper {
        gap: 0.5rem;
        padding: 1rem 0.5rem;
    }

    /* Card: kompakteres Padding */
    .pf-v5-c-login__main,
    .card-pf,
    #kc-content {
        padding: 1rem 1rem;
    }

    /* Header: kein extra Padding */
    .pf-v5-c-login__header,
    .tg-header,
    #kc-header,
    #kc-header-wrapper,
    .tg-brand,
    .login-pf-page-header {
        padding: 0;
    }

    /* main-body: horizontales Padding reduzieren, damit Inputs Platz haben */
    .pf-v5-c-login__main-body {
        padding-left: 0;
        padding-right: 0;
    }

    /* Logo kleiner & weniger Margin */
    .tg-logo {
        /*height: 80px;*/
        margin-top: 0;
        margin-bottom: 1rem;
    }

    /* Titel kleiner */
    #kc-page-title,
    .pf-v5-c-login__main-header h1,
    .pf-v5-c-login__main-header-title {
        font-size: 1.25rem;
    }

    .pf-v5-c-login__main-header {
        padding-left: 0;
        padding-right: 0;
    }
}