/* HIVE MKT 360 — Tokens de design: paleta da marca, temas claro e escuro */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    /* ─── PALETA DE MARCA HIVE ─── */
    --color-1: #22162B;
    --color-2: #451F55;
    --color-3: #724E91;
    --color-4: #E54F6D;
    --color-4-dark: #AC3B52;
    --color-5: #F8C630;

    /* ─── TOKENS SEMÂNTICOS ─── */
    --accent-primary: var(--color-3);
    /* O MESMO acento, quando ele e TEXTO ou contorno fino em vez de fundo.
       No claro e o roxo da marca. No escuro nao pode ser: #724E91 sobre
       #131117 da 3.2:1, e texto precisa de 4.5:1. E o mesmo erro que ja
       tinha sido corrigido em --text-muted, uma linha abaixo. */
    --accent-legivel: var(--color-3);
    --accent-warm: var(--color-5);
    --accent-alert: var(--color-4);
    --accent-success: #10b981;
    --accent-neutral: #64748b;

    --surface-elevated: rgba(114, 78, 145, 0.05);
    --glow-warm: rgba(248, 198, 48, 0.18);
    --glow-primary: rgba(114, 78, 145, 0.18);
    --glow-alert: rgba(229, 79, 109, 0.18);
    --glow-success: rgba(16, 185, 129, 0.18);

    /* ─── MODO CLARO ─── */
    --bg-body: #F4F5F7;
    --bg-surface: #ffffff;
    --bg-subtle: #F9F8FB;
    --bg-soft: #F0EDF4;
    --border-light: rgba(34, 22, 43, 0.09);
    --border-dark: rgba(34, 22, 43, 0.16);

    --text-primary: #12091A;
    --text-secondary: #5a4d6b;
    --text-muted: #635575;   /* era #9d8fb0, a 3.00:1 - reprovava em contraste */
    --chart-track: #ede9f4;
    --hover-bg: #F7F6F9;

    /* ─── RAIOS ───
       Tres valores para todo o sistema. Antes eram dez, e componentes com a
       mesma funcao tinham formatos diferentes: o botao "Novo Cliente" era
       pilula e o "Adicionar Cliente" do modal que ele abre, retangulo. */
    --r-control: 10px;  /* botoes, campos, chips */
    --r-surface: 16px;  /* cartoes, paineis, tabelas */
    --r-overlay: 24px;  /* shell, login e modais de maior destaque */
    --r-pill: 999px;    /* so o que e mesmo pilula: contadores e barras de progresso */

    /* Escala de espaco compartilhada. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 40px;

    --sidebar-width: 250px;
    --sidebar-collapsed-width: 80px;

    /* Chapada: o degrade competia com o conteudo ao lado. */
    --sidebar-bg: rgba(255, 255, 255, 0.92);
    --sidebar-text: #635575;
    --sidebar-text-hover: #22162B;
    --sidebar-title: #8D809B;
    --sidebar-hover-bg: #F4EFF8;
    --sidebar-border: rgba(34, 22, 43, 0.08);
    --sidebar-divider: rgba(34, 22, 43, 0.08);

    --shadow-sm: 0 1px 2px rgba(34, 22, 43, 0.04), 0 6px 18px rgba(34, 22, 43, 0.035);
    --shadow-md: 0 12px 32px rgba(34, 22, 43, 0.075), 0 2px 8px rgba(34, 22, 43, 0.04);
    --shadow-lg: 0 28px 70px rgba(34, 22, 43, 0.15), 0 8px 24px rgba(34, 22, 43, 0.08);

    /* Faixas do Radar e alias historico corrigido. */
    --faixa-risco-bg: #FFF0F3;
    --faixa-risco-fg: #9B2F46;
    --faixa-risco-linha: #E54F6D;
    --faixa-atencao-bg: #FFF8E2;
    --faixa-atencao-fg: #765712;
    --faixa-saudavel-bg: #EBF9F3;
    --faixa-saudavel-fg: #087A54;
    --faixa-saudavel-linha: #10B981;
    --r-card: var(--r-surface);

    --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-fast: all 0.15s ease;
}

