/* Portal Sidebar Styles for Nebula Wrapper */
/* These styles override Nebula's default sidebar styling */

/* Sidebar Variables (matching portal) */
:root {
    --sidebar-w: 260px;
    --nav-bg: #0e0e10;
    --border-c: rgba(255, 255, 255, 0.08);
    --ease: cubic-bezier(0.25, 1, 0.5, 1);
}

/* Override Nebula Sidebar Container */
#sidebar.sidebar,
.sidebar {
    width: var(--sidebar-w) !important;
    background: var(--nav-bg) !important;
    border-right: 1px solid var(--border-c) !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Sidebar Content Container */
.sidebarContentContainer {
    padding: 1.5rem !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Logo/Header */
.customlogo {
    font-weight: 700;
    font-size: 1.4rem;
    margin-bottom: 2rem;
    cursor: pointer;
}

/* Nav Labels (Management, Billing, etc.) */
.sidebarCategory::before {
    content: attr(data-label);
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #666;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    display: block;
}

/* Add labels via JavaScript or directly in HTML */
#sidebarCategoryServer::before {
    content: "Server Management";
}

#sidebarCategoryGeneral::before {
    content: "General";
}

/* Sidebar Buttons (nav-item style) - Override Nebula */
.sidebarButton,
button.sidebarButton {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    color: #888 !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    transition: all 0.2s var(--ease) !important;
    position: relative !important;
    background: transparent !important;
    border: none !important;
    width: 100% !important;
    height: auto !important;
    cursor: pointer !important;
    margin-bottom: 4px !important;
    left: 0 !important;
}

.sidebarButton:hover,
button.sidebarButton:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
}

.sidebarButton.sidebarButtonSelected,
button.sidebarButton.sidebarButtonSelected {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
}

/* Active indicator (white bar on left) - Override Nebula */
.sidebarButton.sidebarButtonSelected::before,
button.sidebarButton.sidebarButtonSelected::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 10% !important;
    height: 80% !important;
    width: 3px !important;
    background: #fff !important;
    border-radius: 0 4px 4px 0 !important;
}

/* Icon styling */
.sidebarIcon {
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    color: inherit !important;
}

/* Wide sidebar text */
.wideSidebarSpan {
    flex: 1 !important;
    text-align: left !important;
    color: inherit !important;
}

/* Spacer */
.sidebarSpacer {
    height: 1.5rem !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Logout button at bottom */
#sidebarMainLogout {
    margin-top: auto;
    border-top: 1px solid var(--border-c);
    padding-top: 1rem;
}

/* Tooltip (hide in favor of labels) */
.tooltip {
    display: none;
}

/* Custom icon images */
.customicon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* Badge count (for cart) */
.badge-count {
    background: #ef4444;
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: auto;
}

/* Adjust main content to account for portal sidebar */
body,
body.bg-neutral-800 {
    margin-left: 0 !important;
    padding-left: var(--sidebar-w) !important;
}

/* Override Nebula's body background */
body,
body.bg-neutral-800 {
    background-color: #050507 !important;
}

.sidebar-placeholder-animated {
    background: rgba(255, 255, 255, 0.05);
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 0.8;
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .sidebarContentContainer {
        transform: translateX(-100%);
        transition: transform 0.3s var(--ease);
    }

    .sidebarContentContainer.open {
        transform: translateX(0);
    }

    body {
        margin-left: 0;
    }
}

/* Ensure proper stacking */
.sidebarContentContainer {
    overflow-y: auto;
    overflow-x: hidden;
}

/* Scrollbar styling for sidebar */
.sidebarContentContainer::-webkit-scrollbar {
    width: 6px;
}

.sidebarContentContainer::-webkit-scrollbar-track {
    background: transparent;
}

.sidebarContentContainer::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.sidebarContentContainer::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}