/* Almoxarifado e compras: o que ainda é específico deste módulo.
 *
 * ANTES, ESTE ARQUIVO ERA O CSS DE OUTRO SITE INTEIRO.
 *
 * O módulo nasceu de um protótipo e trouxe o CSS do protótipo junto — 68
 * linhas minificadas com fonte própria (Arial), fundo próprio, cores em
 * hexadecimal cravado, uma barra lateral, um cabeçalho com perfil, um rodapé
 * e, o pior de tudo, `.sp-app button{…}` e `.sp-app table{…}`, que repintavam
 * TODO botão e TODA tabela de dentro do módulo. O resultado era uma tela que
 * não parecia a mesma coisa que o resto do sistema porque, de fato, não era.
 *
 * Agora: a casca é a do sistema (bloco, lbl, escala, cartões, pm, chip) e
 * aqui ficam só as peças que o sistema não tem — quadro kanban, calendário,
 * conversa, grade de arquivos e a caixa modal. Todas escritas com os TOKENS
 * do sistema (var(--…)), para seguirem o tema claro e escuro sem retoque.
 *
 * Markup novo neste módulo usa as classes do sistema. As classes antigas do
 * protótipo que sobraram nos arquivos de aba estão mapeadas no fim, com o
 * aspecto do sistema, e vão sumindo conforme cada aba for reescrita.
 */

/* O módulo não pinta fundo nem fonte: ele herda os do sistema. */
.sp-app{display:flex;flex-direction:column;gap:14px}
.sp-app .sp-conta{font-style:normal;font-weight:700;font-size:10px;padding:1px 6px;border-radius:999px;
  background:var(--risk);color:var(--mark-ink);margin-left:4px}
/* Oito abas não cabem na largura do celular: a barra quebra linha, como a do
   Departamento Pessoal. */
#spAbas{flex-wrap:wrap}
#spAbas button{flex:1 1 auto;min-width:92px;padding:9px 8px}

/* ---------------- quadro de compras (kanban) ---------------- */
.sp-app .boardtools{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center}
/* SEIS colunas, que e o numero de etapas: com cinco, a sexta quebrava para
   baixo e o fluxo deixava de se ler da esquerda para a direita. */
