/*
 *   Conjured Upon This Day, Fri Apr 10 2026
 *
 *   From his finger tips, through his IDE to your deployment environment at full throttle with no bugs, loss of data,
 *   fluctuations, signal interference, or doubt—it can only be
 *
 *   ███╗   ███╗ ██████╗ ██████╗ ████████╗██╗███╗   ██╗
 *   ████╗ ████║██╔═══██╗██╔══██╗╚══██╔══╝██║████╗  ██║
 *   ██╔████╔██║███████║║██████╔╝   ██║   ██║██╔██╗ ██║
 *   ██║╚██╔╝██║██╔══██║ ██╔══██╗   ██║   ██║██║╚██╗██║
 *   ██║ ╚═╝ ██║██║  ██║ ██║  ██║   ██║   ██║██║ ╚████║
 *   ╚═╝     ╚═╝╚═╝  ╚═╝ ╚═╝  ╚═╝   ╚═╝   ╚═╝╚═╝  ╚═══╝
 *   M B I T H I — The Legendary Coding Wizard 
 *
 *   📧  martin.mbithi@makueni.go.ke
 *   🌐  www.martmbithi.github.io
 *   🐙  https://github.com/MartMbithi
 *
 *   If this code works, you're welcome.
 *   If it doesn't, it's a feature you haven't understood yet.
 *
 *   
 *   ┌─────────────────────────────────────────────────────────────┐
 *   │          GOVERNMENT OF MAKUENI COUNTY                       │
 *   │          Applications Development Section                   │
 *   │          www.makueni.go.ke | info@makueni.go.ke             │
 *   └─────────────────────────────────────────────────────────────┘
 *
 *   THE GOVERNMENT OF MAKUENI COUNTY
 *   Applications Development Section End-User License Agreement
 *   Copyright (c) 2023 Government of Makueni County
 *   All Rights Reserved.
 *
 *
 *   § 1. GRANT OF LICENSE
 *
 *   This software, designed and engineered by Martin Mbithi on behalf
 *   of the Government of Makueni County Applications Development
 *   Section, is licensed — not sold — to you. You are hereby granted
 *   a revocable, personal, non-exclusive, and non-transferable right
 *   to install and operate this system on ONE (1) authorized government
 *   workstation for official, non-commercial use only.
 *
 *   Commercial deployment requires a separate written license agreement.
 *   Unauthorized sharing, distribution, or public demonstration of this
 *   software is strictly prohibited. If you're thinking about it,
 *   don't. The paperwork alone would ruin your week.
 *
 *
 *   § 2. INTELLECTUAL PROPERTY
 *
 *   This software is the intellectual property of the Government of
 *   Makueni County, engineered by Martin Mbithi under the authority of
 *   the Applications Development Section. It is protected by the
 *   Copyright Act of Kenya, applicable international treaties, and the
 *   quiet determination of people who actually read license agreements.
 *
 *   You shall not remove, alter, or obscure any proprietary notices,
 *   labels, or marks contained within the software. They were placed
 *   there with intention. Respect them accordingly.
 *
 *
 *   § 3. RESTRICTIONS
 *
 *   You shall not, nor shall you permit any third party to:
 *
 *   (a) reverse engineer, decompile, decode, decrypt, disassemble, or
 *       otherwise attempt to derive the source code of this software.
 *       Curiosity is admirable. This is not the place for it;
 *
 *   (b) modify, adapt, distribute, or create derivative works based
 *       upon this software, in whole or in part;
 *
 *   (c) copy (except for one reasonable backup), distribute, publicly
 *       display, transmit, sell, rent, lease, sublicense, or otherwise
 *       exploit the software. It belongs to Makueni County.
 *       You are a guest. A welcome one, but still a guest.
 *
 *
 *   § 4. TERMINATION
 *
 *   This License remains in effect until terminated by either party.
 *   You may terminate at any time by destroying the software and all
 *   copies in your possession. The County may terminate this License
 *   immediately upon breach of any term herein.
 *
 *   Upon termination, all copies shall be destroyed. No exceptions,
 *   no 'I forgot it was on that flash drive.' That flash drive too.
 *
 *
 *   § 5. DISCLAIMER OF WARRANTIES
 *
 *   THIS SOFTWARE IS PROVIDED 'AS IS' WITHOUT WARRANTY OF ANY KIND,
 *   EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE IMPLIED
 *   WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE,
 *   AND NON-INFRINGEMENT.
 *
 *   The Applications Development Section has made every reasonable
 *   effort to ensure reliability, but software, much like government
 *   policy, may occasionally behave in unexpected ways. Use is at
 *   your own risk. Some jurisdictions may afford additional statutory
 *   rights.
 *
 *
 *   § 6. SEVERABILITY
 *
 *   If any provision of this Agreement is held to be invalid or
 *   unenforceable by a court of competent jurisdiction, the remaining
 *   provisions shall continue in full force and effect. One clause
 *   may fall. The rest stand. Much like county infrastructure
 *   during the long rains.
 *
 *
 *   § 7. LIMITATION OF LIABILITY
 *
 *   IN NO EVENT SHALL MARTIN MBITHI, THE GOVERNMENT OF MAKUENI
 *   COUNTY, THE APPLICATIONS DEVELOPMENT SECTION, OR THEIR
 *   RESPECTIVE OFFICERS, EMPLOYEES, OR AGENTS BE LIABLE FOR ANY
 *   INDIRECT, INCIDENTAL, SPECIAL, CONSEQUENTIAL, OR EXEMPLARY
 *   DAMAGES ARISING OUT OF OR IN CONNECTION WITH THE USE OF THIS
 *   SOFTWARE.
 *
 *   Total liability shall not exceed the license fee paid, if any.
 *   If the amount is zero, we trust you see where the math lands.
 *   No drama. Just governance, code, and service delivery.
 *
 */


