/* ═══════════════════════════════════════════════════════════════
   PCM Internal Tools Design System — layout.css v1.2
   Navigation, grid, responsive breakpoints.
   Requires tokens.css loaded first.
   ═══════════════════════════════════════════════════════════════ */

.pcm-main {
  padding: var(--space-5) var(--space-4) calc(var(--nav-height) + var(--space-6));
  max-width: var(--content-max-width);
  margin: 0 auto;
  animation: pcm-fadeInUp 0.3s ease-out;
}

.pcm-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--neutral-100);
  border-top: 1px solid var(--neutral-200);
  display: flex;
  justify-content: space-around;
  padding: var(--space-2) 0 max(var(--space-2), env(safe-area-inset-bottom));
  z-index: var(--z-sticky);
}

.pcm-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--neutral-400);
  font-size: 10px;
  font-weight: 600;
  gap: 2px;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  transition: all var(--transition-normal);
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
}

.pcm-nav__item:hover { color: var(--color-primary); text-decoration: none; }
.pcm-nav__item--active { color: #fff; background: var(--color-primary); }
.pcm-nav__item svg { width: 22px; height: 22px; flex-shrink: 0; }
.pcm-nav__label { line-height: 1; }

@media (min-width: 640px) {
  body { padding-left: var(--sidebar-collapsed); padding-bottom: 0; }
  .pcm-main { padding-bottom: var(--space-8); padding-left: var(--space-6); padding-right: var(--space-6); }
  .pcm-nav {
    position: fixed; top: 0; bottom: 0; left: 0; right: auto;
    width: var(--sidebar-collapsed);
    flex-direction: column; justify-content: flex-start;
    padding: var(--space-5) 0; gap: var(--space-1);
    border-top: none; border-right: 1px solid var(--neutral-200);
  }
  .pcm-nav__item { padding: var(--space-3) var(--space-2); font-size: 10px; }
  .pcm-nav__item svg { width: 22px; height: 22px; }
  .pcm-overlay { align-items: center; }
  .pcm-sheet { border-radius: var(--radius-lg); max-height: 80dvh; max-width: 480px; }
}

@media (min-width: 1024px) {
  body { padding-left: var(--sidebar-collapsed); }
  body.pcm-sidebar-expanded { padding-left: var(--sidebar-width); }
  .pcm-nav { width: var(--sidebar-collapsed); }
  body.pcm-sidebar-expanded .pcm-nav { width: var(--sidebar-width); }
  body.pcm-sidebar-expanded .pcm-nav__item {
    flex-direction: row; justify-content: flex-start; gap: var(--space-3);
    padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm);
    margin: 0 var(--space-2); font-size: var(--text-secondary-size);
  }
  .pcm-main { max-width: 900px; padding-left: var(--space-8); padding-right: var(--space-8); }
}

.pcm-grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.pcm-grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }

@media (min-width: 640px) {
  .pcm-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pcm-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pcm-list-mobile { display: block; }
.pcm-list-desktop { display: none; }

@media (min-width: 640px) {
  .pcm-list-mobile { display: none; }
  .pcm-list-desktop { display: block; }
}