/* ==========================================================
   TITAN ERP LOGIN PAGE
========================================================== */

.login-page{
    min-height:100vh;
    background:
        radial-gradient(circle at top left,#1d4ed8 0%,transparent 30%),
        radial-gradient(circle at bottom right,#2563eb 0%,transparent 30%),
        #050b16;
    /* overflow:hidden; */
    position:relative;
}

/* ==========================================================
   LOGIN WRAPPER
========================================================== */

.login-wrapper{
    min-height:100vh;
    /* height:100vh; */
    align-items:center;
    /* padding:30px; */
    /* box-sizing: border-box; */
}

/* ==========================================================
   LEFT PANEL
========================================================== */

.brand-panel{
    width:100%;
    height:100%;

    background:rgba(10,20,40,.45);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.08);

    border-radius:24px;

    display:flex;
    align-items:center;
    justify-content:center;

    position:relative;

    overflow:hidden;
}

/* Decorative Shapes */

.brand-panel::before{
    content:'';

    position:absolute;

    width:250px;
    height:250px;

    top:-100px;
    left:-100px;

    background:#2563eb;

    opacity:.15;

    border-radius:50%;

    filter:blur(80px);
}

.brand-panel::after{
    content:'';

    position:absolute;

    width:300px;
    height:300px;

    bottom:-120px;
    right:-120px;

    background:#1d4ed8;

    opacity:.12;

    border-radius:50%;

    filter:blur(100px);
}

/* ==========================================================
   BRAND CONTENT
========================================================== */

.brand-content{

    max-width:520px;

    text-align:center;

    color:#fff;

    z-index:2;

    position:relative;
}

.brand-logo{

    width:120px;
    height:120px;

    margin:auto auto 30px;

    border-radius:24px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(37,99,235,.15);

    border:1px solid rgba(37,99,235,.25);
}

.brand-logo i{

    font-size:70px;

    color:#2563eb;
}

.brand-title{

    font-size:4rem;

    font-weight:800;

    margin-bottom:10px;

    letter-spacing:1px;
}

.brand-title span{

    color:#2563eb;
}

.brand-subtitle{

    font-weight:400;

    color:#cbd5e1;

    margin-bottom:30px;
}

.brand-divider{

    width:100px;
    height:3px;

    margin:30px auto;

    background:#2563eb;

    border-radius:50px;
}

.brand-description{

    color:var(--text-muted);

    font-size:1.1rem;

    line-height:1.8;
}

/* ==========================================================
   FEATURES
========================================================== */

.feature-item{

    display:flex;

    align-items:center;

    gap:15px;

    text-align:left;
}

.feature-item i{

    width:55px;
    height:55px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:rgba(37,99,235,.10);

    color:#3b82f6;

    font-size:24px;
}

.feature-item h6{

    margin:0;

    color:#fff;

    font-weight:600;
}

.feature-item small{

    color:var(--text-muted);
}

/* ==========================================================
   RIGHT PANEL
========================================================== */

.login-panel{

    min-height:100vh;
    /* height: 100%; */
    display:flex;

    align-items:center;

    justify-content:center;

    padding:30px;
}

.login-card{

    width:100%;
    max-width:600px;

    background:rgba(15,23,42,.55);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.08);

    border-radius:24px;

    padding:30px 80px;
}

.login-card h2{

    color:#fff;

    font-size:3rem;

    font-weight:700;
}

.login-card p{

    color:var(--text-muted);
}

/* ==========================================================
   BRAND FOOTER
========================================================== */

.brand-footer{
    color:#64748b;
}

/* ==========================================================
   FORM LABEL (dark theme override)
========================================================== */

.login-card .form-label{
    color:#cbd5e1;
    font-size:.875rem;
    font-weight:500;
    margin-bottom:8px;
}

/* ==========================================================
   DARK INPUT GROUP
========================================================== */

.input-group-dark .input-group-text{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.10);
    border-right:none;
    color:#64748b;
}

