/* ============================================================
   componentes.css — CAMADA 2 (comum a todas as entidades)
   Depende de tokens.css (camada 1) e de um marca-*.css (camada 3).
   Ordem de importação: tokens.css → marca-<entidade>.css → componentes.css

   Derivado do tema-base.css (CRM MEM), com as cores hardcoded
   substituídas por variáveis. Aspeto visual mantido.

   Removido (específico do CRM MEM, não é componente comum):
     .badge-cp, .badge-lead, .badge-cliente, .badge-antigo, .badge-nao,
     .badge-pedido, .badge-elaboracao, .badge-enviado, .badge-adjudicado,
     .badge-perdido, .badge-cancelado, .badge-ativo, .badge-arquivado,
     .btn-mail, .country-badge, ids #modal-input-overlay e
     #modal-confirm-overlay, nome .lembrete-dot.
   Substituído por badges genéricos: .badge-ok, .badge-warn,
   .badge-danger, .badge-neutral, .badge-brand.
   Renomeado: .lembrete-dot → .dot-alert; #modal-confirm-overlay →
   .modal-overlay.above.
   Alterado: .btn-plus usava #007C85 (sem equivalente); passa a
   var(--brand-dark) (#007880), diferença mínima.
   Cada badge específico de um domínio (ex.: estado de orçamento)
   define-se no projeto-instância a partir destes genéricos.
   ============================================================ */

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: var(--font); background: var(--g100); color: var(--g900); overflow: hidden; }

/* ── LAYOUT ── */
#app   { display: flex; height: 100vh; }
#main  { flex: 1; overflow: hidden; display: flex; flex-direction: column; }

/* ── SIDEBAR ── */
#sidebar { width: var(--sidebar-w); background: var(--surface-dark); flex-shrink: 0; display: flex; flex-direction: column; overflow-y: auto; border-right: 1px solid rgba(0,0,0,.15); }
.sidebar-logo { padding: 16px 20px 12px; border-bottom: 1px solid rgba(255,255,255,.06); }
.brand { font-size: 13px; letter-spacing: 2px; color: var(--brand-mid); font-weight: 800; text-transform: uppercase; }
.motto { font-size: 10px; color: rgba(255,255,255,.35); margin-top: 2px; }
.sidebar-nav { flex: 1; padding: 8px 0; }
.nav-section-label { padding: 14px 20px 4px; font-size: 9px; font-weight: 700; letter-spacing: .1em; color: rgba(255,255,255,.35); text-transform: uppercase; }
.nav-item { display: flex; align-items: center; gap: 8px; padding: 9px 14px 9px 20px; cursor: pointer; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.75); transition: all .15s; border-left: 3px solid transparent; }
.nav-item:hover { color: rgba(255,255,255,.95); background: rgba(255,255,255,.04); }
.nav-item.active { color: var(--brand-mid); background: var(--brand-alpha10); border-left-color: var(--brand); }
.nav-item svg { flex-shrink: 0; opacity: .6; }
.nav-item.active svg { opacity: 1; }
.nav-badge { margin-left: auto; background: var(--brand); color: var(--w); font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: var(--radius-pill); }
.nav-badge.urgent { background: var(--danger); }
.sidebar-footer { padding: 10px 20px; border-top: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; gap: 6px; }
.db-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--warn); flex-shrink: 0; }

/* ── TOPBAR ── */
.topbar { background: var(--w); padding: 0 20px; height: 48px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--g300); flex-shrink: 0; }
.topbar-title { font-size: 15px; font-weight: 700; color: var(--surface-dark); }
.topbar-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* ── CONTENT ── */
#content { flex: 1; overflow-y: auto; padding: 16px; }

/* ── BUTTONS ── */
.btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: var(--radius-sm); border: 1px solid var(--g300); background: var(--w); color: var(--g700); font-family: var(--font); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: all .15s; }
.btn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-light); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--w); }
.btn.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn.danger { background: var(--w); border-color: var(--g300); color: var(--g500); }
.btn.danger:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }
.btn.sm { padding: 4px 10px; font-size: 10px; }

