/**
 * ============================================================
 * CareerSetu Pro
 * Reusable Components System
 * Version: V50
 * ============================================================
 *
 * File:
 * public_html/assets/css/components.css
 *
 * Load AFTER:
 * 1. base.css
 * 2. layout.css
 *
 * PURPOSE:
 * - Buttons
 * - Cards
 * - Job cards
 * - Badges / status chips
 * - Alerts
 * - Avatars
 * - Dropdowns
 * - Pagination
 * - Progress
 * - Steps
 * - Stat cards
 * - Information boxes
 * - Empty states
 * - Tooltips / utility UI
 */


/* ============================================================
   01. BUTTON FOUNDATION
============================================================ */

.cs-btn,
.btn.cs-btn {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 46px;

    padding:
        11px
        20px;

    border:
        1px solid
        transparent;

    border-radius:
        var(--cs-radius-md);

    font-size: 0.925rem;

    font-weight:
        var(--cs-font-semibold);

    line-height: 1.2;

    text-align: center;

    text-decoration: none;

    white-space: nowrap;

    cursor: pointer;

    user-select: none;

    transition:
        transform var(--cs-transition-fast),
        box-shadow var(--cs-transition-fast),
        background-color var(--cs-transition-fast),
        border-color var(--cs-transition-fast),
        color var(--cs-transition-fast),
        opacity var(--cs-transition-fast);
}


.cs-btn:hover {
    text-decoration: none;

    transform:
        translateY(-1px);
}


.cs-btn:active {
    transform:
        translateY(0);
}


.cs-btn:focus-visible {
    outline:
        3px solid
        rgba(
            var(--cs-primary-rgb),
            0.20
        );

    outline-offset: 3px;
}


.cs-btn:disabled,
.cs-btn.disabled {
    pointer-events: none;

    cursor: not-allowed;

    opacity: 0.55;

    transform: none;

    box-shadow: none;
}


.cs-btn i {
    font-size: 1rem;

    line-height: 1;
}


/* ============================================================
   02. PRIMARY BUTTON
============================================================ */

.cs-btn-primary {
    border-color:
        var(--cs-primary);

    background:
        var(--cs-gradient-primary);

    color:
        var(--cs-white);

    box-shadow:
        0 8px 20px
        rgba(
            var(--cs-primary-rgb),
            0.20
        );
}


.cs-btn-primary:hover,
.cs-btn-primary:focus {
    border-color:
        var(--cs-primary-dark);

    color:
        var(--cs-white);

    box-shadow:
        var(--cs-shadow-primary);
}


.cs-btn-primary:active {
    background:
        var(--cs-primary-dark);

    color:
        var(--cs-white);
}


/* ============================================================
   03. SECONDARY / OUTLINE BUTTON
============================================================ */

.cs-btn-secondary {
    border-color:
        var(--cs-border);

    background:
        var(--cs-white);

    color:
        var(--cs-gray-700);

    box-shadow:
        var(--cs-shadow-xs);
}


.cs-btn-secondary:hover {
    border-color:
        rgba(
            var(--cs-primary-rgb),
            0.28
        );

    background:
        var(--cs-primary-soft);

    color:
        var(--cs-primary-dark);

    box-shadow:
        var(--cs-shadow-sm);
}


.cs-btn-outline-primary {
    border-color:
        rgba(
            var(--cs-primary-rgb),
            0.32
        );

    background:
        transparent;

    color:
        var(--cs-primary);
}


.cs-btn-outline-primary:hover {
    border-color:
        var(--cs-primary);

    background:
        var(--cs-primary-light);

    color:
        var(--cs-primary-dark);
}


/* ============================================================
   04. STATUS BUTTONS
============================================================ */

.cs-btn-success {
    border-color:
        var(--cs-success);

    background:
        var(--cs-success);

    color:
        var(--cs-white);
}


.cs-btn-success:hover {
    border-color:
        var(--cs-success-dark);

    background:
        var(--cs-success-dark);

    color:
        var(--cs-white);
}


.cs-btn-danger {
    border-color:
        var(--cs-danger);

    background:
        var(--cs-danger);

    color:
        var(--cs-white);
}


.cs-btn-danger:hover {
    border-color:
        var(--cs-danger-dark);

    background:
        var(--cs-danger-dark);

    color:
        var(--cs-white);
}


.cs-btn-light {
    border-color:
        var(--cs-border-light);

    background:
        var(--cs-gray-50);

    color:
        var(--cs-gray-700);
}


.cs-btn-light:hover {
    border-color:
        var(--cs-border);

    background:
        var(--cs-gray-100);

    color:
        var(--cs-text-dark);
}


/* ============================================================
   05. BUTTON SIZES
============================================================ */

.cs-btn-sm {
    min-height: 38px;

    padding:
        8px
        14px;

    border-radius:
        var(--cs-radius-sm);

    font-size: 0.84rem;
}


