/*
 * NeonPOS brand skin for the tenant login / register pages.
 * Loaded after auth.css; palette matches neonpos-theme.css.
 */
.login-page,
.register-page,
.dark-mode .login-page,
.dark-mode .register-page {
    position: relative;
    overflow: hidden;
    background-color: #0e0f13;
    background-image: none;
    font-family: 'Inter', 'Nunito', sans-serif;
}
.login-page::before,
.register-page::before {
    content: '';
    position: absolute;
    right: -8%;
    top: 6%;
    width: 52%;
    max-width: 620px;
    aspect-ratio: 1210 / 927;
    background: url('../images/landing/logo-stacked-bg.webp') center / contain no-repeat;
    filter: brightness(0) invert(1);
    opacity: 0.05;
    pointer-events: none;
}
.login-page .container,
.register-page .container { position: relative; z-index: 1; }

.login-page .form-inner,
.register-page .form-inner,
.dark-mode .login-page .form-inner,
.dark-mode .register-page .form-inner {
    border-radius: 20px;
    padding: 48px 36px 40px;
    background: #fff;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
}
.dark-mode .login-page .form-inner,
.dark-mode .register-page .form-inner { background: #1b1d25; }

.login-page .logo img,
.register-page .logo img {
    /* Fixed box + contain: tenant logos of any ratio keep their proportions and never shift the layout. */
    width: 200px;
    height: 56px;
    max-width: 100%;
    object-fit: contain;
}
.login-page .logo span,
.register-page .logo span {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 700;
    color: #0e0f13;
}

/* Inputs */
input.input-material {
    border: 0;
    border-bottom: 2px solid #e7e8ea;
    border-radius: 0;
    font-family: 'Inter', sans-serif;
    color: #0e0f13;
    transition: border-color .15s;
}
.dark-mode input.input-material { color: #fafaf8; border-bottom-color: rgba(255, 255, 255, 0.18); }
input.input-material~label { color: #6b7380; font-weight: 400; }
input.input-material:focus { border-bottom-color: #374f8b; }
input.input-material~label.active { color: #374f8b; font-weight: 500; }

/* Primary button: navy with brand yellow focus */
.login-page .btn-primary,
.register-page .btn-primary {
    background-color: #374f8b;
    border-color: #374f8b;
    color: #fff;
    border-radius: 10px;
    padding: 11px 16px;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 600;
    transition: background-color .15s, transform .15s, box-shadow .15s;
}
.login-page .btn-primary:hover,
.register-page .btn-primary:hover {
    background-color: #0f1f5c;
    border-color: #0f1f5c;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(55, 79, 139, 0.3);
}
.login-page .btn-primary:focus-visible,
.register-page .btn-primary:focus-visible,
.login-page a:focus-visible,
.register-page a:focus-visible,
input.input-material:focus-visible {
    outline: 3px solid #ffc55a;
    outline-offset: 2px;
}

/* Links, helper text */
.login-page a.forgot-pass,
.login-page a.signup,
.register-page a.forgot-pass,
.register-page a.signup {
    color: #374f8b;
    font-weight: 500;
}
.login-page a.forgot-pass:hover,
.login-page a.signup:hover,
.register-page a.forgot-pass:hover,
.register-page a.signup:hover { color: #0f1f5c; text-decoration: underline; }
.login-page p,
.register-page p { color: #fe6c3d; font-weight: 500; }
.login-page .copyrights p,
.register-page .copyrights p { color: rgba(250, 250, 248, 0.55); }
.login-page .copyrights .external,
.register-page .copyrights .external { color: #ffc55a; }

@media (max-width: 576px) {
    .login-page .form-inner,
    .register-page .form-inner { padding: 40px 24px 32px; border-radius: 16px; }
    .login-page::before,
    .register-page::before { width: 90%; right: -30%; }
}
@media (prefers-reduced-motion: reduce) {
    .login-page .btn-primary,
    .register-page .btn-primary { transition: none; }
}