/* ============================================================
   Clyvo — tema do app (fonte Inter) sobre o Bootstrap.
   Paleta 100% via tokens em :root — trocar de tema (escuro <-> claro)
   é editar SÓ o bloco de tokens abaixo. O corpo nunca crava hex de paleta.
   ============================================================ */

/* ---------- Tokens Clyvo (paleta) ----------
   Superfícies vão do fundo (mais escuro) ao elevado (mais claro).
   Para virar o tema claro, reescrever apenas estes valores. */
:root {
    /* Superfícies */
    --clyvo-bg: #FFFFFF;          /* fundo da página */
    --clyvo-sidebar: #FFFFFF;     /* sidebar + topbar */
    --clyvo-sunken: #F4F4F5;      /* inputs, abas, coluna do pipeline, bg terciário */
    --clyvo-card: #FFFFFF;        /* cards e linhas de tabela */
    --clyvo-card-2: #F4F4F5;      /* hover / superfície secundária / divisória de linha */

    /* Bordas */
    --clyvo-border: #E5E7EB;      /* borda padrão */
    --clyvo-border-2: #D4D4D8;    /* borda em hover */

    /* Texto (do mais forte ao mais fraco) */
    --clyvo-white: #ffffff;       /* texto sobre superfície colorida (botão azul) */
    --clyvo-text: #111827;
    --clyvo-text-dim: #6B7280;
    --clyvo-text-faint: #9CA3AF;
    --clyvo-gray: #9CA3AF;        /* neutro: bolinha cinza, desabilitado */

    /* Azul = SÓ marca + semântico (logo, bolinha de status, etapa do pipeline, estados "info") */
    --clyvo-blue: #107ED2;
    --clyvo-blue-hover: #0E70BC;
    --clyvo-blue-active: #0C61A4;

    /* Acento de interação (ações primárias, nav ativa, foco, hover) = tinta quase-preta, estilo Acme.
       Trocar SÓ aqui se quiser outro tom de "preto" nos botões. */
    --clyvo-accent: #18181B;
    --clyvo-accent-hover: #2E2E33;
    --clyvo-accent-active: #000000;
    --clyvo-active-surface: #F1F1F2;        /* fundo do item ativo (cinza, não azul) */
    --clyvo-active-text: var(--clyvo-text);  /* texto/ícone sobre superfície ativa */

    /* Semânticos (base — usar com as bolinhas .dot-*) */
    --clyvo-green: #16A34A;
    --clyvo-red: #EF4444;
    --clyvo-amber: #D97706;

    --clyvo-radius: 12px;
    --clyvo-radius-sm: 8px;
}

/* ---------- Bridge Bootstrap (deriva tudo dos tokens) ---------- */
[data-bs-theme="light"] {
    --bs-primary: var(--clyvo-accent);
    --bs-primary-rgb: 24, 24, 27;
    --bs-link-color: var(--clyvo-accent);
    --bs-link-color-rgb: 24, 24, 27;
    --bs-link-hover-color: var(--clyvo-accent-hover);
    --bs-body-bg: var(--clyvo-bg);
    --bs-body-color: var(--clyvo-text);
    --bs-secondary-color: var(--clyvo-text-dim);
    --bs-tertiary-color: var(--clyvo-text-faint);
    --bs-border-color: var(--clyvo-border);
    --bs-secondary-bg: var(--clyvo-card);
    --bs-tertiary-bg: var(--clyvo-sunken);
    --bs-body-font-family: "Inter", system-ui, sans-serif;
    --bs-emphasis-color: var(--clyvo-text);
    --bs-success: var(--clyvo-green); --bs-success-rgb: 22, 163, 74;
    --bs-danger: var(--clyvo-red); --bs-danger-rgb: 239, 68, 68;
}

/* Tipografia — Inter em tudo */
body { font-family: "Inter", system-ui, sans-serif; overflow-x: hidden; }
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Inter", system-ui, sans-serif; font-weight: 600; letter-spacing: -.01em;
}

/* Título de página (hero): mais encorpado que o .h4 — âncora visual de cada tela */
.page-title {
    font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15;
    color: var(--clyvo-text);
}
.page-title .text-muted { letter-spacing: -.01em; }

/* Subtítulo curto abaixo do título da página */
.page-sub { color: var(--clyvo-text-dim); font-size: .9rem; margin: 0; }
/* Bolinha sutil antes da descrição (mesma cor da descrição) — substitui a do título */
.page-sub::before {
    content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--clyvo-text-dim); margin-right: .5rem; vertical-align: .12em;
}

/* Banner de erro do Blazor — escondido por padrão em TODAS as telas (o scoped do MainLayout
   não cobria o AuthLayout, por isso aparecia nas telas de login). Tematizado no escuro. */
#blazor-error-ui {
    display: none;
    position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1080; box-sizing: border-box;
    padding: .65rem 1.25rem; background: var(--clyvo-card-2); color: var(--clyvo-text);
    border-top: 1px solid var(--clyvo-border-2); box-shadow: 0 -8px 24px rgba(0, 0, 0, .5);
}
#blazor-error-ui .reload { color: var(--clyvo-blue); }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .9rem; top: .5rem; color: var(--clyvo-text-dim); }