/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
    --blue:         #2B5EA7;
    --blue-dark:    #1E4578;
    --blue-light:   #EBF0FA;
    --green:        #1B7A3D;
    --green-dark:   #145C2E;
    --green-light:  #E8F5EE;
    --gold:         #E8B625;
    --gold-dark:    #B8900A;
    --gold-light:   #FDF6DC;
    --red:          #C0392B;
    --red-light:    #FDECEA;
    --white:        #FFFFFF;
    --gray-50:      #F8F9FC;
    --gray-100:     #F0F2F5;
    --gray-200:     #DDE1E7;
    --gray-300:     #B0B7C3;
    --gray-600:     #5A6275;
    --gray-700:     #7a8099;
    --gray-800:     #2D3142;
    --text:         #1D2232;

    --radius-sm:  6px;
    --radius-md:  10px;
    --radius-lg:  14px;
    --radius-xl:  20px;

    --shadow-sm:  0 1px 4px  rgba(0,0,0,.07);
    --shadow-md:  0 4px 16px rgba(0,0,0,.10);
    --shadow-lg:  0 8px 30px rgba(0,0,0,.14);

    --ease: 0.2s ease;
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Source Sans 3', 'Segoe UI', Tahoma, sans-serif;
    color: var(--text);
    background: var(--gray-50);
    -webkit-font-smoothing: antialiased;
    line-height: 1.65;
}

h1,h2,h3,h4,h5,h6 { font-weight: 700; color: var(--gray-800); line-height: 1.3; }

a { color: var(--blue); text-decoration: none; transition: color var(--ease); }
a:hover { color: var(--blue-dark); }

img { max-width: 100%; height: auto; }

/* ============================================================
   TOP BAR
   ============================================================ */
.pmts-topbar {
    background: var(--blue-dark);
    color: rgba(255,255,255,.82);
    font-size: .78rem;
    padding: 5px 0;
    letter-spacing: .02em;
}
.pmts-topbar a       { color: rgba(255,255,255,.82); }
.pmts-topbar a:hover { color: var(--gold); }
.pmts-topbar i       { color: var(--gold); }

/* ============================================================
   NAVBAR
   ============================================================ */
.pmts-navbar {
    background: var(--white);
    border-bottom: 3px solid var(--blue);
    box-shadow: var(--shadow-sm);
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 1050;
}
.pmts-navbar .navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}
.pmts-navbar .navbar-brand img { height: 46px; width: auto; }
.pmts-navbar .brand-text       { line-height: 1.25; }
.pmts-navbar .brand-text strong {
    display: block;
    font-size: .8rem;
    font-weight: 800;
    color: var(--blue-dark);
    letter-spacing: -.01em;
}
.pmts-navbar .brand-text small {
    font-size: .64rem;
    font-weight: 600;
    color: var(--green);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.pmts-navbar .nav-link {
    font-weight: 600;
    font-size: .86rem;
    color: var(--gray-600);
    padding: 18px 16px !important;
    position: relative;
    transition: color var(--ease);
}
.pmts-navbar .nav-link:hover,
.pmts-navbar .nav-link.active  { color: var(--blue); }
.pmts-navbar .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0; left: 16px; right: 16px;
    height: 3px;
    background: var(--gold);
    border-radius: 3px 3px 0 0;
}
.pmts-navbar .nav-feedback-btn {
    background: var(--green);
    color: var(--white) !important;
    border-radius: var(--radius-md);
    padding: 8px 18px !important;
    font-weight: 700;
    margin: 10px 0 10px 8px;
    transition: background var(--ease), transform var(--ease);
}
.pmts-navbar .nav-feedback-btn:hover {
    background: var(--green-dark);
    color: var(--white) !important;
    transform: translateY(-1px);
}
.pmts-navbar .nav-feedback-btn::after { display: none; }

/* ============================================================
   PAGE HEADERS — gradient band
   ============================================================ */
.pmts-page-header {
    background: linear-gradient(135deg, #1c3f78 0%, var(--blue) 55%, var(--green) 100%);
    padding: 36px 0 28px;
    color: var(--white);
    position: relative;
    overflow: hidden;
}
.pmts-page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}
.pmts-page-header h1 {
    color: var(--white);
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -.02em;
    margin-bottom: 4px;
}
.pmts-page-header .breadcrumb        { margin: 0; }
.pmts-page-header .breadcrumb-item a { color: rgba(255,255,255,.75); font-size: .85rem; }
.pmts-page-header .breadcrumb-item   { color: rgba(255,255,255,.75); font-size: .85rem; }
.pmts-page-header .breadcrumb-item.active           { color: var(--white); }
.pmts-page-header .breadcrumb-item+.breadcrumb-item::before { color: rgba(255,255,255,.4); }

