/* ==========================================================================
   PPMS login - "Heritage Civic" treatment
   --------------------------------------------------------------------------
   Built from the owner's reference (ui_ideas/idea_stitch_bangladesh_government
   _login_portal.zip): a full-bleed photograph of the PWD headquarters behind
   floating cards, in the product's own blue palette. The reference is drawn in Monument
   Red; this page no longer uses it, so the login hands off into the app
   without a colour change at the door.

   Layout: two cards side by side - the sign-in form, and an Instructions &
   Support card. The whole page is sized to fit in one viewport at 100% zoom
   on a 1366x768 laptop, so there is no vertical scrollbar; below that it
   falls back to normal stacked flow and scrolls as usual.

   This supersedes ppms-d4-login.css, which is left untouched on disk - the
   previous D4 login is a one-line revert in auth/login.blade.php.

   Deliberate departures from the reference, and why:
     - No "E-Nothi Portal" button. PPMS has no e-Nothi or SSO integration
       (verified: zero references in app/, routes/, config/). A sign-in route
       that does not exist is worse than no button, so that slot carries the
       real secondary action instead - Create a new account, which does exist.
     - No "Privacy Policy" link. There is no such route; Terms of Use is real
       (registration/terms-conditions), so only that is linked.
     - The field is labelled "Username", not "Username / NID". PPMS
       authenticates against its own users table, not against NID.
     - Type stays Nunito Sans + Noto Sans Bengali rather than the reference's
       Public Sans. Both are already loaded for the rest of the product, and a
       third family is real weight on the connections most of these 5,200
       users are on.

   The accent lives in one token block below, mirrored from ppms-d4.css.
   ========================================================================== */

:root {
    /* The product's own accent. This page cannot read the --d4-* tokens: it
       loads its own bundle, not ppms-d4.css, so the values are repeated here
       rather than referenced. They are the D4 palette exactly - change one
       there and it needs changing here too. */
    --hl-primary:      #0f6cbd;   /* --d4-accent      */
    --hl-primary-dark: #0b559a;   /* --d4-accent-dark */
    --hl-primary-soft: #e8f2fb;   /* --d4-accent-soft */

    /* Cool neutrals to match. The warm greys this page started with were
       picked to sit under a red accent; under blue they read as dirty. */
    --hl-surface:   #ffffff;      /* --d4-card       */
    --hl-surface-2: #f2f5f8;      /* --d4-canvas     */
    --hl-ink:       #1f2733;      /* --d4-ink        */
    --hl-ink-2:     #52616f;      /* --d4-ink-2      */
    --hl-muted:     #93a0ad;      /* --d4-ink-muted  */
    --hl-outline:   #e4e9ee;      /* --d4-line       */
    --hl-outline-2: #cfd8e0;      /* --d4-line-2     */

    --hl-good: #107c41;   /* --d4-good */
    --hl-bad:  #c23934;   /* --d4-bad  */

    --hl-r:    14px;  /* --d4-r   - cards    */
    --hl-r-s:  10px;  /* --d4-r-s - controls */

    --hl-font: "Nunito Sans", "Noto Sans Bengali", "Segoe UI", Nikosh, NikoshBAN, system-ui, -apple-system, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    font-family: var(--hl-font);
    color: var(--hl-ink);
    background-color: #16202c;   /* shows through before the photo paints */
}

/* --- Stage: the photograph, plus a scrim that guarantees card contrast ---
   The image itself is set from the Blade file as --hl-bg, so swapping which
   photograph is used is a one-line change there. */
body.hl-body {
    background-image:
        linear-gradient(rgba(14, 20, 29, .60), rgba(14, 20, 29, .74)),
        var(--hl-bg, url("../../login_bg/pwd-dusk.jpg"));
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
}

.hl-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 16px 16px;
}

/* Two cards, side by side. Widths are fixed so the pair stays centred and the
   form never stretches to an uncomfortable measure. */
.hl-grid {
    display: grid;
    grid-template-columns: 412px 348px;
    gap: 18px;
    align-items: stretch;
    width: 100%;
    max-width: 778px;
}

/* --- Cards -------------------------------------------------------------- */
.hl-card,
.hl-aside {
    background: var(--hl-surface);
    border: 1px solid var(--hl-outline-2);
    border-radius: var(--hl-r);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .34);
}

.hl-card  { padding: 24px 26px 22px; }
.hl-aside { padding: 22px 22px 20px; display: flex; flex-direction: column; }

/* --- Masthead ----------------------------------------------------------- */
.hl-head { text-align: center; margin-bottom: 16px; }

.hl-seal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px; height: 62px;
    margin-bottom: 9px;
    background: #fff;
    border: 1px solid var(--hl-outline-2);
    border-radius: var(--hl-r-s);
}
.hl-seal img { width: 46px; height: 46px; object-fit: contain; }

