/* ============================================================
   Design System — FLUZE (plataforma financeira SaaS)
   Paleta da marca FLUZE: azul navy institucional + laranja de
   ação. "Simples. Inteligente. Em movimento." Fonte única de
   verdade — não usar hex solto fora deste arquivo.
   ============================================================ */

:root {

  /* --------------------------------------------------------
     MARCA — laranja (AÇÃO)
     Laranja é a cor de ação da FLUZE. No sistema, ela é
     exclusiva da ação primária: UM botão laranja por tela.

     O botão usa o laranja EXATO da marca (#FF8A00). O texto sobre
     o laranja é BRANCO por decisão de produto (--brand-orange-ink).

     NOTA DE CONTRASTE: branco sobre #FF8A00 dá ~2:1, abaixo do
     mínimo WCAG (3:1 texto grande / 4.5:1 normal). O texto escuro
     anterior (#3D2600) passava AAA (7.7:1). A troca é uma escolha
     de marca, ciente do trade-off de acessibilidade.
     -------------------------------------------------------- */
  --brand-orange:      #FF8A00;   /* ação primária, barra do item ativo, ícones (FLUZE) */
  --brand-orange-ink:  #fff;      /* texto SOBRE o laranja — branco (decisão de produto) */
  --brand-orange-dark: #E67C00;   /* hover do botão */
  --brand-orange-50:   #FFF1E0;   /* fundo de destaque suave */

  /* --------------------------------------------------------
     MARCA — azuis
     A marca tem dois azuis: o índigo do site e o ciano do logo.
     O ciano NÃO entra na interface — fica só no logo. Se virasse
     cor de UI, competiria com os outros azuis sem ganhar nada.
     -------------------------------------------------------- */
  --brand-blue:      #1668E3;   /* links, navegação, seleção */
  --brand-blue-dark: #0D1F3D;   /* sidebar — azul navy FLUZE */
  --brand-blue-50:   #E8F0FD;   /* fundo de seleção */
  /* --brand-cyan: #0F9BD1 — SÓ no logo. Não usar em UI. */

  /* --------------------------------------------------------
     SUPERFÍCIES
     -------------------------------------------------------- */
  --surface-page:    #F4F6F8;
  --surface-card:    #FFFFFF;
  --surface-subtle:  #F1EFE8;
  --surface-sidebar: var(--brand-blue-dark);

  /* --------------------------------------------------------
     TEXTO
     -------------------------------------------------------- */
  --text-primary:       #1A1A1A;
  --text-secondary:     #5F5E5A;
  --text-muted:         #888780;
  --text-on-dark:       #FFFFFF;
  --text-on-dark-muted: #9BB5D4;   /* itens inativos da sidebar */

  /* --------------------------------------------------------
     BORDAS
     -------------------------------------------------------- */
  --border:        #E5E4E0;
  --border-strong: #D3D1C7;
  --radius:        8px;
  --radius-card:   12px;

  /* --------------------------------------------------------
     VALOR — azul entra, vermelho sai
     Convenção de extrato bancário BR (crédito azul, débito
     vermelho). O azul está livre para isso porque a AÇÃO é
     laranja, não azul.

     NÃO usar verde: verde significa `paga` no badge de status.
     SEMPRE com sinal + / − : cor sozinha falha para daltônicos
     (~8% dos homens) e em impressão P&B.
     -------------------------------------------------------- */
  --valor-entrada: #185FA5;
  --valor-saida:   #A32D2D;
  --valor-neutro:  var(--text-primary);   /* MRR, saldo, inadimplência */
  --valor-morto:   var(--text-muted);     /* cobrança cancelada/estornada */

  /* --------------------------------------------------------
     STATUS DA COBRANÇA
     Seis estados. O cinza tem DOIS PESOS:

     `pendente`  → cinza QUENTE, texto escuro. Está vivo,
                   esperando. Saiu do âmbar porque colidia com o
                   laranja de ação.
     `cancelada` → cinza FRIO, texto apagado. Está morta.
     `estornada` → idem.

     Temperatura e peso separam "esperando" de "acabou".
     -------------------------------------------------------- */
  --status-pendente-bg:    #EFEDE7;   /* cinza quente */
  --status-pendente-fg:    #4A4843;

  --status-paga-bg:        #E3F0D8;
  --status-paga-fg:        #27500A;

  --status-vencida-bg:     #FBE4E4;
  --status-vencida-fg:     #791F1F;

  --status-renegociada-bg: #E7E4FA;
  --status-renegociada-fg: #3C3489;

  --status-cancelada-bg:   #F2F3F4;   /* cinza frio */
  --status-cancelada-fg:   #9A9CA0;

  --status-estornada-bg:   #F2F3F4;
  --status-estornada-fg:   #9A9CA0;

  /* --------------------------------------------------------
     FEEDBACK
     -------------------------------------------------------- */
  --feedback-erro-bg:  #FBE4E4;  --feedback-erro-fg:  #791F1F;
  --feedback-aviso-bg: #FEF3DF;  --feedback-aviso-fg: #6B4600;
  --feedback-ok-bg:    #E3F0D8;  --feedback-ok-fg:    #27500A;
  --feedback-info-bg:  #E8F0FD;  --feedback-info-fg:  #0C447C;

  /* --------------------------------------------------------
     TIPOGRAFIA
     Valor monetário usa Roboto com tabular-nums: dígitos de
     largura fixa alinham por casa decimal na coluna, sem o
     visual de código da monoespaçada. NÃO usar --font-mono
     para valores; usar a classe .valor (abaixo).
     -------------------------------------------------------- */
  --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-num:  Roboto, "Helvetica Neue", Arial, sans-serif;   /* + tabular-nums via .valor */

  /* Escala fixa (texto/UI). Passos pequenos ficam fixos: fluidez em corpo de
     texto atrapalha leitura e alinhamento em tabelas densas. */
  --size-micro:   10px;   /* rótulos de coluna, tags minúsculas */
  --size-caption: 11px;
  --size-body:    12px;
  --size-md:      13px;
  --size-label:   14px;
  --size-lg:      15px;
  --size-title:   16px;
  --size-metric:  22px;

  /* Escala grande (números de destaque: KPIs, métricas, contadores). Só aqui
     usamos clamp() — o teto de cada token é igual ao px atual, então o desktop
     largo não muda; em telas estreitas encolhe suavemente em vez de estourar.
     rem = base do usuário; vw = fluidez proporcional à largura. */
  --size-xl:      clamp(1.125rem, 1.00rem + 0.6vw, 1.3125rem); /* ~18→21px */
  --size-2xl:     clamp(1.25rem,  1.05rem + 1.0vw, 1.625rem);  /* ~20→26px */
  --size-display: clamp(1.375rem, 1.10rem + 1.4vw, 1.875rem);  /* ~22→30px */

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;   /* números/valores monetários */

  /* --------------------------------------------------------
     ESPAÇAMENTO E ALTURAS
     -------------------------------------------------------- */
  --gap-xs: 4px;   --gap-sm: 8px;   --gap-md: 12px;
  --gap-lg: 16px;  --gap-xl: 24px;

  --pad-card:  16px;
  --pad-input: 8px 12px;

  --h-control:    36px;
  --h-control-sm: 30px;
}


