/* Danxis 13.3 — visual clean para Workflow e Usuários
   Apenas aparência e organização visual. Não altera regras, permissões ou dados. */

/* Base visual comum: superfícies claras, bordas suaves e menos elementos decorativos. */
#settings-users,
#settings-approval-workflow {
  --dx-clear-border: #dfe7ee;
  --dx-clear-border-strong: #cfdbe5;
  --dx-clear-bg: #ffffff;
  --dx-clear-soft: #f7fafc;
  --dx-clear-soft-2: #f2f7fa;
  --dx-clear-text: #000000;
  --dx-clear-muted: #425466;
  --dx-clear-accent: #176f9d;
  --dx-clear-accent-soft: #eef8fc;
  color: var(--dx-clear-text) !important;
}

#settings-users *,
#settings-approval-workflow * {
  box-sizing: border-box;
}

/* =========================
   USUÁRIOS
   ========================= */
#settings-users .users-shell {
  gap: 12px !important;
}

/* Cabeçalho branco e compacto em vez do grande bloco em degradê. */
#settings-users .users-hero {
  position: relative;
  padding: 16px 18px 16px 20px !important;
  border: 1px solid var(--dx-clear-border) !important;
  border-left: 4px solid var(--dx-clear-accent) !important;
  border-radius: 14px !important;
  background: var(--dx-clear-bg) !important;
  box-shadow: none !important;
  color: var(--dx-clear-text) !important;
}

#settings-users .users-hero span {
  color: var(--dx-clear-accent) !important;
  font-size: 11px !important;
  letter-spacing: .45px !important;
}

#settings-users .users-hero h3 {
  margin: 4px 0 3px !important;
  color: var(--dx-clear-text) !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
}

#settings-users .users-hero p {
  margin: 0 !important;
  max-width: 880px !important;
  color: var(--dx-clear-muted) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

#settings-users .users-card {
  border: 1px solid var(--dx-clear-border) !important;
  border-radius: 14px !important;
  background: var(--dx-clear-bg) !important;
  box-shadow: none !important;
}

#settings-users .users-card-head {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--dx-clear-border) !important;
  background: var(--dx-clear-bg) !important;
}

#settings-users .users-card-head h4 {
  color: var(--dx-clear-text) !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
}

#settings-users .users-card-head p {
  margin-top: 3px !important;
  color: var(--dx-clear-muted) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

#settings-users .users-card-body {
  padding: 16px !important;
}

#settings-users .users-form-grid {
  gap: 14px !important;
}

#settings-users .users-field label {
  margin-bottom: 6px !important;
  color: var(--dx-clear-text) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

#settings-users .users-field input,
#settings-users .users-field select {
  min-height: 44px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--dx-clear-border-strong) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #000 !important;
  font-size: 14px !important;
  box-shadow: none !important;
}

#settings-users .users-field input:focus,
#settings-users .users-field select:focus {
  border-color: #6aa9c4 !important;
  box-shadow: 0 0 0 3px rgba(23,111,157,.09) !important;
}

/* Painel avançado fica recolhido por padrão para reduzir a poluição visual. */
#settings-users .user-permissions-panel {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#settings-users .user-permissions-title {
  grid-column: 1 / -1 !important;
  align-items: center !important;
  padding: 12px 14px !important;
  border: 1px solid var(--dx-clear-border) !important;
  border-radius: 11px !important;
  background: var(--dx-clear-soft) !important;
}

#settings-users .user-permissions-title strong {
  color: var(--dx-clear-text) !important;
  font-size: 14px !important;
}

#settings-users .user-permissions-title span {
  color: var(--dx-clear-muted) !important;
  font-size: 12px !important;
}

#settings-users .clear-ui-toggle {
  flex: 0 0 auto;
  border: 1px solid #9ebfd0 !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: #174f70 !important;
  padding: 8px 11px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer;
}

#settings-users .clear-ui-toggle:hover {
  background: var(--dx-clear-accent-soft) !important;
}

#settings-users .user-permissions-panel:not(.clear-ui-open) > .user-permission-group {
  display: none !important;
}

