﻿/* 
   GHC - Manual de Identidade Visual v1.4
   Bootstrap Custom Color Palette 
*/

/*
 * TABELA DE CONTRASTE (quem usa o quê como fundo → qual texto/borda usar)
 * ─────────────────────────────────────────────────────────────────────────
 * ESCURAS  → texto/borda CLARO (white)
 *   turquoise  #00767d   RGB 0,118,125
 *   darkgreen  #00422f   RGB 0,66,47
 *
 * CLARA/INTERMEDIÁRIA → texto/borda ESCURO (darkgreen)
 *   mint       #84c9bd   RGB 132,201,189
 *
 * CLARAS → texto/borda ESCURO (dark ou muted)
 *   white      #ffffff   RGB 255,255,255
 *   lightgrey  #c6c6c6   RGB 198,198,198
 *   beige      #e0bfa4   RGB 224,191,164
 *
 * SEMÂNTICA → texto/borda CLARO (white)
 *   red        #ee2d26   RGB 238,45,38
 */

:root {
    /* === VALORES HEX === */
    --ghc-turquoise:  #00767d;
    --ghc-mint:       #84c9bd;
    --ghc-white:      #ffffff;
    --ghc-beige:      #e0bfa4;
    --ghc-lightgrey:  #c6c6c6;
    --ghc-darkgreen:  #00422f;
    --ghc-red:        #ee2d26;

    /* === VALORES RGB (para rgba() e opacity) === */
    --ghc-turquoise-rgb:  0, 118, 125;
    --ghc-mint-rgb:       132, 201, 189;
    --ghc-white-rgb:      255, 255, 255;
    --ghc-beige-rgb:      224, 191, 164;
    --ghc-lightgrey-rgb:  198, 198, 198;
    --ghc-darkgreen-rgb:  0, 66, 47;
    --ghc-red-rgb:        238, 45, 38;

    /* === COR DE TEXTO CONTRASTANTE POR FUNDO (WCAG AA) ===
     * Fundos ESCUROS  → texto branco
     * Fundos CLAROS   → texto escuro
     */
    --ghc-turquoise-contrast:  #ffffff;
    --ghc-mint-contrast:       #00422f;
    --ghc-white-contrast:      #00422f;
    --ghc-beige-contrast:      #4b3621;
    --ghc-lightgrey-contrast:  #333333;
    --ghc-darkgreen-contrast:  #ffffff;
    --ghc-red-contrast:        #ffffff;

    /* === HOVER (versão escurecida ~10%) === */
    --ghc-turquoise-hover:    #005a5f;
    --ghc-mint-hover:         #6fb1a5;
    --ghc-white-hover:        #e9ecef;
    --ghc-beige-hover:        #c9ab92;
    --ghc-lightgrey-hover:    #a8a8a8;
    --ghc-darkgreen-hover:    #002d20;
    --ghc-red-hover:          #c4241f;

    /* === BORDA CONTRASTANTE POR COR ===
     * Fundos escuros  → borda clara/branca semitransparente
     * Fundos claros   → borda escura semitransparente
     */
    --ghc-turquoise-border:   rgba(255,255,255,0.35);
    --ghc-mint-border:        rgba(0,66,47,0.35);
    --ghc-white-border:       #c6c6c6;
    --ghc-beige-border:       #c9ab92;
    --ghc-lightgrey-border:   #aaaaaa;
    --ghc-darkgreen-border:   rgba(255,255,255,0.35);
    --ghc-red-border:         rgba(255,255,255,0.35);

    /* === ALIASES Bootstrap-compatíveis (bs-ghc-*) para var(--bs-ghc-*) === */
    --bs-ghc-turquoise:  #00767d;
    --bs-ghc-mint:       #84c9bd;
    --bs-ghc-white:      #ffffff;
    --bs-ghc-beige:      #e0bfa4;
    --bs-ghc-lightgrey:  #c6c6c6;
    --bs-ghc-darkgreen:  #00422f;
    --bs-ghc-red:        #ee2d26;

    /*
     * Sobrescreve variáveis nativas do Bootstrap 5 para que TODOS os
     * componentes padrão (focus ring, form-switch, links, spinners,
     * pagination active, list-group active, etc.) usem o turquesa GHC.
     * RGB de #00767d = 0, 118, 125
     */
    --bs-primary:             #00767d;
    --bs-primary-rgb:         0, 118, 125;
    --bs-link-color:          #00767d;
    --bs-link-color-rgb:      0, 118, 125;
    --bs-link-hover-color:    #005a5f;
    --bs-link-hover-color-rgb: 0, 90, 95;
    --bs-focus-ring-color:    rgba(0, 118, 125, 0.25);
}

