/* =====================================================================
   Portal 2026 design system — SCOPED to the 2026 header & footer only.
   Ported from /NewFrontEnd. Every rule is namespaced under
   .pf2026-header or .pf2026-footer so it cannot affect the existing
   2024 controls or Bootstrap. rem units are kept because the site
   already sets html{font-size:62.5%} (1rem = 10px) in typography.css.
   Image paths repointed to /images/portal2026/.
   ===================================================================== */

/* ---- Design tokens (scoped, do not leak to :root) ---- */
.pf2026-header,
.pf2026-footer,
.pf2026-login,
.pf2026-assetsearch,
.pf2026-assetresults,
.pf2026-portalhome,
.pf2026-profile,
.pf2026-manageusers,
.pf2026-resourcegrid {
    --primary-color: #081537;
    --secondary-color: #f02e82;
    --tertiary-color: #1da9a5;
    --tertiary-dark-color: #2c6c6b;
    --purple-color: #5f2b85;
    --sky-blue-color: #55c0de;
    --sky-blue-color-rgb: 85, 192, 222;
    --light-blue-color: #dae3fb;
    --yellow-color: #e5da31;
    --text-color: #666666;
    --form-control-color: #eaeaea;
    --error-color: #e11919;
    --success-color: #2d9b0f;

    --font-family: "Montserrat", sans-serif;
    --secondary-font: "Lato", sans-serif;

    --fs-lg: 1.8rem;
    --fs-md: 1.6rem;
    --fs-sm: 1.4rem;
    --fs-xs: 1.2rem;

    --gutter: 30px;
    --gutter-half: 15px;
    --sm: 4rem;
    --md: 6rem;
    --lg: 8rem;

    --transition: all 150ms linear;
    --btn-height: 4.8rem;

    /* Design heading sizes (production defines a different --h2 on :root; keep ours scoped) */
    --h1: 3.6rem;
    --h2: 2.8rem;
    --h3: 2.4rem;

    --header-height: 20rem;
    --header-link-height: 6.4rem;
}
@media (width < 992px) {
    .pf2026-header,
    .pf2026-footer {
        --header-height: 16rem;
        --header-link-height: 5rem;
    }
}

/* ---- Minimal scoped reset (design markup expects these) ---- */
.pf2026-header *,
.pf2026-header *::before,
.pf2026-header *::after,
.pf2026-footer *,
.pf2026-footer *::before,
.pf2026-footer *::after { box-sizing: border-box; }
.pf2026-header ul,
.pf2026-footer ul { margin: 0; padding: 0; list-style: none; }
.pf2026-header li,
.pf2026-footer li { list-style: none; }
.pf2026-header a,
.pf2026-footer a { text-decoration: none; }
.pf2026-header p, .pf2026-header h1, .pf2026-header h2, .pf2026-header h3,
.pf2026-header h4, .pf2026-header h5, .pf2026-header h6,
.pf2026-footer p, .pf2026-footer h1, .pf2026-footer h2, .pf2026-footer h3,
.pf2026-footer h4, .pf2026-footer h5, .pf2026-footer h6 { margin: 0; padding: 0; }
.pf2026-header img,
.pf2026-footer img { max-width: 100%; height: auto; vertical-align: middle; display: inline-block; }
.pf2026-header button { border: 0; background: none; }
.pf2026-header .container,
.pf2026-footer .container {
    width: 100%;
    max-width: calc(1200px + (var(--gutter) * 2));
    padding: 0 var(--gutter);
    margin-inline: auto;
}
.pf2026-header .text-center,
.pf2026-footer .text-center { text-align: center; }
@media (width > 991px) {
    .pf2026-footer .hidden-lg { display: none !important; }
}
@media (width < 992px) {
    .pf2026-footer .hidden-md { display: none !important; }
}

/* ---- Shield: re-assert the design's base typography so the production 2024
   style.css and Bootstrap generic element rules (body/p/h*/a/ul) cannot leak
   into the header/footer subtree. .pf2026-* selectors out-specify the bare
   element rules; declaring the property is what makes ours win. ---- */
.pf2026-header,
.pf2026-footer {
    font-family: var(--font-family);
    font-size: var(--fs-md);
    line-height: 1.4;
    color: var(--text-color);
    font-weight: 400;
}
.pf2026-header a,
.pf2026-footer a { color: inherit; }
.pf2026-header p,
.pf2026-footer p {
    font-family: var(--font-family);
    font-size: var(--fs-md);
    line-height: 1.4;
    color: inherit;
    margin: 0;
}
.pf2026-header h1, .pf2026-header h2, .pf2026-header h3,
.pf2026-footer h1, .pf2026-footer h2, .pf2026-footer h3 {
    font-family: var(--font-family);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}
.pf2026-header h1, .pf2026-footer h1 { font-size: var(--h1); }
.pf2026-header h2, .pf2026-footer h2 { font-size: var(--h2); }
.pf2026-header h3, .pf2026-footer h3 { font-size: var(--h3); }

