/* Align Dash 4 DatePickerSingle with Bootstrap form-control / dcc.Dropdown
 *
 * Dash 4 puts `className` on `.dash-datepicker-input-wrapper` (the grid),
 * not only on the outer `.dash-datepicker`. Do not set display:block on
 * `.ses-date-picker` or the clear/caret icons wrap onto new rows.
 *
 * Call sites often pass Bootstrap `py-1` / `py-0`; those must not add vertical
 * padding here or the date text sits low inside the clipped box.
 */

.dash-datepicker:has(.ses-date-picker),
.ses-date-picker.dash-datepicker {
  width: 100%;
  min-width: 0;
  overflow: visible;
}

/* 契約条件の日付は Loading / カード内でもカレンダーが欠けないようにする */
.term2-form-loading,
.term2-form-loading .dash-loading,
.term2-engineer-block,
.term2-term-row {
  overflow: visible !important;
}

/* className lands on the input wrapper — keep Dash's grid (do not use display:block) */
.ses-date-picker.dash-datepicker-input-wrapper {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: grid;
  /* column template: leave to Dash :has() rules so clear/caret stay on one row */
  align-items: center;
  min-height: 38px;
  height: 38px;
  /* horizontal only — override Bootstrap py-* from className */
  padding: 0 0.5rem !important;
  border-radius: 8px;
  border-color: rgba(15, 23, 42, 0.14);
  overflow: hidden;
}

/* First grid child is the text-input host — fill the 1fr track and center text */
.ses-date-picker.dash-datepicker-input-wrapper > :first-child {
  min-width: 0;
  max-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.ses-date-picker .dash-datepicker-input {
  height: 100%;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0 !important;
  border: none;
  background: transparent;
  box-sizing: border-box;
  font-size: 0.875rem;
  line-height: 1.25;
  vertical-align: middle;
}

.ses-date-picker .dash-datepicker-input::placeholder {
  color: rgba(15, 23, 42, 0.38);
  opacity: 1;
}

.ses-date-picker .DateInput_input::placeholder {
  color: rgba(15, 23, 42, 0.38);
  opacity: 1;
}

.ses-date-picker.dash-datepicker-input-wrapper:focus-within {
  border-color: rgba(var(--accent-rgb, 79, 70, 229), 0.55);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 79, 70, 229), 0.18);
}

/* List filter row: match adjacent form-control-sm (キーワード) */
.list-filter-card .ses-date-picker.dash-datepicker-input-wrapper {
  min-height: 31px;
  height: 31px;
  padding: 0 0.5rem !important;
}

.list-filter-card .ses-date-picker .dash-datepicker-input {
  height: 100%;
  font-size: 0.875rem;
  line-height: 1.25;
  padding: 0 !important;
}

/* List filter: match form-control-sm for Dash 4 dropdown (ステータスなど) */
.list-filter-card .dash-dropdown {
  min-height: 31px;
  height: 31px;
  border-radius: 8px;
  border-color: rgba(15, 23, 42, 0.14);
  box-sizing: border-box;
}

.list-filter-card .dash-dropdown-trigger {
  min-height: 31px;
  height: 31px;
  padding: 0 0.5rem;
  box-sizing: border-box;
}

.list-filter-card .dash-dropdown-value,
.list-filter-card .dash-dropdown-placeholder {
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Legacy react-dates (pre Dash 4) — keep harmless if present */
.ses-date-picker .DateInput {
  width: 100%;
}
.ses-date-picker .DateInput_input {
  font-size: 0.875rem;
  line-height: 1.5;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  width: 100%;
  box-sizing: border-box;
}

/* with_portal: 表の行より手前に出す（サイドバー・トーストより下） */
[data-radix-popper-content-wrapper]:has(.dash-datepicker-portal),
.dash-datepicker-portal {
  z-index: 2000;
}

/* Dash 4 calendar uses <table><thead><th> for weekdays — don't inherit list-table header colors */
.dash-datepicker-calendar > thead > tr > th {
  background: transparent !important;
  color: inherit !important;
  border: none !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: normal !important;
  padding: 0.25rem 0 !important;
}

/* 注文書: 期間行の日付・対象月を列幅いっぱいに伸ばさない */
.app-page .ord-period-datepicker.ses-date-picker.dash-datepicker-input-wrapper,
.app-page .dash-datepicker:has(.ord-period-datepicker) {
  width: 10.5rem !important;
  max-width: 100%;
}