/**
 * InfinityAnchor — app.css
 *
 * Componentes. NENHUMA cor literal aqui — só `var(--token)`.
 * As cores vivem em tokens/colors.css, único arquivo da whitelist do lint
 * (Peça 9, seção 10.2). Literal neste arquivo é ERRO de CI.
 *
 * Sistema de temas: 5 cores × 4 modos = 20 combinações.
 *
 * Fonte: Plus Jakarta Sans (Google Fonts)
 * Mono:  JetBrains Mono (para valores financeiros)
 */

@import url('tokens/colors.css');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600;700&display=swap');

/* ══════════════════════════════════════════════════════════════════════════════
   1. RESET
   ══════════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: var(--bg);
    color: var(--txt);
    display: flex;
    min-height: 100vh;
    transition: background .3s, color .3s;
}

/* ══════════════════════════════════════════════════════════════════════════════
   4. SIDEBAR
   ══════════════════════════════════════════════════════════════════════════════ */
.sidebar { width: 240px; background: var(--sb-bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; overflow-y: auto; }
.sb-logo { padding: 1.25rem; display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.sb-logo-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--grad); display: grid; place-items: center; color: var(--on-accent); font-weight: 800; font-size: .7rem; }
.sb-logo-text { font-weight: 800; font-size: .95rem; color: var(--on-accent); letter-spacing: -.03em; }
.sb-logo-text span { color: var(--p2); }
.sb-section { padding: .25rem 0; }
.sb-title { padding: .5rem 1.25rem; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--sb-txt); }
.sb-item { display: flex; align-items: center; gap: .6rem; padding: .55rem 1.25rem; font-size: .82rem; color: var(--txt3); text-decoration: none; transition: all .15s; border-left: 3px solid transparent; cursor: pointer; }
.sb-item:hover { background: var(--sb-hover); color: var(--txt2); }
.sb-item.active { color: var(--p2); background: var(--tint-primary-soft); border-left-color: var(--p); }
.sb-item .icon { font-size: .9rem; width: 20px; text-align: center; }
.sb-badge { margin-left: auto; font-size: .6rem; font-weight: 700; padding: .1rem .4rem; border-radius: 100px; background: var(--accent3); color: var(--on-accent); }
.sb-spacer { flex: 1; }
.sb-user { padding: .75rem 1.25rem; border-top: 1px solid var(--border); display: flex; align-items: center; gap: .6rem; }
.sb-avatar { width: 34px; height: 34px; border-radius: 8px; background: var(--grad); display: grid; place-items: center; color: var(--on-accent); font-weight: 700; font-size: .75rem; }
.sb-user-info .name { font-size: .78rem; font-weight: 600; color: var(--on-accent); }
.sb-user-info .role { font-size: .62rem; color: var(--sb-txt); }

/* ══════════════════════════════════════════════════════════════════════════════
   5. LAYOUT PRINCIPAL
   ══════════════════════════════════════════════════════════════════════════════ */
.main { margin-left: 240px; flex: 1; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.content { flex: 1; overflow-y: auto; padding: 1.5rem 1.75rem; }

/* ══════════════════════════════════════════════════════════════════════════════
   6. TOPBAR
   ══════════════════════════════════════════════════════════════════════════════ */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 0 1.75rem; height: 56px; background: var(--bg2); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.tb-toggle { display: none; background: none; border: none; font-size: 1.2rem; color: var(--txt3); cursor: pointer; }
.tb-search { display: flex; align-items: center; gap: .4rem; padding: .4rem .85rem; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; font-size: .78rem; color: var(--txt4); min-width: 200px; }
.tb-search input { background: none; border: none; color: var(--txt2); font-family: inherit; font-size: .78rem; outline: none; width: 100%; }
.tb-search kbd { margin-left: auto; font-family: 'JetBrains Mono'; font-size: .6rem; padding: .1rem .35rem; background: var(--bg4); border-radius: 4px; color: var(--txt4); border: 1px solid var(--border2); }
.tb-actions { display: flex; align-items: center; gap: .6rem; }
.tb-btn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--txt3); cursor: pointer; font-size: 1rem; display: grid; place-items: center; transition: all .15s; }
.tb-btn:hover { border-color: var(--p); color: var(--p2); }
.tb-profile { display: flex; align-items: center; gap: .5rem; }
.tb-logout { display: inline-flex; margin: 0; }
.tb-avatar { width: 34px; height: 34px; border-radius: 8px; background: var(--grad); display: grid; place-items: center; color: var(--on-accent); font-weight: 700; font-size: .75rem; }
.tb-name { font-size: .78rem; font-weight: 600; color: var(--txt2); }

