/* =============================================
   Applicant Portal - Custom Styles
   ============================================= */

.applicant-portal {
    background-color: #f0f4f8;
    min-height: 100vh;
    padding: 30px 0;
}

/* Brand header */
.applicant-brand .brand-title {
    font-size: 1.65rem;
    font-weight: 700;
    color: #1a3353;
    margin: 0;
}

.applicant-brand .brand-title span {
    color: #2f80ed;
}

/* Card overrides for applicant */
.applicant-card {
    background: #f7faff;
    border: 1px solid #e2eaf3;
    border-radius: 10px;
    box-shadow: none;
}

.applicant-card .card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a3353;
    padding-bottom: 14px;
    border-bottom: 2px solid #e2eaf3;
}

/* =============================================
   Status Stepper
   ============================================= */
.status-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0 10px;
}

.status-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}

.status-step .step-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
}

.status-step.step-active .step-icon {
    width: 52px;
    height: 52px;
    font-size: 22px;
    border: 3px solid #d6e4f0;
}

.status-step.step-active .step-icon.bg-step-purple {
    box-shadow: 0 0 0 4px rgba(142, 68, 173, 0.18);
    border-color: #d2a8e6;
}

.status-step.step-active .step-icon.bg-step-orange {
    box-shadow: 0 0 0 4px rgba(242, 153, 74, 0.18);
    border-color: #fbd5b0;
}

.status-step.step-active .step-icon.bg-step-blue {
    box-shadow: 0 0 0 4px rgba(47, 128, 237, 0.15);
    border-color: #a8c8f0;
}

.status-step.step-active .step-icon.bg-step-green {
    box-shadow: 0 0 0 4px rgba(39, 174, 96, 0.15);
    border-color: #a8e6c3;
}

.status-step .step-label {
    margin-top: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #8a9bb5;
}

.status-step.step-active .step-label {
    font-weight: 700;
}

#step-candidate-input.step-active .step-label { color: #8e44ad; }
#step-open.step-active .step-label { color: #27ae60; }
#step-pending.step-active .step-label { color: #f2994a; }
#step-review.step-active .step-label { color: #2f80ed; }
#step-complete.step-active .step-label { color: #27ae60; }

.status-step.step-done .step-label {
    color: #5a6d84;
}

.step-icon.bg-step-green { background-color: #27ae60; }
.step-icon.bg-step-orange { background-color: #f2994a; }
.step-icon.bg-step-blue { background-color: #2f80ed; }
.step-icon.bg-step-purple { background-color: #8e44ad; }

.status-connector {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    margin: 0 -2px;
    position: relative;
    top: -12px;
}

.connector-green { background-color: #27ae60; }
.connector-orange { background-color: #f2994a; }
.connector-blue { background-color: #2f80ed; }
.connector-purple { background-color: #8e44ad; }
.connector-dark { background-color: #1a3353; }

/* =============================================
   Action Items
   ============================================= */
.action-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid #e8eff7;
}

.action-item:last-child {
    border-bottom: none;
    padding-bottom: 4px;
}

.action-icon-box {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background-color: #edf2f7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #5a6d84;
    flex-shrink: 0;
}

/* Action buttons */
.btn-action {
    font-weight: 600;
    font-size: 0.875rem;
    padding: 8px 20px;
    border-radius: 6px;
    white-space: nowrap;
}

.btn-action-green {
    background-color: #27ae60;
    border-color: #27ae60;
    color: #fff;
}
.btn-action-green:hover { background-color: #219653; color: #fff; }

.btn-action-orange {
    background-color: #f2994a;
    border-color: #f2994a;
    color: #fff;
}
.btn-action-orange:hover { background-color: #e08b3e; color: #fff; }

.btn-action-blue {
    background-color: #2f80ed;
    border-color: #2f80ed;
    color: #fff;
}
.btn-action-blue:hover { background-color: #2672d4; color: #fff; }

/* Download button - disabled state */
.btn-download-disabled {
    background-color: #e8eff7;
    border: 1px solid #d6e0eb;
    color: #8a9bb5;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 8px 18px;
    border-radius: 6px;
    cursor: not-allowed;
}

/* Dispute outline button */
.btn-dispute-outline {
    background-color: #fff;
    border: 2px solid #d6e0eb;
    color: #2f80ed;
    font-weight: 600;
    padding: 10px 22px;
    border-radius: 6px;
}
.btn-dispute-outline:hover { background-color: #f7faff; border-color: #2f80ed; color: #2f80ed; }

/* =============================================
   Responsive
   ============================================= */
@media (max-width: 576px) {
    .action-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .action-item .btn-action {
        width: 100%;
        text-align: center;
    }
    .status-step .step-icon { width: 24px; height: 24px; font-size: 11px; }
    .status-step.step-active .step-icon { width: 36px; height: 36px; font-size: 16px; }
    .status-step .step-label { font-size: 0.68rem; }
    .status-connector { height: 3px; }
}