/* Mobile-Responsive Styles for PWA */

/* Global touch target minimum (44px recommended, 48px ideal) */
@media (max-width: 768px) {
    button, 
    [role="button"],
    a.nav-link,
    .clickable {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Mobile Navigation - Bottom Tab Bar */
@media (max-width: 768px) {
    /* Hide desktop sidebar */
    body > .flex > div:first-child {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100% !important;
        height: auto;
        z-index: 40;
        border-right: none;
        border-top: 4px solid #b45309;
        padding: 0;
        transition: transform 0.3s ease-in-out;
    }

    /* Collapsed state for mobile nav */
    body > .flex > div:first-child.nav-collapsed {
        transform: translateY(calc(100% - 40px));
    }

    /* Hide the Quest Journal header panel on mobile */
    #main-sidebar > div.p-6 {
        display: none !important;
    }
    
    /* Also hide decorative corners on mobile */
    #main-sidebar > div.absolute {
        display: none !important;
    }
    
    /* Remove margin from nav since header is hidden */
    #main-sidebar > nav {
        margin-top: 0 !important;
    }

    body > .flex > div:first-child > nav {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        padding: 0.5rem 0;
        gap: 0;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
        /* Add padding for partial tab peek effect */
        padding-left: 8px;
        padding-right: 8px;
    }

    body > .flex > div:first-child > nav::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    /* Scroll indicator - fade gradient edges (on sidebar, stays fixed) */
    #main-sidebar::before,
    #main-sidebar::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 30px;
        pointer-events: none;
        z-index: 10;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    #main-sidebar::before {
        left: 0;
        background: linear-gradient(to right, var(--theme-bg-start, rgba(120, 53, 15, 0.95)), transparent);
    }

    #main-sidebar::after {
        right: 0;
        background: linear-gradient(to left, var(--theme-bg-start, rgba(120, 53, 15, 0.95)), transparent);
    }

    /* Show right fade by default (more content to the right) */
    #main-sidebar.scroll-right::after,
    #main-sidebar:not(.scroll-checked)::after {
        opacity: 1;
    }

    /* Show left fade when scrolled */
    #main-sidebar.scroll-left::before {
        opacity: 1;
    }

    /* Mobile Nav Items - Icons Only */
    body > .flex > div:first-child > nav > a {
        flex: 0 0 auto;
        min-width: 48px;
        min-height: 48px;
        text-align: center;
        padding: 0.75rem 0.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 0;
        margin: 0;
        border-left: none !important;
        position: relative;
    }

    /* Hide ALL text labels on mobile */
    body > .flex > div:first-child > nav > a span {
        display: none !important;
    }

    /* Mobile Nav Icons - Bigger and Centered */
    body > .flex > div:first-child > nav > a i {
        font-size: 1.75rem !important;
        margin: 0 !important;
    }

    /* Active indicator */
    body > .flex > div:first-child > nav > a.active {
        background: rgba(251, 191, 36, 0.2);
        border-bottom: 3px solid #fbbf24;
    }

    body > .flex > div:first-child > nav > a.active i {
        color: #fbbf24 !important;
    }

    /* Nav Toggle Button - Pull Tab */
    #mobile-nav-toggle {
        display: flex !important;
        position: absolute;
        top: -44px;
        left: 50%;
        transform: translateX(-50%);
        width: 70px;
        height: 44px;
        background: linear-gradient(to bottom, #92400e, #78350f);
        border: 3px solid #fbbf24;
        border-bottom: none;
        border-radius: 12px 12px 0 0;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 100;
        box-shadow: 0 -4px 10px rgba(0,0,0,0.5);
    }

    #mobile-nav-toggle i {
        color: #fbbf24;
        font-size: 1.5rem;
        transition: transform 0.3s ease;
        filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5));
    }

    #main-sidebar.nav-collapsed #mobile-nav-toggle i {
        transform: rotate(180deg);
    }

    /* Main Content Area */
    body > .flex > div:last-child {
        width: 100%;
        padding-bottom: 80px; /* Space for bottom nav */
    }

    /* All view containers - reduce padding on mobile */
    .view-container {
        padding: 1rem !important;
    }

    /* View headers - stack vertically on mobile */
    .view-container > header {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 1rem !important;
    }

    .view-container > header > div {
        text-align: center !important;
    }

    .view-container > header button {
        width: 100% !important;
        max-width: 280px !important;
    }

    /* Stats Grid - Stack on Mobile */
    #dashboard-view > div:nth-of-type(3) {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Quest Cards - Smaller padding and better layout */
    .quest-card {
        padding: 1rem !important;
    }
    
    /* Word-break on task/goal titles to prevent horizontal overflow */
    .goal-item h3,
    .goal-item h4,
    .task-item h4 {
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }

    /* Goal items - keep checkbox inline with title, stack actions below */
    .goal-item > .flex.items-start {
        flex-wrap: wrap !important;
    }
    
    .goal-item > .flex.items-start > .flex-1 {
        flex: 1 1 calc(100% - 60px) !important;
        min-width: 0 !important;
    }
    
    /* Edit/delete buttons - move to bottom of card */
    .goal-item > .flex.items-start > .flex.flex-col {
        position: static !important;
        flex-direction: row !important;
        gap: 1rem !important;
        width: 100% !important;
        justify-content: flex-end !important;
        margin-top: 0.75rem !important;
        padding-top: 0.75rem !important;
        border-top: 1px solid rgba(255,255,255,0.1) !important;
        order: 99 !important;
    }
    
    /* Make goal items use flex wrap to push buttons to bottom */
    .goal-item > .flex.items-start {
        flex-wrap: wrap !important;
    }
    
    /* Make goal cards have proper padding */
    .goal-item {
        position: relative !important;
        overflow: visible !important;
    }
    
    /* Ensure grid containers don't overlap items */
    #monthly-goals-container,
    #weekly-goals-container,
    #yearly-goals-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    /* Fix linked items inside goal cards */
    .goal-item .border-l-2 {
        margin-left: 0 !important;
        padding-left: 0.75rem !important;
    }
    
    .goal-item .border-l-2 .flex.items-center {
        flex-wrap: wrap !important;
    }

    /* Titles - Smaller */
    .medieval-title {
        font-size: 1.5rem !important;
    }

    h2.medieval-title {
        font-size: 2rem !important;
    }

    /* Player Panel - Mobile positioning */
    #player-panel-toggle {
        top: 0.5rem !important;
        right: 0.5rem !important;
    }
    
    #player-panel-sheet {
        width: 85vw !important;
        max-width: 320px !important;
    }

    /* Achievement Toast - Adjust position */
    #achievement-toast {
        top: 1rem !important;
        right: 1rem !important;
        left: 1rem !important;
        width: auto !important;
    }

    #achievement-toast > div {
        padding: 1rem !important;
    }

    /* Modal adjustments */
    .fixed.inset-0 > div {
        margin: 1rem !important;
        max-height: calc(100vh - 2rem) !important;
        overflow-y: auto;
    }

    /* Button adjustments — exclude small icon-only and inline action buttons */
    button:not([class*="text-xl"]):not([class*="text-2xl"]):not([class*="text-xs"]):not([class*="p-2"]):not([class*="p-1"]):not(#mobile-nav-toggle) {
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
    }

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

    /* PWA Install Button - Adjust for mobile nav */
    #pwa-install-button {
        bottom: 90px !important; /* Above bottom nav */
    }

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

    /* Life Goals Container - Single Column */
    #life-goals-container {
        grid-template-columns: 1fr !important;
    }

    /* Touch-friendly checkboxes */
    input[type="checkbox"] {
        width: 1.5rem !important;
        height: 1.5rem !important;
        min-width: 1.5rem !important;
    }

    /* Calendar adjustments - fix alignment */
    #calendar-days {
        font-size: 0.75rem;
        display: grid !important;
        grid-template-columns: repeat(7, 1fr) !important;
        gap: 0.25rem !important;
    }
    
    /* Ensure all calendar cells have equal width */
    #calendar-days > div {
        width: 100% !important;
        min-width: 0 !important;
        aspect-ratio: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0.25rem !important;
    }
    
    /* Calendar day content */
    #calendar-days .calendar-day > div {
        width: 100% !important;
    }
    
    /* Smaller text in calendar cells */
    #calendar-days .text-lg {
        font-size: 0.875rem !important;
    }
    
    #calendar-days .text-xs {
        font-size: 0.6rem !important;
    }
    
    /* Calendar header row */
    .grid.grid-cols-7 > div.text-center.font-bold {
        font-size: 0.7rem !important;
        padding: 0.25rem !important;
    }
    
    /* Side Quests - Priority filter buttons */
    #sidequests-view .flex.gap-3 {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    
    #sidequests-view .flex.gap-3 > button {
        flex: 1 1 calc(50% - 0.25rem) !important;
        min-width: 0 !important;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.75rem !important;
        text-align: center !important;
    }
    
    /* Side Quests header - stack vertically */
    #sidequests-view .flex.justify-between.items-center {
        flex-direction: column !important;
        gap: 0.75rem !important;
        align-items: stretch !important;
    }
    
    #sidequests-view .flex.justify-between.items-center > button {
        width: 100% !important;
    }

    /* Spellbook Grid - vertical scroll on mobile */
    #spellbook-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    #spellbook-container > div {
        width: 100% !important;
    }

    /* Boss Battle Cards */
    #active-bosses-container > div,
    #defeated-bosses-container > div {
        padding: 1rem !important;
    }

    /* Quest Chains */
    #active-questchains-container,
    #available-questchains-container,
    #completed-questchains-container {
        grid-template-columns: 1fr !important;
    }

    /* Safe area for notched phones */
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Scrollable content areas */
    .view-container {
        max-height: calc(100vh - 80px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Tablet adjustments (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    body > .flex > div:first-child {
        width: 200px !important;
    }

    #dashboard-view > div:nth-of-type(3) {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    #life-goals-container {
        grid-template-columns: 1fr !important;
    }
}

/* Landscape mobile adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    body > .flex > div:first-child {
        height: 60px;
    }

    body > .flex > div:first-child > nav > a {
        padding: 0.5rem 0.25rem;
    }

    body > .flex > div:last-child {
        padding-bottom: 70px;
    }

    #pwa-install-button {
        bottom: 70px !important;
    }
}

/* iOS specific adjustments */
@supports (-webkit-touch-callout: none) {
    /* iOS safe area insets */
    body {
        padding-top: max(env(safe-area-inset-top), 20px);
        padding-bottom: max(env(safe-area-inset-bottom), 0px);
    }

    @media (max-width: 768px) {
        body > .flex > div:first-child {
            padding-bottom: env(safe-area-inset-bottom);
        }
    }
}

/* ===== MOBILE SCROLLBARS ===== */

/* Thinner scrollbars on mobile */
@media (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    
    ::-webkit-scrollbar-thumb {
        border-radius: 3px;
    }
}

/* ===== MOBILE TOUCH EFFECTS ===== */

/* Disable hover effects on touch devices */
@media (hover: none) and (pointer: coarse) {
    .quest-card:hover {
        transform: none;
        box-shadow: none;
    }
    
    .quest-card:hover::after {
        left: -100%;
    }
    
    /* Make hover-only elements always visible on touch devices */
    .group-hover\:opacity-100 {
        opacity: 0.7 !important;
    }
}

/* Accessible focus indicators for assistive tech (switch access, external keyboards) */
*:focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Ensure role=button divs are keyboard-accessible */
[role="button"] {
    cursor: pointer;
}

[role="button"]:focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: 2px;
}

