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

/* iOS Safe Area Support */
/* НЕ применяем safe-area к body, чтобы не сломать фиксированные элементы */
/* Вместо этого применяем к конкретным контейнерам где нужно */

/* Schedule-X: override default violet/purple palette to neutral slate */
:root {
  --sx-color-primary: #374151 !important;
  --sx-color-on-primary: #fff !important;
  --sx-color-primary-container: #e5e7eb !important;
  --sx-color-on-primary-container: #1f2937 !important;
  --sx-color-surface-tint: #374151 !important;
}

/* Calendar page layout */
.calendar-content-area {
  height: calc(100vh - 108px);
}
@media (min-width: 1024px) {
  .calendar-content-area {
    height: calc(100vh - 64px);
  }
}

/* Schedule-X calendar: wrapper and container fill parent */
.sx-calendar-container {
  display: flex;
  flex-direction: column;
}
.sx-calendar-container .sx-react-calendar-wrapper {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.sx-calendar-container .sx__calendar {
  flex: 1 !important;
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
}

/* Schedule-X: custom event modal -- reset default chrome, use our EventPopover */
.sx__event-modal {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  z-index: 40 !important;
  overflow: visible !important;
}
.sx__event-modal-default {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.sx-calendar-container .sx__calendar-header {
  flex-shrink: 0;
}
.sx-calendar-container .sx__view-container {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
.sx-calendar-container .sx__week-wrapper {
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.sx-calendar-container .sx__month-grid-wrapper {
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Schedule-X: pointer cursor on clickable grid areas and events */
.sx-calendar-container .sx__time-grid-day {
  cursor: pointer;
}
.sx-calendar-container .sx__month-grid-day {
  cursor: pointer;
}
.sx-calendar-container .sx__time-grid-event {
  cursor: pointer;
}
.sx-calendar-container .sx__date-grid-event {
  cursor: pointer;
}

/* Schedule-X: past days -- dimmed background, no pointer */
.sx-calendar-container .sx-past-day {
  background-color: rgba(0, 0, 0, 0.035) !important;
  cursor: default !important;
  pointer-events: none;
}
.sx-calendar-container .sx-past-day .sx__time-grid-event,
.sx-calendar-container .sx-past-day .sx__date-grid-event {
  pointer-events: auto;
  cursor: pointer;
  opacity: 0.7;
}

/* Schedule-X: today -- partial past overlay via gradient (06:00-23:00 = 17h) */
.sx-calendar-container .sx-today-partial {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.035) calc(var(--sx-past-hours, 0) / 17 * 100%),
    transparent calc(var(--sx-past-hours, 0) / 17 * 100%)
  ) !important;
}

/* Schedule-X: minimum height for short events (15 min / point-in-time) */
.sx-calendar-container .sx__time-grid-event {
  min-height: 34px !important;
  z-index: 1;
}
.sx-calendar-container .sx__time-grid-event:hover {
  z-index: 10 !important;
}
.sx-calendar-container .sx__time-grid-event .sx__time-grid-event-inner {
  min-height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sx-calendar-container .sx__time-grid-event .sx__time-grid-event-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Compact layout for short events: title and time side-by-side */
.sx-calendar-container .sx__title-and-time-compact {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px !important;
  min-height: 20px !important;
}

/* Schedule-X: compact day headers (desktop + mobile) */
.sx-calendar-container .sx__week-grid__day-name {
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  color: var(--text-tertiary, #9ca3af) !important;
}
.sx-calendar-container .sx__week-grid__date-number {
  width: 28px !important;
  height: 28px !important;
  font-size: 13px !important;
  line-height: 28px !important;
  font-weight: 500 !important;
}
.sx-calendar-container .sx__week-grid__date {
  padding: 4px 0 !important;
}

/* View selector dropdown items */
.sx__view-selection-item:hover,
.sx__view-selection-item:focus {
  background-color: #374151 !important;
  color: #fff !important;
}
.sx__view-selection-item.is-selected {
  background-color: #e5e7eb !important;
  color: #1f2937 !important;
}
.sx__view-selection-item.is-selected:hover,
.sx__view-selection-item.is-selected:focus {
  background-color: #374151 !important;
  color: #fff !important;
}

/* Today day-name color in week grid header */
.sx__week-grid__date--is-today .sx__week-grid__day-name {
  color: #374151 !important;
}

/* Today date circle */
.sx__week-grid__date--is-today .sx__week-grid__date-number {
  background-color: #374151 !important;
  color: #fff !important;
  border-radius: 50% !important;
}

/* Month grid today */
.sx__month-grid-day__header-date.sx__is-today {
  background-color: #374151 !important;
  color: #fff !important;
}

/* Date-picker popup: today + selected */
.sx__date-picker__day.sx__date-picker__day--today {
  background-color: #374151 !important;
  color: #fff !important;
}
.sx__date-picker__day.sx__date-picker__day--selected {
  background-color: #e5e7eb !important;
  color: #1f2937 !important;
}
.sx__date-picker__day:focus {
  outline-color: #374151 !important;
}
.sx__date-input--active .sx__date-input {
  border-color: #374151 !important;
  outline-color: #374151 !important;
}
.sx__date-input--active .sx__date-input-label {
  color: #374151 !important;
}
.sx__date-input-chevron-wrapper:focus {
  border-color: #374151 !important;
}

/* Month-year hover in date picker */
.sx__date-picker__month-view-header__month-year:hover {
  color: #374151 !important;
}
/* Month picker hover */
.sx__date-picker__years-view-accordion__month:hover {
  background-color: #374151 !important;
  color: #fff !important;
}

/* Month-agenda active day border */
.sx__month-agenda-day--active {
  box-shadow: inset 0 0 0 3px #374151 !important;
}

/* Schedule-X: selected day column highlight */
.sx-calendar-container .sx-selected-day {
  background-color: rgba(59, 130, 246, 0.04) !important;
}

/* Schedule-X: hide day-of-week + date circle in day view */
.sx-calendar-container .is-day-view .sx__week-header {
  display: none !important;
}

/* Schedule-X: hide date-picker on desktop (mini-calendar in sidebar) */
@media (min-width: 1280px) {
  .sx-calendar-container .sx__date-picker-wrapper {
    display: none !important;
  }
}

/* Schedule-X: compact header on mobile */
@media (max-width: 1023px) {
  .sx-calendar-container .sx__week-header {
    min-height: 0 !important;
  }
  .sx-calendar-container .sx__calendar-header-content {
    padding: 4px 8px !important;
    gap: 4px !important;
  }
  .sx-calendar-container .sx__date-input {
    font-size: 13px !important;
  }
  .sx-calendar-container .sx__calendar-header .sx__date-input input {
    font-size: 13px !important;
    padding: 2px 4px !important;
  }
  .sx-calendar-container .sx__range-heading {
    font-size: 15px !important;
  }
}