/* Shared volunteer-portal styles. Layered on top of interface-base.css.
   Per-team color/font overrides come from the team's [data-team] block in
   their interfaces/<team>.css file. */

/* Form controls inside ANY portal page always use Muli regular regardless of
   the team's brand font. Christine's rule, 2026-05-11: brand fonts are for
   headings, body copy, and labels — but not for what the user types into. */
.portal-layout input.form-control,
.portal-layout select.form-control,
.portal-layout textarea.form-control,
.portal-layout .interface-select-btn,
.portal-layout .interface-select-option,
.portal-layout .ptb-input,
.portal-layout .dtp-input {
    font-family: muli, sans-serif !important;
    font-weight: 400 !important;
}

/* Labels keep the team's brand font (inherited) and must always be bold. */
.portal-layout label.form-label,
.portal-layout .form-check-label {
    font-weight: 700 !important;
}

/* Section subtitles inside portal pages: brand font, bold, with breathing room
   above and below so they don't jam into the fields underneath. */
.portal-layout .section-heading {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-primary, #27282A);
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid #e2e2e2;
}

/* Inline checkbox + label rows. Bootstrap's default form-check-input is small
   and gets a margin-top that pushes it visually below brand-font labels (which
   have low x-height). These rules size the box to match the label's cap height
   and reset Bootstrap's margins so align-items:center actually centers them. */
.portal-layout .form-check-input {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
}
.portal-layout .form-field.d-flex .form-label,
.portal-layout .form-field.d-flex .form-check-label {
    margin: 0;
    line-height: 1.15rem;
    cursor: pointer;
}

.portal-layout {
    min-height: 100vh;
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar main";
    grid-template-columns: 280px 1fr;
    grid-template-rows: auto 1fr;
}

.portal-layout .portal-header {
    grid-area: header;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 1.5rem;
    background: var(--color-primary, #27282A);
    color: #fff;
}

.portal-layout .portal-logo-block {
    background: var(--color-primary, #27282A);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
}

.portal-layout .portal-logo {
    max-height: 70px;
    display: block;
}

.portal-layout .portal-user-block {
    line-height: 1.3;
}

.portal-layout .portal-tag {
    font-size: 1.15rem;
    font-weight: 600;
}

.portal-layout .portal-username,
.portal-layout .portal-useremail {
    font-size: 0.95rem;
    opacity: 0.9;
}

.portal-layout .portal-sidebar {
    grid-area: sidebar;
    background: #f6f6f6;
    border-right: 1px solid #e2e2e2;
    padding: 1rem 0.75rem;
}

.portal-layout .portal-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.portal-layout .portal-nav a {
    display: flex;
    align-items: center;
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
    color: var(--color-primary, #27282A);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 120ms ease;
}

.portal-layout .portal-nav a:hover {
    background: #ececec;
    color: var(--color-secondary, var(--color-buttons, #E64928));
}

.portal-layout .portal-main {
    grid-area: main;
    padding: 1.5rem 2rem;
    background: #fff;
}

/* Public (pre-login) layout: no sidebar, centered content */
.portal-public-layout {
    display: block;
}

.portal-public-layout .interface-header {
    text-align: center;
    padding: 1.25rem 1rem;
}

/* Mobile: collapse sidebar above main */
@media (max-width: 768px) {
    .portal-layout {
        grid-template-areas:
            "header"
            "sidebar"
            "main";
        grid-template-columns: 1fr;
    }

    .portal-layout .portal-sidebar {
        border-right: none;
        border-bottom: 1px solid #e2e2e2;
        padding: 0.5rem;
    }

    .portal-layout .portal-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.25rem 0.5rem;
    }

    .portal-layout .portal-main {
        padding: 1rem;
    }

    .portal-layout .portal-header {
        flex-direction: column;
        text-align: center;
    }
}