/* ---------- Botões ---------- */
.btn { border-radius: var(--clyvo-radius-sm); }
.btn-primary {
    --bs-btn-bg: var(--clyvo-accent); --bs-btn-border-color: var(--clyvo-accent);
    --bs-btn-hover-bg: var(--clyvo-accent-hover); --bs-btn-hover-border-color: var(--clyvo-accent-hover);
    --bs-btn-active-bg: var(--clyvo-accent-active); --bs-btn-active-border-color: var(--clyvo-accent-active);
    --bs-btn-disabled-bg: var(--clyvo-accent); --bs-btn-disabled-border-color: var(--clyvo-accent);
    --bs-btn-color: var(--clyvo-white); --bs-btn-hover-color: var(--clyvo-white); --bs-btn-active-color: var(--clyvo-white);
}
.btn-outline-primary {
    --bs-btn-color: var(--clyvo-accent); --bs-btn-border-color: var(--clyvo-accent);
    --bs-btn-hover-bg: var(--clyvo-accent); --bs-btn-hover-border-color: var(--clyvo-accent); --bs-btn-hover-color: var(--clyvo-white);
}
.btn-outline-secondary {
    --bs-btn-color: var(--clyvo-text-dim); --bs-btn-border-color: var(--clyvo-border);
    --bs-btn-hover-bg: var(--clyvo-card-2); --bs-btn-hover-border-color: var(--clyvo-border-2); --bs-btn-hover-color: var(--clyvo-text);
    --bs-btn-active-bg: var(--clyvo-card-2); --bs-btn-active-border-color: var(--clyvo-border-2);
}
.btn-outline-success {
    --bs-btn-color: var(--clyvo-green); --bs-btn-border-color: rgba(22, 163, 74, .45);
    --bs-btn-hover-bg: var(--clyvo-green); --bs-btn-hover-border-color: var(--clyvo-green); --bs-btn-hover-color: var(--clyvo-white);
}
.btn-outline-danger {
    --bs-btn-color: var(--clyvo-red); --bs-btn-border-color: rgba(239, 68, 68, .45);
    --bs-btn-hover-bg: var(--clyvo-red); --bs-btn-hover-border-color: var(--clyvo-red); --bs-btn-hover-color: var(--clyvo-white);
}
.btn-danger {
    --bs-btn-bg: var(--clyvo-red); --bs-btn-border-color: var(--clyvo-red);
    --bs-btn-hover-bg: #dc3030; --bs-btn-hover-border-color: #dc3030;
    --bs-btn-color: var(--clyvo-white); --bs-btn-hover-color: var(--clyvo-white);
}

/* ---------- Cards ---------- */
[data-bs-theme="light"] .card {
    --bs-card-bg: var(--clyvo-card); --bs-card-border-color: var(--clyvo-border);
    --bs-card-border-radius: var(--clyvo-radius); --bs-card-cap-bg: transparent;
    overflow: hidden; /* clipa a faixa azul do hover ao arredondamento da tabela em card */
}
[data-bs-theme="light"] .card .card-header {
    background: transparent; border-bottom-color: var(--clyvo-border);
    font-family: "Inter", system-ui, sans-serif; font-weight: 600; font-size: .95rem;
    letter-spacing: .01em; padding: .9rem 1.1rem;
    display: flex; align-items: center; gap: .55rem;
}
/* Bolinha preta antes do título: diferencia o cabeçalho da lista abaixo (desktop + mobile) */
[data-bs-theme="light"] .card .card-header::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--clyvo-accent); flex: none;
}
/* "Ver todos" (e afins) encostam à direita sem depender de justify-content-between */
[data-bs-theme="light"] .card .card-header .card-see-all { margin-left: auto; }
[data-bs-theme="light"] .list-group-item { background: transparent; border-color: var(--clyvo-border); }
[data-bs-theme="light"] .list-group-item-action { transition: background .12s ease, box-shadow .12s ease; }
[data-bs-theme="light"] .list-group-item-action:hover { background: var(--clyvo-card-2); box-shadow: inset 3px 0 0 var(--clyvo-accent); color: var(--clyvo-text); }
[data-bs-theme="light"] .table { --bs-table-bg: transparent; }

/* ---------- Suporte ---------- */
.support-channels .btn { justify-content: flex-start; text-align: left; padding: .6rem .9rem; }
.support-list { list-style: none; margin: 0; padding: 0; }
.support-list li { display: flex; flex-wrap: wrap; gap: .25rem .85rem; padding: .55rem 0; border-top: 1px solid var(--clyvo-border); font-size: .9rem; }
.support-list li:first-child { border-top: 0; padding-top: 0; }
.support-list .sl-k { color: var(--clyvo-text); font-weight: 600; min-width: 92px; flex: none; }
.support-list .sl-v { color: var(--clyvo-text-dim); }
/* Lista com bolinha por linha, na mesma cor do texto */
.support-dots { list-style: none; margin: 0; padding: 0; }
.support-dots li { position: relative; padding-left: 1.05rem; color: var(--clyvo-text-dim); font-size: .9rem; margin-bottom: .45rem; }
.support-dots li:last-child { margin-bottom: 0; }
.support-dots li::before {
    content: ""; position: absolute; left: 0; top: .5em; width: 5px; height: 5px;
    border-radius: 50%; background: currentColor;
}

