/* ===================================================================
   Allen County Assessors Viewer — Custom Styles
   Matches allencounty.in.gov official branding
   Colors: Dark Teal #004849, Primary #005E62, Light #008D96
   Accent: Orange/Brown #B65F27
   Typography: Poppins (headings), Arial (body)
   =================================================================== */

/* ── Brand Colors & Tokens ────────────────────────────────────────── */
:root {
    /* Official Allen County palette from allencounty.in.gov */
    --ac-dark: #004849;
    --ac-primary: #005E62;
    --ac-primary-light: #008D96;
    --ac-accent: #B65F27;
    --ac-accent-hover: #d4712f;
    --ac-background: #f7f8f9;
    --ac-surface: #ffffff;
    --ac-text: #14140C;
    --ac-text-secondary: #555548;
    --ac-text-muted: #8a8a7e;
    --ac-border: #d9ddd6;
    --ac-highlight: rgba(0, 94, 98, 0.1);
    --ac-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08);
    --ac-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);
    --ac-shadow-lg: 0 6px 24px rgba(0, 0, 0, 0.15);
    --ac-radius: 6px;
    --ac-radius-lg: 10px;
    --ac-transition: 0.2s ease;

    /* Override Calcite brand tokens */
    --calcite-color-brand: var(--ac-primary);
    --calcite-color-brand-hover: var(--ac-primary-light);
    --calcite-color-brand-press: var(--ac-dark);
    --calcite-font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

/* ── Global ───────────────────────────────────────────────────────── */
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    background: var(--ac-background);
    color: var(--ac-text);
    overflow: hidden;
}

calcite-shell {
    --calcite-shell-border-color: transparent;
}

.hidden {
    display: none !important;
}

/* Utility for screen-reader-only content */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ── Header ───────────────────────────────────────────────────────── */
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    color: var(--ac-text);
    padding: 0 24px;
    height: 100px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    z-index: 10;
    position: relative;
    border-bottom: 3px solid var(--ac-primary);
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 18px;
}

.header-logo {
    height: 60px;
    width: auto;
}

.header-titles h1 {
    font-family: "Poppins", Arial, sans-serif;
    font-size: 24px;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
    letter-spacing: 0.2px;
    color: var(--ac-dark);
}

.header-titles h2 {
    font-size: 13px;
    font-weight: 400;
    margin: 2px 0 0;
    letter-spacing: 0.3px;
    color: var(--ac-text-secondary);
}

/* Header action buttons */
.header-actions calcite-action-bar {
    --calcite-action-background-color: transparent;
    --calcite-color-foreground-1: transparent;
    --calcite-color-text-1: var(--ac-primary);
    background: transparent;
}

.header-actions calcite-action {
    --calcite-action-background-color: transparent;
    --calcite-color-foreground-1: transparent;
    --calcite-color-text-1: var(--ac-primary);
    --calcite-action-indicator-color: var(--ac-primary);
    color: var(--ac-primary);
    transition: all var(--ac-transition);
    width: 64px;
    height: 64px;
    --calcite-font-size-0: 24px;
}

.header-actions calcite-action:hover {
    background: var(--ac-highlight);
    border-radius: 4px;
    --calcite-color-text-1: var(--ac-dark);
}

/* ── Map View ─────────────────────────────────────────────────────── */
#viewDiv {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    position: relative;
}

.esri-ui-corner .esri-component {
    border-radius: var(--ac-radius);
    box-shadow: var(--ac-shadow);
}

/* Push default top-left Esri widgets (zoom) below floating search */
.esri-ui-top-left {
    top: 80px !important;
}

@media (max-width: 768px) {
    .esri-ui-top-left {
        top: 72px !important;
    }
}

/* ── Floating Search Overlay ─────────────────────────────────────── */
.floating-search {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 380px;
    max-width: calc(100vw - 32px);
    z-index: 50;
    pointer-events: none;
}

.floating-search > * {
    pointer-events: auto;
}

.floating-search-bar {
    display: flex;
    align-items: stretch;
    gap: 6px;
    background: #ffffff;
    border-radius: 28px 4px 4px 28px;
    box-shadow: var(--ac-shadow-lg);
    padding: 4px;
}

.floating-search-bar .search-box {
    flex: 1;
    padding: 0;
    border-bottom: none;
    background: transparent;
}

.floating-search-bar .advanced-toggle {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50% !important;
    --calcite-color-brand: var(--ac-accent);
    --calcite-color-brand-hover: var(--ac-accent-hover);
    align-self: center;
}

.floating-search-bar .advanced-toggle::part(button) {
    border-radius: 50% !important;
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
}

