/* =========================================================
   SALIHIN SPS Dashboard
========================================================= */

html {
    scroll-behavior: smooth;
}

/* =========================================================
   Dashboard Tokens
========================================================= */

:root {
    --spsd-page-bg: #f6fbff;
    --spsd-card: #ffffff;
    --spsd-card-soft: #f7fbff;
    --spsd-line: rgba(185, 213, 235, .66);
    --spsd-line-soft: rgba(185, 213, 235, .42);

    --spsd-text: #16233d;
    --spsd-heading: #111b31;
    --spsd-muted: #5a6b7d;

    --spsd-cyan: #18c5d2;
    --spsd-cyan-dark: #0ca7b9;
    --spsd-blue: #2866ca;
    --spsd-blue-dark: #194fa9;
    --spsd-green: #21b957;
    --spsd-red: #e76078;

    --spsd-gradient: linear-gradient(135deg, #18c5d2 0%, #2866ca 100%);
    --spsd-gradient-blue: linear-gradient(135deg, #2da9f2 0%, #245fbe 100%);
    --spsd-gradient-cyan: linear-gradient(135deg, #20c9c7 0%, #1878c8 100%);
    --spsd-gradient-sky: linear-gradient(135deg, #5bbcf6 0%, #2866ca 100%);
    --spsd-gradient-deep: linear-gradient(135deg, #18c5d2 0%, #0f73bd 100%);
    --spsd-gradient-soft: linear-gradient(135deg, #73dce5 0%, #2f79d5 100%);

    --spsd-shadow-card: 0 14px 30px rgba(28, 78, 136, .08);
    --spsd-shadow-hover: 0 18px 42px rgba(28, 78, 136, .14);

    --spsd-radius-xl: 26px;
    --spsd-radius-lg: 22px;
    --spsd-radius-md: 18px;
    --spsd-radius-sm: 14px;

    --spsd-hero-min-height: 410px;
}

html[data-bs-theme="dark"] {
    --spsd-page-bg: #0d141d;
    --spsd-card: #172231;
    --spsd-card-soft: #111b27;
    --spsd-line: rgba(255, 255, 255, .12);
    --spsd-line-soft: rgba(255, 255, 255, .08);

    --spsd-text: #dfe8f3;
    --spsd-heading: #f6f9fd;
    --spsd-muted: #9aa8b8;

    --spsd-shadow-card: 0 14px 34px rgba(0, 0, 0, .24);
    --spsd-shadow-hover: 0 20px 46px rgba(0, 0, 0, .38);
}

/* =========================================================
   Motion
========================================================= */

@keyframes spsdShine {
    0% {
        transform: translateX(-120%) skewX(-18deg);
        opacity: 0;
    }

    45% {
        opacity: .55;
    }

    100% {
        transform: translateX(220%) skewX(-18deg);
        opacity: 0;
    }
}

@keyframes spsdPulse {
    0%, 100% {
        transform: scale(.96);
        opacity: .36;
    }

    50% {
        transform: scale(1.08);
        opacity: .78;
    }
}

@keyframes spsdScan {
    0%, 48% {
        left: -40%;
        opacity: 0;
    }

    58% {
        opacity: .65;
    }

    100% {
        left: 120%;
        opacity: 0;
    }
}

/* =========================================================
   Page Base
========================================================= */

.sps-dashboard-page {
    min-height: calc(100vh - 145px);
    padding: 28px;
    color: var(--spsd-text);
    background: transparent;
    position: relative;
    overflow: visible;
    isolation: isolate;
}

.sps-dashboard-page::before,
.sps-dashboard-page::after {
    content: none !important;
}

.sps-dashboard-page > * {
    position: relative;
    z-index: 1;
}

.sps-section-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    color: var(--spsd-cyan-dark);
    font-size: 10.5px;
    font-weight: 950;
    letter-spacing: .10em;
    text-transform: uppercase;
    margin-bottom: 5px;
}

html[data-bs-theme="dark"] .sps-section-kicker {
    color: var(--spsd-cyan);
}

/* =========================================================
   Portal Modules
========================================================= */

#spsPortalGrid {
    scroll-margin-top: 90px;
}

.sps-module-carousel-section {
    margin: 0 0 18px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    position: relative;
    overflow: visible;
}

.sps-module-carousel-section::before,
.sps-module-carousel-section::after {
    content: none !important;
}

.sps-module-carousel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.sps-module-carousel-head h5 {
    margin: 0 0 3px;
    color: var(--spsd-heading);
    font-size: 21px;
    font-weight: 950;
    line-height: 1.05;
    letter-spacing: -.03em;
}

.sps-module-carousel-head p {
    margin: 0;
    color: var(--spsd-muted);
    font-size: 12.5px;
    line-height: 1.35;
}

.sps-module-carousel-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.sps-module-carousel-btn {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 999px;
    background: var(--spsd-card);
    color: var(--spsd-blue);
    display: grid;
    place-items: center;
    box-shadow: var(--spsd-shadow-card);
    transition: transform .2s ease, box-shadow .2s ease;
}

.sps-module-carousel-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--spsd-shadow-hover);
}

.sps-module-carousel-btn svg {
    width: 17px;
    height: 17px;
    stroke-width: 3;
}

.sps-module-carousel .carousel-inner {
    overflow: hidden;
    padding: 2px 4px 8px;
}

.sps-module-slide-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

/* Generic SPS cards inside dashboard */
.sps-card,
.sps-feature-card {
    position: relative;
    isolation: isolate;
    min-height: 88px;
    border: 0;
    border-radius: 18px;
    background: var(--spsd-card);
    box-shadow: var(--spsd-shadow-card);
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.sps-card::before,
.sps-feature-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 45%),
        radial-gradient(circle at 96% 0%, rgba(255, 255, 255, .24), transparent 35%);
}

.sps-card::after,
.sps-feature-card::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -70%;
    width: 42%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
    transform: skewX(-18deg);
    opacity: 0;
}

