.page-users-permissions {
  min-height: calc(100vh - 52px);
  padding: 16px;
}
.page-users-permissions .users-page-grid {
  display: grid;
  gap: 14px;
}
.page-users-permissions .users-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.page-users-permissions .users-section-head h2 {
  margin: 0;
  font-size: 20px;
}
.page-users-permissions .users-form-mode {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.page-users-permissions .users-table th,
.page-users-permissions .users-table td {
  vertical-align: middle;
}
.page-users-permissions .users-row-actions {
  justify-content: flex-start;
}
.page-users-permissions .users-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.page-users-permissions .users-form-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.page-users-permissions .users-form-grid input {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgb(255 255 255 / 0.88);
  color: var(--ink);
  font: inherit;
}
.page-users-permissions .users-permission-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0;
  color: var(--muted);
  font-size: 12px;
}
.page-users-permissions .users-permission-count {
  margin-right: auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.page-users-permissions .users-permission-blocks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.page-users-permissions .users-permission-block {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: rgb(255 255 255 / 0.72);
}
.page-users-permissions .users-permission-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.page-users-permissions .users-permission-head strong {
  font-size: 14px;
}
.page-users-permissions .users-block-count {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.page-users-permissions .users-block-toggle.active {
  border-color: color-mix(in srgb, var(--primary) 36%, var(--line));
  background: color-mix(in srgb, var(--primary) 10%, #fff);
  color: var(--primary-strong);
}
.page-users-permissions .users-permission-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.page-users-permissions .users-permission-chip {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}
.page-users-permissions .users-permission-chip.active {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
  background: color-mix(in srgb, var(--primary) 12%, #fff);
  color: var(--primary-strong);
}
.page-users-permissions .users-permission-chip.child-permission {
  border-style: dashed;
}
.page-users-permissions .users-permission-chip.risky {
  border-color: #fecaca;
  background: #fff5f5;
  color: #991b1b;
}
.page-users-permissions .users-permission-chip.risky.active {
  border-color: #fca5a5;
  background: #fee2e2;
  color: #991b1b;
}
.page-users-permissions .users-permission-chip.disabled,
.page-users-permissions .users-permission-chip:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}
.topbar-actions .users-top-save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
:root[data-mode="night"] .page-users-permissions .users-permission-chip.risky {
  border-color: rgb(248 113 113 / 0.34);
  background: rgb(127 29 29 / 0.24);
  color: #fecaca;
}
:root[data-mode="night"] .page-users-permissions .users-permission-chip.risky.active {
  border-color: rgb(248 113 113 / 0.54);
  background: rgb(127 29 29 / 0.34);
  color: #fee2e2;
}

:root[data-mode="night"] .page-users-permissions .users-form-grid input,
:root[data-mode="night"] .page-users-permissions .users-permission-block,
:root[data-mode="night"] .page-users-permissions .users-permission-chip,
:root[data-mode="night"] .page-users-permissions .users-block-toggle {
  border-color: rgb(255 136 74 / 0.26) !important;
  background: rgb(14 14 14 / 0.96) !important;
  color: #f5eee8 !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.03);
}

:root[data-mode="night"] .page-users-permissions .users-form-grid input::placeholder {
  color: rgb(245 238 232 / 0.48);
}

:root[data-mode="night"] .page-users-permissions .users-block-toggle.active,
:root[data-mode="night"] .page-users-permissions .users-permission-chip.active {
  border-color: rgb(255 136 74 / 0.42) !important;
  background: rgb(44 28 21 / 0.96) !important;
  color: #ffd2bd !important;
}
@media (max-width: 1100px) {
  .page-users-permissions .users-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-users-permissions .users-permission-blocks {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .page-users-permissions {
    padding: 10px;
  }
  .page-users-permissions .users-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}