/* Custom Mobile Styles for Easy Export Modals */

/* Modal mobile responsive styles */
@media screen and (max-width: 768px) {
    /* Add margin to main page content on mobile */
    /* #polaris-page-main {
        margin: 10px !important;
    } */
    /* Preview template modal mobile layout */
    #report-sample-modal .flex-Row {
        flex-direction: column !important;
        gap: 4px;
    }

    #report-sample-modal .flex-Row > div {
        width: 100% !important;
        min-width: 0 !important;
        margin-bottom: 0 !important;
    }

    #report-sample-modal .flex-Row .flex-1 {
        flex: none !important;
    }

    /* Ensure inputs take full width on mobile */
    #report-sample-modal input,
    #report-sample-modal select {
        width: 100% !important;
        max-width: none !important;
    }

    /* Button container spacing on mobile */
    #report-sample-modal .Polaris-Labelled__LabelWrapper {
        margin-top: 2px;
        margin-bottom: 0 !important;
    }

    /* Reduce vertical spacing between modal sections */
    #report-sample-modal .Polaris-Box-Flex > div {
        margin-bottom: 4px;
    }

    /* Reduce spacing for status containers */
    #report-sample-modal #report-sample-status-container {
        margin-top: 4px;
        margin-bottom: 4px;
    }

    /* Remove extra margins from Polaris components */
    #report-sample-modal .Polaris-Labelled {
        margin-bottom: 0 !important;
    }

    #report-sample-modal .Polaris-TextField {
        margin-bottom: 0 !important;
    }

    /* Force modals to use full width on mobile */
    #report-sample-modal {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* Target the actual modal container */
    #report-sample-modal .Polaris-Modal {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* Target modal dialog container */
    #report-sample-modal .Polaris-Modal-Dialog__Container {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* Target modal dialog */
    #report-sample-modal .Polaris-Modal-Dialog {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* Target modal dialog modal */
    #report-sample-modal .Polaris-Modal-Dialog__Modal {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* Ensure modal content uses full width */
    #report-sample-modal .Polaris-Modal__Content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 16px !important;
    }

    /* Force modal body to full width */
    #report-sample-modal .Polaris-Modal__Body {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Override any Polaris responsive styles */
    @media screen and (max-width: 768px) {
        #report-sample-modal .Polaris-Modal,
        #report-sample-modal .Polaris-Modal-Dialog__Container,
        #report-sample-modal .Polaris-Modal-Dialog,
        #report-sample-modal .Polaris-Modal-Dialog__Modal {
            width: 100vw !important;
            max-width: 100vw !important;
            min-width: 100vw !important;
            margin: 0 !important;
            left: 0 !important;
            right: 0 !important;
            transform: none !important;
        }
    }
}

/* Additional mobile optimizations for other modals */
@media screen and (max-width: 768px) {
    /* Properties modal mobile layout */
    #properties-modal .flex-Row {
        flex-direction: column !important;
        gap: 4px;
    }

    #properties-modal .flex-Row > div {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Connected stores modal mobile layout */
    #connected-stores .flex-Row {
        flex-direction: column !important;
        gap: 4px;
    }

    #connected-stores .flex-Row > div {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Ensure all modal inputs take full width on mobile */
    .Polaris-Modal input,
    .Polaris-Modal select {
        width: 100% !important;
        max-width: none !important;
    }

    /* Onboarding mobile optimizations */
    .onboarding-buttons {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    .onboarding-buttons a {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Modal confirmation buttons - keep horizontal on mobile */
    #confirmation-modal .Polaris-InlineStack,
    #danger-confirmation-modal .Polaris-InlineStack {
        --pc-inline-stack-flex-direction-xs: row !important;
        --pc-inline-stack-wrap: nowrap !important;
        flex-wrap: nowrap !important;
    }

    /* Ensure modal bottom actions stay horizontal */
    .Polaris-Modal .Polaris-InlineStack[style*="--pc-inline-stack-gap-xs: var(--p-space-200)"] {
        --pc-inline-stack-flex-direction-xs: row !important;
        --pc-inline-stack-wrap: nowrap !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 0.5rem !important;
    }

    /* Modal buttons sizing for mobile */
    .Polaris-Modal button {
        min-width: auto !important;
        white-space: nowrap !important;
    }

    /* Hide bulk delete functionality on mobile */

    /* Hide select all checkboxes */
    #select-all-schedulers-checkboxes,
    #select-all-templates-checkboxes {
        display: none !important;
    }

    /* Hide individual table checkboxes */
    .table-checkbox {
        display: none !important;
    }

    /* Hide first column containing checkboxes in specific tables */
    #schedulers-table .Polaris-IndexTable__TableCell--first,
    #templates-table .Polaris-IndexTable__TableCell--first,
    #templates-table-summary .Polaris-IndexTable__TableCell--first {
        display: none !important;
    }

    /* Hide header checkbox column in specific tables */
    #schedulers-table .Polaris-IndexTable__TableHeader .Polaris-IndexTable__TableCell:first-child,
    #templates-table .Polaris-IndexTable__TableHeader .Polaris-IndexTable__TableCell:first-child,
    #templates-table-summary .Polaris-IndexTable__TableHeader .Polaris-IndexTable__TableCell:first-child {
        display: none !important;
    }

    /* Hide bulk delete buttons using specific selectors */
    div[onclick*="showBulkDeleteModal"] {
        display: none !important;
    }

    .hint--right[data-tippy-content*="Delete the selected"] {
        display: none !important;
    }

    .hint--right[onclick*="showBulkDeleteModal"] {
        display: none !important;
    }
}