.sps-card:hover,
.sps-feature-card:hover {
    transform: translateY(-4px);
    filter: saturate(1.06);
    box-shadow: var(--spsd-shadow-hover);
}

.sps-card:hover::after,
.sps-feature-card:hover::after {
    animation: spsdShine .85s ease;
}

.sps-card a,
.sps-feature-card a {
    color: inherit;
    text-decoration: none;
}

/* Module cards only */
.sps-module-carousel-section .sps-card,
.sps-module-carousel-section .sps-feature-card {
    color: #ffffff;
    grid-column: auto !important;
    border-radius: 18px;
}

.sps-module-slide-grid > .sps-feature-card:nth-child(1),
.sps-module-slide-grid > .sps-card:nth-child(1) {
    background: var(--spsd-gradient);
}

.sps-module-slide-grid > .sps-feature-card:nth-child(2),
.sps-module-slide-grid > .sps-card:nth-child(2) {
    background: var(--spsd-gradient-blue);
}

.sps-module-slide-grid > .sps-feature-card:nth-child(3),
.sps-module-slide-grid > .sps-card:nth-child(3) {
    background: var(--spsd-gradient-cyan);
}

.sps-module-slide-grid > .sps-feature-card:nth-child(4),
.sps-module-slide-grid > .sps-card:nth-child(4) {
    background: var(--spsd-gradient-sky);
}

.sps-module-slide-grid > .sps-feature-card:nth-child(5),
.sps-module-slide-grid > .sps-card:nth-child(5) {
    background: var(--spsd-gradient-deep);
}

.sps-module-slide-grid > .sps-feature-card:nth-child(6),
.sps-module-slide-grid > .sps-card:nth-child(6) {
    background: var(--spsd-gradient-soft);
}

.sps-feature-link,
.sps-module-link,
.sps-card .sps-feature-link {
    position: relative;
    z-index: 2;
    min-height: 88px;
    height: 100%;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.sps-feature-link > div:last-child,
.sps-module-link > div:last-child,
.sps-card .sps-feature-link > div:last-child {
    min-width: 0;
    flex: 1 1 auto;
}

.sps-feature-icon,
.sps-module-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .20) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}

.sps-feature-icon::after,
.sps-module-icon::after {
    content: none !important;
}

.sps-feature-icon svg,
.sps-module-icon svg {
    width: 21px;
    height: 21px;
    color: currentColor;
    stroke: currentColor;
    stroke-width: 2.55;
}

.sps-feature-title,
.sps-module-title {
    margin: 0 0 3px;
    color: #ffffff !important;
    font-size: 12.5px;
    line-height: 1.12;
    font-weight: 950;
    letter-spacing: -.015em;
}