/* ══════════════════════════════════════════════════════════════════════════════
   7. PAGE HEADER
   ══════════════════════════════════════════════════════════════════════════════ */
.ph { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.ph h1 { font-size: 1.25rem; font-weight: 700; }
.ph-sub { font-size: .78rem; color: var(--txt4); margin-top: .15rem; }

/* ══════════════════════════════════════════════════════════════════════════════
   8. BOTÕES
   ══════════════════════════════════════════════════════════════════════════════ */
.btn { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem 1rem; border-radius: 8px; font-weight: 600; font-size: .78rem; text-decoration: none; transition: all .2s; cursor: pointer; border: none; font-family: inherit; }
.btn-primary, .btn-p { background: var(--p); color: var(--on-accent); box-shadow: 0 2px 8px var(--glow); }
.btn-primary:hover, .btn-p:hover { filter: brightness(1.15); }
.btn-ghost { background: transparent; color: var(--txt3); border: 1px solid var(--border); }
.btn-ghost:hover { border-color: var(--p); color: var(--p2); }
.btn-danger { background: var(--dn); color: var(--on-accent); }
.btn-danger:hover { filter: brightness(1.15); }
.btn-success { background: var(--up); color: var(--on-accent); }
.btn-success:hover { filter: brightness(1.15); }
.btn-sm { padding: .3rem .65rem; font-size: .72rem; }

/* ══════════════════════════════════════════════════════════════════════════════
   9. CARDS
   ══════════════════════════════════════════════════════════════════════════════ */
.card { background: var(--surf); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.card-head { padding: .85rem 1rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.card-title { font-size: .82rem; font-weight: 700; }
.card-action { font-size: .68rem; color: var(--p2); cursor: pointer; font-weight: 600; text-decoration: none; }
.card-body { padding: 1rem; }

/* ══════════════════════════════════════════════════════════════════════════════
   10. KPI CARDS (Dashboard)
   ══════════════════════════════════════════════════════════════════════════════ */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.kpi-card { background: var(--surf); border: 1px solid var(--border); border-radius: 12px; padding: 1.15rem; position: relative; overflow: hidden; }
.kpi-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad); border-radius: 12px 12px 0 0; }
.kpi-card[data-color="accent"]::before { background: var(--accent); }
.kpi-card[data-color="positive"]::before { background: var(--up); }
.kpi-card[data-color="negative"]::before { background: var(--dn); }
.kpi-card[data-color="warning"]::before { background: var(--warn); }
.kpi-label { font-size: .68rem; font-weight: 600; color: var(--txt4); margin-bottom: .4rem; text-transform: uppercase; letter-spacing: .04em; }
.kpi-val { font-weight: 800; font-size: 1.7rem; letter-spacing: -.03em; line-height: 1; }
.kpi-val.money { font-family: "JetBrains Mono"; color: var(--up); font-size: 1.3rem; }
.kpi-sub { font-size: .65rem; color: var(--txt4); margin-top: .4rem; }
.kpi-sub .up { color: var(--up); }
.kpi-sub .dn { color: var(--dn); }

/* ══════════════════════════════════════════════════════════════════════════════
   11. TABELAS
   ══════════════════════════════════════════════════════════════════════════════ */
.table-wrap, .tb-wrap { background: var(--surf); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.data-table, .tb { width: 100%; border-collapse: collapse; }
.data-table th, .tb th { text-align: left; font-size: .68rem; font-weight: 700; color: var(--txt4); text-transform: uppercase; letter-spacing: .04em; padding: .6rem .75rem; border-bottom: 2px solid var(--border); background: var(--bg2); }
.data-table td, .tb td { padding: .65rem .75rem; border-bottom: 1px solid var(--border); font-size: .8rem; vertical-align: middle; }
.data-table tr:hover td, .tb tr:hover td { background: var(--bg3); }

/* ══════════════════════════════════════════════════════════════════════════════
   12. BADGES
   ══════════════════════════════════════════════════════════════════════════════ */
.badge { font-size: .6rem; font-weight: 700; padding: .15rem .5rem; border-radius: 100px; display: inline-block; }
.badge-lead { background: var(--tint-primary); color: var(--p2); }
.badge-customer { background: var(--tint-up); color: var(--up); }
.badge-churned { background: var(--tint-dn); color: var(--dn); }
.badge-open { background: var(--tint-primary); color: var(--p2); }
.badge-won { background: var(--tint-up); color: var(--up); }
.badge-lost { background: var(--tint-dn); color: var(--dn); }
.badge-abandoned { background: var(--tint-neutral); color: var(--txt4); }
.badge-pending { background: var(--tint-warn); color: var(--warn); }
.badge-completed { background: var(--tint-up); color: var(--up); }
.badge-overdue { background: var(--tint-dn); color: var(--dn); }
.badge-canceled { background: var(--tint-neutral); color: var(--txt4); }
.badge-active { background: var(--tint-up); color: var(--up); }
.badge-inactive { background: var(--tint-neutral); color: var(--txt4); }
.badge-draft { background: var(--tint-neutral); color: var(--txt4); }
.badge-sent { background: var(--tint-primary); color: var(--p2); }
.badge-accepted { background: var(--tint-up); color: var(--up); }
.badge-rejected { background: var(--tint-dn); color: var(--dn); }
.source-tag { font-size: .6rem; color: var(--txt4); background: var(--bg3); padding: .1rem .4rem; border-radius: 4px; }

/* ══════════════════════════════════════════════════════════════════════════════
   13. FILTROS
   ══════════════════════════════════════════════════════════════════════════════ */
.filters { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.filter-btn { padding: .35rem .85rem; border-radius: 8px; font-size: .75rem; font-weight: 600; border: 1px solid var(--border); background: transparent; color: var(--txt3); cursor: pointer; font-family: inherit; transition: all .15s; }
.filter-btn:hover { border-color: var(--p); color: var(--p2); }
.filter-btn.active { background: var(--p); color: var(--on-accent); border-color: var(--p); }

/* ══════════════════════════════════════════════════════════════════════════════
   14. PAGINAÇÃO
   ══════════════════════════════════════════════════════════════════════════════ */
.pagination { display: flex; justify-content: space-between; align-items: center; padding: .75rem 1rem; font-size: .72rem; color: var(--txt4); }
.pg-info { font-size: .72rem; color: var(--txt4); }
.pg-links { display: flex; gap: .25rem; }
.pg-btn, .pg-num { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 .5rem; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--txt3); cursor: pointer; font-family: inherit; font-size: .7rem; text-decoration: none; transition: all .15s; }
.pg-btn:hover, .pg-num:hover { border-color: var(--p); color: var(--p2); }
.pg-num.active { background: var(--p); color: var(--on-accent); border-color: var(--p); }
.pg-dots { display: inline-flex; align-items: center; padding: 0 .25rem; color: var(--txt4); font-size: .7rem; }

/* ══════════════════════════════════════════════════════════════════════════════
   15. FORMULÁRIOS
   ══════════════════════════════════════════════════════════════════════════════ */
.fg { margin-bottom: 1rem; }
.fg label { display: block; font-size: .72rem; font-weight: 600; color: var(--txt3); margin-bottom: .35rem; }
.fg input, .fg select, .fg textarea {
    width: 100%;
    padding: .5rem .75rem;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--txt2);
    font-size: .8rem;
    font-family: inherit;
    transition: border-color .2s;
    outline: none;
}
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--p); }
.fg textarea { min-height: 80px; resize: vertical; }
.fg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fg-help { font-size: .65rem; color: var(--txt4); margin-top: .25rem; }
.fg-error { font-size: .65rem; color: var(--dn); margin-top: .25rem; }

