/* Shared login styles for root Default.aspx and WebTnA/Default.aspx.
   Each page defines its own :root { --ThemeColor } and its own logo <img> styling. */

@import url('/styles/font-base.css');

.login-left {
    width: 60%;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0a1628, #122a4a, #0e2240);
}
.fabric-texture {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.06;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 18px, rgba(56,163,248,0.5) 18px, rgba(56,163,248,0.5) 19px),
        repeating-linear-gradient(90deg, transparent, transparent 18px, rgba(56,163,248,0.5) 18px, rgba(56,163,248,0.5) 19px),
        repeating-linear-gradient(0deg, transparent, transparent 6px, rgba(255,255,255,0.15) 6px, rgba(255,255,255,0.15) 7px),
        repeating-linear-gradient(90deg, transparent, transparent 6px, rgba(255,255,255,0.15) 6px, rgba(255,255,255,0.15) 7px);
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 70%);
}
.login-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.3;
    pointer-events: none;
}
.login-glow-1 { width: 500px; height: 500px; background: #1d6ec1; top: -15%; left: -10%; }
.login-glow-2 { width: 400px; height: 400px; background: var(--ThemeColor); bottom: -10%; right: -10%; }
.login-input { box-shadow: none !important; border: 1.5px solid #e2e8f0 !important; border-radius: 10px !important; padding: 11px 14px !important; background: #fff !important; font-size: 16px !important; color: #0f172a !important; outline: none !important; transition: all 0.15s ease !important; height: auto !important; }
.login-input:focus { border-color: var(--ThemeColor) !important; box-shadow: 0 0 0 3px rgba(51,153,255,0.12) !important; outline: none; }
.login-input::placeholder { color: #94a3b8; }
.login-input:-webkit-autofill,
.login-input:-webkit-autofill:hover,
.login-input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #fff inset !important; -webkit-text-fill-color: #0f172a !important; transition: background-color 5000s ease-in-out 0s; }
.login-btn { background: linear-gradient(135deg, var(--ThemeColor), #2b7fd6); transition: all 0.2s ease;letter-spacing:2px; box-shadow: none !important; }
.login-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(51,153,255,0.35) !important; }
.login-btn:active { transform: translateY(0); }
input[type='checkbox'].login-checkbox { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 1.5px solid #cbd5e1 !important; border-radius: 5px !important; cursor: pointer; position: relative; transition: all 0.15s ease; flex-shrink: 0; background: #fff !important; box-shadow: none !important; overflow: hidden; }
input[type='checkbox'].login-checkbox:after { display: none !important; content: none !important; width: 0 !important; height: 0 !important; background: none !important; background-image: none !important; box-shadow: none !important; }
input[type='checkbox'].login-checkbox:checked { background: var(--ThemeColor) !important; border-color: var(--ThemeColor) !important; background-image: url('/_imgs/check_white.png') !important; background-size: 12px 12px !important; background-repeat: no-repeat !important; background-position: center !important; }
input[type='checkbox'].login-checkbox:checked:after { display: none !important; content: none !important; width: 0 !important; height: 0 !important; background: none !important; background-image: none !important; box-shadow: none !important; }
.toggle-password { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #94a3b8; padding: 4px; display: flex; align-items: center; transition: color 0.15s; }
.toggle-password:hover { color: #64748b; }
.login-forgot { font-size:14px; font-weight:500; color: var(--ThemeColor) !important; text-decoration: none; }
.login-forgot:hover { text-decoration: underline; }
.input-lbl {font-size:12px;color:#374151;text-align:left;font-weight:600;letter-spacing:1px;}
#bgImg {border-bottom-left-radius:10px;border-top-left-radius:10px}
#right-panel {border-bottom-right-radius:10px;border-top-right-radius:10px;background:#fff;flex:1;}

/* Dark mode */
.dark-mode .w-100.h-100.d-flex.flex-row.p-4 { background: #111113 !important; }
.dark-mode .login-left { background: linear-gradient(135deg, #060a12, #0a1628, #081420); }
.dark-mode #right-panel { background: #1a1a1d !important; }
.dark-mode #right-panel h1 { color: #f3f4f6 !important; }
.dark-mode #right-panel p { color: #71717a !important; }
.dark-mode .input-lbl { color: #d1d5db !important; }
.dark-mode .login-input { background: #27272a !important; border-color: #3f3f46 !important; color: #f3f4f6 !important; }
.dark-mode .login-input::placeholder { color: #71717a; }
.dark-mode .login-input:focus { border-color: var(--ThemeColor) !important; }
.dark-mode .login-input:-webkit-autofill,
.dark-mode .login-input:-webkit-autofill:hover,
.dark-mode .login-input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #27272a inset !important; -webkit-text-fill-color: #f3f4f6 !important; }
.dark-mode .login-checkbox { background: #27272a !important; border-color: #3f3f46 !important; }
.dark-mode .login-checkbox:checked { background: var(--ThemeColor) !important; border-color: var(--ThemeColor) !important; }
.dark-mode .login-checkbox + span { color: #9ca3af !important; }
.dark-mode .toggle-password { color: #71717a; }
.dark-mode .toggle-password:hover { color: #9ca3af; }
.dark-mode .login-btn:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.45) !important; }

/* ============================================================
   Responsive — tablet / small laptop.
   Keeps the two-column split, rebalances it so the form column
   is not cramped. Desktop (>=1024px) is untouched.
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .login-left { width: 40%; }
    /* Overrides the inline width:32vw;max-width:380px on root Default.aspx
       and the inline height:40vh on WebTnA/Default.aspx. */
    #leftLogo { width: 26vw !important; max-width: 260px !important; height: auto !important; }
    #right-panel > div { width: 90% !important; max-width: 420px; }
}

/* ============================================================
   Responsive — phones. Card-on-gradient layout.
   .login-left becomes a fixed full-bleed background layer;
   the form column becomes a white card floating on it.
   ============================================================ */
@media (max-width: 767.98px) {

    /* --- layout --- */

    .login-shell {
        padding: 0 !important;
        background: transparent !important;
        flex-direction: column;
        height: auto !important;
    }
    #frmLogin.h-100 {
        height: auto !important;
        min-height: 100vh;
        min-height: 100dvh;
    }

    /* Brand column -> full-screen background layer.
       Keeps .fabric-texture and both .login-glow children as-is. */
    .login-left {
        position: fixed;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
        z-index: 0;
        align-items: flex-start !important;
        padding-top: 40px;
    }
    /* Overrides inline width:32vw;max-width:380px (root)
       and inline height:40vh (WebTnA). Logo spans 40-84px vertically. */
    #leftLogo {
        height: 44px !important;
        width: auto !important;
        max-width: none !important;
    }

    /* Right panel -> transparent scroll container.
       120px top padding clears the logo (ends at 84px) with room to spare. */
    #right-panel {
        position: relative;
        z-index: 1;
        width: 100%;
        background: transparent !important;
        border-radius: 0 !important;
        min-height: 100vh;
        min-height: 100dvh;
        padding: 120px 16px 40px;
    }

    /* Form column -> the card. Overrides its inline width:85%. */
    #right-panel > div {
        width: 100% !important;
        max-width: 420px;
        background: #fff;
        border-radius: 16px;
        padding: 24px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    }

    /* --- typography, spacing, touch targets --- */

    /* All of these override inline styles on the elements,
       so every declaration needs !important. */
    #right-panel h1 { font-size: 26px !important; margin-bottom: 6px !important; }
    #right-panel p { font-size: 14px !important; }
    /* Overrides the wrapper's inline text-align:left. */
    #right-panel .mb-5 { margin-bottom: 24px !important; text-align: center !important; }
    #right-panel .mb-4 { margin-bottom: 16px !important; }

    /* Customer logos are uploaded assets of arbitrary size and nothing else
       constrains this img, so a wide wordmark would overflow the card. */
    #cus_Logo { max-width: 100% !important; height: auto !important; max-height: 45px !important; }

    /* font-size stays 16px — smaller makes iOS zoom the viewport on focus. */
    .login-input { padding: 12px 14px !important; }
    .login-btn { padding: 14px !important; min-height: 48px; }

    /* 20px icon + 24px padding = a 44px tap target.
       right:0 keeps the icon where it looked before. */
    .toggle-password { padding: 12px; right: 0; }

    input[type='checkbox'].login-checkbox { width: 20px; height: 20px; }
    #right-panel .login-checkbox + span { display: inline-block; padding: 6px 0; }
    .login-forgot { display: inline-block; padding: 6px 0; }

    /* --- dark mode --- */

    /* The card is now the inner div, not #right-panel, so the desktop rule
       .dark-mode #right-panel { background:#1a1a1d } paints the wrong element here. */
    .dark-mode #right-panel { background: transparent !important; }
    .dark-mode #right-panel > div {
        background: #1a1a1d;
        box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    }

}