/* ---------- Cards de métrica (dashboard) ---------- */
.clyvo-metric {
    display: block; text-decoration: none; height: 100%;
    background: var(--clyvo-card); border: 1px solid var(--clyvo-border); border-radius: var(--clyvo-radius);
    padding: 1.1rem 1.2rem;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.clyvo-metric:hover { border-color: #BBD3EA; background: var(--clyvo-card-2); transform: translateY(-2px); }
/* Cabeçalho: ícone + rótulo na mesma linha, com divisor abaixo */
.clyvo-metric .cm-head {
    display: flex; align-items: center; gap: .55rem;
    padding-bottom: .75rem; margin-bottom: .75rem; border-bottom: 1px solid var(--clyvo-border);
}
.clyvo-metric .ic {
    width: 30px; height: 30px; border-radius: 8px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
}
.clyvo-metric .ic svg { width: 16px; height: 16px; }
.clyvo-metric .ic-blue { background: var(--clyvo-sunken); color: var(--clyvo-text); }
.clyvo-metric .ic-red { background: rgba(239, 68, 68, .14); color: var(--clyvo-red); }
.clyvo-metric .ic-gray { background: var(--clyvo-sunken); color: var(--clyvo-text-dim); }
.clyvo-metric .lbl {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--clyvo-text-dim); font-weight: 600; line-height: 1.15;
}
.clyvo-metric .val {
    font-weight: 700; font-size: 1.95rem; line-height: 1;
    color: var(--clyvo-text); letter-spacing: -.01em;
}
.clyvo-metric .val.accent { color: var(--clyvo-accent); }
.clyvo-metric .val.danger { color: var(--clyvo-red); }

/* ---------- Tabelas ---------- */
.table-hover tbody tr { transition: background .12s ease, box-shadow .12s ease; }
.table-hover tbody tr:hover { background: var(--clyvo-card-2); box-shadow: inset 3px 0 0 var(--clyvo-accent); }
tr[data-href] { cursor: pointer; }
.table thead th {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--clyvo-text-dim); font-weight: 600;
    border-bottom: 1px solid var(--clyvo-border); padding: .8rem 1rem;
}
.table thead th .th-sort {
    display: inline-flex; align-items: center; gap: .3rem;
    color: inherit; text-decoration: none; cursor: pointer;
    text-transform: inherit; letter-spacing: inherit; font-weight: inherit;
}
.table thead th .th-sort:hover { color: var(--clyvo-text); }
.table thead th .th-arrow { font-size: .6rem; color: var(--clyvo-accent); line-height: 1; }
/* Última coluna: rótulo + reset de ordenação sempre à direita da linha */
.table thead th .th-actions { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.table thead th .th-reset { display: inline-flex; color: var(--clyvo-text-dim); line-height: 0; }
.table thead th .th-reset svg { width: 15px; height: 15px; }
.table thead th .th-reset:hover { color: var(--clyvo-text); }
.table tbody td { padding: .95rem 1rem; vertical-align: middle; border-color: var(--clyvo-card-2); }
.table tbody tr:last-child td { border-bottom: 0; }
.table a { color: var(--clyvo-text); text-decoration: none; font-weight: 500; }
.table a:hover { color: var(--clyvo-accent); }
.clyvo-row-overdue td:first-child { box-shadow: inset 3px 0 0 var(--clyvo-red); }
.clyvo-row-overdue .text-danger { color: var(--clyvo-red) !important; }
/* Atenção: vence dentro da janela de aviso (âmbar) */
.clyvo-row-duesoon td:first-child { box-shadow: inset 3px 0 0 var(--clyvo-amber); }
.clyvo-row-duesoon .text-warning { color: var(--clyvo-amber) !important; }
/* Botão só-ícone (ações compactas em tabela: concluir / reabrir) */
.clyvo-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; border-radius: 8px; cursor: pointer;
    background: transparent; border: 1px solid var(--clyvo-border); color: var(--clyvo-text-dim);
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.clyvo-icon-btn svg { width: 16px; height: 16px; }
.clyvo-icon-btn:hover { background: var(--clyvo-card-2); color: var(--clyvo-text); border-color: var(--clyvo-border-2); }

/* Item de lista por estado (dashboard — Tarefas de hoje) */
.list-group-item.clyvo-list-overdue { box-shadow: inset 3px 0 0 var(--clyvo-red); }
.list-group-item.clyvo-list-duesoon { box-shadow: inset 3px 0 0 var(--clyvo-amber); }
.clyvo-list-overdue .text-danger { color: var(--clyvo-red) !important; }
.clyvo-list-duesoon .text-warning { color: var(--clyvo-amber) !important; }

/* ---------- Badges de status (pill suave) ---------- */
.badge {
    font-weight: 600; font-size: .72rem; letter-spacing: .02em;
    padding: .35em .7em; border-radius: 999px; border: 1px solid transparent;
}
.badge.text-bg-success { background: rgba(22, 163, 74, .12) !important; color: #15803D !important; border-color: rgba(22, 163, 74, .3); }
.badge.text-bg-primary { background: rgba(16, 126, 210, .12) !important; color: #0C61A4 !important; border-color: rgba(16, 126, 210, .3); }
.badge.text-bg-info { background: rgba(16, 126, 210, .10) !important; color: #1D6CA8 !important; border-color: rgba(16, 126, 210, .22); }
.badge.text-bg-secondary { background: var(--clyvo-sunken) !important; color: var(--clyvo-text-dim) !important; border-color: var(--clyvo-border); }
.badge.text-bg-danger { background: rgba(239, 68, 68, .12) !important; color: #B91C1C !important; border-color: rgba(239, 68, 68, .3); }
.badge.text-bg-warning { background: rgba(217, 119, 6, .14) !important; color: #B45309 !important; border-color: rgba(217, 119, 6, .32); }
.badge.text-bg-light { background: var(--clyvo-sunken) !important; color: var(--clyvo-text-dim) !important; border-color: var(--clyvo-border); }

/* ---------- Planos (/subscribe) ---------- */
.clyvo-plan {
    display: flex; align-items: center; gap: .75rem;
    padding: .7rem .9rem; background: var(--clyvo-card); border: 1px solid var(--clyvo-border); border-radius: var(--clyvo-radius-sm);
}
/* cp-info estica e empurra preço+botão p/ a direita, juntos (nome à esquerda). */
.clyvo-plan .cp-info { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 0; }
.clyvo-plan .cp-top { display: flex; align-items: center; gap: .4rem; }
.clyvo-plan .cp-label { font-weight: 600; color: var(--clyvo-text); }
.clyvo-plan .cp-off { font-size: .7rem; color: var(--clyvo-green); font-weight: 700; white-space: nowrap; }
.clyvo-plan .cp-permonth { font-size: .72rem; color: var(--clyvo-text-faint); }
.clyvo-plan .cp-price { font-weight: 700; color: var(--clyvo-text); white-space: nowrap; }
.clyvo-plan .cp-old { text-decoration: line-through; color: var(--clyvo-text-faint); font-weight: 500; font-size: .82em; margin-right: .35rem; }
.clyvo-plan.is-featured { border-color: var(--clyvo-accent); }
/* A tela de assinatura precisa de mais largura que o auth-card padrão (420px do app.css): cada card de
   plano em 1 linha (nome+desconto / preço / botão) ocupa ~387px e estourava o container. 470px acomoda
   com folga, sem afetar login/registro (que continuam 420). No mobile o card já encolhe (não força 470). */
.auth-card.subscribe-card { max-width: 470px; }
/* Mobile estreito: o card de plano não cabe em 1 linha (nome+desconto+preço+botão) → empilha:
   info em cima (100%), preço+botão embaixo (botão à direita). Evita o "Estender" sair da tela. */
@media (max-width: 440px) {
    .clyvo-plan { flex-wrap: wrap; row-gap: .5rem; }
    .clyvo-plan .cp-info { flex-basis: 100%; } /* info ocupa a 1ª linha; preço+botão descem */
    .clyvo-plan > .btn { margin-left: auto; } /* só no mobile o botão precisa ser empurrado p/ a direita na 2ª linha */
}

/* Faixa "Preço de fundador" acima dos planos */
.cp-founder {
    text-align: center; margin: 0 0 .75rem; font-size: .72rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--clyvo-accent);
}

/* ---------- Alerts flat (translúcidos) — override por propriedade direta p/ vencer o Bootstrap ---------- */
.alert { border-radius: var(--clyvo-radius-sm); }
.alert-info { color: #1D6CA8; background-color: rgba(16, 126, 210, .08); border-color: rgba(16, 126, 210, .28); }
.alert-success { color: #15803D; background-color: rgba(22, 163, 74, .08); border-color: rgba(22, 163, 74, .28); }
.alert-warning { color: #B45309; background-color: rgba(217, 119, 6, .10); border-color: rgba(217, 119, 6, .30); }
.alert-danger { color: #B91C1C; background-color: rgba(239, 68, 68, .08); border-color: rgba(239, 68, 68, .28); }

/* Links de ação secundária (Voltar / Cancelar / Ver assinatura) em cinza, não azul */
.btn-link { --bs-btn-color: var(--clyvo-text-dim); --bs-btn-hover-color: var(--clyvo-text); color: var(--clyvo-text-dim); text-decoration: none; }
.btn-link:hover { color: var(--clyvo-text); text-decoration: underline; }

/* ---------- Paginador ---------- */
.clyvo-pager { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: 1rem; }
.clyvo-pager-btn {
    display: inline-flex; align-items: center; padding: .4rem .8rem; font-size: .85rem; font-weight: 500;
    color: var(--clyvo-text); text-decoration: none; background: var(--clyvo-card); border: 1px solid var(--clyvo-border); border-radius: var(--clyvo-radius-sm);
    transition: background .15s ease, border-color .15s ease;
}
.clyvo-pager-btn:hover { background: var(--clyvo-card-2); border-color: var(--clyvo-border-2); color: var(--clyvo-text); }
.clyvo-pager-btn.disabled { color: var(--clyvo-gray); pointer-events: none; opacity: .6; }
.clyvo-pager-info { font-size: .82rem; color: var(--clyvo-text-dim); }

/* "Ver todos" no topo-direita do cabeçalho dos cards do dashboard */
.card-see-all { font-size: .8rem; font-weight: 500; color: var(--clyvo-text-dim); text-decoration: none; white-space: nowrap; }
.card-see-all:hover { color: var(--clyvo-accent); }

/* ---------- Selos de assinatura (chip limpo: Pro / Teste / Assinar) ---------- */
.clyvo-pro, .clyvo-trial {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .72rem; font-weight: 700; letter-spacing: .02em;
    color: var(--clyvo-text); text-decoration: none; white-space: nowrap;
    padding: .2em .5em; border-radius: 6px;
    background: var(--clyvo-sunken); border: 1px solid var(--clyvo-border);
    transition: background .15s ease, border-color .15s ease;
}
.clyvo-pro:hover, .clyvo-trial:hover { background: var(--clyvo-card-2); border-color: var(--clyvo-border-2); color: var(--clyvo-text); }
.clyvo-pro .star { width: 12px; height: 12px; color: #FBBF24; flex: none; }
.clyvo-trial .ic { width: 12px; height: 12px; color: var(--clyvo-text-dim); flex: none; }

/* ---------- Status com bolinha (mais clean que o badge pill) ----------
   Paleta semântica ÚNICA do app (usar sempre estas 5, com texto ao lado):
     verde  = bom / concluído / ativo
     azul   = ativo / em andamento (Lead também)
     âmbar  = pendente / atenção (Proposta, "vence em breve")
     cinza  = inativo / cancelado / neutro
     vermelho = RESERVADO p/ urgência/perigo (vencido, exclusão) — nunca uma etapa de ciclo de vida */
.clyvo-status { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; color: var(--clyvo-text); white-space: nowrap; }
.clyvo-status .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot-green { background: var(--clyvo-green); }
.dot-blue { background: var(--clyvo-blue); }
.dot-amber { background: var(--clyvo-amber); }
.dot-gray { background: var(--clyvo-gray); }
.dot-red { background: var(--clyvo-red); }

/* ---------- Vínculo (cliente/projeto) em lista — cliente + projeto na MESMA linha, com ícone ---------- */
.clyvo-vinculo { display: flex; flex-flow: row wrap; align-items: center; gap: .15rem 1.25rem; }
.clyvo-vinculo .cv-row { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--clyvo-text-dim); max-width: 260px; }
.clyvo-vinculo .cv-row svg { width: 13px; height: 13px; flex: none; color: var(--clyvo-text-faint); }
.clyvo-vinculo .cv-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clyvo-vinculo .cv-empty { color: var(--clyvo-text-faint); }

/* ---------- Gráficos do dashboard (CSS/SVG puro, sem lib) ---------- */
/* Rosca (donut) — valor do pipeline por etapa */
.clyvo-donut { width: 132px; height: 132px; position: relative; flex: none; }
.clyvo-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.clyvo-donut circle { fill: none; stroke-width: 12; }
.clyvo-donut .track { stroke: var(--clyvo-sunken); }
.clyvo-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 .5rem; }
.clyvo-donut-center .v { font-weight: 700; font-size: .92rem; color: var(--clyvo-text); letter-spacing: -.01em; line-height: 1.1; }
.clyvo-donut-center .l { font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; color: var(--clyvo-text-faint); margin-top: .1rem; }

/* Legenda compartilhada (rosca + barra) */
.clyvo-legend { display: flex; flex-direction: column; gap: .55rem; }
.clyvo-legend .lg-row { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.clyvo-legend .lg-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.clyvo-legend .lg-name { color: var(--clyvo-text-dim); }
.clyvo-legend .lg-val { margin-left: auto; font-weight: 600; color: var(--clyvo-text); }

/* Barra segmentada — projetos por status */
.clyvo-segbar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--clyvo-sunken); }
.clyvo-segbar > span { display: block; height: 100%; }

/* ---------- Gráfico de linha (faturamento por mês) ---------- */
.clyvo-linechart { position: relative; height: 190px; }
.clyvo-linechart .lc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.clyvo-linechart .lc-base { stroke: var(--clyvo-border); stroke-width: 1; }
.clyvo-linechart .lc-line { fill: none; stroke: var(--clyvo-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.clyvo-linechart .lc-mark {
    position: absolute; width: 9px; height: 9px; border-radius: 50%;
    background: var(--clyvo-card); border: 2px solid var(--clyvo-accent);
    transform: translate(-50%, -50%);
}
/* Balão preto com o valor (em branco) acima de cada ponto não-zero. */
.clyvo-linechart .lc-label {
    position: absolute; transform: translate(-50%, -135%); pointer-events: none;
    background: var(--clyvo-accent); color: #fff; white-space: nowrap;
    font-size: .62rem; font-weight: 700; line-height: 1;
    padding: .22rem .42rem; border-radius: 6px;
}
.lc-axis { display: flex; justify-content: space-between; margin: .45rem 6% 0; }
.lc-axis span { font-size: .7rem; color: var(--clyvo-text-faint); }
.lc-foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--clyvo-border); }
.lc-foot .lc-total { font-weight: 700; font-size: 1.1rem; color: var(--clyvo-text); letter-spacing: -.01em; }

/* ---------- Funil & a receber ---------- */
.clyvo-funnel { display: flex; flex-direction: column; gap: .8rem; }
.clyvo-funnel .fn-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .35rem; }
.clyvo-funnel .fn-name { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; color: var(--clyvo-text); }
.clyvo-funnel .fn-meta { font-size: .8rem; color: var(--clyvo-text-dim); }
.clyvo-funnel .fn-bar { display: block; height: 8px; border-radius: 999px; background: var(--clyvo-sunken); overflow: hidden; }
.clyvo-funnel .fn-fill { display: block; height: 100%; border-radius: inherit; }
.fn-winrate { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--clyvo-border); font-size: .85rem; color: var(--clyvo-text); }

/* ---------- Barra de progresso (projetos) ---------- */
.clyvo-progress-wrap { display: inline-flex; align-items: center; gap: .55rem; }
.clyvo-progress { display: inline-block; width: 96px; height: 6px; border-radius: 999px; background: var(--clyvo-sunken); overflow: hidden; }
.clyvo-progress-bar { display: block; height: 100%; background: var(--clyvo-accent); border-radius: inherit; }
.clyvo-progress-val { font-size: .78rem; font-weight: 600; color: var(--clyvo-text-dim); min-width: 32px; }
/* Barra de largura total (painel "Projetos ativos" do dashboard) */
.clyvo-progress.ap-bar { display: block; width: 100%; }

/* ---------- Nome do cliente com ícone (padrão único: lembretes, dashboard) ---------- */
.clyvo-client-tag { display: inline-flex; align-items: center; gap: .35rem; color: var(--clyvo-text-dim); font-size: .82rem; min-width: 0; }
.clyvo-client-tag svg { width: 13px; height: 13px; flex: none; color: var(--clyvo-text-faint); }
.clyvo-client-tag > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Anel de progresso + % ao lado (cards do pipeline) ----------
   Anel via conic-gradient + máscara radial (sem SVG): renderiza suave em tamanho pequeno
   e alinha sozinho. Preenche do topo, sentido horário, conforme --ring-pct (0–100). */
.clyvo-ring-wrap { display: inline-flex; align-items: center; gap: .3rem; flex: none; }
.clyvo-ring { width: 16px; height: 16px; flex: none; }
.clyvo-ring svg { display: block; width: 100%; height: 100%; }   /* display:block tira o gap de baseline (alinhamento) */
.clyvo-ring circle { fill: none; stroke-width: 3; }
.clyvo-ring .cr-track { stroke: var(--clyvo-border); }
.clyvo-ring .cr-bar { stroke: var(--clyvo-accent); stroke-linecap: round; }   /* rotação via atributo SVG no <circle>, não CSS — vetor, sem serrilhado */
.clyvo-ring-wrap .ring-pct { font-size: .72rem; font-weight: 700; color: var(--clyvo-text); line-height: 1; }

/* ---------- Avatar de iniciais (clientes) ---------- */
.clyvo-cell-client { display: inline-flex; align-items: center; gap: .6rem; }
.clyvo-avatar {
    width: 28px; height: 28px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--clyvo-sunken); color: var(--clyvo-text-dim);
    font-size: .72rem; font-weight: 600; letter-spacing: .02em;
}

/* ---------- Inputs / formulários ---------- */
[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select {
    background: var(--clyvo-sunken); border-color: var(--clyvo-border); color: var(--clyvo-text);
    border-radius: var(--clyvo-radius-sm); padding: .55rem .75rem;
}
[data-bs-theme="light"] .form-control:focus,
[data-bs-theme="light"] .form-select:focus {
    background: var(--clyvo-card); border-color: var(--clyvo-accent); box-shadow: 0 0 0 3px rgba(24, 24, 27, .12);
}
[data-bs-theme="light"] .form-control::placeholder { color: var(--clyvo-text-faint); }
[data-bs-theme="light"] .form-control:disabled { background: var(--clyvo-sunken); color: var(--clyvo-text-faint); }
.form-label { font-size: .82rem; font-weight: 500; color: var(--clyvo-text-dim); margin-bottom: .35rem; }
.form-text { color: var(--clyvo-text-faint); font-size: .78rem; }

/* ---------- Abas ---------- */
.clyvo-tabs {
    display: inline-flex; gap: .25rem; background: var(--clyvo-sunken); border: 1px solid var(--clyvo-border);
    border-radius: var(--clyvo-radius-sm); padding: .25rem;
}
.clyvo-tabs .clyvo-tab {
    border: 0; background: transparent; color: var(--clyvo-text-dim); font-size: .85rem; font-weight: 500;
    padding: .4rem .85rem; border-radius: 6px; text-decoration: none; transition: background .12s, color .12s;
}
.clyvo-tabs .clyvo-tab:hover { color: var(--clyvo-text); }
.clyvo-tabs .clyvo-tab.active { background: var(--clyvo-active-surface); color: var(--clyvo-active-text); }

/* ---------- Página de detalhe (somente leitura) ---------- */
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 1.5rem; }
.detail-item { padding: .6rem 0; border-bottom: 1px solid var(--clyvo-card-2); }
.detail-item .k { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--clyvo-text-dim); font-weight: 600; }
.detail-item .v { color: var(--clyvo-text); margin-top: .15rem; word-break: break-word; }
.detail-item .v a { color: var(--clyvo-accent); text-decoration: none; }
.detail-item.full { grid-column: 1 / -1; }
@media (max-width: 560px) { .detail-grid { grid-template-columns: 1fr; } }

/* ---------- Zona de perigo (Minha conta) ---------- */
/* Zona de perigo calma: card neutro como os demais; vermelho fica só no botão Excluir. */
.clyvo-danger-zone { border-color: var(--clyvo-border) !important; background: var(--clyvo-card); }
.clyvo-danger-zone .form-text { color: var(--clyvo-text-dim); }

/* ---------- Shell (sidebar + main) ---------- */
.cs-toggle-input { display: none; }
.clyvo-shell { position: relative; z-index: 1; display: flex; min-height: 100vh; }

.clyvo-sidebar {
    width: 240px; flex: none; display: flex; flex-direction: column;
    border-right: 1px solid var(--clyvo-border); background: var(--clyvo-sidebar);
    position: sticky; top: 0; height: 100vh;
}
/* Topo da sidebar preenchido de preto: o logo (branco+azul) aparece sobre ele. */
.cs-head { height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 1.25rem; background: #0d0d0e; border-bottom: 1px solid var(--clyvo-border); }
.cs-logo { display: inline-flex; align-items: center; }
.cs-logo img { height: 40px; display: block; }
/* Botão de fechar a sidebar (só no celular, junto da logo). */
/* Botão fechar fica sobre o topo preto (mobile) → cores claras fixas. */
.cs-close { display: none; align-items: center; justify-content: center; color: #A3A3A3; cursor: pointer; padding: 6px; margin-right: -6px; }
.cs-close:hover { color: #fff; }
.cs-close svg { width: 22px; height: 22px; }
/* Backdrop: cobre o conteúdo quando a sidebar abre no celular; tocar fecha. */
.cs-backdrop { display: none; }
.cs-nav { flex: 1; padding: .75rem; display: flex; flex-direction: column; gap: .2rem; overflow-y: auto; }
.clyvo-nav-item {
    position: relative; display: flex; align-items: center; gap: .7rem;
    padding: .6rem .8rem; border-radius: var(--clyvo-radius-sm);
    font-size: .9rem; font-weight: 500; color: var(--clyvo-text-dim); text-decoration: none;
    transition: background .15s, color .15s;
}
.clyvo-nav-item:hover { background: var(--clyvo-card-2); color: var(--clyvo-text); }
.clyvo-nav-item.active { background: var(--clyvo-active-surface); color: var(--clyvo-active-text); font-weight: 600; }
.clyvo-nav-item.active::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: var(--clyvo-accent);
}
.clyvo-nav-item .ico { width: 18px; height: 18px; flex: none; }
.clyvo-nav-item.active .ico { color: var(--clyvo-accent); }
.cs-bottom { padding: .75rem; border-top: 1px solid var(--clyvo-border); }
.cs-user { display: flex; flex-direction: column; gap: .5rem; }
.cs-user-name { font-size: .85rem; font-weight: 600; color: var(--clyvo-text); padding: 0 .25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.clyvo-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.clyvo-content { flex: 1; min-width: 0; padding: 1.75rem; }
/* Conteúdo num container centralizado. Cap em 1440 (era 1180): mais aproveitamento em
   monitores ≥1920 sem deixar a tabela larga demais p/ ler em ultrawide/4K. */
.clyvo-container { width: 100%; max-width: 1440px; margin: 0 auto; }

/* Topbar só no mobile (abriga o ☰); no desktop o conteúdo começa no topo. */
.clyvo-topbar {
    height: 52px; flex: none; display: none; align-items: center; gap: .6rem;
    padding: 0 1.25rem; border-bottom: 1px solid var(--clyvo-border); background: var(--clyvo-sidebar);
}
.clyvo-topbar .cs-menu { display: none; margin-right: auto; background: none; border: 0; color: var(--bs-body-color); font-size: 1.4rem; cursor: pointer; line-height: 1; }

/* resíduos do tema claro */
.auth-card { background: var(--clyvo-card); border-color: var(--clyvo-border) !important; }

/* ---------- Auth (telas públicas sem sidebar: login/register/forgot/reset/resend/confirm) ---------- */
.auth-shell { position: relative; z-index: 1; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.auth-shell-inner { width: 100%; max-width: 420px; }
/* Card de auth com faixa preta no topo: o próprio título (h1) é a faixa, com o logo à esquerda
   e o texto em branco. Vale p/ todas as telas públicas (login/register/forgot/...). */
.auth-card { padding: 0 2rem 2rem; overflow: hidden; }
.auth-card > h1:first-child {
    display: flex; align-items: center; justify-content: space-between; gap: .7rem;
    margin: 0 -2rem 1.5rem; padding: 1.05rem 2rem;
    background: #0d0d0e; color: #fff;
    border-radius: .5rem .5rem 0 0;
    font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em;
}
/* Título à esquerda, logo à direita (no fim da faixa). */
.auth-card > h1:first-child::after {
    content: ""; flex: none; width: 74px; height: 30px;
    background: url("/brand/clyvo-logo.png") no-repeat right center / contain;
}
/* Faixa preta com logo no topo do card (ex.: tela Clyvo Pro / estender plano). */
.auth-card .clyvo-card-head {
    display: flex; align-items: center; justify-content: center;
    margin: 0 -2rem 1.5rem; padding: 1.15rem 2rem;
    background: #0d0d0e; border-radius: .5rem .5rem 0 0;
}
.auth-card .clyvo-card-head img { height: 30px; display: block; }
.auth-shell .auth-card { width: 100%; max-width: none; margin: 0; }
/* Links auxiliares e ação alternativa abaixo do formulário */
.auth-card .auth-links { display: flex; flex-direction: column; gap: .55rem; margin-top: 1.25rem; font-size: .9rem; }
.auth-card .auth-alt { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--clyvo-border); color: var(--clyvo-text-dim); font-size: .9rem; }

/* ---------- Pipeline (kanban) ---------- */
.pipeline-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; align-items: start; }
.pipeline-col-wrapper { min-width: 0; }
.pipeline-col-header {
    display: flex; align-items: center; justify-content: space-between;
    font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--clyvo-text-dim); font-weight: 600; margin-bottom: .5rem; padding: 0 .15rem;
}
.pipeline-col-header .pc-title { display: inline-flex; align-items: center; }
.pipeline-col-header .pc-dot { width: 8px; height: 8px; border-radius: 50%; margin-right: .45rem; flex: none; }
.pipeline-col-header .pc-meta { display: inline-flex; align-items: center; gap: .4rem; }
.pipeline-col-header .pc-sum { font-size: .68rem; color: var(--clyvo-text-faint); font-weight: 600; letter-spacing: 0; }
.pipeline-column {
    background: var(--clyvo-sunken); border: 1px solid var(--clyvo-border); border-radius: var(--clyvo-radius);
    padding: .6rem; min-height: 80px; display: flex; flex-direction: column; gap: .5rem;
}
.pipeline-card {
    position: relative;
    background: var(--clyvo-card); border: 1px solid var(--clyvo-border); border-left: 3px solid var(--clyvo-gray);
    border-radius: var(--clyvo-radius-sm); margin: 0;
    transition: border-color .15s ease, background .15s, transform .12s ease;
}
/* Alça de arrastar — SÓ em telas touch (no PC arrasta o card inteiro, alça escondida).
   Fica ABAIXO do anel de progresso (que ocupa o topo-direito do card). */
.pc-grip {
    position: absolute; top: 36px; right: 6px; z-index: 2;
    display: none; padding: 4px; color: var(--clyvo-gray); cursor: grab;
    touch-action: none; -webkit-user-select: none; user-select: none;
}
.pc-grip:hover { color: var(--clyvo-text-dim); }
.pc-grip svg { width: 16px; height: 16px; }
.pc-grip:active { cursor: grabbing; }
@media (pointer: coarse) { .pc-grip { display: inline-flex; } }
.pipeline-card:hover { transform: translateY(-1px); background: var(--clyvo-card-2); border-color: var(--clyvo-border-2); }
/* Barra lateral pela ETAPA (coluna pai) — ao arrastar, a cor acompanha sozinha */
.pipeline-column[data-status="Proposal"] .pipeline-card { border-left-color: var(--clyvo-amber); }
.pipeline-column[data-status="InProgress"] .pipeline-card { border-left-color: var(--clyvo-blue); }
.pipeline-column[data-status="Completed"] .pipeline-card { border-left-color: var(--clyvo-green); }
.pipeline-column[data-status="Cancelled"] .pipeline-card { border-left-color: var(--clyvo-gray); }
.pipeline-card .card-body { padding: .7rem .75rem; }
.pipeline-card .pc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.pipeline-card .pc-name { display: block; color: var(--clyvo-text); font-size: .88rem; font-weight: 600; text-decoration: none; }
.pipeline-card .pc-name:hover { color: var(--clyvo-accent); }
.pipeline-card .pc-client { color: var(--clyvo-text-dim); font-size: .78rem; margin-top: .12rem; }
.pipeline-card .pc-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .6rem; }
.pipeline-card .pc-value { color: var(--clyvo-text); font-weight: 600; font-size: .82rem; }
.pipeline-card .pc-date { display: inline-flex; align-items: center; gap: .25rem; color: var(--clyvo-text-faint); font-size: .72rem; white-space: nowrap; }
.pipeline-card .pc-date svg { width: 12px; height: 12px; }
.pipeline-card-ghost { opacity: .5; }
/* Clone que segue o dedo (forceFallback): sem transição (senão o transform anima e fica lento) e acima de tudo. */
.pipeline-card.sortable-fallback {
    opacity: .97 !important; transition: none !important;
    box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .22);
}
/* Evita seleção de texto/callout ao segurar o card no celular. */
.pipeline-card .pc-name, .pipeline-card .pc-client, .pipeline-card .pc-foot { -webkit-user-select: none; user-select: none; }
@media (max-width: 900px) { .pipeline-board { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pipeline-board { grid-template-columns: 1fr; } }

/* ---------- Toast de sucesso (flutuante, auto-some) ---------- */
.clyvo-toast {
    position: fixed; top: 1rem; right: 1rem; z-index: 1080;
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .6rem .9rem; font-size: .875rem; font-weight: 500; color: var(--clyvo-text);
    background: var(--clyvo-card); border: 1px solid var(--clyvo-border); border-left: 3px solid var(--clyvo-green);
    border-radius: var(--clyvo-radius-sm); box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .18);
    animation: clyvo-toast-in .18s ease-out, clyvo-toast-out .3s ease-in 3.6s forwards;
}
.clyvo-toast .ic { width: 16px; height: 16px; color: var(--clyvo-green); flex: none; }
@keyframes clyvo-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes clyvo-toast-out { to { opacity: 0; transform: translateY(-8px); visibility: hidden; } }
@media (max-width: 520px) { .clyvo-toast { left: 1rem; right: 1rem; justify-content: center; } }

/* ---------- Mobile ---------- */
@media (max-width: 820px) {
    .clyvo-sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 60; transform: translateX(-100%); transition: transform .2s ease; }
    .cs-toggle-input:checked ~ .clyvo-shell .clyvo-sidebar { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .18); }
    .clyvo-topbar { display: flex; }
    .clyvo-topbar .cs-menu { display: inline-block; }
    .clyvo-content { padding: 1.25rem; }
    .cs-close { display: inline-flex; }
    .cs-toggle-input:checked ~ .clyvo-shell .cs-backdrop {
        display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .5);
    }
}

