/* ============================================================
   OPSUS360 — GLOBAL DATEPICKER & CALENDAR THEME
   Covers:
     1. Bootstrap Datepicker  (.datepicker / .datepicker-dropdown)
     2. DateRangePicker       (.daterangepicker)
     3. Pickadate.js          (.picker / .picker__*)
     4. FullCalendar v6       (.fc / .fc-*)
     5. Native HTML5 inputs   (input[type="date"])
   Last updated: 2026-05-28
   ============================================================ */

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  --dp-primary:        #2d8653;
  --dp-primary-dark:   #1e6b3f;
  --dp-primary-light:  #e8f5ee;
  --dp-bg:             #ffffff;
  --dp-surface:        #f9fafb;
  --dp-border:         #e5e7eb;
  --dp-border-input:   #d1d5db;
  --dp-text:           #1f2937;
  --dp-text-secondary: #4b5563;
  --dp-text-muted:     #9ca3af;
  --dp-text-disabled:  #d1d5db;
  --dp-red:            #ef4444;
  --dp-red-light:      #fee2e2;
  --dp-radius:         12px;
  --dp-radius-sm:      8px;
  --dp-radius-cell:    6px;
  --dp-shadow:         0 8px 32px rgba(0, 0, 0, 0.10);
  --dp-shadow-sm:      0 4px 16px rgba(0, 0, 0, 0.08);
  --dp-focus-ring:     0 0 0 3px rgba(45, 134, 83, 0.12);
  --dp-font:           'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --dp-transition:     0.15s ease;
}


/* ============================================================
   1. NATIVE HTML5 DATE / DATETIME-LOCAL INPUTS
   ============================================================ */

input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"] {
  font-family: var(--dp-font) !important;
  font-size: 13.5px !important;
  color: var(--dp-text) !important;
  background-color: var(--dp-bg) !important;
  border: 1px solid var(--dp-border-input) !important;
  border-radius: var(--dp-radius-sm) !important;
  padding: 7px 10px !important;
  transition: border-color var(--dp-transition), box-shadow var(--dp-transition) !important;
  color-scheme: light !important;
}

input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
input[type="month"]:focus,
input[type="week"]:focus {
  border-color: var(--dp-primary) !important;
  box-shadow: var(--dp-focus-ring) !important;
  outline: none !important;
  background-color: var(--dp-bg) !important;
}

input[type="date"]:disabled,
input[type="datetime-local"]:disabled {
  background-color: var(--dp-surface) !important;
  color: var(--dp-text-muted) !important;
  cursor: not-allowed !important;
  opacity: 0.7 !important;
}

/* Calendar icon colour (Chromium).
   brightness(0) first normalises any browser-rendered colour (incl. white)
   to black; the chain then reliably tints it to the theme green (#2d8653). */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
  filter: brightness(0) saturate(100%) invert(40%) sepia(56%) saturate(600%) hue-rotate(107deg) brightness(88%);
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.15s;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover,
input[type="week"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(31%) sepia(62%) saturate(600%) hue-rotate(115deg) brightness(80%);
}

/* Selected / filled date value shows in theme green */
input[type="date"]:valid:not([value=""]),
input[type="datetime-local"]:valid:not([value=""]) {
  color: var(--dp-primary) !important;
}

/* Force light colour-scheme so the browser-native calendar popup is light */
html[data-color-theme="dark"] input[type="date"],
html[data-color-theme="dark"] input[type="datetime-local"],
html[data-color-theme="dark"] input[type="time"] {
  color-scheme: light !important;
  background-color: var(--dp-bg) !important;
  color: var(--dp-text) !important;
  border-color: var(--dp-border-input) !important;
}

