/* ==========================================================================
   Employees (job-seeker search) page - modernized layout & responsiveness.
   Scoped to this page only (loaded solely by resources/views/user/list.blade.php)
   so it never affects any other page's styling. Reuses the site's existing
   brand colors (#0357e9 blue, #17d27c green, the purple/green search gradient)
   already used across main.css, rather than introducing new ones.
   ========================================================================== */

/* ---- Tabs ---- */
.employeesTabsWrap {
    background: #fff;
    border-bottom: 1px solid #eef0f4;
}
.employeesTabs {
    border: none;
    gap: 8px;
    padding: 14px 0 0;
}
.employeesTabs .nav-link {
    border: none;
    border-radius: 10px 10px 0 0;
    padding: 12px 22px;
    font-weight: 600;
    color: #555;
    background: #f4f6fa;
    transition: all 0.2s ease;
}
.employeesTabs .nav-link i {
    margin-right: 6px;
    color: #0357e9;
}
.employeesTabs .nav-link:hover {
    background: #eaf0fe;
    color: #0357e9;
}
.employeesTabs .nav-link.active {
    background: #0357e9;
    color: #fff;
}
.employeesTabs .nav-link.active i {
    color: #fff;
}
.employeesTabContent {
    background: #f8f9fc;
}

/* ---- Candidate grid cards (modernized, using existing .seekerbox markup) ---- */
.userlisting .seekerbox {
    box-shadow: 0 4px 18px rgba(3, 87, 233, 0.06);
    border: 1px solid #eef0f4;
}
.userlisting .seekerbox:hover {
    box-shadow: 0 10px 30px rgba(3, 87, 233, 0.12);
    transform: translateY(-3px);
    transition: all 0.25s ease;
}
.seekerbox .listbtn a {
    box-shadow: 0 6px 16px rgba(3, 87, 233, 0.25);
}

/* ---- Sidebar widgets ---- */
.sidebar .widget {
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 2px 10px rgba(20, 30, 60, 0.03);
}
.sidebar .widget-title {
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 13px;
    color: #0357e9;
}

/* ---- Pagination / results meta ---- */
.pagiWrap {
    background: #fff;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 2px 10px rgba(20, 30, 60, 0.03);
    margin-top: 10px;
}

/* ---- District ("Browse by District") tab ---- */
.districtSearchWrap {
    max-width: 640px;
    margin: 40px auto 30px;
    text-align: center;
    background: #fff;
    border-radius: 16px;
    padding: 36px 30px;
    box-shadow: 0 6px 24px rgba(20, 30, 60, 0.06);
}
.districtSearchWrap h3 {
    color: #333;
    margin-bottom: 8px;
}
.districtSearchWrap__hint {
    color: #777;
    margin-bottom: 20px;
}
.districtSearchWrap .form-control {
    height: auto;
    padding: 14px 16px;
    font-size: 16px;
    border: 1px solid #0357e9;
    border-radius: 10px;
}
.district-results-panel {
    max-width: 1140px;
    margin: 0 auto 40px;
}
.district-empty-state {
    text-align: center;
    color: #888;
    padding: 50px 20px;
    font-size: 16px;
}

/* ==========================================================================
   Responsive breakpoints
   ========================================================================== */

/* Tablet */
@media (max-width: 991px) {
    .employeesTabs .nav-link {
        padding: 10px 16px;
        font-size: 14px;
    }
    .sidebar .widget {
        margin-bottom: 16px;
    }
    .districtSearchWrap {
        margin: 24px 16px;
        padding: 28px 20px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .employeesTabsWrap .container {
        padding-left: 12px;
        padding-right: 12px;
    }
    .employeesTabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 6px;
    }
    .employeesTabs .nav-item {
        flex: 0 0 auto;
    }
    .employeesTabs .nav-link {
        padding: 10px 14px;
        font-size: 13px;
        white-space: nowrap;
    }
    .pageSearch .col-lg-4,
    .pageSearch .col-lg-8 {
        width: 100%;
    }
    .searchform .input-group {
        flex-direction: column;
    }
    .searchform .btn {
        margin-left: 0 !important;
        width: 100%;
    }
    .userlisting.row > li.col-lg-4 {
        width: 100%;
    }
    .districtSearchWrap {
        margin: 16px 10px;
        padding: 22px 16px;
        border-radius: 12px;
    }
    .pagiWrap .row > div {
        text-align: center !important;
        margin-bottom: 10px;
    }
}