/* Date field (DateField.razor): shows dd/mm/yyyy; the real date input is invisible on top and opens the picker. */
.df {
    position: relative; display: inline-flex; align-items: center; gap: 12px; box-sizing: border-box;
    min-width: 160px; padding: 8px 12px; background: #fff; cursor: pointer;
    border: 1px solid #d9dde3; border-radius: 8px;
    font-size: .9rem; color: var(--ink);
}
.df:hover { border-color: #c4c9d1; }
.df:focus-within { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(122, 31, 43, .12); }
.df__text { flex: 1; font-variant-numeric: tabular-nums; }
.df__text.is-empty { color: #9aa0ab; }
.df__ico { font-size: 19px; color: #6b7280; flex: none; }

/* the real input fills the whole box, fully transparent; it must beat page-level `input[type=date]` styles */
.df .df__native {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; box-sizing: border-box;
    border: 0; background: transparent; opacity: 0; cursor: pointer; font-size: 16px;
}
.df .df__native::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; cursor: pointer; }