.cs-btn-lg {
    min-height: 54px;

    padding:
        14px
        25px;

    border-radius:
        var(--cs-radius-lg);

    font-size: 1rem;
}


.cs-btn-xl {
    min-height: 60px;

    padding:
        16px
        30px;

    border-radius:
        var(--cs-radius-lg);

    font-size: 1.025rem;
}


.cs-btn-icon {
    width: 44px;
    height: 44px;

    min-width: 44px;
    min-height: 44px;

    padding: 0;
}


.cs-btn-icon.cs-btn-sm {
    width: 38px;
    height: 38px;

    min-width: 38px;
    min-height: 38px;
}


.cs-btn-block {
    width: 100%;
}


/* ============================================================
   06. GENERIC CARD
============================================================ */

.cs-card {
    position: relative;

    min-width: 0;

    overflow: hidden;

    border:
        1px solid
        var(--cs-border-light);

    border-radius:
        var(--cs-radius-xl);

    background:
        var(--cs-white);

    box-shadow:
        var(--cs-shadow-sm);

    transition:
        transform var(--cs-transition),
        box-shadow var(--cs-transition),
        border-color var(--cs-transition);
}


.cs-card-hover:hover {
    border-color:
        rgba(
            var(--cs-primary-rgb),
            0.18
        );

    transform:
        translateY(-4px);

    box-shadow:
        var(--cs-shadow-lg);
}


.cs-card-header {
    padding:
        22px
        24px;

    border-bottom:
        1px solid
        var(--cs-border-light);
}


.cs-card-body {
    padding:
        24px;
}


.cs-card-footer {
    padding:
        18px
        24px;

    border-top:
        1px solid
        var(--cs-border-light);

    background:
        var(--cs-gray-25);
}


/* ============================================================
   07. FEATURE CARD
============================================================ */

.cs-feature-card {
    position: relative;

    height: 100%;

    padding:
        28px;

    overflow: hidden;

    border:
        1px solid
        var(--cs-border-light);

    border-radius:
        var(--cs-radius-xl);

    background:
        var(--cs-white);

    box-shadow:
        var(--cs-shadow-sm);

    transition:
        transform var(--cs-transition),
        box-shadow var(--cs-transition),
        border-color var(--cs-transition);
}


.cs-feature-card:hover {
    border-color:
        rgba(
            var(--cs-primary-rgb),
            0.20
        );

    transform:
        translateY(-5px);

    box-shadow:
        var(--cs-shadow-lg);
}


.cs-feature-card-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    margin-bottom: 22px;

    border-radius:
        var(--cs-radius-lg);

    background:
        var(--cs-primary-light);

    color:
        var(--cs-primary);

    font-size: 1.3rem;
}


.cs-feature-card-title {
    margin-bottom: 10px;

    font-size: 1.125rem;
}


.cs-feature-card-text {
    margin: 0;

    color:
        var(--cs-text-muted);

    font-size: 0.94rem;

    line-height: 1.7;
}


/* ============================================================
   08. JOB CARD
============================================================ */

.cs-job-card {
    position: relative;

    display: flex;

    flex-direction: column;

    gap: 18px;

    width: 100%;

    padding:
        24px;

    border:
        1px solid
        var(--cs-border-light);

    border-radius:
        var(--cs-radius-xl);

    background:
        var(--cs-white);

    box-shadow:
        var(--cs-shadow-sm);

    transition:
        transform var(--cs-transition),
        border-color var(--cs-transition),
        box-shadow var(--cs-transition);
}


.cs-job-card:hover {
    border-color:
        rgba(
            var(--cs-primary-rgb),
            0.22
        );

    transform:
        translateY(-3px);

    box-shadow:
        var(--cs-shadow-md);
}


.cs-job-card-top {
    display: flex;

    align-items: flex-start;

    gap: 16px;
}


.cs-job-company-logo {
    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 58px;
    height: 58px;

    overflow: hidden;

    border:
        1px solid
        var(--cs-border-light);

    border-radius:
        var(--cs-radius-lg);

    background:
        var(--cs-bg-soft);

    color:
        var(--cs-primary);

    font-size: 1.25rem;
    font-weight:
        var(--cs-font-bold);
}


.cs-job-company-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    padding: 7px;
}


.cs-job-card-heading {
    flex: 1 1 auto;

    min-width: 0;
}


.cs-job-card-title {
    margin-bottom: 5px;

    font-size:
        clamp(
            1.05rem,
            2vw,
            1.2rem
        );

    font-weight:
        var(--cs-font-bold);

    line-height: 1.35;
}


.cs-job-card-title a {
    color:
        var(--cs-text-heading);
}


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


.cs-job-company {
    display: flex;

    flex-wrap: wrap;
    align-items: center;

    gap: 6px;

    margin: 0;

    color:
        var(--cs-text-muted);

    font-size: 0.9rem;

    font-weight:
        var(--cs-font-medium);
}