/* ═══════════════════════════════════════════════════════════
   01. TEXT COLORS  (text-ghc-*)
   ═══════════════════════════════════════════════════════════ */
.text-ghc-turquoise  { color: var(--ghc-turquoise)  !important; }
.text-ghc-mint       { color: var(--ghc-mint)       !important; }
.text-ghc-white      { color: var(--ghc-white)      !important; }
.text-ghc-beige      { color: var(--ghc-beige)      !important; }
.text-ghc-lightgrey  { color: var(--ghc-lightgrey)  !important; }
.text-ghc-darkgreen  { color: var(--ghc-darkgreen)  !important; }
.text-ghc-red        { color: var(--ghc-red)        !important; }

/* ═══════════════════════════════════════════════════════════
   02. BACKGROUND COLORS  (bg-ghc-*)
   ═══════════════════════════════════════════════════════════ */
.bg-ghc-turquoise  { background-color: rgba(var(--ghc-turquoise-rgb),  var(--bs-bg-opacity, 1)) !important; }
.bg-ghc-mint       { background-color: rgba(var(--ghc-mint-rgb),       var(--bs-bg-opacity, 1)) !important; }
.bg-ghc-white      { background-color: rgba(var(--ghc-white-rgb),      var(--bs-bg-opacity, 1)) !important; }
.bg-ghc-beige      { background-color: rgba(var(--ghc-beige-rgb),      var(--bs-bg-opacity, 1)) !important; }
.bg-ghc-lightgrey  { background-color: rgba(var(--ghc-lightgrey-rgb),  var(--bs-bg-opacity, 1)) !important; }
.bg-ghc-darkgreen  { background-color: rgba(var(--ghc-darkgreen-rgb),  var(--bs-bg-opacity, 1)) !important; }
.bg-ghc-red        { background-color: rgba(var(--ghc-red-rgb),        var(--bs-bg-opacity, 1)) !important; }

/* ═══════════════════════════════════════════════════════════
   03. TEXT-BG  (text-bg-ghc-*)
   Define fundo + texto contrastante garantindo legibilidade.
   Padrão idêntico ao .text-bg-primary do Bootstrap 5.
   ═══════════════════════════════════════════════════════════ */
.text-bg-ghc-turquoise { background-color: rgba(var(--ghc-turquoise-rgb), var(--bs-bg-opacity, 1)) !important; color: var(--ghc-turquoise-contrast)  !important; }
.text-bg-ghc-mint      { background-color: rgba(var(--ghc-mint-rgb),      var(--bs-bg-opacity, 1)) !important; color: var(--ghc-mint-contrast)       !important; }
.text-bg-ghc-white     { background-color: rgba(var(--ghc-white-rgb),     var(--bs-bg-opacity, 1)) !important; color: var(--ghc-white-contrast)      !important; }
.text-bg-ghc-beige     { background-color: rgba(var(--ghc-beige-rgb),     var(--bs-bg-opacity, 1)) !important; color: var(--ghc-beige-contrast)      !important; }
.text-bg-ghc-lightgrey { background-color: rgba(var(--ghc-lightgrey-rgb), var(--bs-bg-opacity, 1)) !important; color: var(--ghc-lightgrey-contrast)  !important; }
.text-bg-ghc-darkgreen { background-color: rgba(var(--ghc-darkgreen-rgb), var(--bs-bg-opacity, 1)) !important; color: var(--ghc-darkgreen-contrast)  !important; }
.text-bg-ghc-red       { background-color: rgba(var(--ghc-red-rgb),       var(--bs-bg-opacity, 1)) !important; color: var(--ghc-red-contrast)        !important; }

/* ═══════════════════════════════════════════════════════════
   04. BUTTONS SOLID  (btn-ghc-*)
   Usa o mesmo padrão de propriedades locais --bs-btn-* do
   Bootstrap 5, garantindo que hover/focus/active/disabled
   sejam consistentes sem sobrescrever o engine do Bootstrap.
   ═══════════════════════════════════════════════════════════ */
