/* ==========================================================================
   TrackPrime — identidade visual
   Mesma família do Prime Finance (Bootstrap 5 + Inter, tema claro), com
   acento em laranja de obra para diferenciar visualmente os dois sistemas.
   ========================================================================== */

:root {
    --tp-bg:            #F3F5F9;
    --tp-surface:       #FFFFFF;
    --tp-surface-alt:   #F8F9FC;
    --tp-border:        #E3E7EF;
    --tp-text:          #1B2140;
    --tp-text-muted:    #667085;
    --tp-navy:          #1B2559;
    --tp-navy-light:    #2C3568;
    --tp-orange:        #E2622D;
    --tp-orange-soft:   #FBE3D8;
    --tp-accent:        #3B5BDB;
    --tp-accent-soft:   #EBEFFD;
    --tp-success:       #12805C;
    --tp-success-soft:  #E5F6EF;
    --tp-warning:       #B76E00;
    --tp-warning-soft:  #FFF4E0;
    --tp-danger:        #E03131;
    --tp-danger-soft:   #FDECEC;
    --tp-violet:        #6C4FD8;
    --tp-violet-soft:   #EFEAFB;
    --tp-slate:         #495467;
    --tp-slate-soft:    #EBEDF1;
    --tp-radius:        14px;
    --tp-radius-sm:     10px;
    --tp-shadow:        0 1px 2px rgba(20,24,51,.04), 0 6px 20px rgba(20,24,51,.06);
    --tp-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

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

/* ---------- topbar ---------- */
.tp-topbar {
    background: var(--tp-navy);
    color: #fff;
    border-bottom: 3px solid var(--tp-orange);
}
.tp-topbar .navbar-brand { font-weight: 800; letter-spacing: .01em; color: #fff !important; }
.tp-topbar .nav-link { color: rgba(255,255,255,.75) !important; font-weight: 500; font-size: .92rem; }
.tp-topbar .nav-link.active, .tp-topbar .nav-link:hover { color: #fff !important; }
.tp-topbar .btn-outline-light { border-color: rgba(255,255,255,.4); }

/* ---------- indicadores ---------- */
.tp-indicadores {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .75rem;
    margin-bottom: 1.25rem;
}
.tp-indicador {
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-top: 3px solid var(--tp-slate);
    border-radius: var(--tp-radius-sm);
    padding: .85rem 1rem;
    box-shadow: var(--tp-shadow);
    text-decoration: none;
    color: var(--tp-text);
    display: block;
}
.tp-indicador .lbl { font-size: .72rem; color: var(--tp-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.tp-indicador .qtd { font-family: var(--tp-mono); font-size: 1.5rem; font-weight: 700; line-height: 1.1; margin-top: .15rem; }
.tp-indicador.c-total     { border-top-color: var(--tp-navy); }
.tp-indicador.c-vazio     { border-top-color: var(--tp-warning); }
.tp-indicador.c-compras   { border-top-color: var(--tp-success); }
.tp-indicador.c-recusado  { border-top-color: var(--tp-danger); }
.tp-indicador.c-48h       { border-top-color: var(--tp-warning); }
.tp-indicador.c-atraso    { border-top-color: var(--tp-orange); }
.tp-indicador.active { outline: 2px solid var(--tp-navy); outline-offset: 1px; }

/* ---------- toolbar / filtros ---------- */
.tp-toolbar {
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-sm);
    padding: .75rem;
    margin-bottom: 1rem;
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    align-items: center;
}
.tp-toolbar .form-control, .tp-toolbar .form-select { font-size: .87rem; }

/* ---------- tabela ---------- */
.tp-tabela-limpa {
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-sm);
    overflow: hidden;
}
.tp-tabela-limpa thead th {
    background: var(--tp-surface-alt);
    color: var(--tp-text-muted);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    border-bottom: 1px solid var(--tp-border);
    white-space: nowrap;
    padding: .6rem .75rem;
}
.tp-tabela-limpa tbody td {
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--tp-border);
    font-size: .87rem;
    vertical-align: middle;
}
.tp-tabela-limpa tbody tr:last-child td { border-bottom: none; }
.tp-tabela-limpa tbody tr:hover td { background: var(--tp-surface-alt); }
.tp-mono { font-family: var(--tp-mono); }
.tp-cell-obra { font-weight: 600; max-width: 220px; }
.tp-cell-sub { font-size: .76rem; color: var(--tp-text-muted); }

/* ---------- badges ---------- */
.tp-badge {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    padding: .18rem .5rem;
    border-radius: 6px;
    white-space: nowrap;
}
.tp-badge-baixo   { background: var(--tp-success-soft); color: var(--tp-success); }
.tp-badge-medio   { background: var(--tp-warning-soft); color: var(--tp-warning); }
.tp-badge-alto    { background: var(--tp-orange-soft);  color: var(--tp-orange); }
.tp-badge-neutro  { background: var(--tp-slate-soft);   color: var(--tp-text-muted); }
.tp-badge-erro    { background: var(--tp-danger-soft);  color: var(--tp-danger); }

/* célula do Pedido, replicando a formatação manual da planilha original */
.tp-cell-pedido {
    font-weight: 600;
    padding: .15rem .4rem;
    border-radius: 5px;
    display: inline-block;
}
.tp-pedido-verde    { background: #D9EAD3; color: #274E13; }
.tp-pedido-vermelho { background: #F4CCCC; color: #85200C; }
.tp-pedido-branco   { background: transparent; color: var(--tp-text); }

.tp-badge-status-vazio         { background: var(--tp-accent-soft);  color: var(--tp-accent); }
.tp-badge-status-compras       { background: var(--tp-success-soft); color: var(--tp-success); }
.tp-badge-status-recusado      { background: var(--tp-danger-soft);  color: var(--tp-danger); }
.tp-badge-status-48h           { background: var(--tp-warning-soft); color: var(--tp-warning); }
.tp-badge-status-dup           { background: var(--tp-orange-soft);  color: var(--tp-orange); }
.tp-badge-status-inadimplencia { background: var(--tp-violet-soft);  color: var(--tp-violet); }

/* select de status embutido na tabela */
.tp-status-select {
    font-family: 'Inter', sans-serif;
    font-size: .74rem;
    font-weight: 600;
    padding: .3rem .4rem;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    max-width: 190px;
}

/* ---------- página do pedido ---------- */
.tp-detalhe-card {
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius);
    box-shadow: var(--tp-shadow);
    padding: 1.5rem;
}
.tp-detalhe-card h6 {
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--tp-text-muted);
    margin-bottom: .75rem;
}

.tp-pagination { display: flex; justify-content: center; gap: .5rem; margin-top: 1rem; }

/* ---------- contatos por obra (usado em contatos.php e pedido.php) ---------- */
.tp-contato-card {
    background: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-left: 4px solid var(--tp-accent);
    border-radius: var(--tp-radius-sm);
    padding: 1rem 1.15rem;
    margin-bottom: .8rem;
    box-shadow: var(--tp-shadow);
}
.tp-contato-card .obra { font-weight: 700; font-size: 1.02rem; color: var(--tp-navy); }
.tp-contato-card .pedidos { font-size: .74rem; color: var(--tp-text-muted); margin-bottom: .6rem; }
.tp-contato-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem 1.4rem;
    font-size: .87rem;
    padding: .35rem 0;
    border-top: 1px dashed var(--tp-border);
}
.tp-contato-linha:first-of-type { border-top: none; }
.tp-contato-linha .resp { font-weight: 600; min-width: 180px; }
.tp-contato-linha a { color: var(--tp-accent); text-decoration: none; }
.tp-contato-linha a:hover { text-decoration: underline; }
.tp-sem-contato { color: var(--tp-text-muted); font-size: .84rem; font-style: italic; }

.tp-btn-remover-contato {
    background: none; border: none; color: var(--tp-danger);
    font-size: .8rem; cursor: pointer; padding: 0 0 0 .5rem; line-height: 1;
}
.tp-btn-remover-contato:hover { text-decoration: underline; }

.tp-add-contato-toggle {
    background: none; border: 1px dashed var(--tp-border); color: var(--tp-accent);
    font-size: .78rem; font-weight: 600; padding: .3rem .6rem; border-radius: 6px;
    margin-top: .5rem; cursor: pointer;
}
.tp-add-contato-toggle:hover { background: var(--tp-accent-soft); }

.tp-add-contato-form {
    display: none;
    margin-top: .6rem;
    padding: .7rem;
    background: var(--tp-surface-alt);
    border-radius: 8px;
    gap: .4rem;
}
.tp-add-contato-form.show { display: flex; flex-wrap: wrap; }
.tp-add-contato-form input {
    font-size: .82rem; padding: .35rem .5rem; border: 1px solid var(--tp-border); border-radius: 6px; flex: 1; min-width: 140px;
}
.tp-add-contato-form .btn-salvar {
    background: var(--tp-navy); color: #fff; border: none; font-size: .78rem; font-weight: 600;
    padding: .35rem .8rem; border-radius: 6px;
}
.tp-add-contato-form .btn-cancelar {
    background: none; border: none; color: var(--tp-text-muted); font-size: .78rem;
}

@media (max-width: 992px) {
    .tp-indicadores { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 576px) {
    .tp-indicadores { grid-template-columns: repeat(2, 1fr); }
}