/* =====================================================================
   eRoyal Impex — Premium Login
   Reskins the untouched #log-* markup copied from ../Default.aspx.
   Loaded AFTER main.css so these rules win the cascade; main.css stays
   linked (unchanged) so the AMC-renewal modal popup (.modalPopup12 /
   .modalBackground) keeps its working styles. Relies on the :root
   variables from premium-theme.css (linked just before this file).
   NOTE: Only visual styling. Control IDs/logic are untouched originals.
   ===================================================================== */

/* #bg1 is an ID selector, so it outranks main.css's ID-based orange sprite
   background AND premium-theme.css's (class-based) body.premium-body
   gradient - redeclaring the same gradient here directly is what actually
   makes it win. */
html {
    height: 100%;
    overflow: hidden;
}
#bg1 {
    background: var(--bg-deep);
    height: 100vh;
    height: 100dvh; /* mobile-correct viewport height - ignores the address-bar show/hide jump that 100vh gets wrong */
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* ---------------------------------------------------------------------
   Split-screen shell: left = rotating IMPEX visual, right = login form.
   No page-level scrollbar - the shell is pinned to exactly one viewport
   height, and only the form side scrolls internally if its content is
   ever taller than the screen (e.g. a very short/zoomed-in window).
   --------------------------------------------------------------------- */
#pm-login-shell {
    display: flex;
    height: 100vh;
    height: 100dvh;
    width: 100%;
}

/* ---- Left: auto-rotating ship / air-cargo / port photography ---- */
#pm-login-visual {
    position: relative;
    flex: 1 1 58%;
    overflow: hidden;
    background: #0c1730;
}

.pm-login-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: pmLoginSlideCycle 24s infinite;
}
/* Each slide's own "on" window (~8s) is deliberately wider than the 6s gap
   between slides starting, so consecutive slides overlap for ~2s while
   crossfading - that overlap is what stops the navy #pm-login-visual
   background from flashing through between images. */
.pm-login-slide:nth-child(1) { animation-delay: 0s; }
.pm-login-slide:nth-child(2) { animation-delay: 6s; }
.pm-login-slide:nth-child(3) { animation-delay: 12s; }
.pm-login-slide:nth-child(4) { animation-delay: 18s; }

@keyframes pmLoginSlideCycle {
    0%      { opacity: 0; transform: scale(1); }
    8.3%    { opacity: 1; }
    29.2%   { opacity: 1; }
    33.3%   { opacity: 0; transform: scale(1.08); }
    100%    { opacity: 0; }
}

#pm-login-visual-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(190deg, rgba(8, 14, 32, 0.35) 0%, rgba(8, 14, 32, 0.55) 45%, rgba(6, 11, 26, 0.92) 100%);
}

#pm-login-visual-overlay {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    gap: 22px;
    padding: 44px 48px;
    box-sizing: border-box;
}

#pm-login-visual-text {
    max-width: 480px;
    margin: 0 auto;
}
#pm-login-visual-text h1 {
    margin: 0 0 14px;
    font-family: var(--font);
    font-size: 34px;
    line-height: 1.2;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.2px;
}
#pm-login-visual-text h1 .pm-login-accent {
    color: var(--brand);
}
#pm-login-visual-text p {
    margin: 0 0 20px;
    font-family: var(--font);
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
}

#pm-login-visual-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
#pm-login-visual-tags span {
    font-family: var(--font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.22);
    padding: 7px 14px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

#pm-login-visual-dots {
    display: flex;
    gap: 7px;
}
#pm-login-visual-dots span {
    width: 22px;
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
    overflow: hidden;
    position: relative;
}
#pm-login-visual-dots span::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: left;
    animation: pmLoginDotFill 24s infinite;
}
#pm-login-visual-dots span:nth-child(1)::after { animation-delay: 0s; }
#pm-login-visual-dots span:nth-child(2)::after { animation-delay: 6s; }
#pm-login-visual-dots span:nth-child(3)::after { animation-delay: 12s; }
#pm-login-visual-dots span:nth-child(4)::after { animation-delay: 18s; }

