.crm-date-picker,
.crm-date-popover,
.crm-date-range-fields {
  --crm-date-primary: var(--crm-color-primary);
  --crm-date-primary-strong: var(--crm-color-primary-strong);
  --crm-date-primary-soft: var(--crm-color-primary-subtle);
  --crm-date-surface: var(--crm-color-surface);
  --crm-date-text: var(--crm-color-text);
  --crm-date-muted: var(--crm-color-text-secondary);
  --crm-date-disabled: var(--crm-color-disabled-text);
  --crm-date-border: var(--crm-color-border);
  --crm-date-control-border: var(--crm-color-control-border);
  --crm-date-danger: var(--crm-color-danger-strong);
  --crm-date-shadow: color-mix(in srgb, var(--crm-color-shadow) 8%, transparent);
  --crm-date-focus: var(--crm-date-primary);
}

.crm-date-input,
.crm-datetime-input,
input[data-crm-date-picker][data-crm-date-ready="true"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.crm-date-picker { position: relative; display: block; min-width: 0; }
.crm-date-picker > button.crm-date-trigger { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; min-width: 0; box-sizing: border-box; text-align: left; min-height: var(--crm-control-compact, 34px); align-items: center; justify-content: space-between; gap: .75rem; margin-top: var(--crm-date-trigger-margin-top, .35rem); padding: 4px 8px; border: 1px solid var(--crm-date-control-border); border-radius: var(--crm-radius-control, 9px); background: var(--crm-date-surface); color: var(--crm-date-text); font: inherit; line-height: var(--crm-date-trigger-line-height, inherit); font-weight: 650; cursor: pointer; }
.crm-date-value { min-width: 0; overflow-wrap: anywhere; }
.crm-date-picker:has(> input[data-crm-period-picker]) .crm-date-value { white-space: nowrap; overflow-wrap: normal; }
.crm-date-icon { display: block; width: 18px; height: 18px; flex: none; color: var(--crm-date-primary-strong); }
.crm-date-trigger:focus-visible { outline: 2px solid var(--crm-date-focus); outline-offset: 2px; }
.crm-date-grid-row { display: contents; }
.crm-date-calendar { display: block; min-width: 0; }
.crm-date-period-popover { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; }
.crm-date-period-sidebar { display: grid; align-content: start; gap: 16px; padding-right: 16px; border-right: 1px solid var(--crm-date-border); }
.crm-date-period-modes, .crm-date-period-quick { display: grid; gap: 6px; }
.crm-date-period-sidebar button { display: flex; min-height: 38px; align-items: center; gap: 8px; padding: 6px 8px; margin: 0; border: 1px solid var(--crm-date-border); border-radius: var(--crm-radius-control, 9px); background: var(--crm-date-surface); color: var(--crm-date-text); font: inherit; text-align: left; cursor: pointer; }
.crm-date-period-modes button::before { content: ""; width: 12px; height: 12px; flex: none; border: 1px solid var(--crm-date-muted); border-radius: 50%; }
.crm-date-period-sidebar button[aria-pressed="true"] { border-color: var(--crm-date-primary); background: var(--crm-date-primary-soft); color: var(--crm-date-primary-strong); }
.crm-date-period-modes button[aria-pressed="true"]::before { border-color: var(--crm-date-primary); background: var(--crm-date-primary); box-shadow: inset 0 0 0 2px var(--crm-date-surface); }
.crm-date-period-sidebar button:hover { background: var(--crm-date-primary-soft); }
.crm-date-period-sidebar button:focus-visible { outline: 2px solid var(--crm-date-focus); outline-offset: 2px; }
.crm-date-period-summary { color: var(--crm-date-muted); font-size: var(--crm-font-supporting, 12px); line-height: 1.5; }
.crm-date-popover { position: fixed; z-index: var(--crm-layer-control-popover); top: 0; left: 0; right: auto; bottom: auto; margin: 0; width: min(340px, calc(100vw - 1.5rem)); max-height: calc(100dvh - 1.5rem); box-sizing: border-box; padding: .9rem; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--crm-date-border); border-radius: 14px; background: var(--crm-date-surface); box-shadow: 0 18px 42px var(--crm-date-shadow); color: var(--crm-date-text); font-family: inherit; }
.crm-date-popover[hidden] { display: none; }
.crm-date-month { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: .4rem; }
.crm-date-month button, .crm-date-day { margin: 0 !important; border: 0 !important; background: transparent !important; color: var(--crm-date-text) !important; box-shadow: none !important; }
.crm-date-month button { display: grid !important; width: 40px !important; height: 40px !important; padding: 0 !important; place-items: center !important; border-radius: 10px !important; font-size: 1.05rem !important; }
.crm-date-month button:not(:disabled) { cursor: pointer; }
.crm-date-month button:not(:disabled):hover, .crm-date-month button:not(:disabled):focus-visible { background: var(--crm-date-primary-soft) !important; outline: 2px solid var(--crm-date-focus) !important; }
.crm-date-month strong { text-align: center; text-transform: capitalize; }
.crm-date-week, .crm-date-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: 0; row-gap: 4px; }
.crm-date-week { margin: .75rem 0 .3rem; color: var(--crm-date-muted); font-size: .72rem; text-align: center; }
.crm-date-day, .crm-date-empty { display: grid; min-height: 36px; place-items: center; padding: 0; border-radius: 0; }
.crm-date-day { cursor: pointer; }
.crm-date-day:not(:disabled):hover, .crm-date-day:not(:disabled):focus-visible { outline: 2px solid var(--crm-date-focus); background: var(--crm-date-primary-soft) !important; }
.crm-date-day.is-today:not(:disabled) > span { box-shadow: inset 0 0 0 1px var(--crm-date-primary) !important; }
.crm-date-day > span { display: grid; width: 34px; height: 34px; max-width: 100%; place-items: center; border-radius: 50%; }
.crm-date-day.is-selected:not(:disabled) > span,
.crm-date-day:is(.is-range-start, .is-range-end):not(:disabled) > span { background: var(--crm-date-primary); color: var(--crm-color-on-primary); font-weight: 750; }
.crm-date-day.is-range-middle:not(:disabled) { background: var(--crm-date-primary-soft) !important; color: var(--crm-date-primary-strong) !important; }
.crm-date-day.is-range-start:not(.is-range-end):not(:disabled) { background: linear-gradient(to right, transparent 50%, var(--crm-date-primary-soft) 50%) !important; }
.crm-date-day.is-range-end:not(.is-range-start):not(:disabled) { background: linear-gradient(to left, transparent 50%, var(--crm-date-primary-soft) 50%) !important; }
.crm-date-day.is-range-preview > span { box-shadow: inset 0 0 0 1px var(--crm-date-primary); }
.crm-date-day:disabled { color: var(--crm-date-disabled) !important; cursor: not-allowed; }
.crm-date-picker-error { margin: .45rem 0 0; color: var(--crm-date-danger); font-size: .82rem; }
.crm-date-trigger[aria-invalid="true"] { border-color: var(--crm-date-danger) !important; box-shadow: 0 0 0 1px var(--crm-date-danger); }
.crm-date-actions > button, .crm-datetime-actions > button { min-height: var(--crm-control-compact, 34px); }
.crm-date-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; margin-top: .75rem; }
.crm-date-birth-head { display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: 6px; }
.crm-date-birth-head label, .crm-date-birth-entry { display: grid; min-width: 0; gap: 2px; color: var(--crm-date-muted); font-size: 10px; font-weight: 700; }
.crm-date-birth-head :is(select, input), .crm-date-birth-entry input { width: 100%; min-width: 0; min-height: 34px; box-sizing: border-box; margin: 0; padding: 4px 7px; border: 1px solid var(--crm-date-control-border); border-radius: var(--crm-radius-control, 9px); background: var(--crm-date-surface); color: var(--crm-date-text); font: inherit; }
.crm-date-birth-entry { margin-top: 8px; }
.crm-date-birth-actions { grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); }

