/* ============================================================
   External Debt Dashboard
   Page-specific overrides after public_dashboard_common.css
============================================================ */

.debt-publication-page {
    --external-gold: #e2b12c;
    --external-gold-dark: #c69619;
    --external-blue: #0f2747;
    --external-soft-blue: #dbe8ff;
    --external-muted: #aab8d3;
}

/* ============================================================
   Hero
============================================================ */

.debt-publication-page .external-hero-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 22px !important;
    align-items: stretch !important;

    padding: 26px !important;
    margin-top: 18px !important;
    margin-bottom: 18px !important;

    overflow: hidden !important;
    border: 1px solid rgba(226, 177, 44, 0.18) !important;
}

.debt-publication-page .external-hero-card::before {
    content: "";
    position: absolute;
    inset: -40%;
    background:
        radial-gradient(circle at 12% 20%, rgba(226, 177, 44, 0.18), transparent 28%),
        radial-gradient(circle at 88% 8%, rgba(59, 130, 246, 0.12), transparent 24%);
    pointer-events: none;
}

.debt-publication-page .external-hero-content,
.debt-publication-page .external-hero-stat-grid {
    position: relative;
    z-index: 1;
}

.debt-publication-page .external-kicker {
    display: inline-flex;
    margin-bottom: 8px;
    color: #f6d36b;
    font-size: 0.75rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.debt-publication-page .external-hero-card h1 {
    margin: 0 0 8px !important;
    color: #ffffff;
    font-size: clamp(1.7rem, 3vw, 2.55rem);
    font-weight: 950;
    line-height: 1.1;
}

.debt-publication-page .external-hero-card p {
    margin: 0;
    max-width: 820px;
    color: #b7c4df;
    line-height: 1.65;
}

.debt-publication-page .external-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.debt-publication-page .external-hero-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(226, 177, 44, 0.12);
    border: 1px solid rgba(226, 177, 44, 0.22);
    color: #f6d36b;
    font-size: 0.76rem;
    font-weight: 800;
}

.debt-publication-page .external-hero-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(135px, 1fr));
    gap: 12px;
    min-width: 300px;
}

.debt-publication-page .external-hero-stat {
    padding: 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(226, 177, 44, 0.20);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.debt-publication-page .external-hero-stat span {
    display: block;
    color: #d9bc64;
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.debt-publication-page .external-hero-stat strong {
    display: block;
    margin-top: 8px;
    color: #ffffff;
    font-size: 2rem;
    font-weight: 950;
    line-height: 1;
}

/* ============================================================
   KPIs
============================================================ */

.debt-publication-page .external-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin-top: 0 !important;
    margin-bottom: 18px !important;
}

.debt-publication-page .premium-kpi-card {
    padding: 18px !important;
    border: 1px solid rgba(226, 177, 44, 0.14) !important;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.debt-publication-page .premium-kpi-card:hover {
    transform: translateY(-2px);
    border-color: rgba(226, 177, 44, 0.34) !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14);
}

.debt-publication-page .external-unit-value {
    font-size: 1.25rem !important;
    line-height: 1.1 !important;
}

/* ============================================================
   Summary Strip
============================================================ */

.debt-publication-page .external-summary-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0 16px;
}

