/* Shared look of MudBlazor controls for all apps. Loaded after MudBlazor.min.css. */
:root {
  --mitla-radius: 12px;
  --mitla-radius-sm: 10px;
  --mitla-radius-popover: 16px;
  --mitla-control-border: #d0d5dd;
  --mitla-control-border-soft: #e4e7ec;
  --mitla-control-surface: #f9fafb;
  --mitla-control-hover: #f0f2f5;
  --mitla-control-icon: #475467;
}

/* Buttons */
.mud-button-root.mud-button {
  border-radius: var(--mitla-radius);
  letter-spacing: 0;
}
.mud-button-root.mud-button[class*="-size-small"] {
  border-radius: 8px;
}
/* A medium button is exactly as tall as a dense field (37px), so a field and its button line up in a row. */
.mud-button-root.mud-button-filled[class*="-size-medium"],
.mud-button-root.mud-button-outlined[class*="-size-medium"] {
  padding: 8px 18px;
  line-height: 21px;
}
.mud-button-root.mud-button-outlined[class*="-size-medium"] {
  padding-top: 7px;
  padding-bottom: 7px;
}
.mud-button-root.mud-button .mud-button-label .mud-typography {
  line-height: inherit;
}
.mud-button-root.mud-button-filled,
.mud-button-root.mud-button-filled:hover,
.mud-button-root.mud-button-filled:focus-visible {
  box-shadow: none;
}
.mud-button-root.mud-button-outlined.mud-button-outlined-default {
  border-color: var(--mitla-control-border);
  background-color: #fff;
}
.mud-button-root.mud-button-outlined.mud-button-outlined-default:hover {
  background-color: var(--mitla-control-hover);
}

.mud-toggle-group {
  border-radius: var(--mitla-radius);
}
/* Toggle items are buttons too: only the group's outer corners are rounded, the joins between items stay square. */
.mud-toggle-group > .mud-toggle-item.mud-button-root {
  border-radius: 0;
}
.mud-toggle-group > .mud-toggle-item.mud-button-root:first-child {
  border-start-start-radius: var(--mitla-radius);
  border-end-start-radius: var(--mitla-radius);
}
.mud-toggle-group > .mud-toggle-item.mud-button-root:last-child {
  border-start-end-radius: var(--mitla-radius);
  border-end-end-radius: var(--mitla-radius);
}

/* Icon buttons: rounded squares instead of circles. Checkboxes, radios and switches are icon buttons inside and keep
   their round halo. */
.mud-button-root.mud-icon-button:not(.mud-switch-base):not([class*="checkbox"]):not([class*="radio"]) {
  border-radius: var(--mitla-radius-sm);
}

/* Standalone action icon buttons (edit, delete, open, …) get a soft framed tile. Icon buttons that are part of
   another control (inputs, menus, dialogs, alerts, pagers, pickers, app bars, chips) keep MudBlazor's plain look. */
.mud-button-root.mud-icon-button:not(.mud-button-filled):not(:where(
    .mud-input-adornment *, .mud-input-control *, .mud-menu *, .mud-dialog-title *, .mud-snackbar *,
    .mud-alert *, .mud-table-pagination *, .mud-picker *, .mud-appbar *, header *, .mud-chip *,
    .mud-drawer *, .mud-carousel *, .mud-tabs-tabbar *, .mud-expand-panel-header *, .mud-toolbar *,
    .mud-paper.mud-popover *, .mud-pagination *)) {
  border: 1px solid var(--mitla-control-border-soft);
  background-color: var(--mitla-control-surface);
  color: var(--mitla-control-icon);
}
.mud-button-root.mud-icon-button:not(.mud-button-filled):not(:where(
    .mud-input-adornment *, .mud-input-control *, .mud-menu *, .mud-dialog-title *, .mud-snackbar *,
    .mud-alert *, .mud-table-pagination *, .mud-picker *, .mud-appbar *, header *, .mud-chip *,
    .mud-drawer *, .mud-carousel *, .mud-tabs-tabbar *, .mud-expand-panel-header *, .mud-toolbar *,
    .mud-paper.mud-popover *, .mud-pagination *)):hover {
  background-color: var(--mitla-control-hover);
  border-color: var(--mitla-control-border);
}
.mud-button-root.mud-icon-button.mud-error-text:not(.mud-button-filled) {
  color: var(--mud-palette-error);
}
.mud-button-root.mud-icon-button.mud-error-text:not(.mud-button-filled):hover {
  background-color: rgba(201, 22, 12, .08);
  border-color: rgba(201, 22, 12, .25);
}
.mud-button-root.mud-icon-button[class*="-size-medium"]:not(:where(.mud-input-control *)) {
  padding: 8px;
}
.mud-button-root.mud-icon-button[class*="-size-small"]:not(:where(.mud-input-control *)) {
  padding: 5px;
  border-radius: 8px;
}

