/* ============================================
   CONTRIBUTION HEATMAP INDICATOR BARS
   ============================================
   Visual indicator bars on timeline cells showing
   per-person flexibility level (bottom bar on each cell)
   ============================================ */

/* Enable contribution indicator via fairness-shading body class */
body.fairness-shading .timeline-cell[data-burden] {
  position: relative;
}

/* Burden indicator bar — RE-ENABLED as segmented battery-style bar.
   Styled per-level in style.css using hard gradient stops for 5 segments. */

/* ============================================
   FAIRNESS LEGEND IN SETTINGS/VIEW PANEL
   ============================================ */

.fairness-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  padding: 8px;
  background: var(--surface-secondary, #f8fafc);
  border-radius: 6px;
}

.fairness-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-secondary, #64748b);
}

.fairness-legend-color {
  width: 16px;
  height: 4px;
  border-radius: 2px;
}

.fairness-legend-color.excellent {
  background: linear-gradient(90deg, #4c1d95 0%, #6d28d9 100%);
}

.fairness-legend-color.good {
  background: linear-gradient(90deg, #5b21b6 0%, #7c3aed 100%);
}

.fairness-legend-color.fair {
  background: linear-gradient(90deg, #6d28d9 0%, #8b5cf6 100%);
}

.fairness-legend-color.challenging {
  background: linear-gradient(90deg, #7c3aed 0%, #a78bfa 100%);
}

.fairness-legend-color.difficult {
  background: linear-gradient(90deg, #8b5cf6 0%, #c4b5fd 100%);
}

/* Simplified 3-level scale (matches getEventFairnessLevel output) */
.fairness-legend-color.moderate {
  background: linear-gradient(90deg, #6d28d9 0%, #8b5cf6 100%);
}

.fairness-legend-color.unfair {
  background: linear-gradient(90deg, #7c3aed 0%, #c4b5fd 100%);
}

/* ── Canonical band-key aliases ────────────────────────────────
   Phase 2 routes cell painters through FairnessPresentation.bandFor,
   which emits the canonical 5 keys (excellent / balanced / mixed /
   stretched / overloaded). These selectors map the new keys onto the
   same swatches the legacy keys use so the heatmap legend renders
   identically whether the new or old vocabulary is in play. */
.fairness-legend-color.balanced {
  background: linear-gradient(90deg, #5b21b6 0%, #7c3aed 100%);
}
.fairness-legend-color.mixed {
  background: linear-gradient(90deg, #6d28d9 0%, #8b5cf6 100%);
}
.fairness-legend-color.stretched {
  background: linear-gradient(90deg, #7c3aed 0%, #a78bfa 100%);
}
.fairness-legend-color.overloaded {
  background: linear-gradient(90deg, #8b5cf6 0%, #c4b5fd 100%);
}

body.dark-mode .fairness-legend {
  background: var(--surface-secondary, #1e293b);
}

body.dark-mode .fairness-legend-item {
  color: var(--text-secondary, #94a3b8);
}

/* ============================================
   FAIRNESS TOGGLE IN VIEW PANEL
   ============================================ */

.fairness-heatmap-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-top: 1px solid var(--border-color, #e2e8f0);
  margin-top: 8px;
}

.fairness-heatmap-toggle label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-primary, #1e293b);
  cursor: pointer;
}

.fairness-heatmap-toggle label i {
  color: var(--accent, #3b82f6);
  font-size: 14px;
}

body.dark-mode .fairness-heatmap-toggle {
  border-top-color: var(--border-color, #334155);
}

body.dark-mode .fairness-heatmap-toggle label {
  color: var(--text-primary, #f1f5f9);
}

/* ============================================
   CONFLICT WITH WORKING/SLEEPING HOURS BAR
   ============================================
   Working hours: green box-shadow at bottom
   Sleeping hours: red box-shadow at top
   Fairness heatmap: uses ::before at bottom
   All three can coexist via different pseudo/box-shadow
   ============================================ */

/* Burden ::before combo bar — keep disabled, ::after is used for segmented bar */
body.fairness-shading .timeline-cell.working-hour[data-burden]::before {
  display: none;
}

/* ============================================
   VIEW MODE MODAL TOGGLE STYLING
   ============================================ */

.vm-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.vm-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-primary, #1e293b);
  cursor: pointer;
}

.vm-toggle-label i {
  color: var(--accent, #3b82f6);
  font-size: 14px;
  width: 16px;
}

.vm-toggle-hint {
  font-size: 11px;
  color: var(--text-tertiary, #94a3b8);
  margin-left: 4px;
}

body.dark-mode .vm-toggle-label {
  color: var(--text-primary, #f1f5f9);
}

body.dark-mode .vm-toggle-hint {
  color: var(--text-tertiary, #64748b);
}

/* ============================================
   DENSITY HEATMAP SHADING
   ============================================
   Shows event density - darker colors indicate
   more scheduled events at that time slot
   ============================================ */

/* Enable density heatmap mode via body attribute */
body[data-density-heatmap="true"] .timeline-cell[data-density] {
  position: relative;
}

/* Density levels - intensity-based coloring */
/* Empty - no events */
body[data-density-heatmap="true"] .timeline-cell[data-density="empty"] {
  background: rgba(148, 163, 184, 0.05) !important;
}

/* Light - 1 event */
body[data-density-heatmap="true"] .timeline-cell[data-density="light"] {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.10) 100%) !important;
}

/* Medium - 2 events */
body[data-density-heatmap="true"] .timeline-cell[data-density="medium"] {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.30) 0%, rgba(59, 130, 246, 0.22) 100%) !important;
}

/* Busy - 3 events */
body[data-density-heatmap="true"] .timeline-cell[data-density="heavy"] {
  background: linear-gradient(180deg, rgba(234, 88, 12, 0.35) 0%, rgba(234, 88, 12, 0.25) 100%) !important;
}

/* Saturated - 4+ events (conflicts) */
body[data-density-heatmap="true"] .timeline-cell[data-density="saturated"] {
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.40) 0%, rgba(220, 38, 38, 0.30) 100%) !important;
}

/* Dark mode density colors - brighter for visibility */
body.dark-mode[data-density-heatmap="true"] .timeline-cell[data-density="empty"] {
  background: rgba(71, 85, 105, 0.15) !important;
}

body.dark-mode[data-density-heatmap="true"] .timeline-cell[data-density="light"] {
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.25) 0%, rgba(96, 165, 250, 0.18) 100%) !important;
}

body.dark-mode[data-density-heatmap="true"] .timeline-cell[data-density="medium"] {
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.40) 0%, rgba(96, 165, 250, 0.30) 100%) !important;
}

body.dark-mode[data-density-heatmap="true"] .timeline-cell[data-density="heavy"] {
  background: linear-gradient(180deg, rgba(251, 146, 60, 0.45) 0%, rgba(251, 146, 60, 0.35) 100%) !important;
}

body.dark-mode[data-density-heatmap="true"] .timeline-cell[data-density="saturated"] {
  background: linear-gradient(180deg, rgba(248, 113, 113, 0.50) 0%, rgba(248, 113, 113, 0.40) 100%) !important;
}

/* Density indicator bar at bottom of cell */
body[data-density-heatmap="true"] .timeline-cell[data-density]::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  opacity: 0.9;
  transition: height 0.15s ease;
  pointer-events: none;
}

body[data-density-heatmap="true"] .timeline-cell[data-density]:hover::after {
  height: 5px;
}

body[data-density-heatmap="true"] .timeline-cell[data-density="light"]::after {
  background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
}

body[data-density-heatmap="true"] .timeline-cell[data-density="medium"]::after {
  background: linear-gradient(90deg, #2563eb 0%, #3b82f6 100%);
}

body[data-density-heatmap="true"] .timeline-cell[data-density="heavy"]::after {
  background: linear-gradient(90deg, #ea580c 0%, #f97316 100%);
}

body[data-density-heatmap="true"] .timeline-cell[data-density="saturated"]::after {
  background: linear-gradient(90deg, #dc2626 0%, #ef4444 100%);
}

/* ============================================
   DENSITY LEGEND
   ============================================ */

.density-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  padding: 8px;
  background: var(--surface-secondary, #f8fafc);
  border-radius: 6px;
}

.density-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-secondary, #64748b);
}

.density-legend-color {
  width: 16px;
  height: 8px;
  border-radius: 2px;
}

.density-legend-color.empty {
  background: rgba(148, 163, 184, 0.2);
  border: 1px dashed #94a3b8;
}

.density-legend-color.light {
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.3) 0%, rgba(96, 165, 250, 0.3) 100%);
}

.density-legend-color.medium {
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.5) 0%, rgba(37, 99, 235, 0.5) 100%);
}

.density-legend-color.heavy {
  background: linear-gradient(90deg, rgba(234, 88, 12, 0.5) 0%, rgba(249, 115, 22, 0.5) 100%);
}

.density-legend-color.saturated {
  background: linear-gradient(90deg, rgba(220, 38, 38, 0.6) 0%, rgba(239, 68, 68, 0.6) 100%);
}

body.dark-mode .density-legend {
  background: var(--surface-secondary, #1e293b);
}

/* ============================================
   AVAILABILITY SUMMARY HEATMAP BAR
   ============================================
   A horizontal bar showing team availability
   at each hour across all timezones
   ============================================ */