/* ============================================
   LEAVE STATUS INDICATORS
   ============================================
   Shows visual indicators for team members
   who are on approved or pending leave
   ============================================ */

/* ============================================
   LEAVE STATUS BADGE (inline with city name)
   ============================================ */

.leave-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 600;
  margin-left: 8px;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.leave-status-badge i {
  font-size: 9px;
}

/* Approved leave - green theme (default) */
.leave-badge-approved {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

/* Leave type specific colors - lighter shading style.
   ⚠️These MUST track LEAVE_TYPE_INFO in js/ui/leave-status.js. Until 2026-08-22
   they did not: holiday was blue #2563eb here and fuchsia #d946ef there,
   personal was purple here and fuchsia there. The same day off therefore
   rendered one colour in the badge and another everywhere else. The JS map is
   the source of truth (it anchors on the canonical away fuchsia), so these are
   pinned to it — blue in particular was borrowed from --category-work, which
   made a public holiday read as a work commitment. */
.leave-badge-approved.leave-type-holiday {
  background: rgba(217, 70, 239, 0.12);
  color: #c026d3;
  border: 1px solid rgba(217, 70, 239, 0.25);
}

.leave-badge-approved.leave-type-sick {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
  border: 1px solid rgba(220, 38, 38, 0.25);
}

.leave-badge-approved.leave-type-personal {
  background: rgba(217, 70, 239, 0.12);
  color: #c026d3;
  border: 1px solid rgba(217, 70, 239, 0.25);
}

/* Parental. Added 2026-08-18 with the 'parental' type in leave-status.js:
   demo-data.js has always generated it, but neither the JS type map nor this
   stylesheet knew about it, so it fell through to the default green while the
   JS assigned it the magenta "away" hue. The two now agree. */
.leave-badge-approved.leave-type-parental {
  background: rgba(217, 70, 239, 0.12);
  color: #c026d3;
  border: 1px solid rgba(217, 70, 239, 0.25);
}

.leave-badge-approved.leave-type-bereavement {
  background: rgba(107, 114, 128, 0.12);
  color: #4b5563;
  border: 1px solid rgba(107, 114, 128, 0.25);
}

.leave-badge-approved.leave-type-unpaid {
  background: rgba(148, 163, 184, 0.12);
  color: #64748b;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

/* Pending leave - yellow striped */
.leave-badge-pending {
  background: repeating-linear-gradient(
    45deg,
    rgba(234, 179, 8, 0.1),
    rgba(234, 179, 8, 0.1) 2px,
    rgba(234, 179, 8, 0.2) 2px,
    rgba(234, 179, 8, 0.2) 4px
  );
  color: #ca8a04;
  border: 1px solid rgba(234, 179, 8, 0.4);
  animation: pending-pulse 2s ease-in-out infinite;
}

@keyframes pending-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ============================================
   LEAVE OVERLAY (on timeline)
   ============================================ */

.leave-status-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 15;
  border-radius: 8px;
  pointer-events: none;
}

.leave-overlay-content {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Approved leave overlay - gray out with "Away" */
.leave-overlay-approved {
  background: rgba(100, 116, 139, 0.85);
  backdrop-filter: blur(2px);
}

.leave-overlay-approved .leave-overlay-content {
  background: rgba(255, 255, 255, 0.95);
  color: #475569;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.leave-overlay-approved .leave-overlay-content i {
  color: #22c55e;
}

/* Pending leave overlay - striped pattern */
.leave-overlay-pending {
  background: repeating-linear-gradient(
    45deg,
    rgba(234, 179, 8, 0.1),
    rgba(234, 179, 8, 0.1) 5px,
    rgba(234, 179, 8, 0.2) 5px,
    rgba(234, 179, 8, 0.2) 10px
  );
}

.leave-overlay-pending .leave-overlay-content {
  background: rgba(255, 255, 255, 0.95);
  color: #b45309;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ============================================
   CARD STATES
   ============================================ */

/* Card is on approved leave */
.timezone-section.on-leave {
  opacity: 0.85;
}

.timezone-section.on-leave .city-name {
  color: var(--text-tertiary, #94a3b8);
}

.timezone-section.on-leave .time-display {
  opacity: 0.6;
}

/* Card has pending leave */
.timezone-section.leave-pending {
  border-left: 3px solid #eab308;
}

/* ============================================
   DARK MODE
   ============================================ */

body.dark-mode .leave-badge-approved {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
  border-color: rgba(34, 197, 94, 0.4);
}

/* Dark mode leave type specific colors — same JS-map pinning as light mode,
   stepped one notch brighter so each stays legible on the dark surface. */
body.dark-mode .leave-badge-approved.leave-type-holiday {
  background: rgba(217, 70, 239, 0.18);
  color: #e879f9;
  border-color: rgba(217, 70, 239, 0.35);
}

body.dark-mode .leave-badge-approved.leave-type-sick {
  background: rgba(220, 38, 38, 0.18);
  color: #f87171;
  border-color: rgba(220, 38, 38, 0.35);
}

body.dark-mode .leave-badge-approved.leave-type-personal {
  background: rgba(217, 70, 239, 0.18);
  color: #e879f9;
  border-color: rgba(217, 70, 239, 0.35);
}

body.dark-mode .leave-badge-approved.leave-type-parental {
  background: rgba(217, 70, 239, 0.18);
  color: #e879f9;
  border-color: rgba(217, 70, 239, 0.35);
}

body.dark-mode .leave-badge-approved.leave-type-bereavement {
  background: rgba(107, 114, 128, 0.18);
  color: #9ca3af;
  border-color: rgba(107, 114, 128, 0.35);
}

body.dark-mode .leave-badge-approved.leave-type-unpaid {
  background: rgba(148, 163, 184, 0.18);
  color: #94a3b8;
  border-color: rgba(148, 163, 184, 0.35);
}

body.dark-mode .leave-badge-pending {
  background: repeating-linear-gradient(
    45deg,
    rgba(250, 204, 21, 0.1),
    rgba(250, 204, 21, 0.1) 2px,
    rgba(250, 204, 21, 0.2) 2px,
    rgba(250, 204, 21, 0.2) 4px
  );
  color: #fbbf24;
  border-color: rgba(250, 204, 21, 0.4);
}

body.dark-mode .leave-overlay-approved {
  background: rgba(30, 41, 59, 0.9);
}

body.dark-mode .leave-overlay-approved .leave-overlay-content {
  background: rgba(51, 65, 85, 0.95);
  color: #cbd5e1;
}

body.dark-mode .leave-overlay-pending {
  background: repeating-linear-gradient(
    45deg,
    rgba(250, 204, 21, 0.05),
    rgba(250, 204, 21, 0.05) 5px,
    rgba(250, 204, 21, 0.1) 5px,
    rgba(250, 204, 21, 0.1) 10px
  );
}

body.dark-mode .leave-overlay-pending .leave-overlay-content {
  background: rgba(51, 65, 85, 0.95);
  color: #fbbf24;
}

body.dark-mode .timezone-section.on-leave .city-name {
  color: var(--text-tertiary, #64748b);
}

/* ============================================
   UPCOMING LEAVE WIDGET
   ============================================ */

.upcoming-leave-widget {
  padding: 12px;
  background: var(--surface-primary, #fff);
  border-radius: 12px;
  border: 1px solid var(--border-primary, #e2e8f0);
}

.upcoming-leave-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-secondary, #f1f5f9);
}

.upcoming-leave-header h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #0f172a);
}

.upcoming-leave-header h4 i {
  color: #22c55e;
}

.upcoming-leave-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
  font-size: 11px;
  font-weight: 600;
}

.upcoming-leave-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.upcoming-leave-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--surface-secondary, #f8fafc);
  border-radius: 8px;
  transition: background 0.15s ease;
}

.upcoming-leave-item:hover {
  background: var(--surface-hover, #f1f5f9);
}

.upcoming-leave-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  flex-shrink: 0;
}

.upcoming-leave-info {
  flex: 1;
  min-width: 0;
}

.upcoming-leave-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upcoming-leave-dates {
  font-size: 11px;
  color: var(--text-secondary, #64748b);
}

.upcoming-leave-type {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

.upcoming-leave-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-tertiary, #94a3b8);
  font-size: 12px;
}

.upcoming-leave-empty i {
  display: block;
  font-size: 24px;
  margin-bottom: 8px;
  opacity: 0.5;
}

/* Dark mode widget */
body.dark-mode .upcoming-leave-widget {
  background: var(--surface-primary, #1e293b);
  border-color: var(--border-primary, #334155);
}

body.dark-mode .upcoming-leave-header h4 {
  color: var(--text-primary, #f1f5f9);
}

body.dark-mode .upcoming-leave-count {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

body.dark-mode .upcoming-leave-item {
  background: var(--surface-secondary, #334155);
}

body.dark-mode .upcoming-leave-item:hover {
  background: var(--surface-hover, #475569);
}

body.dark-mode .upcoming-leave-name {
  color: var(--text-primary, #f1f5f9);
}

body.dark-mode .upcoming-leave-dates {
  color: var(--text-secondary, #94a3b8);
}

body.dark-mode .upcoming-leave-type {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

body.dark-mode .upcoming-leave-empty {
  color: var(--text-tertiary, #64748b);
}

/* ============================================
   MEETING PROPOSER WARNING
   ============================================ */

.leave-warning-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(234, 179, 8, 0.1);
  border: 1px solid rgba(234, 179, 8, 0.3);
  border-radius: 8px;
  margin-bottom: 12px;
}

.leave-warning-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(234, 179, 8, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ca8a04;
  font-size: 12px;
  flex-shrink: 0;
}

.leave-warning-text {
  flex: 1;
  font-size: 12px;
  color: #92400e;
}

.leave-warning-text strong {
  font-weight: 600;
}

body.dark-mode .leave-warning-banner {
  background: rgba(250, 204, 21, 0.1);
  border-color: rgba(250, 204, 21, 0.3);
}

body.dark-mode .leave-warning-icon {
  background: rgba(250, 204, 21, 0.2);
  color: #fbbf24;
}

body.dark-mode .leave-warning-text {
  color: #fef3c7;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 480px) {
  .leave-status-badge {
    padding: 2px 6px;
    font-size: 9px;
    margin-left: 6px;
  }

  .leave-status-badge .leave-badge-text {
    display: none;
  }

  .leave-overlay-content {
    padding: 4px 8px;
    font-size: 10px;
  }

  .upcoming-leave-item {
    padding: 6px 8px;
  }

  .upcoming-leave-avatar {
    width: 28px;
    height: 28px;
    font-size: 10px;
  }
}

/* ============================================
   COMPACT MODE
   ============================================ */

body[data-layout="compact"] .leave-status-badge {
  padding: 1px 5px;
  font-size: 8px;
}

body[data-layout="compact"] .leave-status-badge .leave-badge-text {
  display: none;
}

body[data-layout="compact"] .leave-status-overlay {
  display: none;
}