/* App Shell, Header, and Breadcrumb Styles */
/* Supplementary styles for shell components */

/* CSS Custom Properties for shell */
:root {
  --header-height: 56px;
  --breadcrumb-height: 36px;
  --shell-bg: var(--bg-primary);
  --header-bg: var(--bg-secondary);
}

/* Global transitions for route changes */
app-shell main > * {
  transition: opacity var(--transition-base, 0.15s ease);
}

app-shell main > *.active {
  opacity: 1;
}

/* Focus styles for navigation */
app-header .nav-link:focus,
app-breadcrumb .breadcrumb-link:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Skip link for accessibility */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--accent-color);
  color: var(--accent-text, #ffffff);
  padding: 0.5rem 1rem;
  border-radius: 0 0 var(--radius-md, 8px) 0;
  z-index: var(--z-tooltip, 400);
  text-decoration: none;
  font-weight: 500;
  transition: top var(--transition-base, 0.15s ease);
}

.skip-link:focus {
  top: 0;
}

/* Print styles */
@media print {
  app-header,
  app-breadcrumb {
    display: none !important;
  }

  app-shell main {
    display: block !important;
  }

  app-shell main > * {
    display: none !important;
  }

  app-shell main > *.active {
    display: block !important;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  :root {
    --header-height: 52px;
    --breadcrumb-height: 32px;
  }
}

@media (max-width: 480px) {
  :root {
    --header-height: 48px;
    --breadcrumb-height: 28px;
  }
}