body {
  margin: 0;
  font-family: "Kanit", sans-serif;
  background-color: var(--bg-primary);
}

.mb-3.field-missing .form-label {
  color: var(--danger-color);
}

.mb-3.field-missing .form-control,
.mb-3.field-missing .form-select,
.mb-3.field-missing .input-group-text {
  border-color: var(--danger-color) !important;
}

.mb-3.field-missing .form-control:focus {
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--danger-color) 25%, transparent);
}

.password-rules div {
  font-size: 12px;
  margin-bottom: 4px;
}


/* cores bg dos temas */
.themeConfigLight {
  --blue-royal: #005fc9;
  --gray-charcoal: #5c646b;

  --cian-deep: #0f7a8c;
  --cian-deep-text: #ffffff;

  --green-la-salle: #18722d;

  --red-crimson: #c0454a;
  --red-crimson-text: #ffffff;

  --yellow-mustard: #8e6a02;
  --grape: #6829a6;
  --orange: #c46200;
  --rose: #be185d;
  --indigo: #4f46e5;
  --emerald: #059669;
  --amber: #b45309;
}
.themeConfigDark {
  --blue-royal: #75b8ff;
  --gray-charcoal: #95a1ac;

  --cian-deep: #1aafc7;
  --cian-deep-text: #ffffff;

  --green-la-salle: #2db74c;

  --red-crimson: #ff5e65;
  --red-crimson-text: #ffffff;

  --yellow-mustard: #c59400;
  --grape: #ac6deb;
  --orange: #fb923c;
  --rose: #f472b6;
  --indigo: #818cf8;
  --emerald: #34d399;
  --amber: #fbbf24;
}

.themeConfigLightDeuteranopia {
  --blue-royal: #005bc7;
  --gray-charcoal: #5f626b;
  --cian-deep: #5d6a8c;
  --cian-deep-text: #ffffff;
  --green-la-salle: #696033;
  --red-crimson: #847947;
  --red-crimson-text: #ffffff;
  --yellow-mustard: #706409;
  --grape: #004ca4;
  --orange: #b07400;
  --rose: #7a6800;
  --indigo: #4f46e5;
  --emerald: #059669;
  --amber: #b45309;
}
.themeConfigDarkDeuteranopia {
  --blue-royal: #89adfe;
  --gray-charcoal: #9a9eac;
  --cian-deep: #8799c7;
  --cian-deep-text: #ffffff;
  --green-la-salle: #aa9b55;
  --red-crimson: #aa9832;
  --red-crimson-text: #ffffff;
  --yellow-mustard: #9b9162;
  --grape: #568be8;
  --orange: #dba000;
  --rose: #cca040;
  --indigo: #818cf8;
  --emerald: #34d399;
  --amber: #fbbf24;
}

.themeConfigLightProtanopia {
  --blue-royal: #036bcd;
  --gray-charcoal: #61646b;
  --cian-deep: #6d768d;
  --cian-deep-text: #ffffff;
  --green-la-salle: #696033;
  --red-crimson: #655f49;
  --red-crimson-text: #ffffff;
  --yellow-mustard: #695c00;
  --grape: #004baa;
  --orange: #a67200;
  --rose: #726200;
  --indigo: #4f46e5;
  --emerald: #059669;
  --amber: #b45309;
}
.themeConfigDarkProtanopia {
  --blue-royal: #9bbbff;
  --gray-charcoal: #9da1ad;
  --cian-deep: #ffffff;
  --cian-deep-text: #212529;
  --green-la-salle: #b9a641;
  --red-crimson: #7a6f37;
  --red-crimson-text: #ffffff;
  --yellow-mustard: #7c7764;
  --grape: #4189ef;
  --orange: #d09600;
  --rose: #c09a30;
  --indigo: #818cf8;
  --emerald: #34d399;
  --amber: #fbbf24;
}

