/* ===== Shared Tabulator Overrides ===== */
/* Consolidated from email_alerts.html, cart.html, parcel_detail.html,
   manage_portfolios.html, county_certificates.html, manage_certificates.html */
.tabulator {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-family), sans-serif;
    font-size: 0.8125em;
    background-color: var(--color-surface);
    overflow-x: hidden;
}

.tabulator .tabulator-tableHolder {
    overflow-x: hidden;
}

/* Tabulator's own sheet paints rows and cells white with dark text, whatever the theme. */
.tabulator .tabulator-row,
.tabulator .tabulator-row.tabulator-row-even {
    background-color: var(--color-surface);
}

.tabulator .tabulator-row .tabulator-cell {
    color: var(--color-text);
}

/* The Tabulator sheet loads after this one, so these need the extra element to win. */
div.tabulator .tabulator-header,
div.tabulator .tabulator-header .tabulator-col {
    background-color: var(--color-bg);
    color: var(--color-text);
}

div.tabulator .tabulator-footer {
    background-color: var(--color-bg);
    color: var(--color-text);
}

/* The sheet's paginator is grey text, red for the current page and white on grey for hover, whatever the theme. */
div.tabulator .tabulator-footer .tabulator-paginator {
    color: var(--color-text);
}

div.tabulator .tabulator-footer .tabulator-page,
div.tabulator .tabulator-footer .tabulator-page-size {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

/* WCAG 2.5.8: the sheet's padding leaves page numbers at 18x22 px. */
div.tabulator .tabulator-footer .tabulator-page {
    min-width: 24px;
    min-height: 24px;
}

/* The grid role sits on this wrapper so the pager is outside it (web.js, Tabulator ARIA repair). */
.tabulator-aria-grid {
    display: contents;
}

/* The sheet's inline-block would stack a themed dropdown's value above its arrow (default.css base-select). */
div.tabulator .tabulator-footer .tabulator-page-size {
    display: inline-flex;
    align-items: center;
}

div.tabulator .tabulator-footer .tabulator-page.active {
    color: var(--color-primary-fg);
    font-weight: 600;
}

div.tabulator .tabulator-footer .tabulator-page:not(disabled):hover {
    background: var(--color-row-hover);
    color: var(--color-text);
}

/* The sheet's hover grey would put a dark theme's light text on a light row. */
div.tabulator .tabulator-row.tabulator-selectable:hover {
    background-color: var(--color-row-hover);
}

/* The paginator (My Certificates) is wider than a phone: scroll it rather than spill past the grid. */
.tabulator .tabulator-footer {
    overflow-x: auto;
}

.tabulator .tabulator-header {
    background-color: var(--color-bg);
    border-bottom: 2px solid var(--color-border);
    font-weight: 600;
    color: var(--color-text);
}

.tabulator .tabulator-header .tabulator-col {
    border-right: 1px solid var(--color-border);
    background-color: var(--color-bg);
}

.tabulator .tabulator-header .tabulator-col:last-child {
    border-right: none;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
    padding: 10px 12px;
}

.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row {
    border-bottom: 1px solid var(--color-divider);
    transition: background-color 0.15s ease;
}

.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row:hover {
    background-color: var(--color-row-hover);
}

.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row .tabulator-cell {
    padding: 10px 12px;
    border-right: none;
    color: var(--color-text);
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-sorter {
    color: var(--color-muted);
}

/* Prevent ellipsis on cells with HTML buttons */
.tabulator .tabulator-row .tabulator-cell[tabulator-field="parcel_number"],
.tabulator .tabulator-row .tabulator-cell[tabulator-field="actions"],
.tabulator .tabulator-row .tabulator-cell[tabulator-field="action"],
.tabulator .tabulator-row .tabulator-cell[tabulator-field="total_due"],
.tabulator .tabulator-row .tabulator-cell[tabulator-field="select"],
.tabulator .tabulator-row .tabulator-cell[tabulator-field="tda_select"],
.tabulator .tabulator-row .tabulator-cell[tabulator-field="map"],
.tabulator .tabulator-row .tabulator-cell[tabulator-field="map_btn"] {
    overflow: visible;
    text-overflow: clip;
}

/* Responsive collapse formatting */
.tabulator .tabulator-row .tabulator-responsive-collapse {
    border-top: 1px dashed var(--color-border);
    padding: 8px 12px;
}

.tabulator .tabulator-row .tabulator-responsive-collapse table {
    font-size: 0.8125em;
}

.tabulator .tabulator-row .tabulator-responsive-collapse table tr td:first-child {
    font-weight: 600;
    color: var(--color-text-label);
    padding-right: 12px;
}

.tabulator .tabulator-responsive-collapse table tr:nth-child(odd) {
    background-color: var(--color-bg);
}

.tabulator .tabulator-responsive-collapse table tr:nth-child(even) {
    background-color: var(--color-surface);
}

.tabulator-cell.actions,
.tabulator-cell.total_due,
.tabulator-cell.cb_col {
    overflow: visible;
    text-overflow: clip;
}

/* ===== Shared Modal Overrides ===== */
/* Consolidated from email_alerts.html, manage_portfolios.html, parcel_detail.html */
.modal-header {
    padding: 8px 16px;
    background: var(--color-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
}

.modal-body {
    padding: 8px 16px;
    overflow-y: auto;
    max-height: calc(90vh - 100px);
    -webkit-overflow-scrolling: touch;
}

body.modal-open {
    overflow: hidden;
}

.modal-footer {
    padding: 8px 16px;
    margin-top: 0;
    text-align: right;
    border-top: 1px solid var(--color-border);
}

.close-x {
    cursor: pointer;
    font-size: 1.5em;
    color: var(--color-text-secondary);
    transition: var(--transition);
}

.close-x:hover,
.close-x:focus-visible {
    color: var(--color-text);
}

/* ===== Shared Button Styles ===== */
/* Consolidated from cart.html, email_alerts.html, manage_portfolios.html */
.modal-buttons {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.btn-modal {
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    font-size: 0.8125em;
    font-family: var(--font-family), sans-serif;
    font-weight: 500;
    transition: var(--transition);
    white-space: nowrap;
}

.btn-confirm {
    background-color: var(--color-danger-fill);
    color: var(--color-text-inverse);
}

.btn-confirm:hover,
.btn-confirm:focus-visible {
    background-color: var(--color-danger-fill-hover);
}

.btn-cancel {
    background: none;
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.btn-cancel:hover,
.btn-cancel:focus-visible {
    background-color: var(--color-bg);
}

/* ===== Main Search Page ===== */
#search-results {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Each result is <li><div class="result-item" role="link" tabindex="0">: the role sits inside the <li> so the
   list keeps list items (role="link" on the <li> itself made the <ul> hold no listitems, WCAG 1.3.1). */
#search-results li {
    margin-bottom: 10px;
}

#search-results .result-item {
    display: block;
    background: var(--color-card, var(--color-surface));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

#search-results .result-item:hover,
#search-results .result-item:focus-visible {
    box-shadow: var(--shadow-md);
    border-color: var(--color-accent);
}

#search-results .result-item:active {
    background: var(--color-primary-light);
}

.result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.result-parcel {
    font-weight: 600;
    font-size: 0.9375em;
    color: var(--color-accent);
}

.result-year {
    font-size: 0.75em;
    font-weight: 500;
    color: var(--color-text);
    background: var(--color-primary-light);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.result-owner {
    font-size: 0.875em;
    color: var(--color-text);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.result-addresses {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: 0.8125em;
    color: var(--color-text-secondary);
}

.result-addr {
    display: flex;
    gap: 4px;
    min-width: 0;
    flex: 1 1 45%;
}

.result-addr-label {
    font-weight: 500;
    color: var(--color-text-label);
    white-space: nowrap;
}

.result-addr-value {
    overflow: hidden;
}

.results-info {
    text-align: center;
    padding: 4px 0 4px;
    color: var(--color-text-secondary);
    font-size: 0.8125em;
}

.results-scroll {
    overflow-y: auto;
    padding-right: 4px;
}

@media screen and (max-width: 600px) {
    .result-addresses {
        flex-direction: column;
        gap: 2px;
    }
}

.input-group {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.search-bar-wrapper {
    display: flex;
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md), 0 0 0 1px var(--color-border);
    background: var(--color-card, var(--color-surface));
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.search-bar-wrapper:focus-within {
    box-shadow: var(--shadow-lg), 0 0 0 2px var(--color-accent);
    transform: translateY(-1px);
}

#typeahead-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    margin-top: 4px;
    background: var(--color-card, var(--color-surface));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    list-style: none;
    padding: 4px 0;
    max-height: 360px;
    overflow-y: auto;
}

#typeahead-dropdown li {
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.15s ease;
    border-bottom: 1px solid var(--color-border);
}

#typeahead-dropdown li:last-child {
    border-bottom: none;
}

#typeahead-dropdown li:hover,
#typeahead-dropdown li.ta-active {
    background: var(--color-primary-light);
}

.ta-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.ta-parcel {
    font-weight: 600;
    font-size: 0.875em;
    color: var(--color-accent);
}

.ta-year {
    font-size: 0.6875em;
    color: var(--color-text-secondary);
    background: var(--color-primary-light);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
}

.ta-owner {
    font-size: 0.8125em;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ta-address {
    font-size: 0.75em;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Address suggestions under a street-address input (web.js attachAddressSuggestions) */
.has-address-suggestions {
    position: relative;
}

.address-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    margin-top: 2px;
    background: var(--color-card, var(--color-surface));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.address-suggestions[hidden] {
    display: none;
}

.address-suggestions ul {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: 240px;
    overflow-y: auto;
}

.address-suggestions li {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 0.875em;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
}

.address-suggestions li:last-child {
    border-bottom: none;
}

.address-suggestions li:hover,
.address-suggestions li.ta-active {
    background: var(--color-primary-light);
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

.address-suggestions-credit {
    padding: 4px 14px 6px;
    text-align: right;
    font-size: 0.75em;
    color: var(--color-text-secondary);
}

#typeahead-dropdown li.ta-footer {
    text-align: center;
    font-size: 0.8125em;
    color: var(--color-accent);
    font-weight: 500;
    padding: 8px 14px;
    border-bottom: none;
}

#search-input {
    flex: 1;
    height: 54px;
    padding: 8px 18px 8px 46px;
    min-width: 0;
    font-size: 1em;
    border: none;
    outline: none;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%2394a3b8' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") no-repeat 14px center;
    color: var(--color-text);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

#search-input:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

#search-input::placeholder {
    color: var(--color-text-secondary);
    opacity: 0.7;
}

#search-button {
    position: relative;
    height: 54px;
    padding: 0 24px;
    margin: 0;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    color: var(--color-text-inverse);
    border: none;
    font-weight: 600;
    font-size: 0.9375em;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: opacity 0.2s ease, filter 0.2s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

#search-button:not(:disabled):hover,
#search-button:not(:disabled):focus-visible {
    filter: brightness(1.1);
}

#search-button:not(:disabled):active {
    filter: brightness(0.95);
}

