.ks-date-picker {
  background: var(--app-surface, #fff);
  border: 1px solid var(--app-border, #dbe5ef);
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(16, 24, 40, .18);
  box-sizing: border-box;
  color: var(--app-field-text, #101828);
  font: 13px/1.4 "Segoe UI", sans-serif;
  inset: auto;
  margin: 0;
  max-width: calc(100vw - 16px);
  padding: 12px;
  position: fixed;
  width: 292px;
  z-index: 100000;
}
.ks-date-picker__header,
.ks-date-picker__footer {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}
.ks-date-picker.ks-date-picker .ks-date-picker__header.ks-date-picker__header {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-weight: 700;
  margin: 0 0 8px !important;
  padding: 0 !important;
  width: 100% !important;
}
.ks-date-picker__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.ks-date-picker__weekday { color: #667085; font-size: 11px; padding: 5px 0; text-align: center; }
.ks-date-picker button {
  align-items: center !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  box-shadow: none;
  color: inherit;
  cursor: pointer;
  display: inline-flex !important;
  font: inherit !important;
  height: 32px !important;
  justify-content: center !important;
  min-height: 32px !important;
  min-width: 0 !important;
  padding: 0 6px !important;
}
.ks-date-picker button:hover { background: #eaf5ff !important; color: #175cd3; }
.ks-date-picker button:focus-visible { outline: 2px solid #3978ff; outline-offset: 1px; }
.ks-date-picker button.is-outside { color: #98a2b3; }
.ks-date-picker button.is-today { border-color: #3978ff !important; }
.ks-date-picker button.is-selected { background: #3978ff !important; color: white !important; }
.ks-date-picker button:disabled { cursor: default; opacity: .35; }
.ks-date-picker__footer { border-top: 1px solid #e4e7ec; margin-top: 8px; padding-top: 8px; }
.ks-date-picker__footer button:first-child { color: #175cd3; font-weight: 700 !important; }
/*
 * App-wide date and time proxy control.
 *
 * Normal forms use the shared 38px control height. Date inputs inside tables
 * are marked compact by the date enhancer and use 34px. Context-specific CSS
 * may continue to control width and grid placement, but not visual treatment.
 */
.keshero-date-format-field {
  --keshero-date-control-height: var(--app-control-height, 38px);
  align-items: stretch !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  display: block !important;
  height: var(--keshero-date-control-height) !important;
  max-height: var(--keshero-date-control-height) !important;
  max-width: 100%;
  min-height: var(--keshero-date-control-height) !important;
  min-width: 0;
  padding: 0 !important;
  position: relative;
  width: 100%;
}

.keshero-date-format-field--compact {
  --keshero-date-control-height: 34px;
}

.keshero-date-format-input {
  appearance: none;
  background: var(--app-field-bg, #ffffff) !important;
  border: 1px solid var(--app-field-border, #d0d5dd) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04) !important;
  box-sizing: border-box !important;
  color: var(--app-field-text, #101828) !important;
  font: inherit;
  height: var(--keshero-date-control-height) !important;
  line-height: 1.2 !important;
  max-height: var(--keshero-date-control-height) !important;
  max-width: 100% !important;
  min-height: var(--keshero-date-control-height) !important;
  min-width: 0 !important;
  padding: 0 40px 0 10px !important;
  width: 100% !important;
}

.keshero-date-format-input::placeholder {
  color: var(--app-muted, #667085);
  opacity: 0.82;
}

.keshero-date-format-input:focus {
  border-color: var(--app-action-primary, #1d9bf0) !important;
  box-shadow: none !important;
  outline: none !important;
}

.keshero-date-format-field:has(.keshero-date-format-input:focus) {
  box-shadow: 0 0 0 var(--app-field-focus-ring-width, 2px) var(--app-field-focus-ring, rgba(29, 155, 240, 0.18)) !important;
}

.keshero-date-format-calendar {
  align-items: center !important;
  background: var(--app-action-secondary, #ffffff) !important;
  border: 1px solid var(--app-field-border, #d0d5dd) !important;
  border-left: 0 !important;
  border-radius: 0 8px 8px 0 !important;
  bottom: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  color: var(--app-muted, #667085) !important;
  cursor: pointer;
  display: inline-flex !important;
  height: var(--keshero-date-control-height) !important;
  justify-content: center !important;
  left: auto !important;
  margin: 0 !important;
  max-height: var(--keshero-date-control-height) !important;
  min-height: var(--keshero-date-control-height) !important;
  padding: 0 !important;
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  width: 34px !important;
  z-index: 1;
}

.keshero-date-format-calendar svg {
  fill: none !important;
  height: 17px !important;
  stroke: currentColor !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 17px !important;
}

.keshero-date-format-calendar:hover,
.keshero-date-format-calendar:focus-visible {
  background: var(--app-action-secondary-hover, #f8fafc) !important;
  color: var(--app-action-primary, #1d9bf0) !important;
  outline: none !important;
}

.keshero-date-format-calendar:active {
  background: #dbeafe !important;
  transform: scale(0.94);
}

/* Time controls share the calendar control's right-hand button and states. */
.keshero-time-format-input::-webkit-calendar-picker-indicator {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.keshero-time-format-input::-webkit-inner-spin-button {
  display: none;
}

.keshero-time-format-clock svg {
  fill: none !important;
  stroke: currentColor !important;
}

.keshero-date-format-input:disabled,
.keshero-date-format-field:has(.keshero-date-format-native:disabled) .keshero-date-format-input,
.keshero-date-format-field:has(.keshero-date-format-native:disabled) .keshero-date-format-calendar {
  cursor: not-allowed;
  opacity: 0.62;
}

html[data-keshero-theme="dark"] .keshero-date-format-calendar {
  background: var(--app-action-secondary, #111827) !important;
  border-color: var(--app-field-border, #344054) !important;
  color: var(--app-field-text, #f8fafc) !important;
}

@media (max-width: 640px) {
  .keshero-date-format-field {
    max-width: 100%;
  }
}