.btn-ghc-turquoise {
    --bs-btn-color:              var(--ghc-turquoise-contrast);
    --bs-btn-bg:                 var(--ghc-turquoise);
    --bs-btn-border-color:       var(--ghc-turquoise);
    --bs-btn-hover-color:        var(--ghc-turquoise-contrast);
    --bs-btn-hover-bg:           var(--ghc-turquoise-hover);
    --bs-btn-hover-border-color: var(--ghc-turquoise-hover);
    --bs-btn-focus-shadow-rgb:   var(--ghc-turquoise-rgb);
    --bs-btn-active-color:       var(--ghc-turquoise-contrast);
    --bs-btn-active-bg:          var(--ghc-turquoise-hover);
    --bs-btn-active-border-color: var(--ghc-turquoise-hover);
    --bs-btn-disabled-color:     var(--ghc-turquoise-contrast);
    --bs-btn-disabled-bg:        var(--ghc-turquoise);
    --bs-btn-disabled-border-color: var(--ghc-turquoise);
}
.btn-ghc-mint {
    --bs-btn-color:              var(--ghc-mint-contrast);
    --bs-btn-bg:                 var(--ghc-mint);
    --bs-btn-border-color:       var(--ghc-mint);
    --bs-btn-hover-color:        var(--ghc-mint-contrast);
    --bs-btn-hover-bg:           var(--ghc-mint-hover);
    --bs-btn-hover-border-color: var(--ghc-mint-hover);
    --bs-btn-focus-shadow-rgb:   var(--ghc-mint-rgb);
    --bs-btn-active-color:       var(--ghc-mint-contrast);
    --bs-btn-active-bg:          var(--ghc-mint-hover);
    --bs-btn-active-border-color: var(--ghc-mint-hover);
    --bs-btn-disabled-color:     var(--ghc-mint-contrast);
    --bs-btn-disabled-bg:        var(--ghc-mint);
    --bs-btn-disabled-border-color: var(--ghc-mint);
}
.btn-ghc-beige {
    --bs-btn-color:              var(--ghc-beige-contrast);
    --bs-btn-bg:                 var(--ghc-beige);
    --bs-btn-border-color:       var(--ghc-beige);
    --bs-btn-hover-color:        var(--ghc-beige-contrast);
    --bs-btn-hover-bg:           var(--ghc-beige-hover);
    --bs-btn-hover-border-color: var(--ghc-beige-hover);
    --bs-btn-focus-shadow-rgb:   var(--ghc-beige-rgb);
    --bs-btn-active-color:       var(--ghc-beige-contrast);
    --bs-btn-active-bg:          var(--ghc-beige-hover);
    --bs-btn-active-border-color: var(--ghc-beige-hover);
    --bs-btn-disabled-color:     var(--ghc-beige-contrast);
    --bs-btn-disabled-bg:        var(--ghc-beige);
    --bs-btn-disabled-border-color: var(--ghc-beige);
}
.btn-ghc-lightgrey {
    --bs-btn-color:              var(--ghc-lightgrey-contrast);
    --bs-btn-bg:                 var(--ghc-lightgrey);
    --bs-btn-border-color:       var(--ghc-lightgrey);
    --bs-btn-hover-color:        var(--ghc-lightgrey-contrast);
    --bs-btn-hover-bg:           var(--ghc-lightgrey-hover);
    --bs-btn-hover-border-color: var(--ghc-lightgrey-hover);
    --bs-btn-focus-shadow-rgb:   var(--ghc-lightgrey-rgb);
    --bs-btn-active-color:       var(--ghc-lightgrey-contrast);
    --bs-btn-active-bg:          var(--ghc-lightgrey-hover);
    --bs-btn-active-border-color: var(--ghc-lightgrey-hover);
    --bs-btn-disabled-color:     var(--ghc-lightgrey-contrast);
    --bs-btn-disabled-bg:        var(--ghc-lightgrey);
    --bs-btn-disabled-border-color: var(--ghc-lightgrey);
}
.btn-ghc-darkgreen {
    --bs-btn-color:              var(--ghc-darkgreen-contrast);
    --bs-btn-bg:                 var(--ghc-darkgreen);
    --bs-btn-border-color:       var(--ghc-darkgreen);
    --bs-btn-hover-color:        var(--ghc-darkgreen-contrast);
    --bs-btn-hover-bg:           var(--ghc-darkgreen-hover);
    --bs-btn-hover-border-color: var(--ghc-darkgreen-hover);
    --bs-btn-focus-shadow-rgb:   var(--ghc-darkgreen-rgb);
    --bs-btn-active-color:       var(--ghc-darkgreen-contrast);
    --bs-btn-active-bg:          var(--ghc-darkgreen-hover);
    --bs-btn-active-border-color: var(--ghc-darkgreen-hover);
    --bs-btn-disabled-color:     var(--ghc-darkgreen-contrast);
    --bs-btn-disabled-bg:        var(--ghc-darkgreen);
    --bs-btn-disabled-border-color: var(--ghc-darkgreen);
}
.btn-ghc-red {
    --bs-btn-color:              var(--ghc-red-contrast);
    --bs-btn-bg:                 var(--ghc-red);
    --bs-btn-border-color:       var(--ghc-red);
    --bs-btn-hover-color:        var(--ghc-red-contrast);
    --bs-btn-hover-bg:           var(--ghc-red-hover);
    --bs-btn-hover-border-color: var(--ghc-red-hover);
    --bs-btn-focus-shadow-rgb:   var(--ghc-red-rgb);
    --bs-btn-active-color:       var(--ghc-red-contrast);
    --bs-btn-active-bg:          var(--ghc-red-hover);
    --bs-btn-active-border-color: var(--ghc-red-hover);
    --bs-btn-disabled-color:     var(--ghc-red-contrast);
    --bs-btn-disabled-bg:        var(--ghc-red);
    --bs-btn-disabled-border-color: var(--ghc-red);
}

