/* ==================================================================== */
/* Identidade visual da aplicação Kombit                                 */
/* ==================================================================== */
/*
 * Este arquivo concentra o padrão visual reutilizável da Gestão.
 * As variáveis --brand/--brand2/--brand3/--brand-contrast podem ser
 * sobrescritas pelo contexto da Controladora no base.html.
 *
 * No contexto global/SisAdmin, os valores abaixo formam a identidade
 * padrão Kombit.
 */

:root {
  --brand: #17643b;
  --brand2: #2b8a57;
  --brand3: #0f4d2d;
  --brand-contrast: #ffffff;

  --ink: #173b29;
  --muted: #68796f;
  --soft: #f3f8f4;
  --soft2: #e7f2ea;
  --border: #dfeae2;
  --accent: #c8a951;

  --app-bg: #f5f8f6;
  --surface: #ffffff;
  --shadow-soft: 0 8px 25px rgba(23, 59, 41, 0.05);

  --btn-action-height: 38px;
  --btn-action-padding-x: .85rem;
}

/* -------------------------------------------------------------------- */
/* Base                                                                  */
/* -------------------------------------------------------------------- */

body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  color: var(--ink);
  background: var(--app-bg);
}

a {
  color: var(--brand);
}

a:hover {
  color: var(--brand3);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--brand2);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand2) 15%, transparent);
}

/* -------------------------------------------------------------------- */
/* Topbar / identidade                                                   */
/* -------------------------------------------------------------------- */

.navbar {
  background: var(--brand);
  border-bottom: 1px solid var(--brand);
  color: var(--brand-contrast);
}

.navbar-brand {
  color: var(--brand-contrast);
  font-weight: 800;
}

.navbar-brand:hover,
.navbar-brand:focus,
.navbar-brand span,
.brand-mark {
  color: var(--brand-contrast);
}

.controladora-logo {
  max-width: 180px;
  max-height: 48px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.tecnologia-kombit {
  font-size: .7rem;
  color: var(--brand-contrast);
  opacity: .72;
  white-space: nowrap;
}

.navbar .btn-light {
  color: var(--brand-contrast);
  background: transparent;
  border-color: transparent;
}

.navbar .btn-light:hover,
.navbar .btn-light:focus,
.navbar .btn-light.show {
  color: var(--brand-contrast);
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .12);
}

/* -------------------------------------------------------------------- */
/* Navegação lateral                                                     */
/* -------------------------------------------------------------------- */

.contexto-topo {
  font-size: .8125rem;
  color: #6a7079;
  font-weight: 400;
}

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  min-height: calc(100vh - 73px);
}

.menu-title {
  margin: .7rem 0 .35rem;
  color: #84958b;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-align: left;
}

/*
 * Primeiro nível do menu:
 * Início, SISADMIN, CONTROLADORA, EMPRESA, PERGUNTAS FREQUENTES
 * e futuros contextos/entradas raiz.
 */
.sidebar > .nav-link,
.offcanvas-body > .nav-link {
  color: #466054;
  border-radius: .7rem;
  padding: .65rem .5rem .65rem .35rem;
  text-align: left;
}

.sidebar .nav-link,
.offcanvas-body .nav-link {
  color: #466054;
  border-radius: .7rem;
}

.sidebar .nav-link:hover,
.offcanvas-body .nav-link:hover {
  background: var(--soft);
  color: var(--brand);
}

.sidebar .nav-link.active,
.offcanvas-body .nav-link.active {
  background: var(--soft2);
  color: var(--brand);
  font-weight: 700;
}

.sidebar i,
.offcanvas-body i {
  width: 24px;
  display: inline-block;
  text-align: center;
}

/*
 * Primeiro nível interno de cada contexto:
 * Gestão de usuários, Notícias, FAQ, Empresas etc.
 *
 * Todos usam o mesmo padrão visual forte.
 */
.submenu > .menu-title {
  display: block;
  padding-left: 1.65rem;
  padding-right: .5rem;
  font-weight: 800;
  color: #84958b;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/*
 * Nível seguinte.
 * Mantém o estilo atual, mais leve e um pouco mais recuado.
 */
.submenu .nav-link {
  padding: .48rem .7rem .48rem 2.25rem;
  font-size: .9rem;
  font-weight: 400;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
}

.main {
  padding: 1.5rem;
}

/* -------------------------------------------------------------------- */
/* Superfícies                                                           */
/* -------------------------------------------------------------------- */

.card-app {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: var(--shadow-soft);
}

.card-app .table th {
  background: #f8fbf8;
  color: var(--muted);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* -------------------------------------------------------------------- */
/* Botões                                                               */
/* -------------------------------------------------------------------- */
/*
 * Ações afirmativas/operacionais:
 * Buscar, Salvar, Gravar, Criar, Confirmar, Atualizar etc.
 *
 * Usar .btn-app-action. A cor acompanha exatamente a topbar do contexto.
 */
.btn-app-action {
  --bs-btn-color: var(--brand-contrast);
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: var(--brand-contrast);
  --bs-btn-hover-bg: var(--brand3);
  --bs-btn-hover-border-color: var(--brand3);
  --bs-btn-focus-shadow-rgb: 23, 100, 59;
  --bs-btn-active-color: var(--brand-contrast);
  --bs-btn-active-bg: var(--brand3);
  --bs-btn-active-border-color: var(--brand3);
  --bs-btn-disabled-color: var(--brand-contrast);
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);

  min-height: var(--btn-action-height);
  padding-left: var(--btn-action-padding-x);
  padding-right: var(--btn-action-padding-x);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  gap: .25rem;
}

/*
 * Ações neutras/cancelamento continuam usando as classes Bootstrap atuais
 * (ex.: btn-outline-secondary). Esta classe pode ser adicionada para garantir
 * a mesma geometria quando estiverem lado a lado com .btn-app-action.
 */
.btn-app-neutral {
  min-height: var(--btn-action-height);
  padding-left: var(--btn-action-padding-x);
  padding-right: var(--btn-action-padding-x);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  gap: .25rem;
}

/* Contêiner padrão para manter ações verticalmente alinhadas. */
.app-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}

