.sc-date-picker-native-fallback {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.sc-date-picker-trigger,
.sc-date-picker-launch,
.sc-date-picker-text-input,
.sc-date-picker-popover-select,
.sc-date-picker-popover-day,
.sc-date-picker-popover-nav-btn,
.sc-date-picker-popover-action {
  font: inherit;
  box-shadow: none;
}

.sc-date-picker-inline {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  min-height: var(--sc-admin-control-height, var(--ui-height-control, 36px));
  border: 1px solid var(--sc-admin-control-border, color-mix(in srgb, var(--ui-border, #d7dce5) 88%, white 12%));
  border-radius: var(--sc-admin-control-radius, var(--ui-radius-control, 18px));
  background: linear-gradient(180deg, var(--sc-admin-control-bg, #ffffff) 0%, color-mix(in srgb, var(--sc-admin-control-bg, #ffffff) 88%, var(--ui-surface-muted, #f2f5fb) 12%) 100%);
  overflow: hidden;
}

.sc-date-picker-inline:focus-within {
  border-color: var(--sc-admin-focus, var(--ui-primary, #8155ff));
  background: linear-gradient(180deg, var(--sc-admin-control-bg-active, var(--ui-surface, #ffffff)) 0%, color-mix(in srgb, var(--sc-admin-control-bg-active, var(--ui-surface, #ffffff)) 92%, white 8%) 100%);
}

.sc-date-picker-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--sc-admin-control-height, var(--ui-height-control, 36px));
  border: 1px solid var(--sc-admin-control-border, color-mix(in srgb, var(--ui-border, #d7dce5) 88%, white 12%));
  border-radius: var(--sc-admin-control-radius, var(--ui-radius-control, 18px));
  background: var(--sc-admin-control-bg, #ffffff);
  padding: 0 var(--sc-admin-control-padding-x, 0.6875rem);
  font-size: var(--sc-admin-control-font-size, 12px);
  line-height: var(--sc-admin-control-line-height, 1.25);
  color: var(--ui-text, #0f172a);
  text-align: left;
}

.sc-date-picker-trigger:focus,
.sc-date-picker-launch:focus,
.sc-date-picker-text-input:focus {
  outline: none;
  border-color: var(--sc-admin-focus, var(--ui-primary, #8155ff));
  box-shadow: none;
  background: var(--sc-admin-control-bg-active, var(--ui-surface, #ffffff));
}

.sc-date-picker-text-input {
  width: 100%;
  min-height: 100%;
  appearance: none;
  -webkit-appearance: none;
  border: 0 !important;
  border-right: 1px solid var(--sc-admin-control-divider, color-mix(in srgb, var(--ui-border, #d7dce5) 86%, white 14%)) !important;
  border-radius: 0;
  background: transparent;
  box-shadow: none !important;
  font-size: var(--sc-admin-control-font-size, 12px) !important;
  line-height: var(--sc-admin-control-line-height, 1.25) !important;
}

.sc-date-picker-text-input.is-invalid,
.sc-date-picker-launch.is-invalid {
  border-color: color-mix(in srgb, #dc2626 48%, white 52%);
  box-shadow: none;
}

.sc-date-picker-value {
  font-weight: 600;
  font-size: var(--sc-admin-control-font-size, 12px);
  line-height: var(--sc-admin-control-line-height, 1.25);
}

.sc-date-picker-trigger.is-empty .sc-date-picker-value {
  font-weight: 500;
  color: color-mix(in srgb, var(--ui-text-muted, #64748b) 82%, white 18%);
}

.sc-date-picker-trigger.is-invalid {
  border-color: color-mix(in srgb, #dc2626 48%, white 52%);
  box-shadow: none;
}

.sc-date-picker-launch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  min-width: var(--sc-admin-control-height, var(--ui-height-control, 36px));
  min-height: 100%;
  margin: 0;
  border: 0 !important;
  border-left: 0 !important;
  border-radius: 0;
  background: color-mix(in srgb, var(--sc-admin-surface-muted, var(--ui-surface-muted, #f2f5fb)) 78%, white 22%);
  box-shadow: none !important;
  color: var(--ui-text-muted, #64748b);
  font-size: var(--sc-admin-control-font-size, 12px) !important;
  line-height: var(--sc-admin-control-line-height, 1.25) !important;
  padding: 0 0.78rem !important;
}

.sc-date-picker-launch:hover {
  color: var(--ui-text, #0f172a);
  background: color-mix(in srgb, var(--sc-admin-surface-muted, var(--ui-surface-muted, #f2f5fb)) 62%, white 38%);
}

.sc-date-picker-inline .sc-date-picker-text-input,
.sc-date-picker-inline .sc-date-picker-launch {
  outline: none;
}

.sc-date-picker-inline .sc-date-picker-launch,
.sc-date-picker-inline .sc-date-picker-icon,
.sc-date-picker-inline .sc-date-picker-icon svg {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.dashboard-compact main .sc-date-picker-inline .sc-date-picker-text-input,
.dashboard-compact main .sc-date-picker-inline .sc-date-picker-launch {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.dashboard-compact main .sc-date-picker-trigger {
  min-height: var(--sc-admin-control-height, 36px) !important;
  border-color: var(--sc-admin-control-border, rgba(66, 86, 109, 0.24)) !important;
  border-radius: var(--sc-admin-control-radius, 18px) !important;
  background: var(--sc-admin-control-bg, #ffffff) !important;
  padding: 0 var(--sc-admin-control-padding-x, 0.6875rem) !important;
  font-size: var(--sc-admin-control-font-size, 12px) !important;
  line-height: var(--sc-admin-control-line-height, 1.25) !important;
  color: var(--dash-text) !important;
}

.dashboard-compact main .sc-date-picker-trigger .sc-date-picker-value,
.dashboard-compact main .sc-date-picker-trigger.is-empty .sc-date-picker-value {
  font-size: var(--sc-admin-control-font-size, 12px) !important;
  line-height: var(--sc-admin-control-line-height, 1.25) !important;
}

.dashboard-compact main .sc-date-picker-trigger .sc-date-picker-icon {
  color: var(--dash-text-soft, #64748b) !important;
}

.dashboard-compact form .sc-date-picker-inline .sc-date-picker-text-input {
  border: 0 !important;
  border-right: 1px solid var(--sc-admin-control-divider, rgba(66, 86, 109, 0.18)) !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  min-height: var(--sc-admin-control-height, 36px) !important;
  padding: 0 var(--sc-admin-control-padding-x, 0.6875rem) !important;
  font-size: var(--sc-admin-control-font-size, 12px) !important;
  line-height: var(--sc-admin-control-line-height, 1.25) !important;
}

.dashboard-compact main .sc-date-picker-inline {
  display: flex;
  align-items: stretch;
  min-height: var(--sc-admin-control-height, 36px);
  height: var(--sc-admin-control-height, 36px);
  border-color: var(--sc-admin-control-border, rgba(66, 86, 109, 0.24)) !important;
  border-radius: var(--sc-admin-control-radius, 18px) !important;
  background: var(--sc-admin-control-bg, #ffffff) !important;
}

.dashboard-compact main .sc-date-picker-inline:focus-within {
  border-color: var(--sc-admin-focus, #5c8fbe) !important;
  background: var(--sc-admin-control-bg-active, #ffffff) !important;
}

.dashboard-compact main .sc-date-picker-inline .sc-date-picker-text-input,
.dashboard-compact main .sc-date-picker-inline .sc-date-picker-launch {
  height: 100% !important;
}

.dashboard-compact main .sc-date-picker-inline .sc-date-picker-launch {
  min-height: var(--sc-admin-control-height, 36px) !important;
  min-width: var(--sc-admin-control-height, 36px) !important;
  padding: 0 0.625rem !important;
  font-size: var(--sc-admin-control-font-size, 12px) !important;
  line-height: var(--sc-admin-control-line-height, 1.25) !important;
}

body.sc-public .sc-date-picker-inline,
body.portal-shell .sc-date-picker-inline {
  display: flex;
  align-items: stretch;
  min-height: var(--ui-height-control, 36px);
  border-color: var(--ui-border, #d7dce5) !important;
  border-radius: var(--ui-radius-control, 18px) !important;
  background: var(--ui-surface, #ffffff) !important;
  overflow: hidden !important;
}

body.sc-public .sc-date-picker-inline:focus-within,
body.portal-shell .sc-date-picker-inline:focus-within {
  border-color: var(--ui-primary, #8155ff) !important;
  background: var(--ui-surface, #ffffff) !important;
}

body.sc-public .sc-date-picker-inline .sc-date-picker-text-input,
body.portal-shell .sc-date-picker-inline .sc-date-picker-text-input,
body.sc-public .sc-date-picker-inline .sc-date-picker-launch,
body.portal-shell .sc-date-picker-inline .sc-date-picker-launch {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  height: 100% !important;
}

body.sc-public .sc-date-picker-inline .sc-date-picker-text-input,
body.portal-shell .sc-date-picker-inline .sc-date-picker-text-input {
  background: transparent !important;
  border-right: 1px solid color-mix(in srgb, var(--ui-border, #d7dce5) 86%, white 14%) !important;
  min-height: var(--ui-height-control, 36px) !important;
  padding: 0 var(--ui-control-padding-x, 12px) !important;
  font-size: var(--ui-size-body, 0.84rem) !important;
  line-height: 1.3 !important;
}

body.sc-public .sc-date-picker-inline .sc-date-picker-launch,
body.portal-shell .sc-date-picker-inline .sc-date-picker-launch {
  min-height: var(--ui-height-control, 36px) !important;
  min-width: var(--ui-height-control, 36px) !important;
  padding: 0 0.78rem !important;
  background: color-mix(in srgb, var(--sc-admin-surface-muted, var(--ui-surface-muted, #f2f5fb)) 78%, white 22%) !important;
  color: var(--ui-text, #151a2d) !important;
}

.sc-date-picker-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ui-text-muted, #64748b);
  flex-shrink: 0;
}

.sc-date-picker-icon svg {
  display: block;
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
}

.sc-date-picker-popover {
  position: fixed;
  z-index: 90;
  /* Wide enough that the longest month name ("September"/"November"/
     "December") never forces the title + nav row to wrap onto a second
     line - that wrap was what made the popover's height jump around. */
  width: 23rem;
  border: 1px solid var(--sc-admin-border, color-mix(in srgb, var(--ui-border, #d7dce5) 86%, white 14%));
  border-radius: var(--sc-admin-surface-radius, var(--ui-radius-panel, 18px));
  background: linear-gradient(180deg, var(--sc-admin-surface, var(--ui-surface, #ffffff)) 0%, color-mix(in srgb, var(--sc-admin-surface-elevated, var(--ui-surface-muted, #f2f5fb)) 60%, white 40%) 100%);
  box-shadow: var(--sc-admin-shadow-md, 0 18px 42px rgba(15, 23, 42, 0.18));
  overflow: hidden;
}

.sc-date-picker-popover.hidden,
.sc-date-picker-popover-controls.hidden,
.sc-date-picker-popover-nav.hidden {
  display: none !important;
}

.sc-date-picker-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem 0.65rem;
  border-bottom: 1px solid var(--sc-admin-border, color-mix(in srgb, var(--ui-border, #d7dce5) 86%, white 14%));
  background: linear-gradient(180deg, var(--sc-admin-surface, var(--ui-surface, #ffffff)) 0%, color-mix(in srgb, var(--sc-admin-surface-soft-fill, var(--ui-surface-muted, #f2f5fb)) 58%, white 42%) 100%);
}

.sc-date-picker-popover-title {
  font-size: 0.88rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--sc-admin-text, var(--ui-text, #0f172a));
}

.sc-date-picker-popover-nav {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.4rem;
}

.sc-date-picker-popover-nav-btn,
.sc-date-picker-popover-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--sc-admin-action-height, var(--ui-height-control, 36px));
  padding: 0.32rem 0.75rem;
  border: 1px solid var(--sc-admin-control-divider, color-mix(in srgb, var(--ui-border, #d7dce5) 86%, white 14%));
  border-radius: var(--sc-admin-action-radius, var(--ui-radius-control, 18px));
  background: var(--sc-admin-control-bg-active, var(--ui-surface, #ffffff));
  box-shadow: none;
  color: var(--sc-admin-text, var(--ui-text, #0f172a));
  font: inherit;
  font-size: var(--sc-admin-control-font-size, 12px);
  font-weight: 700;
  line-height: 1.2;
}

.sc-date-picker-popover-nav-btn:hover,
.sc-date-picker-popover-action:hover {
  border-color: var(--sc-admin-control-border, color-mix(in srgb, var(--ui-border, #d7dce5) 72%, #7aa5cf 28%));
  background: var(--sc-admin-surface-soft-fill, color-mix(in srgb, var(--ui-surface-muted, #f2f5fb) 54%, white 46%));
}

.sc-date-picker-popover-body {
  padding: 0.75rem;
}

.sc-date-picker-popover-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.sc-date-picker-popover-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(6.5rem, 7rem);
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.sc-date-picker-popover-select {
  width: 100%;
  min-height: var(--sc-admin-control-height, var(--ui-height-control, 36px));
  padding: 0 var(--sc-admin-control-padding-x, 0.6875rem);
  border: 1px solid var(--sc-admin-control-divider, color-mix(in srgb, var(--ui-border, #d7dce5) 86%, white 14%));
  border-radius: var(--sc-admin-control-radius, var(--ui-radius-control, 18px));
  background: var(--sc-admin-control-bg-active, var(--ui-surface, #ffffff));
  color: var(--sc-admin-text, var(--ui-text, #0f172a));
  font: inherit;
  font-size: var(--sc-admin-control-font-size, 12px);
  line-height: var(--sc-admin-control-line-height, 1.25);
  box-shadow: none;
}

.sc-date-picker-popover-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
}

.sc-date-picker-popover-dow {
  text-align: center;
  font-size: 0.65rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sc-admin-text-soft, var(--ui-text-muted, #64748b));
}

.sc-date-picker-popover-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  border: 1px solid var(--sc-admin-border, color-mix(in srgb, var(--ui-border, #d7dce5) 86%, white 14%));
  border-radius: 0.7rem;
  background: var(--sc-admin-surface, var(--ui-surface, #ffffff));
  color: var(--sc-admin-text, var(--ui-text, #0f172a));
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  box-shadow: none;
}

.sc-date-picker-popover-day:hover {
  border-color: var(--sc-admin-control-border, color-mix(in srgb, var(--ui-border, #d7dce5) 72%, #7aa5cf 28%));
  background: var(--sc-admin-surface-soft-fill, color-mix(in srgb, var(--ui-surface-muted, #f2f5fb) 54%, white 46%));
}

.sc-date-picker-popover-day.is-selected {
  border-color: var(--sc-admin-tone-blue, color-mix(in srgb, var(--ui-primary, #8155ff) 74%, white 26%));
  background: color-mix(in srgb, var(--sc-admin-tone-blue, var(--ui-primary, #8155ff)) 12%, white 88%);
  color: color-mix(in srgb, var(--sc-admin-tone-blue, var(--ui-primary, #8155ff)) 82%, var(--sc-admin-text, var(--ui-text, #0f172a)) 18%);
}

.sc-date-picker-popover-day.is-today {
  border-color: color-mix(in srgb, var(--sc-admin-tone-blue, var(--ui-primary, #8155ff)) 42%, var(--sc-admin-border, var(--ui-border, #d7dce5)) 58%);
  color: color-mix(in srgb, var(--sc-admin-tone-blue, var(--ui-primary, #8155ff)) 82%, var(--sc-admin-text, var(--ui-text, #0f172a)) 18%);
}

.sc-date-picker-popover-day:disabled,
.sc-date-picker-popover-day.is-disabled {
  border-color: var(--sc-admin-border, color-mix(in srgb, var(--ui-border, #d7dce5) 86%, white 14%));
  background: color-mix(in srgb, var(--sc-admin-surface-muted, var(--ui-surface-muted, #f2f5fb)) 80%, white 20%);
  color: var(--sc-admin-text-muted, var(--ui-text-muted, #64748b));
  cursor: not-allowed;
}

.sc-date-picker-popover-day-empty {
  border-color: transparent;
  background: transparent;
  pointer-events: none;
}

.sc-date-picker-hint {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ui-text-muted, #64748b);
}