/* Mobile Optimization for Questionnaire - KONO-101 */

/* Better touch targets for mobile (min 44x44px recommended by Apple/Google) */
@media (max-width: 768px) {
    /* Introduction section - fix layout issues */
    #intro-section {
        padding: 20px 16px !important;
        margin-bottom: 16px !important;
    }

    #intro-section .text-center {
        padding: 0 !important;
    }

    #intro-section h1 {
        font-size: 24px !important;
        line-height: 1.2 !important;
        margin-bottom: 12px !important;
    }

    #intro-section .text-xl {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }

    #intro-section .w-20.h-20 {
        width: 60px !important;
        height: 60px !important;
        margin-bottom: 16px !important;
    }

    #intro-section .w-10.h-10 {
        width: 32px !important;
        height: 32px !important;
    }

    /* Instructions box */
    #intro-section .bg-light-blue {
        padding: 16px !important;
        margin-bottom: 16px !important;
    }

    #intro-section .text-lg {
        font-size: 16px !important;
    }

    #intro-section ul {
        font-size: 14px !important;
        padding-left: 8px !important;
    }

    /* Form inputs */
    #intro-section .grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    #intro-section input {
        padding: 12px 16px !important;
        font-size: 16px !important;
    }

    #intro-section label {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }

    /* GDPR consent */
    #intro-section .bg-yellow-50 {
        padding: 12px !important;
    }

    #intro-section .bg-yellow-50 label {
        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    /* Start button */
    #start-questionnaire {
        padding: 14px 24px !important;
        font-size: 16px !important;
    }

    /* Support bar optimization - Hamburger Menu on Mobile */
    .bg-primary.text-white.text-sm {
        padding: 10px 0 !important;
        position: relative !important;
    }

    .bg-primary .container {
        padding: 0 16px !important;
    }

    /* Main flex container - simple row with space between */
    .bg-primary > div > .flex {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 12px !important;
    }

    /* Title text - smaller on mobile */
    .bg-primary .flex > div:first-child {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .bg-primary .flex > div:first-child span {
        font-size: 12px !important;
        line-height: 1.3 !important;
        display: block !important;
    }

    /* Support bar - hide desktop buttons, show hamburger */
    .bg-primary .flex.gap-3 {
        display: none !important;
    }

    .mobile-menu-toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 40px !important;
        height: 40px !important;
        background: rgba(255, 255, 255, 0.15) !important;
        border-radius: 8px !important;
        border: none !important;
        cursor: pointer !important;
        padding: 8px !important;
        transition: background 0.2s !important;
    }
}

/* Desktop - show menu properly aligned */
@media (min-width: 769px) {
    /* Show desktop menu */
    .bg-primary .flex.gap-3 {
        display: flex !important;
        align-items: center !important;
    }

    /* Hide hamburger menu on desktop */
    .mobile-menu-toggle {
        display: none !important;
    }

    /* Hide mobile dropdown on desktop - force hide */
    .mobile-menu-dropdown {
        display: none !important;
        visibility: hidden !important;
        max-height: 0 !important;
        overflow: hidden !important;
    }

    .mobile-menu-dropdown.active {
        display: none !important;
    }
}

