/* MuKaKa Frontend Styles */

/* Import Tailwind CSS from CDN */
@import url('https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css');

/* ============================================
   DARK MODE SUPPORT
   Tailwind v2 CDN doesn't include dark mode by default,
   so we add manual overrides for dark: classes
   ============================================ */

html.dark {
    color-scheme: dark;
}

/* Background colors - match elements with dark:bg- classes */
html.dark [class*="dark:bg-gray-800"] { background-color: #1f2937 !important; }
html.dark [class*="dark:bg-gray-900"] { background-color: #111827 !important; }
html.dark [class*="dark:bg-gray-950"] { background-color: #030712 !important; }
html.dark [class*="dark:bg-gray-700"] { background-color: #374151 !important; }
html.dark [class*="dark:bg-gray-600"] { background-color: #4b5563 !important; }
html.dark [class*="dark:bg-transparent"] { background-color: transparent !important; }

/* Text colors */
html.dark [class*="dark:text-white"] { color: #ffffff !important; }
html.dark [class*="dark:text-gray-100"] { color: #f3f4f6 !important; }
html.dark [class*="dark:text-gray-200"] { color: #e5e7eb !important; }
html.dark [class*="dark:text-gray-300"] { color: #d1d5db !important; }
html.dark [class*="dark:text-gray-400"] { color: #9ca3af !important; }
html.dark [class*="dark:text-gray-500"] { color: #6b7280 !important; }
html.dark [class*="dark:text-gray-900"] { color: #111827 !important; }

/* Border colors */
html.dark [class*="dark:border-gray-600"] { border-color: #4b5563 !important; }
html.dark [class*="dark:border-gray-700"] { border-color: #374151 !important; }

/* Divide colors */
html.dark [class*="dark:divide-gray-600"] > * + * { border-color: #4b5563 !important; }
html.dark [class*="dark:divide-gray-700"] > * + * { border-color: #374151 !important; }

/* Blue variants */
html.dark [class*="dark:bg-blue-900"] { background-color: #1e3a8a !important; }
html.dark [class*="dark:bg-blue-800"] { background-color: #1e40af !important; }
html.dark [class*="dark:border-blue-700"] { border-color: #1d4ed8 !important; }
html.dark [class*="dark:text-blue-200"] { color: #bfdbfe !important; }
html.dark [class*="dark:text-blue-800"] { color: #1e40af !important; }

/* Red variants */
html.dark [class*="dark:bg-red-900"] { background-color: #7f1d1d !important; }
html.dark [class*="dark:bg-red-800"] { background-color: #991b1b !important; }
html.dark [class*="dark:border-red-700"] { border-color: #b91c1c !important; }
html.dark [class*="dark:text-red-200"] { color: #fecaca !important; }
html.dark [class*="dark:text-red-400"] { color: #f87171 !important; }

/* Hover states */
html.dark [class*="dark:hover:bg-gray-700"]:hover { background-color: #374151 !important; }
html.dark [class*="dark:hover:bg-gray-600"]:hover { background-color: #4b5563 !important; }
html.dark [class*="dark:hover:bg-gray-800"]:hover { background-color: #1f2937 !important; }
html.dark [class*="dark:hover:bg-blue-800"]:hover { background-color: #1e40af !important; }
html.dark [class*="dark:hover:bg-red-800"]:hover { background-color: #991b1b !important; }

/* ============================================
   CUSTOM RESPONSIVE UTILITIES
   (Tailwind CDN doesn't include all lg: variants)
   ============================================ */

/* Desktop Sidebar - hidden on mobile, flex on desktop */
.mukaka-sidebar-desktop {
    display: none !important;
}

@media (min-width: 1024px) {
    .mukaka-sidebar-desktop {
        display: flex !important;
        flex-direction: column;
    }
}

/* Mobile Header - visible on mobile, hidden on desktop */
.mukaka-mobile-header {
    display: flex !important;
}

@media (min-width: 1024px) {
    .mukaka-mobile-header {
        display: none !important;
    }
}

/* Bottom Navigation - visible on mobile, hidden on desktop */
.mukaka-bottom-nav {
    display: block !important;
}

@media (min-width: 1024px) {
    .mukaka-bottom-nav {
        display: none !important;
    }
}

/* ============================================
   BASE STYLES
   ============================================ */

.mukaka-app {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 100%;
    max-width: 100%;
    scroll-behavior: smooth;
}

#mukaka-app-root {
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
    display: block;
    clear: both;
}

/* Box-sizing reset */
.mukaka-app * {
    box-sizing: border-box;
}

/* Reset default margins for headlines */
.mukaka-app h1,
.mukaka-app h2,
.mukaka-app h3,
.mukaka-app h4,
.mukaka-app h5,
.mukaka-app h6 {
    margin: 0 0 0.5rem 0;
    padding: 0;
}

/* Ensure images don't overflow */
.mukaka-app img {
    max-width: 100%;
    height: auto;
}

/* ============================================
   WORDPRESS THEME OVERRIDES
   ============================================ */

/* Make MuKaKa pages use full width */
body.mukaka-app-page .sidebar {
    display: none !important;
}

body.mukaka-app-page .section-inner,
body.mukaka-app-page #site-content,
body.mukaka-app-page .wrapper.section-inner,
body.mukaka-app-page .content,
body.mukaka-app-page .content.left,
body.mukaka-app-page .post-content,
body.mukaka-app-page .entry-content {
    width: 100% !important;
    max-width: 100% !important;
}

/* ============================================
   LOADING STATE
   ============================================ */

.mukaka-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    font-size: 18px;
    color: #666;
}

/* ============================================
   MOBILE-SPECIFIC STYLES
   ============================================ */

@media (max-width: 768px) {
    .mukaka-app {
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
    }
    
    /* Prevent horizontal scroll */
    body.mukaka-app-page {
        overflow-x: hidden;
    }
    
    #mukaka-app-root {
        overflow-x: hidden;
        width: 100vw;
        max-width: 100vw;
    }
    
    /* Prevent iOS zoom on input focus */
    .mukaka-app input,
    .mukaka-app select,
    .mukaka-app textarea {
        font-size: 16px;
    }
    
    /* Better touch scrolling */
    .mukaka-app .overflow-y-auto {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
}

/* ============================================
   PAGINATION BUTTONS
   ============================================ */

.mukaka-pagination-btn {
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    color: #111827;
}

.mukaka-pagination-btn:hover {
    background-color: #f3f4f6;
}

html.dark .mukaka-pagination-btn {
    background-color: #374151;
    border-color: #4b5563;
    color: #ffffff;
}

html.dark .mukaka-pagination-btn:hover {
    background-color: #4b5563;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

.mukaka-app button:focus,
.mukaka-app a:focus,
.mukaka-app input:focus,
.mukaka-app select:focus,
.mukaka-app textarea:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Remove underline from sidebar links */
.mukaka-sidebar-desktop a,
.mukaka-sidebar-desktop a:hover,
.mukaka-sidebar-desktop a:focus {
    text-decoration: none !important;
}

/* ============================================
   MODAL STATE
   ============================================ */

/* Prevent body scroll when modal/settings is open */
body.mukaka-modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}

/* ============================================
   ADD CAMERA MODAL - Mobile optimized
   ============================================ */

/* Modal container - above bottom nav */
.mukaka-app .z-\[60\] {
    z-index: 60 !important;
}

/* Modal content - smaller on mobile to leave room for bottom nav */
@media (max-width: 767px) {
    .mukaka-add-modal {
        max-height: 75vh !important;
    }
}