.sp-app .kanban{display:grid;grid-template-columns:repeat(6,minmax(180px,1fr));gap:12px;overflow-x:auto;padding-bottom:4px}
.sp-app .kanban section{background:var(--sunk);border:1px solid var(--line-soft);border-radius:var(--r-md);padding:12px}
.sp-app .kanban section>h3{display:flex;align-items:center;gap:7px;margin:2px 0 14px;
  font:700 11px/1.4 var(--fonte);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.sp-app .kanban h3>i{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.sp-app .kanban section>h3 span{margin-left:auto;background:var(--surface);color:var(--ink-faint);
  border-radius:6px;padding:2px 7px;letter-spacing:0;text-transform:none}
.sp-app .ordercard{display:block;width:100%;text-align:left;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:13px;margin-bottom:10px}
.sp-app .ordercard:hover{border-color:var(--mark)}
.sp-app .ordercard h3{margin:10px 0 4px;font-size:13.5px;line-height:1.45}
.sp-app .ordercard p,.sp-app .ordercard>span:not(.companytag){display:block;margin:5px 0;font-size:11px;color:var(--ink-faint)}
.sp-app .ordercard footer{display:flex;align-items:center;gap:6px;margin-top:12px;padding-top:10px;
  border-top:1px solid var(--line-soft);font-size:10px;color:var(--ink-faint)}
.sp-app .companytag{display:inline-block;background:var(--tint);color:var(--mark-dark);
  border-radius:6px;padding:4px 8px;font-size:10px;font-weight:600}
.sp-app .columnempty{text-align:center;color:var(--ink-faint);padding:18px 0;font-size:11px}

/* ---------------- conversa ---------------- */
.sp-app .chatlayout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:14px}
.sp-app .messages{max-height:520px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.sp-app .message{background:var(--sunk);border-radius:var(--r-md);padding:13px 15px}
.sp-app .message strong{display:flex;justify-content:space-between;gap:10px;font-size:12.5px}
.sp-app .message small{font-size:10.5px;font-weight:400;color:var(--ink-faint)}
.sp-app .message p{margin-top:7px;font-size:13.5px;white-space:pre-wrap;color:var(--ink-soft)}
.sp-app .chatinput{display:flex;gap:8px;margin-top:12px}
.sp-app .chatinput input{flex:1}

/* ---------------- calendário ---------------- */
.sp-app .legend{display:flex;flex-wrap:wrap;gap:8px}
.sp-app .calendar{display:grid;grid-template-columns:repeat(7,1fr);border-left:1px solid var(--line-soft)}
.sp-app .calendar>b{text-align:center;padding:9px;font-size:11px;color:var(--ink-faint);border-bottom:1px solid var(--line-soft)}
.sp-app .calendar>div{min-height:104px;padding:8px;border-bottom:1px solid var(--line-soft);border-right:1px solid var(--line-soft)}
.sp-app .calendar strong{display:block;margin-bottom:8px;font-size:11px;font-weight:600}
.sp-app .calendar .today{background:var(--tint)}
.sp-app .event,.sp-app .deliveryevent{display:block;margin:3px 0;padding:4px 6px;font-size:10px;border-radius:5px}
.sp-app .event{background:var(--sunk);border-left:2px solid var(--mark)}
.sp-app .deliveryevent{background:var(--tint);color:var(--mark-dark);text-align:left;width:100%}

/* ---------------- arquivos ---------------- */
.sp-app .filegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.sp-app .filecard{display:flex;flex-direction:column;gap:10px;padding:16px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.sp-app .filecard>span{font-size:22px}
.sp-app .filecard strong{font-size:13.5px;overflow-wrap:anywhere}
.sp-app .attachmentlink{display:block;width:100%;padding:9px;border-radius:var(--r-sm);
  background:var(--tint);color:var(--mark-dark);overflow-wrap:anywhere;font-size:12px}

/* ---------------- a caixa que abre por cima ---------------- */
.sp-app .overlay{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(26,16,36,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.sp-app .modal{background:var(--surface);color:var(--ink);border-radius:var(--r);padding:24px;
  width:560px;max-width:100%;max-height:88vh;overflow:auto;position:relative;box-shadow:var(--sombra-alta)}
.sp-app .close{position:absolute;top:10px;right:12px;font-size:20px;padding:4px 9px}
.sp-app .modal h2{margin:4px 0 14px}
.sp-app .modal h3{margin:20px 0 10px;font-size:13.5px}
.sp-app .field{display:flex;flex-direction:column;gap:6px;margin:14px 0;font-size:12px;color:var(--ink-faint)}
.sp-app .field input,.sp-app .field select,.sp-app .field textarea{width:100%;font-size:14px;color:var(--ink)}
.sp-app .formrow{display:flex;gap:12px}
.sp-app .formrow>*{flex:1;min-width:0}
.sp-app .modalactions{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;margin-top:20px}
.sp-app dl{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0;font-size:13px}
.sp-app dt{color:var(--ink-faint);font-size:11.5px}
.sp-app dd{margin:0}
.sp-app .detailpair{display:contents}
.sp-app .detailpair dd{overflow-wrap:anywhere;white-space:pre-wrap}
.sp-app .quote{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0;padding:11px;
  border:1px solid var(--line);border-radius:var(--r-sm);font-size:12.5px}
.sp-app .quote span{margin-left:auto}
.sp-app .history{background:var(--sunk);border-radius:var(--r-sm);padding:10px;font-size:12.5px}
.sp-app .history small{display:block;margin-top:5px;color:var(--ink-faint)}

/* ---------------- classes do protótipo que ainda sobram ---------------- *
 * Mapeadas para o aspecto do sistema. Cada aba que for reescrita troca a
 * classe pela do sistema e some daqui; o que fica aqui é dívida visível, e
 * não um segundo tema escondido. */
.sp-app .panel{background:var(--surface);border-radius:var(--r);padding:20px;
  display:flex;flex-direction:column;gap:12px;box-shadow:var(--sombra)}
.sp-app .sectionhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.sp-app .eyebrow{font:700 11px/1.5 var(--fonte);letter-spacing:.08em;text-transform:uppercase;color:var(--mark)}
.sp-app .pill{font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px;
  background:var(--tint);color:var(--mark-dark);white-space:nowrap}
.sp-app .pill.danger{background:var(--risk-bg);color:var(--risk)}
.sp-app .pill.ok{background:var(--ok-bg);color:var(--ok)}
.sp-app .red{color:var(--risk)!important}
.sp-app .muted{color:var(--ink-faint);font-size:13px}
.sp-app .empty{display:flex;flex-direction:column;align-items:center;gap:7px;padding:22px 14px;
  text-align:center;color:var(--ink-faint);font-size:13px}
.sp-app .empty b{color:var(--ink-soft);font-weight:600}
.sp-app .actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sp-app .search{max-width:280px}
.sp-app .full{width:100%}
.sp-app .sourcecaption{color:var(--ink-faint);font-size:12px}
.sp-app .tablewrap{overflow:auto}
.sp-app .sheettabs{display:flex;gap:6px;overflow:auto;padding-bottom:10px;border-bottom:1px solid var(--line-soft)}
.sp-app .sheettabs button{white-space:nowrap;font-size:12px}
.sp-app .sheettabs .selected{background:var(--mark);color:var(--mark-ink);border-color:var(--mark)}
.sp-app .cardphoto{width:100%;height:100px;object-fit:contain;background:var(--sunk);border-radius:6px;margin-top:10px}
.sp-app .productphoto{width:100%;max-height:280px;object-fit:contain;background:var(--sunk);border-radius:var(--r-sm);margin:10px 0}
.sp-app .check{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:14px}
.sp-app .check input{width:17px;height:17px}
.sp-app .progress{background:var(--sunk);border-radius:9px;height:4px}
.sp-app .progress i{display:block;height:100%;border-radius:9px;background:var(--mark)}

@media (max-width:760px){
  .sp-app .kanban{grid-template-columns:repeat(6,minmax(158px,1fr))}
  .sp-app .chatlayout{grid-template-columns:1fr}
  .sp-app .calendar{min-width:640px}
  .sp-app .formrow{flex-direction:column;gap:0}
  .sp-app .modal{padding:18px}
}