/*
 * MOIT Modern Look — Login / Change-Password screen (Bootstrap base). Ticket 103050.
 *
 * Registered as a high-sequenceNum STRT_STYLESHEET on the DEFAULT (Bootstrap) theme
 * (see moit-utils/data/MoitThemeData.xml).
 *
 * IMPORTANT: every rule is prefixed with body.Login so NO other (Bootstrap-based)
 * system view is affected. The Login screen hosts the "Ingresar / Restablecer
 * Contraseña / Cambiar Contraseña" tabs (initialTab='#change'), so body.Login
 * covers password change too.
 *
 * To OPT OUT for a deployment: remove this file's STRT_STYLESHEET ScreenThemeResource row.
 */

/* 1. Clean background (drop the old Bootstrap dot pattern) */
body.Login {
    background: #F4F7F9 !important;
    background-image: none !important;
}

/* 2. Modern floating card — and, for the tabbed login UI, ONE connected card so the tabs
   visibly control the form below them.

   Login.ftl splits the tabbed UI across two sibling elements: a <div class="...form-signin">
   that holds the nav-tabs, and the visible <form class="form-signin"> inside .tab-content.
   We style the wrapper as the card HEADER (top-rounded, no bottom border) and the form as the
   card BODY (bottom-rounded, no top border, zero gap), so they read as a single tabbed card —
   tabs on top, the panel they switch directly beneath. The header's downward drop-shadow is
   hidden behind the opaque form body, so the two pieces join seamlessly.

   Standalone forms that appear WITHOUT tabs (initial-admin setup, 2FA send-code, change-user)
   live outside .tab-content and keep a normal self-contained rounded card via the base rule.
   The element selector (form.form-signin) excludes the per-button demo quick-login forms
   (<form id="TestLoginLink">), which carry no .form-signin class. */

/* base card surface — standalone forms (no tabs above them) */
body.Login form.form-signin {
    background: #FFFFFF !important;
    padding: 40px 32px !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01) !important;
    border: 1px solid #F3F4F6 !important;
    margin-top: 8px !important;
    margin-bottom: 24px !important;
}

/* card HEADER — the nav-tabs wrapper is the top of the connected card */
body.Login .form-signin:has(.nav-tabs) {
    background: #FFFFFF !important;
    border: 1px solid #F3F4F6 !important;
    border-bottom: none !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01) !important;
    padding: 14px 32px 0 !important;
    margin-top: 24px !important;
    margin-bottom: 0 !important;
}

/* card BODY — the visible tabbed form docks flush under the header (no top edge, no gap) */
body.Login .tab-content form.form-signin {
    border-top: none !important;
    border-radius: 0 0 16px 16px !important;
    margin-top: 0 !important;
    padding-top: 28px !important;
}

/* 3. Modernize the tabs (Bootstrap nav-tabs) */
body.Login .nav-tabs {
    border-bottom: 2px solid #E5E7EB !important;
    margin-bottom: 0 !important; /* hug the form card below — tabs read as tabs of that card */
    display: flex;
    justify-content: center;
    border-radius: 0 !important;
}

body.Login .nav-tabs > li {
    margin-bottom: -2px !important;
}

body.Login .nav-tabs > li > a {
    border: none !important;
    background-color: transparent !important;
    color: #5F6776 !important; /* inactive tab — AA 5.29:1 over the page bg (was #6B7280 = 4.49:1, just under AA) */
    font-weight: 500 !important;
    padding: 14px 20px !important;
    font-size: 1.2rem !important;
    transition: color 0.2s ease !important;
}

body.Login .nav-tabs > li > a:hover,
body.Login .nav-tabs > li > a:focus {
    color: #374151 !important;
    background-color: transparent !important;
    outline: none !important; /* drops Bootstrap's dotted mouse-focus box */
    border: none !important;
}

/* ...but KEYBOARD focus must stay visible (WCAG 2.4.7 Focus Visible).
   The .active selectors are included so the ring also wins on the currently-selected tab
   (the active-tab rule below is more specific and would otherwise re-hide the outline). */
body.Login .nav-tabs > li > a:focus-visible,
body.Login .nav-tabs > li.active > a:focus-visible,
body.Login .nav-tabs > li > a.active:focus-visible {
    outline: 2px solid var(--q-color-primary, #2563EB) !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
}

/* Active tab */
body.Login .nav-tabs > li.active > a,
body.Login .nav-tabs > li > a.active,
body.Login .nav-tabs > li.active > a:hover,
body.Login .nav-tabs > li.active > a:focus {
    color: var(--q-color-primary, #2563EB) !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 2px solid var(--q-color-primary, #2563EB) !important;
    font-weight: 600 !important;
    outline: none !important;
}

/* 4. Modernize the inputs */
body.Login .form-control {
    min-height: 54px !important;
    border-radius: 8px !important;
    border: 1px solid #D1D5DB !important;
    box-shadow: none !important;
    background-color: #FFFFFF !important;
    padding: 14px 18px !important;
    font-size: 1.2rem !important;
    color: #374151 !important;
    transition: all 0.2s ease-in-out !important;
    margin-bottom: 20px !important;
}

/* Remove the browser autofill pink background */
body.Login .form-control:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    -webkit-text-fill-color: #374151 !important;
}

/* Input focus — ring at 0.25 alpha so the keyboard-focus state reads clearly */
body.Login .form-control:focus {
    border-color: var(--q-color-primary, #2563EB) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25) !important;
    outline: none !important;
}

/* 5. Modernize the submit button */
body.Login .btn,
body.Login button[type="submit"] {
    background-color: var(--q-color-primary, #2563EB) !important;
    border-color: var(--q-color-primary, #2563EB) !important;
    color: #ffffff !important;
    min-height: 56px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 1.25rem !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2) !important;
    transition: all 0.3s ease !important;
    margin-top: 16px !important;
}

/* Button hover (guarded with :not(:disabled) so a disabled submit doesn't look interactive) */
body.Login .btn:not(:disabled):hover,
body.Login button[type="submit"]:not(:disabled):hover {
    background-color: #1D4ED8 !important;
    border-color: #1D4ED8 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 12px -2px rgba(37, 99, 235, 0.3) !important;
}

/* Button active */
body.Login .btn:active,
body.Login button[type="submit"]:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2) !important;
}

/* Respect users who prefer reduced motion (WCAG 2.3.3 / vestibular safety): keep the styling,
   drop the movement. */
@media (prefers-reduced-motion: reduce) {
    body.Login form.form-signin,
    body.Login .form-control,
    body.Login .nav-tabs > li > a,
    body.Login .btn,
    body.Login button[type="submit"] {
        transition: none !important;
    }
    body.Login .btn:not(:disabled):hover,
    body.Login button[type="submit"]:not(:disabled):hover,
    body.Login .btn:active,
    body.Login button[type="submit"]:active {
        transform: none !important;
    }
}