@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&display=swap');

/* ---------------------------------------------------------------------
   Design tokens
   Deep forest green stays as the identity color - not a generic SaaS
   choice here, it's the tone of the Bangladesh flag and reads as civic/
   institutional, appropriate for a community organization's reporting
   system. A single muted amber is the one accent spent sparingly, on
   the numbers that matter most (dashboard stat, pending status) rather
   than scattered across every element.
--------------------------------------------------------------------- */
:root{
  --primary:#1b5e3f; --primary-dark:#0e3d28; --primary-soft:#e8f2ec;
  --accent:#a9761f; --accent-soft:#f7ecd9;
  --bg:#f6f8f6; --card:#ffffff;
  --text:#1c2622; --muted:#657168; --border:#e3e8e3;
  --danger:#9c3b3b; --danger-soft:#f8e9e9;
  --success:#1b5e3f;
  --radius:10px; --radius-sm:6px;
  --shadow-card:0 1px 2px rgba(20,30,24,.04);
  --shadow-raised:0 6px 20px rgba(14,61,40,.10);
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0;font-family:'Hind Siliguri','Segoe UI',Arial,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;}
a{color:var(--primary);text-decoration:none;}
a:hover{color:var(--primary-dark);}
h1,h2,h3,h4{margin:0 0 12px;font-weight:600;letter-spacing:-0.01em;color:var(--text);}
h3{font-size:16px;}
h4{font-size:14px;color:var(--primary-dark);}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}

