/* =========================================
   1. GLOBAL LAYOUT & RESET
   ========================================= */
   * {
    box-sizing: border-box;
}

h3 {
    margin: 1rem 0rem;
    padding: 0;
    user-select: none;
}

body {
    display: flex;          /* Flex Column for Header/Body/Footer */
    flex-direction: column;
    height: 100vh;
    margin: 0;
    overflow: hidden;       /* Prevent double scrollbars */
    font-family: sans-serif;
}

.main-container {
    display: flex;          /* Row for Sidebar + Content */
    flex: 1;                /* Grow to fill space between top and footer */
    overflow: hidden;
    position: relative;     /* Needed for absolute positioning context */
}

/* =========================================
   2. SIDEBAR (Zero Width Logic)
   ========================================= */
   .sidebar {
    width: 300px;
    background-color: #f4f4f4;
    border-right: 1px solid #ddd;
    transition: width 0.3s ease; /* Smooth slide */
    overflow: hidden; /* Ensures content disappears when width is 0 */
    white-space: nowrap;
    
    /* Optional: If you want it to float OVER content on mobile */
    /* position: relative; */
    
    /* --- THE FIX START --- */
    overflow-y: auto;       /* YES: Scroll up and down if list is long */
    overflow-x: hidden;     /* NO: Hide sideways content (clipping) */
    /* --- THE FIX END --- */
}

/* When collapsed, it disappears completely */
.sidebar.collapsed {
    width: 0px; 
    border-right: none; /* Hide the border so it's truly invisible */
}

/* =========================================
   THE NEW EXTERNAL BUTTON
   ========================================= */
.content {
    position: relative; /* Creates a reference point for the button */
}

.external-toggle-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 50; /* Ensure it floats ON TOP of the iframe */
    
    /* Visual Styling */
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white */
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: left 0.3s ease; /* Animate with sidebar if needed */


}

/* Optional: Rotate button when sidebar is open vs closed */
.sidebar:not(.collapsed) + .content .external-toggle-btn {
    background-color: #f4f4f4; /* Match sidebar color when open */
}

@media (max-width: 768px) {
    .sidebar {
        position: absolute; /* Float on top */
        height: 100%;       /* Full height */
        z-index: 40;        /* Below the button (50) but above content */
        box-shadow: 2px 0 10px rgba(0,0,0,0.2);
    }

    /* When the sidebar opens on mobile, we move the button 
       to the right so it stays next to the opening panel */
    .sidebar:not(.collapsed) + .content .external-toggle-btn {
        left: 260px; /* 250px width + 10px padding */
        transition: left 0.3s ease;
    }
}

/* 1. Ensure the button spins smoothly */
.external-toggle-btn {
    /* ... your existing button styles ... */
    transition: transform 0.3s ease; /* Adds the spin animation */
}

.external-toggle-btn.rotated {
    transform: rotate(90deg);
}



/* =========================================
   3. SIDEBAR LIST STYLES (The "No-Wrap" Fix)
   ========================================= */

/* 1. Base List Setup - Use 'outside' to prevent wrapping */
.sidebar ul {
    list-style-position: outside; 
    padding: 0;
    margin: 0;
    /* We add padding here to push the bullets back onto the screen */
    padding-left: 25px; 
}

/* 2. DEFAULT: Style for standard links (Solid Dot) */
.sidebar li {
    list-style-type: circle; 
    color: #999;
    border-bottom: 1px solid #eee;
    
    user-select: none;
    -webkit-user-select: none;
}

/* 3. CATEGORIES: Style for items containing <details> (Hollow Circle) */
.sidebar li:has(details) {
    list-style-type: disc;
    color: #333;
}

.sidebar li:has(details[open]) {
    list-style-type: none; 
}

/* 4. Text Alignment - Ensuring everything stays on one line */
.sidebar li a, 
.sidebar li summary {
    display: block;        /* Changed to block for better clipping */
    width: 100%;
    padding: 0.8rem 0;
    margin-left: -5px;     /* Pulls text slightly closer to the 'outside' bullet */
    
    text-decoration: none;
    color: #333;
    cursor: pointer;
    
    /* These three lines prevent wrapping and clip text */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

/* 5. Sub-items (Nested Links) */
.sub-list {
    list-style-type: none !important; 
    padding-left: 0px !important;    /* Reset since the parent already has padding */
    margin-left: -10px;              /* Moves sub-text slightly left */
}

.sub-list li {
    list-style-type: none;           
    border-bottom: none;              
}

.sub-list li a {
    padding: 0.5rem 0;
    padding-left: 15px;              /* Indents the text of sub-items */
    font-size: 0.9rem;
    color: #666;
}

/* 6. Clean up: Hide the default browser triangle */
details summary::-webkit-details-marker { display: none; }
details summary { list-style: none; outline: none; }



/* Update these specific properties in your existing style */
.sidebar li a {
    display: flex;             /* Keeps dot and text aligned */
    align-items: flex-start;   /* Aligns dot with the first line of text */
    
    /* 1. Allow wrapping */
    white-space: normal;       /* Overrides the 'nowrap' we set earlier */
    word-break: break-word;    /* Breaks long words if they hit the edge */
    
    /* 2. Remove the clipping */
    overflow: visible;         
    text-overflow: clip;       /* Removes the "..." dots */
    
    /* 3. Adjust width */
    width: 100%;               
    line-height: 1.4;          /* Adds breathing room between wrapped lines */
    padding: 0.8rem 0.5rem;
}

/* Ensure the bullet point stays at the top of a multi-line link */
.sidebar li {
    list-style-position: outside; 
    /* vertical-align is handled by flex-start above */
}




/* =========================================
   5. MAIN CONTENT AREA (The Iframes)
   ========================================= */
.content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background: white;
}

.window {
    border: none;
    width: 100%;
    flex-grow: 1;
}

/* =========================================
   6. FOOTER (Bottom Panel)
   ========================================= */
.bottom-panel {
    height: 60px;
    background-color: #f4f4f4;
    border-top: 1px solid #ccc;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9rem;
    color: #555;
    z-index: 30;
}

.bottom-panel a {
    margin-left: 15px;
    text-decoration: none;
    color: #0066cc;
    font-weight: bold;
}

.bottom-panel a:hover {
    text-decoration: underline;
    color: #003366;
}