/* ==========================================================================
   HO.KO AI.NALYTICS - ENTERPRISE PREMIUM REDESIGN (INVASIVE MODE)
   Nível: Stripe / Vercel / Salesforce
   Ação: Sobrescrita brutal de tudo que for "template barato"
   ========================================================================== */

/* 1. TIPOGRAFIA ABSOLUTA */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* O BRANCO ABSOLUTO QUE VOCÊ PEDIU */
    --hoko-bg-master: #FFFFFF;
    --hoko-bg-surface: #FFFFFF;
    --hoko-bg-hover: #F9FAFB;

    /* Bordas: Frias, precisas e finíssimas */
    --hoko-border: #E5E7EB;
    --hoko-border-strong: #D1D5DB;

    /* Textos: Contraste severo para legibilidade impecável */
    --hoko-text-heading: #111827;
    /* Quase preto */
    --hoko-text-body: #4B5563;
    /* Cinza chumbo */
    --hoko-text-muted: #6B7280;
    /* Cinza médio para labels */

    /* Cores de Marca / Ação */
    --hoko-brand: #0F172A;
    --hoko-brand-hover: #1F2937;
    --hoko-accent: #2563EB;
    /* Azul moderno para highlights mínimos */

    /* Geometria: Elegante (8px é o padrão de luxo corporativo atual) */
    --hoko-radius: 8px;
    --hoko-radius-sm: 6px;

    /* Sombras: Imperceptíveis, apenas para destacar a superfície */
    --hoko-shadow-card: 0px 1px 3px rgba(16, 24, 40, 0.05), 0px 1px 2px rgba(16, 24, 40, 0.03);
    --hoko-shadow-float: 0px 10px 15px -3px rgba(16, 24, 40, 0.08), 0px 4px 6px -4px rgba(16, 24, 40, 0.03);
}

/* ==========================================================================
   2. DESTRUIÇÃO DO TEMPLATE ANTIGO (Reset Invasivo)
   ========================================================================== */
html,
body {
    background: var(--hoko-bg-master) !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    color: var(--hoko-text-body) !important;
    font-size: 15px !important;
    letter-spacing: -0.01em !important;
}

/* Matando gradientes, tons de azul do fundo, e sombras feias */
.layout-wrapper,
.layout-page,
.content-wrapper,
.container-xxl,
.layout-container,
.bg-menu-theme,
.layout-navbar {
    background-color: var(--hoko-bg-master) !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Títulos com presença e peso correto */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: 'Inter', sans-serif !important;
    color: var(--hoko-text-heading) !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 0.75rem !important;
}

/* ==========================================================================
   3. ESTRUTURA E NAVEGAÇÃO (Clean e Separado por 1px)
   ========================================================================== */
.layout-navbar {
    border-bottom: 1px solid var(--hoko-border) !important;
    backdrop-filter: blur(10px) !important;
    background: rgba(255, 255, 255, 0.95) !important;
}

.bg-menu-theme {
    border-right: 1px solid var(--hoko-border) !important;
}

/* Sidebar Hover/Active: Extremamente sutil */
.bg-menu-theme .menu-inner>.menu-item>.menu-link:hover {
    background-color: var(--hoko-bg-hover) !important;
}

.bg-menu-theme .menu-inner>.menu-item.active>.menu-link {
    background-color: var(--hoko-bg-hover) !important;
    color: var(--hoko-text-heading) !important;
    font-weight: 600 !important;
    border-radius: var(--hoko-radius-sm) !important;
    box-shadow: inset 2px 0 0 0 var(--hoko-brand) !important;
    /* Linha de marcação finíssima */
}

.bg-menu-theme .menu-inner>.menu-item.active::before {
    display: none !important;
    /* Morte à bolinha/barra grossa velha */
}

/* ==========================================================================
   4. CARDS (O Coração do Dashboard)
   ========================================================================== */
.card {
    background: var(--hoko-bg-surface) !important;
    border-radius: var(--hoko-radius) !important;
    border: 1px solid var(--hoko-border) !important;
    box-shadow: var(--hoko-shadow-card) !important;
    transition: all 0.2s ease-in-out;
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--hoko-border) !important;
    padding: 1.25rem 1.5rem !important;
}

.card-title {
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    color: var(--hoko-text-heading) !important;
}

/* ==========================================================================
   5. TABELAS (High Data Density - Super Legíveis)
   ========================================================================== */
/* Isolamento restrito para não vazar pro gráfico */
.card>.table-responsive>table,
.card>table {
    margin: 0 !important;
    width: 100% !important;
}

