/* Gestão de ordem de serviço — Kanban e filtros; CSS externo para respeitar CSP. */
#osKanbanBoard { align-items:start; }
.os-coluna-dot { width:9px; height:9px; border-radius:50%; background:var(--os-coluna-cor); flex:0 0 auto; }
.os-coluna-count { color:var(--muted); font-variant-numeric:tabular-nums; font-size:var(--text-xs); line-height:1; }
.os-coluna.is-collapsed { padding:var(--space-2) !important; min-width:44px !important; display:flex; flex-direction:column; align-items:stretch; }
.os-coluna.is-collapsed .os-coluna-toggle { margin:0; height:100%; min-height:160px; display:flex; flex-direction:column; justify-content:flex-start; align-items:center; gap:var(--space-2); text-align:center; }
.os-coluna.is-collapsed .os-coluna-label { writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap; word-break:normal; overflow-wrap:normal; line-height:1.1; letter-spacing:.55px; }
.os-coluna.is-collapsed .os-coluna-dot { margin-top:2px; }
.os-coluna.is-collapsed .os-coluna-count { margin-top:auto; margin-bottom:2px; }
.os-coluna.is-collapsed .os-coluna-body { display:none; }
.os-coluna.is-collapsed .os-coluna-toggle::after { content:none; }
.os-coluna:not(.is-collapsed) .os-coluna-toggle::after { content:'‹'; margin-left:auto; color:var(--muted); font-size:14px; }

/* Dashboard de Ordens de Servico.
   Estas regras precisam viver AQUI, num arquivo servido pela origem, e nao num
   bloco <style> injetado por JS: a CSP dos dominios do app declara
   `style-src-elem 'self'` SEM 'unsafe-inline', entao o navegador descarta
   qualquer <style> criado em runtime. Era por isso que os filtros apareciam
   empilhados, um por linha, e os graficos nao dividiam a linha no desktop. */
#osDashboardConteudo .os-dash-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3-5);
}
#osDashboardConteudo .os-dash-filtros {
  display: flex;
  gap: var(--space-2-5);
  align-items: end;
  flex-wrap: wrap;
}
#osDashboardConteudo .os-dash-filtros .input { width: 100%; max-width: 100%; min-width: 0; }

@media (max-width: 768px) {
  #osDashboardConteudo .os-dash-grid { grid-template-columns: 1fr; }
  #osDashboardConteudo .os-dash-grid > div:last-child { grid-column: auto !important; }
  #osDashboardConteudo .os-dash-filtros label {
    min-width: 0 !important; flex: 1 1 100% !important;
    width: 100%; max-width: 100%; overflow: hidden;
  }
  #osDashboardConteudo .os-dash-filtros input,
  #osDashboardConteudo .os-dash-filtros select {
    min-width: 0 !important; width: 100% !important; max-width: 100%; box-sizing: border-box;
  }
  #osDashboardConteudo .os-dash-filtros button { width: 100%; }
}