#search-button:disabled {
    cursor: not-allowed;
    background: var(--color-disabled-bg);
    color: var(--color-disabled-text);
    opacity: 0.8;
}

#search-button .md-button {
    font-size: 1.25em;
}

@media screen and (max-width: 500px) {
    .search-bar-wrapper {
        flex-direction: column;
        border-radius: var(--radius-md);
    }

    #search-input {
        height: 50px;
        border-bottom: 1px solid var(--color-border);
    }

    #search-button {
        height: 48px;
        justify-content: center;
    }
}

#search-button::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-text);
    color: var(--color-text-inverse);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    pointer-events: none;
    font-size: 0.8125em;
}

#search-button:disabled:hover::after {
    opacity: 1;
    visibility: visible;
    bottom: calc(100% + 5px);
}

#search-button::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    border: 5px solid transparent;
    border-top-color: var(--color-text);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    pointer-events: none;
}

#search-button:disabled:hover::before {
    opacity: 1;
    visibility: visible;
    bottom: calc(100% + 5px);
}

#search-button:disabled .md-button {
    pointer-events: none;
}

.system-message-card {
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
    border-radius: var(--radius-md, 8px);
    padding: 12px 18px;
    margin-bottom: 16px;
    font-size: 0.875em;
    color: var(--color-warning-text);
    line-height: 1.5;
    position: relative;
}

.system-message-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    color: var(--color-warning-text);
    font-size: 1.25em;
    cursor: pointer;
    opacity: 0.6;
    padding: 0;
    line-height: 1;
    transition: var(--transition);
}

.system-message-close:hover {
    opacity: 1;
}

.tc-logo-section {
    text-align: center;
    margin-bottom: 8px;
}

.tc-logo-section img {
    background-color: var(--color-logo-bg);
    border-radius: var(--radius-sm);
    max-height: 100px;
    /* never wider than its box: at 320px the hero is 174px and a 300px cap made the page 373px (WCAG 1.4.10) */
    max-width: min(300px, 100%);
    height: auto;
    object-fit: contain;
}

.search-hero {
    background: radial-gradient(ellipse at top, var(--color-primary-light), transparent);
    padding: 12px 20px 12px;
    border-radius: var(--radius-md);
    margin-bottom: 4px;
}

.search-title {
    text-align: center;
    font-size: 1.375em;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 2px;
}

.search-subtitle {
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 0.8125em;
    margin: 0 0 10px;
}

.results-section {
    margin-top: 12px;
}

/* ===== Parcel Detail Page ===== */
.xscroll {
    overflow-x: auto;
}

td.owner_list {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.no-wrap-column {
    white-space: nowrap;
}

tr.selectable-row {
    cursor: pointer;
}

button.search-button {
    height: fit-content;
}

tr.showHighlightedRow.selectable-row:hover {
    background-color: var(--color-row-hover);
}

.header-section {
    display: flex;
}

.header-section-inner {
    width: 50%;
    padding-top: 10px;
    padding-bottom: 10px;
}

.header-section-inner.right {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
    align-items: flex-start;
}

.top-info-box {
    width: 50%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px;
    margin-left: 5px;
    margin-right: 5px;
    background: var(--color-bg);
}

.summary-and-due-section {
    display: flex;
}

hr {
    margin-top: 10px;
    margin-bottom: 10px;
}

hr.bold {
    height: 2px;
    border: none;
}

hr.blue {
    background-color: var(--color-accent);
}

.amount-due-label, .amount-due-value {
    font-weight: bold;
}

.amount-due-box {
    text-align: center;
}

.tax-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    padding: 8px 12px;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    font-size: 0.8125em;
    margin-top: -1px;
}

.tax-total-row .total-label {
    font-weight: 600;
}

.tax-total-row .total-value {
    font-weight: 700;
    font-size: 0.9375em;
}

@media screen and (max-width: 600px) {
    .top-info-box {
        width: 100%;
    }

    .summary-and-due-section {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .header-section {
        flex-direction: column;
    }

    .header-section-inner {
        width: 100%;
    }

    .button-bar-button,
    #add-to-cart-button,
    #view-cart-link,
    #parcel-analytics-btn,
    #add-to-portfolio,
    #manage-alerts,
    #letter-btn,
    #request-installment-btn {
        min-height: 44px;
    }
}

button.button-bar-button {
    background: none;
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.75em;
    font-family: var(--font-family), sans-serif;
    padding: 3px 8px;
    /* WCAG 2.5.8: pointer targets must be >= 24px in both dimensions
       (content height alone renders ~23px). Mobile bumps this to 44px. */
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: var(--transition);
    white-space: nowrap;
    margin-right: 6px;
}

button.button-bar-button:hover {
    background-color: var(--color-accent);
    color: var(--color-text-inverse);
}

button.button-bar-button .material-icons {
    font-size: 0.9375em;
    float: none;
}

button.button-bar-button .button-icon-label {
    float: none;
    padding: 0;
}

#tax-year-selector {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

#main-container h3 {
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 6px;
    margin-bottom: 12px;
}

#back-button.button-bar-button {
    width: auto;
}

.tax-year-button {
    font-weight: 500;
}

.tax-year-button.active {
    color: var(--color-text-inverse);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.tax-year-button.year-paid {
    border-color: var(--color-success);
    color: var(--color-success-fg);
}

.tax-year-button.year-paid.active {
    background-color: var(--color-success-fill);
    border-color: var(--color-success);
    color: var(--color-text-inverse);
}

.tax-year-button.year-unpaid {
    border-color: var(--color-danger);
    color: var(--color-danger-fg);
}

.tax-year-button.year-unpaid.active {
    background-color: var(--color-danger-fill);
    border-color: var(--color-danger);
    color: var(--color-text-inverse);
}

.year-unpaid-label {
    /* rem, not em: the year buttons are 12px, and 0.625em of that was a 7.5px badge */
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
}

.summary-label {
    font-weight: bold;
}

.summary-item, .detail-item {
    margin-bottom: 5px;
}

.total-label, .total-value {
    text-align: right;
    font-weight: bold;
}

#account-type {
    font-size: 0.875em;
    font-style: italic;
    padding-left: 5px;
}

#add-to-cart-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 0.8125em;
    font-family: var(--font-family), sans-serif;
    font-weight: 500;
    color: var(--color-text-inverse);
    background-color: var(--color-primary);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

#add-to-cart-button:hover:not(:disabled) {
    background-color: var(--color-primary-hover);
}

#add-to-cart-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Add to Cart + Pay Now action row. Pay Now reuses the exact color tokens
   of #add-to-cart-button so its contrast is the already-vetted primary
   pairing (WCAG AA); it is differentiated by label, icon and weight. */
.amount-due-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}
.amount-due-actions #add-to-cart-button {
    margin-top: 0; /* the legacy `.combined-taxes-line, #add-to-cart-button`
                      rule adds 10px; the flex row handles spacing now */
}
#pay-now-button,
#view-cart-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 0.8125em;
    font-family: var(--font-family), sans-serif;
    font-weight: 600;
    color: var(--color-text-inverse);
    background-color: var(--color-primary);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
#add-to-cart-button .material-icons,
#pay-now-button .material-icons,
#view-cart-link .material-icons {
    font-size: 1.1em;
}
#view-cart-link {
    text-decoration: none;
}
#view-cart-link:hover {
    background-color: var(--color-primary-hover);
}
#pay-now-button:hover:not(:disabled) {
    background-color: var(--color-primary-hover);
}
#pay-now-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
#pay-now-button:focus-visible {
    outline: 2px solid var(--color-text-inverse);
    outline-offset: 2px;
}

.paid {
    background: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
}

.paid-line {
    font-size: 1.875em;
    font-weight: bold;
    margin-top: 20px;
}

.hold {
    background: var(--color-hold-bg);
    border: 1px solid var(--color-hold-border);
}

.hold-line,
.office-line,
.payments-disabled-line {
    font-size: 1em;
    font-weight: 600;
    margin-top: 10px;
    color: var(--color-hold-text);
    display: none;
}

/* Disable Payments, beside a turned-off Add to Cart (County Certificates, Portfolios) */
.payments-disabled-note {
    font-size: 0.875em;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.tax-deed-pending-line {
    font-size: 1.125em;
    font-weight: bold;
    margin-top: 10px;
    color: #c62828;
    display: none;
}

.tax-deed-message-line {
    font-size: 0.8125em;
    margin-top: 6px;
    color: #333;
    line-height: 1.4;
    display: none;
}

.cert-info-box {
    margin-top: 20px;
    margin-bottom: 16px;
}

.cert-info-box h3 {
    margin-bottom: 5px;
}

.cert-info-box .cert-info-subsection {
    font-weight: bold;
    margin-top: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 4px;
}

.cert-info-box .detail-item {
    margin-bottom: 5px;
}

.unpaid {
    background: var(--color-danger-bg);
    border: 1px solid var(--color-danger-border);
}

.combined-taxes-line {
    margin-top: 10px;
}

.combined-taxes-line, #add-to-cart-button {
    margin-top: 10px;
}

/* Installment payment buttons */
.installment-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 12px;
}

.installment-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 14px;
    font-size: 0.8125em;
    font-family: var(--font-family), sans-serif;
    font-weight: 500;
    color: var(--color-text-inverse);
    background-color: var(--color-primary);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    min-width: 100px;
}

.installment-btn:hover:not(:disabled) {
    background-color: var(--color-primary-hover);
}

