/*
 * 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.
 */

.scheduler-scrollframe {
  position: relative;
  max-width: 100%;
  min-width: 0;
  overflow-x: scroll;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: auto;
  scrollbar-color: #94a3b8 #e2e8f0;
  cursor: grab;
}

.scheduler-scrollframe:focus {
  outline: none;
}

.scheduler-scrollframe:focus-visible {
  box-shadow: inset 0 0 0 2px #0ea5e9;
}

.scheduler-scrollframe::-webkit-scrollbar {
  height: 14px;
}

.scheduler-scrollframe::-webkit-scrollbar-track {
  background: #e2e8f0;
  border-radius: 9999px;
}

.scheduler-scrollframe::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border: 3px solid #e2e8f0;
  border-radius: 9999px;
}

.scheduler-scrollframe::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

.scheduler-scrollframe.scheduler-panning {
  cursor: grabbing;
  user-select: none;
}

.scheduler-scrollframe.scheduler-panning * {
  cursor: grabbing !important;
}

body.scheduler-pan-active {
  user-select: none;
}

.scheduler-day-canvas-width {
  min-width: 2348px;
}

.scheduler-day-grid {
  grid-template-columns: 236px 2112px;
}

.scheduler-day-timeline {
  background-image:
    repeating-linear-gradient(to right, transparent 0, transparent 87px, #f1f5f9 87px, #f1f5f9 88px),
    repeating-linear-gradient(to right, transparent 0, transparent 43px, rgb(241 245 249 / 80%) 43px, rgb(241 245 249 / 80%) 44px);
}

.scheduler-week-canvas-width {
  min-width: 1580px;
}

.scheduler-week-grid {
  grid-template-columns: 236px repeat(7, minmax(192px, 1fr));
}

.scheduler-week-timeline {
  background-image: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent calc((100% / 13) - 1px),
    #f1f5f9 calc((100% / 13) - 1px),
    #f1f5f9 calc(100% / 13)
  );
}