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

@import url("/assets/flatpickr-f87cc8cb.css");
#unread_comments_badge.hidden,
#unread_badge_container.hidden {
  display: none;
}

.announcement-banner {
  animation: announcement-slide 220ms ease-out;
}

@keyframes announcement-slide {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stamp {
  --stamp-brand: var(--color-pla-600, #007538);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.75rem;
  border: 5px solid var(--stamp-brand);
  border-radius: 0.5rem;
  transform: rotate(-7deg);
  box-sizing: border-box;
  position: relative;
  filter: url(#distressed);
}

.stamp-text {
  color: var(--stamp-brand);
  display: inline-block;
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 1;
  border-radius: 0.25rem;
}

.stamp-details {
  position: relative;
  padding-top: 1.75rem;
  padding-right: 8rem;
}

.stamp-float {
  position: absolute;
  top: 0;
  right: 0;
}

.dark .stamp {
  --stamp-brand: var(--color-pla-400, #66bd8d);
}

.dark .stamp-text {
  color: var(--stamp-brand);
}

.btn {
  cursor: pointer;
}

button {
  cursor: pointer;
}

/*.btn-link {*/
/*  background: none;*/
/*  border: none;*/
/*  padding: 0;*/
/*  color: blue;*/
/*  text-decoration: none;*/
/*  text-align: left;*/
/*  width: 100%;*/
/*  cursor: pointer;*/
/*}*/

.flash {
  padding: 10px;
  margin: 10px 0;
  border-radius: 3px;
}

.flash.notice {
  background-color: #d4edda;
  border-color: #c3e6cb;
  color: #155724;
}

.flash.alert {
  background-color: #f8d7da;
  border-color: #f5c6cb;
  color: #721c24;
}

.toast {
  /*transform: translateX(100%);*/
  transition: transform 300ms ease-in-out;
}

.toast-message {
  /*transform: translateX(100%);*/
  transition: transform 300ms ease-in-out, top 300ms ease-in-out;
}

/* Navigation responsiveness */
.mobile-nav-toggle {
  display: none;
}

.mobile-menu {
  display: none;
}

.mobile-menu.open {
  display: block;
}

.desktop-actions {
  display: flex;
}

.hamburger {
  position: relative;
  width: 24px;
  height: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hamburger-line {
  height: 2px;
  width: 100%;
  border-radius: 9999px;
  background: currentColor;
  opacity: 0.85;
  transition: transform 200ms ease, opacity 200ms ease;
}

.mobile-nav-toggle.open .hamburger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.mobile-nav-toggle.open .hamburger-line:nth-child(2) {
  opacity: 0;
}

.mobile-nav-toggle.open .hamburger-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

@media (max-width: 1124px) {
  .desktop-nav {
    display: none;
  }

  .desktop-actions {
    display: none;
  }

  .mobile-nav-toggle {
    display: inline-flex;
  }

  .mobile-menu nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .mobile-menu nav a,
  .mobile-menu nav button {
    width: 100%;
    text-align: left;
  }

  .mobile-menu [data-controller="dropdown"] {
    width: 100%;
  }

  .mobile-menu [data-dropdown-target="menu"] {
    left: 0;
    right: auto;
    transform: none;
    width: calc(100% - 1rem);
    max-width: none;
  }
}

.comments-header {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.comments-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

@media (min-width: 1320px) {
  .comments-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .comments-actions {
    justify-content: flex-end;
    gap: 0.75rem;
  }
}

html.modal-open,
body.modal-open {
  overflow: hidden;
}

#toast-container > div {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

/*.toast.translate-x-0 {*/
/*  transform: translateX(0);*/
/*}*/

/*.toast.translate-x-full {*/
/*  transform: translateX(100%);*/
/*}*/

.nested-fields.pending-removal {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

/*@keyframes fadeIn {*/
/*  from { opacity: 0; transform: translateY(-2px); }*/
/*  to { opacity: 1; transform: translateY(0); }*/
/*}*/

.group:hover svg {
  animation: fadeIn 0.2s ease-out;
}

/* Hide browser's default clear button across browsers */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
}

input[type="search"]::-ms-clear,
input[type="search"]::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

#modal_confirm_dialog_frame:empty,
#modal_confirm_dialog_frame:empty {
  display: none;
}

.nav-mobile-toggle {
  display: flex;
}

.unread-indicator-mobile {
  display: flex;
}

.unread-indicator-desktop {
  display: none;
}

@media (min-width: 1063px) {
  .primary-nav-desktop,
  .primary-nav-desktop.hidden {
    display: flex !important;
  }

  .nav-mobile-toggle {
    display: none !important;
  }

  .unread-indicator-mobile {
    display: none !important;
  }

  .unread-indicator-desktop {
    display: flex !important;
  }
}

.toggle-no-mark {
  background-image: none;
}

.fade-element {
  transition: opacity 0.4s ease-in-out,
  max-height 0.5s ease-in-out,
  transform 0.4s ease-in-out,
  margin 0.5s ease-in-out,
  padding 0.5s ease-in-out;
  opacity: 1;
  max-height: 1000px;
  transform: translateY(0);
  overflow: hidden;
}

.fade-element.hidden {
  opacity: 0;
  max-height: 0;
  transform: translateY(-10px);
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
}

/* Flatpickr Dark Mode Theme */

/* Light mode - default theme */
.flatpickr-calendar {
  background-color: #f9fafb !important;
  border-color: #d1d5db !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
  color: #111827 !important;
}

.flatpickr-calendar.flatpickr-open {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  color: #4b5563 !important;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  background-color: #f3f4f6 !important;
}

.flatpickr-months .flatpickr-month {
  background-color: transparent !important;
  color: #1f2937 !important;
}

.flatpickr-weekdays {
  background-color: #f9fafb !important;
  color: #6b7280 !important;
}

.flatpickr-days {
  background-color: #f9fafb !important;
}

.flatpickr-day {
  color: #374151 !important;
}

.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day.today:hover {
  background-color: #e5e7eb !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background-color: #00853e !important;
  border-color: #00853e !important;
  color: #ffffff !important;
}

.flatpickr-day.today {
  border-color: #9ca3af !important;
}

.flatpickr-day.inRange {
  background-color: #dbeafe !important;
  color: #374151 !important;
}

.flatpickr-day.disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #d1d5db !important;
}

.flatpickr-time {
  background-color: #f9fafb !important;
  border-top-color: #d1d5db !important;
}

.flatpickr-time input {
  background-color: transparent !important;
  color: #374151 !important;
}

.flatpickr-time input::placeholder {
  color: #9ca3af !important;
}

.flatpickr-time.hasSeconds .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  color: #4b5563 !important;
}

/* Dark mode */
.dark .flatpickr-calendar {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
  color: #f3f4f6 !important;
}

.dark .flatpickr-calendar.flatpickr-open {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5) !important;
}

.dark .flatpickr-months .flatpickr-prev-month,
.dark .flatpickr-months .flatpickr-next-month {
  color: #d1d5db !important;
}

.dark .flatpickr-months .flatpickr-prev-month:hover,
.dark .flatpickr-months .flatpickr-next-month:hover {
  background-color: #374151 !important;
}

.dark .flatpickr-months .flatpickr-month {
  background-color: transparent !important;
  color: #f3f4f6 !important;
}

.dark .flatpickr-weekdays {
  background-color: #1f2937 !important;
  color: #9ca3af !important;
}

.dark .flatpickr-days {
  background-color: #1f2937 !important;
}

.dark .flatpickr-day {
  color: #d1d5db !important;
}

.dark .flatpickr-day:hover,
.dark .flatpickr-day.prevMonthDay:hover,
.dark .flatpickr-day.nextMonthDay:hover,
.dark .flatpickr-day.today:hover {
  background-color: #374151 !important;
}

.dark .flatpickr-day.selected,
.dark .flatpickr-day.startRange,
.dark .flatpickr-day.endRange {
  background-color: transparent !important;
  border-color: #66bd8d !important;
  color: #66bd8d !important;
}

.dark .flatpickr-day.today {
  border-color: #6b7280 !important;
}

.dark .flatpickr-day.inRange {
  background-color: #1e40af !important;
  color: #93c5fd !important;
}

.dark .flatpickr-day.disabled,
.dark .flatpickr-day.prevMonthDay,
.dark .flatpickr-day.nextMonthDay {
  color: #4b5563 !important;
}

.dark .flatpickr-time {
  background-color: #1f2937 !important;
  border-top-color: #374151 !important;
}

.dark .flatpickr-time input {
  background-color: transparent !important;
  color: #f3f4f6 !important;
}

.dark .flatpickr-time input::placeholder {
  color: #6b7280 !important;
}

.dark .flatpickr-time.hasSeconds .flatpickr-time-separator,
.dark .flatpickr-time .flatpickr-am-pm {
  color: #d1d5db !important;
}

.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
  background-color: #e6f4ec !important;
  color: #006432 !important;
}

.dark .flatpickr-time input:hover,
.dark .flatpickr-time .flatpickr-am-pm:hover,
.dark .flatpickr-time input:focus,
.dark .flatpickr-time .flatpickr-am-pm:focus {
  background-color: rgba(102, 189, 141, 0.15) !important;
  color: #66bd8d !important;
}

.dialog-centered {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

/* Suppress browser autofill for all form fields */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px rgba(243, 244, 246, 0) inset !important;
  box-shadow: 0 0 0 1000px rgba(243, 244, 246, 0) inset !important;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #111827 !important;
  caret-color: #111827 !important;
}

/* Dark mode autofill suppression */
@media (prefers-color-scheme: dark) {
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active,
  textarea:-webkit-autofill,
  textarea:-webkit-autofill:hover,
  textarea:-webkit-autofill:focus,
  textarea:-webkit-autofill:active,
  select:-webkit-autofill,
  select:-webkit-autofill:hover,
  select:-webkit-autofill:focus,
  select:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px rgba(17, 24, 39, 0) inset !important;
    box-shadow: 0 0 0 1000px rgba(17, 24, 39, 0) inset !important;
  }

  input:-webkit-autofill,
  textarea:-webkit-autofill,
  select:-webkit-autofill {
    -webkit-text-fill-color: #f3f4f6 !important;
    caret-color: #f3f4f6 !important;
  }
}