/* Dropdowns: menus, selects and autocompletes. Same palette as the user menu: page background, primary-coloured
   icons and text, soft shadow. */
.mud-popover.mud-paper:has(> .mud-list) {
  background-color: var(--mud-palette-background);
  border-radius: var(--mitla-radius-popover);
  /* The outline is drawn as a shadow ring: a real border would eat into MudBlazor's max-height and make the popover
     and its list both scroll. */
  box-shadow: 0 0 0 1px var(--mitla-control-border-soft), 0 12px 32px -8px rgba(16, 24, 40, .16), 0 4px 8px -4px rgba(16, 24, 40, .06);
  margin-top: 6px;
}
/* A select's list starts at the field's width and, on wider screens, grows so short fields never wrap their options —
   capped, so long options (the article picker) can never make the list wider than the window. On phones it stays as
   wide as its field: a wider list would widen the page and flip the layout into its desktop breakpoint. */
@media (min-width: 600px) {
  .mud-popover.mud-popover-relative-width:has(> .mud-list) {
    min-width: max-content;
    max-width: min(560px, calc(100vw - 32px));
  }
}
.mud-popover.mud-paper > .mud-list {
  padding: 8px;
}
.mud-popover .mud-list > .mud-list-item + .mud-list-item,
.mud-popover .mud-list > .mud-menu-item + .mud-menu-item {
  margin-top: 2px;
}
.mud-popover .mud-list > .mud-list-item,
.mud-popover .mud-list > .mud-menu-item {
  border-radius: var(--mitla-radius-sm);
  padding: 8px 12px;
  min-height: 40px;
}
.mud-popover .mud-list > .mud-list-item:hover,
.mud-popover .mud-list > .mud-menu-item:hover,
.mud-popover .mud-list > .mud-list-item.mud-selected-item {
  background-color: rgba(16, 24, 40, .06);
}
.mud-popover .mud-list > .mud-list-item.mud-selected-item {
  color: var(--mud-palette-primary);
  font-weight: 500;
}
.mud-popover .mud-menu-item {
  color: var(--mud-palette-primary);
}
.mud-popover .mud-menu-item .mud-menu-item-icon {
  color: var(--mud-palette-primary);
  margin-inline-end: 14px;
  font-size: 1.375rem;
}
/* A destructive item (error-coloured icon) reads like the user menu's «Вийти»: red text, translucent red hover. */
.mud-popover .mud-menu-item:has(> .mud-menu-item-icon.mud-error-text),
.mud-popover .mud-menu-item .mud-menu-item-icon.mud-error-text {
  color: var(--mud-palette-error);
}
.mud-popover .mud-list > .mud-menu-item:has(> .mud-menu-item-icon.mud-error-text):hover {
  background-color: rgba(201, 22, 12, .08);
}
.mud-popover .mud-menu-item .mud-menu-item-text,
.mud-popover .mud-list-item .mud-typography-body1 {
  font-size: 0.9375rem;
}
.mud-popover .mud-list > .mud-list-item.mud-list-item-disabled,
.mud-popover .mud-list > .mud-menu-item.mud-menu-item-disabled {
  opacity: .45;
}

/* Field labels sit above the field, as on the seller registration page — never floating inside it or cut into its
   border. Applies to every MudBlazor input that has a Label (text, numeric, select, autocomplete, pickers). */
.mud-input-control:has(> .mud-input-control-input-container > label.mud-input-label) > .mud-input-control-input-container {
  display: flex;
  flex-direction: column;
}
/* The space MudBlazor reserves around a field for its floating label is no longer needed; without it a labelled
   field lines up with the buttons next to it. */
.mud-input-control:has(> .mud-input-control-input-container > label.mud-input-label) {
  margin-top: 0;
  margin-bottom: 0;
}
.mud-input-control > .mud-input-control-input-container > label.mud-input-label {
  order: -1;
  position: static;
  transform: none !important;
  max-width: none;
  margin: 0 0 6px;
  padding: 0 !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  white-space: normal;
  color: var(--mud-palette-text-primary);
  background: none;
  pointer-events: auto;
}
.mud-input-control > .mud-input-control-input-container > label.mud-input-label.mud-input-error {
  color: var(--mud-palette-error);
}
.mud-input-control:has(> .mud-input-control-input-container > label.mud-input-label) .mud-input-outlined-border legend {
  display: none;
}
.mud-input-control:has(> .mud-input-control-input-container > label.mud-input-label) .mud-input.mud-input-text {
  margin-top: 0;
}
/* The label no longer covers an empty field, so its placeholder can always show. */
.mud-input-control:has(> .mud-input-control-input-container > label.mud-input-label) .mud-input-root::placeholder {
  opacity: .5 !important;
}

/* Dialogs */
.mud-dialog {
  border-radius: 16px;
}
.mud-dialog .mud-dialog-title {
  border-start-start-radius: 16px;
  border-start-end-radius: 16px;
}

