/* =============================================================
   AuditaPro — Design System (fonte única de verdade)
   Escopo: tudo é aplicado somente dentro de .ds-scope, para NÃO
   afetar as telas legadas de admin/campanha (Bootstrap 4 + jQuery).
   Objetivo: coesão visual entre overview e relatórios, sem depender
   de qual Bootstrap está carregado por baixo.
   ============================================================= */

:root {
    --ds-primary: #2563EB;
    --ds-primary-dark: #1D4ED8;
    --ds-primary-light: #EFF6FF;
    --ds-success: #059669;
    --ds-success-light: #ECFDF5;
    --ds-violet: #7C3AED;
    --ds-amber: #D97706;
    --ds-amber-light: #FFFBEB;
    --ds-ink: #0F172A;
    --ds-muted: #64748B;
    --ds-line: #E2E8F0;
    --ds-bg: #F1F5F9;
    --ds-card: #ffffff;
    --ds-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 12px rgba(15,23,42,.06);
    --ds-shadow-hover: 0 8px 24px rgba(15,23,42,.10);
    --ds-radius: 14px;
    --ds-radius-sm: 10px;
    --ds-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

.ds-scope { background: var(--ds-bg); font-family: var(--ds-font); color: #334155; }

/* ---- Polyfill dos utilitários (para funcionar mesmo sob Bootstrap 4) ---- */
.ds-scope .d-flex { display: flex !important; }
.ds-scope .flex-wrap { flex-wrap: wrap !important; }
.ds-scope .align-items-center { align-items: center !important; }
.ds-scope .align-items-start { align-items: flex-start !important; }
.ds-scope .align-self-end { align-self: flex-end !important; }
.ds-scope .justify-content-between { justify-content: space-between !important; }
.ds-scope .ms-auto { margin-left: auto !important; }
.ds-scope .me-auto { margin-right: auto !important; }
.ds-scope .gap-1 { gap: .25rem !important; }
.ds-scope .gap-2 { gap: .5rem !important; }
.ds-scope .gap-3 { gap: 1rem !important; }
.ds-scope .text-end { text-align: right !important; }
.ds-scope .text-start { text-align: left !important; }
.ds-scope .w-100 { width: 100% !important; }

/* ---- Botões ---- */
.ds-scope .btn { border-radius: var(--ds-radius-sm); font-weight: 700; padding: .5rem 1rem; border: 1px solid transparent; transition: all .15s ease; white-space: nowrap; }
.ds-scope .btn i { margin-right: .35rem; }
.ds-scope .btn-primary { background: var(--ds-primary); border-color: var(--ds-primary); color: #fff; }
.ds-scope .btn-primary:hover { background: var(--ds-primary-dark); border-color: var(--ds-primary-dark); color: #fff; }
.ds-scope .btn-success { background: var(--ds-success); border-color: var(--ds-success); color: #fff; }
.ds-scope .btn-success:hover { filter: brightness(.95); color: #fff; }
.ds-scope .btn-light { background: #fff; border-color: var(--ds-line); color: var(--ds-muted); }
.ds-scope .btn-light:hover { border-color: var(--ds-primary); color: var(--ds-primary); }
.ds-scope .btn-sm { padding: .35rem .7rem; font-size: .82rem; }

/* ---- Cards ---- */
.ds-scope .card { border: 1px solid var(--ds-line); border-radius: var(--ds-radius); box-shadow: var(--ds-shadow); background: var(--ds-card); }
.ds-scope .card-header { background: transparent; border-bottom: 1px solid var(--ds-line); padding: 1rem 1.5rem; }
.ds-scope .card-header h4, .ds-scope .card-header h5 { font-weight: 700; color: var(--ds-ink); letter-spacing: -.01em; }
.ds-scope .card-header i { color: var(--ds-primary); }

/* ---- Header (gradiente, igual ao overview) ---- */
.ds-scope .campaign-header, .ds-scope .ds-header {
    background: linear-gradient(135deg, var(--ds-primary-dark) 0%, var(--ds-primary) 55%, #3B82F6 100%);
    color: #fff; border-radius: var(--ds-radius); box-shadow: var(--ds-shadow);
    position: relative; overflow: hidden;
}
.ds-scope .campaign-header::after, .ds-scope .ds-header::after {
    content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(255,255,255,.14), transparent 70%); pointer-events: none;
}
.ds-scope .campaign-header .card-title { font-weight: 800; letter-spacing: -.02em; color: #fff; }
.ds-scope .campaign-header .card-text, .ds-scope .campaign-header .card-text strong { color: #DBEAFE; }
/* Header do relatório do veículo: campanhas selecionadas em blocos */
.ds-scope .campaign-header .vr-head-sub { color: #DBEAFE; font-size: .85rem; margin-top: .15rem; font-weight: 600; }
.ds-scope .campaign-header .vr-camps { margin-top: 1.1rem; display: flex; flex-direction: column; gap: .8rem; }
.ds-scope .campaign-header .vr-camp { padding-top: .8rem; border-top: 1px solid rgba(255,255,255,.22); }
.ds-scope .campaign-header .vr-camp:first-child { padding-top: 0; border-top: 0; }
.ds-scope .campaign-header .vr-camp-name { color: #fff; font-weight: 800; font-size: 1.08rem; letter-spacing: -.01em; }
.ds-scope .campaign-header .vr-camp-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.ds-scope .campaign-header .vr-chip { display: inline-flex; align-items: center; gap: .4rem; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); color: #fff; border-radius: 20px; padding: .25rem .75rem; font-size: .8rem; font-weight: 600; }
.ds-scope .campaign-header .vr-chip i { opacity: .9; }

/* ---- KPIs ---- */
.ds-scope .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
.ds-scope .kpi-card { border: 1px solid var(--ds-line); border-radius: 12px; padding: 1.15rem; text-align: center; background: var(--ds-card); transition: transform .18s ease, box-shadow .18s ease; }
.ds-scope .kpi-card:hover { transform: translateY(-3px); box-shadow: var(--ds-shadow-hover); }
.ds-scope .kpi-label { font-size: .72rem; color: var(--ds-muted); text-transform: uppercase; font-weight: 700; letter-spacing: .04em; margin-bottom: .4rem; }
.ds-scope .kpi-value { font-size: 1.7rem; font-weight: 800; color: var(--ds-ink); letter-spacing: -.02em; }
.ds-scope .kpi-card.primary { background: var(--ds-primary-light); } .ds-scope .kpi-card.primary .kpi-value { color: var(--ds-primary); }
.ds-scope .kpi-card.success { background: var(--ds-success-light); } .ds-scope .kpi-card.success .kpi-value { color: var(--ds-success); }
.ds-scope .kpi-card.warning { background: var(--ds-amber-light); } .ds-scope .kpi-card.warning .kpi-value { color: var(--ds-amber); }

/* ---- Tabelas ---- */
.ds-scope .table-container { border: 1px solid var(--ds-line); border-radius: 12px; overflow: hidden; }
.ds-scope .table thead th { background: #F8FAFC; color: var(--ds-muted); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid var(--ds-line); }
.ds-scope .table tbody tr:hover { background: var(--ds-primary-light); }
.ds-scope .progress { border-radius: 6px; background: #EEF2F7; }
.ds-scope .progress-bar { background-color: var(--ds-primary); }

/* ---- Resumo por Campanha ---- */
.ds-scope .campaign-summary .card-header h4 i { color: var(--ds-primary); }
.ds-scope .cs-table { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.ds-scope .cs-table thead th {
    background: #F8FAFC; color: var(--ds-muted); font-weight: 700; font-size: .7rem;
    text-transform: uppercase; letter-spacing: .05em; padding: .7rem 1rem;
    border-bottom: 2px solid var(--ds-line); white-space: nowrap; position: sticky; top: 0;
}
.ds-scope .cs-table thead th.cs-num { text-align: right; }
.ds-scope .cs-table tbody td { padding: .8rem 1rem; border-bottom: 1px solid var(--ds-line); font-size: .95rem; color: #334155; }
.ds-scope .cs-table tbody td.cs-num { text-align: right; font-weight: 600; color: var(--ds-ink); }
.ds-scope .cs-table .cs-name { font-weight: 700; color: var(--ds-ink); }
.ds-scope .cs-table .cs-name::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ds-primary); margin-right: .55rem; vertical-align: middle; opacity: .55; }
.ds-scope .cs-table tbody tr { transition: background .12s ease; }
.ds-scope .cs-table tbody tr:hover { background: var(--ds-primary-light); }
.ds-scope .cs-table tbody tr:last-child td { border-bottom: 0; }
.ds-scope .cs-table .cs-empty { color: #CBD5E1; }
.ds-scope .cs-table .cs-pct { color: var(--ds-primary-dark); }
.ds-scope .cs-table tfoot td { padding: .85rem 1rem; border-top: 2px solid var(--ds-line); background: var(--ds-primary-light); font-weight: 800; color: var(--ds-ink); }
.ds-scope .cs-table tfoot td.cs-num { text-align: right; }
.ds-scope .cs-wrap { border: 1px solid var(--ds-line); border-radius: var(--ds-radius-sm); overflow: hidden; }

/* ---- Barra de filtros ---- */
.ds-scope .filter-form .card-title { display: none; }
.ds-scope .filter-form .form-label { font-weight: 700; color: var(--ds-muted); text-transform: uppercase; letter-spacing: .04em; font-size: .68rem; margin-bottom: .35rem; }
.ds-scope .filter-form .form-control { border-radius: var(--ds-radius-sm); border: 1px solid var(--ds-line); }
.ds-scope .filter-form .form-control:focus { border-color: var(--ds-primary); box-shadow: 0 0 0 3px var(--ds-primary-light); }
.ds-scope .filter-form > .d-flex { display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: flex-end; }
.ds-scope .filter-form .form-group { margin-bottom: 0; }
.ds-scope .filter-actions { display: flex; gap: .5rem; flex-wrap: nowrap; align-items: center; }

/* ---- Multi-select de campanhas (TomSelect) ---- */
.ds-scope .campaign-multi-group .ts-control { border-radius: var(--ds-radius-sm) !important; border: 1px solid var(--ds-line); min-height: 42px; }
.ds-scope .campaign-multi-group .ts-control .item { background: var(--ds-primary) !important; color: #fff !important; border-radius: 8px; font-weight: 600; padding: 3px 8px; }
.ds-scope .campaign-multi-group .ts-control .item .remove { border-left: 1px solid rgba(255,255,255,.4); color: #fff; }
.ds-scope .campaign-multi-group .ts-dropdown .active { background: var(--ds-primary-light); color: var(--ds-primary); }

/* ---- Calendário (Flatpickr) e atalhos ---- */
.ds-scope .period-fp #periodDisplay { cursor: pointer; background: #fff; font-weight: 600; }
/* Atalhos abaixo do calendário (evita colisão com as setas de mês do Flatpickr, que
   ficam ancoradas no topo do calendário). */
.fp-presets { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px; border-top: 1px solid var(--ds-line); background: #f8fafc; }
.fp-presets button { border: 1px solid var(--ds-line); background: #fff; color: #334155; font-size: .78rem; font-weight: 600; padding: .3rem .7rem; border-radius: 20px; cursor: pointer; transition: all .12s; }
.fp-presets button:hover { border-color: var(--ds-primary); color: var(--ds-primary); background: var(--ds-primary-light); }

/* ---- App-shell: sidebar + toggle (correção do toggle sobreposto) ---- */
/* main-content é item flex ao lado da sidebar: deve preencher o espaço restante.
   min-width:0 evita o overflow horizontal clássico do flexbox (item não encolhe
   abaixo do conteúdo). Sem max-width/margin auto, que somavam à sidebar e estouravam. */
.ds-scope .main-content { min-width: 0; padding: 1.75rem; }
#report-wrapper.ds-scope { overflow-x: hidden; }
.ds-scope .sidebar { box-shadow: var(--ds-shadow); border-right: 1px solid var(--ds-line); padding-top: 4.25rem; }
.ds-scope .sidebar .nav-link { border-radius: var(--ds-radius-sm); color: var(--ds-muted); font-weight: 600; }
.ds-scope .sidebar .nav-link.active, .ds-scope .sidebar .nav-link:hover { background: var(--ds-primary); color: #fff; }
.ds-scope .sidebar .nav-link i { color: inherit; }
.ds-scope .sidebar-toggle {
    display: flex !important; align-items: center; justify-content: center;
    position: fixed; top: 14px; left: 14px; z-index: 1100;
    width: 40px; height: 40px; border-radius: var(--ds-radius-sm);
    background: #fff; border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow); cursor: pointer;
}
.ds-scope .sidebar-toggle i { color: var(--ds-primary); font-size: 1.2rem; margin: 0; }