/* ──────────────────────────────────────────────────────────────
   Auth pages (login / forgot-password / reset-password / status) —
   split brand/form layout. Layered ON TOP of Tabler: keeps Tabler
   form-control/btn/alert at the core, adds the two-panel composition
   + elegant serif accents. Scoped under .auth-split so nothing leaks
   into the rest of the app.
   Design ported to match the platform.peppolnavigator.eu auth look.
   ────────────────────────────────────────────────────────────── */

/* Palette + font — overrides Tabler defaults for auth pages only.
   Loaded via fragments/auth-head so these :root vars never reach the app.

   Everything a brand can change is a custom property with its stock value as the fallback, and
   BrandingView.authCssVariables() emits nothing but overrides of these names in a later <style>.
   That is the whole contract between the two files: no rule is ever restated server-side, so the
   sign-in page cannot drift away from the brand or the brand away from the page. */
:root {
    --tblr-font-sans-serif:  'Inter var', 'Inter', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
    --tblr-body-font-family: var(--tblr-font-sans-serif);
    --tblr-primary:          #2E4BC9;
    --tblr-primary-rgb:      46, 75, 201;
    --tblr-primary-lt:       #E9EDFB;
    --tblr-primary-darken:   #2540AF;
    --tblr-primary-fg:       #ffffff;
    --tblr-link-color:       #2E4BC9;
    --tblr-link-hover-color: #2540AF;

    /* Brand panel and form side. Kept as the two ends of a gradient rather than one colour so a
       flat brand still reads as a designed panel instead of a rectangle of paint. */
    --auth-panel-bg:         #2A41AE;
    --auth-panel-bg-end:     #142270;
    --auth-panel-text:       #ffffff;
    --auth-panel-text-rgb:   255, 255, 255;
    --auth-form-bg:          var(--tblr-body-bg);
    /* An uploaded photograph, or `none`. Everything decorative on the panel keys off this. */
    --auth-panel-image:      none;

    /* Buttons, fields and text on the form side. Each defaults to the accent or to Tabler's stock
       value — declared on the same :root as the branded --tblr-primary, so a brand that sets only the
       accent still re-colours all of them. The hex defaults mirror BrandingColorCatalog. */
    --auth-btn-bg:           var(--tblr-primary);
    --auth-btn-hover-bg:     var(--tblr-primary-darken);
    --auth-btn-text:         var(--tblr-primary-fg);
    --auth-field-bg:         #ffffff;
    --auth-field-border:     #e5e7eb;
    --auth-field-text:       #374151;
    --auth-field-icon:       #6b7280;
    --auth-field-placeholder: #9ca3af;
    --auth-field-focus:      var(--tblr-primary);
    --auth-field-focus-rgb:  var(--tblr-primary-rgb);
    --auth-heading:          #374151;
    --auth-label:            #374151;
    --auth-text:             #6b7280;
    --auth-link:             var(--tblr-primary);
}
body { font-feature-settings: "cv03", "cv04", "cv11"; }

.auth-split {
    flex: 1 0 auto;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    min-height: 0;
}

/* ── Brand panel (left) ─────────────────────────────────────── */
.auth-brand {
    position: relative;
    overflow: hidden;
    color: var(--auth-panel-text);
    background: var(--auth-panel-bg);
    background: linear-gradient(160deg, var(--auth-panel-bg) 0%, var(--auth-panel-bg-end) 100%);
    display: flex;
    flex-direction: column;
    padding: 48px 56px;
}
.auth-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 70% 80%, rgba(var(--auth-panel-text-rgb), .07), transparent 60%);
    pointer-events: none;
    z-index: 1;
}

/* An uploaded background sits under the panel's own colour rather than replacing it: a photograph
   chosen for its looks is not a photograph chosen for its contrast, and the brand name and tagline
   have to stay readable on whatever somebody uploads. The colour is the floor, the photo is texture. */
.auth-brand-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--auth-panel-image);
    background-size: cover;
    background-position: center;
    opacity: .38;
    pointer-events: none;
}

