/*
 * MudBlazor adaptations to the Yoda Bill design system. Loaded after MudBlazor.min.css.
 * Only tokens here; selectors target MudBlazor 9.11 markup (pinned version, see D008).
 */

/* ---------- Buttons ---------- */
.mud-button-root.mud-button {
  min-height: var(--yb-control-height);
  padding: 0 14px;
  border-radius: var(--yb-radius-sm);
  font-weight: 550;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
  transition: background-color var(--yb-duration-fast) var(--yb-ease), border-color var(--yb-duration-fast) var(--yb-ease), color var(--yb-duration-fast) var(--yb-ease);
}

.mud-button-root.mud-button:hover,
.mud-button-root.mud-button:active,
.mud-button-root.mud-button:focus-visible {
  box-shadow: none;
}

.mud-button-root.mud-button.mud-button-filled-size-small,
.mud-button-root.mud-button.mud-button-outlined-size-small,
.mud-button-root.mud-button.mud-button-text-size-small {
  min-height: 30px;
  padding: 0 10px;
  font-size: var(--yb-text-caption);
}

.mud-button-root.mud-button.mud-button-filled-size-large,
.mud-button-root.mud-button.mud-button-outlined-size-large,
.mud-button-root.mud-button.mud-button-text-size-large {
  min-height: var(--yb-field-height);
  padding: 0 18px;
  font-size: var(--yb-text-body);
}

.mud-button-filled.mud-button-filled-primary:hover {
  background-color: var(--yb-primary-hover);
}

.mud-button-outlined.mud-button-outlined-default,
.mud-button-outlined.mud-button-outlined-primary {
  border-color: var(--yb-border-strong);
  background-color: var(--yb-surface);
}

.mud-button-outlined.mud-button-outlined-default {
  color: var(--yb-text);
}

.mud-button-outlined.mud-button-outlined-default:hover,
.mud-button-outlined.mud-button-outlined-primary:hover {
  border-color: var(--yb-border-input);
  background-color: var(--yb-bg-sunken);
}

.mud-button-text.mud-button-text-default {
  color: var(--yb-text);
}

.mud-button-root .mud-button-icon-start {
  margin-left: -2px;
  margin-right: 6px;
}

.mud-button-root .mud-button-icon-end {
  margin-left: 6px;
  margin-right: -4px;
}

.mud-button-root .mud-button-icon-size-medium > svg,
.mud-button-root .mud-button-icon-size-medium .mud-icon-size-medium {
  font-size: var(--yb-icon-size);
}

.mud-button-root:focus-visible,
.mud-icon-button:focus-visible,
.mud-chip:focus-visible {
  outline: 2px solid var(--yb-focus);
  outline-offset: 2px;
}

.mud-icon-button {
  padding: 8px;
  border-radius: var(--yb-radius-sm);
}

.mud-icon-button.mud-icon-button-size-small {
  padding: 5px;
}

.mud-icon-button .mud-icon-size-medium {
  font-size: var(--yb-icon-size);
}

/* ---------- Inputs: label above an outlined box (also used by the SSR fields) ---------- */
.mud-input-control.mud-input-control-margin-dense,
.mud-input-control.mud-input-control-margin-dense.mud-input-outlined-with-label,
.mud-input-control.mud-input-control-margin-normal,
.mud-input-control.mud-input-control-margin-normal.mud-input-outlined-with-label {
  margin: 0;
}

.mud-input-control.mud-input-outlined-with-label > .mud-input-control-input-container {
  padding-top: calc(var(--yb-leading-caption) + 6px);
}

.mud-input-control > .mud-input-control-input-container > label.mud-input-label.mud-input-label-outlined {
  top: 0;
  left: 0;
  max-width: 100% !important;
  padding: 0 !important;
  transform: none !important;
  background: none;
  color: var(--yb-text);
  font-size: var(--yb-text-caption);
  line-height: var(--yb-leading-caption);
  font-weight: var(--yb-weight-medium);
  letter-spacing: var(--yb-tracking-caption);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: auto;
}