#settings-users .user-permission-group {
  margin: 0 !important;
  padding: 13px !important;
  border: 1px solid var(--dx-clear-border) !important;
  border-radius: 11px !important;
  background: #fff !important;
}

#settings-users .user-permission-group:has(#userSupplierRestrictions),
#settings-users .user-permission-group:has(#userPermissionModules) {
  grid-column: 1 / -1 !important;
}

#settings-users .user-permission-group h5 {
  margin: 0 0 9px !important;
  color: var(--dx-clear-text) !important;
  font-size: 13px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

#settings-users .user-permission-toggle,
#settings-users .user-settings-access-card,
#settings-users .user-checkbox-option {
  border: 1px solid var(--dx-clear-border) !important;
  border-radius: 9px !important;
  background: var(--dx-clear-soft) !important;
  color: #000 !important;
  box-shadow: none !important;
}

#settings-users .user-permission-toggle {
  padding: 9px 10px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

#settings-users .user-settings-access-card {
  padding: 10px 11px !important;
}

#settings-users .user-settings-access-card strong {
  color: #000 !important;
  font-size: 13px !important;
}

#settings-users .user-settings-access-card small {
  color: var(--dx-clear-muted) !important;
  font-size: 11px !important;
}

#settings-users .user-restriction-box {
  border: 1px solid var(--dx-clear-border) !important;
  border-radius: 10px !important;
  background: #fff !important;
  padding: 12px !important;
}

#settings-users .user-restriction-row strong {
  color: #000 !important;
  font-size: 12px !important;
}

#settings-users .user-checkbox-grid,
#settings-users .user-module-grid {
  gap: 6px !important;
}

#settings-users .user-checkbox-option {
  padding: 8px 9px !important;
  font-size: 11px !important;
}

#settings-users .users-actions {
  margin-top: 12px !important;
}

#settings-users .users-list-toolbar {
  margin-bottom: 10px !important;
}

#settings-users .user-card {
  grid-template-columns: 42px minmax(0,1.1fr) minmax(130px,.65fr) minmax(175px,.85fr) auto !important;
  padding: 11px 12px !important;
  border: 1px solid var(--dx-clear-border) !important;
  border-radius: 11px !important;
  background: #fff !important;
  box-shadow: none !important;
}

#settings-users .user-avatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: #176f9d !important;
  color: #fff !important;
}

#settings-users .user-main strong,
#settings-users .user-profile strong,
#settings-users .user-permission-summary strong {
  color: #000 !important;
  font-size: 13px !important;
}

#settings-users .user-main span,
#settings-users .user-profile span,
#settings-users .user-permission-summary span {
  color: var(--dx-clear-muted) !important;
  font-size: 11px !important;
}

#settings-users .user-permission-badges i {
  background: var(--dx-clear-soft-2) !important;
  color: #244f68 !important;
  font-size: 10px !important;
}

/* =========================
   WORKFLOW
   ========================= */
#settings-approval-workflow .wf-shell {
  gap: 12px !important;
}

#settings-approval-workflow .wf-hero {
  min-height: 0 !important;
  padding: 16px 18px 16px 20px !important;
  border: 1px solid var(--dx-clear-border) !important;
  border-left: 4px solid var(--dx-clear-accent) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: none !important;
  color: #000 !important;
}

#settings-approval-workflow .wf-hero::after,
#settings-approval-workflow .wf-hero-badge {
  display: none !important;
}

#settings-approval-workflow .wf-hero-copy {
  max-width: 920px !important;
}

#settings-approval-workflow .wf-hero-copy > span {
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--dx-clear-accent) !important;
  font-size: 11px !important;
  letter-spacing: .45px !important;
}

#settings-approval-workflow .wf-hero h3 {
  margin: 4px 0 3px !important;
  color: #000 !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
}

#settings-approval-workflow .wf-hero p {
  color: var(--dx-clear-muted) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

/* Etapas no formato de abas discretas. */
#settings-approval-workflow .wf-stepper {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#settings-approval-workflow .wf-step-button {
  min-height: 48px !important;
  padding: 9px 10px !important;
  border: 1px solid var(--dx-clear-border) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #26394a !important;
  box-shadow: none !important;
}

