/* 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;
}