/* Fontes da marca SAFO, servidas pelo próprio sistema (sem depender do Google).
   Montserrat (variável, pesos 600–800), Barlow (400, 500, 600) e Barlow Condensed (600), só caracteres latinos.
   Licença: SIL Open Font License 1.1 — ver ../fontes/LICENCA.txt */
@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fontes/barlow-400.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: "Barlow";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fontes/barlow-500.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: "Barlow";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fontes/barlow-600.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: "Barlow Condensed";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fontes/barlow-condensed-600.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: "Montserrat";
    font-style: normal;
    font-weight: 600 800;
    font-display: swap;
    src: url("../fontes/montserrat.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;
}

/* =====================================================================
   SAFO — tema visual baseado na identidade da marca
   Azul-marinho #0B2A3B · Verde-oliva #556B2F · Cinza #A7A79F · Branco
   Status (quadro de registros da logo): positivo #168447 · neutro #F2A900 · negativo #D62828
   Fontes: Montserrat (títulos, menu, botões, números) e Barlow (texto)
   ===================================================================== */

:root,
[data-bs-theme="light"] {
    --safo-navy: #0B2A3B;
    --safo-navy-2: #123B52;
    --safo-oliva: #556B2F;
    --safo-oliva-escuro: #46592A;
    --safo-oliva-claro: #E6EBDC;
    --safo-cinza: #A7A79F;
    --safo-positivo: #168447;
    --safo-neutro: #F2A900;
    --safo-negativo: #D62828;
    --safo-fo-positivo: #1E6FB8;   /* FO positivo: azul (selo, cartão e gráfico do painel) */

    --bs-body-font-family: "Barlow", "Segoe UI", Arial, sans-serif;
    --bs-body-font-size: 1rem;
    --bs-body-bg: #F4F5F1;
    --bs-body-bg-rgb: 244, 245, 241;
    --bs-tertiary-bg-rgb: 236, 238, 231;
    --bs-body-color: #1E2A31;
    --bs-secondary-color: #5C6670;
    --bs-tertiary-bg: #ECEEE7;
    --bs-border-color: #D9DBD2;
    --bs-heading-color: var(--safo-navy);
    --bs-link-color: var(--safo-oliva);
    --bs-link-color-rgb: 85, 107, 47;
    --bs-link-hover-color: var(--safo-oliva-escuro);
    --bs-link-hover-color-rgb: 70, 89, 42;

    --bs-primary: var(--safo-navy);
    --bs-primary-rgb: 11, 42, 59;
    --bs-success: var(--safo-positivo);
    --bs-success-rgb: 22, 132, 71;
    --bs-danger: var(--safo-negativo);
    --bs-danger-rgb: 214, 40, 40;
    --bs-warning: var(--safo-neutro);
    --bs-warning-rgb: 242, 169, 0;
    --bs-secondary-rgb: 108, 117, 112;

    --safo-card-bg: #FFFFFF;
    --safo-sombra: 0 1px 2px rgba(11, 42, 59, .06), 0 4px 14px rgba(11, 42, 59, .07);
    --safo-navbar-bg: var(--safo-navy);
}

[data-bs-theme="dark"] {
    --bs-body-bg: #08161F;
    --bs-body-bg-rgb: 8, 22, 31;
    --bs-tertiary-bg-rgb: 13, 34, 48;
    --bs-secondary-bg-rgb: 18, 41, 58;
    --bs-secondary-rgb: 155, 167, 174;
    --bs-body-color: #E4E7E1;
    --bs-secondary-color: #9BA7AE;
    --bs-tertiary-bg: #0D2230;
    --bs-secondary-bg: #12293A;
    --bs-border-color: #24404F;
    --bs-heading-color: #F4F5F1;
    --bs-link-color: #9DB26F;
    --bs-link-color-rgb: 157, 178, 111;
    --bs-link-hover-color: #B6C98B;
    --bs-link-hover-color-rgb: 182, 201, 139;
    --bs-emphasis-color: #FFFFFF;

    --bs-success: #2FAF6A;
    --bs-success-rgb: 47, 175, 106;
    --bs-danger: #EF4B4B;
    --bs-danger-rgb: 239, 75, 75;
    --bs-warning: #F5B82E;
    --bs-warning-rgb: 245, 184, 46;
    --bs-success-text-emphasis: #7FD6A5;
    --bs-danger-text-emphasis: #F59A9A;

    --safo-oliva-claro: #1E2A14;
    --safo-fo-positivo-texto: #5FA3E0;   /* número do cartão no fundo escuro */
    --safo-card-bg: #0E2331;
    --safo-sombra: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .3);
    --safo-navbar-bg: #061219;
}

