/* ============================================================================
   delta.css  -  Delta State Teachers Recruitment Portal

   Sits on top of the template's app.min.css. Nothing in the vendor files is
   edited: they are minified third-party CSS and any change to them is lost the
   moment the template is updated. Everything Delta-specific lives here.

   Load order: bootstrap, icons, app.min, then this.
   ============================================================================ */

:root {
    --dl-blue:        #012148;   /* sidebar body */
    --dl-blue-brand:  #001738;   /* brand block, darker than the body */
    --dl-blue-card:   #073466;   /* the inset identity card */
    --dl-blue-active: #084280;   /* active navigation row */
    --dl-cyan:        #2CC6E0;   /* active accent bar */
    --dl-gold:        #F0B429;
    --dl-ink:         #1E2D50;
    --dl-muted:       #6B7A90;
    --dl-line:        #E4E9F2;
    --dl-soft:        #F4F6F9;   /* soft panel ground on white pages */
}

/* ===== sidebar ==================================================== */
html[data-startbar="delta"] .startbar { background-color: var(--dl-blue); }

/* Brand: crest and wordmark on one baseline, filling the block rather than
   floating in the top-left of it. */
html[data-startbar="delta"] .startbar .brand {
    background-color: var(--dl-blue-brand);
    display: flex;
    align-items: center;
    padding: 0 14px;
}
html[data-startbar="delta"] .startbar .brand .logo {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* Nav text. The template's own colour is a low-contrast slate that disappears
   on a dark ground. */
html[data-startbar="delta"] .startbar .startbar-menu .navbar-nav .nav-item .nav-link,
html[data-startbar="delta"] .startbar .startbar-menu .navbar-nav .nav-item .nav-link span {
    color: rgba(255, 255, 255, .86);
}
html[data-startbar="delta"] .startbar .startbar-menu .navbar-nav .nav-item .nav-link .menu-icon,
html[data-startbar="delta"] .startbar .startbar-menu .navbar-nav .nav-item .nav-link i {
    color: rgba(255, 255, 255, .70);
}

/* :not(.active) is the fix for the "double" effect on hover. Hovering the
   current item was painting a translucent white layer ON TOP of its solid active
   background, and the two together read as a shadow or a second highlight.
   app.js also adds .active client-side to any link whose href matches the URL,
   so the current item can carry the class twice over - all the more reason for
   hover to leave it alone entirely. */
    html[data-startbar="delta"] .startbar .startbar-menu .navbar-nav .nav-item .nav-link:not(.active):hover {
        color: #ffffff;
        background-color: rgba(255, 255, 255, .06);
        box-shadow: none !important;
    }

        html[data-startbar="delta"] .startbar .startbar-menu .navbar-nav .nav-item .nav-link:not(.active):hover span,
        html[data-startbar="delta"] .startbar .startbar-menu .navbar-nav .nav-item .nav-link:not(.active):hover i {
            color: #ffffff;
            background-color: transparent !important;
            box-shadow: none !important;
        }

    html[data-startbar="delta"] .startbar .startbar-menu .navbar-nav .nav-item .nav-link,
    html[data-startbar="delta"] .startbar .startbar-menu .navbar-nav .nav-item .nav-link:hover,
    html[data-startbar="delta"] .startbar .startbar-menu .navbar-nav .nav-item.active .nav-link {
        box-shadow: none !important;
    }

/* Active row.

   The template ships THREE rules that fight each other here: a purple tint, a
   purple border-color, and border-bottom:1px solid #6f6af8 marked !important.
   Together they drew a stray underline in a colour from another palette, which
   is what made the active item look broken. All three are overridden, and the
   bottom border has to be beaten with !important because that is how it was
   declared. */
html[data-startbar="delta"] .startbar .startbar-menu .navbar-nav .nav-item .nav-link.active,
html[data-startbar="delta"] .startbar .startbar-menu .navbar-nav .nav-item.active .nav-link.active {
    color: #ffffff;
    background-color: var(--dl-blue-active);
    border: 0 !important;
    border-radius: 6px;
    box-shadow: none !important;
}

/* The template already draws a 4px indicator through ::before at left:-16px, and
   colours it #6f6af8 on BOTH active and hover. Adding my own border-left put a
   second bar beside it - that was the double highlight. Theirs is reused,
   recoloured, and shown on active only: a bar that also appears on hover reads
   as though two items are selected at once. */
html[data-startbar="delta"] .startbar .startbar-menu .navbar-nav .nav-item .nav-link::before,
html[data-startbar="delta"] .startbar .startbar-menu .navbar-nav .nav-item .nav-link:hover::before {
    background-color: transparent !important;
    border-color: transparent !important;
}
html[data-startbar="delta"] .startbar .startbar-menu .navbar-nav .nav-item .nav-link.active::before {
    background-color: var(--dl-cyan) !important;
    border-color: var(--dl-cyan) !important;
}
html[data-startbar="delta"] .startbar .startbar-menu .navbar-nav .nav-item .nav-link.active span,
html[data-startbar="delta"] .startbar .startbar-menu .navbar-nav .nav-item .nav-link.active i,
html[data-startbar="delta"] .startbar .startbar-menu .navbar-nav .nav-item.active .nav-link.active .menu-icon {
    color: #ffffff !important;
}

html[data-startbar="delta"] .startbar .menu-label {
    color: rgba(255, 255, 255, .46);
    letter-spacing: .10em;
    font-size: 10.5px;
    text-transform: uppercase;
}

/* ===== sidebar identity card ====================================== */
/* Margin is small on purpose: at 12px each side the card read as a floating
   tile in a wide gutter. 8px lets it fill the column while still reading as an
   inset panel rather than a full-bleed band. */
.dl-idcard {
    background: var(--dl-blue-card);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 10px;
    padding: 18px 12px 16px;
    margin: 12px 10px 8px;
    text-align: center;
    /* The sidebar's inner wrapper is a flex column with align-items:start, so a
       child sizes to its content unless told otherwise. Every margin reduction
       so far was treating a symptom. */
    align-self: stretch;
}
.dl-idcard img {
    width: 92px; height: 92px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(255, 255, 255, .90);
    background: #001738;
}
.dl-idcard .dl-id {
    margin-top: 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #ffffff;
    overflow-wrap: anywhere;
}
.dl-idcard .dl-sub {
    margin-top: 3px;
    font-size: 11px;
    color: rgba(255, 255, 255, .66);
}
/* Square, per house style - no pill radii on status chips anywhere. */
.dl-idcard .dl-status {
    display: inline-block;
    margin-top: 10px;
    padding: 4px 14px;
    border-radius: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(44, 198, 224, .18);
    color: #7FDCEE;
}
.dl-idcard .dl-status.ok { background: #1877D2; color: #ffffff; }

/* ===== soft identity panel (dashboard) ============================ */
/* The page version is NOT the sidebar card. A saturated block sitting on a white
   dashboard fought everything around it; this is the same information on the
   template's own soft ground, which is what the rest of the page is built from. */
/* Carries its own bottom margin. It used to sit inside a card that provided the
   gap; without that wrapper it butted straight against the tiles below. */
.dl-soft-id {
    margin-bottom: 1.5rem;
    /* Crest watermark bled into the right-hand end. background-size keeps it from
       scaling with the panel, and it is dropped below sm where there is no spare
       width and it would sit behind the text. */
    background-color: var(--dl-soft);
    background-image: url("../../Images/delta-logo.png");
    background-repeat: no-repeat;
    background-position: right -28px center;
    background-size: auto 190%;
    position: relative;
    border: 1px solid var(--dl-line);
    border-radius: 10px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.dl-soft-id .ph {
    flex: none;
    width: 84px; height: 84px;
    border-radius: 50%;
    object-fit: cover;
    background: #E3ECF7;
    border: 3px solid #ffffff;
    box-shadow: 0 0 0 1px var(--dl-line);
}
.dl-soft-id .bd { flex: 1; min-width: 220px; position: relative; z-index: 1; }
.dl-soft-id .ph { position: relative; z-index: 1; }
@media screen and (max-width: 575.98px) {
    /* Was scaled to 62% of the panel height and tucked under the bottom edge,
       which on a phone made it too small to read as anything. Same treatment as
       desktop now - bled off the right edge at full height - with a wash strong
       enough on the left that the text stays clear of it. */
    .dl-soft-id {
        background-position: right -46px center;
        background-size: auto 150%;
    }
    .dl-soft-id::after {
        background: linear-gradient(90deg,
            var(--dl-soft) 42%, rgba(244, 246, 249, .78) 100%);
    }
}
.dl-soft-id .bd h4 { margin: 0 0 2px; font-size: 1.08rem; color: var(--dl-ink); }
.dl-soft-id .bd .hd { font-size: .8rem; color: var(--dl-muted); margin-bottom: 9px; }
.dl-soft-id .no {
    font-size: .82rem; font-weight: 700; letter-spacing: .04em; color: #0B4EA2;
}

/* ===== content ==================================================== */
.dl-page-title { font-size: 1.05rem; font-weight: 700; color: var(--dl-ink); margin: 0; }

/* Square chips throughout. */
.dl-chip {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 0;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
    margin: 0 6px 6px 0;
    background: #EEF3FA;
    color: var(--dl-ink);
}

/* Coloured rule across the top of a card - the template ships the colours, this
   just applies one as a 3px cap. Used to break up the page. */
.dl-cap { border-top: 3px solid transparent; }
.dl-cap-navy   { border-top-color: #012148; }
.dl-cap-gold   { border-top-color: #F0B429; }
.dl-cap-teal   { border-top-color: #17A2B8; }
.dl-cap-purple { border-top-color: #7C5CBF; }
.dl-cap-rose   { border-top-color: #E4667C; }

/* Progress rail for the wizard steps. */
.dl-steps { list-style: none; padding: 0; margin: 0; }
.dl-steps li { display: flex; gap: 12px; padding: 7px 0; align-items: flex-start; }
.dl-steps .pk {
    flex: none; width: 28px; height: 28px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
    background: #EEF3FA; color: var(--dl-muted);
}
.dl-steps li.done .pk { background: #DFF3E7; color: #1E7F4F; }
.dl-steps li.now  .pk { background: var(--dl-blue-active); color: #fff; }
.dl-steps .tx b { display: block; font-size: .85rem; color: #22303F; }
.dl-steps .tx span { font-size: .76rem; color: var(--dl-muted); }

/* Document / letter rows. */
.dl-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.dl-row .tx { flex: 1; min-width: 0; }
.dl-row .tx b { display: block; font-size: .85rem; }
.dl-row .tx span { display: block; font-size: .76rem; color: var(--dl-muted); }
.dl-row .ac { flex: none; }

/* Notice entries with a dated block down the left. */
.dl-notice { display: flex; gap: 14px; padding: 10px 0; }
.dl-notice .dt {
    flex: none; width: 52px; text-align: center; border-radius: 8px;
    padding: 7px 0; background: #EEF3FA;
}
.dl-notice .dt span { display: block; font-size: 9.5px; letter-spacing: .09em;
                      text-transform: uppercase; color: var(--dl-muted); }
.dl-notice .dt b { display: block; font-size: 17px; color: var(--dl-ink); line-height: 1.1; }
.dl-notice .tx { min-width: 0; }
.dl-notice .tx b { display: block; font-size: .86rem; color: var(--dl-ink); }
.dl-notice .tx p { margin: 2px 0 0; font-size: .78rem; color: var(--dl-muted); }

@media screen and (max-width: 575.98px) {
    /* The row stays on one line on a phone, as it is on a desktop.
    
       It used to wrap, pushing a full-width button under every label - which
       turned a five-line list into fifteen lines of mostly button, and made a
       compact reference into something you scroll. A label and a small action
       fit a 360px screen comfortably; only the label needs to shrink.
    
       Kept as a media query rather than deleted so the intent is on the record:
       this is a deliberate choice about this list, not an oversight. */
    .dl-row { flex-wrap: nowrap; }
    .dl-row .ac { width: auto; flex: none; }
    .dl-row .ac .btn { width: auto; white-space: nowrap; }
    .dl-row .tx { min-width: 0; }
    .dl-row .tx b { overflow-wrap: anywhere; }
}

/* ===== brand ====================================================== */
/* The crest alone left most of the brand bar empty, so it sits beside a
   two-line wordmark. White, because the brand block is the darkest green in
   the palette. */
.dl-brand { display: flex; align-items: center; gap: 10px; }
.dl-brand img { height: 34px; width: auto; flex: none; }
.dl-brand-tx { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.dl-brand-tx b {
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
}
.dl-brand-tx i {
    color: rgba(255, 255, 255, .58);
    font-size: 10px;
    font-style: normal;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}



/* ===== card headers with an icon =================================== */
.dl-cardhead { display: flex; align-items: center; gap: 11px; }
.dl-cardhead .ic {
    flex: none; width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.dl-cardhead h4 { margin: 0; font-size: .95rem; font-weight: 700; color: var(--dl-ink); }

/* Footer link on a list card, pinned so cards in a row line up. */
.dl-cardfoot {
    margin-top: auto; padding-top: 12px; border-top: 1px solid var(--dl-line);
    text-align: center; font-size: .82rem; font-weight: 600;
}
.dl-listcard .card-body { display: flex; flex-direction: column; }

/* Compact list row with a leading file icon. */
.dl-li { display: flex; align-items: center; gap: 10px; padding: 8px 0; }

.dl-li .fi { flex: none; color: #6C8EC6; font-size: 15px; }
.dl-li .nm { flex: 1; min-width: 0; font-size: .82rem; color: #22303F; }
.dl-li .dl-chip { flex: none; }

/* The crest sits behind the panel at low contrast; a wash over it keeps the text
   legible without having to lighten the image file itself. */
.dl-soft-id::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, var(--dl-soft) 55%, rgba(244,246,249,.86) 100%);
    border-radius: 10px;
    pointer-events: none;
}
.dl-soft-id > * { position: relative; z-index: 1; }

/* Completed steps read green; the rest inherit the muted icon colour. */
.dl-step-done i { color: #1E7F4F !important; }




/* ===== server-driven modal ========================================= */
/* Same shape as the wizard's. Shown by adding "open"; display:none by default
   means the markup can sit in the DOM through a partial postback, which a
   Bootstrap JS modal cannot do without a script call after every one. */
.dl-modal-back {
    display: none; position: fixed; inset: 0; z-index: 1080;
    background: rgba(1, 20, 45, .55);
    align-items: center; justify-content: center; padding: 18px;
}
.dl-modal-back.open { display: flex; }
.dl-modal {
    background: #fff; border-radius: 10px; width: 100%; max-width: 520px;
    max-height: 92vh; display: flex; flex-direction: column;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .30);
}
.dl-modal-head {
    display: flex; align-items: center; gap: 10px;
    padding: 15px 20px; border-bottom: 1px solid var(--dl-line); flex: none;
}
.dl-modal-head h3 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--dl-ink); }
.dl-modal-x { margin-left: auto; font-size: 24px; line-height: 1; color: var(--dl-muted);
              text-decoration: none; }
.dl-modal-body { padding: 18px 20px; overflow-y: auto; flex: 1 1 auto; }
.dl-modal-foot {
    padding: 13px 20px; border-top: 1px solid var(--dl-line); flex: none;
    display: flex; gap: 10px; justify-content: flex-end;
}

/* ===== pinned sign out ============================================ */
/* Positioned absolutely against .startbar, which the template already sets to
   position:fixed. Nothing on .startbar-menu or .startbar-collapse is touched -
   the template gives those explicit heights (100vh and calc(100vh - 52px)) and
   overriding them with flex is what altered the sidebar's scrollbar. The only
   change to the scroller is extra bottom padding so the last menu item clears
   the button; that lengthens the content, not the track. */
.startbar-signout {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 12px;
    z-index: 2;
    /* Opaque. It sits over the scrolling list, so a transparent background let
       whatever menu item happened to be underneath read straight through it. */
    background: var(--dl-blue);
    border-top: 1px solid rgba(255, 255, 255, .10);
}
html[data-startbar="delta"] .startbar .startbar-menu .startbar-collapse {
    padding-bottom: 76px;
}

/* Understated, like the reference: the sidebar's own ground, a hairline border
   and muted text. It is an exit, not a call to action. */
.signout-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 11px 14px; border-radius: 8px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .16);
    color: #F1808A !important;
    font-size: 13px; font-weight: 600; text-decoration: none;
}
.signout-btn i { font-size: 17px; }
.signout-btn:hover {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(241, 128, 138, .45);
    color: #FF9AA2 !important;
}

/* ===== topbar: blue on mobile ===================================== */
/* app.js keeps body[data-sidebar-size] in step with the drawer: "collapsed"
   while it is closed, "default" while it is open, and it switches at 992px.
   So on a phone the bar is blue until the drawer slides out, then white to sit
   with the open panel. Desktop is untouched. */
@media screen and (max-width: 991.98px) {
    body[data-sidebar-size="collapsed"] .topbar {
        background-color: var(--dl-blue);
        border-bottom-color: rgba(255, 255, 255, .10);
    }
    body[data-sidebar-size="collapsed"] .topbar .dl-page-title,
    body[data-sidebar-size="collapsed"] .topbar .mobile-menu-btn,
    body[data-sidebar-size="collapsed"] .topbar .mobile-menu-btn i {
        color: #ffffff !important;
    }

    /* The toggle carries .nav-icon, whose background is a pale
       var(--bs-topbar-nav-icon-bg). Turning the bar blue left that pale disc in
       place, and forcing the glyph white painted white on white - which is why
       the bars vanished. Iconoir draws through a mask filled with currentColor,
       so the glyph needs a ground dark enough to show against. */
    body[data-sidebar-size="collapsed"] .topbar .mobile-menu-btn.nav-icon {
        background-color: rgba(255, 255, 255, .16) !important;
    }
    body[data-sidebar-size="collapsed"] .topbar .mobile-menu-btn.nav-icon:hover {
        background-color: rgba(255, 255, 255, .26) !important;
    }
}

/* ===== drawer overlay ============================================= */
/* The template shows the overlay below 1199.98px but app.js only collapses the
   drawer below 992px. Between those two widths a scrim covers the page with
   nothing listening for a click on it. Pinned to the JS breakpoint so the two
   agree. */
@media (min-width: 992px) {
    .startbar-overlay { display: none !important; }
}

/* ===== dotted separators ==========================================
   Dashed rather than solid. Solid rules made these cards read as tables, which
   is why they came out earlier; dashed separates the rows without drawing a grid
   around them. Same weight and colour as the divider under a help desk message,
   so the two match.

   Applied between items only - never above the first or below the last - so the
   card's own padding is not doubled up on. */
.dl-dotted > li + li {
    border-top: 1px dashed #DDE5EF;
    padding-top: 8px;
}
.dl-dotted > li {
    padding-bottom: 2px;
    /* Label left, value right. These rows were icon + label + a bare text node, so
       the value sat immediately after the colon and left a wide gap to the card edge
       - the wider the card, the emptier it looked. Flex with the value pushed right
       closes it and lines every value up, which also makes the column scannable
       rather than ragged. */
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.dl-dotted > li > i {
    flex: 0 0 auto;
    /* The icons carry Bootstrap's me-2 (8px). With the flex gap that became 14px,
       which read as a stray indent. The gap alone is enough. */
    margin-right: 0 !important;
}
.dl-dotted > li > b { flex: 0 0 auto; }

.dl-dotted .dl-v {
    margin-left: auto;
    text-align: right;
    min-width: 0;          /* lets a long value wrap instead of pushing the row wide */
    overflow-wrap: anywhere;
    color: var(--dl-ink, #12233B);
}

@media screen and (max-width: 400px) {
    /* On a narrow phone a long value beside a long label leaves each about eight
       characters. Stack instead, value still to the right so the alignment reads. */
    .dl-dotted > li { flex-wrap: wrap; }
    .dl-dotted .dl-v { flex: 1 1 100%; margin-left: 0; }
}

.dl-li + .dl-li,
.dl-row + .dl-row {
    border-top: 1px dashed #DDE5EF;
}

/* ===== topbar avatar ===============================================
   A passport photograph is 3:4. Forcing it into a 32x32 box with width and
   height attributes squashed it horizontally - every face came out narrow.

   object-fit: cover crops to the square instead of distorting, so the sizing
   lives here rather than in two hard-coded attribute pairs on the master. The
   sidebar and dashboard photos already did this; the topbar was the one that
   was missed. */
.dl-avatar {
    width: 32px;
    height: 32px;
    object-fit: cover;
    /* Faces sit in the upper part of a passport photograph, so a square crop
       taken from the top keeps the head rather than the chin. */
    object-position: center 22%;
    background: #E3ECF7;
}
.dl-avatar-lg { width: 40px; height: 40px; }

/* ===== recruitment timeline (applicant portal) =====================
   The same strip the public home page shows. Compact here - it is context on a
   dashboard, not the headline it is on the landing page. */
.tl-strip { display: flex; align-items: flex-start; }
.tl-item { flex: 1; text-align: center; position: relative; padding: 0 4px; min-width: 0; }
.tl-item .bar {
    position: absolute; top: 21px; left: -50%; right: 50%;
    height: 2px; background: var(--dl-line); z-index: 0;
}
.tl-item:first-child .bar { display: none; }
.tl-item.done .bar, .tl-item.now .bar { background: #1E7F4F; }
.tl-dot {
    position: relative; z-index: 1;
    width: 42px; height: 42px; margin: 0 auto; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #EDF1F6; color: #8DA0B8;
    border: 3px solid #fff; box-shadow: 0 0 0 1px var(--dl-line);
}
.tl-dot svg { width: 18px; height: 18px; }
.tl-item.done .tl-dot { background: #1E7F4F; color: #fff; box-shadow: 0 0 0 1px #1E7F4F; }
.tl-item.now  .tl-dot { background: #0B57C4; color: #fff; box-shadow: 0 0 0 4px rgba(11,87,196,.16); }
.tl-item h6 { margin: 9px 0 1px; font-size: .78rem; font-weight: 700; color: var(--dl-ink); line-height: 1.25; }
.tl-item .dt { display: block; font-size: .72rem; color: var(--dl-muted); }
.tl-item .st { display: block; font-size: .68rem; font-weight: 600; color: #9AA9BC; }
.tl-item.done .st { color: #1E7F4F; }
.tl-item.now  .st { color: #0B57C4; }

@media screen and (max-width: 767.98px) {
    /* Vertical, with the rule running down the left gutter - six phases will not
       fit across a phone, and shrinking them further makes the labels unreadable. */
    .tl-strip { flex-direction: column; }
    .tl-item {
        display: grid; grid-template-columns: 42px 1fr; gap: 12px;
        text-align: left; padding: 0 0 16px;
    }
    .tl-item .bar { top: 42px; bottom: -16px; left: 20px; right: auto; width: 2px; height: auto; }
    .tl-item:first-child .bar { display: block; }
    .tl-item:last-child .bar { display: none; }
    .tl-item h6 { margin-top: 2px; }
}

/* ===== oversize warning modal ======================================
   Shown before anything is sent. A file rejected in the browser costs nothing;
   the same file rejected by the server costs the applicant an upload over a
   mobile connection first, and on a bad line that is a real wait. */
.uz-back {
    display: none; position: fixed; inset: 0; z-index: 1200;
    background: rgba(1, 20, 45, .55); align-items: center; justify-content: center; padding: 18px;
}
.uz-back.open { display: flex; }
.uz-box {
    background: #fff; border-radius: 12px; width: 100%; max-width: 460px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .30); overflow: hidden;
}
.uz-h { display: flex; align-items: center; gap: 11px; padding: 16px 20px; border-bottom: 1px solid #E4E9F2; }
.uz-h i { font-size: 22px; color: #8A6100; }
.uz-h b { font-size: 1rem; color: #012148; }
.uz-b { padding: 18px 20px; font-size: .89rem; color: #34435C; }
.uz-b .uz-file {
    background: #F4F7FB; border: 1px solid #E4E9F2; border-radius: 8px;
    padding: 10px 12px; margin: 12px 0; font-size: .84rem; overflow-wrap: anywhere;
}
.uz-b .uz-file b { color: #C0392B; }
.uz-f { padding: 13px 20px; border-top: 1px solid #E4E9F2; text-align: right; }

/* Two stage cards sharing the band: their detail fields go two-across rather than
   four, because half the band is not wide enough for four. Applied by the
   code-behind, which is the only place that knows whether both are showing. */
@media (min-width: 768px) {
    .stage-narrow .card-body > .row > [class*="col-"] {
        flex: 0 0 auto;
        width: 50%;
    }
}

/* A stage that has not happened yet: present but plainly inactive, so an applicant
   can see the step exists without mistaking it for one that is ready. */
.card.stage-idle { border: 1px solid var(--dl-line, #E4EBF3); background: #FBFCFE; }
.card.stage-idle .card-title { color: #7A8798; }
.card.stage-idle .card-title i { opacity: .5; }
.stage-none { color: #7A8798; font-size: .85rem; line-height: 1.6; margin: 0; }

/* The two stage cards keep the same height whether or not they have content.
   The row stretches the columns; h-100 stretches the card inside its column;
   this keeps the body filling the card so the border does not stop short. */
.card.stage-idle .card-body,
.card.h-100 .card-body { display: flex; flex-direction: column; }

/* ============================================================
   Stop iOS zooming when a field is focused
   ------------------------------------------------------------
   Safari zooms into any input whose computed font-size is under
   16px, and then leaves the page zoomed. The usual "fix" -
   maximum-scale=1, user-scalable=no in the viewport - has been
   IGNORED by iOS Safari since iOS 10, and on Android it just
   takes pinch-zoom away from people who need it. Sizing the
   field at 16px is the only thing that actually works.

   This block already existed in Content/site.css, which the
   ADMIN shell loads. Applicant.master and Register.aspx load
   this file instead, so the two places a member of the public
   types on a phone were the two that never had it.

   768px, so it applies to phones and small tablets and leaves
   the desktop sizing alone.
   ============================================================ */
@media screen and (max-width: 768px) {
    .form-control,
    .form-select,
    textarea.form-control,
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    select,
    textarea {
        font-size: 16px !important;
        /* iOS also zooms if the line-height makes the box feel < 16px in some
           engines; keep a comfortable line-height so the 16px is respected. */
        line-height: 1.35;
    }
}

/* ============================================================
   Selected banner - applicant dashboard
   ------------------------------------------------------------
   Dashed border rather than solid: it reads as a notice rather
   than another card, so it does not compete with the cards
   around it. Green because it is the one unambiguously good
   message in this portal - every other coloured state here is a
   warning or a closed gate.
   ============================================================ */
.sel-banner {
    display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
    border: 1px dashed #4FBF9F; background: #EAF9F3; border-radius: 10px;
    padding: 15px 18px; margin-bottom: 16px;
}
.sel-txt { flex: 1 1 320px; min-width: 0; }
.sel-txt b { display: block; color: #0E7C5A; font-size: .98rem; margin-bottom: 3px; }
.sel-txt span { color: #35564B; font-size: .86rem; line-height: 1.6; }
.sel-act { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; }
.sel-btn {
    display: inline-block; background: #0E7C5A; color: #fff; text-decoration: none;
    font-size: .84rem; font-weight: 700; padding: 8px 16px; border-radius: 6px;
    white-space: nowrap;
}
.sel-btn:hover { background: #0B6449; color: #fff; text-decoration: none; }
.sel-when { font-size: .78rem; color: #5E7A70; }

@media screen and (max-width: 575.98px) {
    /* The action drops below the text and goes full width - at this size the
       button is the point of the banner. */
    .sel-act { flex: 1 1 100%; align-items: stretch; }
    .sel-btn { text-align: center; }
}

@media print { .sel-banner { display: none; } }

/* ============================================================
   Shared modal + password eye  (ALA.changePassword)
   ------------------------------------------------------------
   Copied from admin.css, which the applicant portal does not
   load. Same rules, so the change-password dialog looks and
   behaves identically on both sides - which is the whole point
   of using the shared helper rather than writing a second one.

   inset:0 replaced with explicit offsets: a browser that does
   not know the shorthand ignores the line and the backdrop ends
   up with no dimensions, which is exactly how the hand-written
   version failed to appear.
   ============================================================ */
.ala-modal-backdrop {
    display: none;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 5300;
    background: rgba(4, 18, 38, .55);
    align-items: center;
    justify-content: center;
    padding: 18px; }
.ala-modal-backdrop.open { display: flex; }
.ala-modal-backdrop { overflow-y: auto; }
.ala-modal {
    background: #fff;
    border-radius: 10px;
    width: 100%;
    max-width: 460px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
    overflow: hidden;
    /* Without these a tall modal grows past the viewport and "overflow: hidden"
       clips the footer, so Save and Cancel end up off-screen and unreachable -
       exactly what happened to the shortlist template editor with its twelve-row
       SQL box. Capping the height and making the modal a flex column keeps the
       header and footer pinned while only the body scrolls. The applicant
       stylesheet has had this since it was written; the admin copy lost it.
       36px is the backdrop's 18px padding, top and bottom. */
    max-height: calc(100vh - 36px);
    display: flex;
    flex-direction: column; }
.ala-modal-head, .ala-modal-foot { flex: 0 0 auto; }
.ala-modal-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 18px;
    border-bottom: 1px solid #E4E9F2; }
.ala-modal-head h3 {
    margin: 0;
    font-size: .98rem;
    font-weight: 700;
    color: #1E2D50; }
.ala-modal-x {
    margin-left: auto;
    background: none;
    border: 0;
    font-size: 22px;
    line-height: 1;
    color: #6B7A90;
    cursor: pointer;
    padding: 0 2px; }
.ala-modal-body {
    padding: 16px 18px; font-size: .89rem; color: #22303F;
    flex: 1 1 auto;
    overflow-y: auto;
    /* iOS clips scrollable flex children without this. */
    -webkit-overflow-scrolling: touch;
    min-height: 0; }
.ala-modal-foot {
    padding: 12px 18px;
    border-top: 1px solid #E4E9F2;
    display: flex;
    gap: 9px;
    justify-content: flex-end; }
.pwd-wrap { position: relative; }
.pwd-wrap .form-control,
.pwd-wrap input { padding-right: 42px; }
.pwd-eye {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    padding: 5px;
    background: none;
    border: 0;
    color: #6B7A90;
    cursor: pointer; }
.pwd-eye svg { width: 100%; height: 100%; display: block; }
.pwd-eye .i-off { display: none; }
.pwd-eye.showing .i-on { display: none; }
.pwd-eye.showing .i-off { display: block; }

/* ---- fields, errors and buttons inside the shared modal ----
   I copied only the modal shell and the eye first, and left these behind. The
   result was the dialog in the screenshot: unstyled buttons, labels rendered as
   links, and EVERY validation message visible at once - because ".field .err
   { display: none }" was the rule that hides them until a field is marked
   invalid. "At least 6 characters" appeared twice for the same reason: one is
   the hint, one is the error, and both were showing.

   Scoped to .ala-modal on purpose. These names - .field, .err, .hint,
   .form-control - are generic enough to collide with the applicant portal's own
   styling, and .form-control in particular is Bootstrap's, used by every input
   in the wizard. Unscoped, this would have restyled the whole portal to fix one
   dialog.

   The --ad-* variables are resolved to their values rather than copied, since
   they are defined in admin.css and this stylesheet has never seen them.
   ------------------------------------------------------------ */
.ala-modal .btn-ala, .ala-modal .btn-ala-ghost, .ala-modal .btn-ala-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font: 600 .88rem/1 inherit;
    padding: 10px 16px;
    border-radius: 7px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap; }
.ala-modal .btn-ala { background: #0B4EA2; border-color: #0B4EA2; color: #fff; }
.ala-modal .btn-ala:hover { background: #09407F; border-color: #09407F; color: #fff; }
.ala-modal .btn-ala-ghost { background: #fff; border-color: #E4E9F2; color: #1E2D50; }
.ala-modal .btn-ala-ghost:hover { background: #F4F7FB; color: #1E2D50; }
.ala-modal .btn-ala-outline { background: transparent; border-color: #0B4EA2; color: #0B4EA2; }
.ala-modal .btn-ala-outline:hover { background: #EEF3FA; }
.ala-modal .btn-ala.btn-sm, .ala-modal .btn-ala-ghost.btn-sm, .ala-modal .btn-ala-outline.btn-sm {
    padding: 7px 12px;
    font-size: .82rem; }
.ala-modal .btn-ala[disabled], .ala-modal .btn-ala-ghost[disabled] { opacity: .55; cursor: default; }
.ala-modal .err inside it. Both class names have to survive, .ala-modal and .err must stay hidden
   until .invalid is set or every field would show its message at rest. */
.field { margin-bottom: 14px; }
.ala-modal .field > label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: #1E2D50;
    margin-bottom: 4px; }
.ala-modal .field > label .req { color: #C0392B; }
.ala-modal .field .hint { display: block; font-size: .76rem; color: #6B7A90; margin-top: 4px; }
.ala-modal .field .err { display: none; font-size: .78rem; color: #C0392B; margin-top: 4px; }
.ala-modal .field.invalid .form-control, .ala-modal .field.invalid .form-select, .ala-modal .field.invalid input[type=text], .ala-modal .field.invalid input[type=password], .ala-modal .field.invalid input[type=number], .ala-modal .field.invalid input[type=date], .ala-modal .field.invalid select, .ala-modal .field.invalid textarea {
    border-color: #C0392B;
    box-shadow: 0 0 0 .18rem rgba(192, 57, 43, .12); }
.ala-modal .field.invalid .err { display: block; }
.ala-modal .pwd-wrap { position: relative; }
.ala-modal .pwd-wrap .form-control, .ala-modal .pwd-wrap input { padding-right: 42px; }
.ala-modal .btn-ala-dark {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 10px 16px; border-radius: 7px;
    background: #12243D; border: 1px solid #12243D; color: #fff;
    font: 600 .88rem/1 inherit; cursor: pointer; text-decoration: none; }
.ala-modal .btn-ala-dark:hover { background: #0B1828; color: #fff; }

/* ---- toasts ----
   Copied because ALA reports every failure through one. Without these rules the
   toast renders as unstyled text somewhere off-screen, so a failed request looks
   exactly like nothing happening - which is how a 404 on the change-password
   call presented as "the modal will not close".
   ---------------- */
.ala-toast {
    background: #1E2D50;
    color: #fff;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 12px 18px;
    font-size: .88rem;
    font-weight: 500;
    line-height: 1.4;
    box-shadow: 0 10px 30px rgba(4, 18, 38, .30);
    pointer-events: auto;
    max-width: 460px;
    overflow-wrap: anywhere; }
.ala-toast.ok { background: #E7F7EE; border: 1px solid #9BDCBB; border-left: 1px solid #9BDCBB;
                 color: #0E5132; box-shadow: 0 8px 22px rgba(14, 81, 50, .16); }
.ala-toast.err { background: #FDECEC; border: 1px solid #F2B5B5; border-left: 1px solid #F2B5B5;
                 color: #8B1F1F; box-shadow: 0 8px 22px rgba(139, 31, 31, .16); }