.auth-brand-head {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 14px;
}
.auth-brand-mark {
    width: 46px;
    height: 46px;
    border-radius: 11px;
    background: rgba(var(--auth-panel-text-rgb), .14);
    box-shadow: inset 0 1px 0 rgba(var(--auth-panel-text-rgb), .22);
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-brand-mark i { font-size: 1.625rem; line-height: 1; color: var(--auth-panel-text); }
/* An uploaded brand logo sits in the same slot as the glyph. Bounded on both axes so a wide
   wordmark and a square mark each fit the tile without distorting. */
.auth-brand-logo {
    max-height: 1.75rem;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    display: block;
}
.auth-brand-name { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }

.auth-brand-body {
    position: relative;
    z-index: 2;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.auth-brand-quote {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 500;
    font-size: 2.125rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    max-width: 16em;
    color: var(--auth-panel-text);
}
.auth-brand-sub {
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    color: rgba(var(--auth-panel-text-rgb), .6);
    text-transform: uppercase;
    font-weight: 600;
}

/* Decorative tile field */
.auth-tiles {
    position: absolute;
    top: 13%;
    right: -40px;
    width: 64%;
    max-width: 440px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
    transform: rotate(-6deg);
    pointer-events: none;
    z-index: 1;
}
.auth-tiles i {
    aspect-ratio: 1;
    border-radius: 5px;
    background: rgba(var(--auth-panel-text-rgb), .06);
    border: 1px solid rgba(var(--auth-panel-text-rgb), .05);
}
.auth-tiles i.on    { background: rgba(var(--auth-panel-text-rgb), .26); border-color: rgba(var(--auth-panel-text-rgb), .34); }
.auth-tiles i.pulse { background: rgba(var(--auth-panel-text-rgb), .20); border-color: rgba(var(--auth-panel-text-rgb), .30); animation: authTilePulse 3.6s ease-in-out infinite; }
@keyframes authTilePulse {
    0%, 100% { background: rgba(var(--auth-panel-text-rgb), .12); }
    50%      { background: rgba(var(--auth-panel-text-rgb), .28); }
}

/* A photograph already carries the eye; the tile field on top of one is noise. */
.auth-brand.has-photo .auth-tiles { display: none; }

/* ── Form panel (right) ─────────────────────────────────────── */
.auth-form-side {
    display: flex;
    flex-direction: column;
    padding: 28px 24px;
    background: var(--auth-form-bg);
}
.auth-form-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--auth-text);
}
.auth-form-head .ti { font-size: 0.9375rem; }

.auth-form-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
}
.auth-card-tight { width: 100%; max-width: 420px; }
.auth-card-tight h1 {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.12;
    margin: 0 0 10px;
    color: var(--auth-heading);
}
.auth-card-tight h1 em {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 500;
}
.auth-card-tight .auth-sub {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--auth-text);
    margin: 0 0 26px;
}

/* Tabler form controls, refined for this layout */
.auth-card-tight .form-label { font-size: 0.78rem; font-weight: 600; }
.auth-card-tight .form-control,
.auth-card-tight .input-group {
    border-radius: 9px;
}
.auth-card-tight .form-control { height: 44px; }
.auth-card-tight .input-group .form-control { height: 42px; }

/* ── Branded controls ───────────────────────────────────────── */
/* Tabler hard-codes some of these (the #83b7e8 focus border, a link colour read from a literal
   --tblr-link-color-rgb triple), so they are restated here against the --auth-* variables instead of
   relying on --tblr-primary reaching them. Scoped to .auth-split: every auth page, nothing else. */
.auth-split .form-label,
.auth-split .form-check-label { color: var(--auth-label); }
.auth-split .form-label-description,
.auth-split .form-hint,
.auth-split .text-secondary { color: var(--auth-text) !important; }