body {
    background-color: var(--bs-body-bg);
}

/* ---------- Tipografia ---------- */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.navbar, .btn, .badge, .modal-title, .card-title, .nav-link, .dropdown-item, thead th {
    font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
}
h1, .h1 { font-weight: 800; letter-spacing: -.02em; }
h2, h3, h4, .h2, .h3, .h4 { font-weight: 700; letter-spacing: -.01em; }
h5, h6, .h5, .h6 { font-weight: 700; }
.safo-rotulo {   /* rótulos pequenos em caixa alta, como o subtítulo da marca */
    font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .85rem;
    color: var(--bs-secondary-color);
}

/* ---------- Menu do topo ---------- */
.navbar.safo-navbar {
    background-color: var(--safo-navbar-bg) !important;
    border-bottom: 3px solid var(--safo-oliva);
    --bs-navbar-color: rgba(255, 255, 255, .85);
    --bs-navbar-hover-color: #FFFFFF;
    --bs-navbar-active-color: #FFFFFF;
    --bs-navbar-brand-color: #FFFFFF;
    --bs-navbar-toggler-border-color: rgba(255, 255, 255, .35);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar.safo-navbar .nav-link {
    font-weight: 600;
    font-size: .92rem;
    border-radius: .375rem;
    transition: background-color .2s ease, color .2s ease;
}
.navbar.safo-navbar a.nav-link:hover,
.navbar.safo-navbar a.nav-link:focus,
.navbar.safo-navbar a.nav-link.active,
.navbar.safo-navbar a.nav-link.show {
    background-color: var(--safo-oliva);
    color: #FFFFFF !important;
}
/* notebooks de 1200–1399 px: menu um pouco mais compacto para caber tudo numa linha */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .navbar.safo-navbar .nav-link { font-size: .86rem; --bs-navbar-nav-link-padding-x: .42rem; }
    .navbar.safo-navbar .navbar-brand { margin-right: .75rem !important; }
}
.navbar .dropdown-menu {
    border-top: 3px solid var(--safo-oliva);
    box-shadow: var(--safo-sombra);
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background-color: var(--safo-oliva);
    color: #FFFFFF;
}

/* ---------- Cartões ---------- */
.card {
    --bs-card-bg: var(--safo-card-bg);
    --bs-card-border-color: var(--bs-border-color);
    border-radius: .75rem;
}
.card.shadow, .shadow { box-shadow: var(--safo-sombra) !important; }