/* ═══════════════════════════════════════════════════════════
   05. BUTTONS OUTLINE  (btn-outline-ghc-*)
   Fundo transparente, borda e texto com a cor GHC.
   No hover: fundo preenchido com texto contrastante.
   ═══════════════════════════════════════════════════════════ */
.btn-outline-ghc-turquoise {
    --bs-btn-color:              var(--ghc-turquoise);
    --bs-btn-bg:                 transparent;
    --bs-btn-border-color:       var(--ghc-turquoise);
    --bs-btn-hover-color:        var(--ghc-turquoise-contrast);
    --bs-btn-hover-bg:           var(--ghc-turquoise);
    --bs-btn-hover-border-color: var(--ghc-turquoise);
    --bs-btn-focus-shadow-rgb:   var(--ghc-turquoise-rgb);
    --bs-btn-active-color:       var(--ghc-turquoise-contrast);
    --bs-btn-active-bg:          var(--ghc-turquoise);
    --bs-btn-active-border-color: var(--ghc-turquoise);
    --bs-btn-disabled-color:     var(--ghc-turquoise);
    --bs-btn-disabled-bg:        transparent;
    --bs-btn-disabled-border-color: var(--ghc-turquoise);
    --bs-gradient: none;
}
.btn-outline-ghc-mint {
    --bs-btn-color:              var(--ghc-mint);
    --bs-btn-bg:                 transparent;
    --bs-btn-border-color:       var(--ghc-mint);
    --bs-btn-hover-color:        var(--ghc-mint-contrast);
    --bs-btn-hover-bg:           var(--ghc-mint);
    --bs-btn-hover-border-color: var(--ghc-mint);
    --bs-btn-focus-shadow-rgb:   var(--ghc-mint-rgb);
    --bs-btn-active-color:       var(--ghc-mint-contrast);
    --bs-btn-active-bg:          var(--ghc-mint);
    --bs-btn-active-border-color: var(--ghc-mint);
    --bs-btn-disabled-color:     var(--ghc-mint);
    --bs-btn-disabled-bg:        transparent;
    --bs-btn-disabled-border-color: var(--ghc-mint);
    --bs-gradient: none;
}
.btn-outline-ghc-beige {
    --bs-btn-color:              var(--ghc-beige-contrast);
    --bs-btn-bg:                 transparent;
    --bs-btn-border-color:       var(--ghc-beige);
    --bs-btn-hover-color:        var(--ghc-beige-contrast);
    --bs-btn-hover-bg:           var(--ghc-beige);
    --bs-btn-hover-border-color: var(--ghc-beige);
    --bs-btn-focus-shadow-rgb:   var(--ghc-beige-rgb);
    --bs-btn-active-color:       var(--ghc-beige-contrast);
    --bs-btn-active-bg:          var(--ghc-beige);
    --bs-btn-active-border-color: var(--ghc-beige);
    --bs-btn-disabled-color:     var(--ghc-beige-contrast);
    --bs-btn-disabled-bg:        transparent;
    --bs-btn-disabled-border-color: var(--ghc-beige);
    --bs-gradient: none;
}
.btn-outline-ghc-lightgrey {
    --bs-btn-color:              var(--ghc-lightgrey-contrast);
    --bs-btn-bg:                 transparent;
    --bs-btn-border-color:       var(--ghc-lightgrey);
    --bs-btn-hover-color:        var(--ghc-lightgrey-contrast);
    --bs-btn-hover-bg:           var(--ghc-lightgrey);
    --bs-btn-hover-border-color: var(--ghc-lightgrey);
    --bs-btn-focus-shadow-rgb:   var(--ghc-lightgrey-rgb);
    --bs-btn-active-color:       var(--ghc-lightgrey-contrast);
    --bs-btn-active-bg:          var(--ghc-lightgrey);
    --bs-btn-active-border-color: var(--ghc-lightgrey);
    --bs-btn-disabled-color:     var(--ghc-lightgrey-contrast);
    --bs-btn-disabled-bg:        transparent;
    --bs-btn-disabled-border-color: var(--ghc-lightgrey);
    --bs-gradient: none;
}
.btn-outline-ghc-darkgreen {
    --bs-btn-color:              var(--ghc-darkgreen);
    --bs-btn-bg:                 transparent;
    --bs-btn-border-color:       var(--ghc-darkgreen);
    --bs-btn-hover-color:        var(--ghc-darkgreen-contrast);
    --bs-btn-hover-bg:           var(--ghc-darkgreen);
    --bs-btn-hover-border-color: var(--ghc-darkgreen);
    --bs-btn-focus-shadow-rgb:   var(--ghc-darkgreen-rgb);
    --bs-btn-active-color:       var(--ghc-darkgreen-contrast);
    --bs-btn-active-bg:          var(--ghc-darkgreen);
    --bs-btn-active-border-color: var(--ghc-darkgreen);
    --bs-btn-disabled-color:     var(--ghc-darkgreen);
    --bs-btn-disabled-bg:        transparent;
    --bs-btn-disabled-border-color: var(--ghc-darkgreen);
    --bs-gradient: none;
}
.btn-outline-ghc-red {
    --bs-btn-color:              var(--ghc-red);
    --bs-btn-bg:                 transparent;
    --bs-btn-border-color:       var(--ghc-red);
    --bs-btn-hover-color:        var(--ghc-red-contrast);
    --bs-btn-hover-bg:           var(--ghc-red);
    --bs-btn-hover-border-color: var(--ghc-red);
    --bs-btn-focus-shadow-rgb:   var(--ghc-red-rgb);
    --bs-btn-active-color:       var(--ghc-red-contrast);
    --bs-btn-active-bg:          var(--ghc-red);
    --bs-btn-active-border-color: var(--ghc-red);
    --bs-btn-disabled-color:     var(--ghc-red);
    --bs-btn-disabled-bg:        transparent;
    --bs-btn-disabled-border-color: var(--ghc-red);
    --bs-gradient: none;
}

