/**
 * Overlay Latin date placeholders (dd/mm/YYYY) over native empty date inputs.
 * Hides Chromium's localized Hebrew month token מ"מ while empty.
 *
 * Strategy: NEVER set the native value to transparent (that caused filled dates
 * to disappear as white-on-white when is-empty got stuck). Instead, cover the
 * empty native segments with an opaque placeholder chip; when filled, hide it
 * and force a dark readable text color.
 */

.tf-date-wrap {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  box-sizing: border-box;
}

.tf-date-wrap--block {
  display: block;
  width: 100%;
}

.tf-date-wrap > input[type="date"],
.tf-date-wrap > input[type="month"],
.tf-date-wrap > input[type="week"],
.tf-date-wrap > input[type="datetime-local"] {
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  max-width: 100%;
  color: var(--input-text, var(--color-text, #111827));
  -webkit-text-fill-color: var(--input-text, var(--color-text, #111827));
  caret-color: var(--input-text, var(--color-text, #111827));
}

.tf-date-wrap--block > input[type="date"],
.tf-date-wrap--block > input[type="month"],
.tf-date-wrap--block > input[type="week"],
.tf-date-wrap--block > input[type="datetime-local"] {
  width: 100%;
}

.tf-date-wrap > input::-webkit-datetime-edit,
.tf-date-wrap > input::-webkit-datetime-edit-fields-wrapper,
.tf-date-wrap > input::-webkit-datetime-edit-text,
.tf-date-wrap > input::-webkit-datetime-edit-month-field,
.tf-date-wrap > input::-webkit-datetime-edit-day-field,
.tf-date-wrap > input::-webkit-datetime-edit-year-field,
.tf-date-wrap > input::-webkit-datetime-edit-hour-field,
.tf-date-wrap > input::-webkit-datetime-edit-minute-field,
.tf-date-wrap > input::-webkit-datetime-edit-ampm-field,
.tf-date-wrap > input::-webkit-datetime-edit-week-field {
  color: var(--input-text, var(--color-text, #111827));
  -webkit-text-fill-color: var(--input-text, var(--color-text, #111827));
}

.tf-date-ph {
  display: none;
  position: absolute;
  top: 50%;
  left: 0.65em;
  right: auto;
  transform: translateY(-50%);
  margin: 0;
  padding: 0.1em 0.35em;
  border: 0;
  pointer-events: none;
  z-index: 2;
  color: var(--text-muted, #94a3b8);
  /* Opaque cover so native empty glyphs (e.g. מ"מ) stay hidden without
     making the real value transparent. */
  background: var(--input-bg, var(--bg-card, #ffffff));
  font: inherit;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  white-space: nowrap;
  line-height: 1.2;
  user-select: none;
  direction: ltr;
  unicode-bidi: isolate;
}

/* Chromium RTL: calendar indicator sits on the physical left */
html[dir="rtl"] .tf-date-ph {
  left: 1.85em;
  right: auto;
}

html[dir="ltr"] .tf-date-ph {
  left: 0.65em;
  right: auto;
  padding-right: 1.5em;
  box-sizing: border-box;
  max-width: calc(100% - 2rem);
  overflow: hidden;
  text-overflow: clip;
}

.tf-date-wrap.is-empty .tf-date-ph {
  display: block;
}

/* Required date with a complete value: always show native text, hide overlay
   even if the is-empty class failed to clear after a programmatic set. */
.tf-date-wrap:has(> input[required]:valid) .tf-date-ph,
.tf-date-wrap[data-filled="1"] .tf-date-ph {
  display: none !important;
}

.tf-date-wrap:has(> input[required]:valid) > input[type="date"],
.tf-date-wrap:has(> input[required]:valid) > input[type="month"],
.tf-date-wrap:has(> input[required]:valid) > input[type="week"],
.tf-date-wrap:has(> input[required]:valid) > input[type="datetime-local"],
.tf-date-wrap[data-filled="1"] > input[type="date"],
.tf-date-wrap[data-filled="1"] > input[type="month"],
.tf-date-wrap[data-filled="1"] > input[type="week"],
.tf-date-wrap[data-filled="1"] > input[type="datetime-local"] {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  caret-color: #111827 !important;
}

.tf-date-wrap:has(> input[required]:valid) > input::-webkit-datetime-edit,
.tf-date-wrap:has(> input[required]:valid) > input::-webkit-datetime-edit-fields-wrapper,
.tf-date-wrap:has(> input[required]:valid) > input::-webkit-datetime-edit-text,
.tf-date-wrap:has(> input[required]:valid) > input::-webkit-datetime-edit-month-field,
.tf-date-wrap:has(> input[required]:valid) > input::-webkit-datetime-edit-day-field,
.tf-date-wrap:has(> input[required]:valid) > input::-webkit-datetime-edit-year-field,
.tf-date-wrap:has(> input[required]:valid) > input::-webkit-datetime-edit-hour-field,
.tf-date-wrap:has(> input[required]:valid) > input::-webkit-datetime-edit-minute-field,
.tf-date-wrap:has(> input[required]:valid) > input::-webkit-datetime-edit-ampm-field,
.tf-date-wrap:has(> input[required]:valid) > input::-webkit-datetime-edit-week-field,
.tf-date-wrap[data-filled="1"] > input::-webkit-datetime-edit,
.tf-date-wrap[data-filled="1"] > input::-webkit-datetime-edit-fields-wrapper,
.tf-date-wrap[data-filled="1"] > input::-webkit-datetime-edit-text,
.tf-date-wrap[data-filled="1"] > input::-webkit-datetime-edit-month-field,
.tf-date-wrap[data-filled="1"] > input::-webkit-datetime-edit-day-field,
.tf-date-wrap[data-filled="1"] > input::-webkit-datetime-edit-year-field,
.tf-date-wrap[data-filled="1"] > input::-webkit-datetime-edit-hour-field,
.tf-date-wrap[data-filled="1"] > input::-webkit-datetime-edit-minute-field,
.tf-date-wrap[data-filled="1"] > input::-webkit-datetime-edit-ampm-field,
.tf-date-wrap[data-filled="1"] > input::-webkit-datetime-edit-week-field {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

html[data-theme="dark"] .tf-date-ph,
body.dark-mode .tf-date-ph {
  color: #94a3b8;
  background: #111827;
}

html[data-theme="dark"] .tf-date-wrap > input[type="date"],
html[data-theme="dark"] .tf-date-wrap > input[type="month"],
html[data-theme="dark"] .tf-date-wrap > input[type="week"],
html[data-theme="dark"] .tf-date-wrap > input[type="datetime-local"],
body.dark-mode .tf-date-wrap > input[type="date"],
body.dark-mode .tf-date-wrap > input[type="month"],
body.dark-mode .tf-date-wrap > input[type="week"],
body.dark-mode .tf-date-wrap > input[type="datetime-local"] {
  color: #e5e7eb;
  -webkit-text-fill-color: #e5e7eb;
  caret-color: #e5e7eb;
}

html[data-theme="dark"] .tf-date-wrap > input::-webkit-datetime-edit,
html[data-theme="dark"] .tf-date-wrap > input::-webkit-datetime-edit-fields-wrapper,
html[data-theme="dark"] .tf-date-wrap > input::-webkit-datetime-edit-text,
html[data-theme="dark"] .tf-date-wrap > input::-webkit-datetime-edit-month-field,
html[data-theme="dark"] .tf-date-wrap > input::-webkit-datetime-edit-day-field,
html[data-theme="dark"] .tf-date-wrap > input::-webkit-datetime-edit-year-field,
body.dark-mode .tf-date-wrap > input::-webkit-datetime-edit,
body.dark-mode .tf-date-wrap > input::-webkit-datetime-edit-fields-wrapper,
body.dark-mode .tf-date-wrap > input::-webkit-datetime-edit-text,
body.dark-mode .tf-date-wrap > input::-webkit-datetime-edit-month-field,
body.dark-mode .tf-date-wrap > input::-webkit-datetime-edit-day-field,
body.dark-mode .tf-date-wrap > input::-webkit-datetime-edit-year-field {
  color: #e5e7eb;
  -webkit-text-fill-color: #e5e7eb;
}

html[data-theme="dark"] .tf-date-wrap:has(> input[required]:valid) > input,
html[data-theme="dark"] .tf-date-wrap[data-filled="1"] > input,
body.dark-mode .tf-date-wrap:has(> input[required]:valid) > input,
body.dark-mode .tf-date-wrap[data-filled="1"] > input,
html[data-theme="dark"] .tf-date-wrap:has(> input[required]:valid) > input::-webkit-datetime-edit,
html[data-theme="dark"] .tf-date-wrap:has(> input[required]:valid) > input::-webkit-datetime-edit-fields-wrapper,
html[data-theme="dark"] .tf-date-wrap:has(> input[required]:valid) > input::-webkit-datetime-edit-text,
html[data-theme="dark"] .tf-date-wrap:has(> input[required]:valid) > input::-webkit-datetime-edit-month-field,
html[data-theme="dark"] .tf-date-wrap:has(> input[required]:valid) > input::-webkit-datetime-edit-day-field,
html[data-theme="dark"] .tf-date-wrap:has(> input[required]:valid) > input::-webkit-datetime-edit-year-field,
html[data-theme="dark"] .tf-date-wrap[data-filled="1"] > input::-webkit-datetime-edit,
html[data-theme="dark"] .tf-date-wrap[data-filled="1"] > input::-webkit-datetime-edit-fields-wrapper,
html[data-theme="dark"] .tf-date-wrap[data-filled="1"] > input::-webkit-datetime-edit-text,
html[data-theme="dark"] .tf-date-wrap[data-filled="1"] > input::-webkit-datetime-edit-month-field,
html[data-theme="dark"] .tf-date-wrap[data-filled="1"] > input::-webkit-datetime-edit-day-field,
html[data-theme="dark"] .tf-date-wrap[data-filled="1"] > input::-webkit-datetime-edit-year-field,
body.dark-mode .tf-date-wrap:has(> input[required]:valid) > input::-webkit-datetime-edit,
body.dark-mode .tf-date-wrap:has(> input[required]:valid) > input::-webkit-datetime-edit-fields-wrapper,
body.dark-mode .tf-date-wrap:has(> input[required]:valid) > input::-webkit-datetime-edit-text,
body.dark-mode .tf-date-wrap:has(> input[required]:valid) > input::-webkit-datetime-edit-month-field,
body.dark-mode .tf-date-wrap:has(> input[required]:valid) > input::-webkit-datetime-edit-day-field,
body.dark-mode .tf-date-wrap:has(> input[required]:valid) > input::-webkit-datetime-edit-year-field,
body.dark-mode .tf-date-wrap[data-filled="1"] > input::-webkit-datetime-edit,
body.dark-mode .tf-date-wrap[data-filled="1"] > input::-webkit-datetime-edit-fields-wrapper,
body.dark-mode .tf-date-wrap[data-filled="1"] > input::-webkit-datetime-edit-text,
body.dark-mode .tf-date-wrap[data-filled="1"] > input::-webkit-datetime-edit-month-field,
body.dark-mode .tf-date-wrap[data-filled="1"] > input::-webkit-datetime-edit-day-field,
body.dark-mode .tf-date-wrap[data-filled="1"] > input::-webkit-datetime-edit-year-field {
  color: #e5e7eb !important;
  -webkit-text-fill-color: #e5e7eb !important;
}