/* =========================================
   Jobs Leads Daily - Color Overrides
   Primary brand color: #5ebc67
   ========================================= */

/* 1) Variáveis principais do tema */
:root {
    /* Tema original usa --color-primary (e variações) */
    --color-primary: #5ebc67;
    --color-primary-50: #f2faf4;
    --color-primary-100: #e0f4e4;
    --color-primary-200: #c8eccf;
    --color-primary-300: #a3dfaf;
    --color-primary-400: #7dd28f;
    --color-primary-500: #5ebc67;
    --color-primary-600: #4aa756;
    --color-primary-700: #3a8244;
    --color-primary-800: #2d6334;
    --color-primary-900: #214727;

    /* Extras próprios */
    --jsr-primary: #5ebc67;
    --jsr-primary-hover: #399846;
    --jsr-primary-soft: rgba(94, 188, 103, 0.12);
}


/* 3) Botões genéricos */
button,
.btn,
.btn-primary,
[type="submit"],
[type="button"],
[type="reset"] {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #ffffff !important;
}

button:hover,
button:focus,
.btn:hover,
.btn:focus,
.btn-primary:hover,
.btn-primary:focus,
[type="submit"]:hover,
[type="submit"]:focus,
[type="button"]:hover,
[type="button"]:focus,
[type="reset"]:hover,
[type="reset"]:focus {
    background-color: var(--jsr-primary-hover) !important;
    border-color: var(--jsr-primary-hover) !important;
    color: #ffffff !important;
}

/* 4) Botões "outline" / ghost */
.btn-outline,
.btn-outline-primary,
.btn-soft-primary {
    background-color: transparent !important;
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.btn-outline:hover,
.btn-outline-primary:hover,
.btn-soft-primary:hover {
    background-color: var(--jsr-primary-soft) !important;
    color: var(--jsr-primary-hover) !important;
    border-color: var(--jsr-primary-hover) !important;
}

/* 5) Badges, pills, labels */
.badge,
.badge-primary,
.badge-link,
.hiring-badge,
.newpost-badge {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #ffffff !important;
}

.badge-soft-primary,
.bg-soft-primary {
    background-color: var(--jsr-primary-soft) !important;
    color: var(--color-primary) !important;
}

/* 6) Navbar / menu principal */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: var(--color-primary) !important;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-item.active>.nav-link {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* 7) Submenu / sub-menu-item ativo */
.submenu li a:hover,
.submenu li a:focus {
    color: var(--color-primary) !important;
}

/* estrutura padrão: <li class="active"><a>...</a></li> */
.submenu li.active>a {
    color: var(--color-primary) !important;
    background-color: var(--jsr-primary-soft) !important;
    border-left: 3px solid var(--color-primary) !important;
}

/* se o HTML usar .sub-menu-item */
.sub-menu-item.active>a,
.sub-menu-item>a.active {
    color: var(--color-primary) !important;
    background-color: var(--jsr-primary-soft) !important;
    border-left: 3px solid var(--color-primary) !important;
}

/* 8) Utilitários "primary" genéricos */
.text-primary {
    color: var(--color-primary) !important;
}

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

.bg-primary:hover {
    background-color: var(--jsr-primary-hover) !important;
}

.border-primary {
    border-color: var(--color-primary) !important;
}

/* 9) Gradientes que eram azul/roxo -> verde JLD */
.bg-gradient-primary,
.btn-gradient,
.btn-primary-gradient {
    background-image: linear-gradient(135deg, var(--color-primary), var(--jsr-primary-hover)) !important;
    border: none !important;
    color: #ffffff !important;
}

/* 10) Overrides de Tailwind usados como accent (indigo/blue/green/emerald) */

/* texto */
.text-indigo-500,
.text-indigo-600,
.text-indigo-700,
.text-blue-500,
.text-blue-600,
.text-blue-700,
.text-green-500,
.text-green-600,
.text-emerald-500,
.text-emerald-600 {
    color: var(--color-primary) !important;
}

/* background */
.bg-indigo-500,
.bg-indigo-600,
.bg-indigo-700,
.bg-blue-500,
.bg-blue-600,
.bg-blue-700,
.bg-green-500,
.bg-green-600,
.bg-emerald-500,
.bg-emerald-600 {
    background-color: var(--color-primary) !important;
}

/* border */
.border-indigo-500,
.border-indigo-600,
.border-indigo-700,
.border-blue-500,
.border-blue-600,
.border-blue-700,
.border-green-500,
.border-green-600,
.border-emerald-500,
.border-emerald-600 {
    border-color: var(--color-primary) !important;
}

/* rings (focus) */
.focus\:ring-indigo-500:focus,
.focus\:ring-blue-500:focus,
.focus\:ring-green-500:focus,
.focus\:ring-emerald-500:focus {
    box-shadow: 0 0 0 3px var(--jsr-primary-soft) !important;
}

/* 11) Inputs com foco/acento */
input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 1px var(--jsr-primary-soft) !important;
}

/* 12) Outros elementos de destaque genéricos */
.accent,
.highlight,
.step-icon,
.icon-primary {
    color: var(--color-primary) !important;
}

.badge-outline-primary,
.tag-outline-primary {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* 13) Links em cards / listas de vagas (caso use classes assim) */
.job-title a:hover,
.job-title a:focus,
.card-title a:hover,
.card-title a:focus {
    color: var(--jsr-primary-hover) !important;
}

/* Icone do card (slider) fica branco no hover do grupo */
.group:hover .size-21 i {
    color: #ffffff !important;
}