/* =====================================================================
   CONSELLER — Product polish V8
   Camada estritamente visual e aditiva. Não altera estrutura, dados ou ações.
   Verde Pitão continua sendo sinal: seleção, foco, progresso e ação principal.
   ===================================================================== */

:root{
  --csl-control-h:40px;
  --csl-control-h-sm:34px;
  --csl-motion-fast:140ms;
  --csl-motion-base:220ms;
  --csl-ease-out:cubic-bezier(.16,1,.3,1);
  --csl-focus-ring:0 0 0 3px var(--accent-soft);
  --csl-card-shadow:0 1px 2px rgba(9,30,15,.035),0 10px 28px rgba(9,30,15,.045);
}

/* Base e superfícies */
body{min-height:100dvh}
.csl-content{isolation:isolate}
.card,.csl-card,.panel,.box{
  background-clip:padding-box!important;
  transition:border-color var(--csl-motion-fast) ease,background-color var(--csl-motion-fast) ease,box-shadow var(--csl-motion-base) var(--csl-ease-out)!important;
}
.card:focus-within,.csl-card:focus-within,.panel:focus-within,.box:focus-within{
  border-color:color-mix(in srgb,var(--border-strong) 66%,var(--accent))!important;
}
a.card:hover,.card.hoverable:hover,.csl-card.hoverable:hover{
  box-shadow:var(--csl-card-shadow)!important;
  transform:translateY(-1px)!important;
}

/* Cabeçalhos: título e ações permanecem legíveis com conteúdo longo */
.csl-section-header{min-width:0;gap:14px 18px}
.csl-section-header-text{min-width:180px}
.csl-section-header-title{font-size:clamp(17px,1.45vw,21px);font-weight:720;letter-spacing:-.026em}
.csl-section-header-sub{max-width:78ch;line-height:1.5}
.csl-section-header-actions{justify-content:flex-end;flex-wrap:wrap}

/* Botões: estados completos e ícones alinhados */
button,.btn,a[class*="btn"]{
  min-height:var(--csl-control-h);
  padding-inline:15px;
  border-radius:9px;
  font-size:13px;
  font-weight:680;
  letter-spacing:-.006em;
  -webkit-tap-highlight-color:transparent;
}
button svg,.btn svg,a[class*="btn"] svg{width:16px;height:16px;flex:0 0 auto;stroke-width:2}
.csl-action-icon{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
button.icon-only,.btn.icon-only{width:var(--csl-control-h);padding:0!important;aspect-ratio:1}
button:not(:disabled):not(.secondary):not(.ghost):not(.danger):hover,
.btn:not(.disabled):not(.secondary):not(.ghost):not(.danger):hover,
a[class*="btn"]:not(.secondary):not(.ghost):not(.danger):hover{
  box-shadow:0 7px 18px rgba(22,163,74,.20)!important;
}
button.secondary,.btn.secondary,a.secondary{
  background:var(--bg-2)!important;
  color:var(--text-0)!important;
  border-color:var(--border-strong)!important;
  box-shadow:0 1px 2px rgba(9,30,15,.035)!important;
}
button.secondary:hover,.btn.secondary:hover,a.secondary:hover{
  background:var(--bg-3)!important;
  color:var(--text-0)!important;
  border-color:color-mix(in srgb,var(--border-strong) 68%,var(--accent))!important;
  box-shadow:0 5px 14px rgba(9,30,15,.07)!important;
}
button:disabled,.btn.disabled,[aria-disabled="true"]{opacity:.48;filter:saturate(.55);pointer-events:none}
button[aria-busy="true"],.btn[aria-busy="true"]{cursor:wait}
button[aria-busy="true"]::after,.btn[aria-busy="true"]::after{
  content:"";width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:cslV8Spin .68s linear infinite;
}
@keyframes cslV8Spin{to{transform:rotate(360deg)}}

/* Campos, buscas e barras de filtros */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=submit]):not([type=button]),
select,textarea{
  min-height:var(--csl-control-h);
  border-radius:9px!important;
  font-size:13.5px;
  font-weight:520;
  caret-color:var(--accent);
}
input:focus-visible,select:focus-visible,textarea:focus-visible{box-shadow:var(--csl-focus-ring)!important}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{
  border-color:var(--danger)!important;box-shadow:0 0 0 3px var(--danger-soft)!important;
}
.field{min-width:0;gap:6px}
.field>label,.toolbar label,.filter-bar label,.filters label{color:var(--text-2);font-size:10.5px;font-weight:760;letter-spacing:.045em}
.toolbar,.toolbar-row,.filter-bar,.filters,.extra-filters{
  display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;
  padding:12px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-2);
}
.toolbar>.field,.toolbar-row>.field,.filter-bar>.field,.filters>.field{flex:1 1 180px;margin-bottom:0}
.toolbar>.field:has(input.search),.toolbar>.field:has(input[type="search"]),
.toolbar-row>.field:has(input.search),.toolbar-row>.field:has(input[type="search"]){flex:2 1 280px}
.toolbar:focus-within,.toolbar-row:focus-within,.filter-bar:focus-within,.filters:focus-within{
  border-color:color-mix(in srgb,var(--border-strong) 76%,var(--accent));
}
.toolbar>.syncbox{display:flex;align-items:center;gap:8px;flex:1 1 100%;flex-wrap:wrap;padding-top:11px;border-top:1px solid var(--border)}
.toolbar>.syncbox>*{flex:0 0 auto}
.account-filter-btn{background:var(--bg-2)!important;color:var(--text-0)!important;border-color:var(--border-strong)!important;box-shadow:none!important}

