/*
  Shared component layer.
  Use these ui-* classes before adding page-specific CSS to domain bundles.
*/

.ui-form-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) minmax(180px, 1.4fr) minmax(220px, 1fr);
  gap: 0.55rem;
  align-items: end;
}

.ui-inline-fields,
.hd-inline-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.ui-inline-fields--recon-rate,
.hd-inline-fields--recon-rate {
  grid-template-columns: minmax(220px, 1.6fr) minmax(120px, 0.7fr) minmax(120px, 0.7fr);
}

.ui-multiselect,
.hd-role-multi {
  position: relative;
}

.ui-multiselect__summary,
.hd-role-multi__summary {
  display: flex;
  align-items: center;
  min-height: 2.45rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.ui-multiselect__summary::-webkit-details-marker,
.hd-role-multi__summary::-webkit-details-marker {
  display: none;
}

.ui-multiselect__summary::after,
.hd-role-multi__summary::after {
  content: "⌄";
  margin-left: auto;
  color: var(--muted);
}

.ui-multiselect__menu,
.hd-role-multi__menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  max-height: 15rem;
  overflow: auto;
  padding: 0.35rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.ui-multiselect__option,
.hd-role-multi__option {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.4rem;
  border-radius: 8px;
  color: var(--text);
  font-size: 0.82rem;
  cursor: pointer;
}

.ui-multiselect__option:hover,
.hd-role-multi__option:hover {
  background: var(--surface-2);
}

[data-theme="light"] .btn-ghost.btn-danger {
  background: rgba(220, 38, 38, 0.08);
  color: var(--danger);
  border-color: rgba(220, 38, 38, 0.36);
  box-shadow: var(--shadow-xs);
}

[data-theme="light"] .btn-ghost.btn-danger:hover {
  background: var(--danger);
  color: #ffffff;
  border-color: var(--danger);
  box-shadow: 0 6px 20px -4px rgba(220, 38, 38, 0.35);
}

[data-theme="dark"] .btn-ghost.btn-danger {
  background: rgba(240, 113, 120, 0.12);
  color: var(--danger);
  border-color: rgba(240, 113, 120, 0.4);
}

[data-theme="dark"] .btn-ghost.btn-danger:hover {
  background: var(--danger);
  color: #ffffff;
  border-color: var(--danger);
}

@media (max-width: 980px) {
  .ui-form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .ui-inline-fields,
  .hd-inline-fields {
    grid-template-columns: 1fr;
  }
}