.cs-job-save {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 40px;
    height: 40px;

    border:
        1px solid
        var(--cs-border-light);

    border-radius:
        var(--cs-radius-md);

    background:
        var(--cs-white);

    color:
        var(--cs-gray-500);

    transition:
        all var(--cs-transition-fast);
}


.cs-job-save:hover {
    border-color:
        rgba(
            var(--cs-primary-rgb),
            0.24
        );

    background:
        var(--cs-primary-light);

    color:
        var(--cs-primary);
}


.cs-job-save.is-saved {
    border-color:
        rgba(
            var(--cs-primary-rgb),
            0.22
        );

    background:
        var(--cs-primary-light);

    color:
        var(--cs-primary);
}


.cs-job-meta {
    display: flex;

    flex-wrap: wrap;

    gap:
        9px
        16px;

    color:
        var(--cs-gray-600);

    font-size: 0.875rem;
}


.cs-job-meta-item {
    display: inline-flex;

    align-items: center;

    gap: 7px;
}


.cs-job-meta-item i {
    color:
        var(--cs-gray-400);
}


.cs-job-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.cs-job-card-bottom {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 16px;

    padding-top: 16px;

    border-top:
        1px solid
        var(--cs-border-light);
}


.cs-job-posted {
    color:
        var(--cs-text-muted);

    font-size: 0.82rem;
}


/* ============================================================
   09. BADGES / CHIPS
============================================================ */

.cs-chip {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    min-height: 28px;

    padding:
        5px
        10px;

    border:
        1px solid
        transparent;

    border-radius:
        var(--cs-radius-pill);

    font-size: 0.76rem;

    font-weight:
        var(--cs-font-semibold);

    line-height: 1.1;

    white-space: nowrap;
}


.cs-chip-primary {
    border-color:
        rgba(
            var(--cs-primary-rgb),
            0.13
        );

    background:
        var(--cs-primary-light);

    color:
        var(--cs-primary-dark);
}


.cs-chip-success {
    border-color:
        rgba(7, 148, 85, 0.12);

    background:
        var(--cs-success-light);

    color:
        var(--cs-success-dark);
}


.cs-chip-warning {
    border-color:
        rgba(220, 104, 3, 0.13);

    background:
        var(--cs-warning-light);

    color:
        var(--cs-warning-dark);
}


.cs-chip-danger {
    border-color:
        rgba(217, 45, 32, 0.12);

    background:
        var(--cs-danger-light);

    color:
        var(--cs-danger-dark);
}


.cs-chip-info {
    border-color:
        rgba(21, 112, 239, 0.12);

    background:
        var(--cs-info-light);

    color:
        var(--cs-info-dark);
}


.cs-chip-neutral {
    border-color:
        var(--cs-border-light);

    background:
        var(--cs-gray-50);

    color:
        var(--cs-gray-600);
}


/* ============================================================
   10. STATUS DOT
============================================================ */

.cs-status {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    font-size: 0.82rem;

    font-weight:
        var(--cs-font-semibold);
}


.cs-status::before {
    content: "";

    flex: 0 0 auto;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        var(--cs-gray-400);
}


.cs-status-success {
    color:
        var(--cs-success-dark);
}


.cs-status-success::before {
    background:
        var(--cs-success);
}


.cs-status-warning {
    color:
        var(--cs-warning-dark);
}


.cs-status-warning::before {
    background:
        var(--cs-warning);
}


.cs-status-danger {
    color:
        var(--cs-danger-dark);
}


.cs-status-danger::before {
    background:
        var(--cs-danger);
}


.cs-status-info {
    color:
        var(--cs-info-dark);
}


.cs-status-info::before {
    background:
        var(--cs-info);
}


/* ============================================================
   11. AVATAR
============================================================ */

.careersetu-avatar,
.cs-avatar {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    overflow: hidden;

    border:
        1px solid
        rgba(
            var(--cs-primary-rgb),
            0.14
        );

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--cs-primary-light),
            #dbeafe
        );

    color:
        var(--cs-primary-dark);

    font-size: 0.9rem;

    font-weight:
        var(--cs-font-bold);

    line-height: 1;

    text-transform: uppercase;
}


.careersetu-avatar img,
.cs-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.careersetu-avatar-sm,
.cs-avatar-sm {
    width: 34px;
    height: 34px;

    font-size: 0.78rem;
}


.careersetu-avatar-lg,
.cs-avatar-lg {
    width: 52px;
    height: 52px;

    font-size: 1rem;
}


.cs-avatar-xl {
    width: 72px;
    height: 72px;

    font-size: 1.35rem;
}


/* ============================================================
   12. ALERT SYSTEM
============================================================ */

.careersetu-alert,
.cs-alert {
    position: relative;

    padding:
        16px
        18px;

    border-width: 1px;

    border-style: solid;

    border-radius:
        var(--cs-radius-lg);

    box-shadow:
        var(--cs-shadow-xs);
}