/* ── KPI CARDS ── */
.kpi-grid   { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 16px; }
.kpi-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 16px; }
.kpi-card { background: var(--w); border-radius: var(--radius-md); padding: 16px; border: 1px solid var(--g300); border-top: 3px solid var(--brand); }
.kpi-card-fin { background: var(--surface-dark); border-radius: var(--radius-md); padding: 16px; border: 1px solid rgba(255,255,255,.06); border-top: 3px solid var(--brand); }
.kpi-label { font-size: 11px; color: var(--g500); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
.kpi-value { font-size: 24px; font-weight: 700; color: var(--surface-dark); }
.kpi-card-fin .kpi-label { color: var(--g500); }
.kpi-card-fin .kpi-value { color: var(--w); }
.kpi-card-fin .kpi-sub   { color: rgba(255,255,255,.3); }
.kpi-card-fin .kpi-bar   { background: rgba(255,255,255,.1); }
.kpi-sub  { font-size: 11px; color: var(--g500); margin-top: 4px; }
.kpi-bar  { height: 3px; background: var(--g300); border-radius: 2px; margin-top: 10px; }
.kpi-fill { height: 100%; border-radius: 2px; background: var(--brand); }

/* ── SECÇÃO COM CABEÇALHO (ex.: financeira) ── */
.fin-section        { background: var(--w); border-radius: var(--radius-md); border: 1px solid var(--g300); margin-bottom: 16px; overflow: hidden; }
.fin-section-header { padding: 10px 16px; border-bottom: 1px solid var(--g300); display: flex; align-items: center; gap: 8px; background: var(--g100); }
.fin-section-title  { font-size: 11px; font-weight: 700; color: var(--g700); text-transform: uppercase; letter-spacing: .06em; }
.fin-section-total  { font-size: 12px; font-weight: 700; color: var(--brand-deep); margin-left: auto; }

/* ── TABLE ── */
.table-wrap    { background: var(--w); border-radius: var(--radius-md); border: 1px solid var(--g300); overflow: hidden; margin-bottom: 16px; }
.table-toolbar { padding: 10px 14px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--g300); }
.search-box    { display: flex; align-items: center; gap: 6px; background: var(--g100); border: 1px solid var(--g300); border-radius: var(--radius-sm); padding: 6px 10px; flex: 1; max-width: 280px; }
.search-box input  { border: none; background: transparent; font-family: var(--font); font-size: 13px; color: var(--g900); outline: none; width: 100%; }
.search-box-clear  { border: none; background: transparent; padding: 0; margin: 0; display: flex; align-items: center; cursor: pointer; color: var(--g500); flex-shrink: 0; }
.search-box-clear:hover { color: var(--brand); }
.filter-select { border: 1px solid var(--g300); border-radius: var(--radius-sm); padding: 6px 8px; font-family: var(--font); font-size: 12px; color: var(--g700); background: var(--w); cursor: pointer; outline: none; }
.filter-select:focus { border-color: var(--brand); }
.table-count   { font-size: 11px; color: var(--g500); margin-left: auto; }
table          { width: 100%; border-collapse: collapse; }
thead th       { padding: 9px 14px; text-align: left; font-size: 11px; font-weight: 700; color: var(--w); letter-spacing: .06em; text-transform: uppercase; background: var(--surface-dark); white-space: nowrap; }
tbody tr       { border-bottom: .5px solid var(--g300); cursor: pointer; transition: background .1s; }
tbody tr:nth-child(even) { background: var(--g100); }
tbody tr:hover { background: var(--brand-light); }
tbody tr:last-child { border-bottom: none; }
td             { padding: 10px 14px; font-size: 13px; color: var(--g700); }
td.name-cell   { color: var(--g900); font-weight: 600; }
td .sub        { font-size: 11px; color: var(--g500); margin-top: 1px; }
.row-actions   { display: flex; gap: 5px; opacity: 0; transition: opacity .12s; }
tr:hover .row-actions { opacity: 1; }

/* ── FILTER PILLS ── */
.filter-bar { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.pill       { padding: 4px 12px; border-radius: var(--radius-pill); border: 1.5px solid var(--g300); background: var(--w); color: var(--g700); font-family: var(--font); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; transition: all .15s; }
.pill:hover  { border-color: var(--brand); color: var(--brand); }
.pill.active { background: var(--brand); border-color: var(--brand); color: var(--w); }

/* ── BADGES (genéricos; badges de domínio definem-se no projeto) ── */
.badge          { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--radius-pill); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.badge-brand    { background: var(--brand-light); color: var(--brand-deep); }
.badge-ok       { background: var(--ok-bg);      color: var(--ok-ink); }
.badge-warn     { background: var(--warn-bg);    color: var(--warn-ink); }
.badge-danger   { background: var(--danger-bg);  color: var(--danger-ink); }
.badge-neutral  { background: var(--neutral-bg); color: var(--neutral-ink); }

@keyframes dot-alert-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.85); } }
.dot-alert { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--alert); animation: dot-alert-pulse 1.4s ease-in-out infinite; vertical-align: middle; margin-left: 6px; flex-shrink: 0; }

/* ── DATE COLORS ── */
.date-overdue { color: var(--danger); font-weight: 700; }
.date-today   { color: var(--warn); font-weight: 700; }
.date-soon    { color: var(--brand-deep); }

