/* Padrão Visual CliQue (docs/design_doc/padrao-visual-clique.md).
   Carregado globalmente em App/Views/Layouts/Main.php — vale para toda tela
   autenticada, antiga ou nova. */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
    --cq-accent: #2e6cf0;       --cq-accent-dark: #244ec9;   --cq-accent-soft: #eef4ff;
    --cq-text: #1e2a44;         --cq-text-muted: #7a87a3;    --cq-text-faint: #9aa6bf;
    --cq-page-bg: #eef2f7;      --cq-card-bg: #ffffff;
    --cq-border: #e7ecf3;       --cq-row-border: #f1f4f9;    --cq-field-bg: #f7f9fc;
    --cq-sidebar: #0c1c38;      --cq-sidebar-text: #9aa9c6;
    --cq-green: #15935a; --cq-green-soft: #e7f6ee;
    --cq-red: #e0455a;   --cq-red-soft: #fdecef;
    --cq-amber: #c98115; --cq-amber-soft: #fbf2e0;
}

body { font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; color: var(--cq-text); background: var(--cq-page-bg); }

.fw-bold, .fw-bolder { font-weight: 600 !important; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; }

.card { background: var(--cq-card-bg); border: 1px solid var(--cq-border); border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16,33,69,.04); }
.card.bg-gradient, .card[class*="bg-"][class*="-subtle"] { background: var(--cq-card-bg) !important; }

.badge.badge-soft-success { color: var(--cq-green); background: var(--cq-green-soft); }
.badge.badge-soft-danger  { color: var(--cq-red);   background: var(--cq-red-soft); }
.badge.badge-soft-warning { color: var(--cq-amber); background: var(--cq-amber-soft); }
.badge.badge-soft-info    { color: var(--cq-accent);background: var(--cq-accent-soft); }
.badge { font-weight: 500; border-radius: 999px; }

