/* ========================================
   DASHBOARD V2 — camada de redesenho visual
   Carrega DEPOIS de dashboard-clean.css / dashboard-overview.css /
   dashboard-sections.css e DEPOIS de design-v2.css.

   Cor de destaque é FIXA (dourado #d4af37/#f1d366), não var(--tenant-accent,...).
   O painel é uma ferramenta interna do corretor, não a vitrine pública —
   usar a paleta do tenant aqui fazia a cor do painel mudar junto com a do
   site (ex.: virar marrom fosco numa paleta clara), o que não faz sentido
   pra uma tela que todo tenant usa do mesmo jeito. Só o site público
   (design-v2.css e afins) deve variar por tenant.

   Fase 1: casca (sidebar + header) + tela Visão Geral. Alguns
   componentes aqui (.metric-card, .chart-card, .section-title) são
   átomos reutilizados por TODAS as telas do painel — ao restilizá-los
   o "chrome" dos cards fica consistente em todo o painel desde já,
   mas o CONTEÚDO/layout específico de cada tela ainda-não-revisada
   (Imóveis, Leads, Agenda, Relatórios, Financeiro, Integrações,
   Configurações) permanece intocado, e recebe sua própria passada
   visual dedicada nas próximas fases.
======================================== */

/* Redefine os tokens --dv2-* pra valores fixos, só neste arquivo. Eles
   nascem em design-v2.css (carregado antes, também nesta página só pelas
   fontes/tokens genéricos) já apontando pro --tenant-page-bg/-text/etc. do
   site público — sem essa redefinição aqui, TODO uso de --dv2-* abaixo
   neste arquivo (fundo dos cards, texto, linhas) herdava a paleta do
   tenant por tabela, exatamente o mesmo problema do --tenant-accent direto
   que já foi corrigido acima, só que por um caminho indireto. */
:root {
    --dv2-bg: #0a0a0b;
    --dv2-surface: #111114;
    --dv2-text: #f2efe9;
    --dv2-text-muted: rgba(242, 239, 233, 0.6);
    --dv2-text-faint: rgba(242, 239, 233, 0.42);
    --dv2-line: rgba(255, 255, 255, 0.1);
    --dv2-line-gold: rgba(212, 175, 55, 0.3);
}

