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

/* 1) Main theme variables */
:root {
    /* Original theme uses --color-primary and shade variations */
    --color-primary: #fe9a00;
    --color-primary-50: #fff8eb;
    --color-primary-100: #ffedcc;
    --color-primary-200: #ffda99;
    --color-primary-300: #ffc266;
    --color-primary-400: #ffad33;
    --color-primary-500: #fe9a00;
    --color-primary-600: #d97f00;
    --color-primary-700: #a96100;
    --color-primary-800: #7a4600;
    --color-primary-900: #4d2b00;

    /* Custom brand helpers */
    --jsr-primary: #fe9a00;
    --jsr-primary-hover: #d97f00;
    --jsr-primary-soft: rgba(254, 154, 0, 0.14);
}

/* 2) Generic buttons */
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;
}

/* 3) Outline / ghost buttons */
.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;
}

/* 4) 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;
}

/* 5) Navbar / main menu */
.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;
}

/* 6) Submenu active and hover states */
.submenu li a:hover,
.submenu li a:focus {
    color: var(--color-primary) !important;
}

.submenu li.active>a {
    color: var(--color-primary) !important;
    background-color: var(--jsr-primary-soft) !important;
    border-left: 3px solid var(--color-primary) !important;
}

.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;
}

/* 7) Generic primary utilities */
.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;
}

/* 8) Primary gradients */
.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;
}

/* 9) Tailwind accent overrides */
.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,
.text-orange-500,
.text-orange-600,
.text-amber-500,
.text-amber-600 {
    color: var(--color-primary) !important;
}

.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,
.bg-orange-500,
.bg-orange-600,
.bg-amber-500,
.bg-amber-600 {
    background-color: var(--color-primary) !important;
}

.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-orange-500,
.border-orange-600,
.border-amber-500,
.border-amber-600 {
    border-color: var(--color-primary) !important;
}

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

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

/* 11) Generic highlighted elements */
.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;
}

/* 12) Links in job cards / list cards */
.job-title a:hover,
.job-title a:focus,
.card-title a:hover,
.card-title a:focus {
    color: var(--jsr-primary-hover) !important;
}

/* Card slider icon stays white on group hover */
.group:hover .size-21 i {
    color: #ffffff !important;
}