.careersetu-alert-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border-radius:
        var(--cs-radius-md);

    font-size: 1rem;
}


.careersetu-alert-title {
    margin-bottom: 2px;

    color:
        inherit;

    font-size: 0.92rem;
}


.careersetu-alert-message {
    color:
        inherit;

    font-size: 0.875rem;

    line-height: 1.55;
}


.alert-success.careersetu-alert {
    border-color:
        rgba(7, 148, 85, 0.16);

    background:
        var(--cs-success-light);

    color:
        var(--cs-success-dark);
}


.alert-success
.careersetu-alert-icon {
    background:
        rgba(7, 148, 85, 0.10);
}


.alert-danger.careersetu-alert,
.careersetu-validation-summary {
    border-color:
        rgba(217, 45, 32, 0.15);

    background:
        var(--cs-danger-light);

    color:
        var(--cs-danger-dark);
}


.alert-danger
.careersetu-alert-icon,
.careersetu-validation-summary
.careersetu-alert-icon {
    background:
        rgba(217, 45, 32, 0.09);
}


.alert-warning.careersetu-alert {
    border-color:
        rgba(220, 104, 3, 0.15);

    background:
        var(--cs-warning-light);

    color:
        var(--cs-warning-dark);
}


.alert-warning
.careersetu-alert-icon {
    background:
        rgba(220, 104, 3, 0.09);
}


.alert-info.careersetu-alert,
.alert-primary.careersetu-alert {
    border-color:
        rgba(
            var(--cs-primary-rgb),
            0.14
        );

    background:
        var(--cs-info-light);

    color:
        var(--cs-info-dark);
}


.alert-info
.careersetu-alert-icon,
.alert-primary
.careersetu-alert-icon {
    background:
        rgba(
            var(--cs-primary-rgb),
            0.08
        );
}


/* ============================================================
   13. INFO / DISCLOSURE BOX
============================================================ */

.cs-info-box {
    display: flex;

    align-items: flex-start;

    gap: 14px;

    padding:
        17px
        18px;

    border:
        1px solid
        rgba(
            var(--cs-primary-rgb),
            0.14
        );

    border-radius:
        var(--cs-radius-lg);

    background:
        var(--cs-primary-soft);

    color:
        var(--cs-gray-700);
}


.cs-info-box-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 34px;
    height: 34px;

    border-radius:
        var(--cs-radius-md);

    background:
        var(--cs-primary-light);

    color:
        var(--cs-primary);
}


.cs-info-box-content {
    min-width: 0;
}


.cs-info-box-title {
    display: block;

    margin-bottom: 4px;

    color:
        var(--cs-text-dark);

    font-size: 0.9rem;

    font-weight:
        var(--cs-font-bold);
}


.cs-info-box p {
    margin: 0;

    font-size: 0.875rem;

    line-height: 1.6;
}


/* ============================================================
   14. STAT CARD
============================================================ */

.cs-stat-card {
    position: relative;

    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;

    min-width: 0;

    padding:
        22px;

    border:
        1px solid
        var(--cs-border-light);

    border-radius:
        var(--cs-radius-xl);

    background:
        var(--cs-white);

    box-shadow:
        var(--cs-shadow-sm);

    transition:
        transform var(--cs-transition),
        box-shadow var(--cs-transition);
}


.cs-stat-card:hover {
    transform:
        translateY(-2px);

    box-shadow:
        var(--cs-shadow-md);
}


.cs-stat-content {
    min-width: 0;
}


.cs-stat-label {
    margin-bottom: 7px;

    color:
        var(--cs-text-muted);

    font-size: 0.82rem;

    font-weight:
        var(--cs-font-semibold);
}


.cs-stat-value {
    margin-bottom: 5px;

    color:
        var(--cs-text-heading);

    font-size:
        clamp(
            1.55rem,
            3vw,
            2rem
        );

    font-weight:
        var(--cs-font-bold);

    line-height: 1.15;

    letter-spacing: -0.035em;
}


.cs-stat-meta {
    color:
        var(--cs-text-muted);

    font-size: 0.78rem;
}


.cs-stat-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 48px;
    height: 48px;

    border-radius:
        var(--cs-radius-lg);

    background:
        var(--cs-primary-light);

    color:
        var(--cs-primary);

    font-size: 1.15rem;
}


/* ============================================================
   15. PROGRESS BAR
============================================================ */

.cs-progress {
    position: relative;

    width: 100%;
    height: 8px;

    overflow: hidden;

    border-radius:
        var(--cs-radius-pill);

    background:
        var(--cs-gray-100);
}


.cs-progress-bar {
    width: 0;
    height: 100%;

    border-radius:
        inherit;

    background:
        var(--cs-gradient-primary);

    transition:
        width var(--cs-transition-slow);
}


.cs-progress-success
.cs-progress-bar {
    background:
        var(--cs-success);
}