/* Touch/Active state for cards */
@media (max-width: 768px) {
    .quest-card {
        -webkit-tap-highlight-color: transparent;
        position: relative;
        overflow: hidden;
    }
    
    /* Tap press effect */
    .quest-card:active {
        transform: scale(0.97);
        transition: transform 0.1s ease;
    }
    
    /* Glow flash on tap */
    .quest-card.touch-active {
        animation: touch-glow 0.4s ease-out;
    }
    
    @keyframes touch-glow {
        0% {
            box-shadow: 0 0 0 rgba(251, 191, 36, 0);
        }
        50% {
            box-shadow: 0 0 30px rgba(251, 191, 36, 0.6);
        }
        100% {
            box-shadow: 0 0 0 rgba(251, 191, 36, 0);
        }
    }
    
    /* Touch ripple effect */
    .touch-ripple {
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.4);
        transform: scale(0);
        animation: ripple-expand 0.6s ease-out forwards;
        pointer-events: none;
    }
    
    @keyframes ripple-expand {
        0% {
            transform: scale(0);
            opacity: 0.6;
        }
        100% {
            transform: scale(4);
            opacity: 0;
        }
    }
    
    /* Theme-specific touch glows */
    body.theme-forest .quest-card.touch-active {
        animation-name: touch-glow-forest;
    }
    @keyframes touch-glow-forest {
        0% { box-shadow: 0 0 0 rgba(16, 185, 129, 0); }
        50% { box-shadow: 0 0 35px rgba(16, 185, 129, 0.7); }
        100% { box-shadow: 0 0 0 rgba(16, 185, 129, 0); }
    }
    
    body.theme-desert .quest-card.touch-active {
        animation-name: touch-glow-desert;
    }
    @keyframes touch-glow-desert {
        0% { box-shadow: 0 0 0 rgba(251, 146, 60, 0); }
        50% { box-shadow: 0 0 35px rgba(251, 146, 60, 0.7); }
        100% { box-shadow: 0 0 0 rgba(251, 146, 60, 0); }
    }
    
    body.theme-ice .quest-card.touch-active {
        animation-name: touch-glow-ice;
    }
    @keyframes touch-glow-ice {
        0% { box-shadow: 0 0 0 rgba(56, 189, 248, 0); }
        50% { box-shadow: 0 0 35px rgba(56, 189, 248, 0.7); }
        100% { box-shadow: 0 0 0 rgba(56, 189, 248, 0); }
    }
    
    body.theme-volcanic .quest-card.touch-active {
        animation-name: touch-glow-volcanic;
    }
    @keyframes touch-glow-volcanic {
        0% { box-shadow: 0 0 0 rgba(239, 68, 68, 0); }
        50% { box-shadow: 0 0 40px rgba(239, 68, 68, 0.8); }
        100% { box-shadow: 0 0 0 rgba(239, 68, 68, 0); }
    }
    
    body.theme-mystic .quest-card.touch-active {
        animation-name: touch-glow-mystic;
    }
    @keyframes touch-glow-mystic {
        0% { box-shadow: 0 0 0 rgba(167, 139, 250, 0); }
        50% { box-shadow: 0 0 35px rgba(167, 139, 250, 0.7); }
        100% { box-shadow: 0 0 0 rgba(167, 139, 250, 0); }
    }
    
    body.theme-golden .quest-card.touch-active {
        animation-name: touch-glow-golden;
    }
    @keyframes touch-glow-golden {
        0% { box-shadow: 0 0 0 rgba(250, 204, 21, 0); }
        50% { box-shadow: 0 0 40px rgba(250, 204, 21, 0.8); }
        100% { box-shadow: 0 0 0 rgba(250, 204, 21, 0); }
    }
    
    body.theme-shadow .quest-card.touch-active {
        animation-name: touch-glow-shadow;
    }
    @keyframes touch-glow-shadow {
        0% { box-shadow: 0 0 0 rgba(148, 163, 184, 0); }
        50% { box-shadow: 0 0 35px rgba(148, 163, 184, 0.5); }
        100% { box-shadow: 0 0 0 rgba(148, 163, 184, 0); }
    }
}