.hdr-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 999px;
    padding: 4px 14px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--white);
    backdrop-filter: blur(4px);
}

/* ============================================================
   HERO CAROUSEL
   ============================================================ */
.pmts-hero { position: relative; overflow: hidden; }

.pmts-hero .carousel-item { height: 500px; }
.pmts-hero .carousel-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(.5);
}
.pmts-hero .carousel-caption {
    bottom: 0; left: 0; right: 0; top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    padding: 0 8% 60px;
    background: linear-gradient(to right, rgba(20,50,100,.82) 0%, rgba(20,50,100,.35) 60%, transparent 100%);
}
.pmts-hero .carousel-caption .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--gold);
    color: var(--gray-800);
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: 4px 14px;
    border-radius: 999px;
    margin-bottom: 16px;
}
.pmts-hero .carousel-caption h2 {
    color: var(--white);
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.2;
    max-width: 600px;
    margin-bottom: 12px;
    text-shadow: 0 2px 12px rgba(0,0,0,.4);
    letter-spacing: -.02em;
}
.pmts-hero .carousel-caption p {
    color: rgba(255,255,255,.88);
    font-size: 1rem;
    max-width: 500px;
    margin-bottom: 24px;
    line-height: 1.7;
}
.pmts-hero .carousel-indicators [data-bs-target] {
    width: 8px; height: 8px;
    border-radius: 50%;
    border: 2px solid var(--white);
    background: transparent;
    opacity: .6;
}
.pmts-hero .carousel-indicators .active {
    background: var(--gold);
    border-color: var(--gold);
    opacity: 1;
    width: 24px;
    border-radius: 4px;
}
.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--gold);
    color: var(--gray-800);
    font-weight: 800;
    padding: 12px 28px;
    border-radius: var(--radius-md);
    font-size: .9rem;
    transition: all var(--ease);
}
.hero-cta:hover {
    background: #f5d060;
    color: var(--gray-800);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(232,182,37,.4);
}
.hero-cta-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.15);
    color: var(--white);
    font-weight: 700;
    padding: 11px 24px;
    border-radius: var(--radius-md);
    border: 1.5px solid rgba(255,255,255,.4);
    font-size: .9rem;
    transition: all var(--ease);
    backdrop-filter: blur(4px);
}
.hero-cta-outline:hover {
    background: rgba(255,255,255,.25);
    color: var(--white);
}

/* ============================================================
   STATS BAR
   ============================================================ */
.pmts-stats-bar {
    background: var(--blue-dark);
    padding: 20px 0;
}
.pmts-stat-item { text-align: center; padding: 8px 12px; }
/* Clickable variant */
a.pmts-stat-link {
    display: block;
    text-decoration: none;
    border-radius: var(--radius);
    transition: background var(--ease);
}
a.pmts-stat-link:hover {
    background: rgba(255,255,255,.1);
    text-decoration: none;
}
a.pmts-stat-link:hover .stat-number { color: #fff; }
.pmts-stat-item .stat-number {
    font-size: 1.9rem;
    font-weight: 900;
    display: block;
    line-height: 1.1;
    color: var(--gold);
    letter-spacing: -.02em;
}
.pmts-stat-item .stat-label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: rgba(255,255,255,.8);
    margin-top: 2px;
}

/* ============================================================
   SECTIONS
   ============================================================ */
.pmts-section { padding: 56px 0; }
.pmts-section-alt { background: var(--white); }

.section-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}
.section-heading .s-icon {
    width: 42px; height: 42px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.section-heading h2 {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--gray-800);
    margin: 0;
    letter-spacing: -.01em;
}
.section-heading p {
    font-size: .8rem;
    color: var(--gray-700);
    margin: 0;
}

.section-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--blue-dark);
    display: inline-block;
    position: relative;
    margin-bottom: 6px;
}
.section-title::after {
    content: '';
    display: block;
    width: 48px; height: 3px;
    background: var(--gold);
    border-radius: 2px;
    margin-top: 8px;
}
.section-sub {
    color: var(--gray-600);
    font-size: .95rem;
    margin-bottom: 32px;
}

/* ============================================================
   KPI CARDS
   ============================================================ */
.kpi-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 20px 18px 16px;
    box-shadow: var(--shadow-sm);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 3px;
    border-top: 3px solid transparent;
    transition: box-shadow .2s, transform .2s;
    position: relative;
    overflow: hidden;
}
.kpi-card::after {
    content: '';
    position: absolute;
    top: -20px; right: -20px;
    width: 70px; height: 70px;
    border-radius: 50%;
    opacity: .06;
}
.kpi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.kpi-card.blue  { border-top-color: var(--blue);  } .kpi-card.blue::after  { background: var(--blue);  }
.kpi-card.green { border-top-color: var(--green); } .kpi-card.green::after { background: var(--green); }
.kpi-card.gold  { border-top-color: var(--gold);  } .kpi-card.gold::after  { background: var(--gold);  }
.kpi-card.red   { border-top-color: var(--red);   } .kpi-card.red::after   { background: var(--red);   }

