/* Bootstrap-datepicker overrides – SG TimeTally branded calendar
   Uses design tokens from home.css. Load after bootstrap-datepicker.min.css. */

/* Container */
.datepicker {
  padding: var(--space-12, 12px) !important;
  border-radius: var(--radius-md, 12px) !important;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border-subtle) !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12) !important;
  font-family: var(--font-family, "Urbanist", sans-serif) !important;
}

/* Dropdown arrow (bottom orientation) */
.datepicker-dropdown.datepicker-orient-bottom:before {
  border-bottom-color: var(--color-border-strong) !important;
}
.datepicker-dropdown.datepicker-orient-bottom:after {
  border-bottom-color: var(--color-surface) !important;
}
.datepicker-dropdown.datepicker-orient-top:before {
  border-top-color: var(--color-border-strong) !important;
}
.datepicker-dropdown.datepicker-orient-top:after {
  border-top-color: var(--color-surface) !important;
}

/* Header: month/year and nav */
.datepicker .datepicker-switch,
.datepicker .next,
.datepicker .prev {
  color: var(--color-text-primary) !important;
  font-weight: var(--text-card-title-weight, 600) !important;
  font-size: var(--text-card-title, 1rem) !important;
}
.datepicker .datepicker-switch:hover,
.datepicker .next:hover,
.datepicker .prev:hover,
.datepicker tfoot tr th:hover {
  background: var(--color-surface-subtle) !important;
  color: var(--color-primary) !important;
}
.datepicker .next.disabled,
.datepicker .prev.disabled {
  color: var(--color-text-muted) !important;
  opacity: 0.6;
}

/* Day names row */
.datepicker table thead tr:first-child th,
.datepicker .datepicker-days table thead th {
  color: var(--color-text-secondary) !important;
  font-weight: 600 !important;
  font-size: var(--text-caption, 0.8125rem) !important;
}

/* Cells base */
.datepicker td,
.datepicker th {
  border-radius: var(--radius-sm, 8px) !important;
  font-size: var(--text-body, 0.9375rem) !important;
}
.datepicker table tr td.day {
  color: var(--color-text-primary) !important;
}

/* Hover / focus */
.datepicker table tr td.day.focused,
.datepicker table tr td.day:hover {
  background: var(--color-button-ghost-hover-bg, var(--primary-50)) !important;
  color: var(--color-primary) !important;
  cursor: pointer;
}

/* Other month */
.datepicker table tr td.old,
.datepicker table tr td.new {
  color: var(--color-text-muted) !important;
  opacity: 0.7;
}

/* Today (subtle highlight) */
.datepicker table tr td.today,
.datepicker table tr td.today:hover {
  background: var(--color-primary-tint, var(--primary-50)) !important;
  color: var(--color-primary) !important;
  font-weight: 600;
}
.datepicker table tr td.today.active,
.datepicker table tr td.today.active:hover {
  background: var(--color-primary) !important;
  color: #fff !important;
}

/* Selected / active date */
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.selected,
.datepicker table tr td.selected:hover {
  background: var(--color-primary) !important;
  color: #fff !important;
  font-weight: 500;
  text-shadow: none;
}
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected.disabled:hover {
  background: var(--neutral-400) !important;
  color: #fff !important;
  opacity: 0.8;
}

/* Disabled */
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
  background: transparent !important;
  color: var(--color-text-muted) !important;
  cursor: default;
  opacity: 0.6;
}

/* Month/year picker spans */
.datepicker table tr td span:hover {
  background: var(--color-surface-subtle) !important;
  color: var(--color-primary) !important;
}
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover {
  background: var(--color-primary) !important;
  color: #fff !important;
}

/* Dark theme */
[data-theme="dark"] .datepicker {
  background: var(--color-surface) !important;
  border-color: var(--color-border-subtle) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}
[data-theme="dark"] .datepicker-dropdown.datepicker-orient-bottom:after {
  border-bottom-color: var(--color-surface) !important;
}
[data-theme="dark"] .datepicker-dropdown.datepicker-orient-top:after {
  border-top-color: var(--color-surface) !important;
}
[data-theme="dark"] .datepicker .datepicker-switch,
[data-theme="dark"] .datepicker .next,
[data-theme="dark"] .datepicker .prev {
  color: var(--color-text-primary) !important;
}
[data-theme="dark"] .datepicker table tr td.day.focused,
[data-theme="dark"] .datepicker table tr td.day:hover {
  background: rgba(63, 122, 224, 0.2) !important;
  color: var(--primary-300) !important;
}
[data-theme="dark"] .datepicker table tr td.today,
[data-theme="dark"] .datepicker table tr td.today:hover {
  background: rgba(63, 122, 224, 0.25) !important;
  color: var(--primary-300) !important;
}