/* ==========================================================================
   JobNest Qatar — shared colour theme (index.php, foreign_jobs.php)
   Colours only: layout, sizes and spacing stay with the original JobNest
   styles. JobNest Blue stays dominant; Qatar Maroon (#8A1538) is the accent,
   used for text, backgrounds, borders and blue-to-maroon gradients. Load
   after base.css and the page's own inline styles.
   ========================================================================== */

:root {
    --qa-blue: #1565B8;
    --qa-navy: #0D3B5A;
    /* Qatar Maroon accent. --qa-ink is kept as the text alias; both are the
       same maroon now, and the --qa-maroon* names below derive from it. */
    --qa-pink: #8A1538;
    --qa-ink: #8A1538;
    --qa-maroon: var(--qa-pink);
    --qa-maroon-dark: color-mix(in srgb, var(--qa-pink) 82%, #000);
    --qa-maroon-light: color-mix(in srgb, var(--qa-pink) 10%, #fff);
    --qa-maroon-on-dark: var(--qa-pink);
}

/* ------------------------------------------------------------ hero search */
.hero-search .btn-search { background: var(--qa-maroon); }
.hero-search .btn-search:hover,
.hero-search .btn-search:focus { background: var(--qa-maroon-dark); border-color: var(--qa-maroon-dark); }

.autocomplete-dropdown .suggestion-item:hover { color: var(--qa-ink); background: var(--qa-maroon-light); }

/* ------------------------------------------------------------ filter bar */
/* JobNest Blue, turning Qatar pink toward the right edge */
.jobs-toolbar {
    background: linear-gradient(90deg, var(--qa-navy) 0%, var(--qa-blue) 28%, var(--qa-blue) 68%, #3B2F6E 86%, var(--qa-maroon) 100%);
}
.jobs-toolbar .foreign-job-btn:hover { color: var(--qa-ink); }
.jobs-toolbar .refresh-btn {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.85);
    color: #fff;
}
.jobs-toolbar .refresh-btn:hover { background: rgba(255, 255, 255, 0.15); }

/* ------------------------------------------------------------ categories */
.sidebar-head {
    background: linear-gradient(90deg, var(--qa-navy) 0%, var(--qa-blue) 55%, var(--qa-maroon-dark) 100%);
}
.sidebar-item:hover { color: var(--qa-ink); }
.sidebar-item:hover i { background-color: var(--qa-maroon); color: #fff; }
.sidebar-item.active {
    color: var(--qa-ink);
    background: var(--qa-maroon-light);
    border-color: color-mix(in srgb, var(--qa-pink) 32%, #fff);
}
.sidebar-item.active i { background-color: var(--qa-maroon); color: #fff; }

/* ------------------------------------------------------------ job cards */
/* Urgent badge and urgent-card border keep the original JobNest red (semantic). */
.urgent-badge.new-badge { background: #f59e0b; }

/* ------------------------------------------------------------ mobile */
@media (max-width: 768px) {
    .category-tab { background: linear-gradient(180deg, var(--qa-navy), var(--qa-maroon)); }
}