.debt-publication-page .external-summary-strip > div {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.debt-publication-page .external-summary-strip span {
    display: block;
    color: #aab8d3;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.debt-publication-page .external-summary-strip strong {
    display: block;
    margin-top: 5px;
    color: #ffffff;
    font-size: 0.92rem;
}

/* ============================================================
   Chart and Table
============================================================ */

.debt-publication-page .external-chart-card {
    padding: 20px !important;
    margin-top: 0 !important;
}

.debt-publication-page .chart-card-header h3 {
    margin: 0 0 6px;
    color: #ffffff;
    font-weight: 900;
}

.debt-publication-page .chart-card-header p {
    margin: 0;
    color: #b7c4df;
    line-height: 1.5;
}

.debt-publication-page .chart-panel {
    display: none;
}

.debt-publication-page .chart-panel.active {
    display: block;
}

.debt-publication-page .chart-canvas-wrap {
    position: relative;
    height: 430px;
    width: 100%;
}

.debt-publication-page .external-preview-table td,
.debt-publication-page .external-preview-table th {
    white-space: nowrap;
}

.debt-publication-page .external-table-note {
    margin-top: 12px;
    padding: 11px 13px;
    border-radius: 12px;
    background: rgba(226, 177, 44, 0.10);
    border: 1px solid rgba(226, 177, 44, 0.18);
    color: #f6d36b;
    font-size: 0.84rem;
    font-weight: 750;
}

/* ============================================================
   Download Section
============================================================ */

.debt-publication-page .external-downloads-card {
    padding: 20px !important;
    margin-top: 18px !important;
}

.debt-publication-page .external-downloads-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.debt-publication-page .external-download-tile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 132px;
    padding: 16px;
    border-radius: 16px;
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(226, 177, 44, 0.16);
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.debt-publication-page .external-download-tile:hover {
    transform: translateY(-3px);
    background: rgba(226, 177, 44, 0.10);
    border-color: rgba(226, 177, 44, 0.34);
}

.debt-publication-page .external-download-tile span {
    color: #f6d36b;
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.debt-publication-page .external-download-tile strong {
    color: #ffffff;
    font-size: 1rem;
}

.debt-publication-page .external-download-tile small {
    color: #aab8d3;
    line-height: 1.45;
}

/* ============================================================
   Light Theme
============================================================ */

[data-theme="light"] .debt-publication-page .external-hero-card h1,
[data-theme="light"] .debt-publication-page .external-hero-stat strong,
[data-theme="light"] .debt-publication-page .external-summary-strip strong,
[data-theme="light"] .debt-publication-page .chart-card-header h3,
[data-theme="light"] .debt-publication-page .external-download-tile strong {
    color: #071b33 !important;
}

[data-theme="light"] .debt-publication-page .external-hero-card p,
[data-theme="light"] .debt-publication-page .chart-card-header p,
[data-theme="light"] .debt-publication-page .filter-box label,
[data-theme="light"] .debt-publication-page .external-download-tile small {
    color: #4f6690 !important;
}

[data-theme="light"] .debt-publication-page .external-hero-stat,
[data-theme="light"] .debt-publication-page .external-summary-strip > div,
[data-theme="light"] .debt-publication-page .external-download-tile {
    background: #ffffff !important;
    border-color: rgba(15, 39, 71, 0.12) !important;
}

/* ============================================================
   Responsive
============================================================ */

@media (max-width: 1260px) {
    .debt-publication-page .external-debt-filter-form {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .debt-publication-page .external-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .debt-publication-page .external-downloads-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .debt-publication-page .external-hero-card {
        grid-template-columns: 1fr !important;
    }

    .debt-publication-page .external-hero-stat-grid,
    .debt-publication-page .external-summary-strip,
    .debt-publication-page .external-debt-filter-form,
    .debt-publication-page .external-kpi-grid,
    .debt-publication-page .external-downloads-grid {
        grid-template-columns: 1fr !important;
    }

    .debt-publication-page .chart-canvas-wrap {
        height: 340px;
    }
}


.debt-publication-page .external-debt-filter-form {
    grid-template-columns: 1fr 1.15fr 1fr 0.75fr 0.75fr auto !important;
}

.debt-publication-page .external-measure-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.debt-publication-page .external-measure-card {
    display: block;
    text-decoration: none !important;
    cursor: pointer;
    border: 1px solid rgba(15, 39, 71, 0.08);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.debt-publication-page .external-measure-card:hover {
    transform: translateY(-3px);
    border-color: rgba(226, 177, 44, 0.45) !important;
    box-shadow: 0 16px 34px rgba(15, 39, 71, 0.12);
}

.debt-publication-page .external-measure-card.active {
    border-color: rgba(226, 177, 44, 0.75) !important;
    background:
        linear-gradient(135deg, rgba(226, 177, 44, 0.14), rgba(255, 255, 255, 0.96)) !important;
}

.debt-publication-page .external-measure-card.active .kpi-label {
    color: #8a6508;
}

.debt-publication-page .external-measure-card.active .kpi-value {
    color: #071b33;
}

.debt-publication-page .external-measure-card.active .kpi-meta {
    color: #52657e;
}

@media (max-width: 1180px) {
    .debt-publication-page .external-debt-filter-form,
    .debt-publication-page .external-measure-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .debt-publication-page .external-debt-filter-form,
    .debt-publication-page .external-measure-kpi-grid {
        grid-template-columns: 1fr !important;
    }
}


.debt-publication-page .external-debt-filter-form {
    grid-template-columns: 1.2fr 1.4fr 0.75fr 0.75fr auto !important;
}

.external-pie-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.external-pie-card {
    display: block;
    min-height: 245px;
    padding: 18px !important;
    text-decoration: none !important;
    border: 1px solid rgba(15, 39, 71, 0.08);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.external-pie-card:hover {
    transform: translateY(-3px);
    border-color: rgba(226, 177, 44, 0.45) !important;
    box-shadow: 0 16px 34px rgba(15, 39, 71, 0.12);
}

.external-pie-card.active {
    border-color: rgba(226, 177, 44, 0.75) !important;
    background:
        linear-gradient(135deg, rgba(226, 177, 44, 0.14), rgba(255, 255, 255, 0.96)) !important;
}

.external-pie-card-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.external-pie-kicker {
    display: block;
    color: #506380;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.external-pie-card h3 {
    margin: 4px 0 0;
    color: #071b33;
    font-size: 1.05rem;
    font-weight: 900;
}

.external-pie-year {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    min-height: 30px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(226, 177, 44, 0.14);
    color: #8a6508;
    font-size: 0.8rem;
    font-weight: 900;
}

.external-pie-card-body {
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.external-pie-chart-wrap {
    position: relative;
    width: 105px;
    height: 105px;
}

.external-pie-stats {
    display: grid;
    gap: 8px;
}

.external-pie-stats div {
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(15, 39, 71, 0.045);
}

.external-pie-stats span {
    display: block;
    color: #506380;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.external-pie-stats strong {
    display: block;
    margin-top: 2px;
    color: #071b33;
    font-size: 0.98rem;
    font-weight: 950;
}

.external-pie-stats small {
    display: block;
    margin-top: 2px;
    color: #6b7b91;
    font-size: 0.72rem;
    font-weight: 700;
}

[data-theme="dark"] .external-pie-card h3,
[data-theme="dark"] .external-pie-stats strong {
    color: #ffffff;
}

[data-theme="dark"] .external-pie-kicker,
[data-theme="dark"] .external-pie-stats span,
[data-theme="dark"] .external-pie-stats small {
    color: #aab8d3;
}

[data-theme="dark"] .external-pie-stats div {
    background: rgba(255, 255, 255, 0.055);
}

[data-theme="dark"] .external-pie-card.active {
    background:
        linear-gradient(135deg, rgba(226, 177, 44, 0.18), rgba(15, 27, 53, 0.96)) !important;
}

@media (max-width: 1280px) {
    .external-pie-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .debt-publication-page .external-debt-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 720px) {
    .external-pie-card-grid,
    .debt-publication-page .external-debt-filter-form {
        grid-template-columns: 1fr !important;
    }
}

.external-number-card-body {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.external-number-main,
.external-number-sub {
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(15, 39, 71, 0.055);
}

.external-number-main span,
.external-number-sub span {
    display: block;
    color: #506380;
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.external-number-main strong,
.external-number-sub strong {
    display: block;
    margin-top: 4px;
    color: #071b33;
    font-size: 1.45rem;
    font-weight: 950;
    letter-spacing: 0.02em;
}

.external-number-main small,
.external-number-sub small {
    display: block;
    margin-top: 3px;
    color: #506380;
    font-size: 0.8rem;
    font-weight: 800;
}

.external-number-note {
    margin: 0;
    color: #61728a;
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.35;
}

[data-theme="dark"] .external-number-main,
[data-theme="dark"] .external-number-sub {
    background: rgba(255, 255, 255, 0.055);
}

[data-theme="dark"] .external-number-main strong,
[data-theme="dark"] .external-number-sub strong {
    color: #ffffff;
}

[data-theme="dark"] .external-number-main span,
[data-theme="dark"] .external-number-sub span,
[data-theme="dark"] .external-number-main small,
[data-theme="dark"] .external-number-sub small,
[data-theme="dark"] .external-number-note {
    color: #aab8d3;
}
/* ==========================================================
   Debt Bulletin — composition / creditor visual row
   ========================================================== */

.debt-bulletin-composition-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.debt-bulletin-composition-card {
    min-width: 0;
}

.debt-bulletin-donut-layout {
    display: grid;
    grid-template-columns: minmax(220px, 0.9fr) minmax(240px, 1.1fr);
    align-items: center;
    gap: 28px;
    padding-top: 18px;
}

.debt-bulletin-donut-wrap {
    position: relative;
    width: 100%;
    height: 280px;
}

.debt-bulletin-donut-legend {
    display: grid;
    gap: 14px;
}

@media (max-width: 760px) {
    .debt-bulletin-donut-layout {
        grid-template-columns: 1fr;
    }

    .debt-bulletin-donut-wrap {
        height: 240px;
    }
}

/* ==========================================================
   Debt Bulletin — creditor category donut legend
   ========================================================== */

.debt-bulletin-donut-legend-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color, rgba(148, 163, 184, 0.18));
}

.debt-bulletin-donut-legend-row:last-child {
    border-bottom: 0;
}

.debt-bulletin-donut-legend-label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.debt-bulletin-donut-swatch {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex: 0 0 11px;
}

.debt-bulletin-donut-legend-label > span:last-child {
    font-size: 0.9rem;
}

.debt-bulletin-donut-legend-value {
    display: grid;
    justify-items: end;
    gap: 3px;
    text-align: right;
}

.debt-bulletin-donut-legend-value strong {
    font-size: 1rem;
}

.debt-bulletin-donut-legend-value small {
    opacity: 0.72;
    font-size: 0.78rem;
}

/* ==========================================================
   Debt Bulletin — Top External Creditors
   ========================================================== */

.debt-bulletin-composition-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.debt-bulletin-creditors-card {
    min-width: 0;
}

.debt-bulletin-creditors-chart-wrap {
    position: relative;
    width: 100%;
    height: 340px;
    padding-top: 14px;
}

@media (max-width: 980px) {
    .debt-bulletin-composition-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   Debt Bulletin — Outstanding Debt category trend
   ========================================================== */

.debt-bulletin-category-trend-wrap {
    position: relative;
    width: 100%;
    height: 360px;
    margin-top: 18px;
}

/* ==========================================================
   Debt Bulletin — Debt Service Profile
   ========================================================== */

.debt-bulletin-service-chart-wrap {
    position: relative;
    width: 100%;
    height: 380px;
    margin-top: 18px;
}


/* ==========================================================
   Debt Bulletin — Disbursements and Debt Service
   ========================================================== */

.debt-bulletin-flow-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.debt-bulletin-flow-card {
    min-width: 0;
}

.debt-bulletin-flow-chart-wrap {
    position: relative;
    width: 100%;
    height: 350px;
    margin-top: 18px;
}

.debt-bulletin-chart-empty-state {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 30px;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.6;
    opacity: 0.72;
}

.debt-bulletin-chart-empty-state[hidden] {
    display: none;
}

@media (max-width: 980px) {
    .debt-bulletin-flow-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   Debt Bulletin — three-card outstanding debt overview
   ========================================================== */

.debt-bulletin-overview-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
    margin-bottom: 24px;
}

.debt-bulletin-overview-grid > .dashboard-card {
    min-width: 0;
    width: 100%;
    height: 100%;
}


/* Keep the creditor-category donut readable
   inside the middle one-third-width card. */

.debt-bulletin-overview-grid
.debt-bulletin-donut-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.debt-bulletin-overview-grid
.debt-bulletin-donut-wrap {
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
}

.debt-bulletin-overview-grid
.debt-bulletin-donut-legend {
    width: 100%;
}


/* Collapse cleanly on smaller screens. */

@media (max-width: 1279px) {

    .debt-bulletin-overview-grid {
        grid-template-columns: 1fr;
    }

}



/* ==========================================================
   FIX: remove extra space below overview charts/cards
   and reduce creditor-category donut size
   ========================================================== */

.debt-bulletin-overview-grid {
    align-items: start;
}

.debt-bulletin-overview-grid > .dashboard-card {
    height: auto !important;
    align-self: start;
}


/* --------------------------
   Outstanding External Debt
   -------------------------- */

.debt-bulletin-overview-grid
.debt-bulletin-main-chart-wrap {
    height: auto;
    min-height: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

.debt-bulletin-overview-grid
#outstandingDebtTrendChart {
    display: block;
    width: 100% !important;
    height: 220px !important;
    max-height: 220px !important;
}


/* --------------------------
   Top 10 External Creditors
   -------------------------- */

.debt-bulletin-overview-grid
.debt-bulletin-creditors-chart-wrap {
    height: auto;
    min-height: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

.debt-bulletin-overview-grid
#topExternalCreditorsChart {
    display: block;
    width: 100% !important;
    height: 360px !important;
    max-height: 360px !important;
}


/* --------------------------
   Middle donut / pie card
   -------------------------- */

.debt-bulletin-overview-grid
.debt-bulletin-composition-card {
    height: auto !important;
}

.debt-bulletin-overview-grid
.debt-bulletin-donut-layout {
    gap: 14px;
}

.debt-bulletin-overview-grid
.debt-bulletin-donut-wrap {
    width: 100%;
    max-width: 250px;
    margin: 0 auto;
}

.debt-bulletin-overview-grid
#outstandingCategoryDonutChart {
    display: block;
    width: 100% !important;
    height: 250px !important;
    max-height: 250px !important;
}

.debt-bulletin-overview-grid
.debt-bulletin-donut-legend {
    margin-top: 0;
    padding-top: 0;
}


/* --------------------------
   Remove unnecessary bottom spacing
   inside overview cards
   -------------------------- */

.debt-bulletin-overview-grid
.chart-card-header {
    margin-bottom: 12px;
}

.debt-bulletin-overview-grid
.debt-bulletin-main-chart-wrap:last-child,
.debt-bulletin-overview-grid
.debt-bulletin-creditors-chart-wrap:last-child,
.debt-bulletin-overview-grid
.debt-bulletin-donut-layout:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}



/* ==========================================================
   Debt Bulletin overview
   Final three-card alignment + smaller donut
   ========================================================== */

@media (min-width: 1280px) {

    /* ------------------------------------------------------
       Keep all three cards on the same horizontal baseline
       ------------------------------------------------------ */

    .debt-bulletin-overview-grid {
        align-items: stretch;
    }

    .debt-bulletin-overview-grid > .dashboard-card {
        height: 560px !important;
        min-height: 560px !important;
        display: flex;
        flex-direction: column;
        align-self: stretch;
    }


    /* ------------------------------------------------------
       Give all headers equal vertical space so charts start
       at approximately the same level
       ------------------------------------------------------ */

    .debt-bulletin-overview-grid
    .chart-card-header {
        min-height: 145px;
        margin-bottom: 8px;
        flex: 0 0 auto;
    }


    /* ======================================================
       1. OUTSTANDING EXTERNAL DEBT
       ====================================================== */

    .debt-bulletin-overview-grid
    .debt-bulletin-main-chart-wrap {
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: stretch;
    }

    .debt-bulletin-overview-grid
    #outstandingDebtTrendChart {
        width: 100% !important;
        height: 330px !important;
        max-height: 330px !important;
    }


    /* ======================================================
       2. CREDITOR CATEGORY DONUT — SMALLER
       ====================================================== */

    .debt-bulletin-overview-grid
    .debt-bulletin-composition-card {
        height: 560px !important;
    }

    .debt-bulletin-overview-grid
    .debt-bulletin-donut-layout {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 0;
        padding: 0;
    }

    .debt-bulletin-overview-grid
    .debt-bulletin-donut-wrap {
        width: 190px;
        height: 190px;
        max-width: 190px;
        max-height: 190px;
        margin: 0 auto 4px;
        flex: 0 0 190px;
    }

    .debt-bulletin-overview-grid
    #outstandingCategoryDonutChart {
        width: 190px !important;
        height: 190px !important;
        max-width: 190px !important;
        max-height: 190px !important;
    }


    /* Compact the legend so the middle card is not taller */

    .debt-bulletin-overview-grid
    .debt-bulletin-donut-legend {
        width: 100%;
        margin: 0;
        padding: 0;
        flex: 0 0 auto;
    }

    .debt-bulletin-overview-grid
    .debt-bulletin-donut-legend > * {
        min-height: 0;
    }

    .debt-bulletin-overview-grid
    .debt-bulletin-donut-legend > * + * {
        margin-top: 0;
    }


    /* ======================================================
       3. TOP 10 EXTERNAL CREDITORS
       ====================================================== */

    .debt-bulletin-overview-grid
    .debt-bulletin-creditors-chart-wrap {
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: stretch;
    }

    .debt-bulletin-overview-grid
    #topExternalCreditorsChart {
        width: 100% !important;
        height: 330px !important;
        max-height: 330px !important;
    }

}



/* ==========================================================
   Debt Bulletin overview
   Remove subtitle space + compact donut legend underneath
   ========================================================== */

@media (min-width: 1280px) {

    /* Titles no longer need the large subtitle reservation. */

    .debt-bulletin-overview-grid
    .chart-card-header {
        min-height: 78px;
        margin-bottom: 12px;
    }


    /* Keep donut centered. */

    .debt-bulletin-overview-grid
    .debt-bulletin-donut-wrap {
        margin:
            0
            auto
            10px;
    }


    /* Legend sits directly below the donut. */

    .debt-bulletin-overview-grid
    .debt-bulletin-donut-legend {
        width: 100%;
        max-width: 390px;
        margin:
            0
            auto;
        padding: 0;
    }

}



/* ==========================================================
   FINAL OUTSTANDING DEBT OVERVIEW ALIGNMENT
   ========================================================== */

@media (min-width: 1280px) {

    /* ------------------------------------------------------
       Equal cards
       ------------------------------------------------------ */

    .debt-bulletin-overview-grid {
        align-items: stretch;
        gap: 20px;
    }

    .debt-bulletin-overview-grid > .dashboard-card {
        height: 455px !important;
        min-height: 455px !important;
        max-height: 455px !important;
        display: flex;
        flex-direction: column;
    }


    /* ------------------------------------------------------
       One-line titles + identical header height
       ------------------------------------------------------ */

    .debt-bulletin-overview-grid
    .chart-card-header {
        height: 64px;
        min-height: 64px;
        margin-bottom: 8px;
        align-items: flex-start;
    }

    .debt-bulletin-overview-grid
    .chart-card-header > div:first-child {
        min-width: 0;
        flex: 1 1 auto;
    }

    .debt-bulletin-overview-grid
    .chart-card-header h2 {
        font-size: 23px;
        line-height: 1.15;
        white-space: nowrap;
        margin: 0;
    }

    .debt-bulletin-overview-grid
    .chart-meta-badge {
        flex: 0 0 auto;
        margin-left: 10px;
    }


    /* ======================================================
       LEFT — Outstanding External Debt
       ====================================================== */

    .debt-bulletin-overview-grid
    .debt-bulletin-main-chart-wrap {
        flex: 0 0 auto;
        height: 315px !important;
        min-height: 315px !important;
        margin: 0;
        padding: 0;
    }

    .debt-bulletin-overview-grid
    #outstandingDebtTrendChart {
        width: 100% !important;
        height: 315px !important;
        max-height: 315px !important;
    }


    /* ======================================================
       MIDDLE — Creditor Category
       ====================================================== */

    .debt-bulletin-overview-grid
    .debt-bulletin-donut-layout {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 8px;
        margin: 0;
        padding: 0;
    }


    /* Smaller donut */

    .debt-bulletin-overview-grid
    .debt-bulletin-donut-wrap {
        width: 150px !important;
        height: 150px !important;
        max-width: 150px !important;
        max-height: 150px !important;
        flex: 0 0 150px;
        margin: 4px auto 8px;
    }

    .debt-bulletin-overview-grid
    #outstandingCategoryDonutChart {
        width: 150px !important;
        height: 150px !important;
        max-width: 150px !important;
        max-height: 150px !important;
    }


    /* ------------------------------------------------------
       Legend: ONE ROW directly underneath donut
       ------------------------------------------------------ */

    .debt-bulletin-overview-grid
    .debt-bulletin-donut-legend {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
        max-width: none;
        margin: 0 auto;
        padding: 0;
    }

    .debt-bulletin-overview-grid
    .debt-bulletin-donut-legend > * {
        min-width: 0;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 8px 4px !important;

        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;

        text-align: center;

        border-bottom: 0 !important;
    }

    .debt-bulletin-overview-grid
    .debt-bulletin-donut-legend > * + * {
        margin-top: 0 !important;
    }

    .debt-bulletin-overview-grid
    .debt-bulletin-donut-legend strong {
        font-size: 14px;
        line-height: 1.2;
    }

    .debt-bulletin-overview-grid
    .debt-bulletin-donut-legend span {
        line-height: 1.25;
    }


    /* ======================================================
       RIGHT — Top 10 External Creditors
       ====================================================== */

    .debt-bulletin-overview-grid
    .debt-bulletin-creditors-chart-wrap {
        flex: 0 0 auto;
        height: 315px !important;
        min-height: 315px !important;
        margin: 0;
        padding: 0;
    }

    .debt-bulletin-overview-grid
    #topExternalCreditorsChart {
        width: 100% !important;
        height: 315px !important;
        max-height: 315px !important;
    }

}



