/* components.css — UI components */

/* ── Buttons ─────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--s-2);padding:8px 16px;font-size:14px;font-weight:600;
  border:2px solid transparent;border-radius:var(--r-sm);
  cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:background-color .15s ease-out,border-color .15s ease-out,color .15s ease-out;
}
.btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px oklch(45% 0.16 256 / 0.25);
}
.btn:disabled{opacity:.5;pointer-events:none}
.btn-primary{background:var(--c-primary);color:var(--c-surface);border-color:var(--c-primary)}
.btn-primary:hover{background:var(--c-primary-dark);border-color:var(--c-primary-dark);text-decoration:none;color:var(--c-surface)}
.btn-danger{background:var(--c-danger);color:var(--c-surface);border-color:var(--c-danger)}
.btn-danger:hover{background:var(--c-danger-fg);border-color:var(--c-danger-fg)}
.btn-success{background:var(--c-success);color:var(--c-surface);border-color:var(--c-success)}
.btn-success:hover{background:var(--c-success-fg);border-color:var(--c-success-fg)}
.btn-warning{background:var(--c-warning);color:var(--c-surface);border-color:var(--c-warning)}
.btn-outline{background:var(--c-surface);color:var(--c-primary);border-color:var(--c-primary)}
.btn-outline:hover{background:var(--c-primary-lt);text-decoration:none}
.btn-ghost{background:transparent;color:var(--c-text-2);border-color:transparent}
.btn-ghost:hover{background:var(--c-bg);color:var(--c-text-1)}
.btn-sm{padding:4px 10px;font-size:12px}
.btn-lg{padding:12px 24px;font-size:16px}

/* ── Cards ───────────────────────────────────── */
.card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-md);overflow:hidden;margin-bottom:var(--s-5)}
.card-header{
  padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--c-border);
  display:flex;align-items:center;justify-content:space-between;
}
.card-title{font-size:15px;font-weight:700;color:var(--c-primary-dark)}
.card-body{padding:var(--s-5)}
.card-footer{
  padding:var(--s-4) var(--s-5);border-top:1px solid var(--c-border);
  background:var(--c-bg);display:flex;justify-content:flex-end;gap:var(--s-3);
}

/* ── Stat cards (dashboard) ─────────────────── */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:var(--s-4);margin-bottom:var(--s-6);width:100%}
.stat-card{
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--r-md);padding:var(--s-5);
  position:relative;
}
/* Dot indicator: 6px ponto antes do rótulo, substitui border-top colorido.
   Inline (e não absoluto): o ponto absoluto obrigava `padding-left:14px` em label
   e value, que a legenda não tinha — os três textos partiam de duas bordas
   diferentes. Inline, o ponto empurra só o título e todo texto do card começa na
   borda de padding do card. */
