/**
 * Layout CSS for Sidebar Navigation
 *
 * TAG: TAG-LAYOUTWRAP-001, TAG-LAYOUTWRAP-002, TAG-LAYOUTWRAP-003
 * SPEC: SPEC-LAYOUTWRAP-001, SPEC-LAYOUTWRAP-002, SPEC-LAYOUTWRAP-003
 *
 * CSS Custom Properties defined in design-tokens.css.
 */

/* Sidebar base styles */
.sidebar {
  position: fixed;
  left: 0;
  top: var(--spacing-topbar-height, 56px);
  height: calc(100% - var(--spacing-topbar-height, 56px));
  background-color: var(--color-sidebar-bg);
  color: var(--color-sidebar-text);
  transition: width var(--transition-sidebar);
  z-index: var(--z-sidebar);
}

.sidebar--expanded {
  width: var(--spacing-sidebar-expanded);
}

.sidebar--collapsed {
  width: var(--spacing-sidebar-collapsed);
}

/* Main content area */
.main-content {
  transition: margin-left var(--transition-sidebar);
  min-height: 100vh;
}

.main-content--sidebar-expanded {
  margin-left: var(--spacing-sidebar-expanded);
}

.main-content--sidebar-collapsed {
  margin-left: var(--spacing-sidebar-collapsed);
}

/* Mobile drawer overlay */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--color-overlay);
  z-index: var(--z-drawer-overlay);
}

/* Mobile drawer */
.drawer {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--spacing-drawer-width);
  background-color: var(--color-sidebar-bg);
  color: var(--color-sidebar-text);
  z-index: var(--z-drawer);
  transform: translateX(-100%);
  transition: transform var(--transition-sidebar);
}

.drawer--open {
  transform: translateX(0);
}

/* Topbar (SPEC-LAYOUTWRAP-003 - visible on all screen sizes) */
.mobile-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  z-index: var(--z-hamburger);
  background-color: var(--color-topbar-bg);
  color: var(--color-topbar-text);
  display: flex;
  align-items: center;
  padding: 0 1rem;
  box-shadow: var(--shadow-topbar);
  border-bottom: 1px solid var(--color-topbar-border);
}

.mobile-topbar__title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-left: 0.75rem;
  color: var(--color-topbar-title);
}

/* Hamburger button (inside mobile-topbar) */
.hamburger-btn {
  padding: 0.5rem;
  color: var(--color-topbar-icon);
  border-radius: 0.5rem;
  transition: background-color 150ms;
}

.hamburger-btn:hover {
  background-color: var(--color-topbar-hover);
}

/* Navigation items */
.nav-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  color: var(--color-nav-text);
  transition: background-color 150ms, color 150ms;
}

.nav-item:hover {
  background-color: var(--color-sidebar-hover);
  color: var(--color-sidebar-text);
}

.nav-item--active {
  background-color: var(--color-sidebar-active);
  color: var(--color-sidebar-text);
}

.nav-item__icon {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-item__label {
  margin-left: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
}

/* Toggle button */
.sidebar-toggle {
  position: absolute;
  bottom: 1rem;
  right: 0;
  transform: translateX(50%);
  background-color: var(--color-sidebar-border);
  color: var(--color-nav-toggle);
  padding: 0.5rem;
  border-radius: 9999px;
  box-shadow: var(--shadow-toggle);
  transition: color 150ms;
}

.sidebar-toggle:hover {
  color: var(--color-sidebar-text);
}

/* Responsive breakpoints */
@media (width <= 767px) {
  .sidebar {
    display: none;
  }

  .main-content {
    margin-left: 0 !important;
  }
}

@media (width >= 768px) and (width <= 1023px) {
  .sidebar--expanded {
    width: var(--spacing-sidebar-collapsed);
  }

  .main-content--sidebar-expanded {
    margin-left: var(--spacing-sidebar-collapsed);
  }

  .nav-item__label {
    display: none;
  }
}

@media (width >= 768px) {
  .drawer,
  .drawer-overlay {
    display: none;
  }
}

/* ==========================================================================
   Layout Spacing Utilities (SPEC-DESIGNSYS-001 REQ-U-004: Balanced Layout)
   Uses CSS Custom Properties from design-tokens.css for consistency
   ========================================================================== */

/* DEBUG: Remove this border after confirming CSS is loading */

/* .card-padding { border: 3px solid red !important; } */

/* Page-level spacing */
.page-padding {
  padding: var(--spacing-page, 1rem);
}

/* Card/Panel spacing */
.card-padding {
  padding: var(--spacing-card, 1.25rem) !important;
}

/* Section vertical gaps */
.section-gap {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-section, 1rem) !important;
}

/* Grid gaps */
.grid-gap {
  gap: var(--spacing-grid, 1rem) !important;
}

/* Header margin */
.header-margin {
  margin-bottom: var(--spacing-header, 1.25rem) !important;
}