.floating-results {
    margin-top: 8px;
    background: #ffffff;
    border-radius: var(--ac-radius);
    box-shadow: var(--ac-shadow-lg);
    max-height: calc(100vh - 180px);
    overflow-y: auto;
}

.floating-advanced {
    margin-top: 8px;
    background: #ffffff;
    border-radius: var(--ac-radius);
    box-shadow: var(--ac-shadow-lg);
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    --calcite-block-header-background: transparent;
}

/* Layers and Legend panels.
   Docked to the left, under the floating search and the zoom buttons, so they
   never sit under the Property Details pane and need no offset tied to its
   width. Anchored top and bottom so the panel sizes itself to the window and
   stops short of the scale bar and basemap switcher. */
.floating-layers {
    position: absolute;
    top: 180px;
    left: 16px;
    bottom: 80px;
    /* calcite-panel sets its own height, which over-constrains the box and
       makes `bottom` be ignored — without this the panel runs past the
       bottom of the window and over the scale bar */
    height: auto;
    width: 360px;
    max-width: calc(100vw - 32px);
    z-index: 55;
    box-shadow: var(--ac-shadow-lg);
    border-radius: var(--ac-radius);
    overflow: hidden;
}

#btnToggleLayers[active] {
    background: var(--ac-highlight);
    border-radius: 4px;
}

/* ── Select Parcel pill switch ────────────────────────────────────── */
/* .header-actions defaulted to display:block, which stacked the pill above the
   action bar and pushed the tool icons out of the fixed-height header. Lay the
   two out as a row instead. */
.header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.identify-toggle {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--ac-border);
    border-radius: 999px;
    background: var(--ac-surface);
    white-space: nowrap;
    transition: border-color var(--ac-transition), background var(--ac-transition);
}

/* On is the resting state, so the pill carries the accent while active and
   drains to neutral when off — the state reads without parsing the switch. */
.identify-toggle:not(.is-off) {
    border-color: var(--ac-accent);
    background: rgba(182, 95, 39, 0.06);
}

.identify-toggle calcite-switch {
    --calcite-color-brand: var(--ac-accent);
    --calcite-color-brand-hover: var(--ac-accent-hover);
    --calcite-color-brand-press: var(--ac-accent-hover);
}

.identify-toggle-label {
    font-family: "Poppins", Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--ac-accent);
    cursor: pointer;
    user-select: none;
}

.identify-toggle.is-off .identify-toggle-label {
    color: var(--ac-text-muted);
    font-weight: 500;
}

.identify-info {
    --calcite-ui-icon-color: var(--ac-text-muted);
    cursor: help;
    border-radius: 50%;
    transition: color var(--ac-transition);
}

.identify-info:hover,
.identify-info:focus-visible {
    --calcite-ui-icon-color: var(--ac-accent);
}

.identify-info:focus-visible {
    outline: 2px solid var(--ac-accent);
    outline-offset: 2px;
}

.identify-toggle.is-disabled {
    opacity: 0.45;
}

.identify-toggle.is-disabled .identify-toggle-label {
    cursor: not-allowed;
}

/* The header gets crowded on tablets — drop the wording, keep switch + info */
@media (max-width: 1100px) {
    .identify-toggle-label {
        display: none;
    }
}

/* ── Right Panel (Property Details) ──────────────────────────────── */
#rightPanel {
    --calcite-shell-panel-width: 400px;
    --calcite-shell-panel-max-width: 450px;
}

#rightPanel:not([collapsed]) {
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.12);
}

/* ── Bottom Results Panel ────────────────────────────────────────── */
.bottom-results-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 300px;
    z-index: 100;
    background: #ffffff;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    transition: height 0.3s ease, transform 0.3s ease;
    transform: translateY(0);
}

.bottom-results-panel.hidden {
    transform: translateY(100%);
    pointer-events: none;
}

.bottom-results-panel.collapsed {
    height: 56px;
    overflow: hidden;
}

.sales-table-container {
    height: calc(300px - 56px);
    overflow: auto;
}

.sales-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.sales-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

