/* ==========================================================================
   DRRRP / Rural Road - Programme Identity Theme
   --------------------------------------------------------------------------
   Shared by /ditwah and /rural. Each app declares its programme on <html>:

       data-programme="ditwah"      teal (existing Ditwah look, unchanged)
       data-programme="rural_road"  deep navy + sky blue (Rural Road)

   Loaded after app.min.css. Every Rural override is scoped under
   [data-programme="rural_road"], so no other page is affected.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Programme tokens
   -------------------------------------------------------------------------- */
:root,
[data-programme="ditwah"] {
    --pg-primary: #0F766E;
    --pg-primary-strong: #115E59;
    --pg-primary-soft: #F0FDFA;
    --pg-primary-border: #99F6E4;
    --pg-accent: #2DD4BF;
    --pg-accent-strong: #0D9488;
    --pg-on-dark: #5EEAD4;

    --pg-surface: #F3F6FA;
    --pg-dot: rgba(16, 185, 129, 0.04);

    --pg-sidebar-top: #0C1F2B;
    --pg-sidebar-mid: #0A1824;
    --pg-sidebar-bottom: #081420;
    --pg-sidebar-glow-1: rgba(20, 184, 166, 0.16);
    --pg-sidebar-glow-2: rgba(190, 18, 60, 0.10);

    --pg-active-bg: rgba(15, 118, 110, 0.42);
    --pg-active-bg-2: rgba(15, 118, 110, 0.22);
    --pg-active-border: rgba(45, 212, 191, 0.35);
    --pg-active-icon: #99F6E4;
    --pg-active-shadow: rgba(15, 118, 110, 0.45);

    --pg-chip-bg: #F0FDFA;
    --pg-chip-border: #99F6E4;
    --pg-chip-text: #0F766E;
    --pg-chip-dot: #14B8A6;

    --pg-focus: #0D9488;

    --pg-hero-glow-1: rgba(15, 118, 110, 0.20);
    --pg-hero-glow-2: rgba(45, 212, 191, 0.14);
    --pg-hero-glow-3: rgba(6, 182, 212, 0.18);
    --pg-hero-glow-4: rgba(16, 185, 129, 0.13);
    --pg-hero-glow-5: rgba(168, 85, 247, 0.08);
}

[data-programme="rural_road"] {
    --pg-primary: #1D4ED8;
    --pg-primary-strong: #1E40AF;
    --pg-primary-soft: #EFF6FF;
    --pg-primary-border: #BFDBFE;
    --pg-accent: #38BDF8;
    --pg-accent-strong: #0EA5E9;
    --pg-on-dark: #7DD3FC;

    --pg-surface: #F2F6FC;
    --pg-dot: rgba(29, 78, 216, 0.05);

    --pg-sidebar-top: #0B1E3A;
    --pg-sidebar-mid: #08172C;
    --pg-sidebar-bottom: #06101F;
    --pg-sidebar-glow-1: rgba(56, 189, 248, 0.18);
    --pg-sidebar-glow-2: rgba(29, 78, 216, 0.20);

    --pg-active-bg: rgba(29, 78, 216, 0.48);
    --pg-active-bg-2: rgba(14, 165, 233, 0.23);
    --pg-active-border: rgba(56, 189, 248, 0.45);
    --pg-active-icon: #BAE6FD;
    --pg-active-shadow: rgba(29, 78, 216, 0.55);

    --pg-chip-bg: #EFF6FF;
    --pg-chip-border: #BFDBFE;
    --pg-chip-text: #1E40AF;
    --pg-chip-dot: #0EA5E9;

    --pg-focus: #2563EB;

    --pg-hero-glow-1: rgba(29, 78, 216, 0.28);
    --pg-hero-glow-2: rgba(56, 189, 248, 0.16);
    --pg-hero-glow-3: rgba(14, 165, 233, 0.20);
    --pg-hero-glow-4: rgba(37, 99, 235, 0.16);
    --pg-hero-glow-5: rgba(56, 189, 248, 0.10);
}

/* --------------------------------------------------------------------------
   2. Page canvas
   -------------------------------------------------------------------------- */
