/* Mobile-specific fixes for Settings page
   IMPORTANT: This file MUST load after settings.css so that same-specificity
   rules win by source order (see settings_dashboard.html <link> order).
   Without this, removing !important from overrides would break mobile layout. */

/* Prevent horizontal overflow on ALL viewport sizes */
#settings {
    overflow-x: hidden;
    max-width: 100%;
}

#settings > * {
    max-width: 100%;
}

.ldr-settings-container {
    overflow-x: hidden;
    max-width: 100%;
}

/* Fix extreme height issue on mobile devices
   CSS cannot read custom properties in @media queries; keep 767px in sync with --ldr-mobile-max */
@media screen and (max-width: 767px) {
    /* Main container - allow natural height expansion */
    .ldr-settings-container {
        max-height: none !important;
        overflow: visible;
        -webkit-overflow-scrolling: touch;
    }

    /* Fix main content height on mobile - allow expansion */
    .ldr-main-content {
        height: auto !important;
        max-height: none !important;
        overflow: visible;
    }

    /* Settings page specific - allow natural height */
    #settings {
        height: auto !important;
        max-height: none !important;
    }

    /* Card content - allow natural height */
    .ldr-card {
        max-height: none !important;
        overflow: visible;
    }

    /* Form should not expand infinitely */
    .ldr-settings-form {
        max-height: none;
        overflow: visible;
    }

    /* Textarea height limits */
    .ldr-settings-textarea {
        min-height: 100px !important;
        max-height: 200px !important;
    }

    /* JSON expanded controls height limit */
    .ldr-json-expanded-controls {
        max-height: 400px;
        overflow-y: auto;
    }

    /* Section spacing */
    .ldr-settings-section {
        margin-bottom: 20px;
    }

    /* Reduce padding on mobile */
    .ldr-settings-item {
        padding: 10px;
    }

    /* Better touch targets */
    .ldr-settings-input,
    .ldr-settings-select,
    .ldr-settings-textarea {
        min-height: 44px;
        font-size: 16px; /* Prevent iOS zoom */
    }

    /* Fix body overflow - allow scrolling beyond viewport */
    body {
        overflow-x: hidden;
        overflow-y: auto;
        min-height: 100vh;
        position: relative;
    }

    /* Let page expand naturally - removed max-height constraint that caused overlap with mobile nav */
    .ldr-page {
        min-height: auto !important;
        max-height: none !important;
        overflow: visible;
    }

    /* Prevent horizontal overflow on mobile (390px viewport) */
    /* Label max-width: settings.css sets 400px which exceeds mobile viewport */
    .ldr-settings-item-header label {
        max-width: 100%;
        white-space: normal;
    }

    /* Section title: settings.css sets max-width:80% + nowrap which can overflow */
    .ldr-settings-section-title {
        max-width: 100%;
        white-space: normal;
    }

    /* Settings cards/row grids: already overridden in settings.css mobile block */

    /* Encryption settings grid: inline JS sets repeat(2, auto) which overflows at 390px */
    .ldr-encryption-settings .ldr-settings-grid {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        gap: 0.5rem !important;
    }

    .ldr-encryption-settings .ldr-setting-item {
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: break-all;
    }

    .ldr-encryption-settings .ldr-setting-item code {
        word-break: break-all;
    }

    /* Env variable items: inline JS sets code min-width:220px + flex-shrink:0 which overflows */
    .ldr-env-item {
        flex-wrap: wrap !important;
    }

    .ldr-env-item code {
        min-width: 0 !important;
        flex-shrink: 1 !important;
        word-break: break-all;
    }

    .ldr-env-item span {
        min-width: 0;
        word-break: break-word;
    }

    /* Env details content constrain */
    .ldr-env-content,
    .ldr-env-list,
    .ldr-env-details {
        max-width: 100%;
        overflow: hidden;
    }
}

/* Specific fix for very small devices */
@media screen and (max-width: 480px) {
    .ldr-settings-container {
        padding: 10px;
    }

    .ldr-card {
        margin: 10px 0;
        padding: 10px;
    }

    .ldr-settings-description {
        font-size: 14px;
    }
}

