/* Mishkat dark mode — identity: navy #2c3e50, accent #e74c3c, gold #f1c40f, Tajawal */

:root {
    --theme-navy: #2c3e50;
    --theme-accent: #e74c3c;
    --theme-gold: #f1c40f;
}

.theme-toggle {
    --tt-size: 38px;
    flex: 0 0 auto;
    width: var(--tt-size);
    height: var(--tt-size);
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    border: 1.5px solid var(--theme-gold);
    border-radius: 50%;
    background: var(--theme-navy);
    color: var(--theme-gold);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 0;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(44, 62, 80, 0.28);
    transition: background 0.25s ease, transform 0.2s ease, border-color 0.25s ease, color 0.25s ease;
    -webkit-tap-highlight-color: transparent;
    z-index: 50;
}

.theme-toggle:hover {
    background: var(--theme-accent);
    border-color: #fff;
    color: #fff;
    transform: translateY(-1px);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--theme-gold);
    outline-offset: 2px;
}

.theme-toggle svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
    overflow: visible;
    flex: 0 0 auto;
}

.theme-toggle .icon-sun,
html.theme-dark .theme-toggle .icon-moon {
    display: none;
}

html.theme-dark .theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    display: block;
}

.nav-bookmark .theme-toggle {
    margin-bottom: 4px;
    background: var(--theme-navy);
    color: var(--theme-gold);
    border-color: var(--theme-gold);
    transform: translateX(20px);
}

.nav-bookmark .theme-toggle:hover {
    transform: translateX(0);
    background: var(--theme-accent);
    color: #fff;
    border-color: #fff;
}

.top-bar .theme-toggle {
    margin-inline: 4px;
}

.navigation .theme-toggle,
header .theme-toggle,
.container > header .theme-toggle,
.theme-toggle.theme-toggle--floating {
    background: var(--theme-navy);
    color: var(--theme-gold);
    border-color: var(--theme-gold);
}

html.theme-dark {
    color-scheme: dark;
    --light-color: #12181f;
    --card-bg: #22303c;
    --verse-bg: #2a241c;
    --page-bg: #12181f;
    --text-color: #ecf0f1;
    --muted-text: #b8c2cc;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 5px 18px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.45);
}

html.theme-dark body {
    background: var(--page-bg);
    background-color: var(--page-bg);
    color: var(--text-color);
}

html.theme-dark .intro-container,
html.theme-dark .container {
    background-color: transparent;
}

html.theme-dark .book-pages {
    background: var(--page-bg);
}

html.theme-dark .section-title,
html.theme-dark .book-title,
html.theme-dark .fact-title,
html.theme-dark .surah,
html.theme-dark .category-name,
html.theme-dark .book-card-title,
html.theme-dark .popup-title,
html.theme-dark .title,
html.theme-dark h1,
html.theme-dark h2,
html.theme-dark h3 {
    color: var(--text-color);
}

html.theme-dark .featured-book h1,
html.theme-dark .featured-book h2,
html.theme-dark .featured-title,
html.theme-dark header h1,
html.theme-dark header h2,
html.theme-dark header p,
html.theme-dark .top-bar,
html.theme-dark .top-bar a,
html.theme-dark .bookmark {
    color: #fff;
}

html.theme-dark .reason,
html.theme-dark .fact-text,
html.theme-dark .book-author,
html.theme-dark .subtitle,
html.theme-dark .featured-description,
html.theme-dark .favorites-empty,
html.theme-dark .quote-text {
    color: var(--muted-text);
}

html.theme-dark .comment-card,
html.theme-dark .fact-card,
html.theme-dark .intro-box,
html.theme-dark .book-item,
html.theme-dark .book-front,
html.theme-dark .category-item,
html.theme-dark .quote-card,
html.theme-dark .books-grid,
html.theme-dark .popup-content,
html.theme-dark .empty-state,
html.theme-dark .custom-alert-card,
html.theme-dark .alert-box,
html.theme-dark .download-popup,
html.theme-dark .form-card,
html.theme-dark .login-card,
html.theme-dark .modal-content,
html.theme-dark .category-section {
    background: var(--card-bg);
    background-color: var(--card-bg);
    color: var(--text-color);
    box-shadow: var(--shadow-md);
}