/* ==========================================================
   FIX: Creditor-category title / year badge collision
   ========================================================== */

@media (min-width: 1280px) {

    .debt-bulletin-overview-grid
    .debt-bulletin-composition-card
    .chart-card-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        align-items: start;
    }

    .debt-bulletin-overview-grid
    .debt-bulletin-composition-card
    .chart-card-header > div:first-child {
        min-width: 0;
        width: 100%;
    }

    .debt-bulletin-overview-grid
    .debt-bulletin-composition-card
    .chart-card-header h2 {
        font-size: 20px;
        line-height: 1.15;
        white-space: nowrap;
        margin: 0;
        letter-spacing: -0.2px;
    }

    .debt-bulletin-overview-grid
    .debt-bulletin-composition-card
    .chart-meta-badge {
        position: static;
        margin: 0;
        flex: none;
        justify-self: end;
    }

}




/* ==========================================================
   FINAL: compact overview height + charts closer to titles
   ========================================================== */

@media (min-width: 1280px) {

    /* Keep original/full row width */
    .debt-bulletin-overview-grid {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 20px;
        align-items: stretch;
    }


    /* ------------------------------------------------------
       Reduce overall card height
       ------------------------------------------------------ */

    .debt-bulletin-overview-grid > .dashboard-card {
        height: 405px !important;
        min-height: 405px !important;
        max-height: 405px !important;
    }


    /* ------------------------------------------------------
       Move visual area slightly upward toward title
       ------------------------------------------------------ */

    .debt-bulletin-overview-grid
    .chart-card-header {
        height: 52px;
        min-height: 52px;
        margin-bottom: 0;
    }


    /* LEFT — Outstanding External Debt */

    .debt-bulletin-overview-grid
    .debt-bulletin-main-chart-wrap {
        height: 285px !important;
        min-height: 285px !important;
        flex: 0 0 285px;
        margin-top: -4px;
    }

    .debt-bulletin-overview-grid
    #outstandingDebtTrendChart {
        height: 285px !important;
        max-height: 285px !important;
    }


    /* MIDDLE — Creditor Category */

    .debt-bulletin-overview-grid
    .debt-bulletin-donut-layout {
        justify-content: flex-start;
        gap: 4px;
        margin-top: -4px;
    }

    .debt-bulletin-overview-grid
    .debt-bulletin-donut-wrap {
        width: 145px !important;
        height: 145px !important;
        max-width: 145px !important;
        max-height: 145px !important;
        flex: 0 0 145px;
        margin: 0 auto 4px;
    }

    .debt-bulletin-overview-grid
    #outstandingCategoryDonutChart {
        width: 145px !important;
        height: 145px !important;
        max-width: 145px !important;
        max-height: 145px !important;
    }

    .debt-bulletin-overview-grid
    .debt-bulletin-donut-legend > * {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }


    /* RIGHT — Top 10 External Creditors */

    .debt-bulletin-overview-grid
    .debt-bulletin-creditors-chart-wrap {
        height: 285px !important;
        min-height: 285px !important;
        flex: 0 0 285px;
        margin-top: -4px;
    }

    .debt-bulletin-overview-grid
    #topExternalCreditorsChart {
        height: 285px !important;
        max-height: 285px !important;
    }

}



