/* Agenda do Dia (doc 08 §2.1) — layout da tela que o vendedor abre em pé,
   entre atendimentos, quase sempre no celular.

   Existe como arquivo próprio porque o painel NÃO tem tema Tailwind (sem
   `tailwind.config.js`, sem `viteTheme()`): utilitária arbitrária
   (`grid-cols-[…]`, `max-w-[10rem]`) não compila em view de painel, e o que
   sobra são as utilidades já presentes no CSS do Filament. A Blade expõe só os
   hooks `fi-rel-agenda-*`; largura, grade e recorte moram aqui.

   Registrado em `AdminPanelProvider::boot()` com `Css::make(...)`, e publicado
   por `php artisan filament:assets` — sem isso `public/css/app/` fica velho e a
   tela sai sem estilo em produção. */

/* --- Status da base ---------------------------------------------------- */

.fi-rel-agenda-base-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* --- Filtro (níveis 1–3) ----------------------------------------------- */

/* A grade dos dois campos saiu daqui na conversão para `Select` searchable: o
   `Forms\Components\Grid` do Filament já faz o 1→2 colunas, e manter uma
   segunda regra para o mesmo layout é a divergência que ninguém percebe. */

.fi-rel-agenda-filter-flag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

/* --- Abas por motivo ---------------------------------------------------- */

/* Onze motivos não cabem em linha no celular: a tira rola na horizontal em vez
   de quebrar em quatro linhas de botão. */
.fi-rel-agenda-tabs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  scrollbar-width: thin;
}

.fi-rel-agenda-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  padding: 0.5rem 0.875rem;
  border-radius: 0.5rem;
  border: 1px solid rgb(228 228 231);
  background-color: rgb(255 255 255);
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(63 63 70);
  white-space: nowrap;
}

.fi-rel-agenda-tab:hover {
  background-color: rgb(244 244 245);
}

.fi-rel-agenda-tab-active {
  border-color: rgba(var(--primary-600), 1);
  color: rgba(var(--primary-600), 1);
  box-shadow: inset 0 -2px 0 0 rgba(var(--primary-600), 1);
}

.dark .fi-rel-agenda-tab {
  border-color: rgb(255 255 255 / 0.1);
  background-color: rgb(255 255 255 / 0.05);
  color: rgb(212 212 216);
}

.dark .fi-rel-agenda-tab:hover {
  background-color: rgb(255 255 255 / 0.1);
}

.dark .fi-rel-agenda-tab-active {
  border-color: rgba(var(--primary-400), 1);
  color: rgba(var(--primary-400), 1);
  box-shadow: inset 0 -2px 0 0 rgba(var(--primary-400), 1);
}

/* --- Avisos vigentes ---------------------------------------------------- */

.fi-rel-agenda-notices {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.fi-rel-agenda-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

/* --- Progresso do dia --------------------------------------------------- */

.fi-rel-agenda-progress {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.fi-rel-agenda-progress-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.fi-rel-agenda-progress-track {
  height: 0.5rem;
  border-radius: 9999px;
  background-color: rgb(228 228 231);
  overflow: hidden;
}

.dark .fi-rel-agenda-progress-track {
  background-color: rgb(255 255 255 / 0.1);
}

.fi-rel-agenda-progress-bar {
  height: 100%;
  border-radius: 9999px;
  background-color: rgba(var(--primary-600), 1);
}

/* --- Grade de cards ----------------------------------------------------- */

/* `items_per_page` é 6 (RN-045): 1 coluna no celular, 2 no tablet, 3 no
   desktop — as seis fichas cabem numa tela sem rolagem em qualquer um deles. */
.fi-rel-agenda-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .fi-rel-agenda-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .fi-rel-agenda-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.fi-rel-agenda-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid rgb(228 228 231);
  background-color: rgb(250 250 250);
}

.dark .fi-rel-agenda-card {
  border-color: rgb(255 255 255 / 0.1);
  background-color: rgb(255 255 255 / 0.05);
}

.fi-rel-agenda-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.fi-rel-agenda-card-name {
  font-weight: 600;
  color: rgb(9 9 11);
  overflow-wrap: anywhere;
}

.dark .fi-rel-agenda-card-name {
  color: rgb(255 255 255);
}

.fi-rel-agenda-card-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.fi-rel-agenda-card-facts dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgb(113 113 122);
}

