/* Skill provider portal: every rule is scoped under body.sp-portal */

.sp-portal {
    --sp-primary: #7c3aed;
    --sp-primary-dark: #5b21b6;
    --sp-primary-soft: #f3efff;
    --sp-bg: #eef1f8;
    --sp-surface: rgba(255, 255, 255, .55);
    --sp-surface-solid: rgba(255, 255, 255, .55);
    --sp-surface-2: rgba(255, 255, 255, .38);
    --sp-border: rgba(255, 255, 255, .78);
    --sp-text: #1e2235;
    --sp-muted: #5c6174;
    --sp-radius: 16px;
    --sp-blur: 14px;
    --sp-shadow: 0 1px 0 rgba(255, 255, 255, .65) inset, 0 8px 24px rgba(30, 34, 53, .08);
    --sp-shadow-hover: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 12px 28px rgba(91, 33, 182, .12);
}

[data-theme="dark"] .sp-portal {
    --sp-primary: #a78bfa;
    --sp-primary-dark: #c4b5fd;
    --sp-primary-soft: rgba(167, 139, 250, .14);
    --sp-bg: #0f1220;
    --sp-surface: rgba(23, 27, 46, .78);
    --sp-surface-solid: #171b2e;
    --sp-surface-2: rgba(29, 34, 56, .72);
    --sp-border: #2a3050;
    --sp-text: #e8eaf6;
    --sp-muted: #9aa0bd;
    --sp-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    --sp-shadow-hover: 0 10px 28px rgba(0, 0, 0, .45);
}

body.sp-portal {
    background:
        radial-gradient(ellipse 36% 28% at 0% 0%, rgba(167, 139, 250, .28), transparent 70%),
        radial-gradient(ellipse 32% 24% at 100% 0%, rgba(125, 211, 252, .22), transparent 68%),
        var(--sp-bg);
}

.sp-portal .layout-wrapper,
.sp-portal .layout-page,
.sp-portal .content-wrapper {
    background: transparent;
}

.sp-portal .bg-full {
    background:
        radial-gradient(ellipse 36% 28% at 0% 0%, rgba(167, 139, 250, .28), transparent 70%),
        radial-gradient(ellipse 32% 24% at 100% 0%, rgba(125, 211, 252, .22), transparent 68%),
        var(--sp-bg);
    min-height: 70vh;
    padding-bottom: 32px;
}

.sp-portal .sidebar-card-box,
.sp-portal .sidebar-card,
.sp-portal .sp-kpi,
.sp-portal .sp-panel,
.sp-portal .cd-card,
.sp-portal .sp-toolbar,
.sp-portal .post_job_card,
.sp-portal .post_job_card.bg_post_light,
.sp-portal .modern-job-card,
.sp-portal .profile-card,
.sp-portal .card,
.sp-portal .modal-content,
.sp-portal .tr-main-card,
.sp-portal .form-wrapper,
.sp-portal .stu-side__card,
.sp-portal .stu-panel,
.sp-portal .stu-hero,
.sp-portal .stu-stat,
.sp-portal .layout-menu,
.sp-portal .layout-navbar {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    box-shadow: var(--sp-shadow);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .sp-portal .sidebar-card-box,
    .sp-portal .sidebar-card,
    .sp-portal .sp-kpi,
    .sp-portal .sp-panel,
    .sp-portal .cd-card,
    .sp-portal .sp-toolbar,
    .sp-portal .post_job_card,
    .sp-portal .post_job_card.bg_post_light,
    .sp-portal .modern-job-card,
    .sp-portal .profile-card,
    .sp-portal .card,
    .sp-portal .modal-content,
    .sp-portal .tr-main-card,
    .sp-portal .form-wrapper,
    .sp-portal .stu-side__card,
    .sp-portal .stu-panel,
    .sp-portal .stu-hero,
    .sp-portal .stu-stat,
    .sp-portal .layout-menu,
    .sp-portal .layout-navbar {
        background-color: var(--sp-surface);
        backdrop-filter: blur(var(--sp-blur)) saturate(1.35);
        -webkit-backdrop-filter: blur(var(--sp-blur)) saturate(1.35);
    }
}

.sp-portal .sp-kpi,
.sp-portal .post_job_card,
.sp-portal .sp-btn,
.sp-portal .sp-filter-pill,
.sp-portal .sidebar-link.sp-side__link {
    transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.sp-portal .sp-kpi:hover,
.sp-portal .post_job_card:hover {
    box-shadow: var(--sp-shadow-hover);
}

.sp-portal .sp-filter-pill {
    background: var(--sp-surface-2);
    border-color: var(--sp-border);
}

.sp-portal .sp-btn--primary,
.sp-portal .cd-refresh,
.sp-portal .sp-add-centre {
    box-shadow: 0 6px 16px rgba(91, 33, 182, .2);
}

/* ---------- Sidebar ---------- */
.sp-portal .modern-sidebar.sp-side {
    position: sticky;
    top: 16px;
}

.sp-portal .sidebar-card-box {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow);
}

.sp-portal .sp-side__card {
    padding: 16px 12px 12px;
}
.offcanvas-end .modern-sidebar .sidebar-card-box{
 display: block !important;
}
.sp-portal .sp-side__profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 6px 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--sp-border);
}

