/* ═══════════════════════════════════════════════════════════════════════
   SyncSoft Phantom Aurora — login.css
   (Хуучин гоё дизайн + 3 засвар нэмсэн)

   ЗАСВАР 1 – Form position  : --lp-justify / --lp-pad-x  CSS variable
   ЗАСВАР 2 – Background img : [data-bg="image"] selector + --lp-bg-image var
   ЗАСВАР 3 – Form color     : --lp-form-bg  CSS variable → .custom-login-box
   ═══════════════════════════════════════════════════════════════════════ */

/* ── CSS variable defaults (QWeb <style>-аас override болно) ─────────── */
:root {
    --lp-form-bg:  rgba(13, 16, 23, 0.82);
    --lp-justify:  center;
    --lp-pad-x:    1.5rem;
    --lp-bg-image: none;
}

/* ════════════════════════════════════════════════════════════════════════
   BASE RESET
   ════════════════════════════════════════════════════════════════════════ */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background-color: #0c081e;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #f7fafc;
    overflow: hidden;
}

/* ════════════════════════════════════════════════════════════════════════
   MAIN CONTAINER
   ЗАСВАР 1: justify-content нь --lp-justify variable-аас
   ЗАСВАР 2: [data-bg="image"] selector-оор bg image switch
   ════════════════════════════════════════════════════════════════════════ */
.custom-login-container {
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;                  /* vertical */
    align-items: var(--lp-justify, center);   /* ← ЗАСВАР 1: horizontal */
    position: relative;
    overflow: hidden;
    padding: 20px var(--lp-pad-x, 1.5rem);   /* ← ЗАСВАР 1: side padding */
    box-sizing: border-box;

    /* Default: animated gradient */
    background: linear-gradient(-45deg,
        #090514, #12092b, #2b1055,
        #6366f1, #a855f7, #ec4899,
        #14b8a6, #0ea5e9, #1e1b4b);
    background-size: 400% 400%;
    animation: geminiGradientFlow 15s ease infinite;
}

/* ── ЗАСВАР 2: Background Image mode ──────────────────────────────────
   data-bg="image" байх үед gradient animation-г зогсооно,
   --lp-bg-image variable (inline style-аас орж ирсэн)-г тавина.       */
.custom-login-container[data-bg="image"] {
    background-image: var(--lp-bg-image) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed;
    animation: none;          /* gradient animation унтраана */
}
/* Image mode-д ::before / ::after blob-уудыг нуугаад overlay-г тохируулна */
.custom-login-container[data-bg="image"]::before,
.custom-login-container[data-bg="image"]::after {
    display: none;
}
.custom-login-container[data-bg="image"] .login-dark-overlay {
    background: radial-gradient(
        circle at 50% 50%,
        rgba(12, 8, 30, 0.15) 0%,
        rgba(12, 8, 30, 0.55) 90%
    );
}

@keyframes geminiGradientFlow {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}

/* ── Glowing blob orbs (gradient mode only) ──────────────────────────── */
.custom-login-container::before {
    content: '';
    position: absolute;
    width: 750px; height: 750px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(14, 165, 233, 0.4) 0%,
        rgba(99, 102, 241, 0.15) 50%,
        rgba(99, 102, 241, 0) 70%);
    top: -15%; left: -15%;
    filter: blur(120px);
    z-index: 1;
    animation: floatOrb1 20s infinite alternate ease-in-out;
    pointer-events: none;
}
.custom-login-container::after {
    content: '';
    position: absolute;
    width: 750px; height: 750px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(236, 72, 153, 0.35) 0%,
        rgba(168, 85, 247, 0.15) 50%,
        rgba(168, 85, 247, 0) 70%);
    bottom: -15%; right: -15%;
    filter: blur(120px);
    z-index: 1;
    animation: floatOrb2 20s infinite alternate ease-in-out;
    pointer-events: none;
}
@keyframes floatOrb1 {
    0%   { transform: translate(0,0) scale(1) rotate(0deg); }
    50%  { transform: translate(120px,80px) scale(1.2) rotate(180deg); }
    100% { transform: translate(-60px,160px) scale(0.85) rotate(360deg); }
}
@keyframes floatOrb2 {
    0%   { transform: translate(0,0) scale(1) rotate(360deg); }
    50%  { transform: translate(-140px,-100px) scale(1.15) rotate(180deg); }
    100% { transform: translate(100px,-140px) scale(1.25) rotate(0deg); }
}

/* ── Dark overlay ────────────────────────────────────────────────────── */
.login-dark-overlay {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background: radial-gradient(
        circle at 50% 50%,
        rgba(12, 8, 30, 0.10) 0%,
        rgba(12, 8, 30, 0.45) 90%);
    z-index: 2;
    pointer-events: none;
}

