/**
 * 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: var(--mobile-nav-clearance-standard); /* Standardized nav clearance */
    }

    .ldr-main-content,
    .ldr-page.active,
    main {
        padding-bottom: var(--mobile-nav-clearance-standard) !important; /* Standardized nav clearance */
        margin-bottom: 0;
    }

    /* Cards and containers at the bottom need extra spacing */
    .ldr-card:last-child,
    .ldr-metric-card:last-child,
    form:last-child {
        margin-bottom: 80px !important;
    }

    /* Fix for modals and overlays */
    .modal-content,
    .ldr-sheet-content {
        max-height: calc(100vh - 180px); /* 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;
    }

    /* 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%;
    }

    img, video, iframe, table, pre, canvas, svg {
        max-width: 100%;
    }

    /* 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: var(--mobile-nav-clearance-minimal);
    }

    .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(var(--shadow-color-rgb), 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 — 44px min for mobile touch targets */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    .form-control,
    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 !important;
    }

    /* 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;
    }
}

/* 19. Fix results page header buttons on mobile */
@media (max-width: 767px) {
    .ldr-results-header {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .ldr-results-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
    }

    .ldr-results-actions button,
    .ldr-results-actions .btn {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: 140px;
        max-width: calc(50% - 0.25rem);
        font-size: 0.8rem !important;
        padding: 0.5rem 0.75rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Make back button full width at the bottom */
    .ldr-results-actions #back-to-history {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .ldr-page-header {
        padding: 1rem;
    }

    .ldr-page-title {
        font-size: 1.25rem;
    }
}

/* Extra small phones - stack all buttons */
@media (max-width: 380px) {
    .ldr-results-actions button,
    .ldr-results-actions .btn {
        flex: 1 1 100%;
        max-width: 100%;
        font-size: 0.85rem !important;
    }
}

/* 20. Fix library page grid for small phones */
/* Note: These selectors target existing classes defined in library.html inline styles */
@media (max-width: 767px) {
    [class~="ldr-library-container"],
    .ldr-library-container {
        padding: 0.5rem;
    }

    [class~="ldr-library-header"],
    .ldr-library-header {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    [class~="ldr-header-actions"],
    .ldr-header-actions {
        flex-direction: column;
        gap: 0.75rem;
    }

    [class~="ldr-library-stats"],
    .ldr-library-stats {
        flex-wrap: wrap;
        justify-content: center;
    }

    [class~="ldr-library-status-bar"],
    .ldr-library-status-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    [class~="ldr-filters-section"] [class~="ldr-filter-row"],
    .ldr-filters-section .ldr-filter-row {
        flex-direction: column;
        gap: 0.75rem;
    }

    [class~="ldr-filter-group"],
    .ldr-filter-group {
        width: 100%;
    }

    [class~="ldr-filter-group"] [class~="form-control"],
    .ldr-filter-group .ldr-form-control {
        width: 100%;
    }

    /* Make document grid single column on mobile with smaller min-width */
    [class~="ldr-documents-grid"],
    .ldr-documents-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    [class~="ldr-document-card"],
    .ldr-document-card {
        max-width: 100%;
    }

    .ldr-action-buttons {
        flex-direction: column;
    }

    .ldr-action-btn {
        min-width: unset;
        flex: 1;
    }

    /* Button groups - using Bootstrap class */
    [class~="btn-group"],
    .ldr-btn-group {
        flex-direction: column;
        width: 100%;
    }

    [class~="btn-group"] [class~="btn"],
    .ldr-btn-group .ldr-btn {
        border-radius: 4px !important;
        margin-bottom: 0.25rem;
    }
}

/* 21. Fix download manager and other pages with header actions */
@media (max-width: 767px) {
    .ldr-header-actions,
    .ldr-research-header {
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch;
    }

    .ldr-collection-selector select {
        width: 100% !important;
    }

    /* Fix metrics grid */
    [class~="download-stats-grid"],
    .ldr-download-stats-grid,
    .ldr-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem;
    }
}

/* 22. Fix metrics page overflow at all viewports */
#metrics,
.ldr-metrics-page,
[id*="context-overflow"],
[id*="costs"] {
    max-width: 100%;
    overflow-x: hidden;
}

