/* ==========================================================================
   A&M Infinity / MADO Billing Portal — Login UI
   Rebuilt as a single clean design system (previous file had three stacked
   !important override passes). All class/ID names are unchanged so
   login.php markup and login.js behaviour keep working exactly as before.
   ========================================================================== */

:root{
    --login-bg-start:#0a1d3d;
    --login-bg-mid:#0f2b5c;
    --login-bg-end:#123a7a;
    --login-accent:#3b82f6;
    --login-accent-2:#60a5fa;
    --login-card-bg:rgba(13,26,54,.55);
    --login-card-border:rgba(255,255,255,.14);
    --login-text:#eef4ff;
    --login-text-muted:#a9c0e6;
    --login-input-bg:rgba(255,255,255,.07);
    --login-input-border:rgba(255,255,255,.22);
    --login-radius-lg:20px;
    --login-radius-md:12px;
}

*{box-sizing:border-box}

html,body{height:100%;width:100%;margin:0;padding:0;font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif}

body{
    min-height:100vh;
    min-height:100dvh;
    background-color:var(--login-bg-start);
    background-image:
        radial-gradient(circle at 15% 20%, rgba(96,165,250,.14) 0, transparent 42%),
        radial-gradient(circle at 85% 78%, rgba(59,130,246,.16) 0, transparent 45%),
        linear-gradient(135deg, var(--login-bg-start) 0%, var(--login-bg-mid) 48%, var(--login-bg-end) 100%);
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
    background-attachment:fixed;
    color:var(--login-text);
}

/* Custom company background image (set via PHP inline style) always wins;
   the overlay below keeps text legible over any photo. */
.login-page{min-height:100vh;min-height:100dvh;width:100%;position:relative}

.login-overlay{
    min-height:100vh;
    min-height:100dvh;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(10px,3vh,24px) clamp(12px,3vw,24px);
    box-sizing:border-box;
    overflow-y:auto;
    background:linear-gradient(180deg, rgba(4,12,28,.30), rgba(4,12,28,.55));
}

.login-card{
    position:relative;
    width:100%;
    max-width:436px;
    margin:0 auto;
    padding:clamp(18px,4vh,34px) clamp(20px,5vw,36px) clamp(14px,3vh,26px);
    background:var(--login-card-bg);
    border:1px solid var(--login-card-border);
    border-radius:var(--login-radius-lg);
    box-shadow:0 28px 70px rgba(2,8,24,.55), 0 0 0 1px rgba(255,255,255,.03) inset;
    -webkit-backdrop-filter:blur(22px) saturate(150%);
    backdrop-filter:blur(22px) saturate(150%);
    /* Fluid clamp() sizing below keeps every element shrinking in step with
       the viewport, so in normal use the card should never need to scroll.
       max-height + overflow-y stay only as a last-resort safety net for
       truly extreme cases (e.g. heavy browser zoom on a tiny screen). */
    max-height:calc(100dvh - clamp(16px,4vh,32px));
    overflow-y:auto;
    animation:loginCardIn .45s ease both;
}

@keyframes loginCardIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

.login-card::-webkit-scrollbar{width:5px}
.login-card::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:20px}

.logo{
    display:block;
    width:clamp(46px,9vh,78px);
    height:auto;
    margin:0 auto clamp(4px,1vh,10px);
    border-radius:10px;
    box-shadow:0 6px 18px rgba(0,0,0,.25);
}

.login-card h2{
    margin:0 0 3px;
    color:#fff;
    font-size:clamp(18px,4vh,24px);
    line-height:1.25;
    font-weight:800;
    letter-spacing:.2px;
    text-align:center;
}

.company{
    margin:0 0 clamp(8px,2vh,16px);
    color:var(--login-text-muted);
    font-size:clamp(11px,1.6vh,12.5px);
    letter-spacing:.4px;
    text-align:center;
}

.login-card hr{
    margin:0 0 clamp(8px,2vh,18px);
    border:0;
    border-top:1px solid rgba(255,255,255,.16);
    opacity:1;
}

.login-card h1{
    margin:0 0 4px;
    color:#fff;
    font-size:clamp(18px,4.2vh,26px);
    line-height:1.25;
    font-weight:800;
    text-align:center;
}