.installment-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.installment-btn.installment-paid {
    background-color: var(--color-success-fill);
    cursor: default;
}

.installment-btn.installment-hold {
    background-color: var(--color-text-secondary);
    cursor: default;
}

.installment-btn.installment-in-cart {
    opacity: 0.7;
}

.installment-btn-label {
    font-size: 0.6875em;
    opacity: 0.85;
}

.installment-btn-amount {
    font-size: 0.875em;
    font-weight: 700;
}

.installment-rules {
    margin-top: 10px;
    padding: 10px 12px;
    font-size: 0.8125em;
    line-height: 1.5;
    color: #c00;
    background-color: transparent;
    border: 1px solid #c00;
    border-radius: 6px;
}

#parcel-analytics-btn,
#add-to-portfolio,
#manage-alerts,
#letter-btn,
#request-installment-btn {
    text-decoration: none;
    background: none;
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.75em;
    font-family: var(--font-family), sans-serif;
    padding: 3px 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: var(--transition);
    white-space: nowrap;
}

#parcel-analytics-btn:hover,
#add-to-portfolio:hover,
#manage-alerts:hover,
#letter-btn:hover,
#request-installment-btn:hover {
    background-color: var(--color-accent);
    color: var(--color-text-inverse);
}

#manage-alerts.has-alerts {
    background-color: var(--color-warning-border);
    color: var(--color-warning-text);
    border-color: var(--color-warning-text);
}

#manage-alerts.has-alerts:hover {
    background-color: var(--color-warning-text);
    color: var(--color-warning-border);
}

/* Parcel detail modals - override shared modal styles */
.modal-box {
    width: 450px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-footer button {
    font-size: 0.8125em;
    font-family: var(--font-family), sans-serif;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

#portfolio-cancel-btn,
#alerts-close-btn,
#letter-close-btn,
#installment-cancel-btn {
    background: none;
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

#portfolio-cancel-btn:hover,
#alerts-close-btn:hover,
#letter-close-btn:hover,
#installment-cancel-btn:hover {
    background-color: var(--color-bg);
}

#portfolio-save-btn,
#installment-submit-btn {
    color: var(--color-text-inverse);
    background-color: var(--color-primary);
    border: none;
}

#portfolio-save-btn:hover:not(:disabled),
#installment-submit-btn:hover:not(:disabled) {
    background-color: var(--color-primary-hover);
}

#installment-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.installment-info-text {
    margin-bottom: 12px;
    padding: 10px 14px;
    background-color: var(--color-primary-light);
    border-left: 4px solid var(--color-accent);
    color: var(--color-text);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 0.8125em;
    line-height: 1.4;
}

.installment-info-text p {
    margin: 0;
}

#portfolio-save-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

select, input {
    padding: 5px 10px;
    border-radius: var(--radius-sm);
}

.alert-item {
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: background-color 0.2s;
}

.alert-item:hover {
    background-color: var(--color-row-hover);
}

.alert-label {
    flex-grow: 1;
    margin-right: 10px;
    font-weight: 500;
    font-size: 0.8125em;
}

/* Toggle Switch Styles */
.switch {
    position: relative;
    display: inline-block;
    width: 42px;
    min-width: 42px;
    height: 22px;
    flex-shrink: 0;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-disabled-bg);
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 4px;
    bottom: 4px;
    background-color: var(--color-text-inverse);
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: var(--color-toggle);
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--color-toggle);
}

input:checked + .slider:before {
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.letter-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.letter-item {
    padding: 10px;
    border-bottom: 1px solid var(--color-divider);
}

.letter-item:last-child {
    border-bottom: none;
}

.letter-link {
    text-decoration: none;
    color: var(--color-text);
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: background-color 0.2s;
}

.letter-link:hover,
.letter-link:focus-visible {
    background-color: var(--color-row-hover);
    color: var(--color-accent);
}

.letter-icon {
    margin-right: 10px;
    color: var(--color-danger-fg);
}

/* ===== Cart Page ===== */
.cart-header {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 16px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-header h2 {
    font-weight: 600;
    font-size: 1.375em;
}

.cart-summary {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
    text-align: right;
}

.total-amount {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--color-primary-fg);
}

.cart-validation-message {
    margin-top: 16px;
    padding: 12px 16px;
    font-size: 0.875em;
    line-height: 1.5;
    color: #c00;
    background-color: transparent;
    border: 1px solid #c00;
    border-radius: 6px;
}

.payment-options {
    margin-top: 30px;
    border-top: 1px solid var(--color-border);
    padding-top: 24px;
}

.payment-options h3 {
    font-weight: 600;
    margin-bottom: 4px;
}

.payment-methods {
    display: flex;
    gap: 16px;
    margin-top: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.payment-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 18px;
    width: 200px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--color-bg);
}

.payment-card:hover:not(.disabled) {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-accent);
}

.payment-card.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.payment-card .payment-disabled-reason {
    font-size: 0.6875em;
    color: var(--color-danger-fg);
    margin-top: 4px;
}

.payment-card:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.payment-card.selected {
    border-color: var(--color-accent);
    background-color: var(--color-primary-light);
    box-shadow: 0 0 0 2px var(--color-primary-light);
    transform: scale(1.02);
}

.payment-icon {
    font-size: 2.5em;
    margin-bottom: 10px;
    color: var(--color-primary-fg);
}

.payment-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.payment-desc {
    font-size: 0.75em;
    color: var(--color-text-secondary);
}

.btn-remove {
    background: none;
    border: 1px solid var(--color-danger);
    color: var(--color-danger-fg);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.75em;
    font-family: var(--font-family), sans-serif;
    padding: 3px 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: var(--transition);
    white-space: nowrap;
}

.btn-remove:hover {
    background-color: var(--color-danger-fill);
    color: var(--color-text-inverse);
}

.btn-remove .material-icons {
    font-size: 0.9375em;
}

.empty-cart {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-secondary);
}

.empty-cart .material-icons {
    color: var(--color-primary-fg);
    background: var(--color-primary-light);
    border-radius: 50%;
    padding: 20px;
}

.empty-cart .btn-primary {
    width: auto;
    padding: 10px 28px;
    font-size: 1em;
    box-shadow: var(--shadow-sm);
}

.payment-modal-form.modal-box {
    padding: 18px;
}

.payment-modal-form .form-group {
    margin-bottom: 8px;
    text-align: left;
}

.payment-modal-form .form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 2px;
    font-size: 0.8125em;
}

.payment-modal-form .form-group input,
.payment-modal-form .form-group select {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.9375em;
    font-family: var(--font-family), sans-serif;
    box-sizing: border-box;
}

.payment-modal-form .form-row {
    display: flex;
    gap: 10px;
}

.payment-modal-form .form-row .form-group {
    flex: 1;
}

.payment-modal-form h3 {
    margin-bottom: 4px;
}

.payment-modal-form .payment-modal-total {
    font-size: 1.0625em;
    font-weight: 600;
    color: var(--color-primary-fg);
    margin-bottom: 10px;
}

