/**
 * App Layout - Main Grid Structure
 *
 * Definerer den overordnede app-struktur med sidebar og main content
 */

/* ===========================================
   MAIN APP GRID
   =========================================== */
swp-app-layout {
  display: grid;
  grid-template-columns: var(--side-menu-width) 1fr;
  grid-template-rows: var(--topbar-height) 1fr;
  height: 100vh;
  transition: grid-template-columns var(--transition-normal);
}

/* ===========================================
   COLLAPSED MENU STATE
   =========================================== */
swp-app-layout.menu-collapsed {
  grid-template-columns: var(--side-menu-width-collapsed) 1fr;
}

/* ===========================================
   MAIN CONTENT AREA
   =========================================== */
swp-main-content {
  display: block;
  overflow-y: auto;
  background: var(--color-background);
}

/* ===========================================
   DRAWER OVERLAY
   =========================================== */
swp-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: var(--z-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

swp-drawer-overlay.active {
  opacity: 1;
  visibility: visible;
}