.fi-rel-agenda-card-facts dd {
  color: rgb(9 9 11);
  overflow-wrap: anywhere;
}

.dark .fi-rel-agenda-card-facts dd {
  color: rgb(244 244 245);
}

.fi-rel-agenda-card-muted {
  color: rgb(113 113 122);
}

/* --- Vazio e paginação -------------------------------------------------- */

/* RN-047: agenda vazia não é erro. O texto fica com largura de leitura, não
   esticado de ponta a ponta do desktop. */
.fi-rel-agenda-empty {
  max-width: 46rem;
  font-size: 0.875rem;
  color: rgb(113 113 122);
}

/* O vazio que NÃO é RN-047: a empresa ativa está escondendo trabalho. */
.fi-rel-agenda-mismatch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.fi-rel-agenda-pagination {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* --- Ações do card ------------------------------------------------------ */

/* Os dois botões do doc 08 §2.2 ④ ficam colados no rodapé do card, e no
   celular ocupam a linha inteira: o alvo de toque de quem está em pé, entre
   atendimentos, não pode ser um botão de 60px no canto. */
.fi-rel-agenda-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.25rem;
}

/* --- Modal de contato (doc 08 §2.2) ------------------------------------- */

.fi-rel-contact {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Duas colunas a partir do tablet: no celular a ficha é uma coluna só, senão
   "Loja de preferência" quebra em três linhas. */
.fi-rel-contact-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem 1rem;
  font-size: 0.875rem;
}

@media (min-width: 640px) {
  .fi-rel-contact-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.fi-rel-contact-facts dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgb(113 113 122);
}

.fi-rel-contact-facts dd {
  color: rgb(9 9 11);
  overflow-wrap: anywhere;
}

.dark .fi-rel-contact-facts dd {
  color: rgb(244 244 245);
}

.fi-rel-contact-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 1rem;
}

.fi-rel-contact-list-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgb(113 113 122);
}

.fi-rel-contact-line {
  font-size: 0.875rem;
  color: rgb(9 9 11);
  overflow-wrap: anywhere;
}

.dark .fi-rel-contact-line {
  color: rgb(244 244 245);
}

.fi-rel-contact-subline {
  padding-left: 1rem;
}

.fi-rel-contact-muted {
  color: rgb(113 113 122);
}

