/* Global Popup Responsive Styles
   ========================================
   This stylesheet provides consistent responsive behavior for all DxPopup components.
   Add these styles to ensure touch-friendly interactions and proper mobile layout.
*/

/* ===========================================
   CSS Variables for Popup Sizing
   =========================================== */
:root {
    /* Popup sizing */
    --popup-small-width: 400px;
    --popup-medium-width: 600px;
    --popup-large-width: 850px;
    --popup-xlarge-width: 1000px;

    /* Mobile full-screen minus safe areas */
    --popup-mobile-width: calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right));
    --popup-mobile-height: calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom));

    /* Touch target minimum (Apple HIG / Material Design recommendation) */
    --touch-target-min: 44px;

    /* Popup body max height calculations */
    --popup-body-max-height: calc(85vh - 120px);
    --popup-body-max-height-mobile: calc(100vh - 100px);
}

/* ===========================================
   Touch Target Improvements
   =========================================== */

/* Increase checkbox touch targets on mobile */
@media (max-width: 767px) {
    .dxbl-grid .dxbl-checkbox {
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .dxbl-grid .dxbl-checkbox input[type="checkbox"] {
        width: 20px;
        height: 20px;
    }
}

/* ===========================================
   Footer Button Layout
   =========================================== */

/* Add gap spacing and align buttons left (DevExpress defaults to flex-end) */
.dxbl-modal-footer {
    gap: 8px;
    justify-content: flex-start;
}

/* Reset any DevExpress default button margins in modal footers.
   We use gap for spacing, so margins would cause inconsistent spacing. */
.dxbl-modal-footer .dxbl-btn {
    margin: 0 !important;
}

/* Touch-friendly button sizing on mobile */
@media (max-width: 575px) {
    .dxbl-modal-footer .dxbl-btn {
        min-height: var(--touch-target-min);
    }
}

/* Slightly larger buttons on tablet */
@media (min-width: 576px) and (max-width: 767px) {
    .dxbl-modal-footer .dxbl-btn {
        min-height: 40px;
        padding: 10px 16px;
    }
}

/* ===========================================
   Grid Improvements in Popups
   =========================================== */

/* Improve readability on mobile */
@media (max-width: 767px) {
    .dxbl-popup .dxbl-grid {
        font-size: 0.875rem;
    }

    /* Ensure detail rows have proper padding */
    .dxbl-popup .dxbl-grid-detail-cell {
        padding: 8px 12px;
    }

    /* Make grid row height more touch-friendly */
    .dxbl-popup .dxbl-grid-data-row {
        min-height: 48px;
    }
}

/* ===========================================
   Modal Body Scrolling
   =========================================== */

/* Smooth scrolling for iOS */
.dxbl-popup-body {
    -webkit-overflow-scrolling: touch;
}

/* Custom body class for modals needing scroll */
.modal-body-responsive {
    max-height: var(--popup-body-max-height);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
    .modal-body-responsive {
        max-height: var(--popup-body-max-height-mobile);
    }
}

/* ===========================================
   ComboBox in Grid Cells
   =========================================== */

/* Make combo boxes more touch-friendly on mobile */
@media (max-width: 767px) {
    .dxbl-grid .dxbl-combobox {
        min-height: 36px;
    }

    .dxbl-grid .dxbl-combobox .dxbl-edit-btn {
        min-width: 36px;
    }
}

/* ===========================================
   Safe Area Support (for notched devices)
   =========================================== */

@supports (padding: env(safe-area-inset-top)) {
    .dxbl-popup.dxbl-popup-fullscreen {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* ===========================================
   Full-Screen Mobile Popup Class
   Apply to DxPopup via CssClass="fullscreen-mobile"
   Excludes: ConfirmDialog and similar confirmation popups
   =========================================== */
@media (max-width: 991px) {
    .dxbl-popup.fullscreen-mobile {
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        transform: none !important;
        border-radius: 0 !important;
    }

    .dxbl-popup.fullscreen-mobile .dxbl-popup-body {
        flex: 1;
        max-height: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dxbl-popup.fullscreen-mobile .dxbl-modal-footer {
        flex-shrink: 0;
    }
}