.sales-table th {
    background: var(--ac-teal, #005E62);
    color: #ffffff;
    padding: 6px 10px;
    text-align: left;
    white-space: nowrap;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sales-table td {
    padding: 5px 10px;
    border-bottom: 1px solid #e8e8e8;
    white-space: nowrap;
}

.sales-table tbody tr:hover {
    background: rgba(0, 94, 98, 0.06);
}

.sales-table tbody tr.selected {
    background: rgba(182, 95, 39, 0.12);
    font-weight: 500;
}

.sales-table .action-cell {
    display: flex;
    gap: 2px;
}

/* ── Search Box ───────────────────────────────────────────────────── */
.search-box {
    padding: 12px;
    position: relative;
    background: #ffffff;
    border-bottom: 1px solid var(--ac-border);
}

/* Native search input (replaces calcite-input to avoid shadow-DOM styling issues) */
.native-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    height: 44px;
    border-radius: 24px;
    border: 1px solid #ccc;
    background: #ffffff;
}

.native-search-icon {
    color: var(--ac-text-secondary);
    flex-shrink: 0;
}

.native-search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 15px;
    color: var(--ac-text);
    padding: 0;
    min-width: 0;
}

.native-search input::placeholder {
    color: var(--ac-text-secondary);
}

.native-search-clear {
    display: none;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: var(--ac-text-secondary);
    border-radius: 50%;
    flex-shrink: 0;
}

.native-search-clear:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--ac-text);
}

.native-search.has-value .native-search-clear {
    display: inline-flex;
}

.search-suggestions {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius);
    box-shadow: var(--ac-shadow-lg);
    z-index: 100;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
}

.search-suggestion-item {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid #f0f0f0;
    transition: background var(--ac-transition);
    color: var(--ac-text);
}

/* Both dropdowns: suggestion on the left, its source on the right */
.search-suggestion-item,
.mobile-search-suggestions .suggestion-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.suggestion-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Secondary rather than muted text: the muted token is 3.49:1 on white and
   fails WCAG AA; this is 7.56:1. */
.suggestion-kind {
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--ac-text-secondary);
}

.search-suggestion-item:hover {
    background: var(--ac-highlight);
    color: var(--ac-primary);
}

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

.search-results {
    max-height: calc(100vh - 150px);
    overflow-y: auto;
}

/* ── COMPS Controls ───────────────────────────────────────────────── */
#compsBlock {
    --calcite-block-header-background: transparent;
    overflow-x: hidden;
    max-width: 100%;
}

.comps-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
    overflow: hidden;
    max-width: 100%;
}

.date-range,
.price-range {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    max-width: 100%;
}

.date-range>*,
.price-range>* {
    min-width: 0;
    flex: 1 1 auto;
}

.range-sep {
    font-size: 12px;
    color: var(--ac-text-muted);
    flex-shrink: 0;
    flex: 0 0 auto;
}

.comps-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

/* Override the COMPS search button to use the accent orange */
#btnCompsSearch {
    --calcite-color-brand: var(--ac-accent);
    --calcite-color-brand-hover: var(--ac-accent-hover);
    --calcite-color-brand-press: #9e5220;
    font-weight: 600;
}

/* ── PIN Banner ───────────────────────────────────────────────────── */
.pin-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--ac-primary);
    color: white;
    font-family: "Poppins", Arial, sans-serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.5px;
}

.pin-banner calcite-icon {
    --calcite-ui-icon-color: rgba(255, 255, 255, 0.8);
}

/* ── Detail Panels ────────────────────────────────────────────────── */
.detail-section {
    padding: 8px 0;
}

/* Addresses on parcel list */
.addresses-on-parcel .address-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    font-size: 13px;
    border-bottom: 1px solid #eef0ec;
    color: var(--ac-text);
}

.addresses-on-parcel .address-item:last-child {
    border-bottom: none;
}

.detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

/* `th` is included for row-header cells (<th scope="row">), which carry the
   label for the value beside them. Without the explicit left alignment they
   would centre, since that is the browser default for th. */
.detail-table td,
.detail-table th {
    padding: 7px 10px;
    border-bottom: 1px solid #eef0ec;
    vertical-align: top;
    text-align: left;
}

.detail-table .label {
    font-weight: 600;
    color: var(--ac-text-secondary);
    white-space: nowrap;
    width: 40%;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.detail-table td:last-child {
    color: var(--ac-text);
    font-weight: 400;
    word-break: break-word;
}

.value-highlight {
    font-weight: 700 !important;
    color: var(--ac-primary) !important;
    font-size: 15px;
}

.legal-desc {
    font-size: 12px;
    line-height: 1.7;
    color: var(--ac-text-secondary);
    padding: 10px 12px;
    background: #f5f6f3;
    border-radius: var(--ac-radius);
    border-left: 3px solid var(--ac-primary-light);
    margin: 4px 0;
}

.assessment-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
    padding: 0 4px;
}

/* ── Details Panel Tabs ───────────────────────────────────────────── */
/* A 5-column grid, not calcite-tabs. calcite-tab-nav scrolls its strip and
   grows chevron buttons once the heads overflow; a grid of equal fractions
   cannot overflow, so all five stay visible at every panel width. */
