/* Add modal-specific styles at the end of the file */

/* =============================================================================
   MODAL SPECIFIC STYLES - Compact layout for modal windows
   ============================================================================= */

/*.modal .search-container-modern {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12px 0;
    max-height: 70vh;
    overflow-y: auto;
}

.modal .tags-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.modal .tag-group-modern {
    padding: 10px;
    border-radius: 8px;
    min-height: auto;
}

.modal .tag-group-modern.funktion-wide {
    grid-column: span 2;*/ /* Let Funktion span both columns in modal */
/*}

.modal .tag-group-header {
    margin-bottom: 8px;
    padding-bottom: 6px;
}

.modal .tag-group-title {
    font-size: 0.95rem;
    gap: 6px;
}

.modal .tag-group-title::before {
    width: 2px;
    height: 12px;
}

.modal .tag-count {
    padding: 2px 6px;
    font-size: 0.65rem;
    border-radius: 12px;
}

.modal .tag-items {
    gap: 3px;
}

.modal .tag-label-modern {
    padding: 6px 10px;
    font-size: 0.8rem;
    border-radius: 6px;
}

.modal .tag-label-modern:hover {
    transform: translateX(2px);
}*/

/* Compact filter section for modal */
/*.modal .filter-section-modern {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    margin-top: 8px;
}

.modal .filter-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    position: static;
}

.modal .filter-header {
    margin-bottom: 12px;
}

.modal .filter-title {
    font-size: 1rem;
    gap: 4px;
}

.modal .filter-title::before,
.modal .filter-title::after {
    width: 15px;
    height: 2px;
}

.modal .filter-group {
    margin-bottom: 12px;
}

.modal .form-select-modern {
    padding: 6px 10px;
    font-size: 0.8rem;
    border-radius: 6px;
    padding-right: 28px;
    background-size: 12px;
    background-position: right 8px center;
}*/

/* Compact dimensions section */
/*.modal .dimensions-section {
    border-radius: 8px;
    padding: 12px;
    margin-top: 4px;
}

.modal .dimensions-toggle-modern {
    margin-bottom: 10px;
}

.modal .toggle-slider {
    width: 40px;
    height: 20px;
}

.modal .toggle-slider::before {
    width: 16px;
    height: 16px;
    top: 2px;
    left: 2px;
}

.modal .toggle-switch:checked + .toggle-label .toggle-slider::before {
    transform: translateX(20px);
}

.modal .toggle-text {
    font-size: 0.85rem;
}

.modal .sliders-container {
    gap: 10px;
}

.modal .slider-header {
    margin-bottom: 4px;
}

.modal .slider-title {
    font-size: 0.75rem;
}

.modal .slider-value-modern {
    padding: 1px 6px;
    font-size: 0.65rem;
    min-width: 35px;
    border-radius: 12px;
}

.modal .range-modern {
    height: 3px;
    margin-bottom: 4px;
}

.modal .range-modern::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    border: 2px solid white;
}

.modal .range-modern::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 2px solid white;
}

.modal .range-labels {
    font-size: 0.65rem;
}*/

/* Two-column adjustments for modal */
/*.modal .tag-group-modern.two-columns .tag-items {
    column-count: 1;*/ /* Single column in modal for better readability */
/*}*/

/* Footer adjustments */
/*.modal .search-container-footer {
    padding: 12px 4px 0;
    margin-top: 8px;
}

.modal .search-container-footer .btn {
    padding: 10px 24px;
    font-size: 0.9rem;
}*/

/* Responsive adjustments for smaller modals */
/*@media (max-width: 768px) {
    .modal .tags-grid {
        grid-template-columns: 1fr;
    }
    
    .modal .tag-group-modern.funktion-wide {
        grid-column: span 1;
    }
    
    .modal .search-container-modern {
        padding: 8px 0;
        gap: 12px;
    }
    
    .modal .filter-section-modern {
        padding: 12px;
    }
}*/

/* Very compact mode for extra small modals */
/*.modal.modal-sm .search-container-modern,
.modal-sm .search-container-modern {
    gap: 8px;
}

.modal.modal-sm .tags-grid,
.modal-sm .tags-grid {
    grid-template-columns: 1fr;
    gap: 8px;
}

.modal.modal-sm .tag-group-modern,
.modal-sm .tag-group-modern {
    padding: 8px;
}

.modal.modal-sm .tag-label-modern,
.modal-sm .tag-label-modern {
    padding: 4px 8px;
    font-size: 0.75rem;
}

.modal.modal-sm .filter-section-modern,
.modal-sm .filter-section-modern {
    padding: 10px;
}*/

/* Scrollable content area */
/*.modal .search-container-modern {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

.modal .search-container-modern::-webkit-scrollbar {
    width: 6px;
}

.modal .search-container-modern::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.modal .search-container-modern::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.modal .search-container-modern::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}*/

/* Add to your site.css or create upload-modal.css */

/*.upload-modal-container {
    max-width: 90vw;
    max-height: 85vh;
    overflow-y: auto;
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin: 2vh auto;
    position: relative;
}

.modal-tag-selector {
    max-height: 60vh;
    overflow-y: auto;
}*/

/* Responsive adjustments */
/*@media (max-width: 1200px) {
    .upload-modal-container {
        max-width: 95vw;
        padding: 16px;
    }
    
    .modal-tag-selector {
        max-height: 50vh;
    }
}

@media (max-width: 768px) {
    .upload-modal-container {
        max-width: 98vw;
        max-height: 90vh;
        padding: 12px;
        margin: 1vh auto;
    }
    
    .modal-tag-selector {
        max-height: 45vh;
    }
}*/