*{

            margin:0;
            padding:0;
            box-sizing:border-box;

        }

        body{

            font-family:Inter,sans-serif;
            background:#F8FAFC;
            color:#0F172A;

        }

        html{

            scroll-behavior:smooth;

        }

        /* ==========================
                GLOBAL
        =========================== */

        .page-wrapper{

            display:flex;

            min-height:100vh;

        }

        .main-content{

            flex:1;

            margin-left:290px;

            transition:.3s;

        }

        .content{

            padding:32px;

        }

        /* ==========================
                CARD
        =========================== */

        .dashboard-card{

            background:#fff;

            border:1px solid #EEF2F7;

            border-radius:22px;

            box-shadow:

            0 2px 6px rgba(15,23,42,.03),

            0 12px 32px rgba(15,23,42,.04);

            transition:.25s;

        }

        .dashboard-card:hover{

            transform:translateY(-2px);

            box-shadow:

            0 12px 40px rgba(15,23,42,.08);

        }

        /* ==========================
            ICON BOX
        =========================== */

        .icon-box{

            width:56px;

            height:56px;

            border-radius:18px;

            display:flex;

            align-items:center;

            justify-content:center;

            background:#EFF6FF;

        }

        .icon-box svg{

            width:24px;

            height:24px;

            color:#2563EB;

        }

        /* ==========================
                TITLE
        =========================== */

        .section-title{

            font-size:30px;

            font-weight:700;

            color:#0F172A;

        }

        .section-subtitle{

            margin-top:5px;

            color:#64748B;

        }

        /* ==========================
                BUTTON
        =========================== */

        .btn-primary-custom{

            background:#2563EB;

            color:white;

            border:none;

            border-radius:14px;

            padding:12px 20px;

            font-weight:600;

            transition:.25s;

        }

        .btn-primary-custom:hover{

            background:#1D4ED8;

        }

        .btn-secondary-custom{

            background:white;

            border:1px solid #E5E7EB;

            border-radius:14px;

            padding:12px 20px;

            transition:.25s;

        }

        .btn-secondary-custom:hover{

            background:#F8FAFC;

        }

        /* ==========================
                INPUT
        =========================== */

        .input-modern{

            height:48px;

            border-radius:999px;

            border:1px solid #E5E7EB;

            background:white;

            padding:0 20px;

            outline:none;

            transition:.25s;

        }

        .input-modern:focus{

            border-color:#2563EB;

            box-shadow:

            0 0 0 4px rgba(37,99,235,.08);

        }

        /* ==========================
                SCROLLBAR
        =========================== */

        ::-webkit-scrollbar{

            width:7px;

        }

        ::-webkit-scrollbar-thumb{

            background:#CBD5E1;

            border-radius:50px;

        }

        ::-webkit-scrollbar-track{

            background:transparent;

        }

        /* ==========================
            MOBILE
        =========================== */

        @media(max-width:1024px){

            .main-content{

                margin-left:0;

            }

            .content{

                padding:20px;

            }

        }
.status{

    display:inline-flex;

    align-items:center;

    padding:6px 14px;

    border-radius:999px;

    font-size:13px;

    font-weight:600;

}

.success{

    background:#DCFCE7;

    color:#15803D;

}

.warning{

    background:#FEF3C7;

    color:#B45309;

}

.danger{

    background:#FEE2E2;

    color:#B91C1C;

}

table{

    border-collapse:collapse;

}

tbody tr{

    transition:.25s;

}

tbody tr:hover{

    background:#F8FAFC;

}
.profile-item{

display:flex;

align-items:center;

gap:14px;

height:48px;

padding:0 14px;

border-radius:14px;

cursor:pointer;

transition:.2s;

font-weight:500;

}

.profile-item:hover{

background:#F8FAFC;

}

.modal-box{

border:1px solid #EEF2F7;

box-shadow:

0 20px 50px rgba(0,0,0,.08);

}

#toast{

animation:toast .35s;

}

@keyframes toast{

from{

opacity:0;

transform:translateY(-20px);

}

to{

opacity:1;

transform:none;

}

}
.command-item{

    display:flex;

    align-items:center;

    gap:14px;

    height:54px;

    padding:0 16px;

    border-radius:16px;

    transition:.2s;

    cursor:pointer;

}

.command-item:hover{

    background:#F8FAFC;

}

.command-item svg{

    width:20px;

    height:20px;

    color:#64748B;

}

/* ==========================
   TABLET: off-canvas sidebar
   Below 1024px the fixed 290px sidebar used to sit on top of the content
   (content lost its left margin, the sidebar did not move). It now slides
   in on demand from the navbar's menu button.
=========================== */
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    z-index: 45;
}

@media (max-width: 1023.98px) {
    #sidebar {
        transform: translateX(-100%);
        box-shadow: none;
    }

    #sidebar.sidebar-open {
        transform: translateX(0);
        box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
    }

    /* The desktop collapse state means nothing off-canvas. */
    #sidebar.sidebar-collapsed {
        width: 290px !important;
    }

    .main-content,
    .main-content.ml-\[92px\] {
        margin-left: 0 !important;
    }

    /* Wide tables scroll inside their card instead of stretching the page. */
    .content .overflow-x-auto,
    .content .ui-table-wrapper {
        -webkit-overflow-scrolling: touch;
    }
}

@media (min-width: 1024px) {
    .sidebar-backdrop {
        display: none !important;
    }
}

/* Keep the page itself from ever scrolling sideways on tablet widths. */
/* A flex child defaults to min-width:auto, which let one wide table push
   the whole page sideways; 0 keeps overflow inside the table's own scroller. */
.main-content {
    min-width: 0;
}