@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Inter', sans-serif;
    background-color: #f5f5f4;
    /* Warm stone-50 */
    color: #1c1917;
    /* stone-900 */
    -webkit-tap-highlight-color: transparent;
}

/* Mobile App Container styles */
#app-container {
    /* max-width: 480px; */
    margin: 0 auto;
    background-color: #fafaf9;
    /* stone-50 */
    min-height: 100vh;
    height: 100vh;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    padding-top: max(env(safe-area-inset-top, 0px), 4px);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

@media (min-width: 1024px) {

    #app-container,
    #bottom-nav,
    #next-question-container {
        max-width: 1024px;
    }
}

@media (min-width: 768px) {
    .calendar-day-icon-container {
        width: 1.5rem;
        height: 1.5rem;
    }

    .calendar-day-icon-container>i {
        font-size: 0.7rem;
    }

    .calendar-days-box {
        font-size: 1.4rem;
    }
}

/* View transitions */
.view-section {
    animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    width: 100%;
    overflow: hidden;
    /* Handle scrolling inside the main content */
}

.view-section.hidden {
    display: none;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes welcomeSlideIn {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes welcomeSlideOut {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-100%);
    }
}

.welcome-enter {
    animation: welcomeSlideIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.welcome-exit {
    animation: welcomeSlideOut 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Custom Scrollbar */
.custom-scroll::-webkit-scrollbar {
    width: 0;
}

.custom-scroll::-webkit-scrollbar-thumb {
    background-color: #d6d3d1;
    /* stone-300 */
    border-radius: 4px;
}

/* Interactive Elements styling */
.active-scale:active {
    transform: scale(0.97);
}

.amen-pop {
    animation: amenPop 0.3s ease-out;
}

@keyframes amenPop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

.verse-highlight {
    background-color: #fef3c7;
    /* brand-100 */
    border-radius: 0.25rem;
    padding: 2px 4px;
    transition: background-color 0.2s;
}

/* Reading Progress Bar */
#reading-progress-container {
    width: 100%;
    height: 4px;
    background-color: #e7e5e4;
    /* stone-200 */
    z-index: 10;
}

#reading-progress-bar {
    height: 100%;
    background-color: #f59e0b;
    /* brand-500 */
    width: 0%;
    transition: width 0.2s ease-out;
}

/* Modal styling */
.modal-overlay {
    background-color: rgba(28, 25, 23, 0.5);
    /* stone-900 with opacity */
    animation: fadeIn 0.2s ease-out;
}

.modal-content {
    animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Offline / app utilities */
.pb-safe {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

#bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ==========================================================================
   Modern & Clean Dark Mode System
   ========================================================================== */

html.dark body {
    background-color: #0c0a09;
    /* stone-950 */
    color: #f5f5f4;
    /* stone-100 */
}

html.dark #app-container {
    background-color: #1c1917;
    /* stone-900 */
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
}

/* Base views & background overrides */
html.dark .view-section,
html.dark .bg-stone-50,
html.dark .bg-stone-100 {
    background-color: #1c1917 !important;
}

html.dark header,
html.dark .bg-white {
    background-color: #292524 !important;
    /* stone-800 */
}

/* Borders & Dividers */
html.dark .border-stone-100,
html.dark .border-stone-200,
html.dark .border-stone-300 {
    border-color: #3e3835 !important;
}

html.dark .divide-stone-100>*+*,
html.dark .divide-stone-200>*+* {
    border-color: #3e3835 !important;
}

/* Text Colors */
html.dark .text-stone-800,
html.dark .text-stone-900 {
    color: #e2dedb !important;
    /* Softened from #f5f5f4 for comfortable contrast */
}

html.dark .text-stone-700 {
    color: #d1cbc7 !important;
}

html.dark .text-stone-600 {
    color: #b8b2ad !important;
}

html.dark .text-stone-500 {
    color: #9c958f !important;
}

html.dark .text-stone-400 {
    color: #78716c !important;
    /* stone-500 */
}

/* Brand text colors must stay intact in dark mode */
html.dark .text-brand-500 {
    color: #f59e0b !important;
}

html.dark .text-brand-600 {
    color: #fbbf24 !important;
}

html.dark .text-brand-700 {
    color: #fcd34d !important;
}

html.dark .text-brand-400 {
    color: #fbbf24 !important;
}

html.dark .text-amber-600 {
    color: #fbbf24 !important;
}

/* Brand Tints in Dark Mode */
html.dark .bg-brand-50 {
    background-color: rgba(245, 158, 11, 0.12) !important;
}

/* Specific user highlighted row on leaderboard */
html.dark .bg-brand-50\/60,
html.dark [class*="bg-brand-50/60"] {
    background-color: rgba(0, 0, 0, 0.25) !important;
}

/* Announcements and Admin blogs tab pill container */
html.dark .bg-stone-200\/50,
html.dark [class*="bg-stone-200/50"] {
    background-color: rgba(0, 0, 0, 0.25) !important;
    border-color: #3e3835 !important;
}

/* Profile Initials Circle Avatar */
html.dark #profile-initials,
html.dark #profile-initials.bg-brand-100 {
    background-color: rgba(0, 0, 0, 0.25) !important;
    color: #f59e0b !important;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

html.dark .border-brand-100,
html.dark .border-brand-200 {
    border-color: rgba(245, 158, 11, 0.3) !important;
}

html.dark .text-brand-700,
html.dark .text-brand-800 {
    color: #fcd34d !important;
    /* brand-300 */
}

html.dark .text-brand-600 {
    color: #fbbf24 !important;
    /* brand-400 */
}

/* Secondary Badges & Icons */
html.dark .bg-stone-200,
html.dark .bg-stone-100 {
    background-color: #342f2c !important;
}

html.dark .hover\:bg-stone-50:hover,
html.dark .hover\:bg-stone-100:hover {
    background-color: #383330 !important;
}

html.dark .hover\:bg-stone-200:hover {
    background-color: #443e3a !important;
}

/* Form Controls & Inputs */
html.dark input[type="text"],
html.dark input[type="time"],
html.dark select,
html.dark textarea {
    background-color: #1c1917 !important;
    border-color: #443e3a !important;
    color: #e2dedb !important;
    color-scheme: dark;
    /* Ensures native time picker clock icon and dropdown render light in dark mode */
}

html.dark input[type="text"]:focus,
html.dark input[type="time"]:focus,
html.dark select:focus,
html.dark textarea:focus {
    border-color: #f59e0b !important;
}

/* Disabled input state in dark mode */
html.dark input:disabled,
html.dark button:disabled {
    opacity: 0.55;
}

/* Bottom Navigation */
html.dark #bottom-nav {
    background-color: #24201e !important;
    border-top-color: #3e3835 !important;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Modals & Dialogs */
html.dark .modal-overlay {
    background-color: rgba(0, 0, 0, 0.75) !important;
}

html.dark .modal-content {
    background-color: #24201e !important;
    border: 1px solid #443e3a;
}

/* Continuous Reader & Text */
html.dark #reader-content-area {
    background-color: #1c1917 !important;
}

