/* Liquid Glass design system. Loaded after page styles.
   Specificity is body.sp-portal .selector so it wins over single-class page rules.
   Layout properties (display, width, gap, grid) are not set here. */

body.sp-portal {
    --lg-text: #1e2235;
    --lg-muted: #5c6174;
    --lg-glass: rgba(255, 255, 255, .55);
    --lg-glass-strong: rgba(255, 255, 255, .78);
    --lg-glass-soft: rgba(255, 255, 255, .36);
    --lg-border: rgba(255, 255, 255, .72);
    --lg-edge: rgba(255, 255, 255, .85);
    --lg-shadow: 0 1px 0 var(--lg-edge) inset, 0 12px 30px rgba(49, 36, 92, .1);
    --lg-blur: 16px;
    --lg-accent: #7c3aed;
    --lg-accent-ink: #5b21b6;
    --lg-accent-soft: #f3efff;
    --heading-title: #5b21b6;
    --institution-icon-color: #7c3aed;
    --lg-radius: 16px;
    --lg-canvas:
        radial-gradient(ellipse 42% 36% at 0% 0%, rgba(167, 139, 250, .45), transparent 72%),
        radial-gradient(ellipse 36% 30% at 100% 8%, rgba(125, 211, 252, .38), transparent 70%),
        radial-gradient(ellipse 28% 24% at 70% 100%, rgba(196, 181, 253, .28), transparent 70%),
        #e7e9f6;
    background: var(--lg-canvas);
    color: var(--lg-text);
}

[data-theme="dark"] body.sp-portal {
    --lg-text: #e8eaf6;
    --lg-muted: #b7c0d4;
    --lg-glass: rgba(23, 27, 46, .72);
    --lg-glass-strong: rgba(23, 27, 46, .88);
    --lg-glass-soft: rgba(29, 34, 56, .62);
    --lg-border: rgba(255, 255, 255, .14);
    --lg-edge: rgba(255, 255, 255, .1);
    --lg-shadow: 0 1px 0 var(--lg-edge) inset, 0 12px 28px rgba(0, 0, 0, .35);
    --lg-accent: #a78bfa;
    --lg-accent-ink: #c4b5fd;
    --lg-accent-soft: rgba(167, 139, 250, .16);
    --heading-title: #c4b5fd;
    --institution-icon-color: #a78bfa;
    --lg-canvas:
        radial-gradient(ellipse 42% 36% at 0% 0%, rgba(124, 58, 237, .32), transparent 72%),
        #0f1220;
}

body.sp-portal :is(
    .tp-page__head h1,
    .tp-card h5,
    .cert-page__head h1,
    .cert-page__head span,
    .attendance-page h1,
    .attendance-page__eyebrow,
    .attendance-empty h5,
    .sp-panel__title,
    .program-section__title,
    .dashboard__title,
    .institution-banner__title,
    .form-section__title
) {
    color: var(--lg-accent-ink);
}

body.sp-portal :is(
    .tp-page__head h1,
    .cert-page__head h1,
    .attendance-page h1,
    .attendance-empty,
    .program-section__title,
    .form-section__title,
    .sp-panel__title,
    .sp-kpi__icon,
    .sp-program__icon
) i,
body.sp-portal :is(.cert-empty i, .attendance-empty i, .sp-kpi__icon, .sp-program__icon) {
    color: var(--lg-accent);
}

body.sp-portal :is(.sp-kpi__icon, .sp-program__icon) {
    background: var(--lg-accent-soft);
}

body.sp-portal :is(.tp-btn, .attendance-btn--primary, .cert-btn) {
    background: var(--lg-accent);
    color: #fff;
}

body.sp-portal :is(.tp-btn--light, .attendance-btn--light) {
    background: var(--lg-accent-soft);
    color: var(--lg-accent-ink);
}

body.sp-portal :is(.tp-link, .tp-status) {
    color: var(--lg-accent-ink);
}

