/**
 * Styles for the draggable & resizable modals
 */
.modal {
    position: relative;
}

.itemContentPadder {
	width: 99%;
}

.modal-dialog {
    margin: 0;
    position: absolute;
    min-width: 300px;
    min-height: 200px;
    max-width: none !important;
    width: 500px;
    height: 400px;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}

.modal-dialog.positioned {
    opacity: 1;
}

.modal-header.draggable-handle {
    cursor: move;
    user-select: none;
}

.modal-header.draggable-handle:active {
    cursor: grabbing;
}

/* Invisible resize zones — no visual appearance, cursor only.
   Override these to customise hit-zone size or cursor style. */
.modal-dialog .resize-zone {
    position: absolute;
    z-index: 1060;
}

/* Corner zones */
.modal-dialog .resize-zone.resize-nw { top: 0; left: 0;  width: 14px; height: 14px; cursor: nwse-resize; }
.modal-dialog .resize-zone.resize-ne { top: 0; right: 0; width: 14px; height: 14px; cursor: nesw-resize; }
.modal-dialog .resize-zone.resize-sw { bottom: 0; left: 0;  width: 14px; height: 14px; cursor: nesw-resize; }
.modal-dialog .resize-zone.resize-se { bottom: 0; right: 0; width: 14px; height: 14px; cursor: nwse-resize; }

/* Side zones — inset from corners to avoid overlap */
.modal-dialog .resize-zone.resize-n { top: 0;    left: 14px; right: 14px; height: 14px; cursor: ns-resize; }
.modal-dialog .resize-zone.resize-s { bottom: 0; left: 14px; right: 14px; height: 3px; cursor: ns-resize; }
.modal-dialog .resize-zone.resize-e { top: 14px; bottom: 14px; right: 0px; width: 3px; cursor: ew-resize; }
.modal-dialog .resize-zone.resize-w { top: 14px; bottom: 14px; left: 0; width: 14px; cursor: ew-resize; }

/* Hide zones in fullscreen */
.modal-dialog.fullscreen .resize-zone { display: none; }

.modal-content {
    height: 100%;
    min-height: 200px;
}

.modal-dialog.fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    left: 0 !important;
    top: 0 !important;
    max-width: none !important;
    max-height: none !important;
}

.modal-body {
    overflow-y: auto;
    overflow-x: auto;
    flex: 1;
}

/* Mobile-specific styles - JavaScript handles positioning */
@media (max-width: 768px) {
    /* Hide resize zones on mobile */
    .modal-dialog .resize-zone {
        display: none;
    }

    /* Disable drag cursor on header */
    .modal-dialog .modal-header {
        cursor: default;
    }

    /* Ensure scrollable modal body */
    .modal-dialog .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* For very small screens */
@media (max-width: 480px) {
    /* Reduced padding for more space */
    .modal-dialog .modal-header,
    .modal-dialog .modal-body {
        padding: 0.75rem;
    }
}

/* Fullscreen on mobile */
@media (max-width: 768px) {
    .modal-dialog.fullscreen {
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        margin: 0 !important;
    }
}

/**
 * CoreUI Modal Fixes for FbModal
 * These styles fix various CoreUI modal issues to allow proper positioning and display
 */

/* Fix modal container to cover full viewport without clipping */
.modal.show {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    pointer-events: none !important;
}

/* Fix modal-dialog positioning and visibility */
.modal.show .modal-dialog {
    position: fixed !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 1055 !important;
    opacity: 1 !important; /* Critical: CoreUI sets this to 0 */
    pointer-events: auto !important;
}

/* Configure content area for proper scrolling */
.modal.show .modal-dialog .itemContent {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-width: 100% !important;
    max-height: 100% !important;
    box-sizing: border-box !important;
}

/* Configure modal-content wrapper if it exists */
.modal.show .modal-dialog .modal-content {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Popup filters modal must keep CoreUI default flow and centered dialog. */
#filter_modal.fabrikFilterModalCoreui {
    position: fixed !important;
}

#filter_modal.fabrikFilterModalCoreui .modal-dialog {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin: var(--cui-modal-margin, 1.75rem) auto !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: var(--cui-modal-width, 800px) !important;
    transform: none !important;
}

#filter_modal.fabrikFilterModalCoreui.modal.show .modal-dialog {
    position: relative !important;
    margin: var(--cui-modal-margin, 1.75rem) auto !important;
}

#filter_modal.fabrikFilterModalCoreui .modal-content {
    height: auto !important;
    width: 100% !important;
    overflow: visible !important;
}

#filter_modal.fabrikFilterModalCoreui .modal-body {
    overflow: visible !important;
}

/* Prevent date picker calendar from being clipped inside filter popup body/footer. */
#filter_modal.fabrikFilterModalCoreui .date-picker-dropdown,
#filter_modal.fabrikFilterModalCoreui [data-coreui-toggle="date-picker"] .date-picker-dropdown {
    z-index: 1080;
}