/* App Shell Layout Component */

/* Provides the main application structure: sidebar + navbar + content */

@layer components {
  /* ============================================================================
   * APP SHELL STRUCTURE
   * ========================================================================= */

  .app-shell {
    display: flex;
    min-height: 100vh;
    background-color: var(--color-bg-secondary);
  }

  /* Main content area (excludes sidebar) */
  .app-shell__main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0; /* Prevent flex overflow */
  }

  /* Content area (below navbar) */
  .app-shell__content {
    flex: 1;
    padding: var(--space-xl);
    overflow-y: auto;
  }

  /* ============================================================================
   * MOBILE HEADER (hamburger menu trigger)
   * Hidden on desktop, shown on mobile/tablet as a top bar with hamburger icon
   * ========================================================================= */

  .app-shell__mobile-header {
    display: none;
  }

  .app-shell__mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-gray-4);
    cursor: pointer;
    transition: all var(--transition-fast);
  }

  .app-shell__mobile-menu-toggle:hover {
    background-color: var(--color-bg-highlight);
    color: var(--color-dark);
  }

  .app-shell__mobile-header .sidebar__logo {
    flex-shrink: 0;
  }

  /* ============================================================================
   * RESPONSIVE BEHAVIOR
   * ========================================================================= */

  /* Mobile/Tablet: Full-width content, sidebar overlays */
  @media (width <= 1024px) {
    .app-shell {
      flex-direction: column;
    }

    .app-shell__content {
      padding: var(--space-md);
    }

    .app-shell__mobile-header {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      padding: var(--space-sm) var(--space-md);
      background-color: var(--color-bg-main);
      border-bottom: 1px solid var(--color-gray-2);
      min-height: 3.5rem;
    }
  }

  /* Desktop: Side-by-side layout */
  @media (width >= 1025px) {
    .app-shell__main {
      margin-left: 0;
      transition: margin-left var(--transition-normal);
    }

    /* When sidebar is collapsed */
    .app-shell--sidebar-collapsed .app-shell__main {
      margin-left: 0;
    }
  }

  /* ============================================================================
   * DARK MODE
   * ========================================================================= */

  @media (prefers-color-scheme: dark) {
    .app-shell__mobile-header {
      background-color: var(--color-bg-secondary);
      border-bottom-color: var(--color-gray-3);
    }
  }
}