/* Specific autofill suppression for phone number fields */
input[type="tel"]:-webkit-autofill,
input[type="tel"]:-webkit-autofill:hover,
input[type="tel"]:-webkit-autofill:focus,
input[type="tel"]:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px rgba(243, 244, 246, 0) inset !important;
}

input[type="tel"]:-webkit-autofill {
  -webkit-text-fill-color: #111827 !important;
  caret-color: #111827 !important;
}

@media (prefers-color-scheme: dark) {
  input[type="tel"]:-webkit-autofill,
  input[type="tel"]:-webkit-autofill:hover,
  input[type="tel"]:-webkit-autofill:focus,
  input[type="tel"]:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px rgba(17, 24, 39, 0) inset !important;
  }

  input[type="tel"]:-webkit-autofill {
    -webkit-text-fill-color: #f3f4f6 !important;
    caret-color: #f3f4f6 !important;
  }
}

/* Specific autofill suppression for number fields (vehicle year, etc) */
input[type="number"]:-webkit-autofill,
input[type="number"]:-webkit-autofill:hover,
input[type="number"]:-webkit-autofill:focus,
input[type="number"]:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px rgba(243, 244, 246, 0) inset !important;
}

input[type="number"]:-webkit-autofill {
  -webkit-text-fill-color: #111827 !important;
  caret-color: #111827 !important;
}

