/* Global Transitions */
body {
    transition: background-color 0.7s ease-in-out;
    background-color: #FFFFFF;
}

/* Layout Structure */
#main-wrapper {
    margin-left: 200px; /* Width of the fixed sidebar */
    margin-top: 8rem;
    padding: 0;
}

/* --- 3. Fixed Left Navigation Menu --- */
.ui.left.fixed.vertical.menu {
    width: 200px;
    margin-top:8rem;
    border-right: none;
    background: transparent;
    padding-top: 40px;
}

.ui.left.fixed.vertical.menu .item {
    color: rgba(0,0,0,0.4);
    font-weight: 700;
    transition: color 0.3s ease;
    padding-left: 1.5em;
}

.ui.left.fixed.vertical.menu .item.active {
    color: rgba(0,0,0,1);
    background: transparent !important; /* No background block, just text color change */
    padding-left: 1.5em; /* Subtle Indent on active */
    text-decoration:underline;
}

/* Section Styling */
.scroll-section {
    padding: 2rem 2rem;
    min-height: 100vh; /* Full viewport height min */
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

/* Sticky magic */
.section-intro-sticky {
    position: -webkit-sticky; /* Safari support */
    position: sticky;
    top: 50px; /* How far from top to stick */
    z-index: 10;
}

/* Typography for the sticky headers */
.section-intro-sticky h1.header {
    font-size: 2em;
    line-height: 1;
    margin-bottom: 0.5em;
}

.section-intro-sticky p {
    font-size: 1.2em;
    opacity: 0.6;
    max-width: 250px;
}

/* Mobile Responsiveness */
@media only screen and (max-width: 768px) {
    #main-wrapper { margin-left: 0; }
    .ui.left.fixed.vertical.menu { display: none; } /* Hide Side Nav on Mobile */
    .section-intro-sticky { position: relative; top: 0; margin-bottom: 30px;} /* Unstick on mobile */
    .section-intro-sticky h1.header { font-size: 2.5em; }
    .scroll-section { padding: 40px 20px; }
}

.chartBox {
    min-height: 18rem;
}

.bad { color: #b91c1c; font-weight: 700; }
.good { color: #15803d; font-weight: 700; }
.muted { color: #666; }