.stat-label::before{
  content:"";display:inline-block;vertical-align:middle;
  width:6px;height:6px;margin-right:6px;border-radius:50%;
  background:var(--c-primary);
  /* `vertical-align:middle` centra na altura da minúscula; o rótulo é caixa alta,
     então sobe 1px p/ o ponto ficar no meio ótico das maiúsculas. */
  position:relative;top:-1px;
}
.stat-card.green  .stat-label::before{background:var(--c-success)}
.stat-card.red    .stat-label::before{background:var(--c-danger)}
.stat-card.yellow .stat-label::before{background:var(--c-warning)}
.stat-card.gray   .stat-label::before{background:var(--c-text-2)}
.stat-label{font-size:11px;color:var(--c-text-2);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.stat-value{font-size:30px;font-weight:800;color:var(--c-primary-dark);margin:var(--s-1) 0;line-height:1.1}
.stat-sub{font-size:12px;color:var(--c-text-2)}

/* ── Badges ──────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:10px;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  white-space:nowrap;
}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.badge-success{background:var(--c-success-bg);color:var(--c-success)}
.badge-danger{background:var(--c-danger-bg);color:var(--c-danger)}
.badge-warning{background:var(--c-warning-bg);color:var(--c-warning)}
.badge-info{background:var(--c-info-bg);color:var(--c-info)}
.badge-secondary{background:var(--c-bg);color:var(--c-text-2)}
.badge-primary{background:var(--c-primary-lt);color:var(--c-primary)}

/* ── Forms ───────────────────────────────────── */
.form-group{margin-bottom:var(--s-4)}
.form-label{display:block;font-size:13px;font-weight:600;color:var(--c-text-1);margin-bottom:var(--s-1)}
.form-label.req::after{content:' *';color:var(--c-danger)}
.form-control,.form-select{
  width:100%;padding:9px var(--s-3);
  border:1px solid var(--c-border);border-radius:var(--r-sm);
  font-size:14px;color:var(--c-text-1);background:var(--c-surface);
  transition:border-color .15s,box-shadow .15s;
}
.form-control:focus,.form-select:focus{
  outline:none;border-color:var(--c-primary);
  box-shadow:0 0 0 3px rgba(19,81,180,.15);
}
.form-control::placeholder{color:var(--c-placeholder)}
.form-hint{font-size:12px;color:var(--c-text-2);margin-top:4px}
.form-error{font-size:12px;color:var(--c-danger);margin-top:4px}
.form-row{display:grid;gap:var(--s-4)}
.cols-2{grid-template-columns:1fr 1fr}
.cols-3{grid-template-columns:1fr 1fr 1fr}
textarea.form-control{resize:vertical;min-height:80px}

/* ── Tables ──────────────────────────────────── */
.table-wrapper{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:13px}
.table th{
  background:var(--c-primary-dark);color:var(--c-surface);
  padding:10px var(--s-3);text-align:left;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  white-space:nowrap;/* rótulos de cabeçalho nunca quebram (ex.: CÓDIGO) */
}
.table td{padding:10px var(--s-3);border-bottom:1px solid var(--c-border);vertical-align:middle}
.table tr:last-child td{border-bottom:none}
.table tbody tr:hover td{background:var(--c-primary-lt)}
.table .num{text-align:right;font-variant-numeric:tabular-nums;font-family:monospace;white-space:nowrap}
.table .actions{display:flex;gap:var(--s-2)}
.table tfoot td{
  font-weight:700;background:var(--c-bg);
  border-top:2px solid var(--c-border);border-bottom:none;
}

/* ── Alerts ──────────────────────────────────── */
.alert{
  padding:var(--s-3) var(--s-4);border-radius:var(--r-sm);
  font-size:14px;display:flex;align-items:flex-start;gap:var(--s-3);
  border:1px solid transparent;margin-bottom:var(--s-4);
}
.alert-success{background:var(--c-success-bg);border-color:var(--c-success);color:var(--c-success-fg)}
.alert-danger{background:var(--c-danger-bg);border-color:var(--c-danger);color:var(--c-danger-fg)}
.alert-warning{background:var(--c-warning-bg);border-color:var(--c-warning);color:var(--c-warning)}
.alert-info{background:var(--c-info-bg);border-color:var(--c-info);color:var(--c-info)}
.alert-icon{font-size:18px;flex-shrink:0}

/* ── Modals ──────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(7,29,65,.6);
  display:flex;align-items:center;justify-content:center;
  z-index:500;opacity:0;pointer-events:none;transition:opacity .2s;
}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal{
  background:var(--c-surface);border-radius:var(--r-lg);max-width:580px;width:92%;
  max-height:90vh;overflow-y:auto;box-shadow:var(--sh-2);
  transform:translateY(20px);transition:transform .2s;
}
.modal-overlay.open .modal{transform:translateY(0)}
.modal-header{
  padding:var(--s-5);border-bottom:1px solid var(--c-border);
  display:flex;align-items:center;justify-content:space-between;
}
.modal-title{font-size:17px;font-weight:700;color:var(--c-primary-dark)}
.modal-close{
  background:none;border:none;cursor:pointer;
  color:var(--c-text-2);font-size:22px;line-height:1;padding:4px;
}
.modal-close:hover{color:var(--c-text-1)}
.modal-body{padding:var(--s-5)}
.modal-footer{
  padding:var(--s-4) var(--s-5);border-top:1px solid var(--c-border);
  display:flex;justify-content:flex-end;gap:var(--s-3);
}

/* ── Tabs ────────────────────────────────────── */
.tabs{display:flex;border-bottom:2px solid var(--c-border);margin-bottom:var(--s-5)}
.tab-btn{
  padding:var(--s-3) var(--s-5);font-size:14px;font-weight:600;
  color:var(--c-text-2);border:none;background:none;cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-2px;transition:.15s;
}
.tab-btn:hover{color:var(--c-primary)}
.tab-btn.active{color:var(--c-primary);border-bottom-color:var(--c-primary)}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* ── Search box ──────────────────────────────── */
.search-wrap{position:relative}
.search-wrap .form-control{padding-left:36px}
.search-ico{
  position:absolute;left:10px;top:50%;transform:translateY(-50%);
  color:var(--c-text-2);pointer-events:none;font-size:15px;
}
.search-results{
  position:absolute;bottom:100%;left:0;right:0;
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--r-sm);box-shadow:var(--sh-2);
  z-index:50;max-height:260px;overflow-y:auto;margin-bottom:2px;
}
.search-results.drop-down{top:100%;bottom:auto;margin-top:2px;margin-bottom:0}
.search-result-item{
  padding:var(--s-3) var(--s-4);cursor:pointer;font-size:13px;
  border-bottom:1px solid var(--c-border);display:flex;flex-direction:column;gap:2px;
}
.search-result-item:last-child{border-bottom:none}
.search-result-item:hover{background:var(--c-primary-lt)}
.sri-code{font-weight:700;color:var(--c-primary);font-size:11px}
.sri-desc{color:var(--c-text-1)}
.sri-meta{color:var(--c-text-2);font-size:11px}