.hl-head h1 {
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: -.2px;
    color: var(--hl-primary-dark);
}

.hl-bn {
    margin: 0 0 3px;
    font-size: 14px;      /* Bengali set ~10% larger, per the reference */
    font-weight: 600;
    color: var(--hl-ink-2);
    line-height: 1.5;
}

.hl-org {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--hl-muted);
    line-height: 1.5;
}

.hl-rule {
    height: 1px;
    background: var(--hl-outline);
    margin: 14px 0 16px;
    border: 0;
}

/* --- Fields ------------------------------------------------------------- */
.hl-field { margin-bottom: 13px; }

.hl-field > label {
    display: block;
    margin-bottom: 5px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--hl-ink);
}

.hl-input { position: relative; display: block; }

.hl-input > i.hl-lead {
    position: absolute;
    top: 50%; left: 13px;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--hl-muted);
    pointer-events: none;
}

.hl-input input[type="text"],
.hl-input input[type="password"] {
    width: 100%;
    height: 43px;
    padding: 0 42px 0 36px;
    font-family: var(--hl-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--hl-ink);
    background: var(--hl-surface-2);
    border: 1px solid var(--hl-outline);
    border-radius: var(--hl-r-s);
    outline: none;
    transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
}

.hl-input input::placeholder { color: var(--hl-muted); font-weight: 500; }

.hl-input input:focus {
    background: #fff;
    border-color: var(--hl-primary);
    box-shadow: 0 0 0 2px rgba(15, 108, 189, .22);   /* required high-contrast focus */
}

/* Show / hide password */
.hl-eye {
    position: absolute;
    top: 50%; right: 5px;
    transform: translateY(-50%);
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: none;
    border: 0;
    border-radius: var(--hl-r-s);
    color: var(--hl-muted);
    cursor: pointer;
}
.hl-eye:hover { color: var(--hl-ink); background: var(--hl-outline-2); }

/* Laravel validation output */
.invalid-feedback,
.hl-field .invalid-feedback {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--hl-bad);
}

/* --- Remember / forgot -------------------------------------------------- */
.hl-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 2px 0 15px;
    font-size: 12.5px;
}

.hl-row label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-weight: 600;
    color: var(--hl-ink-2);
    cursor: pointer;
}

.hl-row input[type="checkbox"] {
    width: 15px; height: 15px;
    accent-color: var(--hl-primary);
    cursor: pointer;
}

.hl-row a { color: var(--hl-primary); font-weight: 700; text-decoration: none; }
.hl-row a:hover { color: var(--hl-primary-dark); text-decoration: underline; }

/* --- Buttons ------------------------------------------------------------ */
.hl-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    height: 45px;
    font-family: var(--hl-font);
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: .01em;
    color: #fff;
    background: var(--hl-primary);
    border: 1px solid var(--hl-primary);
    border-radius: var(--hl-r-s);
    cursor: pointer;
    transition: background-color .14s ease, border-color .14s ease;
}
.hl-submit:hover  { background: var(--hl-primary-dark); border-color: var(--hl-primary-dark); }
.hl-submit:active { background: #094a86; }
.hl-submit:focus-visible { outline: 3px solid rgba(15, 108, 189, .35); outline-offset: 2px; }

/* "Or" divider */
.hl-or {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 15px 0 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hl-muted);
}
.hl-or::before, .hl-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--hl-outline);
}

/* Secondary action - outlined, per the reference's button spec */
.hl-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    height: 43px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--hl-primary);
    background: transparent;
    border: 1px solid var(--hl-primary);
    border-radius: var(--hl-r-s);
    text-decoration: none;
    transition: background-color .14s ease, color .14s ease;
}
.hl-secondary:hover { background: var(--hl-primary); color: #fff; text-decoration: none; }

/* ==========================================================================
   Instructions & Support card
   ========================================================================== */
.hl-aside-t {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--hl-primary-dark);
}
.hl-aside-t i { font-size: 13px; color: var(--hl-primary); }

/* Numbered steps */
.hl-steps {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    counter-reset: hlstep;
}
.hl-steps li {
    position: relative;
    counter-increment: hlstep;
    padding: 0 0 9px 27px;
    font-size: 12.8px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--hl-ink-2);
}
.hl-steps li::before {
    content: counter(hlstep);
    position: absolute;
    top: 1px; left: 0;
    width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    font-size: 10.5px;
    font-weight: 800;
    color: var(--hl-primary);
    background: var(--hl-primary-soft);
    border-radius: 50%;
}
.hl-steps strong { color: var(--hl-ink); font-weight: 800; }
.hl-steps a { color: var(--hl-primary); font-weight: 700; text-decoration: none; }
.hl-steps a:hover { text-decoration: underline; }

.hl-aside hr {
    height: 1px;
    background: var(--hl-outline-2);
    border: 0;
    margin: 0 0 13px;
}