@media (prefers-color-scheme: dark) {
  input[type="number"]:-webkit-autofill,
  input[type="number"]:-webkit-autofill:hover,
  input[type="number"]:-webkit-autofill:focus,
  input[type="number"]:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px rgba(17, 24, 39, 0) inset !important;
  }

  input[type="number"]:-webkit-autofill {
    -webkit-text-fill-color: #f3f4f6 !important;
    caret-color: #f3f4f6 !important;
  }
}

/* Specific autofill suppression for password fields (login and 2FA) */
input[type="password"]:-webkit-autofill,
input[type="password"]:-webkit-autofill:hover,
input[type="password"]:-webkit-autofill:focus,
input[type="password"]:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px rgba(243, 244, 246, 0) inset !important;
}

input[type="password"]:-webkit-autofill {
  -webkit-text-fill-color: #111827 !important;
  caret-color: #111827 !important;
}

@media (prefers-color-scheme: dark) {
  input[type="password"]:-webkit-autofill,
  input[type="password"]:-webkit-autofill:hover,
  input[type="password"]:-webkit-autofill:focus,
  input[type="password"]:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px rgba(17, 24, 39, 0) inset !important;
  }

  input[type="password"]:-webkit-autofill {
    -webkit-text-fill-color: #f3f4f6 !important;
    caret-color: #f3f4f6 !important;
  }
}