.details-tabs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: var(--ac-surface);
    border-bottom: 1px solid var(--ac-border);
    position: sticky;
    top: 0;
    z-index: 3;
}

.details-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    /* min-width:0 lets a grid child shrink below its content width, which is
       what keeps long labels from forcing the strip wider than the panel. */
    min-width: 0;
    padding: 9px 2px 7px;
    border: none;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--ac-text-secondary);
    font-family: "Poppins", Arial, sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: color var(--ac-transition), background var(--ac-transition),
        border-color var(--ac-transition);
}

.details-tab-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.details-tab calcite-icon {
    --calcite-ui-icon-color: currentColor;
}

.details-tab:hover {
    color: var(--ac-primary);
    background: var(--ac-highlight);
}

.details-tab:focus-visible {
    outline: 2px solid var(--ac-accent);
    outline-offset: -2px;
}

.details-tab.active {
    color: var(--ac-primary);
    font-weight: 600;
    border-bottom-color: var(--ac-accent);
}

.details-panels {
    padding-bottom: 24px;
}

.details-panel[hidden] {
    display: none;
}

/* Very narrow panels (small phones): drop the labels rather than let the
   heads shrink into unreadable slivers. The icon and title tooltip remain. */
@media (max-width: 360px) {
    .details-tab-label {
        display: none;
    }

    .details-tab {
        padding: 11px 2px;
    }
}

/* Tab styling — now used only by the Help & Info modal */
calcite-tab-nav {
    --calcite-color-brand: var(--ac-primary);
}

calcite-tab-title[selected] {
    --calcite-color-brand: var(--ac-primary);
}

/* Tab scroll chevrons — orange accent background to pop */
calcite-tab-nav::part(scroll-button),
calcite-tab-nav::part(scroll-backward-button),
calcite-tab-nav::part(scroll-forward-button),
calcite-tab-nav::part(scroll-button-start),
calcite-tab-nav::part(scroll-button-end) {
    background-color: var(--ac-accent) !important;
    --calcite-color-foreground-1: var(--ac-accent) !important;
    --calcite-color-foreground-2: var(--ac-accent-hover) !important;
    --calcite-color-text-1: #ffffff !important;
    --calcite-color-text-3: #ffffff !important;
    --calcite-ui-icon-color: #ffffff !important;
    color: #ffffff !important;
}

/* ── Vote Centers & Sample Ballots ────────────────────────────────── */
.vote-centers {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 10px;
}

.vote-center {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--ac-border);
}

.vote-center:last-child {
    border-bottom: none;
}

.vote-center-name {
    font-weight: 600;
    color: var(--ac-text);
    line-height: 1.3;
}

.vote-center-addr {
    color: var(--ac-text-secondary);
    font-size: 13px;
}

.vote-center-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 3px;
}

.vote-chip {
    font-size: 11px;
    line-height: 1.5;
    padding: 1px 7px;
    border-radius: 10px;
    background: var(--ac-highlight);
    color: var(--ac-primary);
    white-space: nowrap;
}

/* First chip is the distance — the reason this list is ordered the way it
   is, so give it the accent rather than the flat brand tint. */
.vote-chip:first-child {
    background: var(--ac-accent);
    color: #ffffff;
    font-weight: 600;
}

.vote-center-empty {
    padding: 10px 4px;
    color: var(--ac-text-muted);
    font-size: 13px;
}

/* Inline link inside a calcite-notice message. The message is slotted light
   DOM, so it takes ordinary CSS — no shadow-part needed. */
.notice-link {
    color: var(--ac-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.notice-link:hover,
.notice-link:focus-visible {
    color: var(--ac-accent);
}

.sample-ballots {
    margin-top: 10px;
}

.ballot-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--ac-text-muted);
    margin-bottom: 6px;
}

.ballot-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ballot-link {
    display: inline-block;
    padding: 4px 11px;
    border: 1px solid var(--ac-primary);
    border-radius: var(--ac-radius);
    color: var(--ac-primary);
    background: var(--ac-surface);
    font-size: 12.5px;
    text-decoration: none;
    transition: background var(--ac-transition), color var(--ac-transition);
}

.ballot-link:hover,
.ballot-link:focus-visible {
    background: var(--ac-primary);
    color: #ffffff;
}

/* ── Image Gallery ────────────────────────────────────────────────── */
.image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    padding: 8px;
}

