html {
  /* 16px floor everywhere: this audience skews elderly/low-vision, and a
     smaller mobile size than desktop is backwards for that. Sub-16px inputs
     also trigger iOS Safari's auto-zoom-on-focus. */
  font-size: 16px;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}


.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Reset */
body, html {
    margin: 0;
    height: 100%;
    font-family: sans-serif;
}

/* Rebrand Bootstrap's primary buttons to match the top bar indigo instead of
   Bootstrap's stock blue, which sits right at the minimum 4.5:1 text contrast
   threshold. #3f51b5 tests at ~6.9:1 with white text. */
.btn-primary {
    --bs-btn-bg: #3f51b5;
    --bs-btn-border-color: #3f51b5;
    --bs-btn-hover-bg: #3a4ba7;
    --bs-btn-hover-border-color: #3a4ba7;
    --bs-btn-active-bg: #36459a;
    --bs-btn-active-border-color: #36459a;
    --bs-btn-disabled-bg: #3f51b5;
    --bs-btn-disabled-border-color: #3f51b5;
}

/* Busy cursor while a form submit is in flight — see initBusySubmit() in site.js */
body.is-submitting, body.is-submitting * {
    cursor: wait !important;
}

/* Top Bar */
.topbar {
    height: 50px;
    background: #3f51b5;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between; /* NEW: pushes link to the right */
    padding: 0 1rem;
}

.topbar-title {
    font-size: 1.1rem;
    font-weight: 500;
}

.topbar-link {
    color: white !important;
    text-decoration: none;
    font-size: 0.95rem;
    padding: 0.25rem 0.5rem;
}

.topbar-link:hover {
    text-decoration: underline;
}


/* Visually hidden until focused — first focusable element in the page so
   keyboard/screen-reader users can bypass the 6-link sidebar nav instead of
   tabbing through it on every page load (WCAG 2.4.1, Bypass Blocks). */
.skip-link {
    position: absolute;
    top: -3rem;
    left: 0;
    background: #ffffff;
    color: #3f51b5;
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    text-decoration: none;
    z-index: 2000;
    border-radius: 0 0 6px 0;
    transition: top 0.2s ease;
}

    .skip-link:focus {
        top: 0;
    }

.hamburger {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.6rem;
    line-height: 1;
    padding: 0.6rem;
    cursor: pointer;
    display: none; /* hidden on desktop */
}

/* Sidebar (desktop default) */
.sidebar {
    position: fixed;
    top: 50px;
    bottom: 0;
    left: 0;
    width: 240px;
    background: #f4f4f4;
    padding-top: 1rem;
    overflow-y: auto;
    transition: transform 0.3s ease;
}

    .sidebar ul {
        list-style: none;
        padding: 0;
    }

    .sidebar li {
        padding: 0;
    }

    .sidebar a {
        display: block;
        padding: 0.75rem 1rem;
        text-decoration: none;
        color: #333;
    }

        .sidebar a:hover,
        .sidebar a:focus-visible {
            background: #e8e8e8;
        }

        /* Current-page indicator (aria-current="page" on the same <a>) —
           orientation cue for low-vision/screen-reader users navigating
           between sidebar pages. */
        .sidebar a.active {
            font-weight: 700;
            color: #3f51b5;
            background: #e4e6f7;
            border-left: 3px solid #3f51b5;
            padding-left: calc(1rem - 3px);
        }

/* Main content */
.content {
    margin-top: 0px;
    padding: 1rem;
    transition: margin-left 0.3s ease;
}

/* Only reserve the sidebar gutter on pages that actually have one signed-in
   pages. Anonymous pages (Sign In, 2FA) have no <nav class="sidebar">, so
   they shouldn't have a blank 240px column pinning their content top-left. */
.has-sidebar .content {
    margin-left: 240px;
}

/* Sign In / 2FA: center the single card instead of pinning it top-left in
   an otherwise-empty page. */
.content-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 50px);
}

/* Grey info panel (sign-in page contact details). Same position, width and
   grey as the authenticated .sidebar — left-aligned for visual consistency
   between signed-in and anonymous pages — but static rather than a
   slide-in overlay, since anonymous pages have no hamburger to toggle it
   with; it's hard-hidden (not just off-canvas) below the sidebar breakpoint
   so it can't be focused while invisible. */
.info-panel {
    position: fixed;
    top: 50px;
    bottom: 0;
    left: 0;
    width: 240px;
    background: #f4f4f4;
    padding: 1rem;
    overflow-y: auto;
}

