/* Signature Reference UI — visual-only layer. No data/JS/functionality changes. */
:root{
  --sr-blue:#315ee8; --sr-blue2:#5b35d5; --sr-violet:#8b3fe8; --sr-teal:#0f9b8e;
  --sr-pink:#df3c8f; --sr-gold:#e2b73f; --sr-navy:#10243a; --sr-ink:#16233b;
  --sr-muted:#6f7c91; --sr-bg:#f5f7fb; --sr-card:#ffffff; --sr-line:#e5eaf2;
  --sr-shadow:0 16px 42px rgba(35,55,95,.10); --sr-soft:0 8px 24px rgba(35,55,95,.08);
}
html,body{background:linear-gradient(180deg,#f3f6fb 0%,#fbfcff 50%,#f1f5fa 100%)!important;color:var(--sr-ink)!important}
body:before{background:radial-gradient(circle at 7% 4%,rgba(49,94,232,.09),transparent 24%),radial-gradient(circle at 94% 8%,rgba(223,60,143,.08),transparent 23%)!important}
.container{max-width:1250px!important}
.topbar{position:relative!important;top:auto!important;background:#fff!important;color:var(--sr-ink)!important;border:1px solid #e4e9f2!important;border-radius:16px!important;box-shadow:0 10px 30px rgba(22,35,59,.08)!important;padding:10px 16px!important}
.brand-mini i{background:linear-gradient(135deg,var(--sr-blue),var(--sr-violet))!important;color:#fff!important;box-shadow:0 8px 18px rgba(49,94,232,.24)!important}
.brand-mini strong{color:#1c2a40!important}.brand-mini small{color:#7b8798!important}.live-clock{background:#f7f9fd!important;color:#5d6b80!important;border:1px solid #e3e8f0!important}.icon-btn{background:#fff!important;color:#44536b!important;border:1px solid #dce4ef!important;box-shadow:0 5px 14px rgba(25,42,70,.07)!important}
#mainTab.nav-pills{background:rgba(255,255,255,.96)!important;border:1px solid #e4e9f2!important;border-radius:16px!important;box-shadow:0 10px 28px rgba(25,42,70,.08)!important;padding:7px!important;gap:3px}
#mainTab.nav-pills .nav-link{color:#536179!important;background:#fff!important;border:1px solid transparent!important;border-radius:10px!important;font-weight:700;padding:10px 13px!important;box-shadow:none!important}
#mainTab.nav-pills .nav-link:hover:not(.active){background:#eef3ff!important;color:#315ee8!important}
#mainTab.nav-pills .nav-link.active{background:linear-gradient(135deg,#2f63ee,#7b35dc)!important;color:#fff!important;box-shadow:0 8px 18px rgba(72,66,221,.22)!important}
#mainTab.nav-pills .nav-link.active i{color:#fff!important}
.reference-notice-bar{background:#fff!important;border:1px solid #e4e9f2!important;border-radius:14px!important;box-shadow:var(--sr-soft)!important;color:#44536b!important}
.hero-banner{background:linear-gradient(120deg,#2c5fe8 0%,#4e3fe2 54%,#db3d91 100%)!important;border-radius:22px!important;border:1px solid rgba(255,255,255,.55)!important;box-shadow:0 18px 42px rgba(52,65,180,.22)!important;min-height:320px!important}
.hero-banner:before{background:linear-gradient(90deg,rgba(17,47,150,.12),transparent 52%,rgba(214,43,128,.12))!important}
.hero-banner h2{font-family:"Noto Serif Bengali","Noto Sans Bengali",serif!important;font-weight:800!important;text-shadow:0 2px 10px rgba(0,0,0,.13)}
.hero-kicker{background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.3)!important;backdrop-filter:blur(8px);border-radius:999px!important}
.hero-mosque-wrap{border:2px solid rgba(255,255,255,.38)!important;border-radius:18px!important;box-shadow:0 20px 40px rgba(13,31,85,.24)!important}
.card,.feature-card,.quick-btn,.chart-card,.exec-card,.admin-menu-card,.admission-card,.founder-card,.media-card,.section-panel{background:rgba(255,255,255,.97)!important;border:1px solid var(--sr-line)!important;box-shadow:var(--sr-shadow)!important;border-radius:20px!important}
.card:hover,.feature-card:hover,.quick-btn:hover,.chart-card:hover,.media-card:hover{box-shadow:0 20px 50px rgba(35,55,95,.13)!important}
.section-title{border-bottom:1px solid #edf0f5!important;padding-bottom:12px;margin-bottom:18px}
.section-title h4,.section-title h5{font-family:"Noto Serif Bengali","Noto Sans Bengali",serif!important;color:#18263e!important;font-weight:800!important}
.section-eyebrow{color:#5b35d5!important;font-weight:900!important;letter-spacing:.08em}
.feature-card{position:relative;overflow:hidden;padding:20px!important}.feature-card:before,.quick-btn:before{content:"";position:absolute;right:-34px;top:-36px;width:100px;height:100px;border-radius:50%;background:linear-gradient(135deg,rgba(49,94,232,.12),rgba(223,60,143,.08));pointer-events:none}
.feature-icon{background:linear-gradient(135deg,#eef3ff,#f4edff)!important;color:#4b4ce5!important;border:1px solid #e0e6ff!important;box-shadow:0 8px 18px rgba(78,70,229,.10)!important}
.quick-grid{gap:12px!important}.quick-btn{min-height:74px!important;color:#25344d!important}.quick-btn i{color:#315ee8!important}.quick-btn:hover{transform:translateY(-3px);border-color:#cbd7ff!important}
.form-control,.form-select{background:#fff!important;border:1px solid #dfe5ef!important;border-radius:11px!important;min-height:44px}.form-control:focus,.form-select:focus{border-color:#6a65e8!important;box-shadow:0 0 0 .22rem rgba(79,70,229,.10)!important}
.btn-primary,.btn-success{background:linear-gradient(135deg,#315ee8,#683bdc)!important;border-color:transparent!important;box-shadow:0 8px 18px rgba(63,77,216,.18)!important}.btn-success:hover,.btn-primary:hover{filter:brightness(.97);transform:translateY(-1px)}
.btn-danger{background:linear-gradient(135deg,#e04b78,#c92f58)!important;border:0!important}.btn-warning{background:linear-gradient(135deg,#e6b52e,#e08b20)!important;border:0!important;color:#fff!important}.btn-info{background:linear-gradient(135deg,#2fa8dd,#4374ee)!important;border:0!important;color:#fff!important}
.admin-topbar{position:relative;overflow:hidden;background:linear-gradient(115deg,#2637a9 0%,#3c4bd7 48%,#8d43df 100%)!important;border-radius:18px!important;box-shadow:0 18px 38px rgba(46,55,163,.20)!important;border:1px solid rgba(255,255,255,.2)!important}.admin-topbar:after{content:"";position:absolute;right:0;bottom:-28px;width:320px;height:120px;background:radial-gradient(ellipse at center,rgba(255,255,255,.20),transparent 68%);pointer-events:none}.admin-topbar .eyebrow,.admin-topbar h4,.admin-topbar small{position:relative;z-index:1}.admin-top-actions .btn{background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.25)!important;color:#fff!important;border-radius:10px!important}
.exec-grid{gap:14px!important}.exec-card{color:#18263e!important;min-height:128px!important;padding:18px!important;overflow:hidden}.exec-card:after{content:"";position:absolute;right:-18px;bottom:-28px;width:95px;height:95px;border-radius:50%;background:rgba(255,255,255,.50);pointer-events:none}.exec-card.gold{background:linear-gradient(135deg,#fffdf3,#fff)!important;border-top:3px solid #e2b73f!important}.exec-card:not(.gold):not(.red):not(.dark):not(.blue){border-top:3px solid #3d7af0!important;background:linear-gradient(135deg,#f8fbff,#fff)!important}.exec-card.red{background:linear-gradient(135deg,#fff7f8,#fff)!important;border-top:3px solid #df4860!important}.exec-card.dark{background:linear-gradient(135deg,#f8f7ff,#fff)!important;border-top:3px solid #7c4de8!important}.exec-card.blue{background:linear-gradient(135deg,#f5fbff,#fff)!important;border-top:3px solid #24a3c7!important}.exec-icon{width:42px!important;height:42px!important;border-radius:13px!important;display:grid;place-items:center;background:linear-gradient(135deg,#eef4ff,#f5edff)!important;color:#4a55df!important}.exec-value{font-weight:900!important;font-size:1.65rem!important;color:#14243a!important}.exec-label{color:#4e5d74!important;font-weight:700!important}.exec-sub{color:#8793a4!important}
.chart-grid{gap:16px!important}.chart-card{padding:18px!important}.chart-card h5{color:#1a2942!important;font-weight:800!important}.chart-card small{color:#77859a!important}.chart-wrap{background:linear-gradient(180deg,#fff,#fbfcff)!important;border-radius:14px!important;padding:4px!important}
.admin-shell{margin-top:18px!important}.admin-menu-card{padding:14px!important}.admin-nav{gap:8px!important}.admin-nav .nav-link{background:#f8faff!important;border:1px solid #e6ebf4!important;color:#4c5b73!important;border-radius:11px!important;min-height:48px!important;font-weight:700!important;transition:.18s ease!important}.admin-nav .nav-link i{color:#5a62d8!important}.admin-nav .nav-link:hover:not(.active){background:#eef3ff!important;border-color:#cfd9ff!important;color:#3549b6!important;transform:translateX(2px)}.admin-nav .nav-link.active{background:linear-gradient(135deg,#315ee8,#7138dc)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 10px 20px rgba(62,68,207,.22)!important}.admin-nav .nav-link.active i{color:#fff!important}
.table-responsive{border:1px solid #e5eaf2!important;border-radius:14px!important;box-shadow:0 7px 20px rgba(35,55,95,.05)!important}.table thead th{background:#f5f7fb!important;color:#46556d!important;border-bottom:1px solid #dfe5ef!important}.table tbody tr:hover{background:#f8faff!important}
.badge.text-bg-success,.bg-success{background:linear-gradient(135deg,#0f9b8e,#0b7f74)!important}.badge{border-radius:8px!important}
.alert{border-radius:14px!important;border:1px solid #e3e8f0!important;box-shadow:0 7px 20px rgba(35,55,95,.05)}
.list-group-item{border-color:#edf0f5!important}
.modal-content{border:1px solid #e3e8f0!important;border-radius:18px!important;box-shadow:0 25px 70px rgba(20,32,55,.18)!important}.modal-header{background:linear-gradient(135deg,#f7f9ff,#fff)!important;border-bottom:1px solid #e8edf4!important}
/* Force Light UI even if an old saved theme flag exists. */
html[data-theme="dark"] body,html[data-theme="dark"] .topbar,html[data-theme="dark"] #mainTab.nav-pills,html[data-theme="dark"] .card,html[data-theme="dark"] .feature-card,html[data-theme="dark"] .quick-btn,html[data-theme="dark"] .chart-card,html[data-theme="dark"] .admin-menu-card,html[data-theme="dark"] .media-card{background-color:#fff!important;color:var(--sr-ink)!important}
html[data-theme="dark"] .nav-pills .nav-link:not(.active),html[data-theme="dark"] .admin-nav .nav-link{background:#f8faff!important;color:#4c5b73!important;border-color:#e6ebf4!important}html[data-theme="dark"] .form-control,html[data-theme="dark"] .form-select{background:#fff!important;color:#16233b!important;border-color:#dfe5ef!important}
@media(max-width:991.98px){.container{max-width:100%!important}.hero-content{max-width:54%!important}.exec-grid{grid-template-columns:repeat(2,1fr)!important}.admin-nav .nav-link{min-width:0!important}}
@media(max-width:767.98px){.hero-content{max-width:100%!important}.hero-mosque-wrap{width:100%!important;height:180px!important;position:relative!important;right:auto!important;top:auto!important;margin-top:14px}.hero-banner{padding:20px 14px!important}.exec-grid,.chart-grid{grid-template-columns:1fr!important}.admin-shell .col-md-3,.admin-shell .col-md-9{width:100%!important}.admin-nav .nav-link{flex-basis:100%!important}.topbar{border-radius:14px!important}.brand-mini strong{font-size:.86rem!important}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Global checkbox/switch visibility fix: the premium UI layer previously
   forced a white background with !important, which hid Bootstrap's checked
   indicator. Keep every checkbox visibly selected/unselected. */
.form-check-input[type="checkbox"]{
  appearance:none!important;
  -webkit-appearance:none!important;
  width:1.15em!important;
  height:1.15em!important;
  min-width:1.15em!important;
  min-height:1.15em!important;
  margin-top:.2em!important;
  border:1.5px solid #94a3b8!important;
  border-radius:.3em!important;
  background-color:#fff!important;
  background-image:none!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:75% 75%!important;
  box-shadow:inset 0 1px 2px rgba(15,32,54,.08),0 2px 5px rgba(15,32,54,.05)!important;
  cursor:pointer!important;
}
.form-check-input[type="checkbox"]:hover{border-color:#2563eb!important}
.form-check-input[type="checkbox"]:focus{border-color:#2563eb!important;box-shadow:0 0 0 .2rem rgba(37,99,235,.16)!important;outline:0!important}
.form-check-input[type="checkbox"]:checked{
  background-color:#2563eb!important;
  border-color:#2563eb!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' d='m3 8 3.1 3.1L13 4.7'/%3E%3C/svg%3E")!important;
}
.form-check-input[type="checkbox"]:indeterminate{background-color:#2563eb!important;border-color:#2563eb!important;background-image:linear-gradient(#fff,#fff)!important;background-size:65% 2px!important}
.form-check-label{cursor:pointer!important}

/* Preserve Bootstrap switch proportions while making its ON state obvious. */
.form-switch .form-check-input[type="checkbox"]{
  appearance:none!important;
  -webkit-appearance:none!important;
  width:2.8em!important;
  height:1.45em!important;
  min-width:2.8em!important;
  min-height:1.45em!important;
  margin-top:.15rem!important;
  border-radius:999px!important;
  background-color:#e2e8f0!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%2364758b'/%3E%3C/svg%3E")!important;
  background-size:1.45em 1.45em!important;
  background-position:left center!important;
  border:1px solid #cbd5e1!important;
}
.form-switch .form-check-input[type="checkbox"]:checked{
  background-color:#16a34a!important;
  border-color:#16a34a!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E")!important;
  background-position:right center!important;
}
.form-switch .form-check-input[type="checkbox"]:focus{box-shadow:0 0 0 .2rem rgba(37,99,235,.16)!important}
.form-switch .form-check-input[type="checkbox"]:disabled{opacity:.5!important;cursor:not-allowed!important}

/* Dark mode */
html[data-theme="dark"] .form-check-input[type="checkbox"]{background-color:#0b1725!important;border-color:#52677c!important}
html[data-theme="dark"] .form-switch .form-check-input[type="checkbox"]{background-color:#26384b!important;border-color:#52677c!important}
html[data-theme="dark"] .form-check-input[type="checkbox"]:checked{background-color:#3b82f6!important;border-color:#3b82f6!important}
html[data-theme="dark"] .form-switch .form-check-input[type="checkbox"]:checked{background-color:#16a34a!important;border-color:#16a34a!important}


/* Robust checkbox rendering: use a label-driven indicator for ordinary
   permission checkboxes. This avoids theme/Bootstrap background-image rules
   hiding the checked state in dynamically-created modal controls. */
.form-check:not(.form-switch){position:relative!important}
.form-check:not(.form-switch) > .form-check-input[type="checkbox"]{
  position:absolute!important;
  width:1.2rem!important;
  height:1.2rem!important;
  min-width:1.2rem!important;
  min-height:1.2rem!important;
  margin:0!important;
  inset-inline-start:0!important;
  top:.12rem!important;
  opacity:0!important;
  cursor:pointer!important;
  z-index:2!important;
}
.form-check:not(.form-switch) > .form-check-label{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:.55rem!important;
  min-height:1.5rem!important;
  padding-inline-start:0!important;
  cursor:pointer!important;
  user-select:none!important;
}
.form-check:not(.form-switch) > .form-check-label::before{
  content:""!important;
  width:1.15rem!important;
  height:1.15rem!important;
  min-width:1.15rem!important;
  border:2px solid #94a3b8!important;
  border-radius:.3rem!important;
  background:#fff!important;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.08)!important;
  transition:.15s ease!important;
}
.form-check:not(.form-switch) > .form-check-input[type="checkbox"]:checked + .form-check-label::before{
  background:#2563eb!important;
  border-color:#2563eb!important;
  box-shadow:0 3px 8px rgba(37,99,235,.22)!important;
}
.form-check:not(.form-switch) > .form-check-input[type="checkbox"]:checked + .form-check-label::after{
  content:""!important;
  position:absolute!important;
  width:.38rem!important;
  height:.68rem!important;
  border-right:2.5px solid #fff!important;
  border-bottom:2.5px solid #fff!important;
  transform:rotate(45deg)!important;
  left:.40rem!important;
  top:.22rem!important;
  z-index:1!important;
}
.form-check:not(.form-switch) > .form-check-input[type="checkbox"]:focus + .form-check-label::before{
  border-color:#2563eb!important;
  box-shadow:0 0 0 .2rem rgba(37,99,235,.16)!important;
}
.form-check:not(.form-switch) > .form-check-input[type="checkbox"]:disabled + .form-check-label{opacity:.55!important;cursor:not-allowed!important}

/* Purple permission selector - explicit selected/unselected state. */
.form-check:not(.form-switch).permission-check{
  position:relative!important;
  margin:0!important;
}
.form-check:not(.form-switch).permission-check > .form-check-input[type="checkbox"]{
  position:absolute!important;
  opacity:0!important;
  pointer-events:none!important;
  width:1px!important;
  height:1px!important;
  margin:0!important;
}
.form-check:not(.form-switch).permission-check > .form-check-label{
  display:flex!important;
  align-items:center!important;
  gap:.65rem!important;
  width:100%!important;
  min-height:46px!important;
  padding:.65rem .85rem!important;
  border:1.5px solid #d9dff0!important;
  border-radius:12px!important;
  background:#fff!important;
  color:#334155!important;
  font-weight:700!important;
  box-shadow:0 3px 10px rgba(40,40,90,.05)!important;
  transition:all .16s ease!important;
  cursor:pointer!important;
  user-select:none!important;
}
.form-check:not(.form-switch).permission-check > .form-check-label::before{
  content:""!important;
  flex:0 0 20px!important;
  width:20px!important;
  height:20px!important;
  border:2px solid #aeb8cb!important;
  border-radius:6px!important;
  background:#fff!important;
  box-sizing:border-box!important;
  transition:all .16s ease!important;
}
.form-check:not(.form-switch).permission-check > .form-check-label::after{
  content:""!important;
  display:none!important;
}
.form-check:not(.form-switch).permission-check > .form-check-input[type="checkbox"]:checked + .form-check-label,
.form-check:not(.form-switch).permission-check.is-checked > .form-check-label{
  background:linear-gradient(135deg,#6d35e8,#8b45ed)!important;
  border-color:#6d35e8!important;
  color:#fff!important;
  box-shadow:0 7px 18px rgba(109,53,232,.22)!important;
  transform:translateY(-1px)!important;
}
.form-check:not(.form-switch).permission-check > .form-check-input[type="checkbox"]:checked + .form-check-label::before,
.form-check:not(.form-switch).permission-check.is-checked > .form-check-label::before{
  content:"✓"!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#6d35e8!important;
  background:#fff!important;
  border-color:#fff!important;
  font-size:14px!important;
  font-weight:900!important;
  line-height:1!important;
}
.form-check:not(.form-switch).permission-check > .form-check-input[type="checkbox"]:focus + .form-check-label,
.form-check:not(.form-switch).permission-check:focus-within > .form-check-label{
  box-shadow:0 0 0 3px rgba(109,53,232,.15),0 7px 18px rgba(109,53,232,.18)!important;
}
html[data-theme="dark"] .form-check:not(.form-switch).permission-check > .form-check-label{
  background:#101827!important;
  border-color:#39465d!important;
  color:#e5e7eb!important;
}
html[data-theme="dark"] .form-check:not(.form-switch).permission-check > .form-check-input[type="checkbox"]:checked + .form-check-label,
html[data-theme="dark"] .form-check:not(.form-switch).permission-check.is-checked > .form-check-label{
  background:linear-gradient(135deg,#6d35e8,#8b45ed)!important;
  border-color:#8b45ed!important;
  color:#fff!important;
}