:root {
    --primary-color: #1b7a5e;
    --primary-dark: #145a46;
    --primary-light: #e8f5f2;
    --primary-grad: linear-gradient(120deg, #1b7a5e, #22a67d);
    --secondary-color: #dc3545;
    --text-dark: #1a1a1a;
    --text-light: #6c757d;
    --border-color: #e0e0e0;
    --bg-light: #f8f9fa;
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --card-shadow-hover: 0 12px 28px rgba(27, 122, 94, 0.14);
}

body {
    background-color: var(--bg-light);
    color: var(--text-dark);
}

/* ===== Filter Sidebar ===== */
.filters-sidebar {
    position: sticky;
    top: 90px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    background: white;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
    padding: 15px;
}

.filters-sidebar::-webkit-scrollbar {
    width: 6px;
}

.filters-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.filters-sidebar::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.filters-sidebar::-webkit-scrollbar-thumb:hover {
    background: #999;
}

.filter-section {
    margin-bottom: 7px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--border-color);
}

.filter-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.filter-title {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-light);
    margin-bottom: 5px;
}

.filter-select {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 13px;
    background-color: white;
    color: var(--text-dark);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.filter-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* Category multi-select — a checkbox dropdown standing in for a native <select multiple>, whose
   default UI (a scrollable listbox with no search and awkward ctrl/cmd-click multi-picking) isn't
   usable across a 300+-item category list. */
.ms-category {
    position: relative;
}

.ms-category-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    text-align: left;
}

.ms-category-trigger i {
    font-size: 10px;
    color: var(--text-light);
    transition: transform 150ms ease;
    flex-shrink: 0;
}

.ms-category.is-open .ms-category-trigger i {
    transform: rotate(180deg);
}

.ms-category-trigger span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ms-category-panel {
    display: none;
    /* Fixed (not absolute) and positioned via JS from the trigger's live screen coordinates —
       .filters-sidebar has overflow-y:auto, which would otherwise trap an absolutely-positioned
       panel inside its own scroll area (it'd expand the sidebar in place instead of floating over
       the page) exactly like the hero search bar's location suggestions did before that was fixed
       the same way. */
    position: fixed;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--card-shadow-hover);
    z-index: 1000;
    overflow: hidden;
}

.ms-category.is-open .ms-category-panel {
    display: block;
}

.ms-category-search-wrap {
    position: relative;
    padding: 7px;
    border-bottom: 1px solid var(--border-color);
}

.ms-category-search-wrap i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: var(--text-light);
}

.ms-category-search {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 8px 5px 26px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 12px;
    outline: none;
}

.ms-category-search:focus {
    border-color: var(--primary-color);
}

.ms-category-options {
    max-height: 260px;
    overflow-y: auto;
    padding: 4px 0;
}

.ms-category-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    font-size: 13px;
    color: var(--text-dark);
    cursor: pointer;
    margin: 0;
}

.ms-category-option:hover {
    background: var(--primary-light);
}

.ms-category-option.is-hidden {
    display: none;
}

.ms-category-all-row {
    font-weight: 700;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
    margin-bottom: 4px !important;
}

.ms-category-checkbox,
#msCategoryAll {
    width: 15px;
    height: 15px;
    accent-color: var(--primary-color);
    cursor: pointer;
    flex-shrink: 0;
}

.ms-category-empty {
    display: none;
    padding: 14px 10px;
    font-size: 12px;
    color: var(--text-light);
    text-align: center;
    margin: 0;
}

.filter-range {
    display: flex;
    gap: 8px;
    align-items: center;
}

    .filter-range input {
        flex: 1;
        padding: 4px 8px;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        font-size: 12px;
        box-sizing: border-box;
    }

.filter-buttons {
    display: flex;
    gap: 10px;
    margin-top: 7px;
}

.btn-apply {
    flex: 1;
    padding: 8px 12px;
    background: var(--primary-grad);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
    box-shadow: 0 6px 14px rgba(27, 122, 94, 0.28);
    transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}

.btn-apply:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(27, 122, 94, 0.34);
}

