/* ==========================================================================
   Material-inspired mobile theme - Admin and User Login
   (application/views/admin/login.php, application/views/userlogin.php)

   Both pages share the same "usertemplate" markup and class names, so one
   stylesheet covers both - only the page-specific heading text differs.

   Mobile-only (max-width: 767px). Desktop keeps the existing two-column
   login page exactly as it is - only a phone/tablet-width visitor sees any
   of this.

   The desktop page is a hero background image with a login card floating
   over its left edge, plus a "What's New" panel filling the rest of the
   screen. On a phone, Bootstrap's grid already stacks that second column
   below the form, but a full-width hero image and a scrolling news panel
   under the login form is a lot to load and scroll past just to sign in -
   so on mobile the form is the whole screen, centred on a plain gradient
   background, and the "What's New" panel is left off entirely.
   ========================================================================== */

@media (max-width: 767px) {

    :root {
        --md-primary: #3f51b5;
        --md-primary-dark: #303f9f;
    }

    body {
        background: linear-gradient(160deg, var(--md-primary) 0%, var(--md-primary-dark) 100%) !important;
        /* The browser's own default 8px body margin made this 100vh taller
           than the viewport, so the centered card sat above the true middle
           with a scroll needed to see the rest - zeroing it out is what
           actually keeps the card centered on screen. */
        margin: 0;
        min-height: 100vh;
    }

    .top-content {
        background: transparent !important;
        box-sizing: border-box;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* Only .top-content owns "be exactly one viewport tall" - giving
       .inner-bg its own min-height:100vh too (as this rule used to)
       made two nested boxes each demand a full viewport, so the pair
       rendered 100vh plus this element's own padding taller than the
       screen and the card centered inside that taller box, not the
       part actually visible without scrolling. */
    .inner-bg {
        background: transparent !important;
        padding: 32px 16px !important;
        box-sizing: border-box;
        width: 100%;
    }

    /* The "What's New" column: a hero background image plus a scrolling
       notice list is secondary content that only gets in the way of signing
       in on a small screen. */
    .nopadding-2 {
        display: none !important;
    }

    .bgoffsetbg,
    .bgoffsetbgno {
        width: 100%;
    }

    /* ---- The login card itself ---------------------------------------- */
    .loginbg {
        max-width: 360px;
        margin: 0 auto;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
    }

    .form-top {
        background: #fff !important;
        text-align: center;
        padding: 28px 20px 4px !important;
    }
    .form-top-left {
        padding: 0 !important;
    }
    .form-top-left img {
        margin: 0 auto;
    }

    .form-bottom {
        background: #fff !important;
        border-radius: 0 !important;
        padding: 12px 24px 28px !important;
    }
    .font-white {
        color: #1a1a2e !important;
        font-size: 20px;
        text-align: center;
        margin-bottom: 18px;
    }

    /* ---- Inputs --------------------------------------------------------- */
    .form-bottom input[type="text"],
    .form-bottom input[type="password"] {
        border-radius: 10px !important;
        border: 1px solid #dcdfe6 !important;
        box-shadow: none !important;
        height: 48px;
        background: #f7f8fb !important;
    }
    .form-bottom input[type="text"]:focus,
    .form-bottom input[type="password"]:focus {
        border-color: var(--md-primary) !important;
        background: #fff !important;
        box-shadow: 0 0 0 3px rgba(63, 81, 181, .16) !important;
    }

    /* ---- Sign-in button --------------------------------------------------- */
    .form-bottom form button.btn {
        background: var(--md-primary) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 10px !important;
        font-weight: 600;
        letter-spacing: .02em;
        box-shadow: 0 4px 10px rgba(63, 81, 181, .35) !important;
    }
    .form-bottom form button.btn:hover,
    .form-bottom form button.btn:active {
        background: var(--md-primary-dark) !important;
        color: #fff !important;
    }

    a.forgot {
        display: block;
        text-align: center;
        margin-top: 16px !important;
        color: var(--md-primary) !important;
        font-weight: 600;
    }
}