body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #e9ecef; overflow-x: hidden; transition: background 0.3s;}

body.mobile-mode #wrapper {
  max-width: 480px; margin: 0 auto;
  box-shadow: 0 0 30px rgba(0,0,0,0.2);
  position: relative; background: #fff;
}
body.desktop-mode #wrapper { width: 100%; background: #fff; }

.loading-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.7); z-index: 9999; justify-content: center; align-items: center; }
.page-view, .content-view { display: none; }
.page-view.active, .content-view.active { display: block; }

#wrapper { display: flex; align-items: stretch; min-height: 100vh; }

#sidebar {
  min-width: 250px; max-width: 250px; background: #ffffff; color: #333;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: 2px 0 10px rgba(0,0,0,0.05); z-index: 100;
}
#sidebar .sidebar-header { border-bottom: 1px solid #e9ecef; transition: background 0.2s;}
#sidebar .sidebar-header:hover { background: #f8f9fa; }
#sidebar ul.components { padding: 15px 0; }
#sidebar ul li a { 
  padding: 12px 20px; font-size: 1.1em; display: flex; align-items: center; 
  color: #555; text-decoration: none; cursor: pointer; transition: 0.2s; white-space: nowrap; overflow: hidden;
}
#sidebar ul li a i { font-size: 1.4rem; margin-right: 15px; width: 30px; text-align: center; flex-shrink: 0;}
#sidebar ul li a:hover { background: #f8f9fa; color: #0d6efd; }
#sidebar ul li.active > a { background: #e9ecef; color: #0d6efd; border-right: 4px solid #0d6efd; font-weight: bold;}

#sidebar.collapsed { min-width: 80px; max-width: 80px; }
#sidebar.collapsed .sidebar-text { display: none !important; }
#sidebar.collapsed ul li a { justify-content: center; padding: 15px 0; }
#sidebar.collapsed ul li a i { margin-right: 0; font-size: 1.6rem; }
.sidebar-icon { font-size: 3rem; transition: transform 0.2s; }
#sidebar.collapsed .sidebar-icon { font-size: 2.5rem; }

#content { width: 100%; padding: 20px; transition: all 0.3s; background: #f4f6f9; overflow-y: auto;}
.hover-scale:hover { transform: scale(1.1); opacity: 0.8;}
.mobile-menu-btn { display: none; }

@media (max-width: 768px), body.mobile-mode {
  .mobile-menu-btn { display: inline-block !important; }
  #sidebar { position: fixed; top: 0; left: -260px; height: 100vh; z-index: 1050; transition: left 0.3s ease; box-shadow: 2px 0 15px rgba(0,0,0,0.3); }
  #sidebar.open { left: 0; }
  #sidebar.collapsed { min-width: 250px !important; max-width: 250px !important; }
  #sidebar .sidebar-text { display: inline-block !important; }
  #sidebar ul li a { justify-content: flex-start; padding: 12px 20px; }
  #sidebar ul li a i { margin-right: 15px; font-size: 1.4rem; }
  #sidebar .sidebar-icon { font-size: 3rem; }
}

body.mobile-mode #sidebar { display: none !important; }
body.mobile-mode .mobile-menu-btn { display: none !important; }