@keyframes pmLoginDotFill {
    0%    { transform: scaleX(0); }
    8.3%  { transform: scaleX(1); }
    33.3% { transform: scaleX(1); }
    33.4% { transform: scaleX(0); }
    100%  { transform: scaleX(0); }
}

/* ---- Right: the untouched login form, on a plain panel ---- */
#pm-login-formside {
    flex: 1 1 42%;
    min-width: 380px;
    max-width: 560px;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-panel);
    padding: 24px 32px;
    box-sizing: border-box;
    overflow-y: auto;
}

/* ---- Card shell (was: fixed-width 3-slice sprite box) ---- */
#log-pageout {
    width: 100%;
    max-width: 380px;
    height: auto;
    margin: 0;
    background: none;
    overflow: visible;
}

#log-bg-l, #log-bg-r {
    display: none;
}

#log-bg-m {
    float: none;
    width: 100%;
    height: auto;
    background: none;
}

/* ---- Header: brand mark + tagline (was: sprite-image logo + caption) ---- */
#log-top1 {
    width: 100%;
    height: auto;
    margin: 0;
    background: linear-gradient(135deg, #12203f 0%, #1a2a52 100%);
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 20px 28px 16px;
    text-align: center;
}

#log-mainlogo {
    float: none;
    width: auto;
    height: 34px;
    margin: 0 auto;
    background-image: url('../images/login_logo.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#logpage-capt {
    float: none;
    width: auto;
    height: auto;
    margin: 6px 0 0;
    background: none;
}

#logpage-capt::after {
    content: "Sign in to your account";
    display: block;
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.6px;
    color: rgba(255, 255, 255, 0.72);
}

/* ---- Form body ---- */
#log-top2 {
    width: 100%;
    height: auto;
    margin: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    padding: 16px 28px 16px;
    box-sizing: border-box;
}

#log-top2-left {
    float: none;
    width: 100%;
    height: auto;
    margin: 0;
}

#log-txtandlabelcontainer {
    width: 100%;
    height: auto;
    margin: 8px 0 11px;
}

/* id="log-txtandlabelcontainer" is reused on every field row, so :has() on
   its own input is the only way to bump spacing above just one row. */
#log-txtandlabelcontainer:has(#txtUserId),
#log-txtandlabelcontainer:has(#txtPassword),
#log-txtandlabelcontainer:has(.pm-login-label-split),
#log-txtandlabelcontainer:has(#ddlWorkingPeriod) {
    margin-top: 16px;
}

#log-label {
    width: 100%;
    height: auto;
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 4px;
}

/* Group Name + Branch Name: each label sits directly above its own dropdown
   via CSS Grid template-areas. The label markup (#log-label) and the input
   markup (#log-txt-container > #log-txtcon-m) are SEPARATE sibling
   containers in the original markup - stacking each independently (the old
   flex approach) put both labels together, then both dropdowns together
   below them, so it was ambiguous which dropdown belonged to which label.
   display:contents "unwraps" those sibling containers so their children
   become direct items of one shared grid, which can then place each label
   directly above its matching dropdown - and the grid-area mapping is
   simply redefined per breakpoint (see @media below) to go from 2 columns
   side-by-side (desktop) to one interleaved column (mobile/tablet). */
#log-txtandlabelcontainer:has(.pm-login-label-split) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "glabel blabel"
        "ginput binput";
    column-gap: 8px;
    row-gap: 4px;
}
#log-label:has(.pm-login-label-split),
#log-txtandlabelcontainer:has(.pm-login-label-split) #log-txt-container,
#log-txtandlabelcontainer:has(.pm-login-label-split) #log-txtcon-m {
    display: contents;
}
.pm-login-label-split:nth-of-type(1) { grid-area: glabel; }
.pm-login-label-split:nth-of-type(2) { grid-area: blabel; }
#ddlGroupname { grid-area: ginput; width: 100% !important; }
#ddlBranch { grid-area: binput; width: 100% !important; }

#log-txt-container {
    width: 100%;
    height: auto;
    margin-top: 0;
    display: flex;
}

#log-txtcon-l, #log-txtcon-r {
    display: none;
}

