/* ============================================
   NOVA PALETA DE CORES CUSTOMIZADA
   ============================================ */

:root {
    /* Cores Principais */
    --primaryColorVar: #55ae48;
    --secondaryColorVar: #55ae48;
    --tertiaryColorVar: #55ae48;

    /* Cores de Texto */
    --primaryTextColorVar: #ffffff;
    --secondaryTextColorVar: #333;
    --textSecondaryColorVar: #ffffff;
    --colorTextVar: #000000;
    --textColorByBackgroundVar: #000000;
    --textColorByPrimaryColorVar: #000000;
    --textColorBySecondaryColorVar: #000000;
    --textColorByTertiaryColorVar: #000000;
    --textColorByTertiaryColorOrDefaultVar: #000000;
    --textColorBySecondaryColorOrDefaultVar: #ffffff;
    --colorOrBlackByPrimaryColor: #000000;
    --colorOrBlackBySecondaryColor: #000000;
    --colorOrBlackByTertiaryColor: #000000;

    /* Background */
    --backgroundVar: #ffffff;
    --heroBackgroundVar: #e6e6e6;
    --bodyBackgroundVar: #e6e6e6;

    /* Cores RGB */
    --redColorVar: 85;
    --greenColorVar: 174;
    --blueColorVar: 72;

    /* Opacidades e Filtros */
    --DiscoveryRGBAVar: rgba(85, 174, 72, 0.05);
    --luminanceByPrimaryColorVar: #cae7c6;
    --filterRGBAWithLowOpacityVar: rgba(85, 174, 72, 0.1);
    --filterRGBAWithHighOpacityVar: rgba(85, 174, 72, 0.9);

    /* Header */
    --headerTransparencyBackground: rgba(85, 174, 72, 1);
    --headerTextColorByBackground: #1a1a1a;
    --headerOpacityVar: 1;
    --dividerByHeaderBackground: #0000001a;

    /* Fontes */
    --primaryFontVar: "Proxima Nova";
    --secondaryFontVar: "Proxima Nova";

    /* Cores Adicionais */
    --informativeColorVar: #74a8ed;
    --colorDiscountLabelVar: #ffffff;

    /* Botões */
    --button-border-radius: 6px;

    /* Botão Neutral */
    --button-neutral-hover-background-color: #ffffff;
    --button-neutral-hover-border: 1px solid #000000;
    --button-neutral-hover-color: #000000;
    --button-neutral-idle-background-color: #ffffff;
    --button-neutral-idle-border: 1px solid #000000;
    --button-neutral-idle-color: #000000;
    --button-neutral-outline: auto;

    /* Botão Primary */
    --button-primary-hover-background-color: #55ae48;
    --button-primary-idle-background-color: #55ae48;

    /* Botão Secondary */
    --button-secondary-hover-background-color: transparent;
    --button-secondary-hover-color: #55ae48;
    --button-secondary-idle-background-color: transparent;
    --button-secondary-idle-border: 1px solid #b24ab0;
    --button-secondary-outline: auto;

    /* Cards */
    --card-border: 1px solid #e5e5e5;
    --card-border-radius: 4px;
    --card-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
}

/* ============================================
   APLICAÇÃO GLOBAL
   ============================================ */

/* Body e Hero com fundo #F2F2F2 */
body {
    background-color: #f2f2f2 !important;
    font-family: var(--primaryFontVar), -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    color: var(--colorTextVar) !important;
}

/* Background cinza claro para hero e páginas */
.bg-gray-100,
.hero,
.hero-background,
.page-header,
.min-height-300,
.position-absolute.w-100 {
    background-color: #f2f2f2 !important;
}

/* Garantir que main content tenha fundo cinza */
main.main-content {
    background-color: #f2f2f2 !important;
}

/* Container principal */
.container-fluid {
    background-color: transparent !important;
}

/* Cards brancos */
.card {
    background-color: var(--backgroundVar) !important;
    border: var(--card-border) !important;
    border-radius: var(--card-border-radius) !important;
    box-shadow: var(--card-box-shadow) !important;
}

/* Títulos e Textos */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: var(--colorTextVar) !important;
    font-family: var(--primaryFontVar), -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

p,
span,
div,
a,
label {
    font-family: var(--primaryFontVar), -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Texto escuro padrão */
.text-dark,
.text-body {
    color: var(--colorTextVar) !important;
}

/* Texto branco */
.text-white {
    color: var(--primaryTextColorVar) !important;
}

/* Texto secundário */
.text-secondary,
.text-muted {
    color: var(--secondaryTextColorVar) !important;
}

/* ============================================
   BOTÕES
   ============================================ */

/* Botão Primary */
.btn-primary {
    background-color: var(--button-primary-idle-background-color) !important;
    border-color: var(--primaryColorVar) !important;
    color: var(--primaryTextColorVar) !important;
    border-radius: var(--button-border-radius) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--button-primary-hover-background-color) !important;
    border-color: var(--primaryColorVar) !important;
    color: var(--primaryTextColorVar) !important;
    opacity: 0.9;
}

/* Botão Secondary */
.btn-secondary {
    background-color: var(--button-secondary-idle-background-color) !important;
    border: var(--button-secondary-idle-border) !important;
    color: var(--button-secondary-hover-color) !important;
    border-radius: var(--button-border-radius) !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--button-secondary-hover-background-color) !important;
    color: var(--button-secondary-hover-color) !important;
}

