/* =====================================================
   হিলফুল ফুজুল যুগ একতা সংগঠন — Main Stylesheet
   Theme: Green
===================================================== */
:root{
  --primary: #1b7a43;
  --primary-dark: #145c33;
  --primary-light: #e6f4ea;
  --accent: #f2a71b;
  --text: #1f2a24;
  --muted: #5f6f68;
  --bg: #f6fbf7;
  --white: #ffffff;
  --border: #dfeee3;
  --danger: #c0392b;
  --success: #1b7a43;
  --radius: 12px;
  --shadow: 0 4px 16px rgba(20, 92, 51, 0.08);
  --font: 'Hind Siliguri', 'Segoe UI', sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
}
img{max-width:100%; display:block;}
a{text-decoration:none; color:inherit;}
.container{width:100%; max-width:1180px; margin:0 auto; padding:0 20px;}

/* ---------- Header ---------- */
.site-header{
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky; top:0; z-index: 100;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 20px; flex-wrap:wrap;}
.brand-wrapper{display:flex; align-items:center; gap:10px; min-width:0;}
.brand{display:flex; align-items:center; gap:10px; min-width:0;}
.brand-logo{width:42px; height:42px; border-radius:50%; object-fit:cover;}
.brand-name{
  font-weight:700; font-size:1.15rem; color: var(--primary-dark);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block;
}
.nav-toggle{display:none; background:none; border:none; font-size:1.6rem; cursor:pointer; color:var(--primary-dark);}

/* নতুন: Sidebar toggle বাটন (মোবাইলে dash-sidebar খোলার জন্য) */
.sidebar-toggle-btn{
  display:none;
  background: var(--primary-light);
  border:none;
  color: var(--primary-dark);
  font-size:1.3rem;
  width:40px; height:40px;
  border-radius:8px;
  cursor:pointer;
  flex-shrink:0;
  align-items:center;
  justify-content:center;
}
.sidebar-toggle-btn:active{background:var(--border);}

