:root {
    --bg-dark: #050508;
    --card-bg: #0d0b13;
    --card-border: rgba(255, 255, 255, 0.06);
    --glass-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
    --text-primary: #ffffff;
    --text-secondary: #94a3b8;
    
    --accent-blue: #6366f1;
    --accent-purple: #8b5cf6;
    --accent-green: #10b981;
    --accent-red: #ef4444;
    --accent-orange: #f59e0b;
    --accent-pink: #ec4899;
    --funnel-purple: #8b5cf6;
}

body {
    background-color: var(--bg-dark);
    background-image: none !important;
    color: var(--text-primary);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    position: relative;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.98) 100%),
        radial-gradient(circle at 50% 10%, rgba(140, 92, 246, 0.2), transparent 36%),
        radial-gradient(circle at 15% 18%, rgba(255, 0, 14, 0.14), transparent 28%);
    pointer-events: none;
    z-index: 0;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 50% 0%, rgba(140, 92, 246, 0.22), transparent 32%),
        radial-gradient(circle at 78% 18%, rgba(140, 92, 246, 0.12), transparent 22%),
        linear-gradient(180deg, rgba(140, 92, 246, 0.04), transparent 24%);
    pointer-events: none;
    z-index: 0;
}

.main-content {
    position: relative;
    isolation: isolate;
    z-index: 1;
}

.main-content::before {
    display: none !important;
}

/* Exclui overlays de tela cheia (modais, canvas de fundo, toasts): eles
   dependem de position:fixed para cobrir o viewport inteiro. Sem essa
   exclusão, esta regra (carregada DEPOIS de style.css nas páginas que
   incluem dashboard-premium.css) sobrescrevia position:fixed por relative,
   fazendo o modal renderizar como caixa inline em vez de overlay — a causa
   raiz do bug visual do modal de Login Manual em accounts.php/dashboard.php. */
.main-content > *:not([data-overlay]):not(.gp-modal-overlay):not(#dashBg):not(.sales-toast-stack):not(#accToastStack) {
    position: relative;
    z-index: 2;
}

.dash-container {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.dashboard-hero-card {
    min-height: 88px;
    border: none;
    border-radius: 18px;
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 4px;
    box-shadow: none;
    width: 100%;
}

.dashboard-greeting {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: #f5f5f5;
    line-height: 1.05;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
}

.dashboard-greeting__name {
    color: var(--accent-red);
}

.dashboard-greeting__date {
    margin-top: 6px;
    color: #8090c6;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
}

.dashboard-toolbar {
    margin-bottom: 10px !important;
    width: 100%;
}

.dashboard-preset-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 118px;
    height: 50px;
    padding: 0 22px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(7, 7, 7, 0.76);
    color: rgba(203, 213, 225, 0.72);
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    transition: all 0.2s ease;
}

.filter-chip:hover {
    border-color: rgba(255, 0, 14, 0.3);
    color: #fff;
}

.filter-chip.active {
    background: linear-gradient(180deg, #8e0009 0%, #530005 100%);
    color: #fff;
    border-color: rgba(151, 0, 10, 0.72);
    box-shadow: 0 0 22px rgba(120, 0, 0, 0.34);
}

.dashboard-action-btn {
    min-height: 40px;
    text-align: center;
    white-space: nowrap;
}

.dashboard-action-group {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dashboard-action-group .dashboard-action-btn {
    margin: 0;
    flex: 0 0 auto;
    padding-left: 18px;
    padding-right: 18px;
    gap: 8px;
}

.dashboard-action-btn i,
#webhookCopyBtn i,
.kpi-icon i,
.section-title i,
.view-pill i,
.icon-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    flex-shrink: 0;
}

.dashboard-action-btn i svg,
#webhookCopyBtn i svg,
.kpi-icon i svg,
.section-title i svg,
.view-pill i svg,
.dashboard-action-btn > svg,
#webhookCopyBtn > svg,
.kpi-icon > svg,
.section-title > svg,
.view-pill > svg,
.icon-glyph svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    display: block;
}

.dashboard-action-btn i:empty,
#webhookCopyBtn i:empty,
.kpi-icon i:empty,
.section-title i:empty,
.view-pill i:empty {
    width: 0 !important;
    margin: 0 !important;
}

.icon-glyph--inbox,
.table-responsive .icon-glyph {
    margin-bottom: 10px;
}