body.app-canvas {
    background-color: var(--pg-surface);
    background-image: radial-gradient(var(--pg-dot) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* --------------------------------------------------------------------------
   3. Identity ribbon - a 3px programme colour at the top of the chrome
   -------------------------------------------------------------------------- */
.topbar-premium {
    border-top: 3px solid var(--pg-primary);
}

#sidebar {
    border-top: 3px solid var(--pg-primary);
}

/* --------------------------------------------------------------------------
   4. Programme chip (topbar, desktop)
   -------------------------------------------------------------------------- */
.programme-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: 230px;
    padding: 0.34rem 0.7rem;
    border: 1px solid var(--pg-chip-border);
    border-radius: 999px;
    background: var(--pg-chip-bg);
    color: var(--pg-chip-text);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.2;
    white-space: nowrap;
}

.programme-chip__label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.programme-chip__dot {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--pg-chip-dot);
    box-shadow: 0 0 0 3px var(--pg-primary-soft);
}

.programme-chip--desktop {
    display: none;
}

@media (min-width: 1024px) {
    .programme-chip--desktop {
        display: inline-flex;
    }
}

/* --------------------------------------------------------------------------
   5. Programme switcher
   -------------------------------------------------------------------------- */
.programme-switcher__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-width: 0;
    padding: 0.375rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    background: transparent;
    color: #CBD5E1;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.programme-switcher__link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
}

.programme-switcher__link.is-active {
    background: linear-gradient(135deg, var(--pg-active-bg), var(--pg-active-bg-2));
    border-color: var(--pg-active-border);
    color: #FFFFFF;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 6px 16px -8px var(--pg-active-shadow);
}

.programme-switcher__link .bi {
    font-size: 10px;
}

/* Light variant used inside the mobile drawer */
.programme-switcher__link--drawer {
    padding: 0.5rem 0.75rem;
    border-color: #E2E8F0;
    border-radius: 0.75rem;
    background: #F1F5F9;
    color: #475569;
    font-size: 12px;
}

.programme-switcher__link--drawer:hover {
    background: #E2E8F0;
    color: #0F172A;
}

.programme-switcher__link--drawer.is-active {
    background: linear-gradient(135deg, var(--pg-primary), var(--pg-primary-strong));
    border-color: transparent;
    color: #FFFFFF;
    box-shadow: 0 8px 18px -8px var(--pg-active-shadow);
}

/* --------------------------------------------------------------------------
   6. Brand eyebrow, avatars and status dot
   -------------------------------------------------------------------------- */
.programme-brand-eyebrow {
    color: var(--pg-primary);
}

.programme-logo-dot {
    background: var(--pg-accent);
    box-shadow: 0 0 0 2px var(--pg-sidebar-top);
}

[data-programme="rural_road"] .programme-avatar {
    background-image: linear-gradient(135deg, #38BDF8 0%, #1D4ED8 100%);
    box-shadow: 0 4px 12px -4px rgba(29, 78, 216, 0.55);
}

/* --------------------------------------------------------------------------
   7. Rural Road - topbar
   -------------------------------------------------------------------------- */
[data-programme="rural_road"] .topbar-premium {
    border-bottom-color: #E3EDF9;
    box-shadow: 0 1px 0 rgba(16, 24, 40, 0.02), 0 10px 30px -12px rgba(16, 24, 40, 0.10);
}

[data-programme="rural_road"] .topbar-hamburger:hover {
    background: #EFF6FF;
    color: #1D4ED8;
}

[data-programme="rural_road"] .topbar-link:hover {
    background: rgba(29, 78, 216, 0.06);
    color: #1D4ED8;
}

[data-programme="rural_road"] .topbar-link.active {
    background: rgba(29, 78, 216, 0.10);
    color: #1D4ED8;
    box-shadow: inset 0 0 0 1px rgba(29, 78, 216, 0.20);
}

[data-programme="rural_road"] .topbar-login-btn {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    box-shadow: 0 6px 18px rgba(29, 78, 216, 0.30);
}

[data-programme="rural_road"] .topbar-login-btn:hover {
    box-shadow: 0 10px 26px rgba(29, 78, 216, 0.42);
}

[data-programme="rural_road"] .topbar-link-btn:hover {
    background: rgba(29, 78, 216, 0.04);
    border-color: #2563EB;
    color: #1D4ED8;
}

[data-programme="rural_road"] .topbar-search:focus-within {
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15), 0 4px 16px rgba(0, 0, 0, 0.08);
}

