/* dashboard.css — componentes visuais compartilhados entre mkt-dashboard e ti-dashboard.
 * .kpi-grid, .kpi-trend img, .filters-bar, .clear-btn, .chat-header/close e inputs de chat ficam inline (accent/layout específicos). */

/* ── KPI ── */
.kpi {
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:22px 20px;
  position:relative; overflow:hidden; cursor:default;
  transition:border-color .25s, transform .25s, box-shadow .25s;
}
.kpi::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--kc,var(--accent)); }
.kpi::after {
  content:''; position:absolute; top:0; left:0; right:0; bottom:0;
  background:radial-gradient(circle at 20% 10%, var(--kc,var(--accent)) 0%, transparent 60%);
  opacity:0; transition:opacity .3s;
}
.kpi:hover { border-color:var(--kc,var(--accent)); transform:translateY(-3px); box-shadow:var(--glow), 0 8px 24px rgba(0,0,0,.2); }
.kpi:hover::after { opacity:.06; }
.kpi-label { font-family:'DM Mono',monospace; font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:10px; position:relative; z-index:1; }
.kpi-value { font-family:'Space Grotesk',sans-serif; font-size:clamp(28px,2vw,36px); font-weight:700; color:var(--kc,var(--accent)); line-height:1; position:relative; z-index:1; transition:transform .2s; overflow-wrap:anywhere; letter-spacing:-.04em; }
.kpi:hover .kpi-value { transform:scale(1.05); }
.kpi-sub { font-size:12px; color:var(--text2); margin-top:8px; position:relative; z-index:1; line-height:1.35; min-height:2.2em; }
.kpi-trend { position:absolute; bottom:12px; right:12px; width:24px; height:24px; opacity:.85; display:flex; align-items:center; justify-content:center; pointer-events:none; color:var(--accent); }

/* ── Grid / Cards ── */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; margin-bottom:18px; }
@media(max-width:960px) { .grid-2,.grid-3 { grid-template-columns:1fr; } }
.card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:22px; transition:border-color .25s, box-shadow .25s; margin-bottom:18px; }
.card:hover { border-color:var(--border2); box-shadow:var(--shadow); }
.card-title { font-family:'Syne',sans-serif; font-weight:700; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:18px; display:flex; align-items:center; gap:8px; }
.card-title-bar { width:3px; height:14px; background:var(--accent); border-radius:2px; flex-shrink:0; }

/* ── Barras ── */
.bar-list { display:flex; flex-direction:column; gap:9px; }
.bar-item { display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:8px; transition:background .2s, transform .2s; cursor:pointer; }
.bar-item:hover { background:var(--surface2); transform:translateX(3px); }
.bar-item.active { background:var(--accent-dim); outline:1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.bar-label { font-size:12px; color:var(--text2); min-width:110px; max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right; transition:color .2s; }
.bar-item:hover .bar-label { color:var(--text); }
.bar-track { flex:1; height:7px; background:var(--surface3); border-radius:4px; overflow:hidden; }
.bar-fill { height:100%; border-radius:4px; background:var(--bc,var(--accent)); transform-origin:left; transition:width .9s cubic-bezier(.4,0,.2,1); }
.bar-fill.animate { width:0 !important; }
.bar-count { font-family:'DM Mono',monospace; font-size:11px; color:var(--text); min-width:36px; text-align:right; }

/* ── Donut ── */
.donut-wrap { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.donut-legend { display:flex; flex-direction:column; gap:8px; }
.donut-svg .donut-slice { transform-origin:70px 70px; transition:transform .28s ease, opacity .28s ease, filter .28s ease; }
.donut-svg .donut-slice.clickable { cursor:pointer; }
.donut-svg .donut-slice.clickable:hover { transform:scale(1.04); opacity:1; }
.donut-svg .donut-slice.dimmed { opacity:.35; }
.donut-svg .donut-slice.selected { transform:scale(1.08); opacity:1; filter:drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 45%, transparent)); animation:donutSelect .32s ease; }
@keyframes donutSelect { 0% { transform:scale(1); } 60% { transform:scale(1.12); } 100% { transform:scale(1.08); } }
.legend-item { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text2); padding:4px 8px; border-radius:6px; cursor:pointer; transition:background .2s, color .2s; }
.legend-item:hover { background:var(--surface2); color:var(--text); }
.legend-item.active { background:var(--surface2); color:var(--text); outline:1px solid var(--accent); }
.legend-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; transition:transform .2s; }
.legend-item:hover .legend-dot { transform:scale(1.3); }