input[data-crm-datetime-picker][data-crm-date-time-ready="true"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.crm-datetime-popover { display: grid; gap: .65rem; }
.crm-datetime-time { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: .4rem; }
.crm-datetime-time label { display: grid; min-width: 0; gap: .25rem; color: var(--crm-date-muted); font-size: .72rem; font-weight: 750; }
.crm-datetime-time select { width: 100%; min-height: 34px; margin: 0; padding: .35rem .5rem; border: 1px solid var(--crm-date-control-border); border-radius: 8px; background: var(--crm-date-surface); color: var(--crm-date-text); font: inherit; }
.crm-datetime-time > span { padding-bottom: .48rem; color: var(--crm-date-muted); font-weight: 800; }
.crm-datetime-actions { display: flex; justify-content: flex-end; gap: .4rem; }
.crm-datetime-trigger[aria-invalid="true"] { border-color: var(--crm-date-danger); box-shadow: 0 0 0 1px var(--crm-date-danger); }
.crm-datetime-picker > .crm-date-picker-error { display: block; }

@media (max-width: 899px) {
  .crm-datetime-popover .crm-date-month { grid-template-columns: 44px 1fr 44px; }
  .crm-datetime-popover .crm-date-month button { width: 44px !important; height: 44px !important; }
  .crm-datetime-popover .crm-date-day,
  .crm-datetime-time select,
  .crm-date-birth-head :is(select, input),
  .crm-date-birth-entry input { min-height: 44px; }
}

.crm-date-range-fields { display: grid; grid-template-columns: repeat(2, minmax(var(--crm-date-range-min-width, 126px), 1fr)); gap: var(--crm-date-range-gap, 8px); min-width: 0; }
.crm-date-range-fields--default {
  --crm-date-range-min-width: 0;
  --crm-date-range-gap: var(--crm-space-4);
  --crm-date-range-height: var(--crm-control-default);
  --crm-date-range-label-size: var(--crm-font-supporting);
  --crm-date-range-value-size: var(--crm-font-body);
  --crm-date-range-value-weight: normal;
}
.crm-date-range-fields--default:not([data-crm-date-range-ready="true"]) > label:first-of-type { grid-column: 1; grid-row: 1; }
.crm-date-range-fields--default:not([data-crm-date-range-ready="true"]) > label:last-of-type { grid-column: 2; grid-row: 1; }
.crm-date-range-fields--default:not([data-crm-date-range-ready="true"]) > input { grid-row: 2; }
.crm-date-range-fields[data-crm-date-range-ready="true"] > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.crm-date-range-control { display: block; min-width: 0; }
.crm-date-range-trigger { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; width: 100%; min-width: 0; min-height: var(--crm-date-range-height, 34px); align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--crm-date-control-border); border-radius: var(--crm-radius-control, 9px); background: var(--crm-date-surface); color: var(--crm-date-text); font: inherit; text-align: left; cursor: pointer; }
.crm-date-range-trigger > span { color: var(--crm-date-muted); font-size: var(--crm-date-range-label-size, 11px); }
.crm-date-range-trigger > strong { min-width: 0; font-size: var(--crm-date-range-value-size, 12px); font-weight: var(--crm-date-range-value-weight, 650); overflow-wrap: normal; word-break: normal; }

