/* ====================================================
 * producao-rebuild.css — ArteLix Produção Premium
 * Build: 2026-06-19-FIX2 (kanban estático, sem scroll horizontal)
 * ==================================================== */

/* ══════════════════════════════════════════════════
   PRODUÇÃO PREMIUM — CSS Central Operacional
   ══════════════════════════════════════════════════ */

/* KPI Row */
.prod-kpi-row {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px;
  margin-bottom:16px;
}
.prod-kpi-card {
  background:var(--card);border:1.5px solid var(--border);
  border-radius:10px;padding:6px 10px;
  display:flex;align-items:center;gap:8px;
  transition:transform .15s,box-shadow .15s;cursor:default;
}
.prod-kpi-card:hover { transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.08) }
.prod-kpi-icon {
  width:26px;height:26px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.prod-kpi-icon svg { width:15px;height:15px }
.prod-kpi-body { min-width:0;flex:1 }
.prod-kpi-num {
  font-size:1.05rem;font-weight:900;line-height:1;letter-spacing:-.04em;
}
.prod-kpi-num-sm {
  font-size:.92rem;font-weight:900;line-height:1.05;letter-spacing:-.02em;
}
.prod-kpi-lbl {
  font-size:.54rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--text-secondary);margin-top:1px;
}
.prod-kpi-sub {
  font-size:.62rem;color:var(--text-secondary);margin-top:1px;
}

/* Filtros rápidos */
.prod-filtro-btn {
  padding:5px 10px;border-radius:20px;font-size:.78rem;
  cursor:pointer;border:1.5px solid var(--border);
  background:var(--card);color:var(--text-secondary);
  font-weight:400;transition:all .13s;white-space:nowrap;
}
.prod-filtro-btn:hover { border-color:var(--primary);color:var(--primary) }
.prod-filtro-btn-ativo {
  background:var(--primary);color:var(--primary-foreground);
  border-color:var(--primary);font-weight:600;
}

/* Toggle view */
.prod-view-btn {
  padding:5px 10px;border-radius:6px;border:none;
  cursor:pointer;font-size:.78rem;
  background:transparent;color:var(--text-secondary);
  display:flex;align-items:center;gap:5px;
  transition:all .13s;
}
.prod-view-btn:hover { color:var(--primary) }

/* Layout principal com painel lateral.
   A sidebar direita foi reduzida (280px -> 220px) para liberar mais
   espaço ao kanban, que agora precisa caber as 6 colunas sem scroll. */
.prod-main-layout {
  display:grid;
  grid-template-columns:1fr 220px;
  gap:12px;
  margin-bottom:16px;
  align-items:start;
}
.prod-main-layout > *:first-child {
  min-width:0;overflow:hidden;
}
.prod-main-content {
  min-width:0;
  overflow:hidden;
}

/* Kanban — colunas FLEXÍVEIS (sem scroll horizontal).
   Cada coluna cresce/encolhe igualmente (flex:1 1 0) para que as 6
   sempre caibam lado a lado, com um mínimo absoluto de 90px para
   nunca ficar ilegível em telas muito estreitas (fallback de scroll
   só nesse caso extremo, via overflow-x:auto). */
