/* =========================
STICKY FILTERS
========================= */

.filters {

    position: sticky;

    top: 20px;

    z-index: 999;

    background:
        rgba(10,10,10,0.92);

    backdrop-filter:
        blur(14px);

    padding: 14px;

    border-radius: 18px;

    border:
        1px solid #1f2937;

    margin-top: 25px;

    margin-bottom: 18px;
}

/* PREMIUM FILTER SELECT */

.filters select {

    background:
        #111827;

    border:
        1px solid #374151;

    color:
        white;

    padding:
        12px 16px;

    border-radius:
        12px;

    outline:
        none;

    cursor:
        pointer;

    font-weight:
        600;

    transition:
        0.2s;

    min-width:
        180px;
}

/* HOVER */

.filters select:hover {

    border-color:
        #7c3aed;
}

/* ACTIVE / FOCUS */

.filters select:focus {

    border-color:
        #a855f7;

    box-shadow:
        0 0 14px
        rgba(124,58,237,0.35);
}

/* SEARCH INPUT */

.filters input {

    background:
        #111827;

    border:
        1px solid #374151;

    color:
        white;

    padding:
        12px 16px;

    border-radius:
        12px;

    outline:
        none;

    min-width:
        260px;

    transition:
        0.2s;
}

.filters input:focus {

    border-color:
        #a855f7;

    box-shadow:
        0 0 14px
        rgba(124,58,237,0.35);
}


/* PREMIUM ROW */

tbody tr {

    transition: 0.2s;
}

tbody tr:hover {

    background:
        rgba(124,58,237,0.08);
}

/* =========================
PREMIUM DASHBOARD
========================= */

.dashboard {

    display: grid;

    grid-template-columns:
        repeat(auto-fit,minmax(220px,1fr));

    gap: 20px;

    margin-bottom: 30px;
}

.dash-card {

    background:
        linear-gradient(
            145deg,
            #111827,
            #0b1220
        );

    border:
        1px solid #1f2937;

    border-radius: 24px;

    padding: 24px;

    min-height: 130px;

    transition: 0.25s;

    cursor: pointer;

    position: relative;

    overflow: hidden;
}

.dash-card::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at top right,
            rgba(124,58,237,0.18),
            transparent 40%
        );

    pointer-events: none;
}

.dash-card:hover {

    transform:
        translateY(-4px);

    border-color:
        #7c3aed;

    box-shadow:
        0 0 30px
        rgba(124,58,237,0.18);
}

.card-number {

    font-size: 44px;

    font-weight: 800;

    margin-bottom: 10px;

    color: white;
}

.card-title {

    color: #cbd5e1;

    font-size: 15px;

    font-weight: 600;
}

/* =========================
FILTERS
========================= */

.filters {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 24px;
}

.filters button {

    background:
        rgba(17,24,39,0.95);

    border:
        1px solid #2d3748;

    color: white;

    padding:
        12px 18px;

    border-radius:
        14px;

    cursor:
        pointer;

    font-weight:
        600;

    transition:
        0.2s;
}

.filters button:hover {

    background:
        #7c3aed;

    border-color:
        #7c3aed;

    transform:
        translateY(-2px);
}

/* =========================
SEARCH
========================= */

.table-top {

    display: flex;

    justify-content: flex-end;

    margin-bottom: 18px;
}

.table-top input {

    width: 320px;

    background:
        #0f172a;

    border:
        1px solid #334155;

    color:
        white;

    padding:
        14px 18px;

    border-radius:
        16px;

    outline:
        none;

    transition:
        0.2s;
}

.table-top input:focus {

    border-color:
        #7c3aed;

    box-shadow:
        0 0 18px
        rgba(124,58,237,0.25);
}

/* =========================
TABLE PREMIUM
========================= */

.table-container {

    background:
        linear-gradient(
            145deg,
            #0f172a,
            #0b1220
        );

    border:
        1px solid #1f2937;

    border-radius:
        24px;

    overflow:
        hidden;
}

table {

    min-width: 1400px;
}

thead {

    background:
        rgba(255,255,255,0.03);
}

th {

    color:
        #cbd5e1;

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        0.4px;
}

td {

    font-size:
        14px;

    color:
        white;
}

tbody tr {

    transition:
        0.2s;
}

tbody tr:hover {

    background:
        rgba(124,58,237,0.08);
}

/* =========================
STATUS BADGES
========================= */

.status-badge-table {

    padding:
        8px 14px;

    border-radius:
        999px;

    font-size:
        12px;

    font-weight:
        700;

    color:
        white;

    display:
        inline-block;
}

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

@media(max-width:900px){

    .dashboard{

        grid-template-columns:
            1fr;
    }

    .table-top{

        justify-content:
            stretch;
    }

    .table-top input{

        width:
            100%;
    }
}
/* FORCE HORIZONTAL SCROLL */

.table-wrapper {

    width: 100%;

    overflow-x: auto;

    overflow-y: hidden;
}

.table-container {

    width: max-content;

    min-width: 100%;
}

/* PREMIUM SCROLLBAR */

.table-wrapper::-webkit-scrollbar {

    height: 10px;
}

.table-wrapper::-webkit-scrollbar-track {

    background: #111827;

    border-radius: 999px;
}

.table-wrapper::-webkit-scrollbar-thumb {

    background: #7c3aed;

    border-radius: 999px;
}