/* =====================================================================
   BRX — Tema visual
   =====================================================================

   Paleta e tipografia inspiradas em base64-image.de: azul profundo sobre
   cinzas frios (família slate), quase sem saturação fora do azul.

   COMO ESTE ARQUIVO FUNCIONA
   Ele é carregado DEPOIS do style.css, no head-info.php, e só
   redireciona. O style.css original (692 KB) não foi tocado: ele já é
   dirigido por 149 variáveis, e a maior parte do trabalho aqui é
   reapontá-las. O que sobra são as cores que o tema fixou fora das
   variáveis (#FA8B0C laranja, #5840FF roxo e companhia), tratadas na
   segunda metade.

   PARA DESLIGAR: comente a linha deste arquivo no head-info.php.
   Nada mais precisa ser desfeito.

   O QUE ESTE ARQUIVO NÃO ALCANÇA
   Estilo embutido (style="...") vence folha de estilo. Restam 142
   ocorrências que fixam cor nas páginas; a maioria é color:white sobre
   botão colorido, que continua correta, mas as demais precisam ser
   editadas uma a uma.
   ================================================================== */


/* ---------------------------------------------------------------------
   Tipografia
   ------------------------------------------------------------------ */

/* Hospedada no projeto, e não puxada do Google a cada página: uma tela
   de técnico em campo, com 4G ruim, não deve esperar por fonts.gstatic
   para renderizar texto. 'swap' garante que o texto apareça de imediato
   com a fonte de reserva. */
@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/bricolage-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                   U+FFFD;
}

@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/bricolage-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                   U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                   U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                   U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ---------------------------------------------------------------------
   Paleta
   ------------------------------------------------------------------ */