/* ==========================================================
   Overview — move all three visuals slightly upward
   ========================================================== */

@media (min-width: 1280px) {

    .debt-bulletin-overview-grid
    .chart-card-header {
        height: 48px;
        min-height: 48px;
        margin-bottom: 0;
    }

    .debt-bulletin-overview-grid
    .debt-bulletin-main-chart-wrap {
        margin-top: -8px;
    }

    .debt-bulletin-overview-grid
    .debt-bulletin-donut-layout {
        margin-top: -8px;
    }

    .debt-bulletin-overview-grid
    .debt-bulletin-creditors-chart-wrap {
        margin-top: -8px;
    }

}



/* ==========================================================
   Overview — move visuals a little further upward
   ========================================================== */

@media (min-width: 1280px) {

    .debt-bulletin-overview-grid
    .chart-card-header {
        height: 44px;
        min-height: 44px;
        margin-bottom: 0;
    }

    .debt-bulletin-overview-grid
    .debt-bulletin-main-chart-wrap {
        margin-top: -14px;
    }

    .debt-bulletin-overview-grid
    .debt-bulletin-donut-layout {
        margin-top: -14px;
    }

    .debt-bulletin-overview-grid
    .debt-bulletin-creditors-chart-wrap {
        margin-top: -14px;
    }

}