/* Presets, abas e chips: uma única faixa compacta, rolável no celular */
.tabs,.task-tabs,.stage-tabs,.date-toolbar,.fin-date-toolbar{
  display:flex;align-items:center;gap:4px;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.tabs::-webkit-scrollbar,.task-tabs::-webkit-scrollbar,.stage-tabs::-webkit-scrollbar,
.date-toolbar::-webkit-scrollbar,.fin-date-toolbar::-webkit-scrollbar{display:none}
.tab,.task-tab,.stage-tab,.live-filter,.chip{
  flex:0 0 auto;min-height:var(--csl-control-h-sm)!important;padding:0 12px!important;border-radius:8px!important;
  font-size:12px!important;font-weight:680!important;white-space:nowrap;box-shadow:none!important;
}
.chip{background:var(--bg-2)!important;color:var(--text-1)!important;border:1px solid var(--border)!important}
.chip:hover{background:var(--bg-3)!important;color:var(--text-0)!important;border-color:var(--border-strong)!important;transform:none!important}
.chip.active,.chip[aria-selected="true"],.tab.active,.tab[aria-selected="true"],
.task-tab.active,.stage-tab.active,.live-filter.active{
  background:var(--accent-soft)!important;color:var(--accent)!important;border-color:color-mix(in srgb,var(--accent) 34%,transparent)!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 10%,transparent)!important;
}

/* KPIs: números fortes, rótulos legíveis e estados sem caixas gigantes */
.kpis,.kpi-grid{align-items:stretch}
.kpi,.kpi-box,.kpi-card,.finance-kpi,.stat,.fact{
  position:relative;min-width:0;border-color:var(--border)!important;background:var(--bg-2)!important;
  overflow:hidden;transition:border-color var(--csl-motion-fast) ease,background-color var(--csl-motion-fast) ease!important;
}
.kpi::after,.kpi-box::after,.kpi-card::after,.finance-kpi::after,.stat::after,.fact::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);opacity:0;transform:scaleX(.25);transform-origin:left;
  transition:opacity var(--csl-motion-fast) ease,transform var(--csl-motion-base) var(--csl-ease-out);
}
.kpi:hover::after,.kpi-box:hover::after,.kpi-card:hover::after,.finance-kpi:hover::after,.stat:hover::after,.fact:hover::after{opacity:.8;transform:scaleX(1)}
.kpi-label,.kpi-top,.fin-label{color:var(--text-2)!important;font-size:11px!important;font-weight:700!important;line-height:1.35}
.kpi-value,.kpi-val,.kpi .big,.finance-kpi .big,.stat .big,.fact .big{
  color:var(--text-0)!important;font-size:clamp(23px,2.2vw,30px)!important;font-weight:740!important;line-height:1.05!important;
  letter-spacing:-.04em!important;font-variant-numeric:tabular-nums lining-nums;
}
.kpi-sub,.kpi-delta{margin-top:7px;color:var(--text-2);font-size:11.5px;line-height:1.35}