body {
    background: var(--dv2-bg, #0a0a0b);
}

/* ----- Sidebar ----- */

.sidebar {
    background: var(--dv2-bg-deep, #08080a);
    border-right: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
}

.sidebar-header {
    border-bottom: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
}

.logo {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
}

.logo i {
    color: #d4af37;
}

.nav-group-label {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
}

.nav-link {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: var(--dv2-text-muted, rgba(242, 239, 233, 0.6));
    border-radius: 0;
}

.nav-link:hover {
    color: var(--dv2-text, #f2efe9);
    background: rgba(255, 255, 255, 0.05);
}

.nav-item.active .nav-link {
    color: var(--dv2-text, #f2efe9);
    background: rgba(212, 175, 55, 0.1);
}

.nav-item.active .nav-link::before {
    background: #d4af37;
    border-radius: 0;
}

.sidebar-team-widget {
    background: var(--dv2-surface, #111114);
    border: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
    border-radius: 0;
}

.sidebar-team-avatar-more {
    background: rgba(212, 175, 55, 0.18);
    color: #d4af37;
}

.sidebar-team-count {
    color: var(--dv2-text, #f2efe9);
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
}

/* ----- Header ----- */

.dashboard-header {
    background: rgba(10, 10, 11, 0.86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
}

.header-global-search {
    background: var(--dv2-surface, #111114);
    border: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
    border-radius: 0;
}

.header-global-search input {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: var(--dv2-text, #f2efe9);
}

.header-global-search input::placeholder {
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
}

.header-global-search > i {
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
}

.global-search-results {
    background: var(--dv2-surface, #111114);
    border: 1px solid var(--dv2-line-gold);
    border-radius: 0;
}

.tenant-site-link {
    border: 1px solid rgba(212, 175, 55, 0.4);
    background: transparent;
    color: #d4af37;
    border-radius: 0;
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
}

.tenant-site-link:hover {
    border-color: #d4af37;
    background: rgba(212, 175, 55, 0.12);
    color: var(--dv2-text, #f2efe9);
}

.notification-bell {
    color: var(--dv2-text-muted, rgba(242, 239, 233, 0.6));
}

.notification-bell:hover {
    background: rgba(212, 175, 55, 0.12);
    color: #d4af37;
}

.notification-badge {
    background: #d4af37;
    color: #0a0a0b;
}

.notification-panel {
    background: var(--dv2-surface, #111114);
    border: 1px solid var(--dv2-line-gold);
    border-radius: 0;
}

.notif-panel-header {
    border-bottom: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
}

.notif-item:hover {
    background: rgba(212, 175, 55, 0.08);
}

.user-info:hover {
    background: rgba(212, 175, 55, 0.1);
}

.user-name {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: var(--dv2-text, #f2efe9);
}

.user-role {
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
}

.user-avatar,
.user-avatar-small {
    background: var(--dv2-surface, #111114);
    border: 1px solid rgba(212, 175, 55, 0.45);
    color: #d4af37;
    font-family: var(--dv2-font-display, 'Marcellus', serif);
    font-size: 0.8rem;
    letter-spacing: 0.03em;
}

.user-menu {
    background: var(--dv2-bg-deep, #08080a);
    border: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
    border-radius: 0;
}

.user-menu-header {
    border-bottom: 1px solid var(--dv2-line-gold);
}

/* ----- Section title (compartilhado por todas as telas) ----- */

.section-eyebrow {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: #d4af37;
    letter-spacing: 0.22em;
}

.section-title h2 {
    font-family: var(--dv2-font-display, 'Marcellus', serif);
    font-weight: 500;
    color: var(--dv2-text, #f2efe9);
    letter-spacing: 0.01em;
}

.section-title p {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: var(--dv2-text-muted, rgba(242, 239, 233, 0.6));
}

/* ----- Metric cards (compartilhados: Visão Geral + Financeiro) ----- */

.metric-card {
    background: var(--dv2-surface, #111114);
    border: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
    border-top: 2px solid #d4af37;
    border-radius: 0;
}

.metric-card:hover {
    border-color: var(--dv2-line, rgba(255, 255, 255, 0.1));
    border-top-color: #d4af37;
}

.metric-label {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
}

.metric-top-icon {
    color: #d4af37;
}

.metric-value {
    font-family: var(--dv2-font-display, 'Marcellus', serif);
    font-weight: 500;
    font-size: 2.35rem;
    color: #d4af37;
    letter-spacing: 0;
}

.metric-meta {
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
}

.metric-goal-track {
    background: rgba(255, 255, 255, 0.07);
}

.metric-goal-fill {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.4), #d4af37);
}

.metric-goal-text {
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
}

/* ----- Chart / list cards (compartilhados por todas as telas) ----- */

.chart-card,
.activity-card,
.top-properties-card {
    background: var(--dv2-surface, #111114);
    border: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
    border-radius: 0;
}

.chart-header h3,
.activity-header h3,
.top-properties-header h3 {
    font-family: var(--dv2-font-display, 'Marcellus', serif);
    font-weight: 500;
    color: var(--dv2-text, #f2efe9);
}

.chart-subtitle {
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
}

.chart-period-selector {
    background: var(--dv2-bg, #0a0a0b);
    border: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
    color: var(--dv2-text-muted, rgba(242, 239, 233, 0.6));
    border-radius: 0;
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
}

.chart-period-selector:hover,
.chart-period-selector:focus {
    border-color: #d4af37;
    box-shadow: none;
}

.btn-link {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: #d4af37;
}

.btn-link:hover {
    color: var(--dv2-text, #f2efe9);
}

/* Heatmap geografico */

.region-rank-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

.region-rank-name {
    color: var(--dv2-text-muted, rgba(242, 239, 233, 0.6));
}

.region-rank-value {
    color: var(--dv2-text, #f2efe9);
}

.region-rank-bar-track {
    background: rgba(255, 255, 255, 0.07);
}

.region-rank-bar-fill {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.4), #d4af37);
}

.empty-state-inline-text {
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
}

/* Origem de leads */

.lead-source-bar-name {
    color: var(--dv2-text-muted, rgba(242, 239, 233, 0.6));
}

.lead-source-bar-count {
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
}

.lead-source-bar-track {
    background: rgba(255, 255, 255, 0.07);
    border-radius: 2px;
}

.lead-source-bar-fill {
    border-radius: 2px;
}

/* Pipeline strip */

.pipeline-strip-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
    border-radius: 0;
}

.pipeline-strip-item:hover {
    border-color: var(--dv2-line-gold);
}

.pipeline-strip-stage {
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
}

.pipeline-strip-count {
    font-family: var(--dv2-font-display, 'Marcellus', serif);
    color: var(--dv2-text, #f2efe9);
}

.pipeline-strip-bar-track {
    background: rgba(255, 255, 255, 0.07);
}

.pipeline-strip-bar-fill {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.4), #d4af37);
}

/* Interactions heatmap grid legend */

.interactions-heatmap-grid .iheat-col-label,
.interactions-heatmap-grid .iheat-row-label {
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
}

.interactions-heatmap-legend {
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
}

/* Atividades recentes */

.activity-item {
    border-bottom: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
    border-radius: 0;
}

.activity-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

.activity-title {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: var(--dv2-text, #f2efe9);
}

.activity-description {
    color: var(--dv2-text-muted, rgba(242, 239, 233, 0.6));
}

.activity-time {
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
}

.activity-icon {
    border-radius: 4px;
}

/* Imóveis em destaque */

.top-property-item {
    border-bottom: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
}

.top-property-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

.top-property-title {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: var(--dv2-text, #f2efe9);
}

.top-property-location {
    color: var(--dv2-text-muted, rgba(242, 239, 233, 0.6));
}

.top-property-price {
    color: #d4af37;
}

.stat-item {
    color: var(--dv2-text-muted, rgba(242, 239, 233, 0.6));
}

.stat-item i {
    color: #d4af37;
}

/* ========================================
   FASE 2 — Imóveis (gestão)
   .btn-primary/.btn-secondary/.status-badge/.category-badge/.empty-state
   são átomos compartilhados com outras telas ainda-não-revisadas — o
   mesmo raciocínio da Fase 1 se aplica aqui.
======================================== */

.properties-stat-card {
    background: var(--dv2-surface, #111114);
    border: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
    border-radius: 0;
}

.properties-stat-card:hover {
    border-color: var(--dv2-line-gold);
}

.properties-stat-label {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
}

.properties-stat-value {
    font-family: var(--dv2-font-display, 'Marcellus', serif);
    font-weight: 500;
    color: var(--dv2-text, #f2efe9);
}

.properties-stat-share {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
}

.search-box input,
.filter-group select {
    background: var(--dv2-surface, #111114);
    border: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
    border-radius: 0;
    color: var(--dv2-text, #f2efe9);
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
}

.search-box input::placeholder {
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
}

.search-box input:focus,
.filter-group select:hover,
.filter-group select:focus {
    border-color: #d4af37;
}

.filter-group select {
    color: var(--dv2-text-muted, rgba(242, 239, 233, 0.6));
}

.filter-group select:hover {
    color: var(--dv2-text, #f2efe9);
}

.filter-group select option {
    background: var(--dv2-bg-deep, #08080a);
    color: var(--dv2-text, #f2efe9);
}

.search-box i {
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
}

.btn-primary {
    background: rgba(212, 175, 55, 0.16);
    color: #d4af37;
    border: 1px solid rgba(212, 175, 55, 0.5);
    border-radius: 0;
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
}

.btn-primary:hover {
    background: rgba(212, 175, 55, 0.28);
    color: var(--dv2-text, #f2efe9);
}

.btn-secondary {
    background: var(--dv2-surface, #111114);
    border: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
    color: var(--dv2-text-muted, rgba(242, 239, 233, 0.6));
    border-radius: 0;
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
}

.btn-secondary:hover {
    color: var(--dv2-text, #f2efe9);
    border-color: var(--dv2-line-gold);
}

.properties-table-container {
    background: var(--dv2-surface, #111114);
    border: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
    border-radius: 0;
}

.properties-table th {
    background: rgba(255, 255, 255, 0.02);
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    border-bottom: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
}

.properties-table td {
    border-bottom: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
    color: var(--dv2-text-muted, rgba(242, 239, 233, 0.6));
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
}

.property-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.property-thumb {
    border-radius: 0;
    border-color: rgba(212, 175, 55, 0.3);
}

.property-mini-content strong {
    color: var(--dv2-text, #f2efe9);
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
}

.property-mini-content small {
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
}

.category-badge,
.status-badge {
    border-radius: 0;
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
}

.properties-pagination-summary {
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
}

.properties-pagination-page {
    background: var(--dv2-surface, #111114);
    border: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
    color: var(--dv2-text-muted, rgba(242, 239, 233, 0.6));
    border-radius: 0;
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
}

.properties-pagination-page:hover {
    border-color: #d4af37;
    color: var(--dv2-text, #f2efe9);
}

.properties-pagination-page.active {
    color: var(--dv2-bg, #0a0a0b);
    background: linear-gradient(180deg, #f1d366, #d4af37);
    border-color: transparent;
}

.btn-icon {
    border: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
    border-radius: 0;
    color: var(--dv2-text-muted, rgba(242, 239, 233, 0.6));
}

.btn-icon:hover {
    border-color: #d4af37;
    color: #d4af37;
}

.empty-state h3 {
    font-family: var(--dv2-font-display, 'Marcellus', serif);
    font-weight: 500;
    color: var(--dv2-text, #f2efe9);
}

.empty-state p {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: var(--dv2-text-muted, rgba(242, 239, 233, 0.6));
}

.empty-icon {
    background: var(--dv2-surface, #111114);
    border: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
}

/* ========================================
   FASE 3 — Leads (tabela + kanban)
   Mantém as 10 etapas reais do pipeline e as cores semânticas por
   etapa/origem/status (informativas) — só o "chrome" (fundo, borda,
   tipografia) muda pro padrão dark/gold de cantos retos.
======================================== */

.lead-stat-card {
    background: var(--dv2-surface, #111114);
    border: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
    border-radius: 0;
}

.lead-stat-card:hover {
    border-color: var(--dv2-line-gold);
}

.stat-number {
    font-family: var(--dv2-font-display, 'Marcellus', serif);
    font-weight: 500;
    color: var(--dv2-text, #f2efe9);
}

.stat-label {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
}

.lead-stat-delta {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
}

.leads-table-container {
    background: var(--dv2-surface, #111114);
    border: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
    border-radius: 0;
}

.leads-table th {
    background: rgba(255, 255, 255, 0.02);
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    border-bottom: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
}

.leads-table td {
    border-bottom: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
    color: var(--dv2-text-muted, rgba(242, 239, 233, 0.6));
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
}

.leads-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.lead-avatar {
    background: radial-gradient(120% 120% at 30% 20%, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.03));
    border-color: rgba(212, 175, 55, 0.35);
    color: #d4af37;
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
}

.lead-contact {
    color: var(--dv2-text-muted, rgba(242, 239, 233, 0.6));
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
}

.lead-source,
.lead-badge,
.lead-agent-badge {
    border-radius: 0;
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
}

.leads-view-toggle {
    background: var(--dv2-surface, #111114);
    border: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
    border-radius: 0;
}

.leads-view-toggle .view-btn {
    color: var(--dv2-text-muted, rgba(242, 239, 233, 0.6));
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    border-radius: 0;
}

.leads-view-toggle .view-btn:hover {
    color: var(--dv2-text, #f2efe9);
}

.leads-view-toggle .view-btn.active {
    background: rgba(212, 175, 55, 0.2);
    color: #d4af37;
}

.pipeline-column {
    background: var(--dv2-surface, #111114);
    border: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
    border-radius: 0;
}

.pipeline-col-title {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: var(--dv2-text, #f2efe9);
}

.pipeline-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
    border-radius: 0;
}

.pipeline-card:hover {
    border-color: var(--dv2-line-gold);
}

.pipeline-card-name {
    color: var(--dv2-text, #f2efe9);
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
}

.pipeline-card-interest {
    color: var(--dv2-text-muted, rgba(242, 239, 233, 0.6));
}

.pipeline-card-source {
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
}

.pipeline-empty {
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
}

/* ========================================
   FASE 4 — Agenda (grade semanal + hoje/disponibilidade)
   Mantém a lógica real de renderWeekGrid/renderTodayPanel/
   renderAvailability — só o chrome visual muda.
======================================== */

.week-grid-section,
.appointments-section {
    background: var(--dv2-surface, #111114);
    border: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
    border-radius: 0;
}

.week-grid-toolbar {
    border-bottom: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
}

.week-grid-nav h3,
.appointments-section h3 {
    font-family: var(--dv2-font-display, 'Marcellus', serif);
    font-weight: 500;
    color: var(--dv2-text, #f2efe9);
}

.week-grid-days-header {
    border-bottom: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
}

.week-day-header {
    border-left: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
}

.week-day-header.today {
    background: rgba(212, 175, 55, 0.07);
}

.week-day-name {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
}

.week-day-number {
    font-family: var(--dv2-font-display, 'Marcellus', serif);
    color: var(--dv2-text, #f2efe9);
}

.week-day-header.today .week-day-number {
    color: #d4af37;
}

.week-grid-time-label {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
}

.week-day-column {
    border-left: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
}

.week-day-column.today {
    background-color: rgba(212, 175, 55, 0.035);
}

.week-appointment-chip {
    border-radius: 0;
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
}

.appointment-card {
    background: var(--dv2-surface, #111114);
    border: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
    border-radius: 0;
}

.appointment-card:hover {
    border-color: var(--dv2-line-gold);
}

.appointment-time .time {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: var(--dv2-text, #f2efe9);
}

.appointment-time .date {
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
}

.availability-bar {
    background: rgba(255, 255, 255, 0.07);
}

.availability-bar-fill {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.4), #d4af37);
}

.availability-text {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: var(--dv2-text-muted, rgba(242, 239, 233, 0.6));
}

.availability-pct {
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
}

.availability-note {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
}

/* ========================================
   FASE 5 — Relatórios (KPIs, gráficos, rankings)
   As cores por etapa do donut de leads ficam como estão — já usam a
   mesma paleta semântica do kanban de Leads (Fase 3).
======================================== */

.period-selector {
    background-color: var(--dv2-surface, #111114);
    border: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
    border-radius: 0;
    color: var(--dv2-text-muted, rgba(242, 239, 233, 0.6));
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
}

.period-selector:hover {
    border-color: #d4af37;
    color: var(--dv2-text, #f2efe9);
}

.period-selector option {
    background: var(--dv2-bg-deep, #08080a);
    color: var(--dv2-text, #f2efe9);
}

.analytics-card {
    background: var(--dv2-surface, #111114);
    border: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
    border-radius: 0;
}

.analytics-card:hover {
    border-color: var(--dv2-line-gold);
}

.analytics-label {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
}

.analytics-value {
    font-family: var(--dv2-font-display, 'Marcellus', serif);
    font-weight: 500;
    color: #d4af37;
    letter-spacing: 0;
}

.analytics-trend {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: var(--dv2-text-muted, rgba(242, 239, 233, 0.6));
}

.analytics-chart-card,
.top-performers-card,
.interest-stat-card {
    background: var(--dv2-surface, #111114);
    border: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
    border-radius: 0;
}

.interest-stat-card:hover {
    background: var(--dv2-surface, #111114);
    border-color: var(--dv2-line-gold);
}

.analytics-chart-card h3,
.top-performers-card h3 {
    font-family: var(--dv2-font-display, 'Marcellus', serif);
    font-weight: 500;
    color: var(--dv2-text, #f2efe9);
}

.interest-stat-label {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
}

.interest-stat-value {
    color: #d4af37;
}

.interest-stat-meta {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: var(--dv2-text-muted, rgba(242, 239, 233, 0.6));
}

.interest-ranking-row {
    border-bottom: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
}

.interest-rank-badge {
    border-radius: 0;
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
}

.interest-rank-badge-first {
    color: var(--dv2-bg, #0a0a0b);
    background: linear-gradient(180deg, #f1d366, #d4af37);
}

.interest-ranking-label {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: var(--dv2-text-muted, rgba(242, 239, 233, 0.6));
}

.interest-ranking-bar-fill {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.4), #d4af37);
}

.interest-ranking-value {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: #d4af37;
}

/* ========================================
   FASE 6 — Financeiro
   .fin-goal-card é NOVO (não existia antes desta fase) — mostra a meta de
   comissão mensal configurada em Configurações contra o valor real do mês.
======================================== */

.fin-breakdown-label {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: var(--dv2-text-muted, rgba(242, 239, 233, 0.6));
}

.fin-breakdown-bar {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 0;
}

.fin-breakdown-fill {
    border-radius: 0;
}

.fin-breakdown-value {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: #d4af37;
}

.section-card {
    background: var(--dv2-surface, #111114);
    border: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
    border-radius: 0;
}

.section-card-header h3 {
    font-family: var(--dv2-font-display, 'Marcellus', serif);
    font-weight: 500;
    color: var(--dv2-text, #f2efe9);
}

.tx-type-badge {
    border-radius: 0;
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
}

.tx-commission {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: #d4af37;
}

.podium-card {
    background: var(--dv2-surface, #111114);
    border: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
    border-radius: 0;
}

.podium-card-first {
    border-color: var(--dv2-line-gold);
}

.podium-medal,
.interest-rank-badge {
    border-radius: 0;
}

.podium-medal-first {
    color: var(--dv2-bg, #0a0a0b);
    background: linear-gradient(180deg, #f1d366, #d4af37);
}

.podium-badge {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
}

.podium-avatar {
    border-radius: 50%;
    border-color: rgba(212, 175, 55, 0.35);
    background: var(--dv2-bg-deep, #08080a);
    color: #d4af37;
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
}

.podium-agent-name {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: var(--dv2-text, #f2efe9);
}

.podium-commission-label {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
}

.podium-commission-value {
    font-family: var(--dv2-font-display, 'Marcellus', serif);
    color: #d4af37;
}

.podium-secondary {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: var(--dv2-text-muted, rgba(242, 239, 233, 0.6));
}

/* ========================================
   FASE 7 — Integrações
   Achado durante a implementação: .int-input/.int-connect-area/
   .int-btn-integrate/.int-connected-badge/.int-status já dependiam de um
   mecanismo [data-theme="dark"] antigo que nunca é ativado nesta página —
   ou seja, essas caixas de conexão renderizavam CLARAS (fundo branco/cinza
   claro) dentro dos cards escuros mesmo antes desta fase, um bug real e
   não só uma questão de estilo. Corrigido junto com o redesenho.
======================================== */

.int-stat-card {
    background: var(--dv2-surface, #111114);
    border: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
    border-radius: 0;
}

.int-stat-label {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
}

.int-stat-value {
    font-family: var(--dv2-font-display, 'Marcellus', serif);
    font-weight: 500;
    color: #d4af37;
}

.int-stat-meta {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
}

.int-card {
    background: var(--dv2-surface, #111114);
    border: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
    border-radius: 0;
}

.int-card:hover {
    border-color: var(--dv2-line-gold);
}

.int-card-title {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: var(--dv2-text, #f2efe9);
}

.int-card-subtitle {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
}

.int-card .int-status.connected {
    background: rgba(55, 212, 154, 0.14);
    color: #37d49a;
    border: 1px solid rgba(55, 212, 154, 0.35);
    border-radius: 0;
}

.int-card .int-status.disconnected {
    background: rgba(255, 255, 255, 0.05);
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
    border: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
    border-radius: 0;
}

.int-card .int-status.disconnected:hover {
    background: rgba(212, 175, 55, 0.12);
    color: #d4af37;
    border-color: rgba(212, 175, 55, 0.4);
}

.int-connect-area {
    border-top: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
}

.int-input {
    background: var(--dv2-bg, #0a0a0b);
    border: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
    color: var(--dv2-text, #f2efe9);
    border-radius: 0;
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
}

.int-input::placeholder {
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
}

.int-input:focus {
    border-color: #d4af37;
    background: var(--dv2-surface, #111114);
}

.int-btn-primary {
    background: rgba(212, 175, 55, 0.16);
    color: #d4af37;
    border: 1px solid rgba(212, 175, 55, 0.5);
    border-radius: 0;
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
}

.int-btn-primary:hover {
    background: rgba(212, 175, 55, 0.28);
    color: var(--dv2-text, #f2efe9);
}

.int-btn-integrate {
    border: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
    background: transparent;
    color: var(--dv2-text-muted, rgba(242, 239, 233, 0.6));
    border-radius: 0;
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
}

.int-btn-integrate:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--dv2-line-gold);
    color: var(--dv2-text, #f2efe9);
}

.int-btn-danger {
    background: transparent;
    border-radius: 0;
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
}

.int-btn-procedure {
    border: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
    background: var(--dv2-surface, #111114);
    color: var(--dv2-text-muted, rgba(242, 239, 233, 0.6));
    border-radius: 0;
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
}

.int-btn-procedure:hover {
    border-color: var(--dv2-line-gold);
    color: var(--dv2-text, #f2efe9);
}

.int-connected-badge {
    background: rgba(55, 212, 154, 0.14);
    border: 1px solid rgba(55, 212, 154, 0.35);
    color: #37d49a;
    border-radius: 0;
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
}

#xmlFeedPanel {
    background: var(--dv2-surface, #111114) !important;
    border-color: rgba(212, 175, 55, 0.4) !important;
}

#xmlFeedPanel input[readonly] {
    background: var(--dv2-bg, #0a0a0b) !important;
    border-color: var(--dv2-line, rgba(255, 255, 255, 0.1)) !important;
    color: var(--dv2-text-muted, rgba(242, 239, 233, 0.6)) !important;
    font-family: monospace !important;
}

#xmlFeedPanel p {
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42)) !important;
}

#xmlFeedPanel > div:last-child > div:last-child {
    background: rgba(55, 212, 154, 0.1) !important;
    border-color: rgba(55, 212, 154, 0.3) !important;
}

#xmlFeedPanel > div:last-child > div:last-child span {
    color: #37d49a !important;
}

/* ========================================
   FASE 8 — Configurações
   Mantém os 5 cards já funcionais (push, templates de e-mail, webhooks
   in/out, 2FA) como estão — só o chrome visual muda. Aparência/Perfil/
   Backup continuam decorativos como hoje.
======================================== */

.setting-card {
    background: var(--dv2-surface, #111114);
    border: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
    border-radius: 0;
}

.setting-card:hover {
    border-color: var(--dv2-line-gold);
    box-shadow: none;
    transform: none;
}

.setting-icon {
    background: rgba(212, 175, 55, 0.12);
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 0;
    color: #d4af37;
}

.setting-card h3 {
    font-family: var(--dv2-font-display, 'Marcellus', serif);
    font-weight: 500;
    color: var(--dv2-text, #f2efe9);
}

.setting-card p {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
}

.settings-goals-card,
.settings-lang-card {
    background: var(--dv2-surface, #111114);
    border: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
    border-radius: 0;
}

.settings-goals-header h3,
.settings-lang-text h3 {
    font-family: var(--dv2-font-display, 'Marcellus', serif);
    font-weight: 500;
    color: var(--dv2-text, #f2efe9);
}

.settings-goals-header p,
.settings-lang-text p {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
}

.settings-goal-field label {
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
    color: var(--dv2-text-faint, rgba(242, 239, 233, 0.42));
}

.settings-goal-field input {
    background: var(--dv2-bg, #0a0a0b);
    border: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
    color: var(--dv2-text, #f2efe9);
    border-radius: 0;
    font-family: var(--dv2-font-body, 'Karla', sans-serif);
}

.settings-goal-field input:focus {
    border-color: #d4af37;
}

.settings-goals-footer {
    border-top: 1px solid var(--dv2-line, rgba(255, 255, 255, 0.1));
}

.toggle-slider {
    background-color: rgba(255, 255, 255, 0.15);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: #d4af37;
}