/* ==========================================================
   Overview — reduce card height / remove bottom empty space
   ========================================================== */

@media (min-width: 1280px) {

    /* All three cards remain exactly equal */
    .debt-bulletin-overview-grid > .dashboard-card {
        height: 310px !important;
        min-height: 310px !important;
        max-height: 310px !important;
    }


    /* LEFT — Outstanding External Debt */
    .debt-bulletin-overview-grid
    .debt-bulletin-main-chart-wrap {
        height: 245px !important;
        min-height: 245px !important;
        flex: 0 0 245px;
    }

    .debt-bulletin-overview-grid
    #outstandingDebtTrendChart {
        height: 245px !important;
        max-height: 245px !important;
    }


    /* RIGHT — Top 10 External Creditors */
    .debt-bulletin-overview-grid
    .debt-bulletin-creditors-chart-wrap {
        height: 245px !important;
        min-height: 245px !important;
        flex: 0 0 245px;
    }

    .debt-bulletin-overview-grid
    #topExternalCreditorsChart {
        height: 245px !important;
        max-height: 245px !important;
    }

}



/* ==========================================================
   Debt Service + Disbursements — three-card row
   ========================================================== */

.debt-bulletin-service-flow-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px;
    align-items: stretch;
    margin-bottom: 24px;
}

.debt-bulletin-service-flow-grid > .dashboard-card {
    width: 100%;
    min-width: 0;
}


/* ----------------------------------------------------------
   Desktop compact alignment
   ---------------------------------------------------------- */

@media (min-width: 1280px) {

    .debt-bulletin-service-flow-grid
    > .dashboard-card {
        height: 310px !important;
        min-height: 310px !important;
        max-height: 310px !important;

        display: flex;
        flex-direction: column;
    }


    /* Titles aligned equally across all three cards */

    .debt-bulletin-service-flow-grid
    .chart-card-header {
        height: 48px;
        min-height: 48px;
        margin-bottom: 0;
        flex: 0 0 48px;
    }

    .debt-bulletin-service-flow-grid
    .chart-card-header h2 {
        margin: 0;
        line-height: 1.15;
    }


    /* Debt Service Profile */

    .debt-bulletin-service-flow-grid
    .debt-bulletin-service-chart-wrap {
        height: 245px !important;
        min-height: 245px !important;
        flex: 0 0 245px;
        margin-top: -10px;
    }

    .debt-bulletin-service-flow-grid
    #debtServiceProfileChart {
        width: 100% !important;
        height: 245px !important;
        max-height: 245px !important;
    }


    /* Both Disbursement cards */

    .debt-bulletin-service-flow-grid
    .debt-bulletin-flow-chart-wrap {
        height: 245px !important;
        min-height: 245px !important;
        flex: 0 0 245px;
        margin-top: -10px;
    }

    .debt-bulletin-service-flow-grid
    #disbursementsVsDebtServiceChart,
    .debt-bulletin-service-flow-grid
    #disbursementCategoryChart {
        width: 100% !important;
        height: 245px !important;
        max-height: 245px !important;
    }

}


