:root {
            --sidebar-width: 280px;
            --primary-orange: #f97316; /* Clean, modern orange */
            --orange-hover: #ea580c;
            --sidebar-bg: #ffffff;
            --text-dark: #1f2937;
            --text-muted: #6b7280;
            --bg-main: #fcfcfc;
            --transition-speed: 0.3s;
        }

        * { margin: 0; padding: 0; box-sizing: border-box;  font-family: 'Cinzel',sans-serif; }

        body {
            display: flex;
            background: var(--bg-main);
            color: var(--text-dark);
            overflow-x: hidden;
            min-height: 100vh;
        }

        /* --- Sidebar --- */
        aside {
            width: var(--sidebar-width);
            height: 100vh;
            background: var(--sidebar-bg);
            color: var(--text-dark);
            position: fixed;
            left: 0;
            transition: transform var(--transition-speed) ease;
            z-index: 1000;
            padding: 1rem;
            display: flex;
            flex-direction: column;
            border-right: 1px solid #e5e7eb;
        }

        /* Class to hide sidebar */
        aside.closed {
            transform: translateX(-100%);
        }

        .sidebar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid #f3f4f6;
        }

        .brand-logo {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--primary-orange);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .close-btn {
            background: none;
            border: none;
            color: var(--text-muted);
            font-size: 1.75rem;
            cursor: pointer;
            line-height: 1;
        }
        .close-btn:hover { color: var(--primary-orange); }

        /* --- Main Navigation --- */
        nav { flex-grow: 1; overflow-y: auto; }
        nav ul { list-style: none; }
        
        .nav-item { margin: 0.25rem 0; }

        .nav-link {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.75rem 1rem;
            color: var(--text-dark);
            text-decoration: none;
            border-radius: 8px;
            transition: 0.2s;
            font-weight: 500;
            cursor: pointer;
        }

        .nav-link:hover, .nav-link.active {
            background-color: #fff7ed;
            color: var(--primary-orange);
        }

        /* Dropdown Chevron */
        .chevron {
            font-size: 0.8rem;
            transition: transform 0.3s;
            color: var(--text-muted);
        }
        .active-dropdown .chevron {
            transform: rotate(180deg);
            color: var(--primary-orange);
        }

        /* --- Dropdown Menus --- */
        .dropdown-menu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
            background: #fafafa;
            border-radius: 8px;
            margin-top: 2px;
        }

        /* Opened Dropdown state */
        .active-dropdown + .dropdown-menu {
            max-height: 1000px; /* Set a max height for animation */
        }

        .dropdown-menu li a {
            padding: 0.6rem 1rem 0.6rem 2.5rem; /* Indented text */
            font-size: 0.95rem;
            color: var(--text-muted);
        }
        .dropdown-menu li a:hover {
            color: var(--primary-orange);
            background: #fff7ed;
        }

        /* --- Sidebar Footer (e.g., Logout) --- */
        .sidebar-footer {
            margin-top: auto;
            border-top: 1px solid #f3f4f6;
            padding-top: 1rem;
        }

    .sidebar-footer a{
    font-size: 1rem;
    font-weight: 700;
    color: #f97316;
    text-decoration: none;
    transition: color 0.3s ease;
    word-break: break-all;
        }

         header{  
    background: rgba(255, 255, 255, 0.7); /* White with 70% transparency */
    backdrop-filter: blur(12px);         /* This creates the frosted glass look */
    -webkit-backdrop-filter: blur(12px); /* Safari support */
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb; 
    position: sticky; /* Keeps it at the top of the main area */
    top: 0;
    z-index: 100;
    display: none; 
    transition: opacity 0.3s ease;
    width: 100vw;
    max-width:100%;
    
  }
/* Logo Styling */
.header-logo a {
    font-weight: 900;
    font-size: 1.2rem;
    color: #000000;
    text-decoration: none;
    letter-spacing: -0.5px;
}

/* Right Side Icons */
.header-links {
    display: flex;
    gap: 15px;
}

.header-links a {
    color: #000000; /* Subtle grey */
    font-size: 1.3rem;
    transition: color 0.2s;
    text-decoration: none;
}
.header-links a:hover {
    color: #f97316; /* Turns orange on hover */
}
.menu-trigger:hover {
    transform: scale(1.05);
    background: #ea580c;
}
  main.expanded header {
    display: flex;
    align-items: center;
    opacity: 1;
}
.menu-trigger {
    background: #f97316; /* Your brand orange */
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: transform 0.2s;
}
        .menu-trigger:hover { background: var(--orange-hover); }

        main.expanded .menu-trigger { display: inline-flex; align-items: center; gap: 8px; }