/* =============================================================
 * design-refresh.css
 *
 * Camada de ajustes visuais do rebrand Kontta.AI 2026-04
 * (novo design system importado de claude.ai/design).
 *
 * Este arquivo é carregado DEPOIS de style.css, por isso
 * sobrescreve as regras existentes sem precisar editar o
 * style.css principal (4k+ LOC).
 *
 * Conteúdo:
 *   1) Brand marks em sidebar e topbar
 *   2) Sidebar item — pill gradient + hover slide + pulse no ativo
 *   3) Metric cards — entrada cinematográfica (shimmer + ring pulse)
 * ============================================================= */

/* ----- 1. BRAND MARKS ---------------------------------------- */

.sidebar__brand-mark {
    width: 28px;
    height: 28px;
    display: block;
    flex-shrink: 0;
}

.topbar__brand-mark {
    width: 22px;
    height: 22px;
    display: block;
    flex-shrink: 0;
}

/* Quando o sidebar está colapsado, garante que a marca continua centralizada */
html[data-sidebar="collapsed"] .sidebar__brand-mark {
    margin: 0 auto;
}

/* ----- 2. SIDEBAR ITEM (pill gradient + hover slide + pulse) -- */
/*
 * Mantém toda a estrutura/markup existente (.sidebar__item /
 * .is-active / .sidebar__badge). Só refina o visual de repouso,
 * hover e ativo com um pill flutuante em vez da aba tradicional.
 */

.sidebar__item {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition:
        color 180ms cubic-bezier(.2, .7, .2, 1),
        background-color 180ms cubic-bezier(.2, .7, .2, 1),
        transform 180ms cubic-bezier(.2, .7, .2, 1);
}

/* Preenchimento azul-claro que desliza da esquerda ao passar o mouse */
.sidebar__item::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(37, 99, 235, 0.08);
    transform: translateX(-6%);
    opacity: 0;
    transition:
        opacity 200ms cubic-bezier(.2, .7, .2, 1),
        transform 260ms cubic-bezier(.2, .7, .2, 1);
    pointer-events: none;
    z-index: -1;
}

.sidebar__item:hover::before {
    opacity: 1;
    transform: translateX(0);
}

.sidebar__item:hover i {
    color: #2563eb;
    transform: scale(1.08);
    transition: color 180ms cubic-bezier(.2, .7, .2, 1),
                transform 240ms cubic-bezier(.2, .7, .2, 1);
}

.sidebar__item:hover .sidebar__label {
    transform: translateX(2px);
    transition: transform 240ms cubic-bezier(.2, .7, .2, 1);
}

/* Estado ativo — pill flutuante com gradient + bolinha pulsante */
.sidebar__item.is-active {
    color: #1d4ed8;
    font-weight: 600;
    background: linear-gradient(180deg, #eef4ff, #e0ebff);
    box-shadow:
        inset 0 0 0 1px rgba(37, 99, 235, 0.10),
        0 6px 14px rgba(37, 99, 235, 0.10);
}

.sidebar__item.is-active i {
    color: #2563eb;
}

/* Bolinha pulsante no canto direito do item ativo */
.sidebar__item.is-active::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
    transform: translateY(-50%);
    animation: kontta-pulse 2.4s cubic-bezier(.2, .7, .2, 1) infinite;
    pointer-events: none;
}

/* Se o item ativo tem badge, ajusta a posição da bolinha pra não
   sobrepor (esconde a bolinha — o badge já chama atenção). */
.sidebar__item.is-active:has(.sidebar__badge)::after {
    display: none;
}

@keyframes kontta-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18); }
    50%      { box-shadow: 0 0 0 7px rgba(37, 99, 235, 0.04); }
}

/* Dark mode — mantém o contraste */
html[data-theme="dark"] .sidebar__item.is-active {
    color: #93c5fd;
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.18), rgba(37, 99, 235, 0.10));
    box-shadow:
        inset 0 0 0 1px rgba(147, 197, 253, 0.20),
        0 6px 14px rgba(37, 99, 235, 0.25);
}

html[data-theme="dark"] .sidebar__item.is-active i {
    color: #93c5fd;
}

html[data-theme="dark"] .sidebar__item.is-active::after {
    background: #93c5fd;
    box-shadow: 0 0 0 4px rgba(147, 197, 253, 0.22);
}

html[data-theme="dark"] .sidebar__item::before {
    background: rgba(147, 197, 253, 0.08);
}

/* Respeita prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .sidebar__item,
    .sidebar__item::before,
    .sidebar__item:hover i,
    .sidebar__item:hover .sidebar__label {
        transition: none;
        transform: none;
        animation: none;
    }
    .sidebar__item.is-active::after {
        animation: none;
    }
}

/* ----- 3. METRIC CARDS — ENTRADA CINEMATOGRÁFICA --------------- */
/*
 * Aplica animação de entrada nos cards do dashboard quando a
 * página carrega. O count-up dos valores já existe em base.html
 * via animateCounter(); aqui adicionamos:
 *   - fade+lift escalonado com easing back (overshoot leve)
 *   - shimmer que cruza o card uma vez
 *   - entrada rotacional do ícone + ring pulse depois
 *   - delta entra por último, de baixo pra cima
 *
 * Opcional via classe .metric-grid--animate no container — se o
 * template não quiser a animação, basta não adicionar a classe.
 * Para ligar globalmente, o dashboard index.html recebe a classe.
 */