.crm-date-range-trigger:not(:disabled):hover { border-color: var(--crm-color-primary); background: var(--crm-date-primary-soft); }
.crm-date-range-trigger:not(:disabled):focus-visible { outline: 2px solid var(--crm-date-focus); outline-offset: 2px; }
.crm-date-range-popover { width: min(560px, calc(100vw - 24px)); padding: 12px; border-radius: 8px; font-size: 13px; }
.crm-date-range-head { display: flex; min-width: 0; min-height: 34px; align-items: center; justify-content: space-between; gap: 8px; }
.crm-date-range-head > strong { font-size: 14px; }
.crm-date-range-head-actions { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 6px; }
.crm-date-range-today { min-height: 34px; padding: 4px 9px; white-space: nowrap; }
.crm-date-range-head .crm-close-button { flex: 0 0 auto; }
.crm-date-range-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; }
.crm-date-range-popover[data-crm-range-boundary="true"] .crm-date-range-layout { grid-template-columns: 1fr; }
.crm-date-range-sidebar { border-right: 1px solid var(--crm-date-border); padding-right: 16px; }
.crm-date-range-summary { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 8px 0; }
.crm-date-range-summary > button { display: grid; min-width: 0; min-height: 44px; align-content: center; gap: 2px; padding: 5px 8px; border: 1px solid var(--crm-date-border); border-radius: var(--crm-radius-control, 9px); background: var(--crm-date-surface); color: var(--crm-date-text); text-align: left; cursor: pointer; }
.crm-date-range-summary > button.is-active:not(:disabled) { border-color: var(--crm-color-primary); background: var(--crm-date-primary-soft); }
.crm-date-range-summary span { color: var(--crm-date-muted); font-size: 10px; }
.crm-date-range-summary strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.crm-date-range-popover .crm-date-month { grid-template-columns: 32px 1fr 32px; }
.crm-date-range-popover .crm-date-month button { width: 32px !important; height: 32px !important; border-radius: 4px !important; }
.crm-date-range-popover .crm-date-week { margin: 6px 0 2px; font-size: 10px; }
.crm-date-range-popover .crm-date-grid { column-gap: 0; row-gap: 4px; }
.crm-date-range-popover .crm-date-day,
.crm-date-range-popover .crm-date-empty { min-height: 36px; font-size: 12px; }
.crm-date-range-error { display: block; margin-top: 8px; color: var(--crm-date-danger); font-size: 12px; }
.crm-date-range-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; margin-top: 10px; }
.crm-date-range-actions > button { min-height: var(--crm-control-compact, 34px); width: 100%; min-width: min-content; white-space: normal; overflow-wrap: normal; word-break: normal; }
.crm-date-range-popover :is(button:not(.crm-ui-button):not(:disabled), [tabindex]:not(.crm-ui-button):not([aria-disabled="true"])):focus-visible { outline: 2px solid var(--crm-date-focus) !important; outline-offset: 2px; }
.crm-date-range-popover button:not(.crm-ui-button):disabled { color: var(--crm-date-disabled) !important; cursor: not-allowed; }