.cs-progress-warning
.cs-progress-bar {
    background:
        var(--cs-warning);
}


.cs-progress-danger
.cs-progress-bar {
    background:
        var(--cs-danger);
}


.cs-progress-meta {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 8px;

    font-size: 0.82rem;
}


.cs-progress-label {
    color:
        var(--cs-gray-700);

    font-weight:
        var(--cs-font-semibold);
}


.cs-progress-value {
    color:
        var(--cs-text-muted);
}


/* ============================================================
   16. PROCESS STEPS
============================================================ */

.cs-steps {
    display: flex;

    align-items: flex-start;

    width: 100%;
}


.cs-step {
    position: relative;

    flex:
        1 1 0;

    min-width: 0;

    text-align: center;
}


.cs-step:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 20px;
    left: 50%;

    z-index: 0;

    width: 100%;
    height: 2px;

    background:
        var(--cs-gray-200);
}


.cs-step-indicator {
    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    margin-bottom: 10px;

    border:
        2px solid
        var(--cs-gray-200);

    border-radius: 50%;

    background:
        var(--cs-white);

    color:
        var(--cs-gray-500);

    font-size: 0.86rem;

    font-weight:
        var(--cs-font-bold);
}


.cs-step-title {
    margin-bottom: 3px;

    color:
        var(--cs-gray-600);

    font-size: 0.82rem;

    font-weight:
        var(--cs-font-semibold);
}


.cs-step-text {
    margin: 0;

    color:
        var(--cs-gray-400);

    font-size: 0.74rem;
}


.cs-step.is-active
.cs-step-indicator {
    border-color:
        var(--cs-primary);

    background:
        var(--cs-primary);

    color:
        var(--cs-white);

    box-shadow:
        0 0 0 5px
        rgba(
            var(--cs-primary-rgb),
            0.09
        );
}


.cs-step.is-active
.cs-step-title {
    color:
        var(--cs-primary-dark);
}


.cs-step.is-complete
.cs-step-indicator {
    border-color:
        var(--cs-success);

    background:
        var(--cs-success);

    color:
        var(--cs-white);
}


.cs-step.is-complete:not(:last-child)::after {
    background:
        var(--cs-success);
}


.cs-step.is-complete
.cs-step-title {
    color:
        var(--cs-success-dark);
}


/* ============================================================
   17. DROPDOWN BASE
============================================================ */

.dropdown-menu {
    padding: 8px;

    border:
        1px solid
        var(--cs-border-light);

    border-radius:
        var(--cs-radius-lg);

    background:
        var(--cs-white);

    box-shadow:
        var(--cs-shadow-lg);
}


.dropdown-item {
    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        10px
        12px;

    border-radius:
        var(--cs-radius-sm);

    color:
        var(--cs-gray-700);

    font-size: 0.875rem;

    font-weight:
        var(--cs-font-medium);

    transition:
        background-color var(--cs-transition-fast),
        color var(--cs-transition-fast);
}


.dropdown-item i {
    width: 18px;

    color:
        var(--cs-gray-500);

    text-align: center;
}


.dropdown-item:hover,
.dropdown-item:focus {
    background:
        var(--cs-primary-soft);

    color:
        var(--cs-primary-dark);
}


.dropdown-item:hover i,
.dropdown-item:focus i {
    color:
        var(--cs-primary);
}


.dropdown-divider {
    margin:
        7px
        4px;

    border-color:
        var(--cs-border-light);
}


/* ============================================================
   18. PAGINATION
============================================================ */

.cs-pagination,
.pagination {
    display: flex;

    flex-wrap: wrap;

    align-items: center;
    justify-content: center;

    gap: 7px;

    margin: 0;
}


.cs-pagination a,
.cs-pagination span,
.pagination .page-link {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 40px;
    height: 40px;

    padding:
        0
        10px;

    border:
        1px solid
        var(--cs-border-light);

    border-radius:
        var(--cs-radius-md) !important;

    background:
        var(--cs-white);

    color:
        var(--cs-gray-600);

    font-size: 0.86rem;

    font-weight:
        var(--cs-font-semibold);

    box-shadow: none;

    transition:
        all var(--cs-transition-fast);
}


.cs-pagination a:hover,
.pagination .page-link:hover {
    border-color:
        rgba(
            var(--cs-primary-rgb),
            0.22
        );

    background:
        var(--cs-primary-light);

    color:
        var(--cs-primary-dark);
}


.cs-pagination .active,
.pagination .page-item.active
.page-link {
    border-color:
        var(--cs-primary);

    background:
        var(--cs-primary);

    color:
        var(--cs-white);

    box-shadow:
        0 6px 16px
        rgba(
            var(--cs-primary-rgb),
            0.20
        );
}


.pagination
.page-item.disabled
.page-link {
    border-color:
        var(--cs-border-light);

    background:
        var(--cs-gray-50);

    color:
        var(--cs-gray-400);
}