/* Ensure dark-mode never overrides the green icon tint */
html[data-color-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-color-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html[data-color-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
html[data-color-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
html[data-color-theme="dark"] input[type="week"]::-webkit-calendar-picker-indicator {
  filter: brightness(0) saturate(100%) invert(40%) sepia(56%) saturate(600%) hue-rotate(107deg) brightness(88%) !important;
  opacity: 0.85 !important;
  cursor: pointer !important;
}


/* ============================================================
   2. BOOTSTRAP DATEPICKER  (.datepicker / .datepicker-dropdown)
   ============================================================ */

.datepicker,
.datepicker-dropdown,
.datepicker-inline {
  font-family: var(--dp-font) !important;
  background-color: var(--dp-bg) !important;
  border: 1px solid var(--dp-border) !important;
  border-radius: var(--dp-radius) !important;
  box-shadow: var(--dp-shadow) !important;
  color: var(--dp-text) !important;
  padding: 8px !important;
  /* Override CSS variables that all.min.css uses for dark-mode */
  --dp-bg:            #ffffff;
  --dp-border-color:  #e5e7eb;
  --dp-cell-hover-bg: #e8f5ee;
  --dp-active-bg:     #2d8653;
  --dp-active-color:  #ffffff;
  color-scheme: light !important;
}

/* Arrow (dropdown pointer) */
.datepicker.dropdown-menu { z-index: 1060 !important; }
.datepicker:before { border-bottom-color: var(--dp-border) !important; }
.datepicker:after  { border-bottom-color: var(--dp-bg) !important; }

/* ── Header row (month/year navigation) ── */
.datepicker thead tr:first-child th,
.datepicker .datepicker-switch,
.datepicker .prev,
.datepicker .next {
  background-color: var(--dp-surface) !important;
  color: var(--dp-text) !important;
  font-weight: 700 !important;
  border-radius: var(--dp-radius-cell) !important;
  transition: background-color var(--dp-transition), color var(--dp-transition) !important;
}

.datepicker .prev:hover,
.datepicker .next:hover,
.datepicker .datepicker-switch:hover {
  background-color: var(--dp-primary-light) !important;
  color: var(--dp-primary) !important;
}

/* ── Weekday labels (Su Mo Tu…) ── */
.datepicker thead tr:last-child th,
.datepicker .dow {
  background-color: var(--dp-bg) !important;
  color: var(--dp-text-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  padding: 5px 0 !important;
}

/* ── Day cells ── */
.datepicker tbody td,
.datepicker td {
  background-color: var(--dp-bg) !important;
  color: var(--dp-text-secondary) !important;
  border-radius: var(--dp-radius-cell) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: background-color var(--dp-transition), color var(--dp-transition) !important;
  border: 1px solid transparent !important;
}

.datepicker tbody td:hover,
.datepicker td:hover {
  background-color: var(--dp-primary-light) !important;
  color: var(--dp-primary) !important;
  cursor: pointer !important;
}

/* Today */
.datepicker table tr td.today,
.datepicker table tr td.today:hover {
  background-color: var(--dp-primary-light) !important;
  color: var(--dp-primary) !important;
  font-weight: 700 !important;
  border-color: var(--dp-primary) !important;
}

/* Selected / Active */
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.today,
.datepicker table tr td.active.today:hover {
  background-color: var(--dp-primary) !important;
  background-image: none !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-color: var(--dp-primary) !important;
}

/* Out-of-month / disabled / range-highlight days */
.datepicker table tr td.old,
.datepicker table tr td.new {
  color: var(--dp-text-disabled) !important;
  background-color: var(--dp-bg) !important;
}

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
  color: var(--dp-text-disabled) !important;
  background-color: var(--dp-surface) !important;
  cursor: not-allowed !important;
}

/* Month / Year picker view cells */
.datepicker .month,
.datepicker .year,
.datepicker .decade,
.datepicker .century {
  background-color: var(--dp-bg) !important;
  color: var(--dp-text-secondary) !important;
  border-radius: var(--dp-radius-cell) !important;
}

.datepicker .month:hover,
.datepicker .year:hover,
.datepicker .decade:hover,
.datepicker .century:hover {
  background-color: var(--dp-primary-light) !important;
  color: var(--dp-primary) !important;
}

.datepicker .month.active,
.datepicker .year.active {
  background-color: var(--dp-primary) !important;
  color: #ffffff !important;
}

/* ── Dark-mode specificity overrides (mirrors all.min.css selectors) ── */
html[data-color-theme="dark"] .datepicker,
html[data-color-theme="dark"] .datepicker-dropdown,
html[data-color-theme="dark"] .datepicker-inline {
  --dp-bg:            #ffffff !important;
  --dp-border-color:  #e5e7eb !important;
  --dp-cell-hover-bg: #e8f5ee !important;
  --dp-active-bg:     #2d8653 !important;
  --dp-active-color:  #ffffff !important;
  color-scheme: light !important;
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
  color: #1f2937 !important;
}

html[data-color-theme="dark"] .datepicker thead tr:first-child th,
html[data-color-theme="dark"] .datepicker .datepicker-switch,
html[data-color-theme="dark"] .datepicker .prev,
html[data-color-theme="dark"] .datepicker .next {
  background-color: #f9fafb !important;
  color: #1f2937 !important;
}

html[data-color-theme="dark"] .datepicker .prev:hover,
html[data-color-theme="dark"] .datepicker .next:hover,
html[data-color-theme="dark"] .datepicker .datepicker-switch:hover {
  background-color: #e8f5ee !important;
  color: #2d8653 !important;
}

html[data-color-theme="dark"] .datepicker thead tr:last-child th,
html[data-color-theme="dark"] .datepicker .dow {
  background-color: #ffffff !important;
  color: #9ca3af !important;
}

html[data-color-theme="dark"] .datepicker tbody td,
html[data-color-theme="dark"] .datepicker td {
  background-color: #ffffff !important;
  color: #374151 !important;
}

html[data-color-theme="dark"] .datepicker tbody td:hover,
html[data-color-theme="dark"] .datepicker td:hover {
  background-color: #e8f5ee !important;
  color: #2d8653 !important;
}

html[data-color-theme="dark"] .datepicker table tr td.today,
html[data-color-theme="dark"] .datepicker table tr td.today:hover {
  background-color: #e8f5ee !important;
  color: #2d8653 !important;
  font-weight: 700 !important;
}

html[data-color-theme="dark"] .datepicker table tr td.active,
html[data-color-theme="dark"] .datepicker table tr td.active:hover {
  background-color: #2d8653 !important;
  background-image: none !important;
  color: #ffffff !important;
}

html[data-color-theme="dark"] .datepicker table tr td.old,
html[data-color-theme="dark"] .datepicker table tr td.new,
html[data-color-theme="dark"] .datepicker table tr td.disabled {
  color: #d1d5db !important;
  background-color: #ffffff !important;
}

html[data-color-theme="dark"] .datepicker .month,
html[data-color-theme="dark"] .datepicker .year {
  background-color: #ffffff !important;
  color: #374151 !important;
}

html[data-color-theme="dark"] .datepicker .month:hover,
html[data-color-theme="dark"] .datepicker .year:hover {
  background-color: #e8f5ee !important;
  color: #2d8653 !important;
}


/* ============================================================
   3. DATERANGEPICKER  (.daterangepicker)
   ============================================================ */

.daterangepicker {
  font-family: var(--dp-font) !important;
  background-color: var(--dp-bg) !important;
  border: 1px solid var(--dp-border) !important;
  border-radius: var(--dp-radius) !important;
  box-shadow: var(--dp-shadow) !important;
  color: var(--dp-text) !important;
  z-index: 1060 !important;
}

.daterangepicker:before { border-bottom-color: var(--dp-border) !important; }
.daterangepicker:after  { border-bottom-color: var(--dp-bg) !important; }

/* ── Header / calendar title ── */
.daterangepicker .calendar-table {
  background-color: var(--dp-bg) !important;
  border: none !important;
  border-radius: var(--dp-radius-sm) !important;
}

.daterangepicker .calendar-table thead tr:first-child th {
  background-color: var(--dp-surface) !important;
  color: var(--dp-text) !important;
  font-weight: 700 !important;
  border-radius: var(--dp-radius-cell) !important;
}

.daterangepicker .prev span,
.daterangepicker .next span {
  border-color: var(--dp-text-secondary) !important;
}

.daterangepicker th.prev:hover,
.daterangepicker th.next:hover,
.daterangepicker th.month:hover {
  background-color: var(--dp-primary-light) !important;
  color: var(--dp-primary) !important;
  border-radius: var(--dp-radius-cell) !important;
}

.daterangepicker th.month {
  color: var(--dp-text) !important;
  font-weight: 700 !important;
}

/* ── Weekday row ── */
.daterangepicker td.week,
.daterangepicker th.week {
  font-size: 11px !important;
  color: var(--dp-text-muted) !important;
}

.daterangepicker .calendar-table thead tr:last-child th {
  color: var(--dp-text-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

/* ── Day cells ── */
.daterangepicker td {
  background-color: var(--dp-bg) !important;
  color: var(--dp-text-secondary) !important;
  border-radius: var(--dp-radius-cell) !important;
  font-size: 13px !important;
  transition: background-color var(--dp-transition), color var(--dp-transition) !important;
}

.daterangepicker td.available:hover,
.daterangepicker td:hover {
  background-color: var(--dp-primary-light) !important;
  color: var(--dp-primary) !important;
}

/* Selected start / end */
.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker td.start-date,
.daterangepicker td.end-date {
  background-color: var(--dp-primary) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: var(--dp-radius-cell) !important;
}

/* In-range highlight */
.daterangepicker td.in-range {
  background-color: var(--dp-primary-light) !important;
  color: var(--dp-primary-dark) !important;
  border-radius: 0 !important;
}

.daterangepicker td.start-date.in-range { border-radius: var(--dp-radius-cell) 0 0 var(--dp-radius-cell) !important; }
.daterangepicker td.end-date.in-range   { border-radius: 0 var(--dp-radius-cell) var(--dp-radius-cell) 0 !important; }

/* Today */
.daterangepicker td.today,
.daterangepicker td.today:hover {
  font-weight: 700 !important;
  color: var(--dp-primary) !important;
}

/* Disabled / off-range */
.daterangepicker td.off,
.daterangepicker td.disabled,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
  background-color: var(--dp-bg) !important;
  color: var(--dp-text-disabled) !important;
  cursor: not-allowed !important;
}

/* ── Ranges sidebar ── */
.daterangepicker .ranges li {
  font-family: var(--dp-font) !important;
  font-size: 13px !important;
  color: var(--dp-text-secondary) !important;
  border-radius: var(--dp-radius-cell) !important;
  transition: background-color var(--dp-transition) !important;
}

.daterangepicker .ranges li:hover {
  background-color: var(--dp-primary-light) !important;
  color: var(--dp-primary) !important;
}

.daterangepicker .ranges li.active {
  background-color: var(--dp-primary) !important;
  color: #ffffff !important;
}

/* ── Footer (Apply / Cancel buttons) ── */
.daterangepicker .drp-buttons {
  border-top: 1px solid var(--dp-border) !important;
  background-color: var(--dp-surface) !important;
  border-radius: 0 0 var(--dp-radius) var(--dp-radius) !important;
  padding: 10px 14px !important;
}

.daterangepicker .applyBtn {
  background-color: var(--dp-primary) !important;
  border-color: var(--dp-primary) !important;
  color: #ffffff !important;
  border-radius: var(--dp-radius-sm) !important;
  font-family: var(--dp-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 6px 16px !important;
  transition: background-color var(--dp-transition) !important;
}

.daterangepicker .applyBtn:hover {
  background-color: var(--dp-primary-dark) !important;
  border-color: var(--dp-primary-dark) !important;
}

.daterangepicker .cancelBtn {
  background-color: #f3f4f6 !important;
  border-color: var(--dp-border-input) !important;
  color: var(--dp-text-secondary) !important;
  border-radius: var(--dp-radius-sm) !important;
  font-family: var(--dp-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 6px 16px !important;
}

.daterangepicker .cancelBtn:hover {
  background-color: var(--dp-border) !important;
}

/* ── Dark-mode override for daterangepicker ── */
html[data-color-theme="dark"] .daterangepicker {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
  color: #1f2937 !important;
}

html[data-color-theme="dark"] .daterangepicker td {
  background-color: #ffffff !important;
  color: #374151 !important;
}

html[data-color-theme="dark"] .daterangepicker td.active,
html[data-color-theme="dark"] .daterangepicker td.active:hover {
  background-color: #2d8653 !important;
  color: #ffffff !important;
}

html[data-color-theme="dark"] .daterangepicker td.in-range {
  background-color: #e8f5ee !important;
  color: #1e6b3f !important;
}

html[data-color-theme="dark"] .daterangepicker td.off {
  color: #d1d5db !important;
}

html[data-color-theme="dark"] .daterangepicker .drp-buttons {
  background-color: #f9fafb !important;
  border-top-color: #e5e7eb !important;
}


/* ============================================================
   4. PICKADATE.JS  (.picker / .picker__*)
   ============================================================ */

.picker { color: var(--dp-text) !important; }

.picker__holder {
  font-family: var(--dp-font) !important;
  background: var(--dp-bg) !important;
  border: 1px solid var(--dp-border) !important;
  border-radius: var(--dp-radius) !important;
  box-shadow: var(--dp-shadow) !important;
  z-index: 1060 !important;
}

.picker__frame,
.picker__wrap,
.picker__box {
  background: var(--dp-bg) !important;
  border-radius: var(--dp-radius) !important;
}

.picker__box { padding: 12px !important; }

/* ── Header (month/year nav) ── */
.picker__header {
  background: var(--dp-surface) !important;
  border-radius: var(--dp-radius-sm) !important;
  padding: 6px 8px !important;
  color: var(--dp-text) !important;
}

.picker__month,
.picker__year {
  color: var(--dp-text) !important;
  font-weight: 700 !important;
  font-family: var(--dp-font) !important;
  background: transparent !important;
}

.picker__select--month,
.picker__select--year {
  background-color: var(--dp-bg) !important;
  color: var(--dp-text) !important;
  border: 1px solid var(--dp-border-input) !important;
  border-radius: 5px !important;
  font-family: var(--dp-font) !important;
  font-size: 13px !important;
}

.picker__nav--prev,
.picker__nav--next {
  background: #f3f4f6 !important;
  color: var(--dp-text-muted) !important;
  border-radius: var(--dp-radius-cell) !important;
  transition: background-color var(--dp-transition), color var(--dp-transition) !important;
}

.picker__nav--prev:hover,
.picker__nav--next:hover {
  background: var(--dp-primary-light) !important;
  color: var(--dp-primary) !important;
}

/* ── Weekday labels ── */
.picker__table { background: var(--dp-bg) !important; }

.picker__weekday {
  background: var(--dp-bg) !important;
  color: var(--dp-text-muted) !important;
  font-family: var(--dp-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  padding: 6px 0 !important;
}

/* ── Day cells ── */
.picker__day {
  font-family: var(--dp-font) !important;
  background: var(--dp-bg) !important;
  color: var(--dp-text-secondary) !important;
  border-radius: var(--dp-radius-cell) !important;
  border: 1px solid transparent !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: background-color var(--dp-transition), color var(--dp-transition) !important;
}

.picker__day--infocus  { color: var(--dp-text-secondary) !important; }
.picker__day--outfocus { color: var(--dp-text-disabled) !important; }

.picker__day:hover,
.picker__day--highlighted:hover,
.picker--focused .picker__day--highlighted {
  background: var(--dp-primary-light) !important;
  color: var(--dp-primary) !important;
  border-color: var(--dp-primary) !important;
  cursor: pointer !important;
}

.picker__day--highlighted {
  border-color: var(--dp-primary) !important;
  color: var(--dp-primary) !important;
}

.picker__day--today {
  background: var(--dp-primary-light) !important;
  color: var(--dp-primary) !important;
  font-weight: 700 !important;
}

.picker__day--today::before { border-top-color: var(--dp-primary) !important; }

.picker__day--selected,
.picker__day--selected:hover,
.picker--focused .picker__day--selected {
  background: var(--dp-primary) !important;
  color: #ffffff !important;
  border-color: var(--dp-primary) !important;
  font-weight: 700 !important;
}

.picker__day--disabled,
.picker__day--disabled:hover {
  background: var(--dp-surface) !important;
  color: var(--dp-text-disabled) !important;
  border-color: transparent !important;
  cursor: not-allowed !important;
}

/* ── Footer ── */
.picker__footer {
  background: var(--dp-surface) !important;
  border-top: 1px solid var(--dp-border) !important;
  border-radius: 0 0 var(--dp-radius) var(--dp-radius) !important;
  padding: 8px !important;
}

.picker__button--today,
.picker__button--clear,
.picker__button--close {
  font-family: var(--dp-font) !important;
  background: #f3f4f6 !important;
  color: var(--dp-text-secondary) !important;
  border: 1px solid var(--dp-border-input) !important;
  border-radius: var(--dp-radius-cell) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  transition: background-color var(--dp-transition), color var(--dp-transition) !important;
}

.picker__button--today:hover {
  background: var(--dp-primary-light) !important;
  color: var(--dp-primary) !important;
  border-color: var(--dp-primary) !important;
}

.picker__button--clear:hover {
  background: var(--dp-red-light) !important;
  color: var(--dp-red) !important;
  border-color: var(--dp-red) !important;
}

.picker__button--close:hover {
  background: var(--dp-border) !important;
}

/* ── Dark-mode override for Pickadate ── */
html[data-color-theme="dark"] .picker__holder,
html[data-color-theme="dark"] .picker__frame,
html[data-color-theme="dark"] .picker__wrap,
html[data-color-theme="dark"] .picker__box {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
}

html[data-color-theme="dark"] .picker__header { background: #f9fafb !important; color: #1f2937 !important; }
html[data-color-theme="dark"] .picker__month,
html[data-color-theme="dark"] .picker__year   { color: #1f2937 !important; }
html[data-color-theme="dark"] .picker__weekday { background: #ffffff !important; color: #9ca3af !important; }
html[data-color-theme="dark"] .picker__day    { background: #ffffff !important; color: #374151 !important; }
html[data-color-theme="dark"] .picker__day--outfocus { color: #d1d5db !important; }
html[data-color-theme="dark"] .picker__day:hover { background: #e8f5ee !important; color: #2d8653 !important; }
html[data-color-theme="dark"] .picker__day--today { background: #e8f5ee !important; color: #2d8653 !important; }
html[data-color-theme="dark"] .picker__day--selected { background: #2d8653 !important; color: #ffffff !important; }
html[data-color-theme="dark"] .picker__footer { background: #f9fafb !important; border-top-color: #e5e7eb !important; }


/* ============================================================
   5. FULLCALENDAR v6  (.fc / .fc-*)
   ============================================================ */

.fc {
  font-family: var(--dp-font) !important;
  color: var(--dp-text) !important;
}

/* ── Toolbar (header with title + navigation) ── */
.fc .fc-toolbar {
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.fc .fc-toolbar-title {
  font-family: var(--dp-font) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--dp-text) !important;
}

/* Navigation buttons */
.fc .fc-button,
.fc .fc-button-primary {
  font-family: var(--dp-font) !important;
  background-color: var(--dp-bg) !important;
  border: 1px solid var(--dp-border-input) !important;
  color: var(--dp-text-secondary) !important;
  border-radius: var(--dp-radius-sm) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  transition: background-color var(--dp-transition), color var(--dp-transition), border-color var(--dp-transition) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

.fc .fc-button:hover,
.fc .fc-button-primary:hover {
  background-color: var(--dp-primary-light) !important;
  border-color: var(--dp-primary) !important;
  color: var(--dp-primary) !important;
}

.fc .fc-button:focus,
.fc .fc-button-primary:focus {
  box-shadow: var(--dp-focus-ring) !important;
  outline: none !important;
}

/* Active / checked state (view switcher) */
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background-color: var(--dp-primary) !important;
  border-color: var(--dp-primary) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* Today button */
.fc .fc-today-button {
  background-color: var(--dp-primary) !important;
  border-color: var(--dp-primary) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

.fc .fc-today-button:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Prev/Next arrow buttons */
.fc .fc-prev-button,
.fc .fc-next-button {
  background-color: var(--dp-surface) !important;
  border-color: var(--dp-border) !important;
  color: var(--dp-text-secondary) !important;
}

.fc .fc-prev-button:hover,
.fc .fc-next-button:hover {
  background-color: var(--dp-primary-light) !important;
  border-color: var(--dp-primary) !important;
  color: var(--dp-primary) !important;
}

/* ── Column headers (Sun Mon Tue…) ── */
.fc .fc-col-header-cell {
  background-color: var(--dp-surface) !important;
  border-color: var(--dp-border) !important;
}

.fc .fc-col-header-cell-cushion {
  font-family: var(--dp-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  color: var(--dp-text-muted) !important;
  padding: 8px 4px !important;
  text-decoration: none !important;
}

/* ── Day cells (month grid) ── */
.fc .fc-daygrid-day {
  background-color: var(--dp-bg) !important;
  border-color: var(--dp-border) !important;
  transition: background-color var(--dp-transition) !important;
}

.fc .fc-daygrid-day:hover { background-color: #fafbfc !important; }

/* Today highlight */
.fc .fc-daygrid-day.fc-day-today {
  background-color: #f0faf5 !important;
}

.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
  background-color: var(--dp-primary) !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  width: 26px !important;
  height: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
}

/* Past days */
.fc .fc-daygrid-day.fc-day-past { background-color: #fafbfc !important; }
.fc .fc-daygrid-day.fc-day-past .fc-daygrid-day-number { color: var(--dp-text-muted) !important; }

/* Day numbers */
.fc .fc-daygrid-day-number {
  font-family: var(--dp-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--dp-text-secondary) !important;
  padding: 6px 8px !important;
  text-decoration: none !important;
}

.fc .fc-daygrid-day-number:hover { color: var(--dp-primary) !important; }

/* Out-of-month days */
.fc .fc-daygrid-day.fc-day-other {
  background-color: var(--dp-surface) !important;
}

.fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-number {
  color: var(--dp-text-disabled) !important;
}

/* ── Events ── */
.fc .fc-daygrid-event,
.fc .fc-timegrid-event {
  font-family: var(--dp-font) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  padding: 1px 5px !important;
  border: none !important;
  cursor: pointer !important;
  transition: opacity var(--dp-transition), transform var(--dp-transition) !important;
}

.fc .fc-daygrid-event:hover,
.fc .fc-timegrid-event:hover {
  opacity: 0.88 !important;
  transform: translateY(-1px) !important;
}

.fc .fc-event-title {
  font-weight: 600 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* "more" link */
.fc .fc-daygrid-more-link {
  font-family: var(--dp-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--dp-primary) !important;
}

.fc .fc-daygrid-more-link:hover { text-decoration: underline !important; }

/* ── Time grid (week / day views) ── */
.fc .fc-timegrid-slot {
  border-color: var(--dp-border) !important;
  height: 36px !important;
}

.fc .fc-timegrid-slot-label {
  font-family: var(--dp-font) !important;
  font-size: 11px !important;
  color: var(--dp-text-muted) !important;
  font-weight: 500 !important;
}

.fc .fc-timegrid-now-indicator-line {
  border-color: var(--dp-primary) !important;
  border-width: 2px !important;
}

.fc .fc-timegrid-now-indicator-arrow {
  border-top-color: var(--dp-primary) !important;
  border-bottom-color: var(--dp-primary) !important;
}

/* ── List view ── */
.fc .fc-list {
  border-color: var(--dp-border) !important;
  border-radius: var(--dp-radius) !important;
  overflow: hidden !important;
}

.fc .fc-list-day-cushion {
  font-family: var(--dp-font) !important;
  background-color: var(--dp-surface) !important;
  color: var(--dp-text) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  padding: 8px 14px !important;
}

.fc .fc-list-event {
  cursor: pointer !important;
  transition: background-color var(--dp-transition) !important;
}

.fc .fc-list-event:hover td {
  background-color: var(--dp-primary-light) !important;
}

.fc .fc-list-event-title a {
  font-family: var(--dp-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--dp-text) !important;
  text-decoration: none !important;
}

.fc .fc-list-event-time {
  font-family: var(--dp-font) !important;
  font-size: 12px !important;
  color: var(--dp-text-muted) !important;
}

.fc .fc-list-empty {
  background-color: var(--dp-bg) !important;
}

.fc .fc-list-empty-cushion {
  font-family: var(--dp-font) !important;
  font-size: 13.5px !important;
  color: var(--dp-text-muted) !important;
}

/* ── Table / borders ── */
.fc table { border-color: var(--dp-border) !important; }
.fc th { border-color: var(--dp-border) !important; }
.fc td { border-color: var(--dp-border) !important; }

/* Scrollbar inside calendar */
.fc-scroller::-webkit-scrollbar { width: 5px; height: 5px; }
.fc-scroller::-webkit-scrollbar-track { background: transparent; }
.fc-scroller::-webkit-scrollbar-thumb {
  background: rgba(45, 134, 83, 0.35);
  border-radius: 999px;
}
.fc-scroller::-webkit-scrollbar-thumb:hover { background: rgba(45, 134, 83, 0.6); }

/* ── Popover (event detail tooltip on month view click) ── */
.fc .fc-popover {
  font-family: var(--dp-font) !important;
  background-color: var(--dp-bg) !important;
  border: 1px solid var(--dp-border) !important;
  border-radius: var(--dp-radius-sm) !important;
  box-shadow: var(--dp-shadow) !important;
  z-index: 1070 !important;
}

.fc .fc-popover-header {
  background-color: var(--dp-surface) !important;
  color: var(--dp-text) !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  border-radius: var(--dp-radius-sm) var(--dp-radius-sm) 0 0 !important;
  padding: 8px 12px !important;
}

.fc .fc-popover-close {
  color: var(--dp-text-muted) !important;
  opacity: 0.7 !important;
}

.fc .fc-popover-close:hover { opacity: 1 !important; }

/* ── Dark-mode override for FullCalendar ── */
html[data-color-theme="dark"] .fc,
html[data-color-theme="dark"] .fc .fc-toolbar-title {
  color: #1f2937 !important;
}

html[data-color-theme="dark"] .fc .fc-daygrid-day,
html[data-color-theme="dark"] .fc .fc-timegrid-col {
  background-color: #ffffff !important;
}

html[data-color-theme="dark"] .fc .fc-col-header-cell {
  background-color: #f9fafb !important;
}

html[data-color-theme="dark"] .fc .fc-daygrid-day.fc-day-today {
  background-color: #f0faf5 !important;
}

html[data-color-theme="dark"] .fc .fc-daygrid-day.fc-day-other {
  background-color: #f9fafb !important;
}

html[data-color-theme="dark"] .fc .fc-button,
html[data-color-theme="dark"] .fc .fc-button-primary {
  background-color: #ffffff !important;
  border-color: #d1d5db !important;
  color: #4b5563 !important;
}

html[data-color-theme="dark"] .fc .fc-button-primary:not(:disabled).fc-button-active {
  background-color: #2d8653 !important;
  color: #ffffff !important;
}

html[data-color-theme="dark"] .fc .fc-today-button {
  background-color: #2d8653 !important;
  color: #ffffff !important;
}

html[data-color-theme="dark"] .fc table,
html[data-color-theme="dark"] .fc th,
html[data-color-theme="dark"] .fc td {
  border-color: #e5e7eb !important;
}

html[data-color-theme="dark"] .fc .fc-list-day-cushion {
  background-color: #f9fafb !important;
  color: #1f2937 !important;
}

html[data-color-theme="dark"] .fc .fc-list-event-title a { color: #1f2937 !important; }

html[data-color-theme="dark"] .fc .fc-popover {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
}

html[data-color-theme="dark"] .fc .fc-popover-header {
  background-color: #f9fafb !important;
  color: #1f2937 !important;
}


/* ============================================================
   6. DATEPICKER INPUT GROUPS  (.input-group.datepicker-range)
   ============================================================ */

/* The text inputs inside datepicker range groups */
.datepicker-range .form-control,
.input-group.datepicker-range input[type="text"] {
  font-family: var(--dp-font) !important;
  background-color: var(--dp-bg) !important;
  color: var(--dp-text) !important;
  border: 1px solid var(--dp-border-input) !important;
  font-size: 13.5px !important;
}

.datepicker-range .form-control:focus,
.input-group.datepicker-range input[type="text"]:focus {
  background-color: var(--dp-bg) !important;
  border-color: var(--dp-primary) !important;
  box-shadow: var(--dp-focus-ring) !important;
  outline: none !important;
}

.datepicker-range .form-control::placeholder,
.input-group.datepicker-range input::placeholder {
  color: var(--dp-text-muted) !important;
  opacity: 1 !important;
}

.datepicker-range .input-group-text,
.datepicker-range .custom-label {
  background-color: var(--dp-surface) !important;
  border-color: var(--dp-border-input) !important;
  color: var(--dp-text-secondary) !important;
  font-family: var(--dp-font) !important;
  font-size: 13px !important;
}

/* ── Dark-mode override for input groups ── */
html[data-color-theme="dark"] .datepicker-range .form-control,
html[data-color-theme="dark"] .input-group.datepicker-range input {
  background-color: #ffffff !important;
  color: #1f2937 !important;
  border-color: #d1d5db !important;
}

html[data-color-theme="dark"] .datepicker-range .form-control::placeholder { color: #9ca3af !important; }
html[data-color-theme="dark"] .datepicker-range .input-group-text,
html[data-color-theme="dark"] .datepicker-range .custom-label {
  background-color: #f3f4f6 !important;
  border-color: #d1d5db !important;
  color: #4b5563 !important;
}


/* ============================================================
   7. RESPONSIVE ADJUSTMENTS
   ============================================================ */

@media (max-width: 575px) {
  .daterangepicker { left: 10px !important; right: 10px !important; width: auto !important; }
  .daterangepicker .drp-calendar { float: none !important; max-width: 100% !important; }
  .fc .fc-toolbar { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  .fc .fc-toolbar-title { font-size: 15px !important; }
  .fc .fc-button { font-size: 12px !important; padding: 5px 10px !important; }
}

@media (max-width: 767px) {
  .daterangepicker.show-ranges .drp-calendar { border-left: none !important; }
  .fc .fc-toolbar-chunk { display: flex; gap: 4px; flex-wrap: wrap; }
}