#log-txtcon-m {
    width: 100%;
    height: auto;
    float: none;
}

.txt-s, .listtxt-s {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    font-family: var(--font);
    font-size: 13.5px;
    color: var(--text-primary);
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-panel-alt);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

/* Room for the eye-toggle icon so typed characters don't run under it. */
#txtPassword {
    padding-right: 38px;
}

/* The eye icon's own markup carries inline SVG margins (margin-right:-10px
   etc.) tuned for the old, much narrower password field - on this wider,
   padded, rounded input that pushed/overlapped the icon right against the
   border instead of sitting inset inside it. Resetting the position and
   clearing those inline margins here re-centers it neatly inside the field. */
#togglePassword {
    right: 10px !important;
}
#togglePassword svg {
    margin: 0 !important;
    width: 18px;
    height: 18px;
}

.txt-s:focus, .listtxt-s:focus {
    outline: none;
    border-color: var(--brand);
    background: var(--bg-panel);
    box-shadow: 0 0 0 3px rgba(215, 152, 41, 0.16);
}


/* ---- Error / status message ---- */
#log-top2-rght {
    float: none;
    width: 100%;
    height: auto;
    margin: 0;
}

#log-errmsg {
    width: 100%;
    height: auto;
    font-family: var(--font);
    font-size: 12.5px;
    text-align: left;
    color: var(--danger);
    margin: 0 0 4px;
}

/* ---- Buttons (was: text-hidden PNG sprites) ---- */
#log-butt-container {
    width: 100%;
    height: auto;
    margin: 8px 0 4px;
    display: flex;
    gap: 10px;
}

#log-butt-left, #log-butt-rght {
    float: none;
    width: 50%;
    height: auto;
}

.loginButt {
    /* Inline sign-in arrow icon via background-image data URI - <input>
       elements can't take child markup (no ::before/::after either, both
       unsupported on replaced elements), so this is the only way to add an
       icon without changing the control to a LinkButton. The icon layer
       must be listed FIRST: in CSS multi-layer backgrounds the first image
       paints on TOP, so listing the (opaque, full-size) gradient first was
       completely hiding the icon underneath it. */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233a2705' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='17' y2='12'/%3E%3Cpolyline points='11 5 18 12 11 19'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--brand) 0%, #f0b942 100%);
    background-repeat: no-repeat, no-repeat;
    /* Icon offset left of center by roughly half the "Login" text width
       plus its own width/gap, so icon+text read as one centered group.
       (The earlier "icon jumps on hover" bug wasn't actually caused by
       this calc() - it was main.css's legacy .loginButt:hover rule
       fighting for the background-position property; see the :hover
       block below, which now wins that fight directly.) */
    background-position: calc(50% - 30px) center, center;
    background-size: 16px 16px, 100% 100%;
    width: 100%;
    height: 38px;
    text-align: center;
    padding: 0;
    text-indent: 0;
    overflow: visible;
    text-transform: none;
    border: none;
    border-radius: var(--radius-sm);
    color: #3a2705;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: filter .15s ease, transform .1s ease;
}
/* main.css (still linked, for the AMC-renewal popup's styles) has its own
   legacy .loginButt:hover { background-position: left bottom; } left over
   from the old sprite-image button. That rule has an extra :hover
   pseudo-class, so it's MORE SPECIFIC than the plain .loginButt base rule
   above and wins the background-position property on hover regardless of
   stylesheet order - it was silently overriding the icon's position,
   snapping it to 0% 100% (left bottom) on hover. Redeclaring the same
   position here, at equal :hover specificity, wins on source order instead. */
.loginButt:hover {
    background-position: calc(50% - 30px) center, center;
    filter: brightness(1.08);
    box-shadow: 0 6px 16px rgba(215, 152, 41, 0.35);
    transform: translateY(-1px);
}
.loginButt:active {
    background-position: calc(50% - 30px) center, center;
    transform: translateY(1px);
    box-shadow: none;
}

