/* RG COMPANY — MaterialDesignInXaml-like controls across the whole admin cabinet,
   including dynamically mounted dialogs. Build 2026-08-05 allforms-2. */

body.cabinet-body {
  --rg-md-height: 56px;
  --rg-md-radius: 12px;
  --rg-md-motion: 180ms cubic-bezier(.4, 0, .2, 1);
  --rg-md-menu-motion: 220ms cubic-bezier(.2, 0, 0, 1);
  --rg-md-outline: color-mix(in srgb, var(--cab-text) 38%, var(--cab-line));
  --rg-md-outline-hover: color-mix(in srgb, var(--cab-text) 62%, var(--cab-line));
  --rg-md-outline-focus: color-mix(in srgb, var(--cab-text) 90%, var(--cab-line));
  --rg-md-fill: color-mix(in srgb, var(--cab-text) 5%, var(--cab-panel));
  --rg-md-fill-hover: color-mix(in srgb, var(--cab-text) 8%, var(--cab-panel));
  --rg-md-menu: color-mix(in srgb, var(--cab-panel) 99%, var(--cab-bg));
  --rg-md-hover: color-mix(in srgb, var(--cab-text) 8%, transparent);
  --rg-md-pressed: color-mix(in srgb, var(--cab-text) 14%, transparent);
  --rg-md-selected: color-mix(in srgb, var(--cab-text) 11%, var(--cab-panel));
}

/* The original static caption remains accessible, but the visible caption is the animated hint. */
body.cabinet-body .rg-md-source-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body.cabinet-body .rg-md-field {
  position: relative !important;
  display: block !important;
  min-width: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: visible !important;
  isolation: isolate !important;
}
body.cabinet-body .rg-md-generated {
  width: 100% !important;
  margin: 0 !important;
}
body.cabinet-body .toolbar > .rg-md-generated.rg-md-search {
  flex: 1 1 360px !important;
}
body.cabinet-body .toolbar > .rg-md-generated.rg-md-filter {
  flex: 0 1 260px !important;
  min-width: 190px !important;
}

body.cabinet-body .rg-md-hint {
  position: absolute !important;
  z-index: 6 !important;
  left: 16px !important;
  top: 50% !important;
  max-width: calc(100% - 48px) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: var(--cab-muted) !important;
  background: transparent !important;
  font: inherit !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  transform: translateY(-50%) scale(1) !important;
  transform-origin: left center !important;
  transition:
    top var(--rg-md-motion),
    left var(--rg-md-motion),
    color var(--rg-md-motion),
    background-color var(--rg-md-motion),
    padding var(--rg-md-motion),
    transform var(--rg-md-motion) !important;
}
body.cabinet-body .rg-md-field.rg-md-textarea:not(.has-value):not(.is-focused) > .rg-md-hint {
  top: 25px !important;
}
body.cabinet-body .rg-md-field:is(.is-disabled, .is-readonly) {
  opacity: .62 !important;
}

/* OutlinedTextBox / OutlinedComboBox */
body.cabinet-body .rg-md-field.rg-md-outlined > input.rg-md-control:not([type="file"]),
body.cabinet-body .rg-md-field.rg-md-outlined > textarea.rg-md-control,
body.cabinet-body .rg-md-field.rg-md-outlined > .custom-select .custom-select-button,
body.cabinet-body .rg-md-field.rg-md-outlined > .rg-md-select .custom-select-button {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: var(--rg-md-height) !important;
  margin: 0 !important;
  border: 1px solid var(--rg-md-outline) !important;
  border-radius: var(--rg-md-radius) !important;
  outline: 0 !important;
  background: var(--cab-panel) !important;
  color: var(--cab-text) !important;
  caret-color: var(--cab-text) !important;
  box-shadow: none !important;
  font: inherit !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  transform: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: border-color var(--rg-md-motion), background-color var(--rg-md-motion), box-shadow var(--rg-md-motion) !important;
}
body.cabinet-body .rg-md-field.rg-md-outlined > input.rg-md-control:not([type="file"]),
body.cabinet-body .rg-md-field.rg-md-outlined > textarea.rg-md-control {
  padding: 17px 16px 7px !important;
}
body.cabinet-body .rg-md-field.rg-md-outlined > .custom-select .custom-select-button,
body.cabinet-body .rg-md-field.rg-md-outlined > .rg-md-select .custom-select-button {
  padding: 17px 48px 7px 16px !important;
}
body.cabinet-body .rg-md-field.rg-md-outlined > textarea.rg-md-control {
  min-height: 128px !important;
  padding-top: 21px !important;
  padding-bottom: 12px !important;
  resize: vertical !important;
}
body.cabinet-body .rg-md-field.rg-md-outlined::after {
  content: "" !important;
  position: absolute !important;
  z-index: 4 !important;
  inset: 0 !important;
  border: 2px solid var(--rg-md-outline-focus) !important;
  border-radius: var(--rg-md-radius) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: scaleX(.985) scaleY(.96) !important;
  transition: opacity var(--rg-md-motion), transform var(--rg-md-motion) !important;
}
body.cabinet-body .rg-md-field.rg-md-outlined:is(.is-focused, .is-open)::after {
  opacity: 1 !important;
  transform: scale(1) !important;
}
body.cabinet-body .rg-md-field.rg-md-outlined:is(.has-value, .is-focused, .is-open) > .rg-md-hint {
  top: 0 !important;
  left: 12px !important;
  max-width: calc(100% - 32px) !important;
  padding: 0 5px !important;
  background: var(--cab-panel) !important;
  transform: translateY(-50%) scale(.78) !important;
}
body.cabinet-body .rg-md-field.rg-md-outlined:is(.is-focused, .is-open) > .rg-md-hint {
  color: var(--cab-text) !important;
}
body.cabinet-body .rg-md-field.rg-md-outlined:hover:not(.is-disabled):not(.is-readonly) > input.rg-md-control,
body.cabinet-body .rg-md-field.rg-md-outlined:hover:not(.is-disabled):not(.is-readonly) > textarea.rg-md-control,
body.cabinet-body .rg-md-field.rg-md-outlined:hover:not(.is-disabled) > .custom-select .custom-select-button,
body.cabinet-body .rg-md-field.rg-md-outlined:hover:not(.is-disabled) > .rg-md-select .custom-select-button {
  border-color: var(--rg-md-outline-hover) !important;
}