.image-gallery img {
    width: 100%;
    height: auto;
    border-radius: var(--ac-radius);
    cursor: pointer;
    transition: transform var(--ac-transition), box-shadow var(--ac-transition);
    box-shadow: var(--ac-shadow-sm);
}

.image-gallery img:hover {
    transform: scale(1.03);
    box-shadow: var(--ac-shadow);
}

/* ── Sales Table ──────────────────────────────────────────────────── */
.sales-table-container {
    overflow: auto;
    max-height: 100%;
}

.sales-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    min-width: 1200px;
}

.sales-table thead {
    position: sticky;
    top: 0;
    z-index: 5;
}

.sales-table th {
    background: var(--ac-dark);
    color: white;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 8px;
    text-align: left;
    white-space: nowrap;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.sales-table th:last-child {
    border-right: none;
}

/* ── Sortable headers ── */
.sales-table th[data-sort-type] {
    cursor: pointer;
    user-select: none;
    /* room for the indicator so the label never shifts when it appears */
    padding-right: 20px;
    position: relative;
    transition: background var(--ac-transition);
}

.sales-table th[data-sort-type]:hover {
    background: var(--ac-primary);
}

.sales-table th[data-sort-type]:focus-visible {
    outline: 2px solid var(--ac-accent);
    outline-offset: -2px;
}

/* Neutral hint on hover, solid arrow once a column is active */
.sales-table th[data-sort-type]::after {
    content: "";
    position: absolute;
    right: 7px;
    top: 50%;
    margin-top: -2px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    opacity: 0;
    transition: opacity var(--ac-transition);
}

.sales-table th[data-sort-type]:hover::after {
    opacity: 0.45;
    border-top: 5px solid #ffffff;
}

.sales-table th.sorted-asc::after {
    opacity: 1;
    border-bottom: 5px solid var(--ac-accent);
    border-top: none;
    margin-top: -3px;
}

.sales-table th.sorted-desc::after {
    opacity: 1;
    border-top: 5px solid var(--ac-accent);
    border-bottom: none;
}

.sales-table th.sorted-asc,
.sales-table th.sorted-desc {
    background: var(--ac-primary);
}

.sales-table td {
    padding: 8px;
    border-bottom: 1px solid #eef0ec;
    white-space: nowrap;
}

.sales-table tbody tr {
    transition: background var(--ac-transition);
    cursor: pointer;
}

.sales-table tbody tr:nth-child(even) {
    background: #fafbf9;
}

.sales-table tbody tr:hover {
    background: var(--ac-highlight);
}

.sales-table tbody tr.selected {
    background: rgba(0, 141, 150, 0.15);
    font-weight: 500;
}

.sales-table .action-cell {
    display: flex;
    gap: 4px;
}

/* ── Details Pane Edge Toggle (desktop) ───────────────────────────── */
/* Width of the open right pane (calcite width-scale="l"). The handle rides
   just inside that edge when the pane is open, and against the window edge
   when it is hidden. */
:root {
    --ac-details-width: 416px;
}

.details-edge-toggle {
    display: none;
    /* revealed at >1024px once a parcel has been loaded */
    position: fixed;
    top: 50%;
    right: var(--ac-details-width);
    transform: translateY(-50%);
    z-index: 40;
    align-items: center;
    gap: 4px;
    writing-mode: vertical-rl;
    padding: 14px 6px;
    border: none;
    border-radius: 8px 0 0 8px;
    background: var(--ac-primary);
    color: #ffffff;
    font-family: "Poppins", Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
    cursor: pointer;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.18);
    transition: right 0.25s ease, background var(--ac-transition);
}

.details-edge-toggle:hover {
    background: var(--ac-primary-light);
}

.details-edge-toggle:focus-visible {
    outline: 2px solid var(--ac-accent);
    outline-offset: 2px;
}

/* Pane hidden: sit against the window edge instead */
.details-edge-toggle.panel-hidden {
    right: 0;
}

.details-edge-toggle calcite-icon {
    /* the icon is rotated by writing-mode; keep it upright */
    writing-mode: horizontal-tb;
}

@media (min-width: 1025px) {
    .details-edge-toggle:not(.hidden) {
        display: flex;
    }
}

/* ── Clear Map Results ────────────────────────────────────────────── */
/* Positioned by the MapView UI (top-right), so no absolute placement here —
   only the drop shadow that lifts it off the imagery. */
.map-clear-bar {
    box-shadow: var(--ac-shadow);
    border-radius: var(--ac-radius);
    overflow: hidden;
}

.map-clear-bar calcite-button {
    --calcite-color-danger: var(--ac-accent);
    --calcite-color-danger-hover: var(--ac-accent-hover);
    --calcite-color-danger-press: var(--ac-accent-hover);
}