.fi-rel-contact-reason,
.fi-rel-contact-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.fi-rel-contact-phones {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.fi-rel-contact-phone,
.fi-rel-contact-channels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.fi-rel-contact-channels:not(:empty) {
  margin-top: 0.75rem;
}

/* A matriz de saldo é larga por natureza (uma coluna por tamanho): ela rola
   DENTRO do próprio bloco, e nunca faz o modal rolar na horizontal. */
.fi-rel-contact-stock {
  overflow-x: auto;
}

.fi-rel-contact-stock table {
  font-size: 0.875rem;
  border-collapse: collapse;
}

.fi-rel-contact-stock th,
.fi-rel-contact-stock td {
  padding: 0.25rem 0.75rem;
  text-align: center;
  white-space: nowrap;
  border-bottom: 1px solid rgb(228 228 231);
}

.dark .fi-rel-contact-stock th,
.dark .fi-rel-contact-stock td {
  border-color: rgb(255 255 255 / 0.1);
}

.fi-rel-contact-stock th:first-child,
.fi-rel-contact-stock td:first-child {
  text-align: left;
}

/* --- Mix de compras por modelo (doc 08 §2.2, bloco ③) -------------------- */

/* Rosca e legenda lado a lado no PC da loja, empilhados no celular. O bloco ③
   agora nasce ABERTO num modal `4xl`: em coluna única, sete linhas de legenda
   embaixo da rosca empurrariam os telefones do bloco ④ para fora da primeira
   tela. */
.fi-rel-contact-mix {
  display: grid;
  gap: 1rem;
  align-items: center;
}

@media (min-width: 640px) {
  .fi-rel-contact-mix {
    grid-template-columns: 168px 1fr;
  }
}

/* O `viewBox` é 140×140 e o desenho escala com a caixa: o teto de 168px existe
   para a rosca não virar o assunto da tela. */
.fi-rel-mix-ring {
  width: 100%;
  max-width: 168px;
  height: auto;
}

/* `fill: currentColor` nos dois textos do centro: SVG não herda `color`, e sem
   isso o total sairia preto sobre o fundo escuro do tema noturno. */
.fi-rel-mix-total {
  font-size: 22px;
  font-weight: 600;
  fill: currentColor;
}

.fi-rel-mix-caption {
  font-size: 9px;
  fill: currentColor;
  opacity: 0.7;
}

.fi-rel-mix-legend {
  width: 100%;
  font-size: 0.875rem;
  border-collapse: collapse;
}

.fi-rel-mix-legend th,
.fi-rel-mix-legend td {
  padding: 0.25rem 0.5rem;
  text-align: left;
}

.fi-rel-mix-legend th {
  font-weight: 600;
}

/* Peças e % são NÚMERO: alinhados à direita eles se comparam de cima a baixo
   sem o vendedor precisar ler dígito por dígito. */
.fi-rel-mix-legend th:nth-child(n + 2),
.fi-rel-mix-legend td:nth-child(n + 2) {
  text-align: right;
}

/* A forma do arco mora aqui, e não em atributo de `<circle>`: com `fill` e
   `stroke-width` repetidos no markup, a classe `fi-rel-mix-slice` era um gancho
   que não fazia nada — quem fosse ajustar a espessura ia procurá-la e não achar.
   `fill: none` é obrigatório: o padrão do SVG preenche o círculo inteiro e
   engoliria o furo da rosca. */
.fi-rel-mix-slice {
  fill: none;
  stroke-width: 28;
}

.fi-rel-mix-swatch {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
  margin-right: 0.375rem;
  vertical-align: middle;
}

/* Paleta categórica validada para daltonismo, e a ORDEM é FIXA: o `slot` sai do
   ranking do `PurchaseMix`, então a mesma cliente sai sempre com as mesmas
   cores — a memória de cor entre um atendimento e outro só existe assim.
   `stroke` pinta o arco e `background-color` pinta o quadradinho da legenda: a
   mesma classe serve às duas formas, e é isso que garante que o arco e a linha
   da tabela nunca divirjam.

   `others` e `unknown` ficam em cinza de propósito: nem preferência nem modelo,
   e `SEM MODELO` é o mais apagado dos dois porque é qualidade de dado. */
.fi-rel-mix-slice-1 {
  stroke: #2a78d6;
  background-color: #2a78d6;
}

.fi-rel-mix-slice-2 {
  stroke: #eb6834;
  background-color: #eb6834;
}

.fi-rel-mix-slice-3 {
  stroke: #1baf7a;
  background-color: #1baf7a;
}

.fi-rel-mix-slice-4 {
  stroke: #eda100;
  background-color: #eda100;
}

.fi-rel-mix-slice-5 {
  stroke: #e87ba4;
  background-color: #e87ba4;
}

.fi-rel-mix-slice-others {
  stroke: #898781;
  background-color: #898781;
}

.fi-rel-mix-slice-unknown {
  stroke: #c3c2b7;
  background-color: #c3c2b7;
}

/* No tema escuro a mesma paleta sobe de luminosidade: as cores claras do tema
   claro somem contra o fundo escuro do modal. */
.dark .fi-rel-mix-slice-1 {
  stroke: #3987e5;
  background-color: #3987e5;
}

.dark .fi-rel-mix-slice-2 {
  stroke: #d95926;
  background-color: #d95926;
}

.dark .fi-rel-mix-slice-3 {
  stroke: #199e70;
  background-color: #199e70;
}

.dark .fi-rel-mix-slice-4 {
  stroke: #c98500;
  background-color: #c98500;
}

.dark .fi-rel-mix-slice-5 {
  stroke: #d55181;
  background-color: #d55181;
}

.dark .fi-rel-mix-slice-others {
  stroke: #a09e97;
  background-color: #a09e97;
}

.dark .fi-rel-mix-slice-unknown {
  stroke: #5f5e59;
  background-color: #5f5e59;
}