.logincancelButt {
    background: var(--bg-panel-alt);
    width: 100%;
    height: 38px;
    text-indent: 0;
    overflow: visible;
    text-transform: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.logincancelButt:hover {
    background: var(--border-soft);
    color: var(--text-primary);
    border-color: var(--text-faint);
    box-shadow: 0 4px 12px rgba(30, 41, 80, 0.08);
    transform: translateY(-1px);
}
.logincancelButt:active { transform: translateY(1px); box-shadow: none; }

/* ---- Footer ---- */
#log-footer {
    width: 100%;
    max-width: 380px;
    height: auto;
    margin: 22px auto 0;
    font-family: var(--font);
    font-size: 11.5px;
    line-height: 1.45;
    text-align: center;
    color: var(--text-faint);
}
#log-footer span, #log-footer a {
    color: var(--text-faint) !important;
    font-weight: 400 !important;
    font-size: 11.5px !important;
}
#log-footer a:hover {
    color: var(--brand-text) !important;
}

#pm-login-support a {
    color: var(--brand-text) !important;
    font-weight: 600 !important;
}

#pm-login-policy-links {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
#pm-login-policy-links a {
    color: var(--brand-text) !important;
    font-weight: 600 !important;
    text-decoration: none;
}
#pm-login-policy-links a:hover {
    text-decoration: underline;
}
#pm-login-policy-links span {
    color: var(--border);
}

#pm-login-copyright {
    margin-top: 6px;
    font-family: var(--font);
    font-size: 10.5px;
    color: var(--text-faint);
    text-align: center;
}

/* =======================================================================
   Responsive breakpoints - kept at the END of the file on purpose: several
   of these override earlier ID/`:has()` rules of equal specificity, and
   for ties the cascade picks whichever comes LAST in source order
   regardless of the media query - so these must physically sit after the
   base rules they're meant to override, not just be wrapped in @media.

   >1024px      desktop/laptop : full split-screen (default rules above)
   <=1024px     tablet + phone : form only, full width, single-column -
                                  including Group Name / Branch Name, which
                                  would otherwise be the only two fields left
                                  squeezed side by side while every other
                                  field on the form is already full-width.
   ======================================================================= */
@media (max-width: 1024px) {
    #pm-login-visual { display: none; }
    /* With the visual panel gone, justify-content:center (fine on a short
       desktop window) leaves large equal gaps above AND below the card on
       tall phone/tablet screens, since the form is much shorter than the
       viewport - e.g. ~81px empty space top and bottom on a 390x844 phone.
       flex-start + top padding reads as a normal mobile login screen instead. */
    #pm-login-formside {
        flex: 1 1 100%;
        max-width: none;
        min-width: 0;
        justify-content: flex-start;
        padding-top: 48px;
        padding-bottom: 48px;
    }

    /* Same grid, re-mapped to one column - each label now sits directly
       above its own dropdown (glabel/ginput, then blabel/binput) instead
       of both labels stacking above both dropdowns. */
    #log-txtandlabelcontainer:has(.pm-login-label-split) {
        grid-template-columns: 1fr;
        grid-template-areas:
            "glabel"
            "ginput"
            "blabel"
            "binput";
        row-gap: 4px;
    }
    #log-txtandlabelcontainer:has(.pm-login-label-split) .pm-login-label-split:nth-of-type(2) {
        margin-top: 8px;
    }
}

@media (max-width: 640px) {
    #pm-login-formside { padding: 20px 20px; }
    #log-top1 { padding: 18px 20px 14px; }
    #log-top2 { padding: 14px 20px 4px; }
}

@media (max-width: 480px) {
    #pm-login-formside { padding: 16px 14px; }
    #log-top1 { padding: 16px 16px 12px; }
    #log-top2 { padding: 12px 16px 4px; }
    #log-mainlogo { height: 30px; }
}

/* Short/landscape viewports (phones rotated sideways, small laptops with
   the window resized down) - trim vertical rhythm so the form still fits
   without relying on the internal scroll fallback. */
