/* ===========================
   App Shell (Chrome) Styles
   - Sidebar, Header, Content
   - Motion, Overlay, Tokens
   =========================== */

/* 1) Design Tokens */
:root {
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Colors */
  --dark-blue: #344393;
  --dark-blue-2: #2a3678;
  --dark-gray: #54585f;
  --body-color: #979797;
  --border-color: #DDDDDD;
  --bg-nav-link: #F3F4F8;
  --body-bg: #F4F7FB;
  --white: #ffffff;
  --leadchef-orange: #FFA32B;

  /* Layout */
  --sidebar-width: 220px;
  --navbar-height: 64px;
  --content-padding: 20px;
  
  /* Motion */
  --transition-time: 0.35s;
  --ease-emph: cubic-bezier(0.25, 0.8, 0.25, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2) Boot Guard: Prevent first-paint animation/flash */
.no-animate *, 
.no-animate *::before, 
.no-animate *::after {
  transition: none !important;
  animation: none !important;
}

/* 3) Chrome Base */
html, body { 
  height: 100%; 
  margin: 0; 
  padding: 0; 
}

body {
  font-family: var(--font-body);
  color: var(--body-color);
  background: var(--body-bg);
  overflow-x: hidden;
}

/* 4) Layout Wrapper */
.layout-wrapper { 
  display: flex; 
  flex-direction: column; 
  height: 100vh; 
  overflow: hidden; 
}

/* 5) Main Header */
.main-header { 
  position: fixed; 
  top: 0; 
  left: 0; 
  right: 0; 
  z-index: 1050; 
  background-color: var(--dark-blue); 
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); 
  backdrop-filter: blur(10px); 
}

.navbar { 
  padding: 0.5rem 1rem; 
  height: var(--navbar-height); 
  position: relative; 
}

/* 6) Sidebar Toggle Button */
#sidebarToggle { 
  background: transparent; 
  color: var(--white); 
  border: none; 
  font-size: 20px; 
  transition: all 0.3s var(--ease-smooth); 
  width: 40px; 
  height: 40px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  border-radius: 8px; 
  position: relative;
  overflow: hidden;
  margin-left: 12px; /* Increased margin to prevent focus ring touching logo */
  margin-right: 8px; /* Add right margin for better spacing from logo */
}

#sidebarToggle::before {
  content: '';
  position: absolute;
  top: 2px; 
  left: 2px;
  right: 2px;
  bottom: 2px;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 6px;
}

#sidebarToggle:hover::before { opacity: 1; }
#sidebarToggle:hover { 
  transform: translateY(-2px); 
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
}

#sidebarToggle i {
  transition: transform 0.3s var(--ease-smooth);
}

/* 7) Layout Container */
#layoutSidenav { 
  display: flex; 
  width: 100%; 
  position: relative; 
  overflow: hidden; 
}

/* 8) Content Area - No transitions to avoid jarring effect */
#layoutSidenav_content { 
  margin-left: 0; 
  padding-top: var(--navbar-height); 
  min-height: calc(100vh - var(--navbar-height)); 
  width: 100%; 
  overflow-y: auto; 
  padding: 76px 20px 20px; 
  position: relative; 
  background: var(--body-bg);
}

/* 9) Modern Sidebar - Always overlay, no scrolling */
#layoutSidenav_nav { 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: var(--sidebar-width); 
  height: 100vh; 
  padding-top: var(--navbar-height); 
  background: linear-gradient(180deg, var(--dark-blue) 0%, var(--dark-blue-2) 100%);
  backdrop-filter: blur(20px);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 8px 0 32px rgba(0, 0, 0, 0.2);
  overflow: hidden; 
  z-index: 1040; 
  transform: translateX(-100%);
  transition: transform var(--transition-time) var(--ease-emph);
  will-change: transform;
}



/* 11) Sidebar States - Show/Hide with overlay */
#layoutSidenav.sidebar-active #layoutSidenav_nav { 
  transform: translateX(0); 
}

