/* =========================================================
   EDUCAID INTERACTIVE DASHBOARD VISUAL
   ========================================================= */

.educaid-visual {
    --navy: #090e22;
    --navy-2: #11172d;
    --blue: #347cf7;
    --blue-light: #eaf2ff;
    --green: #28bb8b;
    --orange: #f4a23b;
    --red: #ff365e;
    --purple: #7756ff;

    --text: #172033;
    --muted: #80899a;
    --line: #e9edf3;
    --surface: #ffffff;
    --background: #f5f7fb;

    position: relative;

    width: min(760px, 100%);
    min-height: 600px;

    margin-inline: auto;

    perspective: 1600px;

    user-select: none;
}


/* ---------------------------------------------------------
   REAR FRAME
   --------------------------------------------------------- */

.educaid-visual__backplate {
    position: absolute;

    width: 82%;
    height: 84%;

    left: 10%;
    top: 3%;

    background: var(--navy);

    border-radius: 32px;

    transform:
        rotate(-5deg)
        translateZ(-20px);

    box-shadow:
        0 35px 80px rgba(8, 15, 35, .18);
}


/* ---------------------------------------------------------
   MAIN DASHBOARD
   --------------------------------------------------------- */

.educaid-dashboard {
    position: absolute;

    width: 91%;
    height: 79%;

    left: 2%;
    top: 9%;

    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);

    overflow: hidden;

    background: #fff;

    border:
        1px solid
        rgba(217, 222, 231, .9);

    border-radius: 22px;

    box-shadow:
        0 35px 70px rgba(17, 24, 39, .18),
        0 3px 15px rgba(17, 24, 39, .04);

    transform:
        rotateX(1deg)
        rotateY(-2deg)
        rotateZ(-1.2deg);

    transform-style: preserve-3d;

    transition:
        transform .2s ease,
        box-shadow .35s ease;
}


/* ---------------------------------------------------------
   SIDEBAR
   --------------------------------------------------------- */

.educaid-sidebar {
    position: relative;

    z-index: 3;

    padding: 23px 12px;

    background:
        linear-gradient(
            180deg,
            #10172e 0%,
            #080d20 100%
        );

    color: #fff;
}


.educaid-logo {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 0 7px 21px;

    color: #fff;
    text-decoration: none;

    font-family:
        Inter,
        system-ui,
        sans-serif;

    font-size: 12px;
    font-weight: 700;
}


.educaid-logo__mark {
    width: 21px;
    height: 21px;

    display: grid;
    place-items: center;

    border-radius: 7px;

    color: white;

    font-size: 10px;

    background:
        linear-gradient(
            135deg,
            #ff365e,
            #7756ff
        );

    box-shadow:
        0 5px 16px
        rgba(255, 54, 94, .28);
}


.educaid-nav {
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.educaid-nav__item {
    width: 100%;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 8px;

    border: 0;
    border-radius: 8px;

    color: #8d97ad;

    background: transparent;

    font-family:
        Inter,
        system-ui,
        sans-serif;

    font-size: 8px;
    text-align: left;

    cursor: pointer;

    transition:
        background .22s ease,
        color .22s ease,
        transform .22s ease;
}


.educaid-nav__item:hover {
    color: #fff;

    background:
        rgba(255, 255, 255, .075);

    transform: translateX(2px);
}


.educaid-nav__item.is-active {
    color: #fff;

    background:
        linear-gradient(
            90deg,
            rgba(101, 89, 255, .28),
            rgba(255, 255, 255, .04)
        );
}


.nav-icon {
    width: 12px;
    height: 12px;

    flex: 0 0 12px;
}


.nav-icon svg {
    width: 100%;
    height: 100%;

    fill: currentColor;
}


/* ---------------------------------------------------------
   DASHBOARD CONTENT
   --------------------------------------------------------- */

.educaid-main {
    min-width: 0;

    padding: 20px 21px;

    background:
        linear-gradient(
            145deg,
            #fff 0%,
            #fbfcfe 100%
        );

    font-family:
        Inter,
        system-ui,
        sans-serif;
}


.educaid-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 17px;
}


