/* ==========================================================================
   Home v2 — layout grid + section composition
   Carregado quando window.HOME_V2_ENABLED is true.
   Tokens e componentes .lg-* vêm de styles.css.
   ========================================================================== */

#home-view-v2.home-v2 {
    padding: 1.5rem 1rem 4rem;
    min-height: calc(100vh - 70px);
}

/* --- Topbar (logo space + pill nav + actions/avatars) --- */
.home-v2 .home-v2__topbar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.5rem;
    align-items: center;
    padding: 0.5rem 0.5rem 1.5rem;
    flex-wrap: wrap;
}
.home-v2 .home-v2__topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--lg-text-primary);
}
.home-v2 .home-v2__topbar-brand .lg-logo-mark {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    background: var(--lg-bg-invert);
    color: var(--lg-text-on-invert);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
}
.home-v2 .home-v2__topbar-nav {
    justify-self: center;
}
.home-v2 .home-v2__topbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    justify-self: end;
}

/* --- Hero header (breadcrumb + title + chip cluster) --- */
.home-v2 .home-v2__hero {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 1.5rem;
    margin: 1.5rem 0 2rem;
    padding: 0 0.5rem;
}
.home-v2 .home-v2__hero-text { min-width: 0; }
.home-v2 .home-v2__hero-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* --- Main grid --- */
.home-v2 .home-v2__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.25rem;
    padding: 0 0.5rem;
}

/* Card spanning helpers */
.home-v2 .span-3  { grid-column: span 3; }
.home-v2 .span-4  { grid-column: span 4; }
.home-v2 .span-5  { grid-column: span 5; }
.home-v2 .span-6  { grid-column: span 6; }
.home-v2 .span-7  { grid-column: span 7; }
.home-v2 .span-8  { grid-column: span 8; }
.home-v2 .span-12 { grid-column: span 12; }

/* Card-specific layouts */
.home-v2 .lg-card--hero-image {
    min-height: 26rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background:
        linear-gradient(180deg, rgba(244,244,242,0.0) 60%, rgba(244,244,242,0.85) 100%),
        radial-gradient(120% 80% at 60% 30%, #C5E83C 0%, #9FB825 35%, #1f2d05 100%);
}
[data-theme="dark"] .home-v2 .lg-card--hero-image {
    background:
        linear-gradient(180deg, rgba(22,22,22,0.0) 60%, rgba(22,22,22,0.85) 100%),
        radial-gradient(120% 80% at 60% 30%, #E5F75A 0%, #9FB825 35%, #0a1003 100%);
}
.home-v2 .lg-card--hero-image .lg-card__title-group h3 { color: #0A0A0A; }
[data-theme="dark"] .home-v2 .lg-card--hero-image .lg-card__title-group h3 { color: #FFFFFF; }

.home-v2 .lg-card__glass-overlay {
    margin-top: auto;
    padding: 1rem 1.25rem;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    color: #0A0A0A;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-end;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .home-v2 .lg-card__glass-overlay {
        background: rgba(255, 255, 255, 0.92);
    }
}
.home-v2 .lg-card__glass-overlay h4 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 600;
}
.home-v2 .lg-card__glass-overlay p {
    margin: 0;
    font-size: 0.75rem;
    color: rgba(10, 10, 10, 0.6);
}

/* KPI card body */
.home-v2 .lg-kpi-block {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.home-v2 .lg-kpi-foot {
    color: var(--lg-text-muted);
    font-size: 0.875rem;
    margin-top: 0.5rem;
}
.home-v2 .lg-card--invert .lg-kpi-foot {
    color: rgba(255, 255, 255, 0.55);
}

/* Chart canvas wrapper */
.home-v2 .lg-chart-canvas-wrap {
    position: relative;
    width: 100%;
    height: 11rem;
    margin-top: 0.75rem;
}
.home-v2 .lg-chart-canvas-wrap canvas { width: 100% !important; height: 100% !important; }

.home-v2 .lg-chart-pill--anchored {
    position: absolute;
    transform: translate(-50%, -120%);
    z-index: 2;
}

/* Currency split row (Virtual Cards) */
.home-v2 .lg-currency-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
}
.home-v2 .lg-currency-row + .lg-currency-row {
    border-top: 1px solid var(--lg-border-color);
}
.home-v2 .lg-currency-row__bar {
    position: relative;
    height: 0.5rem;
    border-radius: var(--lg-radius-pill);
    background: var(--lg-bg-primary);
    overflow: hidden;
}
.home-v2 .lg-currency-row__bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--lg-text-primary);
    border-radius: var(--lg-radius-pill);
}
.home-v2 .lg-currency-row__pct {
    margin-left: 0.5rem;
    font-size: 0.875rem;
    color: var(--lg-text-secondary);
}

/* Sales-funnel style bar list (Advantages from mockup) */
.home-v2 .lg-bar-block {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    align-items: end;
    height: 9rem;
    margin-top: 1rem;
}
.home-v2 .lg-bar {
    background: var(--lg-accent);
    border-radius: 0.875rem;
    padding: 0.625rem 0.75rem;
    color: #0A0A0A;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    font-size: 0.8125rem;
    line-height: 1.1;
    min-height: 4rem;
}
.home-v2 .lg-bar--ghost {
    background: var(--lg-bg-primary);
    color: var(--lg-text-secondary);
}
.home-v2 .lg-bar strong {
    display: block;
    font-size: 1rem;
    font-weight: 700;
}

/* Left rail (floating circular icon column) */
.home-v2 .home-v2__rail {
    position: fixed;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    z-index: 5;
}
.home-v2 .home-v2__rail .lg-icon-btn {
    width: 2.5rem;
    height: 2.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
[data-theme="dark"] .home-v2 .home-v2__rail .lg-icon-btn {
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* --- Responsive --- */
@media (max-width: 1279px) {
    .home-v2 .home-v2__grid {
        grid-template-columns: repeat(6, 1fr);
    }
    .home-v2 .span-3, .home-v2 .span-4 { grid-column: span 3; }
    .home-v2 .span-5, .home-v2 .span-6 { grid-column: span 6; }
    .home-v2 .span-7, .home-v2 .span-8, .home-v2 .span-12 { grid-column: span 6; }
    .home-v2 .home-v2__rail { display: none; }
}

@media (max-width: 767px) {
    .home-v2 .home-v2__topbar {
        grid-template-columns: 1fr;
    }
    .home-v2 .home-v2__topbar-nav,
    .home-v2 .home-v2__topbar-actions {
        justify-self: stretch;
        overflow-x: auto;
    }
    .home-v2 .home-v2__hero {
        grid-template-columns: 1fr;
    }
    .home-v2 .home-v2__grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .home-v2 .span-3,
    .home-v2 .span-4,
    .home-v2 .span-5,
    .home-v2 .span-6,
    .home-v2 .span-7,
    .home-v2 .span-8,
    .home-v2 .span-12 {
        grid-column: span 1;
    }
    .home-v2 .lg-display-hero {
        font-size: clamp(2rem, 8vw, 3rem);
    }
}

/* Honor old #home-view padding for parity when v2 wrapper is in main-content */
#home-view-v2.home-v2 .home-v2__grid > * {
    min-width: 0;
}