.subtitle{
    margin:0 0 clamp(10px,2.4vh,20px);
    color:var(--login-text-muted);
    font-size:clamp(11.5px,1.7vh,13.5px);
    text-align:center;
}

.login-card .alert{
    border-radius:var(--login-radius-md);
    font-size:13px;
    padding:.65rem .9rem;
    border:1px solid rgba(248,113,113,.35);
    background:rgba(248,113,113,.14);
    color:#fecaca;
}

label{
    display:inline-block;
    margin-bottom:6px;
    color:#dbe6fb;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.2px;
    text-transform:uppercase;
}

.input-group{margin-top:0}

.input-group-text{
    min-width:44px;
    justify-content:center;
    background:var(--login-input-bg);
    border:1px solid var(--login-input-border);
    color:var(--login-accent-2);
    border-radius:var(--login-radius-md) 0 0 var(--login-radius-md)!important;
}

.form-control{
    height:clamp(38px,6.2vh,46px);
    background:var(--login-input-bg);
    border:1px solid var(--login-input-border);
    color:#fff;
    font-size:14px;
    box-shadow:none;
    border-radius:0!important;
    transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.input-group > .btn-outline-secondary:last-child{border-radius:0 var(--login-radius-md) var(--login-radius-md) 0!important}
#username{border-radius:0 var(--login-radius-md) var(--login-radius-md) 0!important}

.form-control::placeholder{color:#94aad0}

.form-control:focus{
    background:rgba(255,255,255,.12);
    border-color:var(--login-accent-2);
    box-shadow:0 0 0 .17rem rgba(96,165,250,.22);
}

.btn-outline-secondary{
    min-width:46px;
    border:1px solid var(--login-input-border);
    background:var(--login-input-bg);
    color:#bcd2f5;
}

.btn-outline-secondary:hover{
    color:#fff;
    background:rgba(255,255,255,.16);
    border-color:var(--login-input-border);
}

.form-check-label{
    color:#c8d8f4;
    font-size:13px;
    font-weight:500;
}

.form-check-input{
    background-color:rgba(255,255,255,.1);
    border-color:rgba(255,255,255,.35);
}
.form-check-input:checked{background-color:var(--login-accent);border-color:var(--login-accent)}

.login-card a{color:var(--login-accent-2);font-size:13px;text-decoration:none;font-weight:600}
.login-card a:hover{color:#fff;text-decoration:underline}

.login-btn{
    height:clamp(40px,6.6vh,48px);
    border:0;
    border-radius:var(--login-radius-md);
    background:linear-gradient(135deg, var(--login-accent) 0%, #2563eb 100%);
    color:#fff!important;
    font-size:15px;
    font-weight:700;
    letter-spacing:.3px;
    box-shadow:0 12px 28px rgba(37,99,235,.42);
    transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.login-btn:hover{transform:translateY(-1px);box-shadow:0 16px 34px rgba(37,99,235,.52);filter:brightness(1.06);color:#fff}
.login-btn:active{transform:translateY(0)}
.login-btn:disabled{opacity:.75;transform:none;cursor:progress}
.login-btn:focus{color:#fff}

.mb-3{margin-bottom:clamp(8px,1.8vh,14px)!important}
.mb-4{margin-bottom:clamp(10px,2.2vh,18px)!important}

.signature{
    margin-top:clamp(8px,2vh,16px);
    padding-top:clamp(8px,1.8vh,14px);
    border-top:1px solid rgba(255,255,255,.14);
    text-align:center;
    color:var(--login-text-muted);
    font-size:10.5px;
}

.signature span{color:#eaf1ff;font-weight:700;letter-spacing:.3px}

.footer-text{
    margin-top:8px;
    text-align:center;
    color:#7f97c2;
    font-size:10px;
    line-height:15px;
}

.footer-text b{color:#c3d6f8;font-weight:600}

/* ==========================================================================
   Responsive breakpoints
   ========================================================================== */

@media(max-width:576px){
    .login-card{max-width:100%;border-radius:16px}
}

/* clamp() above already shrinks everything fluidly with viewport height;
   these just handle the two things clamp() can't do on its own. */
@media(max-height:600px){
    .logo{display:none}
}

/* Respect reduced-motion preference */
@media(prefers-reduced-motion:reduce){
    .login-card{animation:none}
    .login-btn{transition:none}
}