/* Toggle button rotation when active */
#layoutSidenav.sidebar-active #sidebarToggle i {
  transform: rotate(90deg);
}

/* 12) Desktop Overlay */
.sidebar-overlay { 
  display: none; 
  position: fixed; 
  top: 0; left: 0; right: 0; bottom: 0; 
  background: rgba(0, 0, 0, 0.4); 
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1035; 
  opacity: 0;
  transition: opacity 0.3s ease;
  will-change: opacity;
}

#layoutSidenav.sidebar-active .sidebar-overlay { 
  display: block; 
  opacity: 1;
}

/* 13) Sidebar Ready State */
.sidebar-ready #layoutSidenav_nav {
  visibility: visible;
}

/* 13) Mobile Specific Adjustments */
@media (max-width: 991px) {
  #layoutSidenav_nav { 
    top: var(--navbar-height); 
    height: calc(100vh - var(--navbar-height));
    width: 280px;
    padding-top: 0;
    border-radius: 0 20px 20px 0;
    box-shadow: 12px 0 40px rgba(0, 0, 0, 0.3);
  }
  
  /* Scroll Lock */
  body.sidebar-lock { 
    overflow: hidden; 
  }
}

/* 15) Tablet Adjustments */
@media (max-width: 1199px) and (min-width: 992px) {
  :root {
    --sidebar-width: 200px;
  }
}

/* 16) Ultra-wide Adjustments */
@media (min-width: 1400px) {
  :root {
    --sidebar-width: 260px;
  }
}

/* 17) Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
  
  #layoutSidenav_nav, 
  #layoutSidenav_content, 
  .sidebar-overlay,
  #sidebarToggle,
  #sidebarToggle i {
    transition: none !important;
    animation: none !important;
  }
}

/* 18) Backdrop Filter Fallback */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .sidebar-overlay { 
    backdrop-filter: none; 
    -webkit-backdrop-filter: none; 
  }
  
  #layoutSidenav_nav {
    backdrop-filter: none;
  }
}

/* 19) Complete Modern Sidebar Components */

/* Sidebar Container */
.sb-sidenav { 
  padding: 20px 0 0 0; 
  height: 100%; 
  display: flex; 
  flex-direction: column;
  position: relative;
}

/* Sidebar Menu */
.sb-sidenav-menu { 
  flex-grow: 1; 
  display: flex; 
  flex-direction: column; 
  min-height: 0; 
  padding: 0 16px;
  overflow: hidden;
}

.sb-sidenav .sb-sidenav-menu .nav { 
  flex-direction: column; 
  gap: 6px;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Section Labels */
.sb-sidenav .sb-sidenav-menu .nav .text-label { 
  color: rgba(255, 255, 255, 0.7); 
  font-size: 10px; 
  font-weight: 600; 
  padding: 8px 12px 12px 12px; 
  text-transform: uppercase; 
  letter-spacing: 1.2px; 
  font-family: var(--font-heading); 
  margin-top: 16px; 
  white-space: nowrap; 
  position: relative;
  border: none;
  background: none;
}

.sb-sidenav .sb-sidenav-menu .nav .text-label:first-child {
  margin-top: 0;
  padding-top: 12px;
}

.sb-sidenav .sb-sidenav-menu .nav .text-label::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 4px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
  border-radius: 0.5px;
}

/* Navigation Links */
.sb-sidenav .nav-link {
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-radius: 10px;
  margin: 2px 0;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  line-height: 1.4;
  backdrop-filter: blur(10px);
}

.sb-sidenav .nav-link::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  opacity: 0;
  transition: opacity 0.25s ease;
  border-radius: 10px;
}