/* ============================================================
   COMPONENTES
   ============================================================ */

/* --- Badge de status --- */
.badge {
  display: inline-block;
  font-size: var(--size-caption);
  padding: 3px 10px;
  border-radius: var(--radius);
  white-space: nowrap;
}
.badge--pendente    { background: var(--status-pendente-bg);    color: var(--status-pendente-fg); }
.badge--paga        { background: var(--status-paga-bg);        color: var(--status-paga-fg); }
.badge--vencida     { background: var(--status-vencida-bg);     color: var(--status-vencida-fg); }
.badge--renegociada { background: var(--status-renegociada-bg); color: var(--status-renegociada-fg); }
.badge--cancelada   { background: var(--status-cancelada-bg);   color: var(--status-cancelada-fg); }
.badge--estornada   { background: var(--status-estornada-bg);   color: var(--status-estornada-fg); }
/* Repasse: cliente pagou ao gateway, valor ainda não creditado na conta (em trânsito). */
.badge--repasse     { background: var(--feedback-info-bg);      color: var(--feedback-info-fg); }
/* Semânticos genéricos (status de empresa, etc.). */
.badge--ok    { background: var(--feedback-ok-bg);    color: var(--feedback-ok-fg); }
.badge--warn  { background: var(--feedback-aviso-bg);  color: var(--feedback-aviso-fg); }
.badge--info  { background: var(--feedback-info-bg);   color: var(--feedback-info-fg); }
.badge--muted { background: var(--status-cancelada-bg); color: var(--status-cancelada-fg); }

/* --- Valor monetário --- */
.valor {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  text-align: right;
  white-space: nowrap;
}
.valor--entrada { color: var(--valor-entrada); }
.valor--saida   { color: var(--valor-saida); }
.valor--neutro  { color: var(--valor-neutro); }
.valor--morto   { color: var(--valor-morto); }
/* Cobrança cancelada/estornada perde a cor do valor: não é mais
   nem entrada nem saída. Se ficasse azul, o olho contaria como
   dinheiro a receber. A linha inteira esmaece. */

/* --- Botões --- */
.btn {
  height: var(--h-control);
  padding: 0 16px;
  font-size: var(--size-body);
  font-weight: 600;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
}
.btn:hover  { background: var(--surface-subtle); }
.btn:active { transform: scale(0.98); }

/* UM botão primário por tela. Laranja é escasso por design. */
.btn--primary {
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  color: var(--brand-orange-ink);        /* branco (decisão de produto) — herda o peso 600 de .btn */
}
.btn--primary:hover {
  background: var(--brand-orange-dark);
  border-color: var(--brand-orange-dark);
  color: var(--text-on-dark);            /* no tom escuro do hover, branco passa */
}

/* Destrutivo secundário: outline vermelho, sem preenchimento. No hover ganha um
   fundo vermelho bem claro, mantendo o texto vermelho legível (nunca vermelho
   sobre vermelho). */
