/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* YearFlow Calendar Branding Overrides */
.yearflow-container {
  --yf-primary: #7c3aed;
  --yf-primary-light: #8b5cf6;
  --yf-primary-dark: #6d28d9;
  --yf-accent: #a78bfa;

  /* Responsive container settings */
  width: 100%;
  position: relative;
}

/* Ensure the calendar content doesn't break layout */
.yearflow-container > * {
  max-width: 100%;
}

/* Override legend item hover states */
.yearflow-container [class*="legend"] button:hover {
  border-color: #7c3aed;
}

/* Fix legend text overflow - ensure labels don't get cut off */
.yearflow-container aside li span,
.yearflow-container aside li input[type="text"] {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Ensure legend items have enough space */
.yearflow-container aside {
  min-width: 320px;
}

/* Ensure calendar header matches app style */
.yearflow-container [class*="header"] {
  font-weight: 600;
}

/* Active/selected states use violet */
.yearflow-container [class*="selected"],
.yearflow-container [class*="active"] {
  --yf-selection-color: #7c3aed;
}

/* Smooth transitions */
.yearflow-container * {
  transition-property: color, background-color, border-color, box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Mobile-specific styles */
@media (max-width: 640px) {
  .yearflow-container {
    border-radius: 0.5rem;
    padding: 0.5rem;
  }

  /* Make calendar grid more compact on mobile */
  .yearflow-container [class*="calendar"],
  .yearflow-container [class*="grid"] {
    font-size: 0.875rem;
  }

  /* Ensure month names are readable */
  .yearflow-container [class*="month"] {
    font-size: 0.75rem;
  }
}

/* Tablet and up */
@media (min-width: 641px) and (max-width: 1024px) {
  .yearflow-container {
    padding: 1rem;
  }
}

/* Desktop */
@media (min-width: 1025px) {
  .yearflow-container {
    padding: 1.5rem;
  }
}

/* Additional responsive class styles */
.yearflow-responsive {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

/* Ensure calendar table/grid is scrollable on mobile */
.yearflow-responsive table,
.yearflow-responsive [role="grid"] {
  min-width: 640px;
}

@media (min-width: 768px) {
  .yearflow-responsive table,
  .yearflow-responsive [role="grid"] {
    min-width: auto;
  }
}