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

.availability-heatmap-bar {
  display: flex;
  height: 8px;
  background: var(--surface-secondary, #f1f5f9);
  border-radius: 4px;
  overflow: hidden;
  margin: 8px 0;
  gap: 1px;
}

.availability-heatmap-bar .hour-segment {
  flex: 1;
  min-width: 0;
  transition: opacity 0.15s ease;
}

.availability-heatmap-bar .hour-segment:hover {
  opacity: 0.8;
  cursor: pointer;
}

/* Availability levels (canonical green→amber→slate 9-step; --avail-* in style.css) */
.availability-heatmap-bar .hour-segment[data-availability="avail-8"] {
  background: var(--avail-8);
}
.availability-heatmap-bar .hour-segment[data-availability="avail-7"] {
  background: var(--avail-7);
}
.availability-heatmap-bar .hour-segment[data-availability="avail-6"] {
  background: var(--avail-6);
}
.availability-heatmap-bar .hour-segment[data-availability="avail-5"] {
  background: var(--avail-5);
}
.availability-heatmap-bar .hour-segment[data-availability="avail-4"] {
  background: var(--avail-4);
}
.availability-heatmap-bar .hour-segment[data-availability="avail-3"] {
  background: var(--avail-3);
}
.availability-heatmap-bar .hour-segment[data-availability="avail-2"] {
  background: var(--avail-2);
}
.availability-heatmap-bar .hour-segment[data-availability="avail-1"] {
  background: var(--avail-1);
}
.availability-heatmap-bar .hour-segment[data-availability="avail-0"] {
  background: var(--avail-0);
}

/* Golden hour indicator */
.availability-heatmap-bar .hour-segment.golden-hour {
  box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.6);
  z-index: 1;
}

/* Dark mode */
body.dark-mode .availability-heatmap-bar {
  background: var(--surface-tertiary, #1e293b);
}

/* Dark mode: CSS custom properties auto-switch, no separate selectors needed */

/* ============================================
   AVAILABILITY HEATMAP CONTAINER STYLING
   ============================================ */

.availability-heatmap-container {
  background: var(--surface-primary, #ffffff);
  border-bottom: 1px solid var(--border-default, #e2e8f0);
  padding: 12px 16px;
  margin-bottom: 0;
}

.availability-heatmap-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

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

.availability-heatmap-label i {
  color: var(--primary-500, #14b8a6);
  font-size: 14px;
}

.availability-heatmap-hint {
  font-size: 11px;
  color: var(--text-tertiary, #94a3b8);
}

.availability-heatmap-legend {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  font-size: 10px;
  color: var(--text-secondary, #64748b);
}

.availability-heatmap-legend .legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.availability-heatmap-legend .legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.availability-heatmap-legend .legend-dot.all {
  background: linear-gradient(180deg, #10b981 0%, #059669 100%);
}

.availability-heatmap-legend .legend-dot.most {
  background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
}

.availability-heatmap-legend .legend-dot.half {
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
}

.availability-heatmap-legend .legend-dot.few {
  background: linear-gradient(180deg, #fb923c 0%, #ea580c 100%);
}

.availability-heatmap-legend .legend-dot.none {
  background: linear-gradient(180deg, #64748b 0%, #475569 100%);
}

/* Dark mode */
body.dark-mode .availability-heatmap-container {
  background: var(--surface-secondary, #1e293b);
  border-bottom-color: var(--border-default, #334155);
}

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

body.dark-mode .availability-heatmap-label i {
  color: var(--primary-400, #2dd4bf);
}

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

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

body.dark-mode .availability-heatmap-legend .legend-dot.all {
  background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
}

body.dark-mode .availability-heatmap-legend .legend-dot.most {
  background: linear-gradient(180deg, #6ee7b7 0%, #34d399 100%);
}

body.dark-mode .availability-heatmap-legend .legend-dot.half {
  background: linear-gradient(180deg, #fcd34d 0%, #fbbf24 100%);
}

body.dark-mode .availability-heatmap-legend .legend-dot.few {
  background: linear-gradient(180deg, #fdba74 0%, #fb923c 100%);
}

body.dark-mode .availability-heatmap-legend .legend-dot.none {
  background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
}