/* ==========================================================
   REVENUE STATISTICS — RWANDA REGIONAL MAP
   Monochrome blue / white presentation
========================================================== */

.tax-region-map-root {
    width: 100%;
}


.tax-region-map-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 10px;
}


.tax-region-map-toolbar label {
    color: #123A67;
    font-size: 12px;
    font-weight: 700;
}


.tax-region-map-toolbar select {
    min-width: 125px;
    min-height: 34px;
    padding: 5px 9px;
    border: 1px solid #BFCBDC;
    border-radius: 0;
    background: #FFFFFF;
    color: #123A67;
    font-size: 12px;
    font-weight: 600;
}


.tax-region-map-stage {
    width: 100%;
    overflow: hidden;
    background: #FFFFFF;
    border: 0;
    border-radius: 0 !important;
}


.tax-region-map-stage svg {
    display: block;
    width: 100%;
    height: auto;
    background: #FFFFFF;
    border-radius: 0 !important;
}


/* ----------------------------------------------------------
   DISTRICTS
---------------------------------------------------------- */

.tax-region-map-district {
    /*
     * Fill comes from the SVG monochrome region patterns.
     */
    stroke: #B4C0CD;
    stroke-width: 0.9;
    vector-effect: non-scaling-stroke;
}


.tax-region-map-district-label {
    fill: #44566D;
    font-size: 10.5px;
    font-weight: 600;
    pointer-events: none;

    /*
     * White halo makes names readable over blue hatching.
     */
    paint-order: stroke;
    stroke: #FFFFFF;
    stroke-width: 3px;
    stroke-linejoin: round;
}


/* ----------------------------------------------------------
   REGIONAL BUBBLES
---------------------------------------------------------- */

.tax-region-map-bubble {
    fill: #1677B8;
    stroke: #FFFFFF;
    stroke-width: 3.5;
    vector-effect: non-scaling-stroke;
}


.tax-region-map-bubble-text {
    fill: #FFFFFF;
    font-size: 13px;
    font-weight: 800;
    pointer-events: none;
}


/* ----------------------------------------------------------
   OUTSIDE ANNOTATIONS
---------------------------------------------------------- */

.tax-region-map-leader-line {
    stroke: #123A67;
    stroke-width: 1.35;
    opacity: 0.85;
    vector-effect: non-scaling-stroke;
}


.tax-region-map-callout-dot {
    fill: #123A67;
}


.tax-region-map-callout-title {
    fill: #123A67;
    font-size: 18px;
    font-weight: 800;
}


.tax-region-map-callout-value {
    fill: #123A67;
    font-size: 15px;
    font-weight: 700;
}


.tax-region-map-callout-share {
    fill: #123A67;
    font-size: 15px;
    font-weight: 700;
}


/* ----------------------------------------------------------
   PERIOD
---------------------------------------------------------- */

.tax-region-map-period {
    fill: #123A67;
    font-size: 24px;
    font-weight: 800;
}


.tax-region-map-empty {
    padding: 20px;
    color: #123A67;
    font-weight: 600;
}


/* ----------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------- */

@media (max-width: 900px) {

    .tax-region-map-district-label {
        font-size: 9px;
        stroke-width: 2.5px;
    }


    .tax-region-map-callout-title {
        font-size: 16px;
    }


    .tax-region-map-callout-value,
    .tax-region-map-callout-share {
        font-size: 13px;
    }


    .tax-region-map-period {
        font-size: 21px;
    }
}


/* ==========================================================
   REVENUE STATISTICS — PROVINCE VISIBILITY
========================================================== */

/*
 * Individual district boundaries:
 * deliberately thin and light.
 */
.tax-region-map-district {
    stroke: #B8C8D8 !important;
    stroke-width: 0.8 !important;
}


/*
 * Five major administrative-region boundaries:
 * clear dark-blue outline so province groupings
 * are immediately visible.
 */
.tax-region-map-province-boundary {
    fill: none !important;
    stroke: #123A67 !important;
    stroke-width: 1.5 !important;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}


/*
 * Make regional bubbles transparent enough for the
 * geography underneath to remain visible.
 */
.tax-region-map-bubble {
    fill: #1677B8 !important;
    fill-opacity: 0.70 !important;

    stroke: #FFFFFF !important;
    stroke-width: 3 !important;
    stroke-opacity: 1 !important;
}


/*
 * District labels are rendered last by JavaScript.
 * A small white halo keeps them legible over patterns
 * and semi-transparent bubbles.
 */
.tax-region-map-district-label {
    fill: #364B63 !important;

    paint-order: stroke;
    stroke: rgba(255, 255, 255, 0.96) !important;
    stroke-width: 2.4px !important;
    stroke-linejoin: round;
}


/*
 * Leader lines remain clear but not overpowering.
 */
.tax-region-map-leader-line {
    stroke: #123A67 !important;
    stroke-width: 1.5 !important;
}




/* ==========================================================
   DISTRICT NATIVE HOVER
========================================================== */

.tax-region-map-district {
    cursor: help;

    transition:
        stroke-width 120ms ease,
        stroke 120ms ease;
}


.tax-region-map-district:hover {
    stroke: #0B4F7A !important;
    stroke-width: 1.4 !important;
}


/*
 * Labels, bubbles and callout lines should not block
 * mouse access to the district polygon underneath.
 */
.tax-region-map-district-label,
.tax-region-map-bubble,
.tax-region-map-leader-line {
    pointer-events: none;
}


/* ==========================================================
   REGIONAL MAP LOADING INDICATOR
========================================================== */

.tax-region-map-loading {
    min-height: 420px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    font-size: 13px;
    font-weight: 500;

    color: #52677A;
}


.tax-region-map-loading-spinner {
    width: 17px;
    height: 17px;

    box-sizing: border-box;

    border:
        2px solid
        rgba(18, 58, 103, 0.18);

    border-top-color:
        #123A67;

    border-radius: 50%;

    animation:
        tax-region-map-spin
        0.8s
        linear
        infinite;
}


@keyframes tax-region-map-spin {

    to {
        transform:
            rotate(360deg);
    }
}