body.dark-mode {
    /* ─── DARK MODE HIVE-NATIVO (roxos profundos da marca) ─── */
    --bg-body: #131117;
    --bg-surface: #1A181F;
    --bg-subtle: #17151B;
    --bg-soft: #211C28;
    --border-light: rgba(255, 255, 255, 0.07);
    --border-dark: rgba(255, 255, 255, 0.13);
    --text-primary: #f0eaf8;
    --text-secondary: #a695bc;
    --text-muted: #9c8fb3;   /* era #6b5d80, a 3.03:1 */
    --chart-track: #2a1d38;
    --hover-bg: rgba(114, 78, 145, 0.06);

    --surface-elevated: rgba(114, 78, 145, 0.1);
    /* O roxo claro da familia - o mesmo que a agenda usa nos chips de
       producao no tema escuro. Passa a 7:1 sobre o fundo do modo escuro. */
    --accent-legivel: #B191D6;

    --sidebar-bg: #150C1D;
    --sidebar-text: rgba(240, 234, 248, 0.6);
    --sidebar-text-hover: #f0eaf8;
    --sidebar-title: rgba(240, 234, 248, 0.35);
    --sidebar-hover-bg: rgba(114, 78, 145, 0.15);
    --sidebar-border: rgba(114, 78, 145, 0.1);
    --sidebar-divider: rgba(114, 78, 145, 0.08);

    --faixa-risco-bg: rgba(229, 79, 109, 0.12);
    --faixa-risco-fg: #F4A0B1;
    --faixa-atencao-bg: rgba(248, 198, 48, 0.12);
    --faixa-atencao-fg: #F1D47B;
    --faixa-saudavel-bg: rgba(16, 185, 129, 0.12);
    --faixa-saudavel-fg: #86DCBC;

    --shadow-sm: 0 4px 16px rgba(18, 9, 26, 0.5);
    --shadow-md: 0 12px 36px rgba(18, 9, 26, 0.6);
    --shadow-lg: 0 24px 56px rgba(18, 9, 26, 0.7);
}

body.dark-mode .month-selector,
body.dark-mode .dash-table th,
body.dark-mode th.sticky-col,
body.dark-mode .filters-container,
body.dark-mode .cal-cell,
body.dark-mode .modal-content,
body.dark-mode .legend-box {
    background: var(--bg-surface);
}

body.dark-mode .sticky-col {
    color: var(--text-primary);
}

body.dark-mode .analyst-row td {
    background: #0f172a;
    color: var(--color-5);
}

body.dark-mode .filter-select,
body.dark-mode .form-control {
    background: var(--bg-body);
    color: var(--text-primary);
}

/* Os campos do modal de agendamento que NAO sao <input> - as pilulas de
   tipo e a caixa de participantes - precisam do mesmo fundo dos que sao.
   Com --bg-surface eles somem dentro do modal no tema escuro. */
/* Só as pilulas NAO escolhidas. 'body.dark-mode .am-tipo' pesa mais que
   '.am-tipo[aria-checked=true]' e apagava o preenchimento da escolhida: no
   escuro o modal abria sem nenhum tipo aparentemente marcado. */
body.dark-mode .am-tipo[aria-checked="false"],
body.dark-mode .chip-pessoa[aria-pressed="false"],
body.dark-mode .filtro-campo > select {
    background: var(--bg-body);
}

/* O rotulo encaixado na borda corta o fundo DA TELA. */
body.dark-mode .filtro-campo > label {
    background: var(--bg-body);
}

body.dark-mode .btn-primary.btn-dashed {
    background: transparent !important;
    color: var(--text-primary) !important;
    border-color: var(--border-dark) !important;
}

body.dark-mode .status-option:hover,
body.dark-mode .conclusion-toggle:hover,
body.dark-mode .cal-cell.empty {
    background: var(--bg-body);
}

body.dark-mode .col-today {
    /* Era #1a233a, um azul-marinho: a unica cor do sistema fora da paleta. */
    background-color: rgba(114, 78, 145, 0.16) !important;
    border-color: rgba(114, 78, 145, 0.42) !important;
}

body.dark-mode th.col-today {
    background-color: rgba(114, 78, 145, 0.26) !important;
    color: var(--color-5) !important;
    border-bottom-color: var(--color-3) !important;
}

body.dark-mode .cal-grid,
body.dark-mode .cal-header-cell,
body.dark-mode .cal-cell {
    border-color: var(--border-light);
}

body.dark-mode select option {
    background-color: var(--bg-surface);
    color: var(--text-primary);
}