/* === DEV BANNER TEST ===
#dfBody::before {
  content: "SFDatePicker.css is active!";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #ff0000;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  padding: 4px;
  z-index: 99999;
}
=== END DEV BANNER === */



/* ===== sf.WebDatePicker overrides =====
   Scope: only affects your Syncfusion DatePicker wrapper
   Load this AFTER DF theme CSS and EJ2 CSS.
*/

/* Scope everything to the control root to avoid global side-effects */
.sfWebDatePicker {

  /* Keep popup above DF dialogs */
  /* (popup element sits outside the root but shares EJ2 classes, so repeat below unscoped too) */
}

/* Popup z-index (unscoped so it catches the detached popup) */
.e-datepicker.e-popup,
.e-date-popup { z-index: 10040 !important; }

/* Weekday header always visible (thead-based and flex-based variants) */
.sfWebDatePicker .e-calendar thead {
  display: table-header-group !important;
  visibility: visible !important;
  height: auto !important;
  line-height: normal !important;
  opacity: 1 !important;
}
.sfWebDatePicker .e-calendar thead th {
  display: table-cell !important;
  visibility: visible !important;
  padding: 4px !important;
  font-size: 12px !important;
}

/* Some themes use a non-thead header row */
.sfWebDatePicker .e-calendar .e-week-header {
  display: flex !important;
  visibility: visible !important;
  gap: 6px !important;
  opacity: 1 !important;
}
.sfWebDatePicker .e-calendar .e-week-header > * {
  display: block !important;
  visibility: visible !important;
}

/* Show leading/trailing days and make them clickable */
.sfWebDatePicker .e-calendar .e-content tr.e-month-hide,
.sfWebDatePicker .e-calendar .e-content td.e-other-month > span.e-day { display: block; }
.sfWebDatePicker .e-calendar .e-content td.e-month-hide,
.sfWebDatePicker .e-calendar .e-content td.e-other-month { pointer-events: auto; touch-action: auto; }

/* Prevent horizontal scrollbar once other-month days are visible */
.sfWebDatePicker .e-calendar .e-content table { width: 100% !important; table-layout: fixed; }
.sfWebDatePicker .e-calendar { overflow-x: hidden; }

/* Make “today” ring visible */
.sfWebDatePicker .e-calendar .e-content td.e-today > span {
  border: 1px solid currentColor !important;
  box-sizing: border-box;
}