.educaid-eyebrow {
    display: block;

    margin-bottom: 2px;

    color: var(--muted);

    font-size: 6px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: .08em;
}


.educaid-topbar h3 {
    margin: 0;

    color: var(--text);

    font-size: 15px;
    font-weight: 750;
}


.educaid-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}


.educaid-search {
    display: flex;
    align-items: center;
    gap: 6px;

    min-width: 95px;

    padding: 6px 8px;

    border: 1px solid var(--line);
    border-radius: 7px;

    background: #fff;

    color: #a0a7b4;

    font-size: 7px;

    cursor: pointer;
}


.educaid-search svg,
.educaid-icon-btn svg {
    width: 10px;
    height: 10px;

    fill: currentColor;
}


.educaid-icon-btn,
.educaid-avatar {
    position: relative;

    width: 25px;
    height: 25px;

    display: grid;
    place-items: center;

    border: 1px solid var(--line);
    border-radius: 50%;

    background: #fff;

    cursor: pointer;
}


.educaid-avatar {
    border: none;

    color: #fff;

    font-size: 7px;
    font-weight: 700;

    background:
        linear-gradient(
            135deg,
            #344577,
            #11182e
        );
}


.notification-dot {
    position: absolute;

    width: 5px;
    height: 5px;

    right: 1px;
    top: 1px;

    border: 1px solid #fff;
    border-radius: 50%;

    background: var(--red);
}


/* ---------------------------------------------------------
   STAT CARDS
   --------------------------------------------------------- */

.educaid-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 11px;

    margin-bottom: 12px;
}


.educaid-stat {
    position: relative;

    overflow: hidden;

    padding: 13px;

    border: 1px solid var(--line);
    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            #fff,
            #fcfdff
        );
}


.stat-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    color: #606979;

    font-size: 7px;
    font-weight: 600;
}


.stat-indicator {
    width: 5px;
    height: 5px;

    border-radius: 50%;
}


.stat-indicator--orange {
    background: var(--orange);
}


.stat-indicator--blue {
    background: var(--blue);
}


.stat-indicator--green {
    background: var(--green);
}


.educaid-stat strong {
    display: block;

    margin-top: 7px;

    color: #161d2b;

    font-size: 20px;
    line-height: 1;
}


.stat-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 10px;

    color: #d8973e;

    font-size: 6px;
}


.stat-bottom--positive {
    color: var(--green);
}


.mini-chart {
    width: 52px;
    height: 18px;

    overflow: visible;
}


.mini-chart polyline {
    fill: none;

    stroke: currentColor;
    stroke-width: 1.5;

    stroke-linecap: round;
    stroke-linejoin: round;

    stroke-dasharray: 120;
    stroke-dashoffset: 120;

    animation:
        drawMiniChart
        1.5s ease forwards .5s;
}


@keyframes drawMiniChart {
    to {
        stroke-dashoffset: 0;
    }
}


/* ---------------------------------------------------------
   CHART PANELS
   --------------------------------------------------------- */

.educaid-chart-grid {
    display: grid;
    grid-template-columns: 1.45fr .8fr;

    gap: 11px;

    margin-bottom: 11px;
}


.dashboard-panel {
    position: relative;

    padding: 12px;

    border: 1px solid var(--line);
    border-radius: 10px;

    background: #fff;
}


.panel-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    margin-bottom: 8px;

    color: #343d4d;

    font-size: 7px;
    font-weight: 700;
}


.panel-title-row small {
    display: block;

    margin-top: 2px;

    color: #a1a8b5;

    font-size: 5px;
    font-weight: 500;
}


.panel-title-row button {
    padding: 3px 6px;

    border: 1px solid #edf0f4;
    border-radius: 5px;

    color: #9da5b2;

    background: #fff;

    font-size: 5px;

    cursor: pointer;
}


/* Attendance graph */

.attendance-chart {
    position: relative;

    height: 102px;

    overflow: hidden;
}


.attendance-chart svg {
    position: absolute;

    inset: 6px 0 14px;

    width: 100%;
    height: calc(100% - 20px);

    overflow: visible;
}


