/* --- Horizontal Menu Core Layout --- */
.horizontal-nav {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 15px 0;
    border-bottom: 2px solid var(--border-color, #ccc);
    background-color: var(--body-background, #f8f8f8);
    
    /* Change these lines */
    position: fixed; /* Was sticky */
    top: 80px;      /* Keeps it 80px from the top */
    left: 0;        /* Ensures it starts at the left edge */
    width: 100%;    /* Required for fixed elements to span the screen */
    z-index: 1001;  /* Increased to stay above other elements */
}

.nav-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 10px; /* Reduced from 20px to 10px */
    border-right: 1px solid var(--border-color, #ccc);
}

.nav-group-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; 
    align-items: center;
    justify-content: center; /* Centers icons if they wrap */
    gap: 15px;
}

.horizontal-nav .nav-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    white-space: nowrap;
    padding: 5px 4px;
    transition: all 0.2s ease;
}

/* --- THE THREE NAVIGATION STATES (Theme-Aware) --- */

/* 1. Available (Black in light, White in dark) */
.horizontal-nav .nav-item.has-content {
    color: var(--main-text-color) !important; 
    font-weight: 500;
}

/* 2. Active (Bold Blue) */
.horizontal-nav .nav-item.has-content.active {
    font-weight: 900 !important;
    color: #007bff !important; 
    border-bottom: 3px solid #007bff;
    padding-bottom: 2px;
    text-shadow: 0 0 1px rgba(0,123,255,0.5);
}

/* 3. Empty (Grey) */
.horizontal-nav .nav-item.no-content {
    color: var(--subtle-text-color) !important;
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none; 
}

/* --- TOOLTIP BOX --- */
.nav-item .tooltip-box {
    display: none;
    position: absolute;
    top: 100%; /* Changed from 110% to remove gap */
    left: 0;      
    width: 240px;
    background-color: #333;
    color: #fff;
    padding: 12px;
    border-radius: 6px;
    z-index: 9999; 
    flex-direction: column;
    white-space: normal;
    font-size: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.5);
    pointer-events: auto; /* Required to click 'Tell me more' */
}

/* Show tooltip on hover of nav-item OR tooltip itself */
.nav-item:hover .tooltip-box,
.nav-item .tooltip-box:hover { 
    display: flex; 
}

.tooltip-box .more-link {
    display: block;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #555;
    color: #00d1b2 !important;
    text-decoration: underline;
    font-weight: bold;
    cursor: pointer;
}

/* --- SIDE DRAWER (HELP PANEL) --- */
.side-drawer {
    position: fixed;
    top: 170px; /* Starts exactly where the menu ends */
    right: -500px; 
    width: 450px;
    height: calc(100vh - 180px);
    background-color: var(--card-background, #fff);
    color: var(--main-text-color, #333);
    box-shadow: -5px 0 15px rgba(0,0,0,0.2);
    z-index: 10000; 
    transition: right 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-left: 1px solid var(--border-color, #ccc);
}
/* --- DRAWER OVERLAY (The fade/dim effect) --- */
#drawerOverlay {
    position: fixed;
    top: 170px !important;            /* Force it to start below the menu */
    left: 0;
    width: 100%;
    height: calc(100vh - 180px) !important; /* Only dim the content area */
    background-color: rgba(0, 0, 0, 0.5);   /* The darkness level */
    z-index: 9999;                    /* Sits behind the drawer (10000) */
    display: none;                    /* Hidden by default, shown via JS */
}