/* ========== MOBILE RESPONSIVE ========== */
@media (max-width: 640px) {
    /* Tab dropdown visible, button tabs hidden */
    .ss-tab-select { display: block !important; }
    .ss-tabs { display: none !important; }
    
    /* Full screen modal */
    #settings-modal > div:first-child {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }
    
    /* ===== ASSIGNMENT ROWS ===== */
    .ss-assign-row {
        gap: 8px !important;
    }
    
    .ss-assign-text {
        flex: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
    
    .ss-assign-text > div {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .ss-assign-text > div:first-child {
        font-size: 13px !important;
    }
    
    .ss-assign-text > div:last-child {
        font-size: 10px !important;
    }
    
    /* Change buttons - compact */
    .ss-change-btn {
        padding: 5px 10px !important;
        font-size: 11px !important;
        min-width: auto !important;
        flex-shrink: 0 !important;
    }
    
    /* ===== ALL SS-BTN-SM ===== */
    .ss-btn-sm {
        padding: 5px 10px !important;
        font-size: 11px !important;
        min-width: auto !important;
        width: auto !important;
        flex-shrink: 0 !important;
    }
    
    .ss-btn-danger {
        padding: 5px 8px !important;
    }
    
    /* ===== ITEM ROWS (widgets, combiners, iframes, header) ===== */
    .ss-row {
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }
    
    .ss-row-content {
        flex: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
    
    .ss-row-title {
        font-size: 13px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .ss-row-subtitle {
        font-size: 10px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* ===== REORDER ARROWS ===== */
    #settings-modal [style*="flex-direction:column"][style*="gap:2px"] {
        gap: 0px !important;
        margin-right: 2px !important;
    }
    
    #settings-modal [style*="flex-direction:column"][style*="gap:2px"] button {
        padding: 0px 4px !important;
        font-size: 8px !important;
        min-width: 18px !important;
        line-height: 1.2 !important;
    }
    
    /* ===== CARDS ===== */
    .ss-card {
        padding: 8px !important;
    }
    
    /* ===== SECTION HEADERS ===== */
    .ss-section-header {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 6px !important;
        margin-bottom: 8px !important;
    }
    
    .ss-section-title {
        font-size: 10px !important;
    }
    
    /* ===== ADD BUTTONS ===== */
    button[onclick*="ssShowAdd"],
    button[onclick*="Assign"] {
        padding: 6px 12px !important;
        font-size: 11px !important;
    }
    
    /* ===== FORM INPUTS ===== */
    input, select, textarea {
        font-size: 16px !important;
    }
    
    .ss-input, .ss-select {
        padding: 8px !important;
    }
    
    /* ===== MODAL FOOTER ===== */
    #settings-modal [style*="border-top:1px solid"][style*="padding:16px"] {
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 10px !important;
    }
    
    /* ===== GENERIC FLEX ROWS WITH BUTTONS ===== */
    #settings-modal div[style*="display:flex"][style*="justify-content:space-between"] {
        gap: 8px !important;
    }
    
    /* Text containers next to buttons */
    #settings-modal div[style*="display:flex"][style*="justify-content:space-between"] > div[style*="flex:1"] {
        min-width: 0 !important;
        overflow: hidden !important;
    }
    
    #settings-modal div[style*="display:flex"][style*="justify-content:space-between"] > div[style*="flex:1"] > div {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

@media (min-width: 641px) {
    .ss-tab-select { display: none !important; }
    .ss-tabs { display: flex !important; }
}


/* ===== FIELD MAPPINGS GRID (Widget Edit Modal) ===== */
@media (max-width: 640px) {
    /* Field mapping rows - stack vertically */
    #field-mappings > div {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        padding: 10px !important;
        margin-bottom: 8px !important;
        background: #1a1a1c !important;
        border-radius: 6px !important;
    }
    
    /* Each input in field mappings - full width */
    #field-mappings input {
        width: 100% !important;
        min-width: 0 !important;
        font-size: 14px !important;
    }
    
    #field-mappings select {
        width: 100% !important;
        font-size: 14px !important;
    }
    
    /* Delete button for field mapping - right align */
    #field-mappings > div > button {
        align-self: flex-end !important;
        margin-top: 4px !important;
    }
    
    /* Grid layouts in modals - single column on mobile */
    #sync-settings-content [style*="grid-template-columns"],
    #widget-modal [style*="grid-template-columns"],
    #combiner-modal [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    
    /* Two-column grids that should stay 2 columns but narrower */
    #sync-settings-content [style*="grid-template-columns: 1fr 1fr"],
    [style*="display:grid"][style*="gap:8px"] {
        grid-template-columns: 1fr 1fr !important;
    }
    
    /* Sub-modals (edit widget, edit combiner) - full screen */
    #widget-modal > div,
    #combiner-modal > div,
    #assign-widget-modal > div,
    #iframe-modal > div,
    #header-widget-modal > div {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }
    
    /* Modal content scrollable */
    #widget-modal > div > div,
    #combiner-modal > div > div {
        max-height: calc(100vh - 120px) !important;
        overflow-y: auto !important;
    }
    
    /* Form labels */
    #sync-settings-content label,
    .ss-label {
        font-size: 12px !important;
    }
}