#settings-approval-workflow .wf-step-button:hover {
  border-color: #a8c4d3 !important;
  background: var(--dx-clear-soft) !important;
}

#settings-approval-workflow .wf-step-button.active {
  border-color: #78a9c0 !important;
  background: var(--dx-clear-accent-soft) !important;
  color: #123f59 !important;
  box-shadow: none !important;
}

#settings-approval-workflow .wf-step-number,
#settings-approval-workflow .wf-step-button.active .wf-step-number {
  width: 27px !important;
  height: 27px !important;
  border-radius: 8px !important;
  background: #e8f1f6 !important;
  color: #174f70 !important;
  font-size: 11px !important;
}

#settings-approval-workflow .wf-step-button.done .wf-step-number {
  background: #e8f7f1 !important;
  color: #167d5d !important;
}

#settings-approval-workflow .wf-step-copy strong {
  color: #000 !important;
  font-size: 12px !important;
}

#settings-approval-workflow .wf-step-copy span {
  display: none !important;
}

#settings-approval-workflow .wf-card {
  border: 1px solid var(--dx-clear-border) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: none !important;
}

#settings-approval-workflow .wf-card-head {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--dx-clear-border) !important;
  background: #fff !important;
}

#settings-approval-workflow .wf-card-head h4 {
  color: #000 !important;
  font-size: 16px !important;
}

#settings-approval-workflow .wf-card-head p {
  color: var(--dx-clear-muted) !important;
  font-size: 12px !important;
}

#settings-approval-workflow .wf-card-body {
  padding: 16px !important;
}

#settings-approval-workflow .wf-form-grid {
  gap: 12px !important;
}

#settings-approval-workflow .wf-field label {
  color: #000 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

#settings-approval-workflow .wf-field label small {
  color: var(--dx-clear-muted) !important;
  font-size: 11px !important;
}

#settings-approval-workflow .wf-field input,
#settings-approval-workflow .wf-field select,
#settings-approval-workflow .wf-trigger-mode,
#settings-approval-workflow .wf-trigger-field select,
#settings-approval-workflow .wf-rule-card select,
#settings-approval-workflow .wf-priority select {
  min-height: 42px !important;
  border: 1px solid var(--dx-clear-border-strong) !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: #000 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

#settings-approval-workflow .wf-info-box,
#settings-approval-workflow .wf-profile-source {
  padding: 11px 12px !important;
  border: 1px solid var(--dx-clear-border) !important;
  border-radius: 10px !important;
  background: var(--dx-clear-soft) !important;
  box-shadow: none !important;
}

#settings-approval-workflow .wf-info-icon {
  width: 27px !important;
  height: 27px !important;
  border-radius: 8px !important;
  background: #e5f2f7 !important;
  color: #176f9d !important;
}

#settings-approval-workflow .wf-info-box strong,
#settings-approval-workflow .wf-profile-source strong {
  color: #000 !important;
  font-size: 12px !important;
}

#settings-approval-workflow .wf-info-box span,
#settings-approval-workflow .wf-profile-source {
  color: var(--dx-clear-muted) !important;
  font-size: 11px !important;
}

/* Um perfil por linha: leitura mais simples e sem excesso de cartões lado a lado. */
#settings-approval-workflow .wf-approvers-grid {
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

#settings-approval-workflow .wf-approver-card,
#settings-approval-workflow .wf-order-row,
#settings-approval-workflow .wf-rule-card,
#settings-approval-workflow .wf-summary-item,
#settings-approval-workflow .wf-saved-item {
  border: 1px solid var(--dx-clear-border) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
}

#settings-approval-workflow .wf-approver-card {
  grid-template-columns: 36px minmax(0,1fr) !important;
  padding: 11px !important;
}

#settings-approval-workflow .wf-profile-index,
#settings-approval-workflow .wf-order-position {
  width: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
  background: #e9f3f7 !important;
  color: #175c7d !important;
}

#settings-approval-workflow .wf-trigger-box {
  padding: 10px !important;
  border: 1px solid var(--dx-clear-border) !important;
  border-radius: 9px !important;
  background: var(--dx-clear-soft) !important;
}

