/* ============================================================
       ROOT & TOKENS
       ============================================================ */
 :root {
   --bg: #0c0c0f;
   --surface: #131317;
   --surface-2: #1a1a20;
   --glass: rgba(255, 255, 255, 0.04);
   --glass-border: rgba(255, 255, 255, 0.07);
   --glass-hover: rgba(255, 255, 255, 0.08);
   --text: #e8e8ec;
   --text-muted: rgba(232, 232, 236, 0.45);
   --text-dim: rgba(232, 232, 236, 0.25);
   --accent: #5b8af7;
   --accent-glow: rgba(91, 138, 247, 0.18);
   --accent-subtle: rgba(91, 138, 247, 0.10);
   --danger: #f75b5b;
   --radius-xs: 4px;
   --radius-sm: 8px;
   --radius-md: 12px;
   --radius-lg: 18px;
   --font-ui: 'DM Sans', sans-serif;
   --font-brand: 'Syne', sans-serif;
   --transition: 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
   --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
   --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.6);
   --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.7);
 }

 /* Component-level Reset */
 #nav-bar,
 #mobile-sidebar,
 #mobile-toggle {
   box-sizing: border-box;
 }

 #nav-bar *,
 #mobile-sidebar *,
 #mobile-toggle * {
   box-sizing: border-box;
 }

 /* Accessibility Focus */
 a:focus-visible,
 button:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 2px;
   border-radius: var(--radius-xs);
 }

 /* ============================================================
       ANIMATIONS
       ============================================================ */
 @keyframes navEntrance {
   from {
     opacity: 0;
     transform: translateY(-10px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 @keyframes shine {
   0% {
     left: -100%;
     opacity: 0;
   }

   50% {
     opacity: 0.1;
   }

   100% {
     left: 100%;
     opacity: 0;
   }
 }

 /* ============================================================
       PC MENU — NAV BAR
       ============================================================ */
 #nav-bar {
   position: relative;
   z-index: 5000;
   /* Ensure navbar and dropdowns sit above page content */
   display: flex;
   align-items: center;
   gap: 2px;
   padding: 4px;
   background: var(--surface);
   border: 1px solid var(--glass-border);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.04);
   list-style: none;
   height: 46px;
   overflow: visible;
   font-family: var(--font-ui);
   margin: 0 auto 20px auto;
   width: 100%;
   max-width: 100%;

   /* Entrance Animation for container */
   animation: navEntrance 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
 }

 /* Home logo slot */
 #nav-bar .nav-home {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   border-radius: var(--radius-sm);
   flex-shrink: 0;
   position: relative;
   z-index: 1;
 }

 #nav-bar .nav-home a {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   border-radius: var(--radius-sm);
   transition: background var(--transition);
   text-decoration: none;
   color: var(--text);
 }

 #nav-bar .nav-home a:hover {
   background: var(--glass-hover);
 }

 #nav-bar .nav-home img {
   width: 20px;
   height: 20px;
   border-radius: 4px;
   object-fit: contain;
 }

 /* Divider after home */
 .nav-divider {
   width: 1px;
   height: 20px;
   background: var(--glass-border);
   margin: 0 2px;
   flex-shrink: 0;
 }

 /* Nav Items - Staggered Animation */
 #nav-bar .nav-item {
   position: relative;
   display: flex;
   align-items: center;
   z-index: 1;
   animation: navEntrance 0.5s ease-out backwards;
 }

 /* Stagger delays for a premium feel */
 #nav-bar .nav-item:nth-child(1) {
   animation-delay: 0.05s;
 }

 #nav-bar .nav-item:nth-child(3) {
   animation-delay: 0.1s;
 }

 #nav-bar .nav-item:nth-child(4) {
   animation-delay: 0.15s;
 }

 #nav-bar .nav-item:nth-child(5) {
   animation-delay: 0.2s;
 }

 #nav-bar .nav-item:nth-child(6) {
   animation-delay: 0.25s;
 }

 #nav-bar .nav-item:nth-child(7) {
   animation-delay: 0.3s;
 }

 #nav-bar .nav-item:nth-child(8) {
   animation-delay: 0.35s;
 }

 #nav-bar .nav-link {
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 0 12px;
   height: 36px;
   border-radius: var(--radius-sm);
   text-decoration: none;
   font-size: 13.5px;
   font-weight: 400;
   color: var(--text-muted);
   white-space: nowrap;
   letter-spacing: -0.01em;
   transition: color var(--transition), background var(--transition);
   position: relative;
   cursor: pointer;
   border: none;
   background: transparent;
   overflow: hidden;
   /* For shine effect */
 }

 /* SHINE EFFECT ON HOVER */
 #nav-bar .nav-link::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 50%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
   transform: skewX(-20deg);
   pointer-events: none;
   transition: none;
 }

 #nav-bar .nav-link:hover::before {
   animation: shine 0.7s ease;
 }

 #nav-bar .nav-link:hover {
   color: var(--text);
   background: var(--glass);
 }

 /* Icon styling in top nav */
 #nav-bar .nav-link svg.icon {
   opacity: 0.7;
   transition: opacity var(--transition), transform var(--transition);
 }

 #nav-bar .nav-link:hover svg.icon {
   opacity: 1;
   transform: scale(1.1);
   /* Subtle zoom on hover */
 }

 /* Active State */
 #nav-bar .nav-item.active .nav-link {
   color: var(--text);
   font-weight: 500;
   background: var(--glass-hover);
 }

 #nav-bar .nav-item.active .nav-link svg.icon {
   opacity: 1;
   color: var(--accent);
 }

 /* Active accent dot */
 #nav-bar .nav-item.active .nav-link::after {
   content: '';
   position: absolute;
   bottom: 5px;
   left: 50%;
   transform: translateX(-50%);
   width: 3px;
   height: 3px;
   border-radius: 50%;
   background: var(--accent);
   box-shadow: 0 0 6px var(--accent);
 }

 /* Dropdown caret */
 .nav-caret {
   display: inline-flex;
   opacity: 0.35;
   transition: transform var(--transition), opacity var(--transition);
   margin-left: 2px;
 }

 .nav-caret svg {
   width: 12px;
   height: 12px;
   stroke: currentColor;
   fill: none;
   stroke-width: 2.5;
   stroke-linecap: round;
   stroke-linejoin: round;
 }

 #nav-bar .nav-item:hover .nav-caret,
 #nav-bar .nav-item:focus-within .nav-caret {
   transform: rotate(180deg);
   opacity: 0.7;
 }

 /* Spacer */
 #nav-bar .nav-spacer {
   flex: 1;
 }

 /* Avatar / user chip at end */
 .nav-user-chip {
   display: flex;
   align-items: center;
   gap: 7px;
   padding: 4px 10px 4px 6px;
   border-radius: var(--radius-sm);
   background: var(--glass);
   border: 1px solid var(--glass-border);
   cursor: pointer;
   transition: background var(--transition), border-color var(--transition);
   text-decoration: none;
   position: relative;
   z-index: 1;
   margin-left: 4px;
   height: auto;
 }

 .nav-user-chip:hover {
   background: var(--glass-hover);
   border-color: rgba(255, 255, 255, 0.12);
 }

 .nav-user-avatar {
   width: 22px;
   height: 22px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--accent), #8b5cf6);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 10px;
   font-weight: 700;
   color: #fff;
   font-family: var(--font-brand);
   flex-shrink: 0;
   overflow: hidden;
 }

 .nav-user-name {
   font-size: 12.5px;
   font-weight: 500;
   color: var(--text);
   letter-spacing: -0.01em;
 }

 /* ============================================================
       DROPDOWN PANELS
       ============================================================ */
 .nav-dropdown {
   position: absolute;
   top: calc(100% + 2px);
   left: 0;
   min-width: 180px;
   background: var(--surface);
   border: 1px solid var(--glass-border);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.05);
   padding: 6px;
   list-style: none;
   opacity: 0;
   transform: translateY(-6px) scale(0.98);
   pointer-events: none;
   transition: opacity 0.18s ease, transform 0.18s ease;
   z-index: 9000;
 }

 .nav-dropdown.dropdown-right {
   left: auto;
   right: 0;
   min-width: 160px;
 }

 #nav-bar .nav-item:hover .nav-dropdown,
 #nav-bar .nav-item:focus-within .nav-dropdown {
   opacity: 1;
   transform: translateY(0) scale(1);
   pointer-events: all;
 }

 .nav-dropdown::before {
   content: '';
   position: absolute;
   top: -8px;
   left: 0;
   right: 0;
   height: 8px;
 }

 .nav-dropdown .dd-item {
   position: relative;
 }

 .nav-dropdown .dd-link {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 8px 10px;
   border-radius: var(--radius-sm);
   font-size: 13px;
   font-weight: 400;
   color: var(--text-muted);
   text-decoration: none;
   transition: background var(--transition), color var(--transition);
   letter-spacing: -0.01em;
   white-space: nowrap;
 }

 .nav-dropdown .dd-link:hover {
   background: var(--glass-hover);
   color: var(--text);
 }

 .nav-dropdown .dd-link svg {
   width: 14px;
   height: 14px;
   stroke: currentColor;
   fill: none;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
   opacity: 0.7;
   flex-shrink: 0;
 }

 .nav-dropdown .dd-link:hover svg {
   opacity: 1;
 }

 .nav-dropdown .dd-link.danger {
   color: rgba(247, 91, 91, 0.7);
 }

 .nav-dropdown .dd-link.danger:hover {
   background: rgba(247, 91, 91, 0.08);
   color: var(--danger);
 }

 .dd-separator {
   height: 1px;
   background: var(--glass-border);
   margin: 4px 0;
 }

 /* ============================================================
       HAMBURGER BUTTON
       ============================================================ */
 #mobile-toggle-wrapper {
   position: fixed;
   top: 0;
   right: 0;
   padding: 14px;
   z-index: 6000;
   pointer-events: none;
 }

 #mobile-toggle {
   position: relative;
   width: 38px;
   height: 38px;
   display: none;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   gap: 5px;
   background: var(--surface);
   border: 1px solid var(--glass-border);
   border-radius: var(--radius-sm);
   cursor: pointer;
   box-shadow: var(--shadow-sm);
   transition: background var(--transition), border-color var(--transition), transform var(--transition);
   padding: 0;
   pointer-events: auto;
 }

 #mobile-toggle:hover {
   background: var(--surface-2);
   border-color: rgba(255, 255, 255, 0.12);
   transform: scale(1.05);
 }

 #mobile-toggle span {
   display: block;
   width: 16px;
   height: 1.5px;
   background: var(--text-muted);
   border-radius: 2px;
   transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
   transform-origin: center;
 }

 #mobile-toggle.is-open span:nth-child(1) {
   transform: translateY(6.5px) rotate(45deg);
   background: var(--text);
 }

 #mobile-toggle.is-open span:nth-child(2) {
   opacity: 0;
   transform: scaleX(0);
 }

 #mobile-toggle.is-open span:nth-child(3) {
   transform: translateY(-6.5px) rotate(-45deg);
   background: var(--text);
 }


 /* ============================================================
       MOBILE SIDEBAR
       ============================================================ */
 #mobile-sidebar {
   position: fixed;
   top: 0;
   right: 0;
   width: 280px;
   max-width: 88vw;
   height: 100dvh;
   background: var(--surface);
   border-left: 1px solid var(--glass-border);
   box-shadow: -24px 0 60px rgba(0, 0, 0, 0.7);
   transform: translateX(100%);
   transition: transform 0.32s cubic-bezier(0.25, 0.8, 0.25, 1);
   z-index: 5500;
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }

 #mobile-sidebar.is-open {
   transform: translateX(0);
 }

 .sidebar-header {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 20px 18px 16px;
   border-bottom: 1px solid var(--glass-border);
   flex-shrink: 0;
 }

 .sidebar-brand {
   font-family: var(--font-brand);
   font-size: 16px;
   font-weight: 700;
   color: var(--text);
   letter-spacing: -0.03em;
 }

 .sidebar-brand-dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--accent);
   box-shadow: 0 0 8px var(--accent);
   flex-shrink: 0;
 }

 .sidebar-user {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 12px 14px;
   margin: 12px;
   border-radius: var(--radius-sm);
   background: var(--glass);
   border: 1px solid var(--glass-border);
   text-decoration: none;
   transition: background var(--transition);
   flex-shrink: 0;
 }

 .sidebar-user:hover {
   background: var(--glass-hover);
 }

 .sidebar-user-avatar {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--accent), #8b5cf6);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 12px;
   font-weight: 700;
   color: #fff;
   font-family: var(--font-brand);
   flex-shrink: 0;
   overflow: hidden;
 }

 .sidebar-user-info {
   display: flex;
   flex-direction: column;
   gap: 2px;
   min-width: 0;
 }

 .sidebar-user-name {
   font-size: 13.5px;
   font-weight: 600;
   color: var(--text);
   letter-spacing: -0.02em;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }

 .sidebar-user-role {
   font-size: 11px;
   color: var(--text-dim);
   letter-spacing: 0.01em;
 }

 .sidebar-nav {
   flex: 1;
   overflow-y: auto;
   padding: 8px 12px;
   display: flex;
   flex-direction: column;
   gap: 1px;
   overscroll-behavior: contain;
   scrollbar-width: none;
 }

 .sidebar-nav::-webkit-scrollbar {
   display: none;
 }

 .sidebar-section-label {
   font-size: 10px;
   font-weight: 600;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--text-dim);
   padding: 10px 8px 4px;
   font-family: var(--font-brand);
 }

 .sidebar-link {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 10px 10px;
   border-radius: var(--radius-sm);
   font-size: 13.5px;
   font-weight: 400;
   color: var(--text-muted);
   text-decoration: none;
   transition: background var(--transition), color var(--transition), padding-left var(--transition);
   position: relative;
   border: none;
   background: none;
   width: 100%;
   text-align: left;
   cursor: pointer;
   letter-spacing: -0.01em;
 }

 .sidebar-link svg {
   width: 15px;
   height: 15px;
   stroke: currentColor;
   fill: none;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
   opacity: 0.6;
   flex-shrink: 0;
 }

 .sidebar-link:hover {
   background: var(--glass);
   color: var(--text);
   padding-left: 14px;
 }

 .sidebar-link:hover svg {
   opacity: 1;
 }

 .sidebar-link.active {
   background: var(--accent-subtle);
   color: var(--text);
   font-weight: 500;
   border-left: 2px solid var(--accent);
   padding-left: 12px;
 }

 .sidebar-link.active svg {
   opacity: 1;
   color: var(--accent);
 }

 .sidebar-link.danger {
   color: rgba(247, 91, 91, 0.65);
 }

 .sidebar-link.danger:hover {
   background: rgba(247, 91, 91, 0.07);
   color: var(--danger);
 }

 .sidebar-chevron {
   margin-left: auto;
   width: 14px;
   height: 14px;
   opacity: 0.4;
   transition: transform 0.25s ease, opacity 0.2s ease;
 }

 .sidebar-link.is-expanded .sidebar-chevron {
   transform: rotate(180deg);
   opacity: 0.7;
 }

 .sidebar-submenu {
   display: none;
   flex-direction: column;
   gap: 1px;
   padding: 2px 0 4px 14px;
   position: relative;
 }

 .sidebar-submenu::before {
   content: '';
   position: absolute;
   left: 18px;
   top: 0;
   bottom: 0;
   width: 1px;
   background: linear-gradient(to bottom, transparent, var(--glass-border) 20%, var(--glass-border) 80%, transparent);
 }

 .sidebar-submenu.is-open {
   display: flex;
 }

 .sidebar-submenu .sidebar-link {
   font-size: 13px;
   padding-left: 16px;
 }

 .sidebar-submenu .sidebar-link:hover {
   padding-left: 20px;
 }

 .sidebar-footer {
   padding: 12px;
   border-top: 1px solid var(--glass-border);
   flex-shrink: 0;
 }

 .sidebar-footer-text {
   font-size: 10.5px;
   color: var(--text-dim);
   text-align: center;
   letter-spacing: 0.04em;
 }

 #sidebar-backdrop {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.6);
   backdrop-filter: blur(3px);
   -webkit-backdrop-filter: blur(3px);
   z-index: 5400;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.32s ease;
 }

 #sidebar-backdrop.is-visible {
   opacity: 1;
   pointer-events: all;
 }

 /* ============================================================
       RESPONSIVE
       ============================================================ */
 @media (max-width: 900px) {
   #nav-bar {
     display: none;
   }

   #mobile-toggle {
     display: flex;
   }
 }

 body.focus-mode #nav-bar {
   display: none !important;
 }

 body.focus-mode #mobile-toggle {
   display: flex !important;
 }

 /* ============================================================
       SVG ICON HELPER CLASSES
       ============================================================ */
 .icon {
   width: 14px;
   height: 14px;
   stroke: currentColor;
   fill: none;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
   flex-shrink: 0;
 }