/* ============================================================================
   eMIS portal shell - the sidebar / topbar frame shared by the ministry console
   (Admin/MasterAdmin.master, Admin/ConsoleMaster.master), the Schools Portal
   (SchoolsPortal/SchoolsMasterPage.master), Bursary and Library, plus the
   dashboard building blocks (identity strip, tiles, gender cards, split rows,
   attention list).

   The look is the Recruitment Admin (Recruit2) shell: Roboto 13px, a dark navy
   startbar with a photo card, collapsible groups with a gold active marker,
   a white 52px topbar and a soft grey page ground. House rules: controls and
   panels have a 4px radius (never rounder), status chips are square.

   Everything is prefixed sh-/ad-/gx-/sp-/dl- so it never collides with the
   DashLite (nk-*) or Bootstrap classes the content pages use. Load it LAST,
   after Bootstrap and DashLite.
   ============================================================================ */

/* Roboto from the site's own font files (the same files DashLite uses), so the
   shell renders in Roboto on every portal, including those that do not load
   DashLite (ConsoleMaster, Bursary, Library). */
@font-face { font-family: Roboto; src: url(../../../assets/fonts/Roboto-Light.woff2) format("woff2"), url(../../../assets/fonts/Roboto-Light.woff) format("woff"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: Roboto; src: url(../../../assets/fonts/Roboto-Regular.woff2) format("woff2"), url(../../../assets/fonts/Roboto-Regular.woff) format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Roboto; src: url(../../../assets/fonts/Roboto-Medium.woff2) format("woff2"), url(../../../assets/fonts/Roboto-Medium.woff) format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: Roboto; src: url(../../../assets/fonts/Roboto-Bold.woff2) format("woff2"), url(../../../assets/fonts/Roboto-Bold.woff) format("woff"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
    --sh-font: Roboto, "Segoe UI", Arial, sans-serif;
    --sh-navy: #12243D;      /* startbar */
    --sh-navy-deep: #0B1828; /* brand block */
    --sh-active: #1D3A5F;    /* active link fill */
    --sh-gold: #F0B429;      /* active marker */
    --sh-ink: #1E2D50;       /* headings */
    --sh-text: #303E67;      /* body text */
    --sh-muted: #6B7A90;
    --sh-line: #E4E9F2;
    --sh-accent: #0B4EA2;
    --sh-ok: #1E7F4F;
    --sh-warn: #8A6100;
    --sh-err: #C0392B;
    --sh-bg: #F4F6F9;
    --sh-r: 4px;             /* the one radius: controls, panels, cards */
    --sh-side: 240px;
    --sh-top: 52px;
}

html, body { height: 100%; }
body.sh-body {
    --bs-body-font-family: var(--sh-font);
    --bs-font-sans-serif: var(--sh-font);
    --bs-body-font-size: .8125rem;
    --bs-body-color: var(--sh-text);
    --bs-border-radius: var(--sh-r);
    --bs-border-radius-sm: var(--sh-r);
    --bs-border-radius-lg: var(--sh-r);
    margin: 0 !important;
    padding: 0 !important;
    background: var(--sh-bg) !important;
    color: var(--sh-text);
    font-family: var(--sh-font);
    font-size: 13px;
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body.sh-body > form { min-height: 100vh; }

/* ---------------------------------------------------------------- startbar */
.sh-startbar {
    position: fixed; top: 0; bottom: 0; left: 0;
    width: var(--sh-side);
    background: var(--sh-navy);
    color: #fff;
    z-index: 1040;
    display: flex; flex-direction: column;
    font-family: var(--sh-font);
    transition: transform .22s ease;
}
.sh-brand {
    height: var(--sh-top); flex: none;
    background: var(--sh-navy-deep);
    display: flex; align-items: center; gap: 10px;
    padding: 0 16px;
    text-decoration: none !important;
}
.sh-brand img { height: 30px; width: auto; flex: none; }
.sh-brand-tx { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.sh-brand-tx b { color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-brand-tx i { color: rgba(255,255,255,.55); font-size: 9.5px; font-style: normal; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }

.sh-side-scroll { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 0 10px 88px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.sh-side-scroll::-webkit-scrollbar { width: 6px; }
.sh-side-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }

/* the photo card: who is signed in (schools: the school's badge; console: the ministry logo) */
.sh-idcard {
    margin: 12px 0 10px; padding: 18px 12px 16px;
    text-align: center;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--sh-r);
}
.sh-idcard .ph {
    display: block; margin: 0 auto;
    width: 92px; height: 92px; border-radius: 50%;
    object-fit: cover; background: #fff;
    border: 4px solid rgba(255,255,255,.90);
}
.sh-idcard .ph.logo { object-fit: contain; padding: 8px; }
.sh-idcard .nm { margin-top: 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .03em; color: #fff; line-height: 1.35; overflow-wrap: anywhere; }
.sh-idcard .sb { margin-top: 3px; font-size: 11px; color: rgba(255,255,255,.66); }
.sh-idcard .st {
    display: inline-block; margin-top: 10px; padding: 4px 12px; border-radius: 0;
    font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    background: #1877D2; color: #fff;
}
/* older markup (initials chip beside the name) - kept for any master not yet moved to the photo card */
.sh-idcard .av { width: 38px; height: 38px; margin: 0 auto; border-radius: var(--sh-r); background: var(--sh-active); color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sh-idcard .av img { width: 100%; height: 100%; object-fit: cover; }
.sh-idcard .tx b { display: block; margin-top: 8px; font-size: 12.5px; color: #fff; overflow-wrap: anywhere; }
.sh-idcard .tx span { display: block; font-size: 11px; color: rgba(255,255,255,.62); }

.sh-nav, .sh-grp-b { list-style: none; margin: 0; padding: 0; }
.sh-nav .sh-link {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 14px; border-radius: var(--sh-r);
    color: rgba(255,255,255,.86); font-size: 13.5px; font-weight: 500;
    text-decoration: none !important; position: relative; line-height: 1.3;
}
.sh-nav .sh-link .ic, .sh-grp-h .ic { width: 18px; display: inline-flex; justify-content: center; flex: none; opacity: .72; }
.sh-nav .sh-link .ic svg, .sh-grp-h .ic svg { width: 17px; height: 17px; }
.sh-nav .sh-link .tx { flex: 1; min-width: 0; }
.sh-nav .sh-link:not(.active):hover { color: #fff; background: rgba(255,255,255,.06); }
.sh-nav .sh-link.active { color: #fff; background: var(--sh-active); }
.sh-nav .sh-link.active .ic { opacity: 1; color: var(--sh-gold); }
.sh-one { margin: 1px 0; }
.sh-one .sh-link { font-weight: 500; }
.sh-one .sh-link.active::before { content: ""; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 4px; border-radius: 0 2px 2px 0; background: var(--sh-gold); }

.sh-grp { margin: 2px 0; }
.sh-grp-h {
    display: flex; align-items: center; gap: 11px;
    width: 100%; padding: 9px 14px;
    background: none; border: 0; border-radius: var(--sh-r);
    color: rgba(255,255,255,.86);
    font-size: 13.5px; font-weight: 500; text-align: left; cursor: pointer; line-height: 1.3;
    font-family: var(--sh-font);
}
.sh-grp-h .tx { flex: 1; min-width: 0; }
.sh-grp-h .chev { display: inline-flex; opacity: .6; flex: none; transition: transform .18s ease; }
.sh-grp-h .chev svg { width: 15px; height: 15px; }
.sh-grp-h[aria-expanded="true"] .chev { transform: rotate(180deg); }
.sh-grp-h:hover { background: rgba(255,255,255,.06); color: #fff; }
.sh-grp.open > .sh-grp-h { color: #fff; background: rgba(255,255,255,.05); }
.sh-grp.open > .sh-grp-h .ic { opacity: 1; }
/* the group that holds the current page: marked, but closed until clicked */
.sh-grp-h { position: relative; }
.sh-grp.has-active > .sh-grp-h { color: #fff; }
.sh-grp.has-active > .sh-grp-h .ic { opacity: 1; color: var(--sh-gold); }
.sh-grp.has-active > .sh-grp-h::before { content: ""; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 4px; background: var(--sh-gold); }
.sh-grp-h .cnt { margin-left: 0; }

.sh-grp-b { margin: 2px 0 6px; padding: 0 0 0 12px; }
.sh-grp-b[hidden] { display: none; }
.sh-grp-b li { position: relative; }
.sh-grp-b .sh-link {
    gap: 8px;
    padding: 7px 12px 7px 22px;
    font-size: 12.8px; font-weight: 400;
    color: rgba(255,255,255,.72);
}
.sh-grp-b .sh-link::after {
    content: ""; position: absolute; left: 9px; top: 50%;
    width: 4px; height: 4px; border-radius: 50%;
    background: rgba(255,255,255,.30); transform: translateY(-50%);
}
.sh-grp-b .sh-link:not(.active):hover { color: #fff; background: rgba(255,255,255,.06); }
.sh-grp-b .sh-link.active { color: #fff; background: var(--sh-active); font-weight: 500; }
.sh-grp-b .sh-link.active::after { background: var(--sh-gold); }
.sh-grp-b .sh-sub {
    padding: 10px 12px 4px 22px;
    font-size: 10px; font-weight: 500; letter-spacing: .10em; text-transform: uppercase;
    color: rgba(255,255,255,.46);
}
.sh-grp-b .sh-link.soon { cursor: default; color: rgba(255,255,255,.42); }
.sh-grp-b .sh-link.soon:hover { background: none; color: rgba(255,255,255,.42); }
.soon-chip, .cnt {
    margin-left: auto; flex: none;
    padding: 1px 6px; min-width: 22px; text-align: center;
    font-size: 10.5px; font-weight: 700; border-radius: 0;   /* square, house style */
    line-height: 1.5;
}
.cnt { background: rgba(255,255,255,.14); color: #fff; }
.sh-link.active .cnt { background: rgba(255,255,255,.24); }
.soon-chip { background: rgba(255,255,255,.08); color: rgba(255,255,255,.6); letter-spacing: .04em; font-weight: 500; }

.sh-signout {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 12px; z-index: 2;
    background: var(--sh-navy);
    border-top: 1px solid rgba(255,255,255,.10);
}
.sh-signout a, .sh-signout button {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 10px 14px; border-radius: var(--sh-r);
    background: transparent; border: 1px solid rgba(255,255,255,.16);
    color: #F1808A !important; font-size: 13px; font-weight: 500; text-decoration: none !important;
    cursor: pointer; font-family: var(--sh-font);
}
.sh-signout svg { width: 17px; height: 17px; }

/* Change password (2 Nov 2026 "b"): the link on the id card of the staff portals, and the box every portal shares */
.sh-idcard .sh-idlink { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 5px 10px; font-size: 12px; font-weight: 500; color: rgba(255,255,255,.86) !important; text-decoration: none !important; border: 1px solid rgba(255,255,255,.22); border-radius: 4px; }
.sh-idcard .sh-idlink svg { width: 14px; height: 14px; }
.sh-idcard .sh-idlink:hover { color: #fff !important; border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.06); }
.emis-pw .modal-content { border: 0; border-radius: 4px; }
.emis-pw .modal-header { border-top: 3px solid var(--sh-navy, #12243D); border-radius: 4px 4px 0 0; }
.emis-pw .modal-title { font-size: 16px; font-weight: 700; color: var(--sh-navy, #12243D); }
.emis-pw .emis-pw-lead { font-size: 13px; color: #475569; margin: 0 0 14px; line-height: 1.5; }
.emis-pw .form-label { font-size: 13px; font-weight: 600; color: #0F172A; margin-bottom: 4px; }
.emis-pw .form-control { font-size: 14px; border-radius: 4px; }
.emis-pw .form-text { font-size: 12px; }
.emis-pw .btn { border-radius: 4px; font-size: 13px; }
.emis-pw-msg { margin-top: 14px; padding: 10px 12px; border: 1px solid; border-radius: 4px; font-size: 13px; line-height: 1.45; }
.emis-pw-msg.ok { background: #EAF6EF; border-color: #BFE3CD; color: #166534; }
.emis-pw-msg.bad { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
.sh-signout a:hover, .sh-signout button:hover { background: rgba(255,255,255,.06); border-color: rgba(241,128,138,.45); color: #FF9AA2 !important; }

/* ---------------------------------------------------------------- topbar */
.sh-topbar {
    position: fixed; top: 0; right: 0; left: var(--sh-side);
    height: var(--sh-top); z-index: 1030;
    background: #fff; border-bottom: 1px solid var(--sh-line);
    display: flex; align-items: center; gap: 12px;
    padding: 0 18px;
    font-family: var(--sh-font);
    transition: left .22s ease;
}
.sh-burger {
    display: none; width: 34px; height: 34px; border-radius: var(--sh-r);
    border: 0; background: #F4F6F9; color: #424d65; align-items: center; justify-content: center; cursor: pointer; flex: none;
}
.sh-page-title { font-size: 1.05rem; font-weight: 500; color: var(--sh-ink); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--sh-font); }
.sh-top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
/* top bar search (ministry console + admin pages): compact, beside the state chip */
.sh-search { position: relative; flex: 0 1 300px; min-width: 180px; max-width: 300px; }
.sh-search input { width: 100%; height: 34px; border: 1px solid var(--sh-line); background: #F8FAFC; border-radius: var(--sh-r); padding: 6px 10px 6px 32px; font-size: 12.5px; color: var(--sh-ink); outline: 0; font-family: var(--sh-font); }
.sh-search input::placeholder { color: #94A3B8; }
.sh-search input:focus { background: #fff; border-color: #9DB7DA; box-shadow: 0 0 0 3px rgba(11,78,162,.10); }
.sh-search .glass { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--sh-muted); display: flex; pointer-events: none; }
.sh-search .glass svg { width: 15px; height: 15px; }
@media (max-width: 991.98px) { .sh-search { display: none; } }
.sh-envchip {
    display: inline-block; padding: 4px 11px; border-radius: 0;
    background: var(--sh-navy); color: #fff !important;
    font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap;
    text-decoration: none !important;
}
a.sh-envchip:hover { background: var(--sh-active); }
.sh-iconbtn {
    position: relative; width: 34px; height: 34px; border-radius: var(--sh-r);
    border: 0; background: #F4F6F9; color: #424d65;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none !important;
}
.sh-iconbtn svg { width: 18px; height: 18px; }
.sh-iconbtn:hover { background: #E9EDF3; color: var(--sh-ink); }
.sh-iconbtn .n {
    position: absolute; top: -5px; right: -5px;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 0;
    background: var(--sh-err); color: #fff; font-size: 10px; font-weight: 700; line-height: 18px; text-align: center;
}
.sh-user { display: flex; align-items: center; gap: 9px; padding: 4px 6px 4px 4px; border-radius: var(--sh-r); cursor: pointer; text-decoration: none !important; color: inherit; }
.sh-user:hover { background: #F4F6F9; }
.sh-user .av { width: 32px; height: 32px; border-radius: 50%; background: var(--sh-accent); color: #fff; font-weight: 500; font-size: 12px; display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.sh-user .av img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
.sh-user .tx { line-height: 1.2; }
.sh-user .tx b { display: block; font-size: 12.5px; font-weight: 500; color: var(--sh-ink); max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-user .tx span { display: block; font-size: 11px; color: var(--sh-muted); white-space: nowrap; }
.sh-topbar .dropdown-menu { border: 1px solid var(--sh-line); box-shadow: 0 10px 30px rgba(15,23,42,.12); border-radius: var(--sh-r); font-size: 13px; }
.sh-topbar .dropdown-item { font-size: 13px; color: var(--sh-text); }
.sh-topbar .dropdown-item:hover { background: #F4F6F9; color: var(--sh-ink); }

/* ---------------------------------------------------------------- page */
.sh-page { margin-left: var(--sh-side); padding-top: var(--sh-top); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left .22s ease; }
.sh-content { flex: 1 1 auto; padding: 18px 22px 30px; min-width: 0; }
.sh-title-box { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 2px 0 14px; }
.sh-title-box h4 { font-size: 18px; font-weight: 500; margin: 0; color: var(--sh-ink); }
.sh-crumb { list-style: none; display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; font-size: 13px; color: var(--sh-muted); }
.sh-crumb li + li::before { content: "\203A"; margin-right: 8px; color: #AEB7C6; }
.sh-crumb a { color: #7a82b1; text-decoration: none; }
.sh-crumb li.active { color: var(--sh-ink); }
/* school context strip (schools portal) */
.sh-context {
    display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap;
    font-size: 12.5px; color: var(--sh-muted); margin: 0 0 16px; padding: 9px 14px;
    background: #fff; border: 1px solid var(--sh-line); border-radius: var(--sh-r);
}
.sh-context b { color: var(--sh-ink); font-weight: 500; letter-spacing: .01em; }
.sh-context .id { color: #8094ae; }
.sh-context .pg { margin-left: auto; color: #7a82b1; }
.sh-context .pg:empty { display: none; }

.sh-footer { padding: 12px 22px; border-top: 1px solid var(--sh-line); background: #fff; font-size: 12px; color: var(--sh-muted); display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; font-family: var(--sh-font); }
.sh-footer a { color: var(--sh-accent); text-decoration: none; }
.sh-footer .sh-build { color: #A9B3C2; font-size: 11px; letter-spacing: .3px; cursor: help; }   /* the package stamp; hover shows the state switches in force */

/* the DashLite content wrappers the legacy pages were built for */
.sh-content .nk-content { padding: 0; }
.sh-content .nk-content-inner, .sh-content .nk-content-body { width: 100%; }
.sh-content > .container-xl, .sh-content .container-xl.wide-lg { max-width: none; padding: 0; }

/* drawer */
.sh-overlay { display: none; position: fixed; inset: 0; background: rgba(18,36,61,.45); z-index: 1035; }
@media (max-width: 991.98px) {
    .sh-startbar { transform: translateX(calc(-1 * var(--sh-side))); box-shadow: 0 0 30px rgba(0,0,0,.35); }
    body.sh-drawer-open .sh-startbar { transform: translateX(0); }
    body.sh-drawer-open .sh-overlay { display: block; }
    .sh-topbar { left: 0; padding: 0 12px; }
    .sh-page { margin-left: 0; }
    .sh-burger { display: inline-flex; }
    .sh-user .tx, .sh-envchip { display: none; }
    .sh-content { padding: 14px 12px 24px; }
}
@media print {
    .sh-startbar, .sh-topbar, .sh-overlay, .sh-footer, .wa-float, .sh-noprint, .sh-context { display: none !important; }
    .sh-page { margin: 0; padding: 0; }
    .sh-content { padding: 0; }
    body.sh-body { background: #fff !important; }
}

/* ============================================================================
   Content harmonisation - the Recruit2 type scale on the DashLite pages:
   Roboto throughout (DashLite set headings and buttons in Nunito), lighter
   weights, darker body text, and the 4px radius on every control.
   Scoped to .sh-content so the old full-page designs are untouched.
   ============================================================================ */
.sh-content h1, .sh-content h2, .sh-content h3, .sh-content h4, .sh-content h5, .sh-content h6,
.sh-content .h1, .sh-content .h2, .sh-content .h3, .sh-content .h4, .sh-content .h5, .sh-content .h6,
.sh-content .title, .sh-content .nk-block-title, .sh-content .card-title, .sh-content .modal-title,
.modal .modal-title, .modal h1, .modal h2, .modal h3, .modal h4, .modal h5, .modal h6 {
    font-family: var(--sh-font);
    font-weight: 500;
    color: var(--sh-ink);
    letter-spacing: 0;
}
.sh-content .nk-block-head .nk-block-title.page-title,
.sh-content .nk-block-head-content > .nk-block-title { font-size: 1.35rem; }
.sh-content .nk-block-des, .sh-content .nk-block-des p { color: var(--sh-muted); }
.sh-content b, .sh-content strong { font-weight: 500; }
.sh-content .fw-bold, .sh-content .fw-bolder { font-weight: 700 !important; }
.sh-content .btn, .modal .btn, .sh-topbar .btn {
    --bs-btn-font-family: var(--sh-font);
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: var(--sh-r);
    font-family: var(--sh-font);
    font-weight: 500;
    border-radius: var(--sh-r);
    letter-spacing: 0;
}
.sh-content .btn-sm, .modal .btn-sm { --bs-btn-border-radius: var(--sh-r); border-radius: var(--sh-r); }
.sh-content .btn-lg, .modal .btn-lg { --bs-btn-border-radius: var(--sh-r); border-radius: var(--sh-r); }
/* Primary actions and links in the house accent (#0B4EA2, as on Recruit2) instead of DashLite's violet-blue,
   so the buttons belong to the same product as the navy sidebar. */
.sh-content, .modal { --bs-link-color: var(--sh-accent); --bs-link-color-rgb: 11, 78, 162; --bs-link-hover-color: #09407F; --bs-link-hover-color-rgb: 9, 64, 127; }
.sh-content .btn-primary, .modal .btn-primary, .sh-topbar .btn-primary {
    --bs-btn-bg: var(--sh-accent); --bs-btn-border-color: var(--sh-accent);
    --bs-btn-hover-bg: #09407F; --bs-btn-hover-border-color: #09407F;
    --bs-btn-active-bg: #083A73; --bs-btn-active-border-color: #083A73;
    --bs-btn-disabled-bg: var(--sh-accent); --bs-btn-disabled-border-color: var(--sh-accent);
    --bs-btn-focus-shadow-rgb: 11, 78, 162;
}
.sh-content .btn-outline-primary, .modal .btn-outline-primary {
    --bs-btn-color: var(--sh-accent); --bs-btn-border-color: var(--sh-accent);
    --bs-btn-hover-bg: var(--sh-accent); --bs-btn-hover-border-color: var(--sh-accent);
    --bs-btn-active-bg: #09407F; --bs-btn-active-border-color: #09407F;
    --bs-btn-disabled-color: var(--sh-accent); --bs-btn-disabled-border-color: var(--sh-accent);
    --bs-btn-focus-shadow-rgb: 11, 78, 162;
}
.sh-content .btn-dim.btn-primary, .sh-content .btn-dim.btn-outline-primary { color: var(--sh-accent); background-color: #EAF1FA; }
.sh-content .btn-dim.btn-outline-primary { border-color: #BCCFEA; }
.sh-content .btn-dim.btn-primary:not(:disabled):not(.disabled):hover,
.sh-content .btn-dim.btn-outline-primary:not(:disabled):not(.disabled):hover { color: #fff; background-color: var(--sh-accent); border-color: var(--sh-accent); }
.sh-content .link-primary { color: var(--sh-accent) !important; }
.sh-content .link-primary:hover, .sh-content .link-primary:focus { color: #09407F !important; }
/* success and danger in the house greens and reds (DashLite's mint and coral read as another product) */
.sh-content .btn-success, .modal .btn-success {
    --bs-btn-bg: var(--sh-ok); --bs-btn-border-color: var(--sh-ok);
    --bs-btn-hover-bg: #17663F; --bs-btn-hover-border-color: #17663F;
    --bs-btn-active-bg: #145836; --bs-btn-active-border-color: #145836;
    --bs-btn-disabled-bg: var(--sh-ok); --bs-btn-disabled-border-color: var(--sh-ok);
    --bs-btn-focus-shadow-rgb: 30, 127, 79;
}
.sh-content .btn-danger, .modal .btn-danger {
    --bs-btn-bg: var(--sh-err); --bs-btn-border-color: var(--sh-err);
    --bs-btn-hover-bg: #A23023; --bs-btn-hover-border-color: #A23023;
    --bs-btn-active-bg: #8E2A1F; --bs-btn-active-border-color: #8E2A1F;
    --bs-btn-disabled-bg: var(--sh-err); --bs-btn-disabled-border-color: var(--sh-err);
    --bs-btn-focus-shadow-rgb: 192, 57, 43;
}
.sh-content .form-control, .sh-content .form-select, .sh-content .input-group-text,
.sh-content select, .sh-content input[type="text"], .sh-content input[type="email"], .sh-content input[type="number"],
.sh-content input[type="password"], .sh-content input[type="date"], .sh-content input[type="tel"], .sh-content textarea,
.modal .form-control, .modal .form-select, .modal select, .modal textarea, .modal .input-group-text {
    border-radius: var(--sh-r);
    font-family: var(--sh-font);
}
.sh-content .input-group > :not(:first-child), .modal .input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.sh-content .input-group > :not(:last-child):not(.dropdown-menu), .modal .input-group > :not(:last-child):not(.dropdown-menu) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.sh-content .form-control:focus, .sh-content .form-select:focus, .modal .form-control:focus, .modal .form-select:focus { border-color: #8AAEDC; box-shadow: 0 0 0 .18rem rgba(11,78,162,.12); }
.sh-content .form-label, .sh-content label.form-label, .modal .form-label { font-weight: 500; color: var(--sh-ink); font-size: 12.5px; }
.sh-content .card, .sh-content .card-bordered, .sh-content .card-preview { border-radius: var(--sh-r); }
.sh-content .card-bordered { border-color: var(--sh-line); }
.sh-content .badge { border-radius: 3px; font-family: var(--sh-font); }
.sh-content .alert { border-radius: var(--sh-r); }
.sh-content .dropdown-menu, .sh-content .popover, .sh-content .tooltip-inner { border-radius: var(--sh-r); }
.modal-content { border-radius: var(--sh-r); }
.modal { font-family: var(--sh-font); }
.sh-content .table { --bs-table-color: var(--sh-text); }
.sh-content .table > thead > tr > th, .sh-content .table thead th { font-weight: 500; color: var(--sh-ink); }
.sh-content .nav-tabs .nav-link { font-family: var(--sh-font); font-weight: 500; }
/* DashLite also defines .gap-1 ... .gap-5 as vertical SPACERS (height: .375rem ... 2.75rem). On a flex or grid
   container using Bootstrap's gap utility that height squashes the row and its contents overlap what follows. */
.d-flex[class*="gap-"], .d-inline-flex[class*="gap-"], .d-grid[class*="gap-"], .d-inline-grid[class*="gap-"],
[class*="d-sm-flex"][class*="gap-"], [class*="d-md-flex"][class*="gap-"], [class*="d-lg-flex"][class*="gap-"], [class*="d-xl-flex"][class*="gap-"],
.row[class*="gap-"], .btn-group[class*="gap-"], .hstack[class*="gap-"], .vstack[class*="gap-"], .flex-wrap[class*="gap-"] { height: auto; }
.sh-content .pagination .page-link { border-radius: 0; }
.sh-content .pagination .page-item:first-child .page-link { border-top-left-radius: var(--sh-r); border-bottom-left-radius: var(--sh-r); }
.sh-content .pagination .page-item:last-child .page-link { border-top-right-radius: var(--sh-r); border-bottom-right-radius: var(--sh-r); }

/* ============================================================================
   Page building blocks for the shell pages (headers, panels, forms, tables).
   Same vocabulary on every page (prefix ep-) so the infrastructure, returns, ratings and
   map pages read as one product with the rest of the portal.
   ============================================================================ */
.ep-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: 0 0 16px; }
.ep-head h3 { font-size: 1.3rem; font-weight: 500; color: var(--sh-ink); margin: 0; }
.ep-head .sub { color: var(--sh-muted); font-size: 13px; margin-top: 3px; }
.ep-head .kick { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; color: var(--sh-accent); margin-bottom: 3px; }
.ep-head .tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.ep-panel { background: #fff; border: 1px solid var(--sh-line); border-radius: var(--sh-r); margin-bottom: 16px; }
.ep-panel > .hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--sh-line); }
.ep-panel > .hd h5 { margin: 0; font-size: 14px; font-weight: 500; color: var(--sh-ink); }
.ep-panel > .hd .sub { display: block; font-size: 12px; color: var(--sh-muted); margin-top: 2px; font-weight: 400; }
.ep-panel > .bd { padding: 16px; }
.ep-panel > .ft { padding: 12px 16px; border-top: 1px solid var(--sh-line); background: #FAFBFD; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; border-radius: 0 0 var(--sh-r) var(--sh-r); }

.ep-fieldset { border: 1px solid var(--sh-line); border-radius: var(--sh-r); padding: 14px 14px 4px; margin: 0 0 14px; background: #FCFDFE; }
.ep-fieldset > legend, .ep-fieldset > .lg { float: none; width: auto; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sh-accent); padding: 0 6px; margin: 0 0 6px -6px; }
.ep-hint { font-size: 12px; color: var(--sh-muted); }
.ep-req::after { content: " *"; color: var(--sh-err); }

.ep-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.ep-tbl th { background: #F7F9FC; color: var(--sh-ink); font-weight: 500; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--sh-line); white-space: nowrap; }
.ep-tbl td { border-bottom: 1px solid #EEF2F7; padding: 8px 12px; vertical-align: middle; color: var(--sh-text); }
.ep-tbl tr:hover td { background: #FBFCFE; }
.ep-tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.ep-tbl tr.band td, .ep-tbl tr.band:hover td { background: #EEF3FA; color: var(--sh-ink); font-weight: 500; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 7px 12px; border-bottom: 1px solid var(--sh-line); }
.ep-tbl tr.band .n { margin-left: 8px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--sh-muted); }
.ep-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

.ep-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.ep-stat { background: #fff; border: 1px solid var(--sh-line); border-radius: var(--sh-r); padding: 12px 14px; }
.ep-stat .k { display: block; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--sh-muted); font-weight: 500; }
.ep-stat b { display: block; font-size: 1.25rem; font-weight: 500; color: var(--sh-ink); margin-top: 3px; font-variant-numeric: tabular-nums; }
.ep-stat .n { display: block; font-size: 11.5px; color: var(--sh-muted); margin-top: 2px; }
.ep-stat.ok b { color: var(--sh-ok); } .ep-stat.warn b { color: var(--sh-warn); } .ep-stat.bad b { color: var(--sh-err); }

.ep-chip { display: inline-block; padding: 3px 9px; border-radius: 0; font-size: 11px; font-weight: 500; letter-spacing: .02em; background: #EEF3FA; color: var(--sh-ink); white-space: nowrap; }
.ep-chip.ok { background: #DFF3E7; color: var(--sh-ok); }
.ep-chip.warn { background: #FDF0D5; color: var(--sh-warn); }
.ep-chip.bad { background: #FDECEC; color: var(--sh-err); }
.ep-chip.info { background: #E8F0FB; color: var(--sh-accent); }
.ep-chip.mute { background: #F1F3F7; color: var(--sh-muted); }

.ep-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--sh-line); margin: 0 0 16px; }
.ep-tabs a, .ep-tabs span { display: inline-block; padding: 8px 14px; font-size: 13px; font-weight: 500; color: var(--sh-muted); text-decoration: none !important; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ep-tabs a:hover { color: var(--sh-ink); }
.ep-tabs .on { color: var(--sh-accent); border-bottom-color: var(--sh-accent); }

.ep-empty { text-align: center; color: var(--sh-muted); padding: 28px 12px; font-size: 13px; }
.ep-note { background: #F7F9FC; border: 1px solid var(--sh-line); border-left: 3px solid var(--sh-accent); border-radius: var(--sh-r); padding: 10px 14px; font-size: 12.5px; color: var(--sh-text); margin-bottom: 14px; }
.ep-note.warn { border-left-color: #D99A00; background: #FFFBF0; }
.ep-note.bad { border-left-color: var(--sh-err); background: #FFF6F6; }
.ep-note.ok { border-left-color: var(--sh-ok); background: #F3FBF6; }

/* ============================================================================
   Dashboard building blocks (both dashboards use exactly these)
   ============================================================================ */
.ad-strip {
    background-color: #F4F6F9;
    background-repeat: no-repeat;
    background-position: right -30px center;
    background-size: auto 150%;
    background-blend-mode: multiply;
    border: 1px solid var(--sh-line);
    border-radius: var(--sh-r);
    padding: 20px 22px;
    margin-bottom: 1.25rem;
    position: relative; overflow: hidden;
}
.ad-strip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #F4F6F9 58%, rgba(244,246,249,.86) 100%); pointer-events: none; }
.ad-strip > * { position: relative; z-index: 1; }
.ad-strip-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ad-strip-head h4 { margin: 0 0 3px; font-size: 1.15rem; font-weight: 500; color: var(--sh-ink); }
.ad-strip-head .sub { font-size: .84rem; color: var(--sh-muted); margin-bottom: 16px; }
.ad-strip-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ad-strip-tools .form-select, .ad-strip-tools .form-control { font-size: 12.5px; padding: 5px 28px 5px 9px; border-radius: var(--sh-r); width: auto; min-width: 150px; min-height: 0; height: auto; }
.ad-tiles { display: flex; gap: 12px; flex-wrap: wrap; }
.ad-tile {
    flex: 1 1 150px; min-width: 0;
    background: rgba(255,255,255,.86);
    border: 1px solid #E4E9F2; border-radius: var(--sh-r);
    padding: 12px 14px;
    text-decoration: none !important; color: inherit;
}
.ad-tile .k { display: block; font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: var(--sh-muted); font-weight: 500; }
.ad-tile b { display: block; font-size: 1.25rem; font-weight: 500; color: var(--sh-ink); line-height: 1.2; margin-top: 3px; font-variant-numeric: tabular-nums; }
.ad-tile .n { display: block; font-size: .72rem; color: var(--sh-muted); margin-top: 2px; }
a.ad-tile { display: block; transition: .15s ease; }
a.ad-tile:hover { border-color: var(--sh-accent); background: #fff; }
.ad-tile.warn b { color: var(--sh-warn); }
.ad-tile.bad b { color: var(--sh-err); }
@media (max-width: 575.98px) {
    .ad-strip { background-position: right -40px center; background-size: auto 130%; }
    .ad-tile { flex: 1 1 45%; }
}

.sh-card { background: #fff; border: 1px solid var(--sh-line); border-radius: var(--sh-r); margin-bottom: 1.25rem; box-shadow: none; }
.sh-card .sh-card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--sh-line); }
.sh-card .sh-card-h h4 { font-size: 14px; font-weight: 500; margin: 0; color: var(--sh-ink); font-family: var(--sh-font); }
.sh-card .sh-card-h p { font-size: 12.5px; color: var(--sh-muted); margin: 3px 0 0; }
.sh-card .sh-card-h a { font-size: 13px; white-space: nowrap; color: var(--sh-accent); text-decoration: none; }
.sh-card .sh-card-b { padding: 14px 16px; }
.sh-card.h-100 { height: calc(100% - 1.25rem) !important; }

/* gender cards */
.gx-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.gx-card { border: 1px solid var(--sh-line); border-radius: var(--sh-r); padding: 14px 16px; background: #fff; }
.gx-head b { display: block; font-size: .95rem; font-weight: 500; color: var(--sh-ink); }
.gx-head span { font-size: .75rem; color: var(--sh-muted); }
.gx-total { font-size: 1.6rem; font-weight: 700; color: var(--sh-accent); margin: 6px 0 10px; line-height: 1; font-variant-numeric: tabular-nums; }
.gx-split { display: flex; gap: 14px; flex-wrap: wrap; }
.gx-side { display: flex; align-items: center; gap: 8px; flex: 1 1 92px; min-width: 0; }
.gx-ic { width: 26px; height: 26px; flex: none; }
.gx-m { color: var(--sh-accent); }
.gx-f { color: #B3268E; }
.gx-n { font-size: 1rem; font-weight: 500; color: var(--sh-ink); line-height: 1.2; }
.gx-l { font-size: .72rem; color: var(--sh-muted); }
.gx-bar { height: 6px; border-radius: 3px; background: #B3268E; overflow: hidden; margin-top: 11px; }
.gx-bar .m { display: block; height: 100%; background: var(--sh-accent); }

/* split rows (label + up to three figures) */
.sp-head, .sp-row { display: grid; grid-template-columns: 1fr 74px 74px 74px; gap: 8px; align-items: center; }
.sp-head { padding: 0 0 7px; border-bottom: 2px solid var(--sh-line); margin-bottom: 4px; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--sh-muted); font-weight: 500; }
.sp-row { padding: 8px 0; border-bottom: 1px dashed var(--sh-line); font-size: .86rem; }
.sp-row:last-child { border-bottom: 0; }
.sp-l { min-width: 0; }
.sp-l b { display: block; color: var(--sh-ink); font-weight: 500; overflow-wrap: anywhere; }
.sp-bar { display: block; height: 5px; border-radius: 3px; background: #EEF2F7; overflow: hidden; margin-top: 5px; max-width: 320px; }
.sp-bar b { display: block; height: 100%; background: var(--sh-accent); }
.sp-v { text-align: right; font-variant-numeric: tabular-nums; }
.sp-a { color: var(--sh-accent); font-weight: 500; }
.sp-b { color: #8A6100; }
.sp-tot { color: var(--sh-ink); font-weight: 500; }
.sp-m { color: var(--sh-accent); }
.sp-f { color: #B3268E; }
.sp-scroll { max-height: 440px; overflow-y: auto; }
@media (max-width: 575.98px) {
    .sp-head { display: none; }
    .sp-row { grid-template-columns: 1fr 1fr 1fr; row-gap: 2px; }
    .sp-l { grid-column: 1 / -1; }
    .sp-v { text-align: left; font-size: .8rem; }
    .sp-v::before { display: block; font-size: .62rem; text-transform: uppercase; color: var(--sh-muted); content: attr(data-l); }
}

/* lists with dashed separators, chips (square per house style) */
.dl-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.dl-row + .dl-row { border-top: 1px dashed #DDE5EF; }
.dl-row .tx { flex: 1; min-width: 0; }
.dl-row .tx b { display: block; font-size: .85rem; font-weight: 500; color: var(--sh-ink); }
.dl-row .tx span { display: block; font-size: .76rem; color: var(--sh-muted); }
.dl-row .ac { flex: none; }
.dl-row .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--sh-accent); }
.dl-row .dot.ok { background: var(--sh-ok); } .dl-row .dot.warn { background: #F0B429; } .dl-row .dot.bad { background: var(--sh-err); }
.dl-row .ac .btn { border-radius: var(--sh-r); }
.dl-chip { display: inline-block; padding: 4px 10px; border-radius: 0; font-size: .72rem; font-weight: 500; letter-spacing: .03em; background: #EEF3FA; color: var(--sh-ink); margin: 0 6px 6px 0; }
.dl-chip.ok { background: #DFF3E7; color: var(--sh-ok); }
.dl-chip.warn { background: #FDF0D5; color: var(--sh-warn); }
.dl-chip.bad { background: #FDECEC; color: var(--sh-err); }
.dl-dotted > li + li { border-top: 1px dashed #DDE5EF; padding-top: 8px; margin-top: 8px; }
.dl-dotted { list-style: none; padding: 0; margin: 0; font-size: .86rem; }
.dl-dotted b { color: var(--sh-ink); font-weight: 500; }

/* quick links grid */
.qk { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.qk a {
    display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
    padding: 14px 8px; border: 1px solid var(--sh-line); border-radius: var(--sh-r); background: #FBFDFF;
    color: var(--sh-ink); font-weight: 500; font-size: 12.5px; text-decoration: none !important;
}
.qk a:hover { background: #EEF3FA; border-color: #C7D4E8; }
.qk a .ic { color: var(--sh-accent); display: inline-flex; }
.qk a .ic svg { width: 22px; height: 22px; }

.ro-strip { background: #FDF0D5; border: 1px solid #E8D3A8; border-radius: var(--sh-r); padding: 10px 14px; margin: 0 0 14px; font-size: .84rem; line-height: 1.55; }
.ro-strip b { color: #8A6100; }
.ro-strip.ro-blocked { background: #FDECEC; border-color: #F2B5B5; }
.ro-strip.ro-blocked b { color: #8B1F1F; }

/* ============================================================================
   Busy overlay - shown while an insert / update posts back (emis-busy.js)
   ============================================================================ */
.emis-busy { position: fixed; inset: 0; z-index: 2147483000; display: none; align-items: center; justify-content: center; background: rgba(18,36,61,.38); }
.emis-busy.on { display: flex; }
.emis-busy .bx { background: #fff; border-radius: var(--sh-r); box-shadow: 0 18px 50px rgba(15,23,42,.25); padding: 22px 26px; min-width: 260px; max-width: 90vw; text-align: center; font-family: var(--sh-font); }
.emis-busy .sp { width: 38px; height: 38px; margin: 0 auto 12px; border-radius: 50%; border: 3px solid #E4E9F2; border-top-color: var(--sh-accent); animation: emisSpin .8s linear infinite; }
.emis-busy .t { font-size: 14px; font-weight: 500; color: var(--sh-ink); }
.emis-busy .s { font-size: 12px; color: var(--sh-muted); margin-top: 3px; }
@keyframes emisSpin { to { transform: rotate(360deg); } }

/* the WhatsApp support button sits bottom-left by design; beside the sidebar on desktop so it never covers Sign out */
@media (min-width: 992px) { body.sh-body .wa-float { left: calc(var(--sh-side) + 18px); } }
/* the WhatsApp button sits over the footer's left end - start the footer text after it */
body.sh-body:has(.wa-float) .sh-footer { padding-left: 92px; }
@media (max-width: 991.98px) { body.sh-body:has(.wa-float) .sh-footer { padding-left: 86px; } }

/* ============================================================================
   Corner radius cap - nothing on the portal rounds more than 4px.
   Covers Bootstrap, DashLite and the page styles alike; true circles
   (avatars, dots, round icons, spinners) keep their 50%.
   ============================================================================ */
:root, [data-bs-theme], body {
    --bs-border-radius: 4px;
    --bs-border-radius-sm: 3px;
    --bs-border-radius-lg: 4px;
    --bs-border-radius-xl: 4px;
    --bs-border-radius-xxl: 4px;
    --bs-border-radius-2xl: 4px;
    --bs-border-radius-pill: 4px;
}
.rounded-pill, .rounded-lg, .rounded-xl, .rounded-xxl, .badge-pill, .badge.rounded-pill,
.btn-pill, .btn-round, .btn-rounded, .round-lg, .round-xl, .form-round, .progress-pill, .rating-pill { border-radius: 4px !important; }
.badge { border-radius: 3px; }
/* switches: square track and knob to match */
.form-switch .form-check-input {
    border-radius: 4px;
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3crect x='-3' y='-3' width='6' height='6' rx='1' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3crect x='-3' y='-3' width='6' height='6' rx='1' fill='%2386b7fe'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3crect x='-3' y='-3' width='6' height='6' rx='1' fill='%23fff'/%3e%3c/svg%3e");
}

/* A Bootstrap scrollable dialog whose body and footer sit inside an UpdatePanel's <div>: keep the body scrolling and
   the footer (Save / Close) on screen - without this the dialog ran off the bottom of the window */
.modal-dialog-scrollable .modal-content > div[id]:not(.modal-header):not(.modal-body):not(.modal-footer) {
    display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden;
}
.modal-dialog-scrollable .modal-content > div[id] > .modal-body { overflow-y: auto; }

/* ============================================================================
   Page anatomy - the same on every portal page (ministry console, Bursary, Library, Vendor):
     page head   : where the page sits (kicker), its title, what it is for (lead), the step before / after it
     cards       : one card per task, a numbered heading when the tasks follow each other, one line saying
                   what the card does
     tabs        : pages that belong together (Finance) share one tab bar
   ============================================================================ */
.pg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 18px; }
.pg-titles { min-width: 0; flex: 1 1 520px; }
.pg-head .kicker, .cx-head .kicker { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #0B4EA2; }
.pg-titles .pg-kicker ~ .kicker { display: none; }               /* the master's kicker replaces a page's own */
.pg-head h1, .pg-titles h1 { font-size: 20px; font-weight: 500; color: #1E2D50; margin: 2px 0 0; line-height: 1.3; }
.pg-lead { max-width: 920px; font-size: 13.5px; line-height: 1.55; color: #4A5A70; margin: 6px 0 0; }
.pg-flow { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: 12.5px; }
.pg-flow a { font-weight: 500; color: #0B4EA2; }
.pg-flow a.next { color: #12243D; }
.pg-date { text-align: right; font-size: 12.5px; color: #6B7A90; }
.pg-date b { display: block; color: #1E2D50; font-size: 13.5px; font-weight: 500; }
.pg-dup-hidden { display: none !important; }                       /* a page's own title that repeats the head */

/* step number in the sidebar ("1 Roster Freeze") and in sub-headings ("2 - Collect scores") */
.sh-no { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px;
         margin-right: 8px; border-radius: 3px; background: rgba(240,180,41,.18); color: #F0B429; font-size: 11px; font-weight: 700;
         line-height: 1; flex: none; }
.sh-sub .sh-no { margin-right: 6px; }
.sh-link .sh-no + .tx { min-width: 0; }

/* cards (also available to pages on the older admin master) */
.sh-content .fp-card, .sh-content .cx-card { background: #fff; border: 1px solid #E4E9F2; border-radius: 4px; padding: 18px 20px; margin-bottom: 16px; }
.sh-content .fp-card > h5, .sh-content .cx-card > h5 { font-size: 14px; font-weight: 500; color: #1E2D50; margin: 0 0 14px; padding-bottom: 10px;
    border-bottom: 1px solid #E4E9F2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sh-content .fp-card > h5 .fp-sub { font-weight: 400; margin-left: auto; }
.sh-content .fp-card > h5 + .card-note { margin-top: -6px; }
.fp-card > h5 .no, .fp-step-no { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 4px;
                                 background: #12243D; color: #fff; font-size: 12px; font-weight: 700; flex: none; }
.card-note { font-size: 12.5px; color: #6B7A90; margin: 0 0 14px; line-height: 1.5; }
.card-rule { border: 0; border-top: 1px solid #E4E9F2; margin: 14px 0; opacity: 1; }
.fp-help { font-size: 12.5px; color: #6B7A90; margin-bottom: 12px; }
.fp-sub { font-size: 11.5px; color: #6B7A90; }
.fp-note { background: #EAF1FA; border: 1px solid #D3E2F5; border-radius: 4px; padding: 10px 14px; font-size: 12.5px; color: #1E3A5F; line-height: 1.5; margin: 0 0 14px; }
.fp-note.warn { background: #FDF6E3; border-color: #F3E1B0; color: #6B4E00; }
.fp-note.bad { background: #FDECEC; border-color: #F5C6C6; color: #8A1C1C; }
.fp-note.ok { background: #E9F6EE; border-color: #C5E6D1; color: #165A36; }
table.fp-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.fp-tbl th { background: #F7F9FC; color: #1E2D50; font-weight: 500; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; padding: 9px 12px; text-align: left; border-bottom: 1px solid #E4E9F2; white-space: nowrap; }
table.fp-tbl td { border-bottom: 1px solid #F1F5F9; padding: 8px 12px; vertical-align: middle; }
table.fp-tbl tr:hover td { background: #FBFDFF; }
table.fp-tbl td.n, table.fp-tbl th.n { text-align: right; }
.fp-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.fp-toolbar > div { min-width: 160px; }
.fp-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.fp-empty { text-align: center; color: #6B7A90; font-size: 13px; padding: 26px 10px; border: 1px dashed #D6DEEA; border-radius: 4px; }
.fp-chip { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 3px; background: #EEF2F7; color: #334155; }
.fp-chip.ok { background: #DFF3E7; color: #1E7F4F; } .fp-chip.warn { background: #FDF0D5; color: #8A6100; }
.fp-chip.bad { background: #FDECEC; color: #C0392B; } .fp-chip.info { background: #EAF1FA; color: #0B4EA2; }
.fp-stat { display: inline-block; min-width: 150px; background: #F8FAFC; border: 1px solid #E4E9F2; border-radius: 4px; padding: 12px 16px; margin: 0 8px 8px 0; }
.fp-stat b { display: block; font-size: 20px; color: #1E2D50; font-weight: 500; } .fp-stat span { font-size: 12px; color: #6B7A90; }
/* a numbered "how this works" strip at the top of a page with several steps */
.fp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; counter-reset: fpstep; }
.fp-steps li { background: #fff; border: 1px solid #E4E9F2; border-radius: 4px; padding: 10px 12px 10px 42px; position: relative; font-size: 12.5px; color: #4A5A70; line-height: 1.45; }
.fp-steps li::before { counter-increment: fpstep; content: counter(fpstep); position: absolute; left: 12px; top: 10px; width: 20px; height: 20px; border-radius: 4px;
                       background: #12243D; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.fp-steps li b { display: block; color: #1E2D50; font-size: 13px; font-weight: 600; margin-bottom: 2px; }
/* tab bar shared by pages that belong together (PortalShell.FinanceTabs) */
.fp-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 18px; border-bottom: 1px solid #E4E9F2; }
.fp-tabs a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; font-size: 13px; font-weight: 500; color: #4A5A70;
             border: 1px solid transparent; border-bottom: 0; border-radius: 4px 4px 0 0; margin-bottom: -1px; text-decoration: none !important; background: transparent; }
.fp-tabs a svg { width: 16px; height: 16px; flex: none; }
.fp-tabs a:hover { color: #0B4EA2; background: #F4F7FC; }
.fp-tabs a.active { color: #0B4EA2; background: #fff; border-color: #E4E9F2; font-weight: 600; }
@media (max-width: 767.98px) {
    .pg-date { display: none; }
    .fp-tabs { flex-wrap: nowrap; overflow-x: auto; }
    .fp-tabs a { white-space: nowrap; }
}
@media print { .pg-head, .pg-flow, .fp-tabs, .fp-steps { display: none !important; } }
/* Schools Portal (body.sp-shell): a page heading block that holds only the session picker keeps it on the right, where
   it sat beside the school's details block (that block is no longer sent to the browser) */
.sp-shell .nk-block-head .nk-block-between > .nk-block-head-content:only-child:has(select) { margin-left: auto; }
@media (max-width: 575.98px) { .sp-shell .nk-block-head .nk-block-between > .nk-block-head-content:only-child:has(select) { margin-left: 0; width: 100%; } }
/* records lock (RosterFreezeService / RecordsLockGuard): the banner's lines, and the buttons a lock refuses */
.sp-lock-line { margin-top: 4px; font-size: 13px; }
.sp-lock-note { margin-top: 6px; font-size: 12.5px; color: #7A5A12; }
.sp-locked, .sp-locked:hover, .sp-locked:focus { opacity: .55; cursor: not-allowed !important; }
.sp-lock-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 4px;
                background: #FDF0D5; color: #8A6100; border: 1px solid #F3DDA8; cursor: default; }
/* the top bar's "Locked" chip (a button: the lock's full note opens on a click) */
.sh-topbar button.sp-lock-chip { cursor: pointer; line-height: 1; }
.sh-topbar button.sp-lock-chip:hover { background: #FBE6BF; }
.sh-topbar button.sp-lock-chip svg { width: 14px; height: 14px; }

/* ---- tick boxes: words are never drawn as a box (9 Nov 2026 "f") ------------------------------------------------------
   A label or a span that carries the box's own class (form-check-input) shows as plain words: after a postback ASP.NET's
   CheckBox could give its label the box's class (the words then showed as a long empty box across the column, the box
   over their first letter), and WebForms puts a CheckBox's CssClass on a <span> around the box and its words. Such a
   span lays out as if it were not there, so the box and its words sit side by side as on every other page. */
.sh-content label.form-check-input, .modal label.form-check-input,
.sh-content span.form-check-input, .modal span.form-check-input {
    -webkit-appearance: none !important; appearance: none !important;
    background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; filter: none !important;
    width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; float: none !important;
    vertical-align: baseline !important; opacity: 1 !important; cursor: pointer;
}
.sh-content span.form-check-input, .modal span.form-check-input { display: contents !important; }