.sps-feature-text,
.sps-module-text {
    max-width: none;
    color: rgba(255, 255, 255, .82) !important;
    font-size: 10.5px;
    line-height: 1.22;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =========================================================
   Hero Row
   No fixed height on the row. Attendance content controls height,
   slider stretches to match it.
========================================================= */

.sps-dashboard-hero-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 18px;
    align-items: stretch;
    margin: 0 0 20px;
}

.sps-dashboard-hero-slider {
    min-width: 0;
    display: flex;
}

.sps-dashboard-hero-slider .sps-announcement-slider {
    flex: 1 1 auto;
    min-height: var(--spsd-hero-min-height);
}

.sps-attendance-card {
    min-height: var(--spsd-hero-min-height);
}

.sps-announcement-slider,
.sps-attendance-card,
.sps-analytics-panel,
.sps-analytics-trend-panel,
.sps-insight-card,
.sps-analytics-kpi {
    background: var(--spsd-card);
    border: 0;
    box-shadow: var(--spsd-shadow-card);
}

/* =========================================================
   Latest Updates Slider
========================================================= */

.sps-announcement-slider {
    width: 100%;
    border-radius: var(--spsd-radius-xl);
    overflow: hidden;
    position: relative;
    z-index: 1;
    isolation: isolate;
    display: flex;
    flex-direction: column;
}

.sps-announcement-slider::before {
    content: none !important;
}

.sps-announcement-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 28px 8px;
    position: relative;
    z-index: 6;
}

.sps-announcement-title {
    position: relative;
    z-index: 7;
}

.sps-announcement-indicators {
    position: static;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sps-announcement-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 999px;
    background: rgba(40, 102, 202, .25);
    opacity: 1;
    transition: width .22s ease, background .22s ease, box-shadow .22s ease;
}

.sps-announcement-indicators .active {
    width: 24px;
    background: var(--spsd-gradient);
    box-shadow: 0 0 0 4px rgba(24, 197, 210, .10);
}

.sps-announcement-slider .carousel-inner {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    z-index: 4;
    width: 100%;
}

.sps-announcement-slider .carousel-item {
    height: 100%;
    min-height: 0;
}

.sps-announcement-card {
    width: calc(100% - 56px);
    height: calc(100% - 24px);
    min-height: 0;
    aspect-ratio: auto;
    margin: 8px 28px 16px;
    border: 1px solid var(--spsd-line-soft);
    border-radius: 22px;
    position: relative;
    overflow: hidden;
    background: var(--spsd-card-soft);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}

.sps-announcement-card-full-image {
    padding: 0;
    display: block;
}

.sps-announcement-full-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
    background: var(--spsd-card-soft);
    transition: transform .55s ease, filter .55s ease;
}

.sps-announcement-card-full-image:hover .sps-announcement-full-img {
    transform: scale(1.01);
    filter: saturate(1.04) contrast(1.02);
}

.sps-announcement-control {
    position: absolute;
    top: calc(50% + 18px);
    bottom: auto;
    width: 48px;
    height: 48px;
    opacity: 1;
    z-index: 7;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sps-announcement-control.carousel-control-prev {
    left: 4px;
    right: auto;
}

.sps-announcement-control.carousel-control-next {
    right: 4px;
    left: auto;
}

.sps-announcement-control span:not(.visually-hidden) {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: #ffffff;
    color: var(--spsd-blue);
    display: grid;
    place-items: center;
    box-shadow: 0 8px 18px rgba(30, 89, 160, .14);
    transition: transform .2s ease, box-shadow .2s ease;
}

.sps-announcement-control:hover span:not(.visually-hidden) {
    transform: scale(1.07);
    box-shadow: var(--spsd-shadow-card);
}

.sps-announcement-control svg {
    width: 16px;
    height: 16px;
    stroke-width: 3;
}

/* =========================================================
   Attendance Widget
========================================================= */

.sps-attendance-card {
    border-radius: var(--spsd-radius-xl);
    padding: 18px;
    position: relative;
    overflow: visible;
    isolation: isolate;
    display: flex;
    flex-direction: column;
}

.sps-attendance-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        radial-gradient(circle at 12% 8%, rgba(24, 197, 210, .12), transparent 28%),
        radial-gradient(circle at 100% 0%, rgba(40, 102, 202, .08), transparent 30%);
}

.sps-attendance-card > * {
    position: relative;
    z-index: 1;
}

