diff --git a/libs/ui/src/lib/input/AmharicDatePicker.css b/libs/ui/src/lib/input/AmharicDatePicker.css index 341bf3ed3..3b675ac83 100644 --- a/libs/ui/src/lib/input/AmharicDatePicker.css +++ b/libs/ui/src/lib/input/AmharicDatePicker.css @@ -191,21 +191,23 @@ box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); } -/* Dark-mode: use a bright filled background so the "today" cell is - immediately visible on dark popup surfaces where a thin ring alone - would disappear into the background. */ +/* Dark-mode: bright border ring + bright text, NO filled background. + A filled background can end up white on dark surfaces; a ring + coloured + digit is always visible regardless of the popup colour scheme. */ [data-mantine-color-scheme='dark'] .amharic-daypicker .rdp-today .rdp-day_button { - background-color: var(--mantine-primary-color-light-color, #1c7ed6); + background-color: transparent !important; border: 2px solid #74c0fc !important; - color: #fff; + color: #74c0fc !important; font-weight: 700; } +/* When today is also selected in dark mode: keep the primary filled background + but use the bright ring so today is still distinguishable from other selected days. */ [data-mantine-color-scheme='dark'] .amharic-daypicker .rdp-today.rdp-selected .rdp-day_button { - background-color: var(--mantine-primary-color-filled); + background-color: var(--mantine-primary-color-filled) !important; border: 2px solid #74c0fc !important; - color: #fff; - box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35); + color: #fff !important; + box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3); } /* Ensure no scrollbar appears on the datepicker popover dropdown */