/* 22b. Fix metrics page bottom padding for mobile nav */
@media (max-width: 767px) {
    #metrics,
    .ldr-metrics-page {
        padding-bottom: var(--mobile-nav-clearance-extended) !important;
    }

    #metrics .ldr-card:last-child,
    .ldr-metrics-page .ldr-card:last-child {
        margin-bottom: 100px !important;
    }

    /* Help panel must be above mobile nav */
    #metrics .ldr-help-panel,
    .ldr-metrics-page .ldr-help-panel,
    .ldr-help-panel {
        margin-bottom: 100px !important;
    }

    #metrics .ldr-help-panel-header,
    .ldr-metrics-page .ldr-help-panel-header {
        margin-bottom: 80px !important;
    }
}

/* Ensure metrics tables don't cause overflow */
#metrics table,
.ldr-metrics-page table {
    max-width: 100%;
    display: block;
    overflow-x: auto;
}

/* Fix metrics page header at all viewports */
#metrics .ldr-page-header {
    flex-wrap: wrap;
    gap: 1rem;
}

#metrics .ldr-page-header > div {
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Fix tooltip width that can cause overflow */
.ldr-tooltip::after {
    max-width: min(280px, 90vw) !important;
}

/* 23a. Fix mobile nav text size - currently 10px, should be at least 12px */
@media (max-width: 767px) {
    .ldr-mobile-bottom-nav span,
    .ldr-mobile-bottom-nav .ldr-nav-label {
        font-size: 12px !important;
    }
}

/* 23b. Fix top bar overflow on mobile */
@media (max-width: 767px) {
    .ldr-top-bar {
        overflow: hidden !important;
        max-width: 100% !important;
        text-overflow: ellipsis;
    }

    .ldr-top-bar-right {
        max-width: 45%;
        overflow: hidden !important;
        flex-shrink: 1;
    }

    .ldr-user-menu {
        max-width: 100%;
        overflow: hidden !important;
        flex-shrink: 1;
    }

    .ldr-logout-form {
        display: none !important; /* Hide logout form on mobile - access via More menu */
    }

    /* Reduce username display on mobile */
    .ldr-username {
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.75rem !important;
    }
}

/* 23c. Fix form groups overflow on Research page */
@media (max-width: 767px) {
    .ldr-form-group.ldr-half {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* 23d. Fix Settings tab overflow */
@media (max-width: 767px) {
    .ldr-settings-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        max-width: 100%;
        padding-bottom: 0.5rem;
    }

    .ldr-settings-tabs::-webkit-scrollbar {
        display: none;
    }

    .ldr-settings-tab {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.85rem !important;
    }
}

/* 23e. Improve checkbox touch targets on mobile */
@media (max-width: 767px) {
    /* Wrapper for checkbox to increase touch area */
    .ldr-settings-item input[type="checkbox"],
    .ldr-settings-item input[type="radio"] {
        min-width: 24px;
        min-height: 24px;
        /* Increase effective touch area via padding */
        padding: 10px;
        margin: 10px;
    }

    /* Make checkbox labels clickable and larger */
    .ldr-settings-item label {
        display: flex;
        align-items: center;
        min-height: 44px;
        cursor: pointer;
        padding: 0.5rem 0;
    }
}

/* 23f. Improve range slider touch targets */
@media (max-width: 767px) {
    input[type="range"] {
        min-height: 44px;
        padding: 10px 0;
        cursor: pointer;
        -webkit-appearance: none;
        background: transparent;
    }

    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--accent-primary);
        cursor: pointer;
    }

    input[type="range"]::-moz-range-thumb {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--accent-primary);
        cursor: pointer;
        border: none;
    }
}

