/*
   Palette's Micro-UX Improvements
   -------------------------------
   1. Enhanced Focus Indicators for Accessibility
   2. Polished Custom Scrollbars
   3. Responsive Video Embed Container
   4. Error Actions Layout
*/

/* Accessibility: High-contrast focus ring for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--md-accent-fg-color, #526cfe);
  outline-offset: 2px;
  border-radius: 2px;
  z-index: 10;
}

/* UX: Modern, unobtrusive scrollbars */
/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--md-default-fg-color--lighter, rgba(0, 0, 0, 0.2));
  border-radius: 20px;
  border: 3px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--md-default-fg-color--light, rgba(0, 0, 0, 0.4));
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--md-default-fg-color--lighter, rgba(0, 0, 0, 0.2)) transparent;
}

/* Components: Responsive Video Embed Container */
.video-embed {
  position: relative;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  margin: 0 0 1.25rem 0;
  border-radius: 4px; /* Slight rounding for cleaner look */
  overflow: hidden;
  background-color: var(--md-default-bg-color--darker, #000); /* Placeholder color while loading */
}

.video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Urbano v2: Workflow teaser media block */
.workflow-teaser {
  margin: 0 0 1.25rem 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--md-default-fg-color--lightest, rgba(0, 0, 0, 0.12));
  background: var(--md-default-bg-color--light, #f7f7f7);
}

.workflow-teaser video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 80vh;
  background: #111;
}

/* Palette's Legacy Banner Fix */
.legacy-warning-btn {
  margin-top: 0.5rem;
  display: inline-block;
}

/* Button Hover Lift Effect */
.md-button {
  transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

.md-button:not(:disabled):not([aria-disabled="true"]):hover,
.md-button:not(:disabled):not([aria-disabled="true"]):focus-visible {
  transform: translateY(-2px);
}

.md-button:not(:disabled):not([aria-disabled="true"]):active {
  transform: translateY(0) scale(0.97);
}

.md-button:disabled,
.md-button[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: auto; /* Ensure tooltip title is visible on hover */
}

/* 404 Page Actions */
.error-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.error-actions button {
  cursor: pointer;
}