/* ── Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
    font-size: 13px;
    background: #f0f2f5;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #1e293b;
    margin: 0; padding: 0;
}

/* ── App header ────────────────────────────────────────────── */
.app-header {
    background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
    color: white;
    height: 46px;
    display: flex;
    align-items: center;
    padding: 0 18px;
    gap: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.app-header .brand { font-weight: 800; font-size: 15px; letter-spacing: .06em; }
.app-header .subtitle { font-size: 11px; opacity: .5; }
.app-header .user-badge {
    margin-left: auto;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 20px;
    padding: 2px 12px;
    font-size: 11px;
    font-weight: 500;
}

/* ── Tab nav ─────────────────────────────────────────────── */
.nav-tabs {
    background: white;
    border-bottom: 1px solid #e2e8f0;
    padding: 0 14px;
    margin-bottom: 0;
}
.nav-tabs .nav-link {
    font-size: 13px; font-weight: 500;
    color: #64748b; padding: 10px 16px;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    transition: color .12s, border-color .12s;
}
.nav-tabs .nav-link:hover  { color: #1d4ed8; background: none; border-bottom-color: #bfdbfe; }
.nav-tabs .nav-link.active { color: #1d4ed8; font-weight: 700; border-bottom-color: #1d4ed8; background: none; }

/* ── Filter bar ──────────────────────────────────────────── */
.filter-bar {
    background: white;
    border-bottom: 1px solid #e2e8f0;
    padding: 8px 16px;
    display: flex; flex-wrap: wrap;
    align-items: center; gap: 8px;
    min-height: 56px;
}
.filter-label {
    font-size: 10px; font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase; letter-spacing: .07em;
    white-space: nowrap;
}

/* ── KPI cards ───────────────────────────────────────────── */
.kpi-card {
    border: none;
    border-radius: 10px;
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
    border-top: 3px solid #e2e8f0;
    transition: box-shadow .18s;
}
.kpi-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.1); }
.kpi-card.accent-blue   { border-top-color: #3b82f6; }
.kpi-card.accent-green  { border-top-color: #22c55e; }
.kpi-card.accent-amber  { border-top-color: #f59e0b; }
.kpi-card.accent-gray   { border-top-color: #94a3b8; }
.kpi-card.accent-purple { border-top-color: #8b5cf6; }
.kpi-card .card-body { padding: 14px 16px; }
.kpi-label {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    color: #94a3b8; margin-bottom: 8px;
}
/* CRITICAL: must be display:block so setKpi() works after removing d-block */
.kpi-value {
    display: block;
    font-size: 2.2rem; font-weight: 800;
    letter-spacing: -.04em; line-height: 1;
}
.kpi-value.good    { color: #16a34a; }
.kpi-value.warn    { color: #d97706; }
.kpi-value.bad     { color: #dc2626; }
.kpi-value.neutral { color: #1e293b; }
.kpi-sub  { font-size: 11px; color: #94a3b8; margin-top: 5px; }

/* ── Cards ───────────────────────────────────────────────── */
.card {
    border: none; border-radius: 10px;
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
}
.card-header-sm {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    color: #64748b;
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    border-radius: 10px 10px 0 0;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}

/* ── Dashboard tables ─────────────────────────────────────── */
.dash-table {
    font-size: 12px;
    border-collapse: collapse;
    width: 100%;
}
.dash-table thead th {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    color: #64748b;
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
    padding: 8px 10px;
    white-space: nowrap;
    user-select: none;
}
/* Sort cursor hint for sortable headers */
.dash-table thead th[title] { cursor: pointer; }
.dash-table thead th[title]:hover { background: #eff6ff; color: #1d4ed8; }

.dash-table tbody td {
    padding: 6px 10px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    color: #334155;
}
.dash-table tbody tr:last-child td { border-bottom: none; }

/* Zebra striping */
.dash-table tbody tr:nth-child(even) { background: #fafbfc; }
.dash-table tbody tr:hover           { background: #eff6ff !important; }

/* Number columns: tighter, monospaced feel */
.dash-table td.text-end,
.dash-table th.text-end { font-variant-numeric: tabular-nums; }

/* ── Inline % badges in tables ───────────────────────────── */
.pct-good  { color: #15803d; font-weight: 600; }
.pct-warn  { color: #b45309; font-weight: 600; }
.pct-bad   { color: #b91c1c; font-weight: 600; }

/* ── Colours ─────────────────────────────────────────────── */
.pos     { color: #15803d !important; font-weight: 600; }
.neg     { color: #b91c1c !important; font-weight: 600; }
.neutral { color: #64748b; }
.good    { color: #15803d !important; font-weight: 700; }
.warn    { color: #b45309 !important; font-weight: 700; }
.bad     { color: #b91c1c !important; font-weight: 700; }
.text-muted { color: #94a3b8 !important; }

/* ── Skeleton / loading ──────────────────────────────────── */
@keyframes shimmer {
    0%   { background-position: -800px 0; }
    100% { background-position:  800px 0; }
}
.skeleton {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 800px 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: 6px;
    display: block;
}
.skel-kpi   { height: 52px; }
.skel-row   { height: 20px; margin: 7px 10px; }
.skel-chart { height: 145px; margin: 10px; }

/* ── Tom Select tweaks ───────────────────────────────────── */
.ts-wrapper.single .ts-control,
.ts-wrapper.multi  .ts-control {
    min-height: 34px !important;
    padding: 5px 32px 5px 10px !important;
    font-size: 13px !important;
    border-radius: 6px !important;
    border-color: #e2e8f0 !important;
    box-shadow: none !important;
}
.ts-wrapper.single .ts-control { padding-right: 32px !important; }
.ts-wrapper.focus .ts-control { border-color: #3b82f6 !important; box-shadow: 0 0 0 2px rgba(59,130,246,.15) !important; }
.ts-dropdown { font-size: 13px !important; border-color: #e2e8f0 !important; border-radius: 6px !important; }
.ts-dropdown .option { padding: 5px 10px !important; }
.ts-dropdown .option.active { background: #eff6ff !important; color: #1d4ed8 !important; }

/* ── Group toggle (Stocks) ───────────────────────────────── */
.toggle-icon { font-size: 10px; color: #94a3b8; user-select: none; cursor: pointer; }
.group-header:hover { background: #f8fafc !important; cursor: pointer; }

/* ── Scrollable containers ───────────────────────────────── */
.tbl-scroll { overflow-y: auto; }

/* Sticky thead — works correctly with 2-row headers */
.tbl-scroll .dash-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}
.tbl-scroll .dash-table thead th {
    background: #f8fafc !important;
}
/* Keep .sticky-th for any individual usage */
.sticky-th {
    background: #f8fafc !important;
    box-shadow: 0 1px 0 #e2e8f0;
}

/* Clickable rows in cross-filter tables */
.dash-table tbody tr.row-clickable { cursor: pointer; }

/* ── Selected row ─────────────────────────────────── */
.dash-table tbody tr.selected-row,
.dash-table tbody tr.selected-row:hover  { background: #bfdbfe !important; }
.dash-table tbody tr.selected-row td     { color: #1e3a8a !important; font-weight: 600; }
.dash-table tbody tr.selected-row td:first-child { border-left: 3px solid #3b82f6; }

/* ── Mini KPI cards (2×2 ao lado do gráfico) ─────────────── */
.kpi-card-mini .card-body {
    padding: 14px 18px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}
.kpi-card-mini .kpi-label { margin-bottom: 0; font-size: 9px; }
.kpi-card-mini .skel-kpi  { height: 38px; }

/* Linha Real / Objetivo */
.mini-row { display: flex; align-items: baseline; gap: 7px; }
.mini-row-lbl {
    font-size: 9px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: #94a3b8; min-width: 26px; flex-shrink: 0;
}
.mini-real  { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.mini-obj   { font-size: 1.15rem; font-weight: 600; color: #64748b; letter-spacing: -.02em; }

/* Badge de % no canto do mini-card */
.mini-pct-badge {
    font-size: 11px; font-weight: 700; letter-spacing: .01em;
    padding: 2px 8px; border-radius: 20px;
    background: #f1f5f9; color: #64748b; white-space: nowrap;
}
.mini-pct-badge.good { background: #dcfce7; color: #166534; }
.mini-pct-badge.warn { background: #fef9c3; color: #854d0e; }
.mini-pct-badge.bad  { background: #fee2e2; color: #991b1b; }

/* Borda superior = cor de performance (segmentos iguais ao gauge: verde ≥80%) */
.kpi-card-mini.perf-good    { border-top-color: #22c55e !important; }
.kpi-card-mini.perf-warn    { border-top-color: #f59e0b !important; }
.kpi-card-mini.perf-bad     { border-top-color: #ef4444 !important; }
.kpi-card-mini.perf-neutral { border-top-color: #e2e8f0 !important; }

/* ── Gauge charts (Canvas 2D com seta) ────────────────────── */
.gauge-wrap  { text-align: center; flex: 1; padding: 4px 8px 0; }
.gauge-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #94a3b8; margin-bottom: 1px; }
.gauge-sub   { font-size: 10px; color: #94a3b8; margin-top: -2px; white-space: nowrap; }