/* ═══════════════════════════════════════════════════════════
   06. BADGES  (badge-ghc-*)
   Mesmos pares de contraste definidos em :root.
   ═══════════════════════════════════════════════════════════ */
.badge-ghc-turquoise { background-color: var(--ghc-turquoise); color: var(--ghc-turquoise-contrast); }
.badge-ghc-mint      { background-color: var(--ghc-mint);      color: var(--ghc-mint-contrast); }
.badge-ghc-white     { background-color: var(--ghc-white);     color: var(--ghc-white-contrast);     border: 1px solid var(--ghc-lightgrey); }
.badge-ghc-beige     { background-color: var(--ghc-beige);     color: var(--ghc-beige-contrast); }
.badge-ghc-lightgrey { background-color: var(--ghc-lightgrey); color: var(--ghc-lightgrey-contrast); }
.badge-ghc-darkgreen { background-color: var(--ghc-darkgreen); color: var(--ghc-darkgreen-contrast); }
.badge-ghc-red       { background-color: var(--ghc-red);       color: var(--ghc-red-contrast); }

/* ═══════════════════════════════════════════════════════════
   07. BORDERS  (border-ghc-*)
   ═══════════════════════════════════════════════════════════ */
.border-ghc-turquoise { border-color: var(--ghc-turquoise)  !important; }
.border-ghc-mint      { border-color: var(--ghc-mint)       !important; }
.border-ghc-white     { border-color: var(--ghc-white)      !important; }
.border-ghc-beige     { border-color: var(--ghc-beige)      !important; }
.border-ghc-lightgrey { border-color: var(--ghc-lightgrey)  !important; }
.border-ghc-darkgreen { border-color: var(--ghc-darkgreen)  !important; }
.border-ghc-red       { border-color: var(--ghc-red)        !important; }