/* Mobile hamburger interaction styles */
@media (max-width: 768px) {
    .mobile-menu-toggle:active {
        background: rgba(255, 255, 255, 0.25) !important;
    }

    .mobile-menu-toggle span {
        display: block !important;
        width: 20px !important;
        height: 2px !important;
        background: white !important;
        border-radius: 2px !important;
        transition: all 0.3s !important;
    }

    .mobile-menu-toggle span:not(:last-child) {
        margin-bottom: 4px !important;
    }

    /* Hamburger animation when open */
    .mobile-menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translateY(7px) !important;
    }

    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translateY(-7px) !important;
    }

    /* Mobile dropdown menu - hidden by default */
    .mobile-menu-dropdown {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        background: #0098d4 !important;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.3s ease-in-out !important;
        z-index: 40 !important;
    }

    .mobile-menu-dropdown.active {
        display: block !important;
        max-height: 400px !important;
        border-top: 1px solid rgba(255,255,255,0.2) !important;
    }

    .mobile-menu-dropdown-content {
        padding: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* Hide nested containers' gaps */
    .mobile-menu-dropdown-content > div {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .mobile-menu-dropdown button,
    .mobile-menu-dropdown a {
        display: block !important;
        width: 100% !important;
        padding: 14px 16px !important;
        background: white !important;
        color: #00AEEF !important;
        border-radius: 10px !important;
        text-align: center !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        transition: all 0.2s !important;
        border: none !important;
        cursor: pointer !important;
    }

    .mobile-menu-dropdown button:active,
    .mobile-menu-dropdown a:active {
        transform: scale(0.98) !important;
        background: #f0f9ff !important;
    }

    /* User greeting in dropdown */
    .mobile-menu-dropdown #userGreeting {
        color: white !important;
        font-size: 13px !important;
        text-align: center !important;
        padding: 8px 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.2) !important;
        margin-bottom: 8px !important;
    }

    /* Larger touch areas for answer cells */
    .answer-cell {
        padding: 12px 8px !important;
    }

    .answer-option {
        width: 44px !important;
        height: 44px !important;
        font-size: 16px !important;
    }

    /* Make table more mobile-friendly with card layout */
    .mobile-question-card {
        display: block;
        margin-bottom: 16px;
        padding: 16px;
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .mobile-question-text {
        font-size: 15px;
        line-height: 1.5;
        margin-bottom: 12px;
        color: #1f2937;
        font-weight: 500;
    }

    .mobile-answers-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    .mobile-answer-button {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 12px 8px;
        min-height: 68px;
        border: 2px solid #e5e7eb;
        border-radius: 8px;
        background: #f9fafb;
        cursor: pointer;
        transition: all 0.2s;
    }

    .mobile-answer-button:active {
        transform: scale(0.95);
    }

    .mobile-answer-button.selected {
        background: #00AEEF;
        border-color: #00AEEF;
        color: white;
    }

    .mobile-answer-label {
        font-size: 11px;
        margin-bottom: 4px;
        text-align: center;
        line-height: 1.2;
    }

    .mobile-answer-value {
        font-size: 20px;
        font-weight: 700;
    }

    /* Hide desktop table on mobile */
    .desktop-question-table {
        display: none !important;
    }

    .mobile-questions-container {
        display: block !important;
    }

    /* Optimize header for mobile */
    header {
        padding: 16px 0 !important;
    }

    header .container {
        padding: 0 16px !important;
    }

    /* Main flex container in header */
    header > div > .flex {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: center !important;
    }

    /* Logo container */
    header .flex > div:first-child {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    header img {
        width: 160px !important;
        height: auto !important;
        max-width: 90% !important;
    }

    /* Progress indicator in header - show and center */
    header .hidden.md\\:flex,
    header > div > .flex > div:last-child {
        display: flex !important;
        justify-content: center !important;
        font-size: 14px !important;
        width: 100% !important;
        text-align: center !important;
    }

    header .text-sm {
        font-size: 13px !important;
    }

    /* Question section container - tylko mobile */
    #questions-container .bg-white.rounded-2xl.shadow-lg {
        padding: 16px !important;
        margin-bottom: 16px !important;
    }

    /* Section title - tylko w questions container */
    #questions-container .text-2xl.font-bold {
        font-size: 18px !important;
        margin-bottom: 12px !important;
    }

    /* Section header - tylko na bardzo małych ekranach */
    @media (max-width: 640px) {
        #questions-container .flex.items-center.justify-between.mb-4 {
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: 12px !important;
        }

        #questions-container .flex.items-center.justify-between.mb-4 > div:last-child {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }

    /* Quick fill section */
    #questions-container .flex.items-center.gap-2.mb-4.p-3 {
        flex-wrap: wrap !important;
        padding: 12px !important;
    }

    @media (max-width: 480px) {
        #questions-container .flex.items-center.gap-2.mb-4.p-3 > span {
            width: 100%;
            margin-bottom: 8px;
        }
    }

    /* Container padding */
    .container.mx-auto {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .max-w-4xl {
        max-width: 100% !important;
    }

    /* Better button spacing on mobile */
    #prev-btn,
    #next-btn,
    #submit-btn {
        min-height: 48px;
        font-size: 16px;
        padding: 12px 24px;
    }

    /* Section navigation - horizontal scroll on mobile */
    .section-navigation {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .section-navigation .flex {
        flex-wrap: nowrap;
        min-width: min-content;
    }

    .section-nav-item {
        white-space: nowrap;
        min-width: fit-content;
        font-size: 13px !important;
        padding: 10px 16px !important;
    }

    /* Quick fill buttons - stack on very small screens */
    @media (max-width: 480px) {
        .flex.gap-2.mb-4 {
            flex-direction: column;
            gap: 8px;
        }

        .quick-fill-btn {
            width: 100%;
        }
    }

    /* Progress indicator */
    .text-sm.text-gray-600 {
        font-size: 13px;
    }

    /* Keyboard shortcuts - hide on mobile */
    @media (max-width: 640px) {
        .text-xs.text-gray-500 {
            display: none;
        }
    }
}

/* Desktop - Show table, hide mobile cards */
@media (min-width: 769px) {
    .desktop-question-table {
        display: block !important;
    }

    .mobile-questions-container {
        display: none !important;
    }
}

/* Performance optimizations */
* {
    -webkit-tap-highlight-color: rgba(0, 174, 239, 0.2);
}

/* Prevent zoom on input focus (iOS) */
input[type="text"],
input[type="number"],
input[type="email"],
select,
textarea {
    font-size: 16px !important;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Better focus visibility for accessibility */
*:focus-visible {
    outline: 2px solid #00AEEF;
    outline-offset: 2px;
}