[data-programme="rural_road"] .topbar-user-menu a:hover {
    background: rgba(29, 78, 216, 0.08);
    color: #1D4ED8;
}

[data-programme="rural_road"] .mm-link:hover i {
    color: #1D4ED8;
}

[data-programme="rural_road"] .mm-link.active {
    background: rgba(29, 78, 216, 0.09);
    color: #1D4ED8;
}

[data-programme="rural_road"] .mm-link.active i {
    color: #2563EB;
}

/* --------------------------------------------------------------------------
   8. Rural Road - sidebar
   -------------------------------------------------------------------------- */
[data-programme="rural_road"] #sidebar {
    background:
        radial-gradient(120% 60% at 20% -10%, var(--pg-sidebar-glow-1), transparent 55%),
        radial-gradient(120% 60% at 110% 110%, var(--pg-sidebar-glow-2), transparent 55%),
        linear-gradient(180deg, var(--pg-sidebar-top) 0%, var(--pg-sidebar-mid) 55%, var(--pg-sidebar-bottom) 100%);
    border-right-color: rgba(148, 197, 255, 0.10);
    box-shadow: 0 20px 50px -20px rgba(2, 10, 25, 0.65);
}

[data-programme="rural_road"] #sidebar .sidebar-header-text span:last-child {
    color: var(--pg-on-dark);
    text-shadow: 0 0 12px rgba(56, 189, 248, 0.45);
}

[data-programme="rural_road"] #sidebar .nav-item::before {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.14), rgba(29, 78, 216, 0.10));
}

[data-programme="rural_road"] #sidebar .nav-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

[data-programme="rural_road"] #sidebar .nav-item:hover i {
    color: #7DD3FC;
}

[data-programme="rural_road"] #sidebar .nav-item.active,
[data-programme="rural_road"] #sidebar .nav-item.is-active {
    background: linear-gradient(135deg, var(--pg-active-bg), var(--pg-active-bg-2));
    border-color: var(--pg-active-border);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 8px 24px -8px var(--pg-active-shadow);
}

[data-programme="rural_road"] #sidebar .nav-item.active i {
    color: var(--pg-active-icon);
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.55);
}

[data-programme="rural_road"] #sidebar .nav-item .sidebar-accent {
    background: linear-gradient(180deg, #7DD3FC 0%, #2563EB 60%, #1E40AF 100%);
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.65);
}

[data-programme="rural_road"] #sidebar .user-dropdown a:hover {
    background: rgba(29, 78, 216, 0.28);
    color: #FFFFFF;
}

[data-programme="rural_road"] .sidebar-collapse-btn {
    background: #0B2A4A;
    border-color: rgba(125, 211, 252, 0.18);
    color: #7DD3FC;
}

