/* =======================================
   BRAND FONTS
   ======================================= */

@font-face {
    font-family: 'PP Pangram Compact';
    src: url('/fonts/PPPangramSans-CompactMedium.woff2') format('woff2'), url('/fonts/PPPangramSans-CompactMedium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'PP Pangram Condensed';
    src: url('/fonts/PPPangramSans-CondensedBold.woff2') format('woff2'), url('/fonts/PPPangramSans-CondensedBold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'PP Pangram Display';
    src: url('/fonts/PPPangramSans-SlimExtrabold.woff2') format('woff2'), url('/fonts/PPPangramSans-SlimExtrabold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Pretty Pen';
    src: url('/fonts/Pretty-Pen-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

/* =======================================
   DESIGN TOKENS
   Central place to tweak the WILF theme.
   ======================================= */

:root {
    --wilf-black: #1d1d1b;
    --wilf-black-hover: #2c2c2a;
    --wilf-orange: #ff5539;
    --wilf-orange-dark: #e64a30;
    --wilf-teal: #315e5e;
    --wilf-teal-dark: #264949;
    --wilf-grey-border: #ecedeb;
    --wilf-grey-tint: #f6f6f5;
    --wilf-white: #ffffff;

    /* Legacy aliases kept so existing rules keep working */
    --brand-color: var(--wilf-orange);
    --brand-color-dark: var(--wilf-orange-dark);
    --brand-color-light: #ff6e52;

    --font-body: 'PP Pangram Compact', Arial, sans-serif;
    --font-heading: 'PP Pangram Display', Arial, sans-serif;
    --font-subheading: 'PP Pangram Condensed', Arial, sans-serif;
    --font-accent: 'Pretty Pen', Arial, sans-serif;

    /* Re-point Bulma's blue "info" and "link" palettes to WILF teal */
    --bulma-link-h: 180deg;
    --bulma-link-s: 31%;
    --bulma-link-l: 28%;
    --bulma-info-h: 180deg;
    --bulma-info-s: 31%;
    --bulma-info-l: 28%;
    --bulma-info-invert-l: 100%;
    --bulma-link-text: var(--wilf-teal);
    --bulma-text-strong: var(--wilf-black);
    /* New Bulma colour mappings (overrides for CDN Bulma) */
    --wilf-success: #57be61;
    --wilf-info: #72c5d3;
    --wilf-warning: #ffd161;
    --wilf-danger: #e51200;
}

/* Global links */
a {
    color: var(--wilf-teal);
}

a:hover {
    color: var(--wilf-teal-dark);
}

/* =======================================
   BRAND TYPOGRAPHY
   ======================================= */

html,
body {
    font-family: var(--font-body);
}

body,
p,
li,
td,
th,
label,
.input,
.textarea,
.select select,
.content {
    font-family: var(--font-body);
}

/* Main headings */

h1,
.title.is-1,
.title.is-2,
.hero .title {
    font-family: var(--font-heading);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 0.95;
}

/* Secondary headings */

h2,
h3,
.title.is-3,
.title.is-4 {
    font-family: var(--font-subheading);
    font-weight: 700;
}

.title.is-5,
.subtitle,
.card-header-title {
    font-family: var(--font-body);
    font-weight: 500;
}

/* Bulma navigation */

.menu-label,
.tabs a,
.pagination-link,
.breadcrumb,
.dropdown-item {
    font-family: var(--font-subheading);
    font-weight: 700;
}

/* Buttons and boxed statuses */

.button,
.tag,
.notification {
    font-family: var(--font-body);
    font-weight: 500;
}

.button {
    text-transform: none;
    letter-spacing: normal;
}

/* Form labels */

.label {
    font-family: var(--font-body);
    font-weight: 500;
}

.hero .subtitle {
    font-family: var(--font-subheading);
    color: var(--brand-color);
    font-weight: 700;
}

/* Orange subheadings */

.brand-subheading {
    font-family: var(--font-body);
    color: var(--brand-color);
    font-weight: 500;
}

/* Pretty Pen accents */

.highlight-script,
.handwritten,
.signature {
    font-family: var(--font-accent);
    font-size: 1.5rem;
    line-height: 1.2;
}

/* Bulma Custom Brand Color Classes */
.has-background-brand {
    background-color: var(--brand-color) !important;
}

.has-text-brand {
    color: var(--brand-color) !important;
}

/* Primary (brand) buttons - orange with white text */
.button.is-brand,
.box .button.is-brand {
    background-color: var(--wilf-orange) !important;
    border-color: transparent !important;
    color: var(--wilf-white) !important;
}

.button.is-brand:hover,
.button.is-brand.is-hovered,
.button.is-brand:focus,
.button.is-brand.is-focused,
.button.is-brand:active,
.button.is-brand.is-active,
.box .button.is-brand:hover,
.box .button.is-brand:focus,
.box .button.is-brand:active {
    background-color: var(--wilf-orange-dark) !important;
    border-color: transparent !important;
    color: var(--wilf-white) !important;
}

.button.is-brand[disabled],
fieldset[disabled] .button.is-brand {
    background-color: var(--wilf-orange) !important;
    border-color: transparent !important;
    box-shadow: none;
    opacity: 0.5;
}

.button.is-brand.is-outlined,
.box .button.is-brand.is-outlined {
    background-color: transparent !important;
    border-color: var(--wilf-orange) !important;
    color: var(--wilf-orange) !important;
}

.button.is-brand.is-outlined:hover,
.button.is-brand.is-outlined.is-hovered,
.button.is-brand.is-outlined:focus,
.button.is-brand.is-outlined.is-focused,
.button.is-brand.is-outlined:active,
.box .button.is-brand.is-outlined:hover,
.box .button.is-brand.is-outlined:focus,
.box .button.is-brand.is-outlined:active {
    background-color: var(--wilf-orange) !important;
    border-color: var(--wilf-orange) !important;
    color: var(--wilf-white) !important;
}

/* Outlined brand buttons on a black box need white edges to be visible */
.box:not(.is-results) .button.is-brand.is-outlined {
    border-color: var(--wilf-white) !important;
    color: var(--wilf-white) !important;
}

/* ...but revert to orange inside nested light boxes */
.box .box .button.is-brand.is-outlined {
    border-color: var(--wilf-orange) !important;
    color: var(--wilf-orange) !important;
}

/* Secondary dark buttons (previously inline black) */
.button.is-dark-brand {
    background-color: var(--wilf-black) !important;
    border-color: transparent !important;
    color: var(--wilf-white) !important;
}

.button.is-dark-brand:hover,
.button.is-dark-brand:focus {
    background-color: var(--wilf-black-hover) !important;
    color: var(--wilf-white) !important;
}

/* Validation Messages with Dark Background for Visibility */
.help.is-danger,
span.field-validation-error {
    display: block;
    background-color: #d32f2f; /* Darker red that contrasts with orange boxes */
    color: #fff !important;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.help.is-danger:empty,
span.field-validation-error:empty {
    display: none;
}

/* Validation Summary */
.validation-summary-errors,
div[asp-validation-summary] {
    background-color: #d32f2f; /* Darker red for visibility on orange background */
    color: #fff !important;
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
}

.validation-summary-errors ul,
div[asp-validation-summary] ul {
    margin: 0;
    padding-left: 1.25rem;
    list-style: disc;
}

.validation-summary-errors li,
div[asp-validation-summary] li {
    margin: 0.25rem 0;
    color: #fff !important;
}

/* Input Validation States */
.input-validation-error,
.input.input-validation-error {
    border-color: #d32f2f !important;
    box-shadow: 0 0 0 0.125em rgba(211, 47, 47, 0.25) !important;
}

.input.input-validation-error:focus {
    border-color: #d32f2f !important;
    box-shadow: 0 0 0 0.125em rgba(211, 47, 47, 0.25) !important;
}

.select.input-validation-error select {
    border-color: #d32f2f !important;
}

/* Valid Input State (optional - green border when valid) */
.input-validation-valid {
    border-color: #48c78e;
}

/* Tag with brand color */
.tag.is-brand {
    background-color: var(--brand-color);
    color: #fff;
}

/* Teal tags always use white text (also when rendered as links inside boxes) */
.tag.is-info,
.tag.is-link,
.box .tag.is-info,
.box .tag.is-link,
.box a.tag.is-info:not(.button),
.box a.tag.is-link:not(.button),
.table .tag.is-info,
.table .tag.is-link {
    background-color: var(--wilf-teal) !important;
    color: var(--wilf-white) !important;
    text-decoration: none;
}

.box a.tag.is-info:not(.button):hover,
.box a.tag.is-link:not(.button):hover {
    background-color: var(--wilf-teal-dark) !important;
    color: var(--wilf-white) !important;
}

/* =======================================
   NAVBAR / BANNER
   ======================================= */
.navbar.wilf-navbar {
    background-color: var(--wilf-white) !important;
    min-height: 6.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid var(--wilf-grey-border);
}

.navbar.wilf-navbar > .container {
    min-height: 6.5rem;
}

.navbar.wilf-navbar .navbar-brand,
.navbar.wilf-navbar .navbar-menu,
.navbar.wilf-navbar .navbar-start,
.navbar.wilf-navbar .navbar-end {
    min-height: 6.5rem;
    align-items: center;
}

.navbar.wilf-navbar .navbar-brand .navbar-item img,
.navbar.wilf-navbar .navbar-logo {
    max-height: 3.5rem;
    height: 3.5rem;
    width: auto;
}

.navbar.wilf-navbar .navbar-item,
.navbar.wilf-navbar .navbar-link {
    font-family: var(--font-body);
    font-weight: 500;
    text-transform: none;
    color: var(--wilf-black);
    text-decoration: none;
    padding-left: 1rem;
    padding-right: 1rem;
}

.navbar.wilf-navbar a.navbar-item:hover,
.navbar.wilf-navbar a.navbar-item:focus,
.navbar.wilf-navbar a.navbar-item.is-active {
    background-color: rgba(0, 0, 0, 0.04);
    color: var(--wilf-black);
    text-decoration: none;
}

.navbar.wilf-navbar .navbar-burger {
    color: var(--wilf-black);
    height: 6.5rem;
}

.navbar.wilf-navbar .navbar-burger:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.navbar.wilf-navbar a {
    text-decoration: none;
}

.navbar.wilf-navbar .button.is-text {
    text-decoration: none !important;
    background-color: transparent;
    border-color: transparent;
    color: var(--wilf-black);
    font-family: var(--font-body);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

.navbar.wilf-navbar .button.is-text:hover,
.navbar.wilf-navbar .button.is-text:focus {
    background-color: rgba(0, 0, 0, 0.04);
    color: var(--wilf-black);
    text-decoration: none !important;
}

.navbar.wilf-navbar .navbar-account-actions {
    align-items: stretch;
}

.navbar.wilf-navbar .navbar-project-panel,
.navbar.wilf-navbar .navbar-user-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--wilf-grey-border);
    border-radius: 0.5rem;
    padding: 0.35rem 0.55rem;
    background-color: #fcfcfb;
    min-height: 2.75rem;
}

.navbar.wilf-navbar .navbar-project-panel {
    color: var(--wilf-black);
    text-decoration: none;
    margin-right: 0.35rem;
    max-width: 15rem;
}

.navbar.wilf-navbar .navbar-project-panel:hover,
.navbar.wilf-navbar .navbar-project-panel:focus {
    color: var(--wilf-black);
    text-decoration: none;
    border-color: #d8dad6;
    background-color: #f8f8f6;
}

.navbar.wilf-navbar .navbar-project-number {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    opacity: 0.75;
    line-height: 1.1;
}

.navbar.wilf-navbar .navbar-project-name {
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 13.5rem;
}

.navbar.wilf-navbar .navbar-user-panel {
    align-items: flex-end;
}

.navbar.wilf-navbar .navbar-project-menu {
    cursor: pointer;
}

.navbar.wilf-navbar .navbar-project-menu:hover,
.navbar.wilf-navbar .navbar-project-menu.is-open {
    border-color: #d8dad6;
    background-color: #f8f8f6;
}

.navbar.wilf-navbar .navbar-project-menu-trigger {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    color: var(--wilf-black);
}

.navbar.wilf-navbar .navbar-project-menu-trigger .navbar-project-name {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.navbar.wilf-navbar .navbar-project-caret {
    font-size: 0.6rem;
    opacity: 0.6;
    transition: transform 0.15s ease;
}

.navbar.wilf-navbar .navbar-project-menu.is-open .navbar-project-caret {
    transform: rotate(180deg);
}

.navbar.wilf-navbar .navbar-project-menu-dropdown {
    left: 0;
    right: auto;
    min-width: 13rem;
}

.navbar.wilf-navbar .navbar-user-greeting-link {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    color: var(--wilf-black);
    text-decoration: none;
    line-height: 1.2;
}

.navbar.wilf-navbar .navbar-user-menu-trigger {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    width: 100%;
    text-align: right;
}

.navbar.wilf-navbar .navbar-user-greeting-link:hover,
.navbar.wilf-navbar .navbar-user-greeting-link:focus {
    color: var(--wilf-black);
    text-decoration: none;
}

.navbar.wilf-navbar .navbar-user-menu {
    position: relative;
}

.navbar.wilf-navbar .navbar-user-menu-dropdown {
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 0;
    min-width: 15rem;
    border: 1px solid var(--wilf-grey-border);
    border-radius: 0.5rem;
    background: #fcfcfb;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 0.35rem;
    z-index: 40;
    display: none;
}

.navbar.wilf-navbar .navbar-user-menu.is-open .navbar-user-menu-dropdown {
    display: block;
}

.navbar.wilf-navbar .navbar-user-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--wilf-black);
    text-decoration: none;
    border-radius: 0.35rem;
    padding: 0.5rem 0.55rem;
    font-size: 0.86rem;
    text-align: left;
}

.navbar.wilf-navbar .navbar-user-menu-item > span:first-child {
    flex: 1 1 auto;
    text-align: left;
    white-space: nowrap;
}

.navbar.wilf-navbar .navbar-user-menu-item > .tag {
    flex: 0 0 auto;
}

.navbar.wilf-navbar .navbar-user-menu-item:hover,
.navbar.wilf-navbar .navbar-user-menu-item:focus {
    background: #f4f4f2;
    color: var(--wilf-black);
    text-decoration: none;
}

.navbar.wilf-navbar .navbar-user-menu-divider {
    height: 1px;
    background: var(--wilf-grey-border);
    margin: 0.35rem 0;
}

.navbar.wilf-navbar .navbar-user-email {
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.8;
}

/* Mobile navbar */
@media screen and (max-width: 1023px) {
    .navbar.wilf-navbar .navbar-menu {
        background-color: var(--wilf-white);
        min-height: 0;
        padding: 0.5rem 0 1rem;
        border-top: 1px solid var(--wilf-grey-border);
    }

    .navbar.wilf-navbar .navbar-start,
    .navbar.wilf-navbar .navbar-end {
        min-height: 0;
        align-items: stretch;
    }

    /* Better mobile login section alignment */
    .navbar-end .navbar-item {
        justify-content: flex-end;
    }

    .navbar-end .buttons {
        flex-direction: column;
        width: 100%;
        align-items: flex-end;
    }

    .navbar-end .navbar-account-actions {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0.5rem;
    }

    .navbar-end .navbar-account-actions .navbar-project-panel,
    .navbar-end .navbar-account-actions .navbar-user-panel {
        flex: 1 1 100%;
        max-width: 100%;
        min-width: 0;
        width: 100%;
        margin-right: 0;
    }

    .navbar-end .navbar-account-actions .navbar-project-panel {
        align-items: flex-start;
        text-align: left;
    }

    .navbar-end .navbar-account-actions .navbar-user-panel {
        align-items: stretch;
        text-align: left;
    }

    .navbar-end .navbar-account-actions .navbar-user-greeting-link {
        align-items: flex-start;
    }

    .navbar.wilf-navbar .navbar-user-menu-dropdown {
        position: static;
        width: 100%;
        min-width: 0;
        margin-top: 0.5rem;
        box-shadow: none;
        text-align: left;
    }

    .navbar-end .button {
        width: 100%;
        margin-bottom: 0.5rem;
        justify-content: center;
    }

    .navbar-end .button:last-child {
        margin-bottom: 0;
    }
}

.hero .title {
    font-size: clamp(3rem, 8vw, 6rem);
}

.hero .subtitle {
    text-transform: none;
    letter-spacing: 0;
}

/* Sign-in auth options: white outer box, results-style option boxes with orange titles */
.title.is-title-case {
    text-transform: none !important;
}

.box.auth-options-box {
    background-color: #fff;
    color: var(--wilf-black);
    border: 1px solid var(--wilf-grey-border);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.box.auth-options-box .title,
.box.auth-options-box .label,
.box.auth-options-box p,
.box.auth-options-box strong {
    color: var(--wilf-black);
}

.box .box.is-results .title.auth-option-title,
.box.auth-options-box .box .title.auth-option-title {
    color: var(--wilf-orange) !important;
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 0.25rem !important;
}

/* White content panel that sits over the page background image */
.wilf-page-panel {
    background-color: #fff;
    border-radius: 6px;
    padding: 1.5rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

@media screen and (max-width: 768px) {
    .wilf-page-panel {
        padding: 1rem;
        border-radius: 4px;
    }
}

body {
    background-color: var(--wilf-black);
    background-image: url("/img/768Background.jpg");
    background-image: -webkit-image-set(url("/img/768Background.webp") type("image/webp"), url("/img/768Background.jpg") type("image/jpeg"));
    background-image: image-set(url("/img/768Background.webp") type("image/webp"), url("/img/768Background.jpg") type("image/jpeg"));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--wilf-black);
    font-family: var(--font-body);
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    max-width: 100vw;
}

@media screen and (min-width: 769px) {
    body {
        background-image: url("/img/1920Background.jpg");
        background-image: -webkit-image-set(url("/img/1920Background.webp") type("image/webp"), url("/img/1920Background.jpg") type("image/jpeg"));
        background-image: image-set(url("/img/1920Background.webp") type("image/webp"), url("/img/1920Background.jpg") type("image/jpeg"));
    }
}

/* Ensure titles and text are visible on white background */


.section .title,
.section .subtitle,
.content .title,
.content .subtitle,
.title,
.subtitle {
    color: var(--wilf-black);
}

.section p,
.section .content,
.content p {
    color: var(--wilf-black);
}

.section strong,
.content strong,
strong {
    color: var(--wilf-black);
    font-weight: 600;
}

/* =======================================
   BOX ROLES
   .box            = action box (sign in, search, forms) - black
   .box.is-results = results box (lists, tables)         - white w/ grey border
   ======================================= */
.box {
    background-color: var(--wilf-black);
    color: var(--wilf-white);
}

.box .title,
.box .subtitle {
    color: var(--wilf-white);
}

.box .label {
    color: var(--wilf-white);
}

.box .help {
    color: rgba(255, 255, 255, 0.8);
}

.box .has-text-grey {
    color: rgba(255, 255, 255, 0.9) !important;
}

.box p,
.box strong,
.box .content {
    color: var(--wilf-white);
}

.box a:not(.button) {
    color: var(--wilf-white);
    text-decoration: underline;
}

.box a:not(.button):hover {
    color: rgba(255, 255, 255, 0.8);
}

/* Results box - white with grey border, dark text.
   Add .is-action to a table-wrapping box to keep the black action style. */
.box.is-results,
.box:not(.is-action):has(> .table-container) {
    background-color: var(--wilf-grey-border);
    color: var(--wilf-black);
    border: 1px solid var(--wilf-grey-border);
    box-shadow: none;
}

.box.is-results .title,
.box.is-results .subtitle,
.box.is-results .label,
.box.is-results p,
.box.is-results strong,
.box.is-results .content,
.box.is-results .has-text-white,
.box:not(.is-action):has(> .table-container) .title,
.box:not(.is-action):has(> .table-container) .subtitle,
.box:not(.is-action):has(> .table-container) .label,
.box:not(.is-action):has(> .table-container) p,
.box:not(.is-action):has(> .table-container) strong,
.box:not(.is-action):has(> .table-container) .has-text-white {
    color: var(--wilf-black) !important;
}

.box.is-results .tag.is-dark,
.box.is-results .tag.is-info:not(.is-light),
.box.is-results .tag.is-link:not(.is-light),
.box.is-results .tag.is-primary:not(.is-light),
.box:not(.is-action):has(> .table-container) .tag.is-dark,
.box:not(.is-action):has(> .table-container) .tag.is-info:not(.is-light),
.box:not(.is-action):has(> .table-container) .tag.is-link:not(.is-light),
.box:not(.is-action):has(> .table-container) .tag.is-primary:not(.is-light) {
    color: #fff !important;
}

.box.is-results .help,
.box:not(.is-action):has(> .table-container) .help {
    color: #4a4a4a;
}

.box.is-results .has-text-grey,
.box:not(.is-action):has(> .table-container) .has-text-grey {
    color: #7a7a7a !important;
}

.box.is-results a:not(.button),
.box:not(.is-action):has(> .table-container) a:not(.button) {
    color: var(--wilf-teal);
    text-decoration: underline;
}

.box.is-results a:not(.button):hover,
.box:not(.is-action):has(> .table-container) a:not(.button):hover {
    color: var(--wilf-teal-dark);
}

.box.is-results .table-container {
    padding: 0;
}

/* Keep nested boxes with light background for contrast */
.box .box {
    background-color: rgba(255, 255, 255, 0.95) !important;
    color: var(--wilf-black) !important;
}

.box .box.is-results {
    background-color: var(--wilf-grey-border) !important;
}

.box .box .title,
.box .box .subtitle {
    color: var(--wilf-black) !important;
}

.box .box .label {
    color: var(--wilf-black) !important;
}

.box .box .help {
    color: #4a4a4a !important;
}

.box .box .has-text-grey {
    color: #7a7a7a !important;
}

.box .box a:not(.button) {
    color: var(--wilf-teal);
    text-decoration: underline;
}

.box .box a:not(.button):hover {
    color: var(--wilf-teal-dark);
}

.box .box p,
.box .box .content {
    color: var(--wilf-black) !important;
}

.box .box strong {
    color: var(--wilf-black) !important;
}

/* Input fields inside boxes */
.box .input,
.box .textarea,
.box .select select {
    background-color: white;
    color: var(--wilf-black);
    border-color: rgba(0, 0, 0, 0.06);
}

.textarea {
    min-height: 8rem;
    line-height: 1.5;
    resize: vertical;
}

.box.is-results .input,
.box.is-results .textarea,
.box.is-results .select select {
    border-color: #dbdbdb;
}

.box .input::placeholder,
.box .textarea::placeholder {
    color: #b5b5b5;
}

/* Icons inside inputs should be visible */
.box .icon {
    color: #7a7a7a;
}

.box .has-icons-left .icon.is-left {
    color: #7a7a7a;
}

/* Ensure footer stays at bottom */
html, body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    max-width: 100vw;
}

.section {
    flex: 1;
    overflow-x: hidden;
    max-width: 100%;
}


/* Notification styling */
.notification.is-danger {
    background-color: #f14668;
    color: #fff;
}

/* Sign-in inputs use the standard grey focus border like the rest of the project */
.box.auth-options-box .input,
.box.auth-options-box .textarea,
.box.auth-options-box .select select {
    border-radius: 4px;
}

/* Breadcrumbs and subheadings should use dark text (not teal) */
.breadcrumb,
.breadcrumb a,
.breadcrumb li {
    color: var(--wilf-black) !important;
}

.subtitle {
    color: var(--wilf-black) !important;
}

/* Brand icon colouring for single-purpose helper class */
.has-text-brand {
    color: var(--wilf-orange) !important;
}

/* is-primary buttons use the brand orange */
.button.is-primary {
    background-color: var(--wilf-orange) !important;
    border-color: transparent !important;
    color: var(--wilf-white) !important;
}

.button.is-primary:hover,
.button.is-primary:focus,
.button.is-primary:active {
    background-color: var(--wilf-orange-dark) !important;
    border-color: transparent !important;
    color: var(--wilf-white) !important;
}

.button.is-primary[disabled],
fieldset[disabled] .button.is-primary {
    background-color: var(--wilf-orange) !important;
    border-color: transparent !important;
    box-shadow: none;
    opacity: 0.5;
}

/* Bulma colour overrides (CDN Bulma) */
.is-success,
.notification.is-success,
.tag.is-success,
.button.is-success {
    background-color: #57be61 !important;
    border-color: #57be61 !important;
    color: #fff !important;
}

.notification.is-info,
.tag.is-info {
    background-color: #72c5d3 !important;
    border-color: #72c5d3 !important;
    color: #fff !important;
}

/* Info buttons stay WILF teal */
.button.is-info {
    background-color: var(--wilf-teal) !important;
    border-color: var(--wilf-teal) !important;
    color: #fff !important;
}

.button.is-info:hover,
.button.is-info:focus,
.button.is-info:active {
    background-color: var(--wilf-teal-dark) !important;
    border-color: var(--wilf-teal-dark) !important;
    color: #fff !important;
}

.is-warning,
.notification.is-warning,
.tag.is-warning,
.button.is-warning {
    background-color: #ffd161 !important;
    border-color: #ffd161 !important;
    color: var(--wilf-black) !important;
}

.is-danger,
.notification.is-danger,
.tag.is-danger,
.button.is-danger {
    background-color: #e51200 !important;
    border-color: #e51200 !important;
    color: #fff !important;
}

.box .notification.is-light,
.box .notification.is-light p,
.box .notification.is-light strong {
    color: var(--wilf-black);
}

/* Table styling - white background with black text */
.table-container {
    background-color: white;
    padding: 1rem;
    border-radius: 6px;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

.table {
    background-color: white !important;
    color: var(--wilf-black) !important;
    width: 100%;
    table-layout: auto;
}

.table thead {
    background-color: white !important;
}

.table thead th {
    color: var(--wilf-black) !important;
    border-bottom: 2px solid var(--wilf-grey-border) !important;
    overflow-wrap: normal;
    word-break: keep-all;
}

.table tbody tr {
    background-color: white !important;
    color: var(--wilf-black) !important;
}

.table tbody tr:hover {
    background-color: var(--wilf-grey-border) !important;
}

.table tbody td {
    color: var(--wilf-black) !important;
    border-bottom: 1px solid var(--wilf-grey-border) !important;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table.is-striped tbody tr:nth-child(even) {
    background-color: var(--wilf-grey-tint) !important;
}

.table strong {
    color: var(--wilf-black) !important;
}

/* Clickable table rows */
.clickable-row {
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.clickable-row:hover {
    background-color: var(--wilf-grey-border) !important;
    transform: translateX(2px);
}

.clickable-row:active {
    transform: translateX(0);
}

@media screen and (max-width: 1023px) {
    .table-container {
        overflow-x: hidden;
        padding: 0;
        background-color: transparent;
        max-width: 100%;
    }

    .responsive-admin-table,
    .responsive-admin-table thead,
    .responsive-admin-table tbody,
    .responsive-admin-table tr,
    .responsive-admin-table th,
    .responsive-admin-table td {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    .responsive-admin-table thead {
        display: none;
    }

    .responsive-admin-table {
        background: transparent !important;
    }

    .responsive-admin-table tbody tr {
        margin-bottom: 1rem;
        border: 1px solid var(--wilf-grey-border);
        border-radius: 8px;
        overflow: hidden;
        background-color: #fff !important;
        box-shadow: 0 1px 2px rgba(10, 10, 10, 0.08);
        max-width: 100%;
    }

    .responsive-admin-table tbody td {
        display: block;
        padding: 0.75rem;
        text-align: left;
        border-bottom: 1px solid var(--wilf-grey-border) !important;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }

    .responsive-admin-table tbody td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.25rem;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        color: #7a7a7a;
        letter-spacing: 0.02em;
    }

    .responsive-admin-table tbody td:last-child {
        border-bottom: none !important;
    }

    .responsive-admin-table .button,
    .responsive-admin-table form {
        width: 100%;
    }

    .responsive-admin-table .button {
        justify-content: center;
    }

    .pagination {
        flex-direction: column;
        align-items: stretch;
    }

    .pagination-list {
        order: -1;
        justify-content: center;
        margin-bottom: 0.75rem;
    }

    .pagination-previous,
    .pagination-next {
        width: 100%;
        margin: 0.25rem 0;
    }
}

/* Custom Pagination Styling - Teal with White Text */
.pagination-previous,
.pagination-next,
.pagination-link {
    background-color: var(--wilf-teal);
    color: #fff;
    border-color: var(--wilf-teal);
}

.pagination-previous:hover,
.pagination-next:hover,
.pagination-link:hover {
    background-color: var(--wilf-teal-dark);
    color: #fff;
    border-color: var(--wilf-teal-dark);
}

.pagination-previous:focus,
.pagination-next:focus,
.pagination-link:focus {
    border-color: var(--wilf-teal);
}

.pagination-previous:active,
.pagination-next:active,
.pagination-link:active {
    background-color: var(--wilf-teal-dark);
    border-color: var(--wilf-teal-dark);
}

.pagination-link.is-current {
    background-color: var(--wilf-teal-dark);
    border-color: var(--wilf-teal-dark);
    color: #fff;
}

.pagination-previous.is-disabled,
.pagination-next.is-disabled {
    background-color: #dbdbdb;
    border-color: #dbdbdb;
    color: #7a7a7a;
    opacity: 0.5;
    cursor: not-allowed;
}

/* =======================================
   RESPONSIVE FILE UPLOAD ITEMS
   Ensure file items render properly on mobile
   ======================================= */

.upload-file-item {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.upload-file-item--accent {
    border-left-color: var(--wilf-orange);
}

.upload-file-item--failed {
    border-left-color: #f14668;
}

.upload-file-notes-panel {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0 !important;
    background: #f5f5f5;
    border: 1px solid #d3d3d3;
    border-radius: 4px;
    padding: 0.75rem;
}

.upload-file-notes-panel .textarea {
    resize: vertical;
    min-height: 90px;
}

@media screen and (max-width: 768px) {
    .upload-file-item {
        max-width: 100%;
        margin-bottom: 1.25rem !important;
    }

    .upload-file-item .file-name strong {
        font-size: 14px !important;
    }

    .upload-file-item .file-size {
        font-size: 12px !important;
    }
}

@media screen and (max-width: 480px) {
    .upload-file-item {
        margin-bottom: 1rem !important;
    }

    .upload-file-item .file-name strong {
        font-size: 13px !important;
    }

    .upload-file-item .file-size {
        font-size: 11px !important;
    }

    .upload-file-item textarea {
        font-size: 13px !important;
    }
}

.project-navigation-tabs ul {
    width: 100%;
}

/* Toggle tabs: inactive tabs hover to black with white text; active tab teal */
.tabs.is-toggle li:not(.is-active) a:hover,
.tabs.is-toggle li:not(.is-active) a:focus {
    background-color: var(--wilf-black);
    border-color: var(--wilf-black);
    color: var(--wilf-white);
}

.tabs.is-toggle li.is-active a {
    background-color: var(--wilf-teal);
    border-color: var(--wilf-teal);
    color: var(--wilf-white);
}

@media screen and (max-width: 1023px) {
    .project-navigation-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .project-navigation-actions {
        margin-left: 0 !important;
        width: 100%;
    }

    .project-navigation-actions .button {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .project-navigation-tabs ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem;
    }

    .project-navigation-tabs.is-toggle li + li {
        margin-left: 0;
    }

    .project-navigation-tabs li {
        width: 100%;
        margin: 0;
    }

    .project-navigation-tabs a {
        white-space: normal;
        text-align: center;
        line-height: 1.2;
        padding: 0.55rem 0.5rem;
        min-height: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #dbdbdb;
        border-radius: 6px !important;
    }

    .project-navigation-tabs li.is-active a {
        border-radius: 6px !important;
    }
}

/* Settings list with toggle switches (e.g. Manage Notifications) */
.settings-list {
    max-width: 640px;
}

.settings-list .settings-group-title {
    font-family: 'PP Pangram Compact';
    font-weight: 500;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #7a7a7a;
    margin: 1.25rem 0 0.25rem;
}

.settings-list .settings-group-title:first-child {
    margin-top: 0;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.25rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid #ededed;
    cursor: pointer;
    user-select: none;
}

.settings-row:last-of-type {
    border-bottom: none;
}

.settings-row .settings-row-text {
    flex: 1 1 auto;
    min-width: 0;
}

.settings-row .settings-row-title {
    font-weight: 600;
    line-height: 1.3;
}

.settings-row .settings-row-help {
    font-size: 0.8rem;
    color: #7a7a7a;
    line-height: 1.3;
    margin-top: 0.1rem;
}

.switch {
    position: relative;
    flex: 0 0 auto;
    width: 3rem;
    height: 1.75rem;
}

.switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.switch .switch-track {
    position: absolute;
    inset: 0;
    background-color: #c9c9c9;
    border-radius: 1rem;
    transition: background-color 0.15s ease;
}

.switch .switch-track::after {
    content: "";
    position: absolute;
    top: 0.2rem;
    left: 0.2rem;
    width: 1.35rem;
    height: 1.35rem;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease;
}

.switch input:checked + .switch-track {
    background-color: var(--brand-color);
}

.switch input:checked + .switch-track::after {
    transform: translateX(1.25rem);
}

.switch input:focus-visible + .switch-track {
    outline: 2px solid var(--brand-color);
    outline-offset: 2px;
}

@media screen and (max-width: 768px) {
    .settings-list {
        max-width: none;
    }

    .settings-row {
        min-height: 3.5rem;
    }

    .push-device-button {
        width: 100%;
    }
}

/* Selectable file tables (Project Documents / Issued Documents) */
.selectable-table tbody tr.selectable-row {
    cursor: pointer;
    border-left: 4px solid transparent;
    transition: background-color 0.1s ease, border-color 0.1s ease;
}

.selectable-table tbody tr.selectable-row:hover {
    background-color: #fafafa;
}

.selectable-table tbody tr.selectable-row.row-selected {
    background-color: #fff3ee !important;
    border-left-color: var(--brand-color);
}

.selectable-table tbody tr.selectable-row a,
.selectable-table tbody tr.selectable-row .button {
    cursor: pointer;
}

.selectable-table .select-cell {
    width: 56px;
    text-align: center !important;
    vertical-align: middle !important;
}

.selectable-table .select-cell .select-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.selectable-table .select-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #b5b5b5;
    border-radius: 50%;
    background-color: #fff;
    color: transparent;
    font-size: 0.8rem;
    transition: background-color 0.1s ease, border-color 0.1s ease, color 0.1s ease;
}

.selectable-table tr.row-selected .select-mark {
    background-color: var(--brand-color);
    border-color: var(--brand-color);
    color: #fff;
}

.selectable-table .select-cell input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.selectable-table .select-cell input[type="checkbox"]:focus-visible + .select-mark {
    outline: 2px solid var(--brand-color);
    outline-offset: 2px;
}

.selectable-table thead .select-cell input[type="checkbox"]:checked + .select-mark {
    background-color: var(--brand-color);
    border-color: var(--brand-color);
    color: #fff;
}

.selectable-table thead .select-cell input[type="checkbox"]:indeterminate + .select-mark {
    border-color: var(--brand-color);
    color: transparent;
}

.selectable-table thead .select-cell input[type="checkbox"]:indeterminate + .select-mark::after {
    content: "";
    width: 0.65rem;
    height: 2px;
    border-radius: 1px;
    background-color: var(--brand-color);
}

.selection-bar {
    position: sticky;
    top: 0.5rem;
    z-index: 20;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background-color: #fff;
    border: 1px solid var(--wilf-grey-border);
    border-left: 4px solid var(--brand-color);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(10, 10, 10, 0.12);
}

.selection-bar .selection-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-right: auto;
}

.selection-bar .selection-count {
    font-family: 'PP Pangram Compact';
    font-weight: 500;
    font-size: 1rem;
}

.selection-bar .selection-link {
    font-size: 0.85rem;
    color: var(--brand-color);
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.selection-bar .selection-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-left: auto;
}

@media screen and (max-width: 1023px) {
    .selectable-table tbody tr.selectable-row {
        border-left-width: 4px;
    }

    .selectable-table tbody tr.selectable-row.row-selected {
        border-color: var(--brand-color) !important;
        background-color: #fff3e8 !important;
        box-shadow: 0 0 0 2px var(--brand-color);
    }

    .selectable-table tbody tr.selectable-row.row-selected td {
        background-color: transparent !important;
    }

    .selectable-table tbody td.select-cell {
        display: none !important;
    }

    .selection-bar {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0;
        border-radius: 12px 12px 0 0;
        border-left: 1px solid var(--wilf-grey-border);
        border-bottom: none;
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
        box-shadow: 0 -4px 16px rgba(10, 10, 10, 0.18);
    }

    .selection-bar .selection-summary {
        width: 100%;
        justify-content: space-between;
    }

    .selection-bar .selection-actions {
        width: 100%;
        margin-left: 0;
        flex-direction: column;
        align-items: stretch;
    }

    .selection-bar .selection-actions .button {
        width: 100%;
    }

    .selection-bar .selection-actions .notification {
        width: 100%;
        margin-left: 0 !important;
    }

    body.has-selection-bar {
        padding-bottom: 12rem;
    }
}

/* ========== Project Dashboard ========== */
.dashboard-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dashboard-header-text {
    min-width: 0;
}

.dashboard-header-text .title {
    overflow-wrap: anywhere;
}

@media screen and (min-width: 769px) {
    .dashboard-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    .dashboard-header-back {
        flex-shrink: 0;
    }
}

@media screen and (max-width: 768px) {
    .dashboard-header-back {
        width: 100%;
    }

    .dashboard-quick-actions .button {
        flex: 1 1 calc(50% - 0.5rem);
    }

    .dashboard-stats .column {
        padding: 0.5rem;
    }

    .dashboard-stats .dashboard-stat {
        padding: 1rem 0.75rem;
    }

    .dashboard-stats .dashboard-stat .title.is-3 {
        font-size: 1.75rem;
    }
}

.dashboard-stats .dashboard-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.dashboard-stats .dashboard-stat .tag {
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
    max-width: 100%;
}

a.box.dashboard-stat {
    display: block;
    height: 100%;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

a.box.dashboard-stat:hover {
    border-color: var(--wilf-orange);
    transform: translateY(-2px);
}

.box.is-results.dashboard-stat .title.has-text-brand {
    color: var(--wilf-orange) !important;
}

.box.is-results .dashboard-notification {
    border: 1px solid var(--wilf-grey-border);
    border-radius: 6px;
    background-color: #fff;
}

.box.is-results .dashboard-notification.has-background-light {
    border-left: 3px solid var(--wilf-orange);
}

.dashboard-action-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.dashboard-action-buttons > a.button,
.dashboard-action-buttons > form {
    flex: 1 1 0;
    min-width: 5.5rem;
    max-width: 8rem;
    margin: 0;
}

@media screen and (max-width: 768px) {
    .dashboard-action-buttons > a.button,
    .dashboard-action-buttons > form {
        max-width: none;
    }
}