/* Fix for content behind mobile navigation on small screens */
@media screen and (max-width: 767px) {
    /* Ensure Settings page has enough bottom padding for mobile nav */
    /* Mobile nav is ~56px + safe area, so 120px ensures content clears it */
    #settings,
    .ldr-page#settings {
        padding-bottom: var(--mobile-nav-clearance-extended) !important;
    }

    /* Page header needs extra bottom margin to stay above nav when page is short */
    #settings .ldr-page-header {
        margin-bottom: 2rem;
    }

    /* Community note specifically needs margin from bottom */
    #settings .ldr-community-note {
        margin-bottom: 140px !important;
    }

    /* Settings form container needs bottom padding */
    #settings .ldr-card {
        margin-bottom: 140px !important;
    }

    /* Settings form itself needs bottom padding to keep inputs above nav */
    #settings .ldr-settings-form,
    #settings form {
        padding-bottom: var(--mobile-nav-clearance-extended) !important;
    }

    /* Last input in settings should have extra margin */
    #settings .ldr-settings-item:last-child {
        margin-bottom: 140px !important;
    }

    /* Ensure checkboxes at the bottom have clearance */
    #settings .ldr-settings-checkbox:last-of-type,
    #settings input[type="checkbox"]:last-of-type {
        margin-bottom: 60px !important;
    }

    /* Remove restrictive max-height that prevents proper scrolling */
    #settings,
    #settings .ldr-settings-container,
    #settings .ldr-card {
        max-height: none !important;
        overflow: visible !important;
    }

    /* Add a spacer after the settings container to push content above nav */
    #settings .ldr-settings-container::after {
        content: '';
        display: block;
        height: 180px;
        width: 100%;
    }

    /* Ensure JSON textareas have clearance */
    #settings .ldr-json-content,
    #settings .ldr-settings-textarea {
        margin-bottom: 80px !important;
    }

    /* Ensure ALL settings inputs at the bottom have clearance */
    #settings input:last-of-type,
    #settings select:last-of-type,
    #settings textarea:last-of-type,
    #settings [class~="settings-input"]:last-of-type {
        margin-bottom: 100px !important;
    }

    /* Force extra padding on form controls in settings */
    #settings .ldr-form-control {
        margin-bottom: 20px;
    }

    /* Ensure loading state also has spacer */
    #settings-content {
        min-height: 200px;
    }

    /* Mobile nav spacer - adds space below content to keep it above mobile nav */
    .ldr-mobile-nav-spacer {
        display: block;
        height: 120px;
        width: 100%;
        flex-shrink: 0;
    }

    /* Extra spacer at end of settings content */
    .ldr-settings-end-spacer {
        height: 150px !important;
    }
}

/* Hide spacer on desktop */
@media screen and (min-width: 768px) {
    .ldr-mobile-nav-spacer {
        display: none;
    }
}

/* Mobile touch target improvements */
@media screen and (max-width: 767px) {
    /* Make help/support links touch-friendly */
    .ldr-support-note {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
    }

    .ldr-support-note a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0.5rem 0.75rem;
        background: var(--bg-tertiary);
        border-radius: 0.5rem;
        font-size: 0.875rem;
    }

    .ldr-support-note a:hover,
    .ldr-support-note a:active {
        background: var(--accent-primary);
        color: white;
    }

    /* Settings tabs touch targets */
    .ldr-settings-tab {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Generic link improvements */
    .ldr-page a:not(.ldr-btn):not([class*="button"]) {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* =============================================
       Enhanced Checkbox Touch Targets for Settings
       WCAG 2.5.8: 24px minimum (AA) - checkboxes meet this
       Best practice: 44px touch target via padding + clickable labels
       ============================================= */

    /* Settings item row - make entire row tappable */
    #settings .ldr-settings-item,
    .ldr-settings-container .ldr-settings-item {
        display: flex;
        flex-direction: column;
        min-height: 44px;
        padding: 8px 12px;
        margin: 4px 0;
        border-radius: 6px;
    }

    /* Checkbox label container - make entire row clickable */
    #settings .ldr-checkbox-label,
    .ldr-settings-container .ldr-checkbox-label {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 8px 0;
        cursor: pointer;
        border-radius: 6px;
        transition: background-color 0.15s ease;
    }

    #settings .ldr-checkbox-label:hover,
    .ldr-settings-container .ldr-checkbox-label:hover {
        background-color: var(--bg-tertiary);
    }

    #settings .ldr-checkbox-label:active,
    .ldr-settings-container .ldr-checkbox-label:active {
        background-color: var(--bg-secondary);
    }

    /* Checkbox styling - visual size 24x24, touch via clickable label */
    #settings input[type="checkbox"],
    #settings input[type="radio"],
    .ldr-checkbox-label input[type="checkbox"],
    .ldr-checkbox-label input[type="radio"] {
        /* Visual size meets WCAG 2.5.8 minimum (24x24) */
        min-width: 24px;
        min-height: 24px;
        width: 24px;
        height: 24px;
        margin: 0 12px 0 0;
        /* Visual feedback */
        cursor: pointer;
        accent-color: var(--accent-primary);
        /* Allow overflow for touch target */
        flex-shrink: 0;
    }

    /* Make checkbox text labels (now <label> elements) fill space */
    #settings .ldr-checkbox-text,
    .ldr-checkbox-label label.ldr-checkbox-text {
        flex: 1;
        cursor: pointer;
        padding: 8px 0;
        min-height: 28px;
        display: flex;
        align-items: center;
        line-height: 1.4;
    }

    /* JSON property items with checkboxes */
    .ldr-json-property-item .ldr-checkbox-label {
        min-height: 44px;
        padding: 4px 8px;
        margin: 2px 0;
        border-radius: 6px;
    }

    /* Toggle switch touch area */
    .ldr-toggle-switch {
        min-width: 50px;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Section accordion header layout (row, 44px touch target) now lives in
       settings.css next to the rest of the mobile media query — no override
       needed here. Previously this block carried four `!important` rules to
       win against a column-layout rule that has since been corrected at the
       source. */

    .ldr-settings-toggle-icon {
        flex-shrink: 0;
        min-width: 32px;
        min-height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Chevron rotation is handled by the base rule in settings.css
       (`.ldr-settings-section-header.collapsed .ldr-settings-toggle-icon`
       rotates the container -90deg). Do not add a second rotation here on
       the inner <i> — that would compound with the container's rotation
       and visually point the chevron at -180deg. */
}
