/* Classes named in docs/dev_conventions/UI_Visual_Rules.md §4: what MudBlazor has no parameter for.
   This file holds only those rules; a change here and in that document goes together. */

/* Medium weight on a text or a link. */
.pd-medium {
  font-weight: 500;
}

/* Description under the title of an option or an item. */
.pd-description {
  font-size: .8125rem;
}

/* Amounts: fixed-width digits, right-aligned inside a table cell. */
.pd-amount {
  font-variant-numeric: tabular-nums;
}

.mud-table-cell.pd-amount {
  text-align: right;
}

/* Outlined + Dense field inside a table: 36px instead of 40px. The selectors match the specificity
   of MudBlazor's own dense rule, so these win by loading later; the phone rule below does the same. */
.pd-field-table .mud-input > input.mud-input-root-margin-dense,
.pd-field-table .mud-input > div.mud-input-slot.mud-input-root-margin-dense {
  padding-top: 8.5px;
  padding-bottom: 8.5px;
}

/* Emphasis stays at medium weight; the browser default is bold. */
strong,
b {
  font-weight: 500;
}

/* A value chip is never narrower than a touch target. */
.mud-chip.mud-chip-size-medium {
  min-width: 44px;
}

/* Phone (MudBlazor xs): buttons and dense fields reach the 44px touch target. Icon buttons, tabs
   and the date picker's toolbar buttons keep their size. */
@media (max-width: 599.98px) {
  .mud-button-root.mud-button:not(.mud-button-year):not(.mud-button-date) {
    min-height: 44px;
  }

  .mud-input > input.mud-input-root.mud-input-root-margin-dense,
  .mud-input > div.mud-input-slot.mud-input-root.mud-input-root-margin-dense {
    padding-top: 12.5px;
    padding-bottom: 12.5px;
  }
}