/* ========================================================================================
   OVERRIDE GLOBAL (CÓDICE / PILAR)
   Objetivo:
   - Light confortável (menos brilho)
   - Inputs consistentes
   - Focus bonito e leve (sem glow agressivo no hover)
   - CSS legível, sem repetição
   ======================================================================================== */


/* ========================================================================================
   1) TOKENS (variáveis do app)
   ======================================================================================== */
.text-secondary {
color: black!important;
}

[data-bs-theme="light"]{
  /* superfícies */
  --app-page-bg: #f5f7fb;          /* fundo do sistema (off-white frio) */
  --app-surface: #ffffff;          /* cards / áreas principais */
  --app-surface-soft: #fcfcfd;     /* alternativa levemente menos “branco” */

  /* inputs */
  --app-input-bg: #f6f7fb;         /* preenchimento padrão dos inputs (leve) */
  --app-input-bg-hover: #f2f4fa;   /* hover bem discreto */

  /* bordas / texto */
  --app-border: #dfe4ee;
  --app-border-soft: #e8ecf4;
  --app-muted: #747579;

  /* brand */
  --app-primary: #8d4aff;
  --app-primary-2: #637cff;

  /* focus */
  --app-focus-ring: rgba(141, 74, 255, 0.22);

  /* pluga nos vars do Bootstrap/Theme */
  --bs-page-bg: var(--app-page-bg);
  --bs-content-bg-color: var(--app-page-bg);
  --bs-body-bg: var(--app-surface);
  --bs-focus-ring-color: var(--app-focus-ring);
}

[data-bs-theme="dark"]{
  --app-page-bg: #0f1014;
  --app-surface: #15171c;
  --app-surface-soft: #1b1c22;

  --app-input-bg: #23232a;
  --app-input-bg-hover: #2a2a33;

  --app-border: #333542;
  --app-border-soft: #2a2c36;
  --app-muted: #9696a0;

  --app-primary: #b393fd;
  --app-primary-2: #7b8bff;

  --app-focus-ring: rgba(179, 147, 253, 0.22);
  --bs-focus-ring-color: var(--app-focus-ring);
}


/* ========================================================================================
   2) GERAL (vale pra light e dark)
   ======================================================================================== */

/* Página de assinatura digital */
#kt_profile_details_view{ padding: 10px; }

/* Alert warning: respeitar cor do tema */
.alert-warning{ color: var(--bs-alert-color) !important; }

/* Ajustes course form (ícone e tamanho) */
.bi-folder2-open::before{ font-size: 30px; }
.w-25px, .h-25px{ width: 40px !important; height: 40px !important; background-color: var(--bs-gray-400) !important; }

/* Página de visualização do curso */
.course-name-preview-page{ font-size: 1.2rem; }
.class-name-preview-page{ font-size: 1.1rem; }

/* Tabela com scroll */
.card-body .table-responsive.col-md-12{
  max-height: 70vh;
  overflow-y: auto;
}

/* Ícones (um pouco mais fortes, sem exagero) */
.bi::before, [class*=" bi-"]::before, [class^="bi-"]::before{
  font-weight: 700 !important;
  font-size: 1.15rem !important;
}

/* Checkboxes */
.form-check-input{
  border: 1px solid var(--app-border) !important;
}
.form-check.form-check-solid .form-check-input:not(:checked){
  background-color: var(--app-input-bg) !important;
}

/* Utilitários */
.no-shadow{
  border: 0 !important;
  box-shadow: none !important;
}
.content{ padding: 5px 0; }
.custom-img-size{ width: 150px; height: 150px; object-fit: cover; }
.plyr--video{ height: 70vh; }
.image-input-wrapper{ cursor: pointer; }
.alert-primary{ margin-top: 15px; }
.accordion-item{ margin: 15px 0; }
.type-user-field .fv-row{ margin: 1rem 0 !important; }

/* Tabelas */
.table > thead{ position: sticky; top: 0; z-index: 1; }
.table > :not(caption) > * > *{ padding: 0.25rem 0.75rem; }
td{ align-content: center; }
td .text-start.text-muted{ color: var(--app-muted) !important; }
th{
  font-size: 0.95rem !important;
  background-color: var(--bs-gray-200) !important;
  vertical-align: middle;
}