.themeConfigLightTritanopia {
  --blue-royal: #00798b;
  --gray-charcoal: #586666;
  --cian-deep: #008180;
  --cian-deep-text: #ffffff;
  --green-la-salle: #746726;
  --red-crimson: #d22b48;
  --red-crimson-text: #ffffff;
  --yellow-mustard: #85524d;
  --grape: #5b4966;
  --orange: #d04400;
  --rose: #cc1050;
  --indigo: #4f46e5;
  --emerald: #059669;
  --amber: #b45309;
}
.themeConfigDarkTritanopia {
  --blue-royal: #16c8d1;
  --gray-charcoal: #8fa4a4;
  --cian-deep: #00b9b6;
  --cian-deep-text: #ffffff;
  --green-la-salle: #00b3a0;
  --red-crimson: #ffffff;
  --red-crimson-text: #000000;
  --yellow-mustard: #ef4961;
  --grape: #a184e2;
  --orange: #f05000;
  --rose: #f06090;
  --indigo: #818cf8;
  --emerald: #34d399;
  --amber: #fbbf24;
}

/* Estilo global para todas as barras de rolagem (Chrome, Edge, Safari) */
*::-webkit-scrollbar {
  width: 16px !important;
  height: initial !important;
}
*::-webkit-scrollbar-track {
  background: var(--scrool-bg) !important;
}
*::-webkit-scrollbar-thumb {
  background-color: var(--scrool-color) !important;
  border-radius: 12px !important;
  border: 4px solid var(--scrool-bg) !important;
  cursor: pointer !important;
}
*::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrool-color-hover) !important;
}

.main-content {
  margin-left: 250px;
  padding: 20px;
  transition: margin-left 0.3s ease;
  min-height: calc(100vh - 54px);
  background-color: var(--bg-secondary);
}

@media screen and (max-width: 575px) {
  .main-content {
    padding: 0px !important;
    border-radius: 0px !important;
  }
  .main-content > .card:first-of-type {
    border-radius: 0px !important;
    padding-top: 12px !important;
    min-height: calc(100vh - 54px) !important;
    border: none !important;
  }
}

.card {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--input-border-color);
}

.configs-title {
  font-size: var(--font-size5);
  font-weight: 500;
  color: var(--text-primary);
}

/* labels de seção do painel de acessibilidade (Tema, Escolha o idioma, Cor,
   Possui deficiência?) — sem isso ficam com a cor padrão do navegador
   (preto fixo) e não acompanham a troca de tema claro/escuro */
.form-label.fw-semibold {
  color: var(--text-primary);
}

/* Preview grande do avatar selecionado */
.avatar-preview-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
}
.avatar-preview-wrap img {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  border: 3px solid var(--primary-color);
  background-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  transition: background-color 0.3s ease;
}

/* Mini cards abaixo */
.avatar-selection {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.avatar-selection button {
  background: none;
  border: 2px solid transparent;
  padding: 4px;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.avatar-selection button:hover {
  border-color: var(--primary-color);
  transform: scale(1.05);
}
.avatar-selection img {
  width: 64px;
  height: 64px;
  display: block;
}
.avatar-selection .selected {
  border-color: var(--primary-color);
  background-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
  transform: scale(1.08);
}

@media screen and (max-width: 500px) {
  .avatar-preview-wrap img {
    width: 110px;
    height: 110px;
  }
  .avatar-selection {
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-bottom: 6px;
  }
  .avatar-selection button {
    flex-shrink: 0;
  }
  .avatar-selection img {
    width: 56px;
    height: 56px;
  }
}

.color-swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, transparent 70%, var(--text-primary));
  flex-shrink: 0;
}

