/*
 * Lista de Itens — o que é só desta app, por cima do netscreen.css (cópia do NetScreen AI).
 *
 * A cabine: cada etapa de um item desenhada como uma cabine LED, uma matriz de
 * pontos que acende pelo estado. Segue a lógica dos medidores em ticks do Efferd
 * (dashboard-14), com os tokens de estado do NetScreen AI:
 *   concluída → --online · atenção → --accent · atraso → --offline
 * O laranja (--primary) fica para o que se carrega, como no resto da plataforma.
 */

:root {
  --apagado: 24 5% 30%;   /* ponto de LED desligado */
}

.cabine {
  --c: var(--apagado);
  display: block;
  width: 100%;
  height: 26px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px hsl(var(--c) / 0.45);
  background-color: hsl(var(--c) / 0.08);
  background-image: radial-gradient(circle, hsl(var(--c)) 1.45px, transparent 1.75px);
  background-size: 6px 6px;
  background-position: 1px 1px;
  position: relative;
}
.cabine.s-concluida,
.cabine.s-concluida-atraso {
  --c: var(--online);
  background-color: hsl(var(--online) / 0.22);
}
.cabine.s-concluida-atraso::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 8px;
  height: 8px;
  background: hsl(var(--accent));
  border-radius: 0 4px 0 4px;
}
.cabine.s-atencao { --c: var(--accent); }
.cabine.s-atraso {
  --c: var(--offline);
  box-shadow: inset 0 0 0 1px hsl(var(--offline) / 0.7), 0 0 0 3px hsl(var(--offline) / 0.16);
}
.cabine.s-por-confirmar {
  --c: 24 5% 45%;
  background-image: radial-gradient(circle, transparent 0.9px, hsl(var(--c)) 1.1px, hsl(var(--c)) 1.6px, transparent 1.9px);
}
.cabine.s-na {
  background: none;
  box-shadow: none;
  border: 1px dashed var(--border);
}
.cabine.risco {
  outline: 2px dashed hsl(var(--accent));
  outline-offset: 2px;
}
/* A red flag do Bruno: o prazo falhou em algum momento. Fica depois de
   replanear e depois de concluída — um canto vermelho em cima, à esquerda. */
.cabine.falhou::before {
  content: '';
  position: absolute;
  left: -1px;
  top: -1px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 9px 0 0;
  border-color: hsl(var(--offline)) transparent transparent transparent;
  border-top-left-radius: 4px;
}

/* A linha de um item: clicável por inteiro, e com foco visível */
.linha-item { transition: background-color 120ms ease; }
.linha-item:hover { background: hsl(var(--secondary) / 0.6); }

/* A chamada de atenção do Bruno: um filete claro à esquerda — não o laranja,
   que na plataforma quer dizer "carregável" */
.linha-item.chamada::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: hsl(var(--foreground));
}

/* Navegação de topo: o separador activo leva o filete laranja, como o menu do NetScreen AI */
.nav-topo[aria-current='page'] {
  color: hsl(var(--foreground));
  box-shadow: inset 0 -2px 0 hsl(var(--primary));
}

/* Os separadores rolam na horizontal no telemóvel, sem barra à vista */
.sem-barra { scrollbar-width: none; }
.sem-barra::-webkit-scrollbar { display: none; }
/* Há separadores fora do ecrã à direita: a barra esbate-se nesse lado */
.ha-mais {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
}

/* Caixas de marcar e botões de opção com tamanho para o dedo */
input[type='checkbox'],
input[type='radio'] {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: hsl(var(--primary));
  flex-shrink: 0;
}

/* Campos de formulário com a superfície do cartão */
.campo {
  width: 100%;
  background: hsl(var(--card));
  box-shadow: inset 0 0 0 1px var(--border);
  border: 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: hsl(var(--foreground));
}
.campo:disabled { opacity: 0.45; }
input[type='date'].campo { color-scheme: dark; }

/* O botão de fechar do painel (drawer.jsx, cópia do NetScreen AI) tinha 26 px: pouco para o telemóvel */
.drawer-panel header button[aria-label='Fechar'] {
  padding: 0.75rem;
  margin: -0.5rem -0.75rem 0 0;
}