.sps-attendance-timebox {
    padding: 6px 4px 18px;
    margin-bottom: 14px;
    border: 0;
    border-bottom: 1px solid rgba(185, 213, 235, .52);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
}

.sps-attendance-kicker {
    min-height: 24px;
    padding: 0 11px;
    margin-bottom: 12px;
    border-radius: 999px;
    background: rgba(24, 197, 210, .12);
    color: var(--spsd-cyan-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9.5px;
    font-weight: 950;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.sps-attendance-clock {
    color: var(--spsd-heading);
    font-size: clamp(38px, 3vw, 48px);
    line-height: .92;
    font-weight: 950;
    letter-spacing: -.00em;
    margin-bottom: 10px;
    font-variant-numeric: tabular-nums;
}

.sps-attendance-date {
    color: var(--spsd-muted);
    font-size: 13px;
    font-weight: 850;
}

.sps-attendance-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.sps-attendance-field label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--spsd-heading);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: -.01em;
    margin-bottom: 7px;
}

.sps-attendance-field label::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--spsd-gradient);
    box-shadow: 0 0 0 4px rgba(24, 197, 210, .10);
}

.sps-attendance-select {
    width: 100%;
    min-height: 43px;
    padding: 0 38px 0 14px;
    border: 1px solid rgba(185, 213, 235, .74);
    border-radius: 15px;
    background: linear-gradient(180deg, #ffffff, #f8fcff);
    color: var(--spsd-text);
    font-size: 12.5px;
    font-weight: 850;
    outline: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .90),
        0 8px 18px rgba(28, 78, 136, .045);
}

.sps-attendance-select:focus {
    border-color: rgba(24, 153, 220, .65);
    box-shadow:
        0 0 0 4px rgba(24, 197, 210, .12),
        0 10px 22px rgba(28, 78, 136, .08);
}

.sps-attendance-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 2px 0 12px;
}

.sps-attendance-btn {
    min-height: 44px;
    border: 0;
    border-radius: 16px;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 950;
    box-shadow: 0 12px 22px rgba(28, 78, 136, .12);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.sps-attendance-btn svg {
    width: 17px;
    height: 17px;
    stroke-width: 3;
}

.sps-attendance-btn:hover {
    transform: translateY(-2px);
    filter: saturate(1.06);
    box-shadow: 0 16px 28px rgba(28, 78, 136, .18);
}

.sps-attendance-in {
    background: linear-gradient(135deg, #29c85b 0%, #129646 100%);
}

.sps-attendance-out {
    background: linear-gradient(135deg, #f1748b 0%, #df5872 100%);
}

.sps-attendance-status {
    margin-top: auto;
    min-height: 30px;
    padding: 7px 10px;
    border: 0;
    border-radius: 999px;
    background: rgba(24, 197, 210, .08);
    color: var(--spsd-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 10.5px;
    font-weight: 850;
    text-align: center;
}

.sps-attendance-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--spsd-cyan);
    box-shadow: 0 0 0 5px rgba(24, 197, 210, .13);
    animation: spsdPulse 1.6s ease-in-out infinite;
    flex: 0 0 auto;
}

/* =========================================================
   Analytics
========================================================= */

.sps-analytics-section {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    position: relative;
    overflow: visible;
}

.sps-analytics-section::before,
.sps-analytics-section::after {
    content: none !important;
}

.sps-analytics-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.sps-analytics-head h5 {
    margin: 0 0 6px;
    color: var(--spsd-heading);
    font-size: 24px;
    font-weight: 950;
    letter-spacing: -.03em;
}

.sps-analytics-head p {
    margin: 0;
    color: var(--spsd-muted);
    font-size: 13px;
    line-height: 1.45;
}

.sps-analytics-actions {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px;
    border: 1px solid var(--spsd-line-soft);
    border-radius: 999px;
    background: var(--spsd-card);
    box-shadow: var(--spsd-shadow-card);
}

.sps-analytics-filter {
    min-height: 30px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--spsd-muted);
    font-size: 10.5px;
    font-weight: 950;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.sps-analytics-filter.active {
    background: var(--spsd-gradient);
    color: #ffffff;
    box-shadow: 0 8px 16px rgba(40, 102, 202, .20);
}

.sps-analytics-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.sps-analytics-kpi {
    min-height: 74px;
    padding: 13px 14px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 11px;
    text-align: left;
}

.sps-kpi-ring {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    background: var(--spsd-gradient);
    color: #ffffff;
    display: grid;
    place-items: center;
    font-size: 16px;
    line-height: 1;
    font-weight: 950;
    flex: 0 0 44px;
    box-shadow: 0 10px 18px rgba(40, 102, 202, .16);
    animation: none;
}

.sps-kpi-ring::after {
    content: none !important;
}

.sps-analytics-kpi span {
    color: var(--spsd-muted);
    font-size: 11.5px;
    font-weight: 850;
    line-height: 1.2;
}

.sps-analytics-chart-grid {
    display: grid;
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
    gap: 18px;
}

.sps-analytics-panel,
.sps-analytics-trend-panel {
    position: relative;
    overflow: hidden;
    padding: 18px;
    border-radius: 22px;
    transition: transform .22s ease, box-shadow .22s ease;
}

.sps-analytics-panel {
    min-height: 360px;
}

.sps-analytics-trend-panel {
    margin-top: 18px;
    min-height: 300px;
}

.sps-analytics-panel::after,
.sps-analytics-trend-panel::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -45%;
    width: 34%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(24, 197, 210, .08), rgba(255, 255, 255, .16), transparent);
    transform: skewX(-18deg);
    animation: spsdScan 7s ease-in-out infinite;
}

