html, body {
    background-color: var(--mud-palette-background);
    color: var(--mud-palette-primary);
    margin: 0;
    min-height: 100%;
}

/* ============================================ */
/* Breadcrumbs customizado                     */
/* ============================================ */

.chaos-breadcrumbs .mud-breadcrumb-item {
    font-size: 0.875rem;
}

.chaos-breadcrumbs .mud-breadcrumb-separator {
    margin: 0 8px;
}

/* ============================================ */
/* Hub - Ícone e layout                        */
/* ============================================ */

.chaos-hub-icone {
    text-align: center;
    margin-bottom: 16px;
    margin-top: 24px;
}

.chaos-hub-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
}

/* ============================================ */
/* Tabs - Espaçamento e padding                */
/* ============================================ */

.chaos-tabs-content {
    min-height: 400px;
}

/* ============================================ */
/* Animações suaves                            */
/* ============================================ */

.chaos-fade-in {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ChaosCard Customizado */
.chaos-card {
    transition: all 0.3s ease;
}

    .chaos-card:hover {
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
        transform: translateY(-2px);
    }

    .chaos-card .mud-card-header {
        background: linear-gradient(135deg, #0D97CA 0%, #471A5F 100%);
        color: white;
    }

    .chaos-card .mud-card-header .mud-typography {
        color: white !important;
    }

    .chaos-card .mud-card-header .mud-icon-root {
        color: white !important;
    }

/* =================================================================
   ESTILOS DO LOGIN - CHAOSCIENCE
   Arquivo: login-styles.css
   
   Para uso: Adicionar no _Host.cshtml ou no LoginLayout
   <link rel="stylesheet" href="~/styles/login-styles.css">
================================================================= */

/* ANIMAÇÕES */
.chaos-logo-pulse {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

/* BOTÃO LOGIN */
.chaos-btn-login {
    height: 48px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
}

    .chaos-btn-login:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(13, 151, 202, 0.4) !important;
    }

/* LINKS */
.chaos-link {
    color: #0D97CA !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
}

    .chaos-link:hover {
        color: #471A5F !important;
        transform: translateX(4px);
    }

/* BACKGROUND ANIMADO (DESKTOP) */
@media (min-width: 960px) {
    body.login-page {
        background: linear-gradient(-45deg, #471A5F, #0D97CA, #26629C, #54EEFF);
        background-size: 400% 400%;
        animation: gradientShift 15s ease infinite;
    }

    @keyframes gradientShift {
        0% {
            background-position: 0% 50%;
        }

        50% {
            background-position: 100% 50%;
        }

        100% {
            background-position: 0% 50%;
        }
    }
}

/* ============================================ */
/* Responsividade                              */
/* ============================================ */
@media (max-width: 600px) {
    .mud-grid-item.mud-grid-item-xs-12 {
        padding: 12px !important;
    }

    .chaos-hub-pills {
        flex-direction: column;
        align-items: stretch;
    }

    .chaos-hub-pill-btn {
        width: 100%;
    }
}