/* At these widths the floating search spans the full map, so the top-right
   slot sits underneath it. Drop the button clear of the search instead. */
@media (max-width: 1024px) {
    .map-clear-bar {
        margin-top: 60px;
    }
}

/* ── Basemap Switcher ─────────────────────────────────────────────── */
.basemap-switcher {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}

.pillbox {
    position: relative;
    display: inline-flex;
    background: var(--ac-surface);
    padding: 4px;
    border-radius: 24px;
    box-shadow: var(--ac-shadow-lg);
    border: 1px solid rgba(0, 0, 0, 0.06);
    gap: 0;
}

.pill-indicator {
    position: absolute;
    top: 4px;
    left: 0;
    height: calc(100% - 8px);
    background: var(--ac-accent);
    border-radius: 20px;
    transition: transform 0.3s ease, width 0.3s ease;
    z-index: 0;
}

.pill-btn {
    position: relative;
    z-index: 1;
    border: none;
    background: transparent;
    padding: 6px 18px;
    font-size: 13px;
    font-family: inherit;
    font-weight: 500;
    color: var(--ac-text);
    cursor: pointer;
    border-radius: 20px;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.pill-btn:hover:not(.active) {
    background: rgba(0, 0, 0, 0.05);
}

.pill-btn.active {
    color: #ffffff;
}

/* ── Historical Slider ────────────────────────────────────────────── */
/* ── Aerial Timeline Widget ──────────────────────────────────────── */
.aerial-timeline {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    background: var(--ac-surface);
    padding: 14px 24px 10px;
    border-radius: var(--ac-radius-lg);
    box-shadow: var(--ac-shadow-lg);
    border: 1px solid rgba(0, 0, 0, 0.06);
    min-width: 600px;
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.aerial-timeline.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(20px);
}

.timeline-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.timeline-title {
    font-family: "Poppins", Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--ac-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.timeline-year {
    font-family: "Poppins", Arial, sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: var(--ac-accent);
    margin-left: auto;
}

.timeline-close {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--ac-text-muted);
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.2s;
}

.timeline-close:hover {
    color: var(--ac-text);
}

.timeline-track-wrapper {
    position: relative;
    padding-bottom: 22px;
}

/* Custom range slider */
.timeline-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right, var(--ac-accent) 0%, var(--ac-accent) var(--fill, 100%), #ddd var(--fill, 100%), #ddd 100%);
    outline: none;
    cursor: pointer;
}

.timeline-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ac-accent);
    border: 3px solid #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
    cursor: grab;
    transition: transform 0.15s ease;
}

.timeline-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.timeline-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.1);
}

.timeline-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ac-accent);
    border: 3px solid #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
    cursor: grab;
}

.timeline-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 10px;
    color: var(--ac-text-muted);
    user-select: none;
}

.timeline-labels span {
    text-align: center;
    flex: 1;
    cursor: pointer;
    transition: color 0.2s;
}

.timeline-labels span:hover {
    color: var(--ac-accent);
}

.timeline-labels span.active {
    color: var(--ac-accent);
    font-weight: 700;
}

/* ── Tool Panels ──────────────────────────────────────────────────── */
.tool-panel {
    position: absolute;
    top: 120px;
    right: 15px;
    z-index: 20;
    background: var(--ac-surface);
    padding: 16px;
    border-radius: var(--ac-radius-lg);
    box-shadow: var(--ac-shadow-lg);
    min-width: 280px;
    max-width: min(520px, calc(100vw - 30px));
    border: 1px solid rgba(0, 0, 0, 0.06);
}

#printPanel {
    top: 170px;
}

#mailingPanel {
    top: 220px;
}

.tool-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.tool-panel-title {
    font-family: "Poppins", Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--ac-text);
    letter-spacing: 0.2px;
}

.mailing-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.mailing-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--ac-text-secondary);
    margin: 8px 0;
}

.mailing-list {
    max-height: 240px;
    overflow: auto;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
}

.mailing-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 10px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.mailing-row:last-child {
    border-bottom: none;
}

.mailing-primary {
    font-weight: 700;
    color: var(--ac-text);
    font-size: 12px;
}

.mailing-secondary {
    font-size: 12px;
    color: var(--ac-text-secondary);
    margin-top: 2px;
    line-height: 1.25;
}

.mailing-empty {
    padding: 12px;
    font-size: 12px;
    color: var(--ac-text-secondary);
}

@media (max-width: 640px) {
    .tools-panel {
        flex-direction: column;
    }

    .tools-col {
        min-width: 0;
    }
}

