/* ==========================================================================
   Prime Finance — identidade visual
   Tema claro, pensado para uso intenso (o operador financeiro vive nesta
   tela o dia inteiro): contraste confortável, hierarquia clara por cor,
   e um sinal visual imediato de urgência (dias no status) em cada card.
   ========================================================================== */

:root {
    --pf-bg:            #F1F3F7;
    --pf-surface:       #FFFFFF;
    --pf-surface-alt:   #F8F9FC;
    --pf-border:        #E3E7EF;
    --pf-text:          #1B2140;
    --pf-text-muted:    #667085;
    --pf-navy:          #1A3FA8;
    --pf-navy-light:    #2C50C0;
    --pf-accent:        #1A3FA8;
    --pf-accent-soft:   #E7ECFB;
    --pf-success:       #12805C;
    --pf-success-soft:  #E5F6EF;
    --pf-warning:       #B76E00;
    --pf-warning-soft:  #FFF4E0;
    --pf-danger:        #E03131;
    --pf-danger-soft:   #FDECEC;
    --pf-teal:          #0C8599;
    --pf-teal-soft:     #E4F6F8;
    --pf-violet:        #6C4FD8;
    --pf-violet-soft:   #EFEAFB;
    --pf-yellow:        #C9A200;
    --pf-yellow-soft:   #FBF3D6;
    --pf-orange:        #D9660B;
    --pf-orange-soft:   #FCEADB;
    --pf-green-dark:    #0B5C43;
    --pf-green-dark-soft: #DCEFE7;
    --pf-brown:         #8A5A33;
    --pf-brown-soft:    #F1E6DA;
    --pf-gray-light:    #98A2B3;
    --pf-gray-light-soft: #EFF1F4;
    --pf-slate:         #495467;
    --pf-slate-soft:    #EBEDF1;
    --pf-radius:        14px;
    --pf-radius-sm:     10px;
    --pf-shadow:        0 1px 2px rgba(20, 24, 51, .04), 0 6px 20px rgba(20, 24, 51, .06);
}

* { box-sizing: border-box; }

