:root {
    /* Baseline M3 Light Palette */
    --md-sys-color-primary: #6750A4;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #EADDFF;
    --md-sys-color-on-primary-container: #21005D;
    
    --md-sys-color-secondary-container: #E8DEF8;
    --md-sys-color-on-secondary-container: #1D192B;
    
    /* Surface levels */
    --md-sys-color-surface: #fef7ff;
    --md-sys-color-surface-container-low: #f7f2fa;
    --md-sys-color-surface-container: #f3edf7;
    --md-sys-color-surface-container-high: #ece6f0;
    --md-sys-color-surface-variant: #E7E0EC;

    --md-sys-color-on-surface: #1d1b20;
    --md-sys-color-on-surface-variant: #49454F;
    --md-sys-color-outline: #79747e;
    --md-sys-color-outline-variant: #CAC4D0;
    
    /* Error colors for logout */
    --md-sys-color-error: #B3261E;
    --md-sys-color-error-container: #F9DEDC;
    --md-sys-color-on-error-container: #410E0B;
    
    /* Elevation shadows */
    --md-sys-elevation-1: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15);
    --md-sys-elevation-2: 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15);
}

/* Container for the whole app */
.m3-layout-wrapper {
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: var(--md-sys-color-surface);
}

/* The Drawer */
.m3-drawer {
    width: 360px;
    flex-shrink: 0;
    height: 100%;
    background-color: var(--md-sys-color-surface-container);
    border-radius: 0 16px 16px 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    box-shadow: var(--md-sys-elevation-1);
    overflow: hidden;
}

.m3-drawer.closed {
    transform: translateX(-100%);
    margin-left: -360px;
}

/* Navigation Container */
.m3-drawer-nav {
    flex: 1;
    overflow-y: auto;
    padding: 24px 12px 12px 12px;
    display: flex;
    flex-direction: column;
    min-width: 0; /* Prevents flex items from overflowing */
    background-color: var(--md-sys-color-surface);
    overflow: hidden; /* Prevents main container from scrolling */
}

.m3-drawer-nav::-webkit-scrollbar {
    width: 6px;
}

.m3-drawer-nav::-webkit-scrollbar-track {
    background: transparent;
}

.m3-drawer-nav::-webkit-scrollbar-thumb {
    background-color: var(--md-sys-color-outline-variant);
    border-radius: 20px;
}

/* GradStar Header */
.m3-drawer-nav h2 {
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--md-sys-color-primary);
    margin: 0 0 24px 16px;
    padding: 0;
}

/* Navigation Item Styling */
.m3-drawer-item {
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 24px 0 16px;
    text-decoration: none;
    color: var(--md-sys-color-on-surface-variant);
    border-radius: 28px;
    margin-bottom: 4px;
    border: none;
    background: none;
    width: 100%;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.1px;
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* Also style the legacy mdl-navigation__link class */
.mdl-navigation__link {
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 24px 0 16px;
    text-decoration: none;
    color: var(--md-sys-color-on-surface-variant);
    border-radius: 28px;
    margin-bottom: 4px;
    border: none;
    background: none;
    width: 100%;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.1px;
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* Ripple effect container */
.m3-drawer-item::before,
.mdl-navigation__link::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(103, 80, 164, 0.12);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.m3-drawer-item:active::before,
.mdl-navigation__link:active::before {
    width: 300px;
    height: 300px;
}

.m3-drawer-item:hover,
.mdl-navigation__link:hover {
    background-color: rgba(103, 80, 164, 0.08);
}

.m3-drawer-item.active {
    background-color: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.m3-drawer-item.active .material-symbols-outlined {
    color: var(--md-sys-color-on-secondary-container);
}

/* Material Symbols Icons */
.m3-drawer-item .material-symbols-outlined,
.mdl-navigation__link .material-symbols-outlined {
    width: 24px;
    height: 24px;
    font-size: 24px;
    flex-shrink: 0;
    color: var(--md-sys-color-on-surface-variant);
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.m3-drawer-item:hover .material-symbols-outlined,
.mdl-navigation__link:hover .material-symbols-outlined {
    color: var(--md-sys-color-on-surface);
}

/* Label styling */
.m3-label {
    margin-left: 12px;
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: 0.1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
}



.Logout_btn {

       height: 56px;
    display: flex;
    align-items: center;
    padding: 0 24px 0 16px;
    text-decoration: none;
    color: var(--md-sys-color-on-surface-variant);
    border-radius: 28px;
    margin-bottom: 4px;
    border: none;
    background: none;
    width: 100%;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.1px;
    transition: background-color red;
    position: relative;
    overflow: hidden;
}

/* Divider */
.m3-drawer-divider {
    height: 1px;
    background-color: var(--md-sys-color-outline-variant);
    margin: 12px 16px;
    border: none;
}

/* Also style the hr element */
.m3-drawer-nav hr {
    height: 1px;
    background-color: var(--md-sys-color-outline-variant);
    margin: 12px 16px;
    border: none;
}

/* Section Subheaders (Management, etc.) */
.m3-drawer-subheader {
    padding: 16px 28px 8px 28px;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Logout Button - Special styling */
.logout-btn {
    margin-top: auto; /* Push to bottom */
    color: var(--md-sys-color-on-surface-variant);
}

.logout-btn:hover {
    background-color: rgba(179, 38, 30, 0.08);
    color: var(--md-sys-color-error);
}

.logout-btn:hover .material-symbols-outlined {
    color: var(--md-sys-color-error);
}

/* The form wrapper for logout */
.m3-drawer-nav form {
    width: 100%;
}

/* The Main Content */
.m3-main-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background-color: var(--md-sys-color-surface);
    overflow: hidden;
}

/* Top App Bar */
.m3-top-app-bar {
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 16px;
}

/* FIXED: Scrollable content area */
.m3-content-scrollable {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    background-color: var(--md-sys-color-surface);
}

/* If there's an old .m3-content class, hide it */
.m3-content {
    display: none;
}