/* Botão Neutral */
.btn-neutral {
    background-color: var(--button-neutral-idle-background-color) !important;
    border: var(--button-neutral-idle-border) !important;
    color: var(--button-neutral-idle-color) !important;
    border-radius: var(--button-border-radius) !important;
}

.btn-neutral:hover,
.btn-neutral:focus {
    background-color: var(--button-neutral-hover-background-color) !important;
    border: var(--button-neutral-hover-border) !important;
    color: var(--button-neutral-hover-color) !important;
}

/* Botão Success */
.btn-success {
    background-color: var(--primaryColorVar) !important;
    border-color: var(--primaryColorVar) !important;
    color: var(--primaryTextColorVar) !important;
    border-radius: var(--button-border-radius) !important;
}

.btn-success:hover {
    background-color: var(--luminanceByPrimaryColorVar) !important;
    border-color: var(--luminanceByPrimaryColorVar) !important;
}

/* ============================================
   CORES PRIMÁRIAS
   ============================================ */

/* Background Primary */
.bg-primary {
    background-color: var(--primaryColorVar) !important;
}

/* Texto Primary */
.text-primary {
    color: var(--primaryColorVar) !important;
}

/* Border Primary */
.border-primary {
    border-color: var(--primaryColorVar) !important;
}

/* Background Success */
.bg-success {
    background-color: var(--primaryColorVar) !important;
}

.text-success {
    color: var(--primaryColorVar) !important;
}

/* ============================================
   NAVBAR E HEADER
   ============================================ */

.navbar {
    background-color: var(--headerTransparencyBackground) !important;
    opacity: var(--headerOpacityVar);
}

.navbar .nav-link {
    color: var(--headerTextColorByBackground) !important;
    font-family: var(--primaryFontVar), sans-serif !important;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--primaryColorVar) !important;
}

/* ============================================
   FORMULÁRIOS
   ============================================ */

.form-control,
.form-select {
    border-radius: var(--button-border-radius) !important;
    color: var(--colorTextVar) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primaryColorVar) !important;
    box-shadow: 0 0 0 0.2rem var(--filterRGBAWithLowOpacityVar) !important;
}

.form-label {
    color: var(--colorTextVar) !important;
    font-family: var(--primaryFontVar), sans-serif !important;
}

/* ============================================
   TABELAS
   ============================================ */

.table {
    font-family: var(--primaryFontVar), sans-serif !important;
}

.table thead th {
    background-color: #f2f2f2 !important;
    color: var(--colorTextVar) !important;
}

.table tbody td {
    color: var(--colorTextVar) !important;
}

.table-hover tbody tr:hover {
    background-color: var(--DiscoveryRGBAVar) !important;
}

/* ============================================
   DROPDOWNS
   ============================================ */

.dropdown-menu {
    background-color: var(--backgroundVar) !important;
    border: var(--card-border) !important;
    box-shadow: var(--card-box-shadow) !important;
}

.dropdown-item {
    color: var(--colorTextVar) !important;
    font-family: var(--primaryFontVar), sans-serif !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--DiscoveryRGBAVar) !important;
    color: var(--primaryColorVar) !important;
}

/* ============================================
   BADGES
   ============================================ */

.badge {
    background-color: var(--primaryColorVar) !important;
    color: var(--primaryTextColorVar) !important;
}

.badge-primary {
    background-color: var(--primaryColorVar) !important;
}

.badge-secondary {
    background-color: var(--secondaryTextColorVar) !important;
    color: var(--primaryTextColorVar) !important;
}

/* ============================================
   ALERTAS
   ============================================ */

.alert-primary {
    background-color: var(--DiscoveryRGBAVar) !important;
    border-color: var(--primaryColorVar) !important;
    color: var(--colorTextVar) !important;
}

.alert-success {
    background-color: var(--DiscoveryRGBAVar) !important;
    border-color: var(--primaryColorVar) !important;
    color: var(--colorTextVar) !important;
}

.alert-info {
    background-color: rgba(116, 168, 237, 0.1) !important;
    border-color: var(--informativeColorVar) !important;
    color: var(--colorTextVar) !important;
}

/* ============================================
   PAGINAÇÃO
   ============================================ */

.pagination .page-link {
    color: var(--colorTextVar) !important;
    background-color: var(--backgroundVar) !important;
    border-color: #e5e5e5 !important;
    font-family: var(--primaryFontVar), sans-serif !important;
}

.pagination .page-link:hover {
    color: var(--primaryTextColorVar) !important;
    background-color: var(--primaryColorVar) !important;
    border-color: var(--primaryColorVar) !important;
}

.pagination .page-item.active .page-link {
    color: var(--primaryTextColorVar) !important;
    background-color: var(--primaryColorVar) !important;
    border-color: var(--primaryColorVar) !important;
}

/* ============================================
   LINKS
   ============================================ */

a {
    color: var(--primaryColorVar) !important;
    font-family: var(--primaryFontVar), sans-serif !important;
}

a:hover {
    color: var(--primaryColorVar) !important;
    opacity: 0.8;
}

/* ============================================
   EXTRAS
   ============================================ */

/* Hover de Cards */
.card:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15) !important;
    transition: box-shadow 0.3s ease;
}

/* Divider */
.divider {
    border-color: var(--dividerByHeaderBackground) !important;
}

/* Scrollbar customizado */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f2f2f2;
}

::-webkit-scrollbar-thumb {
    background: var(--primaryColorVar);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--luminanceByPrimaryColorVar);
}