.btn-clear {
    flex: 1;
    padding: 8px 12px;
    background-color: white;
    color: var(--text-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.3s ease;
}

.btn-clear:hover {
    background-color: var(--bg-light);
    color: var(--text-dark);
}

/* ===== Main Content Area ===== */
.jobs-main {
    background: white;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
    padding: 28px;
}

/* Header */
.jobs-header {
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.jobs-title {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: var(--text-dark);
    margin-bottom: 5px;
}

.jobs-subtitle {
    font-size: 13.5px;
    color: var(--text-light);
}

/* Toolbar */
.jobs-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.toolbar-left {
    display: flex;
    gap: 12px;
    align-items: center;
}

.toolbar-right {
    display: flex;
    gap: 12px;
    align-items: center;
}

.filter-btn-mobile {
    display: none;
    padding: 10px 16px;
    background: var(--primary-grad);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0 6px 16px rgba(27, 122, 94, 0.3);
}

.sort-dropdown, .view-toggle {
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: white;
    color: var(--text-dark);
    cursor: pointer;
    font-size: 13px;
}

.view-toggle {
    display: flex;
    gap: 4px;
    padding: 4px;
}

.view-toggle button {
    padding: 6px 10px;
    border: 1px solid transparent;
    background-color: transparent;
    cursor: pointer;
    border-radius: 6px;
    color: var(--text-light);
    transition: all 0.2s ease;
}

.view-toggle button.active {
    background: var(--primary-grad);
    color: white;
    border-color: transparent;
    box-shadow: 0 3px 8px rgba(27, 122, 94, 0.3);
}

/* ===== Job Cards ===== */
.jobs-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.job-card {
    display: flex;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background-color: white;
    position: relative;
    overflow: hidden;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
    cursor: pointer;
}

.job-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary-grad);
    opacity: 0;
    transition: opacity 200ms ease;
}

.job-card:hover {
    box-shadow: var(--card-shadow-hover);
    border-color: transparent;
    transform: translateY(-3px);
}

.job-card:hover::before {
    opacity: 1;
}

.job-logo {
    width: 60px;
    height: 60px;
    min-width: 60px;
    background-color: var(--primary-light);
    border-radius: 12px;
    border: 1px solid rgba(27, 122, 94, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-color);
    overflow: hidden;
}

    .job-logo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.job-content {
    flex: 1;
    min-width: 0;
}

.job-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 12px;
    margin-bottom: 8px;
}

.job-title-section {
    flex: 1;
}

.job-title {
    font-size: 16.5px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 4px;
    transition: color 150ms ease;
}

.job-card:hover .job-title {
    color: var(--primary-color);
}

.job-company {
    font-size: 13px;
    color: var(--text-light);
    font-weight: 500;
}

.job-badges {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.badge {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.badge-type {
    background-color: #fef3c7;
    color: #92400e;
}

.badge-category {
    background-color: var(--primary-light);
    color: var(--primary-dark);
}

.badge-exp {
    background-color: #eef2ff;
    color: #4338ca;
}

.job-info {
    display: flex;
    gap: 20px;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--text-light);
    flex-wrap: wrap;
}

.job-info-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.job-description {
    font-size: 13px;
    color: var(--text-dark);
    margin-bottom: 12px;
    line-height: 1.5;
}

.job-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.skill-tag {
    display: inline-block;
    padding: 4px 10px;
    background-color: var(--bg-light);
    color: var(--text-dark);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
}

.job-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.job-salary {
    font-weight: 800;
    color: var(--primary-color);
    font-size: 15px;
}

.job-actions {
    display: flex;
    gap: 8px;
}

.btn-details {
    padding: 9px 16px;
    background-color: white;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: 12.5px;
    transition: all 0.2s ease;
}

.btn-details:hover {
    background-color: var(--primary-light);
}

.btn-apply-now {
    padding: 9px 16px;
    background: var(--primary-grad);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: 12.5px;
    box-shadow: 0 6px 14px rgba(27, 122, 94, 0.28);
    transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}

.btn-apply-now:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(27, 122, 94, 0.34);
}

.btn-apply-now:disabled {
    background: #ccc;
    box-shadow: none;
    cursor: default;
    transform: none;
}

.btn-save-job {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-light);
    transition: all 0.2s ease;
}

    .btn-save-job:hover {
        border-color: #fecaca;
        color: #dc2626;
    }

    .btn-save-job.saved {
        background-color: #fef2f2;
        border-color: #fecaca;
        color: #dc2626;
    }

.jobs-empty-state, .jobs-loading-state {
    text-align: center;
    color: var(--text-light);
    padding: 60px 0;
    font-size: 14px;
}

.jobs-loading-state i {
    color: var(--primary-color);
    margin-right: 6px;
}

