/* =============================================================================
   Sun Stack — red accent layer  (loaded LAST, on every layout)
   ---------------------------------------------------------------------------
   The ThemeForest "Jobs Portal" template is indigo/blue. This file adds a
   restrained red touch across the whole application — public pages, the
   candidate/employer workspace and the admin panel — without changing any
   structure, content or logic. It only recolours existing elements.
   ============================================================================= */

:root,
html[data-theme="red"],
html[data-theme="blue"] {
    /* Keep this compatibility layer tied to the active semantic theme tokens.
       The previous hard-coded blue values overrode red mode on every route. */
    --jp-red: var(--ss-primary);
    --jp-red-dark: var(--ss-primary-hover);
    --jp-red-soft: var(--ss-primary-soft);
    --jp-red-glow: var(--ss-primary-glow);
    --jp-cta: var(--ss-primary);
    --jp-cta-hover: var(--ss-primary-hover);
}

/*---- Primary buttons ------------------------------------------------------*/
.btn-primary,
.btn-jp,
.portal-btn--primary,
.admin-btn--primary,
.ss-btn-primary {
    background: var(--jp-red) !important;
    background-image: none !important;
    border-color: var(--jp-red) !important;
    box-shadow: 0 10px 22px var(--jp-red-glow) !important;
}
.btn-primary:hover,
.btn-jp:hover,
.portal-btn--primary:hover,
.admin-btn--primary:hover,
.ss-btn-primary:hover {
    background: var(--jp-red-dark) !important;
    border-color: var(--jp-red-dark) !important;
}

/*---- Outline / ghost buttons: light glassy theme surface ------------------*/
.btn-outline,
.btn-outline-primary,
.portal-btn--ghost,
.admin-btn--ghost,
.btn-ghost,
.applybtn-tpl {
    border-color: var(--ss-border-strong, var(--ss-primary)) !important;
    color: var(--ss-primary-dark) !important;
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.btn-outline:hover,
.btn-outline-primary:hover,
.portal-btn--ghost:hover,
.admin-btn--ghost:hover,
.btn-ghost:hover,
.applybtn-tpl:hover {
    background: var(--ss-primary-soft) !important;
    border-color: var(--ss-primary) !important;
    color: var(--ss-primary-dark) !important;
}

/*---- Active navigation (workspace + admin) --------------------------------*/
.portal-nav__link.is-active,
.portal-nav__link.active,
.admin-nav__link.is-active,
.admin-nav__link.active {
    background: var(--jp-red) !important;
    color: #fff !important;
}
.portal-nav__link:hover,
.admin-nav__link:hover {
    background: var(--jp-red-soft) !important;
}

/*---- Small accents that read well across screens --------------------------*/
/* Focus rings */
.form-control:focus,
.form-select:focus,
.portal-input:focus,
.admin-input:focus,
.ss-input:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--jp-red) !important;
    box-shadow: 0 0 0 3px var(--jp-red-soft) !important;
}

/* Checkbox / radio / switch checked state */
.form-check-input:checked {
    background-color: var(--jp-red) !important;
    border-color: var(--jp-red) !important;
}

/* Links that act as the primary action */
.portal-link:hover,
.text-primary,
.text-brand { color: var(--jp-red) !important; }

/* Brand marks, small pills and active chips */
.portal-brand__title::before,
.portal-public-nav__mark { background: var(--jp-red) !important; }
.badge-primary,
.pill--primary,
.portal-badge--primary,
.portal-category-chip.is-active {
    background: var(--jp-red-soft) !important;
    border-color: var(--jp-red) !important;
    color: var(--jp-red) !important;
}

