html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
}

/* Floating labels rely on Bootstrap's default transparent placeholder —
   the label itself acts as the placeholder while the input is empty.
   Do not make ::placeholder visible here or it renders on top of the label. */

/* Centered auth card (login/register). Fills small screens edge to edge and
   grows up to a comfortable reading width on desktop. */
.login-card {
    width: 100%;
    max-width: 32rem;
}

/* =========================================================================
   DESIGN MODERNIZATION — split login (mirrors the frontend app.css tokens).
   The AuthServer has its own CSS pipeline; these --app-* tokens are kept in
   sync with the frontend so the login matches the app. --bs-primary already
   matches (#2563eb).
   ========================================================================= */
:root {
    --app-bg: oklch(0.98 0.004 255);
    --app-surface: oklch(1 0 0);
    --app-surface-2: oklch(0.973 0.004 255);
    --app-border: oklch(0.915 0.006 255);
    --app-border-strong: oklch(0.86 0.008 255);
    --app-text: oklch(0.24 0.02 265);
    --app-text-muted: oklch(0.52 0.02 265);
    --app-text-subtle: oklch(0.66 0.015 265);
    --app-accent: oklch(0.55 0.2 264);
    --app-accent-strong: oklch(0.48 0.21 264);
    --app-accent-soft: oklch(0.955 0.03 264);
}

/* Two-pane split — fixed so it fills the viewport regardless of the layout's
   .container wrapper. Below 900px it collapses to just the form pane. */
.login-split {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--app-bg);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Left brand pane */
.login-brand {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem 3.25rem;
    color: #fff;
    background: linear-gradient(150deg, var(--app-accent-strong), var(--app-accent));
}
.login-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 15%, rgba(255, 255, 255, .16), transparent 45%),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 22px);
    pointer-events: none;
}
.login-brand > * { position: relative; }
.login-brand-logo {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: -.02em;
}
.login-brand-logo .mark {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 11px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .28);
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-brand h1 {
    margin: 0;
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.08;
    max-width: 26rem;
}
.login-brand .lead-copy {
    margin: 1.1rem 0 0;
    font-size: .95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
    max-width: 28rem;
}
.login-features {
    list-style: none;
    padding: 0;
    margin: 1.75rem 0 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.login-features li {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-size: .9rem;
    font-weight: 500;
}
.login-features .fic {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 7px;
    background: rgba(255, 255, 255, .18);
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-brand-foot {
    font-size: .75rem;
    color: rgba(255, 255, 255, .6);
}

/* Right form pane */
.login-form-pane {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem;
    overflow-y: auto;
}
.login-form-inner { width: 100%; max-width: 25rem; }
.login-form-inner h2 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.02em;
}
.login-sub {
    margin: .45rem 0 1.75rem;
    font-size: .9rem;
    color: var(--app-text-muted);
}
.login-form-pane .form-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--app-text-muted);
    margin-bottom: .4rem;
}
.login-form-pane .form-control {
    height: 2.75rem;
    border-radius: 11px;
    border: 1px solid var(--app-border);
    background: var(--app-surface-2);
    font-size: .9rem;
}
.login-form-pane .form-control:focus {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 .2rem var(--app-accent-soft);
}
.login-form-pane .btn-primary {
    height: 2.85rem;
    border-radius: 11px;
    font-weight: 700;
    font-size: .95rem;
    background: var(--app-accent);
    border-color: var(--app-accent);
    box-shadow: 0 8px 20px -8px var(--app-accent);
}
.login-form-pane .btn-primary:hover {
    background: var(--app-accent-strong);
    border-color: var(--app-accent-strong);
}
.login-form-pane .btn-outline-secondary {
    height: 2.75rem;
    border-radius: 11px;
    font-weight: 600;
    font-size: .85rem;
    border-color: var(--app-border);
    color: var(--app-text);
    background: var(--app-surface);
}
.login-form-pane .btn-outline-secondary:hover {
    border-color: var(--app-border-strong);
    background: var(--app-surface-2);
    color: var(--app-text);
}
.login-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.5rem 0;
}
.login-divider::before,
.login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--app-border);
}
.login-divider span {
    font-size: .75rem;
    color: var(--app-text-subtle);
}

@media (max-width: 900px) {
    .login-split { grid-template-columns: 1fr; }
    .login-brand { display: none; }
}