/* Modal Compact Design Refined - Responsive 94% Logic & Minimized Margins */

/* 1. Base Modal Styling - Responsive Width & Height */
.modal-content-compact {
    /* STRICT: Never exceed 94% of screen dimensions */
    max-width: min(900px, 94vw) !important;
    max-height: 94vh !important;
    width: 94vw !important;
    /* Force width to be responsive */

    padding: 6px 12px !important;
    margin: 3vh auto !important;
    overflow-y: auto !important;
    display: flex;
    flex-direction: column;
}

/* 2. Modal Header - Minimize Spacing */
.modal-header {
    padding: 2px 4px !important;
    margin-bottom: 2px !important;
    gap: 8px !important;
    flex-shrink: 0;
}

/* 3. Body Info - Reduced Font Sizes */
.modal-body-info {
    font-size: 0.8rem !important;
    width: 100%;
}

#bodyTitleInfo .body-info-value {
    font-size: 0.85rem !important;
    /* Slightly larger for title */
    line-height: 1.2 !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

#bodySizeInfo .body-info-value {
    font-size: 0.75rem !important;
    color: #cbd5e1 !important;
}

.search-title-btn {
    padding: 2px 8px !important;
    font-size: 0.8rem !important;
    height: 34px !important;
    line-height: 1 !important;
}

/* Pikpak Status Dropdown */
#modalPikpak {
    font-size: 0.75rem !important;
    padding: 0 4px !important;
    height: 34px !important;
}

/* 4. Grid Layout - Gap Reduction */
.modal-grid-layout {
    display: grid !important;
    grid-template-columns: 1fr 310px !important;
    /* Fixed width for preview column */
    gap: 12px !important;
    margin-top: 0px !important;
    flex: 1;
    overflow: hidden;
    /* Prevent grid overflow */
}

/* Left Column */
.modal-left-column {
    padding-right: 2px !important;
    min-width: 0;
    /* Allow flex item to shrink */
}

/* 5. Form Inputs - Compact */
.form-group-compact {
    margin-bottom: 3px !important;
    gap: 0px !important;
}

.form-group-compact label {
    font-size: 0.75rem !important;
    margin-bottom: 1px !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="light"] .form-group-compact label {
    color: #636e72 !important;
}

.form-input-compact {
    padding: 6px 10px !important;
    font-size: 0.9rem !important;
    /* Slightly larger for better readability */
    min-height: 34px !important;
    /* Increased again to fix clipping */
    height: 34px !important;
    line-height: 1.4 !important;
    /* Explicit line height */
    display: flex !important;
    align-items: center !important;
}

.form-row-compact {
    display: grid !important;
    grid-template-columns: 0.8fr 1fr 1fr 1.4fr !important;
    gap: 6px !important;
}

/* 6. Preview Column - Responsive Image */
.modal-right-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Title Input Wrapper & Layout Fixes (Overlay Style) */
.title-input-wrapper {
    position: relative !important;
    width: 100% !important;
    overflow: visible !important;
    /* Allow button to cover */
}

#modalTitle {
    width: 100% !important;
    padding-right: 20px !important;
}