/* =====================  HEADER  ===================== */
.pf2026-header {
    height: var(--header-height);
    display: flex;
    align-items: stretch;   /* neutralise production `header{align-items:center}` */
    padding: 0;             /* neutralise production `header{padding:calc(var(--gutter)/2) 0}` */
    min-height: 0;          /* neutralise production `header{min-height:var(--header-height)}` */
    position: sticky;   /* design uses fixed; sticky keeps flow & avoids overlapping the 2024 body */
    left: 0;
    top: 0;
    width: 100%;
    z-index: 999;
    background-color: white;
    transition: var(--transition);
    font-family: var(--font-family);
}
.pf2026-header.header-scrolled {
    box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 20%);
}
.pf2026-header > .container {
    flex: 1 0 0%;
    display: flex;
    flex-direction: column;
    align-items: stretch;       /* neutralise production `header .container{align-items:center}` */
    justify-content: flex-start; /* neutralise production `header .container{justify-content:center}` */
    gap: 0;                      /* neutralise production `header .container{gap:calc(var(--gutter)/2)}` */
}
.pf2026-header .header-content {
    flex: 1 0 0%;
    border-top: 1rem solid var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
.pf2026-header .logo { display: block; }
.pf2026-header .logo a { display: flex; align-items: center; }
.pf2026-header .logo a img { max-width: 26.8rem; width: auto; display: block; } /* width:auto neutralises production `header .logo img{width:300px}` */

.pf2026-header .header-actions {
    display: flex;
    align-items: center;
    gap: var(--gutter-half);
}
.pf2026-header .logout-link {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: #111111;
    font-size: var(--fs-sm);
    font-family: var(--secondary-font);
    font-weight: 700;
    background: none;
    cursor: pointer;
}
.pf2026-header .logout-link:hover { color: var(--secondary-color); }

/* min-height keeps the navy band at full height when the link list is not
   rendered (logged out / non-SAP), where nothing else would give nav height. */
.pf2026-header nav { background-color: var(--primary-color); min-height: var(--header-link-height); }
.pf2026-header nav > ul > li { position: relative; }
.pf2026-header nav > ul > li > a {
    height: var(--header-link-height);
    display: flex;
    align-items: center;
    padding: 0 3rem;
    font-size: var(--fs-md);
    font-weight: 700;
    text-transform: uppercase;
    color: white;
    gap: 0 0.8rem;
    font-family: var(--font-family);
}
.pf2026-header nav > ul > li.ml-auto { margin-left: auto; }
.pf2026-header nav > ul > li > a.button {
    min-width: 19.6rem;
    padding: 0 var(--gutter-half);
}
.pf2026-header nav > ul > li > a.button.tools-button {
    background: linear-gradient(to right, var(--tertiary-color), var(--tertiary-dark-color));
    margin-right: 0.1rem;
}
.pf2026-header nav > ul > li > a.button.clevertouch-button {
    background: linear-gradient(to right, var(--secondary-color), var(--purple-color));
}
.pf2026-header nav > ul > li > ul {
    min-width: 100%;
    background-color: var(--light-blue-color);
    padding: 0;
    transition: var(--transition);
}
.pf2026-header nav > ul > li > ul > li > a {
    display: flex;
    align-items: center;
    padding: 0 var(--gutter);
    min-height: 3.6rem;
    white-space: nowrap;
    font-size: var(--fs-sm);
    color: #333333;
    font-family: var(--secondary-font);
    transition: var(--transition);
    text-transform: none;
    font-weight: normal;
    height: auto;
}
.pf2026-header nav > ul > li > ul > li > a:hover {
    background-color: var(--sky-blue-color);
    color: white;
}
.pf2026-header .burger-wrapper {
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Burger icon */
.pf2026-header .burger {
    position: relative;
    width: 4rem;
    height: 3rem;
    cursor: pointer;
    z-index: 99999;
    margin-left: var(--gutter);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pf2026-header .burger span { flex: 1 0 0%; height: 0.2rem; background-color: white; transition: var(--transition); }
.pf2026-header .burger::before,
.pf2026-header .burger::after {
    position: absolute;
    width: 100%;
    height: 0.2rem;
    content: "";
    background-color: white;
    transition: 150ms linear;
}
.pf2026-header .burger::before { left: 50%; top: 20%; transform: translate(-50%, -50%); }
.pf2026-header .burger::after { right: 50%; bottom: 20%; transform: translate(50%, 50%); }
.pf2026-header .burger.active::before { transform: translate(-50%, -50%) rotate(-45deg); top: 50%; }
.pf2026-header .burger.active::after { transform: translate(50%, 50%) rotate(45deg); bottom: 50%; }
.pf2026-header .burger.active span { opacity: 0; visibility: hidden; }
@media (width < 576px) {
    .pf2026-header .burger { margin-left: var(--gutter-half); }
}

@media (width > 991px) {
    .pf2026-header nav > ul { display: flex; align-items: center; }
    .pf2026-header nav > ul > li > a { justify-content: center; }
    .pf2026-header nav > ul > li > a img { transition: 100ms linear; }
    .pf2026-header nav > ul > li:hover > a img { transform: rotate(-180deg); }
    .pf2026-header nav > ul > li > ul {
        display: block !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        position: absolute;
        left: 0;
        top: 100%;
        box-shadow: 0 0.3rem 0.3rem rgba(0, 0, 0, 15%);
    }
    .pf2026-header nav > ul > li:hover > ul {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    .pf2026-header .burger-wrapper { display: none; }
}
@media (width < 992px) {
    .pf2026-header > .container { padding: 0; }
    .pf2026-header nav > ul > li > a { padding: 0 var(--gutter-half); }
    .pf2026-header nav > ul {
        position: absolute;
        left: 0;
        top: 100%;
        width: 100%;
        background-color: var(--primary-color);
        min-height: calc(100dvh - var(--header-height));
        transition: var(--transition);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    .pf2026-header .header-content {
        display: flex;
        align-items: center;
        justify-content: center;
        border-width: 0.5rem;
    }
    .pf2026-header .header-content .header-actions {
        position: absolute;
        right: var(--gutter-half);
        top: 1rem;
    }
    .pf2026-header .burger-wrapper { display: flex; height: var(--header-link-height); }
    .pf2026-header nav > ul.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    .pf2026-header nav > ul > li > ul { display: none; }
    .pf2026-header nav > ul > li.open > ul { display: block; }
}
@media (width < 576px) {
    .pf2026-header .logo a img { max-width: 16rem; }
}

/* =====================  FOOTER  ===================== */
.pf2026-footer {
    font-family: var(--font-family);
    background: transparent; /* neutralise production `footer{background-color:var(--tertiary)}` */
    padding: 0;              /* neutralise production `footer{padding:7rem 0}` */
}
.pf2026-footer .footer-content {
    padding: var(--md) var(--gutter);
    background-color: var(--primary-color);
}
.pf2026-footer .footer-content > :not(:last-child) { margin-bottom: var(--sm); }
.pf2026-footer .footer-content > :first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--gutter);
}
.pf2026-footer .footer-logo { display: flex; align-items: center; }
.pf2026-footer .footer-logo a { display: flex; align-items: center; }
.pf2026-footer .footer-logo a img { display: block; width: 26.8rem; min-width: 26.8rem; }
.pf2026-footer .footer-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem var(--gutter);
}
.pf2026-footer .footer-buttons .btn { min-width: 25.6rem; transition: var(--transition); }
.pf2026-footer .footer-buttons .btn:hover { opacity: 80%; }
.pf2026-footer .footer-content > :last-child {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--gutter);
}
.pf2026-footer .footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--gutter) var(--md);
}
.pf2026-footer .footer-headding { color: white; font-weight: 700; }
.pf2026-footer .footer-headding:not(:last-child) { margin-bottom: 2rem; }
.pf2026-footer .footer-links ul li { display: flex; }
.pf2026-footer .footer-links ul li:not(:last-child) { margin-bottom: 1.2rem; }
.pf2026-footer .footer-links ul li a {
    display: flex;
    align-items: center;
    line-height: 1;
    font-size: var(--fs-sm);
    color: white;
    transition: var(--transition);
    white-space: nowrap;
}
.pf2026-footer .footer-links ul li a:hover { color: var(--secondary-color); }
.pf2026-footer .contact-number:not(:last-child) { margin-bottom: var(--gutter); }
.pf2026-footer .contact-number {
    color: var(--yellow-color);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0 1rem;
}
.pf2026-footer .contact-number > * { font-weight: 700; }
.pf2026-footer .social-media-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.2rem;
}
.pf2026-footer .social-media-links > * {
    width: 4.4rem;
    aspect-ratio: 1;
    border-radius: 100%;
    display: grid;
    place-items: center;
    background: linear-gradient(to right, var(--secondary-color), var(--purple-color));
    transition: var(--transition);
}
.pf2026-footer .social-media-links > * > * { max-width: 70%; max-height: 70%; }
.pf2026-footer .social-media-links > * > svg path { fill: white; }
.pf2026-footer .social-media-links > :hover { opacity: 80%; }
@media (width < 992px) {
    .pf2026-footer .footer-content > :first-child { flex-direction: column; }
    .pf2026-footer .footer-content > :last-child { display: block; align-items: flex-start; }
    .pf2026-footer .footer-content > :last-child > :not(:last-child) { margin-bottom: var(--gutter); }
    .pf2026-footer .footer-links { justify-content: center; }
    .pf2026-footer .contact-number { justify-content: center; }
    .pf2026-footer .social-media-links { justify-content: center; }
}
@media (width < 768px) {
    .pf2026-footer .footer-links {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sm) var(--gutter);
    }
    .pf2026-footer .footer-buttons { flex-direction: column; }
}
.pf2026-footer .copyright:not(:first-child) {
    border-top: 0.1rem solid var(--tertiary-color);
    background-color: var(--primary-color);
}
.pf2026-footer .copyright {
    padding: var(--gutter);
    display: flex;
    align-items: center;
    gap: var(--gutter) var(--sm);
    background-color: var(--primary-color);
}
.pf2026-footer .copyright p { font-size: var(--fs-xs); color: white; }
.pf2026-footer .copyright p:not(:last-child) { margin-bottom: 0.5rem; }
.pf2026-footer .copyright p:last-child { margin-top: 1rem; }
.pf2026-footer .copyright p a { color: white; transition: var(--transition); }
.pf2026-footer .copyright p a:hover { color: var(--secondary-color); text-decoration: underline; }
.pf2026-footer .copyright-image { display: flex; align-items: center; gap: var(--gutter); }
@media (width < 992px) {
    .pf2026-footer .copyright { flex-direction: column; }
    .pf2026-footer .copyright p { text-align: center; }
}
@media (width < 768px) {
    .pf2026-footer .copyright p:last-child { margin-top: 0; }
    .pf2026-footer .copyright p:not(:last-child) { margin-bottom: 2rem; }
}

/* ---- Buttons (scoped; must not touch Bootstrap .btn) ---- */
.pf2026-footer .btn {
    height: var(--btn-height);
    padding: 0 var(--gutter);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0 1rem;
    white-space: nowrap;
    font-family: var(--font-family);
    font-size: var(--fs-md);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
    border-radius: 5rem;
    border: 0;
    cursor: pointer;
}
.pf2026-footer .btn.btn-secondary { background: linear-gradient(to right, var(--secondary-color), var(--purple-color)); color: white; }
.pf2026-footer .btn.btn-tertiary { background: linear-gradient(to right, var(--tertiary-color), var(--tertiary-dark-color)); color: white; }

/* =====================  LOGIN (page-4 / page-5 error / page-6 forgotten)  =====================
   Scoped under .pf2026-login. Styled to fit the markup the reused bs5TextBox / bs5CheckBox
   controls emit: <div class="mb-3"><label class="form-label sr-only"><input class="form-control">…
   Fully self-describing so nothing leaks from production style.css / Bootstrap. */
.pf2026-login *,
.pf2026-login *::before,
.pf2026-login *::after { box-sizing: border-box; }
.pf2026-login {
    font-family: var(--font-family);
    font-size: var(--fs-md);
    line-height: 1.4;
    color: var(--text-color);
}
.pf2026-login ul { margin: 0; padding: 0; list-style: none; }
.pf2026-login li { list-style: none; }
.pf2026-login p { margin: 0; font-family: var(--font-family); font-size: var(--fs-md); line-height: 1.4; }
.pf2026-login h1, .pf2026-login h2, .pf2026-login h3 { margin: 0; font-family: var(--font-family); font-weight: 700; line-height: 1.2; }
.pf2026-login h1 { font-size: var(--h1); }
.pf2026-login img { max-width: 100%; height: auto; vertical-align: middle; }
.pf2026-login a { color: inherit; text-decoration: none; }
.pf2026-login .container { width: 100%; max-width: calc(1200px + (var(--gutter) * 2)); padding: 0 var(--gutter); margin-inline: auto; }
.pf2026-login .text-center { text-align: center; }
.pf2026-login .pt-sm { padding-top: var(--sm); }
.pf2026-login .pt-gutter { padding-top: var(--gutter); }
.pf2026-login .pb-gutter { padding-bottom: var(--gutter); }