/* Progress / score rings and KPI emphasis */
.portal-score__ring { background: conic-gradient(var(--jp-red) calc(var(--pct) * 1%), #e2e8f0 0) !important; }
.portal-score__ring span { color: var(--jp-red) !important; }
.kpi-card__value,
.stat-card__value { color: var(--jp-red); }

/* Topbar greeting accent */
.portal-topbar__hello strong { color: var(--jp-red); }

/* Tables: hover row + header accent thread */
.table tbody tr:hover,
table tbody tr:hover,
.portal-table tbody tr:hover { background: var(--jp-red-soft) !important; }

/* Pagination + step indicators */
.pagination .active .page-link,
.page-item.active .page-link {
    background: var(--jp-red) !important;
    border-color: var(--jp-red) !important;
}

/* Section eyebrows (public) */
.eyebrow,
.experience-eyebrow,
.titleTop .subtitle {
    color: var(--jp-red) !important;
}

/* Cards: red hover border where a card is interactive */
.portal-card--interactive:hover,
.portal-job-card:hover,
.portal-employer-card:hover,
.job-card:hover,
.employer-card:hover,
.company-card:hover {
    border-color: var(--ss-border-strong, var(--ss-primary)) !important;
}
/*---- Links use the active theme accent ------------------------------------*/
a,
.portal-link,
.footerWrap .quicklinks li a:hover,
.hero-link,
.link-arrow { color: var(--ss-primary); }
a:hover { color: var(--ss-primary) !important; }
.titleTop h3 span { color: var(--jp-red); font-weight: 600; }

/* Template green subtitle -> the accent scheme (kept subtle). */
.titleTop .subtitle,
.eyebrow { color: var(--jp-red) !important; }

/* Template green CTA / success buttons follow the active theme. */
.btn-success,
.ss-btn-success,
.portal-btn--success,
.btn--cta {
    background: var(--ss-primary) !important;
    background-image: none !important;
    border-color: var(--ss-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px var(--ss-primary-glow) !important;
}
.btn-success:hover,
.ss-btn-success:hover,
.portal-btn--success:hover,
.btn--cta:hover {
    background: var(--ss-primary-hover) !important;
    border-color: var(--ss-primary-hover) !important;
}
/*---- Job seeker / employer registration: give the plain inner borders colour -*/
body.portal-register-body .admin-panel {
    border: 1px solid var(--ss-border-strong, var(--ss-primary)) !important;
    box-shadow: 0 18px 44px var(--ss-primary-soft) !important;
}
body.portal-register-body .candidate-wizard-step--single-page {
    border-bottom: 1.5px solid var(--ss-border, var(--ss-primary-soft)) !important;
}
body.portal-register-body .candidate-wizard-step--single-page:last-of-type {
    border-bottom: 0 !important;
}
body.portal-register-body .admin-candidate-form input,
body.portal-register-body .admin-candidate-form select,
body.portal-register-body .admin-candidate-form textarea,
body.portal-register-body .admin-form-grid input,
body.portal-register-body .admin-form-grid select,
body.portal-register-body .admin-form-grid textarea {
    border: 1px solid var(--ss-border-strong, var(--ss-primary)) !important;
}
body.portal-register-body .admin-candidate-form input:focus,
body.portal-register-body .admin-candidate-form select:focus,
body.portal-register-body .admin-candidate-form textarea:focus,
body.portal-register-body .admin-form-grid input:focus,
body.portal-register-body .admin-form-grid select:focus,
body.portal-register-body .admin-form-grid textarea:focus {
    border-color: var(--jp-red) !important;
}
body.portal-register-body .candidate-wizard-upload-card {
    border-color: var(--ss-border-strong, var(--ss-primary)) !important;
    background: var(--ss-primary-soft) !important;
}
body.portal-register-body .admin-section-title {
    border-left: 4px solid var(--jp-red);
    padding-left: 12px;
}
/*---- Custom dropdowns: ensure the selected value + caret are always visible.
   A previous rule set the trigger text and the caret colour to a *background*
   token (#fff), so every custom select rendered as a blank box. These rules
   pin them to readable ink colours on every layout. -------------------------*/
.ss-select__trigger {
    color: var(--ss-ink, #333) !important;
}
.ss-select__trigger::after {
    border-right-color: var(--ss-ink-soft, var(--ss-ink, #333)) !important;
    border-bottom-color: var(--ss-ink-soft, var(--ss-ink, #333)) !important;
}
.ss-select__trigger:disabled,
.ss-select.is-disabled .ss-select__trigger {
    color: var(--ss-muted, #666) !important;
}
.ss-select__value {
    color: inherit !important;
}
.ss-select__menu {
    color: var(--ss-ink, #333);
}
.ss-select__option,
.ss-dropdown-option {
    color: var(--ss-ink, #333) !important;
}
.ss-select__option.is-active,
.ss-select__option[aria-selected="true"],
.ss-dropdown-option.is-active {
    color: var(--ss-primary) !important;
}