@media (max-width: 768px), (max-width: 1024px) and (max-height: 500px) and (orientation: landscape) {
    body::before {
        background:
            linear-gradient(180deg, rgba(4, 3, 8, 0.96) 0%, rgba(8, 6, 14, 0.98) 100%),
            radial-gradient(circle at 22% 10%, rgba(255, 0, 14, 0.12), transparent 26%),
            radial-gradient(circle at 82% 18%, rgba(140, 92, 246, 0.10), transparent 24%);
    }
    body::after {
        background: none;
    }
    .dash-container {
        padding: 8px 4px 12px;
        gap: 16px;
    }
    .dashboard-toolbar {
        margin-bottom: 18px !important;
    }
    .main-content::before {
        inset: 0;
        background:
            linear-gradient(180deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.66) 100%),
            radial-gradient(circle at 50% 0%, rgba(140, 92, 246, 0.16), transparent 28%),
            radial-gradient(circle at 18% 18%, rgba(255, 0, 14, 0.10), transparent 18%);
    }
    /* 2026-07-23 (pedido explícito: "diminua o tamanho desses itens... pra
       que apareçam tudo na mesma tela sem precisar scrolar pro lado, só no
       mobile") — antes forçava overflow-x:auto com chips de largura fixa
       (min-width:100px × 5 = ~540px, sempre maior que a tela). Agora cada
       chip divide o espaço disponível igualmente (flex:1, min-width:0), sem
       scroll horizontal em nenhuma largura de tela mobile. */
    .dashboard-preset-bar {
        justify-content: space-between;
        overflow-x: visible;
        flex-wrap: nowrap;
        gap: 6px;
        padding-bottom: 0;
    }
    .filter-chip {
        min-width: 0;
        flex: 1 1 0;
        height: 38px;
        padding: 0 4px;
        font-size: 11.5px;
        letter-spacing: -0.01em;
    }
}

.section-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Glassmorphism Cards */
.glass-card {
    background: var(--card-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--glass-shadow);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.glass-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
}

.glass-card:hover {
    transform: none !important;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(239, 68, 68, 0.15);
}

/* Top KPIs Grid */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 24px;
}

/* ── Grids contínuos (2026-09-08) ─────────────────────────────────────────────
   Antes: número de colunas FIXO (2 e 4), com correção só em @media 768px e
   1200px. A faixa de 769–1199px — desktop menor, notebook, janela não
   maximizada, tela dividida — não tinha tratamento nenhum: os 4 KPIs eram
   espremidos em ~180px cada e o conteúdo estourava. É o "às vezes o painel fica
   bugado" relatado.

   auto-fit + minmax troca a régua: em vez de decidir por faixas de largura, cada
   card declara a largura MÍNIMA em que ainda é legível e o navegador escolhe
   quantas colunas cabem, continuamente, em qualquer resolução. Sem breakpoint
   novo e sem faixa órfã. */
.dashboard-primary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 24px;
}

.kpi-grid--compact {
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}

.kpi-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 160px;
    justify-content: center;
    text-align: center;
}

.kpi-card--featured {
    min-height: 220px;
    align-items: center;
}

.kpi-topline {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
}

.kpi-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kpi-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    color: var(--accent-red);
}

.kpi-icon .icon-glyph svg,
.kpi-icon > svg {
    width: 20px;
    height: 20px;
}

.icon-blue { background: rgba(139,92,246,0.15); color: var(--accent-blue); border: 1px solid rgba(139,92,246,0.3); }
.icon-green { background: rgba(16,185,129,0.15); color: var(--accent-green); border: 1px solid rgba(16,185,129,0.3); }
.icon-purple { background: rgba(139,92,246,0.15); color: var(--accent-purple); border: 1px solid rgba(139,92,246,0.3); }
.icon-orange { background: rgba(245,158,11,0.15); color: var(--accent-orange); border: 1px solid rgba(245,158,11,0.3); }
.icon-pink { background: rgba(236,72,153,0.15); color: var(--accent-pink); border: 1px solid rgba(236,72,153,0.3); }
.icon-red,
.icon-card,
.icon-clap,
.icon-gold,
.icon-user,
.icon-trend {
    background: rgba(255, 0, 14, 0.12);
    color: var(--accent-red);
    border: 1px solid rgba(255, 0, 14, 0.22);
    box-shadow: inset 0 0 0 1px rgba(255, 0, 14, 0.05);
}

.kpi-body {
    display: flex;
    align-items: center;
    justify-content: center;
}

.kpi-value {
    font-size: 42px;
    font-weight: 800;
    letter-spacing: -1.5px;
    line-height: 1;
    text-align: center;
}

.kpi-chart {
    width: 80px;
    height: 40px;
}

.trend-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 12px;
    margin-top: 8px;
}
.trend-badge.up { background: rgba(16,185,129,0.1); color: var(--accent-green); }
.trend-badge.down { background: rgba(239,68,68,0.1); color: var(--accent-red); }