/* Section + background image */
/* The design has the section flush to the header and the footer: the white space
   above the card is .form-section's own 14rem padding, and the background image
   runs into the footer. Production style.css puts padding on <main>, which would
   add white bands above and below; cancel it for this page only. */
main:has(> .pf2026-login) { padding-top: 0; padding-bottom: 0; }
.pf2026-login .form-section { padding: 14rem var(--gutter); position: relative; isolation: isolate; }
.pf2026-login .form-section::before {
    position: absolute; left: 0; bottom: 0; width: 100%; height: calc(100% - 14rem);
    content: ""; background: url("/images/portal2026/form-bg.jpg") center center no-repeat;
    background-size: cover; z-index: -1;
}

/* Card */
.pf2026-login .form-box {
    background-color: white; width: 100%; max-width: 54.5rem; border-radius: 2rem;
    padding: var(--md) var(--sm); margin-inline: auto; margin-top: calc(var(--sm) * -1);
    box-shadow: 0.2rem 0.5rem 2rem rgba(2, 3, 3, 10%);
}
.pf2026-login .form-box-header:not(:last-child) { margin-bottom: var(--sm); }
.pf2026-login .form-box-header h1 { font-weight: 700; color: var(--primary-color); }
.pf2026-login .form-box-header > :not(:last-child) { margin-bottom: 2rem; }
.pf2026-login .form-box-header p { color: #333; font-size: var(--fs-md); line-height: 1.2; }

/* Field spacing (bs5TextBox wrapper is div.mb-3) */
.pf2026-login .form-box .mb-3:not(:last-child) { margin-bottom: 2rem; }
/* ...but bs5DropDownList, and the second box of bs5PasswordBoxes, wrap in
   .form-group instead of .mb-3 - so they had no bottom margin at all and sat
   flush against the next field. Matches the 1rem that Bootstrap's .mb-3
   utility actually applies (its !important beats the 2rem rule above). */
.pf2026-login .form-box .form-group:not(:last-child) { margin-bottom: 1rem; }
.pf2026-login .form-label.sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Inputs */
.pf2026-login .form-control {
    width: 100%; height: 4.8rem; padding: 0 2rem; background-color: var(--form-control-color);
    border: 0.1rem solid var(--form-control-color); border-radius: 0;
    font-family: var(--secondary-font); color: #333; font-size: var(--fs-md); line-height: normal;
}
.pf2026-login .form-control::placeholder { opacity: 1; color: #333; }
.pf2026-login .form-control:focus { outline: none; box-shadow: none; }
.pf2026-login .form-control:focus::placeholder { opacity: 0; color: transparent; }
.pf2026-login .form-control.error {
    border-color: var(--error-color);
    background: url("/images/portal2026/error-icon.png") calc(100% - 2rem) center no-repeat var(--form-control-color);
}

/* Validation messages (WebForms validators default to red; give them the design font/spacing) */
.pf2026-login .validator,
.pf2026-login .alert,
.pf2026-login .alert-info { display: block; margin-top: 0.6rem; font-family: var(--secondary-font); font-size: var(--fs-sm); color: var(--error-color); }
.pf2026-login .alert-info { color: var(--primary-color); background-color: var(--light-blue-color); padding: 1.5rem 2rem; border-radius: 1rem; margin-bottom: 2rem; }
/* BSAlert(msg, "success") renders .alert.alert-success. The blanket .alert rule above
   is there to paint validator messages red, so success confirmations inherited red text
   on a green background - give them the same treatment .alert-info gets. */
.pf2026-login .alert-success { color: var(--success-color); background-color: #e7f4e3; padding: 1.5rem 2rem; border-radius: 1rem; margin-bottom: 2rem; }

/* Remember-me (bs5CheckBox -> div.form-check) */
.pf2026-login .form-check { display: flex; align-items: center; gap: 0 0.8rem; }
.pf2026-login .form-check .form-check-input { width: 1.8rem; height: 1.8rem; margin: 0; flex: 0 0 auto; }
.pf2026-login .form-check .form-check-label { font-family: var(--secondary-font); font-size: var(--fs-sm); color: #333; }

/* Buttons */
.pf2026-login .btn {
    height: var(--btn-height); min-width: 19.6rem; padding: 0 var(--gutter);
    display: inline-flex; align-items: center; justify-content: center; gap: 0 1rem;
    white-space: nowrap; font-family: var(--font-family); font-size: var(--fs-md);
    font-weight: 700; text-transform: uppercase; line-height: 1; border: 0;
    border-radius: 5rem; cursor: pointer;
}
.pf2026-login .btn.btn-sky-blue { background: linear-gradient(to right, var(--sky-blue-color), var(--tertiary-dark-color)); color: white; }
.pf2026-login .btn:hover { opacity: 0.9; }

/* Links under the form */
.pf2026-login .form-links p { color: #ccc; font-size: var(--fs-sm); line-height: 1.8; }
.pf2026-login .form-links a { color: #999; transition: var(--transition); cursor: pointer; }
.pf2026-login .form-links a:hover { color: var(--text-color); text-decoration: underline; }

/* Stacked yes/no choices in the Create Account wizard. These must NOT sit in a
   <p>: .btn is inline-flex at a fixed var(--btn-height), which is far taller than
   the paragraph's line-height, so wrapped buttons collide. Flex + gap instead. */
.pf2026-login .pf-choice {
    display: flex; flex-direction: column; align-items: center;
    gap: 1.5rem; margin-bottom: 2rem;
}
/* Choice labels are full sentences ("NO, I WANT TO BUY FROM YOU"). .btn is
   nowrap with a 19.6rem min-width, which pushes them outside the card on
   narrow screens - let these wrap and grow instead. */
.pf2026-login .pf-choice .btn {
    max-width: 100%; height: auto; min-height: var(--btn-height);
    padding-top: 1.2rem; padding-bottom: 1.2rem;
    white-space: normal; text-align: center; line-height: 1.2;
}

/* "New here?" call to action. Deliberately NOT inside .form-links, whose muted
   #999 footnote styling is what buries a link. Outlined rather than filled so
   LOGIN stays the single primary action on the card. */
.pf2026-login .pf-newhere {
    margin-top: var(--sm); padding-top: var(--sm);
    border-top: 0.1rem solid #e5e5e5; text-align: center;
}
.pf2026-login .pf-newhere-text {
    margin-bottom: 1.5rem; font-family: var(--font-family);
    font-size: var(--fs-md); font-weight: 700; color: var(--primary-color);
}
/* .btn sets border:0, so the ring is an inset shadow - no layout shift on hover. */
.pf2026-login .btn.btn-outline-sky-blue {
    background: transparent; color: var(--tertiary-dark-color);
    box-shadow: inset 0 0 0 0.2rem var(--sky-blue-color);
    transition: var(--transition);
}
.pf2026-login .btn.btn-outline-sky-blue:hover {
    background: linear-gradient(to right, var(--sky-blue-color), var(--tertiary-dark-color));
    color: white; opacity: 1;
}

/* mbli / nosession alert above the card */
.pf2026-login .pf-alert {
    max-width: 54.5rem; margin: 0 auto var(--gutter); background-color: var(--light-blue-color);
    color: var(--primary-color); padding: 2rem; border-radius: 1rem;
}
.pf2026-login .pf-alert p:not(:last-child) { margin-bottom: 1rem; }

/* View panels (Sign In / Request Web Access / Forgotten Password) */
.pf2026-login .pf-view { display: none; }
.pf2026-login .pf-view.active { display: block; }

@media (width < 768px) {
    .pf2026-login .form-section { padding: 8rem var(--gutter); }
    .pf2026-login .form-section::before { height: calc(100% - 8rem); }
    .pf2026-login .form-box { padding: var(--sm) var(--gutter); }
}

/* =====================================================================
   FIXED update (from NewFrontEnd/FIXED, 2026-07): extra-small mobile
   (<376px) refinements. Only the header/footer/login rules are ported
   (the design's <376 block also touched .thumbnail-article/.steps which
   are not part of these controls). Scoped as usual.
   ===================================================================== */
@media (width < 376px) {
    /* Header */
    .pf2026-header .logout-link { font-size: 1.2rem; gap: 0 0.5rem; }
    .pf2026-header .logout-link img { width: 1.2rem; }

    /* Footer */
    .pf2026-footer .container { padding: 0 1.5rem; }
    .pf2026-footer .footer-buttons .btn { min-width: 20rem; }
    .pf2026-footer .contact-number h2 { font-size: var(--fs-lg); }
    .pf2026-footer .footer-logo a img { min-width: 20rem; }
    .pf2026-footer .footer-links { grid-template-columns: 1fr; }
    .pf2026-footer .footer-content,
    .pf2026-footer .copyright { padding: var(--gutter) var(--gutter-half); }

    /* Login */
    .pf2026-login .container { padding: 0 1.5rem; }
    .pf2026-login .form-section,
    .pf2026-login .form-box { padding-left: var(--gutter-half); padding-right: var(--gutter-half); }
}

/* =====================================================================
   ASSET SEARCH WIZARD (page-7) + ASSET RESULTS (page-1)
   Scoped under .pf2026-assetsearch / .pf2026-assetresults. Ported from
   NewFrontEnd style.css + component.css. Self-describing + shielded.
   Extra tokens (--td-gutter, --container-width-2) defined on the scopes.
   nice-select.css and swiper-bundle.min.css provide base plugin CSS;
   these rules are the design's visual overrides.
   ===================================================================== */
.pf2026-assetsearch,
.pf2026-assetresults {
    --td-gutter: 3.2rem;
    font-family: var(--font-family);
    font-size: var(--fs-md);
    line-height: 1.4;
    color: var(--text-color);
}
.pf2026-assetsearch *, .pf2026-assetsearch *::before, .pf2026-assetsearch *::after,
.pf2026-assetresults *, .pf2026-assetresults *::before, .pf2026-assetresults *::after { box-sizing: border-box; }
.pf2026-assetsearch ul, .pf2026-assetresults ul { margin: 0; padding: 0; list-style: none; }
.pf2026-assetsearch li, .pf2026-assetresults li { list-style: none; }
.pf2026-assetsearch a, .pf2026-assetresults a { color: inherit; text-decoration: none; }
.pf2026-assetsearch p, .pf2026-assetresults p { margin: 0; font-family: var(--font-family); font-size: var(--fs-md); line-height: 1.4; }
.pf2026-assetsearch h1, .pf2026-assetsearch h2, .pf2026-assetsearch h3,
.pf2026-assetresults h1, .pf2026-assetresults h2, .pf2026-assetresults h3 { margin: 0; font-family: var(--font-family); font-weight: 700; line-height: 1.2; }
.pf2026-assetsearch h1, .pf2026-assetresults h1 { font-size: var(--h1); }
.pf2026-assetsearch h3, .pf2026-assetresults h3 { font-size: var(--h3); }
.pf2026-assetsearch img, .pf2026-assetresults img { max-width: 100%; height: auto; vertical-align: middle; }
.pf2026-assetsearch button, .pf2026-assetresults button { border: 0; background: none; cursor: pointer; font: inherit; }
.pf2026-assetsearch select, .pf2026-assetsearch input,
.pf2026-assetresults select, .pf2026-assetresults input { font: inherit; }
.pf2026-assetsearch .container, .pf2026-assetresults .container { width: 100%; max-width: calc(1200px + (var(--gutter) * 2)); padding: 0 var(--gutter); margin-inline: auto; }
.pf2026-assetsearch .container-2, .pf2026-assetresults .container-2 { width: 100%; max-width: calc(1120px + (var(--gutter) * 2)); padding: 0 var(--gutter); margin-inline: auto; }
.pf2026-assetsearch .text-center, .pf2026-assetresults .text-center { text-align: center; }
.pf2026-assetsearch .d-flex, .pf2026-assetresults .d-flex { display: flex; }
.pf2026-assetsearch .fw-bold, .pf2026-assetresults .fw-bold { font-weight: 700; }
.pf2026-assetsearch .primary-color, .pf2026-assetresults .primary-color { color: var(--primary-color); }

/* Section + header */
.pf2026-assetsearch .section, .pf2026-assetresults .section { padding: var(--sm) 0; }
.pf2026-assetsearch .section-header:not(:last-child), .pf2026-assetresults .section-header:not(:last-child) { margin-bottom: var(--lg); }
.pf2026-assetsearch .section-header h1:not(:last-child), .pf2026-assetresults .section-header h1:not(:last-child) { margin-bottom: 2rem; }
.pf2026-assetsearch .section-header h1, .pf2026-assetresults .section-header h1 { color: var(--primary-color); }
@media (width < 768px) {
    .pf2026-assetsearch .section-header:not(:last-child), .pf2026-assetresults .section-header:not(:last-child) { margin-bottom: var(--md); }
    .pf2026-assetsearch .section, .pf2026-assetresults .section { padding: 2rem 0; }
}

/* ---- nice-select (design overrides; plugin base comes from nice-select.css) ---- */
.pf2026-assetsearch .nice-select, .pf2026-assetresults .nice-select {
    width: 100%; border: 0; border-radius: 0; float: none; height: 4.8rem; line-height: normal;
    display: flex; align-items: center; font-family: var(--secondary-font); font-size: var(--fs-md);
    color: var(--primary-color); padding-left: 2rem; padding-right: 4rem; background-color: white; cursor: pointer;
}
.pf2026-assetsearch .nice-select::after, .pf2026-assetresults .nice-select::after {
    width: 1.6rem; height: 0.7rem; border: 0; transform: none; margin-top: 0;
    background: url("/images/portal2026/select-arrow-down.png") center center no-repeat; background-size: contain;
    right: 2rem; top: 50%; transform: translateY(-50%);
}
.pf2026-assetsearch .nice-select.open::after, .pf2026-assetresults .nice-select.open::after { transform: translateY(-50%) rotate(180deg); }
.pf2026-assetsearch .nice-select.open .list, .pf2026-assetresults .nice-select.open .list { width: 100%; border-radius: 0; border: 0; background-color: #eaeaea; box-shadow: none; margin: 0; }
.pf2026-assetsearch .nice-select .option, .pf2026-assetresults .nice-select .option { min-height: 3.6rem; line-height: normal; display: flex; align-items: center; font-family: var(--secondary-font); font-size: var(--fs-sm); color: #333333; padding-left: 2rem; padding-right: 2rem; }
.pf2026-assetsearch .nice-select .option:hover, .pf2026-assetsearch .nice-select .option.focus, .pf2026-assetsearch .nice-select .option.selected.focus,
.pf2026-assetresults .nice-select .option:hover, .pf2026-assetresults .nice-select .option.focus, .pf2026-assetresults .nice-select .option.selected.focus { background-color: #eaeaea; color: #333333; font-weight: normal; }
.pf2026-assetsearch .nice-select .option:hover, .pf2026-assetresults .nice-select .option:hover { background-color: var(--sky-blue-color) !important; color: white !important; }

/* ---- Checkboxes / radios (component.css) ----
   Production style.css has its own .checkbox pattern (label{position:relative;
   padding-left} + label::before{position:absolute;left:0;top:0} + .checkbox
   {padding-left:32px}) that leaks in and drops the box on top of the label text —
   declare position/padding explicitly so the flex layout here always wins. */
.pf2026-assetsearch .checkbox, .pf2026-assetsearch .radio,
.pf2026-assetresults .checkbox, .pf2026-assetresults .radio { padding: 0; }
.pf2026-assetsearch .checkbox input, .pf2026-assetsearch .radio input,
.pf2026-assetresults .checkbox input, .pf2026-assetresults .radio input { display: none; }
.pf2026-assetsearch .checkbox label, .pf2026-assetsearch .radio label,
.pf2026-assetresults .checkbox label, .pf2026-assetresults .radio label { display: inline-flex; align-items: center; vertical-align: middle; font-weight: 700; white-space: nowrap; cursor: pointer; position: relative; padding: 0; margin: 0; }
.pf2026-assetsearch .checkbox label::before, .pf2026-assetsearch .radio label::before,
.pf2026-assetresults .checkbox label::before, .pf2026-assetresults .radio label::before {
    content: ""; width: 2.8rem; height: 2.8rem; min-width: 2.8rem; background-color: white; border: 0.1rem solid #999999; display: block; margin-right: 1.4rem;
    position: static;
}
.pf2026-assetsearch .checkbox input:checked ~ label::before, .pf2026-assetsearch .radio input:checked ~ label::before,
.pf2026-assetresults .checkbox input:checked ~ label::before, .pf2026-assetresults .radio input:checked ~ label::before {
    background: url("/images/portal2026/input-check.png") center center no-repeat #fff; background-size: 80% auto;
}

/* ---- Buttons ---- */
.pf2026-assetsearch .btn, .pf2026-assetresults .btn, .pf2026-profile .btn, .pf2026-manageusers .btn {
    height: var(--btn-height); padding: 0 var(--gutter); display: inline-flex; align-items: center; justify-content: center;
    gap: 0 1rem; white-space: nowrap; font-family: var(--font-family); font-size: var(--fs-md); font-weight: 700;
    text-transform: uppercase; line-height: 1; border: 0; border-radius: 5rem; cursor: pointer;
}
.pf2026-assetsearch .btn.btn-success, .pf2026-assetresults .btn.btn-success, .pf2026-profile .btn.btn-success { background: var(--success-color); color: white; }
.pf2026-assetsearch .btn.btn-sky-blue, .pf2026-assetresults .btn.btn-sky-blue, .pf2026-profile .btn.btn-sky-blue, .pf2026-manageusers .btn.btn-sky-blue { background: linear-gradient(to right, var(--sky-blue-color), var(--tertiary-dark-color)); color: white; }
.pf2026-assetsearch .btn:hover, .pf2026-assetresults .btn:hover { opacity: 0.9; }

/* =====================  WIZARD STEPS  ===================== */
.pf2026-assetsearch .steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5rem 3.5rem; counter-reset: step; padding: 0; }
.pf2026-assetsearch .steps > li { border-radius: 2rem; padding: 4rem; padding-top: 5rem; position: relative; counter-increment: step; }
.pf2026-assetsearch .steps > li.step-1, .pf2026-assetsearch .steps > li.step-2 { background-color: var(--sky-blue-color); }
.pf2026-assetsearch .steps > li.step-3 { background-color: var(--secondary-color); }
.pf2026-assetsearch .steps > li.step-4 { background-color: #1cacaa; }
.pf2026-assetsearch .steps > li.step-5 { background-color: #612b84; }
.pf2026-assetsearch .steps > li.step-3, .pf2026-assetsearch .steps > li.step-4, .pf2026-assetsearch .steps > li.step-5 { grid-column: span 2; }
.pf2026-assetsearch .steps > li::before {
    position: absolute; left: var(--gutter-half); top: 0; width: 6.4rem; aspect-ratio: 1; content: counter(step);
    background-color: var(--primary-color); border-radius: 100%; border: 0.2rem solid white; display: grid; place-items: center;
    font-size: var(--h1); font-weight: 700; color: white; text-align: center; transform: translateY(-50%);
}
.pf2026-assetsearch .step-header:not(:last-child) { margin-bottom: var(--gutter); }
.pf2026-assetsearch .step-header h3, .pf2026-assetsearch .step-header p { color: white; }
.pf2026-assetsearch .step-header h3 { font-weight: 700; }
.pf2026-assetsearch .step-header h3:not(:last-child) { margin-bottom: 1rem; }
.pf2026-assetsearch .steps > li.step-5 { display: flex; align-items: center; }
.pf2026-assetsearch .steps > li.step-5 .btn { min-width: 50%; margin-inline: auto; }

/* Progressive states: disabled (greyed) + hidden (short path) */
.pf2026-assetsearch .steps > li.is-disabled { opacity: 0.4; filter: grayscale(25%); pointer-events: none; }
.pf2026-assetsearch .steps > li.is-hidden { display: none !important; }

@media (width < 992px) {
    .pf2026-assetsearch .steps { display: block; }
    .pf2026-assetsearch .steps > li:not(:last-child) { margin-bottom: var(--md); }
}
@media (width < 768px) {
    .pf2026-assetsearch .steps > li { padding: 4rem var(--gutter); }
    .pf2026-assetsearch .steps > li::before { width: 5.4rem; font-size: var(--h3); }
}

/* Step 4 folder checkboxes (white labels on teal card) */
.pf2026-assetsearch .check-boxes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; max-width: 40rem; }
.pf2026-assetsearch .check-boxes .radio label, .pf2026-assetsearch .check-boxes .checkbox label { font-weight: normal; font-size: var(--fs-md); font-family: var(--secondary-font); color: white; }
/* component.css recolours checked labels to var(--secondary) (#1da9a5) with a
   higher-specificity selector — on the teal step-4 card (#1cacaa) that reads as
   the text vanishing. Re-assert white with the :checked state included so this wins. */
.pf2026-assetsearch .check-boxes .checkbox input:checked ~ label,
.pf2026-assetsearch .check-boxes .radio input:checked ~ label { color: white; }
@media (width < 768px) { .pf2026-assetsearch .check-boxes { grid-template-columns: 1fr; } }

/* Step 3 product slider (Swiper) */
.pf2026-assetsearch .step-product-slider-wrapper { background-color: white; position: relative; padding: 2rem 0; border-radius: 1rem; }
.pf2026-assetsearch .step-product-slider { overflow: hidden; }
.pf2026-assetsearch .step-product-slider .swiper-slide { width: auto; transition: var(--transition); position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; cursor: pointer; }
.pf2026-assetsearch .step-product-slider .swiper-slide p { text-align: center; font-family: var(--secondary-font); font-size: var(--fs-sm); color: #666; margin-top: 0.5rem; }
.pf2026-assetsearch .step-product-slider-wrapper .swiper-slide figure { height: 9rem; display: flex; align-items: center; justify-content: center; margin: 0; }
.pf2026-assetsearch .step-product-slider-wrapper .swiper-slide figure img { max-height: 100%; max-width: 100%; }
.pf2026-assetsearch .step-product-slider.has-selection .swiper-slide:not(.is-active) { opacity: 0.2; pointer-events: none; }
.pf2026-assetsearch .step-product-slider .swiper-slide.is-active { opacity: 1; }
.pf2026-assetsearch .step-product-slider-wrapper .swiper-slide::after {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 72%; aspect-ratio: 1; content: "";
    background: rgba(var(--sky-blue-color-rgb), 0.8); border-radius: 100%; z-index: -1; filter: blur(15px); opacity: 0; transition: var(--transition);
}
.pf2026-assetsearch .step-product-slider .swiper-slide:hover::after, .pf2026-assetsearch .step-product-slider .swiper-slide.is-active::after { opacity: 1; }
.pf2026-assetsearch .slider-arrow { position: absolute; top: 50%; width: 4.4rem; aspect-ratio: 1; border-radius: 100%; background-color: var(--sky-blue-color); display: grid; place-items: center; cursor: pointer; z-index: 99; border: 0.2rem solid white; }
.pf2026-assetsearch .slider-arrow.prev { transform: translateY(-50%) translateX(-50%); left: 0; }
.pf2026-assetsearch .slider-arrow.next { transform: translateY(-50%) translateX(50%); right: 0; }
.pf2026-assetsearch .step-product-slider-wrapper .swiper-scrollbar { background: none; height: 1rem; display: flex; align-items: center; }
.pf2026-assetsearch .step-product-slider-wrapper .swiper-scrollbar-drag { background-color: var(--sky-blue-color); height: 50%; }

/* =====================  RESULTS (page-1 table / list / grid)  ===================== */
.pf2026-assetresults .table { border: 0; padding: 0; margin: 0; border-collapse: collapse; width: 100%; table-layout: fixed; }
.pf2026-assetresults .table th, .pf2026-assetresults .table td { height: 6.4rem; }
/* Production style.css leaks th{background:white; vertical-align:bottom; padding:5px}
   over the scoped design — declare these explicitly so the navy thead shows through
   and the Select-all checkbox centres (option-A self-describing rule). */
.pf2026-assetresults .table th { background-color: transparent; vertical-align: middle; padding: 0; text-align: left; }
.pf2026-assetresults .table td { vertical-align: middle; }
.pf2026-assetresults .table th:last-child { padding-right: 0.8rem; }
.pf2026-assetresults .table thead { background-color: var(--primary-color); }
.pf2026-assetresults .table th:first-child > * { padding-left: var(--td-gutter); }
.pf2026-assetresults .table thead .checkbox { display: flex; align-items: center; gap: 0 1rem; }
.pf2026-assetresults .table thead .checkbox label { color: white; gap: 0 1.5rem; font-weight: 400; }
.pf2026-assetresults .table thead select, .pf2026-assetresults .search { height: 4.8rem; border-radius: 0; border: 0; }
.pf2026-assetresults .search { width: 100%; }
.pf2026-assetresults .table tbody p { color: #333; font-family: var(--secondary-font); font-size: var(--fs-md); overflow-wrap: anywhere; }
.pf2026-assetresults .table tbody tr { border-bottom: 0.1rem solid #eaeaea; }
.pf2026-assetresults .table tbody td { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.pf2026-assetresults .table tbody td:first-child { width: calc(2.8rem + (var(--td-gutter) * 2)); padding-left: var(--td-gutter); }
.pf2026-assetresults .table tbody td:not(:first-child) { padding-right: var(--td-gutter); }
.pf2026-assetresults .table tbody tr:first-child { background-color: var(--light-blue-color); }
.pf2026-assetresults .table tbody tr:first-child td p { font-family: var(--font-family); font-weight: 700; color: var(--primary-color); }
.pf2026-assetresults .table thead .nice-select { min-width: 30rem; max-width: 30rem; font-family: var(--secondary-font); }
.pf2026-assetresults .table-section .section-header:not(:last-child) { margin-bottom: var(--sm); padding-left: var(--td-gutter); }
.pf2026-assetresults input.search {
    font-weight: normal; padding-left: 2rem; padding-right: 4rem; height: 4.8rem;
    background: url("/images/portal2026/search-icon.png") calc(100% - 1.6rem) center no-repeat white;
    font-family: var(--secondary-font); font-size: var(--fs-md); border: 0;
}
.pf2026-assetresults input.search::placeholder { color: #666; opacity: 1; }
.pf2026-assetresults input.search:focus::placeholder { opacity: 0; color: transparent; }
.pf2026-assetresults input.search:focus { outline: none; box-shadow: none; }
.pf2026-assetresults .table thead .inline-flex { display: inline-flex; width: 100%; gap: 0 var(--gutter); }
.pf2026-assetresults .table thead .inline-flex > * { flex: 1 0 0%; }
/* The toolbar cell holds three dropdowns (Actions / folders / languages). Let each
   nice-select shrink to share the cell rather than forcing 30rem apiece, which
   overflowed and slid the third dropdown over the search field. */
.pf2026-assetresults .table thead .inline-flex .nice-select { min-width: 0; max-width: 100%; width: 100%; }
.pf2026-assetresults .search-wrap { width: 29rem; }
/* Gap between the last dropdown and the search box (search sits in its own cell, outside
   the dropdowns' flex gap). Needs the "th" in the selector to beat ".table th{padding:0}";
   border-box keeps the cell the same width so the row doesn't grow. */
.pf2026-assetresults .table th.search-wrap { box-sizing: border-box; padding-left: var(--gutter); }
.pf2026-assetresults .actions-wrap { width: 25rem; }

/* Back / new-search links under the results breadcrumb */
.pf2026-assetresults .results-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--gutter); margin-top: var(--sm); }
.pf2026-assetresults .results-nav-link { display: inline-flex; align-items: center; gap: 0 0.6rem; font-family: var(--secondary-font); font-size: var(--fs-md); font-weight: 700; color: var(--primary-color); text-decoration: none; cursor: pointer; }
.pf2026-assetresults .results-nav-link:hover { text-decoration: underline; }

.pf2026-assetresults .actions { display: flex; align-items: center; justify-content: space-between; gap: 0 2rem; }
.pf2026-assetresults .actions > * { display: flex; align-items: center; justify-content: center; filter: grayscale(100%); opacity: 0.4; pointer-events: none; transition: var(--transition); cursor: pointer; }
.pf2026-assetresults .actions > .active { filter: grayscale(0); opacity: 1; pointer-events: auto; }
.pf2026-assetresults .actions > * img { max-width: 2.4rem; }

.pf2026-assetresults .list-view-button, .pf2026-assetresults .grid-view-button { cursor: pointer; }
.pf2026-assetresults .list-view.show, .pf2026-assetresults .grid-view.show { display: block !important; }
.pf2026-assetresults .list-view.hide, .pf2026-assetresults .grid-view.hide { display: none !important; }

.pf2026-assetresults .grid-view-grid-wrapper { padding: var(--gutter) var(--td-gutter); }
/* minmax(0,1fr): long underscore-joined filenames otherwise set the tracks'
   min-content width and blow the grid out past its container */
.pf2026-assetresults .grid-view-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
.pf2026-assetresults .grid-view-grid-item-image { width: 100%; border-radius: 2rem; overflow: hidden; position: relative; }
.pf2026-assetresults .grid-view-grid-item-image .checkbox { position: absolute; top: 2rem; right: 2rem; }
.pf2026-assetresults .grid-view-grid-item-image figure { aspect-ratio: 1; background-color: var(--light-blue-color); margin: 0; }
.pf2026-assetresults .grid-view-grid-item-image figure img { object-fit: cover; width: 100%; height: 100%; }
.pf2026-assetresults .grid-view-grid-item-image p { background-color: var(--light-blue-color); font-family: var(--secondary-font); color: #333; text-align: right; line-height: 1; padding: 0.6rem var(--gutter-half); }
.pf2026-assetresults .grid-view-grid-item-file-name { padding: var(--gutter-half) 0; }
.pf2026-assetresults .grid-view-grid-item-file-name p { font-family: var(--secondary-font); color: #333; overflow-wrap: anywhere; }

/* Toast confirmation (copy link / bulk actions) */
.pf2026-assetresults .pf-toast {
    position: fixed; left: 50%; bottom: 4rem; transform: translateX(-50%) translateY(1rem);
    background-color: var(--primary-color); color: white; font-family: var(--secondary-font);
    font-size: var(--fs-md); padding: 1.2rem 2.4rem; border-radius: 0.6rem; z-index: 9999;
    opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none;
    box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.25); white-space: nowrap;
}
.pf2026-assetresults .pf-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.pf2026-assetresults .grid-view-grid-item .actions:not(:first-child) { border-top: 0.1rem solid #cccccc; }
.pf2026-assetresults .grid-view-grid-item .actions { padding: var(--gutter-half) 0; }

@media (width < 1200px) {
    .pf2026-assetresults .table th:first-child > *, .pf2026-assetresults .table tbody td:first-child, .pf2026-assetresults .table-section .section-header:not(:last-child) { padding-left: var(--gutter-half); }
    .pf2026-assetresults .table tbody td:first-child { width: 6rem; }
    .pf2026-assetresults .table thead .nice-select { min-width: 20rem; max-width: 20rem; }
    .pf2026-assetresults .search-wrap { width: 24rem; }
    .pf2026-assetresults .grid-view-grid-wrapper { padding: var(--gutter) var(--gutter-half); }
    .pf2026-assetresults .grid-view-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* The former .pf2026-legacy skin layer was removed once the 2024 base (color.css /
   typography.css / component.css) was upgraded to the 2026 standard - the base now
   delivers the 2026 look to all legacy controls directly, so the bolt-on was redundant. */

/* =====================  RESOURCE GRIDS (PortalCompliance / PortalBrandAssets)  ===================== */
/* page-2/page-3 thumbnail-article pattern, fully self-describing per the
   production-CSS leak lessons (declare display/margins/typography explicitly). */
.pf2026-resourcegrid { display: block; padding: var(--md) 0; font-family: var(--secondary-font); }
.pf2026-resourcegrid .container-2 { max-width: 124rem; margin: 0 auto; padding: 0 var(--gutter-half); }
.pf2026-resourcegrid .section-header { margin-bottom: var(--md); padding: 0; }
.pf2026-resourcegrid .section-header h1 { font-family: var(--font-family); font-size: var(--h1); font-weight: 700; color: var(--primary-color); margin: 0 0 1.6rem; padding: 0; line-height: 1.2; }
.pf2026-resourcegrid .section-header p { font-size: var(--fs-md); color: var(--text-color); margin: 0; max-width: 96rem; line-height: 1.6; }

.pf2026-resourcegrid .thumbnail-article-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sm); }
.pf2026-resourcegrid .thumbnail-article { display: flex; align-items: center; gap: var(--gutter-half) var(--gutter); text-decoration: none; padding: 0; transition: var(--transition); }
.pf2026-resourcegrid .thumbnail { width: 16rem; min-width: 16rem; aspect-ratio: 1; border-radius: 2rem; margin: 0; overflow: hidden; }
.pf2026-resourcegrid .thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.pf2026-resourcegrid .thumbnail-article article { display: block; padding: 0; }
.pf2026-resourcegrid .thumbnail-article article h2 { font-family: var(--font-family); font-size: var(--h3); font-weight: 700; color: var(--primary-color); margin: 0 0 1rem; padding: 0; line-height: 1.3; transition: var(--transition); }
.pf2026-resourcegrid .thumbnail-article article p { font-size: var(--fs-md); color: var(--text-color); margin: 0; line-height: 1.6; }
.pf2026-resourcegrid .thumbnail-article:hover article h2 { color: var(--sky-blue-color); }
.pf2026-resourcegrid .thumbnail-article:hover { opacity: 0.92; }

@media (width < 992px) {
    .pf2026-resourcegrid .thumbnail-article { flex-direction: column; align-items: flex-start; }
    .pf2026-resourcegrid .thumbnail { width: 14rem; min-width: 14rem; border-radius: 1.8rem; }
}
@media (width < 768px) {
    .pf2026-resourcegrid .thumbnail-article-grid { grid-template-columns: minmax(0, 1fr); }
    .pf2026-resourcegrid .thumbnail-article { flex-direction: row; align-items: center; }
}
@media (width < 576px) {
    .pf2026-resourcegrid .thumbnail-article { gap: var(--gutter-half); }
    .pf2026-resourcegrid .thumbnail { width: 12rem; min-width: 12rem; border-radius: 1.6rem; }
}

/* =====================  MANAGE USERS (CustomerAccounts2026)  ===================== */
.pf2026-manageusers { display: block; padding: var(--md) 0; font-family: var(--secondary-font); }
.pf2026-manageusers .container-2 { max-width: 124rem; margin: 0 auto; padding: 0 var(--gutter-half); }
.pf2026-manageusers .pf-card { background-color: #eef1fa; border-radius: 1.2rem; overflow: hidden; box-shadow: 0 0.6rem 2.4rem rgba(8, 21, 55, 0.08); }
.pf2026-manageusers .pf-card-body { padding: var(--sm) var(--sm) var(--md); }
.pf2026-manageusers .pf-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem var(--gutter); margin-bottom: var(--sm); }
.pf2026-manageusers .pf-card-head h1 { font-family: var(--font-family); font-size: var(--h2); font-weight: 700; color: var(--primary-color); margin: 0 0 1.2rem; padding: 0; line-height: 1.2; }
.pf2026-manageusers .pf-card-head p { font-size: var(--fs-md); color: var(--text-color); margin: 0; max-width: 62rem; line-height: 1.6; }
.pf2026-manageusers .pf-card-head .btn { flex: 0 0 auto; }

.pf2026-manageusers .pf-users-wrap { overflow-x: auto; }
.pf2026-manageusers .pf-users-table { width: 100%; border-collapse: collapse; border: 0; background: transparent; }
.pf2026-manageusers .pf-users-table th, .pf2026-manageusers .pf-users-table td {
    background: transparent; border: 0; text-align: left; vertical-align: middle;
    padding: 1.8rem 2rem 1.8rem 0; font-size: var(--fs-md); color: #333;
}
.pf2026-manageusers .pf-users-table tr { border-bottom: 0.1rem solid #d5dcef; }
.pf2026-manageusers .pf-users-table th,
.pf2026-manageusers .pf-users-table th a {
    font-family: var(--font-family); font-weight: 700; color: var(--primary-color);
    font-size: var(--fs-md); text-decoration: none;
}
.pf2026-manageusers .pf-users-table th a:hover { color: var(--sky-blue-color); }
.pf2026-manageusers .pf-role-cell { width: 20rem; }
.pf2026-manageusers .pf-role-select {
    display: block; width: 100%; height: 4.4rem; background-color: white; border: 0.1rem solid #d5dcef;
    padding: 0 3.6rem 0 1.4rem; font-family: var(--secondary-font); font-size: var(--fs-sm); color: #666;
    appearance: none; -webkit-appearance: none; border-radius: 0; cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat; background-position: calc(100% - 1.2rem) center; background-size: 1.4rem;
}
.pf2026-manageusers .pf-role-select:disabled { opacity: 0.7; cursor: default; }
.pf2026-manageusers .pf-action-cell { width: 6rem; text-align: center; }
.pf2026-manageusers .pf-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; text-decoration: none; font-size: 2rem; }
.pf2026-manageusers .pf-icon-lock { color: var(--primary-color); }
.pf2026-manageusers .pf-icon-lock.is-locked { color: var(--primary-color); }
.pf2026-manageusers .pf-icon-resend { color: var(--tertiary-color); }
.pf2026-manageusers .pf-icon-delete { color: var(--error-color); }
.pf2026-manageusers .pf-icon-btn:hover { opacity: 0.7; }
.pf2026-manageusers .pf-icon-btn[disabled], .pf2026-manageusers .pf-icon-btn[disabled]:hover { opacity: 0.25; pointer-events: none; }

.pf2026-manageusers .pf-card-footer { background-color: var(--purple-color); padding: var(--sm) var(--gutter); text-align: center; }
.pf2026-manageusers .pf-card-footer .btn { min-width: 34rem; }

@media (width < 768px) {
    .pf2026-manageusers .pf-card-body { padding: var(--gutter-half); }
    .pf2026-manageusers .pf-card-head { flex-direction: column; }
    .pf2026-manageusers .pf-card-footer .btn { min-width: 100%; }
}

/* =====================  MY PROFILE (CustomerUserEdit2026)  ===================== */
.pf2026-profile { display: block; padding: var(--md) 0; font-family: var(--secondary-font); }
.pf2026-profile .container-2 { max-width: 124rem; margin: 0 auto; padding: 0 var(--gutter-half); }
.pf2026-profile .section-header { margin-bottom: var(--md); padding: 0; }
.pf2026-profile .section-header h1 { font-family: var(--font-family); font-size: var(--h1); font-weight: 700; color: var(--primary-color); margin: 0 0 1.6rem; padding: 0; line-height: 1.2; }
.pf2026-profile .section-header p { font-size: var(--fs-md); color: var(--text-color); margin: 0; max-width: 96rem; line-height: 1.6; }

.pf2026-profile .pf-alert { background-color: #fdecf3; border: 0.1rem solid var(--secondary-color); color: #333; font-size: var(--fs-md); padding: 1.6rem 2rem; margin-bottom: var(--sm); border-radius: 0.6rem; }
.pf2026-profile .pf-alert a { color: var(--secondary-color); font-weight: 700; }

.pf2026-profile .pf-section { display: block; padding: 0; }
.pf2026-profile .pf-section-header { display: flex; align-items: center; justify-content: space-between; gap: 0 2rem; margin-bottom: 2.4rem; }
.pf2026-profile .pf-section-header h2 { font-family: var(--font-family); font-size: var(--h2); font-weight: 700; color: var(--sky-blue-color); margin: 0; padding: 0; line-height: 1.2; }
.pf2026-profile .pf-edit {
    width: 3.2rem; height: 3.2rem; min-width: 3.2rem; border: 0; border-radius: 0.4rem; cursor: pointer; padding: 0;
    background-color: var(--sky-blue-color);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/></svg>");
    background-repeat: no-repeat; background-position: center; background-size: 1.8rem;
    transition: var(--transition);
}
.pf2026-profile .pf-edit:hover { opacity: 0.85; }
.pf2026-profile .pf-section.is-editing .pf-edit { background-color: var(--primary-color); }
.pf2026-profile.pf-locked .pf-edit { display: none; }

.pf2026-profile .pf-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 6rem; grid-auto-flow: row dense; }
.pf2026-profile .pf-row { display: grid; grid-template-columns: 15rem minmax(0, 1fr); align-items: center; gap: 0 2rem; }
.pf2026-profile .pf-row.pf-c1 { grid-column: 1; }
.pf2026-profile .pf-row.pf-c2 { grid-column: 2; }
.pf2026-profile .pf-label { font-family: var(--font-family); font-size: var(--fs-md); font-weight: 700; color: var(--primary-color); white-space: nowrap; }
.pf2026-profile .pf-input { position: relative; display: block; padding: 0; }
.pf2026-profile .pf-input > .mb-3 { margin: 0; padding: 0; }
.pf2026-profile .pf-input label.form-label { display: none; }

.pf2026-profile .pf-input .form-control, .pf2026-profile .pf-input select {
    display: block; width: 100%; height: 4.8rem; background-color: var(--form-control-color); border: 0.1rem solid var(--form-control-color);
    border-radius: 0; padding: 0 4.4rem 0 1.6rem; margin: 0; font-family: var(--secondary-font); font-size: var(--fs-md); color: #333;
    appearance: none; -webkit-appearance: none; box-shadow: none; vertical-align: middle; transition: var(--transition);
}
.pf2026-profile .pf-input select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat; background-position: calc(100% - 1.4rem) center; background-size: 1.6rem; cursor: pointer;
}
.pf2026-profile .pf-input .form-control:focus, .pf2026-profile .pf-input select:focus { outline: none; box-shadow: none; border-color: var(--sky-blue-color); }
.pf2026-profile .pf-section.is-editing .pf-input .form-control:not(:disabled), .pf2026-profile .pf-section.is-editing .pf-input select:not(:disabled) { background-color: white; border-color: #cccccc; }
.pf2026-profile .pf-input .form-control:disabled, .pf2026-profile .pf-input select:disabled { opacity: 1; color: #333; cursor: default; }
/* Locked (not-editing) sections: fields keep posting their values (readonly, not
   disabled) but can't be interacted with. MadeByPortal accounts disable server-side. */
.pf2026-profile .pf-section:not(.is-editing) .pf-fields input,
.pf2026-profile .pf-section:not(.is-editing) .pf-fields select { pointer-events: none; }
.pf2026-profile.pf-locked .pf-fields input, .pf2026-profile.pf-locked .pf-fields select { pointer-events: none; }

/* Validator messages render as spans inside the input cell */
.pf2026-profile .pf-input > span { display: block; font-size: var(--fs-sm); color: var(--error-color); padding-top: 0.4rem; }

/* Show/hide password eye */
.pf2026-profile .pf-eye {
    position: absolute; top: 1.2rem; right: 1.2rem; width: 2.4rem; height: 2.4rem; border: 0; padding: 0; cursor: pointer;
    background-color: transparent; opacity: 0.55;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'><path d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/><circle cx='12' cy='12' r='3'/></svg>");
    background-repeat: no-repeat; background-position: center; background-size: 2.2rem;
}
.pf2026-profile .pf-eye:hover { opacity: 1; }
.pf2026-profile .pf-eye.is-on { opacity: 1; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23081537' stroke-width='2'><path d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/><circle cx='12' cy='12' r='3'/><line x1='3' y1='21' x2='21' y2='3'/></svg>"); }

/* Marketing switch cell: let the bs5CheckBox switch sit in the input column */
.pf2026-profile .pf-input-check { display: flex; align-items: center; min-height: 4.8rem; }

.pf2026-profile .pf-sep { border: 0; border-top: 0.1rem solid #eaeaea; margin: var(--sm) 0; }

/* Branding section (Company Details page): free two-column block, not label rows */
.pf2026-profile .pf-fields.pf-brand { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 6rem; }
.pf2026-profile .pf-brand-left, .pf2026-profile .pf-brand-right { display: block; min-width: 0; }
.pf2026-profile .pf-brand .pf-input { margin-bottom: 1.6rem; }
.pf2026-profile .pf-brand-title { font-family: var(--font-family); font-size: var(--fs-md); font-weight: 700; color: #333; margin: 0 0 0.4rem; }
.pf2026-profile .pf-brand-help { font-size: var(--fs-md); color: var(--text-color); margin: 0 0 1.6rem; line-height: 1.5; }
.pf2026-profile .pf-upload { display: flex; align-items: center; gap: 0 1.6rem; margin-top: 2.4rem; }
.pf2026-profile .pf-upload .pf-file { display: none; }
.pf2026-profile .pf-upload-btn { min-width: 22rem; }
.pf2026-profile .pf-upload-name { font-size: var(--fs-sm); color: var(--text-color); overflow-wrap: anywhere; }
.pf2026-profile .pf-logo-preview { display: block; padding: 0; }
.pf2026-profile .pf-logo-preview img { display: block; max-width: 100%; max-height: 40rem; width: auto; height: auto; }
.pf2026-profile .pf-no-logo { font-size: var(--fs-md); color: var(--text-color); font-style: italic; }
@media (width < 992px) {
    .pf2026-profile .pf-fields.pf-brand { grid-template-columns: minmax(0, 1fr); }
}

.pf2026-profile .pf-save { display: none; margin-top: var(--sm); text-align: right; }
.pf2026-profile .pf-save.is-visible { display: block; }
.pf2026-profile.pf-locked .pf-save { display: none; }

@media (width < 992px) {
    .pf2026-profile .pf-fields { grid-template-columns: minmax(0, 1fr); }
    .pf2026-profile .pf-row.pf-c1, .pf2026-profile .pf-row.pf-c2 { grid-column: 1; }
}
@media (width < 768px) {
    .pf2026-profile .pf-row { grid-template-columns: minmax(0, 1fr); gap: 0.6rem 0; }
    .pf2026-profile .pf-label { white-space: normal; }
}

@media (width < 992px) {
    .pf2026-assetresults .table-controls thead tr th { display: block; width: 100%; height: auto; padding: 1rem; }
    .pf2026-assetresults .table-controls thead tr th:first-child > * { padding-left: 0; }
    .pf2026-assetresults .table-controls thead .inline-flex > * { flex: 1 0 0%; }
    .pf2026-assetresults .table-controls thead .inline-flex { gap: var(--gutter-half); }
    .pf2026-assetresults .table-controls thead .nice-select { min-width: 100%; max-width: 100%; }
    .pf2026-assetresults .table tbody p { font-size: var(--fs-sm); }
    .pf2026-assetresults .actions-wrap { width: 18rem; }
    .pf2026-assetresults .grid-view-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (width < 768px) {
    .pf2026-assetresults .table-controls thead .inline-flex { flex-direction: column; }
    .pf2026-assetresults .table-wrap .table { width: 65rem; }
    .pf2026-assetresults .table-wrap { overflow-x: auto; padding-bottom: 1.5rem; }
}
@media (width < 640px) {
    .pf2026-assetresults .grid-view-grid-wrapper { padding: var(--gutter) 0; }
    .pf2026-assetresults .grid-view-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   PORTAL HOME (index.html intro + "what would you like to do" tiles)
   Scoped under .pf2026-portalhome. Ported from NewFrontEnd style.css.
   ===================================================================== */
.pf2026-portalhome *, .pf2026-portalhome *::before, .pf2026-portalhome *::after { box-sizing: border-box; }
.pf2026-portalhome { font-family: var(--font-family); font-size: var(--fs-md); line-height: 1.4; color: var(--text-color); }
.pf2026-portalhome p { margin: 0; font-family: var(--font-family); font-size: var(--fs-md); line-height: 1.4; }
.pf2026-portalhome h1, .pf2026-portalhome h2, .pf2026-portalhome h3 { margin: 0; font-family: var(--font-family); font-weight: 700; line-height: 1.2; }
.pf2026-portalhome h1 { font-size: var(--h1); }
.pf2026-portalhome h2 { font-size: var(--h2, 2.8rem); }
.pf2026-portalhome h3 { font-size: var(--h3); }
.pf2026-portalhome a { color: inherit; text-decoration: none; }
.pf2026-portalhome img { max-width: 100%; height: auto; vertical-align: middle; }
.pf2026-portalhome figure { margin: 0; }
.pf2026-portalhome .container { width: 100%; max-width: calc(1200px + (var(--gutter) * 2)); padding: 0 var(--gutter); margin-inline: auto; }
.pf2026-portalhome .text-center { text-align: center; }
.pf2026-portalhome .fw-bold { font-weight: 700; }
.pf2026-portalhome .primary-color { color: var(--primary-color); }
.pf2026-portalhome .section { padding: var(--sm) 0; }
@media (width < 992px) { .pf2026-portalhome .section { padding: var(--gutter) 0; } }
@media (width < 768px) { .pf2026-portalhome .section { padding: 2rem 0; } }

/* Intro */
.pf2026-portalhome .intro-section { padding-bottom: var(--sm); position: relative; }
.pf2026-portalhome .intro-section h1:not(:last-child) { margin-bottom: var(--gutter-half); }
.pf2026-portalhome .intro-section p { max-width: 90%; margin-inline: auto; }
.pf2026-portalhome .intro-section::after { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); content: ""; width: 22%; height: 0.5rem; background-color: var(--secondary-color); }

/* Post tiles */
.pf2026-portalhome .post-section-header:not(:last-child) { margin-bottom: var(--gutter); }
.pf2026-portalhome .post-block { min-height: 95rem; position: relative; isolation: isolate; }
.pf2026-portalhome .post-block::after { content: ""; z-index: -1; position: absolute; left: 0; top: var(--sm); width: 100%; height: 80%; background: url(/images/portal2026/shape-bg.png) center top no-repeat; background-size: cover; clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%); }
.pf2026-portalhome .posts { padding: var(--sm); padding-top: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter); }
.pf2026-portalhome .post { border-radius: 2rem; overflow: hidden; background-color: white; box-shadow: 0.2rem 0.5rem 2rem rgba(2, 3, 3, 10%); display: block; }
.pf2026-portalhome .post figure { height: 20rem; }
.pf2026-portalhome .post figure img { object-fit: cover; width: 100%; height: 100%; }
.pf2026-portalhome .post-content { padding: var(--sm) 2rem; }
.pf2026-portalhome .post-content article h3 { font-weight: 700; }
.pf2026-portalhome .post-content article > :not(:last-child) { margin-bottom: var(--gutter-half); }
.pf2026-portalhome .post-content article p { line-height: 1.5; }
.pf2026-portalhome .post.secondary h3, .pf2026-portalhome .post.secondary .link { color: var(--secondary-color); }
.pf2026-portalhome .post.primary h3, .pf2026-portalhome .post.primary .link { color: var(--primary-color); }
.pf2026-portalhome .post.tertiary h3, .pf2026-portalhome .post.tertiary .link { color: var(--tertiary-color); }
.pf2026-portalhome .post.skyBlue h3, .pf2026-portalhome .post.skyBlue .link { color: var(--sky-blue-color); }
.pf2026-portalhome .post .link { text-decoration: underline; display: inline-block; }
@media (width < 992px) {
    .pf2026-portalhome .intro-section::after { width: 40%; }
    .pf2026-portalhome .post-block { min-height: auto; }
}
@media (width < 768px) {
    .pf2026-portalhome .posts { grid-template-columns: 1fr; padding: 0 2rem 2rem; }
    .pf2026-portalhome .post-block::after { height: 90%; clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%); }
}