:root {
    /* Cores de origem. Tudo abaixo deriva daqui — trocar a identidade do
       sistema é trocar estes onze valores. */
    --brx-azul-900:  #1e3a8a;
    --brx-azul-800:  #1e40af;   /* primária */
    --brx-azul-600:  #2563eb;
    --brx-azul-500:  #3b82f6;
    --brx-azul-100:  #dbeafe;
    --brx-azul-50:   #f0f4ff;

    --brx-slate-900: #0f172a;   /* títulos */
    --brx-slate-600: #475569;   /* texto corrido */
    --brx-slate-500: #64748b;   /* texto secundário */
    --brx-slate-200: #e2e8f0;
    --brx-slate-100: #f1f5f9;
    --brx-slate-50:  #f8fafc;

    --brx-borda:     #d6dff0;
    --brx-sucesso:   #10b981;
    --brx-erro:      #ef4444;
    --brx-alerta:    #f59e0b;

    /* ---- Reapontamento das variáveis do tema -------------------------
       A ordem segue a do :root do style.css, para conferência lado a
       lado. Os valores -rgba precisam acompanhar: o tema os usa em
       rgba(var(--x-rgba), .1) para tintas e sombras, e deixá-los para
       trás manteria halos laranja e roxos sob os componentes novos. */

    --body:            var(--brx-slate-50);
    --contents-bg:     var(--brx-slate-50);
    --main-color:      #ffffff;
    --accent:          #ffffff;

    --color-menu:            var(--brx-slate-600);
    --color-menu-hover:      var(--brx-azul-800);
    --color-menu-active:     var(--brx-azul-800);
    --header-bg:             #ffffff;
    --sidebar-bg:            #ffffff;
    --logo-wrapper-bg:       #ffffff;

    --bgcolor-add-listing-button:        var(--brx-azul-800);
    --bgcolor-add-listing-button-hover:  var(--brx-azul-900);

    --color-breadcrumb-link:        var(--brx-slate-500);
    --color-breadcrumb-link-hover:  var(--brx-azul-800);
    --color-breadcrumb_separator:   var(--brx-slate-500);

    --bgcolor-footer:        var(--brx-slate-900);
    --color-footer-divider:  var(--brx-slate-900);

    --color-primary:    var(--brx-azul-800);
    --color-primary2:   var(--brx-azul-600);
    --color-secondary:  var(--brx-azul-500);
    --color-success:    var(--brx-sucesso);
    --color-info:       var(--brx-azul-500);
    --color-warning:    var(--brx-alerta);
    --color-danger:     var(--brx-erro);
    --color-dark:       var(--brx-slate-900);
    --color-infos:      var(--brx-azul-500);
    --color-warnings:   var(--brx-alerta);
    --color-dangers:    var(--brx-erro);
    --color-purple:     var(--brx-azul-600);

    --bg-primary:    var(--brx-azul-800);
    --bg-secondary:  var(--brx-azul-500);
    --bg-success:    var(--brx-sucesso);
    --bg-info:       var(--brx-azul-500);
    --bg-warning:    var(--brx-alerta);
    --bg-danger:     var(--brx-erro);
    --bg-abortado:   var(--brx-slate-500);
    --bg-dark:       var(--brx-slate-900);

    --bg-primary-hover:    var(--brx-azul-900);
    --bg-secondary-hover:  var(--brx-azul-600);
    --bg-success-hover:    #059669;
    --bg-info-hover:       var(--brx-azul-600);
    --bg-warning-hover:    #d97706;
    --bg-danger-hover:     #dc2626;
    --bg-dark-hover:       #1e293b;
    --bg-gray-hover:       var(--brx-slate-600);

    --color-primary-rgba:    30, 64, 175;
    --color-secondary-rgba:  59, 130, 246;
    --color-success-rgba:    16, 185, 129;
    --color-info-rgba:       59, 130, 246;
    --color-warning-rgba:    245, 158, 11;
    --color-danger-rgba:     239, 68, 68;
    --color-dark-rgba:       15, 23, 42;
    --color-infos-rgba:      59, 130, 246;
    --color-warnings-rgba:   245, 158, 11;
    --color-dangers-rgba:    239, 68, 68;
    --color-purple-rgba:     37, 99, 235;

    --color-light:      var(--brx-slate-500);
    --color-lighten:    #94a3b8;
    --color-lighter:    var(--brx-slate-50);
    --color-lighten-x:  var(--brx-slate-500);
    --footer-dark:      var(--brx-slate-900);
    --color-deep:       var(--brx-slate-100);
    --color-normal:     var(--brx-slate-50);
    --color-lighters:   var(--brx-slate-50);
    --color-gray:       var(--brx-slate-600);
    --color-gray-x:     var(--brx-slate-600);

    --body-color:   var(--brx-slate-600);
    --text-color:   var(--brx-slate-600);
    --light-gray:   var(--brx-slate-500);

    --border-color:  var(--brx-slate-200);
    --border-light:  var(--brx-borda);
    --border-deep:   var(--brx-borda);

    --bg-normal:    var(--brx-slate-50);
    --bg-lighters:  var(--brx-slate-50);
    --bg-lighter:   var(--brx-slate-50);
    --bg-deep:      var(--brx-slate-100);
    --bg-gray:      var(--brx-slate-600);
    --bg-light:     var(--brx-slate-500);

    --bg-deep-rgba:      241, 245, 249;
    --bg-lighter-rgba:   248, 250, 252;
    --bg-normal-rgba:    248, 250, 252;
    --color-gray-rgba:   100, 116, 139;
    --light-gray-rgba:   100, 116, 139;
    --color-lighten-rgba: 148, 163, 184;
    --box-shadow-color-rgba: 15, 23, 42;

    /* Raios do site de referência: 8px domina, 12px nos cartões. O tema
       vinha de 10/6/4. */
    --border-radius-xl: 12px;
    --border-radius-md: 8px;
    --border-radius-xs: 6px;

    --gridLines_color: var(--brx-slate-200);
    --thumbBG:         var(--brx-slate-200);

    /* Sombras mais discretas e frias. As originais eram quentes e
       pesadas demais para uma paleta slate. */
    --shadow2: rgba(15, 23, 42, .04);
    --shadow3: rgba(15, 23, 42, .06);
    --shadow4: rgba(15, 23, 42, .10);
    --shadow5: rgba(15, 23, 42, .08);
}


/* ---------------------------------------------------------------------
   Aplicação da tipografia
   ------------------------------------------------------------------ */

body,
.sidebar_nav .menu-text,
h1, h2, h3, h4, h5, h6,
.btn, .badge, label,
input, select, textarea,
.card-header h6,
.userDatatable-title,
.userDatatable-content {
    font-family: 'Bricolage Grotesque', 'Jost', -apple-system, 'Segoe UI',
                 Arial, Helvetica, sans-serif;
}

body {
    color: var(--brx-slate-600);
    background: var(--brx-slate-50);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--brx-slate-900);
    /* Bricolage é uma grotesca de contraste alto; sem apertar um pouco o
       espacejamento os títulos ficam soltos em corpo grande. */
    letter-spacing: -.015em;
    text-wrap: balance;
}

code, pre, kbd, .caminho {
    font-family: 'Courier New', Courier, monospace;
}


