/* Sticky column shadows */
.shadow-sticky-left {
  box-shadow: inset 5px 2px 9px -8px rgba(0, 0, 0, 0.16);
}
/*
 * 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 Checkbox Tick Mark Styles */
[data-custom-box] {
  position: relative;
}

[data-custom-box] [data-tick-mark] {
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.2s ease-in-out;
}

[data-custom-box].bg-teal-500 [data-tick-mark] {
  opacity: 1;
  transform: scale(1);
}

/* Ensure tick mark is properly centered and styled */
[data-custom-box] [data-tick-mark] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 10px;
  color: white;
  font-weight: bold;
  line-height: 1;
}

/* Kitchen field removal styles */
.session-timeoff-field.marked-for-deletion,
.sync-timing-field.marked-for-deletion {
  opacity: 0.5;
  background-color: #fef2f2;
  border-color: #fecaca;
  position: relative;
}

.session-timeoff-field.marked-for-deletion::after,
.sync-timing-field.marked-for-deletion::after {
  content: "Marked for deletion";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #dc2626;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  z-index: 10;
}

/* Utilities: scrollbar-hide and scrollbar-thin (Tailwind-friendly) */
.scrollbar-hide {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* SortableJS Styles */
.sortable-ghost {
  opacity: 0.4;
  background-color: #f3f4f6;
  border: 2px dashed #d1d5db;
}

.sortable-chosen {
  background-color: #eff6ff;
  border: 1px solid #3b82f6;
}

.sortable-drag {
  opacity: 0.8;
  transform: rotate(2deg);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Drag handle styles */
.drag-handle {
  cursor: move;
  transition: color 0.2s ease;
}

.drag-handle:hover {
  color: #6b7280 !important;
}

/* Sortable item styles */
.sortable-item {
  transition: all 0.2s ease;
}

.sortable-item:hover {
  background-color: #f9fafb;
}

/* Flatpickr overrides to keep inputs full width and preserve border when static */
.flatpickr-wrapper {
    width: 100%;
}

.flatpickr-input {
    width: 100% !important;
    display: block;
}