/* Navigation Icons */
.sb-sidenav .nav-link .sb-nav-link-icon { 
  display: flex; 
  align-items: center; 
  justify-content: center;
  font-size: 16px; 
  width: 28px; 
  height: 28px;
  margin-right: 12px; 
  color: rgba(255, 255, 255, 0.85); 
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

/* Hover States */
.sb-sidenav .nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  transform: translateX(4px);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.sb-sidenav .nav-link:hover::before { 
  opacity: 1; 
}

.sb-sidenav .nav-link:hover .sb-nav-link-icon { 
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
  color: #fff;
}

/* Active States */
.sb-sidenav .nav-link.active {
  color: var(--dark-blue);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.9));
  font-weight: 600;
  transform: translateX(4px);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), 
              0 0 0 1px rgba(255, 255, 255, 0.2);
}

.sb-sidenav .nav-link.active .sb-nav-link-icon { 
  color: var(--dark-blue); 
  background: rgba(52, 67, 147, 0.12);
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(52, 67, 147, 0.2);
}

/* HR Dividers */
.sb-sidenav .sb-sidenav-menu .nav hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  margin: 16px 0;
  opacity: 0.6;
}

/* Coming Soon Badge */
.nav-link-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  gap: 2px;
}

.coming-soon-text {
  font-size: 8px;
  color: #ffc107;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  opacity: 0.85;
  background: rgba(255, 193, 7, 0.2);
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.25s ease;
  border: 1px solid rgba(255, 193, 7, 0.3);
}

.nav-link-coming-soon:hover .coming-soon-text {
  opacity: 1;
  background: rgba(255, 193, 7, 0.3);
  transform: scale(1.02);
}

/* Sidebar Footer */
.sb-sidenav-footer { 
  padding: 0 8px 16px 8px; 
  margin-top: auto; 
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Footer Separator */
.footer-separator {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  margin: 16px 8px 0 8px;
  opacity: 0.6;
}

/* Footer Actions Section */
.footer-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.footer-action-link {
  display: flex;
  align-items: center;
  padding: 10px 8px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.2s ease;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
}

.footer-action-link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.95);
  text-decoration: none;
  transform: translateX(2px);
}

.footer-action-link i {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

/* User Profile Section */
.user-profile-section {
  display: flex;
  align-items: center;
  padding: 12px 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Profile Avatar in User Section */
.user-profile-section .profile-avatar { 
  width: 40px; 
  height: 40px; 
  border-radius: 50%; 
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05)); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
  overflow: hidden;
}

.user-profile-section .profile-avatar img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  border-radius: 50%; 
}

.user-profile-section .profile-initial { 
  color: var(--white); 
  font-size: 16px; 
  font-weight: 600; 
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  font-family: var(--font-heading);
}

/* Profile Info in User Section */
.user-profile-section .profile-info { 
  flex: 1; 
  min-width: 0; 
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-profile-section .profile-name { 
  color: var(--white); 
  font-size: 14px; 
  font-weight: 600; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis;
  line-height: 1.2;
  font-family: var(--font-heading);
}

.user-profile-section .profile-email { 
  color: rgba(255, 255, 255, 0.65); 
  font-size: 12px; 
  font-weight: 400; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  line-height: 1.2;
}



/* 20) Focus Management */
.sb-sidenav .nav-link:focus {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

#sidebarToggle:focus {
  outline: none !important;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6) !important;
}

#sidebarToggle:active,
#sidebarToggle.active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* 21) Mobile-specific adjustments */
@media (max-width: 991px) {
  .sb-sidenav { 
    padding: 16px 0; 
  }
  
  .sb-sidenav-menu { 
    padding: 0 12px; 
  }
  
  .sb-sidenav .nav-link { 
    padding: 10px 12px; 
    font-size: 13px;
  }
  
  .profile-link { 
    padding: 16px; 
    gap: 12px;
  }
  
  .profile-avatar { 
    width: 38px; 
    height: 38px; 
  }
  
  .profile-name { 
    font-size: 14px; 
  }
  
  .profile-subtitle { 
    font-size: 11px; 
  }
}