html.dark .reader-verse-p {
    color: #d1cbc7 !important;
}

html.dark .verse-clickable:hover {
    background-color: rgba(245, 158, 11, 0.18) !important;
}

html.dark .verse-highlight {
    background-color: #78350f !important;
    /* brand-900 */
    color: #fef3c7 !important;
}

html.dark #reading-progress-container {
    background-color: #383330 !important;
}

/* Custom Scrollbar */
html.dark .custom-scroll::-webkit-scrollbar-thumb {
    background-color: #57534e !important;
}

/* Quiz & Options */
html.dark .quiz-option {
    /* background-color: #24201e !important;
    border-color: #3e3835 !important; */
    color: #e7e5e4 !important;
}

html.dark .quiz-option:hover {
    border-color: #f59e0b !important;
    background-color: #2e2926 !important;
}

html.dark .quiz-option span span.rounded {
    background-color: #383330 !important;
    color: #d6d3d1 !important;
}

/* Quiz Unlock Container */
html.dark #quiz-unlock-container {
    background-color: #24201e !important;
    border-color: #3e3835 !important;
}

/* Start Daily Quiz button when locked in dark mode */
html.dark #quiz-unlock-container button:disabled {
    background-color: rgba(0, 0, 0, 0.25) !important;
    color: #78716c !important;
    border: 1px solid #3e3835;
    border-style: dashed !important;
}

/* Calendar Grid Elements */
html.dark #calendar-grid>div.bg-stone-50 {
    background-color: #24201e !important;
    border-color: #3e3835 !important;
    color: #78716c !important;
}

html.dark #calendar-grid>div.bg-green-50 {
    background-color: rgba(34, 197, 94, 0.15) !important;
    border-color: rgba(34, 197, 94, 0.35) !important;
    color: #86efac !important;
}

html.dark #calendar-grid>div.bg-amber-50 {
    background-color: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
    color: #fde68a !important;
}

html.dark #calendar-grid>div.bg-red-50 {
    background-color: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    color: #fca5a5 !important;
}

html.dark #calendar-grid>div.bg-white {
    background-color: #292524 !important;
    color: #e2dedb !important;
}

/* Circle badges containing check, x, lock, and minus icons in Calendar */
html.dark #calendar-grid .border-white {
    border-color: #1c1917 !important;
}

/* Toggle Switches */
html.dark .peer:not(:checked)+div {
    background-color: #443e3a !important;
}

html.dark .peer:checked+div {
    background-color: #f59e0b !important;
    /* brand-500 amber/orange when on */
}

/* Loading spinner */
.app-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    width: 100%;
}

.app-loading::after {
    content: '';
    width: 2rem;
    height: 2rem;
    border: 3px solid #e7e5e4;
    /* stone-200 */
    border-top-color: #f59e0b;
    /* brand-500 */
    border-radius: 50%;
    animation: app-spin 0.7s linear infinite;
}

html.dark .app-loading::after {
    border-color: #44403c;
    border-top-color: #f59e0b;
}

@keyframes app-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Blog Markdown Content */
.blog-body-excerpt h1,
.blog-body-excerpt h2,
.blog-body-excerpt h3 {
    font-weight: 700;
    margin: 0.5rem 0 0.25rem;
    line-height: 1.3;
}

.blog-body-excerpt h1 {
    font-size: 1.125rem;
}

.blog-body-excerpt h2 {
    font-size: 1rem;
}

.blog-body-excerpt h3 {
    font-size: 0.9375rem;
}

.blog-body-excerpt ul,
.blog-body-excerpt ol {
    padding-left: 1.25rem;
    margin: 0.25rem 0;
}

.blog-body-excerpt li {
    margin-bottom: 0.125rem;
}

.blog-body-excerpt p {
    margin: 0.25rem 0;
}

.blog-body-excerpt strong {
    font-weight: 700;
}

.blog-body-excerpt em {
    font-style: italic;
}

.blog-body-excerpt code {
    background-color: #f5f5f4;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
}

html.dark .blog-body-excerpt code {
    background-color: #292524;
    color: #e2dedb;
}