/* =====================================================
Chart Layout
===================================================== */

.dashboard-chart {
    height: 100%;
    min-height: 300px;
}

#overview-species-pie,
#overview-counties-pie,
#species-pie-observations,
#counties-pie-observations,
#species-pie-breeding,
#counties-pie-breeding {
    height: 250px;
}

.chart-container {
    position: relative;
}

.chart-container .card-body {
    height: clamp(350px, 40vh, 420px);
    min-height: 0;
}

@media (min-width: 992px) and (max-width: 1085px) {
    .chart-container .card-body {
        height: clamp(450px, 40vh, 620px);
    }
}

.analysis-chart,
#overview-timeseries-chart {
    width: 100%;
    height: 100%;
}

.chart-container .echarts-for-react,
.chart-container canvas {
    max-width: 100%;
}

.chart-empty-hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .875rem;
    color: var(--tblr-secondary);
    background: rgba(255, 255, 255, .75);
    text-align: center;
    z-index: 10;
    min-height: 150px;
}

/* =========================
KPI Trend colors
========================= */

.trend-positive {
    color: #2fb344;
}

.trend-negative {
    color: #d63939;
}

.trend-neutral {
    color: #6c757d;
}

/* =========================
Filter (species, counties)
========================= */

.ts-dropdown {
    background: #ffffff;
    opacity: 1;
    border: 1px solid #d1d5db;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    z-index: 2000;
}

@media (min-width: 992px) {

    .ts-dropdown {
        margin-left: -15px;
    }
}

.ts-control {
    min-height: 34px;
}

.ts-wrapper .ts-control {
    border: 1px solid #c9ced6;
    border-radius: 4px;
    padding-right: 28px;
    cursor: pointer;
    background-color: #fff;
    margin-top: .5rem;
}

/* Show no items in selection field*/
.ts-wrapper .ts-control .item {
    display: none !important;
}

/* Dropdown arrow */
.ts-control::after {
    content: "▾";
    position: absolute;
    right: 10px;
    top: 6px;
    font-size: 14px;
    color: #6b7280;
    pointer-events: none;
}

.ts-control:hover {
    border-color: #9aa3af;
}

/* Sum option in species dropdown */
.ts-dropdown .option.option-sum {
    font-style: italic;
    color: rgba(70, 70, 70, 0.6);
    border-bottom: 1px solid #e6e8eb;
    padding-bottom: 4px;
    margin-bottom: 4px;
}

.county-selector-inline,
.species-selector-inline {
    min-width: 175px;
}

@media (max-width: 991px) {

    .county-selector-inline,
    .species-selector-inline {
        width: clamp(175px, 50vw, 500px);
    }
}

/* =========================
    Filter (year slider)
========================= */

.analysis-slider-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#analysis-year-slider {
    margin-top: 0rem;
    margin-bottom: .5rem;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}

.chart-slider-label {
    margin-top: -1rem;
    text-align: center;
}

#analysis-year-slider .noUi-connect {
    background: #066FD1;
}

/* =========================
    Filter summary
========================= */

.filter-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: .875rem;
    margin-top: .5rem;
}

.filter-summary-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: .875rem;
    align-self: flex-end;
}

.dashboard-kpi-subheader {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.dashboard-kpi-info-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    line-height: 1;
    box-shadow: none;
}

.dashboard-kpi-info-button:hover,
.dashboard-kpi-info-button:focus-visible {
    color: #1d4ed8;
}

.analysis-option-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    min-width: 0;
}

.analysis-option-row .form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding-left: 0;
    flex: 0 1 auto;
}

.analysis-option-row .form-check-input {
    margin: 0;
    flex: 0 0 auto;
}

.analysis-option-row .form-check-label {
    margin: 0;
    min-width: 0;
    line-height: 1.35;
}

.analysis-option-info-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.35rem;
    height: 1.35rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #64748b;
    line-height: 1;
    box-shadow: none;
}

.analysis-option-info-button:hover,
.analysis-option-info-button:focus-visible {
    color: #1d4ed8;
}

.filter-chip {
    background: #f1f3f5;
    color: #495057;

    padding: 2px 8px;
    border-radius: 10px;

    font-size: 0.8rem;
    white-space: nowrap;
}

.filter-chip-more {
    background: #e9ecef;
    font-weight: 500;
}

/* =========================
   Tables
========================= */

.table-responsive {
    max-height: 530px;
    overflow-y: auto;
}

@media (max-width: 991px) {

    .dashboard-chart {
        height: 100%;
        min-height: 260px;
    }

    .chart-container .card-body {
        height: clamp(280px, 46vh, 360px);
        padding: 1rem .875rem .875rem;
    }

    #overview-species-pie,
    #overview-counties-pie,
    #species-pie-observations,
    #counties-pie-observations,
    #species-pie-breeding,
    #counties-pie-breeding {
        height: 220px;
    }

    .filter-summary-inline {
        align-self: stretch;
    }

    .table-responsive {
        max-height: 415px;
    }
}

@media (max-width: 767px) {

    .analysis-option-row {
        align-items: flex-start;
    }

    .analysis-inline-filter-card {
        flex-direction: column;
        align-items: stretch;
    }

    .analysis-inline-filter-card > .flex-grow-1 {
        min-width: 0;
    }

    .analysis-inline-filter-card .filter-summary-inline {
        margin-top: .25rem;
    }

    .chart-container .card-body {
        height: clamp(260px, 52vh, 340px);
        padding: .875rem .75rem .75rem;
    }

    .dashboard-chart {
        height: 100%;
        min-height: 240px;
    }

    #overview-species-pie,
    #overview-counties-pie,
    #species-pie-observations,
    #counties-pie-observations,
    #species-pie-breeding,
    #counties-pie-breeding {
        height: 200px;
    }

    .filter-chip {
        white-space: normal;
    }
}

/* Sorting */
#analysis-species-table th[data-sort],
#analysis-counties-table th[data-sort] {
    cursor: pointer;
    white-space: nowrap;
}

#analysis-species-table th i,
#analysis-counties-table th i {
    font-size: 0.9rem;
    vertical-align: middle;
}

/* Active sort */
#analysis-species-table th.sorted-asc,
#analysis-counties-table th.sorted-asc,
#analysis-species-table th.sorted-desc,
#analysis-counties-table th.sorted-desc {
    color: #0068b4;
    font-weight: 600;
}

#analysis-species-table th[data-sort]:hover,
#analysis-counties-table th[data-sort]:hover {
    color: #0068b4;
}

/* Sticky header */
#analysis-species-table,
#analysis-counties-table {
    border-collapse: separate;
    border-spacing: 0;
}

#analysis-species-table thead,
#analysis-counties-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

#analysis-species-table thead th,
#analysis-counties-table thead th {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 11;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);
    border-bottom: 2px solid #dee2e6;
}

/* Sticky total row */
#analysis-species-table tr.table-total,
#analysis-counties-table tr.table-total {
    position: sticky;
    bottom: 0;
    background: #fff;
    z-index: 5;
    box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.05);
}

#analysis-species-table tr.table-total td,
#analysis-counties-table tr.table-total td {
    font-style: italic;
    font-weight: 500;
}

/* =========================
   Year label
========================= */

#species-year-label,
#counties-year-label {
    text-align: right;
}