/* ---------------------------------------------------------------------
   Login
--------------------------------------------------------------------- */
.login-body{display:flex;align-items:center;justify-content:center;height:100vh;background:radial-gradient(circle at 30% 20%, #1f6b48 0%, #0b3320 70%);}
.login-box{background:#fff;padding:44px 40px;border-radius:14px;width:340px;box-shadow:0 24px 60px rgba(0,0,0,.28);text-align:center;}
.login-box h1{font-size:19px;margin-bottom:0;color:var(--primary-dark);}
.subtitle{color:var(--muted);font-size:13px;margin-top:6px;}
.login-box form{display:flex;flex-direction:column;text-align:left;margin-top:22px;}
.login-box label{font-size:12.5px;margin:10px 0 5px;color:var(--muted);}
.login-logo{max-height:60px;max-width:200px;object-fit:contain;margin-bottom:10px;}

/* ---------------------------------------------------------------------
   Form controls
--------------------------------------------------------------------- */
.login-box input,
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]):not([type=hidden]),
select,textarea{
  padding:9px 11px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:14px;width:100%;
  background:#fff;color:var(--text);transition:border-color .12s;
}
input:focus,select:focus,textarea:focus{border-color:var(--primary);}

/* ---------------------------------------------------------------------
   Buttons
--------------------------------------------------------------------- */
.login-box button, .btn{
  background:var(--primary);color:#fff;border:none;padding:10px 16px;border-radius:var(--radius-sm);
  font-size:13.5px;font-weight:500;cursor:pointer;margin-top:16px;display:inline-block;transition:background .12s;
}
.btn{margin-top:0;}
.btn:hover, .login-box button:hover{background:var(--primary-dark);}
.btn-sm{padding:6px 11px;font-size:12.5px;margin:0;}
.btn-danger{background:var(--danger);}
.btn-link{color:var(--primary);font-size:13px;}
.muted{color:var(--muted);font-size:12px;}

/* ---------------------------------------------------------------------
   App shell / sidebar
--------------------------------------------------------------------- */
.app-shell{display:flex;min-height:100vh;}
.sidebar{
  width:226px; min-width:226px; background:var(--primary-dark); color:#fff;
  display:flex; flex-direction:column; padding:14px 0;
  position:sticky; top:0; align-self:flex-start; height:100vh; overflow-y:auto;
}
.sidebar .brand{font-weight:600;padding:2px 18px 16px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:6px;font-size:14.5px;position:sticky;top:0;background:var(--primary-dark);z-index:2;display:flex;align-items:center;gap:8px;letter-spacing:-0.01em;}
.brand-logo{max-height:28px;max-width:36px;object-fit:contain;}
.sidebar nav{display:flex;flex-direction:column;}
.sidebar nav a{color:#cfe4d8;padding:9px 18px;font-size:13.5px;white-space:nowrap;border-left:3px solid transparent;transition:background .1s;}
.sidebar nav a:hover{background:rgba(255,255,255,.06);color:#fff;}
.sidebar nav a.active{background:rgba(255,255,255,.10);color:#fff;border-left-color:var(--accent);}
.sidebar nav details.nav-group{border-top:1px solid rgba(255,255,255,.07);}
.sidebar nav details.nav-group summary{
  padding:9px 18px;font-size:12.5px;color:#8fbfa0;cursor:pointer;list-style:none;user-select:none;font-weight:500;
}
.sidebar nav details.nav-group summary::-webkit-details-marker{display:none;}
.sidebar nav details.nav-group summary::before{content:'\203a';display:inline-block;width:12px;transition:transform .15s;font-weight:700;}
.sidebar nav details.nav-group[open] summary::before{transform:rotate(90deg);}
.sidebar nav details.nav-group a{padding-left:30px;font-size:13px;}
.sidebar nav details.nav-subgroup summary{padding-left:30px;font-size:12px;color:#a9d0b8;font-weight:400;}
.sidebar nav details.nav-subgroup details.nav-subgroup summary{padding-left:42px;}
.sidebar nav details.nav-subgroup a{padding-left:42px;font-size:12px;}
.sidebar nav details.nav-subgroup details.nav-subgroup a{padding-left:54px;}
.menu-toggle{display:none;}
.main{flex:1;display:flex;flex-direction:column;min-width:0;}

@media (max-width: 860px){
  .app-shell{flex-direction:column;}
  .sidebar{position:relative;height:auto;width:100%;min-width:0;max-height:52px;overflow:hidden;transition:max-height .2s ease;}
  .sidebar.open{max-height:600px;overflow-y:auto;}
  .menu-toggle{display:block;background:none;border:none;color:#fff;font-size:20px;position:absolute;right:14px;top:10px;cursor:pointer;}
  .card{padding:14px;}
  table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;}
  .grid{grid-template-columns:1fr 1fr;}
  .topbar{flex-direction:column;align-items:flex-start;gap:8px;}
  .actions{flex-direction:column;align-items:flex-start;gap:10px;}
}

/* ---------------------------------------------------------------------
   Topbar
--------------------------------------------------------------------- */
.topbar{background:#fff;padding:13px 26px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.topbar h2{margin:0;font-size:16.5px;}
.user-box{display:flex;gap:14px;align-items:center;font-size:13px;color:var(--muted);}
.global-search{flex:1;max-width:320px;margin:0 20px;}
.global-search input{width:100%;padding:7px 14px;border:1px solid var(--border);border-radius:18px;font-size:13px;background:var(--bg);}
.lang-switch{padding:3px 10px;border:1px solid var(--border);border-radius:12px;font-size:11.5px;color:var(--muted);}
.lang-switch.lang-active{background:var(--primary);color:#fff;border-color:var(--primary);}

.content{padding:26px;flex:1;}
.footer{padding:12px 26px;font-size:11.5px;color:var(--muted);border-top:1px solid var(--border);}

/* ---------------------------------------------------------------------
   Tables - subtle row hover instead of zebra stripes, quieter header
--------------------------------------------------------------------- */
table{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-card);border:1px solid var(--border);}
th,td{padding:10px 13px;border-bottom:1px solid var(--border);text-align:left;font-size:13px;font-variant-numeric:tabular-nums;}
th{background:var(--primary-soft);color:var(--primary-dark);font-weight:600;font-size:12.5px;}
tbody tr:hover td{background:#fafcfa;}
tr:last-child td{border-bottom:none;}

/* ---------------------------------------------------------------------
   Cards
--------------------------------------------------------------------- */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;margin-bottom:18px;box-shadow:var(--shadow-card);}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:18px;}

/* Dashboard stat cards - the one place a little more visual weight is earned */
.stat{background:var(--card);border-radius:var(--radius);padding:16px 18px;border:1px solid var(--border);border-left:3px solid var(--primary);display:block;text-decoration:none;transition:box-shadow .15s,transform .15s;}
.stat:hover{box-shadow:var(--shadow-raised);transform:translateY(-1px);}
.stat .num{font-size:25px;font-weight:700;color:var(--primary-dark);font-variant-numeric:tabular-nums;letter-spacing:-0.02em;}
.stat .label{font-size:12px;color:var(--muted);margin-top:2px;}

.alert{padding:11px 15px;border-radius:var(--radius-sm);margin-bottom:16px;font-size:13px;}
.alert-success{background:var(--primary-soft);color:var(--primary-dark);border:1px solid #c9e2d3;}
.alert-error{background:var(--danger-soft);color:var(--danger);border:1px solid #e8c8c8;}

.form-row{margin-bottom:14px;}
.form-row label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px;font-weight:500;}
.actions{margin-bottom:16px;display:flex;justify-content:space-between;align-items:center;}

/* ---------------------------------------------------------------------
   Badges - flat-fill tags rather than heavy pills
--------------------------------------------------------------------- */
.badge{display:inline-block;padding:2px 9px;border-radius:5px;font-size:11px;font-weight:500;}
.badge-active{background:var(--primary-soft);color:var(--primary-dark);}
.badge-inactive{background:#eef0ee;color:#666;}
.badge-pending{background:var(--accent-soft);color:var(--accent);}
.badge-approved{background:var(--primary-soft);color:var(--primary-dark);}
.badge-rejected{background:var(--danger-soft);color:var(--danger);}

.check-list{max-height:320px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px;background:var(--bg);}
.check-list label{display:flex;align-items:center;gap:8px;padding:5px 4px;font-size:13px;font-weight:normal;margin:0;}
.check-list label input{width:auto;}
.tag{display:inline-block;background:var(--primary-soft);color:var(--primary-dark);padding:2px 9px;border-radius:5px;font-size:11px;margin:2px 3px 2px 0;}
.tag-primary{background:var(--primary);color:#fff;}
.inline-form{display:inline;}
.text-danger{color:var(--danger);}
.pagination{margin-top:14px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.report-section summary{padding:7px 0;border-bottom:1px solid var(--border);margin-bottom:4px;font-size:14px;}
.report-section{margin-bottom:14px;}
.pagination .lang-active{background:var(--primary-dark);}
.checkbox-col{width:24px;text-align:center;}
.report-table{font-size:12px;}
.report-table th,.report-table td{padding:7px 9px;text-align:center;}
.report-table th{white-space:nowrap;}
.report-table td.label,.report-table th.label{text-align:left;white-space:nowrap;}
.surplus{color:var(--primary-dark);font-weight:700;}
.deficit{color:var(--danger);font-weight:700;}

@media print {
  .no-print, .sidebar, .topbar, .footer, .actions, .btn, form button, .menu-toggle { display:none !important; }
  .app-shell{display:block;}
  .content{padding:0;}
  body{font-size:11px;}
  table{page-break-inside:auto;box-shadow:none;}
  tr{page-break-inside:avoid;page-break-after:auto;}
  .card{box-shadow:none;border:none;padding:0;}
}