:is(.crm-date-picker > button.crm-date-trigger, .crm-date-range-trigger, .crm-date-range-head button, .crm-date-range-summary > button, .crm-datetime-time select):disabled,
:is(.crm-date-picker > button.crm-date-trigger, .crm-date-range-trigger, .crm-date-range-head button, .crm-date-range-summary > button, .crm-datetime-time select):disabled:is(:hover, :focus-visible) {
  border-color: var(--crm-color-disabled-border, var(--crm-date-control-border));
  background: var(--crm-color-disabled-surface);
  box-shadow: none;
  color: var(--crm-date-disabled);
  cursor: not-allowed;
  outline: 0;
  transform: none;
}

@media (max-width: 899px) {
  .crm-date-actions > button, .crm-datetime-actions > button, .crm-date-range-actions > button { min-height: var(--crm-control-touch, 44px); }
  .crm-date-picker > button.crm-date-trigger { min-height: var(--crm-control-touch, 44px); }
  .crm-date-range-trigger,
  .crm-date-range-head button,
  .crm-date-range-summary > button { min-height: 44px; }
  .crm-date-range-head .crm-close-button { width: 44px; min-width: 44px; height: 44px; }
  .crm-date-range-popover .crm-date-month { grid-template-columns: 44px 1fr 44px; }
  .crm-date-range-popover .crm-date-month button { width: 44px !important; height: 44px !important; }
  .crm-date-range-popover .crm-date-day,
  .crm-date-range-popover .crm-date-empty { min-width: 0; min-height: 44px; }
}

@media (max-width: 640px) {
  .crm-date-popover { inset: auto 0 0; width: 100%; max-height: calc(100dvh - 12px); padding: 5px; border-radius: 14px 14px 0 0; }
  .crm-date-period-popover, .crm-date-range-layout { grid-template-columns: 1fr; gap: 12px; }
  .crm-date-range-sidebar { border-right: 0; padding-right: 0; }
  .crm-date-range-summary { grid-template-columns: 1fr 1fr; }
  .crm-date-period-sidebar { border-right: 0; border-bottom: 1px solid var(--crm-date-border); padding: 0 0 12px; gap: 8px; }
  .crm-date-period-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm-date-period-sidebar button { min-height: 44px; }
  .crm-date-period-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .crm-date-period-quick button { justify-content: center; text-align: center; font-size: 11px; }
  .crm-date-period-summary { display: none; }
  .crm-date-day, .crm-date-empty { min-height: 42px; }
  .crm-datetime-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .crm-date-range-popover { inset: auto 0 0; width: 100%; max-height: calc(100dvh - 12px); padding: 5px; border-radius: 14px 14px 0 0; }
  .crm-date-range-popover .crm-date-grid { gap: 0; }
  .crm-date-range-fields { grid-template-columns: 1fr; }
  .crm-date-range-fields--default:not([data-crm-date-range-ready="true"]) > :is(label:first-of-type, label:last-of-type, input) { grid-column: 1; grid-row: auto; }
}