.prod-kanban {
  display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;
}
.prod-kanban-col {
  flex:1 1 0;min-width:90px;max-width:320px;
}
.prod-kanban-header {
  display:flex;align-items:center;justify-content:space-between;
  padding:7px 8px;background:var(--card);border-radius:9px;
  margin-bottom:8px;border:1.5px solid var(--border);
  gap:4px;
}
.prod-kanban-menu {
  cursor:pointer;padding:2px 4px;border-radius:4px;
  transition:background .1s;
  flex-shrink:0;
}
.prod-kanban-menu:hover { background:var(--border) }
.prod-kanban-body {
  display:flex;flex-direction:column;gap:6px;
  min-height:80px;
}
.prod-kanban-empty {
  text-align:center;padding:20px 6px;
  border:1.5px dashed var(--border);border-radius:10px;
}
.prod-kanban-card {
  background:var(--card);border:1.5px solid var(--border);
  border-radius:9px;padding:9px;cursor:pointer;
  transition:transform .15s,box-shadow .15s,border-color .15s;
  overflow:hidden;
}
.prod-kanban-card-hover {
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.prod-kanban-card-atrasado {
  border-color:rgba(239,68,68,.4);
}
.prod-btn-avancar {
  margin-left:auto;padding:3px 6px;border-radius:6px;
  border:1.5px solid var(--border);background:var(--background-secondary);
  cursor:pointer;color:var(--text-secondary);
  display:flex;align-items:center;
  transition:all .12s;
  flex-shrink:0;
}
.prod-btn-avancar:hover {
  background:var(--primary);border-color:var(--primary);color:#fff;
}

/* Painel lateral */
.prod-painel {
  display:flex;flex-direction:column;gap:12px;
}
.prod-painel-card {
  background:var(--card);border:1.5px solid var(--border);
  border-radius:14px;padding:12px;
}
.prod-painel-header {
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;gap:6px;
}
.prod-painel-title {
  font-size:.7rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;color:var(--text-secondary);
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.prod-painel-link {
  font-size:.63rem;font-weight:600;color:var(--primary);
  cursor:pointer;white-space:nowrap;
  padding:2px 7px;border-radius:12px;
  border:1.5px solid var(--primary);background:transparent;
  transition:all .15s;
}
.prod-painel-link:hover { background:var(--primary);color:var(--primary-foreground) }
.prod-lixie-card {
  background:linear-gradient(135deg,var(--primary-light) 0%,var(--card) 100%);
  border-color:var(--primary-soft);
}

/* Analytics */
.prod-analytics-row {
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:16px;margin-bottom:16px;
}
.prod-atv-item {
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;background:var(--background-secondary);
  border-radius:8px;cursor:pointer;
  transition:background .13s;
}
.prod-atv-item:hover { background:var(--card-hover) }

/* Responsivo — Desktop grande (≥1400px) */
@media(min-width:1400px){
  .prod-main-layout { grid-template-columns:1fr 240px }
}
/* Tablet grande (≤1200px): 3 KPIs por linha, painel menor.
   Abaixo deste ponto o card do kanban entra em modo compacto:
   esconde detalhes secundários (produto, progresso) para garantir
   que número, valor e botão de avançar continuem legíveis mesmo
   com a coluna estreita. */
@media(max-width:1200px){
  .prod-kpi-row { grid-template-columns:repeat(3,1fr) }
  .prod-main-layout { grid-template-columns:1fr 200px }
  .prod-kanban-card { padding:7px }
  .prod-kanban-card .prod-card-produto,
  .prod-kanban-card .prod-card-progresso { display:none }
}
/* Tablet (≤1024px): 3 KPIs, painel lateral mais estreito */
@media(max-width:1024px){
  .prod-kpi-row { grid-template-columns:repeat(3,1fr) }
  .prod-main-layout { grid-template-columns:1fr 180px }
  .prod-kpi-card { padding:5px 8px }
  .prod-kpi-icon { width:24px;height:24px }
  .prod-kpi-num { font-size:.95rem }
  .prod-kanban { gap:6px }
  .prod-kanban-col { min-width:80px }
}
/* Tablet pequeno (≤900px): painel vai embaixo, kanban ganha toda a largura */
@media(max-width:900px){
  .prod-kpi-row { grid-template-columns:repeat(3,1fr) }
  .prod-main-layout { grid-template-columns:1fr }
  .prod-painel { display:grid;grid-template-columns:repeat(2,1fr) }
  .prod-analytics-row { grid-template-columns:1fr 1fr;gap:12px }
  .prod-kanban-card { padding:6px }
  .prod-kanban-header { padding:6px 6px }
  .prod-kanban-header span:not(.prod-kanban-count) { font-size:.7rem }
}
/* Mobile grande (≤768px): aqui o espaço já é pequeno demais para 6
   colunas legíveis lado a lado mesmo no mínimo -- permite scroll
   horizontal suave com colunas num tamanho confortável ao toque. */
@media(max-width:768px){
  .prod-kpi-row { grid-template-columns:repeat(2,1fr);gap:8px }
  .prod-painel { grid-template-columns:1fr }
  .prod-analytics-row { grid-template-columns:1fr }
  .prod-main-layout { gap:12px }
  .prod-kpi-card { padding:5px 8px;gap:6px }
  .prod-kpi-num { font-size:.9rem }
  .prod-kpi-icon { width:22px;height:22px;border-radius:7px }
  .prod-kpi-icon svg { width:13px;height:13px }
  .prod-kanban-col { flex:0 0 150px;min-width:150px;max-width:150px }
}
/* Mobile (≤600px) */
@media(max-width:600px){
  .prod-kpi-row { grid-template-columns:repeat(2,1fr);gap:8px }
  .prod-kpi-num { font-size:.85rem }
  .prod-kpi-lbl { font-size:.5rem }
  .prod-kpi-sub { display:none }
  .prod-kpi-icon { width:20px;height:20px }
  .prod-analytics-row { grid-template-columns:1fr }
  .prod-painel { grid-template-columns:1fr }
  .prod-kanban-col { flex:0 0 140px;min-width:140px;max-width:140px }
}
/* Mobile pequeno (≤480px) */
@media(max-width:480px){
  .prod-kpi-row { grid-template-columns:1fr 1fr }
  .prod-kanban-col { flex:0 0 130px;min-width:130px;max-width:130px }
}