/*
 * ADMIN.CSS
 * Giao diện dùng chung cho Dashboard và quản lý hồ sơ.
 * Trung tâm Dịch vụ Việc làm Đồng Nai
 */

.admin-dashboard-v3 {
        padding: 40px 0 28px;
        background:
            radial-gradient(circle at 8% 10%, rgba(0, 119, 200, .08), transparent 26%),
            radial-gradient(circle at 92% 12%, rgba(6, 182, 212, .08), transparent 22%);
    }

    .admin-welcome {
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 28px;
        min-height: 260px;
        padding: 42px;
        margin-bottom: 30px;
        border-radius: 30px;
        color: #fff;
        background:
            linear-gradient(120deg, rgba(0, 63, 125, .98), rgba(0, 119, 200, .95)),
            linear-gradient(135deg, #005baa, #0891b2);
        box-shadow: 0 24px 60px rgba(0, 74, 139, .2);
    }

    .admin-welcome::before,
    .admin-welcome::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
    }

    .admin-welcome::before {
        width: 440px;
        height: 440px;
        right: -170px;
        top: -240px;
        background: rgba(255, 255, 255, .11);
    }

    .admin-welcome::after {
        width: 250px;
        height: 250px;
        right: 150px;
        bottom: -190px;
        border: 42px solid rgba(255, 255, 255, .07);
    }

    .admin-welcome-content,
    .admin-welcome-side {
        position: relative;
        z-index: 2;
    }

    .admin-welcome-content {
        max-width: 720px;
    }

    .admin-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 8px 15px;
        margin-bottom: 17px;
        border: 1px solid rgba(255, 255, 255, .28);
        border-radius: 999px;
        background: rgba(255, 255, 255, .13);
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .55px;
    }

    .admin-welcome h1 {
        margin: 0 0 12px;
        font-size: clamp(31px, 4vw, 46px);
        line-height: 1.14;
        font-weight: 800;
        letter-spacing: -.9px;
    }

    .admin-welcome h1 span {
        color: #aee9ff;
    }

    .admin-welcome-content > p {
        max-width: 680px;
        margin: 0;
        color: rgba(255, 255, 255, .9);
        line-height: 1.75;
        font-size: 15.5px;
    }

    .admin-welcome-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 22px;
    }

    .admin-welcome-meta > span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 12px;
        border-radius: 12px;
        background: rgba(255, 255, 255, .11);
        color: rgba(255, 255, 255, .94);
        font-size: 13px;
        font-weight: 600;
    }

    .admin-welcome-side {
        min-width: 285px;
    }

    .admin-profile-card {
        display: flex;
        align-items: center;
        gap: 13px;
        padding: 17px;
        border: 1px solid rgba(255, 255, 255, .22);
        border-radius: 21px;
        background: rgba(255, 255, 255, .13);
        backdrop-filter: blur(12px);
    }

    .admin-avatar {
        display: grid;
        place-items: center;
        width: 58px;
        height: 58px;
        flex: 0 0 auto;
        border-radius: 18px;
        background: #fff;
        color: #005baa;
        font-size: 27px;
        box-shadow: 0 10px 26px rgba(0, 0, 0, .12);
    }

    .admin-profile-text {
        min-width: 0;
    }

    .admin-profile-text > span {
        display: block;
        margin-bottom: 2px;
        color: rgba(255, 255, 255, .76);
        font-size: 12px;
    }

    .admin-profile-text strong {
        display: block;
        overflow: hidden;
        color: #fff;
        font-size: 16px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .admin-profile-text small {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 5px;
        color: rgba(255, 255, 255, .83);
        font-size: 11.5px;
    }

    .admin-profile-text small i {
        color: #77f2ae;
        font-size: 8px;
    }

    .admin-logout-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        margin-top: 12px;
        padding: 12px 17px;
        border: 1px solid rgba(255, 255, 255, .24);
        border-radius: 15px;
        background: rgba(8, 32, 61, .2);
        color: #fff;
        font-weight: 700;
        text-decoration: none;
        transition: .22s ease;
    }

    .admin-logout-btn:hover {
        transform: translateY(-2px);
        background: #fff;
        color: #005baa;
    }

    .admin-overview {
        margin-bottom: 30px;
    }

    .admin-section-heading {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 18px;
    }

    .admin-section-heading span {
        display: block;
        margin-bottom: 3px;
        color: #64748b;
        font-size: 12.5px;
        font-weight: 750;
        text-transform: uppercase;
        letter-spacing: .7px;
    }

    .admin-section-heading h2 {
        margin: 0;
        color: #0f172a;
        font-size: 25px;
        font-weight: 800;
        letter-spacing: -.4px;
    }

    .admin-view-all {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 9px 13px;
        border-radius: 12px;
        background: #eaf4ff;
        color: #005baa;
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
        transition: .2s ease;
    }

    .admin-view-all:hover {
        background: #005baa;
        color: #fff;
    }

    .admin-stats-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }

    .admin-stat-card {
        position: relative;
        overflow: hidden;
        padding: 23px;
        border: 1px solid #e1eaf3;
        border-radius: 23px;
        background: rgba(255, 255, 255, .97);
        box-shadow: 0 13px 33px rgba(15, 23, 42, .07);
        transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }

    .admin-stat-card::after {
        content: "";
        position: absolute;
        width: 110px;
        height: 110px;
        right: -48px;
        bottom: -55px;
        border-radius: 50%;
        background: var(--stat-soft);
        opacity: .68;
    }

    .admin-stat-card:hover {
        transform: translateY(-6px);
        border-color: var(--stat-color);
        box-shadow: 0 22px 48px rgba(15, 23, 42, .12);
    }

    .stat-jobs {
        --stat-color: #005baa;
        --stat-soft: #dbeeff;
    }

    .stat-active {
        --stat-color: #159447;
        --stat-soft: #dff8e8;
    }

    .stat-applicants {
        --stat-color: #7c3aed;
        --stat-soft: #eee5ff;
    }

    .stat-today {
        --stat-color: #dc2626;
        --stat-soft: #fee2e2;
    }

    .stat-week {
        --stat-color: #d97706;
        --stat-soft: #fef1ce;
    }

    .stat-month {
        --stat-color: #0891b2;
        --stat-soft: #d9f5fa;
    }

    .stat-card-top {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .stat-icon {
        display: grid;
        place-items: center;
        width: 52px;
        height: 52px;
        border-radius: 17px;
        background: var(--stat-soft);
        color: var(--stat-color);
        font-size: 23px;
    }

    .stat-chip {
        padding: 6px 9px;
        border-radius: 999px;
        background: #f5f8fb;
        color: #64748b;
        font-size: 11px;
        font-weight: 700;
    }

    .stat-value {
        position: relative;
        z-index: 2;
        margin-top: 18px;
        color: var(--stat-color);
        font-size: 38px;
        line-height: 1;
        font-weight: 850;
        letter-spacing: -.8px;
    }

    .stat-label {
        position: relative;
        z-index: 2;
        margin-top: 8px;
        color: #1e293b;
        font-size: 15px;
        font-weight: 750;
    }

    .stat-footer {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 7px;
        margin-top: 16px;
        padding-top: 13px;
        border-top: 1px solid #edf2f7;
        color: #7a899e;
        font-size: 12.5px;
    }

    .admin-workspace {
        display: grid;
        grid-template-columns: minmax(0, 1.75fr) minmax(280px, .75fr);
        gap: 22px;
        align-items: start;
    }

    .admin-main-panel,
    .side-panel-card {
        border: 1px solid #e1eaf3;
        background: rgba(255, 255, 255, .97);
        box-shadow: 0 16px 40px rgba(15, 23, 42, .075);
    }

    .admin-main-panel {
        padding: 27px;
        border-radius: 27px;
    }

    .admin-action-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
    }

    .admin-action-item {
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: flex-start;
        gap: 15px;
        min-height: 170px;
        padding: 21px;
        border: 1px solid #e3ebf3;
        border-radius: 21px;
        background: #fff;
        color: #0f172a;
        text-decoration: none;
        transition: .24s ease;
    }

    .admin-action-item::after {
        content: "\F138";
        position: absolute;
        right: 14px;
        bottom: 8px;
        color: var(--action-color);
        font-family: "bootstrap-icons";
        font-size: 53px;
        opacity: .05;
        transform: rotate(-17deg);
    }

    .admin-action-item:hover {
        transform: translateY(-5px);
        border-color: var(--action-color);
        color: #0f172a;
        box-shadow: 0 17px 37px rgba(15, 23, 42, .095);
    }

    .action-applicants {
        --action-color: #159447;
        --action-soft: #e4f9eb;
    }

    .action-status {
        --action-color: #d97706;
        --action-soft: #fff3d6;
    }

    .action-jobs {
        --action-color: #005baa;
        --action-soft: #e5f2ff;
    }

    .action-admins {
        --action-color: #334155;
        --action-soft: #e9eef4;
    }

    .action-logs {
        --action-color: #0891b2;
        --action-soft: #ddf7fb;
    }

    .action-icon {
        display: grid;
        place-items: center;
        width: 54px;
        height: 54px;
        flex: 0 0 auto;
        border-radius: 17px;
        background: var(--action-soft);
        color: var(--action-color);
        font-size: 24px;
    }

    .action-content {
        position: relative;
        z-index: 2;
        min-width: 0;
    }

    .action-content h3 {
        margin: 2px 0 7px;
        color: #0f172a;
        font-size: 17px;
        font-weight: 800;
    }

    .action-content p {
        min-height: 61px;
        margin: 0;
        color: #68778c;
        font-size: 13.2px;
        line-height: 1.55;
    }

    .action-content span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin-top: 12px;
        color: var(--action-color);
        font-size: 12.5px;
        font-weight: 750;
    }

    .admin-side-panel {
        display: grid;
        gap: 17px;
    }

    .side-panel-card {
        padding: 22px;
        border-radius: 23px;
    }

    .admin-priority-card {
        position: relative;
        overflow: hidden;
        color: #fff;
        background: linear-gradient(135deg, #005baa, #0188c7);
        border-color: transparent;
    }

    .admin-priority-card::after {
        content: "";
        position: absolute;
        width: 140px;
        height: 140px;
        right: -70px;
        top: -70px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .12);
    }

    .side-card-icon {
        position: relative;
        z-index: 2;
        display: grid;
        place-items: center;
        width: 47px;
        height: 47px;
        margin-bottom: 14px;
        border-radius: 15px;
        background: rgba(255, 255, 255, .15);
        font-size: 21px;
    }

    .admin-priority-card > div:last-child {
        position: relative;
        z-index: 2;
    }

    .admin-priority-card span {
        color: rgba(255, 255, 255, .76);
        font-size: 12px;
        font-weight: 650;
        text-transform: uppercase;
        letter-spacing: .55px;
    }

    .admin-priority-card h3 {
        margin: 4px 0 8px;
        font-size: 20px;
        font-weight: 800;
    }

    .admin-priority-card p {
        margin: 0;
        color: rgba(255, 255, 255, .86);
        font-size: 13px;
        line-height: 1.55;
    }

    .admin-priority-card a {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin-top: 16px;
        padding: 9px 12px;
        border-radius: 11px;
        background: #fff;
        color: #005baa;
        font-size: 12.5px;
        font-weight: 750;
        text-decoration: none;
    }

    .system-status-row,
    .system-info-list > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
    }

    .system-status-row {
        padding-bottom: 15px;
        border-bottom: 1px solid #edf2f7;
        color: #334155;
        font-size: 13px;
        font-weight: 700;
    }

    .system-status-row > div {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .system-status-row strong {
        color: #159447;
    }

    .system-status-dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #22c55e;
        box-shadow: 0 0 0 5px rgba(34, 197, 94, .12);
    }

    .system-info-list {
        display: grid;
        gap: 13px;
        padding-top: 15px;
    }

    .system-info-list > div {
        color: #718096;
        font-size: 12.5px;
    }

    .system-info-list span {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .system-info-list i {
        color: #005baa;
    }

    .system-info-list strong {
        color: #334155;
        font-size: 12px;
    }

    .admin-tip-card {
        display: flex;
        gap: 13px;
        align-items: flex-start;
    }

    .tip-icon {
        display: grid;
        place-items: center;
        width: 43px;
        height: 43px;
        flex: 0 0 auto;
        border-radius: 14px;
        background: #fff3cd;
        color: #b7791f;
        font-size: 19px;
    }

    .admin-tip-card h3 {
        margin: 2px 0 6px;
        color: #0f172a;
        font-size: 15px;
        font-weight: 800;
    }

    .admin-tip-card p {
        margin: 0;
        color: #718096;
        font-size: 12.5px;
        line-height: 1.55;
    }

    @media (max-width: 1199.98px) {
        .admin-workspace {
            grid-template-columns: 1fr;
        }

        .admin-side-panel {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    @media (max-width: 991.98px) {
        .admin-welcome {
            align-items: stretch;
            flex-direction: column;
            padding: 34px;
        }

        .admin-welcome-side {
            min-width: 0;
        }

        .admin-stats-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 767.98px) {
        .admin-dashboard-v3 {
            padding-top: 24px;
        }

        .admin-welcome {
            min-height: auto;
            padding: 27px 22px;
            border-radius: 23px;
        }

        .admin-welcome h1 {
            font-size: 29px;
        }

        .admin-section-heading {
            align-items: flex-start;
            flex-direction: column;
        }

        .admin-stats-grid,
        .admin-action-grid,
        .admin-side-panel {
            grid-template-columns: 1fr;
        }

        .admin-main-panel {
            padding: 20px;
            border-radius: 22px;
        }

        .admin-action-item {
            min-height: auto;
        }

        .action-content p {
            min-height: 0;
        }
    }

    @media (max-width: 479.98px) {
        .admin-stats-grid {
            gap: 13px;
        }

        .admin-stat-card {
            padding: 19px;
        }

        .stat-value {
            font-size: 33px;
        }

        .admin-action-item {
            padding: 18px;
        }
    }

/* ================= STATUS LIST ================= */

.status-page {
        padding: 42px 0 20px;
    }

    .status-hero {
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 24px;
        padding: 34px;
        margin-bottom: 24px;
        border-radius: 28px;
        color: white;
        background: linear-gradient(135deg, #005baa, #008bd2);
        box-shadow: 0 18px 45px rgba(15,23,42,.13);
    }

        .status-hero::before {
            content: "";
            position: absolute;
            width: 360px;
            height: 360px;
            right: -150px;
            top: -170px;
            border-radius: 50%;
            background: rgba(255,255,255,.12);
        }

        .status-hero > * {
            position: relative;
            z-index: 2;
        }

    .status-kicker {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 15px;
        margin-bottom: 14px;
        border: 1px solid rgba(255,255,255,.28);
        border-radius: 999px;
        background: rgba(255,255,255,.16);
        font-weight: 650;
    }

    .status-hero h2 {
        margin-bottom: 8px;
        font-size: 32px;
        font-weight: 760;
    }

    .status-hero p {
        margin: 0;
        opacity: .94;
    }

    .btn-add-applicant {
        padding: 12px 20px;
        border-radius: 14px;
        color: #005baa;
        background: white;
        font-weight: 720;
        white-space: nowrap;
    }

        .btn-add-applicant:hover {
            color: #00498a;
            background: #f8fafc;
        }

    .status-hero-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .btn-export-status {
        padding: 12px 20px;
        border: none;
        border-radius: 14px;
        color: white;
        background: linear-gradient(135deg, #16a34a, #15803d);
        font-weight: 720;
        white-space: nowrap;
        box-shadow: 0 12px 24px rgba(0,0,0,.12);
    }

        .btn-export-status:hover {
            color: white;
            background: linear-gradient(135deg, #15803d, #166534);
        }

    .status-stat-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 14px;
        margin-bottom: 24px;
    }

    .status-stat-card {
        display: flex;
        align-items: center;
        gap: 13px;
        padding: 18px;
        border: 1px solid #dbe7f3;
        border-radius: 20px;
        background: white;
        text-decoration: none;
        box-shadow: 0 12px 28px rgba(15,23,42,.07);
        transition: .2s;
    }

        .status-stat-card:hover {
            transform: translateY(-4px);
        }

        .status-stat-card > i {
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 14px;
            font-size: 21px;
        }

        .status-stat-card strong {
            display: block;
            color: #0f172a;
            font-size: 23px;
        }

        .status-stat-card span {
            color: #64748b;
            font-size: 13px;
            font-weight: 650;
        }

    .stat-new > i {
        color: #2563eb;
        background: #dbeafe;
    }

    .stat-processing > i {
        color: #b45309;
        background: #fef3c7;
    }

    .stat-contacted > i {
        color: #c2410c;
        background: #ffedd5;
    }

    .stat-success > i {
        color: #15803d;
        background: #dcfce7;
    }

    .stat-failed > i {
        color: #dc2626;
        background: #fee2e2;
    }

    .status-filter-panel {
        padding: 24px;
        margin-bottom: 20px;
        border: 1px solid #dbe7f3;
        border-radius: 24px;
        background: white;
        box-shadow: 0 14px 34px rgba(15,23,42,.08);
    }

    .form-label {
        color: #0f172a;
        font-weight: 650;
    }

    .modern-field {
        position: relative;
    }

        .modern-field > i {
            position: absolute;
            left: 17px;
            top: 50%;
            z-index: 2;
            transform: translateY(-50%);
            color: #005baa;
        }

        .modern-field .form-control,
        .modern-field .form-select {
            height: 52px;
            padding-left: 47px;
            border: 1px solid #dce6f1;
            border-radius: 16px;
            box-shadow: none;
        }

    .btn-filter-status {
        height: 52px;
        border: none;
        border-radius: 16px;
        color: white;
        background: linear-gradient(135deg, #005baa, #0077c8);
        font-weight: 720;
    }

    .clear-filter-link {
        color: #64748b;
        text-decoration: none;
        font-weight: 650;
    }

    .status-total {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 16px;
        margin-bottom: 20px;
        border: 1px solid #dbe7f3;
        border-radius: 999px;
        color: #64748b;
        background: white;
    }

        .status-total strong {
            color: #005baa;
        }

    .status-table-card {
        overflow: hidden;
        border: 1px solid #dbe7f3;
        border-radius: 24px;
        background: white;
        box-shadow: 0 14px 34px rgba(15,23,42,.08);
    }

    .status-table {
        margin-bottom: 0;
    }

    .status-table {
        min-width: 1780px;
    }

    .identity-badge,
    .salary-badge {
        display: inline-block;
        padding: 7px 10px;
        border-radius: 999px;
        font-weight: 700;
        white-space: nowrap;
    }

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

    .salary-badge {
        color: #15803d;
        background: #dcfce7;
    }

    .status-actions {
        display: flex;
        gap: 8px;
        align-items: center;
        white-space: nowrap;
    }

    .btn-view-profile {
        padding: 8px 13px;
        border: none;
        border-radius: 11px;
        color: #075985;
        background: #e0f2fe;
        font-weight: 650;
        white-space: nowrap;
    }

    .btn-view-profile:hover {
        color: #075985;
        background: #bae6fd;
    }

    .applicant-detail-modal {
        overflow: hidden;
        border: none;
        border-radius: 26px;
        box-shadow: 0 28px 80px rgba(15,23,42,.25);
    }

    .applicant-detail-modal .modal-header {
        padding: 24px 28px;
        border: none;
        color: white;
        background: linear-gradient(135deg, #005baa, #008bd2);
    }

    .applicant-detail-modal .btn-close {
        filter: invert(1);
        opacity: .9;
    }

    .modal-kicker {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin-bottom: 7px;
        font-size: 13px;
        font-weight: 650;
        opacity: .9;
    }

    .applicant-detail-modal .modal-title {
        font-size: 24px;
        font-weight: 760;
    }

    .applicant-detail-modal .modal-body {
        padding: 26px 28px;
        background: #f8fbff;
    }

    .profile-summary {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 18px;
        margin-bottom: 20px;
        border: 1px solid #dbe7f3;
        border-radius: 20px;
        background: white;
    }

    .profile-summary-avatar {
        width: 54px;
        height: 54px;
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: #005baa;
        background: #eaf4ff;
        font-size: 23px;
    }

    .profile-summary h4 {
        margin: 0 0 4px;
        color: #0f172a;
        font-weight: 760;
    }

    .profile-summary p {
        margin: 0;
        color: #64748b;
    }

    .profile-summary > .status-badge {
        margin-left: auto;
    }

    .applicant-detail-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 13px;
    }

    .detail-profile-item {
        min-width: 0;
        padding: 14px 15px;
        border: 1px solid #e2eaf3;
        border-radius: 16px;
        background: white;
    }

    .detail-profile-item.detail-wide {
        grid-column: span 2;
    }

    .detail-profile-item.detail-full {
        grid-column: 1 / -1;
    }

    .detail-profile-item span {
        display: block;
        margin-bottom: 5px;
        color: #64748b;
        font-size: 13px;
        font-weight: 650;
    }

    .detail-profile-item strong {
        display: block;
        color: #0f172a;
        line-height: 1.55;
        white-space: pre-line;
        word-break: break-word;
    }

    .applicant-detail-modal .modal-footer {
        padding: 16px 28px;
        border-top: 1px solid #e7eef6;
        background: white;
    }


        .status-table thead th {
            padding: 16px;
            color: #005baa;
            background: #eaf4ff;
            white-space: nowrap;
        }

        .status-table tbody td {
            padding: 16px;
            border-color: #eef3f8;
        }

    .applicant-info {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 180px;
    }

    .applicant-avatar {
        width: 40px;
        height: 40px;
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: #005baa;
        background: #eaf4ff;
    }

    .applicant-info small {
        display: block;
        color: #64748b;
    }

    .status-badge {
        display: inline-block;
        padding: 8px 12px;
        border-radius: 999px;
        font-weight: 700;
        white-space: nowrap;
    }

    .status-new {
        color: #1d4ed8;
        background: #dbeafe;
    }

    .status-processing {
        color: #b45309;
        background: #fef3c7;
    }

    .status-contacted {
        color: #c2410c;
        background: #ffedd5;
    }

    .status-success {
        color: #15803d;
        background: #dcfce7;
    }

    .status-failed {
        color: #dc2626;
        background: #fee2e2;
    }

    .note-preview {
        display: inline-block;
        max-width: 220px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .btn-edit-status {
        padding: 8px 13px;
        border-radius: 11px;
        color: white;
        background: #005baa;
        text-decoration: none;
        font-weight: 650;
        white-space: nowrap;
    }

        .btn-edit-status:hover {
            color: white;
            background: #00498a;
        }

    @media (max-width: 1200px) {
        .status-stat-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 992px) {
        .applicant-detail-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 768px) {
        .status-hero {
            flex-direction: column;
            align-items: flex-start;
            padding: 26px;
        }

        .status-hero-actions {
            width: 100%;
        }

            .status-hero-actions .btn {
                flex: 1 1 180px;
            }

        .status-stat-grid {
            grid-template-columns: 1fr;
        }

        .applicant-detail-modal .modal-body {
            padding: 20px;
        }

        .profile-summary {
            align-items: flex-start;
            flex-wrap: wrap;
        }

        .profile-summary > .status-badge {
            margin-left: 0;
        }

        .applicant-detail-grid {
            grid-template-columns: 1fr;
        }

        .detail-profile-item.detail-wide,
        .detail-profile-item.detail-full {
            grid-column: auto;
        }
    }

/* ===== Bổ sung đồng bộ StatusList ===== */
.status-page {
    padding: 40px 0 28px;
    background:
        radial-gradient(circle at 8% 8%, rgba(0, 119, 200, .07), transparent 24%),
        radial-gradient(circle at 92% 10%, rgba(6, 182, 212, .06), transparent 22%);
}

.status-stat-card.is-active {
    border-color: var(--status-accent, #005baa);
    box-shadow: 0 18px 38px rgba(15, 23, 42, .13), inset 0 0 0 1px var(--status-accent, #005baa);
}

.stat-new { --status-accent: #2563eb; }
.stat-processing { --status-accent: #d97706; }
.stat-contacted { --status-accent: #ea580c; }
.stat-success { --status-accent: #16a34a; }
.stat-failed { --status-accent: #dc2626; }

.status-table tbody tr {
    transition: background-color .18s ease, box-shadow .18s ease;
}

.status-table tbody tr:hover {
    background: #f8fbff;
    box-shadow: inset 4px 0 0 #0b74c9;
}

.status-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
}

.admin-empty-state {
    display: grid;
    justify-items: center;
    padding: 58px 24px;
    text-align: center;
}

.admin-empty-icon {
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    margin-bottom: 16px;
    border-radius: 24px;
    color: #005baa;
    background: #eaf4ff;
    font-size: 31px;
}

.admin-empty-state h3 {
    margin: 0 0 7px;
    color: #0f172a;
    font-size: 20px;
    font-weight: 800;
}

.admin-empty-state p {
    margin: 0 0 18px;
    color: #64748b;
}

.admin-empty-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    border-radius: 13px;
    color: #fff;
    background: #005baa;
    font-weight: 700;
}

.admin-empty-action:hover {
    color: #fff;
    background: #00498a;
}

.admin-pagination-wrap {
    margin-top: 25px;
}

.admin-pagination {
    gap: 7px;
}

.admin-pagination .page-link {
    min-width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0 12px;
    border: 1px solid #dbe7f3;
    border-radius: 12px !important;
    color: #334155;
    background: #fff;
    font-weight: 700;
    box-shadow: 0 7px 18px rgba(15, 23, 42, .05);
}

.admin-pagination .page-link:hover {
    color: #005baa;
    border-color: #9ecdf0;
    background: #eaf4ff;
}

.admin-pagination .page-item.active .page-link {
    color: #fff;
    border-color: #005baa;
    background: #005baa;
}

.admin-pagination .page-item.disabled .page-link {
    color: #a5b0bf;
    background: #f4f7fa;
}

@media (max-width: 767.98px) {
    .status-page {
        padding-top: 24px;
    }

    .status-filter-panel {
        padding: 19px;
    }

    .status-total {
        margin-bottom: 14px;
    }

    .admin-pagination {
        flex-wrap: wrap;
    }
}
/* =========================================================
   STATUS LIST V5 - THIẾT KẾ HOÀN TOÀN MỚI
   Chép toàn bộ file này xuống CUỐI wwwroot/css/admin.css
   ========================================================= */

.sl5-page {
    --sl5-primary: #005baa;
    --sl5-primary-dark: #003f7d;
    --sl5-primary-light: #e8f4ff;
    --sl5-ink: #0f172a;
    --sl5-muted: #64748b;
    --sl5-line: #dbe7f3;
    --sl5-bg: #f4f8fc;
    min-height: calc(100vh - 80px);
    padding: 38px 0 54px;
    background:
        radial-gradient(circle at 7% 4%, rgba(0, 119, 200, .09), transparent 25%),
        radial-gradient(circle at 94% 8%, rgba(6, 182, 212, .08), transparent 21%),
        linear-gradient(180deg, #f8fbfe 0%, #f4f8fc 100%);
}

.sl5-page *,
.sl5-page *::before,
.sl5-page *::after {
    box-sizing: border-box;
}

.sl5-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
    min-height: 285px;
    padding: 45px;
    margin-bottom: 26px;
    border-radius: 32px;
    color: #fff;
    background:
        linear-gradient(115deg, rgba(0, 54, 107, .98), rgba(0, 119, 200, .94)),
        linear-gradient(135deg, #005baa, #0891b2);
    box-shadow: 0 26px 65px rgba(0, 72, 135, .22);
}

.sl5-hero::before,
.sl5-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
}

.sl5-hero::before {
    width: 520px;
    height: 520px;
    right: -205px;
    top: -320px;
    background: rgba(255, 255, 255, .11);
}

.sl5-hero::after {
    width: 280px;
    height: 280px;
    right: 215px;
    bottom: -225px;
    border: 44px solid rgba(255, 255, 255, .065);
}

.sl5-hero-content,
.sl5-hero-actions {
    position: relative;
    z-index: 2;
}

.sl5-hero-content {
    max-width: 760px;
}

.sl5-eyebrow,
.sl5-modal-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 999px;
    background: rgba(255, 255, 255, .13);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .55px;
    text-transform: uppercase;
}

.sl5-hero h1 {
    max-width: 760px;
    margin: 18px 0 12px;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.12;
    font-weight: 850;
    letter-spacing: -1.1px;
}

.sl5-hero h1 span {
    color: #aee9ff;
}

.sl5-hero-content > p {
    max-width: 700px;
    margin: 0;
    color: rgba(255, 255, 255, .9);
    font-size: 15.5px;
    line-height: 1.75;
}

.sl5-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.sl5-hero-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .11);
    color: rgba(255, 255, 255, .94);
    font-size: 13px;
    font-weight: 700;
}

.sl5-hero-actions {
    display: grid;
    gap: 12px;
    width: 220px;
    flex: 0 0 220px;
}

.sl5-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 13px 18px;
    border: 1px solid transparent;
    border-radius: 15px;
    font-weight: 800;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.sl5-btn:hover {
    transform: translateY(-2px);
}

.sl5-btn-primary {
    color: var(--sl5-primary);
    background: #fff;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .13);
}

.sl5-btn-primary:hover {
    color: var(--sl5-primary-dark);
    background: #f8fbff;
}

.sl5-btn-export {
    color: #fff;
    border-color: rgba(255, 255, 255, .25);
    background: rgba(7, 31, 59, .25);
    backdrop-filter: blur(10px);
}

.sl5-btn-export:hover {
    color: #fff;
    background: #15803d;
    box-shadow: 0 14px 28px rgba(21, 128, 61, .23);
}

.sl5-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 26px;
}

.sl5-stat {
    --sl5-accent: #2563eb;
    --sl5-soft: #dbeafe;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 112px;
    padding: 18px;
    border: 1px solid var(--sl5-line);
    border-radius: 22px;
    background: #fff;
    color: var(--sl5-ink);
    text-decoration: none;
    box-shadow: 0 13px 32px rgba(15, 23, 42, .07);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.sl5-stat::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 4px;
    background: var(--sl5-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s ease;
}

.sl5-stat:hover,
.sl5-stat.is-active {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--sl5-accent) 38%, white);
    box-shadow: 0 20px 44px rgba(15, 23, 42, .11);
}

.sl5-stat:hover::before,
.sl5-stat.is-active::before {
    transform: scaleX(1);
}

.sl5-stat.is-active {
    background: linear-gradient(145deg, #fff, color-mix(in srgb, var(--sl5-soft) 32%, white));
}

.sl5-stat-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    border-radius: 15px;
    color: var(--sl5-accent);
    background: var(--sl5-soft);
    font-size: 21px;
}

.sl5-stat-main {
    min-width: 0;
}

.sl5-stat-main strong {
    display: block;
    margin-bottom: 2px;
    color: var(--sl5-ink);
    font-size: 25px;
    line-height: 1;
    font-weight: 850;
}

.sl5-stat-main span {
    display: block;
    color: var(--sl5-muted);
    font-size: 12.5px;
    line-height: 1.35;
    font-weight: 700;
}

.sl5-stat-arrow {
    position: absolute;
    top: 14px;
    right: 14px;
    color: #b7c3d1;
    font-size: 13px;
}

.sl5-stat-blue { --sl5-accent: #2563eb; --sl5-soft: #dbeafe; }
.sl5-stat-amber { --sl5-accent: #d97706; --sl5-soft: #fef3c7; }
.sl5-stat-orange { --sl5-accent: #ea580c; --sl5-soft: #ffedd5; }
.sl5-stat-green { --sl5-accent: #16a34a; --sl5-soft: #dcfce7; }
.sl5-stat-red { --sl5-accent: #dc2626; --sl5-soft: #fee2e2; }

.sl5-workspace,
.sl5-list-card {
    border: 1px solid var(--sl5-line);
    border-radius: 26px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 17px 42px rgba(15, 23, 42, .075);
}

.sl5-workspace {
    padding: 25px;
    margin-bottom: 26px;
}

.sl5-workspace-head,
.sl5-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.sl5-workspace-head {
    margin-bottom: 20px;
}

.sl5-section-kicker {
    display: block;
    margin-bottom: 3px;
    color: var(--sl5-primary);
    font-size: 11.5px;
    font-weight: 850;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.sl5-workspace-head h2,
.sl5-list-head h2 {
    margin: 0;
    color: var(--sl5-ink);
    font-size: 23px;
    font-weight: 850;
    letter-spacing: -.35px;
}

.sl5-workspace-head p {
    margin: 5px 0 0;
    color: var(--sl5-muted);
    font-size: 13.5px;
}

.sl5-reset-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border-radius: 11px;
    color: #b42318;
    background: #fff1f0;
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
}

.sl5-reset-link:hover {
    color: #912018;
    background: #ffe7e5;
}

.sl5-filter-form {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(250px, .8fr) auto;
    align-items: end;
    gap: 14px;
}

.sl5-field label {
    display: block;
    margin-bottom: 8px;
    color: #334155;
    font-size: 13px;
    font-weight: 750;
}

.sl5-control {
    position: relative;
}

.sl5-control > i:first-child {
    position: absolute;
    left: 15px;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    color: #7b8da3;
}

.sl5-control input,
.sl5-control select {
    width: 100%;
    height: 50px;
    padding: 0 42px;
    border: 1px solid #d8e3ee;
    border-radius: 14px;
    outline: none;
    color: var(--sl5-ink);
    background: #f9fbfd;
    font-size: 14px;
    font-weight: 600;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.sl5-control select {
    padding-right: 44px;
    appearance: none;
    cursor: pointer;
}

.sl5-control input:focus,
.sl5-control select:focus {
    border-color: #65aee1;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(0, 91, 170, .1);
}

.sl5-control input::placeholder {
    color: #94a3b8;
    font-weight: 500;
}

.sl5-select-chevron {
    position: absolute;
    right: 15px;
    top: 50%;
    pointer-events: none;
    transform: translateY(-50%);
    color: #6b7d90;
    font-size: 12px;
}

.sl5-filter-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 50px;
    padding: 0 22px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #005baa, #087fc2);
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 12px 26px rgba(0, 91, 170, .2);
    transition: transform .18s ease, box-shadow .18s ease;
}

.sl5-filter-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(0, 91, 170, .27);
}

.sl5-list-card {
    overflow: hidden;
}

.sl5-list-head {
    padding: 23px 25px;
    border-bottom: 1px solid #e4edf5;
}

.sl5-result-summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border: 1px solid #dce7f1;
    border-radius: 12px;
    color: #556679;
    background: #f8fbfd;
    font-size: 13px;
}

.sl5-result-summary strong {
    color: var(--sl5-ink);
}

.sl5-result-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .12);
}

.sl5-table-wrap {
    overflow-x: auto;
}

.sl5-table {
    width: 100%;
    min-width: 1180px;
    border-collapse: separate;
    border-spacing: 0;
    color: #334155;
}

.sl5-table th {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 15px 17px;
    border-bottom: 1px solid #dce7f1;
    color: #506176;
    background: #f4f8fc;
    font-size: 11.5px;
    font-weight: 850;
    letter-spacing: .45px;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.sl5-table td {
    padding: 17px;
    border-bottom: 1px solid #e8eef4;
    vertical-align: middle;
    background: #fff;
}

.sl5-table tbody tr:last-child td {
    border-bottom: 0;
}

.sl5-table tbody tr {
    transition: background-color .18s ease, transform .18s ease;
}

.sl5-table tbody tr:hover td {
    background: #f8fbff;
}

.sl5-table tbody tr:hover td:first-child {
    box-shadow: inset 4px 0 0 var(--sl5-primary);
}

.sl5-person {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 235px;
}

.sl5-avatar,
.sl5-profile-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(145deg, #005baa, #06a2d7);
    font-weight: 850;
    letter-spacing: .5px;
    box-shadow: 0 9px 20px rgba(0, 91, 170, .2);
}

.sl5-avatar {
    width: 47px;
    height: 47px;
    font-size: 13px;
}

.sl5-person-text {
    min-width: 0;
}

.sl5-person-text > strong {
    display: block;
    overflow: hidden;
    max-width: 190px;
    margin-bottom: 4px;
    color: var(--sl5-ink);
    font-size: 14px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sl5-person-text span,
.sl5-person-text small,
.sl5-contact span,
.sl5-stack span,
.sl5-stack small {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #718197;
    font-size: 11.5px;
    line-height: 1.55;
}

.sl5-person-text small {
    color: #9aa8b8;
}

.sl5-contact,
.sl5-stack {
    display: grid;
    gap: 5px;
    min-width: 175px;
}

.sl5-contact a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #075985;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.sl5-contact a:hover {
    color: var(--sl5-primary);
}

.sl5-contact span {
    overflow: hidden;
    max-width: 200px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sl5-stack > strong {
    display: block;
    overflow: hidden;
    max-width: 210px;
    color: var(--sl5-ink);
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sl5-job-stack {
    min-width: 210px;
}

.sl5-salary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border-radius: 11px;
    color: #075985;
    background: #e0f2fe;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.sl5-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
    white-space: nowrap;
}

.sl5-status > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px currentColor;
    opacity: .85;
}

.sl5-status-new { color: #1d4ed8; border-color: #bfdbfe; background: #eff6ff; }
.sl5-status-processing { color: #a16207; border-color: #fde68a; background: #fffbeb; }
.sl5-status-contacted { color: #c2410c; border-color: #fed7aa; background: #fff7ed; }
.sl5-status-success { color: #15803d; border-color: #bbf7d0; background: #f0fdf4; }
.sl5-status-failed { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }

.sl5-text-end {
    text-align: right !important;
}

.sl5-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.sl5-icon-button {
    display: inline-grid;
    place-items: center;
    width: 39px;
    height: 39px;
    border: 1px solid transparent;
    border-radius: 12px;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.sl5-icon-button:hover {
    transform: translateY(-2px);
}

.sl5-view-button {
    color: #075985;
    border-color: #bae6fd;
    background: #e0f2fe;
}

.sl5-view-button:hover {
    color: #fff;
    background: #0284c7;
    box-shadow: 0 9px 18px rgba(2, 132, 199, .22);
}

.sl5-edit-button {
    color: #7c3aed;
    border-color: #ddd6fe;
    background: #f5f3ff;
}

.sl5-edit-button:hover {
    color: #fff;
    background: #7c3aed;
    box-shadow: 0 9px 18px rgba(124, 58, 237, .22);
}

.sl5-empty {
    display: grid;
    justify-items: center;
    padding: 75px 24px;
    text-align: center;
}

.sl5-empty-icon {
    display: grid;
    place-items: center;
    width: 80px;
    height: 80px;
    margin-bottom: 18px;
    border-radius: 24px;
    color: var(--sl5-primary);
    background: var(--sl5-primary-light);
    font-size: 33px;
}

.sl5-empty h3 {
    margin: 0 0 8px;
    color: var(--sl5-ink);
    font-size: 21px;
    font-weight: 850;
}

.sl5-empty p {
    max-width: 480px;
    margin: 0 0 20px;
    color: var(--sl5-muted);
}

.sl5-empty-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    border-radius: 13px;
    color: #fff;
    background: var(--sl5-primary);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.sl5-empty-button:hover {
    color: #fff;
    background: var(--sl5-primary-dark);
}

.sl5-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 26px;
}

.sl5-page-numbers {
    display: flex;
    align-items: center;
    gap: 7px;
}

.sl5-page-button,
.sl5-page-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    border: 1px solid #dbe6f0;
    border-radius: 12px;
    color: #405267;
    background: #fff;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
}

.sl5-page-button {
    gap: 7px;
    padding: 0 14px;
}

.sl5-page-number {
    width: 42px;
}

.sl5-page-button:hover,
.sl5-page-number:hover {
    color: var(--sl5-primary);
    border-color: #9dcaea;
    background: #edf7ff;
}

.sl5-page-number.is-active {
    color: #fff;
    border-color: var(--sl5-primary);
    background: var(--sl5-primary);
}

.sl5-page-button.is-disabled {
    pointer-events: none;
    opacity: .45;
}

.sl5-page-ellipsis {
    display: grid;
    place-items: center;
    width: 30px;
    color: #8291a3;
}

.sl5-modal {
    overflow: hidden;
    border: 0;
    border-radius: 25px;
    box-shadow: 0 30px 80px rgba(15, 23, 42, .25);
}

.sl5-modal-header {
    padding: 23px 25px;
    border: 0;
    color: #fff;
    background: linear-gradient(125deg, #004b91, #0085c8);
}

.sl5-modal-kicker {
    padding: 6px 11px;
    margin-bottom: 8px;
    font-size: 10.5px;
}

.sl5-modal-header .modal-title {
    font-size: 22px;
    font-weight: 850;
}

.sl5-modal-body {
    padding: 25px;
    background: #f5f9fc;
}

.sl5-profile-summary {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px;
    margin-bottom: 18px;
    border: 1px solid #dbe7f3;
    border-radius: 20px;
    background: #fff;
}

.sl5-profile-avatar {
    width: 62px;
    height: 62px;
    border-radius: 19px;
    font-size: 16px;
}

.sl5-profile-heading {
    flex: 1;
    min-width: 0;
}

.sl5-profile-heading > span {
    display: block;
    margin-bottom: 2px;
    color: var(--sl5-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.sl5-profile-heading h4 {
    margin: 0;
    color: var(--sl5-ink);
    font-size: 21px;
    font-weight: 850;
}

.sl5-profile-heading p {
    margin: 4px 0 0;
    color: var(--sl5-muted);
    font-size: 13px;
}

.sl5-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.sl5-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    min-width: 0;
    padding: 14px;
    border: 1px solid #e0e9f1;
    border-radius: 16px;
    background: #fff;
}

.sl5-detail-icon {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    flex: 0 0 auto;
    border-radius: 11px;
    color: var(--sl5-primary);
    background: var(--sl5-primary-light);
}

.sl5-detail-item > div:last-child {
    min-width: 0;
}

.sl5-detail-item span {
    display: block;
    margin-bottom: 3px;
    color: #77879a;
    font-size: 10.5px;
    font-weight: 750;
    text-transform: uppercase;
}

.sl5-detail-item strong {
    display: block;
    overflow-wrap: anywhere;
    color: #263548;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 750;
}

.sl5-detail-wide {
    grid-column: span 2;
}

.sl5-detail-full {
    grid-column: 1 / -1;
}

.sl5-modal-footer {
    padding: 16px 25px;
    border-top: 1px solid #e3eaf1;
    background: #fff;
}

.sl5-modal-close {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    background: #334155;
    font-weight: 750;
}

@media (max-width: 1199.98px) {
    .sl5-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sl5-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .sl5-hero {
        align-items: flex-start;
        flex-direction: column;
        min-height: auto;
        padding: 34px;
    }

    .sl5-hero-actions {
        display: flex;
        width: 100%;
        flex: none;
    }

    .sl5-btn {
        flex: 1;
    }

    .sl5-filter-form {
        grid-template-columns: 1fr 1fr;
    }

    .sl5-filter-button {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .sl5-page {
        padding: 22px 0 38px;
    }

    .sl5-hero {
        padding: 27px 22px;
        border-radius: 23px;
    }

    .sl5-hero h1 {
        font-size: 31px;
    }

    .sl5-hero-actions,
    .sl5-workspace-head,
    .sl5-list-head {
        align-items: stretch;
        flex-direction: column;
    }

    .sl5-btn {
        width: 100%;
    }

    .sl5-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sl5-filter-form {
        grid-template-columns: 1fr;
    }

    .sl5-filter-button {
        grid-column: auto;
    }

    .sl5-workspace {
        padding: 20px;
        border-radius: 21px;
    }

    .sl5-list-card {
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .sl5-list-head {
        margin-bottom: 14px;
        padding: 20px;
        border: 1px solid var(--sl5-line);
        border-radius: 20px;
        background: #fff;
    }

    .sl5-table-wrap {
        overflow: visible;
    }

    .sl5-table,
    .sl5-table tbody,
    .sl5-table tr,
    .sl5-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .sl5-table thead {
        display: none;
    }

    .sl5-table tbody {
        display: grid;
        gap: 14px;
    }

    .sl5-table tbody tr {
        overflow: hidden;
        border: 1px solid var(--sl5-line);
        border-radius: 21px;
        background: #fff;
        box-shadow: 0 12px 28px rgba(15, 23, 42, .07);
    }

    .sl5-table td {
        display: grid;
        grid-template-columns: 118px minmax(0, 1fr);
        align-items: center;
        gap: 12px;
        padding: 13px 16px;
        border-bottom: 1px solid #edf1f5;
        background: #fff !important;
        text-align: left !important;
    }

    .sl5-table td::before {
        content: attr(data-label);
        color: #7b8a9b;
        font-size: 10.5px;
        font-weight: 850;
        letter-spacing: .4px;
        text-transform: uppercase;
    }

    .sl5-table td:first-child {
        display: block;
        padding: 17px;
        background: linear-gradient(135deg, #f4f9fd, #fff) !important;
        box-shadow: none !important;
    }

    .sl5-table td:first-child::before {
        display: none;
    }

    .sl5-table td:last-child {
        border-bottom: 0;
    }

    .sl5-actions {
        justify-content: flex-start;
    }

    .sl5-contact,
    .sl5-stack,
    .sl5-job-stack {
        min-width: 0;
    }

    .sl5-stack > strong,
    .sl5-person-text > strong {
        max-width: none;
    }

    .sl5-pagination {
        flex-wrap: wrap;
    }

    .sl5-detail-grid {
        grid-template-columns: 1fr;
    }

    .sl5-detail-wide,
    .sl5-detail-full {
        grid-column: auto;
    }

    .sl5-profile-summary {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .sl5-profile-summary .sl5-status {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 479.98px) {
    .sl5-stats {
        grid-template-columns: 1fr;
    }

    .sl5-stat {
        min-height: 96px;
    }

    .sl5-table td {
        grid-template-columns: 100px minmax(0, 1fr);
    }

    .sl5-page-numbers {
        order: 3;
        width: 100%;
        justify-content: center;
    }
}


/* ===================================================
   EDIT STATUS V2
=================================================== */
.edit-status-v2 {
    padding: 40px 0 34px;
    background:
        radial-gradient(circle at 8% 8%, rgba(0, 119, 200, .075), transparent 25%),
        radial-gradient(circle at 94% 12%, rgba(6, 182, 212, .065), transparent 22%);
}

.edit-status-hero-v2 {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 38px 40px;
    margin-bottom: 24px;
    border-radius: 30px;
    color: #fff;
    background:
        linear-gradient(120deg, rgba(0, 63, 125, .98), rgba(0, 139, 210, .95)),
        linear-gradient(135deg, #005baa, #0891b2);
    box-shadow: 0 24px 58px rgba(0, 74, 139, .2);
}

.edit-status-hero-v2::before,
.edit-status-hero-v2::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.edit-status-hero-v2::before {
    width: 390px;
    height: 390px;
    right: -155px;
    top: -210px;
    background: rgba(255, 255, 255, .11);
}

.edit-status-hero-v2::after {
    width: 220px;
    height: 220px;
    right: 170px;
    bottom: -175px;
    border: 38px solid rgba(255, 255, 255, .07);
}

.edit-status-hero-copy,
.edit-status-back-top {
    position: relative;
    z-index: 2;
}

.edit-status-hero-copy {
    max-width: 760px;
}

.edit-status-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin-bottom: 15px;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 999px;
    background: rgba(255, 255, 255, .13);
    font-size: 12.5px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .55px;
}

.edit-status-hero-v2 h1 {
    margin: 0 0 10px;
    font-size: clamp(31px, 4vw, 45px);
    line-height: 1.13;
    font-weight: 850;
    letter-spacing: -.8px;
}

.edit-status-hero-v2 p {
    max-width: 670px;
    margin: 0;
    color: rgba(255, 255, 255, .9);
    font-size: 15px;
    line-height: 1.7;
}

.edit-status-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 20px;
}

.edit-status-hero-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .94);
    font-size: 12px;
    font-weight: 650;
}

.edit-status-hero-meta .edit-status-current-chip {
    color: #fff;
    background: rgba(8, 32, 61, .25);
}

.edit-status-back-top {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 15px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 14px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-weight: 750;
    text-decoration: none;
    transition: .22s ease;
}

.edit-status-back-top:hover {
    transform: translateY(-2px);
    background: #fff;
    color: #005baa;
}

.edit-status-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, .65fr);
    gap: 22px;
    align-items: start;
}

.edit-status-main-card,
.edit-status-side-card {
    border: 1px solid #dfe8f2;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 16px 42px rgba(15, 23, 42, .075);
}

.edit-status-main-card {
    padding: 28px;
    border-radius: 28px;
}

.edit-status-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.edit-status-section-heading span {
    display: block;
    margin-bottom: 3px;
    color: #64748b;
    font-size: 12px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .65px;
}

.edit-status-section-heading h2 {
    margin: 0;
    color: #0f172a;
    font-size: 25px;
    font-weight: 850;
    letter-spacing: -.35px;
}

.edit-status-record-code {
    padding: 9px 12px;
    border-radius: 12px;
    background: #eaf4ff;
    color: #005baa;
    font-size: 13px;
    font-weight: 800;
}

.edit-status-applicant-card {
    display: flex;
    align-items: center;
    gap: 17px;
    padding: 20px;
    margin-bottom: 25px;
    border: 1px solid #dfe9f4;
    border-radius: 21px;
    background: linear-gradient(135deg, #f8fbff, #f1f7fd);
}

.edit-status-avatar {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    flex: 0 0 auto;
    border-radius: 20px;
    background: #fff;
    color: #005baa;
    font-size: 29px;
    box-shadow: 0 10px 25px rgba(0, 91, 170, .11);
}

.edit-status-applicant-copy {
    min-width: 0;
    flex: 1;
}

.edit-status-name-row {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: wrap;
    margin-bottom: 9px;
}

.edit-status-name-row h3 {
    margin: 0;
    color: #005baa;
    font-size: 21px;
    font-weight: 850;
}

.edit-status-contact-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.edit-status-contact-grid span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #64748b;
    font-size: 12.7px;
}

.edit-status-contact-grid i {
    color: #0b74c9;
}

.edit-status-form {
    display: grid;
    gap: 23px;
}

.edit-status-field-group {
    display: grid;
    gap: 9px;
}

.edit-status-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.edit-status-label-row label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #0f172a;
    font-size: 14px;
    font-weight: 800;
}

.edit-status-label-row label i {
    color: #005baa;
}

.edit-status-label-row > span {
    color: #94a3b8;
    font-size: 11.5px;
    font-weight: 650;
}

.edit-status-select-wrap {
    position: relative;
}

.edit-status-select-wrap > i {
    position: absolute;
    left: 16px;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    color: #005baa;
    pointer-events: none;
}

.edit-status-select {
    min-height: 54px;
    padding-left: 46px;
    border: 1px solid #d8e4f0;
    border-radius: 16px;
    color: #0f172a;
    font-weight: 700;
    box-shadow: none;
}

.edit-status-select:focus,
.edit-status-note:focus {
    border-color: #7bb8ed;
    box-shadow: 0 0 0 4px rgba(0, 91, 170, .1);
}

.edit-status-timeline {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.edit-status-timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    min-width: 0;
    padding: 13px;
    border: 1px solid #e1e9f2;
    border-radius: 16px;
    background: #fff;
    text-align: left;
    transition: .22s ease;
}

.edit-status-timeline-item:hover {
    transform: translateY(-3px);
    border-color: var(--timeline-color);
    box-shadow: 0 12px 25px rgba(15, 23, 42, .08);
}

.edit-status-timeline-item.is-active {
    border-color: var(--timeline-color);
    background: var(--timeline-soft);
    box-shadow: inset 0 0 0 1px var(--timeline-color);
}

.timeline-new { --timeline-color: #2563eb; --timeline-soft: #eff6ff; }
.timeline-processing { --timeline-color: #d97706; --timeline-soft: #fffbeb; }
.timeline-contacted { --timeline-color: #ea580c; --timeline-soft: #fff7ed; }
.timeline-success { --timeline-color: #16a34a; --timeline-soft: #f0fdf4; }
.timeline-failed { --timeline-color: #dc2626; --timeline-soft: #fef2f2; }

.timeline-dot {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    flex: 0 0 auto;
    border-radius: 9px;
    background: #eef3f8;
    color: #94a3b8;
    font-size: 13px;
}

.edit-status-timeline-item.is-active .timeline-dot {
    background: var(--timeline-color);
    color: #fff;
}

.timeline-copy {
    min-width: 0;
}

.timeline-copy strong,
.timeline-copy small {
    display: block;
}

.timeline-copy strong {
    margin-bottom: 3px;
    color: #1e293b;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 800;
}

.timeline-copy small {
    color: #7b899b;
    font-size: 10.5px;
    line-height: 1.4;
}

.edit-status-note-wrap {
    overflow: hidden;
    border: 1px solid #d8e4f0;
    border-radius: 17px;
    background: #fff;
    transition: .2s ease;
}

.edit-status-note-wrap:focus-within {
    border-color: #7bb8ed;
    box-shadow: 0 0 0 4px rgba(0, 91, 170, .1);
}

.edit-status-note {
    min-height: 160px;
    padding: 16px;
    border: 0;
    border-radius: 0;
    resize: vertical;
    box-shadow: none !important;
}

.edit-status-note-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-top: 1px solid #edf2f7;
    background: #f8fafc;
    color: #7a899d;
    font-size: 11.5px;
}

.edit-status-note-footer span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.edit-status-quick-notes {
    padding: 17px;
    border: 1px dashed #cbd9e7;
    border-radius: 18px;
    background: #fbfdff;
}

.quick-note-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.quick-note-heading > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
}

.quick-note-heading > span i {
    color: #d97706;
}

.quick-note-heading small {
    color: #94a3b8;
}

.quick-note-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.quick-note-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid #dce6f0;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    font-size: 11.5px;
    font-weight: 700;
    transition: .2s ease;
}

.quick-note-chip:hover {
    border-color: #8fc1e8;
    background: #eaf4ff;
    color: #005baa;
}

.edit-status-submit-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 11px;
    padding-top: 20px;
    border-top: 1px solid #edf2f7;
}

.edit-status-cancel-btn,
.edit-status-save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 47px;
    padding: 11px 18px;
    border-radius: 14px;
    font-weight: 800;
}

.edit-status-cancel-btn {
    border: 1px solid #dce5ee;
    background: #f8fafc;
    color: #475569;
}

.edit-status-cancel-btn:hover {
    border-color: #b9c8d8;
    background: #eef3f8;
    color: #334155;
}

.edit-status-save-btn {
    border: 0;
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #fff;
    box-shadow: 0 12px 24px rgba(21, 128, 61, .2);
}

.edit-status-save-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #15803d, #166534);
    color: #fff;
}

.edit-status-sidebar {
    display: grid;
    gap: 17px;
}

.edit-status-side-card {
    padding: 21px;
    border-radius: 22px;
}

.edit-status-overview-card {
    position: relative;
    overflow: hidden;
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #005baa, #0188c7);
}

.edit-status-overview-card::after {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    right: -70px;
    top: -75px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
}

.edit-status-side-icon {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 13px;
    border-radius: 15px;
    background: rgba(255, 255, 255, .16);
    font-size: 22px;
}

.edit-status-overview-card > span,
.edit-status-overview-card > h3,
.edit-status-overview-card > p {
    position: relative;
    z-index: 2;
}

.edit-status-overview-card > span {
    color: rgba(255, 255, 255, .76);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .55px;
}

.edit-status-overview-card h3 {
    margin: 4px 0 7px;
    font-size: 20px;
    font-weight: 850;
}

.edit-status-overview-card p {
    margin: 0;
    color: rgba(255, 255, 255, .86);
    font-size: 12.5px;
    line-height: 1.55;
}

.edit-status-side-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-bottom: 13px;
    margin-bottom: 4px;
    border-bottom: 1px solid #edf2f7;
}

.edit-status-side-heading i {
    color: #005baa;
    font-size: 18px;
}

.edit-status-side-heading h3 {
    margin: 0;
    color: #0f172a;
    font-size: 15px;
    font-weight: 850;
}

.edit-status-info-list {
    display: grid;
}

.edit-status-info-list > div {
    display: grid;
    gap: 4px;
    padding: 12px 0;
    border-bottom: 1px solid #edf2f7;
}

.edit-status-info-list > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.edit-status-info-list span {
    color: #7b899c;
    font-size: 11.5px;
}

.edit-status-info-list strong {
    color: #334155;
    font-size: 12.5px;
    line-height: 1.45;
    word-break: break-word;
}

.edit-status-tip-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.edit-status-tip-icon {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    flex: 0 0 auto;
    border-radius: 14px;
    background: #fff3cd;
    color: #b7791f;
    font-size: 19px;
}

.edit-status-tip-card h3 {
    margin: 2px 0 6px;
    color: #0f172a;
    font-size: 14px;
    font-weight: 850;
}

.edit-status-tip-card p {
    margin: 0;
    color: #718096;
    font-size: 12px;
    line-height: 1.55;
}

@media (max-width: 1199.98px) {
    .edit-status-layout {
        grid-template-columns: 1fr;
    }

    .edit-status-sidebar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .edit-status-timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .edit-status-sidebar {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .edit-status-v2 {
        padding-top: 24px;
    }

    .edit-status-hero-v2 {
        flex-direction: column;
        padding: 28px 23px;
        border-radius: 23px;
    }

    .edit-status-back-top {
        width: 100%;
        justify-content: center;
    }

    .edit-status-main-card {
        padding: 20px;
        border-radius: 22px;
    }

    .edit-status-section-heading {
        align-items: flex-start;
    }

    .edit-status-applicant-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .edit-status-timeline {
        grid-template-columns: 1fr;
    }

    .edit-status-note-footer,
    .quick-note-heading,
    .edit-status-submit-bar {
        align-items: flex-start;
        flex-direction: column;
    }

    .edit-status-submit-bar .btn {
        width: 100%;
    }
}

@media (max-width: 479.98px) {
    .edit-status-hero-v2 h1 {
        font-size: 29px;
    }

    .edit-status-main-card,
    .edit-status-side-card {
        padding: 18px;
    }

    .edit-status-contact-grid {
        display: grid;
        gap: 8px;
    }
}

/* =========================================================
   APPLICANT LIST V3
   Dashboard + StatusList + EditStatus + ApplicantList
   ========================================================= */

.al3-page {
    --al3-primary: #005baa;
    --al3-primary-dark: #003f7d;
    --al3-ink: #0f172a;
    --al3-muted: #64748b;
    --al3-line: #dbe7f3;
    min-height: calc(100vh - 80px);
    padding: 38px 0 55px;
    background:
        radial-gradient(circle at 7% 5%, rgba(0, 119, 200, .09), transparent 25%),
        radial-gradient(circle at 93% 8%, rgba(6, 182, 212, .08), transparent 22%),
        linear-gradient(180deg, #f8fbfe 0%, #f3f8fc 100%);
}

.al3-page *,
.al3-page *::before,
.al3-page *::after { box-sizing: border-box; }

.al3-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
    min-height: 280px;
    padding: 44px;
    margin-bottom: 25px;
    border-radius: 32px;
    color: #fff;
    background:
        linear-gradient(115deg, rgba(0, 54, 107, .98), rgba(0, 119, 200, .94)),
        linear-gradient(135deg, #005baa, #0891b2);
    box-shadow: 0 26px 65px rgba(0, 72, 135, .22);
}

.al3-hero::before,
.al3-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.al3-hero::before {
    width: 520px;
    height: 520px;
    right: -205px;
    top: -320px;
    background: rgba(255,255,255,.11);
}

.al3-hero::after {
    width: 280px;
    height: 280px;
    right: 215px;
    bottom: -225px;
    border: 44px solid rgba(255,255,255,.065);
}

.al3-hero-content,
.al3-hero-actions { position: relative; z-index: 2; }
.al3-hero-content { max-width: 760px; }

.al3-eyebrow,
.al3-modal-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border: 1px solid rgba(255,255,255,.27);
    border-radius: 999px;
    background: rgba(255,255,255,.13);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .55px;
    text-transform: uppercase;
}

.al3-hero h1 {
    margin: 18px 0 12px;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.12;
    font-weight: 850;
    letter-spacing: -1.1px;
}

.al3-hero h1 span { color: #aee9ff; }

.al3-hero-content > p {
    max-width: 700px;
    margin: 0;
    color: rgba(255,255,255,.9);
    font-size: 15.5px;
    line-height: 1.75;
}

.al3-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.al3-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border-radius: 12px;
    color: rgba(255,255,255,.94);
    background: rgba(255,255,255,.11);
    font-size: 13px;
    font-weight: 700;
}

.al3-hero-actions {
    display: grid;
    gap: 12px;
    width: 220px;
    flex: 0 0 220px;
}

.al3-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 50px;
    padding: 13px 18px;
    border: 1px solid transparent;
    border-radius: 15px;
    font-weight: 800;
    text-decoration: none;
    transition: .2s ease;
}

.al3-btn:hover { transform: translateY(-2px); }
.al3-btn-light { color: var(--al3-primary); background: #fff; box-shadow: 0 14px 30px rgba(0,0,0,.13); }
.al3-btn-light:hover { color: var(--al3-primary-dark); background: #f8fbff; }
.al3-btn-export { color: #fff; border-color: rgba(255,255,255,.25); background: rgba(7,31,59,.25); backdrop-filter: blur(10px); }
.al3-btn-export:hover { color: #fff; background: #15803d; box-shadow: 0 14px 28px rgba(21,128,61,.23); }

.al3-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 25px;
}

.al3-stat {
    --al3-accent: #2563eb;
    --al3-soft: #dbeafe;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 104px;
    padding: 17px;
    border: 1px solid var(--al3-line);
    border-radius: 21px;
    background: #fff;
    box-shadow: 0 13px 32px rgba(15,23,42,.07);
    transition: .22s ease;
}

.al3-stat::after {
    content: "";
    position: absolute;
    width: 74px;
    height: 74px;
    right: -34px;
    bottom: -36px;
    border-radius: 50%;
    background: var(--al3-soft);
    opacity: .75;
}

.al3-stat:hover { transform: translateY(-4px); border-color: var(--al3-accent); box-shadow: 0 19px 43px rgba(15,23,42,.11); }
.al3-stat-icon { display: grid; place-items: center; width: 47px; height: 47px; flex: 0 0 auto; border-radius: 15px; color: var(--al3-accent); background: var(--al3-soft); font-size: 21px; }
.al3-stat > div:last-child { position: relative; z-index: 2; min-width: 0; }
.al3-stat strong { display: block; color: var(--al3-ink); font-size: 25px; line-height: 1; font-weight: 850; }
.al3-stat span { display: block; margin-top: 4px; color: var(--al3-muted); font-size: 12.5px; line-height: 1.35; font-weight: 700; }
.al3-stat-blue { --al3-accent:#2563eb; --al3-soft:#dbeafe; }
.al3-stat-cyan { --al3-accent:#0891b2; --al3-soft:#d9f5fa; }
.al3-stat-purple { --al3-accent:#7c3aed; --al3-soft:#eee5ff; }
.al3-stat-green { --al3-accent:#16a34a; --al3-soft:#dcfce7; }
.al3-stat-orange { --al3-accent:#ea580c; --al3-soft:#ffedd5; }

.al3-filter-card,
.al3-list-card {
    border: 1px solid var(--al3-line);
    border-radius: 26px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 17px 42px rgba(15,23,42,.075);
}

.al3-filter-card { padding: 25px; margin-bottom: 25px; }
.al3-list-card { overflow: hidden; }

.al3-section-head,
.al3-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.al3-section-head { margin-bottom: 20px; }
.al3-list-head { padding: 23px 25px; border-bottom: 1px solid #e7eef6; }
.al3-section-kicker { display:block; margin-bottom:3px; color:var(--al3-primary); font-size:11.5px; font-weight:850; letter-spacing:.7px; text-transform:uppercase; }
.al3-section-head h2,
.al3-list-head h2 { margin:0; color:var(--al3-ink); font-size:23px; font-weight:850; letter-spacing:-.35px; }
.al3-section-head p { margin:5px 0 0; color:var(--al3-muted); font-size:13.5px; }

.al3-reset-link {
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:9px 12px;
    border-radius:11px;
    color:#b42318;
    background:#fff1f0;
    font-size:13px;
    font-weight:750;
    text-decoration:none;
}
.al3-reset-link:hover { color:#912018; background:#ffe7e5; }

.al3-filter-form {
    display:grid;
    grid-template-columns: minmax(0,1.45fr) minmax(210px,.8fr) minmax(260px,1fr);
    gap:14px;
    align-items:end;
}
.al3-field label { display:block; margin-bottom:8px; color:#334155; font-size:13px; font-weight:750; }
.al3-control { position:relative; }
.al3-control > i:first-child { position:absolute; left:15px; top:50%; z-index:2; transform:translateY(-50%); color:#74879d; }
.al3-control input,
.al3-control select {
    width:100%;
    height:50px;
    padding:0 42px;
    border:1px solid #d8e3ee;
    border-radius:14px;
    outline:none;
    color:var(--al3-ink);
    background:#f9fbfd;
    font-size:14px;
    font-weight:600;
    transition:.18s ease;
}
.al3-control select { appearance:none; cursor:pointer; padding-right:42px; }
.al3-control input:focus,
.al3-control select:focus { border-color:#65aee1; background:#fff; box-shadow:0 0 0 4px rgba(0,119,200,.1); }
.al3-select-arrow { position:absolute !important; left:auto !important; right:15px; pointer-events:none; }
.al3-filter-actions { display:flex; align-items:center; gap:10px; }
.al3-filter-submit,
.al3-filter-clear { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:0 17px; border-radius:14px; font-size:13.5px; font-weight:800; text-decoration:none; white-space:nowrap; }
.al3-filter-submit { border:none; color:#fff; background:linear-gradient(135deg,#005baa,#0077c8); box-shadow:0 10px 23px rgba(0,91,170,.2); }
.al3-filter-submit:hover { background:linear-gradient(135deg,#00498a,#006ab3); }
.al3-filter-clear { color:#475569; background:#eef3f8; }
.al3-filter-clear:hover { color:#0f172a; background:#e3eaf2; }

.al3-result-chip { display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px; color:#526479; background:#f0f6fb; font-size:13px; }
.al3-result-chip strong { color:var(--al3-primary); }

.al3-table-wrap { overflow:auto; max-height:760px; }
.al3-table { width:100%; min-width:1280px; border-collapse:separate; border-spacing:0; }
.al3-table thead th { position:sticky; top:0; z-index:4; padding:15px 18px; border-bottom:1px solid #cfe0ef; color:#075b9b; background:#eaf4ff; font-size:12px; font-weight:850; letter-spacing:.25px; text-transform:uppercase; white-space:nowrap; }
.al3-table tbody td { padding:18px; border-bottom:1px solid #edf2f7; color:#334155; font-size:13.5px; vertical-align:middle; }
.al3-table tbody tr { transition:.18s ease; }
.al3-table tbody tr:hover { background:#f8fbff; box-shadow:inset 4px 0 0 var(--al3-primary); }
.al3-table tbody tr:last-child td { border-bottom:none; }

.al3-person { display:flex; align-items:center; gap:12px; min-width:200px; }
.al3-avatar { display:grid; place-items:center; width:46px; height:46px; flex:0 0 auto; border-radius:15px; color:#005baa; background:linear-gradient(145deg,#eaf4ff,#dceeff); font-size:18px; font-weight:850; box-shadow:inset 0 0 0 1px rgba(0,91,170,.08); }
.al3-person-main { min-width:0; }
.al3-person-main > strong { display:block; margin-bottom:5px; color:#0f172a; font-size:14.5px; font-weight:800; }
.al3-person-main span { display:block; margin-top:3px; color:#718096; font-size:11.5px; }
.al3-person-main span i { width:15px; color:#7790aa; }
.al3-gender { color:#526479 !important; }

.al3-contact { display:grid; gap:7px; min-width:205px; }
.al3-contact a,
.al3-contact > span { display:flex; align-items:center; gap:7px; color:#526479; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:230px; }
.al3-contact a { color:#0f5f9f; font-weight:750; }
.al3-contact i { color:#0b74c9; }
.al3-id-chip { width:max-content; max-width:100% !important; padding:6px 9px; border-radius:999px; color:#4338ca !important; background:#eef2ff; font-size:11.5px; font-weight:750; }

.al3-qualification { display:grid; gap:4px; min-width:210px; }
.al3-qualification strong { color:#0f172a; font-size:13.5px; font-weight:800; }
.al3-qualification > span:not(.al3-experience-chip) { color:#718096; font-size:11.7px; line-height:1.35; }
.al3-experience-chip { display:inline-flex; align-items:center; gap:6px; width:max-content; max-width:100%; margin-top:4px; padding:6px 9px; border-radius:999px; color:#9a6700; background:#fff6d8; font-size:11.5px; font-weight:750; }

.al3-job-need { display:grid; gap:6px; min-width:250px; max-width:350px; }
.al3-job-need strong { color:#0f172a; font-size:13.5px; line-height:1.45; font-weight:800; }
.al3-job-need > span { display:flex; align-items:flex-start; gap:6px; color:#64748b; font-size:11.8px; line-height:1.4; }
.al3-job-need > span i { margin-top:2px; color:#0b74c9; }
.al3-salary-chip { width:max-content; padding:6px 9px; border-radius:999px; color:#15803d !important; background:#dcfce7; font-weight:750; }
.al3-selected-job { color:#075b9b !important; font-weight:750; }
.al3-selected-job i { color:#16a34a !important; }

.al3-created-at { min-width:105px; }
.al3-created-at strong { display:block; color:#0f172a; font-weight:800; }
.al3-created-at span { display:block; margin-top:3px; color:#718096; font-size:12px; }

.al3-action-heading { text-align:center; }
.al3-row-actions { display:flex; align-items:center; justify-content:center; gap:7px; min-width:128px; }
.al3-icon-btn { display:grid; place-items:center; width:38px; height:38px; flex:0 0 auto; border:1px solid transparent; border-radius:11px; text-decoration:none; transition:.18s ease; }
.al3-icon-btn:hover { transform:translateY(-2px); }
.al3-view-btn { color:#075985; background:#e0f2fe; }
.al3-view-btn:hover { color:#075985; background:#bae6fd; }
.al3-edit-btn { color:#9a6700; background:#fff3cd; }
.al3-edit-btn:hover { color:#805500; background:#ffe69c; }
.al3-delete-btn { color:#b42318; background:#fee4e2; }
.al3-delete-btn:hover { color:#912018; background:#fecaca; }

.al3-empty-state { display:grid; justify-items:center; padding:70px 24px; text-align:center; }
.al3-empty-icon { display:grid; place-items:center; width:78px; height:78px; margin-bottom:17px; border-radius:25px; color:#005baa; background:#eaf4ff; font-size:33px; }
.al3-empty-state h3 { margin:0 0 7px; color:#0f172a; font-size:21px; font-weight:850; }
.al3-empty-state p { margin:0 0 19px; color:#64748b; }
.al3-empty-action { display:inline-flex; align-items:center; gap:8px; padding:11px 16px; border-radius:13px; color:#fff; background:#005baa; font-weight:750; text-decoration:none; }
.al3-empty-action:hover { color:#fff; background:#00498a; }

.al3-pagination-wrap { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:24px; padding:0 3px; }
.al3-page-info { color:#64748b; font-size:13px; }
.al3-page-info strong { color:#005baa; }
.al3-pagination { gap:7px; margin:0; }
.al3-pagination .page-link { display:grid; place-items:center; min-width:41px; height:41px; padding:0 11px; border:1px solid #dbe7f3; border-radius:12px !important; color:#334155; background:#fff; font-weight:750; box-shadow:0 7px 18px rgba(15,23,42,.05); }
.al3-pagination .page-link:hover { color:#005baa; border-color:#9ecdf0; background:#eaf4ff; }
.al3-pagination .active .page-link { color:#fff; border-color:#005baa; background:#005baa; }
.al3-pagination .disabled .page-link { color:#a5b0bf; background:#f4f7fa; }

.al3-detail-modal,
.al3-delete-modal { overflow:hidden; border:none; border-radius:27px; box-shadow:0 28px 80px rgba(15,23,42,.26); }
.al3-detail-modal .modal-header { padding:23px 27px; border:none; color:#fff; background:linear-gradient(135deg,#005baa,#008bd2); }
.al3-detail-modal .modal-title { margin-top:7px; font-size:24px; font-weight:850; }
.al3-modal-kicker { padding:0; border:none; background:transparent; font-size:11px; opacity:.9; }
.al3-detail-modal .btn-close { filter:invert(1); opacity:.9; }
.al3-detail-modal .modal-body { padding:25px 27px; background:#f7fbff; }
.al3-modal-profile { display:flex; align-items:center; gap:14px; padding:17px; margin-bottom:18px; border:1px solid #dbe7f3; border-radius:19px; background:#fff; }
.al3-modal-avatar { display:grid; place-items:center; width:55px; height:55px; flex:0 0 auto; border-radius:17px; color:#005baa; background:#eaf4ff; font-size:24px; }
.al3-modal-profile h4 { margin:0 0 4px; color:#0f172a; font-size:19px; font-weight:850; }
.al3-modal-profile p { margin:0; color:#64748b; }
.al3-detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.al3-detail-item { display:flex; align-items:flex-start; gap:11px; min-width:0; padding:14px; border:1px solid #e1eaf3; border-radius:16px; background:#fff; }
.al3-detail-icon { display:grid; place-items:center; width:37px; height:37px; flex:0 0 auto; border-radius:11px; color:#005baa; background:#eaf4ff; }
.al3-detail-item > div:last-child { min-width:0; }
.al3-detail-item span { display:block; margin-bottom:4px; color:#718096; font-size:11.5px; font-weight:700; }
.al3-detail-item strong { display:block; color:#0f172a; font-size:13px; line-height:1.45; word-break:break-word; white-space:pre-line; }
.al3-detail-modal .modal-footer { padding:15px 27px; border-top:1px solid #e7eef6; background:#fff; }
.al3-modal-close { display:inline-flex; align-items:center; gap:7px; padding:10px 15px; border:none; border-radius:12px; color:#475569; background:#eef3f8; font-weight:750; }

.al3-delete-modal .modal-body { padding:35px; text-align:center; }
.al3-delete-icon { display:grid; place-items:center; width:80px; height:80px; margin:0 auto 16px; border-radius:25px; color:#dc2626; background:#fee2e2; font-size:34px; }
.al3-delete-kicker { display:block; margin-bottom:4px; color:#b42318; font-size:11px; font-weight:850; letter-spacing:.7px; text-transform:uppercase; }
.al3-delete-modal h4 { margin:0 0 8px; color:#0f172a; font-size:23px; font-weight:850; }
.al3-delete-modal p { margin:0; color:#64748b; line-height:1.55; }
.al3-delete-summary { display:grid; gap:4px; padding:16px; margin:20px 0; border:1px solid #e3ebf3; border-radius:16px; background:#f8fbff; }
.al3-delete-summary strong { color:#0f172a; font-size:15px; }
.al3-delete-summary span { color:#64748b; font-size:13px; }
.al3-delete-actions { display:flex; justify-content:center; gap:10px; }
.al3-cancel-delete,
.al3-confirm-delete { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:45px; padding:0 17px; border:none; border-radius:13px; font-weight:800; }
.al3-cancel-delete { color:#475569; background:#eef3f8; }
.al3-confirm-delete { color:#fff; background:#dc2626; }
.al3-confirm-delete:hover { background:#b91c1c; }

@media (max-width: 1199.98px) {
    .al3-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .al3-filter-form { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .al3-field-wide,
    .al3-field-job { grid-column:auto; }
    .al3-filter-actions { align-self:end; }
    .al3-detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 991.98px) {
    .al3-hero { flex-direction:column; align-items:stretch; padding:35px; }
    .al3-hero-actions { width:100%; flex-basis:auto; grid-template-columns:repeat(2,minmax(0,1fr)); }
    .al3-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 767.98px) {
    .al3-page { padding-top:23px; }
    .al3-hero { min-height:auto; padding:27px 22px; border-radius:23px; }
    .al3-hero h1 { font-size:30px; }
    .al3-hero-actions { grid-template-columns:1fr; }
    .al3-stats { grid-template-columns:1fr; gap:11px; }
    .al3-stat { min-height:88px; }
    .al3-filter-card { padding:19px; border-radius:21px; }
    .al3-section-head,
    .al3-list-head { align-items:flex-start; flex-direction:column; }
    .al3-filter-form { grid-template-columns:1fr; }
    .al3-filter-actions { width:100%; }
    .al3-filter-submit,
    .al3-filter-clear { flex:1; }
    .al3-list-head { padding:20px; }
    .al3-table-wrap { overflow:visible; max-height:none; padding:13px; }
    .al3-table,
    .al3-table tbody,
    .al3-table tr,
    .al3-table td { display:block; width:100%; min-width:0; }
    .al3-table thead { display:none; }
    .al3-table tbody { display:grid; gap:13px; }
    .al3-table tbody tr { overflow:hidden; border:1px solid #dbe7f3; border-radius:19px; background:#fff; box-shadow:0 10px 25px rgba(15,23,42,.06); }
    .al3-table tbody tr:hover { box-shadow:0 14px 30px rgba(15,23,42,.1); }
    .al3-table tbody td { display:grid; grid-template-columns:112px minmax(0,1fr); gap:12px; padding:13px 15px; border-bottom:1px solid #edf2f7; }
    .al3-table tbody td::before { content:attr(data-label); color:#718096; font-size:11px; font-weight:850; letter-spacing:.35px; text-transform:uppercase; }
    .al3-table tbody td:last-child { border-bottom:none; }
    .al3-person,
    .al3-contact,
    .al3-qualification,
    .al3-job-need { min-width:0; max-width:none; }
    .al3-row-actions { justify-content:flex-start; }
    .al3-pagination-wrap { align-items:flex-start; flex-direction:column; }
    .al3-pagination { flex-wrap:wrap; }
    .al3-detail-modal .modal-body { padding:19px; }
    .al3-detail-grid { grid-template-columns:1fr; }
    .al3-delete-actions { flex-direction:column-reverse; }
    .al3-cancel-delete,
    .al3-confirm-delete { width:100%; }
}

@media (max-width: 479.98px) {
    .al3-filter-actions { flex-direction:column; }
    .al3-filter-submit,
    .al3-filter-clear { width:100%; }
    .al3-table tbody td { grid-template-columns:1fr; gap:7px; }
    .al3-table tbody td::before { padding-bottom:2px; border-bottom:1px dashed #e2e8f0; }
}


/* =========================================================
   APPLICANT EDIT V2
   Dashboard + StatusList + EditStatus + ApplicantList + Edit
   ========================================================= */

.ae2-page {
    --ae2-primary: #005baa;
    --ae2-primary-dark: #003f7d;
    --ae2-cyan: #0891b2;
    --ae2-ink: #0f172a;
    --ae2-muted: #64748b;
    --ae2-line: #dbe7f3;
    --ae2-soft: #eaf4ff;
    min-height: calc(100vh - 80px);
    padding: 38px 0 58px;
    background:
        radial-gradient(circle at 6% 3%, rgba(0, 119, 200, .09), transparent 24%),
        radial-gradient(circle at 94% 7%, rgba(6, 182, 212, .07), transparent 22%),
        linear-gradient(180deg, #f8fbfe 0%, #f3f7fb 100%);
}

.ae2-page *,
.ae2-page *::before,
.ae2-page *::after {
    box-sizing: border-box;
}

.ae2-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    min-height: 280px;
    padding: 44px;
    margin-bottom: 22px;
    border-radius: 32px;
    color: #fff;
    background:
        linear-gradient(115deg, rgba(0, 55, 109, .98), rgba(0, 119, 200, .94)),
        linear-gradient(135deg, #005baa, #0891b2);
    box-shadow: 0 25px 62px rgba(0, 73, 137, .22);
}

.ae2-hero::before,
.ae2-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.ae2-hero::before {
    width: 520px;
    height: 520px;
    right: -195px;
    top: -330px;
    background: rgba(255, 255, 255, .11);
}

.ae2-hero::after {
    width: 280px;
    height: 280px;
    right: 195px;
    bottom: -230px;
    border: 44px solid rgba(255, 255, 255, .065);
}

.ae2-hero-content,
.ae2-hero-profile {
    position: relative;
    z-index: 2;
}

.ae2-hero-content {
    max-width: 760px;
}

.ae2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, .27);
    border-radius: 999px;
    background: rgba(255, 255, 255, .13);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .55px;
    text-transform: uppercase;
}

.ae2-hero h1 {
    margin: 18px 0 12px;
    font-size: clamp(32px, 4vw, 47px);
    line-height: 1.12;
    font-weight: 850;
    letter-spacing: -1px;
}

.ae2-hero h1 span {
    display: block;
    color: #aee9ff;
}

.ae2-hero-content > p {
    max-width: 720px;
    margin: 0;
    color: rgba(255, 255, 255, .9);
    font-size: 15.5px;
    line-height: 1.75;
}

.ae2-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.ae2-hero-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .11);
    color: rgba(255, 255, 255, .95);
    font-size: 13px;
    font-weight: 700;
}

.ae2-hero-profile {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 310px;
    flex: 0 0 310px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 23px;
    background: rgba(255, 255, 255, .13);
    backdrop-filter: blur(12px);
}

.ae2-hero-avatar {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    flex: 0 0 auto;
    border-radius: 20px;
    color: var(--ae2-primary);
    background: #fff;
    font-size: 25px;
    font-weight: 850;
    box-shadow: 0 13px 30px rgba(0, 0, 0, .14);
}

.ae2-hero-profile small,
.ae2-hero-profile strong {
    display: block;
}

.ae2-hero-profile small {
    margin-bottom: 3px;
    color: rgba(255, 255, 255, .74);
    font-size: 12px;
}

.ae2-hero-profile strong {
    max-width: 185px;
    overflow: hidden;
    margin-bottom: 8px;
    color: #fff;
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ae2-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.ae2-status-new { color: #1d4ed8; background: #dbeafe; }
.ae2-status-processing { color: #92400e; background: #fef3c7; }
.ae2-status-contacted { color: #c2410c; background: #ffedd5; }
.ae2-status-success { color: #15803d; background: #dcfce7; }
.ae2-status-failed { color: #b91c1c; background: #fee2e2; }

.ae2-stepbar {
    position: sticky;
    top: 14px;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 13px;
    margin-bottom: 24px;
    border: 1px solid var(--ae2-line);
    border-radius: 22px;
    background: rgba(255, 255, 255, .93);
    box-shadow: 0 14px 36px rgba(15, 23, 42, .08);
    backdrop-filter: blur(12px);
}

.ae2-step {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 11px 13px;
    border-radius: 15px;
    color: #53657a;
    text-decoration: none;
    transition: .2s ease;
}

.ae2-step > span {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    flex: 0 0 auto;
    border-radius: 11px;
    color: var(--ae2-primary);
    background: var(--ae2-soft);
    font-size: 12px;
    font-weight: 850;
}

.ae2-step strong,
.ae2-step small {
    display: block;
}

.ae2-step strong {
    color: var(--ae2-ink);
    font-size: 13px;
}

.ae2-step small {
    margin-top: 2px;
    color: #8291a4;
    font-size: 11px;
}

.ae2-step:hover,
.ae2-step.is-active {
    color: var(--ae2-primary);
    background: #edf7ff;
}

.ae2-step.is-active > span {
    color: #fff;
    background: var(--ae2-primary);
    box-shadow: 0 8px 18px rgba(0, 91, 170, .23);
}

.ae2-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 24px;
    align-items: start;
}

.ae2-main {
    display: grid;
    gap: 22px;
    min-width: 0;
}

.ae2-validation-summary {
    margin: 0;
    padding: 17px 20px;
    border: 1px solid #fecaca;
    border-radius: 17px;
    background: #fff1f2;
    box-shadow: 0 10px 28px rgba(190, 24, 93, .06);
}

.ae2-validation-summary:empty,
.ae2-validation-summary.validation-summary-valid {
    display: none;
}

.ae2-section {
    scroll-margin-top: 110px;
    padding: 28px;
    border: 1px solid var(--ae2-line);
    border-radius: 27px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 16px 40px rgba(15, 23, 42, .075);
}

.ae2-section-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 19px;
    margin-bottom: 23px;
    border-bottom: 1px solid #edf2f7;
}

.ae2-section-icon {
    display: grid;
    place-items: center;
    width: 49px;
    height: 49px;
    flex: 0 0 auto;
    border-radius: 15px;
    color: var(--ae2-primary);
    background: var(--ae2-soft);
    font-size: 21px;
}

.ae2-section-heading h3 {
    margin: 0 0 4px;
    color: var(--ae2-ink);
    font-size: 21px;
    font-weight: 820;
}

.ae2-section-heading p {
    margin: 0;
    color: var(--ae2-muted);
    font-size: 13px;
}

.ae2-label {
    display: block;
    margin-bottom: 8px;
    color: #25364b;
    font-size: 13px;
    font-weight: 750;
}

.ae2-field {
    position: relative;
}

.ae2-field > i {
    position: absolute;
    left: 16px;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    color: var(--ae2-primary);
    font-size: 17px;
    pointer-events: none;
}

.ae2-field .form-control,
.ae2-field .form-select {
    width: 100%;
    min-height: 52px;
    padding-left: 47px;
    border: 1px solid #d7e3ee;
    border-radius: 15px;
    outline: none;
    color: var(--ae2-ink);
    background: #fbfdff;
    font-size: 14px;
    font-weight: 550;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.ae2-field .form-select {
    padding-right: 42px;
}

.ae2-field .form-control:hover,
.ae2-field .form-select:hover {
    border-color: #aacce5;
    background: #fff;
}

.ae2-field .form-control:focus,
.ae2-field .form-select:focus {
    border-color: #65aee1;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(0, 91, 170, .10);
}

.ae2-page .required-mark {
    color: #dc2626;
}

.ae2-page .text-danger.small {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
}

.ae2-page .priority-other-wrap {
    display: none;
}

.ae2-page .priority-other-wrap.is-visible {
    display: block;
}

.ae2-actionbar {
    position: sticky;
    bottom: 14px;
    z-index: 18;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 17px 18px;
    border: 1px solid var(--ae2-line);
    border-radius: 22px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 18px 48px rgba(15, 23, 42, .14);
    backdrop-filter: blur(14px);
}

.ae2-action-note {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.ae2-action-note > i {
    display: grid;
    place-items: center;
    width: 41px;
    height: 41px;
    flex: 0 0 auto;
    border-radius: 13px;
    color: #15803d;
    background: #dcfce7;
    font-size: 18px;
}

.ae2-action-note strong,
.ae2-action-note span {
    display: block;
}

.ae2-action-note strong {
    color: var(--ae2-ink);
    font-size: 13px;
}

.ae2-action-note span {
    margin-top: 2px;
    color: var(--ae2-muted);
    font-size: 11.5px;
}

.ae2-action-buttons {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}

.ae2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 45px;
    padding: 11px 16px;
    border: 1px solid transparent;
    border-radius: 13px;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.ae2-btn:hover {
    transform: translateY(-2px);
}

.ae2-btn-back {
    color: #334155;
    border-color: #e2e8f0;
    background: #f8fafc;
}

.ae2-btn-back:hover {
    color: var(--ae2-primary);
    background: #edf7ff;
}

.ae2-btn-save {
    color: #fff;
    background: linear-gradient(135deg, #16a34a, #15803d);
    box-shadow: 0 12px 24px rgba(21, 128, 61, .2);
}

.ae2-btn-save:hover {
    color: #fff;
    background: linear-gradient(135deg, #15803d, #166534);
}

.ae2-sidebar {
    position: sticky;
    top: 108px;
    display: grid;
    gap: 17px;
}

.ae2-side-card {
    padding: 21px;
    border: 1px solid var(--ae2-line);
    border-radius: 23px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 15px 36px rgba(15, 23, 42, .075);
}

.ae2-summary-card {
    overflow: hidden;
}

.ae2-summary-head {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-bottom: 17px;
    margin-bottom: 15px;
    border-bottom: 1px solid #edf2f7;
}

.ae2-summary-avatar {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, var(--ae2-primary), var(--ae2-cyan));
    font-size: 21px;
    font-weight: 850;
    box-shadow: 0 11px 25px rgba(0, 91, 170, .2);
}

.ae2-summary-head span,
.ae2-summary-head h2,
.ae2-summary-head p {
    display: block;
}

.ae2-summary-head span {
    color: #7a8ba0;
    font-size: 11px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.ae2-summary-head h2 {
    max-width: 205px;
    overflow: hidden;
    margin: 3px 0 2px;
    color: var(--ae2-ink);
    font-size: 17px;
    font-weight: 820;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ae2-summary-head p {
    margin: 0;
    color: var(--ae2-primary);
    font-size: 12px;
    font-weight: 700;
}

.ae2-summary-list,
.ae2-job-info {
    display: grid;
    gap: 12px;
}

.ae2-summary-list > div,
.ae2-job-info > div {
    min-width: 0;
    padding: 11px 12px;
    border-radius: 13px;
    background: #f8fbfe;
}

.ae2-summary-list span,
.ae2-summary-list strong,
.ae2-job-info span,
.ae2-job-info strong {
    display: block;
}

.ae2-summary-list span,
.ae2-job-info span {
    margin-bottom: 4px;
    color: #7a8ba0;
    font-size: 11px;
    font-weight: 650;
}

.ae2-summary-list span i {
    margin-right: 5px;
    color: var(--ae2-primary);
}

.ae2-summary-list strong,
.ae2-job-info strong {
    overflow: hidden;
    color: #26364a;
    font-size: 12px;
    line-height: 1.45;
    text-overflow: ellipsis;
    word-break: break-word;
}

.ae2-side-title {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 15px;
    margin-bottom: 14px;
    border-bottom: 1px solid #edf2f7;
}

.ae2-side-icon {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    flex: 0 0 auto;
    border-radius: 14px;
    color: #d97706;
    background: #fff3d6;
    font-size: 18px;
}

.ae2-side-title small,
.ae2-side-title h3 {
    display: block;
}

.ae2-side-title small {
    color: #8a98aa;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .45px;
}

.ae2-side-title h3 {
    margin: 2px 0 0;
    color: var(--ae2-ink);
    font-size: 15px;
    font-weight: 800;
}

.ae2-tip-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.ae2-tip-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 13px;
    color: #b45309;
    background: #fef3c7;
    font-size: 18px;
}

.ae2-tip-card h3 {
    margin: 1px 0 6px;
    color: var(--ae2-ink);
    font-size: 14px;
    font-weight: 800;
}

.ae2-tip-card p {
    margin: 0;
    color: var(--ae2-muted);
    font-size: 12px;
    line-height: 1.55;
}

@media (max-width: 1199.98px) {
    .ae2-workspace {
        grid-template-columns: minmax(0, 1fr) 290px;
    }

    .ae2-hero-profile {
        width: 280px;
        flex-basis: 280px;
    }
}

@media (max-width: 991.98px) {
    .ae2-hero {
        align-items: stretch;
        flex-direction: column;
        padding: 35px;
    }

    .ae2-hero-profile {
        width: 100%;
        flex-basis: auto;
    }

    .ae2-workspace {
        grid-template-columns: 1fr;
    }

    .ae2-sidebar {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ae2-tip-card {
        grid-column: 1 / -1;
    }

    .ae2-actionbar {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .ae2-page {
        padding-top: 24px;
    }

    .ae2-hero {
        min-height: auto;
        padding: 27px 22px;
        border-radius: 24px;
    }

    .ae2-hero h1 {
        font-size: 29px;
    }

    .ae2-stepbar {
        position: static;
        grid-template-columns: 1fr;
    }

    .ae2-step small {
        display: none;
    }

    .ae2-section {
        padding: 21px;
        border-radius: 22px;
    }

    .ae2-section-heading {
        align-items: flex-start;
    }

    .ae2-actionbar {
        align-items: stretch;
        flex-direction: column;
    }

    .ae2-action-buttons {
        width: 100%;
    }

    .ae2-btn {
        flex: 1 1 0;
    }

    .ae2-sidebar {
        grid-template-columns: 1fr;
    }

    .ae2-tip-card {
        grid-column: auto;
    }
}

@media (max-width: 479.98px) {
    .ae2-hero-meta {
        display: grid;
    }

    .ae2-hero-profile {
        align-items: flex-start;
    }

    .ae2-action-note {
        display: none;
    }

    .ae2-action-buttons {
        flex-direction: column-reverse;
    }

    .ae2-btn {
        width: 100%;
    }
}


/* =========================================================
   DELETE APPLICANT MODAL V4
   ========================================================= */

.applicant-delete-modal {
    --dl4-danger: #dc2626;
    --dl4-danger-dark: #b91c1c;
    --dl4-danger-soft: #fee2e2;
    --dl4-ink: #0f172a;
    --dl4-muted: #64748b;
    --dl4-line: #dbe7f3;
}

.applicant-delete-modal .modal-dialog {
    max-width: 560px;
    padding: 18px;
}

.applicant-delete-modal.show .modal-dialog {
    animation: dl4ModalEnter .24s ease both;
}

.dl4-modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 34px 90px rgba(15, 23, 42, .30);
}

.dl4-modal-body {
    position: relative;
    padding: 34px;
    text-align: center;
}

.dl4-close-btn {
    position: absolute;
    top: 17px;
    right: 17px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    color: #64748b;
    background: #f1f5f9;
    transition: .2s ease;
}

.dl4-close-btn:hover {
    color: var(--dl4-danger);
    background: #fff1f2;
    transform: rotate(4deg);
}

.dl4-danger-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    margin: 0 auto 17px;
    border-radius: 25px;
    color: var(--dl4-danger);
    background: linear-gradient(145deg, #fff1f2, var(--dl4-danger-soft));
    font-size: 34px;
    box-shadow: 0 16px 32px rgba(220, 38, 38, .14);
}

.dl4-danger-icon::after {
    content: "";
    position: absolute;
    inset: -8px;
    border: 1px solid rgba(220, 38, 38, .14);
    border-radius: 30px;
}

.dl4-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
    color: var(--dl4-danger);
    font-size: 11.5px;
    font-weight: 850;
    letter-spacing: .75px;
    text-transform: uppercase;
}

.dl4-modal-body h2 {
    margin: 0;
    color: var(--dl4-ink);
    font-size: 27px;
    line-height: 1.2;
    font-weight: 850;
    letter-spacing: -.45px;
}

.dl4-description {
    max-width: 430px;
    margin: 11px auto 21px;
    color: var(--dl4-muted);
    font-size: 14px;
    line-height: 1.65;
}

.dl4-applicant-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    margin-bottom: 15px;
    border: 1px solid var(--dl4-line);
    border-radius: 19px;
    background: linear-gradient(145deg, #fbfdff, #f6f9fc);
    text-align: left;
}

.dl4-avatar {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    border-radius: 17px;
    color: #005baa;
    background: #eaf4ff;
    font-size: 18px;
    font-weight: 850;
}

.dl4-applicant-main {
    min-width: 0;
}

.dl4-applicant-main > strong {
    display: block;
    overflow: hidden;
    margin-bottom: 7px;
    color: var(--dl4-ink);
    font-size: 16px;
    font-weight: 820;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dl4-applicant-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
}

.dl4-applicant-contact > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    font-size: 12px;
}

.dl4-applicant-contact i {
    color: #005baa;
}

.dl4-warning-box {
    padding: 15px 16px;
    margin-bottom: 21px;
    border: 1px solid #fed7aa;
    border-radius: 17px;
    background: #fff7ed;
    text-align: left;
}

.dl4-warning-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
    color: #9a3412;
    font-size: 13px;
}

.dl4-warning-title i {
    font-size: 16px;
}

.dl4-warning-box ul {
    display: grid;
    gap: 6px;
    padding-left: 19px;
    margin: 0;
    color: #7c2d12;
    font-size: 12px;
    line-height: 1.45;
}

.dl4-delete-form {
    display: flex;
    justify-content: center;
    gap: 11px;
}

.dl4-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 11px 18px;
    border: 1px solid transparent;
    border-radius: 13px;
    font-size: 13px;
    font-weight: 820;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.dl4-btn:hover {
    transform: translateY(-2px);
}

.dl4-btn-cancel {
    color: #334155;
    border-color: #e2e8f0;
    background: #f8fafc;
}

.dl4-btn-cancel:hover {
    color: #0f172a;
    background: #eef2f7;
}

.dl4-btn-delete {
    color: #fff;
    background: linear-gradient(135deg, var(--dl4-danger), var(--dl4-danger-dark));
    box-shadow: 0 12px 24px rgba(220, 38, 38, .22);
}

.dl4-btn-delete:hover {
    color: #fff;
    background: linear-gradient(135deg, #b91c1c, #991b1b);
    box-shadow: 0 16px 30px rgba(185, 28, 28, .27);
}

.modal-backdrop.show {
    opacity: .58;
    backdrop-filter: blur(4px);
}

@keyframes dl4ModalEnter {
    from {
        opacity: 0;
        transform: translateY(16px) scale(.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 575.98px) {
    .applicant-delete-modal .modal-dialog {
        margin: 0;
        padding: 12px;
    }

    .dl4-modal-content {
        border-radius: 24px;
    }

    .dl4-modal-body {
        padding: 29px 20px 22px;
    }

    .dl4-modal-body h2 {
        font-size: 23px;
    }

    .dl4-applicant-contact {
        display: grid;
        gap: 6px;
    }

    .dl4-delete-form {
        flex-direction: column-reverse;
    }

    .dl4-btn {
        width: 100%;
    }
}
.logx-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 34px;
    border-radius: 28px;
    margin-bottom: 24px;
    color: #fff;
    background: linear-gradient(135deg,#075db7,#1797d7);
    box-shadow: 0 20px 45px rgba(7,93,183,.2)
}

.logx-kicker {
    display: inline-flex;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.15)
}

.logx-hero h1 {
    margin: 16px 0 8px;
    font-size: 42px;
    font-weight: 850
}

.logx-hero p {
    margin: 0;
    max-width: 700px;
    opacity: .92
}

.logx-pill {
    padding: 12px 18px;
    border-radius: 16px;
    background: rgba(255,255,255,.16);
    font-weight: 700
}

.log-card-modern {
    border: 1px solid #dbe7f3;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 16px 35px rgba(15,62,104,.08)
}

.log-type-login {
    background: #dcfce7;
    color: #166534
}

.log-type-update {
    background: #dbeafe;
    color: #1d4ed8
}

.log-type-delete {
    background: #fee2e2;
    color: #b91c1c
}

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


/* =========================================================
   ADMIN USERS V2 + ADMIN USER FORM V3
   Users / CreateUser / EditUser / Delete modal
   ========================================================= */

.au2-page,
.auf-page {
    --au-primary: #005baa;
    --au-primary-dark: #003f7d;
    --au-cyan: #0891b2;
    --au-ink: #0f172a;
    --au-muted: #64748b;
    --au-line: #dbe7f3;
    min-height: calc(100vh - 80px);
    padding: 38px 0 58px;
    background:
        radial-gradient(circle at 6% 3%, rgba(0, 119, 200, .09), transparent 25%),
        radial-gradient(circle at 94% 8%, rgba(6, 182, 212, .08), transparent 22%),
        linear-gradient(180deg, #f8fbfe 0%, #f3f8fc 100%);
}

.au2-page *,
.auf-page *,
.au2-page *::before,
.au2-page *::after,
.auf-page *::before,
.auf-page *::after {
    box-sizing: border-box;
}

.au2-container,
.auf-container {
    max-width: 1320px;
}

.au2-hero,
.auf-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    min-height: 280px;
    padding: 44px;
    margin-bottom: 24px;
    border-radius: 32px;
    color: #fff;
    background:
        linear-gradient(115deg, rgba(0, 54, 107, .98), rgba(0, 119, 200, .94)),
        linear-gradient(135deg, #005baa, #0891b2);
    box-shadow: 0 26px 65px rgba(0, 72, 135, .22);
}

.au2-hero::before,
.au2-hero::after,
.auf-hero::before,
.auf-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.au2-hero::before,
.auf-hero::before {
    width: 520px;
    height: 520px;
    right: -205px;
    top: -320px;
    background: rgba(255, 255, 255, .11);
}

.au2-hero::after,
.auf-hero::after {
    width: 280px;
    height: 280px;
    right: 215px;
    bottom: -225px;
    border: 44px solid rgba(255, 255, 255, .065);
}

.au2-hero-content,
.au2-hero-actions,
.auf-hero-content,
.auf-hero-profile,
.auf-create-visual {
    position: relative;
    z-index: 2;
}

.au2-hero-content,
.auf-hero-content {
    max-width: 770px;
}

.au2-eyebrow,
.auf-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 999px;
    background: rgba(255, 255, 255, .13);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .55px;
    text-transform: uppercase;
}

.au2-hero h1,
.auf-hero h1 {
    margin: 18px 0 12px;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.12;
    font-weight: 850;
    letter-spacing: -1px;
}

.au2-hero h1 span,
.auf-hero h1 span {
    display: block;
    color: #aee9ff;
}

.au2-hero-content > p,
.auf-hero-content > p {
    max-width: 720px;
    margin: 0;
    color: rgba(255, 255, 255, .9);
    font-size: 15.5px;
    line-height: 1.75;
}

.au2-hero-meta,
.auf-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.au2-hero-meta > span,
.auf-hero-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .11);
    color: rgba(255, 255, 255, .95);
    font-size: 13px;
    font-weight: 700;
}

.au2-hero-actions {
    display: grid;
    gap: 11px;
    width: 220px;
    flex: 0 0 220px;
}

.au2-btn,
.auf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 12px 17px;
    border: 1px solid transparent;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 820;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.au2-btn:hover,
.auf-btn:hover {
    transform: translateY(-2px);
}

.au2-btn-light {
    color: var(--au-primary);
    background: #fff;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .13);
}

.au2-btn-light:hover {
    color: var(--au-primary-dark);
    background: #f8fbff;
}

.au2-btn-ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, .24);
    background: rgba(7, 31, 59, .22);
}

.au2-btn-ghost:hover {
    color: #fff;
    background: rgba(255, 255, 255, .18);
}

.au2-btn-primary {
    color: #fff;
    background: var(--au-primary);
}

.au2-btn-primary:hover {
    color: #fff;
    background: var(--au-primary-dark);
}

.au2-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 24px;
}

.au2-stat {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 108px;
    padding: 18px;
    border: 1px solid var(--au-line);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 13px 32px rgba(15, 23, 42, .07);
}

.au2-stat-icon {
    display: grid;
    place-items: center;
    width: 49px;
    height: 49px;
    flex: 0 0 auto;
    border-radius: 15px;
    font-size: 21px;
}

.au2-stat strong,
.au2-stat span {
    display: block;
}

.au2-stat strong {
    color: var(--au-ink);
    font-size: 25px;
    line-height: 1;
    font-weight: 850;
}

.au2-stat > div > span {
    margin-top: 4px;
    color: var(--au-muted);
    font-size: 12.5px;
    font-weight: 700;
}

.au2-stat-blue .au2-stat-icon {
    color: #2563eb;
    background: #dbeafe;
}

.au2-stat-red .au2-stat-icon {
    color: #dc2626;
    background: #fee2e2;
}

.au2-stat-green .au2-stat-icon {
    color: #16a34a;
    background: #dcfce7;
}

.au2-list-card {
    overflow: hidden;
    border: 1px solid var(--au-line);
    border-radius: 27px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 17px 42px rgba(15, 23, 42, .075);
}

.au2-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 26px;
    border-bottom: 1px solid #edf2f7;
}

.au2-list-head > div:first-child > span {
    display: block;
    margin-bottom: 3px;
    color: var(--au-primary);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .65px;
    text-transform: uppercase;
}

.au2-list-head h2 {
    margin: 0;
    color: var(--au-ink);
    font-size: 22px;
    font-weight: 850;
}

.au2-list-head p {
    margin: 5px 0 0;
    color: var(--au-muted);
    font-size: 13px;
}

.au2-list-count {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border-radius: 999px;
    color: #52657a;
    background: #f3f7fb;
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
}

.au2-table-wrap {
    padding: 0 18px 18px;
}

.au2-table {
    margin: 0;
    min-width: 900px;
}

.au2-table thead th {
    padding: 15px 14px;
    border-bottom: 1px solid #dbe7f3;
    color: var(--au-primary);
    background: #edf6ff;
    font-size: 12.5px;
    font-weight: 850;
    white-space: nowrap;
}

.au2-table tbody td {
    padding: 16px 14px;
    border-color: #edf2f7;
}

.au2-table tbody tr {
    transition: background-color .18s ease, box-shadow .18s ease;
}

.au2-table tbody tr:hover {
    background: #f8fbff;
    box-shadow: inset 4px 0 0 var(--au-primary);
}

.au2-user,
.au2-date {
    display: flex;
    align-items: center;
    gap: 11px;
}

.au2-avatar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 14px;
    color: var(--au-primary);
    background: #eaf4ff;
    font-size: 15px;
    font-weight: 850;
}

.au2-user strong,
.au2-user small,
.au2-name-cell strong,
.au2-name-cell small,
.au2-date strong,
.au2-date small {
    display: block;
}

.au2-user strong,
.au2-name-cell strong,
.au2-date strong {
    color: var(--au-ink);
    font-size: 13px;
}

.au2-user small,
.au2-name-cell small,
.au2-date small {
    margin-top: 3px;
    color: #8492a5;
    font-size: 10.5px;
}

.au2-date > i {
    color: var(--au-primary);
}

.au2-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.au2-role-super {
    color: #b91c1c;
    background: #fee2e2;
}

.au2-role-admin {
    color: #15803d;
    background: #dcfce7;
}

.au2-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.au2-icon-btn {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 11px;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}

.au2-icon-btn:hover {
    transform: translateY(-2px);
}

.au2-edit-btn {
    color: #9a5f00;
    background: #fff0c8;
}

.au2-delete-btn {
    color: #b91c1c;
    background: #ffe4e6;
}

.au2-empty {
    display: grid;
    justify-items: center;
    padding: 60px 25px;
    text-align: center;
}

.au2-empty > span {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin-bottom: 16px;
    border-radius: 24px;
    color: var(--au-primary);
    background: #eaf4ff;
    font-size: 31px;
}

.au2-empty h3 {
    margin: 0 0 7px;
    color: var(--au-ink);
    font-size: 20px;
    font-weight: 850;
}

.au2-empty p {
    margin: 0 0 18px;
    color: var(--au-muted);
}

.au2-delete-modal .modal-dialog {
    max-width: 560px;
    padding: 16px;
}

.au2-delete-content {
    overflow: hidden;
    border: 0;
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 34px 90px rgba(15, 23, 42, .30);
}

.au2-delete-body {
    position: relative;
    padding: 34px;
    text-align: center;
}

.au2-modal-close {
    position: absolute;
    top: 17px;
    right: 17px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    color: #64748b;
    background: #f1f5f9;
}

.au2-modal-close:hover {
    color: #dc2626;
    background: #fff1f2;
}

.au2-delete-icon {
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    margin: 0 auto 17px;
    border-radius: 25px;
    color: #dc2626;
    background: linear-gradient(145deg, #fff1f2, #fee2e2);
    font-size: 34px;
    box-shadow: 0 16px 32px rgba(220, 38, 38, .14);
}

.au2-delete-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
    color: #dc2626;
    font-size: 11.5px;
    font-weight: 850;
    letter-spacing: .75px;
    text-transform: uppercase;
}

.au2-delete-body h2 {
    margin: 0;
    color: var(--au-ink);
    font-size: 27px;
    font-weight: 850;
}

.au2-delete-description {
    max-width: 440px;
    margin: 11px auto 20px;
    color: var(--au-muted);
    font-size: 14px;
    line-height: 1.65;
}

.au2-delete-profile {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px;
    margin-bottom: 13px;
    border: 1px solid var(--au-line);
    border-radius: 19px;
    background: linear-gradient(145deg, #fbfdff, #f6f9fc);
    text-align: left;
}

.au2-delete-avatar {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    border-radius: 17px;
    color: var(--au-primary);
    background: #eaf4ff;
    font-size: 18px;
    font-weight: 850;
}

.au2-delete-profile > div:nth-child(2) {
    min-width: 0;
    flex: 1;
}

.au2-delete-profile span,
.au2-delete-profile strong,
.au2-delete-profile small {
    display: block;
}

.au2-delete-profile > div:nth-child(2) > span {
    color: #8291a4;
    font-size: 10.5px;
    text-transform: uppercase;
}

.au2-delete-profile strong {
    margin: 3px 0;
    color: var(--au-ink);
    font-size: 15px;
}

.au2-delete-profile small {
    color: var(--au-muted);
    font-size: 11.5px;
}

.au2-delete-role {
    padding: 6px 9px;
    border-radius: 999px;
    color: #b91c1c;
    background: #fee2e2;
    font-size: 10.5px;
    font-weight: 800;
}

.au2-delete-summary {
    display: grid;
    gap: 9px;
    padding: 13px 15px;
    margin-bottom: 13px;
    border: 1px solid #e5edf7;
    border-radius: 17px;
    background: #f8fbff;
    text-align: left;
}

.au2-delete-summary > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.au2-delete-summary span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #64748b;
    font-size: 11.5px;
}

.au2-delete-summary span i {
    color: var(--au-primary);
}

.au2-delete-summary strong {
    color: var(--au-ink);
    font-size: 11.5px;
    text-align: right;
}

.au2-warning-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 14px;
    margin-bottom: 20px;
    border: 1px solid #fed7aa;
    border-radius: 16px;
    color: #9a3412;
    background: #fff7ed;
    text-align: left;
}

.au2-warning-box p {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.5;
}

.au2-delete-actions {
    display: flex;
    justify-content: center;
    gap: 11px;
}

.au2-btn-cancel {
    color: #334155;
    border-color: #e2e8f0;
    background: #f8fafc;
}

.au2-btn-danger {
    color: #fff;
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    box-shadow: 0 12px 24px rgba(220, 38, 38, .22);
}

.au2-btn-danger:hover {
    color: #fff;
    background: linear-gradient(135deg, #b91c1c, #991b1b);
}

.auf-hero-profile,
.auf-create-visual {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 315px;
    flex: 0 0 315px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 23px;
    background: rgba(255, 255, 255, .13);
    backdrop-filter: blur(12px);
}

.auf-profile-avatar,
.auf-create-visual > span {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    flex: 0 0 auto;
    border-radius: 20px;
    color: var(--au-primary);
    background: #fff;
    font-size: 24px;
    font-weight: 850;
    box-shadow: 0 13px 30px rgba(0, 0, 0, .14);
}

.auf-hero-profile small,
.auf-hero-profile strong,
.auf-create-visual small,
.auf-create-visual strong,
.auf-create-visual em {
    display: block;
}

.auf-hero-profile small,
.auf-create-visual small {
    margin-bottom: 3px;
    color: rgba(255, 255, 255, .74);
    font-size: 11px;
}

.auf-hero-profile strong,
.auf-create-visual strong {
    max-width: 200px;
    overflow: hidden;
    margin-bottom: 8px;
    color: #fff;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auf-create-visual em {
    color: #aee9ff;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}

.auf-role-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
}

.auf-role-super {
    color: #b91c1c;
    background: #fee2e2;
}

.auf-role-admin {
    color: #15803d;
    background: #dcfce7;
}

.auf-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 24px;
    align-items: start;
}

.auf-main-card,
.auf-side-card {
    border: 1px solid var(--au-line);
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 17px 42px rgba(15, 23, 42, .075);
}

.auf-main-card {
    padding: 28px;
    border-radius: 27px;
}

.auf-validation {
    margin-bottom: 20px;
    border-radius: 16px;
}

.auf-validation:empty,
.auf-validation.validation-summary-valid {
    display: none;
}

.auf-section-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 20px;
    margin-bottom: 22px;
    border-bottom: 1px solid #edf2f7;
}

.auf-section-head > span {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    flex: 0 0 auto;
    border-radius: 15px;
    color: var(--au-primary);
    background: #eaf4ff;
    font-size: 21px;
}

.auf-section-head small {
    display: block;
    margin-bottom: 3px;
    color: var(--au-primary);
    font-size: 10.5px;
    font-weight: 850;
    letter-spacing: .65px;
    text-transform: uppercase;
}

.auf-section-head h2 {
    margin: 0;
    color: var(--au-ink);
    font-size: 22px;
    font-weight: 850;
}

.auf-section-head p {
    margin: 5px 0 0;
    color: var(--au-muted);
    font-size: 12.5px;
}

.auf-label {
    display: block;
    margin-bottom: 8px;
    color: #26384e;
    font-size: 13px;
    font-weight: 760;
}

.auf-field {
    position: relative;
}

.auf-field > i {
    position: absolute;
    left: 16px;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    color: var(--au-primary);
    font-size: 16px;
    pointer-events: none;
}

.auf-field .form-control,
.auf-field .form-select {
    width: 100%;
    min-height: 52px;
    padding-left: 47px;
    border: 1px solid #d7e3ee;
    border-radius: 15px;
    color: var(--au-ink);
    background: #fbfdff;
    font-size: 14px;
    box-shadow: none;
}

.auf-field .form-select {
    padding-right: 42px;
}

.auf-field .form-control:focus,
.auf-field .form-select:focus {
    border-color: #65aee1;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(0, 91, 170, .10);
}

.auf-field-help {
    display: block;
    margin-top: 6px;
    color: #8391a3;
    font-size: 10.5px;
}

.auf-page .text-danger.small {
    display: block;
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 600;
}

.auf-actionbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 22px;
    margin-top: 24px;
    border-top: 1px solid #edf2f7;
}

.auf-action-note {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.auf-action-note > i {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 13px;
    color: #15803d;
    background: #dcfce7;
    font-size: 18px;
}

.auf-action-note strong,
.auf-action-note span {
    display: block;
}

.auf-action-note strong {
    color: var(--au-ink);
    font-size: 12.5px;
}

.auf-action-note span {
    margin-top: 2px;
    color: var(--au-muted);
    font-size: 10.5px;
}

.auf-action-buttons {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}

.auf-btn-back {
    color: #334155;
    border-color: #e2e8f0;
    background: #f8fafc;
}

.auf-btn-save,
.auf-btn-create {
    color: #fff;
    box-shadow: 0 12px 24px rgba(21, 128, 61, .2);
}

.auf-btn-save {
    background: linear-gradient(135deg, #005baa, #0077c8);
}

.auf-btn-create {
    background: linear-gradient(135deg, #16a34a, #15803d);
}

.auf-btn-save:hover,
.auf-btn-create:hover {
    color: #fff;
}

.auf-sidebar {
    position: sticky;
    top: 108px;
    display: grid;
    gap: 17px;
}

.auf-side-card {
    padding: 21px;
    border-radius: 23px;
}

.auf-profile-card,
.auf-create-guide {
    text-align: center;
}

.auf-side-avatar,
.auf-guide-icon {
    display: grid;
    place-items: center;
    width: 78px;
    height: 78px;
    margin: 0 auto 14px;
    border-radius: 22px;
    color: #fff;
    background: linear-gradient(135deg, var(--au-primary), var(--au-cyan));
    font-size: 26px;
    font-weight: 850;
    box-shadow: 0 14px 30px rgba(0, 91, 170, .18);
}

.auf-side-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--au-primary);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .65px;
    text-transform: uppercase;
}

.auf-profile-card h2,
.auf-create-guide h2 {
    margin: 0;
    color: var(--au-ink);
    font-size: 18px;
    font-weight: 850;
}

.auf-profile-card p,
.auf-create-guide p {
    margin: 6px 0 12px;
    color: var(--au-muted);
    font-size: 12px;
    line-height: 1.55;
}

.auf-side-title {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 15px;
    margin-bottom: 14px;
    border-bottom: 1px solid #edf2f7;
}

.auf-side-title > span {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    flex: 0 0 auto;
    border-radius: 14px;
    color: var(--au-primary);
    background: #eaf4ff;
    font-size: 18px;
}

.auf-side-title small,
.auf-side-title h3 {
    display: block;
}

.auf-side-title small {
    color: #8a98aa;
    font-size: 10.5px;
    text-transform: uppercase;
}

.auf-side-title h3 {
    margin: 2px 0 0;
    color: var(--au-ink);
    font-size: 15px;
    font-weight: 800;
}

.auf-side-list,
.auf-role-guide {
    display: grid;
    gap: 10px;
}

.auf-side-list > div,
.auf-role-guide > div {
    padding: 11px 12px;
    border-radius: 13px;
    background: #f8fbfe;
}

.auf-side-list span,
.auf-side-list strong,
.auf-role-guide strong,
.auf-role-guide span {
    display: block;
}

.auf-side-list span,
.auf-role-guide span {
    margin-bottom: 3px;
    color: #8090a4;
    font-size: 10.5px;
}

.auf-side-list strong,
.auf-role-guide strong {
    color: #26384e;
    font-size: 12px;
}

.auf-role-guide strong {
    margin-bottom: 4px;
}

.auf-role-guide span {
    line-height: 1.45;
}

.auf-tip-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.auf-tip-card > span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 13px;
    color: #b45309;
    background: #fef3c7;
    font-size: 18px;
}

.auf-tip-card h3 {
    margin: 1px 0 6px;
    color: var(--au-ink);
    font-size: 14px;
    font-weight: 800;
}

.auf-tip-card p {
    margin: 0;
    color: var(--au-muted);
    font-size: 11.5px;
    line-height: 1.55;
}

@media (max-width: 991.98px) {
    .au2-hero,
    .auf-hero {
        align-items: stretch;
        flex-direction: column;
        padding: 35px;
    }

    .au2-hero-actions,
    .auf-hero-profile,
    .auf-create-visual {
        width: 100%;
        flex-basis: auto;
    }

    .au2-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .auf-workspace {
        grid-template-columns: 1fr;
    }

    .auf-sidebar {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .auf-tip-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .au2-page,
    .auf-page {
        padding-top: 24px;
    }

    .au2-hero,
    .auf-hero {
        min-height: auto;
        padding: 27px 22px;
        border-radius: 24px;
    }

    .au2-hero h1,
    .auf-hero h1 {
        font-size: 29px;
    }

    .au2-stats {
        grid-template-columns: 1fr;
    }

    .au2-list-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .auf-main-card {
        padding: 21px;
        border-radius: 22px;
    }

    .auf-actionbar {
        align-items: stretch;
        flex-direction: column;
    }

    .auf-action-buttons {
        width: 100%;
    }

    .auf-btn {
        flex: 1 1 0;
    }

    .auf-sidebar {
        grid-template-columns: 1fr;
    }

    .auf-tip-card {
        grid-column: auto;
    }

    .au2-delete-actions {
        flex-direction: column-reverse;
    }

    .au2-delete-actions .au2-btn {
        width: 100%;
    }
}

@media (max-width: 479.98px) {
    .au2-hero-meta,
    .auf-hero-meta {
        display: grid;
    }

    .auf-action-note {
        display: none;
    }

    .auf-action-buttons {
        flex-direction: column-reverse;
    }

    .auf-btn {
        width: 100%;
    }

    .au2-delete-body {
        padding: 29px 20px 22px;
    }

    .au2-delete-profile {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .au2-delete-role {
        margin-left: 67px;
    }

    .au2-delete-summary > div {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .au2-delete-summary strong {
        text-align: left;
    }
}


/* =========================================================
   JOB ASSIGNMENT MODAL + ASSIGNMENT HISTORY
   ========================================================= */
.al3-assign-btn,.sl5-assign-button{background:#e7f8ee!important;color:#15803d!important}.al3-assign-btn:hover,.sl5-assign-button:hover{background:#15803d!important;color:#fff!important}.al3-history-btn,.sl5-history-button{background:#f1eafe!important;color:#6d28d9!important}.al3-history-btn:hover,.sl5-history-button:hover{background:#6d28d9!important;color:#fff!important}
.jam-modal-content{overflow:hidden;border:0;border-radius:28px;box-shadow:0 30px 90px rgba(15,23,42,.28)}.jam-modal-header{align-items:flex-start;padding:25px 29px;border:0;color:#fff;background:linear-gradient(135deg,#004d91,#0077c8 62%,#0891b2)}.jam-modal-header>div{max-width:850px}.jam-kicker{display:inline-flex;align-items:center;gap:8px;margin-bottom:8px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.65px;opacity:.9}.jam-modal-header h2{margin:0;font-size:25px;font-weight:850}.jam-modal-header h2 span{color:#bcecff}.jam-modal-header p{margin:7px 0 0;color:rgba(255,255,255,.84)}.jam-modal-body{padding:25px 28px;background:#f7fbff}.jam-applicant-summary{display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr));gap:13px;align-items:center;padding:16px 18px;margin-bottom:18px;border:1px solid #dce9f5;border-radius:19px;background:#fff}.jam-summary-avatar{display:grid;place-items:center;width:50px;height:50px;border-radius:15px;background:#e5f2ff;color:#005baa;font-size:22px}.jam-applicant-summary span{display:block;margin-bottom:3px;color:#718096;font-size:11.5px;font-weight:700;text-transform:uppercase}.jam-applicant-summary strong{display:block;color:#142033;font-size:14px}.jam-tools{display:grid;grid-template-columns:minmax(300px,1.6fr) minmax(170px,.6fr) minmax(170px,.6fr);gap:11px}.jam-search-box{position:relative}.jam-search-box i{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#0070bb}.jam-search-box input,.jam-filter-select,.jam-note-field textarea{width:100%;border:1px solid #d8e5f1;border-radius:14px;background:#fff;color:#172033;outline:0;transition:.2s}.jam-search-box input,.jam-filter-select{height:49px}.jam-search-box input{padding:0 15px 0 43px}.jam-filter-select{padding:0 36px 0 13px}.jam-search-box input:focus,.jam-filter-select:focus,.jam-note-field textarea:focus{border-color:#1682ca;box-shadow:0 0 0 4px rgba(0,119,200,.1)}.jam-result-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:17px 2px 11px;color:#52647a;font-size:12.5px}.jam-result-bar strong{color:#005baa}.jam-ranking-note{color:#0f8a4f}.jam-job-list{display:grid;gap:10px;max-height:390px;overflow:auto;padding:2px 4px 2px 1px}.jam-job-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px 17px;border:1px solid #dce7f1;border-radius:17px;background:#fff;cursor:pointer;transition:.2s}.jam-job-card:hover{transform:translateY(-2px);border-color:#85bfe5;box-shadow:0 11px 25px rgba(15,23,42,.08)}.jam-job-card:has(input:checked){border-color:#0f8a4f;box-shadow:0 0 0 2px rgba(15,138,79,.11),0 13px 28px rgba(15,23,42,.09)}.jam-job-card>input{position:absolute;opacity:0;pointer-events:none}.jam-radio-mark{display:grid;place-items:center;width:27px;height:27px;border:2px solid #b9c8d7;border-radius:50%;color:transparent}.jam-job-card:has(input:checked) .jam-radio-mark{border-color:#159447;background:#159447;color:#fff}.jam-job-main{min-width:0}.jam-job-topline{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.jam-job-topline>strong{color:#102037;font-size:15.5px}.jam-pin{padding:4px 7px;border-radius:999px;background:#fff2d9;color:#b76c00;font-size:10.5px;font-weight:800}.jam-company{display:block;margin:4px 0 8px;color:#50647b;font-size:13px}.jam-company i{color:#0077c8}.jam-job-meta{display:flex;flex-wrap:wrap;gap:7px}.jam-job-meta>span{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:8px;background:#f2f7fb;color:#5e6f83;font-size:11.5px}.jam-job-meta i{color:#087dbd}.jam-match-badge{display:grid;place-items:center;min-width:72px;padding:9px 10px;border-radius:13px;background:#e7f8ee;color:#147a44}.jam-match-badge strong{font-size:17px}.jam-match-badge small{font-size:10px;font-weight:700}.jam-empty{display:grid;place-items:center;padding:35px;border:1px dashed #c8d7e5;border-radius:16px;color:#718096;text-align:center}.jam-empty i{margin-bottom:8px;color:#1785c8;font-size:30px}.jam-empty strong{color:#24364c}.jam-empty span{margin-top:3px;font-size:12px}.jam-note-field{margin-top:17px}.jam-note-field label{display:flex;align-items:center;gap:7px;margin-bottom:7px;color:#25364c;font-size:13px;font-weight:750}.jam-note-field label i{color:#0077c8}.jam-note-field textarea{padding:12px 14px;resize:vertical}.jam-modal-footer{padding:15px 28px;border-top:1px solid #e1eaf3;background:#fff}.jam-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 17px;border:0;border-radius:12px;font-weight:750}.jam-btn-cancel{background:#edf2f7;color:#475569}.jam-btn-submit{background:linear-gradient(135deg,#11864b,#16a35d);color:#fff;box-shadow:0 9px 20px rgba(21,148,71,.18)}
.ah-page{min-height:calc(100vh - 80px);padding:38px 0 55px;background:radial-gradient(circle at 8% 5%,rgba(0,119,200,.08),transparent 24%),#f7faff}.ah-hero{display:flex;justify-content:space-between;align-items:center;gap:25px;padding:31px 34px;margin-bottom:20px;border-radius:26px;color:#fff;background:linear-gradient(135deg,#004b89,#0079c8);box-shadow:0 19px 45px rgba(0,76,139,.18)}.ah-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:9px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.6px}.ah-hero h1{margin:0 0 7px;font-size:31px;font-weight:850}.ah-hero p{margin:0;color:rgba(255,255,255,.85)}.ah-back-button{display:inline-flex;align-items:center;gap:8px;padding:11px 15px;border-radius:12px;background:#fff;color:#005baa;font-weight:750;text-decoration:none;white-space:nowrap}.ah-alert{display:flex;align-items:center;gap:9px;padding:13px 16px;margin-bottom:15px;border-radius:13px;font-weight:700}.ah-alert-success{background:#e4f8eb;color:#137642}.ah-alert-error{background:#fee8e8;color:#b42323}.ah-profile-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:17px;align-items:center;padding:22px 24px;margin-bottom:25px;border:1px solid #dce7f1;border-radius:22px;background:#fff;box-shadow:0 12px 30px rgba(15,23,42,.065)}.ah-profile-icon{display:grid;place-items:center;width:57px;height:57px;border-radius:17px;background:#e5f2ff;color:#005baa;font-size:25px}.ah-profile-main>span{color:#718096;font-size:11.5px;font-weight:800;text-transform:uppercase}.ah-profile-main h2{margin:3px 0 10px;color:#102037;font-size:22px;font-weight:850}.ah-profile-meta{display:flex;flex-wrap:wrap;gap:8px}.ah-profile-meta span{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:9px;background:#f1f6fa;color:#586b80;font-size:12px}.ah-profile-meta i{color:#087dbd}.ah-profile-count{min-width:105px;padding:13px;border-radius:16px;background:#eaf4ff;text-align:center}.ah-profile-count strong{display:block;color:#005baa;font-size:26px}.ah-profile-count span{color:#5e7186;font-size:11px;font-weight:700}.ah-empty{padding:55px 25px;border:1px solid #dce7f1;border-radius:23px;background:#fff;text-align:center}.ah-empty>div{display:grid;place-items:center;width:68px;height:68px;margin:0 auto 15px;border-radius:20px;background:#eaf4ff;color:#0073ba;font-size:28px}.ah-empty h2{color:#17263a}.ah-empty p{color:#718096}.ah-empty a{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:11px;background:#005baa;color:#fff;text-decoration:none;font-weight:700}.ah-timeline{position:relative;display:grid;gap:18px;padding-left:42px}.ah-timeline:before{content:"";position:absolute;left:17px;top:11px;bottom:11px;width:2px;background:#cfe0ed}.ah-timeline-item{position:relative}.ah-timeline-dot{position:absolute;left:-42px;top:23px;z-index:2;display:grid;place-items:center;width:36px;height:36px;border:4px solid #f7faff;border-radius:50%;background:#0077c8;color:#fff;font-size:14px}.ah-card{padding:22px 23px;border:1px solid #dce7f1;border-radius:21px;background:#fff;box-shadow:0 12px 28px rgba(15,23,42,.06)}.ah-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding-bottom:15px;border-bottom:1px solid #edf2f6}.ah-date{display:inline-flex;align-items:center;gap:6px;color:#718096;font-size:11.5px;font-weight:700}.ah-card-head h2{margin:5px 0 4px;color:#102037;font-size:20px;font-weight:850}.ah-card-head p{margin:0;color:#52677e}.ah-card-head p i{color:#087dbd}.ah-status{display:inline-flex;padding:7px 10px;border-radius:999px;font-size:11px;font-weight:800;white-space:nowrap}.ah-status-introduced{background:#e5f2ff;color:#075fa0}.ah-status-contacted{background:#fff1d6;color:#a25e00}.ah-status-interested{background:#e7f8ee;color:#147a44}.ah-status-sent{background:#ede9fe;color:#6d28d9}.ah-status-interview{background:#e0f2fe;color:#0369a1}.ah-status-success{background:#dff7e8;color:#12713e}.ah-status-rejected{background:#fee7e7;color:#b42323}.ah-job-meta{display:flex;flex-wrap:wrap;gap:8px;padding:14px 0}.ah-job-meta span{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:9px;background:#f2f7fb;color:#586b80;font-size:11.5px}.ah-job-meta i{color:#087dbd}.ah-update-form{display:grid;grid-template-columns:minmax(190px,.55fr) minmax(300px,1.45fr) auto;gap:11px;align-items:end}.ah-field label{display:block;margin-bottom:6px;color:#34465b;font-size:12px;font-weight:750}.ah-field select,.ah-field textarea{width:100%;border:1px solid #d8e4ef;border-radius:12px;background:#fff;outline:0}.ah-field select{height:45px;padding:0 12px}.ah-field textarea{min-height:45px;padding:10px 12px;resize:vertical}.ah-field select:focus,.ah-field textarea:focus{border-color:#0d82c8;box-shadow:0 0 0 3px rgba(0,119,200,.1)}.ah-save-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:45px;padding:0 15px;border:0;border-radius:12px;background:#005baa;color:#fff;font-weight:750}.ah-updated{margin-top:11px;color:#8492a5;font-size:11px;text-align:right}
@media(max-width:991.98px){.jam-applicant-summary{grid-template-columns:auto 1fr}.jam-applicant-summary>div:nth-child(n+3){grid-column:2}.jam-tools{grid-template-columns:1fr 1fr}.jam-search-box{grid-column:1/-1}.ah-update-form{grid-template-columns:1fr 1fr}.ah-save-button{grid-column:1/-1}.ah-card-head{flex-direction:column}.ah-hero{align-items:flex-start;flex-direction:column}}@media(max-width:767.98px){.jam-modal-header,.jam-modal-body,.jam-modal-footer{padding-left:18px;padding-right:18px}.jam-applicant-summary{grid-template-columns:1fr}.jam-summary-avatar{display:none}.jam-applicant-summary>div:nth-child(n){grid-column:auto}.jam-tools{grid-template-columns:1fr}.jam-search-box{grid-column:auto}.jam-result-bar{align-items:flex-start;flex-direction:column}.jam-job-card{grid-template-columns:auto 1fr}.jam-match-badge{grid-column:2;justify-self:start;display:flex;gap:4px}.ah-page{padding-top:22px}.ah-hero{padding:25px 21px}.ah-back-button{width:100%;justify-content:center}.ah-profile-card{grid-template-columns:auto 1fr}.ah-profile-count{grid-column:1/-1}.ah-timeline{padding-left:31px}.ah-timeline:before{left:12px}.ah-timeline-dot{left:-31px;width:28px;height:28px;border-width:3px;font-size:11px}.ah-card{padding:18px}.ah-update-form{grid-template-columns:1fr}.ah-save-button{grid-column:auto}}

/* =========================================================
   FIX MODAL GIỚI THIỆU VIỆC LÀM
   Form bọc header/body/footer nên phải trở thành flex container.
   Nếu không, footer bị đẩy ra ngoài modal và bị overflow:hidden che.
   ========================================================= */

#assignJobModal .jam-modal-content {
    max-height: calc(100vh - 32px);
}

#assignJobModal .jam-modal-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    max-height: calc(100vh - 32px);
}

#assignJobModal .jam-modal-header,
#assignJobModal .jam-modal-footer {
    flex: 0 0 auto;
}

#assignJobModal .jam-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

#assignJobModal .jam-job-list {
    max-height: 330px;
    overflow-y: auto;
}

#assignJobModal .jam-note-field textarea {
    min-height: 86px;
    pointer-events: auto;
}

#assignJobModal .jam-modal-footer {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

#assignJobModal .jam-btn-submit:disabled {
    cursor: wait;
    opacity: .72;
}

@media (max-height: 820px) {
    #assignJobModal .jam-job-list {
        max-height: 235px;
    }

    #assignJobModal .jam-modal-header {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    #assignJobModal .jam-modal-body {
        padding-top: 18px;
        padding-bottom: 18px;
    }
}

@media (max-width: 767.98px) {
    #assignJobModal .jam-modal-content,
    #assignJobModal .jam-modal-form {
        max-height: calc(100vh - 16px);
    }

    #assignJobModal .jam-modal-footer {
        flex-direction: column-reverse;
    }

    #assignJobModal .jam-btn {
        width: 100%;
    }
}

/* =========================================================
   STATUS LIST - BỘ LỌC NÂNG CAO VÀ XUẤT HỒ SƠ
   ========================================================= */

.sl5-filter-form.sl5-filter-form-expanded {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
}

.sl5-filter-form-expanded .sl5-field-search {
    grid-column: span 2;
}

.sl5-filter-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.sl5-filter-export-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 50px;
    padding: 12px 16px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #16a34a, #15803d);
    font-weight: 800;
    box-shadow: 0 10px 22px rgba(21, 128, 61, .18);
    transition: transform .18s ease, box-shadow .18s ease;
}

.sl5-filter-export-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 28px rgba(21, 128, 61, .25);
}

@media (max-width: 1199.98px) {
    .sl5-filter-form.sl5-filter-form-expanded {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sl5-filter-form-expanded .sl5-field-search {
        grid-column: span 2;
    }
}

@media (max-width: 767.98px) {
    .sl5-filter-form.sl5-filter-form-expanded,
    .sl5-filter-actions {
        grid-template-columns: 1fr;
    }

    .sl5-filter-form-expanded .sl5-field-search {
        grid-column: auto;
    }
}


/* =========================================================
   FIX CUỐI - GIỮ NÚT XÁC NHẬN NẰM GỌN TRONG KHUNG MODAL
   ========================================================= */
#assignJobModal {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

#assignJobModal .modal-dialog {
    margin-top: 10px;
    margin-bottom: 10px;
    min-height: 0;
}

#assignJobModal .jam-modal-content,
#assignJobModal .jam-modal-form {
    max-height: calc(100dvh - 40px);
}

#assignJobModal .jam-modal-body {
    padding-top: 18px;
    padding-bottom: 14px;
}

#assignJobModal .jam-job-list {
    max-height: min(300px, 31dvh);
}

#assignJobModal .jam-note-field {
    margin-top: 12px;
}

#assignJobModal .jam-note-field textarea {
    min-height: 68px;
    max-height: 110px;
}

#assignJobModal .jam-modal-footer {
    min-height: 68px;
    padding-top: 12px;
    padding-bottom: 12px;
    align-items: center;
    flex-wrap: nowrap;
}

#assignJobModal .jam-btn {
    min-height: 44px;
    white-space: nowrap;
}

@media (max-height: 900px) {
    #assignJobModal .jam-modal-header {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    #assignJobModal .jam-modal-header p {
        margin-top: 4px;
    }

    #assignJobModal .jam-applicant-summary {
        padding-top: 12px;
        padding-bottom: 12px;
        margin-bottom: 12px;
    }

    #assignJobModal .jam-result-bar {
        margin-top: 10px;
        margin-bottom: 8px;
    }

    #assignJobModal .jam-job-list {
        max-height: 245px;
    }
}

@media (max-height: 760px) {
    #assignJobModal .jam-job-list {
        max-height: 180px;
    }

    #assignJobModal .jam-note-field textarea {
        min-height: 54px;
        max-height: 70px;
    }
}
/* =========================================================
   MODULE ỨNG VIÊN GIỚI THIỆU THÀNH CÔNG
   ========================================================= */

.action-successful {
    --action-color: #16a34a;
    --action-soft: #dcfce7;
}

.success-placement-page {
    min-height: calc(100vh - 80px);
    padding: 38px 0 55px;
    background: radial-gradient( circle at 7% 5%, rgba(22, 163, 74, .08), transparent 25% ), radial-gradient( circle at 94% 8%, rgba(6, 182, 212, .07), transparent 22% ), #f5f9fc;
}

.success-placement-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 36px;
    margin-bottom: 22px;
    border-radius: 29px;
    color: #fff;
    background: linear-gradient( 125deg, #075985, #0284c7 58%, #16a34a );
    box-shadow: 0 22px 52px rgba(2, 84, 130, .2);
}

.success-placement-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 999px;
    background: rgba(255, 255, 255, .13);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .55px;
}

.success-placement-hero h1 {
    margin: 14px 0 9px;
    font-size: clamp(30px, 4vw, 45px);
    font-weight: 850;
    letter-spacing: -.8px;
}

    .success-placement-hero h1 span {
        color: #bbf7d0;
    }

.success-placement-hero p {
    max-width: 720px;
    margin: 0;
    color: rgba(255, 255, 255, .9);
    line-height: 1.7;
}

.success-export-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 225px;
    padding: 14px 18px;
    border-radius: 15px;
    color: #15803d;
    background: #fff;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .13);
}

    .success-export-btn:hover {
        color: #166534;
        transform: translateY(-2px);
    }

.success-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

    .success-stats article {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 20px;
        border: 1px solid #dce8f2;
        border-radius: 20px;
        background: #fff;
        box-shadow: 0 12px 30px rgba(15, 23, 42, .065);
    }

        .success-stats article > i {
            display: grid;
            place-items: center;
            width: 50px;
            height: 50px;
            border-radius: 16px;
            color: #15803d;
            background: #dcfce7;
            font-size: 22px;
        }

    .success-stats strong {
        display: block;
        color: #0f172a;
        font-size: 25px;
        line-height: 1;
    }

    .success-stats span {
        display: block;
        margin-top: 5px;
        color: #64748b;
        font-size: 13px;
        font-weight: 700;
    }

.success-filter-card,
.success-result-card {
    padding: 25px;
    margin-bottom: 22px;
    border: 1px solid #dce8f2;
    border-radius: 25px;
    background: #fff;
    box-shadow: 0 15px 38px rgba(15, 23, 42, .07);
}

.success-section-heading,
.success-result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 19px;
}

    .success-section-heading span,
    .success-result-head span {
        display: block;
        color: #15803d;
        font-size: 12px;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: .6px;
    }

    .success-section-heading h2,
    .success-result-head h2 {
        margin: 3px 0 0;
        color: #0f172a;
        font-size: 22px;
        font-weight: 850;
    }

        .success-result-head h2 strong {
            color: #15803d;
        }

.success-reset-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border-radius: 11px;
    color: #b42318;
    background: #fff1f0;
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
}

.success-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
    gap: 14px;
}

.success-field-wide {
    grid-column: span 2;
}

.success-field label {
    display: block;
    margin-bottom: 7px;
    color: #334155;
    font-size: 13px;
    font-weight: 750;
}

.success-field input {
    width: 100%;
    height: 49px;
    padding: 0 14px;
    border: 1px solid #d7e3ed;
    border-radius: 13px;
    outline: none;
    color: #0f172a;
    background: #f9fbfd;
}

    .success-field input:focus {
        border-color: #4cae78;
        background: #fff;
        box-shadow: 0 0 0 4px rgba(22, 163, 74, .1);
    }

.success-filter-btn {
    height: 49px;
    border: 0;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(135deg, #16a34a, #15803d);
    font-weight: 800;
}

.success-table {
    min-width: 1650px;
    margin: 0;
}

    .success-table thead th {
        padding: 15px;
        color: #075985;
        background: #edf8f2;
        white-space: nowrap;
    }

    .success-table tbody td {
        padding: 15px;
        border-color: #edf2f6;
        vertical-align: middle;
    }

.success-applicant {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 205px;
}

    .success-applicant > div {
        display: grid;
        place-items: center;
        width: 41px;
        height: 41px;
        flex: 0 0 auto;
        border-radius: 50%;
        color: #15803d;
        background: #dcfce7;
    }

    .success-applicant strong {
        display: block;
        color: #0f172a;
    }

    .success-applicant small {
        display: block;
        color: #64748b;
    }

.success-salary {
    display: inline-flex;
    padding: 7px 10px;
    border-radius: 999px;
    color: #15803d;
    background: #dcfce7;
    font-weight: 750;
    white-space: nowrap;
}

.success-history-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border-radius: 10px;
    color: #075985;
    background: #e0f2fe;
    font-size: 12.5px;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

.success-empty {
    padding: 55px 20px;
    text-align: center;
}

    .success-empty > i {
        display: block;
        margin-bottom: 12px;
        color: #16a34a;
        font-size: 46px;
    }

    .success-empty h3 {
        color: #0f172a;
        font-weight: 850;
    }

    .success-empty p {
        margin: 7px 0 0;
        color: #64748b;
    }

.success-pagination {
    margin-top: 25px;
}

    .success-pagination .page-link {
        min-width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        margin: 0 3px;
        border: 1px solid #dbe7f1;
        border-radius: 11px !important;
        color: #334155;
        font-weight: 700;
    }

    .success-pagination .page-item.active .page-link {
        color: #fff;
        border-color: #16a34a;
        background: #16a34a;
    }

@media (max-width: 1199.98px) {
    .success-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .success-placement-hero {
        align-items: stretch;
        flex-direction: column;
        padding: 27px 22px;
    }

    .success-export-btn {
        width: 100%;
    }

    .success-stats,
    .success-filter-grid {
        grid-template-columns: 1fr;
    }

    .success-field-wide {
        grid-column: auto;
    }

    .success-filter-card,
    .success-result-card {
        padding: 19px;
    }

    .success-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================================
   THEME ENGINE - DARK MODE
   Dùng chung với data-theme trên thẻ <html>
   ========================================================= */
html[data-theme="dark"] .admin-dashboard-v3,
html[data-theme="dark"] .status-page,
html[data-theme="dark"] .sl5-page,
html[data-theme="dark"] [class$="-page"] {
    color: var(--theme-text);
    background-color: var(--theme-bg);
}

html[data-theme="dark"] .admin-dashboard-v3,
html[data-theme="dark"] .status-page,
html[data-theme="dark"] .sl5-page {
    background:
        radial-gradient(circle at 8% 10%, rgba(0, 119, 200, .12), transparent 26%),
        radial-gradient(circle at 92% 12%, rgba(6, 182, 212, .09), transparent 22%),
        var(--theme-bg);
}

html[data-theme="dark"] .admin-stat-card,
html[data-theme="dark"] .admin-main-panel,
html[data-theme="dark"] .side-panel-card,
html[data-theme="dark"] .admin-action-item,
html[data-theme="dark"] .status-stat-card,
html[data-theme="dark"] .status-filter-panel,
html[data-theme="dark"] .status-total,
html[data-theme="dark"] .status-table-card,
html[data-theme="dark"] .profile-summary,
html[data-theme="dark"] .detail-profile-item,
html[data-theme="dark"] .sl5-stat,
html[data-theme="dark"] .sl5-workspace,
html[data-theme="dark"] .sl5-list-card,
html[data-theme="dark"] [class*="admin-"][class*="card"],
html[data-theme="dark"] [class*="status-"][class*="card"] {
    color: var(--theme-text);
    background: var(--theme-surface);
    border-color: var(--theme-border);
    box-shadow: var(--theme-shadow);
}

html[data-theme="dark"] .admin-section-heading h2,
html[data-theme="dark"] .stat-label,
html[data-theme="dark"] .action-content h3,
html[data-theme="dark"] .system-status-row,
html[data-theme="dark"] .system-info-list strong,
html[data-theme="dark"] .admin-tip-card h3,
html[data-theme="dark"] .status-stat-card strong,
html[data-theme="dark"] .profile-summary h4,
html[data-theme="dark"] .detail-profile-item strong,
html[data-theme="dark"] .sl5-workspace-head h2,
html[data-theme="dark"] .sl5-list-head h2,
html[data-theme="dark"] .sl5-stat-main strong,
html[data-theme="dark"] .sl5-field label {
    color: var(--theme-text);
}

html[data-theme="dark"] .admin-section-heading span,
html[data-theme="dark"] .action-content p,
html[data-theme="dark"] .system-info-list > div,
html[data-theme="dark"] .admin-tip-card p,
html[data-theme="dark"] .status-stat-card span,
html[data-theme="dark"] .profile-summary p,
html[data-theme="dark"] .detail-profile-item span,
html[data-theme="dark"] .sl5-workspace-head p,
html[data-theme="dark"] .sl5-stat-main span {
    color: var(--theme-muted);
}

html[data-theme="dark"] .admin-action-item:hover,
html[data-theme="dark"] .status-table tbody tr:hover,
html[data-theme="dark"] .sl5-stat:hover,
html[data-theme="dark"] .sl5-stat.is-active {
    color: var(--theme-text);
    background: var(--theme-surface-soft);
}

html[data-theme="dark"] .stat-chip,
html[data-theme="dark"] .admin-pagination .page-item.disabled .page-link {
    color: var(--theme-muted);
    background: var(--theme-surface-muted);
}

html[data-theme="dark"] .stat-footer,
html[data-theme="dark"] .system-status-row,
html[data-theme="dark"] .applicant-detail-modal .modal-footer,
html[data-theme="dark"] .sl5-workspace,
html[data-theme="dark"] .sl5-list-card {
    border-color: var(--theme-border);
}

html[data-theme="dark"] .status-table thead th {
    color: #8fd0ff;
    background: #172940;
}

html[data-theme="dark"] .status-table tbody td {
    color: var(--theme-text-soft);
    border-color: var(--theme-border);
}

html[data-theme="dark"] .applicant-detail-modal .modal-body {
    background: var(--theme-bg-alt);
}

html[data-theme="dark"] .admin-pagination .page-link {
    color: var(--theme-text-soft);
    background: var(--theme-surface);
    border-color: var(--theme-border);
}

html[data-theme="dark"] .admin-pagination .page-link:hover {
    color: #8fd0ff;
    background: var(--theme-surface-soft);
}

html[data-theme="dark"] .modern-field .form-control,
html[data-theme="dark"] .modern-field .form-select,
html[data-theme="dark"] .sl5-control .form-control,
html[data-theme="dark"] .sl5-control .form-select {
    color: var(--theme-text);
    background: var(--theme-input);
    border-color: var(--theme-border);
}

html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .applicant-detail-modal {
    background: var(--theme-surface);
}

/* =========================================================
   DARK MODE V2 - ADMIN CONTRAST PATCH
   ========================================================= */
html[data-theme="dark"] .admin-dashboard-v3,
html[data-theme="dark"] .status-page,
html[data-theme="dark"] .sl5-page,
html[data-theme="dark"] .admin-page,
html[data-theme="dark"] [class*="admin-"][class$="-page"] {
    color: #edf4ff;
    background-color: #0b1322;
}

html[data-theme="dark"] .admin-stat-card,
html[data-theme="dark"] .admin-main-panel,
html[data-theme="dark"] .side-panel-card,
html[data-theme="dark"] .admin-action-item,
html[data-theme="dark"] .status-stat-card,
html[data-theme="dark"] .status-filter-panel,
html[data-theme="dark"] .status-table-card,
html[data-theme="dark"] .sl5-stat,
html[data-theme="dark"] .sl5-workspace,
html[data-theme="dark"] .sl5-list-card,
html[data-theme="dark"] .profile-summary,
html[data-theme="dark"] .detail-profile-item {
    color: #edf4ff;
    background: #172438;
    border-color: #32475f;
}

html[data-theme="dark"] .admin-section-heading h2,
html[data-theme="dark"] .stat-label,
html[data-theme="dark"] .action-content h3,
html[data-theme="dark"] .admin-tip-card h3,
html[data-theme="dark"] .system-status-row,
html[data-theme="dark"] .system-info-list strong,
html[data-theme="dark"] .status-stat-card strong,
html[data-theme="dark"] .profile-summary h4,
html[data-theme="dark"] .detail-profile-item strong,
html[data-theme="dark"] .sl5-workspace-head h2,
html[data-theme="dark"] .sl5-list-head h2,
html[data-theme="dark"] .sl5-stat-main strong {
    color: #f3f7fd !important;
}

html[data-theme="dark"] .admin-section-heading span,
html[data-theme="dark"] .stat-footer,
html[data-theme="dark"] .action-content p,
html[data-theme="dark"] .admin-tip-card p,
html[data-theme="dark"] .system-info-list > div,
html[data-theme="dark"] .status-stat-card span,
html[data-theme="dark"] .profile-summary p,
html[data-theme="dark"] .detail-profile-item span,
html[data-theme="dark"] .sl5-workspace-head p,
html[data-theme="dark"] .sl5-stat-main span {
    color: #b3c2d4 !important;
}

html[data-theme="dark"] .status-table tbody tr:hover {
    background: #1c2d43;
}
html[data-theme="dark"] .status-table thead th {
    color: #bfe2ff;
    background: #17324d;
}
html[data-theme="dark"] .applicant-detail-modal .modal-body {
    background: #0f1a2b;
}
html[data-theme="dark"] .applicant-detail-modal .modal-footer {
    background: #172438;
    border-color: #32475f;
}