.grid-line {
    position: absolute;

    left: 0;
    right: 0;

    height: 1px;

    background: #f0f2f6;
}


.grid-line--1 { top: 15%; }
.grid-line--2 { top: 34%; }
.grid-line--3 { top: 53%; }
.grid-line--4 { top: 72%; }


.chart-area {
    fill: url(#attendanceFill);

    opacity: 0;

    animation:
        chartAreaReveal
        1s ease forwards .8s;
}


.chart-line {
    fill: none;

    stroke: var(--blue);
    stroke-width: 2;

    vector-effect: non-scaling-stroke;

    stroke-linecap: round;

    stroke-dasharray: 900;
    stroke-dashoffset: 900;

    animation:
        drawLargeChart
        2.2s cubic-bezier(.4, 0, .2, 1)
        forwards .3s;
}


@keyframes drawLargeChart {
    to {
        stroke-dashoffset: 0;
    }
}


@keyframes chartAreaReveal {
    to {
        opacity: 1;
    }
}


.chart-days {
    position: absolute;

    bottom: 0;
    left: 0;
    right: 0;

    display: flex;
    justify-content: space-between;

    color: #a7afbc;

    font-size: 5px;
}


/* Finance bars */

.finance-bars {
    height: 105px;

    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 5px;

    padding: 9px 3px 1px;

    background:
        repeating-linear-gradient(
            to bottom,
            #fff,
            #fff 24px,
            #f0f2f6 25px
        );
}


.finance-bars span {
    width: 10px;

    height: var(--bar-height);

    border-radius: 2px 2px 0 0;

    background:
        linear-gradient(
            180deg,
            #42b9fc,
            #347cf7
        );

    transform-origin: bottom;

    animation:
        growBar
        1s cubic-bezier(.17, .67, .31, 1.25)
        both;
}


.finance-bars span:nth-child(2) { animation-delay: .10s; }
.finance-bars span:nth-child(3) { animation-delay: .18s; }
.finance-bars span:nth-child(4) { animation-delay: .26s; }
.finance-bars span:nth-child(5) { animation-delay: .34s; }
.finance-bars span:nth-child(6) { animation-delay: .42s; }
.finance-bars span:nth-child(7) { animation-delay: .50s; }
.finance-bars span:nth-child(8) { animation-delay: .58s; }


@keyframes growBar {
    from {
        transform: scaleY(0);
    }

    to {
        transform: scaleY(1);
    }
}


/* ---------------------------------------------------------
   LOWER PANELS
   --------------------------------------------------------- */

.educaid-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 11px;
}


.live-status {
    display: flex;
    align-items: center;
    gap: 4px;

    color: var(--green);

    font-size: 5px;
    font-weight: 600;
}


.live-status i {
    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: currentColor;

    box-shadow:
        0 0 0
        rgba(40, 187, 139, .4);

    animation:
        livePulse
        1.7s infinite;
}


@keyframes livePulse {
    50% {
        box-shadow:
            0 0 0 5px
            rgba(40, 187, 139, 0);
    }
}


.activity-list {
    display: grid;
}


.activity-list button {
    width: 100%;

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 6px;

    padding: 6px 2px;

    border: 0;
    border-bottom: 1px solid #f1f3f6;

    background: transparent;

    text-align: left;

    cursor: pointer;

    transition:
        background .2s ease,
        padding .2s ease;
}


.activity-list button:hover {
    padding-inline: 6px;

    border-radius: 6px;

    background: #f8faff;
}


.activity-list strong {
    display: block;

    color: #485162;

    font-size: 5.5px;
}


.activity-list small {
    color: #9da4b1;

    font-size: 4.5px;
}


.activity-list time {
    color: #adb4be;

    font-size: 4.5px;
}


.activity-icon,
.table-dot {
    display: block;

    width: 5px;
    height: 5px;

    border-radius: 50%;
}


.activity-icon--blue,
.table-dot--blue {
    background: var(--blue);
}


.activity-icon--green,
.table-dot--green {
    background: var(--green);
}


.activity-icon--orange {
    background: var(--orange);
}


.finance-table__head,
.finance-table button {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;

    width: 100%;
}


.finance-table__head {
    padding: 3px 2px 5px;

    color: #adb4c0;

    font-size: 4.5px;
}


.finance-table button {
    padding: 7px 2px;

    border: 0;
    border-top: 1px solid #f1f3f6;

    color: #687181;

    background: transparent;

    font-size: 5px;

    cursor: pointer;
}


.finance-table button > span {
    display: flex;
    align-items: center;
    gap: 5px;
}


.finance-table strong {
    color: #3e4858;

    font-size: 5px;
}


/* ---------------------------------------------------------
   CARD INTERACTION
   --------------------------------------------------------- */

.interactive-card {
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}


.interactive-card:hover {
    z-index: 4;

    border-color:
        rgba(52, 124, 247, .2);

    box-shadow:
        0 11px 26px
        rgba(28, 45, 80, .09);

    transform:
        translateY(-4px)
        translateZ(10px);
}


/* ---------------------------------------------------------
   FLOATING NOTIFICATION
   --------------------------------------------------------- */

.educaid-notification {
    position: absolute;

    z-index: 10;

    top: 3%;
    right: 2%;

    min-width: 180px;

    display: grid;
    grid-template-columns: auto 1fr;
    gap: 11px;
    align-items: center;

    padding: 11px 14px;

    border:
        1px solid
        rgba(227, 231, 238, .8);

    border-radius: 13px;

    background:
        rgba(255, 255, 255, .94);

    backdrop-filter: blur(15px);

    box-shadow:
        0 17px 35px
        rgba(20, 29, 48, .17);

    font-family:
        Inter,
        system-ui,
        sans-serif;

    text-align: left;

    cursor: pointer;

    transform:
        translateZ(50px)
        rotate(1deg);

    animation:
        notificationFloat
        4.5s ease-in-out infinite;
}


.notification-number {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    color: #fff;

    background:
        linear-gradient(
            145deg,
            #ff385f,
            #ff234d
        );

    font-size: 20px;
    font-weight: 800;

    box-shadow:
        0 9px 20px
        rgba(255, 54, 94, .25);
}


.notification-copy strong {
    display: block;

    margin-bottom: 2px;

    color: #303849;

    font-size: 9px;
}


.notification-copy small {
    color: #929aa8;

    font-size: 6px;
}


@keyframes notificationFloat {
    0%,
    100% {
        transform:
            translateY(0)
            rotate(1deg);
    }

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


/* ---------------------------------------------------------
   AI ASSISTANT
   --------------------------------------------------------- */

.educaid-ai {
    position: absolute;

    z-index: 15;

    width: 265px;

    right: -1%;
    bottom: 3%;

    padding: 20px;

    border:
        1px solid
        rgba(255, 255, 255, .08);

    border-radius: 16px;

    color: #fff;

    background:
        linear-gradient(
            145deg,
            #121a34,
            #090f24
        );

    box-shadow:
        0 28px 55px
        rgba(8, 12, 29, .32);

    font-family:
        Inter,
        system-ui,
        sans-serif;

    transform:
        translateZ(65px);

    transition:
        opacity .3s ease,
        transform .3s ease,
        visibility .3s;
}


.educaid-ai.is-hidden {
    opacity: 0;
    visibility: hidden;

    transform:
        translateY(30px)
        scale(.9);
}


.ai-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 16px;
}


.ai-header > div {
    display: flex;
    align-items: center;
    gap: 7px;
}


.ai-status {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #31dcaa;

    box-shadow:
        0 0 0 5px
        rgba(49, 220, 170, .08);
}


.ai-header strong {
    font-size: 11px;
}


.ai-header button {
    border: 0;

    color: #778199;

    background: transparent;

    font-size: 18px;
    line-height: 1;

    cursor: pointer;
}


.ai-message {
    padding: 12px;

    border:
        1px solid
        rgba(255, 255, 255, .07);

    border-radius: 10px;

    color: #d5dae7;

    background:
        rgba(255, 255, 255, .045);

    font-size: 9px;
    line-height: 1.5;
}


.ai-message strong {
    color: #fff;
}


.ai-generating {
    margin-top: 14px;
}


.ai-generating > div:first-child {
    display: flex;
    justify-content: space-between;

    margin-bottom: 8px;

    color: #aeb7ca;

    font-size: 7px;
}


.ai-progress {
    height: 5px;

    overflow: hidden;

    border-radius: 20px;

    background: #273049;
}


.ai-progress span {
    display: block;

    width: 0;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #ff3058,
            #ff4768,
            #8058ff
        );

    box-shadow:
        0 0 15px
        rgba(255, 48, 88, .32);

    transition: width .2s linear;
}


.educaid-ai p {
    margin: 14px 0;

    color: #bec6d7;

    font-size: 8px;
    line-height: 1.45;
}


.ai-action {
    width: 100%;

    padding: 9px 12px;

    border:
        1px solid
        rgba(255, 255, 255, .09);

    border-radius: 8px;

    color: #fff;

    background:
        rgba(255, 255, 255, .06);

    font-size: 8px;
    font-weight: 650;

    cursor: pointer;

    transition:
        background .2s,
        transform .2s;
}


.ai-action:hover {
    background:
        rgba(255, 255, 255, .11);

    transform: translateY(-1px);
}


.ai-bubble {
    position: absolute;

    z-index: 14;

    right: 2%;
    bottom: 5%;

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border: 0;
    border-radius: 50%;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #735bff,
            #3851ff
        );

    box-shadow:
        0 10px 25px
        rgba(67, 67, 220, .28);

    font-size: 10px;
    font-weight: 800;

    cursor: pointer;

    opacity: 0;
    visibility: hidden;

    transform: scale(.6);

    transition:
        opacity .25s,
        transform .25s,
        visibility .25s;
}


.ai-bubble.is-visible {
    opacity: 1;
    visibility: visible;

    transform: scale(1);
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 760px) {

    .educaid-visual {
        min-height: 510px;

        transform: scale(.9);
        transform-origin: top center;
    }

}


@media (max-width: 600px) {

    .educaid-visual {
        width: 650px;

        margin-left: 50%;

        transform:
            translateX(-50%)
            scale(.72);

        transform-origin: top center;
    }

}


@media (prefers-reduced-motion: reduce) {

    .educaid-visual *,
    .educaid-visual *::before,
    .educaid-visual *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

}

/* Trig8 homepage hero integration */
.hero-dashboard {
    position: relative;
    min-width: 0;
    min-height: 35rem;
    overflow: clip;
    isolation: isolate;
}

.hero-dashboard .educaid-visual {
    position: absolute;
    inset: 0;
    width: 100%;
    min-height: 35rem;
    margin: 0;
}

.hero-dashboard .educaid-dashboard {
    width: 92%;
    height: 80%;
}

.hero-dashboard .educaid-notification {
    right: 1%;
}

.hero-dashboard .educaid-ai {
    right: 0;
    bottom: 1.5%;
    width: min(16.5rem, 42%);
}

@media (max-width: 64rem) {
    .hero-dashboard {
        width: min(100%, 48rem);
        min-height: 35rem;
        margin-inline: auto;
    }
}

@media (max-width: 48rem) {
    .hero-dashboard {
        min-height: 27rem;
    }

    .hero-dashboard .educaid-visual {
        top: 0;
        left: 50%;
        width: 42rem;
        min-height: 36rem;
        margin: 0;
        transform: translateX(-50%) scale(0.72);
        transform-origin: top center;
    }
}

@media (max-width: 30rem) {
    .hero-dashboard {
        min-height: 23.5rem;
    }

    .hero-dashboard .educaid-visual {
        width: 41rem;
        transform: translateX(-50%) scale(0.61);
    }
}

@media (max-width: 22.5rem) {
    .hero-dashboard {
        min-height: 21.5rem;
    }

    .hero-dashboard .educaid-visual {
        transform: translateX(-50%) scale(0.53);
    }
}