/* ══════════════════════════════════════════════════════════════════════════════
   16. MODALS
   ══════════════════════════════════════════════════════════════════════════════ */
.modal { display: none; position: fixed; inset: 0; z-index: 500; background: var(--scrim); backdrop-filter: blur(4px); align-items: center; justify-content: center; }
.modal.active { display: flex; }
.modal-box { background: var(--surf); border: 1px solid var(--border); border-radius: 16px; padding: 1.5rem; width: 90%; max-width: 500px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px var(--shadow-color); }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
.modal-title { font-size: 1rem; font-weight: 700; }
.modal-close { background: none; border: none; color: var(--txt4); font-size: 1.2rem; cursor: pointer; padding: .25rem; }
.modal-close:hover { color: var(--txt2); }
.modal-footer { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }

/* ══════════════════════════════════════════════════════════════════════════════
   17. FLASH MESSAGES
   ══════════════════════════════════════════════════════════════════════════════ */
.flash-container { margin-bottom: 1rem; }
.flash { padding: .75rem 1rem; border-radius: 8px; font-size: .8rem; font-weight: 500; margin-bottom: .5rem; display: flex; justify-content: space-between; align-items: center; animation: flashIn .3s ease; }
.flash-success { background: var(--tint-up-soft); color: var(--up); border: 1px solid var(--edge-up); }
.flash-error { background: var(--tint-dn-soft); color: var(--dn); border: 1px solid var(--edge-dn); }
.flash-warning { background: var(--tint-warn-soft); color: var(--warn); border: 1px solid var(--edge-warn); }
.flash-info { background: var(--tint-primary-soft); color: var(--p2); border: 1px solid var(--edge-primary); }
.flash-close { background: none; border: none; color: inherit; font-size: 1.1rem; cursor: pointer; opacity: .6; }
.flash-close:hover { opacity: 1; }
@keyframes flashIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* ══════════════════════════════════════════════════════════════════════════════
   18. CONTATOS
   ══════════════════════════════════════════════════════════════════════════════ */