/* ----------------------------------------------------------
   Smaller screens: stack cleanly
   ---------------------------------------------------------- */

@media (max-width: 1279px) {

    .debt-bulletin-service-flow-grid {
        grid-template-columns: 1fr;
    }

}



/* ==========================================================
   All External Creditors — full-width final visual
   ========================================================== */

@media (min-width: 1280px) {

    #all-external-creditors-section {
        height: 390px;
        min-height: 390px;
    }

    #all-external-creditors-section
    .chart-card-header {
        margin-bottom: 0;
    }

    #all-external-creditors-section
    .debt-bulletin-main-chart-wrap {
        height: 300px !important;
        min-height: 300px !important;
        max-height: 300px !important;
        margin-top: -4px;
        padding-bottom: 0;
    }

    #all-external-creditors-section
    #topExternalCreditorsChart {
        width: 100% !important;
        height: 300px !important;
        max-height: 300px !important;
    }

}

/* ==========================================================
   Debt Bulletin filter layout
   Visual styling intentionally inherited from Debt Stock.
   ========================================================== */

.debt-publication-page
.debt-bulletin-filter-form {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1.2fr)
        minmax(150px, 0.65fr)
        minmax(150px, 0.65fr)
        auto;
}


/* Match Debt Stock filter/card spacing exactly. */

.debt-publication-page
.top-dashboard-tabs
+ .filter-bar-card {
    margin-top: 0 !important;
}


.debt-publication-page
.filter-bar-card {
    margin-bottom:
        var(--filter-to-kpi-gap) !important;
}


/* First visual starts with normal Debt dashboard spacing. */

.debt-publication-page
.debt-bulletin-overview-grid {
    margin-top: 0 !important;
}


/* Responsive behaviour follows Debt Stock pattern. */

@media (max-width: 1200px) {

    .debt-publication-page
    .debt-bulletin-filter-form {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 720px) {

    .debt-publication-page
    .debt-bulletin-filter-form {
        grid-template-columns: 1fr;
    }

}


/* Debt Bulletin filter uses the shared sticky dashboard position. */
.public-dashboard-page.debt-dashboard-page.debt-publication-page
.filter-bar-card {
    position: sticky !important;
}


/* ==========================================================
   FIX: category-trend title / USD billion badge collision
   ========================================================== */

@media (min-width: 1280px) {

    .debt-publication-page
    .debt-bulletin-overview-grid
    .debt-bulletin-creditors-card
    .chart-card-header {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            auto !important;

        column-gap: 12px !important;

        align-items: start !important;

        width: 100% !important;

        height: 44px !important;
        min-height: 44px !important;

        margin-bottom: 0 !important;
    }


    .debt-publication-page
    .debt-bulletin-overview-grid
    .debt-bulletin-creditors-card
    .chart-card-header > div:first-child {
        min-width: 0 !important;
        width: 100% !important;
    }


    .debt-publication-page
    .debt-bulletin-overview-grid
    .debt-bulletin-creditors-card
    .chart-card-header h2 {
        margin: 0 !important;

        font-size: 20px !important;
        line-height: 1.15 !important;

        white-space: nowrap !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }


    .debt-publication-page
    .debt-bulletin-overview-grid
    .debt-bulletin-creditors-card
    .chart-meta-badge {
        position: static !important;

        flex: none !important;

        justify-self: end !important;
        align-self: start !important;

        margin: 0 !important;

        white-space: nowrap !important;

        z-index: 2 !important;
    }

}



/* ==========================================================
   Debt Bulletin — compact chart-card titles
   ========================================================== */

.debt-publication-page
.chart-card-header h2 {
    font-size: 15px !important;
    /* line-height: 1.2 !important; */
    /* letter-spacing: -0.15px; */
}


/*
   The third overview title should fit instead of being
   truncated with an ellipsis.
*/

@media (min-width: 1280px) {

    .debt-publication-page
    .debt-bulletin-overview-grid
    .debt-bulletin-creditors-card
    .chart-card-header h2 {
        font-size: 15px !important;

        white-space: normal !important;

        overflow: visible !important;
        text-overflow: clip !important;
    }

}

/* Debt Bulletin — compact badges */
.debt-publication-page .chart-meta-badge {
    font-size: 11px !important;
    padding: 5px 9px !important;
}
/* Debt Bulletin — compact donut legend */
.debt-publication-page
.debt-bulletin-donut-legend-label > span:last-child {
    font-size: 12px !important;
}

.debt-publication-page
.debt-bulletin-donut-legend-value strong {
    font-size: 13px !important;
}

.debt-publication-page
.debt-bulletin-donut-legend-value small {
    font-size: 11px !important;
}
/* ============================================================
   DEBT BULLETIN — COMPACT GRID + SHARED CARD ZOOM
============================================================ */

/*
   Use the same 16px visual rhythm as the curated Debt cards.
*/

.debt-publication-page
.debt-bulletin-overview-grid {
    gap: 16px !important;
    margin-bottom: 16px !important;
}


.debt-publication-page
.debt-bulletin-service-flow-grid {
    gap: 16px !important;
    margin-bottom: 16px !important;
}


.debt-publication-page
#debt-relief-exchange-rate-section {
    gap: 16px !important;

    /*
       The preceding service row already supplies the vertical
       separation, so do not add another top margin.
    */
    margin-top: 0 !important;
    margin-bottom: 16px !important;
}


.debt-publication-page
#all-external-creditors-section {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
}


/* ------------------------------------------------------------
   Allow zoomed cards to rise above neighbouring cards.
------------------------------------------------------------ */

.debt-publication-page
.debt-bulletin-overview-grid,

.debt-publication-page
.debt-bulletin-service-flow-grid,

.debt-publication-page
#debt-relief-exchange-rate-section {
    position: relative;

    isolation: isolate;

    overflow: visible !important;
}


