/* ============================================================
   RelatorioGastosObras - design system (dashboard interno)
   Base slate, verde p/ confirmado, ambar p/ captura por centro.
   ============================================================ */
:root {
    --bg:        #eef1f5;
    --surface:   #ffffff;
    --ink:       #0f172a;  /* slate-900 */
    --ink-2:     #334155;  /* slate-700 */
    --muted:     #64748b;  /* slate-500 */
    --line:      #e6eaf0;
    --line-2:    #eef2f6;
    --brand:     #0f172a;  /* navbar / thead */
    --confirm:   #047857;  /* emerald-700  (dinheiro confirmado) */
    --confirm-bg:#ecfdf5;
    --warn:      #b45309;  /* amber-700    (por centro de custo) */
    --warn-bg:   #fffbeb;
    --pending:   #4f46e5;  /* indigo-600   (pendente de pagamento) */
    --accent:    #2563eb;  /* blue-600     (links / acoes) */
    --radius:    14px;
    --shadow:    0 1px 2px rgba(15,23,42,.04), 0 6px 20px rgba(15,23,42,.06);
    --shadow-sm: 0 1px 2px rgba(15,23,42,.05);
}

* { box-sizing: border-box; }

body {
    background: var(--bg);
    color: var(--ink);
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-feature-settings: "cv02","cv03","cv04","ss01";
    -webkit-font-smoothing: antialiased;
}

/* numeros alinhados (financeiro) */
.num, .table td, .table th, .stat__value, .kpi-value { font-variant-numeric: tabular-nums; }

/* ---------- Navbar ---------- */
.app-nav {
    position: sticky; top: 0; z-index: 1020;
    background: var(--brand);
    color: #e2e8f0;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.app-nav .inner {
    max-width: 1600px; margin: 0 auto;
    padding: .7rem 1.25rem;
    display: flex; align-items: center; gap: .85rem;
}
.app-nav .brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; letter-spacing: -.01em; color: #fff; text-decoration: none; }
.app-nav .brand small { display:block; font-weight: 500; font-size: .72rem; color: #94a3b8; letter-spacing: .02em; }
.brand-mark {
    width: 34px; height: 34px; border-radius: 9px; flex: none;
    background: linear-gradient(145deg, #10b981, #047857);
    display: grid; place-items: center; box-shadow: 0 2px 8px rgba(5,150,105,.35);
}
.brand-mark svg { width: 18px; height: 18px; }
.app-nav .spacer { flex: 1; }
.app-nav .nav-actions { display: flex; align-items: center; gap: .5rem; }
.app-nav .btn-ghost {
    color: #cbd5e1; border: 1px solid rgba(255,255,255,.14);
    background: transparent; border-radius: 9px; padding: .34rem .7rem;
    font-size: .85rem; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem;
    transition: background .15s, color .15s, border-color .15s;
}
.app-nav .btn-ghost:hover { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.28); }

/* ---------- Layout ---------- */
.page { max-width: 1600px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.page-head { margin-bottom: 1.25rem; }
.page-head h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .15rem; }
.page-head .sub { color: var(--muted); font-size: .9rem; margin: 0; }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 600; color: var(--muted); }

/* ---------- Cards / panels ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--line);
    font-weight: 600; color: var(--ink);
    padding: .85rem 1.1rem;
}
.card-body { padding: 1.1rem; }

/* ---------- KPI / stat tiles (alturas iguais) ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.stat {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.1rem 1.2rem;
    display: flex; flex-direction: column; min-height: 118px;
}
.stat__label { font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: .35rem; }
.stat__value { font-size: 1.7rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.15; color: var(--ink); white-space: nowrap; }
.stat--confirm .stat__value { color: var(--confirm); }
.stat--warn .stat__value    { color: var(--warn); }
.stat--pending .stat__value { color: var(--pending); }
/* card de destaque: total geral */
.stat--hero {
    background: linear-gradient(135deg, #0b1120 0%, #1e293b 55%, #334155 100%);
    border-color: transparent;
    box-shadow: 0 8px 24px rgba(15,23,42,.32);
}
.stat--hero .stat__label { color: rgba(226,232,240,.78); }
.stat--hero .stat__value { color: #fff; font-size: 1.85rem; }
.stat--hero .stat__hint  { color: rgba(226,232,240,.72); }
.stat__hint { margin-top: auto; padding-top: .5rem; font-size: .76rem; color: var(--muted); line-height: 1.3; }

/* ---------- Filtros ---------- */
.filter-bar .form-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; margin-bottom: .25rem; }
.form-control { border-color: var(--line); border-radius: 10px; }
.form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.btn-primary { background: var(--accent); border-color: var(--accent); border-radius: 10px; font-weight: 600; }
.btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; }

