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

/* Common view styles */
:root {
  --view-padding: 2rem;
  --view-max-width: 1200px;
  --card-radius: var(--radius-lg, 12px);
  --card-shadow: var(--shadow-md);
}

/* 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: var(--bg-tertiary);
  --code-text: var(--text-primary);
}

/* Dark mode code blocks */
[data-theme='dark'] docs-view,
[data-active-theme='dark'] docs-view {
  --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(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply animation to active views */
landing-view.active,
preferences-view.active,
docs-view.active,
storybook-view.active,
blog-view.active,
new-workspace-view.active {
  animation: fadeIn 0.25s 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;
  }
}

/* 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: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Scrollbar styling for views */
landing-view,
preferences-view,
docs-view,
storybook-view,
blog-view {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) var(--bg-tertiary);
}

landing-view::-webkit-scrollbar,
preferences-view::-webkit-scrollbar,
docs-view::-webkit-scrollbar,
storybook-view::-webkit-scrollbar,
blog-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,
blog-view::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
}

landing-view::-webkit-scrollbar-thumb,
preferences-view::-webkit-scrollbar-thumb,
docs-view::-webkit-scrollbar-thumb,
storybook-view::-webkit-scrollbar-thumb,
blog-view::-webkit-scrollbar-thumb {
  background-color: var(--border-strong);
  border-radius: var(--radius-full, 9999px);
}

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