/* ------------------------------------------------------------
   Normal Bulletin chart cards — same subtle Debt zoom.
------------------------------------------------------------ */

.debt-publication-page
.debt-bulletin-overview-grid
> .dashboard-card,

.debt-publication-page
.debt-bulletin-service-flow-grid
> .dashboard-card,

.debt-publication-page
#debt-relief-exchange-rate-section
> .dashboard-card {
    position: relative;

    z-index: 1;

    transform:
        translateZ(0)
        scale(1);

    transform-origin:
        center center;

    will-change:
        transform,
        box-shadow;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease;
}


.debt-publication-page
.debt-bulletin-overview-grid
> .dashboard-card.is-chart-zoomed,

.debt-publication-page
.debt-bulletin-service-flow-grid
> .dashboard-card.is-chart-zoomed,

.debt-publication-page
#debt-relief-exchange-rate-section
> .dashboard-card.is-chart-zoomed {
    z-index: 80;

    transform:
        translateZ(0)
        scale(1.035);

    box-shadow:
        0 20px 42px
        rgba(0, 0, 0, 0.28);
}


/* Light mode shadow */

[data-theme="light"]
.debt-publication-page
.debt-bulletin-overview-grid
> .dashboard-card.is-chart-zoomed,

[data-theme="light"]
.debt-publication-page
.debt-bulletin-service-flow-grid
> .dashboard-card.is-chart-zoomed,

[data-theme="light"]
.debt-publication-page
#debt-relief-exchange-rate-section
> .dashboard-card.is-chart-zoomed {
    box-shadow:
        0 20px 42px
        rgba(15, 23, 42, 0.16);
}


/* ------------------------------------------------------------
   Full-width All External Creditors card.

   Like the wide Debt/Macro cards:
   - no sideways scale
   - chart area expands vertically
------------------------------------------------------------ */

.debt-publication-page
#all-external-creditors-section {
    position: relative;

    z-index: 1;

    transform: none !important;

    transition:
        height 0.28s ease,
        min-height 0.28s ease,
        box-shadow 0.22s ease;
}


.debt-publication-page
#all-external-creditors-section
.debt-bulletin-main-chart-wrap {
    transition:
        height 0.28s ease,
        min-height 0.28s ease;
}


@media (min-width: 1280px) {

    .debt-publication-page
    #all-external-creditors-section.is-chart-zoomed {
        z-index: 80;

        height: 550px !important;
        min-height: 550px !important;

        transform: none !important;

        box-shadow:
            0 20px 42px
            rgba(0, 0, 0, 0.24);
    }


    .debt-publication-page
    #all-external-creditors-section.is-chart-zoomed
    .debt-bulletin-main-chart-wrap {
        height: 450px !important;
        min-height: 450px !important;
    }


    .debt-publication-page
    #all-external-creditors-section.is-chart-zoomed
    #topExternalCreditorsChart {
        height: 450px !important;
        max-height: 450px !important;
    }


    [data-theme="light"]
    .debt-publication-page
    #all-external-creditors-section.is-chart-zoomed {
        box-shadow:
            0 20px 42px
            rgba(15, 23, 42, 0.16);
    }
}


/* ------------------------------------------------------------
   Responsive safety.

   On tablets/mobile the cards remain full width and stable.
------------------------------------------------------------ */

@media (max-width: 900px) {

    .debt-publication-page
    .debt-bulletin-overview-grid
    > .dashboard-card.is-chart-zoomed,

    .debt-publication-page
    .debt-bulletin-service-flow-grid
    > .dashboard-card.is-chart-zoomed,

    .debt-publication-page
    #debt-relief-exchange-rate-section
    > .dashboard-card.is-chart-zoomed {
        transform: none !important;
    }


    .debt-publication-page
    #all-external-creditors-section.is-chart-zoomed {
        transform: none !important;
    }
}


/* Accessibility */

@media (prefers-reduced-motion: reduce) {

    .debt-publication-page
    .debt-bulletin-overview-grid
    > .dashboard-card,

    .debt-publication-page
    .debt-bulletin-service-flow-grid
    > .dashboard-card,

    .debt-publication-page
    #debt-relief-exchange-rate-section
    > .dashboard-card,

    .debt-publication-page
    #all-external-creditors-section,

    .debt-publication-page
    #all-external-creditors-section
    .debt-bulletin-main-chart-wrap {
        transition: none !important;
    }
}



/* ============================================================
   DEBT BULLETIN — STICKY TABS + FILTERS AS ONE UNIT
============================================================ */

.public-dashboard-page.debt-dashboard-page.debt-publication-page
.dashboard-sticky-controls {
    position: sticky !important;
    top: var(--public-header-height) !important;
    z-index: 50000 !important;

    overflow: visible !important;
}


/* Tabs stay normally positioned inside sticky wrapper */
.public-dashboard-page.debt-dashboard-page.debt-publication-page
.dashboard-sticky-controls
.top-dashboard-tabs {
    position: relative !important;
    top: auto !important;
    z-index: 50002 !important;
}




/* ==========================================================
   FINAL DEBT BULLETIN ANALYTICS LAYOUT
   ========================================================== */


/* ----------------------------------------------------------
   Three equal analytical cards per row
   ---------------------------------------------------------- */

.debt-bulletin-final-grid {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 24px;
    margin-bottom: 24px;
    align-items: stretch;
}


.debt-bulletin-final-grid > .dashboard-card {
    min-width: 0;
    width: 100%;
}


.debt-bulletin-final-grid
.debt-bulletin-main-chart-wrap {
    position: relative;
    width: 100%;
    min-width: 0;
}


.debt-bulletin-final-grid
.debt-bulletin-main-chart-wrap canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}


/* ----------------------------------------------------------
   Desktop — match existing Debt Bulletin card dimensions
   ---------------------------------------------------------- */

@media (min-width: 1280px) {

    .debt-bulletin-final-grid
    > .dashboard-card {
        height: 560px !important;
        min-height: 560px !important;

        display: flex;
        flex-direction: column;

        align-self: stretch;
    }


    /*
       Match the existing card-header alignment so charts
       start on approximately the same horizontal line.
    */

    .debt-bulletin-final-grid
    .chart-card-header {
        min-height: 145px;
        margin-bottom: 8px;
        flex: 0 0 auto;
    }


    .debt-bulletin-final-grid
    .debt-bulletin-main-chart-wrap {
        flex: 1 1 auto;

        height: 385px !important;
        min-height: 385px !important;

        margin: 0;
        padding: 0;
    }

}


/* ----------------------------------------------------------
   Full-width final visuals
   ---------------------------------------------------------- */

