/* ========================================================================
   KingsAdmin Stage 7.16
   Compact login viewport fit
   ------------------------------------------------------------------------
   Goals:
   - fit the desktop login entirely inside the viewport
   - remove the desktop vertical scrollbar
   - reduce the overall width and height
   - preserve the two-panel login/media experience
   - keep mobile usable when the on-screen keyboard appears
   ======================================================================== */

html,
body.ks-login-body{
    width:100%;
}

/* Desktop / laptop ----------------------------------------------------- */
@media (min-width:801px){
    html{
        height:100%;
        overflow:hidden;
    }

    body.ks-login-body{
        height:100dvh;
        min-height:100dvh;
        overflow:hidden;

        display:grid;
        place-items:center;

        /*
          The old layout used margin-top:50dvh + transform:translateY(-50%).
          Transform does not change document flow, so the page became taller
          than the viewport and produced a scrollbar. The grid centers the
          workspace without adding document height.
        */
        padding:14px 18px;
    }

    .ks-login-layout{
        width:min(1000px, calc(100vw - 56px));
        height:min(650px, calc(100dvh - 28px));
        min-height:0;
        max-height:650px;

        margin:0 auto;
        transform:none;

        grid-template-columns:minmax(290px,320px) minmax(0,1fr);
        gap:13px;
    }

    .ks-login-card{
        padding:18px 22px 0;
        border-radius:9px;
    }

    .ks-brand.ka-logo-login{
        padding:0 0 12px!important;
    }

    .ks-login-master-logo{
        width:min(100%,215px)!important;
        max-height:66px!important;
    }

    .ks-login-main{
        padding:10px 0 7px;
        justify-content:center;
    }

    .ks-login-main:before{
        margin-bottom:5px;
    }

    .ks-login-main h1{
        margin-bottom:13px;
        font-size:24px;
    }

    .ks-login-form{
        gap:10px;
    }

    .ks-field label{
        margin-bottom:4px;
    }

    .ks-field input{
        height:42px;
        border-radius:8px;
    }

    .ks-password-toggle{
        height:30px;
        right:6px;
    }

    .ks-remember{
        padding-top:0;
    }

    .ks-remember input{
        width:15px;
        height:15px;
    }

    .ks-login-button{
        height:42px;
        margin-top:1px;
        border-radius:8px;
    }

    .ks-login-help{
        margin-top:11px;
        padding:9px 11px;
        border-radius:9px;
    }

    .ks-login-footer{
        margin:11px -22px 0;
        padding:9px 22px 10px;
        gap:2px;
    }

    .ks-media-panel{
        padding:13px;
        grid-template-rows:minmax(0,1.58fr) minmax(165px,.70fr);
        gap:11px;
        border-radius:9px;
    }

    .ks-media-frame{
        border-radius:7px;
    }

    .ks-banner-copy{
        left:26px;
        bottom:24px;
    }

    .ks-banner-copy h2{
        font-size:clamp(25px,2.55vw,39px);
    }

    .ks-event-copy{
        padding:20px 24px;
    }

    .ks-banner-dots{
        right:14px;
        bottom:13px;
    }

    .ks-bg-shape{
        opacity:.23;
    }
}

/* Short laptop screens ------------------------------------------------ */
@media (min-width:801px) and (max-height:720px){
    body.ks-login-body{
        padding:9px 14px;
    }

    .ks-login-layout{
        width:min(960px, calc(100vw - 44px));
        height:calc(100dvh - 18px);
        max-height:none;
        grid-template-columns:minmax(278px,305px) minmax(0,1fr);
        gap:11px;
    }

    .ks-login-card{
        padding:13px 20px 0;
    }

    .ks-brand.ka-logo-login{
        padding-bottom:8px!important;
    }

    .ks-login-master-logo{
        width:min(100%,195px)!important;
        max-height:57px!important;
    }

    .ks-login-main{
        padding:6px 0 4px;
    }

    .ks-login-main:before{
        margin-bottom:3px;
    }

    .ks-login-main h1{
        margin-bottom:9px;
        font-size:22px;
    }

    .ks-login-form{
        gap:8px;
    }

    .ks-field label{
        margin-bottom:3px;
    }

    .ks-field input{
        height:38px;
    }

    .ks-password-toggle{
        height:28px;
    }

    .ks-login-button{
        height:38px;
    }

    .ks-login-help{
        margin-top:8px;
        padding:7px 10px;
    }

    .ks-login-footer{
        margin:8px -20px 0;
        padding:7px 20px 8px;
    }

    .ks-media-panel{
        padding:10px;
        gap:9px;
        grid-template-rows:minmax(0,1.6fr) minmax(145px,.66fr);
    }

    .ks-banner-copy{
        left:22px;
        bottom:20px;
    }

    .ks-banner-copy h2{
        font-size:clamp(23px,2.4vw,35px);
    }
}

/* Very wide screens: don't let the login grow again ------------------- */
@media (min-width:1500px) and (min-height:721px){
    .ks-login-layout{
        width:1000px;
        height:650px;
    }
}

/* Mobile --------------------------------------------------------------- */
@media (max-width:800px){
    html{
        min-height:100%;
        overflow-x:hidden;
    }

    body.ks-login-body{
        overflow-x:hidden;
        overflow-y:auto;

        /* Allow keyboard-safe scrolling but hide the visible scrollbar. */
        scrollbar-width:none;
        -ms-overflow-style:none;
    }

    body.ks-login-body::-webkit-scrollbar{
        width:0;
        height:0;
        display:none;
    }

    .ks-login-master-logo{
        width:min(100%,220px)!important;
        max-height:72px!important;
    }
}