/* ---------- Tabelas ---------- */
.table-responsive { border-radius: var(--radius); }
.table { margin: 0; color: var(--ink-2); font-size: .9rem; }
.table > thead > tr > th {
    background: #f8fafc;
    color: var(--muted);
    text-transform: uppercase; letter-spacing: .03em;
    font-size: .7rem; font-weight: 700;
    border-bottom: 1px solid var(--line);
    padding: .6rem .7rem; white-space: nowrap;
}
.table > tbody > tr > td { padding: .55rem .7rem; border-color: var(--line-2); vertical-align: middle; }
.table > tbody > tr:hover > td { background: #f7f9fc; }
.table tfoot td { background: #f1f5f9; border-top: 2px solid var(--line); font-weight: 700; color: var(--ink); padding: .7rem .85rem; }
.row-link { cursor: pointer; }
.row-link:hover > td { background: #eef5ff !important; }
.th-sort { cursor: pointer; user-select: none; }
.th-sort:hover { color: var(--ink-2); background: #eef2f7; }
.sort-ind { font-size: .8em; color: var(--accent); }
.filtro-os { max-width: 280px; }
.val { text-align: right; font-weight: 600; white-space: nowrap; }
.val-strong { text-align: right; font-weight: 750; color: var(--ink); white-space: nowrap; }
.val-muted { color: var(--muted); }
.cc-name { font-weight: 500; }
.cc-code { color: var(--muted); font-size: .82rem; }

/* badges */
.badge { font-weight: 600; letter-spacing: .01em; border-radius: 7px; padding: .3em .55em; }
.chip { display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem; font-weight:600; padding:.18rem .5rem; border-radius:999px; border:1px solid var(--line); color:var(--muted); background:#fff; }
.chip-proj { color: var(--warn); border-color: #fde68a; background: var(--warn-bg); }

/* dados da OS (definition list) */
.dl-os { display: grid; grid-template-columns: 180px 1fr; gap: .1rem 1rem; margin: 0; }
.dl-os dt { color: var(--muted); font-weight: 600; font-size: .82rem; padding: .35rem 0; }
.dl-os dd { margin: 0; padding: .35rem 0; border-bottom: 1px solid var(--line-2); }
.dl-os dt { border-bottom: 1px solid var(--line-2); }

/* mensagens da OS */
.msg-body { overflow-wrap: anywhere; line-height: 1.5; }
.msg-body img { max-width: 100%; height: auto; border-radius: 8px; }
.msg-body table { max-width: 100%; }
.msg-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: .75rem; }
.msg-card .msg-head { background: #f8fafc; border-bottom: 1px solid var(--line); padding: .55rem .85rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem; align-items:center; }
.msg-card .msg-content { padding: .75rem .85rem; }

/* anexo link */
.anexo { display:inline-flex; align-items:center; gap:.3rem; font-size:.74rem; font-weight:600; padding:.2rem .5rem; border-radius:8px; border:1px solid var(--line); background:#fff; color:var(--ink-2); text-decoration:none; margin:0 .3rem .3rem 0; }
.anexo:hover { border-color: var(--accent); color: var(--accent); background: #f5f8ff; }

/* back link */
.back-link { color: var(--muted); text-decoration: none; font-size: .85rem; font-weight: 500; display:inline-flex; align-items:center; gap:.3rem; }
.back-link:hover { color: var(--accent); }

/* spinner overlay */
#spinnerOverlay { position: fixed; inset: 0; z-index: 1080; display: none; align-items: center; justify-content: center; background: rgba(238,241,245,.72); backdrop-filter: blur(2px); }
#spinnerOverlay .box { text-align: center; color: var(--ink-2); }

/* cancelada */
.cancelada td { text-decoration: line-through; color: #94a3b8; }

@media (max-width: 575px) {
    .dl-os { grid-template-columns: 1fr; }
    .dl-os dt { padding-bottom: 0; border-bottom: none; }
    .page-head h1 { font-size: 1.25rem; }
}

@media print {
    /* paisagem p/ caber a tabela larga; margens enxutas */
    @page { size: A4 landscape; margin: 10mm; }

    /* preserva os fundos/cores da tela (navy do total geral, verde, ambar, indigo) */
    html, body {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        background: #fff;
    }

    .no-print { display: none !important; }
    .app-nav  { display: none !important; }
    .page { max-width: none; padding: 0; }
    .page-head { margin-bottom: .6rem; }

    .card, .stat, .msg-card { box-shadow: none !important; break-inside: avoid; }
    .collapse { display: block !important; }

    /* KPIs mais compactos na impressao */
    .kpi-grid { gap: .5rem; margin-bottom: .8rem !important; }
    .stat { min-height: 0; padding: .55rem .7rem; }
    .stat__value { font-size: 1.1rem; }
    .stat__hint { font-size: .62rem; padding-top: .25rem; }

    /* tabela: nada de corte (sem scroll), fonte menor, cabecalho repetido por pagina */
    .table-responsive { overflow: visible !important; }
    .table { font-size: 7.5pt; }
    .table > thead > tr > th { padding: .3rem .4rem; }
    .table > tbody > tr > td { padding: .28rem .4rem; }
    .table thead { display: table-header-group; }
    .table tr { break-inside: avoid; }
}