.contact-name { display: flex; align-items: center; gap: .5rem; }
.contact-avatar { width: 30px; height: 30px; border-radius: 8px; background: var(--grad); display: grid; place-items: center; color: var(--on-accent); font-size: .55rem; font-weight: 700; flex-shrink: 0; }
.contact-info .name { font-weight: 600; font-size: .8rem; }
.contact-info .email { font-size: .65rem; color: var(--txt4); }

/* ══════════════════════════════════════════════════════════════════════════════
   19. EMPRESAS (grid de cards)
   ══════════════════════════════════════════════════════════════════════════════ */
.company-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.company-card { background: var(--surf); border: 1px solid var(--border); border-radius: 12px; padding: 1.15rem; transition: all .2s; }
.company-card:hover { border-color: var(--p); box-shadow: 0 4px 16px var(--glow); }
.cc-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: .75rem; }
.cc-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--bg3); display: grid; place-items: center; font-size: 1rem; }

/* ══════════════════════════════════════════════════════════════════════════════
   20. PIPELINE (Kanban)
   ══════════════════════════════════════════════════════════════════════════════ */
.pipeline-board { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: 1rem; min-height: 400px; }
.pipeline-col { min-width: 280px; max-width: 320px; flex-shrink: 0; display: flex; flex-direction: column; }
.pipeline-col-head { padding: .65rem .75rem; border-radius: 10px 10px 0 0; background: var(--bg3); display: flex; justify-content: space-between; align-items: center; }
.pipeline-col-name { font-size: .75rem; font-weight: 700; }
.pipeline-col-count { font-size: .6rem; background: var(--bg4); padding: .1rem .35rem; border-radius: 4px; color: var(--txt3); }
.pipeline-col-body { flex: 1; padding: .5rem; background: var(--bg2); border-radius: 0 0 10px 10px; border: 1px solid var(--border); border-top: none; display: flex; flex-direction: column; gap: .5rem; }
.deal-card { background: var(--surf); border: 1px solid var(--border); border-radius: 8px; padding: .75rem; cursor: grab; transition: all .15s; }
.deal-card:hover { border-color: var(--p); box-shadow: 0 2px 8px var(--glow); }
.deal-card-title { font-size: .78rem; font-weight: 600; margin-bottom: .25rem; }
.deal-card-value { font-family: 'JetBrains Mono'; font-size: .72rem; font-weight: 600; color: var(--up); }
.deal-card-contact { font-size: .65rem; color: var(--txt4); margin-top: .25rem; }

/* Mini pipeline (dashboard) */
.mini-pipeline { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; }
.mini-stage { flex: 1; min-width: 140px; background: var(--bg3); border-radius: 8px; padding: .65rem; }
.mini-stage-name { font-size: .68rem; font-weight: 700; margin-bottom: .25rem; display: flex; justify-content: space-between; }
.mini-stage-count { font-size: .6rem; background: var(--bg4); padding: .1rem .35rem; border-radius: 4px; color: var(--txt3); }
.mini-stage-val { font-family: "JetBrains Mono"; font-size: .72rem; font-weight: 600; color: var(--up); }
.mini-stage-bar { height: 3px; background: var(--bg4); border-radius: 2px; margin-top: .35rem; }
.mini-stage-bar div { height: 100%; background: var(--grad); border-radius: 2px; }