/* ===== Pagination ===== */
.pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.pagination {
    display: flex;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.pagination a,
.pagination span {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background-color: white;
    color: var(--text-dark);
    text-decoration: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.pagination .active {
    background: var(--primary-grad);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 10px rgba(27, 122, 94, 0.3);
}

.pagination .disabled {
    opacity: 0.4;
    pointer-events: none;
}

.pagination a:hover {
    background-color: var(--primary-light);
    border-color: var(--primary-color);
    color: var(--primary-dark);
}

/* ===== Details Modal ===== */
.pjob-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.pjob-modal-overlay.show {
    display: flex;
}

.pjob-modal {
    background: white;
    border-radius: 16px;
    max-width: 640px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 28px;
    position: relative;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

.pjob-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    cursor: pointer;
    font-size: 20px;
    color: var(--text-light);
}

.pjob-modal-logo {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    background-color: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 700;
    color: var(--primary-color);
    overflow: hidden;
    margin-bottom: 16px;
}

    .pjob-modal-logo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.pjob-modal-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
}

.pjob-modal-company {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 12px;
}

.pjob-modal-description {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-dark);
    margin: 16px 0 20px;
    white-space: pre-wrap;
}

.pjob-modal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13px;
    color: var(--text-light);
    margin: 12px 0;
}

/* ===== Responsive Design ===== */
@media (max-width: 1199px) {
    .filters-sidebar {
        position: relative;
        top: auto;
        height: auto;
        margin-bottom: 20px;
    }
}

.filters-mobile-header {
    display: none;
}

.filters-sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

    .filters-sidebar-overlay.show {
        display: block;
        opacity: 1;
    }

@media (max-width: 767px) {
    /* Reserves the space the button used to occupy in normal flow, now that the button itself is
       position:fixed (taken out of flow) — without this, the rest of the page (starting with the
       "Find Your Dream Job" heading) would ride up underneath the fixed header once the button no
       longer holds that space open. */
    .filter-btn-mobile-wrap {
        min-height: 44px;
    }

    .filter-btn-mobile {
        display: block;
        /* position:sticky was tried first, but this button's own wrapper column has almost no
           height beyond the button itself — sticky has nowhere to "travel" within such a short
           parent, so it unstuck and scrolled away again within a few pixels of scrolling.
           position:fixed has no such limitation: pinned just below the fixed top header
           (.appHeader, 56px tall, z-index:999) for the entire scroll, not just briefly. */
        position: fixed;
        top: 56px;
        left: 15px;
        right: 15px;
        z-index: 900;
    }

    /* Stays in the layout (fixed + off-screen via transform) rather than display:none, so
       the slide-in transition below has something to animate from/to. */
    #filtersSidebar {
        display: block;
        position: fixed;
        top: 56px;
        left: 0;
        width: 100%;
        height: calc(100% - 56px);
        z-index: 1000;
        overflow-y: auto;
        background: white;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    #filtersSidebar.mobile-show {
        transform: translateX(0);
    }

        #filtersSidebar.mobile-show .filters-sidebar {
            border-radius: 0;
            max-height: 100%;
            height: 100%;
        }

    .filters-mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid var(--border-color);
    }

        .filters-mobile-header span {
            font-weight: 700;
            font-size: 15px;
            color: var(--text-dark);
        }

    .filters-mobile-close {
        border: none;
        background: none;
        font-size: 22px;
        line-height: 1;
        color: var(--text-light);
        cursor: pointer;
        padding: 0 4px;
    }

    .jobs-main {
        padding: 16px;
    }

    .jobs-title {
        font-size: 24px;
    }

    .jobs-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar-left,
    .toolbar-right {
        width: 100%;
    }

    .sort-dropdown {
        width: 100%;
    }
    /* .filter-btn-mobile is intentionally NOT included here — it's position:fixed with explicit
       left/right insets (see the 767px breakpoint above); an explicit width would win over those
       insets per the CSS spec and push the button past the right edge of the screen. */

    .job-card {
        flex-direction: column;
    }

    .job-logo {
        width: 100%;
        height: 120px;
    }

    .job-header {
        flex-direction: column;
    }

    .job-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .job-actions {
        width: 100%;
    }

    .btn-details,
    .btn-apply-now {
        width: 100%;
    }
}

@media (max-width: 575px) {
    .jobs-title {
        font-size: 20px;
    }

    .job-info {
        gap: 12px;
    }

    .jobs-toolbar {
        gap: 8px;
    }
}

/* Top margin for main container */
.container-fluid {
    margin-top: 80px;
}