body {
    background: var(--pf-bg);
    color: var(--pf-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-feature-settings: 'tnum' 1;
}

.pf-topbar {
    background: var(--pf-navy);
    color: #fff;
}
.pf-topbar .navbar-brand {
    font-weight: 700;
    letter-spacing: .01em;
    color: #fff !important;
}
.pf-topbar .nav-link {
    color: rgba(255,255,255,.75) !important;
    font-weight: 500;
    font-size: .92rem;
}
.pf-topbar .nav-link.active,
.pf-topbar .nav-link:hover {
    color: #fff !important;
}
.pf-topbar .btn-import {
    background: var(--pf-accent);
    border: none;
    color: #fff;
    font-weight: 600;
    font-size: .85rem;
}
.pf-topbar .btn-import:hover { background: #15317F; color:#fff; }

/* ---------- Cartões genéricos (dashboard, pedido) ---------- */
.card-indicador,
.card-section {
    border: none;
    border-radius: var(--pf-radius);
    box-shadow: var(--pf-shadow);
    background: var(--pf-surface);
}
/* Barra colorida no topo dos cards de indicador (estilo do portal B2B Pro):
   azul por padrão; cards com significado próprio (urgência, etc.) sobrescrevem
   a cor com um modificador de classe (ver .u-* mais abaixo). */
.card-indicador {
    border-top: 3px solid var(--pf-accent);
}
.card-indicador .valor { font-size: 1.6rem; font-weight: 700; }
.stat-box { border-radius: var(--pf-radius-sm); padding: 1rem; text-align: center; }
.stat-box .num { font-size: 1.8rem; font-weight: 700; display: block; }

table td, table th { vertical-align: middle; }
.badge-status { font-size: .8rem; }

/* ---------- Tabela de listagem "limpa" (Dashboard, Régua de Cobrança) ----------
   Inspirada no visual do SigeCloud que o cliente mostrou como referência:
   mais respiro entre linhas, sem grade pesada (só linha horizontal fina
   separando as linhas), cabeçalho leve (sem fundo escuro nem borda grossa),
   e o destaque de "vencido" mais suave (tom claro, não vermelho saturado). */
.pf-tabela-limpa {
    border-collapse: separate;
    border-spacing: 0;
}
.pf-tabela-limpa thead th {
    background: var(--pf-surface-alt);
    border: none;
    border-bottom: 1px solid var(--pf-border);
    padding: .8rem 1rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--pf-text);
    white-space: nowrap;
}
.pf-tabela-limpa thead th a {
    color: var(--pf-text);
}
.pf-tabela-limpa thead th a:hover {
    color: var(--pf-accent);
}
.pf-tabela-limpa tbody td {
    border: none;
    border-bottom: 1px solid var(--pf-border);
    padding: .65rem 1rem;
    font-size: .875rem;
}
.pf-tabela-limpa tbody tr:last-child td {
    border-bottom: none;
}
.pf-tabela-limpa tbody tr:hover td {
    background: var(--pf-surface-alt);
}
.pf-tabela-limpa tbody tr.table-danger td {
    background: var(--pf-danger-soft) !important;
}
.pf-tabela-limpa tbody tr.table-danger:hover td {
    background: #FBDCDC !important;
}

.pf-cell-truncate {
    display: inline-block;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    cursor: default;
}

dt { color: var(--pf-text-muted); font-weight: 600; font-size: .74rem; letter-spacing: .03em; text-transform: uppercase; }
dd { font-size: .95rem; margin-bottom: .8rem; }

a { color: var(--pf-accent); }

/* ==========================================================================
   Caixa de Entrada do Financeiro — Kanban (financeiro.php)
   ========================================================================== */

.pf-indicadores {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: .65rem;
    margin-bottom: 1.25rem;
}
@media (max-width: 1200px) { .pf-indicadores { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px) { .pf-indicadores { grid-template-columns: repeat(2, 1fr); } }

.pf-indicador {
    background: var(--pf-surface);
    border-radius: var(--pf-radius-sm);
    box-shadow: var(--pf-shadow);
    padding: .85rem 1rem;
    border-top: 3px solid var(--pf-accent);
}
.pf-indicador .lbl { font-size: .72rem; color: var(--pf-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.pf-indicador .qtd { font-size: 1.5rem; font-weight: 800; line-height: 1.1; margin-top: .15rem; }
.pf-indicador .val { font-size: .78rem; color: var(--pf-text-muted); margin-top: .1rem; }

.pf-indicador-empresas {
    margin-top: .5rem;
    padding-top: .4rem;
    border-top: 1px solid var(--pf-border);
    font-size: .68rem;
    color: var(--pf-text-muted);
    line-height: 1.5;
}

.pf-indicador { color: var(--pf-text); }
.pf-indicador:hover { color: var(--pf-text); box-shadow: 0 2px 4px rgba(20,24,51,.08), 0 10px 24px rgba(20,24,51,.10); }
.pf-indicador.c-novo      { border-top-color: var(--pf-violet); }
.pf-indicador.c-solicitar { border-top-color: var(--pf-accent); }
.pf-indicador.c-provisionado { border-top-color: var(--pf-teal); }
.pf-indicador.c-aguardando{ border-top-color: var(--pf-warning); }
.pf-indicador.c-recebido  { border-top-color: var(--pf-success); }
.pf-indicador.c-encerrado { border-top-color: var(--pf-slate); }
.pf-indicador.c-atraso    { border-top-color: var(--pf-danger); }
.pf-indicador.c-parado    { border-top-color: var(--pf-orange); }
.pf-indicador.c-total     { border-top-color: var(--pf-navy); }

.pf-toolbar {
    background: var(--pf-surface);
    border-radius: var(--pf-radius-sm);
    box-shadow: var(--pf-shadow);
    padding: .85rem 1rem;
    margin-bottom: 1.25rem;
}
.pf-toolbar .form-control,
.pf-toolbar .form-select {
    font-size: .85rem;
}

.pf-board {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    align-items: flex-start;
}
.pf-col {
    flex: 0 0 300px;
    width: 300px;
    background: var(--pf-surface-alt);
    border-radius: var(--pf-radius);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 280px);
    min-height: 200px;
}
.pf-col-head {
    padding: .8rem .9rem .6rem;
    border-bottom: 1px solid var(--pf-border);
    border-radius: var(--pf-radius) var(--pf-radius) 0 0;
    position: sticky;
    top: 0;
    background: var(--pf-surface-alt);
    z-index: 1;
}
.pf-col-head .title { font-weight: 700; font-size: .88rem; display:flex; align-items:center; gap:.4rem; }
.pf-col-head .dot { width:9px; height:9px; border-radius:50%; display:inline-block; }
.pf-col-head .meta { font-size: .74rem; color: var(--pf-text-muted); margin-top:.15rem; }

.pf-col-body {
    padding: .6rem;
    overflow-y: auto;
    flex: 1;
}
.pf-col-body.pf-dragover { background: var(--pf-accent-soft); }

.pf-col[data-status-group="NOVO"]      .pf-col-head { border-top: 4px solid var(--pf-violet); }
.pf-col[data-status-group="FIN-01"]    .pf-col-head { border-top: 4px solid var(--pf-accent); }
.pf-col[data-status-group="FIN-02"]    .pf-col-head { border-top: 4px solid var(--pf-yellow); }
.pf-col[data-status-group="FIN-03"]    .pf-col-head { border-top: 4px solid var(--pf-success); }
.pf-col[data-status-group="CTRL-01"]   .pf-col-head { border-top: 4px solid var(--pf-brown); }
.pf-col[data-status-group="FIN-04"]    .pf-col-head { border-top: 4px solid var(--pf-slate); }

.pf-card {
    background: var(--pf-surface);
    border-radius: var(--pf-radius-sm);
    box-shadow: var(--pf-shadow);
    padding: .7rem .8rem;
    margin-bottom: .6rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.pf-card:hover {
    box-shadow: 0 2px 4px rgba(20,24,51,.06), 0 10px 24px rgba(20,24,51,.10);
    border-color: var(--pf-border);
}
.pf-card.pf-dragging { opacity: .4; }

.pf-card .codigo { font-weight: 700; font-size: .82rem; color: var(--pf-navy); }

.pf-nf-destaque {
    font-weight: 600;
    font-size: .74rem;
    color: var(--pf-accent);
    background: var(--pf-accent-soft);
    padding: .05rem .4rem;
    border-radius: 6px;
    margin-left: .1rem;
}

.pf-aviso-divergencia {
    display: inline-block;
    font-size: .9rem;
    margin-top: .3rem;
    cursor: default;
}

.pf-email-botoes {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .5rem;
}

.pf-btn-email {
    font-size: .72rem;
    font-weight: 600;
    color: var(--pf-accent);
    background: var(--pf-accent-soft);
    border: none;
    border-radius: 6px;
    padding: .3rem .55rem;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
}
.pf-btn-email:hover { filter: brightness(0.95); color: var(--pf-accent); }
.pf-btn-email-alerta {
    color: var(--pf-danger);
    background: var(--pf-danger-soft);
}

.pf-btn-regua {
    font-size: .72rem;
    font-weight: 600;
    color: var(--pf-text-muted);
    background: var(--pf-gray-light-soft);
    border: none;
    border-radius: 6px;
    padding: .3rem .55rem;
    margin-top: .4rem;
    cursor: pointer;
    display: inline-block;
}
.pf-btn-regua:hover { filter: brightness(0.95); }
.pf-btn-regua-ativa {
    color: var(--pf-brown);
    background: var(--pf-yellow-soft);
}

.pf-status-chip {
    display: inline-block;
    font-size: .66rem;
    font-weight: 700;
    padding: .1rem .45rem;
    border-radius: 999px;
    margin-top: .3rem;
    letter-spacing: .01em;
}

.pf-situacao-chip {
    display: inline-block;
    font-size: .64rem;
    font-weight: 700;
    padding: .08rem .4rem;
    border-radius: 999px;
    white-space: nowrap;
}
.pf-selo-quitado {
    background: var(--pf-success-soft);
    color: var(--pf-success);
}

/* Bolinha colorida antes do texto do status/situação — mesmo padrão visual
   do portal B2B Pro ("● Respondida"). Usa a cor do próprio texto do chip
   (currentColor), então funciona nos chips já existentes sem mexer no PHP. */
.pf-status-chip::before,
.pf-situacao-chip::before {
    content: "●";
    font-size: .6em;
    margin-right: .35em;
    position: relative;
    top: -1px;
}

/* Modificadores de cor por urgência — usados nos cards e no badge da coluna
   "Urgência" da tela Minha Cobrança, reaproveitando os tokens de cor já
   existentes no sistema. */
.card-indicador.u-atrasada,
.pf-status-chip.u-atrasada { border-top-color: var(--pf-danger); }
.card-indicador.u-vencendo,
.pf-status-chip.u-vencendo { border-top-color: var(--pf-orange); }
.card-indicador.u-preventiva,
.pf-status-chip.u-preventiva { border-top-color: var(--pf-yellow); }
.card-indicador.u-acompanhamento,
.pf-status-chip.u-acompanhamento { border-top-color: var(--pf-success); }

.pf-status-chip.u-atrasada { background: var(--pf-danger-soft); color: var(--pf-danger); border-top: none; }
.pf-status-chip.u-vencendo { background: var(--pf-orange-soft); color: var(--pf-orange); border-top: none; }
.pf-status-chip.u-preventiva { background: var(--pf-yellow-soft); color: var(--pf-yellow); border-top: none; }
.pf-status-chip.u-acompanhamento { background: var(--pf-success-soft); color: var(--pf-success); border-top: none; }
.pf-card .empresa { font-size: .8rem; color: var(--pf-text-muted); }
.pf-card .cliente { font-size: .85rem; font-weight: 600; margin-top: .1rem; }
.pf-card .obra { font-size: .76rem; color: var(--pf-text-muted); }
.pf-card .valor { font-weight: 700; font-size: .95rem; margin-top: .35rem; }
.pf-card .linha-meta { font-size: .74rem; color: var(--pf-text-muted); display:flex; justify-content:space-between; margin-top:.3rem; }
.pf-card .obs { font-size: .74rem; color: var(--pf-text-muted); margin-top: .35rem; font-style: italic; border-top: 1px dashed var(--pf-border); padding-top: .3rem; }

.pf-pill { display:inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 700; }
.pf-pill.dias-ok    { background: var(--pf-success-soft); color: var(--pf-success); }
.pf-pill.dias-atencao{ background: var(--pf-warning-soft); color: var(--pf-warning); }
.pf-pill.dias-critico{ background: var(--pf-danger-soft); color: var(--pf-danger); }

.pf-card.is-atrasado { border-left: 4px solid var(--pf-danger); background: linear-gradient(0deg, var(--pf-danger-soft), var(--pf-danger-soft)), var(--pf-surface); }

.pf-btn-iniciar {
    margin-top: .5rem;
    width: 100%;
    background: var(--pf-violet);
    border: none;
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    padding: .35rem .5rem;
    border-radius: 8px;
}
.pf-btn-iniciar:hover { background: #5B3FC4; color: #fff; }

.pf-col-empty {
    text-align: center;
    color: var(--pf-text-muted);
    font-size: .78rem;
    padding: 1.2rem .5rem;
    border: 1.5px dashed var(--pf-border);
    border-radius: var(--pf-radius-sm);
}

/* Modal de alteração de status */
#modalPedido .modal-content { border-radius: var(--pf-radius); border: none; }
#modalPedido .modal-header { background: var(--pf-navy); color: #fff; border-radius: var(--pf-radius) var(--pf-radius) 0 0; }
#modalPedido .btn-close { filter: invert(1); }

/* ==========================================================================
   Seleção múltipla / Ações em Lote (Sprint 02)
   ========================================================================== */

.pf-checkbox-wrap {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
}
.pf-select-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.pf-btn-selecionar-todos {
    background: none;
    border: none;
    color: var(--pf-accent);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    padding: 0;
    white-space: nowrap;
}
.pf-btn-selecionar-todos:hover { text-decoration: underline; }

.pf-barra-lote {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    background: var(--pf-navy);
    color: #fff;
    padding: .7rem 1rem;
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(20,24,51,.25);
    display: flex;
    align-items: center;
    gap: .75rem;
    z-index: 1040;
    font-size: .88rem;
}

#modalLote .modal-content { border-radius: var(--pf-radius); border: none; }
#modalLote .modal-header { background: var(--pf-navy); color: #fff; border-radius: var(--pf-radius) var(--pf-radius) 0 0; }
#modalLote .btn-close { filter: invert(1); }