/* ══════════════════════════════════════════════════════════════════════════════
   21. TAREFAS
   ══════════════════════════════════════════════════════════════════════════════ */
.task-item { display: flex; align-items: center; gap: .65rem; padding: .55rem 0; border-bottom: 1px solid var(--border); }
.task-item:last-child { border-bottom: none; }
.task-check { width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--border2); flex-shrink: 0; cursor: pointer; display: grid; place-items: center; transition: all .15s; }
.task-check:hover { border-color: var(--p); }
.task-check.done { background: var(--up); border-color: var(--up); }
.task-info { flex: 1; }
.task-title { font-size: .78rem; font-weight: 600; }
.task-meta { font-size: .65rem; color: var(--txt4); }
.task-priority { font-size: .55rem; font-weight: 700; padding: .1rem .35rem; border-radius: 4px; }
.task-priority.urgent { background: var(--tint-dn); color: var(--dn); }
.task-priority.high { background: var(--tint-warn); color: var(--warn); }
.task-priority.medium { background: var(--tint-primary); color: var(--p2); }
.task-priority.low { background: var(--tint-neutral); color: var(--txt4); }

/* ══════════════════════════════════════════════════════════════════════════════
   22. ATIVIDADES (Timeline)
   ══════════════════════════════════════════════════════════════════════════════ */
.timeline { max-width: 700px; }
.tl-item { display: flex; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--border); }
.tl-item:last-child { border-bottom: none; }
.tl-icon { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; font-size: .75rem; flex-shrink: 0; }
.tl-icon.call { background: var(--tint-primary-soft); }
.tl-icon.email { background: var(--tint-accent); }
.tl-icon.meeting { background: var(--tint-warn-soft); }
.tl-icon.note { background: var(--tint-neutral); }
.tl-icon.whatsapp { background: var(--tint-whatsapp); }
.tl-body { flex: 1; }
.tl-subject { font-size: .82rem; font-weight: 600; margin-bottom: .15rem; }
.tl-desc { font-size: .75rem; color: var(--txt3); line-height: 1.5; }
.tl-time { font-size: .65rem; color: var(--txt4); margin-top: .25rem; }

/* ══════════════════════════════════════════════════════════════════════════════
   23. IMPORTAÇÕES (Upload zone)
   ══════════════════════════════════════════════════════════════════════════════ */
.upload-zone { border: 2px dashed var(--border2); border-radius: 12px; padding: 2.5rem; text-align: center; margin-bottom: 1.5rem; transition: all .2s; cursor: pointer; background: var(--surf); }
.upload-zone:hover { border-color: var(--p); background: var(--tint-primary-weak); }
.upload-zone.dragover { border-color: var(--p); background: var(--tint-primary-soft); }
.uz-icon { font-size: 2rem; margin-bottom: .5rem; }
.uz-text { font-size: .85rem; font-weight: 600; margin-bottom: .25rem; }
.uz-hint { font-size: .7rem; color: var(--txt4); }

/* ══════════════════════════════════════════════════════════════════════════════
   24. GRÁFICOS (barras simples)
   ══════════════════════════════════════════════════════════════════════════════ */
.chart-area { height: 180px; display: flex; align-items: flex-end; gap: 6px; padding: 0 .5rem; }
.chart-bar { flex: 1; background: var(--grad); border-radius: 4px 4px 0 0; opacity: .7; transition: opacity .2s, transform .2s; }
.chart-bar:hover { opacity: 1; transform: scaleY(1.03); }
.chart-bar.lost { background: var(--dn); opacity: .5; }
.chart-labels { display: flex; justify-content: space-between; padding: .35rem .5rem 0; font-size: .55rem; color: var(--txt4); }

/* ══════════════════════════════════════════════════════════════════════════════
   25. GRIDS DE LAYOUT
   ══════════════════════════════════════════════════════════════════════════════ */
.dash-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
.detail-grid { display: grid; grid-template-columns: 1fr 320px; gap: 1rem; }

/* ══════════════════════════════════════════════════════════════════════════════
   26. METAS / PROGRESSO
   ══════════════════════════════════════════════════════════════════════════════ */