/* ═══════════════════════════════════════════════════════════
   08. ALERTS  (alert-ghc-*)
   Usa a mesma estrutura de variáveis locais --bs-alert-* do
   Bootstrap 5 para herdar padding, border-radius e demais
   propriedades do componente .alert automaticamente.
   ═══════════════════════════════════════════════════════════ */
.alert-ghc-turquoise {
    --bs-alert-color:        var(--ghc-turquoise-contrast);
    --bs-alert-bg:           var(--ghc-turquoise);
    --bs-alert-border-color: var(--ghc-turquoise-border);
    --bs-alert-link-color:   var(--ghc-turquoise-contrast);
}
.alert-ghc-mint {
    --bs-alert-color:        var(--ghc-mint-contrast);
    --bs-alert-bg:           var(--ghc-mint);
    --bs-alert-border-color: var(--ghc-mint-border);
    --bs-alert-link-color:   var(--ghc-mint-contrast);
}
.alert-ghc-beige {
    --bs-alert-color:        var(--ghc-beige-contrast);
    --bs-alert-bg:           var(--ghc-beige);
    --bs-alert-border-color: var(--ghc-beige-border);
    --bs-alert-link-color:   var(--ghc-beige-contrast);
}
.alert-ghc-lightgrey {
    --bs-alert-color:        var(--ghc-lightgrey-contrast);
    --bs-alert-bg:           var(--ghc-lightgrey);
    --bs-alert-border-color: var(--ghc-lightgrey-border);
    --bs-alert-link-color:   var(--ghc-lightgrey-contrast);
}
.alert-ghc-darkgreen {
    --bs-alert-color:        var(--ghc-darkgreen-contrast);
    --bs-alert-bg:           var(--ghc-darkgreen);
    --bs-alert-border-color: var(--ghc-darkgreen-border);
    --bs-alert-link-color:   var(--ghc-darkgreen-contrast);
}
.alert-ghc-red {
    --bs-alert-color:        var(--ghc-red-contrast);
    --bs-alert-bg:           var(--ghc-red);
    --bs-alert-border-color: var(--ghc-red-border);
    --bs-alert-link-color:   var(--ghc-red-contrast);
}

/* ═══════════════════════════════════════════════════════════
   09. DATATABLES — paginação, busca e info
   Sobrescreve os estilos nativos do DataTables para seguir
   a identidade visual GHC (turquoise + mint).

   DataTables 2.x + Bootstrap5 usa paginação Bootstrap nativa:
     ul.pagination > li.page-item > a.page-link
   Por isso, sobrescrevemos as variáveis CSS do componente
   Bootstrap pagination (--bs-pagination-*) dentro do
   contêiner DataTables, e mantemos os seletores legados
   (.paginate_button) para compatibilidade retroativa.
   ═══════════════════════════════════════════════════════════ */

/* --- Variáveis Bootstrap pagination redefinidas para o tema GHC ---
   O Bootstrap define --bs-pagination-* diretamente em .pagination,
   portanto é necessário sobrescrever no mesmo nível de especificidade. --- */
div.dt-container .pagination,
div.dt-container ul.pagination,
.dataTables_wrapper .pagination,
.dataTables_wrapper ul.pagination {
    --bs-pagination-color:               var(--ghc-turquoise);
    --bs-pagination-bg:                  transparent;
    --bs-pagination-border-color:        var(--ghc-turquoise);
    --bs-pagination-hover-color:         var(--ghc-turquoise-contrast);
    --bs-pagination-hover-bg:            var(--ghc-turquoise);
    --bs-pagination-hover-border-color:  var(--ghc-turquoise);
    --bs-pagination-focus-color:         var(--ghc-turquoise-contrast);
    --bs-pagination-focus-bg:            var(--ghc-turquoise);
    --bs-pagination-focus-box-shadow:    0 0 0 0.2rem rgba(var(--ghc-turquoise-rgb), 0.25);
    --bs-pagination-active-color:        var(--ghc-mint-contrast);
    --bs-pagination-active-bg:           var(--ghc-mint);
    --bs-pagination-active-border-color: var(--ghc-turquoise);
    --bs-pagination-disabled-color:      var(--ghc-lightgrey);
    --bs-pagination-disabled-bg:         transparent;
    --bs-pagination-disabled-border-color: var(--ghc-lightgrey);
}

