/* Palette from Kundendreher/Client/Shared/BaseLayoutComponent.cs. */
:root {
    --swg-yellow: #ffed00;
    --swg-background: #ffffff;
    --swg-surface: #f2f2f3;
    --swg-text: #000000;
    --swg-muted: #262626;
    --swg-border: #76777a;
    --swg-focus: #575000;
    --swg-error: #b42318;
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    :root {
        --swg-background: #212121;
        --swg-surface: #333333;
        --swg-text: #ffffff;
        --swg-muted: #d9d9d9;
        --swg-border: #a4a4a6;
        --swg-focus: #ffed00;
        --swg-error: #ffaaa3;
        color-scheme: dark;
    }
}
body.mail-layout {
    margin: 0; background: var(--swg-background); color: var(--swg-text);
    font-family: Roboto, "Segoe UI", Arial, sans-serif; line-height: 1.5;
}
.mail-layout > header { justify-content: space-between; align-items: flex-start; gap: 12px; padding: 8px 16px; }
.mail-layout > header form { flex: 0 0 auto; }
.mail-layout .mail-header-subject { flex: 1 1 auto; min-width: 0; margin: 3px 0 0; font-size: 1.1rem; line-height: 1.4; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.auth-logout-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 6px; border: 0; border-radius: 8px; background: transparent; color: var(--swg-muted); cursor: pointer; }
.auth-logout-icon:hover { background: var(--swg-surface); color: var(--swg-text); }
.auth-logout-icon:focus-visible { outline: 2px solid var(--swg-focus); outline-offset: 2px; }
.mail-layout h1, .mail-layout h2 { font-weight: 700; letter-spacing: -.03em; overflow-wrap: anywhere; }
.mail-layout .muted, .local-recognition-note, .mail-shell .cust-info .meta, .mail-shell .existing-mails .info .date { color: var(--swg-muted); }
.mail-layout > footer { color: var(--swg-muted) !important; border-color: var(--swg-border) !important; }
.mail-layout a { color: var(--swg-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.btn-swg, .mail-shell .btn-orange, .mail-shell .btn-crm {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; width: 100%; padding: 12px 20px; border: 1px solid transparent;
    border-radius: 12px; background: var(--swg-yellow); color: #000000;
    font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; box-shadow: none;
}
.btn-swg:hover, .mail-shell .btn-orange:hover, .mail-shell .btn-crm:hover { background: #eadd00; color: #000000; opacity: 1; }
.mail-layout a.btn-swg { color: #000000; }
.btn-swg:disabled, .mail-shell .btn-orange:disabled { background: #bfbfbf; color: #262626; opacity: 1; cursor: not-allowed; }
.mail-shell .btn-orange.loading { color: transparent; }
.mail-shell .btn-orange.loading .spinner { border-color: #000000; border-top-color: transparent; }
.btn-secondary-rounded {
    background: transparent; border: 1px solid var(--swg-border); color: var(--swg-text);
    border-radius: 12px; font: inherit; font-weight: 600; padding: 10px 16px; box-shadow: none;
}
.btn-secondary-rounded:hover { background: var(--swg-surface); }
.mail-shell { padding-top: 12px; }
.mail-shell .address-form, .mail-shell .company-card, .selected-customer-card, #contactSelectionContainer {
    --field-surface: var(--swg-surface);
    background: var(--swg-surface); color: var(--swg-text);
    border: 1px solid color-mix(in srgb, var(--swg-border) 40%, transparent);
    border-radius: 16px; padding: 20px; box-shadow: none;
}
.mail-shell .address-form h3 { border: none; padding-bottom: 0; font-weight: 600; }
.mail-shell .input, .mail-shell .address-form .input { background: var(--swg-surface); color: var(--swg-text); border-color: var(--swg-border); }
.mail-shell .cust-item:hover, .mail-shell .cust-item.selected, .mail-shell .mail-item:hover { background: var(--swg-surface); }
.mail-shell .cust-item.selected { outline: 2px solid var(--swg-focus); outline-offset: -2px; }
.mail-shell .customer-results, .mail-shell .existing-mails .mail-item { border-color: var(--swg-border); border-radius: 12px; }
.mail-shell .row { margin-left: 0; margin-right: 0; }
.mail-shell .row > * { padding-left: 0; padding-right: 0; }
.mail-shell .grid-2 { margin: 0 0 14px !important; min-width: 0; }
.floating-field { position: relative; margin: 14px 0 18px; min-width: 0; width: 100%; --field-surface: var(--swg-surface); }
.floating-field > .input, .mail-shell .floating-field > .input {
    width: 100%; min-height: 56px; padding: 17px 14px 13px; border: 1px solid var(--swg-border);
    border-radius: 10px; background: var(--field-surface); color: var(--swg-text); font: inherit;
}
.floating-field > label {
    position: absolute; left: 10px; top: 28px; transform: translateY(-50%);
    padding: 0 5px; margin: 0; background: var(--field-surface); color: var(--swg-muted);
    font-size: 1rem; line-height: 1.2; max-width: calc(100% - 24px); pointer-events: none;
    transition: top .15s ease, font-size .15s ease;
}
.floating-field > input:focus ~ label, .floating-field > input:not(:placeholder-shown) ~ label,
.floating-field > textarea:focus ~ label, .floating-field > textarea:not(:placeholder-shown) ~ label,
.floating-field > select ~ label { top: 0; font-size: .8rem; }
.floating-field > .input:focus { border-color: var(--swg-focus); outline: 1px solid var(--swg-focus); }
.floating-field:focus-within > label { color: var(--swg-focus); }
.floating-field > .input.invalid { border-color: var(--swg-error); }
.floating-field > .input.invalid ~ label, .error-text { color: var(--swg-error); }
.mail-shell .grid-2 > .floating-field, .mail-shell .grid-2 > .input-group { flex: 1 1 0; min-width: 0; }
.mail-shell .grid-2 .floating-field { margin-bottom: 0; }
.mail-shell button:focus-visible, .mail-shell .input:focus-visible, .recognition-candidate:focus-visible, .cust-item:focus-visible,
.btn-swg:focus-visible, .btn-secondary-rounded:focus-visible { outline: 2px solid var(--swg-focus); outline-offset: 3px; }
.auth-card { max-width: 420px; margin: clamp(24px, 9vh, 90px) auto 32px; padding: 28px; background: var(--swg-surface); border-radius: 20px; }
.auth-card h1 { font-size: 1.8rem; margin: 20px 0 12px; }
.auth-card p { margin-bottom: 20px; }
.auth-required { text-align: center; }
.auth-lock { font-size: 2.8rem; margin-top: 28px; }
.recognition-status { padding: 12px; border-radius: 10px; background: color-mix(in srgb, var(--swg-border) 12%, transparent); font-size: .9rem; }
#twoFactorSetupKey { display: block; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--swg-text); user-select: all; }
[hidden] { display: none !important; }
@media (max-width: 380px) {
    .auth-card { padding: 22px; }
    .mail-shell .address-form, .mail-shell .company-card, #contactSelectionContainer { padding: 16px; }
    .floating-field > label { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) { .floating-field > label { transition: none; } }