.main-nav{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.main-nav a{padding:8px 14px; border-radius:8px; font-weight:500; color:var(--text); transition:.2s;}
.main-nav a:hover, .main-nav a.active{background:var(--primary-light); color:var(--primary-dark);}
.user-badge{font-size:.9rem; color:var(--muted); white-space:nowrap; font-weight:500;}
.btn-nav{background:var(--primary); color:var(--white) !important; padding:9px 16px !important;}
.btn-nav:hover{background:var(--primary-dark); color:var(--white) !important;}
.btn-nav-accent{background:var(--accent); color:#3a2b00 !important;}
.btn-nav-accent:hover{background:#d6910f; color:#3a2b00 !important;}

/* Mobile sidebar overlay (dash-sidebar drawer এর background dim) */
.sidebar-overlay{
  display:none;
  position:fixed; inset:0;
  background:rgba(0,0,0,0.45);
  z-index:150;
}
.sidebar-overlay.active{display:block;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; padding:12px 24px; border-radius:8px; font-weight:600;
  border:none; cursor:pointer; font-family:var(--font); font-size:1rem; transition:.2s;
}
.btn-primary{background:var(--primary); color:var(--white);}
.btn-primary:hover{background:var(--primary-dark);}
.btn-accent{background:var(--accent); color:#3a2b00;}
.btn-accent:hover{background:#d6910f;}
.btn-outline{background:transparent; border:2px solid var(--primary); color:var(--primary);}
.btn-outline:hover{background:var(--primary); color:var(--white);}
.btn-danger{background:var(--danger); color:var(--white);}
.btn-sm{padding:7px 14px; font-size:.88rem; border-radius:6px;}
.btn-block{width:100%; text-align:center;}

/* ---------- Hero ---------- */
.hero{
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color:var(--white); padding:70px 0; text-align:center;
}
.hero h1{font-size:2.2rem; margin-bottom:14px;}
.hero p{font-size:1.1rem; max-width:700px; margin:0 auto 28px; opacity:.95;}
.hero-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

/* ---------- Stats (Public homepage) ---------- */
.stats-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:-40px auto 40px; max-width:1180px; padding:0 20px;
}
.stat-card{
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px;
  text-align:center; border-top:4px solid var(--primary);
}
.stat-card .num{font-size:1.8rem; font-weight:700; color:var(--primary-dark);}
.stat-card .label{color:var(--muted); font-size:.92rem; margin-top:6px;}

/* ---------- Sections ---------- */
.section{padding:50px 0;}
.section-title{text-align:center; margin-bottom:36px;}
.section-title h2{font-size:1.7rem; color:var(--primary-dark); margin-bottom:8px;}
.section-title p{color:var(--muted);}
.section-alt{background:var(--primary-light);}

/* ---------- Cards ---------- */
.card{
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;
  border:1px solid var(--border);
}
.card-body{padding:20px;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
.activity-card img{height:190px; object-fit:cover; width:100%;}
.activity-card h3{color:var(--primary-dark); margin:12px 0 6px; font-size:1.1rem;}
.activity-meta{color:var(--muted); font-size:.85rem; margin-bottom:10px;}

.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
.gallery-item{border-radius:10px; overflow:hidden; aspect-ratio:1/1;}
.gallery-item img,.gallery-item video{width:100%; height:100%; object-fit:cover;}

/* ---------- Forms ---------- */
.form-box{
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:30px;
  max-width:640px; margin:0 auto; border:1px solid var(--border);
}
.form-group{margin-bottom:18px;}
.form-group label{display:block; margin-bottom:6px; font-weight:500; color:var(--text);}
.form-group .req{color:var(--danger);}
input[type=text], input[type=tel], input[type=email], input[type=password],
input[type=number], input[type=date], input[type=file], select, textarea{
  width:100%; padding:11px 14px; border:1.5px solid var(--border); border-radius:8px;
  font-family:var(--font); font-size:1rem; background:var(--white); color:var(--text);
}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--primary);}
textarea{min-height:110px; resize:vertical;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.help-text{font-size:.82rem; color:var(--muted); margin-top:4px;}

/* ---------- Alerts ---------- */
.alert{padding:13px 18px; border-radius:8px; margin:16px 0; font-weight:500;}
.alert-success{background:#e3f6e9; color:#146c2e; border:1px solid #b7e4c7;}
.alert-error{background:#fdecea; color:#a33127; border:1px solid #f5c6cb;}
.alert-info{background:#e8f1fb; color:#215796; border:1px solid #bcd8f5;}
.alert-warning{background:#fff6e0; color:#8a6100; border:1px solid #ffe29a;}

/* ---------- Badges ---------- */
.badge{display:inline-block; padding:4px 12px; border-radius:20px; font-size:.8rem; font-weight:600;}
.badge-paid{background:#e3f6e9; color:#146c2e;}
.badge-due{background:#fdecea; color:#a33127;}
.badge-pending{background:#fff6e0; color:#8a6100;}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto; background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--border); -webkit-overflow-scrolling:touch;}
table{width:100%; border-collapse:collapse; min-width:600px;}
th, td{padding:12px 16px; text-align:right; border-bottom:1px solid var(--border);}
th{background:var(--primary-light); color:var(--primary-dark); font-weight:600; text-align:right;}
tr:last-child td{border-bottom:none;}
tr:hover{background:#fafdfb;}

/* ---------- Dashboard ---------- */
.dash-layout{display:grid; grid-template-columns:240px 1fr; gap:24px; align-items:start;}
.dash-sidebar{background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; position:sticky; top:90px;}
.dash-sidebar a{display:block; padding:11px 14px; border-radius:8px; margin-bottom:4px; color:var(--text); font-weight:500;}
.dash-sidebar a:hover, .dash-sidebar a.active{background:var(--primary-light); color:var(--primary-dark);}
.dash-sidebar hr{border:none; border-top:1px solid var(--border); margin:10px 0;}
.dash-card{background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px; border:1px solid var(--border);}
.dash-stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px;}
.dash-main{min-width:0;}
.balance-amount{font-size:1.8rem; font-weight:700; color:var(--primary); margin-top:8px; word-break:break-word;}
.notify-card{border-right:5px solid var(--accent);}

/* ---------- Login ---------- */
.login-wrap{min-height:70vh; display:flex; align-items:center; justify-content:center; padding:40px 20px;}

/* ---------- Footer ---------- */
.site-footer{background:var(--primary-dark); color:#eaf5ee; margin-top:60px;}
.footer-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px; padding:44px 20px;}
.footer-grid h4{margin-bottom:12px; color:var(--white);}
.footer-grid a, .footer-grid p{display:block; color:#cfe6d8; margin-bottom:6px; font-size:.92rem;}
.footer-bottom{text-align:center; padding:16px; border-top:1px solid rgba(255,255,255,0.12); font-size:.85rem; color:#bcd9c8;}

.text-center{text-align:center;}
.mt-2{margin-top:20px;} .mb-2{margin-bottom:20px;}

/* ---------- Payment method radio boxes ---------- */
.pay-methods{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px;}
.pay-methods label{
  flex:1; min-width:110px; border:2px solid var(--border); border-radius:10px; padding:14px; text-align:center;
  cursor:pointer; font-weight:600;
}
.pay-methods input{display:none;}
.pay-methods input:checked + span{color:var(--primary-dark);}
.pay-methods label:has(input:checked){border-color:var(--primary); background:var(--primary-light);}

/* =====================================================
   RESPONSIVE
===================================================== */

/* ---- Tablet (≤900px) ---- */
@media (max-width: 900px){
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr;}

  .dash-layout{grid-template-columns:200px 1fr; gap:16px;}
  .dash-sidebar a{padding:10px 12px; font-size:.9rem;}
  .dash-stat-grid{grid-template-columns:repeat(2,1fr);}
}

/* ---- Mobile (≤768px): dash-sidebar off-canvas drawer ---- */
@media (max-width: 768px){
  .sidebar-toggle-btn{display:flex;}
  .user-badge{display:none;}
  .brand-name{font-size:.9rem; max-width:45vw;}
  .btn-nav{padding:7px 10px !important; font-size:.8rem;}

  .dash-layout{display:block;}
  .dash-sidebar{
    position:fixed; top:0; right:-280px;
    height:100vh; width:260px; max-width:80vw;
    border-radius:0; z-index:200;
    overflow-y:auto;
    transition:right .25s ease;
    padding-top:70px;
    display:block;
  }
  .dash-sidebar.open{right:0; box-shadow:-4px 0 20px rgba(0,0,0,0.25);}
  .dash-sidebar a{margin-bottom:2px;}
  .dash-main{width:100%;}
}

/* ---- Small mobile (≤640px) ---- */
@media (max-width: 640px){
  .nav-toggle{display:block;}
  .main-nav:not(#mainNav){
    display:none; flex-direction:column; width:100%; background:var(--white);
    position:absolute; top:100%; left:0; padding:12px 20px; border-bottom:1px solid var(--border);
  }
  .main-nav.open{display:flex;}
  .stats-grid{grid-template-columns:1fr 1fr;}
  .grid-3, .grid-2{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .form-row{grid-template-columns:1fr;}
  .hero h1{font-size:1.6rem;}
}

/* ---- Dashboard stat cards: mobile (≤576px) ---- */
@media (max-width: 576px){
  .dash-stat-grid{grid-template-columns:1fr; gap:10px;}
  .stat-card{
    padding:14px 16px;
    display:flex; align-items:center; justify-content:space-between;
    flex-direction:row-reverse;
    border-top:none;
    border-right:4px solid var(--primary);
    text-align:right;
  }
  .stat-card .num{font-size:1.3rem;}
  .stat-card .label{margin-top:0; font-size:.85rem;}
  .dash-card{padding:16px;}
  .balance-amount{font-size:1.5rem;}
  .grid-3{gap:10px;}
  .card-body{padding:14px; font-size:.9rem;}
  .notify-card{border-right:none; border-left:4px solid var(--accent);}
}

/* ---- Extra small (≤400px) ---- */
@media (max-width: 400px){
  .brand-name{max-width:38vw; font-size:.82rem;}
  .btn-nav{padding:6px 8px !important; font-size:.75rem;}
  .stat-card .num{font-size:1.15rem;}
  .balance-amount{font-size:1.3rem;}
}