/* ---------- Tabela vira cards no celular (.clyvo-stack-sm) ---------- */
@media (max-width: 640px) {
    .clyvo-stack-sm thead { display: none; }
    .clyvo-stack-sm, .clyvo-stack-sm tbody { display: block; width: 100%; }
    .clyvo-stack-sm tbody tr {
        display: block; position: relative;
        padding: .85rem 1rem .85rem 1.1rem; border-bottom: 1px solid var(--clyvo-card-2);
    }
    .clyvo-stack-sm tbody tr:last-child { border-bottom: 0; }
    .clyvo-stack-sm tbody td { display: block; padding: .1rem 0; border: 0; white-space: normal; }
    .clyvo-stack-sm tbody td:empty { display: none; }
    .clyvo-stack-sm tbody td[data-label]::before {
        content: attr(data-label) ": ";
        color: var(--clyvo-text-faint); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
    }
    .clyvo-stack-sm tbody td.cell-title { font-size: 1rem; font-weight: 600; padding-right: 44px; margin-bottom: .15rem; }
    .clyvo-stack-sm tbody td.cell-action { position: absolute; top: .7rem; right: .7rem; padding: 0; }
    /* No mobile a barra de estado vai na linha inteira (no desktop fica no td:first-child). */
    .clyvo-stack-sm tbody tr.clyvo-row-overdue { box-shadow: inset 3px 0 0 var(--clyvo-red); }
    .clyvo-stack-sm tbody tr.clyvo-row-duesoon { box-shadow: inset 3px 0 0 var(--clyvo-amber); }
    .clyvo-stack-sm tbody tr.clyvo-row-overdue td:first-child,
    .clyvo-stack-sm tbody tr.clyvo-row-duesoon td:first-child { box-shadow: none; }
}

/* ---------- Celular: botões "Novo X" viram só o ícone (+) + espaçamento mais justo ---------- */
@media (max-width: 560px) {
    /* Economiza espaço no cabeçalho: o "+" basta (title/aria-label preservam o texto) */
    .clyvo-add-btn { padding-inline: .55rem; gap: 0; }
    .clyvo-add-btn .add-label { display: none; }
    /* Menos respiro lateral e título um tico menor p/ ganhar largura útil no telefone */
    .clyvo-content { padding: 1rem; }
    .page-title { font-size: 1.4rem; }
}