.metric-grid--animate .metric-card {
    position: relative;
    isolation: isolate;
    opacity: 0;
    transform: translateY(14px);
    animation: kontta-card-in 700ms cubic-bezier(.18, .89, .32, 1.28) forwards;
    overflow: hidden;
}

.metric-grid--animate .metric-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
        transparent 35%,
        rgba(37, 99, 235, 0.10) 50%,
        transparent 65%);
    transform: translateX(-120%);
    pointer-events: none;
    z-index: 0;
    animation: kontta-shimmer 1100ms cubic-bezier(.2, .7, .2, 1) 180ms 1;
}

.metric-grid--animate .metric-card > * {
    position: relative;
    z-index: 1;
}

/* Stagger via nth-child — funciona até 6 cards */
.metric-grid--animate .metric-card:nth-child(1) { animation-delay: 0ms; }
.metric-grid--animate .metric-card:nth-child(1)::after { animation-delay: 180ms; }
.metric-grid--animate .metric-card:nth-child(2) { animation-delay: 120ms; }
.metric-grid--animate .metric-card:nth-child(2)::after { animation-delay: 300ms; }
.metric-grid--animate .metric-card:nth-child(3) { animation-delay: 240ms; }
.metric-grid--animate .metric-card:nth-child(3)::after { animation-delay: 420ms; }
.metric-grid--animate .metric-card:nth-child(4) { animation-delay: 360ms; }
.metric-grid--animate .metric-card:nth-child(4)::after { animation-delay: 540ms; }
.metric-grid--animate .metric-card:nth-child(5) { animation-delay: 480ms; }
.metric-grid--animate .metric-card:nth-child(5)::after { animation-delay: 660ms; }
.metric-grid--animate .metric-card:nth-child(6) { animation-delay: 600ms; }
.metric-grid--animate .metric-card:nth-child(6)::after { animation-delay: 780ms; }

@keyframes kontta-card-in {
    0%   { opacity: 0; transform: translateY(14px); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes kontta-shimmer {
    to { transform: translateX(120%); }
}

/* Ícone: entra rotacionando + pulsa um anel ao final */
.metric-grid--animate .metric-card__icon {
    position: relative;
    transform: scale(.6) rotate(-8deg);
    opacity: 0;
    animation: kontta-icon-in 600ms cubic-bezier(.18, .89, .32, 1.28) 220ms forwards;
}

.metric-grid--animate .metric-card:nth-child(1) .metric-card__icon { animation-delay: 220ms; }
.metric-grid--animate .metric-card:nth-child(2) .metric-card__icon { animation-delay: 340ms; }
.metric-grid--animate .metric-card:nth-child(3) .metric-card__icon { animation-delay: 460ms; }
.metric-grid--animate .metric-card:nth-child(4) .metric-card__icon { animation-delay: 580ms; }
.metric-grid--animate .metric-card:nth-child(5) .metric-card__icon { animation-delay: 700ms; }
.metric-grid--animate .metric-card:nth-child(6) .metric-card__icon { animation-delay: 820ms; }

.metric-grid--animate .metric-card__icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid currentColor;
    opacity: 0;
    pointer-events: none;
    animation: kontta-ring 900ms cubic-bezier(.2, .7, .2, 1) 900ms 1;
}

.metric-grid--animate .metric-card:nth-child(1) .metric-card__icon::after { animation-delay: 900ms; }
.metric-grid--animate .metric-card:nth-child(2) .metric-card__icon::after { animation-delay: 1020ms; }
.metric-grid--animate .metric-card:nth-child(3) .metric-card__icon::after { animation-delay: 1140ms; }
.metric-grid--animate .metric-card:nth-child(4) .metric-card__icon::after { animation-delay: 1260ms; }
.metric-grid--animate .metric-card:nth-child(5) .metric-card__icon::after { animation-delay: 1380ms; }
.metric-grid--animate .metric-card:nth-child(6) .metric-card__icon::after { animation-delay: 1500ms; }

@keyframes kontta-icon-in {
    to { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes kontta-ring {
    0%   { transform: scale(1);   opacity: .45; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* Delta entra por último, de baixo pra cima */
.metric-grid--animate .metric-card__delta {
    opacity: 0;
    transform: translateY(4px);
    animation: kontta-delta-in 500ms cubic-bezier(.2, .7, .2, 1) 700ms forwards;
}

.metric-grid--animate .metric-card:nth-child(1) .metric-card__delta { animation-delay: 700ms; }
.metric-grid--animate .metric-card:nth-child(2) .metric-card__delta { animation-delay: 820ms; }
.metric-grid--animate .metric-card:nth-child(3) .metric-card__delta { animation-delay: 940ms; }
.metric-grid--animate .metric-card:nth-child(4) .metric-card__delta { animation-delay: 1060ms; }
.metric-grid--animate .metric-card:nth-child(5) .metric-card__delta { animation-delay: 1180ms; }
.metric-grid--animate .metric-card:nth-child(6) .metric-card__delta { animation-delay: 1300ms; }

@keyframes kontta-delta-in {
    to { opacity: 1; transform: translateY(0); }
}

/* Respeita prefers-reduced-motion — remove todas as animações do dashboard */
@media (prefers-reduced-motion: reduce) {
    .metric-grid--animate .metric-card,
    .metric-grid--animate .metric-card::after,
    .metric-grid--animate .metric-card__icon,
    .metric-grid--animate .metric-card__icon::after,
    .metric-grid--animate .metric-card__delta {
        animation: none;
        opacity: 1;
        transform: none;
    }
}