/* ---------------------------------------------------------------------
   Cores que o tema fixou fora das variáveis
   ---------------------------------------------------------------------
   O style.css repete #FA8B0C (laranja, 41×), #5840FF (roxo, 25×),
   #8C90A4, #01B81A, #FF0F0F e #00E4EC diretamente nas regras. Como não
   dá para reapontá-las por variável, os componentes onde elas aparecem
   são redefinidos aqui.
   ------------------------------------------------------------------ */

/* ---- Botões ---- */
.btn-primary,
.btn-primary:focus {
    background-color: var(--brx-azul-800);
    border-color: var(--brx-azul-800);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--brx-azul-900) !important;
    border-color: var(--brx-azul-900) !important;
}

.btn-secondary,
.btn-secondary:focus {
    background-color: var(--brx-azul-500);
    border-color: var(--brx-azul-500);
    color: #fff;
}
.btn-secondary:hover { background-color: var(--brx-azul-600) !important; border-color: var(--brx-azul-600) !important; }

.btn-success, .btn-success:focus { background-color: var(--brx-sucesso); border-color: var(--brx-sucesso); color: #fff; }
.btn-success:hover { background-color: #059669 !important; border-color: #059669 !important; }

.btn-danger, .btn-danger:focus { background-color: var(--brx-erro); border-color: var(--brx-erro); color: #fff; }
.btn-danger:hover { background-color: #dc2626 !important; border-color: #dc2626 !important; }

.btn-info, .btn-info:focus { background-color: var(--brx-azul-500); border-color: var(--brx-azul-500); color: #fff; }
.btn-info:hover { background-color: var(--brx-azul-600) !important; border-color: var(--brx-azul-600) !important; }

.btn-warning, .btn-warning:focus { background-color: var(--brx-alerta); border-color: var(--brx-alerta); color: #fff; }
.btn-warning:hover { background-color: #d97706 !important; border-color: #d97706 !important; }

.btn-light {
    background-color: #fff;
    border-color: var(--brx-borda);
    color: var(--brx-slate-600);
}
.btn-light:hover { background-color: var(--brx-slate-100); border-color: var(--brx-borda); }

.btn {
    border-radius: var(--border-radius-md);
    font-weight: 500;
    /* O tema herdou a transição do Bootstrap em 'all', que anima até
       largura quando o conteúdo muda. Restringir evita o tremor. */
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Foco visível de teclado. O tema removia o contorno sem repor nada, e
   quem navega por Tab ficava sem saber onde está. */
.btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--brx-azul-500);
    outline-offset: 2px;
    box-shadow: none;
}

/* ---- Selos ---- */
.badge-primary   { background-color: var(--brx-azul-800); color: #fff; }
.badge-secondary { background-color: var(--brx-azul-500); color: #fff; }
.badge-success   { background-color: var(--brx-sucesso);  color: #fff; }
.badge-danger    { background-color: var(--brx-erro);     color: #fff; }
.badge-info      { background-color: var(--brx-azul-500); color: #fff; }
.badge-warning   { background-color: var(--brx-alerta);   color: #fff; }
.badge-dark      { background-color: var(--brx-slate-900); color: #fff; }

/* ---- Cartões ---- */
.card {
    border: 1px solid var(--brx-borda);
    border-radius: var(--border-radius-xl);
    /* Cartão do site de referência é plano: borda define, sombra não
       carrega peso. */
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.card-header {
    background: #fff;
    border-bottom: 1px solid var(--brx-slate-200);
    border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0;
}
.card-header h6 { color: var(--brx-slate-900); font-weight: 600; }

/* ---- Barra lateral e cabeçalho ---- */
.sidebar_nav .menu-item a,
.sidebar_nav li a { color: var(--brx-slate-600); }

.sidebar_nav .menu-item a:hover,
.sidebar_nav li a:hover,
.sidebar_nav li a.active {
    color: var(--brx-azul-800);
    background-color: var(--brx-azul-50);
}

/* Os três botões de atalho no topo da barra usam style="color:white"
   embutido no menu.php. Como o embutido vence a folha, o que se pode
   fazer aqui é garantir que o FUNDO permaneça escuro o bastante para o
   branco continuar legível. */
.sidebar_nav .btn-success  { background-color: var(--brx-sucesso) !important; border-color: var(--brx-sucesso) !important; }
.sidebar_nav .btn-info     { background-color: var(--brx-azul-500) !important; border-color: var(--brx-azul-500) !important; }
.sidebar_nav .btn-primary  { background-color: var(--brx-azul-800) !important; border-color: var(--brx-azul-800) !important; }

/* ---- Tabelas ---- */
.table thead th,
.userDatatable-header th {
    color: var(--brx-slate-500);
    font-weight: 600;
    font-size: .8125rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--brx-slate-200);
}
.table td { border-color: var(--brx-slate-100); }
.table-hover tbody tr:hover { background-color: var(--brx-azul-50); }

/* Colunas de número alinham quando os dígitos têm a mesma largura. */
.userDatatable-content,
.table td { font-variant-numeric: tabular-nums; }

/* ---- Formulários ---- */
.form-control,
.form-select,
input[type=text], input[type=password], input[type=email],
input[type=number], input[type=date], select, textarea {
    border: 1px solid var(--brx-borda);
    border-radius: var(--border-radius-md);
    color: var(--brx-slate-900);
}
.form-control:focus,
.form-select:focus,
textarea:focus {
    border-color: var(--brx-azul-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
}
label { color: var(--brx-slate-600); font-weight: 500; }

/* ---- Ligações ---- */
a { color: var(--brx-azul-800); }
a:hover { color: var(--brx-azul-900); }

/* ---- Avisos ---- */
.alert { border-radius: var(--border-radius-md); border-width: 1px; }
.alert-warning { background-color: #fffbeb; border-color: #fde68a; color: #92400e; }
.alert-danger  { background-color: #fef2f2; border-color: #fecaca; color: #991b1b; }
.alert-success { background-color: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.alert-info    { background-color: var(--brx-azul-50); border-color: var(--brx-azul-100); color: var(--brx-azul-900); }

/* ---- Caixas de diálogo (SweetAlert) ---- */
.swal2-popup { border-radius: var(--border-radius-xl); font-family: 'Bricolage Grotesque', 'Jost', sans-serif; }
.swal2-title { color: var(--brx-slate-900); }
.swal2-styled.swal2-confirm { background-color: var(--brx-azul-800) !important; border-radius: var(--border-radius-md) !important; }
.swal2-styled.swal2-cancel  { background-color: var(--brx-slate-500) !important; border-radius: var(--border-radius-md) !important; }

/* ---- Paginação e abas ---- */
.page-item.active .page-link { background-color: var(--brx-azul-800); border-color: var(--brx-azul-800); }
.page-link { color: var(--brx-azul-800); }
.nav-tabs .nav-link.active { color: var(--brx-azul-800); border-bottom-color: var(--brx-azul-800); }

/* ---------------------------------------------------------------------
   Fase 2 — o que sobrou de cor antiga e realmente aparece
   ---------------------------------------------------------------------
   Levantado cruzando os seletores que carregam cor da paleta velha no
   style.css com os que existem nas 17 telas renderizadas. Dos 131
   seletores com cor antiga, só estes chegam à tela.

   O grosso do resto é código morto do tema comprado: as variantes
   .checkbox-primary/.checkbox-secondary exigem uma classe ancestral que
   o BRX nunca usa, e todas as regras com #1b1e2b são de .layout-dark —
   o sistema roda em layout-light nas 17 páginas.
   ------------------------------------------------------------------ */

/* Ponto de notificação no cabeçalho: era #01B81A, um verde mais cru que
   o da paleta nova. Aparece em toda página, ao lado do sino. */
.navbar-right__menu .nav-message .nav-item-toggle:before,
.navbar-right__menu .nav-message .dropdown-wrapper .author-online .user-avater:before {
    background: var(--brx-sucesso);
}
.navbar-right__menu .nav-message .dropdown-wrapper .has-new-message .time-posted {
    color: var(--brx-sucesso);
}

/* Marcador da caixa de seleção quando marcada. */
.checkbox-text .form-check-input:checked ~ .form-check-label::after {
    color: var(--brx-slate-500);
}

/* Bootstrap pinta o controle marcado com o azul dele (#0d6efd), que não
   é o nosso. Alcança .form-check-input e o interruptor de Integrações. */
.form-check-input:checked {
    background-color: var(--brx-azul-800);
    border-color: var(--brx-azul-800);
}
.form-check-input:focus {
    border-color: var(--brx-azul-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
}

/* Estas duas eram usadas em style= embutido de três páginas e não
   existiam em lugar nenhum — nem no tema original, nem aqui. Os
   elementos herdavam a cor do pai em vez da pretendida. Não é regressão
   do tema novo; já era assim antes. */
:root {
    --text-primary:   var(--brx-slate-900);
    --text-secondary: var(--brx-slate-500);
}

/* Quem prefere menos movimento não deve receber as transições do tema. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}