/* :where() keeps this at (0,1,1) so the footer and language switcher, which stay muted, still win. */
.auth-split a:where(:not(.btn, .btn-close, .link-secondary)) { color: var(--auth-link); }
.auth-split a:where(:not(.btn, .btn-close, .link-secondary)):hover,
.auth-split a:where(:not(.btn, .btn-close, .link-secondary)):focus-visible {
    color: color-mix(in srgb, var(--auth-link) 80%, #000);
    text-decoration: underline;
}

.auth-split .form-control {
    background-color: var(--auth-field-bg);
    border-color: var(--auth-field-border);
    color: var(--auth-field-text);
}
.auth-split .form-control::placeholder { color: var(--auth-field-placeholder); }
.auth-split .input-icon-addon,
.auth-split .input-group-flat .input-group-text {
    color: var(--auth-field-icon);
}
.auth-split .input-group-flat .input-group-text {
    background: var(--auth-field-bg);
    border-color: var(--auth-field-border);
}
.auth-split .input-group-text .link-secondary { color: var(--auth-field-icon) !important; }
.auth-split .input-group-text .link-secondary:hover { color: var(--auth-field-text) !important; }

.auth-split .form-control:focus,
.auth-split .input-group-flat:focus-within {
    background-color: var(--auth-field-bg);
    color: var(--auth-field-text);
    border-color: var(--auth-field-focus);
    box-shadow: 0 0 0 3px rgba(var(--auth-field-focus-rgb), .18);
}
/* Inside a flat group the group wears the ring; the control and its addons only change border. */
.auth-split .input-group-flat .form-control:focus { box-shadow: none; }
.auth-split .input-group-flat:focus-within .form-control,
.auth-split .input-group-flat:focus-within .input-group-text {
    border-color: var(--auth-field-focus) !important;
}

.auth-split .form-check-input {
    background-color: var(--auth-field-bg);
    border-color: var(--auth-field-border);
}
.auth-split .form-check-input:checked {
    background-color: var(--auth-field-focus);
    border-color: var(--auth-field-focus);
}
.auth-split .form-check-input:focus {
    border-color: var(--auth-field-focus);
    box-shadow: 0 0 0 3px rgba(var(--auth-field-focus-rgb), .18);
}

.auth-split .btn-primary {
    --tblr-btn-bg: var(--auth-btn-bg);
    --tblr-btn-color: var(--auth-btn-text);
    --tblr-btn-hover-bg: var(--auth-btn-hover-bg);
    --tblr-btn-hover-color: var(--auth-btn-text);
    --tblr-btn-active-bg: var(--auth-btn-hover-bg);
    --tblr-btn-active-color: var(--auth-btn-text);
    --tblr-btn-disabled-bg: var(--auth-btn-bg);
    --tblr-btn-disabled-color: var(--auth-btn-text);
}

.auth-btn-lg {
    height: 46px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9375rem;
}

/* ── Status pages (account-locked / session-expired) ─────────── */
.auth-status-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    margin-bottom: 20px;
}
.auth-status-icon.is-danger { background: rgba(214, 57, 57, .12); color: #d63939; }
.auth-status-icon.is-warning { background: rgba(245, 159, 0, .14); color: #f59f00; }
/* Signing out is not a failure, so the signed-out page gets the accent rather than a warning hue. */
.auth-status-icon.is-success { background: color-mix(in srgb, var(--auth-btn-bg) 12%, transparent); color: var(--auth-btn-bg); }

/* ── Language switcher (optional, matches peppol) ───────────── */
.auth-lang-switcher {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--auth-text);
}
.auth-lang-switcher a {
    color: var(--auth-text);
    text-decoration: none;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.auth-lang-switcher a:hover,
.auth-lang-switcher a:focus-visible {
    color: var(--auth-label);
    background: var(--auth-field-border);
}
.auth-lang-switcher a.active {
    color: var(--auth-link);
    background: color-mix(in srgb, var(--auth-link) 8%, transparent);
}
.auth-lang-switcher span { opacity: .4; }

/* ── Sign-in notice ─────────────────────────────────────────── */
/* Whatever a brand puts above the credential fields — an authorised-use statement, a maintenance
   window. Quiet by design: it is read once and must not compete with the form. */
.auth-notice {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    margin: 0 0 20px;
    border: 1px solid var(--auth-field-border);
    border-left: 3px solid var(--auth-field-focus);
    border-radius: 8px;
    background: rgba(var(--auth-field-focus-rgb), .05);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--auth-label);
}
.auth-notice .ti { flex: none; font-size: 1rem; color: var(--auth-field-focus); margin-top: 1px; }

/* ── Footer ─────────────────────────────────────────────────── */
/* The same copyright and links the application shows, on the pages a visitor sees first. Sits at
   the bottom of the form side, not the brand panel, so it survives the centred layout and the
   narrow breakpoint where the panel is gone. */
.auth-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 16px;
    padding-top: 16px;
    font-size: 0.75rem;
    color: var(--auth-text);
    text-align: center;
}
.auth-footer a {
    color: var(--auth-text);
    text-decoration: none;
}
.auth-footer a:hover,
.auth-footer a:focus-visible {
    color: var(--auth-link);
    text-decoration: underline;
}
.auth-footer-sep { opacity: .4; }

/* ── Centred layout ─────────────────────────────────────────── */
/* The brand panel is not rendered at all in this layout, so there is one column and the form is
   centred in it. Chosen by a brand that wants a plain corporate sign-in rather than a poster. */
.auth-split.is-centered { grid-template-columns: 1fr; }
.auth-split.is-centered .auth-form-side { align-items: stretch; }
.auth-split.is-centered .auth-form-head,
.auth-split.is-centered .auth-footer { max-width: 420px; width: 100%; margin-inline: auto; }

/* ── Responsive: single column, hide brand panel ────────────── */
@media (max-width: 992px) {
    .auth-split { grid-template-columns: 1fr; }
    .auth-brand { display: none; }
    .auth-form-head, .auth-footer { max-width: 420px; width: 100%; margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-tiles i.pulse {
        animation: none;
        background: rgba(var(--auth-panel-text-rgb), .20);
    }
}