/* Badge Container - Opaque Overlay */
.title-action-buttons {
    position: absolute !important;
    right: 1px !important;
    /* Cover the border */
    top: 1px !important;
    bottom: 1px !important;
    z-index: 20 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 6px !important;

    /* Opaque Background to Hide Input End */
    background: rgba(40, 40, 55, 0.98) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

[data-theme="light"] .title-action-buttons {
    background: #ffffff !important;
    border-left: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.modal-preview-container {
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 8px;
    overflow: hidden;
    max-height: 260px !important;
    display: flex;
    flex-direction: column;
}

[data-theme="light"] .modal-preview-container {
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.modal-preview-image {
    max-height: 220px !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    background: rgba(0, 0, 0, 0.5);
    /* Default dark bg for image */
}

[data-theme="light"] .modal-preview-image {
    background: transparent !important;
    /* Transparent on light theme */
}

.preview-controls-row {
    padding: 8px 10px !important;
    gap: 8px !important;
    background: rgba(20, 20, 30, 0.6) !important;
    /* Darker bottom bar */
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    /* Align buttons to right */
}

[data-theme="light"] .preview-controls-row {
    background: rgba(240, 240, 245, 0.8) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

#modalPreviewInfo {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: inherit !important;
}

/* High Contrast Action Buttons */
.edit-image-btn {
    font-size: 0.75rem !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="light"] .edit-image-btn {
    color: #333 !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    background: #ffffff !important;
}

#modalPreviewInfo {
    font-size: 0.7rem !important;
}

.edit-image-btn {
    font-size: 0.7rem !important;
    padding: 2px 6px !important;
}

/* 7. Action Buttons */
.form-actions-compact {
    margin-top: 8px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.update-btn-compact,
.open-btn-compact {
    padding: 6px 16px !important;
    font-size: 0.9rem !important;
    border-radius: 6px !important;
    color: white !important;
    border: none !important;
    cursor: pointer !important;
}

.update-btn-compact {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    /* Blue */
}

.open-btn-compact {
    /* Changed to Teal/Green to ensure Red Magnet Icon is visible */
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
}

/* Magnet Link Textarea */
#modalMagnet {
    min-height: 40px !important;
    font-size: 0.7rem !important;
    padding: 4px !important;
    line-height: 1.2;
}

/* Close Button Fix */
/* Close Button Fix - Standard Top Right Position */
.close-modal {
    position: absolute !important;
    right: 12px !important;
    top: 10px !important;
    transform: none !important;
    /* Remove vertical centering */
    font-size: 1.8rem !important;
    line-height: 1 !important;
    color: rgba(255, 255, 255, 0.6) !important;
    background: transparent !important;
    border: none !important;
    padding: 4px !important;
    z-index: 100 !important;
}

.close-modal:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 50% !important;
}

[data-theme="light"] .close-modal {
    color: rgba(0, 0, 0, 0.5) !important;
}

[data-theme="light"] .close-modal:hover {
    color: #000000 !important;
    background: rgba(0, 0, 0, 0.05) !important;
}

.close-modal:hover {
    color: #fff !important;
}

/* --- RESPONSIVE LOGIC --- */

/* Medium Screens (Tablets) */
@media (max-width: 850px) {
    .modal-grid-layout {
        grid-template-columns: 1fr 220px !important;
        /* Smaller preview */
    }

    .form-row-compact {
        grid-template-columns: 1fr 1fr !important;
        /* 2x2 grid for inputs */
        gap: 6px !important;
    }

    .modal-preview-container {
        max-height: 200px !important;
    }

    .modal-preview-image {
        max-height: 160px !important;
    }
}

/* Small Screens (Mobile - Portrait) */
@media (max-width: 600px) {
    .modal-content-compact {
        width: 96vw !important;
        /* Use slightly more width on mobile */
        max-width: 96vw !important;
        padding: 8px !important;
        max-height: 96vh !important;
    }

    .modal-grid-layout {
        grid-template-columns: 1fr !important;
        /* Stack vertically */
        gap: 10px !important;
        overflow-y: auto !important;
        /* Allow internal scrolling if needed */
    }

    .modal-right-column {
        order: -1;
        /* Show image ON TOP on mobile */
        margin-bottom: 6px;
    }

    .modal-preview-container {
        max-height: 180px !important;
        /* USER REQUEST: FIX CUT-OFF IMAGE ON MOBILE */
        width: 90vw !important;
        max-width: 90vw !important;
        margin: 0 auto !important;
    }

    .modal-preview-image {
        max-height: 150px !important;
        max-width: 100% !important;
        object-fit: contain !important;
    }

    .form-row-compact {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Hide less critical info on very small screens */
    #bodySizeInfo {
        display: none !important;
    }

    .search-buttons-container {
        margin-left: 0 !important;
    }
}

/* Height Constraint (Landscape Mobile) */
@media (max-height: 600px) {
    .modal-content-compact {
        max-height: 98vh !important;
    }

    .modal-grid-layout {
        display: flex !important;
        flex-direction: row !important;
    }

    .modal-right-column {
        width: 200px !important;
        flex-shrink: 0;
    }

    .modal-left-column {
        flex: 1;
    }

    #modalMagnet {
        display: none !important;
        /* Hide magnet link on short screens to save space */
    }
}

/* --- Placeholder Layout Fix --- */
.modal-preview-placeholder {
    display: flex;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    /* Fill available space */
    min-height: 0 !important;
    /* Allow shrinking */
    background: rgba(0, 0, 0, 0.3) !important;
    color: #888 !important;
    overflow: hidden !important;
    margin: 0 !important;
}

.modal-preview-placeholder span {
    font-size: 2rem !important;
    margin-bottom: 8px !important;
    opacity: 0.5 !important;
    display: block !important;
}

.modal-preview-placeholder .placeholder-text {
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    display: block !important;
    margin: 0 !important;
}

/* Ensure controls are always visible at bottom */
.preview-controls-row {
    flex-shrink: 0 !important;
    /* Never shrink */
    z-index: 10 !important;
    position: relative !important;
    display: flex !important;
}

/* Hide paste hint if it still exists via JS or other CSS */
.paste-hint {
    display: none !important;
}