/* FilledTextBox / FilledComboBox — used for search/filter toolbars. */
body.cabinet-body .rg-md-field.rg-md-filled {
  border-radius: var(--rg-md-radius) var(--rg-md-radius) 0 0 !important;
  background: var(--rg-md-fill) !important;
}
body.cabinet-body .rg-md-field.rg-md-filled > input.rg-md-control,
body.cabinet-body .rg-md-field.rg-md-filled > textarea.rg-md-control,
body.cabinet-body .rg-md-field.rg-md-filled > .custom-select .custom-select-button,
body.cabinet-body .rg-md-field.rg-md-filled > .rg-md-select .custom-select-button {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: var(--rg-md-height) !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: var(--rg-md-radius) var(--rg-md-radius) 0 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--cab-text) !important;
  caret-color: var(--cab-text) !important;
  box-shadow: inset 0 -1px 0 var(--rg-md-outline) !important;
  font: inherit !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  transform: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: background-color var(--rg-md-motion), box-shadow var(--rg-md-motion) !important;
}
body.cabinet-body .rg-md-field.rg-md-filled > input.rg-md-control,
body.cabinet-body .rg-md-field.rg-md-filled > textarea.rg-md-control {
  padding: 20px 16px 4px !important;
}
body.cabinet-body .rg-md-field.rg-md-filled > .custom-select .custom-select-button,
body.cabinet-body .rg-md-field.rg-md-filled > .rg-md-select .custom-select-button {
  padding: 20px 48px 4px 16px !important;
}
body.cabinet-body .rg-md-field.rg-md-filled::after {
  content: "" !important;
  position: absolute !important;
  z-index: 4 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 2px !important;
  background: var(--rg-md-outline-focus) !important;
  pointer-events: none !important;
  transform: scaleX(0) !important;
  transform-origin: center !important;
  transition: transform var(--rg-md-motion) !important;
}
body.cabinet-body .rg-md-field.rg-md-filled:is(.is-focused, .is-open)::after {
  transform: scaleX(1) !important;
}
body.cabinet-body .rg-md-field.rg-md-filled:is(.has-value, .is-focused, .is-open) > .rg-md-hint {
  top: 10px !important;
  left: 16px !important;
  color: var(--cab-muted) !important;
  transform: translateY(0) scale(.78) !important;
}
body.cabinet-body .rg-md-field.rg-md-filled:is(.is-focused, .is-open) > .rg-md-hint {
  color: var(--cab-text) !important;
}
body.cabinet-body .rg-md-field.rg-md-filled:hover:not(.is-disabled):not(.is-readonly) {
  background: var(--rg-md-fill-hover) !important;
}

body.cabinet-body .rg-md-field > input.rg-md-control::placeholder,
body.cabinet-body .rg-md-field > textarea.rg-md-control::placeholder {
  color: var(--cab-muted) !important;
  opacity: 0 !important;
  transition: opacity var(--rg-md-motion) !important;
}
body.cabinet-body .rg-md-field.is-focused > input.rg-md-control::placeholder,
body.cabinet-body .rg-md-field.is-focused > textarea.rg-md-control::placeholder {
  opacity: .72 !important;
}
body.cabinet-body .rg-md-field > input.rg-md-control:read-only,
body.cabinet-body .rg-md-field > textarea.rg-md-control:read-only {
  cursor: default !important;
}