/* Scrollbar (onde suportado) */
main, span, ol, ul, pre, div{ scrollbar-color: #cccccc transparent; }
main:hover, span:hover, ol:hover, ul:hover, pre:hover, div:hover{ scrollbar-color: #9aa3b2 transparent; }

/* Modal (não forçar max-content globalmente — quebra responsivo) */
.modal{ --bs-modal-width: 800px; }
/* se você tinha max-content por algum motivo, cria uma classe e aplica só no modal específico */


/* ========================================================================================
   3) INTERAÇÃO (FOCUS/HOVER) — aqui tá o “pulo do gato”
   ======================================================================================== */

/* Base dos campos */
.form-control,
.form-select,
textarea,
input[type="text"], input[type="email"], input[type="number"]{
  border-color: var(--app-border) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
}

/* “Solid” padronizado (resolve campos com fundo diferente) */
.form-control.form-control-solid,
.form-select.form-select-solid{
  background-color: var(--app-input-bg) !important;
  border-color: var(--app-border-soft) !important;
}

/* Hover: nada de glow, só um “toque” */
.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled):not([readonly]),
textarea:hover:not(:disabled):not([readonly]){
  background-color: var(--app-input-bg-hover) !important;
  border-color: var(--app-border) !important;
}

/* Focus: ring suave e consistente */
.form-control:focus,
.form-select:focus,
textarea:focus,
input[type="text"]:focus, input[type="email"]:focus, input[type="number"]:focus{
  border-color: var(--app-primary) !important;
  box-shadow: 0 0 0 .25rem var(--app-focus-ring) !important;
  outline: none !important;
  background-color: var(--app-surface) !important; /* no foco fica “limpo” pra leitura */
}

/* Botões: ring só no foco (sem glow no hover) */
.btn:focus,
.btn:focus-visible,
button:focus,
button:focus-visible{
  box-shadow: 0 0 0 .25rem var(--app-focus-ring) !important;
  outline: none !important;
}

/* Disabled/readonly consistentes */
input[readonly], input[disabled],
textarea[readonly], textarea[disabled],
select[disabled]{
  background: color-mix(in srgb, var(--app-input-bg) 80%, var(--app-surface) 20%) !important;
  color: var(--app-muted) !important;
  opacity: 1 !important;
}


/* ========================================================================================
   4) CAMPOS OCULTOS (mantido e organizado)
   ======================================================================================== */

.page-box-language-field,
.page-box-file-field,
.page-course-document-field,
.codee-field,
.page-box-quiz-uploads,
.page-box-content-quiz,
.member-field,
.ecommerce-client-field,
.author-field,
.job-post-field,
.card-field,
.mi-field,
.skills-labels-flags-field,
.technical-supervisor2-field,
.course-form-code-field,
.finance-medicao-field,
.cart-form-field-hide{
  display: none !important;
}


/* ========================================================================================
   5) LIGHT MODE (cards/caixas)
   ======================================================================================== */

[data-bs-theme="light"] .page-box-content,
[data-bs-theme="light"] .page-content-box,
[data-bs-theme="light"] .page-box-uploads,
[data-bs-theme="light"] .page-box-upload-fields,
[data-bs-theme="light"] .page-box-select-section-in-class,
[data-bs-theme="light"] .page-box-main-fields,
[data-bs-theme="light"] .page-box-certificate,
[data-bs-theme="light"] .page-box-external-video,
[data-bs-theme="light"] .page-box-instructors,
[data-bs-theme="light"] .page-box-product-selected,
[data-bs-theme="light"] .page-box-signature,
[data-bs-theme="light"] .page-box-signer-fields,
[data-bs-theme="light"] .page-box-instructors-fields{
  background: var(--app-surface) !important;
  border: 1px solid var(--app-border-soft);
  box-shadow: 0 6px 32px rgba(90, 78, 131, 0.10) !important;
  padding: 20px;
  margin: 10px 0 2rem 0;
  border-radius: 10px;
}

/* Card geral */
[data-bs-theme="light"] .card{
  background: var(--app-surface) !important;
  border: 1px solid var(--app-border-soft);
  box-shadow: 0 6px 32px rgba(90, 78, 131, 0.08);
  border-radius: 10px;
  margin-bottom: 2rem;
}

/* Header do card mais suave (o cinza forte dá “cara de pesado”) */
[data-bs-theme="light"] .card .card-header{
  background-color: color-mix(in srgb, var(--app-surface) 80%, var(--app-page-bg) 20%) !important;
}

/* Accordion */
[data-bs-theme="light"] .accordion-item{ border-color: var(--bs-gray-300); }
[data-bs-theme="light"] .accordion-button{ background-color: var(--bs-gray-100); }
[data-bs-theme="light"] .accordion-button:not(.collapsed){
  background-color: var(--bs-gray-200);
  border-bottom-color: var(--bs-gray-300);
}

/* Tabs */
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link{
  color: var(--app-primary) !important;
  border-color: #ece3ff #ece3ff #fff;
  background: #f9f6ff !important;
  font-weight: 700;
}

/* Checkbox checked */
.form-check-input:checked{
  background-color: var(--app-primary);
  border-color: var(--app-primary);
  box-shadow: 0 0 0 0.1rem rgba(141,74,255,0.25);
}

/* Títulos de seção */
.section-title{
  color: var(--app-primary);
  font-size: 1.18rem;
  font-weight: 700;
  margin: 2rem 0 0.8rem 0;
  letter-spacing: 0.01em;
}
hr.section-divider{
  border: none;
  border-top: 2px dashed #ece3ff;
  margin: 2.5rem 0;
}

/* Botões principais */
.btn-primary, .btn-save, .btn-download{
  background: linear-gradient(90deg, var(--app-primary) 0%, var(--app-primary-2) 100%);
  border: none;
  color: #fff !important;
  font-weight: 700;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(141,74,255,0.10);
  transition: filter 0.2s, box-shadow 0.2s;
}
.btn-primary:hover, .btn-save:hover, .btn-download:hover{
  filter: brightness(1.03);
  box-shadow: 0 4px 20px rgba(99,124,255,0.16);
}


/* ========================================================================================
   6) DARK MODE (mantido, mas alinhado com tokens)
   ======================================================================================== */

[data-bs-theme="dark"] .card{
  background: var(--app-surface-soft) !important;
  border: 1px solid var(--app-border);
  box-shadow: 0 4px 24px rgba(0,0,0,0.30);
  border-radius: 10px;
  margin-bottom: 2rem;
}

[data-bs-theme="dark"] .form-control.form-control-solid,
[data-bs-theme="dark"] .form-select.form-select-solid{
  background-color: var(--app-input-bg) !important;
  border-color: var(--app-border-soft) !important;
  color: #e9e9e9 !important;
}

[data-bs-theme="dark"] .accordion-item{ border-color: var(--app-border); }
[data-bs-theme="dark"] .accordion-button{ background-color: var(--app-input-bg); }
[data-bs-theme="dark"] .accordion-button:not(.collapsed){
  background-color: var(--app-input-bg-hover);
  border-bottom-color: var(--app-border);
  color: var(--bs-accordion-btn-color);
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active,
[data-bs-theme="dark"] .nav-tabs .nav-item.show .nav-link{
  color: var(--app-primary) !important;
  border-color: var(--app-primary) var(--app-primary) var(--app-surface);
  background: var(--app-surface) !important;
  font-weight: 700;
}

[data-bs-theme="dark"] .section-title{ color: var(--app-primary); }
[data-bs-theme="dark"] hr.section-divider{
  border: none;
  border-top: 2px dashed rgba(179,147,253,0.25);
  margin: 2.5rem 0;
}


/* ========================================================================================
   7) AUTH / BACKGROUNDS (mantido)
   ======================================================================================== */

.auth-page-color{ background-color: #16a79b !important; }
.auth-bg-image{
  background-image: url(https://d3j50bikzu4vbt.cloudfront.net/codice/1/cGWxROtBdG14ghWbeLbaIDhuhiMg5DfFNlc9Mw1q.jpg);
  background-size: cover;
}
.auth-user-form{
  background-color: rgba(255,255,255,0.91);
  border-radius: 4px;
}
.role-checkbox-4, .role-checkbox-5, .role-checkbox-6{ display:none; }


/* ========================================================================================
   8) OUTROS AJUSTES (mantidos e organizados)
   ======================================================================================== */

.progress.progress-sm{ height: 16px; }

.menu.menu-sub.menu-sub-dropdown.menu-column.menu-rounded.menu-gray-800.menu-state-bg.menu-state-color.fw-semibold.py-4.fs-6.w-275px{
  width: auto !important;
}
.dropdown-menu.show{ transform: none !important; }

.page-box-certificatex,
#kt_post .container-xxl .row .col-12 input:nth-child(1),
.general-shadow{
  box-shadow: 0rem 0rem 2rem rgb(59 58 58 / 33%) !important;
}

/* Setas mover aula (hover discreto) */
.bi-chevron-up::before{ padding: 1px; }
.bi-chevron-up:hover::before{
  content: "\f286";
  padding: 1px;
  background-color: #dbdbdb;
  border-radius: 4px;
  color: black;
  font-weight: 900 !important;
}
.bi-chevron-down::before{ content: "\f282"; padding: 1px; }
.bi-chevron-down:hover::before{
  content: "\f282";
  padding: 1px;
  background-color: #dbdbdb;
  border-radius: 4px;
  color: black;
  font-weight: 900 !important;
}
/* ========================================================================================
   DOWNLOAD ("botão verde")
   ======================================================================================== */

/* Tokens do verde (light/dark) */
[data-bs-theme="light"]{
  --app-success-1: #29ef65;
  --app-success-2: #03753e;
  --app-success-ring: rgba(41, 239, 101, 0.22);
  --app-success-shadow: rgba(77, 215, 121, 0.23);
}

[data-bs-theme="dark"]{
  --app-success-1: #2bdc6a;
  --app-success-2: #0b7a45;
  --app-success-ring: rgba(43, 220, 106, 0.18);
  --app-success-shadow: rgba(77, 215, 121, 0.18);
}

/* 1) Caso o download seja um LINK com text-success (o mais comum no teu CSS antigo) */
a.text-success[href*="download"],
a.text-success[download],
a.text-success[target="_blank"]{
  background: linear-gradient(90deg, var(--app-success-1) 0%, var(--app-success-2) 100%) !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: 8px 18px !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5em !important;
  text-decoration: none !important;
  box-shadow: 0 2px 10px rgba(77, 215, 121, 0.14), 0 1.5px 6px rgba(0, 123, 60, 0.10) !important;
  transition: background 0.22s, box-shadow 0.17s, filter 0.13s, transform 0.13s !important;
}

a.text-success[href*="download"]:hover,
a.text-success[download]:hover,
a.text-success[target="_blank"]:hover{
  background: linear-gradient(90deg, var(--app-success-2) 0%, var(--app-success-1) 100%) !important;
  box-shadow: 0 4px 22px var(--app-success-shadow), 0 2px 8px rgba(0, 123, 60, 0.16) !important;
  filter: brightness(1.11) !important;
  transform: translateY(-2px) scale(1.04) !important;
  color: #fff !important;
}

a.text-success[href*="download"]:active,
a.text-success[download]:active,
a.text-success[target="_blank"]:active{
  filter: brightness(0.97) !important;
  transform: scale(0.98) !important;
}

/* Ícone dentro do link */
a.text-success[href*="download"] i,
a.text-success[download] i,
a.text-success[target="_blank"] i{
  color: #eafff1 !important;
  font-size: 1.3em !important;
  margin-right: 6px !important;
}

/* 2) Caso o download seja um BOTÃO com classe .btn-download (no CSS novo isso tava roxo) */
.btn-download{
  background: linear-gradient(90deg, var(--app-success-1) 0%, var(--app-success-2) 100%) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 10px rgba(77, 215, 121, 0.14), 0 1.5px 6px rgba(0, 123, 60, 0.10) !important;
  transition: background 0.22s, box-shadow 0.17s, filter 0.13s, transform 0.13s !important;
}

.btn-download:hover{
  background: linear-gradient(90deg, var(--app-success-2) 0%, var(--app-success-1) 100%) !important;
  box-shadow: 0 4px 22px var(--app-success-shadow), 0 2px 8px rgba(0, 123, 60, 0.16) !important;
  filter: brightness(1.10) !important;
  transform: translateY(-2px) scale(1.03) !important;
}

.btn-download:active{
  filter: brightness(0.97) !important;
  transform: scale(0.98) !important;
}

/* Bordas em volta dos ícones de pasta onde arquivos, vídeos e etc são arquivoados */

/* Tela de Detalhes do curso - Àrea de exigir assinatura dos instrutores */
.digital-signer-checkbox .fv-row{
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}
/* Tela de do curso - aba progresso do aluno
.table {
        --bs-table-border-color: var(--bs-gray-300);
}
.table > :not(caption) > * > * {
        padding: 1rem 0.75rem;
}
.progress, .progress-stacked {
        --bs-progress-height: 1.9rem;
        --bs-progress-font-size: 0.9rem;
        --bs-progress-bg: var(--bs-gray-600);
        --bs-progress-border-radius: 7px;
}*/