/**
 * Payd x ZuAfrique Scavenger Hunt
 * Responsive Styling - Works with both Bootstrap and Tailwind layouts
 */

/* Global responsive styles */
@media (max-width: 767.98px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    h1, .h1 {
        font-size: 1.8rem;
    }
    
    h2, .h2 {
        font-size: 1.5rem;
    }
    
    .card-title {
        font-size: 1.3rem;
    }
    
    /* Improve touch targets for mobile */
    .btn, button, a, input, select, textarea {
        min-height: 44px;
    }
    
    select.form-select {
        height: auto;
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
    }
    
    /* Task details page */
    .lead {
        font-size: 1rem;
    }
    
    /* Float labels for form inputs */
    .form-floating > .form-control,
    .form-floating > .form-select {
        height: calc(3.5rem + 2px);
        line-height: 1.25;
    }
    
    /* Fix image display */
    .img-fluid {
        width: 100%;
        object-fit: contain;
    }
    
    /* Show a hand cursor on images to indicate they can be clicked */
    .img-fluid {
        cursor: pointer;
    }
    
    /* Add spacing between form elements */
    .form-control, .form-select {
        margin-bottom: 0.5rem;
    }
    
    /* Make buttons more prominent */
    .btn-primary {
        width: 100%;
        padding: 0.75rem 1.5rem;
        font-weight: 500;
    }
    
    /* Mobile menu styles */
    .mobile-menu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background-color: #10263e !important;
        z-index: 1000 !important;
        padding: 2rem !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease-in-out !important;
        overflow-y: auto !important;
    }
    
    .mobile-menu.show {
        transform: translateX(0) !important;
    }
    
    /* For Bootstrap layout */
    .d-none.mobile-menu.show {
        display: block !important; 
    }
    
    /* For Tailwind layout */
    .hidden.mobile-menu.show {
        display: block !important;
    }
    
    body.menu-open {
        overflow: hidden !important; /* Prevent scrolling when menu is open */
    }
    
    .mobile-menu-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 2rem !important;
    }
    
    .mobile-menu ul {
        flex-direction: column !important;
        gap: 1.5rem !important;
    }
    
    .mobile-menu li {
        font-size: 1.25rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Mobile menu toggle button */
    .mobile-menu-toggle {
        display: none !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        padding: 0.5rem !important;
        z-index: 99 !important;
        position: relative !important;
    }
    
    @media (min-width: 768px) {
        .mobile-menu-toggle {
            display: none !important;
        }
    }
    
    /* Tailwind-specific mobile fixes */
    .md\:flex {
        display: none !important;
    }
    
    .hidden {
        display: none !important;
    }
    
    /* Make Tailwind layouts more responsive */
    .grid-cols-2, .grid-cols-3, .grid-cols-4 {
        grid-template-columns: 1fr !important;
    }
    
    /* Match Bootstrap's responsive spacing */
    .p-4 {
        padding: 1rem !important;
    }
    
    .m-4 {
        margin: 1rem !important;
    }
    
    /* Fix input styling */
    input, select, textarea {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure mobile menu toggle is visible on mobile */
    .mobile-menu-toggle, 
    button.mobile-menu-toggle {
        display: block !important;
    }
    
    /* Fix display for both frameworks */
    .mobile-menu.show {
        transform: translateX(0) !important;
        display: block !important;
    }
    
    .mobile-menu.d-none.show,
    .mobile-menu.hidden.show {
        display: block !important;
    }
}

/* Medium devices (tablets) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .container {
        max-width: 720px;
    }
    
    /* Task details page */
    .lead {
        font-size: 1.1rem;
    }
    
    /* Make buttons consistent */
    .btn-primary {
        padding: 0.5rem 1.25rem;
    }
    
    /* Tailwind-specific tablet fixes */
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    
    .md\:grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* Limit to 2 on tablets */
    }
}

/* Large devices (desktops) */
@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
    
    /* Task details page */
    .lead {
        font-size: 1.25rem;
    }
    
    /* Tailwind-specific desktop fixes */
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* Custom scrollbar for better UX */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #10263e;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #18d26e;
}

/* Animations for better responsiveness feel */
.card, .alert, .btn {
    transition: all 0.3s ease;
}

.btn:active {
    transform: scale(0.97);
}

/* Framework-agnostic utility classes */
.text-break {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overflow-auto {
    overflow: auto !important;
}

/* Cross-framework responsiveness fixes */
@media (max-width: 767.98px) {
    /* Make sure these classes work in both frameworks */
    .d-md-none, .md\:hidden {
        display: none !important;
    }
    
    .d-none, .hidden {
        display: none !important;
    }
    
    .d-block, .block {
        display: block !important;
    }
    
    .d-flex, .flex {
        display: flex !important;
    }
    
    /* Force buttons to be full width on mobile */
    button[type="submit"], 
    input[type="submit"],
    .btn, .button {
        width: 100%;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }
    
    /* Fix display issues in both frameworks */
    .w-full, .w-100 {
        width: 100% !important;
    }
    
    .h-full, .h-100 {
        height: 100% !important;
    }
    
    /* Fix z-index for modals */
    .modal, .fixed {
        z-index: 9999 !important;
    }
    
    /* Improve form elements in both frameworks */
    input, select, textarea {
        font-size: 16px !important; /* Prevents zoom on focus in iOS */
    }
}

/* Helpers for both frameworks */
.responsive-img {
    max-width: 100%;
    height: auto;
    display: block;
}

.responsive-container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

/* Fix for mobile menu in both frameworks */
@media (min-width: 768px) {
    .md\:block, .d-md-block {
        display: block !important;
    }
    
    .md\:hidden, .d-md-none {
        display: none !important;
    }
    
    .md\:flex, .d-md-flex {
        display: flex !important;
    }
}

/* Fix for form validation in both frameworks */
.is-invalid, .invalid {
    border-color: #dc3545 !important;
}

/* Ensure mobile menu toggle is always visible and properly layered */
.mobile-menu-toggle {
    display: none !important;
    z-index: 99 !important;
}

@media (max-width: 767.98px) {
    .mobile-menu-toggle {
        display: block !important;
    }
    
    body.menu-open .mobile-menu {
        display: block !important;
    }
}

@media (min-width: 768px) {
    .mobile-menu-toggle {
        display: none !important;
    }
}