/* Custom styles for the new layout */
html, body {
    height: 100%;
    overflow: hidden; /* Prevent scrolling on the body */
}
body {
    font-family: 'Inter', sans-serif;
    background-color: #030712; /* Even darker, more modern bg */
}
.gradient-text {
    background: linear-gradient(to right, #60a5fa, #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* Custom scrollbar for the sidebar */
.sidebar-nav::-webkit-scrollbar {
    width: 6px;
}
.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar-nav::-webkit-scrollbar-thumb {
    background-color: #374151; /* gray-700 */
    border-radius: 20px;
}
/* Style for the active navigation link */
.nav-link.active {
    background-color: #4f46e5; /* indigo-600 */
    color: #ffffff;
    font-weight: 600;
}
/* Initial state for the welcome screen */
#welcome-screen {
    transition: opacity 0.5s ease-in-out;
}

/* --- New styles for togglable sidebar --- */
#sidebar {
    /* Start mostly hidden, leaving 24px visible as a handle */
    transform: translateX(calc(-100% + 24px));
    transition: transform 300ms ease-in-out;
}
#sidebar:hover {
    /* On hover, slide fully into view */
    transform: translateX(0);
}
/* Style for the handle icon */
#sidebar-handle {
    transition: opacity 150ms ease-in-out;
}
body:not(.touch-device) #sidebar:hover #sidebar-handle {
    /* Hide the handle icon when the panel is open */
    opacity: 0;
}
/* --- JS-controlled state for mobile --- */
#sidebar.is-open {
    transform: translateX(0);
}
#sidebar.is-open #sidebar-handle {
    opacity: 0;
}

/* --- Loading Spinner --- */
#loading-spinner {
    display: none; /* Hidden by default */
}
#loading-spinner.is-loading {
    display: flex; /* Shown when the .is-loading class is added */
}
.loader {
    border: 5px solid #374151; /* gray-700 */
    border-top: 5px solid #60a5fa; /* blue-400 */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    #sidebar {
        /* On smaller screens, the sidebar is completely hidden off-screen */
        transform: translateX(-100%);
    }
    #sidebar:hover {
        /* Disable hover effect on mobile */
        transform: translateX(-100%);
    }
    #sidebar.is-open {
        /* When opened by JS, it slides fully into view */
        transform: translateX(0);
    }
    #main-content {
        /* Main content takes up the full width */
        margin-left: 0;
    }
    #sidebar-handle {
        /* Make the handle slightly larger and more visible for touch */
        width: 32px;
        right: -32px; /* Position it outside the hidden sidebar */
        background-color: rgba(31, 41, 55, 0.7); /* gray-800 with more opacity */
    }
    #sidebar-open-icon {
        /* Make the icon slightly larger */
        width: 20px;
        height: 20px;
    }
    #sidebar-close-button {
        display: block; /* Show the close button on mobile */
    }
}

/* Hide close button on desktop */
@media (min-width: 769px) {
    #sidebar-close-button {
        display: none;
    }
}