/**
 * Mega Menu Admin Styles
 * Custom styling for the mega menu administration interface
 */

.mega-menu-admin {
    /* Base admin styles */
}

.mega-columns-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    min-height: 15rem;
}

.mega-column {
    background: rgb(55 65 81);
    border: 2px solid rgb(75 85 99);
    border-radius: 0.5rem;
    padding: 1rem;
    transition: all 0.3s ease;
    cursor: move;
}

.mega-column:hover {
    border-color: rgb(59 130 246);
}

.mega-column.sortable-chosen {
    background: rgb(30 41 59);
    border-color: rgb(59 130 246);
}

.mega-column.sortable-ghost {
    opacity: 0.5;
    background: rgb(71 85 105);
}

.mega-column.sortable-drag {
    background: rgb(30 41 59);
    transform: rotate(5deg);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.column-items {
    min-height: 5rem;
    border: 1px dashed rgb(107 114 128);
    border-radius: 0.375rem;
    padding: 0.5rem;
    background: rgb(75 85 99);
}

.column-items:empty::before {
    content: "Перетягніть елементи сюди";
    color: rgb(156 163 175);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4rem;
}

.menu-item {
    background: rgb(30 58 138);
    color: rgb(191 219 254);
    padding: 0.5rem;
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
    border: 1px solid rgb(29 78 216);
    cursor: move;
    transition: all 0.2s ease;
}

.menu-item:hover {
    background: rgb(37 99 235);
    transform: translateY(-1px);
}

.menu-item.sortable-chosen {
    background: rgb(37 99 235);
    transform: scale(1.05);
}

.menu-item.sortable-ghost {
    opacity: 0.5;
}

.custom-link-item {
    background: rgb(22 101 52);
    color: rgb(187 247 208);
    border-color: rgb(21 128 61);
}

.custom-link-item:hover {
    background: rgb(34 197 94);
}

.remove-btn {
    background: transparent;
    border: none;
    color: rgb(248 113 113);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
}

.remove-btn:hover {
    background: rgb(248 113 113);
    color: white;
}

/* Input styling improvements */
.mega-menu-admin input[type="text"] {
    background: white !important;
    color: black !important;
    border: 1px solid rgb(209 213 219) !important;
}

.mega-menu-admin input[type="text"]:focus {
    border-color: rgb(59 130 246) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.mega-menu-admin input[type="text"]::placeholder {
    color: rgb(107 114 128) !important;
}

/* Dark input variant */
.mega-menu-admin .dark-input {
    background: rgb(75 85 99) !important;
    color: white !important;
    border: 1px solid rgb(107 114 128) !important;
}

.mega-menu-admin .dark-input::placeholder {
    color: rgb(156 163 175) !important;
}

/* Promo block preview styling */
.promo-preview {
    background: linear-gradient(to right, black, rgb(17 24 39), black);
    max-height: 9rem;
}

.promo-preview img {
    width: 5rem;
    height: 5rem;
    object-fit: cover;
    border-radius: 0.5rem;
}

.promo-placeholder {
    width: 5rem;
    height: 5rem;
    background: rgb(31 41 55);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.promo-placeholder-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: white;
    border-radius: 0.25rem;
    opacity: 0.2;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .mega-columns-container {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .mega-column {
        padding: 0.75rem;
    }
}

/* Animation improvements */
.mega-column,
.menu-item {
    transform-origin: center;
}

@keyframes columnPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.mega-column.highlight {
    animation: columnPulse 0.6s ease-in-out;
}