/* Main Sections Grid */
/* 2fr/1fr puro não tem piso: abaixo de ~1000px a coluna secundária virava uma
   tira inutilizável em vez de quebrar pra baixo. Com minmax + auto-fit ela cai
   pra linha de baixo sozinha quando não couber. */
.main-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 24px;
}
@media (max-width: 1100px) {
    .main-grid,
    .main-grid--queue { grid-template-columns: minmax(0, 1fr); }
}

/* 2026-07-15: Fila de Postagens (7 colunas, inclui a lixeira de Ações) ao
   lado da Taxa de Conversão (só um anel de 180px) — 2fr/1fr genérico
   sobrava pouco espaço pra tabela e cortava a coluna de Ações, forçando
   scroll horizontal. Dá bem menos largura fixa pro card do anel. */
.main-grid--queue {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
}

.dashboard-side-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.dashboard-side-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 18px;
}

.dashboard-side-card--funnel {
    min-height: 360px;
}

.conversion-funnel {
    position: relative;
    min-height: 336px;
    max-width: 290px;
    margin: 0 auto;
    padding: 8px 0 6px;
}

.conversion-funnel__grid {
    position: absolute;
    inset: 8px 0 8px;
    pointer-events: none;
}

.conversion-funnel__band {
    position: absolute;
    left: 8px;
    right: 8px;
    height: calc((100% - ((var(--funnel-stage-count) - 1) * 8px)) / var(--funnel-stage-count));
    top: calc(var(--funnel-band-index) * (((100% - ((var(--funnel-stage-count) - 1) * 8px)) / var(--funnel-stage-count)) + 8px));
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.03);
}

.conversion-funnel__line {
    position: absolute;
    left: 18px;
    right: 18px;
    height: 1px;
    top: calc((var(--funnel-line-index) + 1) * ((100% - ((var(--funnel-stage-count) - 1) * 8px)) / var(--funnel-stage-count)) + (var(--funnel-line-index) * 8px) + 4px);
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(182, 147, 255, 0.28), rgba(255,255,255,0));
    opacity: 0.8;
}

.conversion-funnel__segments {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.conversion-funnel__stage {
    position: relative;
    z-index: 1;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.conversion-funnel:hover .conversion-funnel__stage {
    opacity: 0.4;
}

.conversion-funnel .conversion-funnel__stage:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.conversion-funnel__shape {
    position: relative;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.conversion-funnel__shape::after {
    content: "";
    position: absolute;
    inset: auto 11% -12px 11%;
    height: 14px;
    border-radius: 999px;
    background: rgba(6, 7, 19, 0.55);
    filter: blur(8px);
    z-index: 0;
}

.conversion-funnel__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 10px 24px rgba(95, 50, 217, 0.24));
}

.conversion-funnel__path {
    stroke-linejoin: round;
}

.conversion-funnel__path--outer {
    opacity: 0.18;
}

.conversion-funnel__path--mid {
    opacity: 0.42;
}

.conversion-funnel__path--inner {
    opacity: 0.94;
    stroke: rgba(227, 216, 255, 0.38);
    stroke-width: 0.9;
}

.conversion-funnel__glow {
    position: absolute;
    inset: 8px 18px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255,255,255,0.18), rgba(255,255,255,0) 72%);
    filter: blur(8px);
    opacity: 0.55;
}

.conversion-funnel__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    height: 100%;
    padding: 8px 18px;
    text-align: center;
    color: #fff;
}

.conversion-funnel__value {
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.18);
}

.conversion-funnel__pct {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(9, 11, 22, 0.82);
    border: 1px solid rgba(255,255,255,0.20);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
}

.conversion-funnel__label {
    font-size: 11px;
    font-weight: 500;
    color: rgba(243, 240, 255, 0.84);
    line-height: 1;
    text-align: center;
}

.full-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

@media (max-width: 1200px) {
    .main-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-side-card--funnel {
        min-height: auto;
    }

    .conversion-funnel {
        max-width: 240px;
    }
}

/* Tables */
.table-responsive {
    overflow-x: auto;
}

.premium-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.premium-table th {
    text-align: left;
    padding: 14px 16px;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--card-border);
}

.premium-table td {
    padding: 16px;
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    vertical-align: middle;
}

.premium-table tr:last-child td {
    border-bottom: none;
}

.premium-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

