body {
    background-color: #111827; /* Dark blue background */
}

/* Custom Alert Styles */
#custom-alert-container {
    pointer-events: none;
    z-index: 1000; /* Ensure high z-index */
    position: fixed; /* Make sure it's fixed */
    top: 1rem; /* 4px from top */
    right: 1rem; /* 4px from right */
}

#custom-alert-container > div {
    pointer-events: auto;
    opacity: 1;
    transform: translateX(0);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Add stronger shadow for better visibility */
}

#custom-alert-container > div.opacity-0 {
    opacity: 0;
}

#custom-alert-container > div.translate-x-full {
    transform: translateX(100%);
}

/* Deploy page specific styles */
.deploy-page {
    background-color: #0f172a; /* Dark blue background */
}

/* Transition effects for hostname refresh */
#hostname {
    transition: background-color 0.3s ease;
}

/* Disk item hover effects */
.disk-item {
    transition: all 0.2s ease-in-out;
}

/* Server location selection styles */
.location-option {
    transition: all 0.2s ease;
}

.location-option:hover {
    transform: translateY(-2px);
}

/* Mobile menu styles */
#mobile-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%; /* Position it right below the header */
    z-index: 50;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

#mobile-menu.hidden {
    display: none;
}

@media (min-width: 768px) {
    #mobile-menu {
        display: none;
    }
}