/* ── Noise texture ───────────────────────────────────────────────────── */
.login-noise {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0.035;
    background-image:
        radial-gradient(rgba(255,255,255,0.15) 1px, transparent 0),
        radial-gradient(rgba(255,255,255,0.15) 1px, transparent 0);
    background-size: 8px 8px;
    background-position: 0 0, 4px 4px;
    z-index: 3;
    pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════════
   LOGIN CARD
   ЗАСВАР 3: background нь --lp-form-bg CSS variable-аас авна
   ════════════════════════════════════════════════════════════════════════ */
.custom-login-box {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 440px;

    /* ← ЗАСВАР 3: Settings-ээс тохируулсан өнгө */
    background: var(--lp-form-bg, rgba(13, 16, 23, 0.82));

    border-radius: 24px;
    padding: 44px 40px;
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.7),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    box-sizing: border-box;
    animation: cardEntrance 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    overflow: hidden;
}

@keyframes cardEntrance {
    0%   { opacity: 0; transform: translateY(30px) scale(0.97); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Neon rotating gradient border */
.custom-login-box::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1.5px;
    background: linear-gradient(135deg, #ff007f 0%, #7f00ff 30%, #00f0ff 65%, #ff007f 100%);
    background-size: 300% 300%;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    animation: moveBorder 6s linear infinite;
    z-index: 2;
}
@keyframes moveBorder {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}

/* ════════════════════════════════════════════════════════════════════════
   LOGO
   ════════════════════════════════════════════════════════════════════════ */
.logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
}
.logo-svg {
    width: 52px; height: 52px;
    filter: drop-shadow(0 0 12px rgba(127,0,255,0.6));
    animation: pulseLogo 3s ease-in-out infinite alternate;
}
@keyframes pulseLogo {
    0%   { transform: scale(1);    filter: drop-shadow(0 0 8px rgba(127,0,255,0.4)); }
    100% { transform: scale(1.05); filter: drop-shadow(0 0 16px rgba(0,240,255,0.7)); }
}
.logo-text {
    font-size: 26px; font-weight: 800; letter-spacing: 0.18em;
    background: linear-gradient(135deg, #ffffff 30%, rgba(255,255,255,0.45) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    margin-top: 10px; font-family: 'Inter', system-ui, sans-serif;
}

.logo,
.custom-login-box img[alt="Company Logo"],
.outside-logo img {
    display: block;
    max-width: 148px; max-height: 66px;
    width: auto; height: auto;
    margin: 0 auto 28px;
    object-fit: contain;
    filter: drop-shadow(0 0 18px rgba(168,85,247,.40));
    position: relative; 
    z-index: 1;
    border-radius: 8px;
}

/* ════════════════════════════════════════════════════════════════════════
   FORM ELEMENTS
   ════════════════════════════════════════════════════════════════════════ */
.oe_login_form {
    display: flex !important;
    flex-direction: column;
    gap: 18px;
}
.oe_structure { height: 0; visibility: hidden; }
owl-component[name="web.user_switch"] { display: none; }

.mb-3  { margin-bottom: 16px; }
.mb-1  { margin-bottom: 6px; }
.pt-3  { padding-top: 12px; }
.mt-2  { margin-top: 8px; }
.d-flex { display: flex; }
.justify-content-between { justify-content: space-between; }
.align-items-start { align-items: flex-start; }
.text-center { text-align: center; }
.d-grid { display: grid; }

.form-label {
    display: block;
    font-size: 13px; font-weight: 500;
    color: #a0aec0;
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}

.form-control {
    width: 100%;
    padding: 13px 16px;
    font-size: 14px;
    color: #ffffff;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    outline: none;
    box-sizing: border-box;
    transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
    font-family: inherit;
}
.form-control::placeholder { color: rgba(255,255,255,0.25); }
.form-control:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.16);
}
.form-control:focus {
    background: rgba(5,6,8,0.5);
    border-color: #7f00ff;
    box-shadow: 0 0 0 3px rgba(127,0,255,0.2), 0 0 15px rgba(127,0,255,0.1);
}

/* Light form color үед input-г dark болгоно */
.custom-login-box[style*="rgba(255"] .form-control,
.custom-login-box[style*="#fff"] .form-control,
.custom-login-box[style*="white"] .form-control {
    color: #1e293b;
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.12);
}

.input-group {
    position: relative;
    display: flex; align-items: center;
    width: 100%;
}
.input-group .form-control { padding-right: 48px; }