.kpi-label { font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.kpi-card.blue  .kpi-label { color: var(--blue);     }
.kpi-card.green .kpi-label { color: var(--green);    }
.kpi-card.gold  .kpi-label { color: var(--gold-dark);}
.kpi-card.red   .kpi-label { color: var(--red);      }

.kpi-icon { font-size: 1.5rem; line-height: 1; margin: 4px 0; }
.kpi-card.blue  .kpi-icon { color: var(--blue);  }
.kpi-card.green .kpi-icon { color: var(--green); }
.kpi-card.gold  .kpi-icon { color: var(--gold);  }
.kpi-card.red   .kpi-icon { color: var(--red);   }

.kpi-value { font-size: 1.7rem; font-weight: 900; color: var(--gray-800); line-height: 1.1; letter-spacing: -.02em; }
.kpi-sub   { font-size: .72rem; color: var(--gray-700); }

/* ============================================================
   PROJECT CARDS
   ============================================================ */
.project-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.project-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}
.project-card-img {
    width: 100%; height: 180px;
    object-fit: cover;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
.project-card-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.project-card:hover .project-card-img img { transform: scale(1.04); }
.project-card-img-placeholder {
    width: 100%; height: 180px;
    background: linear-gradient(135deg, var(--blue-light) 0%, var(--green-light) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--blue);
    opacity: .5;
}
.project-card-body {
    padding: 18px 18px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.project-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.project-card-title {
    font-size: .92rem;
    font-weight: 700;
    color: var(--gray-800);
    line-height: 1.4;
    margin-bottom: 8px;
    flex: 1;
}
.project-card-title a { color: inherit; }
.project-card-title a:hover { color: var(--blue); }
.project-card-location {
    font-size: .77rem;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    gap: 4px;
}
.project-card-footer {
    border-top: 1px solid var(--gray-100);
    padding: 10px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .77rem;
}
.project-card-budget {
    font-weight: 800;
    color: var(--blue-dark);
    font-size: .82rem;
}

/* ============================================================
   STATUS BADGES
   ============================================================ */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: .72rem;
    font-weight: 700;
}
.status-completed   { background: var(--green-light); color: var(--green-dark);    border: 1px solid rgba(27,122,61,.2); }
.status-ongoing     { background: var(--blue-light);  color: var(--blue-dark);     border: 1px solid rgba(43,94,167,.2); }
.status-stalled     { background: var(--red-light);   color: var(--red);           border: 1px solid rgba(192,57,43,.2); }
.status-not-started { background: var(--gray-100);    color: var(--gray-600);      border: 1px solid var(--gray-200); }
.status-procurement { background: #fff8e6;            color: #996600;              border: 1px solid rgba(232,182,37,.35); }
.status-default     { background: var(--gray-100);    color: var(--gray-600);      border: 1px solid var(--gray-200); }
.status-flagship    { background: var(--gold-light);  color: var(--gold-dark);     border: 1px solid rgba(232,182,37,.25); }

/* ============================================================
   FILTER PANEL
   ============================================================ */
.pmts-filter-panel {
    background: var(--white);
    border-bottom: 1px solid var(--gray-200);
    padding: 14px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}
.filter-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.filter-group label {
    font-size: .64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--gray-600);
}
.filter-group .form-select,
.filter-group .form-control {
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-size: .845rem;
    padding: 7px 32px 7px 12px;
    color: var(--gray-800);
    background-color: var(--gray-50);
    transition: border-color .15s, box-shadow .15s;
    min-width: 155px;
}
.filter-group .form-control { padding-right: 12px; min-width: 220px; }
.filter-group .form-select:focus,
.filter-group .form-control:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(43,94,167,.1);
    outline: none;
}
.filter-divider {
    width: 1px; height: 32px;
    background: var(--gray-200);
    margin: 0 4px;
    align-self: flex-end;
    margin-bottom: 4px;
}
.btn-filter {
    align-self: flex-end;
    background: var(--blue);
    color: var(--white);
    border: none;
    border-radius: var(--radius-md);
    padding: 8px 20px;
    font-size: .845rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--ease);
    white-space: nowrap;
}
.btn-filter:hover { background: var(--blue-dark); }
.btn-filter-clear {
    align-self: flex-end;
    background: var(--red-light);
    color: var(--red);
    border: 1.5px solid rgba(192,57,43,.2);
    border-radius: var(--radius-md);
    padding: 7px 14px;
    font-size: .845rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--ease);
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.btn-filter-clear:hover { background: #fbd7d4; color: var(--red); }

/* Result count strip */
.results-strip {
    background: var(--blue-light);
    border-bottom: 1px solid #c8d8f5;
    padding: 8px 0;
    font-size: .82rem;
    color: var(--blue-dark);
    font-weight: 600;
}

/* ============================================================
   SINGLE PROJECT PAGE
   ============================================================ */
.project-detail-hero {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.project-detail-hero-img {
    width: 100%; height: 320px;
    object-fit: cover;
    background: linear-gradient(135deg, var(--blue-light), var(--green-light));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: var(--blue);
    opacity: .3;
}
.project-detail-hero-img img { width: 100%; height: 320px; object-fit: cover; }

/* Budget progress bar */
.budget-bar-wrap { background: var(--gray-100); border-radius: 999px; height: 10px; overflow: hidden; }
.budget-bar-fill { height: 100%; border-radius: 999px; transition: width .6s ease; }

/* Status timeline */
.status-timeline { position: relative; padding-left: 28px; }
.status-timeline::before {
    content: '';
    position: absolute;
    left: 8px; top: 8px; bottom: 8px;
    width: 2px;
    background: var(--gray-200);
}
.timeline-item { position: relative; padding-bottom: 20px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
    position: absolute;
    left: -24px;
    top: 2px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--gray-300);
    display: flex; align-items: center; justify-content: center;
}
.timeline-dot.done    { background: var(--green); border-color: var(--green); }
.timeline-dot.active  { background: var(--blue);  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(43,94,167,.15); }
.timeline-dot.stalled { background: var(--red);   border-color: var(--red); }
.timeline-label { font-size: .82rem; font-weight: 700; color: var(--gray-800); }
.timeline-date  { font-size: .73rem; color: var(--gray-600); }
.timeline-note  { font-size: .8rem;  color: var(--gray-600); margin-top: 4px; }

/* Detail info list */
.detail-info-list { list-style: none; padding: 0; margin: 0; }
.detail-info-list li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid var(--gray-100);
    gap: 12px;
    font-size: .875rem;
}
.detail-info-list li:last-child { border-bottom: none; }
.detail-info-list .info-label { color: var(--gray-600); flex-shrink: 0; max-width: 40%; }
.detail-info-list .info-value { font-weight: 600; color: var(--gray-800); text-align: right; }