.btn-primary { background: var(--cq-accent); border-color: var(--cq-accent); font-weight: 500; border-radius: 12px; }
.btn-primary:hover { background: var(--cq-accent-dark); border-color: var(--cq-accent-dark); }
.btn-outline-secondary { color: #475069; border-color: var(--cq-border); border-radius: 12px; }

.table thead th { text-transform: uppercase; font-size: 12px; color: var(--cq-text-muted); font-weight: 500; border-bottom: 1px solid var(--cq-border); }
.table > :not(caption) > * > * { border-bottom-color: var(--cq-row-border); }

.cq-meta-row { font-size: 13px; color: var(--cq-text-muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cq-meta-row .dot { width: 3px; height: 3px; border-radius: 50%; background: #c4cdde; }
.cq-meta-row .first { font-weight: 500; color: #475069; }

.cq-kpi-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.cq-kpi-value { font-size: 24px; font-weight: 600; color: var(--cq-text); }
.cq-kpi-label { font-size: 13px; color: var(--cq-text-muted); }

.cq-kv-row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--cq-row-border); }
.cq-kv-row:last-child { border-bottom: none; }
.cq-kv-row .label { color: var(--cq-text-muted); font-weight: 400; }
.cq-kv-row .value { font-weight: 500; }
.cq-kv-row .value.strong { font-weight: 600; color: var(--cq-text); }

.cq-empty { background: var(--cq-field-bg); color: var(--cq-text-faint); text-align: center; padding: 24px; border-radius: 12px; }

/* Sidebar escura (padrão §2/§4) — a app usa o tema "Modernize" com sidebar
   clara por padrão; sobrescrevemos aqui em vez de reeditar o CSS vendorizado. */
.left-sidebar, .brand-logo { background: var(--cq-sidebar) !important; }
.left-sidebar .sidebar-link { color: var(--cq-sidebar-text) !important; font-weight: 500; }
.left-sidebar .sidebar-link:hover { background: rgba(255,255,255,.06) !important; border-radius: 8px; }
/* Filho DIRETO: com o seletor descendente, o item pai marcado como
   "selected" pelo JS do tema pintava de azul todos os links do submenu — os
   vendedores não escolhidos apareciam destacados e o escolhido, apagado. */
.left-sidebar .sidebar-item.selected > .sidebar-link,
.left-sidebar > ul > .sidebar-item > .sidebar-link.active { background: var(--cq-accent) !important; color: #fff !important; font-weight: 600; border-radius: 8px; }

/* Submenu sobre o sidebar escuro. O tema deixa o item ativo do submenu sem
   fundo (transparent !important), o que sobre fundo claro funciona e sobre o
   nosso não: o selecionado sumia. Aqui ele ganha um realce discreto. */
.left-sidebar .first-level .sidebar-item > .sidebar-link { background: transparent !important; color: var(--cq-sidebar-text) !important; font-weight: 500; }
.left-sidebar .first-level .sidebar-item > .sidebar-link:hover { background: rgba(255,255,255,.07) !important; }
/* Seletor tão específico quanto o do tema (que é .sidebar-nav ul .sidebar-item
   .first-level .sidebar-item .sidebar-link.active com !important): sem igualar
   o peso, o item selecionado continuava sem realce. */
.left-sidebar .sidebar-nav ul .sidebar-item .first-level .sidebar-item .sidebar-link.active { background: rgba(255,255,255,.14) !important; color: #fff !important; font-weight: 600; }

/* O submenu de vendedores cresce com o cadastro e empurrava Agenda, Processos
   e Clientes para fora da tela. Ele rola dentro de si; o menu principal, não. */
.left-sidebar .first-level { max-height: 38vh; overflow-y: auto; }
.left-sidebar .first-level::-webkit-scrollbar { width: 6px; }
.left-sidebar .first-level::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }
.left-sidebar .nav-small-cap { color: var(--cq-sidebar-text) !important; opacity: .55; }
.left-sidebar .fixed-profile { background: rgba(255,255,255,.06) !important; }
.left-sidebar .fixed-profile .john-title h6,
.left-sidebar .fixed-profile .john-title span { color: #fff !important; }

/* Volta pra position:fixed (padrão do template) — a tentativa anterior de
   fazer a sidebar rolar junto com a página (position:absolute) quebrou a
   sincronia com a topbar fixa: a sidebar começa em top:0 mas o conteúdo
   principal só começa visualmente depois da altura da topbar
   (.body-wrapper tem padding-top reservando esse espaço), então as duas
   colunas rolavam em ritmos diferentes e ficavam desalinhadas (sidebar
   "adiantada" em relação ao conteúdo — sumia logo/Dashboard/primeiros
   vendedores enquanto o conteúdo principal ainda mostrava o topo).

   O bug original (barra de rolagem flutuante/quebrada) não era culpa do
   position:fixed em si — era o SimpleBar (biblioteca JS) brigando com o
   recálculo de altura do flexbox. Já removemos data-simplebar do nav
   (header.php); sem o SimpleBar, o padrão flex clássico (rodapé fixo +
   menu como único filho que encolhe/rola) funciona limpo, com scroll
   nativo do navegador só quando o conteúdo realmente não cabe — e com a
   lista de vendedores mais compacta (ver abaixo) isso deve ser raro. */
.left-sidebar-inner { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.left-sidebar-inner .brand-logo { flex-shrink: 0; }
.left-sidebar-inner .scroll-sidebar { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; height: auto !important; }
.left-sidebar-inner .sidebar-footer-block { flex-shrink: 0; }

/* overflow-x:hidden acima esconde a barra, mas o texto (nome de vendedor
   comprido, ex. "COBRANÇAS ANTIGAS RIBEIRO") continuava sendo cortado no
   meio da palavra sem aviso nenhum — o SimpleBar antigo escondia essa
   mesma barra sem nunca resolver isso, só disfarçava. Trunca com "…" de
   verdade: min-width:0 é necessário pro filho flex (.hide-menu) aceitar
   encolher abaixo do tamanho do texto, senão text-overflow não faz nada. */
.left-sidebar .sidebar-link { min-width: 0; }
.left-sidebar .sidebar-link .hide-menu { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Compactar só os itens de vendedor não bastou pra caber tudo sem scroll
   (pedido explícito: sem scroll nenhum) — o logo, os dois cabeçalhos de
   seção e o rodapé de perfil usam os espaçamentos generosos padrão do
   template (ex.: .nav-small-cap tem margin-top:24px + line-height:26px =
   ~56px cada, só os cabeçalhos já somavam ~110px). Aperta o menu inteiro,
   não só os vendedores. */
.left-sidebar .brand-logo { min-height: 48px; padding: 0 20px; }
.left-sidebar .nav-small-cap { margin-top: 10px; padding: 0; line-height: 16px; font-size: 11px; }
.left-sidebar .sidebar-item .sidebar-link { padding: 6px 10px; line-height: 20px; margin-bottom: 0; }
.left-sidebar .sidebar-item .sidebar-link .ti { font-size: 16px; }
.left-sidebar .sidebar-footer-block { padding: 8px !important; margin: 8px !important; }
.left-sidebar .sidebar-footer-block img { width: 32px !important; height: 32px !important; }

/* Hero de saudação (padrão §7 — gradiente permitido só aqui) */
.cq-hero { background: linear-gradient(125deg, var(--cq-accent), var(--cq-accent-dark)); border-radius: 16px;
    color: #fff; padding: 28px 32px; margin-bottom: 20px; }
.cq-hero h1 { color: #fff; font-weight: 700; font-size: 22px; margin-bottom: 6px; }
.cq-hero p { color: rgba(255,255,255,.78); font-size: 14px; margin-bottom: 0; }

/* ─────────────────────────────────────────────────────────────
   Largura do conteúdo
   ─────────────────────────────────────────────────────────────
   O tema aplica data-boxed-layout="boxed" no <html> por JavaScript, e a regra
   dele limita o container a 1200px. Numa tela de 1920 isso deixava quase um
   terço da largura vazia enquanto a matriz de remessas e as tabelas de lotes
   disputavam espaço — justamente as telas que precisam de largura.
   Sobrescrito aqui porque o atributo é escrito em runtime: mudá-lo no HTML
   seria desfeito no carregamento. */
html[data-boxed-layout="boxed"] .page-wrapper .body-wrapper > .container-fluid,
html[data-boxed-layout="boxed"] .body-wrapper > .container-fluid {
    max-width: none;
}

/* Item de menu que ainda não leva a lugar nenhum (Configurações). Fica visível
   para o caminho existir, mas sem prometer clique — badge dentro do rótulo
   quebrava a linha, porque o tema usa nowrap + overflow hidden ali. */
.left-sidebar .sidebar-link-em-breve { opacity: .45; cursor: default; }
.left-sidebar .sidebar-link-em-breve:hover { background: transparent !important; }