/* =======================================================
   LOGIN PAGE - Polished Design (Reference: Clean Split)
   Nica Xandra Pharmacy Management System
======================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

:root{
    --primary-green:#0F8A6B;
    --soft-green:#1CBF73;
    --dark-text:#1a2230;
    --light-text:#6b7280;
    --card-bg:#ffffff;
    --body-bg:#f6f8fb;
    --input-bg:#f5f7fa;
    --shadow-soft:0 32px 80px rgba(30,27,27,.1), 0 6px 20px rgba(30,27,27,.05);
    --shadow-btn:0 8px 28px rgba(15,138,107,.3);
    --shadow-btn-hover:0 14px 40px rgba(15,138,107,.4);
    --border-radius:20px;
    --transition:.35s ease;
}

*{ margin:0; padding:0; box-sizing:border-box; }

body{
    font-family:'Poppins',sans-serif;
    background:var(--body-bg);
    overflow-x:hidden;
    min-height:100vh;
}

.wrapper{
    width:100%;
    min-height:100vh;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* ----- Split Layout ----- */
.login-row{
    /* The row used to be min-height:calc(100vh - 60px), which made both
       panels run the full height of the window and read as two halves of
       the page rather than as cards. .wrapper already centres its child
       vertically, so letting the row size to its content is what makes the
       two panels float with breathing room above and below. */
    min-height:auto;
    display:flex;
    /* Bootstrap's .row ships flex-wrap:wrap. Our two panels plus the
       gap already fill the full 100% width, so any wrap allowance
       pushes .right-side onto its own line and breaks the split. */
    flex-wrap:nowrap;
    align-items:stretch;
    width:100%;
    max-width:1180px;
    margin:0 auto;
    padding:56px 28px;
    gap:28px;
}

/* ----- LEFT PANEL (Reference Clean Style) ----- */
.left-side{
    /* Bootstrap's .col-lg-6 sets flex:0 0 auto + width:50%. Claim the
       basis explicitly so our 45/55 split is honoured. Half the 28px gap
       keeps the two panels flush to 50/50. */
    flex:0 0 calc(50% - 14px);
    width:auto;
    min-height:640px;
    background:linear-gradient(160deg, #1CBF73 0%, #0F8A6B 50%, #0a6e55 100%);
    border-radius:36px;
    padding:70px 48px;
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:center;
    color:#fff;
    box-shadow:0 30px 70px rgba(15,138,107,.4);
    animation:fadeInLeft .9s ease;
}

/* Decorative circles (reference style) */
.left-side::before{
    content:"";
    position:absolute;
    width:550px; height:550px;
    background:linear-gradient(135deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.03) 100%);
    border-radius:50%;
    top:-160px; left:-140px;
    z-index:1;
    pointer-events:none;
}

.left-side::after{
    content:"";
    position:absolute;
    width:400px; height:400px;
    background:linear-gradient(135deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.02) 100%);
    border-radius:50%;
    bottom:-120px; right:-120px;
    z-index:1;
    pointer-events:none;
}

/* Brand hero: the greeting used to be a big "Welcome" headline with the
   brand shrunk into a small strip above it. The panel now leads with the
   brand itself -- the same NX logo the side menu uses, inside its white
   ring, with the system name as the headline. */
.brand-hero{
    text-align:center;
    position:relative; z-index:2;
}

.brand-hero-ring{
    width:112px; height:112px;
    margin:0 auto 22px;
    border-radius:50%;
    background:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.18);
}

.brand-hero-ring img{
    width:84px; height:84px;
    object-fit:contain;
    display:block;
}

.brand-hero-name{
    font-size:48px;
    font-weight:900;
    letter-spacing:-.03em;
    line-height:1.05;
    color:#fff;
    margin-bottom:10px;
}

.brand-hero-system{
    font-size:12px;
    font-weight:600;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:rgba(255,255,255,.78);
    max-width:300px;
    line-height:1.7;
    margin:0 auto;
}

/* Decorative bottom curves (reference style) */
.left-decor-bottom{
    position:absolute;
    bottom:-60px;
    left:-60px;
    width:220px; height:220px;
    background:#ff6b6b;
    border-radius:50%;
    opacity:.25;
    z-index:1;
    pointer-events:none;
}

.left-decor-corner{
    position:absolute;
    top:-40px; right:-40px;
    width:180px; height:180px;
    background:#ffd166;
    border-radius:50%;
    opacity:.2;
    z-index:1;
    pointer-events:none;
}

/* Features */
.features{
    margin-top:10px;
    position:relative; z-index:2;
}

.features div{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:20px;
    font-size:16px;
    font-weight:500;
    color:rgba(255,255,255,.92);
    transition:.3s ease;
    padding:10px 6px;
    border-radius:10px;
    cursor:default;
}

.features div:hover{
    background:rgba(255,255,255,.08);
    padding-left:14px;
    color:#fff;
}

.features i{
    font-size:22px;
    color:#fff;
    width:40px; height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.15);
    border-radius:10px;
    flex-shrink:0;
    border:1px solid rgba(255,255,255,.1);
}

/* ----- RIGHT PANEL ----- */
.right-side{
    flex:0 0 calc(50% - 14px);
    width:auto;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:60px;
    background:var(--body-bg);
    position:relative;
}