.btn-submit-payment {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 0.8125em;
    font-family: var(--font-family), sans-serif;
    font-weight: 500;
    color: var(--color-text-inverse);
    background-color: var(--color-primary);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.btn-submit-payment:hover:not(:disabled) {
    background-color: var(--color-primary-hover);
}

.btn-submit-payment:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .payment-methods {
        flex-direction: column;
    }

    .payment-card {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .payment-modal-form .form-row {
        flex-direction: column;
    }
}

/* Bank name display (cart echeck) */
.bank-known {
    background-color: var(--color-bank-known-bg);
    color: var(--color-bank-known-text);
}

.bank-unknown {
    background-color: var(--color-bank-unknown-bg);
    color: var(--color-bank-unknown-text);
}

/* ===== Email Alerts Page ===== */
.alerts-header {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 16px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.alerts-header h2 {
    font-weight: 600;
    font-size: 1.375em;
}

.btn-manage {
    background: none;
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.75em;
    font-family: var(--font-family), sans-serif;
    padding: 3px 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: var(--transition);
    white-space: nowrap;
    margin-right: 4px;
}

.btn-manage:hover {
    background-color: var(--color-accent);
    color: var(--color-text-inverse);
}

.btn-manage .material-icons {
    font-size: 0.9375em;
}

.btn-remove-all {
    background: none;
    border: 1px solid var(--color-danger);
    color: var(--color-danger-fg);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.75em;
    font-family: var(--font-family), sans-serif;
    padding: 3px 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: var(--transition);
    white-space: nowrap;
}

.btn-remove-all:hover {
    background-color: var(--color-danger-fill);
    color: var(--color-text-inverse);
}

.btn-remove-all .material-icons {
    font-size: 0.9375em;
}

.empty-alerts {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-secondary);
}

.empty-alerts .material-icons {
    color: var(--color-border);
}

.action-buttons {
    white-space: nowrap;
}

@media (max-width: 768px) {
    .alerts-header {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .action-buttons {
        display: flex;
        gap: 6px;
    }

    .action-buttons .btn-manage,
    .action-buttons .btn-remove-all {
        padding: 4px 6px;
        margin-right: 0;
    }

    .action-buttons .btn-manage .material-icons,
    .action-buttons .btn-remove-all .material-icons {
        font-size: 1.125em;
    }

    .action-buttons .btn-label {
        display: none;
    }
}

/* ===== County Certificates Page ===== */
.cert-header {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 16px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* WCAG 1.4.10 reflow: at narrow viewports the count can't fit beside the
       title, so let it wrap below instead of pushing past the viewport edge. */
    flex-wrap: wrap;
    gap: 4px 12px;
}

.cert-header h2 {
    font-weight: 600;
    font-size: 1.375em;
}

.empty-certs {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-secondary);
}

.empty-certs .material-icons {
    color: var(--color-border);
}

/* Search bar */
.cert-search {
    display: flex;
    gap: 8px 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.cert-search .search-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cert-search .search-group label {
    font-size: 0.75em;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.cert-search .search-group input,
.cert-search .search-group select {
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.875em;
    font-family: var(--font-family), sans-serif;
    transition: var(--transition);
}

.cert-search .search-group input:focus,
.cert-search .search-group select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.cert-search .search-group input:focus-visible,
.cert-search .search-group select:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.cert-search .search-group select[name="cert_year"] {
    width: 110px;
}

.cert-search .search-group input[name="search_text"] {
    width: 280px;
}

.cert-search-buttons {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.cert-clear-btn {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    background: none;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.8125em;
    font-family: var(--font-family), sans-serif;
    font-weight: 500;
    transition: var(--transition);
    white-space: nowrap;
}

.cert-clear-btn:hover {
    background-color: var(--color-bg);
}

/* Result info */
.cert-result-info {
    font-size: 0.8125em;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
}

/* Action buttons */
.cert-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .cert-header {
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

    .cert-search {
        gap: 6px;
    }

    .cert-search .search-group {
        width: 100%;
    }

    .cert-search .search-group select[name="cert_year"],
    .cert-search .search-group input[name="search_text"],
    .cert-search .search-group input {
        width: 100%;
        box-sizing: border-box;
    }

    .cert-search-buttons {
        width: 100%;
    }

    .cert-search-buttons .btn-cert-action,
    .cert-search-buttons .cert-clear-btn {
        flex: 1;
        justify-content: center;
    }

    .cert-search .search-group.filter-group {
        width: 100%;
    }

    .cert-actions {
        margin-bottom: 8px;
    }

    .btn-cert-action {
        flex: 1;
        justify-content: center;
    }
}

.btn-cert-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 0.8125em;
    font-family: var(--font-family), sans-serif;
    font-weight: 500;
    color: var(--color-text-inverse);
    background-color: var(--color-primary);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.btn-cert-action:hover:not(:disabled) {
    background-color: var(--color-primary-hover);
}

.btn-cert-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-cert-action .material-icons {
    font-size: 1.125em;
}

.btn-cert-action.secondary {
    background: none;
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
}

.btn-cert-action.secondary:hover:not(:disabled) {
    background-color: var(--color-accent);
    color: var(--color-text-inverse);
}

/* Action button in table */
.btn-cert-detail {
    background: none;
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.75em;
    padding: 3px 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: var(--transition);
    font-family: var(--font-family), sans-serif;
    white-space: nowrap;
}

.btn-cert-detail:hover {
    background-color: var(--color-accent);
    color: var(--color-text-inverse);
}

.btn-cert-detail .material-icons {
    font-size: 0.9375em;
}

/* Map button in table */
.btn-cert-map {
    background: none;
    border: none;
    color: var(--color-accent);
    cursor: pointer;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    line-height: 1;
    vertical-align: middle;
}

.btn-cert-map:hover {
    color: var(--color-accent-hover, var(--color-accent));
    background-color: var(--color-row-hover, rgba(0, 0, 0, 0.05));
}

/* Total Due link */
.total-due-no-link {
    color: var(--color-accent);
    text-decoration: none;
    white-space: nowrap;
}

.total-due-link {
    /* Rendered as a <button> (keyboard: Enter + Space) but styled as the
       link it replaced. */
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--color-accent);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.total-due-link:hover {
    text-decoration: underline;
}

.total-due-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.total-due-link .material-icons {
    font-size: 0.875em;
    vertical-align: middle;
    opacity: 0.7;
    margin-left: 3px;
}

.parcel-link {
    color: var(--color-accent);
    text-decoration: none;
    white-space: nowrap;
}

.parcel-link:hover,
.parcel-link:focus {
    text-decoration: underline;
}

.parcel-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

.parcel-link-icon {
    font-size: 0.875em;
    vertical-align: middle;
    margin-left: 3px;
    opacity: 0.7;
}

/* WCAG 1.4.3: Tabulator hard-codes light row backgrounds for interaction
   states (hover/active #e0e0e0 !important, selected #9abcea) on which several
   themes' accent falls below 4.5:1 for 12-14px link text (axe measured 4.0 on
   the resilionics theme). Tabulator itself forces near-black cell text in
   those states, so give in-row accent links/labels that same near-black
   there -- both colors are Tabulator constants, so the pair passes AA in
   every theme -- and underline the links so they still read as links. */
.tabulator-row.tabulator-selectable:hover .parcel-link,
.tabulator-row.active .parcel-link,
.tabulator-cell.active .parcel-link,
.tabulator-row.tabulator-selected .parcel-link,
.tabulator-row.tabulator-selectable:hover .total-due-link,
.tabulator-row.active .total-due-link,
.tabulator-cell.active .total-due-link,
.tabulator-row.tabulator-selected .total-due-link {
    color: rgba(0, 0, 0, 0.87);
    text-decoration: underline;
}

/* :not(:hover) keeps the button's own hover inversion (accent background +
   inverse text) intact when the pointer reaches the button itself. */
.tabulator-row.tabulator-selectable:hover .button-icon:not(:hover),
.tabulator-row.active .button-icon:not(:hover),
.tabulator-cell.active .button-icon:not(:hover),
.tabulator-row.tabulator-selected .button-icon:not(:hover) {
    color: rgba(0, 0, 0, 0.87);
    border-color: rgba(0, 0, 0, 0.87);
}

/* Shared popup overlay / modal base */
.cert-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-overlay);
    z-index: 9999;
    backdrop-filter: blur(2px);
}

.cert-popup-modal {
    background: var(--color-surface);
    width: 700px;
    max-width: 95%;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.cert-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.cert-popup-header h3 {
    margin: 0;
    font-size: 1.125em;
    font-weight: 600;
}

.cert-popup-close {
    cursor: pointer;
    font-size: 1.5em;
    color: var(--color-text-secondary);
    transition: var(--transition);
    background: none;
    border: none;
    line-height: 1;
}

.cert-popup-close:hover {
    color: var(--color-text);
}

.cert-popup-body {
    padding: 10px 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* WCAG 2.1.1: the dialog body scrolls, and its content (fee/info tables) has
   no focusable elements, so the region itself carries tabindex="0" to be
   keyboard-scrollable. Show where focus is when it lands there. */
.cert-popup-body:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

/* TDA messages dialog: the body is apex's two-column notification table */
.correspondence-msg-body {
    overflow-wrap: anywhere;
}

.correspondence-msg-body table {
    width: 100%;
    border-collapse: collapse;
}

.correspondence-msg-body th,
.correspondence-msg-body td {
    padding: 4px 8px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--color-border);
}

.correspondence-msg-body th {
    font-weight: 600;
    color: var(--color-text-secondary);
}

.correspondence-msg-body tr:last-child th,
.correspondence-msg-body tr:last-child td {
    border-bottom: none;
}

/* Row info popup detail tables */
.cert-info-detail table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 6px;
}

.cert-info-detail table th {
    text-align: left;
    padding: 2px 10px 2px 0;
    font-size: 0.875em;
    color: var(--color-text-secondary);
    font-weight: 500;
    white-space: nowrap;
    width: 130px;
}

.cert-info-detail table td {
    padding: 2px 0;
    font-size: 0.875em;
}

.cert-info-section {
    font-weight: 600;
    font-size: 0.875em;
    color: var(--color-primary-fg);
    margin: 8px 0 3px 0;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 2px;
}

.cert-info-section:first-child {
    margin-top: 0;
}

/* Print button */
.cert-print-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 0.875em;
    font-family: var(--font-family), sans-serif;
    font-weight: 500;
    color: var(--color-text-inverse);
    background-color: var(--color-primary);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.cert-print-btn:hover {
    background-color: var(--color-primary-hover);
}

/* Fee breakdown table in Total Due popup */
.cert-fee-table {
    width: 100%;
    border-collapse: collapse;
    margin: 6px 0;
}

.cert-fee-table th,
.cert-fee-table td {
    padding: 3px 8px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    font-size: 0.875em;
}

.cert-fee-table th {
    font-weight: 600;
    color: var(--color-text);
}

.cert-group-header {
    background-color: var(--color-bg);
    font-weight: 600;
    text-align: center !important;
    font-size: 0.875em;
}

.cert-fee-header th {
    background-color: var(--color-primary-light);
    font-weight: 600;
    font-size: 0.875em;
}

.cert-subtotal-row {
    font-weight: 700;
    background-color: var(--color-bg);
}

.cert-separator-row td {
    border: none;
    height: 4px;
}

.cert-calc-text {
    font-style: italic;
    color: var(--color-text-secondary);
    font-size: 0.875em;
}

/* Loading spinner */
.cert-loading {
    text-align: center;
    padding: 40px;
    color: var(--color-text-secondary);
}

.cert-spinner {
    /* The turning arc must stand out from the track in every theme: with --color-border (#000) under
       --color-accent (#1a1a1a), Gadsden saw a still black ring. Track = the text colour faded, arc = the text colour. */
    color: var(--color-text-secondary);
    border: 3px solid color-mix(in srgb, currentColor 20%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: cert-spin 0.8s linear infinite;
    margin: 0 auto 12px auto;
}

@keyframes cert-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* An icon that turns while a page waits: the payment return page's "sync" icon
   (Rex, Oct 2026 - it sat still). Reuses cert-spin. */
.spin-icon {
    animation: cert-spin 1.2s linear infinite;
}

/* It shows progress, so it keeps turning for visitors who ask for less motion,
   slowly (Bob, Oct 2026): default.css's prefers-reduced-motion rule would stop it
   after one 0.01 ms run, and a still "sync" icon reads as a stalled page. A
   class outranks that rule's universal selector, both being !important. */
@media (prefers-reduced-motion: reduce) {
    .spin-icon {
        animation-duration: 4s !important;
        animation-iteration-count: infinite !important;
    }
}

/* Certificate Dashboard */
.cert-dashboard {
    margin-bottom: 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    padding: 16px;
}

.cert-dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.cert-metric-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cert-metric-card.cert-metric-highlight {
    border-color: var(--color-success);
    background: var(--color-success-bg);
}

.cert-metric-label {
    font-size: 0.75em;
    color: var(--color-text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.cert-metric-value {
    font-size: 1.25em;
    font-weight: 700;
    color: var(--color-text);
}

.cert-metric-pct {
    display: block;
    font-size: 0.8125em;
    font-weight: 500;
    /* Darker success shade: --color-success on --color-success-bg fails AA on the
       resilionics theme (4.27); --color-success-hover clears it on every theme. */
    color: var(--color-success-hover);
}

.cert-chart-tooltip {
    position: fixed;
    background: rgba(30, 41, 59, 0.92);
    color: #fff;
    font-size: 0.8125em;
    line-height: 1.5;
    padding: 8px 12px;
    border-radius: 4px;
    pointer-events: none;
    white-space: pre-line;
    z-index: 1000;
    max-width: 300px;
}

.cert-chart-tooltip .tip-title {
    font-weight: bold;
    margin-bottom: 2px;
}

@media (max-width: 768px) {
    .cert-dashboard-metrics {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .cert-dashboard-metrics {
        grid-template-columns: 1fr;
    }
}

.cert-metric-sub {
    display: block;
    font-size: 0.8125em;
    font-weight: 500;
    color: var(--color-text-secondary);
}

/* The figures are all the dashboard holds now that the charts are on Certificate Analytics */
.cert-dashboard-metrics:last-child {
    margin-bottom: 0;
}

/* My Certificates <-> Certificate Analytics links beside the page title */
.cert-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cert-title-group .page-title {
    margin-bottom: 0;
}

.ca-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-sm);
    background: var(--color-card, #fff);
    color: var(--color-accent);
    font-size: 0.875em;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

.ca-link-btn .material-icons {
    font-size: 1.25em;
}

.ca-link-btn:hover {
    background: var(--color-accent);
    color: var(--color-text-inverse);
}

.ca-link-btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Certificate Analytics (certificate_analytics.html) */
.ca-title-icon {
    vertical-align: -4px;
    margin-right: 6px;
    color: var(--color-accent);
}

.ca-filters {
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    margin-bottom: 12px;
}

.ca-filter-note {
    flex: 1 1 280px;
    margin: 0;
    font-size: 0.8125em;
    color: var(--color-text-secondary);
}

.ca-zone-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05em;
    font-weight: 600;
    color: var(--color-text);
    margin: 18px 0 10px;
}

.ca-zone-heading .material-icons {
    color: var(--color-accent);
    font-size: 1.25em;
}

.ca-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.ca-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    background: var(--color-card, #fff);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-sm);
}

.ca-stat.ca-stat-good {
    border-left-color: var(--color-success);
}

.ca-stat-label {
    font-size: 0.75em;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.ca-stat-value {
    font-size: 1.3em;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.ca-stat-sub {
    font-size: 0.8em;
    color: var(--color-text-secondary);
}

.ca-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.ca-card {
    min-width: 0;
    padding: 16px;
    background: var(--color-card, #fff);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.ca-card-wide {
    grid-column: 1 / -1;
}

.ca-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.ca-card-title {
    margin: 0;
    font-size: 0.95em;
    font-weight: 600;
    color: var(--color-text);
}

.ca-card-note {
    margin: 4px 0 12px;
    font-size: 0.8125em;
    color: var(--color-text-secondary);
}

/* Chart.js sizes the canvas to this box (maintainAspectRatio: false) */
.ca-canvas-wrap {
    position: relative;
    height: 260px;
}

.ca-canvas-wide {
    height: 280px;
}

.ca-canvas-top {
    height: 340px;
}

.ca-canvas-wrap canvas {
    max-width: 100%;
}

.ca-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 0.875em;
    color: var(--color-text-secondary);
}

.ca-toggle {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.ca-toggle-btn {
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-card, #fff);
    color: var(--color-text);
    font-size: 0.8125em;
    font-family: inherit;
    cursor: pointer;
}

/* Primary, not accent: a dark theme's light accent leaves too little contrast with inverse text. */
.ca-toggle-btn[aria-pressed="true"] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-inverse);
    font-weight: 600;
}

.ca-toggle-btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.ca-toggle-sep {
    width: 1px;
    height: 20px;
    margin: 0 4px;
    background: var(--color-border);
}

.ca-table {
    margin-top: 10px;
    font-size: 0.8125em;
}

.ca-table summary {
    cursor: pointer;
    color: var(--color-accent);
    font-weight: 500;
    width: fit-content;
}

.ca-table summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.ca-table > div {
    overflow-x: auto;
    margin-top: 8px;
}

.ca-data-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--color-text);
}

.ca-data-table th,
.ca-data-table td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--color-divider, var(--color-border));
    text-align: left;
    white-space: nowrap;
}

.ca-data-table thead th {
    font-weight: 600;
    color: var(--color-text-secondary);
}

.ca-data-table tbody th {
    font-weight: 500;
}

.ca-data-table .ca-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ca-empty-title {
    font-size: 1.17em;
}

@media (max-width: 900px) {
    .ca-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 480px) {
    .ca-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ca-canvas-wrap, .ca-canvas-wide {
        height: 230px;
    }

    .ca-card {
        padding: 12px;
    }
}

/* WCAG 1.4.10: two columns are too narrow here for a seven-figure total (335 px at a 320 px viewport). */
@media (max-width: 360px) {
    .ca-stats {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Parcel Analytics (parcel_analytics.html). Its cards, stats and tables are the Certificate Analytics ones above */
/* Room for a Spanish amount: "74.812,00 US$" broke before the $ in a 160 px tile. Phones keep the two columns above. */
@media (min-width: 481px) {
    #pa-content .ca-stats {
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    }
}

.pa-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px 20px;
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-card, #fff);
}

.pa-facts dt {
    font-size: 0.75em;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.pa-facts dd {
    margin: 2px 0 0;
    font-size: 0.9375em;
    font-weight: 600;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.pa-partial {
    margin: 0 0 12px;
    padding: 10px 14px;
    border: 1px solid var(--color-warning-border);
    border-radius: var(--radius-sm);
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
    font-size: 0.875em;
}

.pa-years {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 8px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

.pa-year {
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    min-height: 44px;
    box-sizing: border-box;
    padding: 7px 9px;
    background: var(--color-card, #fff);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-decoration: none;
    transition: var(--transition);
}

.pa-year:hover {
    background: var(--color-row-hover);
}

.pa-year:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.pa-year-num {
    font-weight: 700;
    font-size: 0.9375em;
}

.pa-year-state {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.75em;
    color: var(--color-text-secondary);
}

.pa-year-state .material-icons {
    font-size: 1.25em;
}

.pa-year-tags {
    font-size: 0.6875em;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--color-text);
}

.pa-year-paid, .pa-year-redeemed {
    border-top-color: var(--color-success);
}

.pa-year-paid .material-icons, .pa-year-redeemed .material-icons {
    color: var(--color-success-fg);
}

.pa-year-unpaid, .pa-year-cert {
    border-top-color: var(--color-danger);
}

.pa-year-unpaid .material-icons, .pa-year-cert .material-icons {
    color: var(--color-danger-fg);
}

.ca-stat.pa-stat-alert {
    border-left-color: var(--color-danger);
}

/* nothing unpaid: these tiles have nothing to warn about */
.ca-stat.pa-stat-alert.pa-stat-clear {
    border-left-color: var(--color-success);
}

.pa-note {
    margin-top: 10px;
}

.pa-zone-gap {
    margin-top: 28px;
}

.pa-table-scroll {
    max-height: 420px;
    overflow: auto;
    font-size: 0.8125em;
}

.pa-table-scroll:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.pa-table-gap {
    margin-top: 12px;
}

.pa-table-scroll .ca-data-table thead th {
    position: sticky;
    top: 0;
    background: var(--color-card, #fff);
}

/* Checkbox styling */
.cert-select-cb {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

/* Portfolio modal */
.portfolio-modal-body p {
    margin-bottom: 8px;
    font-size: 0.875em;
}

.portfolio-modal-body select,
.portfolio-modal-body input[type="text"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.875em;
    font-family: var(--font-family), sans-serif;
    box-sizing: border-box;
}

.portfolio-modal-body hr {
    margin: 12px 0;
    border: none;
    border-top: 1px solid var(--color-border);
}

.portfolio-modal-body label {
    font-size: 0.875em;
    font-weight: 500;
    display: block;
    margin-bottom: 4px;
}

.portfolio-modal-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.btn-modal-cancel {
    padding: 6px 14px;
    background: none;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.875em;
    font-family: var(--font-family), sans-serif;
    font-weight: 500;
    transition: var(--transition);
    white-space: nowrap;
}

.btn-modal-cancel:hover {
    background-color: var(--color-bg);
}

.btn-modal-save {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 0.875em;
    font-family: var(--font-family), sans-serif;
    font-weight: 500;
    color: var(--color-text-inverse);
    background-color: var(--color-primary);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.btn-modal-save:hover:not(:disabled) {
    background-color: var(--color-primary-hover);
}

.btn-modal-save:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== Manage Certificates Page ===== */
/* TDA Years table in detail popup */
.tda-years-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 4px;
    /* no font-size here: the cells take 0.875em from .cert-info-detail table th/td, and a size on the
       table as well compounded to 9px */
}

.tda-years-table th {
    text-align: center;
    padding: 5px 8px;
    font-weight: 600;
    border-bottom: 2px solid var(--color-border);
    white-space: nowrap;
    width: auto;
    color: var(--color-text);
}

.tda-years-table td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--color-divider);
    vertical-align: top;
}

.tda-years-table td.tda-num {
    white-space: nowrap;
}

.tda-years-table td.tda-reason {
    padding-left: 12px;
    word-break: break-word;
}

.tda-eligible-year {
    background-color: var(--color-success-bg);
    font-weight: 600;
}

.tda-owned-year {
    background-color: var(--color-row-hover);
    color: var(--color-text-secondary);
}

.tda-total-row {
    border-top: 2px solid var(--color-text);
    font-weight: bold;
    background-color: var(--color-warning-bg);
}

.tda-total-row td {
    white-space: nowrap;
}

.tda-summary-row td {
    padding: 8px 6px;
    font-size: 0.875em;
    color: var(--color-text-secondary);
}

/* TDA table responsive */
@media (max-width: 768px) {
    .tda-years-table thead,
    .tda-years-table tr:has(> th) {
        display: none;
    }

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

    .tda-years-table tr {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        margin-bottom: 6px;
        padding: 6px 8px;
    }

    .tda-years-table td {
        display: flex;
        justify-content: space-between;
        padding: 2px 0;
        border-bottom: none;
        text-align: right !important;
    }

    .tda-years-table td::before {
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
        margin-right: 8px;
        white-space: nowrap;
    }

    .tda-years-table td.tda-num {
        white-space: normal;
    }

    .tda-years-table td.tda-reason {
        padding-left: 0;
    }

    .tda-total-row {
        background-color: var(--color-warning-bg);
        border: 2px solid var(--color-warning-border) !important;
    }

    .tda-total-row td[colspan],
    .tda-total-row td:last-child:not([data-label]) {
        display: none;
    }

    .tda-summary-row {
        border: none !important;
        padding: 0 !important;
        margin-bottom: 0 !important;
    }

    .tda-summary-row td {
        display: block;
        text-align: center !important;
        font-size: 0.6875em;
    }

    .tda-summary-row td::before {
        display: none;
    }
}

/* TDA Action Bar (manage_certificates) */
.cert-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.cert-actions #tda-selection-count {
    font-size: 0.8125em;
    font-weight: 500;
    color: var(--color-text-secondary);
}

@media (max-width: 480px) {
    .cert-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .btn-cert-action {
        white-space: normal;
    }
}

/* TDA checkbox styling */
.tda-select-cb {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

#tda-select-all {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

/* SignWell modal */
.signwell-modal {
    width: 900px;
    max-width: 95%;
    max-height: 90vh;
}

.signwell-header {
    margin-bottom: 12px;
}

.signwell-header h4 {
    margin: 0 0 6px 0;
    font-size: 1em;
    font-weight: 600;
}

.signwell-header p {
    margin: 0;
    font-size: 0.8125em;
    color: var(--color-text-secondary);
}

.signwell-summary {
    margin-top: 8px;
    font-size: 0.8125em;
}

.signwell-container {
    width: 100%;
    height: 600px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

/* TDA Success screen */
.tda-success {
    text-align: center;
    padding: 40px 20px;
}

.tda-success .material-icons {
    font-size: 4em;
    color: var(--color-success-fg);
}

.tda-success h3 {
    margin: 16px 0 8px;
    font-size: 1.25em;
    font-weight: 600;
}

.tda-success .ref-number {
    font-size: 1.125em;
    font-weight: 600;
    color: var(--color-primary-fg);
    margin: 12px 0;
    padding: 8px 16px;
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    display: inline-block;
}

.tda-success p {
    color: var(--color-text-secondary);
    font-size: 0.875em;
    margin: 8px 0;
}

/* ===== Manage Portfolios Page ===== */
.truncate-ellipsis {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.mb20 {
    margin-bottom: 20px;
}

#create-portfolio-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 0.8125em;
    font-family: var(--font-family), sans-serif;
    font-weight: 500;
    color: var(--color-text-inverse);
    background-color: var(--color-primary);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    margin-bottom: 12px;
}

#create-portfolio-btn:hover {
    background-color: var(--color-primary-hover);
}

button.button-icon {
    background: none;
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.75em;
    font-family: var(--font-family), sans-serif;
    padding: 3px 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: var(--transition);
    white-space: nowrap;
    margin-right: 4px;
}

button.button-icon:hover {
    background-color: var(--color-accent);
    color: var(--color-text-inverse);
}

button.button-icon .material-icons {
    font-size: 0.9375em;
    float: none;
}

button.button-icon .button-icon-label {
    float: none;
    padding: 0;
}

button.button-icon:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

button.button-icon:disabled:hover {
    background: none;
    color: var(--color-accent);
}

.delete-portfolio-btn {
    border-color: var(--color-danger) !important;
    color: var(--color-danger-fg) !important;
}

.delete-portfolio-btn:hover {
    background-color: var(--color-danger-fill) !important;
    color: var(--color-text-inverse) !important;
}

#delete-parcels-btn {
    border-color: var(--color-danger);
    color: var(--color-danger-fg);
}

#delete-parcels-btn:hover:not(:disabled) {
    background-color: var(--color-danger-fill);
    color: var(--color-text-inverse);
}

#delete-parcels-btn:disabled:hover {
    background: none;
    color: var(--color-danger-fg);
}

.parcel-actions-spacer,
.cert-search-spacer,
.cert-actions-spacer {
    flex-grow: 1;
}

@media (max-width: 768px) {
    .tabulator-cell.actions {
        white-space: nowrap;
    }

    .tabulator-cell.actions .button-icon {
        padding: 4px 6px;
        margin-right: 2px;
        min-height: 0;
        min-width: 0;
    }

    .tabulator-cell.actions .button-icon .button-icon-label {
        display: none;
    }

    .tabulator-cell.actions .button-icon .material-icons {
        font-size: 1.125em;
    }

    #parcel-actions .button-icon {
        flex: 1;
        justify-content: center;
    }

    h2 {
        font-size: 1.125em;
    }

    .mb20 {
        margin-bottom: 10px;
    }
}

.modal-header h3,
.modal-header h4 {
    margin: 0;
}

.modal-label {
    display: block;
    font-size: 0.8125em;
    font-weight: 500;
    color: var(--color-text-label);
    margin-bottom: 4px;
}

.modal-input {
    width: 100%;
    box-sizing: border-box;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.875em;
    font-family: var(--font-family), sans-serif;
    /* dark theme: otherwise the text box stays browser-white beside a themed select */
    background-color: var(--color-surface);
    color: var(--color-text);
}

/* Parcel detail "Add to Portfolio": room between the two fields and around the divider */
.portfolio-add-body {
    padding: 16px 20px 20px;
}

.portfolio-add-body .modal-label {
    margin-bottom: 6px;
}

.portfolio-add-body hr {
    margin: 18px 0 14px;
    border: none;
    border-top: 1px solid var(--color-border);
}

.modal-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.modal-input:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.btn-confirm-action {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
}

.btn-confirm-action:hover {
    background-color: var(--color-primary-hover);
}

.btn-danger-action {
    background-color: var(--color-danger-fill);
    color: var(--color-text-inverse);
}

.btn-danger-action:hover {
    background-color: var(--color-danger-fill-hover);
}

/* ===== FAQ Page ===== */
.faq-container h1 {
    color: var(--color-primary-fg);
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 12px;
    margin-bottom: 24px;
    font-weight: 600;
}

.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.faq-item {
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    background: var(--color-surface);
    transition: border-color 0.2s;
}

.faq-item.open {
    border-left: 3px solid var(--color-accent);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    cursor: pointer;
    font-size: 0.9375em;
    font-weight: 500;
    color: var(--color-text, #1e293b);
    background: var(--color-surface);
    border: none;
    width: 100%;
    text-align: left;
    transition: background 0.15s;
}

.faq-question:hover {
    background: var(--color-bg);
}

.faq-question .material-icons {
    font-size: 1.25em;
    color: var(--color-text-secondary, #64748b);
    transition: transform 0.25s;
    flex-shrink: 0;
    margin-left: 12px;
}

.faq-item.open .faq-question .material-icons {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    /* a closed answer is out of the tab order too: max-height 0 alone left its links focusable but invisible
       (WCAG 2.4.11). Visibility flips after the collapse animation, and at once on opening. */
    visibility: hidden;
}

.faq-item.open .faq-answer {
    visibility: visible;
}

.faq-answer-inner {
    padding: 14px 18px 16px;
    font-size: 0.875em;
    line-height: 1.6;
    color: var(--color-text-secondary, #475569);
    background: var(--color-bg);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.faq-answer.measured {
    transition: max-height 0.3s ease, visibility 0s linear 0.3s;
}

.faq-item.open .faq-answer.measured {
    transition: max-height 0.3s ease, visibility 0s;
}

.faq-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.faq-search {
    flex: 1;
    min-width: 200px;
    padding: 10px 14px 10px 36px;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    font-size: 0.875em;
    color: var(--color-text, #1e293b);
    background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") 10px center no-repeat;
    outline: none;
    transition: border-color 0.15s;
}

.faq-search:focus {
    border-color: var(--color-primary);
}

.faq-search:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.faq-search::placeholder {
    color: var(--color-text-secondary, #94a3b8);
}

.faq-toggle-all {
    background: none;
    border: none;
    color: var(--color-primary-fg);
    font-size: 0.8125em;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: var(--radius-md, 8px);
    transition: background 0.15s;
    white-space: nowrap;
}

.faq-toggle-all:hover {
    background: var(--color-primary-light);
}

.faq-no-results {
    color: var(--color-text-secondary, #64748b);
    font-size: 0.875em;
    text-align: center;
    padding: 32px 0;
    display: none;
}

.faq-error {
    background: var(--color-danger-bg);
    border: 1px solid var(--color-danger-border);
    border-radius: var(--radius-md, 8px);
    padding: 14px 18px;
    color: var(--color-danger-fg);
    font-size: 0.875em;
}

.faq-empty {
    color: var(--color-text-secondary, #64748b);
    font-size: 0.9375em;
    text-align: center;
    padding: 40px 0;
}

/* Tablet / small desktop */
@media (max-width: 768px) {
    .faq-container.page-card {
        margin: 12px;
        padding: 18px;
    }

    .faq-question {
        min-height: 44px;
        padding: 12px 14px;
    }

    .faq-answer-inner {
        padding: 0 14px 14px;
    }
}

/* Phone */
@media (max-width: 480px) {
    .faq-container.page-card {
        margin: 8px;
        padding: 14px;
    }

    .faq-container h1 {
        font-size: 1.25em;
        margin-bottom: 16px;
        padding-bottom: 8px;
    }

    .faq-question {
        font-size: 0.875em;
        padding: 12px;
    }

    .faq-answer-inner {
        font-size: 0.8125em;
        padding: 0 12px 12px;
    }

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

    .faq-search {
        min-width: unset;
    }

    .faq-toggle-all {
        align-self: flex-end;
    }
}

/* ===== Contact Us Page ===== */
.contact-container h1 {
    color: var(--color-primary-fg);
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 12px;
    margin-bottom: 24px;
    font-weight: 600;
}

.contact-intro {
    margin-bottom: 24px;
    font-size: 0.9375em;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.contact-cards {
    display: flex;
    gap: 16px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.contact-card {
    flex: 1;
    min-width: 200px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px;
    background: var(--color-bg);
}

/* Four cards (with the county's email) sit two by two, wide enough to keep the address on one line. */
.contact-cards:has(.contact-card-email) .contact-card {
    flex: 1 1 calc(50% - 8px);
}

.contact-card-icon {
    font-size: 2em;
    color: var(--color-primary-fg);
    margin-bottom: 8px;
}

.contact-card h3 {
    font-size: 1em;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--color-text);
}

.contact-card p {
    margin: 0;
    font-size: 0.875em;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.map-container {
    margin-top: 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

@media (max-width: 600px) {
    .contact-cards {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    #street-view {
        height: 200px !important;
    }
}

/* ===== Profile Page ===== */
.profile-header {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 16px;
    margin-bottom: 24px;
}

.profile-header h2 {
    font-weight: 600;
    font-size: 1.375em;
}

.profile-section {
    margin-bottom: 30px;
}

.profile-section h3 {
    margin-bottom: 16px;
    color: var(--color-primary-fg);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 8px;
    font-weight: 600;
    font-size: 1em;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group.full-width {
    grid-column: span 2;
}

.form-group input:disabled {
    background-color: var(--color-bg);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Values the visitor can read but not change (profile username, bidder number): readonly rather than disabled so
   keyboard and screen-reader users can still reach them. Muted without the opacity, which would fail contrast. */
.form-group input[readonly] {
    background-color: var(--color-bg);
}

.action-bar {
    margin-top: 24px;
    text-align: right;
}

@media (max-width: 600px) {
    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-group.full-width {
        grid-column: span 1;
    }

    .action-bar {
        text-align: center;
    }

    .action-bar .btn-primary,
    .action-bar .btn-secondary {
        width: 100%;
        margin-bottom: 8px;
        margin-right: 0;
    }
}

/* ===== Bidder Association Page ===== */
.info-text {
    margin-bottom: 20px;
    padding: 16px;
    background-color: var(--color-primary-light);
    border-left: 4px solid var(--color-accent);
    color: var(--color-text);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.password-toggle-wrap {
    position: relative;
}

.password-toggle-wrap input {
    padding-right: 44px;
}

.toggle-visibility {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-secondary);
    padding: 4px;
    display: flex;
    align-items: center;
}

.toggle-visibility:hover,
.toggle-visibility:focus-visible {
    color: var(--color-primary-fg);
}

.toggle-visibility .material-icons {
    font-size: 1.25em;
}

/* ===== Tax Forms Page ===== */
.forms-header {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 16px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.forms-header h2 {
    font-weight: 600;
    font-size: 1.375em;
}

.btn-download {
    background: none;
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.75em;
    font-family: var(--font-family), sans-serif;
    padding: 3px 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: var(--transition);
    white-space: nowrap;
    text-decoration: none;
}

.btn-download:hover {
    background-color: var(--color-accent);
    color: var(--color-text-inverse);
}

.btn-download .material-icons {
    font-size: 0.9375em;
}

.year-item {
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: background-color 0.2s;
}

.year-item:hover {
    background-color: var(--color-row-hover);
}

.year-label {
    font-weight: 500;
    font-size: 0.875em;
}

.empty-forms {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-secondary);
}

.empty-forms .material-icons {
    color: var(--color-border);
}

/* ===== Privacy Policy Page ===== */
.policy-container h1 {
    color: var(--color-primary-fg);
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 12px;
    margin-bottom: 24px;
    font-weight: 600;
}

.policy-container h2 {
    color: var(--color-text);
    margin-top: 24px;
    margin-bottom: 10px;
    font-size: 1.125em;
    font-weight: 600;
    border-left: 3px solid var(--color-accent);
    padding-left: 12px;
}

.policy-container p {
    margin-bottom: 15px;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.policy-container ul {
    margin-bottom: 15px;
    padding-left: 20px;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.policy-container a {
    color: var(--color-accent);
    text-decoration: underline;
}

.policy-container a:hover {
    color: var(--color-accent-hover);
}

/* ===== Terms of Use Page ===== */
.terms-container h1 {
    color: var(--color-primary-fg);
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 12px;
    margin-bottom: 24px;
    font-weight: 600;
}

.terms-container h2 {
    color: var(--color-text);
    margin-top: 24px;
    margin-bottom: 10px;
    font-size: 1.125em;
    font-weight: 600;
    border-left: 3px solid var(--color-accent);
    padding-left: 12px;
}

.terms-container p {
    margin-bottom: 15px;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* ===== Error Page ===== */
.error-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.error-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.error-card {
    background: var(--color-surface, #fff);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.07));
    padding: 48px 40px;
    max-width: 520px;
    width: 100%;
    text-align: center;
}

.error-icon {
    font-size: 4em;
    color: var(--color-primary-fg, #1e3a5f);
    background: var(--color-primary-light, #e8f0fe);
    border-radius: 50%;
    padding: 20px;
    display: inline-block;
    margin-bottom: 24px;
}

.error-code {
    font-size: 3.5em;
    font-weight: 700;
    color: var(--color-text-secondary, #64748b);
    margin: 0 0 8px;
    letter-spacing: 2px;
}

.error-title {
    font-size: 1.375em;
    font-weight: 600;
    color: var(--color-text, #1a1a2e);
    margin-bottom: 12px;
}

.error-message {
    font-size: 0.9375em;
    color: var(--color-text-secondary, #64748b);
    line-height: 1.6;
    margin-bottom: 28px;
}

.error-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.error-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    border-radius: var(--radius-sm, 6px);
    font-size: 0.875em;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.2s ease;
    border: none;
    font-family: var(--font-family), sans-serif;
}

.error-btn-primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    color: var(--color-text-inverse);
}

.error-btn-primary:hover {
    filter: brightness(1.1);
}

.error-btn-secondary {
    background: none;
    color: var(--color-accent, #2563eb);
    border: 1px solid var(--color-border);
}

.error-btn-secondary:hover {
    background: var(--color-bg);
}

.error-btn .material-icons {
    font-size: 1.125em;
}

@media (max-width: 480px) {
    .error-card {
        padding: 32px 20px;
    }

    .error-icon {
        font-size: 3em;
        padding: 16px;
    }

    .error-code {
        font-size: 2.75em;
    }

    .error-title {
        font-size: 1.125em;
    }
}

/* ===== Maintenance Page ===== */
.maintenance-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.maintenance-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.maintenance-card {
    background: var(--color-surface, #fff);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.07));
    padding: 48px 40px;
    max-width: 520px;
    width: 100%;
    text-align: center;
}

.maintenance-icon {
    font-size: 4em;
    color: var(--color-primary-fg, #1e3a5f);
    background: var(--color-primary-light, #e8f0fe);
    border-radius: 50%;
    padding: 20px;
    display: inline-block;
    margin-bottom: 24px;
}

.maintenance-title {
    font-size: 1.5em;
    font-weight: 600;
    color: var(--color-text, #1a1a2e);
    margin-bottom: 12px;
}

.maintenance-message {
    font-size: 1em;
    color: var(--color-text-secondary, #64748b);
    line-height: 1.6;
    margin-bottom: 24px;
}

.maintenance-contact {
    font-size: 0.875em;
    color: var(--color-text-secondary, #64748b);
}

.maintenance-contact a {
    color: var(--color-accent, #2563eb);
    text-decoration: none;
}

.maintenance-contact a:hover {
    text-decoration: underline;
}

@media (max-width: 480px) {
    .maintenance-card {
        padding: 32px 20px;
    }

    .maintenance-icon {
        font-size: 3em;
        padding: 16px;
    }

    .maintenance-title {
        font-size: 1.25em;
    }
}


/* Field-level validation errors (WCAG 3.3.1 / 1.4.1). AA red on the page
   background, with a non-color indicator (warning glyph) so the error isn't
   conveyed by color alone. */
.field-error {
    color: var(--color-field-error);
    font-size: 0.85em;
    font-weight: 600;
    margin-top: 4px;
}
/* Content-driven visibility: only show the box and the warning glyph when the
   span actually holds an error message. An empty span stays hidden regardless
   of the `hidden` attribute (which a `display:block` rule would otherwise
   override). */
.field-error:empty {
    display: none;
}
.field-error:not(:empty) {
    display: block;
}
.field-error:not(:empty)::before {
    content: "\26A0  ";
}
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
    border-color: var(--color-field-error);
}

/* Post-submit confirmation block on the forgot-password / forgot-username
   forms, with a link back to login. */
.form-success-message {
    margin-top: 16px;
    text-align: center;
    color: var(--color-text);
}
.form-success-message a {
    color: var(--color-primary-fg);
    font-weight: 600;
}

/* ===== Legal documents (templates/legal_page.html, SSN notice) =====
   The page builder's global reset (* { margin: 0; padding: 0 }) strips list
   indentation and paragraph spacing, which left the bullets hanging outside
   the text column. Restore normal document spacing for the fragments. */
.legal-doc h1 {
    font-size: 1.5em;
    margin: 0 0 12px;
}

.legal-doc h2 {
    font-size: 1.15em;
    margin: 24px 0 8px;
}

.legal-doc h3 {
    font-size: 1em;
    margin: 18px 0 6px;
}

.legal-doc p {
    margin: 0 0 12px;
}

.legal-doc ul,
.legal-doc ol {
    margin: 0 0 12px;
    padding-left: 1.5em;
}

.legal-doc li {
    margin-bottom: 6px;
}

/* A URL written out as link text (https://.../accessibility) has no break points: let it wrap rather than push
   the page sideways at 320px (privacy / assistant were 387px wide, WCAG 1.4.10). */
.legal-doc a {
    overflow-wrap: anywhere;
}

/* WCAG 1.4.1: a link inside running text must not be told apart by color alone. The global `a` rule removes the
   underline; links in paragraphs, list items and definitions in the page body get it back. Styled links (buttons,
   cards, .links rows) carry a class and keep their own look. */
:where(main) :where(p, li, dd) a:not([class]) {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* WCAG 2.2 2.5.8 target size: small action controls are at least 24x24 CSS px (the same minimum the checkboxes
   and radios got). Measured below it in the 2026-09-27 review: CSV/Excel 58-64x23, cart Delete / Empty Cart
   21-23 high, the parcel map pin 21x21, the notice close 12x18, the Total Due fee buttons 17 high. */
button.button-icon,
.btn-remove,
.btn-cert-map,
.system-message-close,
.total-due-link {
    min-height: 24px;
    min-width: 24px;
}
.btn-cert-map,
.system-message-close,
.total-due-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Certificate Analytics: nothing moves when the figures arrive (layout shift was 0.127). The short spinner left the
   footer in view and the ~11 s later content pushed it out; keep the loading area tall enough that the footer
   starts below the fold, and keep #ca-status's line so its "Analytics for N certificates." pushes nothing down. */
#ca-loading {
    min-height: 70vh;
}
#ca-status {
    min-height: 1.5em;
}

/* Parcel detail: the bill's parts (address rows, year buttons, amount due) fill in when the data arrives, and
   the tax tables below them moved down 110 px as they did (layout shift 0.075). Until parcel_detail.js has drawn
   it, the content keeps its space but stays invisible, and the container is tall enough to keep the footer
   below the fold; then it is revealed at once. */
#main-container.pd-loading {
    min-height: 70vh;
}
#main-container.pd-loading > *:not(h1) {
    visibility: hidden;
}

/* Request Installment Plan: City / State / ZIP on one line, stacked on a phone. */
.installment-address-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 12px;
}
@media (max-width: 480px) {
    .installment-address-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* The county notice on the search page, collapsed after a search (main_search.js collapseSystemMessage). The
   collapsed body's mask makes it a stacking context painted after the close button, so it covered the x and took
   its clicks; keep the button on top and the text out from under it. */
.system-message-close {
    z-index: 1;
}
.system-message-body {
    padding-right: 24px;
}
.system-message-card.collapsed .system-message-body {
    max-height: 3em;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
    mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.system-message-toggle {
    margin-top: 4px;
    min-height: 24px;
    padding: 2px 0;
    background: none;
    border: none;
    color: inherit;
    font-size: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

/* Cart: "Pay by phone" line under the payment method cards (cart.html, apex WEBSITE_PAY_BY_PHONE). */
.pay-by-phone {
    margin: 14px 0 0;
    text-align: center;
    font-size: 1em;
}

.pay-by-phone .material-icons {
    font-size: 1.1em;
    vertical-align: -0.15em;
}

.pay-by-phone a {
    font-weight: 600;
    white-space: nowrap;
}

.checkout-hint {
    margin-top: 6px;
    font-size: 0.8125em;
    color: var(--color-text-secondary);
    text-align: center;
}

/* ── Invoices (apex Finance > Invoices): /invoices lookup and /invoice/<token>/ ── */
.invoice-lookup-card {
    max-width: 560px;
    margin-top: 32px;
}

.invoice-lookup-intro {
    text-align: center;
    margin-bottom: 20px;
}

.invoice-lookup-intro p {
    text-align: left;
    line-height: 1.55;
}

.invoice-lookup-icon {
    font-size: 3em;
    color: var(--color-primary-fg);
    background: var(--color-primary-light);
    border-radius: 50%;
    padding: 16px;
}

.invoice-lookup-note {
    font-size: 0.875em;
    color: var(--color-text-secondary);
}

.invoice-lookup-error {
    margin-bottom: 16px;
    padding: 12px 16px;
    font-size: 0.9375em;
    line-height: 1.5;
    color: var(--color-field-error);
    border: 1px solid var(--color-field-error);
    border-radius: var(--radius-sm);
}

.field-hint {
    display: block;
    margin-top: 4px;
    font-size: 0.8125em;
    color: var(--color-text-secondary);
}

.invoice-card {
    max-width: 760px;
}

.invoice-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.invoice-heading .invoice-title {
    text-align: left;
    margin-bottom: 2px;
}

.invoice-subtitle {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.9375em;
}

.invoice-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.8125em;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border: 1px solid currentColor;
}

.invoice-status-due {
    color: var(--color-primary-fg);
}

.invoice-status-paid {
    color: var(--color-success-fg);
}

.invoice-status-void {
    color: var(--color-text-secondary);
}

.invoice-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px 24px;
    margin: 0 0 20px;
    padding: 14px 16px;
    background: var(--color-bg);
    border-radius: var(--radius-sm);
}

.invoice-meta dt {
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
}

.invoice-meta dd {
    margin: 2px 0 0;
}

.invoice-meta-wide {
    grid-column: 1 / -1;
}

.invoice-lines {
    width: 100%;
    border-collapse: collapse;
}

.invoice-lines th,
.invoice-lines td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}

.invoice-lines thead th {
    font-size: 0.8125em;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.invoice-lines .invoice-num {
    text-align: right;
    white-space: nowrap;
}

.invoice-lines tfoot th,
.invoice-lines tfoot td {
    border-bottom: none;
    padding-top: 12px;
}

.invoice-total-label {
    text-align: right;
}

.invoice-total {
    font-size: 1.375em;
    font-weight: 700;
    color: var(--color-primary-fg);
}

.invoice-message {
    margin: 16px 0 0;
    padding: 12px 16px;
    border-left: 4px solid var(--color-primary);
    background: var(--color-bg);
    line-height: 1.5;
}

.invoice-pay {
    margin-top: 24px;
    text-align: center;
}

.invoice-pay-btn {
    width: auto;
    min-width: 260px;
    padding: 12px 28px;
    font-size: 1.0625em;
}

.invoice-pay-test-btn {
    display: inline-block;
    width: auto;
    margin-top: 10px;
}

.invoice-note {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 24px;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    line-height: 1.5;
}

.invoice-note p {
    margin: 0;
}

.invoice-note .material-icons {
    flex: none;
}

.invoice-note-paid {
    border-color: var(--color-success);
    color: var(--color-text);
}

.invoice-note-paid .material-icons {
    color: var(--color-success-fg);
}

.invoice-note-void .material-icons,
.invoice-note-info .material-icons {
    color: var(--color-text-secondary);
}

@media (max-width: 600px) {
    .invoice-lines thead th:nth-child(3),
    .invoice-lines td:nth-child(3) {
        display: none;
    }

    .invoice-total-label {
        text-align: left;
    }
}

/* The invoice and dealer pages' footer links are sentences, not labels: let them wrap on a phone
   (nowrap pushed the dealer page to 376px at a 320px viewport, adatool audit 192, WCAG 1.4.10) */
.invoice-lookup-card .links a,
.invoice-card .links a,
.dealer-card .links a {
    white-space: normal;
    text-align: center;
}

/* Invoice PIN field: six digits, spaced so they are easy to check against the invoice */
.invoice-pin-input {
    max-width: 12em;
    letter-spacing: 0.3em;
    font-variant-numeric: tabular-nums;
}

/* /invoices/help */
.invoice-help-card {
    max-width: 760px;
    margin-top: 24px;
    line-height: 1.55;
}

.invoice-help-card h2 {
    font-size: 1.15em;
    margin: 22px 0 6px;
}

.invoice-help-card ul {
    padding-left: 1.3em;
}

.invoice-help-card li {
    margin-bottom: 6px;
}

.invoice-office {
    font-style: normal;
    line-height: 1.6;
}

/* -- Dealer Account (apex Dealer Escrow): /dealer_account.html -- */
/* WCAG 2.5.8: alone on its line it has no inline-text exception, and the line box was 20 px. */
.dealer-register-link a {
    display: inline-block;
    min-height: 24px;
    line-height: 24px;
}

.dealer-card {
    max-width: 900px;
}

.dealer-intro {
    line-height: 1.55;
    margin-bottom: 16px;
}

.dealer-login-btn {
    text-decoration: none;
    display: inline-block;
    margin-top: 12px;
    width: auto;
    padding: 10px 24px;
}

.dealer-section-title {
    font-size: 1.125em;
    margin: 24px 0 8px;
}

.dealer-muted {
    color: var(--color-text-secondary);
    font-size: 0.875em;
}

/* The receipts charged against a batch (a <details> under the batch number) */
.dealer-batch-receipts {
    margin-top: 4px;
    font-size: 0.875em;
}

.dealer-batch-receipts summary {
    cursor: pointer;
    color: var(--color-accent);
}

.dealer-batch-receipts ul {
    margin: 4px 0 0;
    padding-left: 18px;
}

.dealer-balance {
    font-size: 1.25em;
    font-weight: 700;
}

.dealer-low {
    color: var(--color-field-error);
}

.dealer-picker,
.dealer-statements {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 8px 0 16px;
}

.dealer-picker select,
.dealer-statements select {
    min-width: 200px;
}

.dealer-statements .btn-secondary {
    text-decoration: none;
    display: inline-block;
    padding: 8px 16px;
}

.dealer-add-funds {
    max-width: 420px;
}

/* Announce a drop-off (a portal user tells the office work is coming) */
.dealer-batch-form {
    max-width: 420px;
}

.dealer-subsection-title {
    font-size: 1em;
    margin: 16px 0 6px;
}

.dealer-batch-cancel {
    background: none;
    border: none;
    padding: 2px 0;
    color: var(--color-accent);
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
}

.dealer-batch-cancel:hover {
    color: var(--color-accent-hover);
}

.dealer-table-wrap {
    overflow-x: auto;
}

.dealer-contacts,
.dealer-pending-list {
    margin: 4px 0 8px 20px;
}

.dealer-link-form {
    max-width: 480px;
    margin-top: 12px;
}

.dealer-link-more {
    margin-top: 24px;
}

.dealer-link-more summary {
    cursor: pointer;
    font-weight: 600;
}

/* Cart: Partial Payment Plan lines (cart.js openScheduleModal) */
.btn-schedule {
    background: none;
    border: 1px solid var(--color-primary);
    color: var(--color-primary-fg);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.75em;
    font-family: var(--font-family), sans-serif;
    padding: 3px 8px;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.btn-schedule:hover {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
}

.btn-schedule .material-icons {
    font-size: 1.2em;
}

.schedule-modal {
    max-width: 480px;
    text-align: left;
}

.schedule-options {
    border: 0;
    margin: 0 0 12px;
    padding: 0;
}

.schedule-option-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
}

.schedule-option {
    flex: 1;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
}

/* Parcel detail: a bill on a Partial Payment Plan (parcel_detail.js loadPlanSchedule) */
.plan-box {
    margin: 10px auto 4px;
    max-width: 460px;
    text-align: center;
}

.plan-line {
    margin-bottom: 8px;
}

.plan-choice-row {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.plan-choice-row select {
    max-width: 100%;
    padding: 4px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-family), sans-serif;
}