/**
 * REVESTIMENTO VISUAL (reskin) por cima do template SB Admin - não altera
 * nenhuma view nem o styles.css original, só sobrepõe variáveis/seletores já
 * usados em todo o sistema (cards, botões, sidebar). Reversível: remover o
 * <link> deste arquivo em views/layout/header.php restaura o visual original.
 *
 * Cor de acento = laranja da logo (public/img/logo_chromo_small.svg, cor do
 * "X" de Chromo-X: #C1531F).
 */

:root {
    /* Acento em laranja da marca no lugar do azul padrão do Bootstrap - como
       os componentes do Bootstrap usam var(--bs-primary) internamente, isso
       já atualiza badges/links "primary" no sistema inteiro (botões precisam
       de override à parte, ver abaixo). */
    --bs-primary: #c1531f;
    --bs-primary-rgb: 193, 83, 31;
    --bs-link-color: #c1531f;
    --bs-link-hover-color: #a6461a;

    /* Cantos mais arredondados em cards/botões/inputs */
    --bs-border-radius: 0.75rem;
    --bs-border-radius-sm: 0.5rem;
    --bs-border-radius-lg: 1rem;

    /* Fundo levemente acinzentado atrás dos cards brancos, em vez de branco
       puro - dá profundidade sem precisar mudar nenhuma view (os cards já são
       bg-white explicitamente em toda a tela). */
    --bs-body-bg: #f4f6fb;
}

/* ==========================================================================
   CARDS - cantos mais arredondados + sombra mais suave/"flutuante"
   ========================================================================== */
.card {
    border-radius: 14px;
    /* O raio "14px" acima só afeta o .card em si - o Bootstrap arredonda
       header/footer usando --bs-card-inner-border-radius, calculado a partir
       do raio ORIGINAL do card (0.375rem), não do valor sobrescrito aqui.
       Sem isso, o header ficava com canto bem menos arredondado que o card,
       "vazando" quina reta dentro da quina curva por baixo. */
    --bs-card-border-radius: 14px;
    --bs-card-inner-border-radius: 13px;
}

/* Card com borda visível (ex.: grupo de opcionais em Produtos) - a borda
   externa (.border, cinza opaco #dee2e6) e a borda nativa do .card-header
   (preto translúcido) usam cores ligeiramente diferentes por padrão do
   Bootstrap, o que criava uma "emenda" visível no canto onde as duas se
   encontram. Iguala a cor interna do header à da borda externa. */
.card.border {
    --bs-card-border-color: #dee2e6;
}

.shadow-sm {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 20px rgba(15, 23, 42, 0.06) !important;
}

/* ==========================================================================
   BOTÕES E BADGES - o Bootstrap compilado grava a cor "primary" como valores
   fixos por componente (--bs-btn-bg etc.), não reaproveita var(--bs-primary)
   do :root - por isso precisa repetir a troca de cor aqui pros botões pegarem
   o mesmo acento em vez de continuarem no azul padrão.
   ========================================================================== */
.btn {
    border-radius: 8px;
}

.btn-primary {
    --bs-btn-bg: #c1531f;
    --bs-btn-border-color: #c1531f;
    --bs-btn-hover-bg: #a6461a;
    --bs-btn-hover-border-color: #a6461a;
    --bs-btn-active-bg: #a6461a;
    --bs-btn-active-border-color: #8f3d18;
    --bs-btn-disabled-bg: #c1531f;
    --bs-btn-disabled-border-color: #c1531f;
    --bs-btn-focus-shadow-rgb: 193, 83, 31;
}

.btn-outline-primary {
    --bs-btn-color: #c1531f;
    --bs-btn-border-color: #c1531f;
    --bs-btn-hover-bg: #c1531f;
    --bs-btn-hover-border-color: #c1531f;
    --bs-btn-active-bg: #c1531f;
    --bs-btn-active-border-color: #c1531f;
    --bs-btn-disabled-color: #c1531f;
    --bs-btn-disabled-border-color: #c1531f;
    --bs-btn-focus-shadow-rgb: 193, 83, 31;
}

/* Coluna "Em Rota / Saiu p/ Entrega" (Status Delivery) e status "Saiu para
   Entrega" nas listagens - cor customizada (não é um nome de cor do
   Bootstrap), pedida no lugar do cinza padrão ("secondary"). O identificador
   "delivery-purple" vem direto de OrderController (chave 'color' de
   statusColumnsConfig()/datatable()), reaproveitado em badges/título/botão.
   Só a cor do texto é customizada aqui: bg-{color}-subtle e
   border-{color}-subtle NÃO existem neste Bootstrap pra nenhuma cor (nem pras
   nativas primary/danger/success/etc - o navegador as ignora, então o badge
   fica com fundo transparente e a borda cinza padrão do .border) - definir
   essas duas classes só pra "delivery-purple" quebraria essa consistência,
   deixando esse status com fundo roxo enquanto os demais ficam sem fundo. */
