/* =============================================================================
   gb-at-a-glance.css
   Styles specific to gilgit-baltistan-at-a-glance.html.
   Loaded only on that page — does not affect any other pages.

   Sections:
     1. Stat Cards        — 6-card summary grid at the top of the article
     2. District Table    — static HTML table with density bar visualisation
     3. Chart Titles      — .chart-title / .chart-subtitle shared across all D3 charts
     4. District Explorer — interactive D3 bar chart (metric dropdown, 9 metrics)
     5. Dumbbell Chart    — D3 2017 vs 2023 population lollipop chart
     6. Tourism Charts    — stacked bar + dual-axis spending chart (Economy section)
   =============================================================================*/


/* =============================================================================
   1. STAT CARDS
   Six summary metrics in a responsive 3-column grid.
   On tablet (≤900px) collapses to 2 columns; on mobile (≤560px) to 1 column.
   ============================================================================= */
.stat-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2em;
    margin: 2em 0 2.5em;
}
@media (max-width: 900px) {
    .stat-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .stat-cards { grid-template-columns: 1fr; }
}
.stat-card {
    background: #fff;
    border: 1px solid #e4e9eb;
    border-left: 4px solid coral;
    border-radius: 4px;
    padding: 1.2em 1.4em 1.1em;
    display: flex;
    flex-direction: column;
    gap: 0.4em;
}
.stat-card-header {
    display: flex;
    align-items: center;
    gap: 0.55em;
    margin-bottom: 0.2em;
}
.stat-card-header svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #8a9aa3;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}
.stat-card-label {
    font-size: 0.72em;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #8a9aa3;
    margin: 0;
}
.stat-card-value {
    font-size: 2em;
    font-weight: 700;
    color: #192024;
    line-height: 1.1;
    margin: 0;
    letter-spacing: 0.02em;
}
.stat-card-sub {
    font-size: 0.78em;
    color: #8a9aa3;
    margin: 0;
}
.stat-card-sub span.positive {
    color: #2aaa6e;
    font-weight: 600;
}

/* =============================================================================
   2. DISTRICT BREAKDOWN TABLE
   Static HTML table with inline density bars (coral <span> elements).
   The last row (Total/Avg.) gets a bold top border and coral district label.
   ============================================================================= */
.data-section {
    margin: 2.5em 0 1em;
}
.gb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82em;
    color: #555f66;
}
.gb-table th {
    text-align: left;
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #8a9aa3;
    border-bottom: 2px solid #e4e9eb;
    padding: 0.5em 0.7em 0.5em 0;
}
.gb-table td {
    padding: 0.55em 0.7em 0.55em 0;
    border-bottom: 1px solid #f0f3f5;
    vertical-align: middle;
}
.gb-table tr:last-child td {
    border-bottom: none;
    font-weight: 700;
    color: #192024;
    border-top: 2px solid #e4e9eb;
}
.gb-table td:first-child {
    font-weight: 600;
    color: #192024;
}
.gb-table tr:last-child td:first-child {
    color: coral;
}
.density-bar {
    display: inline-block;
    height: 6px;
    background: coral;
    border-radius: 3px;
    opacity: 0.65;
    vertical-align: middle;
    margin-right: 0.4em;
}

/* =============================================================================
   3. CHART TITLES & SUBTITLES
   Shared across all D3 chart cards (Explorer, Dumbbell, Tourism, Spending).
   Rendered by JS as .chart-title and .chart-subtitle divs inside each wrap.
   ============================================================================= */
.chart-title {
    font-size: 21px;
    font-weight: 700;
    color: #192024;
    margin: 0 0 6px;
    line-height: 1.3;
}
.chart-subtitle {
    font-size: 17px;
    color: #626262;
    margin: 0 0 16px;
    line-height: 1.4;
}

/* =============================================================================
   4. DISTRICT EXPLORER — INTERACTIVE BAR CHART
   D3-rendered bar chart with a metric dropdown (9 metrics).
   Colour per district is stable across metric switches (set once by population
   rank in gb-at-a-glance.js → districtColor).
   Districts with no data for the selected metric are omitted from the chart.
   The tooltip uses position:fixed so it tracks the cursor across the SVG.
   ============================================================================= */
