@layer modules {

.mgmt-table-wrap {
  overflow-x: auto;
  border: none;
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
  box-shadow: var(--shadow);
}

.mgmt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.mgmt-table thead th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-subtle);
  background-color: var(--color-neutral-50);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.mgmt-table thead th.text-center { text-align: center; }

.mgmt-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--transition-fast);
}

.mgmt-table tbody tr:last-child { border-bottom: none; }

.mgmt-table tbody tr:hover { background-color: var(--color-neutral-50); }

.mgmt-table tbody td {
  padding: var(--space-3) var(--space-4);
  vertical-align: middle;
  color: var(--color-text);
}

.mgmt-table tbody td.text-center { text-align: center; }

.mgmt-table--card { border-radius: 0; }
.mgmt-table--card thead th:first-child { border-radius: 0; }

.mgmt-table__primary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.mgmt-table__avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  background-color: var(--color-brand-tint);
  color: var(--color-brand-base);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0.02em;
}

.mgmt-table__name {
  font-weight: var(--font-medium);
  color: var(--color-neutral-800);
}

.mgmt-table__link {
  font-weight: var(--font-medium);
  color: var(--color-neutral-800);
  text-decoration: none;
}

.mgmt-table__link:hover {
  color: var(--color-brand);
  text-decoration: underline;
}

.mgmt-table__meta {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.mgmt-table__count {
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-semibold);
  color: var(--color-neutral-700);
}

.mgmt-table__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: flex-end;
}

.mgmt-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background-color: var(--color-surface);
  border: none;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  padding: var(--space-5) var(--space-6);
  flex-wrap: wrap;
}

.mgmt-detail-header__body {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.mgmt-detail-header__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  background-color: var(--color-brand-tint);
  flex-shrink: 0;
}

.mgmt-detail-header__icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--color-brand-base);
}

.mgmt-detail-header__icon--sm {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background-color: var(--color-brand-tint);
  color: var(--color-brand-base);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mgmt-detail-header__title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-900);
  letter-spacing: -0.01em;
}

.mgmt-detail-header__meta {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  margin-top: var(--space-1);
}

.mgmt-detail-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.btn--danger-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-danger-base);
}

.btn--danger-ghost:hover {
  background-color: var(--color-danger-light);
  border-color: #fecaca;
  color: var(--color-danger-dark);
}

.btn--danger-outline {
  background: var(--color-surface);
  border: 1px solid var(--color-danger-base);
  color: var(--color-danger-base);
}

.btn--danger-outline:hover {
  background-color: var(--color-danger-light);
  border-color: var(--color-danger-base);
  color: var(--color-danger-dark);
}

.btn--xs {
  padding: 3px var(--space-2);
  font-size: var(--text-xs);
  gap: var(--space-1);
  border-radius: var(--radius-md);
}

.form__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.form__row > * {
  flex: 1 1 calc(50% - var(--space-4));
  min-width: 0;
}

@media (max-width: 480px) {
  .form__row > * { flex: 1 1 100%; }
}

.form__hint {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  margin-top: calc(-1 * var(--space-1));
  margin-bottom: var(--space-1);
}

.side-nav__divider {
  height: 1px;
  background-color: var(--color-border);
  margin: var(--space-2) var(--space-3);
}

}