/* 23. Fix content behind mobile navigation */
@media (max-width: 767px) {
    /* Ensure News and Subscriptions pages have proper bottom padding */
    .ldr-news-container,
    .ldr-news-page,
    .ldr-subscriptions-page,
    .ldr-news-feed {
        padding-bottom: var(--mobile-nav-clearance-standard) !important;
    }

    /* Ensure last items are not hidden behind nav */
    .ldr-news-item:last-child,
    .ldr-subscription-card:last-child,
    .ldr-news-card:last-child {
        margin-bottom: 80px;
    }

    /* Ensure scrollable containers account for mobile nav */
    .ldr-news-list,
    .ldr-subscriptions-grid {
        padding-bottom: var(--mobile-nav-clearance-minimal);
    }

    /* Settings page - ensure community note and links are above mobile nav */
    .ldr-page#settings,
    .ldr-settings-container {
        padding-bottom: var(--mobile-nav-clearance-standard) !important;
    }

    .ldr-community-note {
        margin-bottom: 100px !important;
    }

    .ldr-settings-form {
        padding-bottom: var(--mobile-nav-clearance-standard) !important;
    }

    /* Library page - ensure footer content is above mobile nav */
    /* Note: These target existing classes in library.html that predate ldr- prefix convention */
    [class~="ldr-library-container"] {
        padding-bottom: var(--mobile-nav-clearance-standard) !important;
    }

    [class~="ldr-library-container"] [class~="ldr-documents-grid"] {
        padding-bottom: var(--mobile-nav-clearance-minimal) !important;
    }

    [class~="ldr-library-container"] [class~="ldr-empty-state"] {
        margin-bottom: 100px !important;
    }

    /* Library filters need extra spacing */
    [class~="ldr-filters-section"] {
        margin-bottom: 1rem;
    }

    /* Ensure modals don't appear behind the mobile nav */
    #pdf-modal,
    #text-modal {
        z-index: 3000 !important;
    }
}