/* --- Cor padrão dos links de página (sem !important para ceder a hover e active) --- */
div.dt-container .page-link,
.dataTables_wrapper .page-link {
    color: var(--ghc-turquoise);
}

/* --- Regra direta no estado ativo (página atual) → fundo mint --- */
div.dt-container .page-item.active .page-link,
div.dt-container .active > .page-link,
.dataTables_wrapper .page-item.active .page-link,
.dataTables_wrapper .active > .page-link {
    background-color: var(--ghc-mint) !important;
    border-color:     var(--ghc-mint) !important;
    color:            var(--ghc-mint-contrast) !important;
    font-weight:      600 !important;
    box-shadow:       none !important;
}

/* --- Hover nos botões não-ativos → fundo turquoise, texto branco --- */
div.dt-container .page-item:not(.active):not(.disabled) .page-link:hover,
.dataTables_wrapper .page-item:not(.active):not(.disabled) .page-link:hover {
    background-color: var(--ghc-turquoise) !important;
    border-color:     var(--ghc-turquoise) !important;
    color:            var(--ghc-turquoise-contrast) !important;
}

/* --- API legada: botões de paginação: estado normal --- */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color:         var(--ghc-turquoise) !important;
    border:        1px solid transparent !important;
    border-radius: var(--bs-border-radius-sm) !important;
    background:    transparent !important;
    box-shadow:    none !important;
    padding:       0.25rem 0.5rem !important;
    font-size:     0.875rem !important;
    transition:    color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
}

/* --- API legada: hover --- */
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color:        var(--ghc-turquoise-contrast) !important;
    background:   var(--ghc-turquoise) !important;
    border-color: var(--ghc-turquoise) !important;
    box-shadow:   none !important;
}

/* --- API legada: página atual --- */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color:        var(--ghc-mint-contrast) !important;
    background:   var(--ghc-mint) !important;
    border-color: var(--ghc-mint) !important;
    font-weight:  600 !important;
    box-shadow:   none !important;
}

/* --- API legada: desabilitado --- */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color:        var(--ghc-lightgrey) !important;
    background:   transparent !important;
    border-color: transparent !important;
    cursor:       default !important;
}

/* --- Ellipsis entre blocos de páginas --- */
.dataTables_wrapper .dataTables_paginate .ellipsis {
    color:   var(--ghc-lightgrey) !important;
    padding: 0.25rem 0.4rem !important;
}

/* --- Campo de busca --- */
.dataTables_wrapper .dataTables_filter input,
div.dt-container div.dt-search input {
    border-color:  var(--ghc-mint) !important;
    border-radius: var(--bs-border-radius-sm) !important;
    padding:       0.2rem 0.5rem !important;
    font-size:     0.875rem !important;
    transition:    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}
.dataTables_wrapper .dataTables_filter input:focus,
div.dt-container div.dt-search input:focus {
    border-color: var(--ghc-turquoise) !important;
    outline:      0 !important;
    box-shadow:   0 0 0 0.2rem rgba(var(--ghc-turquoise-rgb), 0.2) !important;
}

/* --- Seletor de quantidade de registros --- */
.dataTables_wrapper .dataTables_length select,
div.dt-container div.dt-length select {
    border-color:  var(--ghc-mint) !important;
    border-radius: var(--bs-border-radius-sm) !important;
    padding:       0.2rem 1.5rem 0.2rem 0.5rem !important;
    font-size:     0.875rem !important;
    transition:    border-color 0.15s ease-in-out !important;
}
.dataTables_wrapper .dataTables_length select:focus,
div.dt-container div.dt-length select:focus {
    border-color: var(--ghc-turquoise) !important;
    outline:      0 !important;
    box-shadow:   0 0 0 0.2rem rgba(var(--ghc-turquoise-rgb), 0.2) !important;
}

/* --- Texto informativo (ex.: "Mostrando 1 a 10 de 50 registros") --- */
.dataTables_wrapper .dataTables_info,
div.dt-container div.dt-info {
    color:     var(--ghc-turquoise) !important;
    font-size: 0.8rem !important;
}