/* ── Coordinate Display ───────────────────────────────────────────── */
.coord-display {
    position: absolute;
    bottom: 30px;
    right: 15px;
    z-index: 5;
    background: var(--ac-dark);
    color: #ffffff !important;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-family: "Consolas", "Courier New", monospace;
    box-shadow: var(--ac-shadow);
}

.coord-display * {
    color: #ffffff !important;
}

/* ── Disclaimer Modal ─────────────────────────────────────────────── */
#disclaimerDialog {
    --calcite-dialog-scrim-background: rgba(0, 72, 73, 0.6);
}

.disclaimer-content {
    font-size: 13px;
    line-height: 1.7;
    color: var(--ac-text-secondary);
}

.disclaimer-content p {
    margin-bottom: 12px;
}

#disclaimerAccept {
    --calcite-color-brand: var(--ac-accent);
    --calcite-color-brand-hover: var(--ac-accent-hover);
    font-weight: 600;
}

/* ── Calcite Component Overrides ──────────────────────────────────── */
/* Panel headings use Poppins */
calcite-panel {
    --calcite-font-family: Arial, sans-serif;
}

calcite-block {
    --calcite-font-family: Arial, sans-serif;
}

calcite-block[heading] {
    font-family: "Poppins", Arial, sans-serif;
}

/* List items */
calcite-list-item:hover {
    --calcite-color-foreground-2: var(--ac-highlight);
}

/* Notices */
calcite-notice[kind="info"] {
    --calcite-color-status-info: var(--ac-primary-light);
}

/* Loader */
calcite-loader {
    --calcite-color-brand: var(--ac-primary-light);
}

/* ── Help & Info Modal ───────────────────────────────────────────── */
#helpInfoModal {
    --calcite-dialog-size-x: 90vw;
    --calcite-dialog-size-y: 85vh;
}

.help-modal-content {
    padding: 16px 8px;
    min-height: 60vh;
}

.help-section {
    padding: 16px 8px;
    line-height: 1.7;
    color: var(--ac-text);
}

.help-section h3 {
    font-family: "Poppins", Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--ac-primary);
    margin: 0 0 12px;
}

.help-steps {
    padding-left: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 15px;
}

.help-steps li {
    padding: 4px 0;
}

.help-section a {
    color: var(--ac-accent);
    text-decoration: none;
    font-weight: 500;
}

.help-section a:hover {
    text-decoration: underline;
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .header-titles h2 {
        display: none;
    }

    .header-titles h1 {
        font-size: 15px;
    }

    .header-logo {
        height: 28px;
    }

    .app-header {
        padding: 0 10px;
        height: 48px;
    }

    .historical-slider {
        min-width: 280px;
    }

    .basemap-switcher {
        bottom: 20px;
    }

    .aerial-timeline {
        min-width: auto;
        width: calc(100vw - 20px);
        left: 50%;
        transform: translateX(-50%);
        padding: 12px 14px 8px;
        bottom: 60px;
    }

    .floating-search {
        top: 8px;
        left: 8px;
        right: 8px;
        width: auto;
        max-width: none;
    }

    /* ── Collapsible search (phones) ──
       Expanded, the search bar spans the top of the map and hides it. On
       phones it collapses to a single button and expands on demand. */
    .floating-search.collapsed {
        right: auto;
        /* shrink the container too, so it stops covering the map */
        width: auto;
    }

    .floating-search.collapsed .floating-search-bar,
    .floating-search.collapsed .search-results,
    .floating-search.collapsed .floating-advanced {
        display: none;
    }

    .search-expand-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: none;
        border-radius: 50%;
        background: var(--ac-surface);
        color: var(--ac-primary);
        box-shadow: var(--ac-shadow-lg);
        cursor: pointer;
        pointer-events: auto;
    }

    .floating-search:not(.collapsed) .search-expand-btn {
        display: none;
    }

    .search-expand-btn:focus-visible,
    .search-collapse-btn:focus-visible {
        outline: 2px solid var(--ac-accent);
        outline-offset: 2px;
    }

    .search-collapse-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 36px;
        height: 44px;
        border: none;
        background: transparent;
        color: var(--ac-text-secondary);
        cursor: pointer;
        align-self: center;
    }

    .floating-layers {
        /* On phones the search collapses to a button, so the panel can sit
           near the top and use the full width */
        top: 60px;
        bottom: 16px;
        right: 8px;
        width: auto;
        left: 8px;
    }
}

/* Above the phone breakpoint the search is always open, so neither control
   is needed. */
