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

/* Custom styles for datalist */
input::-webkit-calendar-picker-indicator {
  display: none !important;
}

input[list]::-webkit-input-placeholder {
  color: #6b7280;
}

input[list]:focus::-webkit-input-placeholder {
  color: transparent;
}

/* Style for Firefox */
input[list] {
  -moz-appearance: none;
  text-indent: 0.01px;
  text-overflow: "";
}

/* Custom styles for mobile-friendly client search */
.client-list-item {
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.client-list-item:hover,
.client-list-item:focus {
  background-color: #f3f4f6;
}

@media (max-width: 640px) {
  .client-list-item {
    padding: 0.75rem 1rem;
  }
}

@media (max-width: 767px) {
  .controller-products [data-select-all-target="detailCell"].collapse {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .controller-recibos.action-index .table th,
  .controller-recibos.action-index .table td {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
  }
}

.border-red-500 {
  border-color: #f56565 !important;
}

html,
body {
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}

/* The app shell can paint behind iOS chrome while controls stay in the safe area. */
.app-shell {
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-right: env(safe-area-inset-right, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-safe-left: env(safe-area-inset-left, 0px);
}

.app-shell header nav.container {
  padding-top: max(1rem, var(--app-safe-top));
  padding-right: max(1rem, var(--app-safe-right));
  padding-left: max(1rem, var(--app-safe-left));
}

.app-shell main {
  padding-bottom: var(--app-safe-bottom);
}

.app-shell main.container {
  padding-right: max(1rem, var(--app-safe-right));
  padding-left: max(1rem, var(--app-safe-left));
}

.app-shell main:not(.container) {
  padding-right: var(--app-safe-right);
  padding-left: var(--app-safe-left);
}

.app-shell .booking-modal-panel {
  padding-top: max(1.5rem, var(--app-safe-top));
  padding-right: max(1.5rem, var(--app-safe-right));
  padding-bottom: calc(1.5rem + var(--app-safe-bottom));
  padding-left: max(1.5rem, var(--app-safe-left));
}

.app-shell .booking-mobile-today-button,
.app-shell .booking-mobile-today-button-portal {
  left: max(1.625rem, var(--app-safe-left));
  bottom: var(--app-safe-bottom);
}

.app-shell .app-safe-bottom-action {
  bottom: calc(var(--app-safe-bottom) + 0.75rem);
}

.app-shell [data-pull-to-refresh-target="refreshText"] {
  left: calc((100% + var(--app-safe-left) - var(--app-safe-right)) / 2);
  top: max(3rem, calc(var(--app-safe-top) + 0.75rem));
}

.app-shell [data-image-preview-target="modal"] {
  padding-top: max(1rem, var(--app-safe-top));
  padding-right: max(1rem, var(--app-safe-right));
  padding-bottom: max(1rem, var(--app-safe-bottom));
  padding-left: max(1rem, var(--app-safe-left));
}

@media (min-width: 800px) {
  .app-shell header nav.container {
    padding-top: max(0.75rem, var(--app-safe-top));
  }

  .app-shell [data-image-preview-target="modal"] {
    padding-top: max(1.5rem, var(--app-safe-top));
    padding-right: max(1.5rem, var(--app-safe-right));
    padding-bottom: max(1.5rem, var(--app-safe-bottom));
    padding-left: max(1.5rem, var(--app-safe-left));
  }
}

.line-through {
  text-decoration: line-through;
}