.debt-bulletin-final-full-card {
    width: 100%;
    min-width: 0;

    margin-bottom: 24px;
}


.debt-bulletin-final-full-card
.chart-card-header {
    margin-bottom: 12px;
}


.debt-bulletin-full-chart-wrap {
    position: relative;

    width: 100%;
    min-width: 0;
}


.debt-bulletin-full-chart-wrap canvas {
    display: block;

    width: 100% !important;
    height: 100% !important;
}


/* Currency/USD */

.debt-bulletin-fx-chart-wrap {
    height: 500px;
}


/* All External Creditors — deliberately taller because
   the source currently contains about 30 creditors. */

.debt-bulletin-creditors-final-wrap {
    height: 720px;
}


/* ----------------------------------------------------------
   Responsive layout
   ---------------------------------------------------------- */

@media (max-width: 1279px) {

    .debt-bulletin-final-grid {
        grid-template-columns: 1fr;
    }


    .debt-bulletin-final-grid
    > .dashboard-card {
        height: auto !important;
        min-height: 500px !important;
    }


    .debt-bulletin-final-grid
    .debt-bulletin-main-chart-wrap {
        height: 360px !important;
        min-height: 360px !important;
    }

}


@media (max-width: 760px) {

    .debt-bulletin-final-grid {
        gap: 20px;
        margin-bottom: 20px;
    }


    .debt-bulletin-final-grid
    > .dashboard-card {
        min-height: 460px !important;
    }


    .debt-bulletin-final-grid
    .debt-bulletin-main-chart-wrap {
        height: 330px !important;
        min-height: 330px !important;
    }


    .debt-bulletin-fx-chart-wrap {
        height: 430px;
    }


    .debt-bulletin-creditors-final-wrap {
        height: 620px;
    }

}



/* ==========================================================
   FINAL DEBT BULLETIN — COMPACT CARD POLISH
   ========================================================== */


/* ----------------------------------------------------------
   Allow long chart titles to wrap fully.
   Never crop or ellipsize analytical titles.
   ---------------------------------------------------------- */

.debt-bulletin-final-grid
.chart-card-header h2,
.debt-bulletin-final-full-card
.chart-card-header h2 {
    display: block;

    width: 100%;
    max-width: 100%;

    white-space: normal !important;

    overflow: visible !important;
    text-overflow: clip !important;

    overflow-wrap: break-word;
    word-break: normal;

    line-height: 1.18;

    margin-bottom: 4px;
}


.debt-bulletin-final-grid
.chart-card-header p {
    white-space: normal;
    overflow: visible;

    line-height: 1.35;
}


/* ----------------------------------------------------------
   Reduce the excessive space between card header and chart.
   ---------------------------------------------------------- */

@media (min-width: 1280px) {

    .debt-bulletin-final-grid
    > .dashboard-card {
        height: 500px !important;
        min-height: 500px !important;
    }


    .debt-bulletin-final-grid
    .chart-card-header {
        min-height: 100px !important;
        height: auto !important;

        margin-bottom: 0 !important;

        padding-bottom: 4px !important;

        overflow: visible !important;
    }


    .debt-bulletin-final-grid
    .chart-card-header h2 {
        font-size: clamp(
            1rem,
            1.12vw,
            1.25rem
        );
    }


    .debt-bulletin-final-grid
    .debt-bulletin-main-chart-wrap {
        flex: 1 1 auto;

        height: 370px !important;
        min-height: 370px !important;

        margin-top: 0 !important;
        padding-top: 0 !important;
    }

}


/* ----------------------------------------------------------
   Period badge
   ---------------------------------------------------------- */

.debt-final-header-with-badge {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;
}


.debt-final-header-with-badge > div {
    flex: 1 1 auto;
    min-width: 0;
}


.debt-period-badge {
    flex: 0 0 auto;

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

    min-height: 30px;

    padding: 5px 12px;

    border-radius: 999px;

    border: 1px solid
        rgba(198, 150, 25, 0.30);

    background:
        rgba(198, 150, 25, 0.10);

    color: var(
        --public-text-primary,
        #0f2747
    );

    font-size: 0.78rem;
    font-weight: 700;

    white-space: nowrap;
}


/* ----------------------------------------------------------
   Currency/USD small multiples
   ---------------------------------------------------------- */

.debt-fx-small-multiples {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;

    width: 100%;

    margin-top: 4px;
}


.debt-fx-panel {
    min-width: 0;

    border: 1px solid
        rgba(148, 163, 184, 0.22);

    border-radius: 14px;

    padding: 12px 12px 8px;
}


.debt-fx-panel-title {
    margin-bottom: 6px;

    font-size: 0.86rem;
    font-weight: 700;

    color: var(
        --public-text-primary,
        #0f2747
    );
}


.debt-fx-panel-chart {
    position: relative;

    width: 100%;
    height: 300px;
}


.debt-fx-panel-chart canvas {
    display: block;

    width: 100% !important;
    height: 100% !important;
}


@media (max-width: 900px) {

    .debt-fx-small-multiples {
        grid-template-columns: 1fr;
    }


    .debt-fx-panel-chart {
        height: 280px;
    }

}


@media (max-width: 600px) {

    .debt-final-header-with-badge {
        flex-direction: column;
        gap: 8px;
    }

}



/* ==========================================================
   FINAL COMPACT ANALYTICAL CARD SPACING
   ========================================================== */

@media (min-width: 1280px) {

    .debt-bulletin-final-grid
    .chart-card-header {
        min-height: 78px !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;

        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }


    .debt-bulletin-final-grid
    .chart-card-header h2 {
        margin-top: 0 !important;
        margin-bottom: 3px !important;

        line-height: 1.16 !important;
    }


    .debt-bulletin-final-grid
    .chart-card-header p {
        margin-top: 0 !important;
        margin-bottom: 0 !important;

        line-height: 1.25 !important;
    }


    .debt-bulletin-final-grid
    .debt-bulletin-main-chart-wrap {
        margin-top: -4px !important;
        padding-top: 0 !important;
    }

}



/* ==========================================================
   FINAL TIGHTER DEBT ANALYTICS HEADER / CHART SPACING
   ========================================================== */

@media (min-width: 1280px) {

    .debt-bulletin-final-grid
    .chart-card-header {
        min-height: 66px !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .debt-bulletin-final-grid
    .chart-card-header h2 {
        margin-bottom: 2px !important;
    }

    .debt-bulletin-final-grid
    .chart-card-header p {
        margin-bottom: 0 !important;
    }

    .debt-bulletin-final-grid
    .debt-bulletin-main-chart-wrap {
        margin-top: -14px !important;
    }

}