/* Profile Cell */
.profile-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 2026-09-08: o "contorno vermelho" em volta da foto era o radial-gradient de
   FUNDO (rgba(255,0,14,.16)) aparecendo pelas bordas, somado ao padding:7px que
   encolhia a foto dentro do círculo — com object-fit:contain sobrava moldura por
   todos os lados. Agora a foto preenche o círculo inteiro (cover, sem padding) e
   ficou maior. O fundo neutro só aparece enquanto a imagem carrega ou falha. */
.profile-img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.06);
    border: none;
    padding: 0;
    box-shadow: none;
}

.profile-info {
    display: flex;
    flex-direction: column;
}

.profile-name {
    font-weight: 600;
    color: #fff;
}

.profile-user {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Status Badges */
.status-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.status-hot { background: rgba(245,158,11,0.15); color: var(--accent-orange); border: 1px solid rgba(245,158,11,0.3); }
.status-warm { background: rgba(139,92,246,0.15); color: var(--accent-blue); border: 1px solid rgba(139,92,246,0.3); }
.status-cold { background: rgba(148,163,184,0.15); color: var(--text-secondary); border: 1px solid rgba(148,163,184,0.3); }
.status-won { background: rgba(16,185,129,0.15); color: var(--accent-green); border: 1px solid rgba(16,185,129,0.3); }
.status-lost { background: rgba(239,68,68,0.15); color: var(--accent-red); border: 1px solid rgba(239,68,68,0.3); }

/* Progress Bar */
.progress-wrapper {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 6px;
}
.progress-bar {
    height: 100%;
    border-radius: 4px;
}

/* AI Insights */
.ai-insight-item {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: linear-gradient(145deg, rgba(139, 92, 246, 0.08), rgba(59, 130, 246, 0.05));
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 12px;
    margin-bottom: 16px;
    align-items: flex-start;
    transition: 0.2s;
}
.ai-insight-item:hover {
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.15);
}
.ai-insight-icon {
    color: var(--accent-purple);
    background: rgba(139, 92, 246, 0.2);
    padding: 8px;
    border-radius: 10px;
    display: flex;
}
.ai-insight-text {
    font-size: 14px;
    line-height: 1.5;
}
.ai-insight-text strong {
    color: #fff;
}

/* Filters & Actions */
.action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;
}

/* Action Bar & Filter Form Styles */
.filter-form {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
}
.date-inputs-wrapper {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.date-field {
    position: relative;
    display: flex;
    align-items: center;
}
.date-input {
    height: 40px;
    cursor: text;
}
.date-separator {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 14px;
}
.filter-buttons-wrapper {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
}
.btn-filter {
    height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    min-width: 110px;
    justify-content: center;
    text-align: center;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.btn-clear {
    height: 40px;
    padding: 0 16px;
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--primary);
    border: 1px solid rgba(239, 68, 68, 0.3);
    box-shadow: none;
    justify-content: center;
    min-width: 110px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.filter-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}
.filter-btn:hover {
    background: rgba(255,255,255,0.1);
}
.filter-btn.active {
    background: var(--accent-blue);
    color: #fff;
    border-color: var(--accent-blue);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);
}

.search-input {
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--card-border);
    padding: 10px 16px 10px 40px;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    width: 280px;
    transition: 0.2s;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%2394a3b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>');
    background-repeat: no-repeat;
    background-position: 12px center;
}
.search-input:focus {
    outline: none;
    border-color: var(--accent-blue);
    background-color: rgba(0,0,0,0.5);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.date-input {
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--card-border);
    padding: 10px 16px;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    width: 154px;
    transition: 0.2s;
    height: 40px;
}
.date-input:focus {
    outline: none;
    border-color: var(--accent-blue);
    background-color: rgba(0,0,0,0.5);
    box-shadow: 0 0 0 3px rgba(255, 0, 14, 0.2);
}

.filter-form {
    display: flex;
    gap: 12px;
    align-items: center;
    background: transparent;
    padding: 0;
    border-radius: 0;
    border: 0;
    backdrop-filter: none;
    flex-wrap: wrap;
}

.section-title-with-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.section-title-main {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.section-title-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 0, 14, 0.12);
    border: 1px solid rgba(255, 0, 14, 0.22);
    color: var(--accent-red);
    flex-shrink: 0;
}