.mud-input-control.mud-input-required > .mud-input-control-input-container > label.mud-input-label::after {
  content: " *";
  color: var(--yb-error);
}

.mud-input.mud-input-outlined > .mud-input-outlined-border legend {
  display: none;
}

.mud-input.mud-input-outlined {
  min-height: var(--yb-field-height);
  border-radius: var(--yb-radius-sm);
  background: var(--yb-surface);
  font-size: var(--yb-text-body);
  line-height: 20px;
  transition: box-shadow var(--yb-duration-fast) var(--yb-ease);
}

.mud-input.mud-input-outlined.mud-typography-subtitle1 {
  font-size: var(--yb-text-body);
  font-weight: var(--yb-weight-regular);
  line-height: 20px;
}

.mud-input > input.mud-input-root-outlined,
.mud-input > input.mud-input-root-outlined.mud-input-root-margin-dense,
div.mud-input-slot.mud-input-root-outlined,
div.mud-input-slot.mud-input-root-outlined.mud-input-root-margin-dense {
  height: 20px;
  padding: 10px 12px;
  line-height: 20px;
}

.mud-input > input.mud-input-root-outlined.mud-input-root-adorned-start {
  padding-left: 0;
}

.mud-input > input.mud-input-root-outlined.mud-input-root-adorned-end {
  padding-right: 0;
}

.mud-input > textarea.mud-input-root-outlined,
.mud-input > textarea.mud-input-root-outlined.mud-input-root-margin-dense {
  padding: 10px 12px;
  line-height: 20px;
  mask-image: none;
}

.mud-input.mud-input-outlined .mud-input-outlined-border {
  border-color: var(--yb-border-input);
  border-radius: var(--yb-radius-sm);
}

@media (hover: hover) and (pointer: fine) {
  .mud-input.mud-input-outlined:not(.mud-disabled):not(:focus-within):hover .mud-input-outlined-border {
    border-color: var(--yb-text-muted);
  }
}

.mud-input.mud-input-outlined:focus-within > .mud-input-outlined-border,
.mud-input.mud-input-outlined:focus-within .mud-shrink > .mud-input-outlined-border {
  border-width: 1px;
  border-color: var(--yb-primary);
}

.mud-input.mud-input-outlined:focus-within {
  box-shadow: 0 0 0 3px var(--yb-primary-soft);
}

.mud-input-error .mud-input-outlined-border {
  border-color: var(--yb-error) !important;
}

.mud-input.mud-input-outlined.mud-input-error:focus-within {
  box-shadow: 0 0 0 3px var(--yb-error-soft);
}

.mud-input.mud-input-outlined.mud-disabled {
  background: var(--yb-bg-sunken);
  color: var(--yb-text-muted);
}

.mud-input.mud-input-outlined.mud-disabled .mud-input-outlined-border {
  border-color: var(--yb-border-strong);
}

.mud-input > input.mud-input-root::placeholder,
.mud-input > textarea.mud-input-root::placeholder {
  color: var(--yb-text-muted);
  opacity: 1;
}

.mud-input-adornment-start {
  margin-left: 12px;
  margin-right: 8px;
}

.mud-input-adornment-end {
  margin-left: 8px;
  margin-right: 8px;
}

.mud-input-adornment .mud-input-adornment-text {
  color: var(--yb-text-muted);
  font-size: var(--yb-text-body);
  font-weight: var(--yb-weight-medium);
}

.mud-input-adornment .mud-icon-root {
  color: var(--yb-text-muted);
}

.mud-input-control > .mud-input-control-helper-container {
  margin-top: 6px;
  padding: 0 !important;
}

.mud-input-helper-text {
  color: var(--yb-text-muted);
  font-size: var(--yb-text-caption);
  line-height: var(--yb-leading-caption);
  font-weight: var(--yb-weight-regular);
  letter-spacing: 0;
}

