:root{
  --bg: #0b1220;
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.70);
  --card-bg: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.12);
  --shadow: 0 10px 35px rgba(0,0,0,0.35);
  --accent: rgba(99,102,241,0.45);
  --accent2: rgba(34,197,94,0.30);
  --accent3: rgba(245,158,11,0.22);
}

/* Light theme */
:root[data-theme="light"]{
  --bg: #f6f7fb;
  --text: rgba(15,23,42,0.92);
  --muted: rgba(15,23,42,0.62);
  --card-bg: rgba(255,255,255,0.85);
  --border: rgba(15,23,42,0.10);
  --shadow: 0 10px 30px rgba(2,6,23,0.12);
  --accent: rgba(99,102,241,0.25);
  --accent2: rgba(34,197,94,0.18);
  --accent3: rgba(245,158,11,0.16);
}

body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 700px at 10% 10%, var(--accent), transparent 60%),
              radial-gradient(900px 600px at 90% 20%, var(--accent2), transparent 55%),
              radial-gradient(800px 500px at 20% 90%, var(--accent3), transparent 55%),
              var(--bg);
  color: var(--text);
}

a{ color: var(--text); }
a:hover{ color: var(--text); opacity: 0.95; }

.sidebar{
  width: 280px;
  background: rgba(255,255,255,0.06);
  border-right: 1px solid var(--border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

:root[data-theme="light"] .sidebar{
  background: rgba(255,255,255,0.70);
}

.content{ min-height: 100vh; }

.card-glass{
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.badge-soft{
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--text);
}

.table-glass{
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--border);
}

.muted{ color: var(--muted); }

/* Force readable text inside glass cards */
.card-glass, .card-glass *{ color: var(--text); }

/* Arabic / Latin - enhanced readability */
.arabic, .small-arabic{
  font-family: "Amiri", "Scheherazade New", serif;
  direction: rtl;
  color: var(--text);
  text-shadow: 0 1px 14px rgba(0,0,0,0.35);
}
.arabic{ font-size: 1.45rem; line-height: 2.25rem; }
.small-arabic{ font-size: 1.15rem; line-height: 2rem; }

.latin-text{
  color: var(--text) !important;
  font-weight: 500;
}

/* Improve list-group on dark + light */
.list-group-item{
  background: transparent !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.list-group-item:hover{
  background: rgba(255,255,255,0.06) !important;
}
:root[data-theme="light"] .list-group-item:hover{
  background: rgba(2,6,23,0.04) !important;
}

.nav-link.active{
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.12);
}

:root[data-theme="light"] .nav-link.active{
  background: rgba(2,6,23,0.06) !important;
  border: 1px solid rgba(2,6,23,0.10);
}

.toast-container{ z-index: 1080; }

/* =============================
   Layout presets (HP/Tablet/PC)
   - Stored as: documentElement.dataset.layout = 'mobile'|'tablet'|'desktop'
   ============================= */
:root[data-layout="mobile"] .container{
  max-width: 420px !important;
}
:root[data-layout="tablet"] .container{
  max-width: 900px !important;
}
:root[data-layout="desktop"] .container{
  max-width: 1200px !important;
}
/* Smaller UI density for mobile preset */
:root[data-layout="mobile"] .h4{ font-size: 1.25rem; }
:root[data-layout="mobile"] .h5{ font-size: 1.05rem; }
:root[data-layout="mobile"] .arabic{ font-size: 1.25rem; line-height: 2.05rem; }
/* Slightly tighter sidebar for tablet preset */
:root[data-layout="tablet"] .sidebar{ width: 250px; }


/* Asmaul Husna animations */
@keyframes pulseHighlight{
  0%{ transform: translateY(0); box-shadow: var(--shadow); }
  50%{ transform: translateY(-2px); box-shadow: 0 14px 40px rgba(0,0,0,0.35); }
  100%{ transform: translateY(0); box-shadow: var(--shadow); }
}
.asmaul-item.active{
  animation: pulseHighlight 0.45s ease-in-out;
  outline: 2px solid rgba(255,255,255,0.18);
}