.section-title-icon--orange {
    background: rgba(255, 0, 14, 0.12);
    border-color: rgba(255, 0, 14, 0.22);
    color: var(--accent-red);
}
@media (max-width: 768px), (max-width: 1024px) and (max-height: 500px) and (orientation: landscape) {
    .dashboard-hero-card {
        min-height: 72px;
        padding: 18px 16px;
    }
    .dashboard-primary-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
    .glass-card,
    .kpi-card {
        padding: 18px 16px !important;
        border-radius: 18px !important;
    }
    .dashboard-hero-card {
        min-height: auto;
        padding: 2px 2px 4px;
    }
    .dashboard-greeting {
        font-size: clamp(32px, 8vw, 42px) !important;
        line-height: 1.15;
    }
    .dashboard-greeting__name {
        font-size: inherit;
    }
    .kpi-grid--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
    .kpi-card {
        min-height: 176px;
        gap: 12px;
        align-items: center;
        text-align: center;
    }
    .kpi-header {
        flex-direction: column;
        gap: 10px;
        font-size: 12px;
        line-height: 1.2;
        text-align: center;
    }
    .kpi-icon {
        width: 48px;
        height: 48px;
        margin: 0 auto;
    }
    .kpi-value {
        font-size: 38px;
    }
    .filter-form {
        display: none !important;
    }
    .table-responsive::-webkit-scrollbar,
    .dashboard-preset-bar::-webkit-scrollbar {
        display: none;
    }
    .filter-buttons-wrapper {
        width: 100%;
        flex-direction: column;
    }
    .btn-filter, .btn-clear {
        width: 100%;
    }
    .action-bar {
        flex-direction: column;
        align-items: center !important;
    }
    .mobile-hidden {
        display: none !important;
    }
    .dashboard-action-group {
        width: 100%;
    }
    .dashboard-action-group .dashboard-action-btn {
        width: 100%;
    }
    .section-title-with-action {
        flex-direction: column;
        align-items: stretch;
    }
    .conversion-funnel__shape {
        height: 54px;
    }
    .conversion-funnel__value {
        font-size: 16px;
    }
    .conversion-funnel__label {
        font-size: 10px;
    }
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.delay-1 { animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards; opacity: 0; }
.delay-2 { animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards; opacity: 0; }
.delay-3 { animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards; opacity: 0; }
.delay-4 { animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards; opacity: 0; }

/* Real-time indicator */
.live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-green);
    background: rgba(16,185,129,0.1);
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid rgba(16,185,129,0.2);
}
.live-dot {
    width: 8px;
    height: 8px;
    background-color: var(--accent-green);
    border-radius: 50%;
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(16,185,129, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(16,185,129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16,185,129, 0); }
}

/* ── PREMIUM OVERHAUL ────────────────────────────────────────────────────────*/

/* Glass cards — fundo sólido premium, sem gradiente */
.glass-card,
.goal-card {
    position: relative;
    background: #0d0b13 !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 20px !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.04) inset,
        0 8px 40px rgba(0,0,0,.6),
        0 1px 0 rgba(255,255,255,0.06) inset !important;
    transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease, border-color .28s ease !important;
    overflow: hidden !important;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Borda com brilho animado percorrendo a moldura — mesma identidade de cor
   do site (vermelho/roxo), só a "moldura" corre, sem afetar o conteúdo. */
@keyframes glassCardBorderFlow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.glass-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(115deg, transparent 15%, rgba(255,0,14,0.85) 40%, rgba(144,52,232,0.85) 60%, transparent 85%);
    background-size: 250% 250%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: glassCardBorderFlow 6s ease-in-out infinite;
    pointer-events: none;
    opacity: .8;
}

.glass-card:hover {
    transform: none !important;
    border-color: rgba(255,0,14,0.28) !important;
    box-shadow:
        0 0 0 1px rgba(255,0,14,0.14) inset,
        0 0 32px rgba(255,0,14,0.12),
        0 20px 60px rgba(0,0,0,.65) !important;
}

/* KPI cards: valor numérico grande — branco puro, sem gradiente, glow sutil */
.kpi-value {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    filter: drop-shadow(0 0 12px rgba(255, 60, 60, 0.25));
}

.kpi-card .kpi-value,
.kpi-card--featured .kpi-value {
    font-size: clamp(28px, 3.2vw, 44px) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    filter: drop-shadow(0 0 14px rgba(255, 0, 14, 0.3));
}

/* Cards grandes (2 colunas / featured) têm mais espaço — fonte ligeiramente maior */
.kpi-card--featured .kpi-value {
    font-size: clamp(36px, 4vw, 56px) !important;
}

/* Animated gradient border for featured cards */
.kpi-card--featured {
    position: relative;
}
.kpi-card--featured::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 21px;
    background: linear-gradient(135deg, rgba(255,0,14,0.5), rgba(109,40,217,0.5), rgba(255,0,14,0.3));
    background-size: 300% 300%;
    animation: gradientBorderMove 4s ease infinite;
    z-index: -1;
}
@keyframes gradientBorderMove {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}

