/* Restyle the react-day-picker month/year dropdown caption to match Mantine
   inputs — the library ships it as bare text + an invisible <select>, with
   no border/box affordance and a hardcoded blue chevron. */
.amharic-daypicker {
  --rdp-accent-color: var(--mantine-primary-color-filled);
  --rdp-day-height: 36px;
  --rdp-day-width: 36px;
  --rdp-day_button-height: 34px;
  --rdp-day_button-width: 34px;
  --rdp-weekday-padding: 0.25rem 0;
  --rdp-nav-height: 2.25rem;
  --rdp-nav_button-width: 2rem;
  --rdp-nav_button-height: 2rem;
}

/* Backoffice loads Tailwind's preflight after the package stylesheet. That
   reset can strip the day-picker table layout, leaving every weekday and day
   stacked in a single column. Keep the calendar's structural styles local to
   the component so it renders consistently in every app. */
.amharic-daypicker .rdp-months {
  position: relative;
  display: flex;
  max-width: fit-content;
}

.amharic-daypicker .rdp-month {
  position: relative;
}

.amharic-daypicker .rdp-month_grid {
  display: table;
  border-collapse: collapse;
}

.amharic-daypicker .rdp-month_grid thead {
  display: table-header-group;
}

.amharic-daypicker .rdp-month_grid tbody {
  display: table-row-group;
}

.amharic-daypicker .rdp-month_grid tr {
  display: table-row;
}

.amharic-daypicker .rdp-weekday,
.amharic-daypicker .rdp-day {
  display: table-cell;
  width: var(--rdp-day-width);
  height: var(--rdp-day-height);
  text-align: center;
}

.amharic-daypicker .rdp-weekday {
  padding: var(--rdp-weekday-padding);
}

.amharic-daypicker .rdp-day_button {
  padding: 0;
  margin: 0;
  border: 2px solid transparent;
  border-radius: 100%;
  background: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rdp-day_button-width);
  height: var(--rdp-day_button-height);
}

.amharic-daypicker .rdp-nav {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  display: flex;
  align-items: center;
  height: var(--rdp-nav-height);
  z-index: 10;
  pointer-events: none;
}

.amharic-daypicker .rdp-button_previous,
.amharic-daypicker .rdp-button_next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rdp-nav_button-width);
  height: var(--rdp-nav_button-height);
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

.amharic-daypicker .rdp-dropdowns {
  gap: 0.375rem;
}

.amharic-daypicker .rdp-dropdown_root {
  border: 1px solid var(--mantine-color-default-border);
  border-radius: var(--mantine-radius-sm);
  background-color: var(--mantine-color-body);
  padding: 0.25rem 0.5rem;
}

.amharic-daypicker .rdp-dropdown_root:hover {
  background-color: var(--mantine-color-default-hover);
}

[data-mantine-color-scheme='dark'] .amharic-daypicker .rdp-dropdown {
  color-scheme: dark;
  background-color: var(--mantine-color-dark-7);
  color: var(--mantine-color-gray-1);
}

[data-mantine-color-scheme='dark'] .amharic-daypicker .rdp-dropdown option {
  background-color: var(--mantine-color-dark-7);
  color: var(--mantine-color-gray-1);
}

.amharic-daypicker .rdp-caption_label {
  gap: 0.25rem;
  font-size: var(--mantine-font-size-sm);
  font-weight: 500;
  color: var(--mantine-color-text);
}

.amharic-daypicker .rdp-dropdown_root .rdp-chevron {
  width: 12px;
  height: 12px;
  fill: var(--mantine-color-dimmed);
}

/* Prev/next month buttons: bigger tap target + visible button box (border,
   background, accent-colored chevron) instead of the default bare, tiny
   blue arrow — the dropdown captions replaced them as the primary nav, so
   they need to stay easy to spot and hit. */
.amharic-daypicker .rdp-button_previous,
.amharic-daypicker .rdp-button_next {
  border: 1px solid var(--mantine-color-default-border);
  border-radius: var(--mantine-radius-sm);
  background-color: var(--mantine-color-body);
}

.amharic-daypicker .rdp-button_previous:not([aria-disabled='true']):hover,
.amharic-daypicker .rdp-button_next:not([aria-disabled='true']):hover {
  background-color: var(--mantine-color-default-hover);
}

.amharic-daypicker .rdp-nav .rdp-chevron {
  width: 20px;
  height: 20px;
  fill: var(--mantine-primary-color-filled);
}

.amharic-daypicker .rdp-month_caption {
  font-size: inherit;
  font-weight: 600;
  margin-inline-end: calc(var(--rdp-nav_button-width) * 2 + 0.5rem);
}

/* Day cells are already circular (--rdp-day_button-border-radius: 100%);
   the library only outlines the selected one by default — fill it instead
   so the selection reads as a solid, unambiguous mark. */
.amharic-daypicker .rdp-selected .rdp-day_button {
  background-color: var(--mantine-primary-color-filled);
  border-color: var(--mantine-primary-color-filled);
  color: var(--mantine-color-white);
}

/* Today indicator — a solid accent-coloured ring that stays clearly visible
   in both light and dark themes. The border uses the primary filled colour so
   it stands out against the popup background on either scheme. The text gets
   the primary colour so the digit is unambiguously "special" even without the
   ring being thick. */
.amharic-daypicker .rdp-today .rdp-day_button {
  border: 2px solid var(--mantine-primary-color-filled) !important;
  color: var(--mantine-primary-color-filled);
  font-weight: 700;
}

/* When today is also the selected day, keep the filled background but add a
   contrasting inner ring so the "today" mark isn't lost. */
.amharic-daypicker .rdp-today.rdp-selected .rdp-day_button {
  background-color: var(--mantine-primary-color-filled);
  border-color: var(--mantine-primary-color-filled) !important;
  color: var(--mantine-color-white);
  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. */
[data-mantine-color-scheme='dark'] .amharic-daypicker .rdp-today .rdp-day_button {
  background-color: var(--mantine-primary-color-light-color, #1c7ed6);
  border: 2px solid #74c0fc !important;
  color: #fff;
  font-weight: 700;
}

[data-mantine-color-scheme='dark'] .amharic-daypicker .rdp-today.rdp-selected .rdp-day_button {
  background-color: var(--mantine-primary-color-filled);
  border: 2px solid #74c0fc !important;
  color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

/* Ensure no scrollbar appears on the datepicker popover dropdown */
.amharic-daypicker-dropdown {
  overflow: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.amharic-daypicker-dropdown::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}