body.sp-portal :is(
    .card,
    .sidebar-card,
    .sidebar-card-box,
    .post_job_card,
    .modern-job-card,
    .profile-card,
    .form-wrapper,
    .modal-content,
    .offcanvas,
    .dropdown-menu,
    .popover,
    .sp-panel,
    .sp-kpi,
    .sp-toolbar,
    .sp-program,
    .sp-quick__item,
    .cd-card,
    .tr-main-card,
    .tr-request-card,
    .tr-toolbar,
    .tr-search-shell,
    .stu-side__card,
    .stu-panel,
    .stu-hero,
    .stu-stat,
    .stu-pagehead,
    .pro-card,
    .candidate-card,
    .candidate-card--bordered,
    .filter-sidebar,
    .job-detail-sidebar,
    .layout-menu,
    .layout-navbar,
    .swal2-popup,
    .choices__inner,
    .choices__list--dropdown,
    .bg_post_light,
    .tp-page,
    .tp-card,
    .cert-page,
    .attendance-page,
    .program-fact,
    .program-section,
    .program-panel,
    .sp-record__loc,
    .sp-student,
    .sp-batch,
    .sp-assign .sp-card,
    .main-navbar_container,
    .menu-second,
    .dashboard-card,
    .enq-card
) {
    background: var(--lg-glass);
    border-color: var(--lg-border);
    box-shadow: var(--lg-shadow);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.sp-portal :is(
        .card,
        .sidebar-card,
        .sidebar-card-box,
        .post_job_card,
        .modern-job-card,
        .profile-card,
        .form-wrapper,
        .modal-content,
        .offcanvas,
        .dropdown-menu,
        .sp-panel,
        .sp-kpi,
        .sp-toolbar,
        .sp-program,
        .cd-card,
        .tr-main-card,
        .tr-request-card,
        .tr-toolbar,
        .tr-search-shell,
        .stu-side__card,
        .stu-panel,
        .stu-hero,
        .stu-stat,
        .stu-pagehead,
        .pro-card,
        .candidate-card,
        .candidate-card--bordered,
        .filter-sidebar,
        .job-detail-sidebar,
        .layout-menu,
        .layout-navbar,
        .swal2-popup,
        .choices__inner,
        .choices__list--dropdown,
        .bg_post_light,
        .tp-page,
        .tp-card,
        .cert-page,
        .attendance-page,
        .program-fact,
        .program-section,
        .program-panel,
        .sp-record__loc,
        .sp-student,
        .sp-batch,
        .sp-assign .sp-card,
        .main-navbar_container,
        .menu-second
    ) {
        -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(1.35);
        backdrop-filter: blur(var(--lg-blur)) saturate(1.35);
    }
}

body.sp-portal .main-navbar_container {
    border-bottom: 1px solid var(--lg-border);
    box-shadow: 0 8px 24px rgba(49, 36, 92, .06);
}

body.sp-portal :is(.sp-hero, .program-hero) {
    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);
}

body.sp-portal .sp-kpi:hover,
body.sp-portal .post_job_card:hover,
body.sp-portal .card:hover,
body.sp-portal .pro-card:hover {
    box-shadow: 0 1px 0 var(--lg-edge) inset, 0 16px 34px rgba(91, 33, 182, .16);
}

body.sp-portal :is(.form-control, .form-select, .input_box, textarea.form-control) {
    background-color: var(--lg-glass-strong);
    /* border: 1px solid rgb(165 161 161 / 72%); */
    border-radius: 12px;
    color: var(--lg-text);
}

body.sp-portal :is(.form-control, .form-select, .input_box):focus {
    border-color: rgba(124, 58, 237, .55);
    /* box-shadow: 0 0 0 3px rgba(124, 58, 237, .15); */
}

body.sp-portal :is(.table, .sp-board, .tp-table) {
    --bs-table-bg: transparent;
    background: transparent;
    color: var(--lg-text);
}

body.sp-portal :is(.table thead th, .sp-board th, .tp-table th) {
    background: var(--lg-glass-soft);
    color: var(--lg-muted);
    border-color: #5c677a;
}

body.sp-portal :is(.sp-board, .tp-table, .attendance-table, .col-lg-9 .table) {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #c6a5ff;
}

body.sp-portal :is(.sp-board, .tp-table, .attendance-table, .col-lg-9 .table) > :not(caption) > * > * {
    box-shadow: none;
    background-clip: padding-box;
    border: 1px solid #c6a5ff;
}

body.sp-portal :is(.layout-wrapper, .layout-page, .content-wrapper, .bg-full, .stu-portal) {
    background: transparent;
}

body.sp-portal .sidebar-link.active,
body.sp-portal .sp-side__link.active {
    background: rgba(124, 58, 237, .16);
}

body.sp-portal ::-webkit-scrollbar { width: 10px; height: 10px; }
body.sp-portal ::-webkit-scrollbar-thumb {
    background: rgba(91, 33, 182, .28);
    border-radius: 99px;
}