/* ==========================================================================
   Panels - Base Styles
   ========================================================================== */

/* Backdrop - covers main area */
.panel-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal),
    visibility var(--transition-normal);
  z-index: 100;
}

.panel-backdrop.open {
  opacity: 1;
  visibility: visible;
}

/* Invisible backdrop - still captures clicks, but no visual overlay */
.panel-backdrop.backdrop--invisible {
  background-color: transparent;
}

/* Base panel */
.panel {
  position: absolute;
  inset-block: 0;
  width: var(--size-panel);
  background-color: var(--np-color-surface);
  z-index: 101;
  display: flex;
  flex-direction: column;
  /* Default: slide from inline-end, border on inline-start */
  border-inline-start: var(--border-width-thick) solid var(--np-color-inverse-surface);
  inset-inline-end: calc(var(--size-panel) * -1);
  transition: inset-inline-end var(--transition-normal);
}

.panel.open {
  inset-inline-end: 0;
}

/* Panels that slide from inline-start (left in LTR) */
.panel[data-slide="start"] {
  border-inline-start: none;
  border-inline-end: var(--border-width-thick) solid var(--np-color-inverse-surface);
  inset-inline-end: unset;
  inset-inline-start: calc(var(--size-panel) * -1);
  transition: inset-inline-start var(--transition-normal);
}

.panel[data-slide="start"].open {
  inset-inline-start: 0;
}

/* Panel top section - non-scrolling, contains close button */
.panel-top {
  flex-shrink: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Panel scroll section - scrollable content area */
.panel-scroll {
  flex: 1;
  overflow-y: auto;
}

/* Panel close button - positioned in top corner */
.panel-close {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: var(--size-mobile-touch); /* 44px */
  height: var(--size-mobile-touch);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--np-color-on-surface);
  z-index: 10;
}

/* Left-opening panels: close button at top-right */
.panel[data-slide="start"] .panel-close {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

.panel-close:hover {
  color: var(--np-color-on-surface-variant);
}

.panel-close .material-symbols-outlined {
  font-size: 24px;
}

/* Panel loading bar - positioned at top, ignores padding */
.panel > .loading-bar {
  position: absolute;
  top: 0;
  inset-inline: 0;
}

/* Panel content - flex container for top/scroll sections, fade in when loaded */
.panel-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.panel-content.is-loaded {
  opacity: 1;
}

/* Panel title */
.panel-title {
  margin: 0 0 var(--space-6) 0;
  font-family: var(--font-primary);
  font-size: 28px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  color: var(--np-color-on-surface);
}

/* ==========================================================================
   Scroll Lock - Prevent background scrolling when panels are open
   ========================================================================== */
.main.panels-open {
  overflow: hidden;
}

/* ==========================================================================
   Mobile Panels - Slide from bottom
   ========================================================================== */
@media (max-width: 480px) {
  .panel {
    /* Full width, positioned from 40px gap to bottom */
    width: 100%;
    inset-inline-start: 0;
    inset-inline-end: 0;
    inset-block-start: var(--size-touch);
    inset-block-end: 0;
    /* Hidden: pushed down by own height */
    transform: translateY(100%);
    /* Animate transform for slide */
    transition: transform var(--transition-normal),
      inset-block-start var(--transition-normal);
    /* Border on top instead of side */
    border-inline-start: none;
    border-block-start: var(--border-width-thick) solid var(--np-color-inverse-surface);
  }

  .panel.open {
    /* Visible: at natural position */
    transform: translateY(0);
  }

  /* Override start-slide panels on mobile - all slide from bottom */
  .panel[data-slide="start"] {
    inset-inline-start: 0;
    inset-inline-end: 0;
    inset-block-start: var(--size-touch);
    inset-block-end: 0;
    transform: translateY(100%);
    border-inline-end: none;
    border-block-start: var(--border-width-thick) solid var(--np-color-inverse-surface);
    transition: transform var(--transition-normal),
      inset-block-start var(--transition-normal);
  }

  .panel[data-slide="start"].open {
    transform: translateY(0);
  }

  /* Auto-height panels - content-based height instead of full height */
  .panel--auto-height {
    /* Position at bottom, height based on content */
    inset-block-start: auto;
    inset-block-end: 0;
    height: auto;
    /* max-height set dynamically by JS based on stack position */
    border-radius: 0;
    padding: 0;
    background-color: var(--np-color-surface);
  }

  /* Mobile: close button at top-right for bottom-sliding panels */
  .panel-close {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }
}

/* ==========================================================================
   Mobile Nav Panel - Menu items (matches desktop nav styling)
   ========================================================================== */
.mobile-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.mobile-menu-item {
  height: var(--size-touch);
  display: flex;
  align-items: center;
  padding-inline-start: var(--space-3);
  padding-inline-end: var(--space-4);
  border-block-start: var(--border-normal) var(--np-color-inverse-surface);
  background-color: var(--np-color-surface);
  font-size: var(--text-nav-button-size);
  line-height: var(--text-nav-button-line-height);
  color: var(--np-color-on-surface);
  text-decoration: none;
}

.mobile-menu-item__icon {
  height: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-menu-item__icon .material-symbols-outlined {
  font-size: 24px;
}

.mobile-menu-item__text {
  flex: 1;
  display: flex;
  align-items: center;
}

.mobile-menu-item.active {
  background-color: var(--np-color-surface-container-high);
}