html, body{
  margin:0;
  padding:0;
  font-family:'Amiri','Scheherazade New',serif;
  direction:rtl;
  min-height:100%;
  background:#f6f8f3;
  overflow-y:auto; /* ✅ allow vertical scroll */
}

body::before{
  content:'';
  position:fixed;
  inset:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900'><path d='M0,300 C200,200 400,400 600,300 800,200 1000,350 1200,280 1400,200 1440,250 1440,250 L1440,0 L0,0 Z' fill='%232e7d32' fill-opacity='0.06'/><path d='M0,600 C300,500 500,650 700,550 900,450 1100,600 1440,520 L1440,900 L0,900 Z' fill='%2343a047' fill-opacity='0.05'/></svg>");
  background-size:160% 160%;
  animation:wave 45s linear infinite;
  z-index:-1;
  pointer-events:none; /* avoid blocking scroll */
}

@keyframes wave{
  from{background-position:0 0}
  to{background-position:-900px 400px}
}

.page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:32px 0 48px 0; /* bottom padding for scroll */
}

.header-top{
  width:100%;
  max-width:680px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
}

.header-top img{ width:48px; }

.header-title{
  text-align:center;
  flex:1;
}

.logout{
  font-size:22px;
  text-decoration:none;
  color:#2e7d32;
}

.title-ministry{
  font-size:20px;
  font-weight:700;
}

.title-ramadan{
  font-size:18px;
  color:#2e7d32;
  margin-top:4px;
}

.container{
  width:100%;
  max-width:680px;
  padding:16px;
  display:block; /* avoid flex lock */
}

.card{
  width:100%;
  position:relative;
  background:#fff;
  border-radius:18px;
  padding:22px;
  box-shadow:0 15px 40px rgba(0,0,0,.15);
}

.card::before{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:20px;
  background:linear-gradient(120deg,rgba(46,125,50,.4),rgba(165,214,167,.4),rgba(46,125,50,.4));
  background-size:200% 200%;
  animation:borderFlow 6s ease infinite;
  z-index:-1;
}

@keyframes borderFlow{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

label{
  font-size:14px;
  color:#1b3a2a;
  margin-top:6px;
  display:block;
}

input,select,button{
  width:100%;
  padding:10px;
  margin:6px 0;
  border-radius:8px;
  border:1px solid #cfd8cf;
  font-family:inherit;
}

button{
  background:linear-gradient(135deg,#2e7d32,#43a047);
  color:#fff;
  border:none;
  font-size:15px;
  cursor:pointer;
}

button.secondary{
  background:#c8e6c9;
  color:#1b3a2a;
}

.actions{
  display:flex;
  gap:10px;
  margin-top:10px;
  flex-wrap:wrap;
}

.photo{
  width:120px;
  height:150px;
  margin:10px auto;
  border-radius:12px;
  border:2px solid #c8e6c9;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f1f8e9;
}

.loader{text-align:center;display:none}
.msg{text-align:center;margin-top:10px;font-weight:bold}
.msg.ok{color:#2e7d32}
.msg.err{color:#c62828}

.quota{
  background:#e8f5e9;
  padding:8px;
  border-radius:8px;
  text-align:center;
  margin-bottom:10px;
}

/* ===== Dashboard search tables ===== */
.table-wrap{
  width:100%;
  overflow:auto;
  border-radius:12px;
  border:1px solid #e3efe3;
  background:#fff;
  margin-top:10px;
}
table.tbl{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:560px;
}
table.tbl th, table.tbl td{
  padding:10px 10px;
  border-bottom:1px solid #edf5ed;
  text-align:right;
  vertical-align:top;
  font-size:14px;
}
table.tbl th{
  position:sticky;
  top:0;
  background:#f1f8e9;
  color:#1b3a2a;
  z-index:2;
}
table.tbl tr:hover td{
  background:#f7fbf6;
}
.badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  border:1px solid #cfe7cf;
  background:#ffffff;
  color:#1b3a2a;
}
.badge.imam{ border-color:#c8e6c9; }
.badge.cheikh{ border-color:#ffe0b2; }
.btn-mini{
  width:auto;
  padding:8px 10px;
  border-radius:999px;
  font-size:13px;
}
.details-kv{
  width:100%;
  border:1px solid #e3efe3;
  border-radius:12px;
  overflow:hidden;
  margin-top:10px;
}
.details-kv table{
  width:100%;
  border-collapse:collapse;
}
.details-kv td{
  padding:10px;
  border-bottom:1px solid #edf5ed;
}
.details-kv td.k{
  width:32%;
  background:#f7fbf6;
  color:#2e7d32;
  font-weight:700;
  font-size:13px;
}
.details-kv td.v{
  color:#102418;
}
@media (max-width: 560px){
  table.tbl{ min-width:520px; }
}

/* ===== Beneficiary detail title ===== */
.details-title{
  width:100%;
  text-align:center;
  padding:12px 10px;
  margin-top:10px;
  margin-bottom:6px;
  border-radius:12px;
  background:linear-gradient(135deg,#e8f5e9,#f1f8e9);
  border:1px solid #cfe7cf;
  color:#1b3a2a;
  font-size:16px;
  font-weight:700;
  position:relative;
  overflow:hidden;
}

.details-title::after{
  content:'';
  position:absolute;
  inset:-20px;
  background:radial-gradient(circle at 30% 30%, rgba(46,125,50,.12), transparent 55%);
  animation:titleGlow 6s ease-in-out infinite;
}

@keyframes titleGlow{
  0%{transform:translateX(-10px)}
  50%{transform:translateX(10px)}
  100%{transform:translateX(-10px)}
}

.details-title span{
  position:relative;
  z-index:1;
}