/* indicadores do painel: faixa colorida à esquerda e número grande */
.safo-kpi {
    border: 1px solid var(--bs-border-color) !important;
    border-left: 5px solid var(--kpi-cor, var(--safo-navy)) !important;
    text-align: left !important;
}
.safo-kpi .card-body { padding: .85rem 1rem !important; }
.safo-kpi .valor {
    font-family: "Montserrat", Arial, sans-serif;
    font-weight: 800;
    font-size: 1.9rem;
    line-height: 1.1;
    color: var(--kpi-cor, var(--bs-heading-color));
}
[data-bs-theme="dark"] .safo-kpi .valor.neutra { color: #FFFFFF; }
.safo-kpi.positivo { --kpi-cor: var(--safo-fo-positivo-texto, var(--safo-fo-positivo)); }
.safo-kpi.negativo { --kpi-cor: var(--bs-danger); }
.safo-kpi.neutro   { --kpi-cor: var(--bs-warning); }
.safo-kpi.marca    { --kpi-cor: var(--safo-navy); }
.safo-kpi.oliva    { --kpi-cor: var(--safo-oliva); }
[data-bs-theme="dark"] .safo-kpi.marca { --kpi-cor: #6E9CB5; }
[data-bs-theme="dark"] .safo-kpi.oliva { --kpi-cor: #9DB26F; }

/* ---------- Botões (ação principal = verde-oliva da marca) ---------- */
.btn { font-weight: 600; font-size: .9rem; border-radius: .5rem; }
.btn-success {
    --bs-btn-bg: var(--safo-oliva);
    --bs-btn-border-color: var(--safo-oliva);
    --bs-btn-hover-bg: var(--safo-oliva-escuro);
    --bs-btn-hover-border-color: var(--safo-oliva-escuro);
    --bs-btn-active-bg: #3B4B23;
    --bs-btn-active-border-color: #3B4B23;
    --bs-btn-disabled-bg: var(--safo-oliva);
    --bs-btn-disabled-border-color: var(--safo-oliva);
    --bs-btn-focus-shadow-rgb: 85, 107, 47;
}
.btn-outline-success {
    --bs-btn-color: var(--safo-oliva);
    --bs-btn-border-color: var(--safo-oliva);
    --bs-btn-hover-bg: var(--safo-oliva);
    --bs-btn-hover-border-color: var(--safo-oliva);
    --bs-btn-active-bg: var(--safo-oliva-escuro);
    --bs-btn-active-border-color: var(--safo-oliva-escuro);
    --bs-btn-focus-shadow-rgb: 85, 107, 47;
}
[data-bs-theme="dark"] .btn-outline-success {
    --bs-btn-color: #A9BE7B;
    --bs-btn-border-color: #6F8A3E;
}
.btn-primary, .btn-dark {
    --bs-btn-bg: var(--safo-navy);
    --bs-btn-border-color: var(--safo-navy);
    --bs-btn-hover-bg: var(--safo-navy-2);
    --bs-btn-hover-border-color: var(--safo-navy-2);
    --bs-btn-active-bg: #071E2B;
}
[data-bs-theme="dark"] .btn-dark {
    --bs-btn-bg: #E4E7E1; --bs-btn-color: #0B2A3B; --bs-btn-border-color: #E4E7E1;
    --bs-btn-hover-bg: #FFFFFF; --bs-btn-hover-color: #0B2A3B;
}
.btn-danger {
    --bs-btn-bg: var(--safo-negativo);
    --bs-btn-border-color: var(--safo-negativo);
    --bs-btn-hover-bg: #B71F1F;
    --bs-btn-hover-border-color: #B71F1F;
}
.btn-warning {
    --bs-btn-bg: var(--safo-neutro);
    --bs-btn-border-color: var(--safo-neutro);
    --bs-btn-hover-bg: #D99700;
    --bs-btn-hover-border-color: #D99700;
}

/* molduras e links "da marca" (formulários, cartões de destaque) */
.border-success { border-color: var(--safo-oliva) !important; }
[data-bs-theme="dark"] .border-success { border-color: #4C6129 !important; }
.link-success { color: var(--safo-oliva) !important; }
[data-bs-theme="dark"] .link-success { color: #A9BE7B !important; }
.link-success:hover { color: var(--safo-oliva-escuro) !important; }

/* ---------- Formulários ---------- */
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--safo-oliva);
    box-shadow: 0 0 0 .2rem rgba(85, 107, 47, .25);
}
.form-check-input:checked { background-color: var(--safo-oliva); border-color: var(--safo-oliva); }
.form-label { font-weight: 600; }

/* ---------- Tabelas ---------- */
.thead-safo {
    --bs-table-bg: var(--safo-navy);
    --bs-table-color: #FFFFFF;
    --bs-table-border-color: var(--safo-navy);
}
[data-bs-theme="dark"] .thead-safo {
    --bs-table-bg: #163A50;
    --bs-table-border-color: #163A50;
}
.thead-safo th {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.table { --bs-table-bg: var(--safo-card-bg); }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--safo-oliva-claro); }

/* botões de ação de uma linha (editar, excluir, perfil...) sempre lado a lado, em qualquer largura */
.table td:has(> .btn-sm), .table td:has(> form > .btn-sm), .table td:has(> a.btn) { white-space: nowrap; }
.table td .modal { white-space: normal; }   /* janelas de confirmação que ficam dentro da célula */

/* ---------- Tabelas no celular ----------
   Em vez de espremer as colunas (cada linha virava 3–4 linhas de texto), cada linha fica numa linha só
   e a tabela rola para o lado dentro do próprio quadro. Textos longos (fato observado, título) quebram
   com uma largura mínima legível. */
@media (max-width: 767.98px) {
    .table-responsive > .table { font-size: .9rem; }
    .table-responsive > .table > :not(caption) > * > * { white-space: nowrap; }
    .table-responsive > .table .modal { white-space: normal; }
    .table-responsive > .table > :not(caption) > * > .texto-longo { white-space: normal; min-width: 15rem; }
    .table-responsive { -webkit-overflow-scrolling: touch; }
}

/* ---------- Popups (cabeçalho azul-marinho da marca) ---------- */
.safo-modal-header {
    background-color: var(--safo-navy);
    color: #FFFFFF;
    border-bottom: 3px solid var(--safo-oliva);
}
.safo-modal-header .modal-title { color: #FFFFFF; }

/* Lançar FO: botões de tipo — contorno na cor do tipo; escolhido = fundo cheio + texto branco */
.btn-tipo-fo {
    --tipo-cor: var(--safo-fo-positivo);
    border: 2px solid var(--tipo-cor);
    color: var(--tipo-cor);
    background: transparent;
    font-size: 1.35rem;
    line-height: 1.2;
    padding: .55rem .25rem;
}
.btn-tipo-fo span { font-size: .85rem; font-weight: 700; }
.btn-tipo-fo.negativo { --tipo-cor: var(--safo-negativo); }
.btn-tipo-fo.neutro   { --tipo-cor: #C98C00; }
.btn-check:checked + .btn-tipo-fo,
.btn-tipo-fo:hover {
    background-color: var(--tipo-cor);
    border-color: var(--tipo-cor);
    color: #FFFFFF;
}
.btn-check:focus-visible + .btn-tipo-fo { box-shadow: 0 0 0 .2rem rgba(85, 107, 47, .35); }
[data-bs-theme="dark"] .btn-tipo-fo.positivo:not(:hover) { color: #5FA3E0; }
[data-bs-theme="dark"] .btn-check:checked + .btn-tipo-fo.positivo { color: #FFFFFF; }

/* ---------- Badges de status ---------- */
.badge { font-weight: 600; letter-spacing: .02em; }
.text-bg-success { background-color: var(--safo-positivo) !important; }
.text-bg-danger { background-color: var(--safo-negativo) !important; }
.text-bg-warning { background-color: var(--safo-neutro) !important; color: #1E1E1E !important; }
/* selo "POSITIVO" das listas de FO: azul (pedido do usuário), legível nos dois temas */
.badge-fo-positivo { background-color: var(--safo-fo-positivo) !important; color: #FFFFFF !important; }

/* ---------- Faixa da marca (cadastro, esqueci a senha, confirmação) ----------
   Fundo sempre claro para a logo colorida ficar nítida nos dois temas. */
.safo-faixa-marca {
    background: #F7F7F5;
    border-bottom: 4px solid var(--safo-oliva);
    padding: 1rem 0;
    text-align: center;
}
.safo-faixa-marca img { height: 64px; width: auto; }

/* ---------- Página de login ----------
   Lado da marca sempre claro (logo colorida, nítida) e lado do formulário em azul-marinho,
   nos dois temas. */
.safo-login {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.safo-login .lado-marca {
    background:
        radial-gradient(circle at 30% 20%, rgba(85, 107, 47, .10), transparent 60%),
        #F7F7F5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    border-right: 4px solid var(--safo-oliva);
}
.safo-login .lado-marca .lema {
    font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--safo-oliva);
    margin-top: 1.25rem;
    text-align: center;
}
.safo-login .lado-form {
    background:
        linear-gradient(200deg, rgba(85, 107, 47, .22), transparent 50%),
        #0B2A3B;
    color: #E4E7E1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
}
.safo-login .lado-form h1, .safo-login .lado-form h2, .safo-login .lado-form h3,
.safo-login .lado-form h4, .safo-login .lado-form .form-label { color: #FFFFFF; }
.safo-login .lado-form .text-body-secondary { color: #B8C4CB !important; }
.safo-login .lado-form .form-control,
.safo-login .lado-form .form-select {
    background-color: #FFFFFF;
    color: #1E2A31;
    border-color: transparent;
}
.safo-login .lado-form .form-control:focus { border-color: #9DB26F; box-shadow: 0 0 0 .2rem rgba(157, 178, 111, .35); }
.safo-login .lado-form a,
.safo-login .lado-form .link-success { color: #C3D49A !important; }
.safo-login .lado-form a:hover,
.safo-login .lado-form .link-success:hover { color: #FFFFFF !important; }
.safo-login .caixa-form { width: 100%; max-width: 400px; }
@media (max-width: 767.98px) {
    /* no celular: faixa da marca compacta em cima e o formulário logo abaixo, sem precisar rolar */
    .safo-login { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .safo-login .lado-marca { padding: 1.25rem 1rem 1rem; border-right: 0; border-bottom: 4px solid var(--safo-oliva); }
    .safo-login .lado-marca img { max-width: 120px; }
    .safo-login .lado-marca .lema { margin-top: .5rem; font-size: .72rem; }
    .safo-login .lado-form { align-items: flex-start; padding: 1.75rem 1.25rem 2.5rem; }
}

/* filtros (Todos/Positivo/Negativo/Neutro...) cabem em celulares bem estreitos (320 px) */
@media (max-width: 399.98px) {
    .safo-filtro > .btn { padding: .3rem .5rem; font-size: .8rem; }
}

/* prévia do "Lançar FO" para vários: com muitos números rola dentro da caixa em vez de empurrar o formulário */
.safo-previa-chips { max-height: 9.5rem; overflow-y: auto; padding: .25rem; border: 1px solid var(--bs-border-color); border-radius: .5rem; }