.color-picker-toggle {
  background: var(--bg-primary);
  border: 1px solid color-mix(in srgb, transparent 60%, var(--text-primary));
  border-radius: 6px;
  padding: 0.375rem 0.75rem;
  height: calc(1.5em + 0.75rem + 2px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  transition: border-color 0.15s ease;
}

.color-picker-toggle-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.color-picker-name {
  font-size: var(--font-size2);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.color-picker-toggle:hover {
  border-color: var(--text-primary);
}

.color-picker-toggle:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.color-picker-caret {
  font-size: 10px;
  color: var(--text-primary);
  opacity: 0.6;
}

.color-picker-panel {
  background-color: var(--bg-primary);
  border: 1px solid color-mix(in srgb, transparent 80%, var(--text-primary));
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  border-radius: 12px;
  width: 100% !important;
}

.color-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  justify-items: center;
}

.color-palette-btn {
  position: relative;
  background: none;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
  width: 100%;
}

.color-palette-btn:hover {
  background: color-mix(in srgb, transparent 88%, var(--text-primary));
  transform: scale(1.06);
}

.color-palette-btn:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.color-palette-btn.selected {
  border-color: var(--text-primary);
  background: color-mix(in srgb, transparent 88%, var(--text-primary));
}

/* indicador de suporte a acessibilidade (daltonismo) */
.color-palette-btn::after {
  content: '';
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--bg-primary);
  pointer-events: none;
  z-index: 1;
}
.color-palette-btn[data-has-a11y="true"]::after {
  background-color: var(--success-color);
}
.color-palette-btn[data-has-a11y="false"]::after {
  background-color: var(--warning-color);
}

.color-picker-legend {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, transparent 85%, var(--text-primary));
  font-size: 11px;
  color: var(--subtext-primary);
  line-height: 1.2;
}
.color-picker-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.color-picker-legend-dot.a11y-yes {
  background-color: var(--success-color);
}
.color-picker-legend-dot.a11y-no {
  background-color: var(--warning-color);
}
.color-picker-legend-sep {
  width: 1px;
  height: 10px;
  background: color-mix(in srgb, transparent 70%, var(--text-primary));
  flex-shrink: 0;
  margin: 0 4px;
}

/* Divisor vertical entre as duas colunas */
@media (min-width: 768px) {
  .configs-left-col {
    border-right: 2px solid color-mix(in srgb, transparent 70%, var(--text-primary));
    padding-right: 24px;
  }
}

/* Divisor entre seções */
.config-divider {
  border: none;
  border-top: 2px solid color-mix(in srgb, transparent 70%, var(--text-primary));
  margin: 14px 0;
}

/* Mini cards de configuração (idioma, deficiência) */
.config-card-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.config-minicard {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 8px;
  border: 2px solid color-mix(in srgb, transparent 75%, var(--text-primary));
  border-radius: 10px;
  background: none;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
  width: 82px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.config-minicard:hover {
  border-color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 8%, transparent);
  transform: scale(1.04);
}

.config-minicard.selected {
  border-color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 15%, transparent);
}

.config-minicard-flag {
  font-size: 22px;
  line-height: 1;
}

/* sigla de idioma (substitui as bandeiras emoji, que não acompanhavam o
   tema) — só a letra; fica na cor primária apenas quando selecionada */
.lang-sigla {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.4px;
  color: var(--text-primary);
}

.lang-card.selected .lang-sigla {
  color: var(--primary-color);
}

.config-minicard-icon {
  font-size: 18px;
  color: var(--text-primary);
}

.config-minicard-disability-icon {
  width: 42px;
  height: 42px;
  display: block;
}

.disability-card {
  width: 108px;
}

.disability-card .config-minicard-label {
  white-space: nowrap;
}

.config-minicard-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: normal;
  text-align: center;
  line-height: 1.2;
  word-break: break-word;
}

