#bq-chart-view {
    background: #ffffff;
    border-radius: 16px;
    margin-top: 8px;
    padding: 16px 24px 8px;
    position: relative;
}

.bq-screen-dim {
    background: rgba(0, 0, 0, 0.18);
    inset: 0;
    pointer-events: all;
    position: fixed;
    z-index: 9998;
}

.bq-chart-loading {
    align-items: center;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    inset: 0;
    justify-content: center;
    position: absolute;
    z-index: 9999;
}

.bq-loading-panel {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}

.bq-loading-spinner {
    animation: bqSpin 0.9s linear infinite;
    border: 3px solid #ececec;
    border-top-color: #16a6a8;
    border-radius: 50%;
    height: 40px;
    width: 40px;
}

@keyframes bqSpin {
    to { transform: rotate(360deg); }
}

.bq-chart-title {
    color: #4d4d4d;
    font-size: 22px;
    font-weight: 400;
    margin: 2px 0 14px;
    text-align: center;
}

.bq-kpi-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 14px;
}

.bq-kpi-card {
    align-items: center;
    background: #eaeaea;
    border-right: 14px solid transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 70px;
    padding: 8px;
}

.bq-kpi-card.national { border-right-color: #e5167a; }
.bq-kpi-card.department { border-right-color: #16a6a8; }
.bq-kpi-card.municipality { border-right-color: #f08600; }

.bq-kpi-label {
    color: #5a5a5a;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
}

.bq-kpi-value {
    font-size: 34px;
    line-height: 1;
}

.bq-kpi-card.national .bq-kpi-value { color: #e5167a; }
.bq-kpi-card.department .bq-kpi-value { color: #16a6a8; }
.bq-kpi-card.municipality .bq-kpi-value { color: #f08600; }

.bq-chart-canvas-wrap {
    height: 420px;
    margin-top: 6px;
}

.bq-custom-legend {
    align-items: center;
    color: #5e5e5e;
    display: flex;
    gap: 22px;
    margin: 8px 0 6px;
}

.bq-table-actions {
    margin: 8px 0 6px;
    text-align: right;
}

.bq-map-controls {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin: 8px 0 10px;
}

.bq-map-view-switch {
    display: flex;
    gap: 8px;
    margin: 6px 0 8px;
}

.bq-map-view-btn {
    background: #e6f4f4;
    border: 1px solid #16a6a8;
    border-radius: 20px;
    color: #0f7b7d;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
}

.bq-map-view-btn.active {
    background: #16a6a8;
    color: #fff;
}

.bq-map-compare-controls {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    margin: 8px 0 10px;
}

.bq-map-compare-controls label,
.bq-map-compare-latest {
    color: #4d4d4d;
    font-size: 13px;
}

.bq-map-compare-select {
    border: 1px solid #d2d2d2;
    border-radius: 8px;
    color: #4d4d4d;
    font-size: 13px;
    padding: 7px 10px;
}

.bq-map-btn {
    background: #16a6a8;
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 12px;
}

.bq-map-btn:disabled {
    background: #a8d0d1;
    cursor: not-allowed;
}

.bq-map-page {
    color: #4d4d4d;
    font-size: 13px;
    min-width: 110px;
    text-align: center;
}

.bq-map-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bq-map-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    overflow: hidden;
}

.bq-map-card-head {
    align-items: center;
    background: #f6f6f6;
    display: flex;
    justify-content: space-between;
    padding: 8px 10px;
}

.bq-map-year {
    color: #4d4d4d;
    font-size: 14px;
    font-weight: 700;
}

.bq-map-fullscreen-btn {
    background: #fff;
    border: 1px solid #16a6a8;
    border-radius: 6px;
    color: #0f7b7d;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 6px 8px;
}

.bq-map-fullscreen-btn:hover {
    background: #e6f4f4;
}

.bq-map-fullscreen-btn:focus-visible {
    outline: 2px solid #16a6a8;
    outline-offset: 1px;
}

.bq-map-canvas {
    height: 250px;
    width: 100%;
}

.bq-map-card:fullscreen {
    background: #ffffff;
    border-radius: 0;
    padding: 10px;
}

.bq-map-card:fullscreen .bq-map-canvas {
    height: calc(100dvh - 74px);
}

.bq-map-card:-webkit-full-screen {
    background: #ffffff;
    border-radius: 0;
    padding: 10px;
}

.bq-map-card:-webkit-full-screen .bq-map-canvas {
    height: calc(100dvh - 74px);
}

.bq-map-grid:fullscreen {
    background: #ffffff;
    box-sizing: border-box;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    height: 100dvh;
    padding: 12px;
}

.bq-map-grid:fullscreen .bq-map-card {
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.bq-map-grid:fullscreen .bq-map-canvas {
    flex: 1;
    height: auto;
    min-height: 220px;
}

.bq-map-grid:-webkit-full-screen {
    background: #ffffff;
    box-sizing: border-box;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    height: 100dvh;
    padding: 12px;
}

.bq-map-grid:-webkit-full-screen .bq-map-card {
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.bq-map-grid:-webkit-full-screen .bq-map-canvas {
    flex: 1;
    height: auto;
    min-height: 220px;
}

@media (max-width: 1100px), (orientation: portrait) {
    .bq-map-grid:fullscreen {
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(0, 1fr);
    }

    .bq-map-grid:-webkit-full-screen {
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(0, 1fr);
    }
}

.bq-map-empty {
    color: #666;
    font-size: 13px;
    padding: 10px;
    text-align: center;
}

.bq-map-legend {
    align-items: center;
    color: #5b5b5b;
    display: flex;
    font-size: 12px;
    gap: 8px;
    justify-content: center;
    margin: 4px 0 10px;
}

.bq-map-legend-bar {
    background: linear-gradient(90deg, #fff5bf 0%, #ffd166 35%, #f8961e 65%, #e85d04 100%);
    border-radius: 8px;
    height: 8px;
    width: 140px;
}

.bq-download-btn {
    background: #16a6a8;
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 12px;
}

.bq-download-btn:disabled {
    background: #a8d0d1;
    cursor: not-allowed;
}

.bq-raw-table-wrap {
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}

.bq-raw-table-scroll {
    max-height: 280px;
    overflow: auto;
}

.bq-raw-table {
    border-collapse: collapse;
    min-width: 760px;
    width: 100%;
}

.bq-raw-table thead th {
    background: #f0f0f0;
    border-bottom: 1px solid #ddd;
    color: #4d4d4d;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 10px;
    position: sticky;
    text-align: left;
    top: 0;
    z-index: 2;
}

.bq-raw-table tbody td {
    border-bottom: 1px solid #ececec;
    color: #444;
    font-size: 12px;
    padding: 7px 10px;
    white-space: nowrap;
}

.bq-raw-table-empty {
    color: #666;
    font-size: 13px;
    padding: 10px;
    text-align: center;
}

.bq-legend-item {
    align-items: center;
    display: inline-flex;
    font-size: 16px;
    gap: 7px;
}

.bq-legend-line {
    background: currentColor;
    border-radius: 2px;
    display: inline-block;
    height: 2px;
    position: relative;
    width: 28px;
}

.bq-legend-line::after {
    background: currentColor;
    border-radius: 50%;
    content: '';
    height: 6px;
    left: 11px;
    position: absolute;
    top: -2px;
    width: 6px;
}

.bq-legend-item.national { color: #e5167a; }
.bq-legend-item.department { color: #16a6a8; }

.bq-chart-footer {
    color: #565656;
    display: block;
    font-size: 17px;
    margin-top: 8px;
    padding-bottom: 4px;
}

.bq-chart-source-line {
    font-size: 15px;
    font-style: italic;
    text-align: left;
}

.bq-chart-region-line {
    margin-top: 2px;
    text-align: right;
}

.bq-chart-error {
    background: #fde8ea;
    border: 1px solid #efb5bd;
    border-radius: 8px;
    color: #7f2735;
    display: none;
    font-size: 16px;
    margin-bottom: 8px;
    padding: 8px 10px;
}

@media (max-width: 768px) {
    #bq-chart-view { padding: 12px; }
    .bq-chart-title { font-size: 22px; }
    .bq-kpi-grid { grid-template-columns: 1fr; }
    .bq-kpi-label { font-size: 15px; }
    .bq-kpi-value { font-size: 30px; }
    .bq-chart-canvas-wrap { height: 320px; }
    .bq-custom-legend { gap: 14px; }
    .bq-legend-item { font-size: 14px; }
    .bq-table-actions { text-align: left; }
    .bq-download-btn { width: 100%; }
    .bq-chart-source-line { font-size: 15px; }
    .bq-chart-region-line { font-size: 15px; }
    .bq-map-controls {
        align-items: stretch;
        flex-direction: column;
        justify-content: center;
    }
    .bq-map-view-switch {
        flex-direction: column;
    }
    .bq-map-btn { width: 100%; }
    .bq-map-compare-controls {
        align-items: stretch;
        flex-direction: column;
    }
    .bq-map-grid { grid-template-columns: 1fr; }
}