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

 /* This is hidden because of the initial render flickering when using slimselect */
 select.hidden-on-initial-render {
    visibility: hidden;
    height: 30px; /* height of -ss-main-height */
    line-height: 30px; /* height of -ss-main-height */
    min-height: 30px; /* height of -ss-main-height */
 }

/* Roster v2 - Drag and Drop styles */
.roster-pill--dragging {
  opacity: 0.5;
  outline: 2px dashed #3b82f6;
  outline-offset: 2px;
}

.roster-cell--valid-target {
  background-color: #dcfce7;
  box-shadow: inset 0 0 0 2px #22c55e;
}

.roster-cell--invalid-target {
  background-color: #f3f4f6;
  opacity: 0.5;
}

.roster-cell--hover {
  background-color: #dbeafe;
  box-shadow: inset 0 0 0 2px #3b82f6;
}

/* Roster v2 - cell highlight while the matching compliance sidebar alert is hovered */
.roster-cell[data-alert-highlight="error"] {
  background-color: rgb(254 226 226 / 0.6);
  box-shadow: inset 0 0 0 2px #ef4444;
}

.roster-cell[data-alert-highlight="warning"] {
  background-color: rgb(254 243 199 / 0.6);
  box-shadow: inset 0 0 0 2px #f59e0b;
}

.roster-cell[data-alert-highlight="note"] {
  background-color: rgb(219 234 254 / 0.6);
  box-shadow: inset 0 0 0 2px #3b82f6;
}

/* Roster v2 - compliance accent line: colored when a rule-alert marker is injected into the cell */
td.roster-day {
  border-left: 4px solid transparent;
}

td.roster-day:has([data-alert-severity]) {
  background-image: linear-gradient(to right, var(--alert-glow), transparent 5rem);
}

td.roster-day:has([data-alert-severity="error"]) {
  border-left-color: #fca5a5;
  --alert-glow: rgb(239 68 68 / 0.22);
}

td.roster-day:has([data-alert-severity="warning"]) {
  border-left-color: #fcd34d;
  --alert-glow: rgb(245 158 11 / 0.22);
}

td.roster-day:has([data-alert-severity="note"]) {
  border-left-color: #93c5fd;
  --alert-glow: rgb(59 130 246 / 0.20);
}

/* Entry highlight colors – neon Stabilo textmarker glow */
.roster-pill[data-highlight="rose"],
.roster-pill[data-highlight="lime"],
.roster-pill[data-highlight="yellow"],
.roster-pill[data-highlight="cyan"]    { margin: 3px; }
.roster-pill[data-highlight="rose"]    { box-shadow: 0 0 0 2px white, 0 0 0 4px oklch(0.65 0.28 12),  0 0 8px 2px oklch(0.65 0.28 12);  }
.roster-pill[data-highlight="lime"]    { box-shadow: 0 0 0 2px white, 0 0 0 4px oklch(0.86 0.26 135), 0 0 8px 2px oklch(0.86 0.26 135); }
.roster-pill[data-highlight="yellow"]  { box-shadow: 0 0 0 2px white, 0 0 0 4px oklch(0.90 0.22 100), 0 0 8px 2px oklch(0.90 0.22 100); }
.roster-pill[data-highlight="cyan"]    { box-shadow: 0 0 0 2px white, 0 0 0 4px oklch(0.85 0.16 195), 0 0 8px 2px oklch(0.85 0.16 195); }