[data-programme="rural_road"] .sidebar-collapse-btn:hover {
    background: #134E8A;
    color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   9. Rural Road - hero
   -------------------------------------------------------------------------- */
[data-programme="rural_road"] .hero-premium,
[data-programme="rural_road"] .hero-premium.hero-premium--home,
[data-programme="rural_road"] .hero-premium.hero-with-image,
[data-programme="rural_road"] .hero-premium.hero-with-image--left {
    background:
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.13), transparent) center top / 100% 1px no-repeat,
        linear-gradient(180deg, #38BDF8 0%, #1D4ED8 55%, #1E3A8A 100%) left center / 4px 100% no-repeat,
        linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.05) 48%, transparent 66%),
        radial-gradient(900px 500px at 10% 0%, var(--pg-hero-glow-1), transparent 62%),
        linear-gradient(135deg, #061224 0%, #0A1E3C 52%, #061224 100%);
    border-color: rgba(125, 211, 252, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 20px 52px -18px rgba(2, 6, 20, 0.68);
}

[data-programme="rural_road"] .hero-premium::before,
[data-programme="rural_road"] .hero-premium.hero-premium--home::before {
    background:
        radial-gradient(720px 420px at 18% 22%, var(--pg-hero-glow-1), transparent 72%),
        radial-gradient(520px 320px at 28% 18%, var(--pg-hero-glow-2), transparent 74%);
}

[data-programme="rural_road"] .hero-premium::after,
[data-programme="rural_road"] .hero-premium.hero-premium--home::after {
    background:
        radial-gradient(640px 400px at 82% 78%, var(--pg-hero-glow-3), transparent 70%),
        radial-gradient(560px 360px at 88% 44%, var(--pg-hero-glow-4), transparent 70%),
        radial-gradient(420px 280px at 76% 52%, var(--pg-hero-glow-5), transparent 72%);
}

/* Targeted hero accents. Semantic status colours (green/amber/red) are left
   untouched inside the hero. */
.programme-hero-accent {
    color: var(--pg-accent);
}

[data-programme="rural_road"] .programme-hero-chip {
    border-color: #BFDBFE;
    background: #FFFFFF;
    color: #1D4ED8;
}

[data-programme="rural_road"] .programme-hero-chip .bi {
    color: #2563EB;
}

[data-programme="rural_road"] .programme-project-chip__dot {
    background: #2563EB;
}

/* --------------------------------------------------------------------------
   10. Rural Road - primary UI controls
   -------------------------------------------------------------------------- */
[data-programme="rural_road"] .kpi-header-bar {
    background: linear-gradient(120deg, rgba(29, 78, 216, 0.45), rgba(14, 165, 233, 0.45));
}

[data-programme="rural_road"] .kpi-header-icon {
    background: linear-gradient(135deg, #1D4ED8, #0EA5E9);
    box-shadow: 0 8px 18px -8px rgba(29, 78, 216, 0.70);
}

[data-programme="rural_road"] .kpi-header-chip {
    background: #EFF6FF;
    border-color: #BFDBFE;
    color: #1E40AF;
}

[data-programme="rural_road"] .kpi-header-chip:hover {
    background: #DBEAFE;
    color: #1E3A8A;
}

[data-programme="rural_road"] .kpi-header-btn:hover {
    background: #EFF6FF;
    border-color: #BFDBFE;
    color: #1D4ED8;
}

[data-programme="rural_road"] .filter-chip-active {
    background: linear-gradient(135deg, #1D4ED8, #1E40AF);
    box-shadow: 0 3px 10px -2px rgba(29, 78, 216, 0.45);
}

[data-programme="rural_road"] .filter-chip-active:hover {
    background: linear-gradient(135deg, #1E40AF, #1E3A8A);
}

[data-programme="rural_road"] .dim-section-head::before {
    background: linear-gradient(180deg, #0EA5E9, #1D4ED8 55%, #1E40AF);
}

[data-programme="rural_road"] .dim-section-icon {
    background: linear-gradient(135deg, #1D4ED8, #0EA5E9);
    box-shadow: 0 10px 22px -10px rgba(29, 78, 216, 0.70);
}

[data-programme="rural_road"] .dim-seg-ind {
    background: linear-gradient(135deg, #1D4ED8, #2563EB);
    box-shadow: 0 10px 20px -10px rgba(29, 78, 216, 0.80);
}

[data-programme="rural_road"] .dim-seg:not(.is-ready) .dim-seg-btn.is-active {
    background: linear-gradient(135deg, #1D4ED8, #2563EB);
}

[data-programme="rural_road"] .dim-toolbar-btn--primary {
    background: #1D4ED8;
    border-color: #1D4ED8;
}

[data-programme="rural_road"] .dim-toolbar-btn--primary:hover {
    background: #1E40AF;
    border-color: #1E40AF;
}

[data-programme="rural_road"] .pagination-btn.active {
    background: #1D4ED8;
    border-color: #1D4ED8;
}

[data-programme="rural_road"] #idxKpiScope {
    background: #EFF6FF;
    border-color: #BFDBFE;
    color: #1E3A8A;
}

[data-programme="rural_road"] #idxKpiScope .text-teal-500,
[data-programme="rural_road"] #idxKpiScope .text-teal-600,
[data-programme="rural_road"] #idxKpiScope .text-teal-700 {
    color: #1D4ED8 !important;
}

[data-programme="rural_road"] #idxKpiScope button {
    border-color: #BFDBFE;
}

[data-programme="rural_road"] #idxKpiScope button:hover {
    background: #DBEAFE;
}

/* Keyboard focus follows the programme colour */
[data-programme="rural_road"] :focus-visible {
    outline-color: var(--pg-focus);
}

[data-programme="rural_road"] a:focus-visible,
[data-programme="rural_road"] button:focus-visible,
[data-programme="rural_road"] input:focus-visible,
[data-programme="rural_road"] select:focus-visible,
[data-programme="rural_road"] textarea:focus-visible {
    outline-color: var(--pg-focus);
}

/* --------------------------------------------------------------------------
   11. Landing page - colour-coded programme cards
   -------------------------------------------------------------------------- */
.programme-card {
    border-top: 3px solid var(--pc-primary, var(--pg-primary));
}

.programme-card--ditwah {
    --pc-primary: #0F766E;
    --pc-primary-strong: #115E59;
    --pc-soft: #F0FDFA;
}

.programme-card--rural {
    --pc-primary: #1D4ED8;
    --pc-primary-strong: #1E40AF;
    --pc-soft: #EFF6FF;
}

.programme-card--rural .card-shade {
    background: linear-gradient(180deg, rgba(6, 18, 36, 0.90) 0%, rgba(10, 30, 60, 0.84) 100%);
}

@media (min-width: 640px) {
    .programme-card--rural .card-shade {
        background: linear-gradient(90deg, rgba(6, 18, 36, 0.96) 0%, rgba(10, 30, 60, 0.88) 42%, rgba(10, 30, 60, 0.60) 62%, rgba(10, 30, 60, 0.22) 80%, rgba(10, 30, 60, 0) 96%);
    }
}

.programme-card--rural .card-badge {
    background: linear-gradient(135deg, #38BDF8 0%, #1D4ED8 100%);
    box-shadow: 0 10px 24px -10px rgba(29, 78, 216, 0.55);
}

.programme-card--rural .text-teal-600 {
    color: #1D4ED8;
}

.landing-card.programme-card--rural:hover {
    box-shadow: 0 40px 72px -30px rgba(6, 18, 36, 0.55), 0 18px 36px -24px rgba(29, 78, 216, 0.35);
}

.btn-outline-blue {
    border: 1.5px solid rgba(29, 78, 216, 0.45);
    background: #FFFFFF;
    color: #1E40AF;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.btn-outline-blue:hover {
    background: #EFF6FF;
    border-color: rgba(29, 78, 216, 0.80);
    transform: translateY(-2px);
}

.btn-outline-blue i {
    transition: transform 0.25s ease;
}

.btn-outline-blue:hover i {
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
    .btn-outline-blue,
    .btn-outline-blue:hover,
    .btn-outline-blue i,
    .btn-outline-blue:hover i {
        transition: none;
        transform: none;
    }
}

/* Programme colour key shown under the landing cards */
.programme-key {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin-top: 1rem;
    color: #94A3B8;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.programme-key__label {
    margin-right: 0.25rem;
    color: #64748B;
}

.programme-key__item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.programme-key__dot {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
}

.programme-key__dot--ditwah {
    background: #0F766E;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

.programme-key__dot--rural {
    background: #1D4ED8;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12);
}

/* ─── True-color photo hero (mask-free) — shared by all pages ───
   Kills the global .hero-premium navy + aurora tints so the
   hero-weekly-progress-road-slmap.jpg photo shows real colors. */
.hero-premium.hero-photo-true,
.hero-premium.hero-premium--home.hero-photo-true { background: none !important; border-color: transparent; }
.hero-premium.hero-photo-true::before,
.hero-premium.hero-photo-true::after,
.hero-premium.hero-premium--home.hero-photo-true::before,
.hero-premium.hero-premium--home.hero-photo-true::after { display: none !important; content: none !important; }