/* Tabelas: leitura mais rápida sem aumentar a densidade */
.table-wrap,.csl-auto-table-wrap{position:relative;box-shadow:inset 0 1px 0 var(--border)}
table th{white-space:nowrap;vertical-align:middle}
table td{vertical-align:middle}
table td.num,table td.money,table th.num,table th.money{text-align:right;font-variant-numeric:tabular-nums lining-nums}
table tbody tr{transition:background-color var(--csl-motion-fast) ease,box-shadow var(--csl-motion-fast) ease}
table tbody tr:hover{box-shadow:inset 2px 0 0 var(--accent)}
table button.sm,table .btn.sm{min-height:30px;padding-inline:10px}

/* Metadados antigos não podem ficar ilegíveis em telas operacionais */
.muted,.hint,.source-note,.img-source,.kpi-sub,.kpi-delta,.pg-info,.card-sub,
.order-head-date,.gcard-meta,.prod-meta{font-size:max(11px,.72rem);line-height:1.45}
.num,.money,.kpi-value,.kpi-val,.big{font-variant-numeric:tabular-nums lining-nums}

/* Barras e paginação */
.csl-progress,.c47-progress,.progress,.bar{position:relative;overflow:hidden;background:var(--bg-3);border:1px solid var(--border)}
.csl-progress-fill,.c47-progress>i,.progress-fill,.bar>.fill{
  transform-origin:left;animation:cslV8Grow .5s var(--csl-ease-out) both;
  background:var(--accent)!important;box-shadow:0 0 12px color-mix(in srgb,var(--accent) 28%,transparent);
}
@keyframes cslV8Grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.pagination-bar,.csl-pagination{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-2);
}
.pagination-bar label{display:flex;align-items:center;gap:8px;margin:0;color:var(--text-2);font-size:11.5px;text-transform:none;letter-spacing:0}
.pagination-bar select{width:auto;min-width:82px}
.pg-nav{display:flex;gap:7px;margin-left:auto}

/* Modais, drawers e estados */
.csl-modal-overlay,.modal-fin,.folha-modal{overscroll-behavior:contain}
.csl-modal,.csl-drawer,.modal-fin>.box,.folha-modal>.box{box-shadow:0 24px 70px rgba(0,0,0,.32)!important}
.empty-state,.empty,.csl-empty{min-height:120px;display:grid;place-content:center}
.notice,.alert{border-radius:10px;line-height:1.5}

/* Um único momento de entrada: conteúdo principal, curto e sem replay pesado */
body.cui-ready .csl-content{
  animation:cslV8ContentIn .32s var(--csl-ease-out) both;
}
@keyframes cslV8ContentIn{from{opacity:.72;transform:translateY(5px)}to{opacity:1;transform:none}}

@media(max-width:900px){
  .csl-section-header{align-items:flex-start}
  .csl-section-header-actions{justify-content:flex-start}
  .toolbar,.toolbar-row,.filter-bar,.filters,.extra-filters{align-items:stretch}
  .toolbar>.field,.toolbar-row>.field,.filter-bar>.field,.filters>.field{flex-basis:calc(50% - 6px)}
  .pagination-bar{align-items:stretch}.pg-nav{width:100%;margin-left:0}.pg-nav>*{flex:1}
  .csl-content :where(.grid,.formgrid,.form-grid,.kpis,.kpi-grid,.toolbar,.toolbar-row,.filters,.filter-bar)>*{min-width:0}
}
@media(max-width:620px){
  :root{--csl-control-h:44px;--csl-control-h-sm:38px}
  .toolbar>.field,.toolbar-row>.field,.filter-bar>.field,.filters>.field{flex-basis:100%}
  .csl-section-header-actions,.csl-section-header-actions>*{width:100%}
  .date-toolbar,.fin-date-toolbar,.tabs,.task-tabs,.stage-tabs{margin-inline:-4px;padding-inline:4px}
  .csl-content :where(.grid,.formgrid,.form-grid){grid-template-columns:minmax(0,1fr)!important}
  .toolbar>.syncbox>*{flex:1 1 calc(50% - 4px)}
  table td{font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){
  body.cui-ready .csl-content,.csl-progress-fill,.c47-progress>i,.progress-fill,.bar>.fill{animation:none!important}
  .kpi::after,.kpi-box::after,.kpi-card::after,.finance-kpi::after,.stat::after,.fact::after{transition:none!important}
}
@media print{
  *,*::before,*::after{animation:none!important;transition:none!important;box-shadow:none!important}
}