/* ComboBox trigger and chevron. */
body.cabinet-body .rg-md-field > .custom-select,
body.cabinet-body .rg-md-field > .rg-md-select {
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}
body.cabinet-body .rg-md-field .custom-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
body.cabinet-body .rg-md-field .custom-select-button {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  text-align: left !important;
  cursor: pointer !important;
  overflow: hidden !important;
}
body.cabinet-body .rg-md-field .custom-select-button > span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
body.cabinet-body .rg-md-field .custom-select-button::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  background: radial-gradient(circle at var(--rg-ripple-x, 50%) var(--rg-ripple-y, 50%), var(--rg-md-pressed) 0 10%, transparent 11%) !important;
  opacity: 0 !important;
  transform: scale(.2) !important;
  pointer-events: none !important;
}
body.cabinet-body .rg-md-field .custom-select-button.rg-md-ripple::before {
  animation: rg-md-ripple 460ms cubic-bezier(.2, 0, 0, 1) !important;
}
body.cabinet-body .rg-md-field .custom-select-button > span,
body.cabinet-body .rg-md-field .custom-select-button > b {
  position: relative !important;
  z-index: 1 !important;
}
body.cabinet-body .rg-md-field .custom-select-button > b {
  position: absolute !important;
  top: 50% !important;
  right: 18px !important;
  width: 9px !important;
  height: 9px !important;
  margin-top: -6px !important;
  border-right: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  color: var(--cab-muted) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  opacity: .9 !important;
  transform: rotate(45deg) !important;
  transform-origin: center !important;
  transition: color var(--rg-md-motion), transform var(--rg-md-menu-motion) !important;
}
body.cabinet-body .rg-md-field .custom-select.is-open .custom-select-button > b {
  color: var(--cab-text) !important;
  transform: translateY(4px) rotate(225deg) !important;
}
body.cabinet-body .rg-md-field .custom-select-button:hover:not(:disabled)::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: var(--rg-md-hover) !important;
  pointer-events: none !important;
}

/* Body-portal ComboBox context menu, including open/close animation. */
body.cabinet-body .custom-select-list.rg-md-menu {
  position: fixed !important;
  z-index: 20050 !important;
  right: auto !important;
  display: grid !important;
  gap: 0 !important;
  max-height: 320px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding: 8px 0 !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: var(--rg-md-menu) !important;
  box-shadow: 0 5px 5px -3px rgba(0,0,0,.20), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12) !important;
  backdrop-filter: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-8px) scaleX(.96) scaleY(.78) !important;
  transform-origin: top center !important;
  will-change: transform, opacity !important;
  transition: opacity 120ms linear, transform var(--rg-md-menu-motion), visibility 0s linear var(--rg-md-menu-motion) !important;
}
body.cabinet-body .custom-select-list.rg-md-menu.opens-up {
  transform-origin: bottom center !important;
  transform: translateY(8px) scaleX(.96) scaleY(.78) !important;
}
body.cabinet-body .custom-select-list.rg-md-menu.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
  transition: opacity 150ms linear, transform var(--rg-md-menu-motion), visibility 0s linear 0s !important;
}
body.cabinet-body .custom-select-list.rg-md-menu.is-closing {
  visibility: visible !important;
  pointer-events: none !important;
}
body.cabinet-body .custom-select-list.rg-md-menu button {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 48px 0 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--cab-text) !important;
  font: inherit !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-align: left !important;
  cursor: pointer !important;
  transform: none !important;
  transition: background-color 120ms linear, color 120ms linear !important;
}
body.cabinet-body .custom-select-list.rg-md-menu button:hover,
body.cabinet-body .custom-select-list.rg-md-menu button:focus-visible {
  background: var(--rg-md-hover) !important;
}
body.cabinet-body .custom-select-list.rg-md-menu button:active {
  background: var(--rg-md-pressed) !important;
}
body.cabinet-body .custom-select-list.rg-md-menu button[aria-selected="true"] {
  background: var(--rg-md-selected) !important;
  font-weight: 650 !important;
}
body.cabinet-body .custom-select-list.rg-md-menu button[aria-selected="true"]::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: 19px !important;
  width: 12px !important;
  height: 6px !important;
  border-left: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  transform: translateY(-65%) rotate(-45deg) !important;
}

@keyframes rg-md-ripple {
  0% { opacity: 0; transform: scale(.15); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: scale(2.5); }
}

