*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
    font-family: Arial, sans-serif;
    font-size: 13px;
    background: #fff;
    color: #222;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ── Header ── */
.site-header {
    flex-shrink: 0;
    padding: 0.5em 1em;
    background: #fff;
    display: flex;
    align-items: center;
}

.site-header img {
    height: 40px;
    width: auto;
    display: block;
}

/* ── Main grid ── */
.dashboard {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.row {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: 0;
}

.row-top    { flex: 62; overflow: hidden; min-height: 0; }
.row-bottom { flex: 38; border-top: 1px solid #ddd; overflow: hidden; min-height: 0; }

/* ── Panels ── */
.panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.panel-left  { flex: 44; border-right: 1px solid black; }
.panel-right { flex: 56; }

.panel-title {
    font-size: 1.9em;
    font-weight: bold;
    text-align: center;
    padding: 0.5em 1em;
    flex-shrink: 0;
}

/* ── Left panel internals ── */
.left-top {
    display: flex;
    flex-direction: row;
    flex: 40;
    border-bottom: 1px solid black;
    overflow: hidden;
}

/* Left 2/3: cases block */
.lt-cases {
    flex: 2;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #ddd;
    overflow: hidden;
}

.lt-total {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5em 0.5em 0.4em;
    flex-shrink: 0;
}

.lt-breakdown {
    display: flex;
    flex-direction: row;
    flex: 1;
    overflow: hidden;
}

.lt-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.3em;
    text-align: center;
}

.lt-block-label {
    font-size: 1.1em;
    margin-bottom: 0.2em;
    color: #333;
}

.lt-block-num {
    font-size: 2em;
    font-weight: bold;
    line-height: 1.1;
    margin-bottom: 0.15em;
}

.lt-status {
    font-size: 1.1em;
    line-height: 1.5;
}

.lt-status.active   { color: #B03A2E; }
.lt-status.inactive { color: #4A7FB5; }

/* Right 1/3: fly trap block */
.lt-fly {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.5em;
}

.lt-fly-note {
    font-size: 1.0em;
    color: #777;
    text-align: center;
    margin-top: 2em;
    line-height: 1.4;
}

/* Shared label + big number */
.lt-label {
    font-size: 1.2em;
    font-weight: 500;
    margin-bottom: 0.15em;
    color: #333;
}

.lt-big {
    font-size: 2.8em;
    font-weight: bold;
    line-height: 1;
}

.left-bottom {
    display: flex;
    flex-direction: column;
    flex: 60;
    overflow: hidden;
}

/* Heading row */
.cbm-header {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 0.4em 0.7em;
    flex-shrink: 0;
}

.cbm-title-block {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
}

.cbm-title {
    font-size: 1.9em;
    font-weight: bold;
}

.cbm-subtitle {
    font-size: 1.0em;
    color: #888;
    margin-top: 0.1em;
}

.cbm-legend {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 1.0em;
    line-height: 1.7;
}

.cbm-leg-active   { color: #B03A2E; }
.cbm-leg-inactive { color: #4A7FB5; }
.cbm-leg-fly      { color: #999; }

/* Chart columns row */
.cbm-charts {
    display: flex;
    flex-direction: row;
    flex: 1;
    overflow: hidden;
}

#chart-wildlife {
    border-right: 1px solid #ddd;
}

.chart-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0.4em 0.5em;
}

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

.chart-col-label {
    font-size: 1.1em;
    text-align: center;
    flex-shrink: 0;
    margin-bottom: 0.2em;
}

.chart-area {
    flex: 1;
    overflow: hidden;
}

/* ── Bar chart tooltip ── */
.chart-tooltip {
    display: none;
    position: fixed;
    background: #fff;
    border: 1px solid #333;
    border-radius: 3px;
    padding: 0.3em 0.6em;
    font-size: 11px;
    line-height: 1.6;
    pointer-events: none;
    z-index: 100;
}

/* ── Map tooltip ── */
.map-tooltip {
    display: none;
    position: fixed;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0.85em 1.1em;
    font-size: 13px;
    line-height: 1.8;
    pointer-events: none;
    z-index: 200;
    box-shadow: 0 3px 14px rgba(0,0,0,0.13);
    min-width: 240px;
}

.mtt-title   { font-weight: bold; font-size: 1.08em; margin-bottom: 0.1em; }
.mtt-status  { color: #444; }
.mtt-gap     { height: 0.5em; }
.mtt-section { font-weight: bold; }

/* ── Right panel internals ── */
.map-controls {
    flex-shrink: 0;
    padding: 0.4em 0.8em;
    border-bottom: 1px solid #ddd;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1.4em;
}

.mc-item {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
}

.mc-label {
    font-size: 1.0em;
    color: #222;
    white-space: nowrap;
}

.mc-item .cs-wrap {
    min-width: 150px;
}

.mc-legend {
    margin-left: auto;
}

.mc-legend-items {
    display: flex;
    flex-direction: row;
    gap: 0.8em;
    font-size: 0.82em;
    font-weight: bold;
    white-space: nowrap;
}

.mc-leg-active   { color: #B03A2E; }
.mc-leg-inactive { color: #4A7FB5; }
.mc-leg-fly      { color: #aaa; }

.map-area {
    flex: 1;
    background: #fff;
    overflow: hidden;
    position: relative;
}


/* ── Bottom panel internals ── */
.table-sidebar {
    flex-shrink: 0;
    width: calc(44% / 3);
    border-right: 1px solid #ddd;
    padding: 0.7em 0.8em;
    display: flex;
    flex-direction: column;
    gap: 0.7em;
    overflow: hidden;
}

.sidebar-title {
    font-size: 1.8em;
    font-weight: bold;
    flex-shrink: 0;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.2em;
}

.filter-label {
    font-size: 1.0em;
    color: #555;
}

/* ── Custom dropdowns ── */
.cs-wrap { position: relative; }

.cs-trigger {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.28em 0.5em;
    border: 1px solid #bbb;
    border-radius: 2px;
    background: #fff;
    font-size: 1.0em;
    cursor: pointer;
    text-align: left;
    color: #222;
}
.cs-trigger:focus { outline: none; }

.cs-arr { font-size: 0.7em; color: #555; margin-left: 4px; flex-shrink: 0; }

.cs-panel {
    position: fixed;
    background: #fff;
    border: 1px solid #bbb;
    box-shadow: 0 2px 8px rgba(0,0,0,0.13);
    z-index: 9999;
    font-size: 0.82em;
}

/* Single-select options */
.cs-opt {
    padding: 0.38em 0.7em;
    cursor: pointer;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cs-opt:hover    { background: #f0f0f0; }
.cs-opt.cs-selected { background: #ebebeb; }

/* Multi-select list */
.cs-list { max-height: 160px; overflow-y: auto; }

.cs-check-row {
    display: flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.32em 0.7em;
    cursor: pointer;
    color: #222;
    white-space: nowrap;
}
.cs-check-row:hover { background: #f0f0f0; }
.cs-check-row input[type="checkbox"] { cursor: pointer; margin: 0; accent-color: #333; }

/* Cancel / Apply */
.cs-actions {
    display: flex;
    gap: 0.4em;
    padding: 0.4em 0.5em;
    border-top: 1px solid #ddd;
}
.cs-btn {
    flex: 1;
    padding: 0.3em 0;
    font-size: 0.8em;
    border: 1px solid #bbb;
    border-radius: 2px;
    background: #fff;
    cursor: pointer;
    color: #222;
}
.cs-btn:hover { background: #f0f0f0; }
.cs-apply { font-weight: bold; }

.table-main {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0.5em 0.8em;
}

.table-summary {
    flex-shrink: 0;
    font-size: 1.0em;
    color: #555;
    margin-bottom: 0.4em;
}

.table-area {
    border-bottom: 1px solid black;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.cases-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.1em;
}

.cases-table th {
    position: sticky;
    top: 0;
    background: #fff;
    font-weight: bold;
    text-align: left;
    padding: 0.4em 0.6em;
    border-bottom: 2px solid #ddd;
    white-space: nowrap;
    z-index: 1;
}

.cases-table td {
    padding: 0.35em 0.6em;
    border-bottom: 1px solid #eee;
    color: #333;
    white-space: nowrap;
}

.cases-table tbody tr:hover {
    background: #f8f8f8;
}

/* ── Responsive: narrow iframe ── */
@media (max-width: 1000px) {
    html, body { font-size: 12px; }

    .panel-title        { font-size: 1.6em; padding: 0.4em 0.7em; }
    .lt-big             { font-size: 2.4em; }
    .lt-block-num       { font-size: 1.8em; }
    .lt-fly-note        { margin-top: 1em; }
    .cbm-title          { font-size: 1.6em; }
    .cbm-header         { padding: 0.3em 0.6em; }
    .chart-col          { padding: 0.3em 0.4em; }
}

@media (max-width: 900px) {
    html, body { font-size: 11px; }

    .panel-title        { font-size: 1.4em; padding: 0.3em 0.6em; }

    /* left-top stat numbers */
    .lt-big             { font-size: 2em; }
    .lt-label           { font-size: 1.0em; }
    .lt-total           { padding: 0.3em; }
    .lt-block           { padding: 0.2em; }
    .lt-block-label     { font-size: 0.95em; }
    .lt-block-num       { font-size: 1.6em; }
    .lt-status          { font-size: 0.9em; }
    .lt-fly-note        { font-size: 0.9em; margin-top: 0.5em; }

    /* left-bottom bar chart header */
    .cbm-title          { font-size: 1.4em; }
    .cbm-subtitle       { font-size: 0.85em; }
    .cbm-legend         { font-size: 0.85em; line-height: 1.5; }
    .cbm-header         { padding: 0.25em 0.5em; }
    .chart-col          { padding: 0.25em 0.35em; }
    .chart-col-label    { font-size: 0.95em; }

    /* map controls */
    .map-controls       { gap: 0.9em; padding: 0.3em 0.6em; }
    .mc-label           { font-size: 0.85em; }
    .mc-item .cs-wrap   { min-width: 120px; }

    /* table area */
    .sidebar-title      { font-size: 1.3em; }
    .filter-label       { font-size: 0.85em; }
    .cases-table        { font-size: 0.9em; }
}

@media (max-width: 700px) {
    html, body { font-size: 9px; }

    .panel-title        { font-size: 1.3em; padding: 0.25em 0.4em; }
    .lt-big             { font-size: 1.8em; }
    .lt-block-num       { font-size: 1.4em; }
    .cbm-title          { font-size: 1.3em; }
    .lt-fly-note        { margin-top: 0.3em; }
    .map-controls       { gap: 0.6em; }
    .mc-item .cs-wrap   { min-width: 100px; }
}