@media (max-height: 560px) {
    #pm-login-formside { padding-top: 12px; padding-bottom: 12px; }
    #log-top1 { padding-top: 12px; padding-bottom: 10px; }
    #log-mainlogo { height: 26px; }
    #logpage-capt { margin-top: 3px; }
    #log-top2 { padding-top: 10px; }
    #log-txtandlabelcontainer { margin-bottom: 7px; }
    #log-footer { margin-top: 6px; }
    #pm-login-policy-links { margin-top: 6px; padding-top: 6px; }
}

/* =====================================================================
   "Already logged in?" confirm dialog - premium reskin.
   This is the jQuery "jquery.alerts" plugin (jConfirm), which reuses the
   SAME #popup_container/#popup_title/#popup_message/#popup_panel ids for
   every alert/confirm/prompt anywhere in the app - restyling those ids
   directly here would re-skin every jAlert() on this page too (e.g. the
   plain "Invalid User Id/Password" messages), which isn't what was asked
   for. Default.aspx.cs sets window.jAlertsDialogClass = 'pm-login-conflict'
   immediately before this ONE jConfirm(...) call and clears it right
   after (jquery.alerts.js reads that window flag, additively, alongside
   its own existing $.alerts.dialogClass check), so #popup_container only
   carries this class for this specific dialog - every rule below is
   scoped under it, and nothing else that uses jAlert/jConfirm on this
   page (or anywhere else in the app) is touched. Only the C# string that
   builds the popup's own inline <script> got a class hook added - no
   login/session logic changed. */
#popup_container.pm-login-conflict {
    font-family: var(--font);
    min-width: 320px;
    max-width: 640px;
    width: max-content;
    background: var(--bg-panel);
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 0;
    overflow: hidden;
}
/* Same dark-navy gradient as #log-top1 (the "Sign in to your account"
   header on the login card itself) - ties this popup back into the
   same visual language instead of the flat-white title it had before. */
#popup_container.pm-login-conflict #popup_title {
    background: linear-gradient(135deg, #12203f 0%, #1a2a52 100%);
    background-image: linear-gradient(135deg, #12203f 0%, #1a2a52 100%);
    border: none;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: center;
    line-height: normal;
    padding: 16px 24px;
    margin: 0;
}
#popup_container.pm-login-conflict #popup_content {
    background: linear-gradient(180deg, var(--bg-panel-alt) 0%, var(--bg-panel) 55%) !important;
    padding: 20px 24px 20px;
    margin: 0;
}
#popup_container.pm-login-conflict #popup_message {
    text-align: center;
    color: var(--text-muted);
    font-size: 13.5px;
    line-height: 1.55;
    white-space: nowrap;
}
#popup_container.pm-login-conflict #popup_panel {
    text-align: right;
    margin: 18px 0 0;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
#popup_container.pm-login-conflict #popup_ok,
#popup_container.pm-login-conflict #popup_cancel {
    font-family: var(--font);
    font-size: 13px;
    font-weight: 700;
    border-radius: 999px;
    padding: 9px 20px;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
#popup_container.pm-login-conflict #popup_ok {
    background: linear-gradient(135deg, var(--brand) 0%, #f0b942 100%);
    border: none;
    color: #fff;
    box-shadow: 0 3px 10px rgba(215, 152, 41, 0.35);
}
#popup_container.pm-login-conflict #popup_ok:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(215, 152, 41, 0.45);
}
#popup_container.pm-login-conflict #popup_cancel {
    background: var(--bg-panel-alt);
    border: 1px solid var(--border);
    color: var(--text-muted);
}
#popup_container.pm-login-conflict #popup_cancel:hover {
    background: #fff;
    color: var(--text-primary);
    border-color: var(--text-faint);
}
/* #popup_overlay is the plugin's shared backdrop (its position/size/base
   color/opacity are set inline via jQuery .css(), for every alert/
   confirm/prompt on this page - not just the login-conflict one). A
   light blur + soft dim behind ANY popup is a general improvement here,
   not something that needs the same per-dialog scoping as the card
   above, so it isn't gated behind .pm-login-conflict. !important only on
   the two properties the plugin already sets inline (background,
   opacity) - everything else it sets (position/size) is left alone. */
#popup_overlay {
    background: rgba(15, 23, 42, 0.32) !important;
    opacity: 1 !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}