/* ==========================================================================
   Opperi — identidade visual v1 (14/09/2026)

   Este arquivo NAO reescreve o Bootstrap: ele redefine o significado das
   classes que os templates ja usam. Trocar "bg-success" aqui muda o badge
   de Faturado, o de Pago e o de Entregue de uma vez, nas 30 telas.

   Por que ha blocos repetindo cores: no Bootstrap 5.3 os utilitarios
   (.text-*, .bg-*) leem variaveis CSS e mudam sozinhos, mas os botoes e
   algumas tabelas trazem a cor escrita no proprio arquivo compilado. Esses
   precisam ser sobrescritos um a um — e so por isso.

   Paleta oficial: vendas/static/marca/LEIA-ME.md
   ========================================================================== */

:root {
    /* ----- Marca ----- */
    --op-petroleo:    #0F2B3D;
    --op-azul:        #1B6FA8;
    --op-azul-escuro: #155A87;
    --op-azul-claro:  #63A9D6;
    --op-verde:       #16B8A6;   /* acento: so formas, nunca texto */
    --op-verde-txt:   #0D766A;   /* o acento quando precisa virar texto */

    /* ----- Neutros ----- */
    --op-branco:   #FFFFFF;
    --op-fundo:    #F4F7F9;
    --op-borda:    #E2E9EE;
    --op-cinza-cl: #8FA1AD;
    --op-cinza:    #5A6E7D;

    /* ----- Estado (texto / fundo) — pares conferidos em WCAG AA ----- */
    --op-ok-txt:      #15734A;  --op-ok-bg:      #E7F4EE;
    --op-info-txt:    #1B6FA8;  --op-info-bg:    #E7F1F8;
    --op-alerta-txt:  #965900;  --op-alerta-bg:  #FBF0DF;
    --op-erro-txt:    #B3261E;  --op-erro-bg:    #FBEAE8;

    /* ----- Repasse ao Bootstrap: o que e variavel muda aqui ----- */
    --bs-body-font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-body-color: var(--op-petroleo);
    --bs-body-bg: var(--op-fundo);
    --bs-emphasis-color: var(--op-petroleo);
    --bs-secondary-color: var(--op-cinza);
    --bs-border-color: var(--op-borda);

    --bs-primary: #1B6FA8;          --bs-primary-rgb: 27, 111, 168;
    --bs-success: #15734A;          --bs-success-rgb: 21, 115, 74;
    --bs-danger:  #B3261E;          --bs-danger-rgb: 179, 38, 30;
    --bs-warning: #965900;          --bs-warning-rgb: 150, 89, 0;
    --bs-info:    #1B6FA8;          --bs-info-rgb: 27, 111, 168;
    --bs-dark:    #0F2B3D;          --bs-dark-rgb: 15, 43, 61;
    --bs-secondary: #5A6E7D;        --bs-secondary-rgb: 90, 110, 125;

    --bs-link-color: #1B6FA8;       --bs-link-color-rgb: 27, 111, 168;
    --bs-link-hover-color: #155A87;
    --bs-focus-ring-color: rgba(27, 111, 168, .25);
}

body { -webkit-font-smoothing: antialiased; }

/* Titulos em Poppins — a fonte do logotipo */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Poppins', var(--bs-body-font-family);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--op-petroleo);
}

/* Numeros alinhados na coluna: a virgula de R$ 1.234,56 cai sempre no mesmo
   lugar, mesmo sem trocar a fonte. Faz diferenca em tabela financeira. */
table { font-variant-numeric: tabular-nums; }