/* Specific autofill suppression for date/datetime fields (pickup/delivery dates) */
input[type="date"]:-webkit-autofill,
input[type="date"]:-webkit-autofill:hover,
input[type="date"]:-webkit-autofill:focus,
input[type="date"]:-webkit-autofill:active,
input[type="datetime-local"]:-webkit-autofill,
input[type="datetime-local"]:-webkit-autofill:hover,
input[type="datetime-local"]:-webkit-autofill:focus,
input[type="datetime-local"]:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px rgba(243, 244, 246, 0) inset !important;
}

input[type="date"]:-webkit-autofill,
input[type="datetime-local"]:-webkit-autofill {
  -webkit-text-fill-color: #111827 !important;
  caret-color: #111827 !important;
}

@media (prefers-color-scheme: dark) {
  input[type="date"]:-webkit-autofill,
  input[type="date"]:-webkit-autofill:hover,
  input[type="date"]:-webkit-autofill:focus,
  input[type="date"]:-webkit-autofill:active,
  input[type="datetime-local"]:-webkit-autofill,
  input[type="datetime-local"]:-webkit-autofill:hover,
  input[type="datetime-local"]:-webkit-autofill:focus,
  input[type="datetime-local"]:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px rgba(17, 24, 39, 0) inset !important;
  }

  input[type="date"]:-webkit-autofill,
  input[type="datetime-local"]:-webkit-autofill {
    -webkit-text-fill-color: #f3f4f6 !important;
    caret-color: #f3f4f6 !important;
  }
}

/* Comprehensive autofill suppression for all pickup/delivery fields */
input[data-scheduling-autofill-target]:-webkit-autofill,
input[data-scheduling-autofill-target]:-webkit-autofill:hover,
input[data-scheduling-autofill-target]:-webkit-autofill:focus,
input[data-scheduling-autofill-target]:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px rgba(243, 244, 246, 0) inset !important;
}

input[data-scheduling-autofill-target]:-webkit-autofill {
  -webkit-text-fill-color: #111827 !important;
  caret-color: #111827 !important;
}

@media (prefers-color-scheme: dark) {
  input[data-scheduling-autofill-target]:-webkit-autofill,
  input[data-scheduling-autofill-target]:-webkit-autofill:hover,
  input[data-scheduling-autofill-target]:-webkit-autofill:focus,
  input[data-scheduling-autofill-target]:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px rgba(17, 24, 39, 0) inset !important;
  }

  input[data-scheduling-autofill-target]:-webkit-autofill {
    -webkit-text-fill-color: #f3f4f6 !important;
    caret-color: #f3f4f6 !important;
  }
}