.card table th {
    background-color: #F9FAFB !important;
    color: var(--hoko-text-muted) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0.875rem 1.5rem !important;
    border-bottom: 1px solid var(--hoko-border) !important;
    border-top: none !important;
}

.card table td {
    padding: 1rem 1.5rem !important;
    font-size: 0.9rem !important;
    color: var(--hoko-text-heading) !important;
    border-bottom: 1px solid var(--hoko-border) !important;
    vertical-align: middle !important;
}

.card table tr:hover td {
    background-color: var(--hoko-bg-hover) !important;
    /* Efeito de linha ao passar o mouse */
}

/* ==========================================================================
   6. BOTÕES, INPUTS E BADGES
   ========================================================================== */
.btn {
    border-radius: var(--hoko-radius-sm) !important;
    font-weight: 500 !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.9rem !important;
    box-shadow: none !important;
    transition: all 0.15s ease !important;
}

.btn-primary {
    background-color: var(--hoko-brand) !important;
    border-color: var(--hoko-brand) !important;
    color: #FFFFFF !important;
}

.btn-primary:hover {
    background-color: var(--hoko-brand-hover) !important;
    transform: translateY(-1px);
    box-shadow: var(--hoko-shadow-card) !important;
}

.form-control,
.form-select {
    border-radius: var(--hoko-radius-sm) !important;
    border: 1px solid var(--hoko-border-strong) !important;
    font-size: 0.9rem !important;
    padding: 0.5rem 0.875rem !important;
    color: var(--hoko-text-heading) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--hoko-accent) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
    /* Anel de foco premium */
}

/* Badges modernos (Pill discreto) */
.badge {
    border-radius: 4px !important;
    padding: 0.35em 0.65em !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: capitalize !important;
    letter-spacing: 0;
}

/* ==========================================================================
   7. HACKING APEXCHARTS (TOTALMENTE VIA CSS)
   Mágica para transformar os gráficos em design de alto nível (Stripe/Vercel)
   ========================================================================== */

/* Fonte geral e fundo */
.apexcharts-canvas,
.apexcharts-canvas svg {
    font-family: 'Inter', sans-serif !important;
    background: transparent !important;
}

/* Removemos menus e sujeiras da biblioteca */
.apexcharts-toolbar {
    display: none !important;
}

.apexcharts-zoom-icon,
.apexcharts-pan-icon {
    display: none !important;
}

/* Grid Line: Agora é tracejada e muito clara, não agride os olhos */
.apexcharts-gridline {
    stroke: var(--hoko-border) !important;
    stroke-dasharray: 4 4 !important;
    /* Linha pontilhada perfeita */
}

/* Eixos (Matando as linhas sólidas pesadas) */
.apexcharts-xaxis line,
.apexcharts-yaxis line {
    display: none !important;
}

.apexcharts-xaxis-tick {
    display: none !important;
}

/* Labels dos eixos (meses, valores) */
.apexcharts-text tspan {
    fill: var(--hoko-text-muted) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    font-family: 'Inter', sans-serif !important;
}

/* Afinando as linhas dos gráficos (Tirando aspecto 'gordo' e infantil) */
.apexcharts-series path {
    stroke-width: 2px !important;
}

.apexcharts-bar-area {
    stroke-width: 0 !important;
    /* Barras lisas, sem borda */
    rx: 3px !important;
    /* Leve arredondamento no topo da barra */
    ry: 3px !important;
}

/* Oculta os números em cima da linha/barra (Deixa o gráfico limpo) */
.apexcharts-datalabel {
    display: none !important;
}

/* ==========================================================================
   8. RESET & DESIGN PREMIUM DO TOOLTIP (ApexCharts)
   Proteção total contra o bug das "linhas soltas"
   ========================================================================== */
.apexcharts-tooltip {
    background: #FFFFFF !important;
    border: 1px solid var(--hoko-border) !important;
    box-shadow: var(--hoko-shadow-float) !important;
    border-radius: var(--hoko-radius-sm) !important;
    overflow: hidden !important;
}

.apexcharts-tooltip-title {
    background: #F9FAFB !important;
    border-bottom: 1px solid var(--hoko-border) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--hoko-text-muted) !important;
    padding: 6px 10px !important;
}

/* Proteção (Garante que as tabelas globais não estraguem o tooltip) */
.apexcharts-tooltip table {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.apexcharts-tooltip table td,
.apexcharts-tooltip table th {
    border: none !important;
    padding: 4px 8px !important;
    background: transparent !important;
    color: var(--hoko-text-heading) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.apexcharts-tooltip-marker {
    margin-right: 6px !important;
    border-radius: 50% !important;
    /* Bolinha de cor da legenda do tooltip */
}