/* Use class="num" em valor, data, CNPJ ou codigo de barras */
.num {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- NAVBAR */
.navbar.bg-dark {
    background-color: var(--op-petroleo) !important;
    border-bottom: 3px solid var(--op-verde);
}
.navbar-dark .navbar-nav .nav-link          { color: rgba(255,255,255,.82); }
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus    { color: #fff; }
.navbar-brand img { display: block; }

/* --------------------------------------------------------------- BOTOES */
/* Cores escritas no Bootstrap compilado — precisam ser trocadas uma a uma */
.btn-primary {
    --bs-btn-bg: #1B6FA8;           --bs-btn-border-color: #1B6FA8;
    --bs-btn-hover-bg: #155A87;     --bs-btn-hover-border-color: #12507a;
    --bs-btn-active-bg: #12507A;    --bs-btn-active-border-color: #12507a;
    --bs-btn-disabled-bg: #1B6FA8;  --bs-btn-disabled-border-color: #1B6FA8;
}
.btn-success {
    --bs-btn-bg: #0D766A;           --bs-btn-border-color: #0D766A;
    --bs-btn-hover-bg: #0a5f56;     --bs-btn-hover-border-color: #0a5f56;
    --bs-btn-active-bg: #0a5f56;    --bs-btn-active-border-color: #0a5f56;
    --bs-btn-disabled-bg: #0D766A;  --bs-btn-disabled-border-color: #0D766A;
}
.btn-danger {
    --bs-btn-bg: #B3261E;           --bs-btn-border-color: #B3261E;
    --bs-btn-hover-bg: #921e18;     --bs-btn-hover-border-color: #921e18;
    --bs-btn-active-bg: #921e18;    --bs-btn-active-border-color: #921e18;
}
.btn-outline-primary {
    --bs-btn-color: #1B6FA8;        --bs-btn-border-color: #1B6FA8;
    --bs-btn-hover-bg: #1B6FA8;     --bs-btn-hover-border-color: #1B6FA8;
    --bs-btn-active-bg: #155A87;    --bs-btn-active-border-color: #155A87;
}
.btn-outline-secondary {
    --bs-btn-color: #5A6E7D;        --bs-btn-border-color: #C3D0D9;
    --bs-btn-hover-bg: #5A6E7D;     --bs-btn-hover-border-color: #5A6E7D;
}
.btn { font-weight: 500; }

/* --------------------------------------------------------------- BADGES */
/* Os templates usam badge solido. A marca pede o par claro: fundo suave e
   texto escuro — le melhor numa tabela cheia e nao briga com o Petroleo. */
.badge { font-weight: 600; letter-spacing: .01em; }

.badge.bg-success  { background-color: var(--op-ok-bg)     !important; color: var(--op-ok-txt); }
.badge.bg-primary  { background-color: var(--op-info-bg)   !important; color: var(--op-info-txt); }
.badge.bg-info     { background-color: var(--op-info-bg)   !important; color: var(--op-info-txt); }
.badge.bg-warning  { background-color: var(--op-alerta-bg) !important; color: var(--op-alerta-txt) !important; }
.badge.bg-danger   { background-color: var(--op-erro-bg)   !important; color: var(--op-erro-txt); }
.badge.bg-secondary{ background-color: #EDF1F4            !important; color: var(--op-cinza); }
.badge.bg-dark     { background-color: var(--op-petroleo)  !important; color: #fff; }

/* Os templates escrevem "bg-info text-dark" e "bg-warning text-dark". O par
   da marca ja define a cor certa, entao o text-dark nao pode vencer. */
.badge.bg-info.text-dark    { color: var(--op-info-txt)   !important; }
.badge.bg-warning.text-dark { color: var(--op-alerta-txt) !important; }

/* -------------------------------------------------------------- TABELAS */
.table { --bs-table-border-color: var(--op-borda); }
.table > thead {
    --bs-table-bg: #EDF2F5;
    --bs-table-color: var(--op-cinza);
}
.table > thead th {
    font-weight: 600; font-size: .82rem;
    text-transform: uppercase; letter-spacing: .04em;
    border-bottom-width: 1px;
}
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: #F8FAFB; }

.table-danger {
    --bs-table-color: var(--op-erro-txt);
    --bs-table-bg: var(--op-erro-bg);
    --bs-table-border-color: #F2D5D2;
    --bs-table-striped-bg: #f7e2e0;
    --bs-table-hover-bg: #f5dbd9;
}
.table-warning {
    --bs-table-color: var(--op-alerta-txt);
    --bs-table-bg: var(--op-alerta-bg);
    --bs-table-border-color: #F0E0C4;
}
.table-success {
    --bs-table-color: var(--op-ok-txt);
    --bs-table-bg: var(--op-ok-bg);
    --bs-table-border-color: #D3E8DD;
}

/* ------------------------------------------------- CARDS, FORMS, MENUS */
.card {
    border-color: var(--op-borda);
    border-radius: .6rem;
    box-shadow: 0 1px 2px rgba(15, 43, 61, .05);
}
.card-header { background-color: #F8FAFB; border-bottom-color: var(--op-borda); font-weight: 600; }

.form-control, .form-select {
    border-color: #C9D6DE;
    border-radius: .45rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--op-azul);
    box-shadow: 0 0 0 .2rem rgba(27, 111, 168, .18);
}
.form-label { font-weight: 500; color: var(--op-cinza); font-size: .9rem; }
.form-check-input:checked { background-color: var(--op-azul); border-color: var(--op-azul); }
.form-check-input:focus   { border-color: var(--op-azul); box-shadow: 0 0 0 .2rem rgba(27,111,168,.18); }

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--op-azul);
    --bs-dropdown-border-color: var(--op-borda);
    --bs-dropdown-header-color: var(--op-cinza-cl);
    box-shadow: 0 6px 20px rgba(15, 43, 61, .12);
}
.dropdown-header { text-transform: uppercase; font-size: .72rem; letter-spacing: .05em; font-weight: 600; }

.alert-success { --bs-alert-bg: var(--op-ok-bg);     --bs-alert-color: var(--op-ok-txt);     --bs-alert-border-color: #CFE6DA; }
.alert-danger  { --bs-alert-bg: var(--op-erro-bg);   --bs-alert-color: var(--op-erro-txt);   --bs-alert-border-color: #F2D5D2; }
.alert-warning { --bs-alert-bg: var(--op-alerta-bg); --bs-alert-color: var(--op-alerta-txt); --bs-alert-border-color: #F0E0C4; }
.alert-info    { --bs-alert-bg: var(--op-info-bg);   --bs-alert-color: var(--op-info-txt);   --bs-alert-border-color: #CFE0EF; }

a { text-underline-offset: .15em; }