html.theme-dark .search-panel {
    background: #1a242e;
    color: var(--text-color);
}

html.theme-dark .verse {
    background: var(--verse-bg);
    color: #f6e7c9;
}

html.theme-dark .source {
    background: #1b2c3d;
    color: #c5d9ee;
    border-right-color: #5dade2;
}

html.theme-dark .dispute {
    background: #3a2424;
    color: #f5b7b1;
}

html.theme-dark .filter-btn,
html.theme-dark .category-btn,
html.theme-dark .clear-search-btn {
    background: #1b2836;
    color: #ecf0f1;
    border-color: #34495e;
}

html.theme-dark .filter-btn.active,
html.theme-dark .category-btn.active,
html.theme-dark .filter-btn:hover,
html.theme-dark .category-btn:hover {
    background: var(--theme-accent);
    color: #fff;
    border-color: var(--theme-accent);
}

html.theme-dark input,
html.theme-dark textarea,
html.theme-dark select,
html.theme-dark .search-input,
html.theme-dark .search-box {
    background: #1b2836;
    color: #ecf0f1;
    border-color: #3d5163;
}

html.theme-dark .search-form .search-btn {
    background: #1b2836;
    border: 1.5px solid var(--theme-gold);
    color: var(--theme-gold);
}

html.theme-dark .search-form .search-btn:hover,
html.theme-dark .search-form .search-btn.btn:hover {
    background: var(--theme-accent);
    border-color: var(--theme-accent);
}

html.theme-dark input::placeholder,
html.theme-dark textarea::placeholder,
html.theme-dark .search-box::placeholder {
    color: #8a9aab;
}

html.theme-dark footer,
html.theme-dark .footer-content {
    background: #0f151b;
    color: #d0d7de;
}

html.theme-dark .top-bar {
    background: #0f151b;
}

html.theme-dark .book-back {
    background: #1b2836;
    color: #ecf0f1;
}

html.theme-dark .book-description {
    color: #d5dee6;
}

html.theme-dark .featured-btn {
    background: #ecf0f1;
    color: #1b2836;
}

html.theme-dark .featured-btn:hover {
    background: var(--theme-accent);
    color: #fff;
}

html.theme-dark body > ul li,
html.theme-dark .search-results li {
    background: #1b2836;
    color: #ecf0f1;
}

html.theme-dark body > ul li:hover,
html.theme-dark .search-results li:hover {
    background: #243545;
}

html.theme-dark .navigation {
    background: #1a242e;
    color: #ecf0f1;
}

html.theme-dark .nav-title {
    color: #ecf0f1;
}

html.theme-dark .category-header h2 {
    color: #ecf0f1;
}

html.theme-dark .scholar-name {
    border-top-color: rgba(236, 240, 241, 0.12);
}

html.theme-dark .quote-card {
    border-color: rgba(236, 240, 241, 0.08);
}

html.theme-dark .footer-nav a {
    color: rgba(236, 240, 241, 0.9);
}

html.theme-dark .footer-nav a:hover,
html.theme-dark .footer-nav a:focus-visible {
    color: #f1c40f;
}

html.theme-dark .copyright {
    color: #9aa8b5;
}

html.theme-dark .social-icons .social-btn {
    color: #f1c40f;
    background: rgba(241, 196, 15, 0.08);
    border-color: rgba(241, 196, 15, 0.45);
}

html.theme-dark .social-icons .social-btn:hover,
html.theme-dark .social-icons .social-btn:focus-visible {
    background: var(--theme-accent);
    border-color: var(--theme-accent);
    color: #fff;
}

html.theme-dark .fav-toast {
    background: #22303c;
    color: #ecf0f1;
}

html.theme-dark .page-loader {
    background: #0f151b;
}

html.theme-dark .download-btn {
    color: #fff;
}

html.theme-dark .container .title {
    color: var(--text-color);
}

html.theme-dark .watermark {
    color: rgba(236, 240, 241, 0.12);
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle {
        transition: none;
    }
}