/* ============================================================
   GALLERY — Pure CSS Masonry (fastest possible)
   ============================================================ */
.masonry-grid {
    columns: 4;
    column-gap: 14px;
}
.masonry-item {
    break-inside: avoid;
    margin-bottom: 14px;
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    display: block;
}
.masonry-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform .35s ease, filter .35s ease;
}
.masonry-item:hover img { transform: scale(1.03); filter: brightness(.88); }
.masonry-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 100%);
    padding: 24px 12px 12px;
    opacity: 0;
    transition: opacity .25s ease;
}
.masonry-item:hover .masonry-overlay { opacity: 1; }
.masonry-overlay-text {
    font-size: .75rem;
    font-weight: 600;
    color: var(--white);
    line-height: 1.4;
}
/* Filter gallery by status highlight */
.gallery-filter-btn {
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: 999px;
    padding: 5px 16px;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    color: var(--gray-700);
}
.gallery-filter-btn.active,
.gallery-filter-btn:hover {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--white);
}

/* Lightbox */
.pmts-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.92);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.pmts-lightbox.open { display: flex; }
.pmts-lightbox-inner { position: relative; max-width: 90vw; max-height: 90vh; }
.pmts-lightbox-inner img { max-width: 100%; max-height: 85vh; object-fit: contain; border-radius: var(--radius-md); }
.pmts-lightbox-close {
    position: absolute;
    top: -40px; right: 0;
    width: 36px; height: 36px;
    background: rgba(255,255,255,.15);
    border: none; border-radius: 50%;
    color: var(--white);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.pmts-lightbox-close:hover { background: rgba(255,255,255,.3); }
.pmts-lightbox-caption {
    text-align: center;
    color: rgba(255,255,255,.8);
    font-size: .82rem;
    margin-top: 10px;
}

/* ============================================================
   GENERAL CARDS
   ============================================================ */
.pmts-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.pmts-card:hover { box-shadow: var(--shadow-md); }

.dark-panel {
    background: linear-gradient(135deg, #0f2a5e 0%, #1c3f78 100%);
    border-radius: var(--radius-lg);
    padding: 28px;
    color: var(--white);
    position: relative;
    overflow: hidden;
}
.dark-panel::before {
    content: '';
    position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}
.dark-panel > * { position: relative; }
.dark-panel h4, .dark-panel h5, .dark-panel h6 { color: var(--white); }
.dark-panel p { color: rgba(255,255,255,.75); }

/* Dept card */
.dept-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s, transform .2s;
    height: 100%;
    border-left: 4px solid var(--blue);
}
.dept-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.dept-card.green { border-left-color: var(--green); }
.dept-card.gold  { border-left-color: var(--gold); }

/* FAQ accordion */
.faq-item { margin-bottom: 10px; }
.faq-question {
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    font-weight: 700;
    font-size: .92rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    color: var(--gray-800);
    transition: border-color .15s, background .15s;
}
.faq-question:hover, .faq-question.open {
    border-color: var(--blue);
    background: var(--blue-light);
    color: var(--blue-dark);
}
.faq-question .faq-toggle { transition: transform .25s; flex-shrink: 0; }
.faq-question.open .faq-toggle { transform: rotate(180deg); }
.faq-answer {
    display: none;
    background: var(--gray-50);
    border: 1.5px solid var(--gray-200);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    padding: 16px 20px;
    font-size: .88rem;
    color: var(--gray-600);
    line-height: 1.7;
}

/* Feedback form */
.feedback-form-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-sm);
}
.feedback-form-card .form-label {
    font-weight: 600;
    font-size: .85rem;
    color: var(--gray-800);
    margin-bottom: 6px;
}
.feedback-form-card .form-control,
.feedback-form-card .form-select {
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: .9rem;
    background-color: var(--gray-50);
    transition: border-color .15s, box-shadow .15s;
}
.feedback-form-card .form-control:focus,
.feedback-form-card .form-select:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(43,94,167,.1);
    background: var(--white);
}
.feedback-form-card textarea { min-height: 130px; resize: vertical; }