/* ============================================================
   19. EMPTY STATE
============================================================ */

.cs-empty-state {
    width: 100%;

    padding:
        clamp(
            42px,
            7vw,
            72px
        )
        24px;

    text-align: center;
}


.cs-empty-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 72px;
    height: 72px;

    margin-bottom: 20px;

    border:
        1px solid
        rgba(
            var(--cs-primary-rgb),
            0.10
        );

    border-radius:
        var(--cs-radius-2xl);

    background:
        var(--cs-primary-soft);

    color:
        var(--cs-primary);

    font-size: 1.7rem;
}


.cs-empty-title {
    margin-bottom: 8px;

    font-size:
        clamp(
            1.25rem,
            3vw,
            1.6rem
        );
}


.cs-empty-text {
    max-width: 520px;

    margin:
        0 auto
        22px;

    color:
        var(--cs-text-muted);

    line-height: 1.7;
}


/* ============================================================
   20. SKELETON LOADER
============================================================ */

.cs-skeleton {
    position: relative;

    overflow: hidden;

    border-radius:
        var(--cs-radius-sm);

    background:
        var(--cs-gray-100);
}


.cs-skeleton::after {
    content: "";

    position: absolute;

    inset: 0;

    transform:
        translateX(-100%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.72),
            transparent
        );

    animation:
        cs-skeleton-loading
        1.5s
        infinite;
}


.cs-skeleton-text {
    width: 100%;
    height: 13px;

    margin-bottom: 9px;
}


.cs-skeleton-text-sm {
    width: 60%;
}


.cs-skeleton-title {
    width: 70%;
    height: 20px;

    margin-bottom: 14px;
}


.cs-skeleton-avatar {
    width: 48px;
    height: 48px;

    border-radius: 50%;
}


@keyframes cs-skeleton-loading {

    100% {
        transform:
            translateX(100%);
    }
}


/* ============================================================
   21. LIST ITEM
============================================================ */

.cs-list {
    margin: 0;
    padding: 0;

    list-style: none;
}


.cs-list-item {
    display: flex;

    align-items: flex-start;

    gap: 13px;

    padding:
        14px
        0;

    border-bottom:
        1px solid
        var(--cs-border-light);
}


.cs-list-item:first-child {
    padding-top: 0;
}


.cs-list-item:last-child {
    padding-bottom: 0;

    border-bottom: 0;
}


.cs-list-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 34px;
    height: 34px;

    border-radius:
        var(--cs-radius-md);

    background:
        var(--cs-primary-light);

    color:
        var(--cs-primary);
}


.cs-list-content {
    flex: 1 1 auto;

    min-width: 0;
}


.cs-list-title {
    margin-bottom: 3px;

    color:
        var(--cs-text-dark);

    font-size: 0.9rem;

    font-weight:
        var(--cs-font-semibold);
}


.cs-list-text {
    margin: 0;

    color:
        var(--cs-text-muted);

    font-size: 0.82rem;

    line-height: 1.55;
}


/* ============================================================
   22. DEFINITION / DETAIL ROW
============================================================ */

.cs-detail-list {
    margin: 0;
}


.cs-detail-row {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    padding:
        13px
        0;

    border-bottom:
        1px solid
        var(--cs-border-light);
}


.cs-detail-row:last-child {
    border-bottom: 0;
}


.cs-detail-label {
    color:
        var(--cs-text-muted);

    font-size: 0.84rem;
}


.cs-detail-value {
    color:
        var(--cs-text-dark);

    font-size: 0.86rem;

    font-weight:
        var(--cs-font-semibold);

    text-align: right;
}


/* ============================================================
   23. VERIFIED LABEL
============================================================ */

.cs-verified {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    color:
        var(--cs-success-dark);

    font-size: 0.78rem;

    font-weight:
        var(--cs-font-semibold);
}


.cs-verified i {
    color:
        var(--cs-success);
}


/* ============================================================
   24. DIVIDER WITH TEXT
============================================================ */

.cs-divider-text {
    display: flex;

    align-items: center;

    gap: 14px;

    width: 100%;

    margin:
        22px
        0;

    color:
        var(--cs-gray-400);

    font-size: 0.78rem;

    text-align: center;
}


.cs-divider-text::before,
.cs-divider-text::after {
    content: "";

    flex: 1 1 auto;

    height: 1px;

    background:
        var(--cs-border-light);
}


/* ============================================================
   25. ICON BUTTON
============================================================ */

.cs-icon-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    padding: 0;

    border:
        1px solid
        var(--cs-border-light);

    border-radius:
        var(--cs-radius-md);

    background:
        var(--cs-white);

    color:
        var(--cs-gray-600);

    transition:
        all var(--cs-transition-fast);
}


.cs-icon-btn:hover {
    border-color:
        rgba(
            var(--cs-primary-rgb),
            0.22
        );

    background:
        var(--cs-primary-light);

    color:
        var(--cs-primary);
}


