/* =============================================================
   CENTRAL Jurídico CRM — Estilos complementares ao Tailwind
   -------------------------------------------------------------
   O Tailwind cuida de 95% da interface. Aqui ficam apenas:
   tokens de cor, ajustes finos de scrollbar, animações e
   componentes reutilizados em todas as telas.
   ============================================================= */

:root {
    /* Paleta institucional: azul jurídico sóbrio + navy escuro.
       O tom 700 (#1e40af) é usado em botões e passa AA (>7:1) com texto branco. */
    --cj-primaria:        #1e40af;
    --cj-primaria-escura: #1e3a8a;
    --cj-acento:          #22d3ee;
    --cj-navy:            #0b1220;
    --cj-secundaria:      #0f172a;
    --cj-sucesso:         #16a34a;
    --cj-alerta:          #f59e0b;
    --cj-erro:            #dc2626;
    --cj-info:            #0ea5e9;

    /* Superfícies — tema claro */
    --cj-fundo:      #f8fafc;
    --cj-superficie: #ffffff;
    --cj-borda:      #e2e8f0;
    --cj-texto:      #0f172a;
    --cj-texto-suave:#64748b;
}

/* Superfícies — tema escuro */
.dark {
    --cj-fundo:      #0b1120;
    --cj-superficie: #111827;
    --cj-borda:      #1f2937;
    --cj-texto:      #e5e7eb;
    --cj-texto-suave:#9ca3af;
}

/* -------------------------------------------------------------
   Base
   ------------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    background-color: var(--cj-fundo);
    color: var(--cj-texto);
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    transition: background-color .2s ease, color .2s ease;
}

/* Evita o "flash" de tema claro antes do JS aplicar o tema salvo */
.sem-transicao * {
    transition: none !important;
}

/* -------------------------------------------------------------
   Scrollbar discreta
   ------------------------------------------------------------- */
* {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.dark * {
    scrollbar-color: #374151 transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 8px;
    border: 3px solid transparent;
    background-clip: content-box;
}

.dark ::-webkit-scrollbar-thumb {
    background-color: #374151;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
}

/* -------------------------------------------------------------
   Componentes reutilizáveis
   ------------------------------------------------------------- */

/* Cartão padrão */
.cj-card {
    background-color: var(--cj-superficie);
    border: 1px solid var(--cj-borda);
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgb(15 23 42 / .04), 0 8px 24px -12px rgb(15 23 42 / .12);
}

/* Etiqueta de status */
.cj-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .6rem;
    border-radius: 9999px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.25rem;
}

/* -------------------------------------------------------------
   Sidebar recolhida (apenas em telas grandes)
   A classe .sidebar-recolhida fica no <html>
   ------------------------------------------------------------- */
@media (min-width: 1024px) {
    .sidebar-recolhida #cj-sidebar {
        width: 4.75rem;
    }

    .sidebar-recolhida #cj-sidebar .cj-rotulo {
        display: none;
    }

    .sidebar-recolhida #cj-sidebar nav a,
    .sidebar-recolhida #cj-sidebar .cj-rodape-sidebar > div {
        justify-content: center;
    }

    .sidebar-recolhida #cj-sidebar .cj-girar-recolher {
        transform: rotate(180deg);
    }
}

#cj-sidebar {
    transition: width .2s ease, transform .2s ease;
}

/* Foco acessível consistente */
.cj-foco:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--cj-primaria);
    outline-offset: 2px;
}

/* Animação de entrada dos blocos — só opacidade, de propósito, sem
   NENHUM transform em NENHUM momento da animação (nem "translateY(0)",
   nem um valor implícito no keyframe final). Qualquer transform ativo
   num ancestral, mesmo sem efeito visual, cria um novo "containing
   block" para descendentes com position:fixed — isso prendia modais de
   tela cheia dentro da área de conteúdo em vez da viewport inteira
   (sidebar/topbar ficavam de fora do fundo escurecido, e o modal cortava
   por cima quando o conteúdo da página era curto, como uma agenda vazia).
   Removendo o transform por completo daqui, elimina-se essa classe de
   bug de vez, sem depender de como cada navegador resolve keyframes
   parciais. */
@keyframes cj-surgir {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.cj-surgir {
    animation: cj-surgir .28s ease both;
}

/* Pulso suave para indicadores de carregamento */
@keyframes cj-pulso {
    0%, 100% { opacity: 1; }
    50%      { opacity: .5; }
}

.cj-pulso {
    animation: cj-pulso 1.6s cubic-bezier(.4, 0, .6, 1) infinite;
}

/* -------------------------------------------------------------
   Impressão (relatórios)
   ------------------------------------------------------------- */
@media print {
    .cj-nao-imprimir { display: none !important; }

    body {
        background: #fff !important;
        color: #000 !important;
    }
}