/* ── Period presets ── */
.period-preset { background:var(--surface3); border:1px solid var(--border); color:var(--muted); border-radius:6px; padding:0 10px; font-size:11px; cursor:pointer; transition:all .15s; height:36px; white-space:nowrap; }
.period-preset:hover,.period-preset.active { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }

/* ── Inputs de filtro ── */
.filter-group { display:flex; flex-direction:column; gap:6px; min-width:140px; }
.filter-label { font-family:'DM Mono',monospace; font-size:10px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }
.filter-select, .search-bar { background:var(--surface2); border:1px solid var(--border2); color:var(--text); border-radius:8px; font-family:'DM Sans',sans-serif; font-size:12px; padding:9px 14px; outline:none; transition:border-color .2s, box-shadow .2s; }
.filter-select:focus, .search-bar:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }

/* ── Export ── */
.export-btn { display:flex; align-items:center; gap:6px; white-space:nowrap; background:var(--surface2); border:1px solid var(--border2); color:var(--text2); border-radius:8px; padding:8px 14px; font-size:12px; cursor:pointer; transition:border-color .15s, color .15s; }
.export-btn:hover { border-color:var(--accent); color:var(--text); }

/* ── Badge ── */
.badge { display:inline-block; padding:2px 8px; border-radius:5px; font-size:10px; font-family:'DM Mono',monospace; font-weight:500; text-transform:uppercase; letter-spacing:.4px; white-space:nowrap; transition:transform .2s; }

/* ── Tabela ── */
.tbl-wrap { overflow-x:auto; border-radius:8px; }
table { width:100%; border-collapse:collapse; font-size:12px; }
th { font-family:'DM Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); padding:10px 12px; border-bottom:1px solid var(--border); background:var(--surface); white-space:nowrap; position:sticky; top:0; }
td { padding:10px 12px; border-bottom:1px solid var(--border); color:var(--text); vertical-align:middle; }
tr:last-child td { border-bottom:none; }
tbody tr { transition:background .15s, transform .15s; cursor:default; }
tbody tr:hover td { background:var(--surface2); }
tbody tr:hover { transform:translateX(2px); }
.mono { font-family:'DM Mono',monospace; font-size:11px; }

/* ── Chat (estrutura) ── */
.chat-btn { position:fixed; bottom:24px; right:24px; width:54px; height:54px; border-radius:50%; background:var(--accent); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:24px; box-shadow:0 4px 16px color-mix(in srgb, var(--accent) 35%, transparent); transition:transform .2s, box-shadow .2s; z-index:300; }
.chat-btn:hover { transform:scale(1.1); box-shadow:0 6px 24px color-mix(in srgb, var(--accent) 55%, transparent); }
.chat-btn:active { transform:scale(.95); }
.chat-modal { display:none; position:fixed; bottom:90px; right:24px; width:min(420px, calc(100vw - 24px)); max-height:min(640px, calc(100vh - 120px)); background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:0 8px 32px rgba(0,0,0,.4); flex-direction:column; z-index:300; animation:slideUp .3s cubic-bezier(.4,0,.2,1); }
.chat-modal.open { display:flex; }
@keyframes slideUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

/* ── Pagination ── */
.pagination { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 0 4px; }
.pagination-info { font-size:11px; color:var(--muted); font-family:'DM Mono',monospace; }
.pagination-controls { display:flex; align-items:center; gap:4px; }
.page-btn { background:var(--surface2); border:1px solid var(--border2); color:var(--text2); border-radius:6px; width:30px; height:30px; font-size:12px; cursor:pointer; transition:all .15s; display:inline-flex; align-items:center; justify-content:center; font-family:'DM Mono',monospace; }
.page-btn:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
.page-btn.active { background:var(--accent); border-color:var(--accent); color:#000; font-weight:600; }
.page-btn:disabled { opacity:.35; cursor:not-allowed; }
.page-size-sel { background:var(--surface2); border:1px solid var(--border2); color:var(--text2); border-radius:6px; height:30px; padding:0 8px; font-size:11px; font-family:'DM Mono',monospace; cursor:pointer; outline:none; transition:border-color .15s; }
.page-size-sel:hover,.page-size-sel:focus { border-color:var(--accent); color:var(--text); }