@media (min-width: 769px) {

    .search-expand-btn,
    .search-collapse-btn {
        display: none;
    }
}

@media (max-width: 480px) {
    .header-actions {
        display: none;
    }
}

/* ── Mobile Hamburger Menu ───────────────────────────────────────── */
.mobile-menu-wrapper {
    display: none;
    position: relative;
}

.mobile-menu-btn {
    background: transparent;
    border: none;
    color: var(--ac-primary);
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    transition: background 0.2s ease;
}

.mobile-menu-btn:hover {
    background: var(--ac-highlight);
}

.mobile-menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: var(--ac-surface);
    border-radius: var(--ac-radius-lg);
    box-shadow: var(--ac-shadow-lg);
    border: 1px solid rgba(0, 0, 0, 0.08);
    min-width: 180px;
    overflow: hidden;
    z-index: 50;
}

.mobile-menu-heading {
    padding: 10px 16px 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ac-text-secondary);
}

.mobile-menu-divider {
    height: 1px;
    background: var(--ac-border);
    margin: 4px 12px;
}

.mobile-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: transparent;
    font-family: "Poppins", Arial, sans-serif;
    font-size: 14px;
    color: var(--ac-text);
    cursor: pointer;
    transition: background 0.15s ease;
}

.mobile-menu-item:hover {
    background: var(--ac-highlight);
}

.mobile-menu-item.active {
    background: var(--ac-accent);
    color: #ffffff;
    font-weight: 600;
}

@media (max-width: 1024px) {
    .mobile-menu-wrapper {
        display: block;
    }

    .basemap-switcher {
        display: none !important;
    }
}

/* ── Mobile Floating Search ──────────────────────────────────────── */
.mobile-search-bar {
    position: fixed;
    top: 58px;
    left: 10px;
    right: 10px;
    z-index: 20;
    display: none;
}

.mobile-search-bar.visible {
    display: block;
}

.mobile-search-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border-radius: 28px;
    padding: 8px 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.mobile-search-icon {
    color: var(--ac-text-secondary);
    flex-shrink: 0;
}

.mobile-search-bar input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: "Poppins", Arial, sans-serif;
    font-size: 15px;
    color: var(--ac-text);
    padding: 6px 0;
}

.mobile-search-bar input::placeholder {
    color: var(--ac-text-secondary);
}

.mobile-search-close {
    background: transparent;
    border: none;
    color: var(--ac-text-secondary);
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.mobile-search-close:hover {
    background: var(--ac-highlight);
}

.mobile-search-suggestions {
    margin-top: 6px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0, 0, 0, 0.06);
    max-height: 50vh;
    overflow-y: auto;
}

.mobile-search-suggestions .suggestion-item {
    padding: 12px 16px;
    font-size: 14px;
    cursor: pointer;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    transition: background 0.15s;
}

.mobile-search-suggestions .suggestion-item:last-child {
    border-bottom: none;
}

.mobile-search-suggestions .suggestion-item:hover {
    background: var(--ac-highlight);
}

.mobile-details-toggle {
    display: none;
}

@media (max-width: 768px) {

    /* Bottom sheet toggle button */
    .mobile-details-toggle {
        display: flex;
        position: fixed;
        bottom: 65vh;
        left: 0;
        right: 0;
        z-index: 35;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: var(--ac-accent);
        color: #ffffff;
        border: none;
        padding: 10px 20px;
        font-family: "Poppins", Arial, sans-serif;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
        border-radius: 12px 12px 0 0;
        transition: bottom 0.35s ease, background 0.2s ease;
    }

    .mobile-details-toggle.collapsed {
        bottom: 0;
    }

    .mobile-details-toggle.hidden {
        display: none !important;
    }

    /* Right panel as bottom sheet */
    #rightPanel {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 65vh !important;
        z-index: 30 !important;
        transition: transform 0.35s ease !important;
        border-radius: 0 !important;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.2);
        --calcite-shell-panel-spacing: 0 !important;
        --calcite-internal-shell-panel-spacing: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }

    #rightPanel::part(content) {
        padding: 0 !important;
        margin: 0 !important;
    }

    #rightPanel[collapsed] {
        transform: translateY(100%) !important;
    }

    #rightPanel:not([collapsed]) {
        transform: translateY(0) !important;
    }

    #detailsPanel {
        height: 100%;
        overflow-y: auto;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        inline-size: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        --calcite-panel-width: 100% !important;
    }

    calcite-panel#detailsPanel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        inline-size: 100% !important;
    }

    #detailsPanel::part(container) {
        width: 100% !important;
        max-width: 100% !important;
    }
}