/* Pagination */
.pmts-pagination .page-link {
    border: 1.5px solid var(--gray-200);
    color: var(--blue);
    border-radius: var(--radius-md) !important;
    margin: 0 2px;
    padding: 7px 13px;
    font-size: .85rem;
    font-weight: 600;
    transition: all .15s;
}
.pmts-pagination .page-link:hover { background: var(--blue-light); border-color: var(--blue); }
.pmts-pagination .page-item.active .page-link {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--white);
}

/* Alerts */
.alert-pmts-success {
    background: rgba(27,122,61,.08);
    border: 1px solid rgba(27,122,61,.2);
    color: var(--green-dark);
    border-radius: var(--radius-md);
}
.alert-pmts-danger {
    background: rgba(192,57,43,.08);
    border: 1px solid rgba(192,57,43,.2);
    color: var(--red);
    border-radius: var(--radius-md);
}

/* Honeypot */
.hp-field {
    position: absolute; left: -9999px; top: -9999px;
    opacity: 0; height: 0; width: 0;
    overflow: hidden; pointer-events: none;
}

/* Buttons */
.btn-pmts {
    background: var(--blue);
    color: var(--white);
    border: none;
    font-weight: 700;
    font-size: .88rem;
    padding: 10px 24px;
    border-radius: var(--radius-md);
    transition: all var(--ease);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-pmts:hover { background: var(--blue-dark); color: var(--white); box-shadow: 0 4px 12px rgba(43,94,167,.3); }
.btn-pmts-green {
    background: var(--green);
    color: var(--white);
    border: none;
    font-weight: 700;
    font-size: .88rem;
    padding: 10px 24px;
    border-radius: var(--radius-md);
    transition: all var(--ease);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-pmts-green:hover { background: var(--green-dark); color: var(--white); }
.btn-pmts-outline {
    background: transparent;
    color: var(--blue);
    border: 2px solid var(--blue);
    font-weight: 700;
    font-size: .88rem;
    padding: 8px 22px;
    border-radius: var(--radius-md);
    transition: all var(--ease);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-pmts-outline:hover { background: var(--blue); color: var(--white); }

/* Empty state */
.empty-state {
    text-align: center;
    padding: 64px 24px;
}
.empty-state i { font-size: 3.5rem; color: var(--gray-300); display: block; margin-bottom: 16px; }
.empty-state h5 { color: var(--gray-600); font-weight: 700; }
.empty-state p  { color: var(--gray-300); font-size: .9rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.pmts-footer {
    background: var(--gray-800);
    color: rgba(255,255,255,.72);
    padding: 52px 0 0;
    font-size: .875rem;
}
.pmts-footer h6 {
    color: var(--white);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 18px;
    font-weight: 800;
}
.pmts-footer a          { color: rgba(255,255,255,.62); font-size: .86rem; transition: color var(--ease); }
.pmts-footer a:hover    { color: var(--gold); }
.pmts-footer ul         { list-style: none; padding: 0; margin: 0; }
.pmts-footer ul li      { margin-bottom: 9px; }
.pmts-footer ul li i    { color: var(--gold); margin-right: 6px; }
.footer-brand img       { height: 44px; }
.footer-brand p         { font-size: .83rem; line-height: 1.7; margin-top: 10px; }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    padding: 16px 0;
    margin-top: 40px;
    font-size: .78rem;
    color: rgba(255,255,255,.4);
    text-align: center;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
    .masonry-grid { columns: 3; }
}
@media (max-width: 991px) {
    .pmts-hero .carousel-item     { height: 380px; }
    .pmts-hero .carousel-caption h2 { font-size: 1.7rem; }
    .pmts-navbar .nav-link.active::after { display: none; }
    .masonry-grid { columns: 2; }
}
@media (max-width: 768px) {
    .pmts-hero .carousel-item     { height: 300px; }
    .pmts-hero .carousel-caption  { padding: 0 5% 40px; }
    .pmts-hero .carousel-caption h2 { font-size: 1.3rem; }
    .pmts-hero .carousel-caption p  { display: none; }
    .pmts-section { padding: 40px 0; }
    .pmts-filter-panel { position: relative; }
    .kpi-value    { font-size: 1.4rem; }
    .masonry-grid { columns: 2; column-gap: 10px; }
    .masonry-item { margin-bottom: 10px; }
}
@media (max-width: 576px) {
    .pmts-hero .carousel-item     { height: 260px; }
    .pmts-hero .carousel-caption h2 { font-size: 1.1rem; }
    .pmts-stat-item .stat-number  { font-size: 1.5rem; }
    .masonry-grid { columns: 1; }
    .feedback-form-card { padding: 20px; }
}

/* ============================================================
   DASHBOARD SPECIFIC
   ============================================================ */
.dash-fy-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 28px;
}
.dash-fy-btn {
    padding: 7px 18px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    border: 1.5px solid var(--gray-200);
    background: var(--white);
    color: var(--gray-600);
    cursor: pointer;
    text-decoration: none;
    transition: all .15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.dash-fy-btn:hover, .dash-fy-btn.active {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--white);
}
.dash-fy-btn.active { box-shadow: 0 3px 10px rgba(43,94,167,.3); }

/* Dashboard stat card (clickable link) */
.dash-stat-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 20px 18px 16px;
    box-shadow: var(--shadow-sm);
    border-top: 3px solid transparent;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s, transform .2s;
    position: relative;
    overflow: hidden;
    height: 100%;
}
.dash-stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; }
.dash-stat-card::after {
    content: '';
    position: absolute;
    top: -20px; right: -20px;
    width: 80px; height: 80px;
    border-radius: 50%;
    opacity: .05;
}
.dash-stat-card.all        { border-top-color: var(--blue);   } .dash-stat-card.all::after        { background:var(--blue);   }
.dash-stat-card.completed  { border-top-color: var(--green);  } .dash-stat-card.completed::after  { background:var(--green);  }
.dash-stat-card.ongoing    { border-top-color: #3b82f6;       } .dash-stat-card.ongoing::after    { background:#3b82f6;       }
.dash-stat-card.procure    { border-top-color: var(--gold);   } .dash-stat-card.procure::after    { background:var(--gold);   }
.dash-stat-card.notstarted { border-top-color: var(--gray-300);} .dash-stat-card.notstarted::after{ background:var(--gray-300);}
.dash-stat-card.stalled    { border-top-color: var(--red);    } .dash-stat-card.stalled::after    { background:var(--red);    }

.dash-stat-label  { font-size:.67rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; }
.dash-stat-card.all        .dash-stat-label { color:var(--blue);     }
.dash-stat-card.completed  .dash-stat-label { color:var(--green);    }
.dash-stat-card.ongoing    .dash-stat-label { color:#1d4ed8;         }
.dash-stat-card.procure    .dash-stat-label { color:var(--gold-dark);}
.dash-stat-card.notstarted .dash-stat-label { color:var(--gray-600); }
.dash-stat-card.stalled    .dash-stat-label { color:var(--red);      }

.dash-stat-icon   { font-size:1.6rem; margin:6px 0 4px; line-height:1; }
.dash-stat-card.all        .dash-stat-icon { color:var(--blue);     }
.dash-stat-card.completed  .dash-stat-icon { color:var(--green);    }
.dash-stat-card.ongoing    .dash-stat-icon { color:#3b82f6;         }
.dash-stat-card.procure    .dash-stat-icon { color:var(--gold);     }
.dash-stat-card.notstarted .dash-stat-icon { color:var(--gray-300); }
.dash-stat-card.stalled    .dash-stat-icon { color:var(--red);      }

.dash-stat-count  { font-size:2rem; font-weight:900; color:var(--gray-800); line-height:1.1; letter-spacing:-.02em; }
.dash-stat-budget { font-size:.73rem; color:var(--gray-600); margin-top:2px; }
.dash-stat-arrow  { font-size:.75rem; font-weight:700; margin-top:auto; padding-top:10px; opacity:.5; }
.dash-stat-card:hover .dash-stat-arrow { opacity:1; }

/* Dept breakdown table */
.dash-table { width:100%; border-collapse:collapse; font-size:.84rem; }
.dash-table thead th {
    background: var(--gray-100);
    padding: 10px 14px;
    font-weight:800;
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--gray-600);
    border-bottom: 2px solid var(--gray-200);
    white-space: nowrap;
}
.dash-table tbody td { padding:10px 14px; border-bottom:1px solid var(--gray-100); vertical-align:middle; }
.dash-table tbody tr:hover { background:var(--gray-50); }
.dash-table tbody tr:last-child td { font-weight:800; background:var(--blue-light); border-top:2px solid var(--blue); }
.dash-table .dept-name { font-weight:600; color:var(--gray-800); max-width:240px; }
.dash-table .num-cell  { text-align:right; font-weight:700; font-variant-numeric:tabular-nums; }
.dash-table .num-link  { color:var(--blue); }
.dash-table .num-link:hover { color:var(--blue-dark); text-decoration:underline; }

/* Summary donut stats */
.dash-donut-ring {
    width: 120px; height: 120px;
    border-radius: 50%;
    display: flex; align-items:center; justify-content:center;
    position: relative;
    flex-shrink: 0;
}
.dash-section-tab {
    display:flex; gap:6px; flex-wrap:wrap; margin-bottom:20px;
}
.dash-tab-btn {
    padding:5px 14px;
    border-radius:var(--radius-md);
    font-size:.78rem;
    font-weight:700;
    border:1.5px solid var(--gray-200);
    background:var(--white);
    color:var(--gray-600);
    cursor:pointer;
    transition:all .15s;
}
.dash-tab-btn.active, .dash-tab-btn:hover {
    background:var(--blue-light);
    border-color:var(--blue);
    color:var(--blue-dark);
}

/* Gallery dept cards */
.gallery-dept-card {
    background:var(--white);
    border:1px solid var(--gray-200);
    border-radius:var(--radius-lg);
    overflow:hidden;
    cursor:pointer;
    transition:box-shadow .2s, transform .2s;
    text-decoration:none;
    display:block;
    height:100%;
}
.gallery-dept-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); text-decoration:none; }
.gallery-dept-thumb {
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr 1fr;
    height:160px;
    overflow:hidden;
    gap:2px;
    background:var(--gray-100);
}
.gallery-dept-thumb img { width:100%; height:100%; object-fit:cover; }
.gallery-dept-thumb-single { height:160px; overflow:hidden; }
.gallery-dept-thumb-single img { width:100%; height:100%; object-fit:cover; }
.gallery-dept-info { padding:14px 16px; }
.gallery-dept-info h6 { font-size:.87rem; font-weight:800; color:var(--gray-800); margin:0 0 4px; line-height:1.4; }
.gallery-dept-info span { font-size:.75rem; color:var(--gray-600); }

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */
.pmts-toast-wrap {
    position: fixed;
    bottom: 80px;
    right: 24px;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.pmts-toast {
    background: var(--gray-800);
    color: var(--white);
    border-radius: var(--radius-md);
    padding: 12px 18px 12px 14px;
    font-size: .86rem;
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: all;
    max-width: 320px;
    animation: toastIn .25s ease forwards;
}
.pmts-toast.success { border-left: 4px solid var(--green); }
.pmts-toast.error   { border-left: 4px solid var(--red);   }
.pmts-toast.info    { border-left: 4px solid var(--blue);  }
@keyframes toastIn {
    from { opacity:0; transform:translateX(20px); }
    to   { opacity:1; transform:translateX(0); }
}

/* ============================================================
   IMAGE SKELETON LOADER
   ============================================================ */
.img-skeleton {
    background: linear-gradient(90deg,
        var(--gray-100) 25%,
        var(--gray-200) 50%,
        var(--gray-100) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================================
   WARD SELECT DROPDOWN (AJAX)
   ============================================================ */
.ward-loading { position: relative; }
.ward-loading::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border: 2px solid var(--gray-300);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: translateY(-50%) rotate(360deg); } }

/* ============================================================
   HONEYPOT FIELD (spam protection)
   ============================================================ */
.hp-trap {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    tab-index: -1;
}

/* ============================================================
   PRINT STYLESHEET
   ============================================================ */
@media print {
    .pmts-topbar,
    .pmts-navbar,
    .pmts-filter-panel,
    .pmts-footer,
    .back-to-top,
    .pmts-toast-wrap,
    .btn-pmts,
    .btn-pmts-green,
    .btn-pmts-outline,
    .hero-cta,
    .carousel-control-prev,
    .carousel-control-next,
    .carousel-indicators,
    nav[aria-label="breadcrumb"],
    #pmts-lightbox,
    form.mb-4,
    .dark-panel .btn-pmts-outline { display: none !important; }

    body { background: #fff !important; color: #000 !important; font-size: 11pt; }

    .pmts-page-header {
        background: #1c3f78 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        padding: 16px 0 !important;
    }
    .pmts-page-header h1 { font-size: 16pt !important; }

    .kpi-card, .pmts-card, .project-detail-hero,
    .status-timeline, .detail-info-list { box-shadow: none !important; border: 1px solid #ddd !important; }

    .project-detail-hero-img img,
    .project-card-img img { max-height: 200px !important; }

    .container { max-width: 100% !important; }
    .col-lg-8, .col-lg-4 { width: 100% !important; flex: 0 0 100% !important; }

    a[href]::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #666; }
    a[href^="#"]::after,
    a.btn-pmts::after,
    a.btn-pmts-outline::after,
    a.hero-cta::after { content: '' !important; }

    .masonry-grid { columns: 3 !important; }
}

/* ============================================================
   LEAFLET CHOROPLETH MAP
   ============================================================ */
#choroplethMap {
    z-index: 1;
    background: var(--gray-50);
}
.leaflet-container {
    font-family: 'Source Sans 3', sans-serif !important;
}
.leaflet-popup-content-wrapper {
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 0 !important;
    border: 1px solid var(--gray-200);
}
.leaflet-popup-content {
    margin: 0 !important;
    padding: 16px !important;
}
.leaflet-popup-tip-container { display: none; }
.leaflet-control-zoom a {
    font-family: 'Source Sans 3', sans-serif !important;
}
/* Map attribution */
.leaflet-control-attribution {
    font-size: .65rem !important;
}

/* ============================================================
   LAYOUT TOGGLE (card / list)
   ============================================================ */
.layout-toggle-group {
    display: flex;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.layout-btn {
    background: var(--white);
    border: none;
    padding: 6px 11px;
    font-size: .9rem;
    cursor: pointer;
    color: var(--gray-500);
    transition: background .12s, color .12s;
    line-height: 1;
}
.layout-btn:hover { background: var(--gray-100); color: var(--gray-800); }
.layout-btn.active {
    background: var(--blue);
    color: var(--white);
}

/* Active filter chips in results strip */
.filter-chip-active {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(43,94,167,.1);
    color: var(--blue-dark);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: .75rem;
    font-weight: 700;
}
.filter-clear-link {
    font-size: .75rem;
    color: var(--red);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 4px;
    text-decoration: none;
}
.filter-clear-link:hover { color: var(--red); text-decoration: underline; }

/* List view table tweaks */
#viewList .table > :not(caption) > * > * {
    vertical-align: middle;
}
#viewList .table thead tr {
    background: var(--gray-100);
}