.progress-bar { height: 6px; background: var(--bg4); border-radius: 3px; overflow: hidden; }
.progress-bar div { height: 100%; background: var(--grad); border-radius: 3px; transition: width .3s; }
.progress-label { font-size: .65rem; color: var(--txt4); margin-top: .25rem; }

/* ══════════════════════════════════════════════════════════════════════════════
   27. DROPDOWN
   ══════════════════════════════════════════════════════════════════════════════ */
.dropdown { position: relative; }
.dropdown-menu { display: none; position: absolute; top: 100%; right: 0; background: var(--surf); border: 1px solid var(--border); border-radius: 8px; padding: .35rem; min-width: 160px; box-shadow: 0 8px 24px var(--shadow-color); z-index: 50; }
.dropdown-menu.open { display: block; }
.dropdown-item { display: block; padding: .4rem .65rem; font-size: .75rem; color: var(--txt3); text-decoration: none; border-radius: 6px; cursor: pointer; transition: all .1s; border: none; background: none; width: 100%; text-align: left; font-family: inherit; }
.dropdown-item:hover { background: var(--bg3); color: var(--txt2); }
.dropdown-item.danger { color: var(--dn); }
.dropdown-item.danger:hover { background: var(--tint-dn-soft); }

/* ══════════════════════════════════════════════════════════════════════════════
   28. TABS
   ══════════════════════════════════════════════════════════════════════════════ */
.tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 1.25rem; }
.tab { padding: .55rem 1rem; font-size: .78rem; font-weight: 600; color: var(--txt4); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .15s; text-decoration: none; background: none; border-top: none; border-left: none; border-right: none; font-family: inherit; }
.tab:hover { color: var(--txt2); }
.tab.active { color: var(--p2); border-bottom-color: var(--p); }

/* ══════════════════════════════════════════════════════════════════════════════
   29. EMPTY STATE
   ══════════════════════════════════════════════════════════════════════════════ */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--txt4); }
.empty-state-icon { font-size: 2.5rem; margin-bottom: .75rem; }
.empty-state-title { font-size: 1rem; font-weight: 600; color: var(--txt3); margin-bottom: .25rem; }
.empty-state-desc { font-size: .78rem; margin-bottom: 1rem; }

/* ══════════════════════════════════════════════════════════════════════════════
   30. THEME SWITCHER
   ══════════════════════════════════════════════════════════════════════════════ */
.switcher-panel { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 200; background: var(--surf); border: 1px solid var(--border); border-radius: 12px; padding: .6rem .8rem; box-shadow: 0 4px 20px var(--shadow-color); display: flex; flex-direction: column; gap: .45rem; }
.sw-section { display: flex; align-items: center; gap: .5rem; }
.sw-label { font-size: .55rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--txt4); width: 28px; }
.mode-sw { display: flex; gap: .3rem; }
.mode-btn { width: 28px; height: 28px; border-radius: 6px; border: 1.5px solid var(--border2); background: transparent; cursor: pointer; font-size: .75rem; display: grid; place-items: center; transition: all .15s; }
.mode-btn:hover { border-color: var(--p); }
.mode-btn.active { border-color: var(--p); background: var(--tint-primary); box-shadow: 0 0 0 1px var(--p); }
.color-sw { display: flex; gap: .35rem; }
.color-dot { width: 20px; height: 20px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: all .15s; }
.color-dot:hover { transform: scale(1.15); }
.color-dot.active { border-color: var(--on-accent); box-shadow: 0 0 0 2px var(--p); }
.color-dot[data-t="pulse"] { background: var(--swatch-pulse); }
.color-dot[data-t="emerald"] { background: var(--swatch-emerald); }
.color-dot[data-t="sunset"] { background: var(--swatch-sunset); }
.color-dot[data-t="rose"] { background: var(--swatch-rose); }
.color-dot[data-t="slate"] { background: var(--swatch-slate); }

/* ══════════════════════════════════════════════════════════════════════════════
   31. DETAIL PAGES (Contato, Empresa, Deal)
   ══════════════════════════════════════════════════════════════════════════════ */