/* Swatch quadrado para os mini cards de cor */
.color-swatch-square {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Color mini cards: sobrescreve width:100% do color-palette-btn */
.color-palette-btn.config-minicard {
  width: 82px;
  padding: 8px 6px;
}

/* Bolinha a11y no canto inferior direito do card */
.color-palette-btn.config-minicard::after {
  display: block;
  bottom: 5px;
  right: 5px;
}

/* Label de cada cor com a cor de destaque correspondente */
.color-palette-btn[data-color-type="Primary"]   .config-minicard-label { color: var(--blue-royal); }
.color-palette-btn[data-color-type="Secondary"] .config-minicard-label { color: var(--gray-charcoal); }
.color-palette-btn[data-color-type="Info"]      .config-minicard-label { color: var(--cian-deep); }
.color-palette-btn[data-color-type="Success"]   .config-minicard-label { color: var(--green-la-salle); }
.color-palette-btn[data-color-type="Danger"]    .config-minicard-label { color: var(--red-crimson); }
.color-palette-btn[data-color-type="Warning"]   .config-minicard-label { color: var(--yellow-mustard); }
.color-palette-btn[data-color-type="Grape"]     .config-minicard-label { color: var(--grape); }
.color-palette-btn[data-color-type="Orange"]    .config-minicard-label { color: var(--orange); }
.color-palette-btn[data-color-type="Rose"]      .config-minicard-label { color: var(--rose); }
.color-palette-btn[data-color-type="Indigo"]    .config-minicard-label { color: var(--indigo); }
.color-palette-btn[data-color-type="Emerald"]   .config-minicard-label { color: var(--emerald); }
.color-palette-btn[data-color-type="Amber"]     .config-minicard-label { color: var(--amber); }

.color-swatch-lg {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  flex-shrink: 0;
}
.bg-primary {
  background-color: var(--blue-royal) !important;
}
.bg-secondary {
  background-color: var(--gray-charcoal) !important;
}
.bg-info {
  background-color: var(--cian-deep) !important;
}
.bg-success {
  background-color: var(--green-la-salle) !important;
}
.bg-danger {
  background-color: var(--red-crimson) !important;
}
.bg-warning {
  background-color: var(--yellow-mustard) !important;
}
.bg-grape {
  background-color: var(--grape) !important;
}
.bg-orange {
  background-color: var(--orange) !important;
}
.bg-rose {
  background-color: var(--rose) !important;
}
.bg-indigo {
  background-color: var(--indigo) !important;
}
.bg-emerald {
  background-color: var(--emerald) !important;
}
.bg-amber {
  background-color: var(--amber) !important;
}

.dropdown-item.disabled {
  color: var(--pagination-disabled-text-color) !important;
  background-color: transparent !important;
}

.dropdown-item {
  cursor: default;
}
.dropdown-item:focus {
  outline: 2px solid var(--primary-color);
  color: var(--text-primary);
}
.dropdown-item:hover {
  background-color: color-mix(in srgb, transparent 95%, var(--text-primary));
  color: var(--text-primary);
}
.dropdown-item.selected {
  background-color: color-mix(in srgb, transparent 85%, var(--text-primary));
  color: var(--text-primary);
}

.configs-btn-cancel,
.configs-btn-cancel:hover,
.configs-btn-cancel:focus,
.configs-btn-cancel:active {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  border-color: var(--text-primary) !important;
}

.configs-btn-save,
.configs-btn-save:hover,
.configs-btn-save:focus,
.configs-btn-save:active {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: var(--text-color-with-primary) !important;
}

.password:hover {
  cursor: pointer;
  background-color: color-mix(
    in srgb,
    var(--text-primary) 10%,
    transparent
  ) !important;
  transition: background-color 500ms;
}

.progress-bar {
  padding: 0;
}

.toast {
  box-shadow: 0 0 5px 0 color-mix(in srgb, transparent 80%, var(--text-primary));
}
.toast-body {
  border-bottom-left-radius: 0.375rem !important;
  border-bottom-right-radius: 0.375rem !important;
}
.toast-header,
.toast-body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}
.toast-close {
  background-color: transparent;
  border: none;
  color: var(--text-primary) !important;
}
.icon-warning {
  margin-right: 10px;
  color: var(--warning-color);
}
.icon-success {
  margin-right: 10px;
  color: var(--success-color);
}
.icon-error {
  margin-right: 10px;
  color: var(--danger-color);
}