.sps-analytics-panel:hover,
.sps-analytics-trend-panel:hover {
    transform: translateY(-2px);
    box-shadow: var(--spsd-shadow-hover);
}

.sps-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.sps-panel-head h6 {
    margin: 0 0 4px;
    color: var(--spsd-heading);
    font-size: 15px;
    font-weight: 950;
    letter-spacing: -.015em;
}

.sps-panel-head p {
    margin: 0;
    color: var(--spsd-muted);
    font-size: 11.5px;
    line-height: 1.4;
}

.sps-chart-wrap {
    position: relative;
    width: 100%;
    height: 285px;
    isolation: isolate;
}

.sps-chart-wrap::before {
    content: none !important;
}

.sps-chart-wrap-trend {
    height: 230px;
}

.sps-chart-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}

.sps-live-indicator {
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(24, 197, 210, .10);
    color: var(--spsd-cyan-dark);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 9.5px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sps-live-indicator i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--spsd-cyan);
    box-shadow: 0 0 0 5px rgba(24, 197, 210, .12);
    animation: spsdPulse 1.5s ease-in-out infinite;
}

.sps-analytics-insight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.sps-insight-card {
    min-height: 96px;
    padding: 16px;
    border-radius: 20px;
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.sps-insight-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: var(--spsd-gradient);
    color: #ffffff;
    display: grid;
    place-items: center;
    flex: 0 0 40px;
}

.sps-insight-icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
}

.sps-insight-card span {
    display: block;
    color: var(--spsd-cyan-dark);
    font-size: 9.5px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 3px;
}

.sps-insight-card strong {
    display: block;
    color: var(--spsd-heading);
    font-size: 14px;
    font-weight: 950;
    margin-bottom: 4px;
}

.sps-insight-card p {
    margin: 0;
    color: var(--spsd-muted);
    font-size: 11.5px;
    line-height: 1.38;
}

/* =========================================================
   Dark Mode
========================================================= */

html[data-bs-theme="dark"] .sps-attendance-card::before {
    background:
        radial-gradient(circle at 12% 8%, rgba(35, 209, 223, .10), transparent 28%),
        radial-gradient(circle at 100% 0%, rgba(61, 140, 255, .08), transparent 30%);
}

html[data-bs-theme="dark"] .sps-attendance-timebox {
    border-bottom-color: rgba(255, 255, 255, .10);
}

