/**
 * 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;
    /* Add padding to accommodate handles */
    margin: 10px; /* Give space for handles */
}

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

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

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

/* Resize handles - subtle and professional */
.resize-handle {
    position: absolute;
    z-index: 1060; /* Higher than modal content */
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.2);
    pointer-events: auto; /* Ensure they capture mouse events */
    border-radius: 2px;
    transition: all 0.2s ease;
}

.resize-handle:hover {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(0, 0, 0, 0.6);
    transform: scale(1.1);
}

/* Adjust transform for handles that already have transforms */
.resize-handle.resize-n:hover,
.resize-handle.resize-s:hover {
    transform: translateX(-50%) scale(1.1);
}

.resize-handle.resize-e:hover,
.resize-handle.resize-w:hover {
    transform: translateY(-50%) scale(1.1);
}

/* Corner handles - bigger for easier grabbing */
.resize-handle.resize-nw { 
    top: -8px; 
    left: -8px; 
    width: 16px; 
    height: 16px; 
    cursor: nwse-resize;
    background: rgba(0, 0, 0, 0.2);
}
.resize-handle.resize-ne { 
    top: -8px; 
    right: -8px; 
    width: 16px; 
    height: 16px; 
    cursor: nesw-resize;
    background: rgba(0, 0, 0, 0.2);
}
.resize-handle.resize-sw { 
    bottom: -8px; 
    left: -8px; 
    width: 16px; 
    height: 16px; 
    cursor: nesw-resize;
    background: rgba(0, 0, 0, 0.2);
}
.resize-handle.resize-se { 
    bottom: -8px; 
    right: -8px; 
    width: 16px; 
    height: 16px; 
    cursor: nwse-resize;
    background: rgba(0, 0, 0, 0.2);
}

/* Add grip dots to corner handles */
.resize-handle.resize-nw::after,
.resize-handle.resize-ne::after,
.resize-handle.resize-sw::after,
.resize-handle.resize-se::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

/* Side handles - centered and larger */
.resize-handle.resize-n { 
    top: -8px; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 80px; 
    height: 16px; 
    cursor: ns-resize;
}
.resize-handle.resize-s { 
    bottom: -8px; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 80px; 
    height: 16px; 
    cursor: ns-resize;
}
.resize-handle.resize-e { 
    right: -8px; 
    top: 50%; 
    transform: translateY(-50%); 
    width: 16px; 
    height: 80px; 
    cursor: ew-resize;
}
.resize-handle.resize-w { 
    left: -8px; 
    top: 50%; 
    transform: translateY(-50%); 
    width: 16px; 
    height: 80px; 
    cursor: ew-resize;
}

/* Add grip lines to side handles */
.resize-handle.resize-n::after,
.resize-handle.resize-s::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 2px;
    background: white;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 
        0 -3px 0 white,
        0 3px 0 white,
        0 -3px 2px rgba(0, 0, 0, 0.5),
        0 0 2px rgba(0, 0, 0, 0.5),
        0 3px 2px rgba(0, 0, 0, 0.5);
}

.resize-handle.resize-e::after,
.resize-handle.resize-w::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 20px;
    background: white;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 
        -3px 0 0 white,
        3px 0 0 white,
        -3px 0 2px rgba(0, 0, 0, 0.5),
        0 0 2px rgba(0, 0, 0, 0.5),
        3px 0 2px rgba(0, 0, 0, 0.5);
}

.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-dialog.fullscreen .resize-handle {
    display: none;
}

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

.modal .modal-header {
    cursor: move;
}

/* Mobile-specific styles - JavaScript handles positioning */
@media (max-width: 768px) {
    /* Hide resize handles on mobile */
    .modal-dialog .resize-handle {
        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;
}