/* ===== 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;
}

/* 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);
    color: var(--color-text-inverse);
}

.btn-confirm:hover,
.btn-confirm:focus-visible {
    background-color: var(--color-danger-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;
}

#search-results li {
    background: var(--color-card, var(--color-surface));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

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

#search-results li: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-secondary);
    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;
}

#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 {
    max-height: 100px;
    max-width: 300px;
    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,
    #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);
}

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

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

.tax-year-button.year-unpaid.active {
    background-color: var(--color-danger);
    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;
}
#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 {
    font-size: 1em;
    font-weight: 600;
    margin-top: 10px;
    color: var(--color-hold-text);
    display: none;
}

.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);
    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;
}

#add-to-portfolio,
#manage-alerts,
#letter-btn,
#request-installment-btn {
    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;
}

#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);
}

/* ===== 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);
}

.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);
    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);
}

.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);
    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);
    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);
    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);
    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);
    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);
    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: 0.9375em;
    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.75em;
    color: var(--color-text-secondary);
    font-weight: 500;
    white-space: nowrap;
    width: 130px;
}

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

.cert-info-section {
    font-weight: 600;
    font-size: 0.75em;
    color: var(--color-primary);
    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.75em;
    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.75em;
}

.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.75em;
}

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

.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.6875em;
}

/* 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: #fff;
    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;
}

.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;
}

.ca-toggle-btn[aria-pressed="true"] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    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;
    }
}

/* 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.8125em;
    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.8125em;
    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.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-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;
    font-size: 0.75em;
}

.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.75em;
    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;
    accent-color: var(--color-primary);
}

#tda-select-all {
    width: 24px;
    height: 24px;
    cursor: pointer;
    accent-color: var(--color-primary);
}

/* 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);
}

.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);
    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) !important;
}

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

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

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

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

.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);
    color: var(--color-text-inverse);
}

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

/* ===== FAQ Page ===== */
.faq-container h1 {
    color: var(--color-primary);
    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;
}

.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;
}

.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, #3b82f6);
}

.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, #3b82f6);
    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);
    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);
    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);
}

.contact-card-icon {
    font-size: 2em;
    color: var(--color-primary);
    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);
    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);
}

.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);
    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);
    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, #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, #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: #b91c1c;
    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: #b91c1c;
}

/* 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);
    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;
}

/* 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;
}

/* The county notice on the search page, collapsed after a search (main_search.js collapseSystemMessage). */
.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;
}

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