:root{
  /* Brand (home) */
  --gold:#c9a84c;
  --gold-lt:#e8c96e;
  --navy:#0f1e35;
  --navy-md:#1a3050;
  --cream:#fdf8f0;

  /* Dashboard palette */
  --dash-bg-1:#f5f7fa;
  --dash-bg-2:#e8ecf1;
  --ink:#0f172a;
  --muted:#64748b;
  --line:#e2e8f0;
  --white:#ffffff;

  /* Accent gradients */
  --grad-warm: linear-gradient(135deg,#ef4444 0%, #f97316 100%);
  --grad-blue: linear-gradient(135deg,#3b82f6 0%, #06b6d4 100%);

  --radius:18px;
  --radius-sm:12px;
  --shadow:0 8px 32px rgba(15,30,53,0.10);
  --shadow-soft:0 10px 26px rgba(2,6,23,0.10);

  --container:1300px;
}

*{margin:0;padding:0;box-sizing:border-box;}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}

body{
  min-height:100vh;
  color:var(--ink);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

body.page-home{
  background:var(--cream);
  color:var(--navy);
  font-family:'DM Sans', sans-serif;
}

body.page-dashboard{
  background:linear-gradient(135deg,var(--dash-bg-1) 0%, var(--dash-bg-2) 100%);
  color:var(--ink);
}

/* ── NAVBAR (shared) ───────────────────────────────────────────── */
.navbar{
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(12px);
  box-shadow:0 2px 16px rgba(15,30,53,0.08);
  position:sticky; top:0; z-index:1000;
}
.nav-container{max-width:var(--container);margin:0 auto;padding:0 40px;}
.nav-top{display:flex;justify-content:space-between;align-items:center;height:68px;}

.nav-logo{
  font-weight:900;
  font-size:20px;
  letter-spacing:0.3px;
  display:flex; align-items:center; gap:8px;
}
.nav-logo span{color:var(--gold);}

.nav-menu-desktop{display:flex;gap:10px;align-items:center;}
.nav-link{
  display:inline-flex;
  padding:10px 16px;
  border-radius:999px;
  font-weight:700;
  font-size:14px;
  color:var(--navy);
  transition:all .2s ease;
}
body.page-dashboard .nav-link{color:var(--ink); font-weight:600;}
.nav-link:hover{background:rgba(15,30,53,0.06);}
body.page-dashboard .nav-link:hover{background:#f1f5f9;}
.nav-link.active{
  background:var(--navy);
  color:#fff;
}
body.page-dashboard .nav-link.active{
  background:var(--grad-warm);
}

.menu-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  cursor:pointer;
  padding:8px;
  border-radius:10px;
  border:none;
  background:transparent;
}
.menu-toggle:hover{background:rgba(15,30,53,0.06);}
.menu-toggle span{
  display:block;
  width:26px;height:3px;
  background:var(--navy);
  border-radius:3px;
  transition:all .25s ease;
}
body.page-dashboard .menu-toggle span{background:var(--ink);}
.menu-toggle.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.menu-toggle.open span:nth-child(2){opacity:0;}
.menu-toggle.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

.nav-menu-mobile{
  display:none;
  padding:12px 0 18px;
  border-top:1px solid rgba(15,30,53,0.08);
}
.nav-menu-mobile.active{display:block;}
.nav-menu-mobile .nav-link{
  display:block;
  padding:14px 16px;
  border-radius:12px;
}

@media(max-width:768px){
  .nav-container{padding:0 18px;}
  .nav-menu-desktop{display:none;}
  .menu-toggle{display:flex;}
}


/*new logo*/
/* Navbar logo image */
.nav-logo--img{ gap:0; }
.nav-logo-img {
    height: auto;
    width: 58px;
    display: block;
}

/* Hero emblem logo image */
.hero-logo-img{
  width:118px;
  height:118px;
  object-fit:contain;
  display:block;
  border-radius: 50%;
}





/* ── HOME PAGE (from your current "contact.html") ───────────────── */
.page{max-width:1100px;margin:0 auto;padding:36px 24px 72px;}
.logo-hero{
  background:linear-gradient(180deg, var(--navy) 0%, #0b1628 100%);
  border-radius:22px;
  padding:54px 28px;
  box-shadow:0 18px 48px rgba(15,30,53,0.20);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.logo-hero:before{
  content:"";
  position:absolute; inset:-120px;
  background:radial-gradient(circle at 50% 30%, rgba(201,168,76,0.18), transparent 55%);
  pointer-events:none;
}
.logo-emblem{display:flex;justify-content:center;margin-bottom:22px;position:relative;}
.logo-ring{
  width:140px;height:140px;border-radius:50%;
  border:2px solid rgba(201,168,76,0.65);
  display:flex;align-items:center;justify-content:center;
  background:#fff;
  box-shadow:0 0 0 18px rgba(201,168,76,0.06);
}
.logo-year{font-family:'Playfair Display', serif;font-weight:900;font-size:28px;color:var(--gold);}
.logo-sub{font-family:'DM Sans',sans-serif;font-weight:700;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.72);}
.logo-hero-title{
  font-family:'Playfair Display', serif;
  color:#fff;
  font-size:clamp(28px,3.4vw,44px);
  font-weight:900;
  margin-bottom:10px;
}
.gold-divider{width:80px;height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:14px auto;}
.logo-hero-sub{color:rgba(255,255,255,0.78);max-width:700px;margin:0 auto 22px;font-size:15px;line-height:1.7;}
.event-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.event-chip{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(201,168,76,0.22);
  color:rgba(255,255,255,0.86);
  padding:10px 14px;
  border-radius:999px;
  font-weight:600;
  font-size:13px;
}

/* Section headers */
.sec-head{text-align:center;margin:56px 0 26px;}
.sec-label{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);font-weight:800;}
.sec-title{font-family:'Playfair Display',serif;font-size:34px;font-weight:900;color:var(--navy);margin-top:10px;}
.sec-line{width:66px;height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:14px auto 0;}

/* Program cards */
.program-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.program-card{
  background:#fff;
  border-radius:16px;
  padding:18px 16px;
  box-shadow:0 10px 22px rgba(15,30,53,0.06);
  border:1px solid rgba(15,30,53,0.06);
  display:flex;gap:14px;align-items:flex-start;
  animation:fadeUp .6s ease backwards;
}
.program-num{width:34px;height:34px;border-radius:12px;background:rgba(201,168,76,0.12);display:flex;align-items:center;justify-content:center;color:var(--gold);font-weight:900;}
.program-time{font-size:12px;font-weight:800;color:var(--muted);margin-bottom:4px;}
.program-name{font-weight:900;color:var(--navy);margin-bottom:4px;}
.program-desc{font-size:12px;color:var(--muted);line-height:1.5;}

/* Committee */
.committee-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.member-card{
  background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 10px 22px rgba(15,30,53,0.06);
  border:1px solid rgba(15,30,53,0.06);
  animation:fadeUp .6s ease backwards;
}
.member-img-wrap{background:linear-gradient(180deg,var(--navy) 0%, #0b1628 100%);padding:20px 14px 16px;text-align:center;position:relative;}
.member-img{width:86px;height:86px;border-radius:50%;border:3px solid rgba(201,168,76,0.55);object-fit:cover;margin:0 auto 10px;}
.member-role-badge{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:10px;
  background:rgba(201,168,76,0.95);
  color:var(--navy);
  padding:6px 10px;
  border-radius:999px;
  font-size:10px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  font-weight:900;
}
.member-body{padding:16px 14px 18px;text-align:center;}
.member-name{font-weight:900;color:var(--navy);margin-bottom:6px;}
.member-detail{font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:10px;}
.member-phone{
  display:inline-flex;gap:8px;align-items:center;
  padding:10px 12px;border-radius:999px;
  background:rgba(15,30,53,0.06);
  font-weight:800;font-size:12px;color:var(--navy);
}

/* Gallery */
.gallery-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:14px;
}
.gallery-item{
  border-radius:16px;
  overflow:hidden;
  background:#eef2f6;
  position:relative;
  cursor:pointer;
  min-height:140px;
  border:1px solid rgba(15,30,53,0.06);
}
.gallery-item.large{grid-row:span 2; min-height:300px;}
.gallery-ph{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);gap:8px;}
.gallery-ph-icon{font-size:24px;}
.gallery-ph-text{font-size:12px;font-weight:700;}
.gallery-img{width:100%;height:100%;object-fit:cover;display:block;}
.gallery-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(15,30,53,0.70));
  opacity:0; transition:opacity .2s ease;
  display:flex;align-items:flex-end; padding:14px;
}
.gallery-item:hover .gallery-overlay{opacity:1;}
.gallery-caption{color:#fff;font-weight:800;font-size:13px;}

.gallery-note{
  margin-top:14px;
  padding:14px 16px;
  background:#fff;
  border-radius:16px;
  border:1px dashed rgba(201,168,76,0.45);
  color:var(--muted);
  font-size:13px;
}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(2,6,23,0.82);display:none;align-items:center;justify-content:center;z-index:2000;padding:18px;}
.lightbox.open{display:flex;}
.lightbox-img{max-width:min(920px,92vw);max-height:82vh;border-radius:18px;box-shadow:0 20px 70px rgba(0,0,0,0.55);}
.lightbox-close{
  position:absolute; top:18px; right:18px;
  width:44px;height:44px;border-radius:999px;
  background:rgba(255,255,255,0.12);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:20px;cursor:pointer;
  border:1px solid rgba(255,255,255,0.16);
}

