/**
 * Mobile UI Fixes
 * Addresses UI issues found in comprehensive mobile testing
 */

/* 1. Fix duplicate navigation - hide old nav */
.ldr-mobile-tab-bar {
    display: none !important;
}

/* 2. Fix content padding to account for mobile nav */
@media (max-width: 767px) {
    body.ldr-has-mobile-nav {
        padding-bottom: 80px; /* Height of mobile nav + safe area */
    }

    .ldr-main-content,
    .ldr-page.active,
    main {
        padding-bottom: 100px !important; /* Extra padding for content */
        margin-bottom: 0;
    }

    /* Fix for modals and overlays */
    .modal-content,
    .ldr-sheet-content {
        max-height: calc(100vh - 160px); /* Account for nav and safe areas */
        overflow-y: auto;
    }
}

/* 3. Fix top bar on mobile */
@media (max-width: 767px) {
    .ldr-top-bar {
        padding: 0.5rem;
        font-size: 14px;
        min-height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;
    }

    .ldr-top-bar-right {
        flex-shrink: 0;
        margin-left: auto;
    }

    .ldr-user-menu {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        max-width: 100%;
    }

    .ldr-user-info {
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 150px;
    }

    .ldr-logout-btn {
        font-size: 13px;
        padding: 0.25rem 0.5rem;
        white-space: nowrap;
    }

    /* Hide icon on very small screens */
    @media (max-width: 380px) {
        .ldr-user-info i {
            display: none;
        }
    }
}

/* 4. Fix Settings page horizontal scroll */
@media (max-width: 767px) {
    /* Make tab navigation scrollable */
    .nav-tabs,
    .ldr-tab-navigation,
    [role="tablist"] {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        white-space: nowrap;
        gap: 0.5rem;
        padding: 0.5rem;
        margin: 0 -1rem; /* Extend to screen edges */
        padding: 0.5rem 1rem;
    }

    .nav-tabs::-webkit-scrollbar,
    .ldr-tab-navigation::-webkit-scrollbar {
        display: none;
    }

    .nav-tabs .nav-link,
    .ldr-tab-navigation button,
    .ldr-tab-button {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 0.5rem 1rem;
        min-width: fit-content;
    }

    /* Settings content width fix */
    .ldr-settings-content,
    .ldr-settings-page {
        max-width: 100%;
        overflow-x: hidden;
    }

    .ldr-settings-grid {
        display: block;
    }

    /* Fix wide tables */
    table {
        max-width: 100%;
        overflow-x: auto;
        display: block;
    }

    /* Fix code blocks */
    pre, code {
        max-width: 100%;
        overflow-x: auto;
        word-wrap: break-word;
    }
}

/* 5. Increase touch targets to 44px minimum */
@media (max-width: 767px) {
    /* Input fields */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    textarea,
    select {
        min-height: 44px;
        padding: 10px 12px;
        font-size: 16px; /* Prevent zoom on iOS */
    }

    /* Buttons */
    button,
    .btn,
    a.btn,
    [role="button"] {
        min-height: 44px;
        min-width: 44px;
        padding: 10px 16px;
        font-size: 15px;
    }

    /* Small icon buttons */
    .ldr-icon-button,
    .ldr-btn-icon {
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Checkboxes and radio buttons */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 22px;
        min-height: 22px;
        margin: 11px; /* Total 44px touch target */
    }

    /* Links in navigation */
    .ldr-mobile-nav-tab {
        min-height: 56px;
    }
}