/* ===== API COMBINER MODAL FIX ===== */
@media (max-width: 640px) {
    /* Combiner modal container */
    #combiner-modal {
        padding: 0 !important;
        align-items: flex-start !important;
    }
    
    /* Combiner modal dialog */
    #combiner-modal > div {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100% !important;
        max-height: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        border: none !important;
    }
    
    /* Content area */
    #combiner-modal > div > div:last-child {
        padding: 12px !important;
    }
    
    /* Source cards container */
    #combiner-sources {
        width: 100% !important;
    }
    
    /* Individual source cards */
    #combiner-sources > div {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 10px !important;
    }
    
    /* Source header (Source N + Remove) */
    #combiner-sources [style*="justify-content:space-between"] {
        width: 100% !important;
        flex-wrap: nowrap !important;
    }
    
    /* All inputs in combiner sources */
    #combiner-sources input[type="text"] {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Auth header + Prefix row - stack on mobile */
    #combiner-sources > div > [style*="display:flex"][style*="gap:8px"]:not([style*="justify-content"]) {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    #combiner-sources > div > [style*="display:flex"][style*="gap:8px"] > div {
        width: 100% !important;
        flex: none !important;
    }
    
    /* Field extraction rows - keep horizontal but allow wrap */
    #combiner-sources [data-field-row],
    #combiner-sources [style*="display:flex"][style*="gap:4px"] {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
    
    /* Field inputs */
    #combiner-sources [data-field-row] input,
    #combiner-sources [style*="display:flex"][style*="gap:4px"] input {
        flex: 1 1 40% !important;
        min-width: 80px !important;
    }
    
    /* Field select */
    #combiner-sources [data-field-row] select,
    #combiner-sources [style*="display:flex"][style*="gap:4px"] select {
        flex: 0 1 70px !important;
        min-width: 60px !important;
    }
    
    /* Field delete button */
    #combiner-sources [data-field-row] button,
    #combiner-sources [style*="display:flex"][style*="gap:4px"] > button {
        flex: 0 0 auto !important;
    }
    
    /* Footer buttons - always flex */
    #combiner-modal [style*="display:flex"][style*="gap:8px"]:last-child {
        width: 100% !important;
    }
    
    #combiner-modal [style*="display:flex"][style*="gap:8px"]:last-child button {
        flex: 1 !important;
    }
}

/* Also fix widget modal field mappings for good measure */
@media (max-width: 640px) {
    #widget-modal {
        padding: 0 !important;
        align-items: flex-start !important;
    }
    
    #widget-modal > div {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100% !important;
        max-height: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        border: none !important;
    }
    
    #widget-modal > div > div {
        padding: 12px !important;
    }
}

/* Landscape mode */
@media (max-height: 500px) {
    #combiner-modal > div,
    #widget-modal > div {
        min-height: auto !important;
        height: 100vh !important;
        overflow-y: auto !important;
    }
}



/* ===== COLLAPSIBLE FIELD ROWS ===== */
.ss-field-row + .ss-field-inputs {
    display: none !important;
}

.ss-field-row.ss-field-expanded + .ss-field-inputs {
    display: block !important;
}

.ss-field-row.ss-field-expanded {
    border-radius: 6px 6px 0 0 !important;
    margin-bottom: 0 !important;
}

.ss-field-row.ss-field-expanded .ss-field-edit-btn {
    background: #5e6ad2 !important;
    color: white !important;
}

/* Hide edit button on desktop, show on mobile */
@media (min-width: 641px) {
    /* Hide Edit button on desktop - use click on row to expand */
    .ss-field-edit-btn {
        display: none !important;
    }
    
    /* Show the summary row on desktop too */
    .ss-field-row {
        display: flex !important;
    }
    
    /* Inputs panel - hidden by default, shown when expanded */
    .ss-field-inputs {
        display: none !important;
    }
    
    .ss-field-row.ss-field-expanded + .ss-field-inputs {
        display: block !important;
    }
}

/* Mobile - summary view by default */
@media (max-width: 640px) {
    .ss-field-summary {
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    .ss-field-summary span {
        max-width: 80px !important;
    }
}




/* ===== CLEAN FIELD ROW STYLES ===== */
@media (max-width: 640px) {
    /* Field summary row - MUST be flex row */
    .ss-field-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }
    
    .ss-field-summary {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }
    
    /* Expanded inputs panel */
    .ss-field-row.ss-field-expanded + .ss-field-inputs,
    .ss-field-inputs[style*="display: block"],
    .ss-field-inputs[style*="display:block"] {
        display: block !important;
    }
}