:root {
    /* Marca Bro Energy (extraída da logo) */
    --bro-blue: #5887FF;
    --bro-blue-rgb: 88, 135, 255;
    --bro-blue-dark: #3B65D2;
    --bro-ink: #14213D;
    --bro-paper: #F6F8FC;
    --bro-leaf: #1F9D6B;
    --bro-leaf-rgb: 31, 157, 107;

    /* Reskin do Tabler com a cor da marca */
    --tblr-primary: var(--bro-blue);
    --tblr-primary-rgb: var(--bro-blue-rgb);
}

html {
    scrollbar-gutter: stable;
}

body {
    background-color: var(--bro-paper);
}

.navbar {
    min-height: 64px;
}

.page-title,
.stat-value {
    font-family: "Sora", var(--tblr-font-sans-serif, -apple-system, sans-serif);
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--bro-ink);
}

.stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon svg {
    width: 22px;
    height: 22px;
}

.stat-icon-blue {
    background: rgba(var(--bro-blue-rgb), 0.12);
    color: var(--bro-blue-dark);
}

.stat-icon-leaf {
    background: rgba(var(--bro-leaf-rgb), 0.12);
    color: var(--bro-leaf);
}

.stat-icon-amber {
    background: rgba(245, 159, 0, 0.15);
    color: #f59f00;
}

.stat-icon-gray {
    background: rgba(100, 110, 130, 0.1);
    color: #64748b;
}

.bro-stat-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.bro-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1.5rem rgba(20, 33, 61, 0.08) !important;
}

.card-leaf-watermark {
    position: relative;
    overflow: hidden;
}

.card-leaf-watermark::after {
    content: "";
    position: absolute;
    right: -22px;
    bottom: -22px;
    width: 130px;
    height: 130px;
    background-color: var(--bro-leaf);
    opacity: 0.08;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 21c.5-4.5 2.5-8 7-10'/%3E%3Cpath d='M9 18c6.218 0 10.5-3.288 11-12v-2h-4.014c-9 0-11.986 4-12 9c0 1 0 3 2 5h3z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 21c.5-4.5 2.5-8 7-10'/%3E%3Cpath d='M9 18c6.218 0 10.5-3.288 11-12v-2h-4.014c-9 0-11.986 4-12 9c0 1 0 3 2 5h3z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    pointer-events: none;
}

.bro-table tbody tr:hover {
    background-color: rgba(var(--bro-blue-rgb), 0.04);
}

@media (prefers-reduced-motion: no-preference) {
    .bro-animate-in {
        animation: bro-fade-up 0.45s ease both;
    }

    .row-cards > div:nth-child(1) .bro-animate-in { animation-delay: 0.04s; }
    .row-cards > div:nth-child(2) .bro-animate-in { animation-delay: 0.11s; }
    .row-cards > div:nth-child(3) .bro-animate-in { animation-delay: 0.18s; }
}

@keyframes bro-fade-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-hero {
    background: linear-gradient(150deg, var(--bro-ink) 0%, var(--bro-blue-dark) 45%, var(--bro-blue) 100%);
    clip-path: polygon(0 0, 92% 0, 100% 100%, 0 100%);
    position: relative;
}

.login-hero-content {
    position: relative;
    z-index: 1;
    padding-right: 8%;
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 0.9;
        transform: translateX(0);
    }
}

.toast.show {
    animation: toast-in 0.3s ease forwards;
}

.toast.hiding {
    transition: opacity 0.4s ease;
    opacity: 0 !important;
}