/* Responsive home grids */
@media(max-width:1100px){
  .program-grid{grid-template-columns:repeat(2,1fr);}
  .committee-grid{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:768px){
  .page{padding:26px 14px 54px;}
  .program-grid{grid-template-columns:1fr;}
  .committee-grid{grid-template-columns:1fr 1fr;}
  .gallery-grid{grid-template-columns:1fr 1fr;}
  .gallery-item.large{grid-column:1/-1; grid-row:auto;}
}
@media(max-width:480px){
  .committee-grid{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:1fr;}
}

/* ── DASHBOARDS (Funding + Expenditure) ───────────────────────── */
.page-dashboard .dashboard-container,
.page-dashboard .page-wrapper{
  max-width:1200px;
  margin:0 auto;
  padding:32px 18px 70px;
}
.page-dashboard .dashboard-header{
  background:rgba(255,255,255,0.92);
  border-radius:16px;
  padding:24px 22px;
  box-shadow:var(--shadow-soft);
  margin-bottom:20px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.page-dashboard .dashboard-header h1{font-size:26px;font-weight:800;}
.page-dashboard .dashboard-header p{color:var(--muted);margin-top:6px;}

.page-dashboard .header-right{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.page-dashboard .period-selector{
  border:1px solid #fecaca;
  background:#fff;
  color:#ef4444;
  padding:8px 12px;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
}
.page-dashboard .period-selector.active{
  background:#fee2e2;
}

.page-dashboard .stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin:16px 0 18px;
}
.page-dashboard .stat-card{
  background:rgba(255,255,255,0.92);
  border-radius:16px;
  padding:18px 16px;
  box-shadow:var(--shadow-soft);
  border:1px solid rgba(2,6,23,0.05);
}
.page-dashboard .stat-label{color:var(--muted);font-weight:700;font-size:13px;}
.page-dashboard .stat-value{font-size:26px;font-weight:900;margin-top:8px;}
.page-dashboard .leaderboard-container,
.page-dashboard .full-card{
  background:rgba(255,255,255,0.92);
  border-radius:18px;
  padding:22px 18px;
  box-shadow:var(--shadow-soft);
  border:1px solid rgba(2,6,23,0.05);
}

/* Funding leaderboard */
.page-dashboard .leaderboard-title{font-size:18px;font-weight:900;margin-bottom:12px;display:flex;gap:10px;align-items:center;}
.page-dashboard .leaderboard-table{display:flex;flex-direction:column;gap:12px;}
.page-dashboard .leaderboard-row{
  display:grid;
  grid-template-columns:44px 54px 1fr 120px 1fr;
  gap:12px;
  align-items:center;
  padding:14px 14px;
  border-radius:14px;
  background:#f8fafc;
  border:1px solid rgba(2,6,23,0.06);
}
.page-dashboard .leaderboard-row.top-1{background:#fff7ed;border-color:#fdba74;}
.page-dashboard .leaderboard-row.top-2{background:#f1f5f9;border-color:#cbd5e1;}
.page-dashboard .leaderboard-row.top-3{background:#fff7ed;border-color:#fed7aa;}
.page-dashboard .rank{font-weight:900;color:#334155;text-align:center;}
.page-dashboard .donor-image{width:46px;height:46px;border-radius:999px;object-fit:cover;border:2px solid #fff;}
.page-dashboard .donor-name{font-weight:900;}
.page-dashboard .donor-about{font-size:12px;color:var(--muted);margin-top:2px;}
.page-dashboard .donation-amount{font-weight:900;color:#0ea5e9;text-align:right;}
.page-dashboard .progress-background{background:#e2e8f0;border-radius:999px;overflow:hidden;}
.page-dashboard .progress-bar{height:28px;border-radius:999px;color:#fff;font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;transition:width .8s ease;}
.page-dashboard .progress-bar.high{background:linear-gradient(90deg,#059669,#34d399);}
.page-dashboard .progress-bar.medium{background:linear-gradient(90deg,#2563eb,#60a5fa);}
.page-dashboard .progress-bar.low{background:linear-gradient(90deg,#7c3aed,#a78bfa);}
.page-dashboard .progress-bar.lowest{background:linear-gradient(90deg,#f59e0b,#fbbf24);}

/* Expenditure extras */
.page-dashboard .section-divider{margin:26px 0 12px;}
.page-dashboard .section-divider h2{font-size:16px;font-weight:900;}
.page-dashboard .donut-chart{display:grid;grid-template-columns:260px 1fr;gap:26px;align-items:center;}
.page-dashboard .donut-container{width:260px;height:260px;margin:0 auto;position:relative;}
.page-dashboard .donut-center{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.page-dashboard .donut-center .donut-value{font-size:28px;font-weight:900;}
.page-dashboard .donut-center .donut-label{font-size:12px;color:var(--muted);margin-top:4px;font-weight:700;}
.page-dashboard .donut-legend{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.page-dashboard .legend-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;background:#f8fafc;border:1px solid rgba(2,6,23,0.06);}
.page-dashboard .legend-left{display:flex;align-items:center;gap:10px;}
.page-dashboard .legend-dot{width:10px;height:10px;border-radius:999px;}
.page-dashboard .legend-name{font-weight:800;font-size:13px;}
.page-dashboard .legend-amount{font-weight:900;font-size:13px;color:#334155;}

.page-dashboard .category-list{display:flex;flex-direction:column;gap:14px;margin-top:12px;}
.page-dashboard .category-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 14px;border-radius:14px;background:#f8fafc;border:1px solid rgba(2,6,23,0.06);}
.page-dashboard .category-info{display:flex;align-items:center;gap:12px;}
.page-dashboard .category-icon{width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:18px;}
.page-dashboard .category-title{font-weight:900;}
.page-dashboard .category-sub{font-size:12px;color:var(--muted);margin-top:2px;font-weight:700;}
.page-dashboard .category-bar-wrap{flex:1;max-width:520px;}
.page-dashboard .category-progress-bg{height:10px;background:#e2e8f0;border-radius:999px;overflow:hidden;}
.page-dashboard .category-progress-bar{height:10px;border-radius:999px;background:var(--grad-blue);transition:width .9s ease;}

.page-dashboard .transaction-table{width:100%;border-collapse:separate;border-spacing:0 10px;margin-top:10px;}
.page-dashboard .transaction-table thead th{font-size:12px;color:var(--muted);text-align:left;padding:0 14px;}
.page-dashboard .transaction-row{background:#f8fafc;border:1px solid rgba(2,6,23,0.06);}
.page-dashboard .transaction-row td{padding:14px 14px;}
.page-dashboard .transaction-desc{font-weight:900;}
.page-dashboard .transaction-category{font-size:12px;color:var(--muted);margin-top:2px;}
.page-dashboard .status-badge{padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800;display:inline-block;}
.page-dashboard .status-badge.completed{background:#dcfce7;color:#065f46;}
.page-dashboard .status-badge.pending{background:#fef3c7;color:#92400e;}
.page-dashboard .status-badge.processing{background:#dbeafe;color:#1e40af;}
.page-dashboard .transaction-amount{font-weight:900;}
.page-dashboard .transaction-amount.expense{color:#ef4444;}

@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:1100px){
  .page-dashboard .stats-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:900px){
  .page-dashboard .donut-chart{grid-template-columns:1fr;justify-items:center;}
  .page-dashboard .donut-legend{grid-template-columns:1fr;width:100%;}
}
@media(max-width:768px){
  .page-dashboard .dashboard-header{flex-direction:column;align-items:flex-start;}
  .page-dashboard .stats-grid{grid-template-columns:1fr;}
  .page-dashboard .leaderboard-row{grid-template-columns:34px 46px 1fr;grid-auto-rows:auto;}
  .page-dashboard .donation-amount, .page-dashboard .progress-container{grid-column:1/-1;}
  .page-dashboard .transaction-table thead th:nth-child(3),
  .page-dashboard .transaction-row td:nth-child(3){display:none;}
}
@media(max-width:480px){
  .page-dashboard .transaction-table thead th:nth-child(2),
  .page-dashboard .transaction-row td:nth-child(2){display:none;}
}
/* Contact page (simple, DB-ready) */
.page-home .contact-card,
.page-dashboard .contact-card,
.contact-card{
  background:#fff;
  border-radius:18px;
  padding:22px;
  box-shadow:0 10px 22px rgba(15,30,53,0.06);
  border:1px solid rgba(15,30,53,0.06);
  /*display:grid;*/
  /*grid-template-columns:1.1fr 1fr;*/
  gap:18px;
}
.contact-left h3{font-size:20px;font-weight:900;color:var(--navy);margin-bottom:8px;font-family:'Playfair Display',serif;}
body.page-dashboard .contact-left h3{color:var(--ink);font-family:'Inter',sans-serif;}
.contact-left p{color:var(--muted);line-height:1.7;font-size:14px;margin-bottom:12px;}
.contact-meta{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:13px;}
.contact-form .field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;}
.contact-form label{font-weight:800;font-size:13px;color:var(--navy);}
body.page-dashboard .contact-form label{color:var(--ink);}
.contact-form input,.contact-form textarea{
  border:1px solid rgba(15,30,53,0.18);
  border-radius:12px;
  padding:12px 12px;
  font-size:14px;
  outline:none;
  background:#fff;
}
body.page-dashboard .contact-form input,
body.page-dashboard .contact-form textarea{border-color:rgba(2,6,23,0.12);}
.contact-form input:focus,.contact-form textarea:focus{
  border-color:rgba(201,168,76,0.75);
  box-shadow:0 0 0 4px rgba(201,168,76,0.16);
}
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;
  border:none;
  background:var(--navy);
  color:#fff;
  font-weight:900;
  padding:12px 14px;
  border-radius:12px;
  cursor:pointer;
}
body.page-dashboard .btn-primary{background:var(--grad-warm);}
@media(max-width:900px){
  .contact-card{grid-template-columns:1fr;}
}