/* ── Enhanced KPI cards ────────────────────────────────────────────────────── */
.kpi-card {
    transition: transform .2s ease, box-shadow .2s ease;
}
.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0,0,0,.5);
}

/* Filter chip as button */
.dashboard-preset-bar .filter-chip {
    appearance: none;
    -webkit-appearance: none;
}

/* ── Premium funnel overhaul ────────────────────────────────────────────────*/
.new-funnel-stage {
    position: relative;
    overflow: hidden;
    border-radius: 6px 6px 2px 2px;
    animation: funnelLoad .6s cubic-bezier(.22,1,.36,1) both;
    box-shadow: 0 4px 20px rgba(255,214,0,0.2), 0 0 0 1px rgba(255,255,255,0.08) inset;
}
.new-funnel-stages .new-funnel-stage:nth-child(1) { animation-delay: .05s; background: linear-gradient(135deg,#c084fc,#a855f7); box-shadow: 0 4px 24px rgba(168,85,247,0.35); }
.new-funnel-stages .new-funnel-stage:nth-child(2) { animation-delay: .13s; background: linear-gradient(135deg,#a855f7,#9333ea); box-shadow: 0 4px 20px rgba(147,51,234,0.3); }
.new-funnel-stages .new-funnel-stage:nth-child(3) { animation-delay: .21s; background: linear-gradient(135deg,#9333ea,#7c3aed); box-shadow: 0 4px 18px rgba(124,58,237,0.28); }
.new-funnel-stages .new-funnel-stage:nth-child(4) { animation-delay: .29s; background: linear-gradient(135deg,#7c3aed,#6d28d9); box-shadow: 0 4px 16px rgba(109,40,217,0.26); }
.new-funnel-stages .new-funnel-stage:nth-child(5) { animation-delay: .37s; background: linear-gradient(135deg,#6d28d9,#5b21b6); box-shadow: 0 4px 14px rgba(91,33,182,0.24); }

/* Shimmer sweep on funnel bars */
.new-funnel-stage::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    animation: funnelShimmer 2.8s ease infinite;
}
.new-funnel-stages .new-funnel-stage:nth-child(1)::after { animation-delay: .0s; }
.new-funnel-stages .new-funnel-stage:nth-child(2)::after { animation-delay: .3s; }
.new-funnel-stages .new-funnel-stage:nth-child(3)::after { animation-delay: .6s; }
.new-funnel-stages .new-funnel-stage:nth-child(4)::after { animation-delay: .9s; }
.new-funnel-stages .new-funnel-stage:nth-child(5)::after { animation-delay: 1.2s; }
@keyframes funnelShimmer {
    0%   { left: -80%; opacity: 0; }
    20%  { opacity: 1; }
    60%  { left: 140%; opacity: 0; }
    100% { left: 140%; opacity: 0; }
}

.new-funnel-stage-name  { color: rgba(255,255,255,0.75) !important; }
.new-funnel-stage-value { color: #fff !important; text-shadow: 0 0 12px rgba(255,255,255,0.4); }

.new-funnel-rate-pct {
    text-shadow: 0 0 10px rgba(192,132,252,0.6);
    color: #c084fc !important;
}

@keyframes funnelLoad {
    from { opacity: 0; transform: scaleX(0.85) translateY(8px); }
    to   { opacity: 1; transform: scaleX(1)    translateY(0); }
}

/* Glass card section entrance */
.glass-card {
    transition: opacity .2s ease, transform .2s ease;
}

/* Preset bar: remove old a-tag styles applied by theme, enforce button look */
.dashboard-preset-bar button.filter-chip {
    line-height: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

/* Filter chip premium */
.filter-chip {
    position: relative;
    overflow: hidden;
}
.filter-chip::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 60%);
    pointer-events: none;
}
.filter-chip.active {
    background: linear-gradient(135deg, #cc0008 0%, #7a0005 100%) !important;
    border-color: rgba(200,0,10,0.6) !important;
    box-shadow: 0 0 0 2px rgba(255,0,14,0.2), 0 0 28px rgba(255,0,14,0.25) !important;
}
.filter-chip:hover:not(.active) {
    background: rgba(255,255,255,0.07) !important;
    border-color: rgba(255,0,14,0.25) !important;
    transform: translateY(-1px);
}

/* Dashboard greeting glow */
.dashboard-greeting__name {
    filter: drop-shadow(0 0 12px rgba(255,0,14,0.6));
}

/* Section side card funnel bg */
.dashboard-side-card--funnel {
    background: linear-gradient(145deg, rgba(10,8,22,0.95), rgba(5,5,14,0.98)) !important;
    border: 1px solid rgba(168,85,247,0.15) !important;
    box-shadow: 0 0 40px rgba(168,85,247,0.08) !important;
}

/* Loading shimmer on KPI value during fetch */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}
.kpi-value.kpi-refreshed {
    animation: kpiPop .4s cubic-bezier(.22,1,.36,1) both;
    -webkit-text-fill-color: transparent;
}

/* Premium table rows */
.premium-table tr:hover td {
    background: rgba(255,0,14,0.04) !important;
}

/* Glowing separator line at top of glass-card */
.glass-card::before {
    background: linear-gradient(90deg, transparent, rgba(255,0,14,0.2), rgba(109,40,217,0.2), transparent) !important;
}

/* ── Números de KPI: degradê cinza no lugar do branco chapado ──────────────────
   Pedido de 2026-09-07 ("coloque um gradiente de cinza nesse branco dos números,
   para ficar mais profissional"). Precisa vencer três regras de #ffffff
   !important — as duas daqui de cima (linhas ~1139 e ~1148) e o grupo do
   design-system.css — por isso o seletor leva [data-theme="dark"]: sobe a
   especificidade pra (0,3,0) e, de quebra, deixa o tema claro intacto (lá o
   design-system pinta #0f172a, e um degradê branco→cinza sumiria no fundo).
   O -webkit-text-fill-color vira transparent porque o degradê é pintado como
   background e recortado no texto; o drop-shadow do glow continua valendo,
   já que age sobre o alfa dos glifos já recortados. */
[data-theme="dark"] .kpi-card .kpi-value,
[data-theme="dark"] .kpi-card--featured .kpi-value,
[data-theme="dark"] .kpi-value.kpi-value-display {
    background: linear-gradient(180deg, #ffffff 0%, #f0f3f7 38%, #c3c9d4 74%, #9aa2b1 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* ── Tema claro: os números dos KPIs estavam INVISÍVEIS ───────────────────────
   design-system.css:1401 já pinta [data-theme="light"] .kpi-value de #0f172a, mas
   com especificidade (0,2,0) — a MESMA de .kpi-card .kpi-value (linha ~1148 deste
   arquivo), que pinta #ffffff. Empate de especificidade se decide pela ordem de
   carga, e este arquivo entra depois (dashboard.php:1356, contra o <head> do
   design-system). Vencia o branco: número branco sobre card branco. Confirmado no
   navegador com o CSS real de produção — textFill e fundo ambos rgb(255,255,255).
   Bug pré-existente. Subindo para (0,3,0) o tema claro volta a ser legível. */
[data-theme="light"] .kpi-card .kpi-value,
[data-theme="light"] .kpi-card--featured .kpi-value,
[data-theme="light"] .kpi-value.kpi-value-display {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #0f172a !important;
    color: #0f172a !important;
    filter: none !important;
}
[data-theme="light"] .kpi-value .kpi-currency {
    -webkit-text-fill-color: #475569 !important;
    color: #475569 !important;
    opacity: 1 !important;
}

/* O "R$" sumia no tema escuro: .kpi-currency herda o -webkit-text-fill-color
   transparent do degradê acima, mas o opacity:0.88 dele (design-system.css:366)
   cria um grupo de composição próprio, e o background recortado do pai não pinta
   através dos glifos. Medido no navegador: invisível ocupando 29px, o que empurrava
   os dígitos 17px à direita do centro do card — era isso que aparecia como número
   "descentralizado" no mobile. Cor sólida não depende de background-clip, e o tom
   já embute o escurecimento que o opacity fazia. */
[data-theme="dark"] .kpi-value .kpi-currency {
    -webkit-text-fill-color: #c9d0da !important;
    color: #c9d0da !important;
    opacity: 1 !important;
}

/* ── Mobile: número maior e sem transbordar ───────────────────────────────────
   O clamp do design-system usa vw, então entregava o MENOR tamanho justamente onde
   o card é mais largo: em 375px, 3.2vw = 12px, caindo no piso de 28px (no desktop
   dava 44px). E o piso de 36px dos cards featured JÁ transbordava 15px em telas de
   320px com moeda longa ("R$ 12.345.678,90"). Aqui o vw passa a ser o termo
   dominante no mobile: cresce com a tela e encolhe junto nos aparelhos estreitos.
   Medido em 320/375/430px com o CSS real — pior caso agora é -18px de sobra. */
@media (max-width: 768px) {
    :root .kpi-card .kpi-value {
        font-size: clamp(28px, 8.8vw, 36px) !important;
    }
    :root .kpi-card--featured .kpi-value {
        font-size: clamp(32px, 10vw, 42px) !important;
    }
}

/* ── Layout fluido de desktop (2026-10-02, "a proporção ficou toda estranha…
   o painel deve ficar perfeito e preenchido em qualquer proporção") ────────────
   Antes: .dash-container preso em 1200px no centro, enquanto a barra de
   projeto e o topo esticam até a borda — em 1920px sobravam 360px vazios de
   cada lado (720px em 2560) e os blocos não alinhavam. E o cabeçalho empilhava
   4 faixas centralizadas (meta, saudação, períodos, filtros) com chips de 50px:
   em telas largas e baixas (ex. 1400×700) os números só apareciam na metade
   de baixo. Agora, só no desktop:
   - o conteúdo ocupa a largura do main, alinhado com a barra de projeto;
   - períodos + filtros + ações numa barra só (períodos à esquerda);
   - tamanhos escalam com a largura E a altura da tela (clamp com vw/vh).
   O celular (≤1100px) segue com o layout empilhado de antes. */
@media (min-width: 1101px) {
    .main-content > .dash-container {
        max-width: none;
        padding: clamp(4px, 1.2vh, 18px) 0 24px;
        gap: clamp(14px, 2.2vh, 24px);
    }
    .dash-container .dash-topline { margin-bottom: 0; gap: clamp(12px, 1.4vw, 24px); }
    .dash-container .dashboard-hero-card { min-height: 0; }
    .dashboard-greeting { font-size: clamp(22px, 1.25vw + 0.9vh, 32px); }
    .dashboard-greeting__date { margin-top: 4px; font-size: clamp(11px, 0.55vw + 0.4vh, 14px); }

    .dash-controls {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px 18px;
        flex-wrap: wrap;
        padding: 10px 12px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    }
    .dash-controls .dashboard-preset-bar { justify-content: flex-start; gap: 6px; flex-wrap: nowrap; }
    .dash-controls .filter-chip {
        min-width: 0;
        height: clamp(34px, 2.2vw + 0.6vh, 42px);
        padding: 0 clamp(12px, 1vw, 20px);
        font-size: clamp(13px, 0.45vw + 0.5vh, 15px);
    }
    .dash-controls .dashboard-toolbar {
        width: auto;
        margin: 0 !important;
        justify-content: flex-end !important;
    }
    .dash-controls .dashboard-toolbar > div { justify-content: flex-end !important; gap: 8px !important; }
    .dash-controls .filter-form,
    .dash-controls .date-inputs-wrapper,
    .dash-controls .filter-buttons-wrapper,
    .dash-controls .dashboard-action-group { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
    .dash-controls .date-input { height: clamp(34px, 2.2vw + 0.6vh, 42px); width: clamp(118px, 8vw, 150px); font-size: 13.5px; }
    .dash-controls .btn,
    .dash-controls .dashboard-action-btn {
        height: clamp(34px, 2.2vw + 0.6vh, 42px) !important;
        min-width: 0 !important;
        padding: 0 clamp(12px, 0.9vw, 18px) !important;
        font-size: 13.5px !important;
    }

    /* Números: crescem com a largura, mas a altura da tela também limita. */
    .kpi-card .kpi-value { font-size: clamp(26px, min(2.3vw, 5vh), 52px) !important; }
    .kpi-card.kpi-card--featured .kpi-value { font-size: clamp(34px, min(3.2vw, 6.5vh), 72px) !important; }
    .kpi-card--featured { padding-block: clamp(16px, 2.6vh, 28px); }
}
/* Telas muito largas: 4 KPIs compactos numa linha e os destaques mais altos. */
@media (min-width: 1700px) {
    .kpi-grid--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* borda cinza nos cards (27/10/2026): o roxo fica no resto, só o contorno dos cards é cinza */
.glass-card,.goal-card,.dashboard-side-card,.dashboard-hero-card{border-color:rgba(156,163,175,.28)!important}
.glass-card:hover{border-color:rgba(156,163,175,.45)!important}

/* dica do card de meta aparece ABAIXO do card (27/10/2026) */
.goal-card[data-tip]{position:relative;overflow:visible}
.goal-card[data-tip]::after{content:attr(data-tip);position:absolute;left:18px;top:calc(100% + 8px);max-width:min(380px,calc(100vw - 48px));white-space:normal;background:#1b1b22;color:#fff;border:1px solid rgba(255,255,255,.18);padding:8px 12px;border-radius:10px;font:600 12.5px Inter,sans-serif;line-height:1.35;opacity:0;pointer-events:none;transform:translateY(-3px);transition:.15s;z-index:60}
.goal-card[data-tip]:hover::after,.goal-card[data-tip]:focus-visible::after,.goal-card[data-tip]:active::after{opacity:1;transform:none}