/* app/assets/stylessheets/layouts/admin_sidebar.css */

.sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 220px; background: white; border-right: 1px solid var(--color-gray-200); z-index: 90; padding-top: 70px; overflow-y: auto; }
.sidebar-nav { height: 100%; overflow-y: auto; padding: var(--space-lg) 0; }
.sidebar-menu { list-style: none; padding: 0; margin: 0; }
.sidebar-item { margin-bottom: 0.1rem; }
.sidebar-link { display: flex; align-items: center; padding: 0.5rem 1.2rem; color: var(--color-gray-700); text-decoration: none; transition: all 0.2s ease; position: relative; gap: var(--space-sm); }
.sidebar-link:hover { background: var(--color-gray-50); color: var(--color-gray-900); }
.sidebar-link.active { background: var(--color-gray-100); color: var(--color-primary); border-left: 3px solid var(--color-primary); }
.sidebar-icon-wrapper { width: 24px; height: 24px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s ease; }
.sidebar-icon-wrapper i { font-size: 0.8rem; color: var(--color-gray-500); transition: color 0.2s ease; }
.sidebar-link:hover .sidebar-icon-wrapper i { color: var(--color-gray-700); }
.sidebar-link.active .sidebar-icon-wrapper i { color: var(--color-primary); }
.sidebar-text { font-size: 0.8rem; font-weight: 500; flex-grow: 1; white-space: nowrap; }
.main-content { margin-left: 220px; padding: var(--space-xl); min-height: 100vh; background: var(--color-gray-50); }
.navbar-left { display: flex; align-items: center; gap: var(--space-md); }
.sidebar-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.3); z-index: 89; display: none; backdrop-filter: blur(2px); }

@media (max-width: 1024px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main-content, .navbar { margin-left: 0 !important; width: 100% !important; }
  .sidebar-backdrop { display: none; }
  .sidebar.open + .sidebar-backdrop { display: block; }
}

@media (max-width: 768px) {
  .sidebar { padding-top: 60px; width: 240px; }
  .sidebar-link { padding: 0.6rem 1rem; }
  .sidebar-icon-wrapper { width: 28px; height: 28px; }
  .sidebar-icon-wrapper i { font-size: 0.9rem; }
  .sidebar-text { font-size: 0.85rem; }
  .main-content { padding: var(--space-lg); }
}

@media (max-width: 480px) {
  .sidebar { width: 85%; max-width: 280px; }
  .sidebar-link { padding: 0.7rem 1rem; }
}

.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: var(--color-gray-100); }
.sidebar::-webkit-scrollbar-thumb { background: var(--color-gray-400); border-radius: 4px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: var(--color-gray-500); }