.btn--danger {
  background: transparent;
  border-color: var(--valor-saida);
  color: var(--valor-saida);
}
.btn--danger:hover { background: var(--feedback-erro-bg); border-color: var(--valor-saida); color: var(--valor-saida); }

.btn:disabled { opacity: 0.45; cursor: not-allowed; }
/* Botão desabilitado SEMPRE acompanha o motivo. Nunca cinza mudo.
   Ex.: "Cadastre um contato e um plano primeiro". Ver §23 da doc. */

/* --- Link --- */
/* Sem underline por padrão em qualquer <a> (evita, ex., o underline nas setas
   de navegação que são links). Underline é sempre INTENCIONAL: use .link (que
   sublinha no hover) ou uma regra própria com mais especificidade. */
a { text-decoration: none; }
.link { color: var(--brand-blue); text-decoration: none; }
.link:hover { text-decoration: underline; }

/* --- Card --- */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--pad-card);
}

/* --- Métrica --- */
.metric { background: var(--surface-subtle); border-radius: var(--radius); padding: 12px 14px; }
.metric__label { font-size: var(--size-caption); color: var(--text-secondary); margin: 0 0 4px; }
.metric__value {
  font-size: var(--size-metric);
  font-weight: var(--weight-semibold);
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  margin: 0;
}
/* Estoque é neutro (MRR, saldo, inadimplência).
   Movimento futuro tem cor ("a receber" azul, "a pagar" vermelho). */

/* --- Tabela --- */
.table { width: 100%; border-collapse: collapse; font-size: var(--size-body); }
.table th {
  text-align: left;
  font-size: var(--size-caption);
  font-weight: var(--weight-normal);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.table td { padding: 12px 0; border-bottom: 1px solid var(--border); color: var(--text-primary); }
.table tr:last-child td { border-bottom: none; }
.table tr.morta td { color: var(--text-muted); }   /* cancelada/estornada */

/* --- Inputs --- */
.input, .select, .textarea {
  height: var(--h-control);
  padding: var(--pad-input);
  font-size: var(--size-body);
  font-family: var(--font-sans);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-card);
  color: var(--text-primary);
  width: 100%;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px var(--brand-blue-50);
}
.input--valor { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); text-align: right; }
.textarea { height: auto; min-height: 72px; resize: vertical; }

/* Chevron custom (evita o dropdown nativo desalinhado do sistema). */
.select {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%235F5E5A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

/* Select inline (edição rápida em tabela/linha): compacto, largura ao
   conteúdo, discreto — vira controle evidente só no hover/foco. */
.select--inline {
  width: auto; max-width: 100%;
  height: var(--h-control-sm);
  padding: 0 26px 0 8px;
  font-size: var(--size-body);
  font-weight: var(--weight-medium);
  background-position: right 7px center;
  border-color: transparent;
  background-color: transparent;
  cursor: pointer;
}
.select--inline:hover { border-color: var(--border-strong); background-color: var(--surface-card); }

/* --- Empty state --- */
.empty {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 32px;
  text-align: center;
}
.empty__text { font-size: var(--size-body); color: var(--text-secondary); margin: 0 0 12px; }
/* Todo empty state tem AÇÃO. Se depende de pré-requisito, dizer
   qual e linkar. Ver §23 da doc. */


/* ============================================================
   SIDEBAR (accordion)
   ============================================================ */

.sidebar { background: var(--surface-sidebar); color: var(--text-on-dark); width: 220px; padding: 12px 0; }

.sidebar__group {
  display: flex; align-items: center; gap: var(--gap-sm);
  padding: 9px 16px;
  font-size: var(--size-body);
  color: var(--text-on-dark-muted);
  cursor: pointer;
}
.sidebar__group:hover { background: rgba(255,255,255,0.05); }
.sidebar__group--open { color: var(--text-on-dark); }
.sidebar__chevron { margin-left: auto; transition: transform 0.15s; }

.sidebar__item {
  display: block;
  padding: 7px 16px 7px 40px;
  font-size: var(--size-caption);
  color: var(--text-on-dark-muted);
  cursor: pointer;
}
.sidebar__item:hover { background: rgba(255,255,255,0.05); }
.sidebar__item--active {
  background: rgba(255,255,255,0.10);
  color: var(--text-on-dark);
  box-shadow: inset 3px 0 0 var(--brand-orange);   /* laranja marca o lugar */
}


/* ============================================================
   HEADER
   ============================================================ */

.header {
  background: var(--surface-card);
  border-bottom: 1px solid var(--border);
  padding: 12px 20px;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap-md);
}
.header__title { font-size: var(--size-title); font-weight: var(--weight-medium); }
.header__crumb { font-size: var(--size-caption); color: var(--text-muted); margin-left: var(--gap-sm); }
.header__tools { display: flex; align-items: center; gap: var(--gap-sm); }
.header__saldo {
  font-size: var(--size-caption);
  color: var(--text-secondary);
  padding: 5px 12px;
  background: var(--surface-subtle);
  border-radius: var(--radius);
}
.header__saldo b { color: var(--text-primary); font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); }
/* Saldo aparece só onde a decisão depende de haver dinheiro.
   Ver §21.5 da doc. */