.has-info-panel .content {
    margin-left: 240px;
}

/* Contact block styling, shared by the sign-in page's standalone .info-panel
   and the .sidebar-contact block appended under the nav links on signed-in
   pages. Font size matches the 13px body size the SPARC BC contact block
   uses in SelfServeReact (src/default.scss) — smaller than the rest of this
   app's text, which otherwise holds a 16px floor for the elderly/low-vision
   audience (see CLAUDE.md); accepted here to keep this panel from
   dominating the page. */
.info-panel h2,
.sidebar-contact h2 {
    font-size: 14px;
    margin-bottom: 0.4rem;
}

.info-panel address,
.sidebar-contact address {
    margin-bottom: 0.5rem;
    font-style: normal;
}

.info-panel dt,
.sidebar-contact dt {
    font-weight: 600;
}

.info-panel dd,
.sidebar-contact dd {
    margin-bottom: 0.35rem;
}

.info-panel,
.sidebar-contact {
    font-size: 13px;
}

/* Contact block appended below "Sign Out" in the authenticated sidebar. */
.sidebar-contact {
    margin-top: 1rem;
    padding: 1rem;
    border-top: 1px solid #ddd;
}

/* MOBILE BEHAVIOR */
@media (max-width: 992px) {

    .hamburger {
        display: block; /* show hamburger */
    }

    .sidebar {
        transform: translateX(-100%); /* hidden by default */
        /* visibility, not just transform: an off-screen element is still in
           the tab order and exposed to some AT unless it's also hidden this
           way — same reasoning as .info-panel's hard-hide below, just with a
           transition-delay here so the slide animation still plays. */
        visibility: hidden;
        transition: transform 0.3s ease, visibility 0s linear 0.3s;
        width: 240px;
        z-index: 1000;
        box-shadow: 2px 0 6px rgba(0,0,0,0.2);
    }

    .sidebar.open {
        transform: translateX(0); /* slide in */
        visibility: visible;
        transition: transform 0.3s ease, visibility 0s linear 0s;
    }

    .has-sidebar .content {
        margin-left: 0; /* full width */
    }

    /* Below the same breakpoint the sidebar collapses at, the info panel
       is dropped entirely rather than hidden behind a toggle — matching
       the requirement that it never appear alongside mobile/hamburger nav. */
    .info-panel {
        display: none;
    }

    .has-info-panel .content {
        margin-left: 0;
    }
}

/* Narrow-phone table layout: turn each row into a labeled card instead of
   requiring horizontal scrolling to reach columns/actions off-screen. Add
   class="table-stack" to a table and data-label="Column Name" to each <td>
   to opt in (see Receipts/Donations/Permits). */
@media (max-width: 576px) {
    .table-stack thead {
        display: none;
    }

    .table-stack, .table-stack tbody, .table-stack tr, .table-stack td {
        display: block;
        width: 100%;
    }

    .table-stack tr {
        margin-bottom: 1rem;
        border: 1px solid #dee2e6;
        border-radius: 6px;
        overflow: hidden;
    }

    .table-stack td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: 0.5rem 0.75rem;
        border: none;
        border-bottom: 1px solid #eee;
        text-align: right;
    }

    .table-stack td:last-child {
        border-bottom: none;
    }

    .table-stack td::before {
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
        margin-right: auto;
    }
}


.readonly-input {
    background-color: #f2f2f2; /* solid light gray */
    border: none; /* remove outline */
    padding: 8px 12px; /* field-like spacing */
    border-radius: 4px; /* optional: matches Bootstrap */
    margin-bottom: 6px; /* spacing between fields */
    width: 50%; /* match your layout */
    font-size: 1rem;
    line-height: 1.4;
    box-shadow: none; /* remove Bootstrap focus shadow */
}

.readonly-input:focus {
    outline: none;
    box-shadow: none;
}

dialog#successDialog {
    border: none;
    border-radius: 8px;
    padding: 1.5rem;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

dialog#successDialog::backdrop {
    background: rgba(0,0,0,0.5);
}

dialog#successDialog h2 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

dialog#successDialog p {
    font-size: 1rem;
    margin-bottom: 1.25rem;
}

.address-summary-block {
    padding: 12px 14px;
    border: 1px solid;
    border-radius: 4px;
    margin-bottom: 12px;
    font-size: 1rem;
    line-height: 1.5;
    white-space: pre-line; /* preserves line breaks */
    visibility: hidden;
    min-height: 80px;
}

#AddressFieldsContainer {
    display: none !important;
}