/* Application styles */

/* Prevent modal scroll-through */
html:has(dialog#modal-dialog[open]) {
  overflow: hidden;
}

input::-webkit-contacts-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  position: absolute;
  right: 0;
}

.bg-gradient {
  background: linear-gradient(185deg, #f0f9ff, #fef3f2, #ecfdf3, #fffaeb, #fdf2fa);
  background-size: 1000% 1000%;

  animation: bg-animation 240s ease infinite;
}

@keyframes bg-animation {
  0% {
    background-position: 79% 0%
  }

  50% {
    background-position: 22% 100%
  }

  100% {
    background-position: 79% 0%
  }
}

.item-new {
  animation: fade-in 0.5s both;
}

.item-updated {
  animation: pulse 2s both;
}

.item-destroyed,
.quick-fade-out {
  animation: fade-out 0.2s both;
}

.slow-fade-out {
  animation: fade-out 2s both;
}

.autoremove {
  animation: appear-then-fade 4s both;
}

.item:hover .actions {
  display: flex;
}

@keyframes slide-in {
  0% {
    transform: translateX(-100%);
  }
}

@keyframes slide-out {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes appear-then-fade {

  0%,
  100% {
    opacity: 0
  }

  5%,
  60% {
    opacity: 1
  }
}

@keyframes fade-out {

  100% {
    opacity: 0
  }
}

@keyframes pulse {
  0% {
    background-color: #ffc;
  }

  100% {
    background-color: none;
  }
}

turbo-frame[busy]:not(.no-spinner) div:not(.pilea-loader) {
  opacity: 70%;
  pointer-events: none;
}

.fixed-center-block {
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
  margin-bottom: auto;
  position: absolute;
  inset: 0px 0px 0px 0px;
}

.show-when-disabled {
  display: none;
}

[disabled] .show-when-disabled {
  display: initial;
}

.show-when-enabled {
  display: initial;
}

[disabled] .show-when-enabled {
  display: none;
}

.text-segment {
  position: relative;
}

.text-segment mark.highlight {
  position: relative;
  background-color: #ffc;
}

.text-segment mark.highlight-service {
  position: relative;
  background-color: #e6e0f3;
  /* Soft purple */
}

.sticky {
  z-index: 10;
}

.dotty-loading::after {
  display: inline-block;
  animation: dotty steps(1, end) 1s infinite;
  content: '';
}

@keyframes dotty {
  0% {
    content: '';
  }

  25% {
    content: '.';
  }

  50% {
    content: '..';
  }

  75% {
    content: '...';
  }

  100% {
    content: '';
  }
}

/* Air Datepicker Overrides */

/* air-datepicker */

.air-datepicker {
  --adp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --adp-font-size: 14px;
  --adp-width: 246px;
  --adp-z-index: 0;
  --adp-padding: 4px;
  --adp-grid-areas: "nav" "body" "timepicker" "buttons";
  --adp-transition-duration: 0.3s;
  --adp-transition-ease: ease-out;
  --adp-transition-offset: 8px;
  --adp-background-color: #fff;
  --adp-background-color-hover: #f0f0f0;
  --adp-background-color-active: #eaeaea;
  --adp-background-color-in-range: rgba(16, 16, 16, 0.1);
  --adp-background-color-in-range-focused: rgba(236, 236, 236, 0.2);
  --adp-background-color-selected-other-month-focused: #f1f1f1;
  --adp-background-color-selected-other-month: #e6e6e6;
  --adp-color: #4a4a4a;
  --adp-color-secondary: #9c9c9c;
  --adp-accent-color: #0a0a0a;
  --adp-color-current-date: var(--adp-accent-color);
  --adp-color-other-month: #dedede;
  --adp-color-disabled: #aeaeae;
  --adp-color-disabled-in-range: #939393;
  --adp-color-other-month-hover: #c5c5c5;
  --adp-border-color: rgba(0, 0, 0, 0.1);
  --adp-border-color-inner: #efefef;
  --adp-border-radius: 8px;
  --adp-border-color-inline: #d7d7d7;
  --adp-nav-height: 32px;
  --adp-nav-arrow-color: var(--adp-color-secondary);
  --adp-nav-action-size: 32px;
  --adp-nav-color-secondary: var(--adp-color-secondary);
  --adp-day-name-color: #464646;
  --adp-day-name-color-hover: #f1f1f1;
  --adp-day-cell-width: 1fr;
  --adp-day-cell-height: 32px;
  --adp-month-cell-height: 42px;
  --adp-year-cell-height: 56px;
  --adp-pointer-size: 10px;
  --adp-poiner-border-radius: 2px;
  --adp-pointer-offset: 14px;
  --adp-cell-border-radius: 4px;
  --adp-cell-background-color-hover: var(--adp-background-color-hover);
  --adp-cell-background-color-selected: #1d1d1d;
  --adp-cell-background-color-selected-hover: #303030;
  --adp-cell-background-color-in-range: rgba(38, 38, 38, 0.1);
  --adp-cell-background-color-in-range-hover: rgba(44, 44, 44, 0.2);
  --adp-cell-border-color-in-range: var(--adp-cell-background-color-selected);
  --adp-btn-height: 32px;
  --adp-btn-color: var(--adp-accent-color);
  --adp-btn-color-hover: var(--adp-color);
  --adp-btn-border-radius: var(--adp-border-radius);
  --adp-btn-background-color-hover: var(--adp-background-color-hover);
  --adp-btn-background-color-active: var(--adp-background-color-active);
  --adp-time-track-height: 1px;
  --adp-time-track-color: #dedede;
  --adp-time-track-color-hover: #b1b1b1;
  --adp-time-thumb-size: 12px;
  --adp-time-padding-inner: 10px;
  --adp-time-day-period-color: var(--adp-color-secondary);
  --adp-mobile-font-size: 16px;
  --adp-mobile-nav-height: 40px;
  --adp-mobile-width: 320px;
  --adp-mobile-day-cell-height: 38px;
  --adp-mobile-month-cell-height: 48px;
  --adp-mobile-year-cell-height: 64px;
}

.air-datepicker-overlay {
  --adp-overlay-background-color: rgba(0, 0, 0, 0.3);
  --adp-overlay-transition-duration: 0.3s;
  --adp-overlay-transition-ease: ease-out;
  --adp-overlay-z-index: 99;
}

.air-datepicker-cell.-selected-.-day- {
  color: #ffffff;
  /* Ensure selected cell text is also light in dark mode */
  background: var(--adp-cell-background-color-selected);
}

.air-datepicker-cell.-selected-.-year- {
  color: #ffffff;
  /* Ensure selected cell text is also light in dark mode */
  background: var(--adp-cell-background-color-selected);
}

.air-datepicker-cell.-selected-.-month- {
  color: #ffffff;
  /* Ensure selected cell text is also light in dark mode */
  background: var(--adp-cell-background-color-selected);
}

.air-datepicker-cell.-selected- {
  color: #ffffff;
  /* Ensure selected cell text is also light in dark mode */
  background: var(--adp-cell-background-color-selected);
}

.air-datepicker-cell.-selected-.-current- {
  color: #ffffff;
  /* Ensure selected cell text is also light in dark mode */
  background: var(--adp-cell-background-color-selected);
}

.air-datepicker-cell.-current- {
  border: 1px solid #bdbdbd !important;
}

.air-datepicker-cell.-selected-.-day-.-other-month- {
  color: #cccccc;
  /* Ensure selected cell text is also light in dark mode */
  background: #7e7e7e;
}

.air-datepicker--navigation {
  width: 100%;
}

.air-datepicker--pointer {
  opacity: 0;
}

.air-datepicker {
  background: var(--adp-background-color);
  border: 1px solid var(--adp-border-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: var(--adp-border-radius);
  box-sizing: content-box;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, max-content);
  grid-template-areas: var(--adp-grid-areas);
  font-family: var(--adp-font-family), sans-serif;
  font-size: var(--adp-font-size);
  color: var(--adp-color);
  width: var(--adp-width);
  position: absolute;
  transition: opacity var(--adp-transition-duration) var(--adp-transition-ease),
    transform var(--adp-transition-duration) var(--adp-transition-ease);
  z-index: var(--adp-z-index);
}

.air-datepicker-cell.-selected- {
  color: #1d1d1d;
  border: none;
  background: var(--adp-cell-background-color-selected);
}

.air-datepicker-cell.-disabled- {
  cursor: not-allowed;
}

/* Add a new rule for dark mode selected cells if needed, or adjust the general .air-datepicker-cell.-selected- inside the dark mode media query */
.dark {
  .air-datepicker-cell.-selected- {
    color: #e0e0e0;
    /* Example: light text for selected cells in dark mode */
    /* background: var(--adp-cell-background-color-selected); Is already set within .air-datepicker dark vars */
  }
}

/* Time-only picker styles */
.air-datepicker.only-timepicker .air-datepicker--navigation {
  display: none;
}

.air-datepicker.only-timepicker .air-datepicker--content {
  display: none;
}

.air-datepicker.only-timepicker .air-datepicker--time {
  border-top: none;
}