.input-group-dark .form-control{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.10);
    border-left:none;
    color:#f8fafc;
    height:48px;
}

.input-group-dark .form-control::placeholder{
    color:#64748b;
}

.input-group-dark .form-control:focus{
    background:rgba(255,255,255,.06);
    box-shadow:none;
    border-color:rgba(37,99,235,.5);
}

.input-group-dark:focus-within .input-group-text{
    border-color:rgba(37,99,235,.5);
}

.input-group-dark .btn-outline-secondary{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.10);
    border-left:none;
    color:var(--text-muted);
}

.input-group-dark .btn-outline-secondary:hover{
    background:rgba(255,255,255,.08);
    color:#fff;
}

/* ==========================================================
   CHECKBOX (dark)
========================================================== */

.login-card .form-check-input{
    background-color:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.20);
}

.login-card .form-check-input:checked{
    background-color:#2563eb;
    border-color:#2563eb;
}

.login-card .form-check-label{
    font-size:.875rem;
}

/* ==========================================================
   DIVIDER — "or continue with"
========================================================== */

.login-divider{
    display:flex;
    align-items:center;
    text-align:center;
    color:#64748b;
    font-size:.8rem;
    margin:28px 0 22px;
}

.login-divider::before,
.login-divider::after{
    content:'';
    flex:1;
    border-bottom:1px solid rgba(255,255,255,.10);
}

.login-divider span{
    padding:0 15px;
}

/* ==========================================================
   OUTLINE LIGHT BUTTON (Google / SSO)
========================================================== */

.login-card .btn-outline-light{
    border:1px solid rgba(255,255,255,.15);
    color:#e2e8f0;
    background:rgba(255,255,255,.03);
    height:46px;
    font-size:.9rem;
}

.login-card .btn-outline-light:hover{
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.25);
    color:#fff;
}

/* ==========================================================
   PRIMARY BUTTON
========================================================== */

.login-card .btn-primary{
    background:#2563eb;
    border:none;
    height:50px;
    font-weight:600;
    border-radius:12px;
}

.login-card .btn-primary:hover{
    background:#1d4ed8;
}

.login-card .btn-primary:disabled{
    opacity:.7;
}

/* ==========================================================
   ALERTS (dark theme)
========================================================== */

.login-card .alert{
    border:1px solid transparent;
    border-radius:12px;
    font-size:.85rem;
}

.login-card .alert-danger{
    background:rgba(239,68,68,.10);
    border-color:rgba(239,68,68,.25);
    color:#fca5a5;
}

.login-card .alert-success{
    background:rgba(34,197,94,.10);
    border-color:rgba(34,197,94,.25);
    color:#86efac;
}

/* ==========================================================
   FONT WEIGHT HELPER
========================================================== */

.fw-600{
    font-weight:600;
}

/* ==========================================================
   PASSWORD STRENGTH METER
========================================================== */

.strength-bar{
    width:100%;
    height:5px;
    border-radius:10px;
    background:rgba(255,255,255,.08);
    overflow:hidden;
    margin-bottom:4px;
}

.strength-fill{
    height:100%;
    border-radius:10px;
    transition:width .3s ease, background .3s ease;
}

.password-strength small{
    font-size:.75rem;
    font-weight:500;
}

/* ==========================================================
   TEXT MUTED / PRIMARY OVERRIDES
========================================================== */

.login-card .text-muted{
    color:var(--text-muted) !important;
}
}

.login-card .text-primary{
    color:#3b82f6 !important;
}

.login-card a.text-primary:hover{
    color:#60a5fa !important;
}

.login-card a{
    color:#3b82f6;
    text-decoration:none;
}

.login-card a:hover{
    color:#60a5fa;
    text-decoration:underline;
}

/* ==========================================================
   RESPONSIVE — SMALLER REGISTER CARD
========================================================== */

@media(max-width:576px){

    .login-card{
        padding:32px 24px;
    }

    .login-card h2{
        font-size:2rem;
    }

}