/* ============================================
   LEAVE DATE PICKER STYLES
   ============================================
   Click-to-input days + Calendar drag interface
*/

/* Backdrop for popups */
.days-input-backdrop,
.leave-calendar-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.4);
  z-index: var(--z-modal);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Days Input Popup */
.days-input-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--surface-primary, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  width: 240px;
  overflow: hidden;
  z-index: var(--z-modal-elevated, 3500);
  animation: popupFadeIn 0.15s ease-out;
}

@keyframes popupFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.days-input-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--surface-secondary, #f8fafc);
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
}

/* Converged to the app-wide close-button standard: a 32px CIRCLE with a
   slate chip (was a 24px transparent rounded-square). This lives in a css/*.css
   file that loads AFTER style.css, so the style.css CLOSE-BUTTON SHAPE STANDARD
   + visibility floor cannot reach it — normalise it here at its own definition
   to match the rest (2026-06-21 close-X consistency sweep). */
.days-input-close {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-full, 9999px);
  background: var(--slate-100, #f1f5f9);
  color: var(--slate-600, #475569);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.days-input-close:hover {
  background: var(--slate-200, #e2e8f0);
  border-color: var(--slate-300, #cbd5e1);
  color: var(--slate-700, #334155);
}

.days-input-body {
  padding: 14px;
}

.days-input-field {
  width: 100%;
  padding: 12px;
  border: 2px solid var(--accent, #3b82f6);
  border-radius: 8px;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  color: var(--text-primary, #1e293b);
  background: var(--surface-primary, #ffffff);
  outline: none;
}

.days-input-field:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Hide spin buttons */
.days-input-field::-webkit-outer-spin-button,
.days-input-field::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.days-input-field[type="number"] {
  -moz-appearance: textfield;
}

.days-input-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-secondary, #64748b);
}

.days-preview-label {
  color: var(--text-tertiary, #94a3b8);
}

.days-preview-value {
  font-weight: 600;
  color: var(--text-primary, #1e293b);
}

.days-input-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 14px 14px;
}

.days-preset-chip {
  padding: 6px 10px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 16px;
  background: var(--surface-primary, #ffffff);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary, #64748b);
  cursor: pointer;
  transition: all 0.15s;
}

.days-preset-chip:hover {
  border-color: var(--accent, #3b82f6);
  color: var(--accent, #3b82f6);
}

.days-preset-chip.active {
  background: var(--accent, #3b82f6);
  border-color: var(--accent, #3b82f6);
  color: #fff;
}

.days-input-apply {
  width: calc(100% - 28px);
  margin: 0 14px 14px;
  padding: 10px;
  font-size: 13px;
}

/* Calendar Picker */
.leave-calendar-picker {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--surface-primary, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  width: 320px;
  overflow: hidden;
  user-select: none;
  z-index: var(--z-popover);
  animation: calendarFadeIn 0.2s ease-out;
}

@keyframes calendarFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.leave-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--surface-secondary, #f8fafc);
  border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.leave-cal-month-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
}

.leave-cal-nav {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--surface-primary, #ffffff);
  border-radius: 8px;
  color: var(--text-secondary, #64748b);
  cursor: pointer;
  transition: all 0.15s;
}

.leave-cal-nav:hover {
  background: var(--accent, #3b82f6);
  color: #fff;
}

.leave-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 10px 12px 6px;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.leave-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 4px 12px 12px;
}

.leave-cal-day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary, #1e293b);
  cursor: pointer;
  transition: all 0.1s;
}

.leave-cal-day.empty {
  cursor: default;
}

.leave-cal-day.past {
  color: var(--text-tertiary, #cbd5e1);
  cursor: not-allowed;
}

.leave-cal-day.today {
  background: var(--surface-tertiary, #e2e8f0);
  font-weight: 700;
}

.leave-cal-day:not(.empty):not(.past):hover {
  background: var(--accent-tint, rgba(59, 130, 246, 0.1));
}

/* Selected range */
.leave-cal-day.selected {
  background: var(--accent-tint, rgba(59, 130, 246, 0.15));
  color: var(--accent, #3b82f6);
  border-radius: 0;
}

.leave-cal-day.selected.range-start {
  background: var(--accent, #3b82f6);
  color: #fff;
  border-radius: 8px 0 0 8px;
}

.leave-cal-day.selected.range-end {
  background: var(--accent, #3b82f6);
  color: #fff;
  border-radius: 0 8px 8px 0;
}

.leave-cal-day.selected.range-start.range-end {
  border-radius: 8px;
}

/* Selection info */
.leave-calendar-selection {
  padding: 12px 16px;
  background: var(--accent-tint, rgba(59, 130, 246, 0.08));
  border-top: 1px solid var(--border-color, #e2e8f0);
  text-align: center;
}

.leave-cal-selection-info {
  font-size: 13px;
  color: var(--text-secondary, #64748b);
}

.leave-cal-selection-info strong {
  color: var(--accent, #3b82f6);
  font-weight: 700;
  font-size: 16px;
}

.leave-cal-date-range {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-tertiary, #94a3b8);
}

.leave-cal-hint {
  font-size: 12px;
  color: var(--text-tertiary, #94a3b8);
}

/* Prominent total display */
.leave-cal-total {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin-bottom: 4px;
}

.leave-cal-total-number {
  font-size: 32px;
  font-weight: 800;
  color: var(--accent, #3b82f6);
  line-height: 1;
}

.leave-cal-total-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
}

/* Sequential day number badges */
.leave-cal-day {
  position: relative;
}

.day-sequence-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent, #3b82f6);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  border-radius: 7px;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.leave-cal-day.range-start .day-sequence-badge,
.leave-cal-day.range-end .day-sequence-badge {
  background: #fff;
  color: var(--accent, #3b82f6);
}

/* Dark mode for badges */
body.dark-mode .day-sequence-badge,
body.dark-mode .day-sequence-badge {
  background: var(--accent-light, #60a5fa);
}

body.dark-mode .leave-cal-day.range-start .day-sequence-badge,
body.dark-mode .leave-cal-day.range-end .day-sequence-badge,
body.dark-mode .leave-cal-day.range-start .day-sequence-badge,
body.dark-mode .leave-cal-day.range-end .day-sequence-badge {
  background: rgba(255, 255, 255, 0.95);
  color: var(--accent, #3b82f6);
}

body.dark-mode .leave-cal-total-number,
body.dark-mode .leave-cal-total-number {
  color: var(--accent-light, #60a5fa);
}

/* Footer */
.leave-calendar-footer {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-color, #e2e8f0);
}

.leave-calendar-footer button {
  flex: 1;
  padding: 10px;
  font-size: 13px;
  border-radius: 8px;
}

.leave-cal-cancel {
  background: var(--surface-secondary, #f1f5f9);
  border: none;
  color: var(--text-secondary, #64748b);
  cursor: pointer;
}

.leave-cal-cancel:hover {
  background: var(--surface-tertiary, #e2e8f0);
}

/* Make days badge clickable */
.propose-timeoff-days-badge,
.leave-days-badge,
.timeoff-days-badge {
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s;
}

.propose-timeoff-days-badge:hover,
.leave-days-badge:hover,
.timeoff-days-badge:hover {
  /* Amber hover glow to match the canonical --event-timeoff badge fill (was a
     stale blue shadow left over from the badge's earlier blue/green styling). */
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}

.propose-timeoff-days-badge:active,
.leave-days-badge:active,
.timeoff-days-badge:active {
}

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

body.dark-mode .days-input-popup,
body.dark-mode .days-input-popup {
  background: var(--surface-primary-dark, #1e293b);
  border-color: var(--border-color-dark, #334155);
}

body.dark-mode .days-input-header,
body.dark-mode .days-input-header {
  background: var(--surface-secondary-dark, #0f172a);
  border-bottom-color: var(--border-color-dark, #334155);
  color: var(--text-primary-dark, #f1f5f9);
}

body.dark-mode .days-input-field,
body.dark-mode .days-input-field {
  background: var(--surface-primary-dark, #1e293b);
  color: var(--text-primary-dark, #f1f5f9);
  border-color: var(--accent, #60a5fa);
}

body.dark-mode .days-preset-chip,
body.dark-mode .days-preset-chip {
  background: var(--surface-primary-dark, #1e293b);
  border-color: var(--border-color-dark, #334155);
  color: var(--text-secondary-dark, #94a3b8);
}

body.dark-mode .leave-calendar-picker,
body.dark-mode .leave-calendar-picker {
  background: var(--surface-primary-dark, #1e293b);
  border-color: var(--border-color-dark, #334155);
}

body.dark-mode .leave-calendar-header,
body.dark-mode .leave-calendar-header {
  background: var(--surface-secondary-dark, #0f172a);
  border-bottom-color: var(--border-color-dark, #334155);
}

body.dark-mode .leave-cal-month-label,
body.dark-mode .leave-cal-month-label {
  color: var(--text-primary-dark, #f1f5f9);
}

body.dark-mode .leave-cal-nav,
body.dark-mode .leave-cal-nav {
  background: var(--surface-primary-dark, #1e293b);
  color: var(--text-secondary-dark, #94a3b8);
}

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

body.dark-mode .leave-cal-day.past,
body.dark-mode .leave-cal-day.past {
  color: var(--text-tertiary-dark, #475569);
}

body.dark-mode .leave-cal-day.today,
body.dark-mode .leave-cal-day.today {
  background: var(--surface-tertiary-dark, #334155);
}

body.dark-mode .leave-calendar-selection,
body.dark-mode .leave-calendar-selection {
  background: rgba(96, 165, 250, 0.1);
  border-top-color: var(--border-color-dark, #334155);
}

body.dark-mode .leave-calendar-footer,
body.dark-mode .leave-calendar-footer {
  border-top-color: var(--border-color-dark, #334155);
}

body.dark-mode .leave-cal-cancel,
body.dark-mode .leave-cal-cancel {
  background: var(--surface-secondary-dark, #0f172a);
  color: var(--text-secondary-dark, #94a3b8);
}

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

@media (max-width: 480px) {
  .days-input-popup {
    width: calc(100% - 40px);
    max-width: 280px;
  }

  .leave-calendar-picker {
    width: calc(100% - 32px);
    max-width: 340px;
  }

  .leave-cal-day {
    height: 40px;
  }
}

/* TIME OFF IS NOT A MEETING (2026-10-08, owner "Resolve all" on: hide the
   meeting-only parts of the Time Off form so the dates come first). Propose
   Times -> Time Off reused the whole meeting sheet: a note and a location
   that are never sent, "Who should come?" with Required / Invited, the add-
   a-time buttons, a parked meeting draft's "Times offered" and the vote
   settings, with the dates below all of it. On Time Off only the kind, its
   label, the dates and the Request Time Off button remain. !important: the
   sheet's own JS shows several of these with inline display styles. */
#propose-mode-fields.mode-timeOff #propose-quick-note,
#propose-mode-fields.mode-timeOff .propose-location-group,
#propose-mode-fields.mode-timeOff #propose-attendees-section,
#propose-mode-fields.mode-timeOff #propose-add-from-board-btn,
#propose-mode-fields.mode-timeOff #propose-add-time-btn,
#propose-mode-fields.mode-timeOff #propose-add-hint,
#propose-mode-fields.mode-timeOff #propose-discard-draft-btn,
#propose-mode-fields.mode-timeOff #propose-selected-slots,
#propose-mode-fields.mode-timeOff #propose-poll-settings {
  display: none !important;
}