td .app-actions,
th .app-actions {
  min-height: var(--btn-action-height);
}

/*
 * Compatibilidade visual com telas ainda não migradas.
 * btn-success continua coerente com a marca, mas novas ações afirmativas
 * devem usar .btn-app-action para explicitar a semântica.
 */
.btn-success {
  background-color: var(--brand);
  border-color: var(--brand);
}

.btn-success:hover,
.btn-success:focus {
  background-color: var(--brand3);
  border-color: var(--brand3);
}

.btn-outline-success {
  color: var(--brand);
  border-color: var(--brand);
}

.btn-outline-success:hover {
  color: var(--brand-contrast);
  background-color: var(--brand);
  border-color: var(--brand);
}

/* -------------------------------------------------------------------- */
/* Validação                                                             */
/* -------------------------------------------------------------------- */

.campo-invalido {
  border-color: #b3261e !important;
}

.campo-valido {
  border-color: var(--brand) !important;
}

/* -------------------------------------------------------------------- */
/* Responsividade                                                       */
/* -------------------------------------------------------------------- */

@media (max-width: 991px) {
  .sidebar {
    min-height: auto;
    border-right: 0;
  }

  .main {
    padding: 1rem;
  }
}


/* -------------------------------------------------------------------------
   Modal de confirmação reutilizável
   ------------------------------------------------------------------------- */
.app-confirm-modal .modal-content {
  border: 0;
  border-radius: 0.9rem;
  overflow: hidden;
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.22);
}

.app-confirm-modal .modal-header {
  background: var(--brand);
  color: var(--brand-contrast);
  border-bottom: 0;
  padding: 1rem 1.25rem;
}

.app-confirm-modal .modal-title {
  font-size: 1.05rem;
  font-weight: 600;
}

.app-confirm-modal .btn-close {
  filter: invert(1) grayscale(1) brightness(2);
  opacity: 0.8;
}

.app-confirm-modal .btn-close:hover,
.app-confirm-modal .btn-close:focus {
  opacity: 1;
}

.app-confirm-modal .modal-body {
  padding: 1.25rem;
  color: var(--text, #212529);
  background: var(--surface, #ffffff);
  line-height: 1.5;
}

.app-confirm-modal .modal-footer {
  padding: 0.9rem 1.25rem 1.15rem;
  background: var(--surface, #ffffff);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.app-confirm-modal .btn-confirm {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.app-confirm-modal .btn-confirm-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-contrast);
}

.app-confirm-modal .btn-confirm-primary:hover,
.app-confirm-modal .btn-confirm-primary:focus {
  background: var(--brand3);
  border-color: var(--brand3);
  color: var(--brand-contrast);
}

.app-confirm-modal .btn-confirm-danger {
  background: #b42318;
  border-color: #b42318;
  color: #ffffff;
}

.app-confirm-modal .btn-confirm-danger:hover,
.app-confirm-modal .btn-confirm-danger:focus {
  background: #8f1d14;
  border-color: #8f1d14;
  color: #ffffff;
}

/* -------------------------------------------------------------------- */
/* Consulta de FAQ: contraste entre pergunta e resposta                  */
/* -------------------------------------------------------------------- */
.faq-consulta .faq-consulta-item {
  border: 1px solid var(--border);
  border-radius: .65rem;
  overflow: hidden;
  margin-bottom: .85rem;
  background-color: var(--surface);
  box-shadow: var(--shadow-soft);
}

.faq-consulta .faq-consulta-pergunta {
  background-color: var(--soft);
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.45;
  padding: 1rem 1.15rem;
  gap: .35rem;
}

.faq-consulta .faq-consulta-pergunta:not(.collapsed) {
  background-color: var(--soft2);
  color: var(--ink);
  box-shadow: inset 0 -1px 0 var(--border);
}

.faq-consulta .faq-consulta-pergunta:focus {
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand2) 20%, transparent);
  z-index: 1;
}

.faq-consulta .faq-consulta-pergunta::after {
  flex-shrink: 0;
}

.faq-consulta .faq-consulta-resposta {
  white-space: pre-line;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  padding: 1.1rem 1.2rem 1.35rem;
  background-color: var(--surface);
  color: var(--ink);
}

/* Gestão de FAQ: textos longos não podem deslocar os botões de ação. */
.faq-gestao-table {
  table-layout: fixed;
  width: 100%;
  min-width: 860px;
}
.faq-gestao-table .faq-col-pergunta { width: 36%; }
.faq-gestao-table .faq-col-categoria { width: 17%; }
.faq-gestao-table .faq-col-situacao { width: 13%; }
.faq-gestao-table .faq-col-ordem { width: 8%; }
.faq-gestao-table .faq-col-data { width: 14%; }
.faq-gestao-table .faq-col-acoes { width: 12%; }
.faq-gestao-table .faq-pergunta-texto {
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal;
}
.faq-gestao-table .faq-acoes { white-space: nowrap; }
.faq-gestao-table .faq-acoes form { margin: 0; }