.sp-portal .sp-side__avatar {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 18px;
    color: #fff;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}

.sp-portal .sp-side__who { min-width: 0; }

.sp-portal .sp-side__name {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--sp-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-portal .sp-side__role {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--sp-muted);
}

.sp-portal .sp-side__group + .sp-side__group { margin-top: 6px; }

.sp-portal .sp-side__group-title {
    margin: 10px 10px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sp-muted);
}

.sp-portal .sidebar-link.sp-side__link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 9px 10px;
    margin: 0 0 2px;
    border: 0;
    border-radius: 10px;
    color: var(--sp-text);
    font-size: 14px;
    font-weight: 500;
    background: transparent;
    transform: none;
    transition: background .15s ease, color .15s ease;
}

.sp-portal .sp-side__icon {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: var(--sp-surface-2);
    transition: background .15s ease;
}

.sp-portal .sidebar-link.sp-side__link i,
.sp-portal .sidebar-link.sp-side__link i:first-child {
    margin: 0;
    font-size: 13px;
    color: var(--sp-muted);
}

.sp-portal .sidebar-link.sp-side__link:hover {
    background: var(--sp-primary-soft);
    color: var(--sp-primary-dark);
    transform: none;
}

.sp-portal .sidebar-link.sp-side__link:hover i { color: var(--sp-primary); }

.sp-portal .sidebar-link.sp-side__link.active {
    background: var(--sp-primary-soft);
    color: var(--sp-primary-dark);
    font-weight: 700;
    border: 0;
}

.sp-portal .sidebar-link.sp-side__link.active .sp-side__icon {
    background: var(--sp-primary);
}

