$header-height: 3.75rem !default; // 60px
$layout-padding: 0.5rem !default;
$layout-frame-radius: 1.6rem !default;
$nav-width-expanded: 16rem !default;
$nav-width-collapsed: 3rem !default;
$layer-factor: 0.86 !default;

// These are meant to match Tailwind's default breakpoints.
// They're added here for simplicity.
:root {
  --breakpoint-xs: 480px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--main-background);
  font-size: 16px;
  overflow-x: hidden; // Prevent horizontal scroll
  min-height: 100vh;
}

// Content column: right side (Header + main content); pushed by nav width
.content-column {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-left: $nav-width-expanded;
  transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--main-background);
}

.layout-container.nav-collapsed .content-column {
  margin-left: $nav-width-collapsed;
}

header#header-main {
  height: $header-height;
  flex: none;
  display: flex;
  align-items: center;
  z-index: 100;
  background: var(--main-background);
  border-bottom: 1px solid var(--p-content-border-color);

  button.menu-toggle {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0.5rem;
    color: var(--p-text-secondary-color);
    margin-left: 0.75rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
      color: var(--p-text-color);
      background: var(--p-surface-hover);
    }

    &:active {
      transform: scale(0.95);
    }

    &:focus-visible {
      outline: 2px solid var(--p-primary-color);
      outline-offset: 2px;
    }
  }

}

.layout-container {
  display: flex;
  flex-direction: row;
  height: 100vh;
  min-height: 0;
  width: 100vw;
}

app-nav {
  width: $nav-width-expanded;
  position: fixed;
  top: 0;
  left: 0;
  right: auto; // keep left-anchored; only width changes
  padding: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: left center; // expand/collapse from left edge
  z-index: 50;

  // Custom scrollbar styling
  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background: var(--p-surface-300);
    border-radius: 3px;

    &:hover {
      background: var(--p-surface-400);
    }
  }
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--main-background);

  // Single wrapper so only one flex child; routed view fills it
  > .main-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  // When the component is inserted as sibling of router-outlet, outlet must not grow
  .main-content > router-outlet {
    flex: none;
    min-height: 0;
  }

  // When outlet is the only child (component inside it), let it fill main
  .main-content > router-outlet:only-child {
    flex: 1;
    display: block;
  }

  // Routed component (when sibling of router-outlet) fills the content area
  .main-content > *:not(router-outlet) {
    flex: 1;
    min-height: 0;
    display: block;
  }
}

// Collapsed navigation state
.layout-container.nav-collapsed {
  app-nav {
    width: $nav-width-collapsed;
    overflow-x: hidden;
  }
}

.readable {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

.layout .shaded::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--p-surface-100);
  opacity: 0.3;
  z-index: -1;
}

.resize-handle {
  position: absolute;
  top: 0;
  width: 5px;
  height: 100%;
  cursor: col-resize;
  background-color: transparent;
  transition: background-color 0.2s;

  &:hover,
  &:active {
    background-color: var(--p-surface-300);
  }

  &.right {
    right: -2px;
  }

  &.left {
    left: -2px;
  }
}