/* ==========================================================================
   base.css — núcleo compartilhado da modernização visual (Direção A: Refinamento)
   ==========================================================================
   Este arquivo concentra os tokens de design e os componentes que hoje estão
   duplicados (quase byte-a-byte) entre panel.css, settings.css, billing.css,
   leads.css, catalog.css, tickets.css e schedule.css.

   ATENÇÃO — Fatia 0: este arquivo AINDA NÃO é importado por nenhum template.
   É intencionalmente órfão nesta etapa: existe só para revisão isolada do
   núcleo, sem risco de regressão visual. As telas serão migradas fatia a
   fatia (uma de cada vez) para importar este base.css e remover o CSS
   duplicado equivalente do seu arquivo próprio.

   Convenção: nomes de classe abaixo são os que JÁ existem no projeto — não
   foram inventados nem renomeados. Onde a mesma ideia tem nomes diferentes
   por tela (ex.: .app-title vs .glyph), a versão canônica ficou aqui e o
   alias antigo segue documentado em comentário, para ser adotado depois.
   ========================================================================== */

/* ── 1. Fontes ────────────────────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap");

/* ── 2. Tokens (design system canônico) ──────────────────────────────── */
:root {
  /* cores base */
  --bg: #eef3f8;
  --surface: #ffffff;
  --surface-soft: #f7fbff;
  --stroke: #d6e0ec;
  --text: #102033;
  --muted: #58708c;
  --accent: #0ea5a4;
  --accent-strong: #0a9392;
  --accent-soft: #ddf5f4;

  /* aliases — corrigem tokens indefinidos encontrados nos CSS atuais */
  --border: var(--stroke); /* corrige var(--border) indefinido no settings.css */
  --hover: #eef4fb;        /* corrige var(--hover) indefinido no schedule.css */

  /* status unificados (substituem os equivalentes espalhados: --open/--confirmed/
     --pending, --cold/--warm/--hot/--done/--prog/--cancel etc. de cada tela) */
  --status-info: #4f83cc;
  --status-warn: #e0a84f;
  --status-danger: #e05c5c;
  --status-ok: #2fa56b;
  --status-muted: #7a8a9c;

  /* espaçamento (escala 4/8) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* raios */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* sombras em camadas */
  --sh-1: 0 1px 2px rgba(9, 31, 53, 0.04);
  --sh-2: 0 6px 16px rgba(9, 31, 53, 0.06);
  --sh-3: 0 20px 50px rgba(16, 32, 51, 0.10);

  /* tipografia (escala ~1.2) */
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 26px;

  /* anel de foco (acessibilidade) */
  --ring: 0 0 0 3px rgba(14, 165, 164, 0.18);
}

/* ── 3. Reset básico ──────────────────────────────────────────────────── */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Manrope", "Segoe UI", sans-serif;
  background:
    radial-gradient(1200px 500px at 20% -15%, #d9eaf9 0%, transparent 60%),
    radial-gradient(900px 420px at 100% -10%, #d7f4f0 0%, transparent 58%),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* ── 4. Componentes compartilhados ───────────────────────────────────── */

/* Glyph do logo (◫) — versão canônica com gradiente navy.
   Aliases hoje usados nos templates: .glyph (maioria das telas),
   .app-title (panel.html), .login-glyph (login.html), .book-logo (schedule_book.html). */
.glyph {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 16px;
  background: linear-gradient(140deg, #0f1f35, #1d4364);
  color: #f4fbff;
}

/* ── Nav unificada (Fatia 1) ─────────────────────────────────────────
   Hoje existem dois conjuntos de classes concorrentes para a mesma barra
   de navegação do topo:
     - .modules-nav / .nav-links   → panel.html, billing.html, leads.html,
                                      tickets.html (e o <nav> interno do
                                      schedule_kanban.html)
     - .topbar / .module-links     → settings.html, catalog.html (e o
                                      wrapper externo do schedule_kanban.html)
   As regras abaixo agrupam os dois conjuntos para que toda tela tenha a
   MESMA barra (altura, tipografia do link, glyph, título) por padrão.
   Cada tela pode continuar sobrescrevendo no seu CSS próprio (carregado
   depois deste), que é exatamente o que panel/billing/leads/settings/
   schedule já fazem hoje — os valores abaixo já nascem alinhados a essas
   telas; catalog.css e tickets.css são as duas que hoje divergem (título
   16px/18px) e passam a herdar o padrão daqui. */
.modules-nav,
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.nav-left,
.top-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  min-width: 0;
  max-width: 100%;
}

/* Título do header (glyph + h1): tamanho e peso canônicos — ver .glyph
   acima para o ícone. Cobre os seletores de h1 usados hoje por tela
   (.app-title é o glyph do panel.html, tratado junto de .glyph acima).
   22px (--fs-xl) é o padrão de-facto do produto: panel/settings/leads/
   billing/schedule já medem ~22px. catalog (16px) e tickets (18px)
   herdam este valor ao deixarem de sobrescrever font-size no seu CSS. */
.modules-nav h1,
.topbar h1,
.nav-left h1,
.top-left h1,
.screen-title {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: var(--fs-xl); /* 22px — padrão canônico da nav */
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Links de navegação — pill com borda, estado ativo preenchido em
   --accent-soft, hover em --hover. Agrupa os dois conjuntos de classe
   (.nav-links / .module-links) usados pelas telas. */
.nav-links,
.module-links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.nav-links a,
.module-links a {
  text-decoration: none;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  font-size: var(--fs-sm);
  font-weight: 700;
  font-family: inherit;
  transition: all 160ms ease;
}

.nav-links a:hover,
.module-links a:hover {
  background: var(--hover);
  border-color: #9fc2dd;
  color: var(--text);
}

.nav-links a.active,
.nav-links a[aria-current],
.module-links a.active,
.module-links a[aria-current] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}

/* Usuário logado / logout (autenticação multi-usuário).
   Cópia literal do bloco duplicado byte-a-byte em panel.css, leads.css,
   billing.css, settings.css, schedule.css, tickets.css e catalog.css. */
.nav-user {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  margin-left: auto;
}

.nav-user-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
  min-width: 0;
  overflow-wrap: anywhere;
}

.logout-form {
  margin: 0;
  display: inline-flex;
}

.logout-link {
  border: 1px solid var(--stroke);
  background: #ffffff;
  color: var(--muted);
  border-radius: var(--r-pill);
  padding: 6px 12px;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all 160ms ease;
}

.logout-link:hover {
  border-color: #9fc2dd;
  color: var(--text);
  background: var(--accent-soft);
}

.logout-link:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Botões base.
   .btn      → estilo neutro (leads.css / tickets.css)
   .btn-primary → gradiente teal (mais forte que o sólido usado hoje em
                  catalog/tickets/leads — canonizado aqui como gradiente)
   .btn-ghost   → transparente com borda (settings.css)
   .btn-mini    → variante compacta (catalog.css / settings.css)
   .btn-danger  → ação destrutiva (catalog.css) */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--stroke);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}

