.arabic-text {
	font-family: 'Amiri', serif;
	line-height: 2.3;
}
.calendar-day-cell:focus-visible {
	outline: 2px solid #10b981;
	outline-offset: 2px;
}
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
::-webkit-scrollbar-track {
	background: rgba(15, 23, 42, 0.6);
}
::-webkit-scrollbar-thumb {
	background: #059669;
	border-radius: 9999px;
}
.compass-ring {
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.skeleton {
	background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
	background-size: 200% 100%;
	animation: loading 1.5s infinite;
}
html:not(.dark) .skeleton {
	background: linear-gradient(90deg, #e2e8f0 25%, #cbd5e1 50%, #e2e8f0 75%);
	background-size: 200% 100%;
}
@keyframes loading {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* =========================================================
   LIGHT MODE REFRESH
   Menyatukan seluruh UI agar Light Mode benar-benar terang,
   bersih, nyaman dibaca, dan tetap mempertahankan aksen emerald.
   ========================================================= */
html:not(.dark) body {
	background:
		radial-gradient(circle at 0% 0%, rgba(16, 185, 129, 0.08), transparent 28%),
		radial-gradient(circle at 100% 15%, rgba(20, 184, 166, 0.06), transparent 24%),
		linear-gradient(180deg, #f8fbfa 0%, #f1f6f4 100%) !important;
	color: #1e293b !important;
}

html:not(.dark) ::-webkit-scrollbar-track {
	background: #e7eeeb !important;
}

html:not(.dark) ::-webkit-scrollbar-thumb {
	background: #10b981 !important;
}

/* Slate backgrounds -> light surfaces */
html:not(.dark) .bg-slate-950 {
	background-color: #eef5f2 !important;
}
html:not(.dark) .bg-slate-900 {
	background-color: #ffffff !important;
}
html:not(.dark) .bg-slate-800 {
	background-color: #ffffff !important;
}
html:not(.dark) .bg-slate-700 {
	background-color: #e8f0ed !important;
}
html:not(.dark) .bg-slate-600 {
	background-color: #dbe7e2 !important;
}
html:not(.dark) [class*="bg-slate-900/"] {
	background-color: rgba(248, 250, 249, 0.94) !important;
}
html:not(.dark) [class*="bg-slate-800/"] {
	background-color: rgba(255, 255, 255, 0.92) !important;
}
html:not(.dark) [class*="bg-slate-700/"] {
	background-color: rgba(241, 246, 244, 0.96) !important;
}
html:not(.dark) [class*="bg-slate-600/"] {
	background-color: rgba(232, 240, 237, 0.96) !important;
}

/* Slate text -> readable dark text */
html:not(.dark) .text-slate-100,
html:not(.dark) .text-slate-200,
html:not(.dark) .text-slate-300 {
	color: #334155 !important;
}
html:not(.dark) .text-slate-400 {
	color: #64748b !important;
}
html:not(.dark) .text-slate-500 {
	color: #78909c !important;
}
html:not(.dark) .text-slate-600,
html:not(.dark) .text-slate-700 {
	color: #475569 !important;
}
html:not(.dark) .text-slate-800,
html:not(.dark) .text-slate-900 {
	color: #1e293b !important;
}

/* Slate borders -> soft neutral borders */
html:not(.dark) .border-slate-800,
html:not(.dark) .border-slate-700,
html:not(.dark) .border-slate-600 {
	border-color: #d7e2de !important;
}
html:not(.dark) [class*="border-slate-800/"] {
	border-color: rgba(203, 213, 209, 0.82) !important;
}
html:not(.dark) [class*="border-slate-700/"] {
	border-color: rgba(215, 226, 222, 0.92) !important;
}
html:not(.dark) [class*="border-slate-600/"] {
	border-color: rgba(203, 216, 210, 0.92) !important;
}

/* Buttons / secondary controls */
html:not(.dark) button.bg-slate-800,
html:not(.dark) button.bg-slate-700,
html:not(.dark) button[class*="bg-slate-800/"] {
	color: #334155 !important;
	border-color: #d3dfda !important;
}
html:not(.dark) button.bg-slate-800:hover,
html:not(.dark) button.bg-slate-700:hover,
html:not(.dark) button[class*="bg-slate-800/"]:hover {
	background-color: #e6efeb !important;
	color: #047857 !important;
}

/* Inputs / selects */
html:not(.dark) input,
html:not(.dark) select,
html:not(.dark) textarea {
	background-color: #ffffff !important;
	color: #1e293b !important;
	border-color: #ccd9d4 !important;
}
html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
	color: #94a3b8 !important;
}
html:not(.dark) select option {
	background: #ffffff !important;
	color: #1e293b !important;
}

/* Navigation surfaces */
html:not(.dark) header {
	background: rgba(255, 255, 255, 0.90) !important;
	border-bottom-color: #dbe5e1 !important;
}
html:not(.dark) aside nav {
	background: rgba(255, 255, 255, 0.78) !important;
	border-color: #d8e3df !important;
	box-shadow: 0 12px 35px rgba(15, 118, 110, 0.06) !important;
}
html:not(.dark) .nav-btn {
	color: #475569 !important;
}
html:not(.dark) .nav-btn:hover {
	background: rgba(16, 185, 129, 0.08) !important;
	color: #059669 !important;
}
html:not(.dark) .nav-btn.bg-emerald-600\/20 {
	background: rgba(16, 185, 129, 0.13) !important;
	color: #047857 !important;
}

/* Dashboard next-prayer banner: light, not a dark block */
html:not(.dark) #tab-dashboard > div.bg-gradient-to-r {
	background: linear-gradient(135deg, #ecfdf5 0%, #f8fafc 52%, #f0fdfa 100%) !important;
	border-color: rgba(16, 185, 129, 0.22) !important;
	color: #0f172a !important;
	box-shadow: 0 18px 45px rgba(15, 118, 110, 0.08) !important;
}
html:not(.dark) #tab-dashboard > div.bg-gradient-to-r #next-prayer-name {
	color: #0f172a !important;
}
html:not(.dark) #tab-dashboard > div.bg-gradient-to-r p,
html:not(.dark) #tab-dashboard > div.bg-gradient-to-r span {
	color: #475569 !important;
}
html:not(.dark) #tab-dashboard > div.bg-gradient-to-r .text-white {
	color: #0f172a !important;
}
html:not(.dark) #tab-dashboard > div.bg-gradient-to-r .bg-emerald-500\/20 {
	background: rgba(16, 185, 129, 0.12) !important;
	color: #047857 !important;
	border-color: rgba(16, 185, 129, 0.24) !important;
}
html:not(.dark) #countdown-timer {
	filter: saturate(0.9);
}