html[data-bs-theme="dark"] .sps-attendance-select {
    background: linear-gradient(180deg, #172231, #111b27);
    border-color: rgba(255, 255, 255, .12);
    color: var(--spsd-text);
}

html[data-bs-theme="dark"] .sps-announcement-control span:not(.visually-hidden) {
    background: #172231;
    color: var(--spsd-cyan);
}

html[data-bs-theme="dark"] .sps-announcement-full-img {
    background: var(--spsd-card-soft);
}

/* =========================================================
   Responsive
========================================================= */

@media (max-width: 1500px) {
    .sps-module-slide-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sps-analytics-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1399px) {
    :root {
        --spsd-hero-min-height: 410px;
    }

    .sps-dashboard-hero-row {
        grid-template-columns: minmax(0, 1fr) 360px;
    }

    .sps-attendance-clock {
        font-size: 38px;
    }
}

@media (max-width: 1199px) {
    .sps-dashboard-hero-row {
        grid-template-columns: 1fr;
    }

    .sps-dashboard-hero-slider .sps-announcement-slider,
    .sps-attendance-card {
        min-height: 0;
    }

    .sps-announcement-slider {
        display: block;
    }

    .sps-announcement-slider .carousel-inner,
    .sps-announcement-slider .carousel-item {
        height: auto;
    }

    .sps-announcement-card {
        height: auto;
        aspect-ratio: 21 / 7;
        width: calc(100% - 40px);
        margin: 8px 20px 22px;
    }

    .sps-attendance-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sps-analytics-head {
        flex-direction: column;
        gap: 12px;
    }

    .sps-analytics-chart-grid,
    .sps-analytics-insight-grid {
        grid-template-columns: 1fr;
    }

    .sps-chart-wrap {
        height: 300px;
    }

    .sps-chart-wrap-trend {
        height: 260px;
    }
}

@media (max-width: 767px) {
    .sps-dashboard-page {
        padding: 18px;
        border-radius: 26px;
    }

    .sps-module-carousel-head {
        align-items: center;
        gap: 12px;
    }

    .sps-module-carousel-head h5 {
        font-size: 20px;
    }

    .sps-module-carousel-head p {
        display: none;
    }

    .sps-module-slide-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .sps-feature-link,
    .sps-module-link,
    .sps-card .sps-feature-link {
        min-height: 84px;
        padding: 12px;
    }

    .sps-feature-icon,
    .sps-module-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .sps-dashboard-hero-row {
        gap: 14px;
    }

    .sps-announcement-head {
        padding: 15px 18px 8px;
        flex-wrap: wrap;
    }

    .sps-announcement-indicators {
        width: 100%;
        justify-content: center;
        margin-top: 3px;
    }

    .sps-announcement-card {
        width: calc(100% - 32px);
        aspect-ratio: 16 / 8;
        margin: 8px 16px 18px;
        border-radius: 18px;
    }

    .sps-attendance-card {
        padding: 16px;
    }

    .sps-attendance-timebox {
        text-align: center;
    }

    .sps-attendance-form-grid,
    .sps-attendance-actions {
        grid-template-columns: 1fr;
    }

    .sps-attendance-clock {
        font-size: 38px;
    }

    .sps-analytics-actions {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        border-radius: 18px;
    }

    .sps-analytics-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sps-analytics-panel,
    .sps-analytics-trend-panel {
        padding: 16px;
        border-radius: 20px;
    }

    .sps-chart-wrap,
    .sps-chart-wrap-trend {
        height: 280px;
    }
}

@media (max-width: 420px) {
    .sps-module-slide-grid,
    .sps-analytics-kpi-grid {
        grid-template-columns: 1fr;
    }

    .sps-attendance-clock {
        font-size: 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sps-card,
    .sps-feature-card,
    .sps-card::after,
    .sps-feature-card::after,
    .sps-announcement-full-img,
    .sps-announcement-control span:not(.visually-hidden),
    .sps-attendance-btn,
    .sps-attendance-dot,
    .sps-analytics-panel,
    .sps-analytics-panel::after,
    .sps-analytics-trend-panel,
    .sps-analytics-trend-panel::after,
    .sps-live-indicator i {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   SPSERP Intro Banner - Corporate Motion
========================================================= */

@keyframes spsErpGradientMove {
    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@keyframes spsErpScan {
    0%, 42% {
        transform: translateX(-140%) skewX(-18deg);
        opacity: 0;
    }

    52% {
        opacity: .45;
    }

    100% {
        transform: translateX(260%) skewX(-18deg);
        opacity: 0;
    }
}

@keyframes spsErpTypewriter {
    from {
        width: 0;
    }

    to {
        width: 32ch;
    }
}

@keyframes spsErpCursor {
    0%, 45% {
        border-color: rgba(255, 255, 255, .85);
    }

    46%, 100% {
        border-color: transparent;
    }
}

@keyframes spsErpFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

@keyframes spsErpRingPulse {
    0% {
        transform: scale(.86);
        opacity: .55;
    }

    70% {
        transform: scale(1.28);
        opacity: 0;
    }

    100% {
        transform: scale(1.28);
        opacity: 0;
    }
}

@keyframes spsErpDotPulse {
    0%, 100% {
        transform: scale(.85);
        opacity: .65;
    }

    50% {
        transform: scale(1.18);
        opacity: 1;
    }
}

.sps-erp-intro-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 148px;
    margin: 0 0 22px;
    padding: 28px 34px;
    border-radius: 28px;
    color: #ffffff;
    background:
        radial-gradient(circle at 74% 8%, rgba(255, 255, 255, .18), transparent 18%),
        radial-gradient(circle at 10% 0%, rgba(255, 255, 255, .12), transparent 28%),
        linear-gradient(120deg, #5fd2d5 0%, #18bfd2 34%, #258bd3 68%, #5b8ee1 100%);
    background-size: 180% 180%;
    box-shadow: 0 18px 42px rgba(28, 78, 136, .12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    animation: spsErpGradientMove 10s ease-in-out infinite;
}

.sps-erp-intro-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 52%),
        radial-gradient(circle at 100% 100%, rgba(255, 255, 255, .13), transparent 34%);
}

.sps-erp-intro-card::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -45%;
    z-index: 1;
    width: 34%;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, .24),
        transparent
    );
    animation: spsErpScan 6.5s ease-in-out infinite;
}

.sps-erp-bg-orb {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .22);
}