/* ============================================================
   26. NOTIFICATION DOT
============================================================ */

.cs-notification-dot {
    position: relative;
}


.cs-notification-dot::after {
    content: "";

    position: absolute;

    top: -1px;
    right: -1px;

    width: 9px;
    height: 9px;

    border:
        2px solid
        var(--cs-white);

    border-radius: 50%;

    background:
        var(--cs-danger);
}


/* ============================================================
   27. TIMELINE
============================================================ */

.cs-timeline {
    position: relative;

    margin: 0;
    padding: 0;

    list-style: none;
}


.cs-timeline-item {
    position: relative;

    padding:
        0
        0
        24px
        34px;
}


.cs-timeline-item:last-child {
    padding-bottom: 0;
}


.cs-timeline-item::before {
    content: "";

    position: absolute;

    top: 7px;
    left: 8px;

    width: 10px;
    height: 10px;

    border:
        2px solid
        var(--cs-primary);

    border-radius: 50%;

    background:
        var(--cs-white);

    box-shadow:
        0 0 0 4px
        var(--cs-primary-light);
}


.cs-timeline-item:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 20px;
    bottom: -2px;
    left: 12px;

    width: 2px;

    background:
        var(--cs-border);
}


.cs-timeline-title {
    margin-bottom: 4px;

    color:
        var(--cs-text-dark);

    font-size: 0.9rem;

    font-weight:
        var(--cs-font-semibold);
}


.cs-timeline-meta {
    margin-bottom: 5px;

    color:
        var(--cs-gray-400);

    font-size: 0.75rem;
}


.cs-timeline-text {
    margin: 0;

    color:
        var(--cs-text-muted);

    font-size: 0.84rem;

    line-height: 1.6;
}


/* ============================================================
   28. PAYMENT STATUS COMPONENT
============================================================ */

.cs-payment-status {
    display: flex;

    align-items: flex-start;

    gap: 15px;

    padding:
        18px;

    border:
        1px solid
        var(--cs-border-light);

    border-radius:
        var(--cs-radius-lg);

    background:
        var(--cs-white);
}


.cs-payment-status-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    border-radius:
        var(--cs-radius-md);

    background:
        var(--cs-gray-100);

    color:
        var(--cs-gray-600);
}


.cs-payment-status.is-pending
.cs-payment-status-icon {
    background:
        var(--cs-warning-light);

    color:
        var(--cs-warning);
}


.cs-payment-status.is-verified
.cs-payment-status-icon {
    background:
        var(--cs-success-light);

    color:
        var(--cs-success);
}


.cs-payment-status.is-rejected
.cs-payment-status-icon {
    background:
        var(--cs-danger-light);

    color:
        var(--cs-danger);
}


.cs-payment-status-content {
    min-width: 0;
}


.cs-payment-status-title {
    margin-bottom: 4px;

    color:
        var(--cs-text-dark);

    font-size: 0.92rem;

    font-weight:
        var(--cs-font-bold);
}


.cs-payment-status-text {
    margin: 0;

    color:
        var(--cs-text-muted);

    font-size: 0.83rem;

    line-height: 1.55;
}


/* ============================================================
   29. ASSESSMENT QUESTION NAVIGATION
============================================================ */

.cs-question-nav {
    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap: 8px;
}


.cs-question-number {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    aspect-ratio: 1;

    border:
        1px solid
        var(--cs-border);

    border-radius:
        var(--cs-radius-sm);

    background:
        var(--cs-white);

    color:
        var(--cs-gray-600);

    font-size: 0.78rem;

    font-weight:
        var(--cs-font-semibold);

    transition:
        all var(--cs-transition-fast);
}


.cs-question-number:hover {
    border-color:
        var(--cs-primary);

    color:
        var(--cs-primary);
}


.cs-question-number.is-current {
    border-color:
        var(--cs-primary);

    background:
        var(--cs-primary);

    color:
        var(--cs-white);
}


.cs-question-number.is-answered {
    border-color:
        rgba(7, 148, 85, 0.18);

    background:
        var(--cs-success-light);

    color:
        var(--cs-success-dark);
}


/* ============================================================
   30. SCORE COMPONENT
============================================================ */

.cs-score {
    display: flex;

    align-items: center;

    gap: 20px;
}


.cs-score-circle {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 92px;
    height: 92px;

    border:
        8px solid
        var(--cs-primary-light);

    border-radius: 50%;

    background:
        var(--cs-white);

    color:
        var(--cs-primary-dark);

    font-size: 1.4rem;

    font-weight:
        var(--cs-font-bold);

    box-shadow:
        var(--cs-shadow-sm);
}


.cs-score-content {
    min-width: 0;
}


.cs-score-title {
    margin-bottom: 5px;

    font-size: 1.05rem;
}


.cs-score-text {
    margin: 0;

    color:
        var(--cs-text-muted);

    font-size: 0.86rem;

    line-height: 1.6;
}