/* Cards / panels */
html:not(.dark) .shadow-sm,
html:not(.dark) .shadow-xl,
html:not(.dark) .shadow-2xl {
	--tw-shadow-color: rgba(15, 118, 110, 0.08) !important;
}

/* Modals and mobile drawer */
html:not(.dark) [class*="bg-slate-950/"] {
	background-color: rgba(15, 23, 42, 0.34) !important;
}
html:not(.dark) #mobile-menu-modal > div {
	background: #ffffff !important;
	color: #1e293b !important;
}

/* Quran / Hadits / Doa reader surfaces */
html:not(.dark) #quran-main-view > div,
html:not(.dark) #ayahs-list > div,
html:not(.dark) #hadits-list > div,
html:not(.dark) #duas-list-container > div,
html:not(.dark) #asmaul-grid > div,
html:not(.dark) #places-grid > div {
	box-shadow: 0 8px 24px rgba(15, 118, 110, 0.045) !important;
}

/* Arabic text keeps a strong ink tone on light background */
html:not(.dark) .arabic-text {
	color: #0f766e;
}

/* Bottom mobile navigation */
html:not(.dark) .mobile-nav-btn {
	color: #64748b !important;
}
html:not(.dark) .mobile-nav-btn:hover {
	color: #059669 !important;
}

/* Keep emerald / gold accents vivid in light mode */
html:not(.dark) .text-emerald-300 { color: #059669 !important; }
html:not(.dark) .text-emerald-400 { color: #059669 !important; }
html:not(.dark) .text-emerald-500 { color: #047857 !important; }
html:not(.dark) .text-emerald-600 { color: #047857 !important; }
html:not(.dark) .text-gold-400 { color: #b45309 !important; }

/* Strong focus ring for accessibility */
html:not(.dark) input:focus,
html:not(.dark) select:focus,
html:not(.dark) textarea:focus,
html:not(.dark) button:focus-visible {
	outline: 2px solid rgba(16, 185, 129, 0.30);
	outline-offset: 1px;
}

.pattern-green{
  background-image:url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%230f8c67' stroke-opacity='.08' stroke-width='1.2'%3E%3Cpath d='M24 2 46 24 24 46 2 24Z'/%3E%3Ccircle cx='24' cy='24' r='9'/%3E%3C/g%3E%3C/svg%3E");
}

#scrollTopBtn {
	position: fixed;
	bottom: 70px;
	right: 20px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: rgba(142, 255, 184, 0.21);
	color: white;
	border: none;
	cursor: pointer;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	opacity: 0;
	visibility: hidden;
	transform: scale(0.5);
	transition: all 0.3s ease-out;
	z-index: 1000;
}
#scrollTopBtn:hover {
	background-color: #15803d;
	transform: scale(1.05) translateY(-3px);
}
#scrollTopBtn.show {
	opacity: 1;
	visibility: visible;
	transform: scale(1);
}