.sps-erp-bg-orb-one {
    width: 220px;
    height: 220px;
    top: -110px;
    right: 18%;
}

.sps-erp-bg-orb-two {
    width: 92px;
    height: 92px;
    right: 54px;
    bottom: -46px;
    opacity: .45;
}

.sps-erp-intro-content,
.sps-erp-intro-icon {
    position: relative;
    z-index: 2;
}

.sps-erp-intro-card .sps-section-kicker {
    margin-bottom: 10px;
    color: rgba(255, 255, 255, .82);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .04);
}

.sps-erp-intro-content h4 {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: clamp(30px, 2.55vw, 48px);
    font-weight: 950;
    line-height: .95;
    letter-spacing: -.00em;
    display: flex;
    align-items: center;
    gap: 12px;
}

.sps-erp-live-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .16);
    animation: spsErpDotPulse 1.8s ease-in-out infinite;
}

.sps-erp-typewriter {
    margin: 0;
    min-height: 26px;
    color: rgba(255, 255, 255, .88);
    font-size: clamp(14px, 1.08vw, 18px);
    font-weight: 850;
    line-height: 1.35;
}

.sps-erp-typewriter span {
    display: inline-block;
    width: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid rgba(255, 255, 255, .85);
    animation:
        spsErpTypewriter 2.4s steps(36, end) .45s forwards,
        spsErpCursor .78s step-end infinite;
}

.sps-erp-intro-icon {
    width: 78px;
    height: 78px;
    border-radius: 26px;
    flex: 0 0 78px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .20);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .34),
        0 16px 34px rgba(21, 83, 156, .16);
    animation: spsErpFloat 4.2s ease-in-out infinite;
}

.sps-erp-intro-icon svg {
    width: 36px;
    height: 36px;
    stroke-width: 2.65;
    color: #ffffff;
    stroke: currentColor;
}

.sps-erp-icon-ring {
    position: absolute;
    inset: 8px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, .52);
    animation: spsErpRingPulse 2.8s ease-out infinite;
}

@media (max-width: 767.98px) {
    .sps-erp-intro-card {
        min-height: 136px;
        padding: 24px;
        border-radius: 24px;
        align-items: flex-start;
    }

    .sps-erp-intro-icon {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
        border-radius: 20px;
    }

    .sps-erp-intro-icon svg {
        width: 28px;
        height: 28px;
    }

    .sps-erp-bg-orb-one {
        width: 170px;
        height: 170px;
        top: -90px;
        right: -20px;
    }
}

@media (max-width: 575.98px) {
    .sps-erp-intro-card {
        flex-direction: column;
        gap: 18px;
    }

    .sps-erp-typewriter span {
        width: auto;
        white-space: normal;
        border-right: 0;
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sps-erp-intro-card,
    .sps-erp-intro-card::after,
    .sps-erp-typewriter span,
    .sps-erp-intro-icon,
    .sps-erp-icon-ring,
    .sps-erp-live-dot {
        animation: none !important;
        transition: none !important;
    }

    .sps-erp-typewriter span {
        width: auto;
        border-right: 0;
    }
}