.detail-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.detail-avatar { width: 56px; height: 56px; border-radius: 14px; background: var(--grad); display: grid; place-items: center; color: var(--on-accent); font-weight: 800; font-size: 1.1rem; flex-shrink: 0; }
.detail-info h2 { font-size: 1.15rem; font-weight: 800; margin-bottom: .15rem; }
.detail-info .sub { font-size: .75rem; color: var(--txt3); display: flex; gap: .75rem; align-items: center; }
.detail-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 1rem; }
.detail-tab { padding: .5rem 1rem; font-size: .78rem; font-weight: 600; color: var(--txt3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .15s; }
.detail-tab:hover { color: var(--txt2); }
.detail-tab.active { color: var(--p2); border-bottom-color: var(--p); }
.side-card { margin-bottom: .75rem; }

/* ══════════════════════════════════════════════════════════════════════════════
   32. INFO GRID (sidebar de detalhes)
   ══════════════════════════════════════════════════════════════════════════════ */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.info-item { padding: .6rem .75rem; background: var(--bg3); border-radius: 8px; }
.info-label { font-size: .62rem; font-weight: 700; color: var(--txt4); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .15rem; }
.info-val { font-size: .82rem; font-weight: 600; }
.info-val.money { font-family: 'JetBrains Mono'; color: var(--up); }

/* ══════════════════════════════════════════════════════════════════════════════
   33. TAG CHIPS
   ══════════════════════════════════════════════════════════════════════════════ */
.tag-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border-radius: 6px; background: var(--bg3); font-size: .68rem; font-weight: 600; margin-right: .25rem; margin-bottom: .25rem; }
.tag-color { width: 8px; height: 8px; border-radius: 50%; }

/* ══════════════════════════════════════════════════════════════════════════════
   34. KANBAN BOARD (Pipeline)
   ══════════════════════════════════════════════════════════════════════════════ */
.kanban { display: flex; gap: 1rem; padding: 1.25rem 0; flex: 1; overflow-x: auto; align-items: flex-start; }
.kanban-col { min-width: 280px; max-width: 320px; flex: 1; background: var(--surf); border: 1px solid var(--border); border-radius: 12px; display: flex; flex-direction: column; max-height: calc(100vh - 250px); }
.col-head { padding: .85rem 1rem; border-bottom: 2px solid var(--p); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.col-head[data-color="accent"] { border-color: var(--accent); }
.col-head[data-color="accent-alt"] { border-color: var(--accent2); }
.col-head[data-color="positive"] { border-color: var(--up); }
.col-title { font-size: .78rem; font-weight: 700; }
.col-meta { display: flex; gap: .5rem; align-items: center; }
.col-count { font-size: .6rem; font-weight: 700; background: var(--bg3); padding: .15rem .45rem; border-radius: 100px; color: var(--txt3); }
.col-value { font-family: 'JetBrains Mono'; font-size: .62rem; font-weight: 600; color: var(--up); }
.col-body { padding: .6rem; overflow-y: auto; flex: 1; }
.col-add { padding: .5rem; border-top: 1px solid var(--border); flex-shrink: 0; }
.col-add-btn { width: 100%; padding: .4rem; background: transparent; border: 1.5px dashed var(--border2); border-radius: 8px; color: var(--txt4); font-size: .72rem; font-weight: 600; cursor: pointer; transition: all .15s; font-family: inherit; }
.col-add-btn:hover { border-color: var(--p); color: var(--p); background: var(--tint-primary-weak); }

/* Deal cards dentro do kanban */
.dc-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: .4rem; }
.dc-title { font-size: .8rem; font-weight: 700; line-height: 1.3; flex: 1; }
.dc-menu { font-size: .7rem; cursor: pointer; opacity: .5; transition: opacity .15s; padding: .2rem; }
.dc-menu:hover { opacity: 1; }
.dc-value { font-family: 'JetBrains Mono'; font-size: .85rem; font-weight: 700; color: var(--up); margin-bottom: .5rem; }
.dc-tags { display: flex; gap: .25rem; flex-wrap: wrap; margin-bottom: .45rem; }
.dc-tag { font-size: .55rem; font-weight: 600; padding: .1rem .35rem; border-radius: 4px; background: var(--bg4); color: var(--txt3); }
.dc-footer { display: flex; justify-content: space-between; align-items: center; }
.dc-contact { display: flex; align-items: center; gap: .35rem; font-size: .68rem; color: var(--txt3); }
.dc-avatar { width: 20px; height: 20px; border-radius: 5px; background: var(--grad); display: grid; place-items: center; color: var(--on-accent); font-size: .5rem; font-weight: 700; }
.dc-days { font-size: .6rem; color: var(--txt4); display: flex; align-items: center; gap: .2rem; }
.dc-days.warn { color: var(--warn); }
.dc-days.overdue { color: var(--dn); }