/* 24. Fix Download Manager page for mobile */
/* Note: Some selectors target existing classes in download_manager.html */
@media (max-width: 767px) {
    /* Download manager container */
    .ldr-download-manager,
    [class~="download-manager-page"] {
        padding: 0.5rem;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Header section */
    .ldr-download-manager .ldr-research-header,
    .ldr-download-manager .ldr-header-actions {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }

    .ldr-download-manager [class~="btn-group"],
    .ldr-download-manager .ldr-btn-group {
        flex-direction: column;
        width: 100%;
    }

    .ldr-download-manager [class~="btn-group"] [class~="btn"],
    .ldr-download-manager .ldr-btn-group .ldr-btn {
        border-radius: 4px !important;
        margin-bottom: 0.25rem;
    }

    /* Stats grid */
    .ldr-summary-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }

    .ldr-stat-card {
        padding: 15px 10px;
    }

    .ldr-stat-card h3 {
        font-size: 24px;
    }

    /* Filter row */
    .ldr-filter-row {
        flex-direction: column;
        gap: 0.75rem;
    }

    .ldr-filter-group {
        width: 100%;
    }

    .ldr-filter-group select,
    .ldr-filter-group input {
        width: 100%;
        min-height: 44px;
    }

    /* Collection selector */
    .ldr-collection-selector {
        width: 100% !important;
    }

    .ldr-collection-selector select {
        width: 100% !important;
        min-width: unset !important;
    }

    /* Documents table */
    .ldr-documents-table {
        display: block;
        overflow-x: auto;
    }

    /* Action buttons */
    .ldr-action-buttons {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .ldr-action-btn {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: 100px;
    }
}

/* Extra small phones - download manager */
@media (max-width: 380px) {
    .ldr-summary-stats {
        grid-template-columns: 1fr !important;
    }

    .ldr-stat-card h3 {
        font-size: 20px;
    }
}

/* 25. Fix Settings subpages (Collections, Embeddings) */
/* Note: Some selectors target existing classes in templates */
@media (max-width: 767px) {
    /* Collections page */
    [class~="collections-page"],
    .ldr-collections-page,
    #collections {
        padding: 0.5rem;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Embeddings page */
    [class~="embedding-settings-page"],
    .ldr-embedding-settings-page,
    #embedding-settings {
        padding: 0.5rem;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Ensure these pages show mobile navigation */
    [class~="collections-page"] .ldr-mobile-bottom-nav,
    .ldr-collections-page .ldr-mobile-bottom-nav,
    [class~="embedding-settings-page"] .ldr-mobile-bottom-nav,
    .ldr-embedding-settings-page .ldr-mobile-bottom-nav {
        display: flex !important;
    }
}

/* ========================================
   26. Tablet-specific fixes (768px - 991px)
   ======================================== */
@media (min-width: 768px) and (max-width: 991px) {
    /* Force 2-column grids to single column on tablet to prevent overflow */
    div[style*="grid-template-columns: 1fr 1fr"],
    div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Handle minmax grids - reduce minimum to prevent overflow */
    .ldr-metrics-grid,
    div[style*="minmax(300px"],
    div[style*="minmax(280px"] {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    }

    /* Ensure charts don't overflow */
    .ldr-chart-container,
    canvas {
        max-width: 100% !important;
    }

    /* Page header should wrap on tablet */
    .ldr-page-header {
        flex-wrap: wrap !important;
        gap: 1rem !important;
    }

    .ldr-page-header > div {
        flex-wrap: wrap !important;
    }

    /* Time range selector should wrap */
    .ldr-time-range-selector {
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
    }

    /* Ensure main content doesn't overflow */
    .ldr-main-content {
        overflow-x: hidden !important;
    }

    /* Cards should respect container width */
    .ldr-card,
    .ldr-metric-card {
        max-width: 100% !important;
        overflow-x: auto !important;
    }
}

/* ========================================
   27. Fix remaining overflow issues (Audit-identified)
   ======================================== */

/* 27a. Research page - aggressive fix for ldr-half form groups */
@media (max-width: 767px) {
    /* Ensure box-sizing for all form elements */
    .ldr-form-group,
    .ldr-form-group * {
        box-sizing: border-box !important;
    }

    /* Fix half-width form groups - force full width with proper padding */
    .ldr-form-group.ldr-half,
    .ldr-advanced-options-panel .ldr-form-group.ldr-half {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex-basis: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Fix selects and inputs inside form groups */
    .ldr-form-group select,
    .ldr-form-group input,
    .ldr-form-group .ldr-form-control {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Fix input help text overflow */
    .ldr-input-help,
    span.ldr-input-help {
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Advanced options panel should not overflow */
    .ldr-advanced-options-panel {
        max-width: 100% !important;
        padding: 1rem !important;
    }

    /* Row containing half-width elements */
    .ldr-form-row,
    .ldr-options-row {
        display: block !important;
        width: 100% !important;
    }
}

/* 27b. Metrics page - fix time range selector overflow (32px) */
@media (max-width: 767px) {
    .ldr-time-range-selector {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.25rem !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .ldr-time-range-btn {
        flex: 1 1 auto !important;
        min-width: 60px !important;
        max-width: calc(50% - 0.25rem) !important;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.8rem !important;
        white-space: nowrap !important;
    }

    /* Container holding time range selectors */
    .ldr-page-header,
    .ldr-metrics-header {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    .ldr-page-header > *,
    .ldr-metrics-header > * {
        max-width: 100% !important;
    }
}

/* =============================================
   28. Metrics Links - ensure 44px touch targets
   ============================================= */
@media (max-width: 767px) {
    /* Metric links (e.g., "Start research" link) */
    .ldr-metric-link,
    a[href*="/metrics/"],
    #metrics a:not(.btn):not([class*="button"]),
    .ldr-metrics-page a:not(.btn):not([class*="button"]) {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 0.5rem 0;
    }

    /* Metric card links */
    .ldr-metric-card a,
    .ldr-stat-card a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* =============================================
   29. Log Panel Button Touch Targets
   ============================================= */
@media (max-width: 767px) {
    .ldr-log-panel .ldr-small-btn,
    .ldr-log-panel .ldr-filter-btn,
    .ldr-collapsible-log-panel .ldr-small-btn,
    .ldr-filter-buttons .ldr-small-btn {
        min-height: 44px;
        padding: 8px 12px;
        font-size: 0.875rem;
    }

    .ldr-filter-buttons {
        flex-wrap: wrap;
        gap: 6px;
    }

    .ldr-log-controls {
        flex-direction: column;
        gap: 8px;
    }

    .ldr-log-download {
        width: 100%;
        justify-content: flex-end;
    }
}

/* =============================================
   30. Collection Actions Grid Mobile
   ============================================= */
@media (max-width: 767px) {
    .ldr-collection-actions-grid {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .ldr-collection-actions-grid .ldr-btn-collections,
    .ldr-collection-actions-grid .btn {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }
}

/* =============================================
   31. Modal Content Height Fix
   ============================================= */
@media (max-width: 767px) {
    .modal-content,
    .ldr-sheet-content,
    .ldr-modal-content {
        /* Account for mobile nav (56px) + header + safe area */
        max-height: calc(100vh - 180px - 56px);
        max-height: calc(100dvh - 180px - 56px);
        overflow-y: auto;
    }
}

/* =============================================
   32. iOS Scroll Momentum
   ============================================= */
@media (max-width: 767px) {
    .ldr-scrollable,
    .ldr-news-grid,
    .ldr-collections-grid,
    .ldr-subscriptions-grid,
    .ldr-documents-list,
    .ldr-log-panel-content,
    .modal-body,
    .ldr-modal-body {
        -webkit-overflow-scrolling: touch;
    }
}

/* =============================================
   33. Metrics Subpage Header Improvements
   ============================================= */
@media (max-width: 767px) {
    /* Fix cramped headers on metrics subpages */
    #context-overflow .ldr-page-header,
    #costs .ldr-page-header,
    #star-reviews .ldr-page-header,
    #link-analytics .ldr-page-header,
    .ldr-metrics-subpage .ldr-page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: var(--space-3, 0.75rem) !important;
    }

    /* Stack title and back button vertically */
    #context-overflow .ldr-page-header > div:first-child,
    #costs .ldr-page-header > div:first-child,
    #star-reviews .ldr-page-header > div:first-child,
    #link-analytics .ldr-page-header > div:first-child {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: var(--space-2, 0.5rem) !important;
        width: 100% !important;
    }

    /* Back button styling on mobile */
    #context-overflow .ldr-page-header a[href="/metrics"],
    #costs .ldr-page-header a[href="/metrics"],
    #star-reviews .ldr-page-header a[href="/metrics"],
    #link-analytics .ldr-page-header a[href="/metrics"],
    .ldr-back-to-metrics {
        margin-top: var(--space-2, 0.5rem) !important;
        order: 2;
        font-size: 0.8rem !important;
        padding: 0.5rem 1rem !important;
    }

    /* Time range selector should wrap on mobile */
    #context-overflow .ldr-time-range-selector,
    #costs .ldr-time-range-selector,
    .ldr-metrics-subpage .ldr-time-range-selector {
        width: 100% !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        margin-left: 0 !important;
    }

    #context-overflow .ldr-time-range-selector span,
    #costs .ldr-time-range-selector span {
        width: 100% !important;
        margin-bottom: var(--space-2, 0.5rem) !important;
    }

    /* Time range buttons grid on mobile */
    #context-overflow .ldr-time-range-btn,
    #costs .ldr-time-range-btn {
        flex: 1 1 auto !important;
        min-width: 50px !important;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.8rem !important;
    }
}

/* Tablet view for metrics headers */
@media (min-width: 768px) and (max-width: 991px) {
    #context-overflow .ldr-page-header,
    #costs .ldr-page-header,
    #star-reviews .ldr-page-header,
    #link-analytics .ldr-page-header {
        flex-wrap: wrap !important;
        gap: 1rem !important;
    }

    #context-overflow .ldr-page-header > div:first-child,
    #costs .ldr-page-header > div:first-child {
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
    }
}

/* =============================================
   34. Metrics Navigation Button Grid
   ============================================= */
@media (max-width: 767px) {
    /* Make nav buttons wrap into a 2-column grid on mobile */
    #metrics .ldr-page-header > div:first-child,
    .ldr-metrics-nav-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: var(--space-2, 0.5rem) !important;
        width: 100% !important;
    }

    /* Page title spans full width */
    #metrics .ldr-page-header h1 {
        grid-column: 1 / -1;
        margin-bottom: var(--space-2, 0.5rem);
    }

    /* Nav buttons in a 2x2 grid */
    #metrics .ldr-page-header .ldr-nav-link-btn,
    .ldr-metrics-nav-grid .ldr-nav-link-btn {
        width: 100%;
        justify-content: center;
        padding: var(--space-3, 0.75rem) var(--space-4, 1rem) !important;
        font-size: 0.8rem !important;
    }

    /* Stack time selectors vertically */
    #metrics .ldr-page-header > div:last-child {
        flex-direction: column !important;
        gap: var(--space-3, 0.75rem) !important;
        width: 100% !important;
    }

    #metrics .ldr-time-range-selector {
        width: 100% !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        margin-left: 0 !important;
    }

    #metrics .ldr-time-range-selector span {
        width: 100% !important;
        margin-bottom: var(--space-1, 0.25rem) !important;
    }

    #metrics .ldr-time-range-btn {
        flex: 1 1 auto !important;
        min-width: 60px !important;
    }
}

/* Tablet - 2 column grid for nav buttons */
@media (min-width: 768px) and (max-width: 991px) {
    #metrics .ldr-page-header > div:first-child {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    #metrics .ldr-page-header .ldr-nav-link-btn {
        flex: 1 1 auto;
        min-width: 120px;
    }
}
