/* FaturaFaleSim: CSS próprio sobre as variáveis do Unfold (--color-primary-*, --color-base-*, cada uma já uma cor completa).
   Sem Bootstrap, sem @import externo. Tokens de referência: .planning/sketches/themes/default.css e dark.css.
   O styles.css pré-compilado do Unfold não traz tabular-nums nem font-mono; estas classes cobrem a falta. */

/* Números alinhados em colunas (tarifas, durações, valores). */
.ffs-num {
  font-variant-numeric: tabular-nums;
}

/* Números de telefone, rotas e padrões de regex. */
.ffs-mono {
  font-family: ui-monospace, "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

/* Valor em R$ em destaque. */
.ffs-money {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.5rem;
  color: var(--color-base-900, #111827);
}

html.dark .ffs-money {
  color: var(--color-base-100, #f3f4f6);
}

/* Selo de pendência (âmbar), legível nos dois temas. */
.ffs-badge-pending {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
  background-color: #fff4e5;
  color: #b45309;
}

html.dark .ffs-badge-pending {
  background-color: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

/* Barra lateral recolhível só com ícones (D-28/D-33). O JS static/js/nav-rail.js alterna html.ffs-rail.
   Só vale em telas largas (>= 1280px, onde o Unfold mostra a barra fixa); abaixo disso a barra do Unfold
   continua como gaveta. A largura do Unfold é inline (Alpine), por isso o !important. */
.ffs-rail-toggle-row {
  display: flex;
  justify-content: flex-end;
  padding: 0 0.75rem 0.5rem;
}

.ffs-rail-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.375rem;
  cursor: pointer;
  background: transparent;
  color: var(--color-base-500, #6b7280);
}

.ffs-rail-toggle:hover {
  background-color: var(--color-base-100, #f3f4f6);
  color: var(--color-primary-600, #4f46e5);
}

html.dark .ffs-rail-toggle {
  color: var(--color-base-400, #9ca3af);
}

html.dark .ffs-rail-toggle:hover {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--color-primary-500, #6366f1);
}

@media (min-width: 1280px) {
  html.ffs-rail #nav-sidebar,
  html.ffs-rail div:has(> div > #nav-sidebar) {
    width: 72px !important;
  }

  /* Alça de redimensionar não faz sentido na barra de ícones. */
  html.ffs-rail #nav-sidebar > div.cursor-col-resize {
    display: none;
  }

  /* Cabeçalho: só o ícone do sistema. */
  html.ffs-rail #nav-sidebar-inner > div:first-child {
    padding-inline: 0;
    justify-content: center;
  }

  html.ffs-rail #nav-sidebar-inner > div:first-child > div:first-child {
    flex-grow: 0;
    margin: 0;
    padding: 0;
    gap: 0;
    justify-content: center;
  }

  html.ffs-rail #nav-sidebar-inner > div:first-child div.flex-col.grow {
    display: none;
  }

  /* O logo da FaleSim é largo: na barra de ícones encolhe para caber nos 72 px. */
  html.ffs-rail #nav-sidebar-inner > div:first-child img {
    width: 52px;
    height: auto;
    margin: 0;
  }

  html.ffs-rail .ffs-rail-toggle-row {
    justify-content: center;
    padding-inline: 0;
  }

  /* Seções: some o título, ficam o separador e os ícones centralizados. */
  html.ffs-rail #nav-sidebar-apps h2 {
    display: none;
  }

  html.ffs-rail #nav-sidebar-apps hr {
    margin-inline: 1rem;
  }

  html.ffs-rail #nav-sidebar-apps ol {
    padding-inline: 0.75rem;
  }

  html.ffs-rail #nav-sidebar-apps ol > li > a {
    justify-content: center;
    margin-inline: 0;
    padding-inline: 0;
  }

  html.ffs-rail #nav-sidebar-apps ol > li > a > span:not(.material-symbols-outlined) {
    display: none;
  }

  html.ffs-rail #nav-sidebar-apps ol > li > a > .material-symbols-outlined {
    margin: 0;
  }

  /* Rodapé do usuário: só o avatar; o menu abre para fora da barra estreita. */
  html.ffs-rail #nav-sidebar-inner > div:last-child {
    padding-inline: 0;
  }

  html.ffs-rail #nav-sidebar-inner > div:last-child > div:last-child {
    justify-content: center;
    margin-inline: 0;
    padding-inline: 0;
  }

  html.ffs-rail #nav-sidebar-inner > div:last-child .flex-col.select-none,
  html.ffs-rail #nav-sidebar-inner > div:last-child > div:last-child > span.material-symbols-outlined {
    display: none;
  }

  html.ffs-rail #nav-sidebar-inner > div:last-child > nav {
    right: auto;
    left: 0.5rem;
    width: 14rem;
  }
}

/* Listas do admin: o nome (1ª coluna) é o link de edição, mas saía com a cor do texto e ninguém
   percebia. Fica índigo e sublinha ao passar o mouse; o lápis da coluna "Editar" reforça. */
#result_list tbody th > a {
  color: var(--color-primary-600, #4f46e5);
  font-weight: 500;
}

#result_list tbody th > a:hover,
#result_list tbody th > a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

html.dark #result_list tbody th > a {
  color: var(--color-primary-400, #818cf8);
}

.ffs-edit-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.375rem;
  color: var(--color-base-500, #6b7280);
}

.ffs-edit-link:hover,
.ffs-edit-link:focus-visible {
  color: var(--color-primary-600, #4f46e5);
  background: var(--color-base-100, #f3f4f6);
}

html.dark .ffs-edit-link:hover,
html.dark .ffs-edit-link:focus-visible {
  color: var(--color-primary-400, #818cf8);
  background: var(--color-base-800, #1f2937);
}

.ffs-edit-link .material-symbols-outlined {
  font-size: 1.125rem;
}


/* Logo da FaleSim acima do título do login (templates/admin/login_falesim.html). */
.ffs-login-logo {
  margin-bottom: 2rem;
}

.ffs-login-logo img {
  height: 3.5rem;
  width: auto;
}