/* Pipeline progress (deal detail) */
.pipeline-progress { display: flex; gap: 3px; margin-bottom: .25rem; }
.pp-stage { flex: 1; height: 6px; border-radius: 3px; background: var(--bg3); }
.pp-stage.done { background: var(--up); }
.pp-stage.current { background: var(--p); }
.pp-labels { display: flex; justify-content: space-between; font-size: .6rem; color: var(--txt4); margin-top: .25rem; margin-bottom: 1rem; }

/* ══════════════════════════════════════════════════════════════════════════════
   35. DEALS TABLE
   ══════════════════════════════════════════════════════════════════════════════ */
.deal-value { font-family: "JetBrains Mono"; font-weight: 600; color: var(--up); }
.deal-actions { display: flex; gap: .3rem; }
.deal-act { padding: .2rem .5rem; border-radius: 5px; font-size: .6rem; font-weight: 600; border: 1px solid var(--border); background: transparent; color: var(--txt3); cursor: pointer; font-family: inherit; transition: all .15s; }
.deal-act:hover { border-color: var(--p); color: var(--p2); }
.deal-act.win { color: var(--up); border-color: var(--edge-up); }
.deal-act.win:hover { background: var(--tint-up-soft); }
.deal-act.lose { color: var(--dn); border-color: var(--edge-dn); }
.deal-act.lose:hover { background: var(--tint-dn-soft); }

/* ══════════════════════════════════════════════════════════════════════════════
   36. TASKS (cards e stats)
   ══════════════════════════════════════════════════════════════════════════════ */
.task-stats { display: flex; gap: 1.5rem; margin-bottom: 1rem; }
.ts-item { display: flex; align-items: center; gap: .4rem; font-size: .78rem; }
.ts-val { font-weight: 800; font-size: 1rem; }
.ts-label { font-size: .68rem; color: var(--txt4); }
.task-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: .75rem; }
.task-card { background: var(--surf); border: 1px solid var(--border); border-radius: 10px; padding: .85rem; display: flex; gap: .65rem; transition: all .15s; }
.task-card:hover { border-color: var(--p); box-shadow: 0 2px 12px var(--glow); }
.tc-body { flex: 1; min-width: 0; }
.tc-title { font-size: .82rem; font-weight: 600; margin-bottom: .25rem; }
.tc-title.done { text-decoration: line-through; opacity: .5; }
.tc-meta { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font-size: .65rem; color: var(--txt4); }
.tc-badge { font-size: .55rem; font-weight: 700; padding: .1rem .4rem; border-radius: 4px; }
.tc-badge.overdue { background: var(--tint-dn); color: var(--dn); }
.tc-badge.today { background: var(--tint-warn); color: var(--warn); }
.tc-badge.high { background: var(--tint-dn); color: var(--dn); }
.tc-badge.urgent { background: var(--edge-dn); color: var(--accent3); }
.tc-badge.medium { background: var(--tint-primary-soft); color: var(--p2); }
.tc-badge.low { background: var(--tint-neutral); color: var(--txt4); }

/* ══════════════════════════════════════════════════════════════════════════════
   37. TIMELINE (atividades com linha vertical)
   ══════════════════════════════════════════════════════════════════════════════ */
.tl-day { font-size: .68rem; font-weight: 700; color: var(--txt4); text-transform: uppercase; letter-spacing: .06em; padding: .75rem 0 .35rem; border-bottom: 1px solid var(--border); margin-bottom: .35rem; }
.tl-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .15rem; }
.tl-link { font-size: .65rem; color: var(--p2); text-decoration: none; }
.tl-link:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════════════
   38. RESPONSIVO
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .dash-grid { grid-template-columns: 1fr; }
    .detail-grid { grid-template-columns: 1fr; }
    .info-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .sidebar { display: none; }
    .sidebar.open { display: flex; }
    .main { margin-left: 0; }
    .tb-toggle { display: block; }
    .kpi-grid { grid-template-columns: 1fr; }
    .fg-row { grid-template-columns: 1fr; }
    .tb-search { display: none; }
}