/* ==========================================================================
   ZapCRM Pro 2.0 — Camada de Design (CSS puro)
   Carregada DEPOIS do app.css. Como o servidor não tem Node/npm (Tailwind é
   pré-compilado e estático), esta camada moderniza o app inteiro sem depender
   de build: tokens, sombras suaves, foco acessível, scrollbars, microinterações
   e um kit de componentes .zc-*. É aditiva e segura (não remove estilos).
   ========================================================================== */

:root {
    /* Marca (verde ZapCRM) */
    --zc-brand-50:  #eefdf4;
    --zc-brand-100: #d6f9e3;
    --zc-brand-500: #1db670;
    --zc-brand-600: #12945a;
    --zc-brand-700: #11764a;

    /* Superfícies e texto — LIGHT */
    --zc-bg:        #f4f6f9;  /* fundo geral */
    --zc-surface:   #ffffff;  /* cards/modais */
    --zc-surface-2: #f9fafb;  /* inputs/hover */
    --zc-border:    #eceef2;
    --zc-text:      #0f172a;
    --zc-text-soft: #64748b;
    --zc-ring:      rgba(29, 182, 112, .45);

    /* Raios e sombras */
    --zc-radius:    14px;
    --zc-radius-lg: 20px;
    --zc-shadow-sm: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
    --zc-shadow:    0 2px 4px rgba(16,24,40,.04), 0 6px 16px rgba(16,24,40,.08);
    --zc-shadow-lg: 0 10px 24px rgba(16,24,40,.10), 0 20px 48px rgba(16,24,40,.12);
}

html.dark {
    /* Superfícies e texto — DARK (hierarquia real, não preto puro) */
    --zc-bg:        #0b1220;
    --zc-surface:   #131a2a;
    --zc-surface-2: #1b2436;
    --zc-border:    #263149;
    --zc-text:      #e8edf5;
    --zc-text-soft: #94a3b8;
    --zc-shadow-sm: 0 1px 2px rgba(0,0,0,.35);
    --zc-shadow:    0 2px 6px rgba(0,0,0,.40), 0 8px 20px rgba(0,0,0,.35);
    --zc-shadow-lg: 0 14px 40px rgba(0,0,0,.5);
}

/* --------------------------------------------------------------------------
   1) Base — suavização de fonte e seleção
   -------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
::selection { background: var(--zc-brand-500); color: #fff; }

/* --------------------------------------------------------------------------
   2) Sombras modernas — redefine as utilidades do Tailwind (cosmético, seguro).
   Como este arquivo carrega depois, ganha das definições do app.css.
   -------------------------------------------------------------------------- */
.shadow-sm { box-shadow: var(--zc-shadow-sm) !important; }
.shadow    { box-shadow: var(--zc-shadow) !important; }
.shadow-md { box-shadow: var(--zc-shadow) !important; }
.shadow-lg { box-shadow: var(--zc-shadow-lg) !important; }
.shadow-xl { box-shadow: var(--zc-shadow-lg) !important; }

/* --------------------------------------------------------------------------
   3) Microinterações e transições
   -------------------------------------------------------------------------- */
a, button, [role="button"], input, select, textarea, label[for], .cursor-pointer {
    transition: background-color .15s ease, border-color .15s ease,
                color .15s ease, box-shadow .15s ease, transform .08s ease, opacity .15s ease;
}
button:not(:disabled):active,
[role="button"]:not([aria-disabled="true"]):active {
    transform: translateY(1px);
}

/* --------------------------------------------------------------------------
   4) Foco acessível (teclado) — anel discreto e consistente
   -------------------------------------------------------------------------- */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible, summary:focus-visible {
    outline: 2px solid var(--zc-ring);
    outline-offset: 2px;
    border-radius: 8px;
}

/* --------------------------------------------------------------------------
   5) Scrollbars premium
   -------------------------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: rgba(120,130,150,.45) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(120,130,150,.40);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(120,130,150,.70); background-clip: content-box; }

/* --------------------------------------------------------------------------
   6) Kit de componentes .zc-* (para os redesenhos de tela, sem build Tailwind)
   -------------------------------------------------------------------------- */
.zc-surface { background: var(--zc-surface); color: var(--zc-text); }

.zc-card {
    background: var(--zc-surface);
    color: var(--zc-text);
    border: 1px solid var(--zc-border);
    border-radius: var(--zc-radius-lg);
    box-shadow: var(--zc-shadow-sm);
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.zc-card--hover:hover { box-shadow: var(--zc-shadow); transform: translateY(-2px); }

.zc-chip {
    display: inline-flex; align-items: center; gap: .375rem;
    font-size: 12px; font-weight: 600; line-height: 1;
    padding: .35rem .6rem; border-radius: 999px;
    background: var(--zc-surface-2); color: var(--zc-text-soft);
    border: 1px solid var(--zc-border);
}

.zc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-weight: 600; font-size: 14px; line-height: 1;
    padding: .625rem 1rem; border-radius: 12px; cursor: pointer;
    border: 1px solid transparent; white-space: nowrap; user-select: none;
}
.zc-btn--primary { background: var(--zc-brand-600); color: #fff; }
.zc-btn--primary:hover { background: var(--zc-brand-700); }
.zc-btn--ghost { background: transparent; color: var(--zc-text-soft); border-color: var(--zc-border); }
.zc-btn--ghost:hover { background: var(--zc-surface-2); color: var(--zc-text); }

/* Cartão de métrica (dashboard 2.0) */
.zc-stat { position: relative; overflow: hidden; }
.zc-stat__value { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.zc-stat__delta-up   { color: var(--zc-brand-600); }
.zc-stat__delta-down { color: #dc2626; }

/* --------------------------------------------------------------------------
   7) Skeleton de loading (para estados de carregamento)
   -------------------------------------------------------------------------- */
.zc-skeleton {
    background: linear-gradient(90deg, var(--zc-surface-2) 25%, var(--zc-border) 37%, var(--zc-surface-2) 63%);
    background-size: 400% 100%;
    animation: zc-shimmer 1.3s ease infinite;
    border-radius: 8px;
}
@keyframes zc-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* --------------------------------------------------------------------------
   8) Respeita quem prefere menos movimento (acessibilidade)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}