/* ============================================================
   31. TOOLBAR CHIP
============================================================ */

.cs-filter-chip {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    min-height: 34px;

    padding:
        6px
        11px;

    border:
        1px solid
        rgba(
            var(--cs-primary-rgb),
            0.15
        );

    border-radius:
        var(--cs-radius-pill);

    background:
        var(--cs-primary-soft);

    color:
        var(--cs-primary-dark);

    font-size: 0.78rem;

    font-weight:
        var(--cs-font-semibold);
}


.cs-filter-chip button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;

    padding: 0;

    background:
        transparent;

    color:
        inherit;

    opacity: 0.7;
}


.cs-filter-chip button:hover {
    opacity: 1;
}


/* ============================================================
   32. TABLE STATUS
============================================================ */

.cs-table-status {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding:
        5px
        9px;

    border-radius:
        var(--cs-radius-pill);

    font-size: 0.74rem;

    font-weight:
        var(--cs-font-semibold);
}


/* ============================================================
   33. RESPONSIVE COMPONENTS
============================================================ */

@media (max-width: 991.98px) {

    .cs-job-card {
        padding:
            22px;
    }


    .cs-feature-card {
        padding:
            24px;
    }


    .cs-steps {
        overflow-x: auto;

        padding-bottom: 8px;
    }


    .cs-step {
        flex:
            0 0 150px;
    }
}


@media (max-width: 767.98px) {

    .cs-btn-lg {
        min-height: 50px;

        padding:
            12px
            20px;
    }


    .cs-card {
        border-radius:
            var(--cs-radius-lg);
    }


    .cs-card-header,
    .cs-card-body {
        padding:
            18px;
    }


    .cs-card-footer {
        padding:
            15px
            18px;
    }


    .cs-feature-card {
        padding:
            22px;
    }


    .cs-job-card {
        gap: 15px;

        padding:
            18px;

        border-radius:
            var(--cs-radius-lg);
    }


    .cs-job-company-logo {
        width: 50px;
        height: 50px;
    }


    .cs-job-card-bottom {
        align-items: flex-start;

        flex-direction: column;
    }


    .cs-stat-card {
        padding:
            18px;
    }


    .cs-info-box {
        padding:
            15px;
    }


    .cs-detail-row {
        gap: 12px;
    }
}


@media (max-width: 575.98px) {

    .cs-btn {
        min-height: 44px;

        padding:
            10px
            16px;
    }


    .cs-btn-xl {
        min-height: 52px;

        padding:
            13px
            20px;
    }


    .cs-job-card-top {
        gap: 12px;
    }


    .cs-job-save {
        width: 36px;
        height: 36px;
    }


    .cs-job-meta {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr);

        gap: 8px;
    }


    .cs-feature-card {
        padding:
            20px;
    }


    .cs-feature-card-icon {
        width: 48px;
        height: 48px;

        margin-bottom: 18px;
    }


    .cs-stat-card {
        padding:
            17px;
    }


    .cs-stat-icon {
        width: 44px;
        height: 44px;
    }


    .cs-payment-status {
        padding:
            15px;
    }


    .cs-score {
        align-items: flex-start;

        flex-direction: column;
    }


    .cs-question-nav {
        grid-template-columns:
            repeat(
                5,
                minmax(38px, 1fr)
            );
    }


    .cs-detail-row {
        flex-direction: column;

        align-items: flex-start;

        gap: 4px;
    }


    .cs-detail-value {
        text-align: left;
    }


    .careersetu-alert,
    .cs-alert {
        padding:
            14px;
    }
}


/* ============================================================
   34. HOVER-SAFE DEVICES
============================================================ */

@media (
    hover: none
) {

    .cs-card-hover:hover,
    .cs-feature-card:hover,
    .cs-job-card:hover,
    .cs-stat-card:hover,
    .cs-btn:hover {
        transform: none;
    }
}


/* ============================================================
   35. REDUCED MOTION
============================================================ */

@media (
    prefers-reduced-motion: reduce
) {

    .cs-card,
    .cs-feature-card,
    .cs-job-card,
    .cs-stat-card,
    .cs-btn,
    .cs-progress-bar,
    .cs-icon-btn,
    .cs-job-save {
        transition: none;
    }


    .cs-skeleton::after {
        animation: none;
    }
}


/* ============================================================
   36. PRINT
============================================================ */

@media print {

    .cs-btn,
    .cs-icon-btn,
    .cs-job-save,
    .cs-pagination,
    .pagination {
        display: none !important;
    }


    .cs-card,
    .cs-feature-card,
    .cs-job-card,
    .cs-stat-card,
    .cs-payment-status {
        break-inside: avoid;

        border:
            1px solid
            #dddddd !important;

        box-shadow:
            none !important;
    }
}


/* ============================================================
   END OF COMPONENT SYSTEM
============================================================ */