/* Unified DIAKO date-picker chrome.
   Tokens + appearance only. Date conversion / min-max / save logic stay in each widget. */

:root {
  --da-dp-orange: var(--ds-orange-500, #f97316);
  --da-dp-orange-600: var(--ds-orange-600, #ea580c);
  --da-dp-orange-200: #fed7aa;
  --da-dp-orange-100: var(--ds-orange-100, #fff7ed);
  --da-dp-navy: var(--ds-navy-900, #0f172a);
  --da-dp-navy-800: var(--ds-navy-800, #1e293b);
  --da-dp-muted: var(--ds-gray-500, #64748b);
  --da-dp-border: var(--ds-gray-200, #e2e8f0);
  --da-dp-bg: #fff;
  --da-dp-radius: 14px;
  --da-dp-day-radius: 8px;
  --da-dp-shadow: 0 16px 40px -28px rgba(15, 23, 42, 0.45);
  --da-dp-z: 2147483000;
  --da-dp-font: var(--font-body, "Vazirmatn", Tahoma, sans-serif);
}

/* —— Overlay shell: always a floating layer, never clipped by parent overflow —— */
.s360-cal-pop,
.t360-cal-pop,
.hire-cal-pop,
.da-dp-pop,
.iff-datepicker:not(.iff-datepicker--sheet) {
  position: fixed !important;
  z-index: var(--da-dp-z);
  margin: 0;
  box-sizing: border-box;
  overflow: visible;
  max-width: calc(100vw - 16px);
}

.s360-cal-pop,
.t360-cal-pop,
.hire-cal-pop,
.da-dp-pop {
  inset: auto;
}

/* Never lock the document when a calendar is open. */
body.t360-cal-open,
html.t360-cal-open,
html.iff-datepicker-lock,
html.iff-datepicker-lock body {
  overflow: visible !important;
}

/* Leftover teacher backdrop must not trap the page. */
.t360-cal-backdrop {
  display: none !important;
}

/* —— Shared calendar card —— */
.s360-cal,
.hire-cal,
.iff-datepicker {
  border: 1px solid var(--da-dp-border);
  border-radius: var(--da-dp-radius);
  background: var(--da-dp-bg);
  box-shadow: var(--da-dp-shadow);
  padding: 10px;
  font-family: var(--da-dp-font);
  color: var(--da-dp-navy);
  box-sizing: border-box;
}

.s360-cal__navbtn,
.s360-cal__today,
.hire-cal__navbtn,
.iff-datepicker__nav,
.iff-datepicker__close {
  border: 0;
  background: #f8fafc;
  color: var(--da-dp-navy-800);
  border-radius: var(--da-dp-day-radius);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
}

.s360-cal__navbtn:hover,
.s360-cal__today:hover,
.hire-cal__navbtn:hover,
.iff-datepicker__nav:hover,
.iff-datepicker__close:hover {
  background: var(--da-dp-orange-100);
}

.s360-cal__month,
.s360-cal__year,
.hire-cal__month,
.hire-cal__year,
.iff-datepicker__month,
.iff-datepicker__year {
  border: 1px solid var(--da-dp-border);
  border-radius: var(--da-dp-day-radius);
  background: #fff;
  color: var(--da-dp-navy);
  font-family: inherit;
}

.s360-cal__week span,
.hire-cal__week span,
.iff-datepicker__weekdays span {
  color: var(--da-dp-muted);
  font-weight: 700;
}

.s360-cal__day,
.hire-cal__day,
.iff-datepicker__day {
  border: 0;
  border-radius: var(--da-dp-day-radius);
  background: transparent;
  color: var(--da-dp-navy);
  font-family: inherit;
  cursor: pointer;
}

.s360-cal__day:hover,
.hire-cal__day:hover,
.iff-datepicker__day:hover {
  background: var(--da-dp-orange-100);
}

.s360-cal__day.is-today,
.hire-cal__day.is-today,
.iff-datepicker__day.is-today {
  box-shadow: inset 0 0 0 1px var(--da-dp-orange-200);
  background: var(--da-dp-orange-100);
  color: var(--da-dp-navy);
}

.s360-cal__day.is-selected,
.hire-cal__day.is-selected,
.iff-datepicker__day.is-selected,
.s360-cal__day.is-selected.is-today,
.hire-cal__day.is-selected.is-today,
.iff-datepicker__day.is-selected.is-today {
  background: var(--da-dp-orange) !important;
  color: #fff !important;
  box-shadow: none;
}

.s360-cal__day.is-disabled,
.s360-cal__day:disabled,
.hire-cal__day.is-disabled,
.hire-cal__day:disabled,
.iff-datepicker__day.is-disabled,
.iff-datepicker__day:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
  background: transparent;
  color: var(--da-dp-muted);
}

.s360-cal__today,
.iff-datepicker__today {
  background: var(--da-dp-navy-800);
  color: #fff;
}

.s360-cal__today:hover,
.iff-datepicker__today:hover {
  background: var(--da-dp-navy);
  color: #fff;
}

.iff-datepicker__mode.is-active {
  background: var(--da-dp-navy-800);
  border-color: var(--da-dp-navy-800);
  color: #fff;
}

/* Mobile: keep the whole popup inside the viewport; 44px tap targets. */
@media (max-width: 719px) {
  .s360-cal-pop,
  .t360-cal-pop,
  .hire-cal-pop,
  .da-dp-pop {
    max-width: calc(100vw - 16px) !important;
  }

  .s360-cal__day,
  .hire-cal__day,
  .iff-datepicker__day,
  .s360-cal__navbtn,
  .s360-cal__today,
  .s360-cal__month,
  .s360-cal__year,
  .hire-cal__navbtn,
  .hire-cal__month,
  .hire-cal__year {
    min-height: 44px;
  }
}

/* —— Admin / CRM dual calendar: orange selected, subtle today —— */
.da-jdp,
.da-jdp.da-cal-popup {
  --da-cal-selected-bg: var(--da-dp-orange);
  --da-cal-selected-fg: #ffffff;
  --da-cal-today-border: #fdba74;
  --da-cal-today-fg: var(--da-dp-navy);
  --da-cal-today-bg: var(--da-dp-orange-100);
  --da-cal-hover-bg: var(--da-dp-orange-100);
  --da-cal-hover-fg: var(--da-dp-orange-600);
}

.da-jdp__day.is-today:not(.is-selected) {
  background: var(--da-dp-orange-100) !important;
  color: var(--da-dp-navy) !important;
  border-color: #fdba74 !important;
  box-shadow: inset 0 0 0 1px #fdba74 !important;
  transform: none;
}

.da-jdp__day.is-selected,
.da-jdp__day.is-selected:hover {
  background: var(--da-dp-orange) !important;
  border-color: var(--da-dp-orange) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px -10px rgba(234, 88, 12, 0.55);
}

.da-jdp__day.is-selected.is-today {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px #fdba74,
    0 8px 18px -10px rgba(234, 88, 12, 0.45);
}

/* —— Interview month grids (not popups): same selected / today language —— */
.ivw-cal__day.is-today:not(.is-selected),
.ivb__cal-day.is-today:not(.is-selected) {
  border-color: #fdba74 !important;
  background: var(--da-dp-orange-100) !important;
  color: var(--da-dp-navy) !important;
  box-shadow: inset 0 0 0 1px rgba(253, 186, 116, 0.7);
}

.ivw-cal__day.is-selected,
.ivb__cal-day.is-selected {
  background: var(--da-dp-orange) !important;
  color: #fff !important;
  border-color: var(--da-dp-orange) !important;
  box-shadow: none !important;
}

.ivw-cal__legend-selected {
  background: var(--da-dp-orange);
}