/* =====================================================================
   BAF | ERP — shared auth theme  (Registration / Recover-Password / ...)
   Mirrors the legacy register.baf-erp.com "Sign Up" modal:
   Quicksand typeface, vivid multicolour gradient card, #6153a3 lightpurple
   pill button. Used by Areas/Identity/Pages/Account/*.cshtml.
   ===================================================================== */

/* ===== Quicksand — the register.baf-erp.com product typeface ===== */
@font-face {
    font-family: 'Quicksand';
    src: url('/webfonts/quicksand/Quicksand-Regular.woff') format('woff'),
         url('/webfonts/quicksand/Quicksand-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Quicksand';
    src: url('/webfonts/quicksand/Quicksand-Medium.woff') format('woff'),
         url('/webfonts/quicksand/Quicksand-Medium.ttf') format('truetype');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Quicksand';
    src: url('/webfonts/quicksand/Quicksand-Bold.woff') format('woff'),
         url('/webfonts/quicksand/Quicksand-Bold.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap;
}

a[target] { border-bottom: none; }

/* ===== Product-branded full-screen background =====
   This stylesheet loads ONLY on the Identity/Account pages (Login, Registration,
   Recover-Password, Reset-Password, Release-Notes), so styling <body> here is scoped
   to them. The BAF ERP "module ecosystem" image lets even a brand-new visitor see what
   the product is the moment they land on the login/registration screen. A soft dark
   gradient is laid over it so the vivid sign-up card and any text stay readable.
   Artwork: wwwroot/img/001-Version1/LoginBG-1.png . The same image is used on
   all auth pages for a consistent product feel; to give one page its own art later, add a
   page-specific body class and override `body { background: ... }` here. */
/* Clear the app-shell wrapper backgrounds so the full-screen layer below shows through.
   (Scoped: this stylesheet only loads on the Identity/Account pages.) */
html,
body,
body.mod-bg-1,
.page-wrapper,
.page-inner,
.page-content-wrapper,
main.page-content,
#js-page-content {
    background: transparent !important;
    min-height: 100vh;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

/* site.css reserves a permanent scrollbar gutter app-wide (html { scrollbar-gutter:
   stable }) so pages never shift when content grows. On these one-viewport auth pages
   nothing scrolls, so that reserved gutter shows as a bare 10px strip at the right edge
   that looks like a phantom scrollbar. Give the space back here; pages that do scroll
   (e.g. Release-Notes) simply show a real scrollbar in the normal way. */
html {
    scrollbar-gutter: auto !important;
}

/* Full-viewport product background, fixed behind ALL content. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-color: #080a2a; /* base so there's never a white / broken-image flash */
    background-image:
        linear-gradient(rgba(7, 9, 38, 0.55), rgba(12, 7, 40, 0.72)),
        url('/img/001-Version1/LoginBG-1.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Auth pages show ONLY the sign-in card on the product background — hide the app shell
   (top header bar, sidebar, footer, breadcrumb). This also removes the extra height that
   was forcing a page scroll. Scoped: this stylesheet loads only on the auth pages.
   NOTE: the Identity-area layout's own top bar (Areas/Identity/Pages/_PageHeader.cshtml) is
   deliberately NOT in this list — it carries the URL-driven client brand mark. It used to be
   hidden here because it rendered empty. See .su-topbrand further down. */
.page-header,
.page-sidebar,
.page-footer,
.page-breadcrumb,
.page-content .breadcrumb {
    display: none !important;
}

/* The Identity-area layout (Areas/Identity/Pages/_Layout.cshtml) wraps the card in a
   patterned band and a Bootstrap container with big vertical margins (.py-4.my-lg-5).
   Flatten both so the page is exactly one viewport tall — no scrollbar — and the card
   centres on the artwork instead of being pushed down.

   The page is a three-part stack: brand mark (top) / card / client details (bottom). Laying
   the shell out as a flex column and letting only the middle grow keeps the whole thing at
   exactly one viewport whatever the bands measure — the alternative, a fixed 100vh on the
   card area plus two bands, always overflows, and `overflow-y: clip` below would then eat
   the client details rather than scroll to them. */
.page-content-wrapper {
    display: flex !important;
    flex-direction: column;
}
.page-content-wrapper > .flex-1 {
    background: none !important;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.page-content-wrapper > .flex-1 > .container {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100%;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}
.page-content-wrapper > .flex-1 > .container > .row {
    margin: 0 !important;
    flex: 1 1 auto;
    width: 100%;
}

/* There was an `overflow-y: clip` on the login page here. It existed because the layout was
   once EXACTLY one viewport tall, so a stray pixel (per-site zoom rounding 100vh up, an
   extension injecting nodes) painted a useless document scrollbar.
   That premise is gone: the page is now a flex column — brand mark / card / client details —
   whose content sits comfortably inside 100vh on a normal screen, so there is nothing to
   round over and no phantom scrollbar to suppress. Worse, `clip` cannot tell "one stray
   pixel" from "the client details genuinely do not fit on a short laptop screen", and it
   swallows both. A short window now scrolls, which is the honest answer. */

/* ===== URL-driven client branding: brand mark on top, details underneath =====
   Both are rendered from the AppLog.json ClientList entry matching the host being browsed
   (Areas/Identity/Pages/_Logo.cshtml and _PageFooter.cshtml). */

/* The layout's top bar: drop its gradient and fixed height so it is just a place for the
   mark to sit on the product artwork. The artwork leaves the top-centre deliberately clear
   (the module icons start well below it), so the mark gets to be generous here. */
.page-content-wrapper > .height-10.bg-brand-gradient {
    background: none !important;
    box-shadow: none !important;
    height: auto !important;
    flex: 0 0 auto;
    padding: clamp(.75rem, 2.2vh, 1.75rem) 1rem clamp(.25rem, .6vh, .5rem) !important;
}

.su-topbrand {
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important; /* .page-logo clips; the country name hangs below the mark */
    align-items: center;
    justify-content: center;
}

/* ImageStyle from AppLog.json lands on this wrapper, so a client that needs a light plate
   behind its mark still gets one (background-color / border-radius). Padding and margin are
   forced back to the band's own spacing: those values were written for the old full-size
   centred logo (some ask for 50px padding, or a -20px top margin) and would wreck a compact
   top bar. Size stays with the stylesheet, never with the config. */
.su-topbrand-plate {
    position: relative; /* anchors .su-topbrand-country */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    border-radius: 10px;
    padding: 6px 14px !important;
    margin: 0 !important;
}
/* Sized against viewport HEIGHT, not width: what limits this mark is the clear strip above
   the card, and that strip is what shrinks on a short screen.
   The ceiling is a budget, not a taste call — the card is a fixed ~465px, so the band and the
   client bar below it share what is left of the viewport. Raising this much further starts
   pushing the card down into the details rather than filling blank space. */
.su-topbrand-plate img {
    display: block;
    max-height: clamp(60px, 13vh, 135px);
    max-width: min(90vw, 440px);
    width: auto;
    height: auto;
}

.su-client-bar {
    flex: 0 0 auto;
    /* The product artwork runs a row of module icons (FINANCE / CRM / PROJECTS) across the
       lower third. The only clean space down here is the gap between the card and that row,
       so lift the details off the bottom edge into it instead of letting them sit on top of
       the icons. In vh because the artwork is `background-size: cover` and scales with the
       viewport; the clamp keeps it sane at both extremes. */
    padding: clamp(.35rem, 1vh, .6rem) 1rem clamp(1.15rem, 18.6vh, 205px);
    text-align: center;
    font-family: 'Quicksand', "Segoe UI", sans-serif;
    font-size: .82rem;
    line-height: 2; /* the TagLine / CIN lines are <br />-separated, so this is their spacing */
    color: rgba(255, 255, 255, .82);
}
.su-client-inner { max-width: 950px; margin: 0 auto; }
.su-client-name {
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .3px;
    color: #fff;
    margin-bottom: .1rem;
}
.su-client-lines a,
.su-client-contact a { color: #fff; text-decoration: none; }
.su-client-lines a:hover,
.su-client-contact a:hover { color: #fff; text-decoration: underline; }
.su-client-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .3rem 1.15rem;
    margin-top: .45rem;
}
.su-client-contact i { margin-right: .4rem; opacity: .75; }

/* ===== The vivid multicolour card ===== */
.su-wrap {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Height comes from the flex column above (brand mark / card / client details), not from
       a 100vh of its own — see the layout note further up. */
    min-height: 0;
    padding: 1.5vh 1rem;
}

.su-card {
    position: relative;
    width: 100%;
    max-width: 950px;
    border-radius: 20px;
    padding: 1.25rem 2.25rem 1.85rem;
    color: #333;
    font-family: 'Quicksand', "Segoe UI", sans-serif;
    box-shadow: 0 14px 44px -16px rgba(0, 0, 0, .4);
    overflow: hidden;
    background:
        radial-gradient(ellipse 50% 58% at 84% 8%,   rgba(40, 214, 240, .6),  transparent 58%),
        radial-gradient(ellipse 52% 52% at 5% 99%,    rgba(244, 53, 219, .6),  transparent 58%),
        radial-gradient(ellipse 48% 52% at 98% 99%,   rgba(120, 132, 236, .57), transparent 58%),
        radial-gradient(ellipse 36% 42% at 3% 4%,     rgba(246, 190, 222, .53), transparent 58%),
        radial-gradient(ellipse 13% 28% at 102% 50%,  rgba(236, 92, 92, .32),  transparent 58%),
        #ffffff;
}

/* narrower variant for single-field cards (recover password, etc.) */
.su-card.su-card-narrow { max-width: 620px; }

/* header */
.su-head { position: relative; padding: .35rem 0 .85rem; }
.su-title { text-align: center; font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 2rem; color: #2b2b3a; margin: 0; }
.su-close {
    position: absolute; top: -.15rem; right: 0;
    font-size: 1.7rem; line-height: 1; color: #3a3a48; text-decoration: none;
    opacity: .55; transition: opacity .15s ease;
}
.su-close:hover { opacity: 1; color: #3a3a48; text-decoration: none; }

/* divider — full-width light rule (matches the original modal header/footer borders) */
.su-rule { border: 0; border-top: 1px solid rgba(255, 255, 255, .9); margin: .65rem 0; }

/* body: form left, brand right (two-column registration layout) */
.su-body { display: flex; flex-wrap: wrap; align-items: center; padding: 1.5rem 0; }
.su-form { flex: 1 1 25rem; min-width: 0; max-width: 28rem; }
.su-brand {
    position: relative;
    flex: 1 1 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem 3rem; /* bottom padding lifts the centred logo up in the column */
    overflow: visible;
}
.su-brand-monument {
    position: absolute;
    /* Shifted up + a little right of the logo. The box must stay INSIDE the card (card padding is 36px,
       overflow hidden): if it crossed the card edge the clip would cut the photo mid-fade as a hard line. */
    inset: -110px -30px 10px 0;
    /* cover + a closest-side mask: the photo always fills the box and its alpha hits 0 exactly at the
       box edge, so no photo border can ever show as a hard line - the only edges are the fade. */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.5;
    filter: saturate(.9);
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 1;
    mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 0%, rgba(0, 0, 0, 0.9) 25%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.28) 74%, rgba(0, 0, 0, 0.08) 90%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 0%, rgba(0, 0, 0, 0.9) 25%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.28) 74%, rgba(0, 0, 0, 0.08) 90%, transparent 100%);
    transition: background-image 0.4s ease-in-out, opacity 0.3s ease;
}
/* No logo in the card any more (the band carries it), so stretch the column to the form's height:
   the monument's insets are measured off this box, and an empty centred column would shrink the photo. */
.su-card-login .su-brand { align-self: stretch; }
/* The logo's white halo used to veil the photo's centre; without it the photo read at full strength.
   Fainter instead, so it stays a misty backdrop (same idea as the zeetsoft header's fade). */
.su-card-login .su-brand-monument {
    opacity: .3;
    /* 50px lower than the shared -110px/10px: with no logo to sit beside, the photo read too high, up
       by the flags. The bottom now reaches into the footer row - still inside the card's padding, so
       the card's overflow clip never cuts the fade. */
    inset: -60px -30px -40px 0;
}

/* Country name under the top product mark, ending where the logo artwork ends: BAFLogo-OnDark.png's
   ink stops 24px short of its 417px edge (5.76% of the image) and the plate adds 14px padding each
   side, so right = 14px + 5.76% of (plate width - 28px) ~= 5.76% + 12.4px, plus 6px of breathing room;
   it scales with the logo. top pulls it up over the plate's 6px padding to sit close under the tagline. */
.su-topbrand-country {
    position: absolute;
    top: calc(100% - 8px);
    right: calc(5.76% + 18.4px);
    font: 400 18px/1 'Quicksand', "Segoe UI", sans-serif;
    white-space: nowrap;
    /* While the page loads, the flag's colours sweep through the text (first colour repeated last so
       the loop is seamless); on window load .is-loaded fades the fill in to white. The band is dark,
       so flag navy is lifted and Germany's black dropped - both would vanish against it. */
    --flag: #1aa3e8, #fff, #1aa3e8;
    background: linear-gradient(90deg, var(--flag)) 0 0 / 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: color .6s ease;
    animation: su-country-in .5s ease-out .15s both, su-country-flag 1.6s linear infinite;
}
.su-topbrand-country[data-country="in"] { --flag: #f93, #fff, #128807, #f93; }
.su-topbrand-country[data-country="uk"] { --flag: #e0233a, #fff, #4f7bff, #e0233a; }
.su-topbrand-country[data-country="us"] { --flag: #e0464f, #fff, #4f7bff, #e0464f; }
.su-topbrand-country[data-country="ch"] { --flag: #e8392b, #fff, #e8392b; }
.su-topbrand-country[data-country="nl"] { --flag: #e0303c, #fff, #4f7bff, #e0303c; }
.su-topbrand-country[data-country="es"] { --flag: #e8202f, #ffc400, #e8202f; }
.su-topbrand-country[data-country="de"] { --flag: #ff3030, #ffce00, #ff3030; }
.su-topbrand-country.is-loaded {
    color: #fff;
    animation-play-state: running, paused; /* freeze the sweep where it is, so nothing jumps */
}
@keyframes su-country-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes su-country-flag { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
    .su-topbrand-country { animation: none; }
}

/* single-column body (recover password, etc.) */
.su-single { max-width: 32rem; margin: 0 auto; padding: 1.75rem 0 .75rem; }
.su-logo { display: block; max-width: 230px; width: 100%; height: auto; margin: 0 auto 1.25rem; }
.su-sub { text-align: center; color: #555; font-size: .95rem; margin: 0 auto 1.35rem; max-width: 28rem; }
.su-actions { text-align: center; margin-top: .25rem; }
.su-foot { text-align: center; margin-top: 1.1rem; font-size: .9rem; }
.su-foot a { color: #5a3fb0; }

/* inputs */
.su-row { display: flex; gap: 10px; }
.su-row .form-group { flex: 1 1 0; min-width: 0; }
.su-body .su-form .form-group, .su-form .form-group { margin-bottom: 13px; }
.su-card .form-control {
    font-family: 'Quicksand', sans-serif;
    display: block;
    width: 100%;
    height: 46px;
    border-radius: 10px;
    border: 1px solid rgba(97, 83, 163, .22);
    background: rgba(255, 255, 255, .92);
    font-size: .95rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.su-card .form-control::placeholder { color: #9aa0ad; }
.su-card .form-control:focus {
    border-color: rgba(97, 83, 163, .6);
    box-shadow: 0 0 0 .2rem rgba(97, 83, 163, .16);
}

#otp { letter-spacing: .35em; font-weight: 700; text-align: center; }

/* submit button — exact .lightpurple_btn.br_25 (solid #6153a3, hover inverts) */
#btnSubmit, .su-btn {
    margin-top: 4px;
    display: inline-block;
    background: #6153a3;
    color: #fff;
    font-family: 'Quicksand', sans-serif; font-weight: 700;
    border: 2px solid #6153a3;
    border-radius: 25px;
    padding: .7rem 2rem;
    cursor: pointer;
    transition: all .3s ease-in-out;
}
#btnSubmit:hover:not(:disabled), .su-btn:hover:not(:disabled) { background: #fff; color: #6153a3; }
#btnSubmit:disabled, .su-btn:disabled { opacity: .7; cursor: default; }

/* outline variant + button row + login helpers */
.su-btn-outline { background: transparent; color: #6153a3; }
.su-btn-outline:hover:not(:disabled) { background: #6153a3; color: #fff; }
.su-btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.su-btn-row .su-btn { margin-top: 0; height: 46px; display: inline-flex; align-items: center; justify-content: center; padding: 0 1.5rem; }
.su-btn-row #js-login-btn { flex: 1.35 1 0; }
.su-btn-row .su-btn-outline { flex: 1 1 0; }
.su-card.su-card-login { max-width: 860px; }
.su-card-login .su-head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; }
.su-card-login .su-title { grid-column: 1; text-align: left; }
.su-card-login .baf-country-links {
    justify-self: end;
    gap: 6px;
    padding: 6px;
    background: rgba(255, 255, 255, .8);
    border: 1px solid rgba(23, 103, 142, .16);
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(23, 103, 142, .1);
}
.su-card-login .baf-country-links a { width: 40px; height: 40px; border-radius: 10px; text-decoration: none; }
.su-card-login .baf-country-links svg { border-radius: 2px; }
.su-card-login .baf-country-links a:hover { background: #e4f3f8; }
.su-card-login .baf-country-links a[aria-current="true"] { background: #fff; border-color: transparent; box-shadow: 0 0 0 1px rgba(23, 103, 142, .28), 0 3px 10px rgba(23, 103, 142, .16); }
.su-card-login .baf-country-links a:focus-visible { outline-offset: 2px; }
@media (max-width: 575px) {
    .su-card-login .su-head { grid-template-columns: 1fr; gap: .85rem; }
    .su-card-login .su-title { grid-column: 1; text-align: center; }
    .su-card-login .baf-country-links { justify-self: center; }
}

/* Inquiry: the login card's header and footer with the logo IN the header row (title | logo | flags), then a
   compact two-column form - no country field, the domain (flag) is the country. Kept short to fit one viewport. */
.su-card-inquiry .su-head { grid-template-columns: auto 1fr auto; }
.su-card-inquiry .su-brand { grid-column: 2; padding: 0; min-width: 0; }
/* The logo moved up to the band, so .su-brand is empty and centred at 0px tall: these insets ARE the photo's
   size. Taller than wide-ish and weighted downward, so it fills the gap above the form instead of sitting
   on the title row. The form is lifted over it below, so the photo shows between the fields, never across them. */
.su-card-inquiry .su-brand-monument { inset: -50px -20px -120px -20px; }
.su-card-inquiry .su-inq-form { position: relative; z-index: 2; }
.su-card-inquiry .baf-country-links { grid-column: 3; }
.su-inq-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
/* See-through enough to let the monument read behind the top rows; solid again while typing. */
.su-inq-form .form-control { margin: 0; background: rgba(255, 255, 255, .6); }
.su-inq-form .form-control:focus { background: rgba(255, 255, 255, .92); }
.su-inq-form .su-inq-wide { grid-column: 1 / -1; }
.su-inq-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 2px; }
.su-inq-actions #btnSubmit { margin-top: 0; height: 46px; padding: 0 2rem; }
.su-inq-actions .su-inq-otp { width: 11rem; flex: 0 0 auto; }
.su-inq-actions .su-inq-otp[hidden] { display: none; }
.su-inq-actions a { margin-left: auto; color: #5a3fb0; font-size: .92rem; }
.su-inq-form .reg-status { grid-column: 1 / -1; margin-top: 0; min-height: 0; }
.su-inq-form .reg-status:empty { display: none; }
.su-card-inquiry .su-foot-bar { margin-top: .6rem; }
@media (max-width: 575px) {
    .su-card-inquiry .su-brand, .su-card-inquiry .baf-country-links { grid-column: 1; }
    .su-inq-form { grid-template-columns: 1fr; }
    .su-inq-actions a { margin-left: 0; }
}
/* Inquiry requirements + demo: the same card, with the module catalogue as collapsible white groups
   of native checkboxes (the catalogue is ~40 boxes, so no custom-control markup per box). */
.su-req { padding: .35rem 0 .25rem; color: #444; }
.su-req-intro { margin: 0 0 .75rem; }
.su-req-meta { font-size: .9rem; color: #555; margin: 0 0 1rem; }
.su-req-group {
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(97, 83, 163, .18);
    border-radius: 10px;
    padding: .65rem 1rem;
    margin-bottom: .6rem;
}
.su-req-group[open] { background: rgba(255, 255, 255, .92); }
.su-req-group summary { cursor: pointer; font-weight: 700; color: #6153a3; }
.su-opt { display: flex; align-items: center; gap: .55rem; margin: .5rem 0 0; cursor: pointer; font-size: .95rem; }
.su-opt input { width: 17px; height: 17px; margin: 0; accent-color: #6153a3; flex-shrink: 0; }
/* "You asked about" note, the one collapsed line hiding the other modules, and the HRMS operations
   block that only shows while an HRMS module is ticked (:has, so no script). */
.su-req-asked { background: rgba(97, 83, 163, .08); border-left: 3px solid #6153a3; border-radius: 8px; padding: .6rem .9rem; margin: 0 0 .75rem; font-size: .92rem; }
.su-req-asked p { margin: .25rem 0 0; }
.su-req-browse { margin: .25rem 0 .5rem; }
.su-req-browse > summary { cursor: pointer; font-weight: 700; color: #6153a3; padding: .45rem 0; }
.su-req-browse[open] > summary { margin-bottom: .5rem; }
.su-req-count { font-weight: 400; color: #777; font-size: .85rem; margin-left: .45rem; }
.su-card-req .su-body { padding: .35rem 0 0; align-items: flex-start; }
.su-card-req .su-form { max-width: 30rem; }
/* One line over the faded globe, so the empty column invites rather than sits blank. */
.su-req-join { position: relative; z-index: 2; margin: 0; text-align: center; font-weight: 700; font-size: 1.1rem; color: #2b2b3a; max-width: 15rem; align-self: center; }
.su-req-join small { display: block; margin-top: .4rem; font-weight: 500; font-size: .85rem; color: #555; }
.su-card-req .su-brand { padding-top: 5rem; }
.su-req-hrms { display: none; }
.su-req:has(.su-req-group[data-module^="HRMS" i] input:checked) .su-req-hrms { display: block; }
.su-req-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; align-items: end; margin-top: 1rem; }
.su-req-fields .su-req-wide { grid-column: 1 / -1; }
.su-req .form-group { margin-bottom: 13px; }
.su-req .form-group > label { display: block; font-size: .85rem; font-weight: 700; color: #555; margin-bottom: .3rem; }
.su-req textarea.form-control { height: auto; padding: .6rem .75rem; }
.su-req-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.su-req-actions .su-btn { margin-top: 0; height: 46px; padding: 0 2rem; display: inline-flex; align-items: center; }
.su-req-actions a { margin-left: auto; color: #5a3fb0; font-size: .92rem; }
@media (max-width: 575px) {
    .su-req-fields { grid-template-columns: 1fr; }
    .su-req-actions a { margin-left: 0; }
}

.su-check { text-align: left; margin: .25rem 0 1rem; }
.su-check-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem 1rem; margin: .25rem 0 1rem; }
.su-check-row .su-check { margin: 0; }
.su-check-row a { color: #5a3fb0; font-size: .95rem; }
.su-meta .su-dot, .su-req-meta .su-dot { margin: 0 .5rem; color: #aaa; }
.su-meta { text-align: center; font-size: .8rem; color: #777; margin-top: .4rem; }
.su-meta a { color: #5a3fb0; }

/* recover-password link aligned under the Login button (login page) */
.su-actions-start { text-align: left; padding-left: .15rem; }

/* footer row: meta stays centered, "Powered By ZeetSoft" pinned to the right, clear of the rule */
.su-foot-bar { position: relative; display: flex; align-items: center; justify-content: center; min-height: 3.4rem; }
.su-foot-bar .su-meta { margin: 0; }
.su-foot-bar .su-foot { margin: 0; }
.su-powered { position: absolute; right: 0; top: 50%; transform: translateY(-50%); line-height: 0; }
.su-powered img { height: 58px; width: auto; display: block; }

/* ===== Release Notes ===== */
.su-card.su-card-notes { max-width: 820px; }
.rn-body { padding: 1.5rem 0 .5rem; }
.rn-search { margin-bottom: 1.25rem; }
.rn-post {
    background: rgba(255, 255, 255, .94);
    border: 1px solid #e6e8ef;
    border-radius: 10px;
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
    box-shadow: 0 8px 22px -14px rgba(20, 20, 50, .35);
}
.rn-head { display: flex; align-items: flex-start; gap: .8rem; }
.rn-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid #e3e3e3; background: #fff; padding: 2px; }
.rn-meta { min-width: 0; }
.rn-title { font-weight: 700; text-transform: uppercase; font-size: .92rem; letter-spacing: .3px; }
.rn-title a { color: #6153a3; text-decoration: none; }
.rn-title .rn-ver { color: #8a8f9e; font-weight: 400; text-transform: none; }
.rn-author { display: block; color: #2b9fd6; font-size: .85rem; font-weight: 600; text-decoration: none; margin-top: 1px; }
.rn-stars { color: #f3b228; font-size: .82rem; margin-top: 3px; }
.rn-stars .rn-votes { color: #9aa0ad; font-style: italic; margin-left: 4px; }
.rn-likes { margin-left: auto; color: #444; font-weight: 600; white-space: nowrap; }
.rn-likes i { color: #ec4899; margin-left: 4px; }
.rn-text { margin: .85rem 0 .6rem; color: #444; }
.rn-foot { border-top: 1px solid #eef0f4; padding-top: .65rem; color: #8a8f9e; font-size: .85rem; font-style: italic; }
.rn-foot i { margin-right: 5px; }

.reg-status { margin-top: .85rem; font-family: 'Quicksand', sans-serif; font-size: .92rem; font-weight: 700; min-height: 1.2rem; color: #7a1f1f; }
.reg-status.ok { color: #0e7c6f; }
.reg-status.err { color: #b0341f; }

@media (max-width: 767px) {
    .su-card { padding: 1.25rem 1.25rem 1.25rem; }
    .su-title { font-size: 1.6rem; }
    .su-body { flex-direction: column-reverse; padding: 1rem 0; }
    .su-form { max-width: 100%; }
    /* stack the powered-by badge below the meta instead of overlapping it */
    .su-foot-bar { flex-direction: column; min-height: 0; gap: .35rem; }
    .su-powered { position: static; transform: none; right: auto; }
    .su-powered img { height: 46px; margin: 0 auto; }

    .su-topbrand-plate img { max-height: clamp(40px, 8vh, 70px); max-width: 62vw; }
    /* Narrow screens stack the card's two columns, so the page scrolls anyway — there is no
       "gap above the artwork" to aim for. The bottom padding is NOT dead space though: the
       non-prod environment pill (_EnvironmentBadge) sits fixed bottom-CENTER (~10-38px band),
       exactly where the last centred contact link lands when scrolled to the bottom, so keep
       the links lifted clear of it. */
    .su-client-bar { font-size: .76rem; padding: .4rem 1rem 3.25rem; }
    .su-client-contact { gap: .2rem .8rem; }
}

/* Short windows (a 1366x768 laptop leaves ~640px of viewport) cannot fit the card AND a
   17vh gap above the artwork — the card alone is most of the height. Trade the artwork
   clearance for a page that still mostly fits rather than one that scrolls a long way. */
@media (min-width: 768px) and (max-height: 860px) {
    .su-client-bar { padding-bottom: clamp(1.15rem, 5vh, 3rem); }
}