.btn:hover {
  background: var(--surface-soft);
}

.btn:focus-visible {
  box-shadow: var(--ring);
  outline: none;
}

.btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #fff;
  border-color: var(--accent-strong);
}

.btn-primary:hover {
  opacity: 0.92;
}

.btn-primary:focus-visible {
  box-shadow: var(--ring);
  outline: none;
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: default;
}

.btn-ghost {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: var(--r-md);
  padding: 8px 18px;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.btn-ghost:hover {
  background: var(--surface-soft);
}

.btn-ghost:focus-visible {
  box-shadow: var(--ring);
  outline: none;
}

.btn-ghost:disabled {
  opacity: 0.6;
  cursor: default;
}

.btn-mini {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  border: 1.5px solid var(--stroke);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s;
}

.btn-mini:hover {
  background: var(--surface-soft);
  border-color: var(--accent);
}

.btn-mini:focus-visible {
  box-shadow: var(--ring);
  outline: none;
}

.btn-mini:disabled {
  opacity: 0.6;
  cursor: default;
}

.btn-danger {
  background: none;
  color: var(--status-danger);
  border-color: #f6c9c9;
}

.btn-danger:hover {
  background: #fdecea;
}

.btn-danger:focus-visible {
  box-shadow: var(--ring);
  outline: none;
}

.btn-danger:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Inputs base — inclui [type=password] explicitamente (hoje ausente na
   maioria das telas, o que deixa o campo de senha sem o estilo padrão). */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="time"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--stroke);
  background: var(--surface-soft);
  color: var(--text);
  font-size: var(--fs-md);
  font-family: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="time"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2358708c' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}

textarea {
  resize: vertical;
}

/* Badge / chip (pill). .badge (settings.css) e .chip (leads.css) cobrem o
   mesmo padrão visual — pill pequena com fundo suave. */
.badge,
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--r-pill);
  padding: 6px 14px;
  font-size: var(--fs-xs);
  font-weight: 700;
  border: 1px solid var(--stroke);
  background: var(--surface);
  color: var(--text);
  cursor: default;
  font-family: inherit;
}

.chip {
  cursor: pointer;
  transition: all 0.15s;
}

.chip:hover {
  background: var(--surface-soft);
}

.chip.active {
  background: var(--text);
  color: #fff;
  border-color: var(--text);
}

.badge.on {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-color: transparent;
}

/* Empty state — versão canônica (a melhor implementação hoje: leads.css). */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
  color: var(--muted);
}

.empty-icon {
  font-size: 40px;
  margin-bottom: var(--sp-3);
}

.empty-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.empty-sub {
  font-size: var(--fs-sm);
  max-width: 360px;
}

/* Dialog / modal base — backdrop escuro + estrutura header/body/footer
   genérica (padrão hoje em schedule.css/tickets.css, com header/body/footer
   nomeados como em leads.css/settings.css). */
dialog {
  border: none;
  border-radius: var(--r-lg);
  padding: 0;
  width: min(92vw, 460px);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--sh-3);
}

dialog::backdrop {
  background: rgba(15, 31, 53, 0.45);
  backdrop-filter: blur(2px);
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--stroke);
}

.modal-header h2,
.modal-header h3 {
  margin: 0;
  font-size: var(--fs-lg);
  font-family: "Space Grotesk", sans-serif;
}

.modal-body {
  padding: 16px 20px 20px;
  overflow-y: auto;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--stroke);
  background: var(--bg);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

.modal-close {
  background: transparent;
  border: none;
  font-size: var(--fs-lg);
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--r-sm);
}

.modal-close:hover {
  background: var(--surface-soft);
  color: var(--text);
}