/* ============================================================
   Africa Intelligence Platform — Global Theme
   Colors:  Primary #213c35 | Secondary #342821
            Body bg #ebeef4 | Panel #ffffff
   Font:    "Open Sans", sans-serif
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600&display=swap');

/* ── CSS Custom Properties ── */
:root {
    /* ── Zayed For Good Foundation brand palette ──
       #203832  PMS 330 U  Deep forest green (primary)
       #AA7D6D  PMS 695 U  Terracotta / warm rose (accent)
       #D7E5D6  PMS 621 U  Soft sage cream (background)
    */

    /* Brand */
    --af-primary:           #203832;
    --af-primary-light:     #2d5248;
    --af-primary-dark:      #142520;
    --af-secondary:         #AA7D6D;
    --af-secondary-light:   #c49a8c;

    /* Backgrounds */
    --af-body-bg:           #D7E5D6;
    --af-panel:             #ffffff;
    --af-panel-alt:         #edf3ec;
    --af-panel-tint:        rgba(32, 56, 50, 0.04);

    /* Text */
    --af-text:              #203832;
    --af-text-muted:        rgba(32, 56, 50, 0.60);
    --af-text-subtle:       rgba(32, 56, 50, 0.40);

    /* Borders & Strokes */
    --af-stroke:            rgba(32, 56, 50, 0.12);
    --af-stroke-strong:     rgba(32, 56, 50, 0.22);
    --af-stroke-soft:       rgba(32, 56, 50, 0.06);

    /* Status */
    --af-good:              #203832;
    --af-warn:              #AA7D6D;
    --af-danger:            #c0392b;

    /* Shadows */
    --af-shadow:            0 18px 45px rgba(32, 56, 50, 0.14);
    --af-shadow-sm:         0 4px 16px rgba(32, 56, 50, 0.08);
    --af-shadow-lg:         0 24px 60px rgba(32, 56, 50, 0.18);

    /* Shape */
    --af-radius:            20px;
    --af-radius-sm:         12px;
    --af-radius-xs:         8px;

    /* Typography */
    --af-font:              "Open Sans", sans-serif;
    --af-mono:              ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                            "Liberation Mono", "Courier New", monospace;
}

/* ── Base Reset ── */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ── Body ── */
body {
    font-family: var(--af-font);
    background-color: var(--af-body-bg);
    color: var(--af-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Common Panel / Card Base ── */
.af-panel {
    background: var(--af-panel);
    border: 1px solid var(--af-stroke);
    border-radius: var(--af-radius);
    box-shadow: var(--af-shadow-sm);
}

/* ── Heading accent bar ── */
.af-panel-head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--af-stroke-soft);
    background: linear-gradient(90deg, rgba(33, 60, 53, 0.06) 0%, transparent 100%);
    border-left: 4px solid var(--af-primary);
}

/* ── Utility: primary-colored text ── */
.af-primary  { color: var(--af-primary); }
.af-secondary { color: var(--af-secondary); }
.af-muted    { color: var(--af-text-muted); }

/* ── Utility: primary button ── */
.af-btn-primary {
    appearance: none;
    background: var(--af-primary);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 10px 20px;
    font-family: var(--af-font);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background .2s ease, box-shadow .2s ease;
    box-shadow: 0 4px 14px rgba(33, 60, 53, 0.25);
}

.af-btn-primary:hover {
    background: var(--af-primary-light);
    box-shadow: 0 6px 20px rgba(33, 60, 53, 0.32);
}

/* ── Active / selected tab accent ── */
.af-tab-active {
    background: var(--af-primary) !important;
    color: #ffffff !important;
}

/* ── KPI Accent borders (for shared kpi blocks) ── */
.kpi:nth-child(1) { border-left-color: var(--af-primary) !important; }
.kpi:nth-child(2) { border-left-color: var(--af-secondary) !important; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(33, 60, 53, 0.18);
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(33, 60, 53, 0.30);
}

/* ── Selection highlight ── */
::selection {
    background: rgba(33, 60, 53, 0.20);
    color: var(--af-primary-dark);
}
.layout .main .container-layout,
#page-africa-country .container-layout > .container > .container-fluid {
    padding: 0 24px 40px 24px !important;
}

#page-africa-country .container-layout {
    padding: 0 !important;
}