/* ----- Login Card (Reference Clean) ----- */
.login-card{
    width:100%; max-width:420px;
    background:var(--card-bg);
    border-radius:28px;
    padding:48px 40px;
    box-shadow:var(--shadow-soft);
    border:1px solid rgba(30,27,27,.04);
    animation:fadeInUp .8s ease;
}

.login-card-header{
    text-align:center;
    margin-bottom:36px;
}

.login-card-header i{
    display:inline-block;
    width:52px; height:52px;
    border-radius:14px;
    background:linear-gradient(135deg, var(--soft-green), var(--primary-green));
    color:#fff;
    font-size:24px;
    line-height:52px;
    box-shadow:0 6px 18px rgba(15,138,107,.25);
    margin-bottom:16px;
}

.login-card-header h3{
    font-weight:800;
    letter-spacing:-.03em;
    color:var(--dark-text);
    font-size:28px;
    line-height:1.15;
    margin-bottom:6px;
}

.login-card-header p{
    color:var(--light-text);
    font-size:15px;
    font-weight:400;
    line-height:1.4;
}

/* ----- Form Elements ----- */
.form-label{
    font-weight:600;
    color:var(--dark-text);
    letter-spacing:.01em;
    font-size:13px;
    margin-bottom:8px;
    display:block;
    text-transform:uppercase;
    font-size:11px;
}

.input-group-text{
    background:#f3f6f8;
    border:1.5px solid #e8ebe9;
    border-right:none;
    color:var(--primary-green);
    border-radius:12px 0 0 12px;
    height:54px;
    display:flex; align-items:center; justify-content:center;
    width:46px;
    font-size:17px;
}

.form-control{
    border:1.5px solid #e8ebe9;
    border-left:none;
    background:#fff;
    height:54px;
    border-radius:0 12px 12px 0;
    font-size:15px;
    padding:0 16px;
    color:var(--dark-text);
    transition:all .2s ease;
    font-family:var(--font-family);
}

.form-control::placeholder{
    color:#9aa4a8;
    font-size:14px;
    font-weight:400;
}

.form-control:focus{
    background:#fff;
    border-color:var(--primary-green);
    border-left-color:#e8ebe9;
    box-shadow:0 0 0 4px rgba(15,138,107,.1);
    outline:none;
}

/* Toggle password */
#togglePassword{
    border:1.5px solid #e8ebe9;
    border-left:none;
    border-radius:0 12px 12px 0;
    background:#fff;
    color:#8898a0;
    height:54px;
    width:46px;
    transition:all .2s ease;
    display:flex; align-items:center; justify-content:center;
}

#togglePassword:hover{
    background:#f6faf7;
    color:var(--primary-green);
}

/* Remember Me */
.remember-me{
    display:flex;
    align-items:center;
    gap:8px;
    justify-content:center;
}

.remember-me input[type="checkbox"]{
    width:18px; height:18px;
    border-radius:4px;
    border:2px solid #d1ddd6;
    accent-color:var(--primary-green);
    cursor:pointer;
}

.remember-me label{
    font-size:13px;
    color:var(--light-text);
    font-weight:500;
    cursor:pointer;
    user-select:none;
}

/* Sign In Button */
.login-btn{
    background:linear-gradient(135deg, var(--primary-green), var(--soft-green));
    color:#fff;
    border:none;
    border-radius:50px;
    padding:16px 28px;
    font-weight:700;
    letter-spacing:.08em;
    font-size:15px;
    text-transform:uppercase;
    transition:all .3s ease;
    box-shadow:0 10px 28px rgba(15,138,107,.3);
}

.login-btn:hover{
    background:linear-gradient(135deg, #0C745A, #0F8A6B);
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(15,138,107,.4);
}

.login-btn:active{
    transform:translateY(-1px);
    box-shadow:0 6px 18px rgba(15,138,107,.25);
}

/* ----- Alert ----- */
.alert{
    border-radius:12px !important;
    padding:14px 16px !important;
    font-size:14px !important;
    border:none !important;
    background:#fff5f5 !important;
    color:#b91c1c !important;
    box-shadow:0 4px 14px rgba(220,53,69,.1) !important;
}

/* ----- Mobile ----- */
@media (max-width:991.98px){
    .login-row{
        flex-direction:column-reverse !important;
        flex-wrap:wrap !important;
        padding:30px 16px !important;
        gap:16px !important;
    }
    .left-side{
        flex:0 0 100% !important;
        width:100% !important;
        min-height:auto !important;
        border-radius:0 0 40px 40px !important;
        padding:50px 28px !important;
    }
    .right-side{
        flex:0 0 100% !important;
        width:100% !important;
        padding:20px 16px !important;
    }
    .brand-hero-name{ font-size:36px !important; }
    .brand-hero-ring{ width:92px; height:92px; }
    .brand-hero-ring img{ width:68px; height:68px; }
    .login-card{ padding:36px 24px !important; }
}

@media (max-width:480px){
    .brand-hero-name{ font-size:30px !important; }
    .left-side{ padding:36px 20px !important; }
}

/* ----- Animations ----- */
.login-card{ animation:fadeInUp .8s ease; }
@keyframes fadeInUp{ from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }
.left-side{ animation:fadeInLeft .9s ease; }
@keyframes fadeInLeft{ from{opacity:0;transform:translateX(-30px);} to{opacity:1;transform:translateX(0);} }