body {
    font-family: "Tajawal", sans-serif;
    background: var(--palette-bg, #f0f4f2);
    color: var(--palette-text, #3d4a46);
}

html {
    font-family: "Tajawal", sans-serif;
    background: var(--palette-bg, #f0f4f2);
}

.dark {
    color-scheme: dark;
}

/* الوضع الداكن — من theme.css فقط (بدون gray-900 Tailwind) */
.dark body {
    background-color: var(--palette-bg) !important;
    color: var(--palette-text);
}

.dark .bg-white {
    background-color: var(--palette-surface-elevated) !important;
}

.dark .text-gray-900 {
    color: var(--palette-text) !important;
}

.dark .text-gray-600,
.dark .text-gray-500 {
    color: var(--palette-text-muted) !important;
}

.dark .border-gray-300 {
    border-color: var(--palette-border) !important;
}

.dark .bg-gray-50 {
    background-color: var(--palette-primary-soft) !important;
}

.rtl {
    direction: rtl;
}

@layer components {
    .pagination-item {
        @apply relative inline-flex items-center px-3 py-1 text-sm font-medium rounded-full transition-colors;
    }

    .pagination-item-active {
        @apply text-white;
        background-color: var(--palette-primary);
    }

    .pagination-item-inactive {
        @apply relative inline-flex items-center px-3 py-1 text-sm font-medium rounded-full transition-colors;
        color: var(--palette-text-muted);
        background-color: var(--palette-surface-elevated);
        border: 1px solid var(--palette-border-subtle);
    }

    .pagination-item-inactive:hover {
        background-color: var(--palette-primary-soft);
    }

    .pagination-nav {
        @apply relative inline-flex items-center p-2 text-sm font-medium rounded-full transition-colors;
    }

    .pagination-nav-active {
        color: var(--palette-text-muted);
        background-color: var(--palette-surface-elevated);
        border: 1px solid var(--palette-border-subtle);
    }

    .pagination-nav-active:hover {
        background-color: var(--palette-primary-soft);
    }

    .pagination-nav-disabled {
        color: var(--palette-text-subtle);
        background-color: var(--palette-surface);
        cursor: not-allowed;
        opacity: 0.6;
    }
}

.surah-card {
    transition: all 0.3s ease-in-out;
}

.surah-card[style*="display: none"] {
    opacity: 0;
    transform: translateY(10px);
}

.search-input:focus {
    border-color: var(--palette-primary);
    box-shadow: 0 0 0 3px var(--palette-primary-soft);
    outline: none;
}

.search-input::placeholder {
    color: var(--palette-text-subtle);
}

a.nav-item {
    margin-left: calc(2rem * var(--tw-space-x-reverse)) !important;
    margin-right: calc(2rem * calc(1 - var(--tw-space-x-reverse))) !important;
}

svg.w-5.h-5.ml-2 {
    margin-right: .5rem;
    margin-left: 0;
}

span.text-lg.font-medium.mr-2 {
    margin-left: .5rem;
    margin-right: 0;
}

button#prev-btn {
    rotate: 180deg;
}

button#next-btn {
    rotate: 180deg;
}

a.text-gray-600.hover\:text-emerald-600.text-sm {
    margin-left: calc(1.5rem * var(--tw-space-x-reverse));
    margin-right: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
}

a.relative.inline-flex.items-center.p-2.text-sm.font-medium.text-gray-700.dark\:text-gray-300.bg-white.dark\:bg-gray-800.hover\:bg-emerald-50.dark\:hover\:bg-gray-700.rounded-full.transition-colors {
    margin-left: calc(1.5rem * var(--tw-space-x-reverse));
    margin-right: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.surah-number {
    margin-right: 0.75rem;
    margin-left: 0 !important;
}

.language-toggle-icon {
    margin-right: .5rem;
    margin-left: 0;
}

@media (max-width: 768px) {
    .account-menu,
    .language-menu {
        display: none;
    }
}