.o_show_password {
    position: absolute; right: 6px; top: 50%;
    transform: translateY(-50%);
    background: transparent; border: none !important;
    color: rgba(255,255,255,0.4);
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; border-radius: 10px;
    transition: all 0.2s ease; z-index: 5;
}
.o_show_password:hover { color: #ffffff; background: rgba(255,255,255,0.06); }
.eye-icon { width: 18px; height: 18px; }

.btn-link {
    color: #a0aec0; text-decoration: none;
    font-size: 13px; font-weight: 500;
    transition: all 0.2s ease;
    background: transparent; border: none;
    cursor: pointer; padding: 0;
}
.btn-link:hover { color: #00f0ff; text-shadow: 0 0 8px rgba(0,240,255,0.3); }

.btn-superuser { display: block; margin: 12px auto 0 auto; font-size: 12px; opacity: 0.65; }
.btn-superuser:hover { opacity: 1; color: #ff007f; text-shadow: 0 0 8px rgba(255,0,127,0.3); }

.btn-primary {
    width: 100%; padding: 14px;
    font-size: 15px; font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, #7f00ff, #ff007f);
    border: none; border-radius: 12px;
    cursor: pointer; position: relative; overflow: hidden;
    transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
    box-shadow: 0 4px 20px rgba(255,0,127,0.3);
    font-family: inherit;
}
.btn-primary:hover:not(:disabled) {
    transform: translateY(-1.5px);
    box-shadow: 0 8px 25px rgba(255,0,127,0.45);
    background: linear-gradient(135deg, #8f1aff, #ff1a8c);
}
.btn-primary:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 2px 10px rgba(255,0,127,0.2);
}
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.login-alt-action {
    color: #a0aec0 !important; text-decoration: none !important;
    font-size: 13px; font-weight: 500;
    transition: color 0.2s;
}
.login-alt-action:hover { color: #00f0ff !important; }

/* ════════════════════════════════════════════════════════════════════════
   OAUTH PROVIDERS
   ════════════════════════════════════════════════════════════════════════ */
.o_login_auth {
    margin-top: 26px;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 22px;
}
.o_login_auth em {
    display: block; text-align: center;
    font-style: normal; font-size: 11px;
    color: rgba(255,255,255,0.35);
    margin-bottom: 18px;
    text-transform: uppercase; letter-spacing: 0.12em;
}
.list-group { display: flex; flex-direction: column; gap: 12px; }
.list-group-item {
    display: flex; align-items: center; justify-content: flex-start;
    padding: 12px 16px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    color: #e2e8f0; text-decoration: none;
    font-size: 14px; font-weight: 500;
    transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
    box-sizing: border-box;
}
.list-group-item:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.14);
    transform: translateX(3px); color: #ffffff;
}
.provider-icon { width: 18px; height: 18px; flex-shrink: 0; margin-right: 12px; }
.fb-icon    { color: #1877f2; filter: drop-shadow(0 0 6px rgba(24,119,242,0.4)); }
.odoo-icon  { color: #714B67; filter: drop-shadow(0 0 6px rgba(113,75,103,0.4)); }
.passkey-icon { color: #00f0ff; filter: drop-shadow(0 0 6px rgba(0,240,255,0.4)); }

/* ════════════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════════════ */
.custom-login-footer {
    position: absolute; bottom: 24px;
    left: 0; width: 100%;
    text-align: center; z-index: 10;
}
.custom-login-footer p {
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(255,255,255,0.3); margin: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   SPINNER / SUCCESS BANNER
   ════════════════════════════════════════════════════════════════════════ */
.spinner {
    width: 18px; height: 18px;
    border: 2px solid rgba(255,255,255,0.25);
    border-radius: 50%; border-top-color: #ffffff;
    animation: spinLoader 0.7s linear infinite;
    margin: 0 auto;
}
@keyframes spinLoader { to { transform: rotate(360deg); } }

.success-banner {
    display: flex; align-items: center; gap: 10px;
    background: rgba(16,185,129,0.12);
    border: 1px solid rgba(16,185,129,0.25);
    border-radius: 12px; padding: 12px 16px;
    margin-bottom: 16px; color: #34d399;
    font-size: 14px; font-weight: 500;
    animation: slideDownIn 0.3s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes slideDownIn {
    0%   { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
}
.success-icon {
    background: #10b981; color: #0d1017;
    width: 18px; height: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 11px;
}

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .custom-login-container {
        align-items: center !important;   /* mobile: always center */
        padding: 1.5rem !important;
    }
    .custom-login-box {
        max-width: 100%;
        padding: 32px 24px;
        border-radius: 18px;
    }
}
@media (max-width: 380px) {
    .custom-login-box { padding: 24px 16px; border-radius: 14px; }
}

/* ════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .custom-login-container,
    .custom-login-container::before,
    .custom-login-container::after,
    .custom-login-box,
    .custom-login-box::before { animation: none !important; }
}