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


/* Remove arrows from number input fields */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* Daily calendar: suppress FullCalendar's "today" highlight (entire column is today) */
[data-booking-calendar-mode-value="daily"] .fc-day-today {
  background: transparent !important;
}

/* Balloon-style events: narrower than the column, rounded, no FullCalendar chrome */
.fc .fc-timegrid-event-harness .fc-timegrid-event {
  border-radius: 8px;
  overflow: visible;
  margin: 1px 6px;
}

/* Taller time slots so event balloons have room */
.fc .fc-timegrid-slot {
  height: 2.5em;
}

/* Tier input: muted when disabled, highlighted when editable */
.tier-input {
  border-color: hsl(var(--color-info-hsl) / 0.5);
  background-color: white;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

fieldset:not(:disabled) .tier-input {
  border-color: var(--color-primary);
  background-color: hsl(var(--color-primary-hsl) / 0.05);
  box-shadow: 0 0 0 2px hsl(var(--color-primary-hsl) / 0.15);
}

fieldset:not(:disabled) .tier-input:has(input:focus) {
  border-color: var(--color-primary);
  background-color: hsl(var(--color-primary-hsl) / 0.1);
  box-shadow: 0 0 0 3px hsl(var(--color-primary-hsl) / 0.25);
}

/* Mobile navigation: slide-down panel */
.mobile-nav-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
  overflow: hidden;
}

.mobile-nav-panel > * {
  overflow: hidden;
}

.mobile-nav-panel.open {
  grid-template-rows: 1fr;
}

/* Calendar editing mode: dashed border and subtle background to indicate editable state */
.calendar-editing {
  border: 2px dashed hsl(var(--color-primary-hsl) / 0.4);
  border-radius: 12px;
  padding: 4px;
  background: hsl(var(--color-primary-hsl) / 0.03);
}

.calendar-editing .fc-timegrid-event {
  cursor: grab;
}

.calendar-editing .fc-timegrid-event:active {
  cursor: grabbing;
}

.calendar-delete-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: hsl(0 70% 50%);
  color: #fff;
  font-size: 9px;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
  border: none;
  padding: 0;
  z-index: 10;
}

.calendar-delete-btn:hover {
  background: hsl(0 70% 40%);
}

/* Remove browser autofill background color */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px var(--color-neutral) inset;
  -webkit-text-fill-color: var(--color-neutral-content);
  transition: background-color 5000s ease-in-out 0s;
}