/* =====================================================================
   SIMONIS — Tema "Islamic Modern"
   Palet: Hijau Islami mendalam (#0b6e4f/#064e3b) + Emas Antik (#c9a227)
   + latar krem hangat, dipadukan motif geometris islami yang halus.
   ===================================================================== */

:root{
  --sim-emerald-900:#053b2c;
  --sim-emerald-800:#075c40;
  --sim-emerald-700:#0b7a52;
  --sim-emerald-600:#0f9463;
  --sim-emerald-500:#17b076;
  --sim-emerald-100:#e1f5ea;
  --sim-gold:#c9a227;
  --sim-gold-soft:#f0dfa0;
  --sim-slate-50:#faf8f3;
  --sim-slate-100:#f1ece0;
  --sim-radius:16px;
  --sim-radius-sm:10px;
  --sim-shadow:0 10px 30px -12px rgba(5,59,44,.18);
  --sim-shadow-sm:0 4px 14px -6px rgba(5,59,44,.14);
  --sim-pattern: radial-gradient(circle at 1px 1px, rgba(255,255,255,.10) 1.4px, transparent 0);
}

body{
  background:linear-gradient(180deg,var(--sim-slate-50) 0%,#f5efe0 100%);
  font-family:'Plus Jakarta Sans','Segoe UI',sans-serif;
  color:#26241a;
}

/* ---------- Layout shell ---------- */
.app-sidebar{
  background:
    var(--sim-pattern),
    linear-gradient(195deg,var(--sim-emerald-900) 0%,var(--sim-emerald-700) 60%,var(--sim-emerald-600) 100%) !important;
  background-size:16px 16px, 100% 100% !important;
  box-shadow:4px 0 24px -8px rgba(0,0,0,.35);
  border:0 !important;
  display:flex;
  flex-direction:column;
  height:100vh;
}
.app-sidebar .brand-link{
  border-bottom:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.14);
  flex-shrink:0;
}
.app-sidebar .brand-text{
  font-weight:800;
  letter-spacing:.5px;
  background:linear-gradient(90deg,#fff,var(--sim-gold-soft));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.app-sidebar .sidebar-wrapper{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
}
.app-sidebar .sidebar-wrapper::-webkit-scrollbar{ width:6px; }
.app-sidebar .sidebar-wrapper::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.2); border-radius:6px; }