/* 6. Fix text readability */
@media (max-width: 767px) {
    /* Minimum font sizes */
    body {
        font-size: 14px;
        line-height: 1.5;
    }

    p, span, label {
        font-size: max(14px, 1em);
    }

    small, .ldr-text-small {
        font-size: 12px;
    }

    /* Prevent text truncation where possible */
    .ldr-truncate-mobile-false {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}

/* 7. Fix modal and sheet menu z-index */
.ldr-mobile-sheet-menu {
    z-index: 2000 !important;
}

.ldr-mobile-sheet-overlay {
    z-index: 1999 !important;
}

.ldr-mobile-bottom-nav {
    z-index: 1500 !important;
}

/* 8. Prevent horizontal scroll */
@media (max-width: 767px) {
    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }

    * {
        max-width: 100vw;
    }

    /* Fix containers */
    .container,
    .container-fluid,
    .card,
    .modal-content {
        max-width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* 9. Fix News page cards */
@media (max-width: 767px) {
    .ldr-news-card,
    .card {
        margin-left: 0;
        margin-right: 0;
        border-radius: 0.5rem;
    }

    .ldr-card-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 0;
    }
}

/* 10. Force hide desktop sidebar on mobile */
@media (max-width: 767px) {
    /* Desktop sidebar must be hidden on mobile unless explicitly shown */
    .ldr-sidebar:not(.active),
    aside.ldr-sidebar:not(.active),
    .ldr-app-container > aside,
    body aside.ldr-sidebar {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
        pointer-events: none !important;
        opacity: 0 !important;
    }

    /* Main content takes full width */
    .ldr-main-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Make sure the app container doesn't have grid/flex that shows sidebar */
    .ldr-app-container {
        display: block !important;
    }
}

/* 11. Fix metrics/charts on mobile */
@media (max-width: 767px) {
    .ldr-chart-container,
    canvas {
        max-width: 100%;
        height: auto;
    }

    /* Force ALL grid layouts to single column on mobile */
    .ldr-metrics-grid,
    .ldr-stats-overview,
    .ldr-settings-cards,
    .ldr-settings-row,
    .ldr-subscriptions-grid,
    .ldr-breakdown-grid,
    .ldr-engine-stats-grid,
    .ldr-json-property-controls,
    .ldr-research-metadata {
        grid-template-columns: 1fr !important;
    }

    /* Handle inline styles with grid-template-columns */
    div[style*="grid-template-columns: 1fr 1fr"],
    div[style*="grid-template-columns: repeat"],
    div[style*="minmax(300px"],
    div[style*="minmax(350px"],
    div[style*="minmax(250px"],
    div[style*="minmax(200px"] {
        grid-template-columns: 1fr !important;
    }

    /* Ensure all cards take full width */
    .ldr-metric-card,
    .ldr-stat-card,
    .ldr-settings-card,
    .ldr-subscription-card {
        width: 100% !important;
        min-width: unset !important;
        max-width: 100% !important;
        min-height: auto;
        padding: 1rem;
    }

    /* Fix time period selectors to wrap */
    .ldr-time-selector,
    .ldr-time-period-buttons {
        flex-wrap: wrap !important;
    }

    .ldr-time-selector button,
    .ldr-time-period-buttons button {
        flex: 1 1 auto;
        min-width: 80px;
        margin: 0.25rem;
    }
}

/* 11. Safe area insets for iPhone notch/home indicator */
@supports (padding: max(0px)) {
    .ldr-mobile-bottom-nav {
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }

    body.ldr-has-mobile-nav {
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }

    .ldr-mobile-sheet-menu {
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
}

/* 12. Fix form layouts on mobile */
@media (max-width: 767px) {
    .ldr-form-row {
        display: block;
    }

    .ldr-form-row > * {
        width: 100%;
        margin-bottom: 1rem;
    }

    .ldr-form-group {
        margin-bottom: 1.5rem;
    }

    /* Stack form buttons */
    .ldr-form-buttons,
    .ldr-button-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .ldr-form-buttons button,
    .ldr-button-group button {
        width: 100%;
    }
}

/* 13. Improve mobile navigation visibility */
.ldr-mobile-bottom-nav {
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    border-top: 1px solid var(--border-color);
}

/* 14. Fix research mode selection on mobile */
@media (max-width: 767px) {
    .ldr-research-mode-options {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .ldr-research-mode-option {
        min-height: 60px;
        padding: 1rem;
    }
}

/* 15. Loading states and spinners positioning */
@media (max-width: 767px) {
    .ldr-loading-overlay {
        bottom: 80px; /* Above mobile nav */
    }

    .ldr-toast-container {
        bottom: 90px; /* Above mobile nav */
    }
}

/* 16. Improve text readability on mobile */
@media (max-width: 767px) {
    /* Base font size adjustments */
    body {
        font-size: 16px; /* Prevent zoom on iOS */
    }

    /* Make small text more readable */
    .ldr-metric-label,
    .ldr-hint-text,
    .text-muted,
    .text-secondary,
    small {
        font-size: 0.875rem !important; /* 14px minimum */
        line-height: 1.5;
    }

    /* Keyboard shortcuts should be visible */
    .ldr-keyboard-shortcut-hint kbd {
        font-size: 1rem !important;
        padding: 0.3rem 0.5rem;
    }

    /* Headers should be appropriately sized */
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.125rem; }

    /* Code blocks and pre elements */
    pre, code {
        font-size: 0.875rem;
    }
}

/* 17. Improve touch targets on mobile */
@media (max-width: 767px) {
    /* Minimum 44x44px touch targets (Apple HIG) */
    button,
    a,
    input[type="checkbox"],
    input[type="radio"],
    .ldr-clickable {
        min-height: 44px;
        min-width: 44px;
    }

    /* Buttons need proper padding */
    button,
    .btn,
    .ldr-btn,
    .ldr-button {
        padding: 0.75rem 1rem !important;
        font-size: 1rem !important;
    }

    /* Form inputs */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    textarea,
    select {
        min-height: 44px !important;
        padding: 0.75rem !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
    }

    /* Links in lists need padding */
    .ldr-sidebar a,
    .ldr-nav-link,
    .nav-link {
        padding: 0.75rem 1rem !important;
        display: block;
    }

    /* Dropdown items */
    .dropdown-item,
    .ldr-dropdown-item {
        padding: 0.75rem 1rem !important;
        min-height: 44px;
    }

    /* Icon buttons need proper sizing */
    .ldr-icon-btn,
    .ldr-icon-btn,
    button.ldr-icon-only {
        width: 44px !important;
        height: 44px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* 18. Fix card spacing on mobile */
@media (max-width: 767px) {
    .ldr-card,
    .card {
        margin-bottom: 1rem !important;
        padding: 1rem !important;
    }

    .ldr-card-header,
    .card-header {
        padding: 1rem !important;
        margin: -1rem -1rem 1rem -1rem !important;
    }

    /* Metric cards specific spacing */
    .ldr-metric-card {
        padding: 1.25rem 1rem !important;
        margin-bottom: 1rem !important;
    }
}
