@media (max-width: 640px) {
  .hide-on-mobile {
    display: none;
  }
}

:root {
  --select2-bg: #f3f4f6; /* Light mode background, like bg-gray-100 */
  --select2-text: #1f2937; /* Light mode text, like text-gray-800 */
  --select2-border: #d1d5db; /* Light mode border, like border-gray-300 */
}

/* Avoid global horizontal scrollbar; local scrollers manage overflow */
html, body { max-width: 100%; overflow-x: hidden; }

@media (prefers-color-scheme: dark) {
  :root {
      --select2-bg: #1f2937; /* Similar to bg-gray-800 */
      --select2-selected-bg: #4a5e79; /* Similar to bg-gray-800 */
      --select2-text: #e5e7eb;       /* Similar to text-gray-200 */
      --select2-border: #4b5563;     /* Similar to border-gray-600 */
  }
}

/* Modal container overlay and layering */
#modal-container {
  position: fixed;
  inset: 0;
  z-index: 9999; /* Above navbar and page chrome */
  display: none;       /* hidden by default so it doesn't intercept clicks */
  pointer-events: none;
}
#modal-container.hidden {
  display: none !important;
}
#modal-container:not(.hidden):not(:empty) {
  display: flex;
  align-items: flex-start; /* top aligned for tall modals */
  justify-content: center;
  padding: 2rem;
  background-color: rgba(0,0,0,0.6);
  overflow: auto;
  pointer-events: auto;
}

/* Safety: if the container is visible but contains no modal element, hide it */
#modal-container:not(.hidden):not(:has(.htmx-modal)) {
  display: none !important;
  pointer-events: none !important;
  background: transparent !important;
}

/* --- Gantt container constraints --- */
.gantt-container {
  width: 70% !important;
  
}


/* Prevent body scroll when modal is open */
body.modal-open {
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: none;
}

/* Task list selection highlight */
#task-list .task-row.selected { background-color: #e5edff; }
.dark #task-list .task-row.selected { background-color: #1f2a44; }

/* Frappe Gantt bar styling by status/critical */
.gantt .bar.status-default { fill: #9ca3af; }
.gantt .bar.status-in_progress { fill: #3b82f6; }
.gantt .bar.status-completed { fill: #22c55e; }
.gantt .bar.status-blocked { fill: #ef4444; }
.gantt .bar.critical { stroke: #ef4444; stroke-width: 2; }

.dark .gantt .bar.status-default { fill: #6b7280; }
.dark .gantt .bar.status-in_progress { fill: #60a5fa; }
.dark .gantt .bar.status-completed { fill: #34d399; }
.dark .gantt .bar.status-blocked { fill: #f87171; }
.dark .gantt .bar.critical { stroke: #f87171; }