@media (max-width: 720px) {
  body.cabinet-body { --rg-md-height: 54px; }
  body.cabinet-body .toolbar > .rg-md-generated.rg-md-search,
  body.cabinet-body .toolbar > .rg-md-generated.rg-md-filter {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  body.cabinet-body .custom-select-list.rg-md-menu {
    max-width: calc(100vw - 20px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.cabinet-body .rg-md-hint,
  body.cabinet-body .rg-md-field::after,
  body.cabinet-body .rg-md-field input,
  body.cabinet-body .rg-md-field textarea,
  body.cabinet-body .custom-select-button,
  body.cabinet-body .custom-select-button > b,
  body.cabinet-body .custom-select-list.rg-md-menu,
  body.cabinet-body .custom-select-list.rg-md-menu button {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}


/* allforms-2: softer state layers, rounder controls and dialog polish. */
body.cabinet-body,
body.cabinet-body .rg-md-field,
body.cabinet-body .rg-md-field * {
  box-sizing: border-box;
}
html[data-theme="light"] body.cabinet-body {
  --rg-md-selected: rgba(20, 29, 43, .075);
  --rg-md-hover: rgba(20, 29, 43, .055);
  --rg-md-pressed: rgba(20, 29, 43, .105);
}
html[data-theme="dark"] body.cabinet-body {
  --rg-md-selected: rgba(255, 255, 255, .095);
  --rg-md-hover: rgba(255, 255, 255, .065);
  --rg-md-pressed: rgba(255, 255, 255, .12);
}
body.cabinet-body ::selection {
  background: color-mix(in srgb, var(--cab-text) 13%, transparent) !important;
  color: var(--cab-text) !important;
}

/* The dark layer behind dialogs was too opaque. */
html[data-theme="light"] body.cabinet-body .modal-backdrop {
  background: rgba(24, 32, 46, .22) !important;
  -webkit-backdrop-filter: blur(8px) saturate(.96) brightness(.99) !important;
  backdrop-filter: blur(8px) saturate(.96) brightness(.99) !important;
}
html[data-theme="dark"] body.cabinet-body .modal-backdrop {
  background: rgba(0, 0, 0, .34) !important;
  -webkit-backdrop-filter: blur(8px) saturate(.92) brightness(.91) !important;
  backdrop-filter: blur(8px) saturate(.92) brightness(.91) !important;
}
body.cabinet-body .modal-backdrop .modal {
  border-radius: 24px !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--cab-text) 12%, var(--cab-line)) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .22), 0 4px 18px rgba(0, 0, 0, .10) !important;
}
body.cabinet-body .modal-head,
body.cabinet-body .modal-foot {
  background: color-mix(in srgb, var(--cab-panel) 97%, transparent) !important;
}
body.cabinet-body .modal-close,
body.cabinet-body .modal .btn,
body.cabinet-body .modal button:not(.custom-select-button) {
  border-radius: 12px !important;
}

/* Material ComboBox popup with a quieter selection and slightly rounded items. */
body.cabinet-body .custom-select-list.rg-md-menu,
body.cabinet-body .custom-select-list {
  padding: 7px !important;
  border: 1px solid color-mix(in srgb, var(--cab-text) 11%, var(--cab-line)) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--cab-panel) 98%, var(--cab-bg)) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .18), 0 3px 10px rgba(0, 0, 0, .10) !important;
  transform: translateY(-7px) scaleX(.975) scaleY(.82) !important;
}
body.cabinet-body .custom-select-list.rg-md-menu.opens-up,
body.cabinet-body .custom-select-list.opens-up {
  transform: translateY(7px) scaleX(.975) scaleY(.82) !important;
}
body.cabinet-body .custom-select-list.rg-md-menu.is-open,
body.cabinet-body .custom-select-list.is-open {
  transform: translateY(0) scale(1) !important;
}
body.cabinet-body .custom-select-list.rg-md-menu button,
body.cabinet-body .custom-select-list button {
  min-height: 46px !important;
  margin: 2px 0 !important;
  padding: 0 44px 0 13px !important;
  border-radius: 8px !important;
  transition: background-color 120ms linear, color 120ms linear, transform 120ms ease !important;
}
body.cabinet-body .custom-select-list.rg-md-menu button:hover,
body.cabinet-body .custom-select-list.rg-md-menu button:focus-visible,
body.cabinet-body .custom-select-list button:hover,
body.cabinet-body .custom-select-list button:focus-visible {
  background: var(--rg-md-hover) !important;
}
body.cabinet-body .custom-select-list.rg-md-menu button:active,
body.cabinet-body .custom-select-list button:active {
  background: var(--rg-md-pressed) !important;
  transform: scale(.992) !important;
}
body.cabinet-body .custom-select-list.rg-md-menu button[aria-selected="true"],
body.cabinet-body .custom-select-list button[aria-selected="true"] {
  background: var(--rg-md-selected) !important;
  color: var(--cab-text) !important;
}

@media (max-width: 720px) {
  body.cabinet-body .modal-backdrop .modal {
    border-radius: 24px 24px 0 0 !important;
  }
}