/* Help links inside the aside */
.hl-help { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.hl-help a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 12.8px;
    font-weight: 700;
    color: var(--hl-ink-2);
    text-decoration: none;
}
.hl-help a:hover { color: var(--hl-primary); text-decoration: none; }
.hl-help i { width: 14px; text-align: center; color: var(--hl-muted); }
.hl-help a:hover i { color: var(--hl-primary); }

/* Support contacts - now inside the card, pinned to its foot */
.hl-support { margin-top: auto; }

.hl-contacts { display: flex; flex-direction: column; gap: 7px; }

.hl-contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 11px;
    background: var(--hl-surface-2);
    border: 1px solid var(--hl-outline-2);
    border-radius: var(--hl-r-s);
    font-size: 12.8px;
    font-weight: 700;
    color: var(--hl-ink);
    text-decoration: none;
}
.hl-contact:hover { border-color: var(--hl-primary); color: var(--hl-primary-dark); text-decoration: none; }
.hl-contact span { font-weight: 700; color: var(--hl-primary); white-space: nowrap; }
.hl-contact i { margin-right: 6px; color: var(--hl-muted); }
.hl-contact:hover i { color: var(--hl-primary); }

/* --- Page footer -------------------------------------------------------- */
.hl-foot {
    text-align: center;
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .74);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
.hl-foot a { color: rgba(255, 255, 255, .92); text-decoration: none; }
.hl-foot a:hover { text-decoration: underline; }
.hl-dot { color: rgba(255, 255, 255, .45); margin: 0 6px; }

/* --- Modals -------------------------------------------------------------
   Mirrors ppms-d4.css section 20, which dresses every dialog in the rest of
   the product. This page loads its own bundle and cannot see that file, so
   the treatment is repeated here - a dialog opened from the login should not
   look different from the same dialog opened once you are inside. */
.modal-backdrop,
.modal-backdrop.show {
    background-color: rgba(14, 20, 29, .55) !important;
    -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
    opacity: 1 !important;
}
.modal-dialog { display: flex; align-items: center; min-height: calc(100% - 3.5rem); }
.modal-dialog > .modal-content { width: 100%; }

.modal-content {
    background-color: var(--hl-surface);
    border: 0;
    border-radius: var(--hl-r);
    box-shadow: 0 12px 48px rgba(14, 20, 29, .30);
}
.modal-header {
    align-items: center;
    padding: 16px 22px;
    border-bottom: 1px solid var(--hl-outline);
}
.modal-title { font-size: 16px; font-weight: 800; color: var(--hl-ink); }
.modal-header .close {
    width: 32px; height: 32px;
    padding: 0; margin: 0 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--hl-r-s);
    font-size: 21px; font-weight: 400; line-height: 1;
    color: var(--hl-muted);
    text-shadow: none;
    opacity: 1;
}
.modal-header .close:hover { background: var(--hl-surface-2); color: var(--hl-ink); opacity: 1; }
.modal-body { padding: 20px 22px; }
.modal-body .btn-primary {
    background: var(--hl-primary) !important;
    border-color: var(--hl-primary) !important;
    font-weight: 700;
    border-radius: var(--hl-r-s) !important;
}
.modal-body .btn-primary:hover {
    background: var(--hl-primary-dark) !important;
    border-color: var(--hl-primary-dark) !important;
}

/* ==========================================================================
   Fitting one viewport
   --------------------------------------------------------------------------
   On a normal desktop the whole page is meant to sit inside 100vh with no
   scrollbar. Both cards are sized for that above. The guard below only kicks
   in where there is genuinely room, so a short window or a phone still gets
   ordinary scrolling rather than clipped content.
   ========================================================================== */
@media (min-width: 900px) and (min-height: 660px) {
    html, body { height: 100%; overflow: hidden; }
    .hl-shell { height: 100vh; min-height: 0; }
}

/* --- Narrow / short screens: stack, and let the page scroll -------------- */
@media (max-width: 899px) {
    .hl-grid {
        grid-template-columns: minmax(0, 430px);
        justify-content: center;
        max-width: 430px;
    }
    .hl-aside { order: 2; }
}

@media (max-width: 560px) {
    body.hl-body { background-attachment: scroll, scroll; }
    .hl-shell { padding: 16px 12px 14px; justify-content: flex-start; }
    .hl-card  { padding: 20px 18px 18px; border-radius: var(--hl-r-s); }
    .hl-aside { padding: 18px 16px 16px; border-radius: var(--hl-r-s); }
    .hl-head h1 { font-size: 18px; }
    .hl-seal { width: 56px; height: 56px; }
    .hl-seal img { width: 42px; height: 42px; }
}

/* A fixed background is a scroll cost on low-end devices; drop it for anyone
   who has asked for reduced motion. */
@media (prefers-reduced-motion: reduce) {
    body.hl-body { background-attachment: scroll, scroll; }
}