.app-sidebar .nav-link,
.app-sidebar .sidebar-menu>.nav-item>.nav-link,
.app-sidebar .nav-sidebar>.nav-item>.nav-link{
  border-radius:var(--sim-radius-sm);
  margin:2px 10px;
  color:rgba(255,255,255,.85);
  transition:all .2s ease;
}
.app-sidebar .nav-link:hover,
.app-sidebar .sidebar-menu>.nav-item>.nav-link:hover,
.app-sidebar .nav-sidebar>.nav-item>.nav-link:hover{
  background:rgba(255,255,255,.12);
  color:#fff;
  transform:translateX(2px);
}
.app-sidebar .nav-link.active,
.app-sidebar .sidebar-menu>.nav-item>.nav-link.active,
.app-sidebar .nav-sidebar>.nav-item>.nav-link.active{
  background:linear-gradient(90deg,var(--sim-gold) 0%,#b3891f 100%);
  color:var(--sim-emerald-900);
  font-weight:700;
  box-shadow:0 4px 14px -4px rgba(201,162,39,.6);
}
.app-sidebar .nav-icon{ color:inherit; }
.app-sidebar .nav-header{ color:rgba(255,255,255,.55) !important; }
.user-panel .info a{ color:#fff !important; font-weight:600; }
.user-panel img{ border:2px solid var(--sim-gold); }

/* Cegah tampilan "flyout" mini-sidebar bawaan AdminLTE tampil polos/putih saat hover pada mode collapsed — selaraskan dengan tema */
.app-sidebar .nav-treeview,
.sidebar-mini .app-sidebar .nav-link:hover > .nav-flyout,
.app-sidebar .nav-flyout{
  background:var(--sim-emerald-800) !important;
  color:#fff !important;
  border-radius:var(--sim-radius-sm);
  box-shadow:var(--sim-shadow);
}

.app-header.navbar{
  background:#fff;
  box-shadow:0 2px 12px -4px rgba(5,59,44,.10);
  border:0 !important;
}
.app-main{ background:transparent; }

.app-footer{
  background:#fff;
  color:#8a8471;
  border-top:1px solid var(--sim-slate-100);
  font-size:.82rem;
}

/* ---------- Cards ---------- */
.card{
  border:0;
  border-radius:var(--sim-radius);
  box-shadow:var(--sim-shadow-sm);
}
.card-header{
  border-radius:var(--sim-radius) var(--sim-radius) 0 0 !important;
  border-bottom:1px solid var(--sim-slate-100);
  font-weight:700;
}

/* Glass stat cards */
.stat-card{
  border-radius:var(--sim-radius);
  padding:22px 24px;
  color:#fff;
  position:relative;
  overflow:hidden;
  box-shadow:var(--sim-shadow);
  isolation:isolate;
}
.stat-card::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(120px 120px at 90% 10%,rgba(255,255,255,.25),transparent 70%);
  z-index:-1;
}
.stat-card .stat-icon{
  width:52px;height:52px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.18);
  font-size:1.4rem;
}
.stat-card .stat-value{ font-size:1.9rem; font-weight:800; line-height:1.1; }
.stat-card .stat-label{ opacity:.9; font-size:.82rem; font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.stat-card.bg-emerald{ background:linear-gradient(135deg,var(--sim-emerald-700),var(--sim-emerald-500)); }
.stat-card.bg-gold{ background:linear-gradient(135deg,#b8860b,var(--sim-gold)); }
.stat-card.bg-slate{ background:linear-gradient(135deg,#334155,#0f172a); }
.stat-card.bg-danger-grad{ background:linear-gradient(135deg,#b91c1c,#ef4444); }

/* ---------- Buttons ---------- */
.btn{ border-radius:10px; font-weight:600; }
.btn-primary{
  background:linear-gradient(90deg,var(--sim-emerald-700),var(--sim-emerald-500));
  border:0;
}
.btn-primary:hover{ background:linear-gradient(90deg,var(--sim-emerald-800),var(--sim-emerald-600)); }
.btn-gold{
  background:linear-gradient(90deg,#c99a2e,var(--sim-gold));
  color:#3a2e05; border:0; font-weight:700;
}
.btn-gold:hover{ color:#3a2e05; filter:brightness(1.05); }
.btn-outline-primary{ border-color:var(--sim-emerald-600); color:var(--sim-emerald-700); }
.btn-outline-primary:hover{ background:var(--sim-emerald-600); border-color:var(--sim-emerald-600); }

/* ---------- Badges / status ---------- */
.badge-status{ font-weight:600; padding:.45em .75em; border-radius:20px; }
.badge{ border-radius:8px; }

/* ---------- Tables ---------- */
.table thead th{
  background:var(--sim-emerald-900);
  color:#fff;
  border:0;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.4px;
  white-space:nowrap;
}
.table-responsive{ border-radius:var(--sim-radius-sm); overflow:hidden; box-shadow:var(--sim-shadow-sm); }
.table tbody tr:hover{ background:var(--sim-emerald-100); }

/* ---------- Forms ---------- */
.form-control,.form-select{
  border-radius:10px;
  border:1px solid #dfe7e5;
  padding:.55rem .85rem;
}
.form-control:focus,.form-select:focus{
  border-color:var(--sim-emerald-500);
  box-shadow:0 0 0 .2rem rgba(20,184,166,.15);
}
.form-label{ font-weight:600; color:#334155; font-size:.88rem; }
.input-group-text{ background:var(--sim-slate-100); border-radius:10px 0 0 10px; }

/* Toggle-style checklist for ibadah items */
.ibadah-check{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--sim-slate-100);
  border-radius:var(--sim-radius-sm);
  padding:12px 14px; margin-bottom:10px;
  transition:all .18s ease; cursor:pointer;
}
.ibadah-check:hover{ box-shadow:var(--sim-shadow-sm); }
.ibadah-check input:checked ~ .ibadah-check-label{ color:var(--sim-emerald-700); font-weight:700; }
.ibadah-check.checked{
  background:linear-gradient(90deg,var(--sim-emerald-100),#fff);
  border-color:var(--sim-emerald-500);
}
.ibadah-check .form-check-input{
  width:2.1em; height:2.1em; cursor:pointer;
  border-color:var(--sim-emerald-500);
}
.ibadah-check .form-check-input:checked{
  background-color:var(--sim-emerald-600);
  border-color:var(--sim-emerald-600);
}
.ibadah-check-icon{
  width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:var(--sim-emerald-100); color:var(--sim-emerald-700);
  font-size:1.1rem; flex-shrink:0;
}

/* Dynamic repeater rows (Bakti Sosial / Bantu Ortu) */
.repeater-item{
  display:flex; gap:8px; align-items:center; margin-bottom:8px;
}
.repeater-item .form-control{ flex:1; }

/* ---------- Login Page ---------- */
.login-wrapper{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(60vw 60vw at 90% -10%,rgba(201,162,39,.18),transparent 60%),
    radial-gradient(50vw 50vw at -10% 110%,rgba(23,176,118,.22),transparent 60%),
    linear-gradient(160deg,var(--sim-emerald-900) 0%,var(--sim-emerald-700) 55%,#053a2b 100%);
  padding:20px;
  position:relative;
  overflow:hidden;
}
.login-wrapper::before{
  /* Motif kisi geometris bergaya islami, halus dan tidak mengganggu */
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.05) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.05) 75%, rgba(255,255,255,.05)),
    linear-gradient(45deg, rgba(255,255,255,.05) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.05) 75%, rgba(255,255,255,.05));
  background-size:44px 44px;
  background-position:0 0, 22px 22px;
  opacity:.6;
}
.login-card{
  position:relative; z-index:1;
  width:100%; max-width:420px;
  background:rgba(255,255,255,.97);
  border-radius:22px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5);
  padding:38px 34px;
  backdrop-filter:blur(6px);
}
.login-logo{
  width:72px;height:72px;border-radius:20px;
  background:linear-gradient(135deg,var(--sim-emerald-700),var(--sim-emerald-500));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:2rem;margin:0 auto 14px;
  box-shadow:0 10px 24px -8px rgba(6,78,59,.5);
}
.login-title{ text-align:center; font-weight:800; color:var(--sim-emerald-900); font-size:1.4rem; margin-bottom:2px;}
.login-subtitle{ text-align:center; color:#64748b; font-size:.88rem; margin-bottom:26px; }
.role-pill{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--sim-emerald-100); color:var(--sim-emerald-800);
  border-radius:20px; padding:4px 12px; font-size:.75rem; font-weight:700;
}

/* ---------- Progress ring / percent ---------- */
.progress{ border-radius:20px; background:var(--sim-slate-100); height:10px; }
.progress-bar{ background:linear-gradient(90deg,var(--sim-emerald-600),var(--sim-emerald-500)); }

/* ---------- Small utility ---------- */
.text-emerald{ color:var(--sim-emerald-700) !important; }
.bg-emerald-soft{ background:var(--sim-emerald-100) !important; }
.fw-800{ font-weight:800; }
.avatar-initial{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--sim-emerald-700),var(--sim-emerald-500));
  color:#fff;font-weight:700;font-size:.9rem;
}
.empty-state{ text-align:center; padding:50px 20px; color:#94a3b8; }
.empty-state i{ font-size:3rem; margin-bottom:12px; display:block; color:#cbd5e1; }

/* ---------- Mobile friendliness ---------- */
@media (max-width:991.98px){
  .stat-card{ padding:18px; }
  .stat-card .stat-value{ font-size:1.5rem; }
  .login-card{ padding:28px 22px; }
  .table-responsive{ font-size:.86rem; }
  .card-header{ font-size:.95rem; }
}
@media (max-width:575.98px){
  .app-header .navbar-nav .nav-link span.d-none{ display:none !important; }
  .stat-card{ margin-bottom:12px; }
}

/* Bottom nav for mobile (siswa) */
.mobile-bottom-nav{
  display:none;
  position:fixed; bottom:0; left:0; right:0; z-index:1030;
  background:#fff;
  box-shadow:0 -6px 20px -8px rgba(0,0,0,.15);
  border-radius:18px 18px 0 0;
  padding:8px 4px calc(env(safe-area-inset-bottom) + 6px);
}
.mobile-bottom-nav .nav-item{
  flex:1; text-align:center; color:#94a3b8; font-size:.68rem; font-weight:600;
  padding:6px 2px; border-radius:12px; text-decoration:none;
}
.mobile-bottom-nav .nav-item i{ display:block; font-size:1.25rem; margin-bottom:2px; }
.mobile-bottom-nav .nav-item.active{ color:var(--sim-emerald-600); }
@media (max-width:767.98px){
  .mobile-bottom-nav{ display:flex; }
  .content-wrapper,.app-main{ padding-bottom:70px; }
}