/* Custom select components (SelectComponent / SelectWithSearchComponent) use the same label style. */
label.select__label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--mud-palette-text-primary);
}
/* Their field and dropdown match MudBlazor's: same radius, same list look as the menus above. */
div.select .select__value {
  border-color: var(--mud-palette-lines-inputs);
  border-radius: var(--mitla-radius-sm);
  /* Same height as a dense MudBlazor field (37px). */
  min-height: 37px;
  padding-top: 7px;
  padding-bottom: 7px;
  font-size: 0.9375rem;
  line-height: 1.4;
}
div.select .select__list {
  margin-top: 6px;
  padding: 8px;
  border: 1px solid var(--mitla-control-border-soft);
  border-radius: var(--mitla-radius-popover);
  background: var(--mud-palette-background);
  box-shadow: 0 12px 32px -8px rgba(16, 24, 40, .16), 0 4px 8px -4px rgba(16, 24, 40, .06);
  max-height: 280px;
}
div.select .select__item {
  padding: 10px 14px;
  border-radius: var(--mitla-radius-sm);
  color: var(--mud-palette-primary);
}
div.select .select__item:hover,
div.select .select__item--active,
div.select .select__item--active:hover {
  background: rgba(16, 24, 40, .06);
  color: var(--mud-palette-primary);
}
div.select .select__item--active {
  font-weight: 500;
}

/* Outlined fields get the same softer corners as buttons. */
.mud-input.mud-input-outlined .mud-input-outlined-border {
  border-radius: var(--mitla-radius-sm);
}

/* Icon buttons inside a field (search, clear, toggles) fit within the field's height. */
.mud-input-adornment .mud-icon-button {
  padding: 6px;
  border-radius: 8px;
}
.mud-input-margin-dense .mud-input-adornment .mud-icon-button {
  padding: 4px;
}
.mud-input-adornment .mud-icon-button.mud-icon-button-edge-end {
  margin-inline-end: -6px;
}
.mud-input-adornment .mud-icon-button.mud-icon-button-edge-start {
  margin-inline-start: -6px;
}
.mud-popover .mud-list > .mud-list-item .mud-list-item-text {
  margin: 0;
}
/* Room under the dialog's buttons, whether they sit in DialogActions or at the end of the content. */
.mud-dialog .mud-dialog-actions {
  padding: 12px 24px 20px;
  gap: 8px;
}
.mud-dialog:not(:has(.mud-dialog-actions)) .mud-dialog-content {
  padding-bottom: 24px;
}

/* Form sections: fields stacked with one even gap instead of the section's 40px plus each field's own margin. */
.section__content:has(> .single-attribute-content, > .input-group) {
  gap: 20px;
}
.section__content > .single-attribute-content,
.section__content > .input-group {
  margin: 0;
}

/* Dialog buttons are all one size; the secondary (text or default-filled) one is a soft grey button. */
.mud-dialog .mud-dialog-actions .mud-button-root.mud-button {
  min-height: 37px;
  padding: 8px 18px;
  line-height: 21px;
}
.mud-dialog .mud-dialog-actions .mud-button-root.mud-button-text,
.mud-button-root.mud-button-filled.mud-button-filled-default {
  background-color: #eef0f3;
  color: var(--mud-palette-text-primary);
}
.mud-dialog .mud-dialog-actions .mud-button-root.mud-button-text:hover,
.mud-button-root.mud-button-filled.mud-button-filled-default:hover {
  background-color: #e2e5ea;
}

/* Tabs follow the buttons: sentence case, not capitals. */
.mud-tabs .mud-tab {
  text-transform: none;
  letter-spacing: 0;
}

/* Row actions in tables are always the compact size, whatever Size the markup passes. */
.mud-table-body .mud-button-root.mud-icon-button:not(.mud-switch-base):not([class*="checkbox"]):not([class*="radio"]) {
  padding: 5px;
  border-radius: 8px;
  font-size: 1.25rem;
}
.mud-table-body .mud-button-root.mud-icon-button .mud-icon-root {
  font-size: 1.25rem;
}

/* Table toolbars (search + "Add …" button) wrap on narrow screens instead of squeezing the search field and breaking
   the button's text over several lines. */
.mud-table-toolbar {
  flex-wrap: wrap;
  gap: 8px;
  height: auto;
  min-height: 64px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.mud-table-toolbar > .mud-input-control {
  flex: 1 1 220px;
}
.mud-table-toolbar .mud-button-root.mud-button {
  white-space: nowrap;
}

/* Very small phones: narrower header gutters so everything in the header row fits. */
@media (max-width: 360px) {
  .mud-appbar.header .mud-toolbar-gutters {
    padding-left: 8px;
    padding-right: 8px;
  }
  .mud-appbar.header .gap-3 {
    gap: 6px !important;
  }
}