.sp-portal .sidebar-link.sp-side__link.active i { color: #fff; }

.sp-portal .sidebar-link:focus-visible,
.sp-portal .sp-btn:focus-visible,
.sp-portal .sp-kpi:focus-visible,
.sp-portal .sp-quick__item:focus-visible,
.sp-portal .sp-activity__item:focus-visible,
.sp-portal .sp-program__stat:focus-visible {
    outline: 2px solid var(--sp-primary);
    outline-offset: 2px;
}

@media (max-width: 991.98px) {
    .sp-portal .modern-sidebar.sp-side { position: static; }
    .sp-portal .sp-side__card { padding: 12px; }
    .sp-portal .sp-side__profile { padding-bottom: 12px; }
    .sp-portal .sp-side__nav {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: thin;
    }
    .sp-portal .sp-side__group { display: contents; }
    /* .sp-portal .sp-side__group-title { display: none; } */
    .sp-portal .sidebar-link.sp-side__link {
        flex: 0 0 auto;
        white-space: nowrap;
        border: 1px solid var(--sp-border);
        padding: 6px 12px 6px 6px;
        margin: 0;
    }
    .sp-portal .sp-side__icon { flex-basis: 26px; width: 26px; height: 26px; }
}

/* ---------- Buttons ---------- */
.sp-portal .sp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.sp-portal .sp-btn--primary { background: var(--sp-primary); color: #fff; }
.sp-portal .sp-btn--primary:hover { background: var(--sp-primary-dark); color: #fff; }
.sp-portal .sp-btn--ghost { background: var(--sp-surface); border-color: var(--sp-border); color: var(--sp-text); }
.sp-portal .sp-btn--ghost:hover { border-color: var(--sp-primary); color: var(--sp-primary); }
.sp-portal .sp-btn--white { background: #fff; color: #5b21b6; }
.sp-portal .sp-btn--white:hover { background: #f3efff; color: #4c1d95; }
.sp-portal .sp-btn--light { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .35); color: #fff; }
.sp-portal .sp-btn--light:hover { background: rgba(255, 255, 255, .26); color: #fff; }

.sp-portal .sp-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 13px;
    color: var(--sp-primary);
    text-decoration: none;
}

.sp-portal .sp-link:hover { color: var(--sp-primary-dark); }
.sp-portal .sp-link i { font-size: 11px; transition: transform .15s ease; }
.sp-portal .sp-link:hover i { transform: translateX(3px); }

/* ---------- Dashboard: hero ---------- */
.sp-portal .sp-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 26px 28px;
    border-radius: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 88% 0%, rgba(255, 255, 255, .28), transparent 42%),
        linear-gradient(120deg, rgba(109, 40, 217, .78), rgba(124, 58, 237, .66) 48%, rgba(147, 51, 234, .74));
    border: 1px solid rgba(255, 255, 255, .32);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 16px 36px rgba(91, 33, 182, .22);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
}

.sp-portal .sp-hero__date {
    margin: 0 0 6px;
    font-size: 13px;
    opacity: .85;
}

.sp-portal .sp-hero__title {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
}

.sp-portal .sp-hero__sub {
    margin: 6px 0 0;
    font-size: 14px;
    opacity: .92;
}

.sp-portal .sp-hero__sub strong { color: #fff; }

.sp-portal .sp-hero__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ---------- Dashboard: KPI cards ---------- */
.sp-portal .sp-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.sp-portal .sp-kpi {
    --kpi: #7c3aed;
    --kpi-soft: #f3efff;
    display: flex;
    justify-content: space-between;
    /* flex-direction: column; */
    gap: 14px;
    padding: 16px;
    border-radius: var(--sp-radius);
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    box-shadow: var(--sp-shadow);
    color: var(--sp-text);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.sp-portal .sp-kpi:hover {
    transform: translateY(-2px);
    box-shadow: var(--sp-shadow-hover);
    border-color: var(--kpi);
    color: var(--sp-text);
}

.sp-portal .sp-kpi--violet { --kpi: #7c3aed; --kpi-soft: #f3efff; }
.sp-portal .sp-kpi--orange { --kpi: #ea580c; --kpi-soft: #fff1e7; }
.sp-portal .sp-kpi--teal { --kpi: #0d9488; --kpi-soft: #e6f7f5; }
.sp-portal .sp-kpi--blue { --kpi: #2563eb; --kpi-soft: #eaf1ff; }
.sp-portal .sp-kpi--green { --kpi: #16a34a; --kpi-soft: #e9f8ee; }
.sp-portal .sp-kpi--amber { --kpi: #d97706; --kpi-soft: #fff6e8; }

.sp-portal .sp-kpi__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--kpi-soft);
    color: var(--kpi);
    font-size: 16px;
}

.sp-portal .sp-kpi__body { display: flex; flex-direction: column; }
.sp-portal .sp-kpi__label { font-size: 13px; color: var(--sp-muted); font-weight: 500; }
.sp-portal .sp-kpi__value { font-size: 28px; font-weight: 700; line-height: 1.2; margin: 2px 0; color: var(--sp-text); }
.sp-portal .sp-kpi__meta { font-size: 12px; color: var(--sp-muted); }

/* ---------- Dashboard: quick actions ---------- */
.sp-portal .sp-quick {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.sp-portal .sp-quick__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--sp-surface);
    border: 1px dashed #d6ccf5;
    color: var(--sp-text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}

.sp-portal .sp-quick__item i { color: var(--sp-primary); font-size: 15px; }
.sp-portal .sp-quick__item:hover { background: var(--sp-primary-soft); border-color: var(--sp-primary); border-style: solid; color: var(--sp-primary-dark); }

/* ---------- Panels ---------- */
.sp-portal .sp-dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    gap: 18px;
    margin-top: 18px;
}

.sp-portal .sp-panel {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow);
    padding: 18px 20px 20px;
    min-width: 0;
}

.sp-portal .sp-panel__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.sp-portal .sp-panel__title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--sp-text);
}

.sp-portal .sp-panel__sub {
    margin: 3px 0 0;
    font-size: 13px;
    color: var(--sp-muted);
}

.sp-portal .sp-panel__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.sp-portal .sp-count {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--sp-primary-soft);
    color: var(--sp-primary-dark);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.sp-portal .sp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 12px;
    text-align: center;
    color: var(--sp-muted);
    font-size: 14px;
}

.sp-portal .sp-empty > i { font-size: 26px; color: #c4b5fd; }
.sp-portal .sp-empty p { margin: 0; max-width: 360px; }

/* Activity feed */
.sp-portal .sp-activity {
    display: flex;
    flex-direction: column;
    max-height: 430px;
    overflow-y: auto;
    margin: 0 -8px;
    padding: 0 8px;
}

.sp-portal .sp-activity__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 8px;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--sp-border);
}

.sp-portal .sp-activity__item:last-child { border-bottom: 0; }
.sp-portal .sp-activity__item:hover { background: var(--sp-surface-2); color: inherit; }

.sp-portal .sp-activity__icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 14px;
}

.sp-portal .is-applied { background: #f3efff; color: #6d28d9; }
.sp-portal .is-assessment { background: #eaf1ff; color: #1d4ed8; }
.sp-portal .is-download { background: #e9f8ee; color: #15803d; }

.sp-portal .sp-activity__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sp-portal .sp-activity__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sp-portal .sp-activity__top strong { font-size: 14px; color: var(--sp-text); font-weight: 600; }

.sp-portal .sp-activity__tag {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.sp-portal .sp-activity__text {
    font-size: 12.5px;
    color: var(--sp-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-portal .sp-activity__go { color: #c0c4d6; font-size: 12px; }
.sp-portal .sp-activity__item:hover .sp-activity__go { color: var(--sp-primary); }

/* Upcoming batches */
.sp-portal .sp-upcoming { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.sp-portal .sp-upcoming__item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px;
    border-radius: 12px;
    background: var(--sp-surface-2);
    border: 1px solid var(--sp-border);
}

.sp-portal .sp-upcoming__date {
    flex: 0 0 48px;
    height: 52px;
    border-radius: 10px;
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
}

.sp-portal .sp-upcoming__date span { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--sp-primary); }
.sp-portal .sp-upcoming__date strong { font-size: 18px; color: var(--sp-text); }
.sp-portal .sp-upcoming__body { min-width: 0; display: flex; flex-direction: column; }
.sp-portal .sp-upcoming__body strong { font-size: 14px; color: var(--sp-text); font-weight: 600; }
.sp-portal .sp-upcoming__body span,
.sp-portal .sp-upcoming__body small { font-size: 12px; color: var(--sp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Program cards */
.sp-portal .sp-programs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.sp-portal .sp-program {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border-radius: 14px;
    border: 1px solid var(--sp-border);
    background: var(--sp-surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.sp-portal .sp-program:hover { border-color: #d6ccf5; box-shadow: var(--sp-shadow-hover); }

.sp-portal .sp-program__head { display: flex; align-items: flex-start; gap: 12px; }

.sp-portal .sp-program__icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #e6f7f5;
    color: #0d9488;
}

.sp-portal .sp-program__titles { flex: 1; min-width: 0; }
.sp-portal .sp-program__title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.35; }
.sp-portal .sp-program__title a { color: var(--sp-text); text-decoration: none; }
.sp-portal .sp-program__title a:hover { color: var(--sp-primary); }

.sp-portal .sp-program__meta { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }

.sp-portal .sp-program__meta span {
    font-size: 11.5px;
    color: var(--sp-muted);
    background: var(--sp-surface-2);
    border: 1px solid var(--sp-border);
    border-radius: 6px;
    padding: 1px 7px;
}

.sp-portal .sp-status {
    flex: 0 0 auto;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    text-decoration: none;
}

.sp-portal .sp-status--ok { background: #e9f8ee; color: #15803d; }
.sp-portal .sp-status--draft { background: #fff5e0; color: #b45309; }
.sp-portal .sp-status--draft:hover { background: #ffeac2; color: #92400e; }

.sp-portal .sp-program__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.sp-portal .sp-program__stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid var(--sp-border);
    background: var(--sp-surface-2);
    text-align: left;
    color: var(--sp-text);
    transition: border-color .15s ease, background .15s ease;
}

.sp-portal button.sp-program__stat { cursor: pointer; }
.sp-portal button.sp-program__stat:hover { border-color: var(--sp-primary); background: var(--sp-primary-soft); }
.sp-portal .sp-program__stat strong { font-size: 18px; line-height: 1.2; }
.sp-portal .sp-program__stat span { font-size: 11.5px; color: var(--sp-muted); }

.sp-portal .sp-program__foot {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--sp-border);
    font-size: 12px;
    color: var(--sp-muted);
}

/* ---------- Shared look for the other provider pages ---------- */
.sp-portal section[style*="e7e0f9"] {
    background: var(--sp-surface) !important;
    border-bottom: 1px solid var(--sp-border);
}

.sp-portal .ux-breadcrumb-list a { color: var(--sp-muted); }
.sp-portal .ux-breadcrumb-list a:hover { color: var(--sp-primary); }
.sp-portal .ux-breadcrumb-item:last-child a { color: var(--sp-text); font-weight: 600; }

.sp-portal .sidebar-card,
.sp-portal .form-wrapper,
.sp-portal .tr-main-card,
.sp-portal .sp-card {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow);
}

.sp-portal .post_job_card,
.sp-portal .modern-program-box {
    border: 1px solid var(--sp-border);
    border-radius: 14px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.sp-portal .post_job_card:hover,
.sp-portal .modern-program-box:hover {
    transform: none;
    border-color: #d6ccf5;
    box-shadow: var(--sp-shadow-hover);
}

.sp-portal main.col-lg-9 > h3:first-child,
.sp-portal .col-lg-9 h2.fw-bold,
.sp-portal .col-lg-9 h3.fw-bold {
    color: var(--sp-text);
    font-weight: 700;
}

.sp-portal .form-control,
.sp-portal .form-select {
    border-radius: 10px;
    border-color: var(--sp-border);
    min-height: 40px;
    font-size: 14px;
}

.sp-portal .form-control:focus,
.sp-portal .form-select:focus {
    border-color: var(--sp-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .15);
}

.sp-portal .form-label { font-weight: 600; font-size: 13px; color: var(--sp-text); }

.sp-portal .btn { border-radius: 10px; font-weight: 600; }
.sp-portal .btn-primary { background: var(--sp-primary); border-color: var(--sp-primary); }
.sp-portal .btn-primary:hover,
.sp-portal .btn-primary:focus { background: var(--sp-primary-dark); border-color: var(--sp-primary-dark); }
.sp-portal .btn-outline-primary { color: var(--sp-primary); border-color: var(--sp-primary); }
.sp-portal .btn-outline-primary:hover { background: var(--sp-primary); border-color: var(--sp-primary); color: #fff; }

.sp-portal .col-lg-9 .table { --bs-table-bg: transparent; font-size: 14px; margin-bottom: 0; }
.sp-portal .col-lg-9 .table > thead th {
    background: var(--sp-surface-2);
    color: var(--sp-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom: 1px solid var(--sp-border);
    white-space: nowrap;
}
.sp-portal .col-lg-9 .table > tbody td { border-color: var(--sp-border); vertical-align: middle; }
.sp-portal .col-lg-9 .table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--sp-primary-soft); }

.sp-portal .pagination { gap: 4px; flex-wrap: wrap; }
.sp-portal .page-link {
    border-radius: 8px !important;
    border-color: var(--sp-border);
    color: var(--sp-text);
    min-width: 36px;
    text-align: center;
}
.sp-portal .page-link:hover { background: var(--sp-primary-soft); color: var(--sp-primary-dark); }
.sp-portal .page-item.active .page-link { background: var(--sp-primary); border-color: var(--sp-primary); color: #fff; }

.sp-portal .modal-content { border: 0; border-radius: 18px; box-shadow: 0 24px 60px rgba(30, 34, 53, .25); }
.sp-portal .modal-header { border-bottom-color: var(--sp-border); padding: 16px 20px; }
.sp-portal .modal-title { font-weight: 700; font-size: 17px; }
.sp-portal .modal-footer { border-top-color: var(--sp-border); }

.sp-portal .alert { border-radius: 12px; }

.sp-portal .sp-filter-pill.active,
.sp-portal .tr-filter-pill.active {
    background: var(--sp-primary);
    border-color: var(--sp-primary);
    color: #fff;
}

.sp-portal .sp-live { display: flex; flex-direction: column; gap: 16px; }
.sp-portal .sp-live__program { border: 1px solid #e6edf5; border-radius: 14px; overflow: hidden; background: #fff; }
.sp-portal .sp-live__head, .sp-portal .sp-live__centre-head {
    display: flex; justify-content: space-between; gap: 16px; align-items: flex-start;
}
.sp-portal .sp-live__head { padding: 16px 18px; background: #f8fafc; }
.sp-portal .sp-live__head h3 { margin: 0; font-size: 18px; color: #1d2939; }
.sp-portal .sp-live__head p, .sp-portal .sp-live__centre-head p { margin: 4px 0 0; color: #667085; font-size: 13px; }
.sp-portal .sp-live__head p { display: flex; gap: 14px; }
.sp-portal .sp-live__centre { border-top: 1px solid #eef2f6; }
.sp-portal .sp-live__centre-head { padding: 14px 18px 8px; }
.sp-portal .sp-live__centre-side { min-width: 190px; text-align: right; font-size: 12px; font-weight: 700; color: #067647; }
.sp-portal .sp-live__centre-side i { display: block; height: 6px; margin: 6px 0; background: #e8f7ef; border-radius: 99px; overflow: hidden; }
.sp-portal .sp-live__centre-side b { display: block; height: 100%; background: #12b76a; }
.sp-portal .sp-live__centre-side a { color: #1d4e89; text-decoration: none; }
.sp-portal .sp-board td.is-green { color: #067647; font-weight: 700; }
.sp-portal .sp-board-wrap { overflow-x: auto; margin-top: 8px; }
.sp-portal .sp-board { width: 100%; min-width: 0; border-collapse: collapse; font-size: 13px; border: 1px solid #5c677a; }
.sp-portal .sp-board th {
    text-align: left; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
    color: #667085; background: #f8fafc; padding: 12px 10px; border: 1px solid #5c677a;
}
.sp-portal .sp-board td { padding: 14px 10px; border: 1px solid #5c677a; vertical-align: top; color: #1d2939; }
.sp-portal .cd-table-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.sp-portal .cd-table-head h2 { margin: 0; color: #5b21b6; font-size: 18px; }
.sp-portal .cd-all-btn { display: inline-flex; align-items: center; background: #7c3aed; color: #fff; border-radius: 999px; padding: 8px 14px; font-weight: 700; text-decoration: none; }
.sp-portal .cd-all-btn:hover { color: #fff; background: #6d28d9; }
.sp-portal .cd-train-filters { display: grid; grid-template-columns: 1.4fr 1fr .8fr .8fr auto; gap: 10px; align-items: end; margin-bottom: 14px; }
.sp-portal .cd-train-filters label { display: flex; flex-direction: column; gap: 4px; color: #667085; font-size: 12px; }
.sp-portal .cd-train-filters input { border: 1px solid #d0d5dd; border-radius: 10px; padding: 8px 10px; }
.sp-portal .cd-train-filters button { border: 0; cursor: pointer; }
@media (max-width: 991px) { .sp-portal .cd-train-filters { grid-template-columns: 1fr 1fr; } }
.sp-portal .cd-board { table-layout: fixed; width: 100%; }
.sp-portal .cd-board th, .sp-portal .cd-board td { overflow-wrap: anywhere; white-space: normal; }
.sp-portal table.cd-board thead th { overflow: hidden; vertical-align: bottom; line-height: 1.25; }
.sp-portal table.cd-board thead th:nth-child(1) { width: 18%; }
.sp-portal table.cd-board thead th:nth-child(2) { width: 28%; }
.sp-portal table.cd-board thead th:nth-child(n+3) {
    width: 9%; text-align: center; text-transform: none; letter-spacing: 0;
    padding: 8px 3px; font-size: 11px; white-space: normal;
}
.sp-portal .cd-board td.sp-board__num { text-align: center; padding: 8px 4px; font-size: 14px; }
.sp-portal .cd-coming { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
.sp-portal .cd-running__split { display: grid; grid-template-columns: 148px 1fr; gap: 14px; margin-top: 12px; }
.sp-portal .cd-running__totals { display: flex; flex-direction: column; gap: 10px; }
.sp-portal .cd-running__totals article { background: #f8fafc; border-radius: 12px; padding: 12px; }
.sp-portal .cd-running__totals span { display: block; color: #667085; font-size: 12px; }
.sp-portal .cd-running__totals strong { color: #5b21b6; font-size: 22px; }
.sp-portal .cd-running__row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #eef2f6; font-size: 13px; }
.sp-portal .cd-running__marks { display: flex; gap: 10px; white-space: nowrap; }
.sp-portal .cd-running__marks .is-present { color: #047857; }
.sp-portal .cd-running__marks .is-absent { color: #b42318; }
.sp-portal .cd-attend-btn { display: inline-flex; border-radius: 999px; background: #7c3aed; color: #fff; font-size: 12px; font-weight: 700; padding: 6px 10px; text-decoration: none; white-space: nowrap; }
.sp-portal .cd-attend-btn:hover { color: #fff; background: #6d28d9; }
.sp-portal .cd-attendance { display: grid; grid-template-columns: 1.3fr .7fr; gap: 18px; margin-bottom: 14px; }
.sp-portal .cd-attendance h2 { margin: 0 0 4px; color: #5b21b6; font-size: 18px; }
.sp-portal .cd-attendance h3 { margin: 12px 0 8px; font-size: 14px; }
.sp-portal .cd-attendance p, .sp-portal .cd-attendance__empty { margin: 0; color: #667085; font-size: 13px; }
.sp-portal .cd-trend { display: flex; align-items: flex-end; gap: 8px; height: 160px; margin-top: 14px; }
.sp-portal .cd-trend div { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.sp-portal .cd-trend b { display: block; width: 100%; max-width: 22px; background: #7c3aed; border-radius: 8px 8px 0 0; }
.sp-portal .cd-trend span, .sp-portal .cd-trend small { font-size: 10px; color: #667085; }
.sp-portal .cd-alert-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.sp-portal .cd-alert-stats article { background: #f8fafc; border-radius: 10px; padding: 10px; }
.sp-portal .cd-alert-stats span { display: block; color: #667085; font-size: 11px; }
.sp-portal .cd-alert-stats strong { color: #1e293b; font-size: 20px; }
.sp-portal .cd-absent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sp-portal .cd-absent li { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.sp-portal .cd-absent span { color: #667085; }
@media (max-width: 991px) {
    .sp-portal .cd-attendance, .sp-portal .cd-alert-stats, .sp-portal .cd-coming, .sp-portal .cd-running__split { grid-template-columns: 1fr; }
}
.sp-portal .batch-create-dialog { max-width: 720px; }
.sp-portal .batch-create-modal.modal-content { height: auto; max-height: 92vh; border: 0; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.sp-portal .batch-create-modal form { display: flex; flex-direction: column; max-height: 92vh; min-height: 0; }
.sp-portal .batch-create-modal__header { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: linear-gradient(135deg, #8c60ff 0%, #b249f8 100%); color: #fff; }
.sp-portal .batch-create-modal__header h5 { margin: 0; color: #fff; font-size: 17px; }
.sp-portal .batch-create-modal__header p { margin: 2px 0 0; color: rgba(255,255,255,.85); font-size: 12px; }
.sp-portal .batch-create-modal__icon { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.18); display: inline-flex; align-items: center; justify-content: center; }
.sp-portal .batch-create-modal__header .btn-close { margin-left: auto; filter: invert(1); }
.sp-portal .batch-create-modal__body { padding: 16px 18px; background: #f8f7fc; overflow: auto; }
.sp-portal .batch-create-modal__footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px 16px; background: #fff; border-top: 1px solid #eef2f7; }
.sp-portal .batch-section { margin-top: 14px; padding-top: 10px; border-top: 1px solid #e6e1f2; font-size: 13px; font-weight: 800; color: #5b21b6; }
.sp-portal .batch-hint { margin: 8px 0 0; color: #667085; font-size: 12px; }
.sp-portal .batch-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.sp-portal .batch-choice label { display: flex; align-items: center; gap: 8px; margin: 0; border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 12px; background: #fff; font-size: 13px; font-weight: 700; color: #334155; }
.sp-portal .batch-choice input { accent-color: #7c3aed; }
.sp-portal #ojtFields[hidden] { display: none !important; }
.sp-portal .cd-coordinator { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.sp-portal .cd-coordinator input { width: 148px; border: 1px solid #d0d5dd; border-radius: 8px; padding: 6px 8px; font-size: 12px; }
.sp-portal .cd-coordinator button { border: 0; background: #7c3aed; color: #fff; border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 700; }
.sp-portal .sp-board__program strong, .sp-portal .sp-board__centre strong, .sp-portal .sp-board td strong { display: block; font-size: 15px; }
.sp-portal .sp-board__pill {
    display: inline-flex; margin-top: 8px; background: #efe9ff; color: #6941c6;
    border-radius: 999px; padding: 3px 8px; font-size: 12px; font-weight: 700;
}
.sp-portal .sp-board__meta { display: block; margin-top: 6px; color: #667085; font-size: 12px; }
.sp-portal .sp-board__btn, .sp-portal .sp-board__add {
    display: inline-flex; margin-top: 10px; background: #5b3cc4; color: #fff; text-decoration: none;
    border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 700;
}
.sp-portal .sp-board__add { background: transparent; color: #6941c6; padding: 0; }
.sp-portal .sp-board__btn:hover { color: #fff; background: #4c2fb0; }
.sp-portal .sp-board__progress { margin-top: 10px; font-size: 12px; color: #067647; font-weight: 700; }
.sp-portal .sp-board__bar { display: block; height: 6px; background: #e8f7ef; border-radius: 99px; margin-top: 4px; overflow: hidden; }
.sp-portal .sp-board__bar i { display: block; height: 100%; background: #12b76a; }
.sp-portal .sp-board__spoc { display: block; margin-top: 8px; color: #6941c6; font-size: 12px; font-weight: 700; }
.sp-portal .sp-board__num { font-weight: 700; font-size: 16px; color: #175cd3; }

.sp-portal.sp-centre > .container {
    width: min(1280px, calc(100% - 32px));
    max-width: 1280px;
    margin-inline: auto;
}
.sp-portal.sp-centre .col-lg-9,
.sp-portal.sp-centre .cd-card,
.sp-portal .sp-board-wrap {
    min-width: 0;
    max-width: 100%;
}
.sp-portal .sp-board-wrap { overflow-x: auto; }
.sp-portal .cd-card {
    background: rgba(255, 255, 255, .62);
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 16px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 12px 28px rgba(49, 36, 92, .08);
    backdrop-filter: blur(14px);
}
.sp-portal .cd-head { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.sp-portal .cd-head h1 { margin: 0; font-size: 22px; color: #1d2939; }
.sp-portal .cd-head p, .sp-portal .cd-card > p { margin: 4px 0 0; color: #667085; font-size: 13px; }
.sp-portal .cd-filters { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; width: 100%; }
.sp-portal .cd-filters .form-select { width: auto; min-width: 0; flex: 1 1 150px; border-radius: 10px; }
.sp-portal .cd-status { display: inline-flex; margin-top: 6px; border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 700; }
.sp-portal .cd-status.is-pending { background: #fff6e8; color: #b45309; }
.sp-portal .cd-status.is-accepted { background: #e9f8ee; color: #15803d; }
.sp-portal .cd-status.is-rejected { background: #fef2f2; color: #b91c1c; }
.sp-portal .cd-notices__head, .sp-portal .cd-notice { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.sp-portal .cd-notice { padding: 12px 0; border-top: 1px solid rgba(124, 58, 237, .12); }
.sp-portal .cd-notice strong, .sp-portal .cd-notice span { display: block; }
.sp-portal .cd-notice span { color: #5c6174; font-size: 13px; }
.sp-portal .cd-notice__actions { display: flex; gap: 8px; }
.sp-portal .cd-badge { background: #7c3aed; color: #fff; border-radius: 999px; padding: 3px 9px; font-size: 12px; font-weight: 700; }
.sp-portal .cd-act { border: 0; border-radius: 10px; padding: 7px 12px; font-weight: 700; color: #fff; }
.sp-portal .cd-act--accept { background: #7c3aed; }
.sp-portal .cd-act--reject { background: #b91c1c; }
.sp-portal .cd-popup-dialog { max-width: 420px; width: auto; height: auto; margin: 1rem auto; }
.sp-portal .cd-popup.modal-content { height: auto; max-height: none; border-radius: 14px; display: block; }
.sp-portal .cd-popup .modal-body { flex: none; overflow: visible; }
.sp-portal .cd-popup__list { max-height: none; overflow: visible; }
.sp-portal .cd-pop-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(124, 58, 237, .1); }
.sp-portal .cd-pop-row:first-child { border-top: 0; }
.sp-portal .cd-pop-row strong { font-size: 14px; }
.sp-portal .cd-pop-row span { display: block; color: #6b6280; font-size: 12px; }
.sp-portal .cd-popup .cd-act { padding: 4px 10px; font-size: 12px; border-radius: 8px; }
.sp-portal .cd-readonly { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sp-portal .cd-readonly div { background: rgba(243, 239, 255, .7); border-radius: 12px; padding: 10px 12px; }
.sp-portal .cd-readonly span { display: block; font-size: 12px; color: #5c6174; }
.sp-portal .sp-side__badge { margin-left: auto; background: #7c3aed; color: #fff; border-radius: 999px; min-width: 18px; height: 18px; padding: 0 6px; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 767.98px) {
    .sp-portal .cd-filters { flex-wrap: wrap; }
    .sp-portal .cd-filters .form-select { width: 100%; }
}
.sp-portal .cd-refresh {
    border: 0; background: #1d4e89; color: #fff; border-radius: 10px;
    padding: 8px 14px; font-weight: 700; font-size: 14px;
}
.sp-portal .cd-identity { display: flex; justify-content: space-between; gap: 18px; align-items: center; flex-wrap: wrap; }
.sp-portal .cd-identity__main { display: flex; gap: 12px; align-items: center; }
.sp-portal .cd-identity__icon {
    width: 46px; height: 46px; border-radius: 12px; background: #eaf1ff; color: #1d4e89;
    display: inline-flex; align-items: center; justify-content: center; font-size: 20px;
}
.sp-portal .cd-identity strong, .sp-portal .cd-kpis strong { display: block; color: #1d2939; }
.sp-portal .cd-identity span, .sp-portal .cd-kpis span { color: #667085; font-size: 12px; }
.sp-portal .cd-identity .is-active { color: #067647; }
.sp-portal .cd-card h2 { margin: 0; font-size: 18px; }
.sp-portal .cd-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.sp-portal .cd-kpis article {
    border: 1px solid #eef2f6; border-radius: 12px; padding: 14px;
    display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center;
}
.sp-portal .cd-kpis i { grid-row: span 2; color: var(--sp-primary); font-size: 18px; }
.sp-portal .cd-kpis strong { font-size: 22px; }
.sp-portal .cd-program strong { font-size: 15px; }
.sp-portal .cd-program-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; margin-right: 10px; color: #6d28d9; font-size: 12px; font-weight: 700; text-decoration: none; }
.sp-portal .cd-program-link:hover { color: var(--sp-primary); }
.sp-portal .cd-add {
    display: inline-flex; margin-top: 8px; border: 0; background: transparent; color: #1d4e89;
    font-weight: 700; padding: 0; font-size: 13px;
}
.sp-portal .cd-expert { display: block; margin-top: 10px; color: #667085; font-size: 12px; }
.sp-portal .cd-batch-expert { display: block; margin-top: 6px; color: #667085; font-size: 11px; line-height: 1.3; }
.sp-portal .cd-person { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: #667085; font-size: 12px; line-height: 1.35; }
.sp-portal .cd-avatar { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; background: #efe9ff; color: #6d28d9; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.sp-portal .cd-cal-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: #6d28d9; font-size: 12px; font-weight: 700; text-decoration: none; }
.sp-portal .cd-cal-link:hover { color: #5b21b6; }
.sp-portal table.cd-board thead th i { display: block; margin-bottom: 2px; color: #7c3aed; font-size: 12px; }
.sp-portal .cd-enroll { display: inline-flex; margin-top: 4px; font-size: 12px; font-weight: 700; color: #6d28d9; text-decoration: none; }
.sp-portal .cd-enroll.is-closed { color: #b42318; }
.sp-portal .cd-enroll.is-waiting { color: #b45309; }
.sp-portal .cd-enroll-note { display: block; font-size: 11px; font-weight: 700; color: #b42318; }
.sp-portal .cd-batch-link { display: block; color: #5b21b6; font-weight: 700; text-decoration: none; }
.sp-portal .cd-batch-link:hover { text-decoration: underline; }
.sp-portal .cd-batch-status { display: inline-flex; margin: 4px 8px 4px 0; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 3px 8px; }
.sp-portal .cd-batch-status.is-active { background: rgba(124, 58, 237, 0.12); color: #6d28d9; }
.sp-portal .cd-batch-status.is-inprogress { background: rgba(16, 185, 129, 0.14); color: #047857; }
.sp-portal .cd-batch-status.is-completed { background: #eef2f6; color: #475467; }
.sp-portal .cd-batch-status.is-cancelled { background: rgba(180, 35, 24, 0.1); color: #b42318; }
.sp-portal .cd-batch-status.is-rescheduled { background: rgba(245, 158, 11, 0.16); color: #b45309; }
.sp-portal .cd-status-actions { display: inline-flex; gap: 8px; }
.sp-portal .cd-status-btn { border: 0; background: transparent; color: #6d28d9; font-size: 12px; font-weight: 700; padding: 0; }
.sp-portal .cd-seat { margin-top: 8px; min-width: 220px; background: #f8fafc; border: 1px solid #e6edf5; border-radius: 10px; padding: 8px 10px; }
.sp-portal .cd-seat__top, .sp-portal .cd-seat__foot { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: #667085; }
.sp-portal .cd-seat__bar { display: block; height: 8px; background: #e8eef8; border-radius: 99px; margin: 6px 0; overflow: hidden; }
.sp-portal .cd-seat__bar i { display: block; height: 100%; background: #7c3aed; }
.sp-portal .ab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sp-portal .ab-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 16px; background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.75); box-shadow: 0 10px 28px rgba(49,36,92,.08); }
.sp-portal .ab-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.sp-portal .ab-card__top a { color: #5b21b6; font-weight: 700; text-decoration: none; font-size: 16px; }
.sp-portal .ab-card__top a:hover { text-decoration: underline; }
.sp-portal .ab-card .status-badge { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.sp-portal .ab-card .status-badge.ongoing,
.sp-portal .ab-card .status-badge.active,
.sp-portal .ab-card .status-badge.inprogress { background: rgba(124, 58, 237, 0.12); color: #6d28d9; }
.sp-portal .ab-card .status-badge.completed { background: #eef2f6; color: #475467; }
.sp-portal .ab-card .status-badge.cancelled { background: rgba(180, 35, 24, 0.1); color: #b42318; }
.sp-portal .ab-card .status-badge.rescheduled { background: rgba(245, 158, 11, 0.16); color: #b45309; }
.sp-portal .ab-card__meta { margin: 0; color: #667085; font-size: 13px; }
.sp-portal .ab-card .cd-seat { margin-top: 4px; }
.sp-portal .ab-empty { padding: 28px 16px; text-align: center; color: #667085; border: 1px dashed #d5dbe3; border-radius: 14px; }
.exam-head h1,.exam-card h2{font-size: 24px;font-weight: 700;margin-bottom: 8px;}
@media (max-width: 767px) { .sp-portal .ab-grid { grid-template-columns: 1fr; } }
@media (max-width: 991.98px) {
    .sp-portal .cd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sp-portal .sp-board__num.is-green { color: #067647; }

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
    .sp-portal .sp-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sp-portal .sp-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
    .sp-portal .sp-dash-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
    .sp-portal .sp-hero { padding: 20px; }
    .sp-portal .sp-hero__title { font-size: 21px; }
    .sp-portal .sp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sp-portal .sp-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sp-portal .sp-programs { grid-template-columns: 1fr; }
    .sp-portal .sp-panel { padding: 16px; }
}