/* ── Progress bar ────────────────────────────── */
.progress{background:var(--c-border);border-radius:4px;height:8px;overflow:hidden}
/* Sem transição em width: evita anim. de layout. Mudança é estática. */
.progress-fill{height:100%;border-radius:4px}
.progress-fill.blue{background:var(--c-primary)}
.progress-fill.green{background:var(--c-success)}
.progress-fill.red{background:var(--c-danger)}
.progress-fill.yellow{background:var(--c-warning)}

/* ── Deviation indicator ─────────────────────── */
.dev-pos{color:var(--c-danger);font-weight:700}
.dev-neg{color:var(--c-success);font-weight:700}
.dev-zero{color:var(--c-text-2)}

/* ── Bar chart ───────────────────────────────── */
.chart-wrap{overflow-x:auto}
.chart-area{display:flex;align-items:flex-end;gap:var(--s-3);height:140px;padding-bottom:var(--s-5);border-bottom:2px solid var(--c-border)}
.chart-col{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;min-width:44px}
.chart-col-bars{display:flex;gap:2px;align-items:flex-end;width:100%}
.bar{
  flex:1;border-radius:3px 3px 0 0;min-height:4px;
  position:relative;cursor:default;
}
.bar:hover::after{
  content:attr(title);
  position:absolute;bottom:105%;left:50%;transform:translateX(-50%);
  background:var(--c-primary-dark);color:var(--c-surface);padding:3px 8px;
  border-radius:4px;font-size:11px;white-space:nowrap;z-index:10;
}
.bar.orcado{background:var(--c-primary-lt);border:1.5px solid var(--c-primary)}
.bar.praticado{background:var(--c-primary)}
.bar.over{background:var(--c-danger)}
.chart-month{font-size:10px;color:var(--c-text-2);text-align:center;margin-top:var(--s-1)}
.chart-legend{display:flex;gap:var(--s-5);font-size:12px;margin-top:var(--s-3);align-items:center}
.legend-dot{width:12px;height:12px;border-radius:2px;display:inline-block;margin-right:4px}

/* ── Utilities ───────────────────────────────── */
.flex{display:flex}.items-center{align-items:center}.items-end{align-items:flex-end}.justify-between{justify-content:space-between}
.justify-end{justify-content:flex-end}.flex-wrap{flex-wrap:wrap}
.gap-2{gap:var(--s-2)}.gap-3{gap:var(--s-3)}.gap-4{gap:var(--s-4)}.gap-6{gap:var(--s-6)}
.mt-2{margin-top:var(--s-2)}.mt-4{margin-top:var(--s-4)}.mt-6{margin-top:var(--s-6)}
.mb-4{margin-bottom:var(--s-4)}.mb-6{margin-bottom:var(--s-6)}
.w-full{width:100%}.text-right{text-align:right}.text-center{text-align:center}
.text-sm{font-size:13px}.text-xs{font-size:11px}.text-muted{color:var(--c-text-2)}
.font-bold{font-weight:700}.font-800{font-weight:800}
.text-danger{color:var(--c-danger)}.text-success{color:var(--c-success)}
.text-primary{color:var(--c-primary)}.text-warning{color:var(--c-warning)}
.hidden{display:none!important}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5)}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s-4)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4)}
.divider{border:none;border-top:1px solid var(--c-border);margin:var(--s-5) 0}
.monospace{font-family:monospace;font-variant-numeric:tabular-nums}

/* ── Lucide icon sizing ──────────────────────── */
.alert-icon{width:18px;height:18px;stroke-width:2}
.nav-icon{width:18px;height:18px;stroke-width:2;flex-shrink:0}
.search-ico{width:16px;height:16px;stroke-width:2}
.empty-state-icon{width:48px;height:48px;stroke-width:1.5;color:var(--c-text-2);margin-bottom:var(--s-4)}
.icon-btn{display:inline-flex;align-items:center;gap:6px}
.icon-btn svg{width:14px;height:14px;stroke-width:2}
[data-lucide]{display:inline-block;vertical-align:middle}

/* ── Colapso mobile dos utilitários de grade ──────────────
   Os utilitários acima têm contagem fixa de colunas, o que só cabia porque a
   sidebar de 248px era sempre visível. Com ela colapsável (css/layout.css), as
   páginas passam a existir de fato em telas estreitas — aqui as grades viram
   coluna única e as barras de filtro passam a quebrar linha em vez de estourar
   a largura da página. Ver docs/responsive-shell.md */
@media (max-width:720px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .form-row.cols-2,.form-row.cols-3{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}

  /* Barras de filtro, cabeçalhos de card e de seção: quebram em vez de estourar. */
  .page-content .flex,.card-header,.section-header{flex-wrap:wrap}
  .card-header,.section-header{row-gap:var(--s-2)}
}