.explorer-section {
    margin: 2.5em 0;
}
.explorer-wrap {
    background: #ffffff;
    border-top: 1px solid #e4e9eb;
    border-bottom: 1px solid #e4e9eb;
    padding: 1.4em 1.6em 1.6em 0;
    overflow-x: auto;
}
.metric-select-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.metric-select-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a9aa3;
    white-space: nowrap;
}
.metric-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 7px 36px 7px 14px;
    border: 1px solid #e4e9eb;
    border-radius: 4px;
    background-color: #fff;
    /* Chevron arrow via inline SVG */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%238a9aa3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    font-size: 13px;
    color: #192024;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s;
    min-width: 200px;
}
.metric-select:hover,
.metric-select:focus { border-color: coral; }
.bar-tooltip {
    position: fixed;
    background: #192024;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 12px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s;
    z-index: 999;
}
.bar-tooltip .tt-district { color: coral; font-weight: 600; margin-bottom: 3px; }
.bar-tooltip .tt-value    { color: #fff; }

/* =============================================================================
   5. DUMBBELL CHART
   D3 lollipop/dumbbell chart comparing 2017 (hollow dot) vs 2023 (filled dot)
   population per district, sorted by growth rate descending.
   ============================================================================= */
.dumbbell-section {
    margin: 2.5em 0;
}
.dumbbell-wrap {
    background: #ffffff;
    border-top: 1px solid #e4e9eb;
    border-bottom: 1px solid #e4e9eb;
    padding: 1.4em 1.6em 1.6em 0;
    overflow-x: auto;
}
.dumbbell-wrap .domain { stroke: #e4e9eb; }
.dumbbell-wrap .tick text { fill: #8a9aa3; font-size: 11px; }
.dumbbell-wrap .grid line { stroke: #e4e9eb; shape-rendering: crispEdges; }
.dumbbell-wrap .grid .domain { stroke: none; }
.db-legend {
    display: flex;
    gap: 20px;
    margin-bottom: 16px;
    font-size: 14px;
    color: #8a9aa3;
    align-items: center;
}
.db-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
    vertical-align: middle;
}
.db-tooltip {
    position: fixed;
    background: #192024;
    border-radius: 4px;
    padding: 10px 14px;
    font-size: 12px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s;
    z-index: 999;
    min-width: 160px;
}
.db-tooltip .tt-title  { color: coral; font-weight: 600; margin-bottom: 6px; }
.db-tooltip .tt-row    { display: flex; justify-content: space-between; gap: 16px; color: #fff; margin-top: 2px; }
.db-tooltip .tt-muted  { color: #8a9aa3; }
.db-tooltip .tt-change { color: #2aaa6e; font-weight: 600; margin-top: 6px; }

/* =============================================================================
   6. ECONOMY SECTION — TOURISM CHARTS
   Two D3 charts inside the Economy section:
     a) Stacked bar  — domestic vs foreign arrivals 2010–2024 (#tourism-chart)
     b) Dual-axis    — spending (bars, left axis) + % of GDP (line, right axis)
                       (#spending-chart)
   Both charts reuse .tourism-chart-wrap, .tourism-legend, .bar-tooltip, and
   .tourism-tooltip / .tt-multi-row classes defined below.
   ============================================================================= */
.economy-section {
    margin: 2.5em 0;
}
.economy-section h3 {
    color: #192024;
    margin-bottom: 0.5em;
}
.tourism-chart-wrap {
    background: #ffffff;
    border-top: 1px solid #e4e9eb;
    border-bottom: 1px solid #e4e9eb;
    padding: 1.4em 1.6em 1.6em 0;
    overflow-x: auto;
    margin-top: 1.25em;
}
.tourism-legend {
    display: flex;
    gap: 20px;
    margin-bottom: 16px;
    font-size: 14px;
    color: #192024;
    align-items: center;
}
.tourism-legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
}
.tourism-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    display: inline-block;
    flex-shrink: 0;
}
/* Multi-row tooltip rows used by the tourism chart */
.tourism-tooltip { min-width: 170px; padding: 10px 14px; }
.tourism-tooltip .tt-district { margin-bottom: 6px; }
.tt-multi-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 3px;
}
.tt-multi-label { color: #8a9aa3; }
.tt-multi-val   { color: #fff; }

/* =============================================================================
   6b. GB HISTORY TIMELINE
   ============================================================================= */
.history-section {
    margin: 2.5em 0;
}
.timeline-wrap {
    background: #ffffff;
    border-top: 1px solid #e4e9eb;
    border-bottom: 1px solid #e4e9eb;
    padding: 1.4em 1.6em 1.6em 0;
    overflow: visible;
    margin-top: 1.25em;
}

/* =============================================================================
   7. BUDGET MARIMEKKO CHART
   Proportional Marimekko: column width = share of total budget,
   segment height = share within category. No legend — hover for details.
   ============================================================================= */
.budget-section {
    margin: 2.5em 0;
}
.budget-wrap {
    background: #ffffff;
    border-top: 1px solid #e4e9eb;
    border-bottom: 1px solid #e4e9eb;
    padding: 1.4em 1.6em 1.6em 0;
    overflow-x: auto;
    margin-top: 1.25em;
}
.budget-tooltip {
    min-width: 200px;
    padding: 10px 14px;
}
.budget-donut-wrap,
.budget-donut2-wrap {
    background: #ffffff;
    border-top: 1px solid #e4e9eb;
    border-bottom: 1px solid #e4e9eb;
    padding: 1.4em 1.6em 1.6em 0;
    overflow-x: auto;
    margin-top: 1.25em;
}
.budget-bubble-wrap {
    background: #ffffff;
    border-top: 1px solid #e4e9eb;
    border-bottom: 1px solid #e4e9eb;
    padding: 1.4em 1.6em 1.6em 0;
    overflow-x: auto;
    margin-top: 1.25em;
}