:root{
  --bg:#0b1220;
  --panel:#111827;
  --panel-2:#0f172a;
  --muted:#94a3b8;
  --text:#e5e7eb;
  --line:rgba(148,163,184,.18);
  --brand:#38bdf8;
  --brand-2:#818cf8;
  --success:#22c55e;
  --danger:#ef4444;
  --warning:#f59e0b;
  --info:#06b6d4;
  --shadow:0 20px 60px rgba(0,0,0,.25);
  --radius:24px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:
    radial-gradient(circle at top left, rgba(56,189,248,.18), transparent 30%),
    radial-gradient(circle at top right, rgba(129,140,248,.12), transparent 24%),
    linear-gradient(180deg, #050816 0%, #0b1220 100%);
  color:var(--text);
}

a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
input,select,textarea{
  width:100%;
  background:#0b1324;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:14px;
  padding:.8rem .95rem;
  outline:none;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
table.month-table input{
  padding:.3rem .35rem;
  border-radius: 7px;
}
.month-table{
  font-size: smaller;
}
table.members-tbl{
  font-size: smaller;
}
table.members-tbl td{
  vertical-align: middle;
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(56,189,248,.7);
  box-shadow:0 0 0 4px rgba(56,189,248,.12);
}

input.db-populated,
select.db-populated,
textarea.db-populated{
  border-color:rgba(239,68,68,.8);
  background:rgba(127,29,29,.18);
  color:#fecaca;
  box-shadow:0 0 0 4px rgba(239,68,68,.10);
}
input.db-populated:focus,
select.db-populated:focus,
textarea.db-populated:focus{
  border-color:rgba(248,113,113,.95);
  box-shadow:0 0 0 4px rgba(248,113,113,.18);
}
input.db-updated,
select.db-updated,
textarea.db-updated{
  border-color:rgba(34,197,94,.85);
  background:rgba(20,83,45,.18);
  color:#dcfce7;
  box-shadow:0 0 0 4px rgba(34,197,94,.12);
}
input.db-updated:focus,
select.db-updated:focus,
textarea.db-updated:focus{
  border-color:rgba(74,222,128,.95);
  box-shadow:0 0 0 4px rgba(74,222,128,.18);
}
textarea{min-height:110px;resize:vertical}
label{display:block;margin:0 0 .35rem;font-size:.88rem;color:#cbd5e1}
.contact-address-fields{
  grid-template-columns: 1fr 2fr !important;
}

.app-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:280px 1fr;
}
.sidebar{
  position:sticky;
  top:0;
/*  height:100vh; */
  height: 100%;
  padding:1rem;
  background:rgba(10,15,28,.86);
  backdrop-filter: blur(16px);
  border-right:1px solid var(--line);
}
.brand{
  display:flex;align-items:center;gap:.75rem;
  padding:1rem;
  border-radius:20px;
  background:linear-gradient(135deg, rgba(56,189,248,.16), rgba(129,140,248,.12));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.brand-mark{
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#fff;font-weight:800;
}
.brand h1{font-size:1.02rem;margin:0}
.brand p{margin:.15rem 0 0;color:var(--muted);font-size:.82rem}

.nav{
  margin-top:1rem;
  display:flex;
  flex-direction:column;
  gap:.45rem;
}
.nav a{
  display:flex;align-items:center;gap:.75rem;
  padding:.9rem 1rem;
  border-radius:16px;
  color:#dbe4f0;
  border:1px solid transparent;
  transition:.18s ease;
}
.nav a:hover,.nav a.active{
  background:rgba(255,255,255,.05);
  border-color:var(--line);
  transform:translateX(3px);
}
.nav svg,.btn svg,.stat svg{width:18px;height:18px;flex:none}
.nav .badge{
  margin-left:auto;
  font-size:.72rem;
  padding:.2rem .5rem;
  border-radius:999px;
  background:rgba(148,163,184,.14);
  color:#cbd5e1;
}
.sidebar-footer{
  margin-top:auto;
  padding:1rem;
  color:var(--muted);
  font-size:.85rem;
}

.main{
  padding:1.25rem 1.25rem 2rem;
  min-width:0;
}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1.15rem;
}
.page-title{
  margin:0;
  font-size:1.65rem;
  line-height:1.2;
}
.subtitle{margin:.35rem 0 0;color:var(--muted)}
.top-actions{
  display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;
}

.card-grid{
  display:grid;
  gap:1rem;
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1rem;
  margin-bottom:1rem;
}
.stat{
  padding:1rem 1.05rem;
  border-radius:22px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(17,24,39,.98), rgba(10,15,28,.88));
  box-shadow:var(--shadow);
  min-height:110px;
}
button.stat{
  appearance:none;
  width:100%;
  text-align:left;
  cursor:pointer;
  color:inherit;
  font:inherit;
}
button.stat:hover{
  transform:translateY(-2px);
}
.stat .kicker{color:var(--muted);font-size:.82rem;margin-bottom:.55rem}
.stat .value{font-size:1.8rem;font-weight:800;letter-spacing:-.03em}
.stat .label{margin-top:.45rem;font-size:.88rem;color:#cbd5e1}
.stat.kosha{border-color:rgba(56,189,248,.28)}
.stat.female{border-color:rgba(236,72,153,.25)}
.stat.male{border-color:rgba(34,197,94,.25)}
.stat.nkedi{border-color:rgba(245,158,11,.25)}

.panel{
  background:linear-gradient(180deg, rgba(17,24,39,.96), rgba(11,19,36,.92));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.panel-header{
  padding:1rem 1.1rem;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
}
.panel-title{margin:0;font-size:1.02rem}
.panel-body{padding:1rem 1.1rem}

.filters{
  display:grid;
  grid-template-columns:1.1fr .9fr .9fr .8fr auto;
  gap:.75rem;
  align-items:end;
}
.filters .search-wrap{min-width:0}
.filters .actions{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:flex-end}

.btn{
  appearance:none;
  border:1px solid transparent;
  border-radius:14px;
  padding:.82rem 1rem;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  transition:.18s ease;
  text-decoration:none;
  font-weight:600;
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff}
.btn.ghost{background:rgba(255,255,255,.03);border-color:var(--line);color:var(--text)}
.btn.success{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.28);color:#dcfce7}
.btn.danger{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.28);color:#fee2e2}
.btn.warning{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.28);color:#fef3c7}
.btn.small{padding:.55rem .8rem;border-radius:12px;font-size:.92rem}

.table-wrap{overflow:auto}
table{
  width:100%;
  border-collapse:collapse;
  min-width:900px;
}
th,td{
  padding:.35rem .3rem;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
}
th{
  color:#cbd5e1;
  font-size:.84rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  background:rgba(255,255,255,.02);
}
tr:hover td{background:rgba(255,255,255,.02)}
td a.link{
  color:#7dd3fc;
  font-weight:700;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  border-radius:999px;
  padding:.35rem .65rem;
  font-size:.78rem;
  border:1px solid transparent;
}
.badge.active{
  background: rgba(34,197,94,.14);
  border-color: rgba(34,197,94,.28);
  color: #bbf7d0;
}

.badge.case{
  background: rgba(245,158,11,.14);
  border-color: rgba(245,158,11,.28);
  color: #fef3c7;
}

.badge.transferred{
  background: rgba(59,130,246,.14);
  border-color: rgba(59,130,246,.28);
  color: #dbeafe;
}

.badge.deceased{
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.28);
  color: #fecaca;
}

.badge.neutral{
  background: rgba(148,163,184,.14);
  border-color: rgba(148,163,184,.22);
  color: #e2e8f0;
}

.badge.warning{
  background: rgba(245,158,11,.14);
  border-color: rgba(245,158,11,.28);
  color: #fde68a;
}

.badge.info{
  background: rgba(59,130,246,.14);
  border-color: rgba(59,130,246,.28);
  color: #dbeafe;
}

.flash-area{margin-bottom:1rem;display:grid;gap:.6rem}
.flash,.toast{
  padding:.9rem 1rem;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(15,23,42,.94);
  box-shadow:var(--shadow);
}
.flash.success{border-color:rgba(34,197,94,.32);background:rgba(22,101,52,.2)}
.flash.error{border-color:rgba(239,68,68,.32);background:rgba(127,29,29,.25)}
.flash.info{border-color:rgba(6,182,212,.32);background:rgba(8,145,178,.18)}
.flash.warning{border-color:rgba(245,158,11,.32);background:rgba(146,64,14,.22)}

.modal-backdrop{
  position:fixed;inset:0;
  background:rgba(2,6,23,.72);
  display:none;
  align-items:center;
  justify-content:center;
  padding:1rem;
  z-index:60;
}
.modal-backdrop.show{display:flex}
.modal{
  width:min(920px,100%);
  max-height:90vh;
  overflow:auto;
  background:linear-gradient(180deg,#0f172a,#0b1220);
  border:1px solid var(--line);
  border-radius:26px;
  box-shadow:var(--shadow);
}
.modal-header{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1rem 1.1rem;
  border-bottom:1px solid var(--line);
}
.modal-body{padding:1rem 1.1rem}
.modal-close{
  background:transparent;border:0;color:#fff;font-size:1.5rem;cursor:pointer;line-height:1;
}

.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.helper{color:var(--muted);font-size:.84rem;margin-top:.35rem}

.form-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}

.vertical-head{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  white-space:nowrap;
  padding:.4rem .25rem;
}

.month-table th, .month-table td{min-width:120px}
.month-table th:first-child, .month-table td:first-child{min-width:120px;font-weight:700}
.highlight-mismatch{background:rgba(239,68,68,.13)!important;color:#fecaca}
.highlight-match{background:rgba(34,197,94,.08)!important}

.login-wrap{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:1rem;
}
.login-card{
  width:min(960px,100%);
  display:grid;
  grid-template-columns:1.05fr .95fr;
  overflow:hidden;
  border-radius:30px;
  border:1px solid var(--line);
  background:rgba(15,23,42,.88);
  box-shadow:var(--shadow);
}
.login-hero{
  padding:2rem;
  background:
    radial-gradient(circle at top left, rgba(56,189,248,.25), transparent 30%),
    linear-gradient(180deg, rgba(17,24,39,.96), rgba(10,15,28,.88));
  border-right:1px solid var(--line);
}
.login-hero h1{margin:.2rem 0 1rem;font-size:2.2rem;line-height:1.05}
.login-hero p{color:var(--muted);max-width:42ch}
.login-form{
  padding:2rem;
}
.small-note{font-size:.82rem;color:var(--muted)}

@media (max-width: 1100px){
  .app-shell{grid-template-columns:1fr}
  .sidebar{position:relative;height:auto}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filters{grid-template-columns:1fr 1fr}
  .login-card{grid-template-columns:1fr}
  .login-hero{border-right:0;border-bottom:1px solid var(--line)}
}
.mobile-header{
  display:none;
}
.sidebar-backdrop{
  display:none;
}
@media (max-width: 700px){
  body{padding-top:0}
  .mobile-header{
    display:flex;
    align-items:center;
    gap:.75rem;
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:60;
    padding:.6rem .7rem;
    background:rgba(6,10,18,.96);
    backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
  }
  .app-shell{
    display:block;
  }
  .sidebar{
    position:fixed;
    top:0;
    left:0;
    z-index:70;
    width:min(88vw, 320px);
    height:100vh;
    transform:translateX(-100%);
    transition:transform .22s ease;
    padding-top:4.9rem;
    overflow:auto;
    box-shadow:var(--shadow);
  }
  body.sidebar-open .sidebar{
    transform:translateX(0);
  }
  body.sidebar-open{overflow:hidden;}
  .sidebar-backdrop{
    display:block;
    position:fixed;
    inset:0;
    z-index:65;
    background:rgba(2,6,23,.6);
  }
  body:not(.sidebar-open) .sidebar-backdrop{
    display:none;
  }
  .main{
    padding-top:6.7rem;
  }
  .sidebar .brand{
    padding:.85rem;
    border-radius:18px;
  }
  .sidebar .brand h1{
    font-size:.98rem;
  }
  .sidebar .nav a{
    padding:.85rem .95rem;
  }
  .stats-grid,.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .topbar{flex-direction:column;align-items:flex-start}
}

.sidebar-toggle{
  appearance:none;
  border:1px solid var(--line);
  background:rgba(15,23,42,.92);
  color:var(--text);
  width:48px;
  height:48px;
  border-radius:16px;
  cursor:pointer;
  display:grid;
  place-items:center;
  box-shadow:var(--shadow);
  flex:none;
}
.sidebar-toggle-icon{
  display:inline-grid;
  gap:4px;
}
.sidebar-toggle-icon span{
  width:18px;
  height:2px;
  border-radius:999px;
  background:currentColor;
  display:block;
}
.mobile-brand{
  flex:1;
  min-width:0;
  box-shadow:none;
}
.mobile-brand h1{
  font-size:1rem;
}
.mobile-brand p{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.maeto-calculated-field {
      background-color: cadetblue;
}