#settings-approval-workflow .wf-trigger-head strong,
#settings-approval-workflow .wf-order-copy strong,
#settings-approval-workflow .wf-rule-head strong,
#settings-approval-workflow .wf-priority strong,
#settings-approval-workflow .wf-summary-item strong,
#settings-approval-workflow .wf-saved-main strong {
  color: #000 !important;
  font-size: 12px !important;
}

#settings-approval-workflow .wf-trigger-head span,
#settings-approval-workflow .wf-trigger-summary,
#settings-approval-workflow .wf-order-copy span,
#settings-approval-workflow .wf-rule-head span,
#settings-approval-workflow .wf-priority span,
#settings-approval-workflow .wf-summary-item span,
#settings-approval-workflow .wf-saved-main span {
  color: var(--dx-clear-muted) !important;
  font-size: 11px !important;
}

#settings-approval-workflow .wf-flow-preview {
  margin-top: 12px !important;
  padding: 11px !important;
  border: 1px solid var(--dx-clear-border) !important;
  border-radius: 10px !important;
  background: var(--dx-clear-soft) !important;
}

#settings-approval-workflow .wf-flow-node {
  border: 1px solid var(--dx-clear-border) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #000 !important;
  font-size: 11px !important;
}

#settings-approval-workflow .wf-rules-grid {
  gap: 8px !important;
}

#settings-approval-workflow .wf-rule-card {
  padding: 12px !important;
}

#settings-approval-workflow .wf-rule-card::before {
  width: 3px !important;
}

#settings-approval-workflow .wf-rule-icon {
  width: 29px !important;
  height: 29px !important;
  border-radius: 8px !important;
}

#settings-approval-workflow .wf-priority {
  margin-top: 10px !important;
  padding: 12px !important;
  border: 1px solid var(--dx-clear-border) !important;
  border-radius: 10px !important;
  background: var(--dx-clear-soft) !important;
}

#settings-approval-workflow .wf-summary {
  margin-top: 10px !important;
  gap: 7px !important;
}

#settings-approval-workflow .wf-card-footer {
  padding: 12px 16px !important;
  border-top: 1px solid var(--dx-clear-border) !important;
  background: #fff !important;
}

#settings-approval-workflow .wf-save-state {
  color: var(--dx-clear-muted) !important;
  font-size: 11px !important;
}

#settings-approval-workflow .wf-saved-head {
  margin-top: 2px !important;
}

#settings-approval-workflow .wf-saved-head h4 {
  color: #000 !important;
  font-size: 15px !important;
}

#settings-approval-workflow .wf-saved-head p {
  color: var(--dx-clear-muted) !important;
  font-size: 11px !important;
}

#settings-approval-workflow .wf-saved-list {
  margin-top: 8px !important;
}

#settings-approval-workflow .wf-saved-item {
  padding: 10px 11px !important;
}

#settings-approval-workflow .wf-saved-logo {
  width: 38px !important;
  height: 38px !important;
  border-radius: 9px !important;
  background: #176f9d !important;
  color: #fff !important;
}

/* Letras claras somente nos botões de ação escuros. */
#settings-users .btn-primary,
#settings-users .btn-primary *,
#settings-approval-workflow .btn-primary,
#settings-approval-workflow .btn-primary * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

@media (max-width: 980px) {
  #settings-users .user-card {
    grid-template-columns: 40px minmax(0,1fr) auto !important;
  }

  #settings-users .user-permissions-panel {
    grid-template-columns: 1fr !important;
  }

  #settings-users .user-permission-group,
  #settings-users .user-permission-group:has(#userSupplierRestrictions),
  #settings-users .user-permission-group:has(#userPermissionModules) {
    grid-column: 1 !important;
  }

  #settings-approval-workflow .wf-rules-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  #settings-approval-workflow .wf-stepper {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  #settings-approval-workflow .wf-trigger-grid,
  #settings-approval-workflow .wf-priority {
    grid-template-columns: 1fr !important;
  }

  #settings-users .user-permissions-title {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  #settings-users .clear-ui-toggle {
    width: 100% !important;
  }
}