/**
 * UNEP FI official brand palette — single source of truth for portal UI.
 * Use var(--unepfi-*) in CSS; read via getComputedStyle in JS charts.
 */
:root {
    --black: #000;
    --white: #fff;
    --unepfi-red: #e75336;
    --unepfi-light-red: #eea496;
    --unepfi-middle-red: #d06054;
    --unepfi-gray: #f5f5f5;
    --unepfi-darkgray: #808080;
    --unepfi-blue: #009fe3;
    --unepfi-darkblue: #007dbc;
    --unepfi-pagination-blue: #007dbc;
    --unepfi-pagination-darkgray: #333333;
    --unepfi-turcoaz: #346076;
    --unepfi-inverse-color: rgb(8, 8, 8);
    --unepfi-pub-default: #080c0a;

    /* Derived tints for backgrounds and chart fills */
    --unepfi-blue-12: rgba(0, 159, 227, 0.12);
    --unepfi-turcoaz-12: rgba(52, 96, 118, 0.12);
    --unepfi-red-12: rgba(231, 83, 54, 0.12);
    --unepfi-light-red-12: rgba(238, 164, 150, 0.25);
    --unepfi-darkgray-30: rgba(128, 128, 128, 0.3);
    --unepfi-darkblue-12: rgba(0, 125, 188, 0.12);
    --unepfi-dashboard-surface: #f5f5f5;

    /* UNEP FI Approved PPT Palette */
    --ppt-psi-green:   #628174;
    --ppt-prb-green:   #6ab01e;
    --ppt-sea-blue:    #60b0e4;
    --ppt-ocean-teal:  #628086;
    --ppt-red-tint:    #db7c65;
    --ppt-salmon:      #f6a18e;
    --ppt-peach:       #fddcc3;
    --ppt-navy-dark:   #05405d;
    --ppt-steel-teal:  #597c7c;
    --ppt-olive:       #9ea529;
    --ppt-mint:        #bce0ce;
}

.text-unep-primary {
    color: var(--unepfi-blue) !important;
}

.badge-unep-attributed {
    background-color: var(--unepfi-blue-12);
    color: var(--unepfi-blue);
}

/* Outline alerts — colored border + text, no fill. Mirrors Metronic's .badge-outline.
   Dashed, and icon-led in markup: .alert and .form-control share a border-radius and
   near-identical padding, so an unfilled one above a form reads as an empty input.
   Inputs are never dashed and never lead with an icon.

   border-style is set here rather than via Metronic's .border-dashed utility, which
   would also force border-color to its own grey. */
.alert.alert-outline {
    background-color: transparent;
    border-style: dashed;
}

.alert-outline.alert-danger,
.alert-outline.alert-warning {
    border-color: var(--unepfi-red);
    color: var(--unepfi-red);
}

.alert-outline.alert-primary {
    border-color: var(--unepfi-blue);
    color: var(--unepfi-blue);
}

/* Membership chart cards — flat surface across header, body, and plot (no gradient breaks) */
.membership-dashboard-unep .membership-chart-card {
    background-color: var(--unepfi-dashboard-surface);
    border-color: rgba(52, 96, 118, 0.12) !important;
}

.membership-dashboard-unep .membership-chart-card .card-header,
.membership-dashboard-unep .membership-chart-card .card-body {
    background-color: var(--unepfi-dashboard-surface) !important;
    background-image: none !important;
}

.membership-dashboard-unep .membership-chart-card .card-body [id$="_div"],
.membership-dashboard-unep .membership-chart-card .card-body [id^="reg_rank"] {
    background-color: var(--unepfi-dashboard-surface);
}

/* List / ranking panels — default card surface (no chart tint) */
.membership-dashboard-unep .membership-panel-card {
    background-color: var(--white);
    border-color: rgba(52, 96, 118, 0.12) !important;
}

.membership-dashboard-unep .membership-panel-card .card-header,
.membership-dashboard-unep .membership-panel-card .card-body {
    background-color: var(--white) !important;
    background-image: none !important;
}

/* Membership KPI stat cards — white fill, uniform border only (no side accent borders) */
.membership-dashboard-unep .membership-kpi-card {
    background-color: var(--white) !important;
    background-image: none !important;
    border: 1px solid rgba(52, 96, 118, 0.14) !important;
}

/* Highcharts — match chart SVG background to dashboard surface (map legend margins, etc.) */
.membership-dashboard-unep .membership-chart-card .highcharts-background,
.membership-dashboard-unep .membership-chart-card .highcharts-plot-background,
.membership-dashboard-unep .membership-chart-card .highcharts-legend-box {
    fill: var(--unepfi-dashboard-surface) !important;
}

.membership-dashboard-unep .row.g-4 .bg-light-primary {
    background-color: var(--unepfi-blue-12) !important;
}