.text-delivery-purple {
    color: #7a58b9 !important;
}

.btn-delivery-purple {
    --bs-btn-color: #fff;
    --bs-btn-bg: #7a58b9;
    --bs-btn-border-color: #7a58b9;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #6a4aa3;
    --bs-btn-hover-border-color: #6a4aa3;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #5c3f8f;
    --bs-btn-active-border-color: #5c3f8f;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #7a58b9;
    --bs-btn-disabled-border-color: #7a58b9;
    --bs-btn-focus-shadow-rgb: 122, 88, 185;
}

/* Paginação do DataTables (numeração das listagens) - mesma lógica do botão. */
.pagination .page-item.active .page-link {
    background-color: #c1531f;
    border-color: #c1531f;
}

.page-link {
    color: #c1531f;
}

.page-link:hover {
    color: #a6461a;
}

.btn-sm {
    border-radius: 7px;
}

.badge {
    border-radius: 6px;
    font-weight: 600;
}

/* ==========================================================================
   CHECKBOXES E TOGGLES (form-switch) - o Bootstrap compilado grava a cor
   "azul" marcada/focada como valor fixo (não usa var(--bs-primary)), mesma
   situação dos botões acima.
   ========================================================================== */
.form-check-input:checked {
    background-color: #c1531f;
    border-color: #c1531f;
}

.form-check-input[type="checkbox"]:indeterminate {
    background-color: #c1531f;
    border-color: #c1531f;
}

.form-check-input:focus {
    border-color: #c1531f;
    box-shadow: 0 0 0 0.25rem rgba(193, 83, 31, 0.25);
}

/* :not(:checked) é essencial aqui: sem ele, essa regra (carregada depois do
   styles.css original) vence a regra nativa ".form-switch .form-check-input:checked"
   quando o switch está marcado E em foco (logo após o clique) - mesma
   especificidade, mas por vir depois no cascade, substituía a bolinha branca
   do "ligado" por essa bolinha laranja (invisível sobre o fundo já laranja). */
.form-switch .form-check-input:focus:not(:checked) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23c1531f'/%3e%3c/svg%3e");
}

/* ==========================================================================
   BARRA DO TOPO E MENU LATERAL - !important pra vencer .bg-dark (utilitário
   do Bootstrap, também !important, usado junto na <nav class="... bg-dark">
   do topo) - sem isso a top bar ficava com um tom diferente da sidebar.
   ========================================================================== */
.sb-topnav.navbar-dark.bg-dark,
.sb-sidenav-dark {
    background-color: #14141f !important;
}

.sb-sidenav-dark .sb-sidenav-footer {
    background-color: #1c1c2b;
}

.sb-sidenav-dark .sb-sidenav-menu .nav-link {
    border-radius: 8px;
    margin: 2px 10px;
    padding: 0.55rem 0.9rem;
    font-size: 0.9rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sb-sidenav-dark .sb-sidenav-menu .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.06);
}

/* Vence a cor "azul padrão" do item ativo definida inline em header.php,
   porque este arquivo é carregado depois daquele bloco <style> no <head>. */
.sb-sidenav-dark .nav .nav-link.menu-ativo {
    background-color: rgba(193, 83, 31, 0.22) !important;
}

.sb-sidenav-dark .nav .nav-link.menu-ativo .sb-nav-link-icon i {
    color: #c1531f !important;
}

.sb-sidenav-menu-heading {
    letter-spacing: 0.06em;
    font-weight: 700;
}

/* O ícone de usuário (bare, sem fundo colorido) ficava visualmente menor que
   o ícone de loja aberta/fechada (que tem o "peso" extra do badge colorido em
   volta) - aumenta a fonte do ícone pra equilibrar os dois, tanto no mobile
   quanto no desktop. O FontAwesome kit (all.js) converte o
   <i class="fa-user-circle"> num <svg class="fa-circle-user"> em runtime
   (renomeou o ícone na v6), por isso o seletor precisa cobrir as duas
   classes. */
/* No mobile a .navbar-brand herda a largura fixa de 265px (pensada pra bater
   com a largura da sidebar no desktop), o que faz a logo ocupar boa parte da
   top bar numa tela estreita - trava em 30% da largura da top bar só nesse
   breakpoint. */
@media (max-width: 767.98px) {
    .sb-topnav .navbar-brand {
        width: auto;
        max-width: 35%;
    }
}

#navbarDropdown .fa-user-circle,
#navbarDropdown .fa-circle-user {
    font-size: 1.4rem;
    vertical-align: middle;
}