/* View-specific styles */
/* Supplementary styles for view components */

/* Common view styles */
:root {
  --view-padding: 2rem;
  --view-max-width: 1200px;
  --card-radius: 8px;
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Landing View */
landing-view {
  --workspace-card-min-width: 280px;
}

/* Preferences View */
preferences-view {
  --form-max-width: 600px;
  --label-width: 140px;
}

/* Docs View */
docs-view {
  --docs-max-width: 800px;
  --code-bg: #1e1e1e;
  --code-text: #d4d4d4;
}

/* Storybook View */
storybook-view {
  --component-card-min-width: 300px;
}

/* Animation for view transitions */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply animation to active views */
landing-view.active,
preferences-view.active,
docs-view.active,
storybook-view.active {
  animation: fadeIn 0.2s ease-out;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  :root {
    --view-padding: 1rem;
  }

  landing-view {
    --workspace-card-min-width: 100%;
  }

  storybook-view {
    --component-card-min-width: 100%;
  }
}

/* Print styles for views */
@media print {
  landing-view,
  preferences-view,
  storybook-view {
    display: none !important;
  }

  docs-view {
    overflow: visible !important;
    height: auto !important;
  }

  docs-view .toc {
    display: none !important;
  }
}

/* Dark mode support (future) */
@media (prefers-color-scheme: dark) {
  docs-view {
    --code-bg: #1e1e1e;
    --code-text: #d4d4d4;
  }
}

/* Focus visible for keyboard navigation */
landing-view .workspace-item:focus-visible,
preferences-view input:focus-visible,
preferences-view button:focus-visible,
docs-view a:focus-visible,
storybook-view button:focus-visible {
  outline: 2px solid var(--accent-color, #0066cc);
  outline-offset: 2px;
}

/* Scrollbar styling for views */
landing-view,
preferences-view,
docs-view,
storybook-view {
  scrollbar-width: thin;
  scrollbar-color: var(--border-color, #e0e0e0) transparent;
}

landing-view::-webkit-scrollbar,
preferences-view::-webkit-scrollbar,
docs-view::-webkit-scrollbar,
storybook-view::-webkit-scrollbar {
  width: 8px;
}

landing-view::-webkit-scrollbar-track,
preferences-view::-webkit-scrollbar-track,
docs-view::-webkit-scrollbar-track,
storybook-view::-webkit-scrollbar-track {
  background: transparent;
}

landing-view::-webkit-scrollbar-thumb,
preferences-view::-webkit-scrollbar-thumb,
docs-view::-webkit-scrollbar-thumb,
storybook-view::-webkit-scrollbar-thumb {
  background-color: var(--border-color, #e0e0e0);
  border-radius: 4px;
}

landing-view::-webkit-scrollbar-thumb:hover,
preferences-view::-webkit-scrollbar-thumb:hover,
docs-view::-webkit-scrollbar-thumb:hover,
storybook-view::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-tertiary, #999);
}