/* ── CHARTS ── */
.chart-grid      { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.chart-card      { background: var(--w); border-radius: var(--radius-md); border: 1px solid var(--g300); padding: 16px; }
.chart-title     { font-size: 11px; font-weight: 700; color: var(--g700); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; }
.mini-bar-row    { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; }
.mini-bar-label  { width: 140px; color: var(--g700); flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-bar-track  { flex: 1; height: 5px; background: var(--g300); border-radius: 3px; }
.mini-bar-fill   { height: 100%; border-radius: 3px; background: var(--brand); }
.mini-bar-fill.alt { background: var(--surface-dark); }
.mini-bar-val    { color: var(--g700); min-width: 24px; text-align: right; font-size: 11px; }

/* ── TABS ── */
.tabs    { display: flex; border-bottom: 2px solid var(--g300); margin-bottom: 16px; }
.tab     { padding: 9px 16px; font-size: 12px; font-weight: 600; color: var(--g500); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .15s; }
.tab:hover   { color: var(--brand); }
.tab.active  { color: var(--brand-deep); border-bottom-color: var(--brand); font-weight: 700; }

/* ── EMPTY STATE ── */
.empty-state { padding: 48px 20px; text-align: center; color: var(--g500); }
.empty-icon  { margin-bottom: 10px; opacity: .4; }
.empty-title { font-size: 13px; font-weight: 700; color: var(--g700); margin-bottom: 5px; }
.empty-sub   { font-size: 12px; }

/* ── MODAL ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 900; display: flex; align-items: center; justify-content: center; }
/* Aviso/confirmação que tem de ficar sempre acima de outro modal já aberto. */
.modal-overlay.above { z-index: 1200; }
.modal         { background: var(--w); border-radius: var(--radius-md); width: 600px; max-width: 95vw; max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 64px rgba(0,0,0,.25); animation: mup .18s ease; }
.modal.lg      { width: 780px; }
@keyframes mup { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-header  { padding: 0 20px; height: 48px; background: var(--surface-dark); border-bottom: 3px solid var(--brand); display: flex; align-items: center; justify-content: space-between; }
.modal-title   { font-size: 13px; font-weight: 700; color: var(--w); letter-spacing: .05em; text-transform: uppercase; }
.modal-x       { width: 28px; height: 28px; border: none; background: rgba(255,255,255,.08); border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.5); }
.modal-x:hover { background: rgba(255,255,255,.15); color: var(--w); }
.modal-body    { padding: 20px; }
.modal-footer  { padding: 14px 20px; border-top: 1px solid var(--g300); display: flex; justify-content: flex-end; gap: 8px; background: var(--g100); }

/* ── FORMULÁRIOS ── */
.form-grid     { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid .full { grid-column: 1/-1; }
.field label   { display: block; font-size: 11px; font-weight: 700; color: var(--brand-deep); letter-spacing: .1em; margin-bottom: 5px; text-transform: uppercase; }
.field input,
.field select,
.field textarea { width: 100%; border: 1px solid var(--g300); border-radius: var(--radius-sm); padding: 9px 12px; font-family: var(--font); font-size: 14px; color: var(--g900); background: var(--w); outline: none; transition: border-color .15s; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--brand); }
.field textarea { min-height: 80px; resize: vertical; }

/* ── COMBO (select + botão de adicionar) ── */
.combo { display: flex; gap: 4px; align-items: stretch; }
.combo select, .combo input { flex: 1; min-width: 0; }
.btn-plus { width: 30px; flex-shrink: 0; border: 1px solid var(--g300); border-radius: var(--radius-sm); background: var(--w); color: var(--brand-dark); font-size: 18px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: all .15s; }
.btn-plus:hover { border-color: var(--brand); background: var(--brand-light); }

/* ── PAGINAÇÃO ── */
.pagination { display: flex; align-items: center; gap: 4px; padding: 12px 14px; border-top: 1px solid var(--g300); }
.page-btn   { width: 28px; height: 28px; border-radius: var(--radius-sm); border: 1px solid var(--g300); background: var(--w); font-family: var(--font); font-size: 11px; font-weight: 600; color: var(--g700); cursor: pointer; transition: all .15s; display: inline-flex; align-items: center; justify-content: center; }
.page-btn:hover  { border-color: var(--brand); color: var(--brand); }
.page-btn.active { background: var(--brand); border-color: var(--brand); color: var(--w); }
.page-info  { font-size: 11px; color: var(--g500); margin-left: auto; }

/* ── TOAST ── */
#toast { position: fixed; bottom: 20px; right: 20px; background: var(--surface-dark); color: var(--w); padding: 10px 18px; border-radius: var(--radius-sm); border-left: 3px solid var(--brand); font-size: 13px; font-weight: 500; z-index: 9999; display: none; animation: fadeIn .2s; }
#toast.ok  { border-left-color: var(--done); }
#toast.err { border-left-color: var(--danger); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }