:root{--primary:#5b5bd6;--dark:#17172a;--bg:#f6f7fb;--card:#fff}*{box-sizing:border-box}body{margin:0;background:var(--bg);font-family:Inter,Segoe UI,Arial,sans-serif;color:#24243a}.app{display:flex;min-height:100vh}.sidebar{width:255px;background:linear-gradient(180deg,#17172a,#24234b);color:#fff;position:fixed;inset:0 auto 0 0;padding:22px 15px;display:flex;flex-direction:column;z-index:20}.brand{font-size:22px;font-weight:800;padding:0 14px 25px;display:flex;gap:10px;align-items:center}.brand i{color:#9c9cff}.sidebar-nav{display:flex;flex-direction:column;gap:5px;overflow-y:auto;min-height:0;padding-right:3px}.sidebar-nav::-webkit-scrollbar{width:5px}.sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:10px}.nav-group-toggle{border:0;background:transparent;color:#77789c;font-size:10px;font-weight:700;letter-spacing:1.3px;padding:13px;border-radius:10px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;text-align:left}.nav-group-toggle:hover{background:rgba(255,255,255,.06);color:#fff}.nav-group{display:flex;flex-direction:column;gap:5px}.nav-group-toggle.collapsed i:last-child{transform:rotate(-90deg)}.nav-group-toggle i:last-child{transition:.2s}.sidebar a{flex:none}.sidebar a{color:#c9c9dc;text-decoration:none;padding:11px 13px;border-radius:10px;display:flex;gap:12px;align-items:center;font-size:14px}.sidebar a:hover,.sidebar a.active{background:rgba(255,255,255,.1);color:#fff}.nav-title{font-size:10px;color:#77789c;font-weight:700;letter-spacing:1.3px;padding:18px 13px 5px}.sidebar-bottom{margin-top:auto;border-top:1px solid rgba(255,255,255,.1);padding:15px 10px 0;display:flex;justify-content:space-between;color:#c9c9dc}.main{margin-left:255px;width:calc(100% - 255px)}.topbar{height:78px;background:#fff;border-bottom:1px solid #e9e9f1;display:flex;align-items:center;padding:0 28px;position:sticky;top:0;z-index:10}.topbar h5{font-weight:800}.content{padding:28px}.date{font-size:12px;color:#777}.avatar{width:38px;height:38px;border-radius:50%;background:#ececff;color:var(--primary);display:grid;place-items:center;font-weight:800}.stat{background:#fff;border:0;border-radius:16px;padding:20px;box-shadow:0 4px 18px rgba(30,30,70,.05);height:100%}
    /*.stat .icon {
        width: 46px;
        height: 46px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        background: transparent;
        color: var(--primary);
        font-size: 22px
    }*/

   

    .stat h3{font-size:27px;font-weight:800;margin:15px 0 2px}.cardx{background:#fff;border-radius:16px;border:0;box-shadow:0 4px 18px rgba(30,30,70,.05)}.cardx .card-header{background:transparent;border:0;padding:20px 20px 10px;font-weight:800}.table thead th{font-size:12px;text-transform:uppercase;color:#888;padding:14px}.table tbody td{vertical-align:middle;padding:14px}.btn-primary{background:var(--primary);border-color:var(--primary)}.page-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.form-card{max-width:900px}.badge-soft{background:#eeeefc;color:var(--primary);padding:6px 10px;border-radius:20px;font-size:12px}.receipt{max-width:720px;margin:auto;background:#fff;padding:35px;border-radius:15px}.login-wrap{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#17172a,#5b5bd6)}
@media(max-width:900px){.sidebar{transform:translateX(-100%);transition:.25s}.sidebar.open{transform:none}.main{margin-left:0;width:100%}.content{padding:18px}.date{display:none}.topbar{padding:0 15px}}

.stat {
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 18px rgba(30, 30, 70, .05);
    height: 100%;
    transition: all .25s ease;
}

    /* Students */
    .stat.students {
        border-left: 4px solid #4f46e5;
    }

    /* Expenses */
    .stat.expenses {
        border-left: 4px solid #198754;
    }

    /* Collection */
    .stat.collection {
        border-left: 4px solid #f59e0b;
    }

    /* Present */
    .stat.present {
        border-left: 4px solid #7c3aed;
    }


    /* Icon */
    .stat .icon {
        width: 46px;
        height: 46px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        background: transparent;
        font-size: 22px;
    }


    /* Icon Colors */
    .stat.students .icon {
        color: #4f46e5;
    }

    .stat.expenses .icon {
        color: #198754;
    }

    .stat.collection .icon {
        color: #f59e0b;
    }

    .stat.present .icon {
        color: #7c3aed;
    }


    /* Number */
    .stat h3 {
        font-size: 27px;
        font-weight: 800;
        margin: 15px 0 2px;
        color: #17172a;
    }


    /* Hover */
    .stat:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(30, 30, 70, .10);
    }


/*.stat {
    border: 0;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 18px rgba(30, 30, 70, .05);
    height: 100%;
}*/

    /* Students */
    /*.stat.students {
        background: #eef4ff;
    }*/

    /* Expenses */
    /*.stat.expenses {
        background: #effaf4;
    }*/

    /* Collection */
    /*.stat.collection {
        background: #fff8e8;
    }*/

    /* Present */
    /*.stat.present {
        background: #f5f0ff;
    }

.stat {
    transition: all .25s ease;
}

    .stat:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(30, 30, 70, .10);
    }*/