/* ============================================================
   Auth Split-Panel Layout
   Left: Gradient branding panel  |  Right: Form panel
   ============================================================ */

/* Container: full viewport, side by side */
.auth-split-container {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* On mobile with banner visible, reduce min-height */
@media (max-width: 767.98px) {
    .auth-split-container {
        min-height: calc(100vh - 60px);
    }
}

/* ----------------------------------------------------------
   LEFT: Branding panel with gradient
   ---------------------------------------------------------- */
.auth-brand-panel {
    display: none;
    /* hidden on mobile, shown on md+ */
    flex: 0 0 45%;
    max-width: 45%;
    background: linear-gradient(135deg, var(--system-color, #00aa20) 0%, var(--system-color-hover, #91ce00) 100%);
    position: relative;
    overflow: hidden;
}

/* Subtle decorative circles */
.auth-brand-panel::before,
.auth-brand-panel::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
}

.auth-brand-panel::before {
    width: 300px;
    height: 300px;
    top: -60px;
    left: -60px;
}

.auth-brand-panel::after {
    width: 200px;
    height: 200px;
    bottom: -40px;
    right: -40px;
}

/* Content inside the brand panel */
.auth-brand-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 3rem 2rem;
    width: 100%;
    text-align: center;
    color: #fff;
}

.auth-brand-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-bottom: 1.5rem;
    border-radius: 0.5rem;
    drop-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.auth-brand-name {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: #fff;
    letter-spacing: -0.02em;
}

.auth-brand-slogan {
    font-size: 1.05rem;
    font-weight: 400;
    opacity: 0.9;
    max-width: 320px;
    line-height: 1.5;
    color: #fff;
    margin: 0;
}

/* ----------------------------------------------------------
   RIGHT: Form panel
   ---------------------------------------------------------- */
.auth-form-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    min-height: 100vh;
    overflow-y: auto;
    background-color: var(--phoenix-gray-100, #eff2f6);
}

.auth-form-wrapper {
    width: 100%;
    max-width: 440px;
}

/* ----------------------------------------------------------
   Mobile brand banner (visible < md)
   ---------------------------------------------------------- */
.auth-brand-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, var(--system-color, #00aa20) 0%, var(--system-color-hover, #91ce00) 100%);
    width: 100%;
}

.auth-brand-banner .auth-banner-logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 0.25rem;
}

.auth-brand-banner .auth-banner-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

/* ----------------------------------------------------------
   Auth form card (replaces old auth-card inside layout)
   ---------------------------------------------------------- */
.auth-form-card {
    background-color: var(--phoenix-emphasis-bg, #fff);
    border: 1px solid var(--phoenix-border-color, rgba(0, 0, 0, 0.08));
    border-radius: 0.75rem;
    padding: 2rem;
}

[data-bs-theme="dark"] .auth-form-card {
    background-color: #141824;
    border-color: rgba(255, 255, 255, 0.08);
}

/* Form content max-width control */
.auth-form-card .auth-form-content {
    max-width: 100%;
    margin: 0 auto;
}

/* ----------------------------------------------------------
   Responsive: md breakpoint (768px)
   ---------------------------------------------------------- */
@media (min-width: 768px) {
    .auth-brand-panel {
        display: flex;
    }

    .auth-brand-banner {
        display: none;
    }

    .auth-form-panel {
        padding: 2rem 3rem;
    }
}

/* ----------------------------------------------------------
   Responsive: lg breakpoint (992px)
   ---------------------------------------------------------- */
@media (min-width: 992px) {
    .auth-brand-panel {
        flex: 0 0 42%;
        max-width: 42%;
    }

    .auth-form-panel {
        padding: 2rem 4rem;
    }

    .auth-brand-logo {
        width: 96px;
        height: 96px;
    }

    .auth-brand-name {
        font-size: 2rem;
    }
}

/* ----------------------------------------------------------
   Responsive: xl breakpoint (1200px+)
   ---------------------------------------------------------- */
@media (min-width: 1200px) {
    .auth-form-wrapper {
        max-width: 460px;
    }

    .auth-brand-content {
        padding: 4rem 3rem;
    }

    .auth-brand-slogan {
        max-width: 360px;
        font-size: 1.1rem;
    }
}

/* ============================================================
   Account Switcher (Login Page)
   ============================================================ */
.account-item {
    transition: background-color 0.15s ease;
}

.account-item:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.account-item {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Always-visible Remove-Button (vorher hover-only — funktioniert auf Touch
   nicht). Dezent gestylt, wird auf Hover/Active prominenter. */
.account-item .account-remove {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    opacity: 0.55;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.account-item .account-remove:hover,
.account-item .account-remove:focus,
.account-item .account-remove:active {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.06);
}

[data-bs-theme=dark] .account-item .account-remove:hover,
[data-bs-theme=dark] .account-item .account-remove:focus,
[data-bs-theme=dark] .account-item .account-remove:active {
    background-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme=dark] .account-item:hover {
    background-color: rgba(255, 255, 255, 0.06);
}

[data-bs-theme=dark] .account-item {
    background-color: rgba(255, 255, 255, 0.04);
}

/* ----------------------------------------------------------
   Wide Logo (Auth) — analog zur Navbar.
   Wird angezeigt wenn ein Wide-Logo hochgeladen wurde, ersetzt dann
   das Square-Logo + System-Name-Text. Light/Dark per [data-bs-theme].
   ---------------------------------------------------------- */
.auth-wide-logo            { display: none; }
.auth-wide-logo-light      { display: inline-block; }
.auth-wide-logo-dark       { display: none; }

[data-bs-theme="dark"] .auth-wide-logo-light { display: none; }
[data-bs-theme="dark"] .auth-wide-logo-dark  { display: inline-block; }

/* Größe im Brand-Panel (Desktop, ≥768px) */
.auth-brand-wide {
  max-width: 280px;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin-bottom: 1.25rem;
}

/* Größe im Mobile-Banner (<768px) */
.auth-banner-wide {
  max-width: 220px;
  max-height: 40px;
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (min-width: 992px) {
  .auth-brand-wide {
    max-width: 360px;
    max-height: 100px;
  }
}