.mud-input-helper-text.mud-input-error {
  color: var(--yb-error);
  font-weight: var(--yb-weight-medium);
}

/* Avoid iOS zoom on focus: 16px fields on touch screens. */
@media (max-width: 767px) {
  .mud-input.mud-input-outlined,
  .mud-input.mud-input-outlined.mud-typography-subtitle1 {
    font-size: 1rem;
  }

  .mud-input.mud-input-outlined {
    min-height: var(--yb-touch-target);
  }

  .mud-input > input.mud-input-root-outlined,
  .mud-input > input.mud-input-root-outlined.mud-input-root-margin-dense {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* Checkbox and switch */
.mud-checkbox .mud-icon-button {
  padding: 6px;
}

.mud-checkbox .mud-typography,
.mud-switch .mud-typography {
  font-size: var(--yb-text-body);
}

/* ---------- Chips ---------- */
.mud-chip.mud-chip-size-medium {
  height: 28px;
  border-radius: var(--yb-radius-sm);
  font-size: var(--yb-text-body);
}

.mud-chip.mud-chip-size-small {
  height: 24px;
  border-radius: var(--yb-radius-sm);
  font-size: var(--yb-text-caption);
}

/* ---------- Paper, cards ---------- */
.mud-paper {
  border-radius: var(--yb-radius-md);
}

.mud-paper-outlined {
  border-color: var(--yb-border);
}

/* ---------- Popovers, menus, lists ---------- */
.mud-popover {
  border-radius: var(--yb-radius-md);
  background-color: var(--yb-surface-raised);
}

/* The outline is a ring, not a border: MudBlazor gives the popover and its list the same max-height, and a 1 px border
   made the popover 2 px too small for its list — two scrollbars in a long dropdown (countries, categories…). */
.mud-popover.mud-paper {
  border: 0;
  box-shadow: 0 0 0 1px var(--yb-border), var(--yb-shadow-md);
}

.mud-menu-list,
.mud-popover .mud-list {
  padding: 4px;
}

.mud-menu-item,
.mud-popover .mud-list-item {
  min-height: 36px;
  padding: 6px 10px;
  border-radius: var(--yb-radius-sm);
  font-size: var(--yb-text-body);
}

.mud-menu-item .mud-menu-item-icon,
.mud-menu-item .mud-icon-root {
  color: var(--yb-text-muted);
  font-size: var(--yb-icon-size);
}

.mud-menu-item:hover,
.mud-popover .mud-list-item-clickable:hover {
  background-color: var(--yb-hover);
}

.mud-list-item.mud-selected-item {
  background-color: var(--yb-selected);
  color: var(--yb-on-primary-soft);
}

.mud-divider {
  border-color: var(--yb-border);
}

/* ---------- Dialogs ---------- */
.mud-dialog {
  border-radius: var(--yb-radius-lg);
  background-color: var(--yb-surface-raised);
  box-shadow: var(--yb-shadow-lg);
}

.mud-dialog .mud-dialog-title {
  padding: 20px 24px 8px;
  font-size: var(--yb-text-title-2);
  line-height: var(--yb-leading-title-2);
  font-weight: var(--yb-weight-title-2);
  letter-spacing: var(--yb-tracking-title-2);
}

.mud-dialog .mud-dialog-content {
  padding: 8px 24px 8px;
}

.mud-dialog .mud-dialog-actions {
  gap: 8px;
  padding: 16px 24px 20px;
}

.mud-dialog .mud-dialog-actions > :not(:first-child) {
  margin-left: 0;
}

.mud-overlay .mud-overlay-scrim.mud-overlay-dark {
  background-color: var(--yb-scrim);
}

/* ---------- Tooltip ---------- */
.mud-tooltip.mud-tooltip-default {
  padding: 5px 8px;
  border-radius: var(--yb-radius-sm);
  background-color: var(--yb-text);
  color: var(--yb-bg);
  font-size: var(--yb-text-caption);
  font-weight: var(--yb-weight-medium);
  line-height: var(--yb-leading-caption);
}

/* ---------- Snackbars: ink bar, saffron action ---------- */
.mud-snackbar {
  min-width: 288px;
  max-width: min(480px, calc(100vw - 32px));
  border-radius: var(--yb-radius-md);
  box-shadow: var(--yb-shadow-lg);
  font-size: var(--yb-text-body);
}

.mud-snackbar.mud-alert-filled-normal,
.mud-snackbar.mud-snackbar-normal,
.mud-snackbar.mud-alert-filled-dark {
  background-color: var(--yb-text);
  color: var(--yb-bg);
}

.mud-snackbar .mud-snackbar-content-action .mud-button-root {
  color: var(--yb-inverse-accent);
  font-weight: var(--yb-weight-strong);
}

.mud-snackbar.mud-alert-filled-success {
  background-color: var(--yb-success);
}

.mud-snackbar.mud-alert-filled-error {
  background-color: var(--yb-error);
}

/* ---------- Tables and data grids ---------- */
.mud-table {
  border-radius: var(--yb-radius-md);
  background-color: var(--yb-surface);
}

.mud-table-root .mud-table-head .mud-table-cell {
  height: var(--yb-row-head-height);
  padding: 0 12px;
  background-color: var(--yb-bg-sunken);
  border-bottom: 1px solid var(--yb-border);
  color: var(--yb-text-muted);
  font-size: var(--yb-text-caption);
  font-weight: var(--yb-weight-medium);
  letter-spacing: var(--yb-tracking-caption);
  line-height: var(--yb-leading-caption);
  white-space: nowrap;
}

.mud-table-root .mud-table-body .mud-table-cell {
  height: var(--yb-row-height);
  padding: var(--yb-space-2) 12px;
  border-bottom: 1px solid var(--yb-border);
  font-size: var(--yb-text-body);
  line-height: var(--yb-leading-body);
}

.mud-table-root .mud-table-row .mud-table-cell:first-child {
  padding-left: 16px;
}

/* Same breathing room on both edges; the action columns keep their tighter padding (yb-cell-actions). */
.mud-table-root .mud-table-row .mud-table-cell:last-child {
  padding-right: 16px;
}

.mud-table-root .mud-table-body .mud-table-row:last-child .mud-table-cell {
  border-bottom: 0;
}

.mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row:hover {
  background-color: var(--yb-hover);
}

.mud-table-dense .mud-table-head .mud-table-cell {
  padding: 0 12px;
}

.mud-table-dense .mud-table-body .mud-table-cell {
  padding: var(--yb-space-2) 12px;
}

.mud-table-sticky-header * .mud-table-root .mud-table-head * .mud-table-cell:first-child,
.mud-table-sticky-header * .mud-table-root .mud-table-head * .mud-table-cell {
  background-color: var(--yb-bg-sunken);
}

/* ---------- Skeleton ---------- */
.mud-skeleton {
  border-radius: var(--yb-radius-sm);
}

/* ---------- Alerts ---------- */
.mud-alert {
  border-radius: var(--yb-radius-md);
  font-size: var(--yb-text-body);
}

.mud-alert-text-info { background-color: var(--yb-info-soft); color: var(--yb-info); }
.mud-alert-text-success { background-color: var(--yb-success-soft); color: var(--yb-success); }
.mud-alert-text-warning { background-color: var(--yb-warning-soft); color: var(--yb-warning); }
.mud-alert-text-error { background-color: var(--yb-error-soft); color: var(--yb-error); }

/* ---------- Pickers ---------- */
.mud-picker .mud-picker-calendar-content,
.mud-picker-paper {
  border-radius: var(--yb-radius-md);
}

.mud-picker-calendar-day.mud-selected,
.mud-picker-calendar-day.mud-range-start-selected,
.mud-picker-calendar-day.mud-range-end-selected {
  font-weight: var(--yb-weight-strong);
}

/* ---------- Progress ---------- */
.mud-progress-linear {
  border-radius: var(--yb-radius-pill);
}