@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    letter-spacing: normal;
}

:root {

    /* Brand */
    --primary: #213f99;
    --secondary: #ee3867;

    /* Palette */
    --blue: var(--primary);
    --blue-light: #4b77fa;
    --blue-dark: #091f34;
    --blue-gray: #647e96;

    --magenta: var(--secondary);

    --green: #00a14b;
    --green-light: #00d15e;

    --yellow: #ffdd17;
    --red: #ff002b;

    --gray: #bebebe;
    --dark-gray: #161616;

    --black: #020202;
    --dark: #020717;
    --light: #e6e5e5;
    --white: #fafafa;

    --black-alpha: #16161680;
    --white-alpha: #fafafa80;

    /* Semantic */
    --info: var(--blue-light);
    --success: var(--green-light);
    --warning: var(--yellow);
    --danger: var(--red);

    /* Typography */
    --fs-h1: 3rem;
    --fs-h2: 2.5rem;
    --fs-h3: 2rem;
    --fs-h4: 1.75rem;
    --fs-h5: 1.375rem;
    --fs-h6: 1rem;
    --fs-body: 1rem;
    --fs-lead: 1.5rem;

    --f-body: 'Inter', sans-serif;
    --f-title: 'Inter', sans-serif;
}

html {
    scroll-behavior: smooth;
}

/* ==========================================================
   Typography
========================================================== */

:is(h1, h2, h3, h4, h5, h6) {
    margin: 0 0 1rem;
    color: var(--white);
    text-align: left;
    font-weight: 300;
    font-family: var(--f-title);
}

:is(h1, h2, h3, h4, h5, h6) span {
    display: inline-block;
    background: linear-gradient(to right, var(--light), var(--blue-gray));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 600;
}

/* ==========================================================
   Headings
========================================================== */

h1 {
    font-size: var(--fs-h1);
    line-height: 1;
    letter-spacing: -.04em;
}

h2 {
    font-size: var(--fs-h2);
    line-height: 1.05;
    letter-spacing: -.03em;
}

h3 {
    font-size: var(--fs-h3);
    line-height: 1.1;
    letter-spacing: -.025em;
}

h4 {
    font-size: var(--fs-h4);
    line-height: 1.2;
    letter-spacing: -.02em;
}

h5 {
    font-size: var(--fs-h5);
    line-height: 1.3;
    letter-spacing: -.015em;
}

h6 {
    font-size: var(--fs-h6);
    line-height: 1.4;
    letter-spacing: -.01em;
}

/* ==========================================================
   Paragraphs
========================================================== */

p {
    margin: 0 0 1rem;
    font-size: var(--fs-body);
    line-height: 1.6;
    font-weight: 300;
    color: var(--white);
    font-family: var(--f-body);
}

p.lead {
    font-size: var(--fs-lead);
    line-height: 1.5;
    font-weight: 600;
    font-family: var(--f-body);
}

/* ==========================================================
   General Typography
========================================================== */
li,
a {
    font-family: var(--f-body);
}

/* ==========================================================
   Interactive
========================================================== */
a {
    text-decoration: none;
    transition: 300ms ease all;
}

.btn {
    height: 2.5rem;
    width: fit-content;
    min-width: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 0.25rem;
    font-size: 1rem;
    color: var(--light);
    padding: .5rem 1rem;
    border: 2px solid transparent;
    border-radius: 1.25rem;
    background-image:
        linear-gradient(var(--dark), var(--blue-dark)),
        conic-gradient(var(--warning), var(--success),
            var(--primary),
            var(--primary),
            var(--primary),
            var(--secondary),
            var(--secondary),
            var(--secondary),
            var(--warning),
            var(--warning));
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;

    &:hover {
        box-shadow: 0 0 8px var(--white-alpha);
    }

    i {
        font-size: .875rem;
    }
}

.colorBorder {
    border-style: solid;
    border-width: 2px;
    border-color: transparent;
    background-color: var(--black);
    background-image:
        var(--bgColorBorder),
        conic-gradient(var(--warning), var(--success),
            var(--primary),
            var(--primary),
            var(--primary),
            var(--secondary),
            var(--secondary),
            var(--secondary),
            var(--warning),
            var(--warning));
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
}

body {
    width: 100%;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    position: relative;
    /* background-color: var(--dark); */
    background-image:
        linear-gradient(90deg, transparent 15px, #00000040 15px),
        linear-gradient(transparent 15px, #00000040 15px),
        radial-gradient(circle at 80% 100%, #213f9920, transparent 100%),
        radial-gradient(circle at 20% 100%, #ee38670f, transparent 100%),
        radial-gradient(circle at 75% 0%, #00a14b10, transparent 30%),
        radial-gradient(circle at 25% 0%, #ffdd1710, transparent 25%);
    background-size: 1rem 1rem, 1rem 1rem, cover, cover, cover, cover;
    background-attachment: fixed;
    background-color: #000;
}

header {
    width: 100%;
    height: 3rem;
    background-color: #00000080;
    backdrop-filter: blur(4px);
    z-index: 20;
    border-bottom: 1px solid var(--dark-gray);

    nav {
        width: 60rem;
        height: 3rem;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .logo {
            height: 2rem;

            img {
                height: 100%;
                display: block;
            }
        }

        .menu {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1rem;

            li {
                list-style-type: none;

                a {
                    height: 3rem;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: .75rem;
                    color: var(--gray);

                    &:hover {
                        color: var(--white);
                    }
                }
            }
        }

        .user {
            height: 3rem;
            width: fit-content;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1rem;
            position: relative;

            .userAvatar {
                width: 2.5rem;
                height: 2.5rem;
                border-radius: 50%;
                overflow: hidden;
                border: 1px solid var(--light);

                img {
                    width: 100%;
                    display: block;
                }

                &:hover {
                    cursor: pointer;
                }
            }

            .userName {
                color: var(--light);
                font-family: var(--f-body);
                font-size: .875rem;
            }

            .userMenu {
                width: 100%;
                display: none;
                flex-direction: column;
                position: absolute;
                top: 3rem;
                border-radius: 1rem 0 1rem 1rem;
                overflow: hidden;

                li {
                    list-style-type: none;

                    a {
                        color: var(--light);
                        font-size: .75rem;
                        display: flex;
                        gap: 0.5rem;
                        justify-content: center;
                        align-items: center;
                        padding: .75rem;
                        background-color: var(--blue-dark);

                        &:hover {
                            background-color: var(--primary);
                        }
                    }
                }
            }

            .show {
                display: flex;
            }
        }
    }
}

main {
    width: 100%;
    flex: 1;

    section {
        width: 80rem;
        margin: 0 auto;
        padding: 1rem;
    }
}

.cursos {
    .cursosCards {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;

        .card {
            border: 1px solid var(--blue-dark);
            border-radius: .5rem;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
            padding-bottom: 1rem;
            background-color: var(--dark);
            transition: 300ms ease all;

            .cursoPicture {
                width: 100%;
                aspect-ratio: 1/1;
                overflow: hidden;
                transition: 300ms ease all;

                img {
                    width: 100%;
                    display: block;
                    transition: 300ms ease all;
                }
            }

            h4 {
                line-height: var(--fs-h4);
                padding: 0 1rem;
            }

            .progress {
                width: 100%;
                padding: 0 1rem;
                display: flex;
                gap: 1rem;
                color: var(--light);
                font-family: var(--f-body);
                font-size: .75rem;
                align-items: center;

                progress {
                    width: 100%;
                }
            }

            &:hover {
                box-shadow: 0 0 .5rem var(--light);

                .cursoPicture img {
                    transform: scale(1.1) rotate(-3deg);
                }
            }

            .btn {
                display: flex;
                gap: .5rem;

                i {
                    transform: rotate(-45deg);
                }
            }
        }
    }
}

.cursoDetail {
    .topBar {
        width: 100%;
        height: 4rem;
        display: flex;
        gap: 1rem;
        align-items: center;

        .btn {
            width: 2.5rem;
            height: 2.5rem;
        }

        h2 {
            margin-bottom: 0;
        }
    }

    .cursoContent {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 1rem;

        .contentTitle {
            grid-column: span 8;
            grid-row: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .right {
                display: flex;
                align-items: center;
                gap: 0.5rem;

                label {
                    font-family: var(--f-body);
                    color: var(--light);
                }

                input[type="checkbox"] {
                    appearance: none;
                    width: 2.5rem;
                    height: 1.5rem;
                    border-radius: .75rem;
                    border: 2px solid transparent;
                    background-image:
                        linear-gradient(var(--dark), var(--blue-dark)),
                        conic-gradient(var(--warning), var(--success),
                            var(--primary),
                            var(--primary),
                            var(--primary),
                            var(--secondary),
                            var(--secondary),
                            var(--secondary),
                            var(--warning),
                            var(--warning));
                    background-clip: padding-box, border-box;
                    background-origin: padding-box, border-box;
                    position: relative;

                    &::after {
                        content: "\f058";
                        font-family: 'fontawesome';
                        font-size: 1rem;
                        color: var(--gray);
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-100%, -50%);
                        transition: 300ms ease all;
                    }

                    &:checked::after {
                        transform: translate(0%, -50%);
                        color: var(--success);
                    }

                    &:hover {
                        cursor: pointer;
                    }
                }
            }
        }

        .contentLesson {
            grid-column: span 8;
            grid-row: 2;
            display: flex;
            flex-direction: column;
            border-bottom: 1px solid var(--blue-gray);

            .video {
                width: 100%;
                aspect-ratio: 16/9;
                margin-bottom: 1rem;

                iframe {
                    width: 100%;
                    aspect-ratio: 16/9;
                }
            }
        }

        .contentActivity {
            grid-column: span 8;
            grid-row: 3;
            border-bottom: 1px solid var(--blue-gray);
        }

        .comments {
            grid-column: span 8;
            grid-row: 4;

            .comments-list {
                width: 100%;

                .comment-item {
                    display: flex;
                    gap: 1rem;
                    align-items: center;
                    padding: .5rem 0;
                    border-bottom: 1px solid var(--blue-gray);

                    .userAvatar {
                        width: 2.5rem;
                        height: 2.5rem;
                        border-radius: 50%;
                        overflow: hidden;
                        background-color: var(--dark);

                        img {
                            width: 100%;
                            display: block;
                        }
                    }

                    .comment-content {
                        display: flex;
                        flex-direction: column;
                        gap: .5rem;

                        .comment-info {
                            width: 100%;
                            color: #f1f1f1;
                            font-size: .75rem;
                            font-family: var(--f-body);
                            margin: 0;
                            padding: 0;

                            span {
                                color: lightgray;

                                &::before {
                                    content: " em: ";
                                }
                            }
                        }

                        .comment-text {
                            font-size: .875rem;
                            color: var(--light);
                            font-family: var(--f-body);
                        }
                    }
                }
            }

            form {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: .5rem;
                padding-top: 1rem;

                p {
                    width: 100%;
                    margin: 0;
                }

                .userAvatar {
                    width: 3rem;
                    height: 3rem;
                    border-radius: 50%;
                    overflow: hidden;
                    background-color: var(--primary);

                    img {
                        width: 100%;
                        display: block;
                    }
                }

                textarea {
                    flex-grow: 1;
                    height: 3rem;
                    border-radius: .5rem;
                    border: none;
                    padding: .25rem .5rem;
                    resize: none;
                }

                button {
                    border: 1px solid var(--primary);
                    background-color: var(--primary);
                    color: var(--light);
                    height: 3rem;
                    width: fit-content;
                    padding: 1rem;
                    border-radius: .5rem;

                    &:hover {
                        box-shadow: 0 0 .5rem #fafafa;
                        cursor: pointer;
                    }
                }
            }
        }

        .cursoModules {
            grid-column: 9/13;
            grid-row: 1/5;
            background-color: var(--black);
            border: 1px solid var(--dark-gray);
            padding: 1rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            overflow-y: scroll;
            scrollbar-width: thin;
            scrollbar-color: #4a5568 var(--dark);

            /* Customização Webkit (Chrome, Edge, Safari) */
            &::-webkit-scrollbar {
                width: 8px;
            }

            &::-webkit-scrollbar-track {
                background: var(--blue-dark);
                border-radius: 4px;
            }

            &::-webkit-scrollbar-thumb {
                background: var(--blue-dark);
                border-radius: 4px;
            }

            &::-webkit-scrollbar-thumb:hover {
                background: var(--blue-dark);
            }
        }





        .modules {
            width: 100%;
            display: flex;
            flex-direction: column;

            details {
                transition: 300ms ease all;

                summary {
                    width: 100%;
                    height: 3rem;
                    background-color: var(--blue-dark);
                    color: var(--light);
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0.5rem;
                    font-family: var(--f-body);
                    font-size: 1.25rem;

                    &::after {
                        content: "\f107";
                        font-family: 'fontawesome';
                        transition: 300ms ease all;
                    }

                    .disp {
                        font-size: .75rem;
                        color: var(--danger);
                    }
                }

                .evo {
                    width: 100%;
                    height: 1.5rem;
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    padding: 0 .5rem;
                    background-color: var(--blue-dark);

                    label {
                        font-size: .75rem;
                        color: var(--light);
                        font-family: var(--f-body);
                    }

                    progress {
                        flex-grow: 1;
                    }

                }

                ul {
                    display: flex;
                    flex-direction: column;

                    li {
                        list-style-type: none;

                        a {
                            width: 100%;
                            height: 3rem;
                            padding: 0.5rem;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            background-color: var(--gray);
                            color: var(--black);
                            border-bottom: 1px solid var(--dark);

                            &:hover {
                                background-color: var(--blue-light);
                            }

                            i {
                                color: #646464;

                                &.ok {
                                    color: var(--green);
                                }
                            }
                        }
                    }
                }


            }

            details[open] {
                summary {
                    &:after {
                        transform: rotate(180deg);
                        transition: 300ms ease all;
                    }
                }
            }
        }
    }
}



footer {
    width: 100%;
    background-color: var(--black);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: var(--light);

    .credits {
        width: 90rem;

        height: 3rem;
        display: flex;
        align-items: center;
        justify-content: space-between;

        p {
            color: var(--gray);
            margin: 0;
            font-size: .875rem;

            a:link,
            a:visited {
                color: var(--blue-light);
                text-decoration: none;

                &:hover {
                    text-decoration: underline;
                }
            }

            i {
                color: var(--danger);
            }
        }

        p.made::before {
            animation: made;
            animation-duration: 40s;
            animation-timing-function: ease;
            animation-iteration-count: infinite;
            content: "Feito com ";
        }

        p.made::after {
            animation: place;
            animation-duration: 40s;
            animation-timing-function: ease;
            animation-iteration-count: infinite;
            content: " em São Paulo";
        }
    }
}

@keyframes made {
    10% {
        content: "Made with ";
    }

    20% {
        content: "Made with ";
    }

    30% {
        content: "Fatto con ";
    }

    40% {
        content: "Hecho con ";
    }

    50% {
        content: "Dibuat dengan ";
    }

    60% {
        content: "Hecho con ";
    }

    70% {
        content: "Made with ";
    }

    80% {
        content: "Made with ";
    }

    90% {
        content: "Mit ";
    }
}

@keyframes place {
    10% {
        content: " in Sydney";
    }

    20% {
        content: " in San Francisco";
    }

    30% {
        content: " a Roma";
    }

    40% {
        content: " en Madrid";
    }

    50% {
        content: " di Bali";
    }

    60% {
        content: " en Santiago";
    }

    70% {
        content: " in New York";
    }

    80% {
        content: " in London";
    }

    90% {
        content: " gemacht in Berlin";
    }
}

.profile {
    width: 60rem;

    .contents {
        display: flex;
        gap: 1rem;

        .profile-picture {
            width: 20rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;

            .picture,
            .picture-view {
                width: 20rem;
                height: 20rem;
                border-radius: 50%;
                overflow: hidden;
                position: relative;

                img {
                    width: 100%;
                    display: block;
                }
            }

            .picture {
                &:hover {
                    cursor: pointer;
                    transition: 300ms ease all;

                }

                &:hover::after {
                    content: "Alterar Foto";
                    color: var(--light);
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    font-size: 1rem;
                    font-family: var(--f-body);
                    background-color: #00000080;
                    padding: 0.75rem 1rem;
                    border-radius: .5rem;
                    transition: 300ms ease all;
                }
            }

            .info {
                font-size: .75rem;
                text-align: center;
                display: none;
            }

            &:hover {
                .info {

                    display: block;
                }
            }


            input[type="file"] {
                appearance: none;
                display: none;
            }
        }

        .profile-infos {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 1rem;

            fieldset {
                width: 100%;
                border: 1px solid var(--blue-gray);
                border-radius: .5rem;
                padding: 1rem;
                display: flex;
                flex-wrap: wrap;
                gap: 0.5rem;

                legend {
                    color: var(--blue-gray);
                    padding: 0.5rem;
                    font-family: var(--f-body);
                    font-size: .75rem;
                }

                label {
                    width: 100%;
                    color: var(--light);
                    font-family: var(--f-body);
                    font-size: .75rem;
                }

                input {
                    height: 2rem;
                    padding: 0.5rem;
                    border: 1px solid var(--dark);
                    border-radius: .25rem;
                }

                .w100 {
                    width: 100%;
                }

                .address {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    gap: 0.5rem;

                    div {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 0.5rem;

                        label {
                            width: 100%;
                        }

                        .fg1 {
                            flex-grow: 1;
                        }
                    }

                    .cep {
                        grid-row: 1;
                        grid-column: span 3;
                    }

                    .rua {
                        grid-row: 2;
                        grid-column: span 2;
                    }

                    .num {
                        grid-row: 2;
                        grid-column: 3/4;
                    }

                    .compl {
                        grid-row: 3;
                        grid-column: 1/2;
                    }

                    .bairro {
                        grid-row: 3;
                        grid-column: 2/4;
                    }

                    .cidade {
                        grid-row: 4;
                        grid-column: span 2;
                    }

                    .uf {
                        grid-row: 4;
                        grid-column: 3/4;
                    }
                }


                button {
                    height: 2rem;
                    width: fit-content;
                    padding: 0 1rem;
                    border: 1px solid var(--primary);
                    border-radius: .25rem;
                    background-color: var(--primary);
                    color: var(--light);

                    &:hover {
                        box-shadow: 0 0 .5rem #fafafa;
                    }
                }
            }
        }
    }
}

.login {
    height: calc(100dvh - 6rem);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .login-container {
        width: 24rem;
        min-height: 20rem;
        padding: 1rem;
        background-color: var(--blue-dark);

        form {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: .5rem;

            .form-group {
                width: 100%;
                height: 3.5rem;
                position: relative;

                input {
                    width: 100%;
                    height: 2rem;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    padding: 0.5rem;
                    border: 1px solid var(--dark);
                    border-radius: .25rem;
                }

                label {
                    color: gray;
                    font-family: var(--f-body);
                    font-size: .875rem;
                    position: absolute;
                    bottom: .5rem;
                    left: .5rem;
                    z-index: 10;
                    transition: 300ms ease all
                }
            }

            button {
                margin: 1rem auto;
                width: fit-content;
            }

        }

        p {
            text-align: center;
            font-size: .875rem;

            a {
                color: var(--blue-light);

                &:hover {
                    color: var(--warning);
                }
            }
        }
    }
}

.admin-dashboard-container {
    width: 80rem;
    margin: 2rem auto;
    display: grid;
    grid-template-columns: 15rem 1fr;
    gap: 1rem;
    font-family: var(--f-body);

    aside {
        background-color: var(--blue-dark);
        border: 1px solid var(--dark-gray);
        border-radius: 0.5rem;
        padding: 1rem;
        height: fit-content;

        h3 {
            font-size: 1rem;
            color: var(--blue-gray);
            margin-bottom: 1.5rem;
            font-weight: bold;
            border-bottom: 1px solid var(--dark-gray);
            padding-bottom: 0.5rem;
        }

        ul {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 1rem;

            li {
                a {
                    color: var(--light);
                    display: flex;
                    align-items: center;
                    justify-content: start;
                    text-decoration: none;
                    font-size: 0.875rem;
                    width: 100%;
                    border-radius: 0.25rem;
                    transition: all 0.3s ease;
                    gap: 0.5rem;
                    padding: 0.5rem;

                    i {
                        font-size: 1rem;
                        width: 1.25rem;
                        text-align: center;
                        color: var(--blue-gray);
                    }

                    &:hover {
                        background-color: var(--primary);
                        color: var(--white);

                        i {
                            color: var(--white);
                        }
                    }

                    .badge {
                        height: 1.25rem;
                        min-width: 1.25rem;
                        background-color: var(--danger);
                        color: var(--light);
                        border-radius: .625rem;
                        font-size: 0.75rem;
                        font-weight: bold;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        justify-self: flex-end;
                        margin-left: auto;
                    }
                }
            }
        }
    }

    .main-section {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;

        h1 {
            font-size: 1.75rem;
            margin-bottom: 1rem;
        }

        .cards-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;

            .card-metric {
                background-color: var(--blue-dark);
                border: 1px solid var(--dark-gray);
                padding: 1.5rem;
                border-radius: 0.5rem;
                display: flex;
                align-items: center;
                gap: 1rem;

                .metric-icon {
                    width: 3.5rem;
                    height: 3.5rem;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background-color: var(--black);
                    font-size: 1.5rem;

                    &.cursos {
                        color: var(--blue-light);
                    }

                    &.comentarios {
                        color: var(--secondary);
                    }

                    &.alunos {
                        color: var(--green-light);
                    }

                    &.sala-guerra {
                        color: var(--yellow);
                    }

                    &.bonus {
                        color: var(--magenta);
                    }
                }

                .metric-info {
                    display: flex;
                    flex-direction: column;

                    .metric-val {
                        font-size: 1.75rem;
                        font-weight: bold;
                        color: var(--white);
                        line-height: 1;
                    }

                    .metric-label {
                        color: var(--gray);
                        font-size: 0.75rem;
                        margin-top: 0.25rem;
                    }
                }
            }
        }
    }
}

/* Table Layout for Admin Lists */
.admin-table-container {
    width: 60rem;
    margin: 2rem auto;
    background-color: var(--blue-dark);
    border: 1px solid var(--dark-gray);
    border-radius: 0.5rem;
    padding: 1.5rem;
    font-family: var(--f-body);

    .table-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;

        h1 {
            font-size: 1.75rem;
            margin: 0;
        }
    }

    .search-wrapper {
        margin-bottom: 1.5rem;
        position: relative;

        input {
            width: 100%;
            height: 2.5rem;
            padding: 0 1rem;
            padding-left: 2.5rem;
            border-radius: 0.25rem;
            border: 1px solid var(--dark-gray);
            background-color: var(--black);
            color: var(--light);
            font-family: var(--f-body);

            &:focus {
                border-color: var(--primary);
                outline: none;
                box-shadow: 0 0 5px var(--primary-glow);
            }
        }

        i {
            position: absolute;
            left: 0.875rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--blue-gray);
        }
    }

    table {
        width: 100%;
        border-collapse: collapse;
        text-align: left;
        margin-bottom: 1.5rem;

        th,
        td {
            padding: 1rem;
            border-bottom: 1px solid var(--dark-gray);
            font-size: 0.875rem;
            vertical-align: middle;
        }

        th {
            color: var(--blue-gray);
            font-weight: bold;
            text-transform: uppercase;
            font-size: 0.75rem;
            letter-spacing: 0.05em;
        }

        td {
            color: var(--light);
        }

        tr:hover td {
            background-color: rgba(255, 255, 255, 0.02);
        }

        .userAvatar {
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 50%;
            overflow: hidden;
            background-color: var(--dark);
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                width: 100%;
                display: block;
            }
        }
    }



    /* Pagination */
    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        margin-top: 1.5rem;

        .page-link {
            padding: 0.5rem 0.75rem;
            border-radius: 0.25rem;
            background-color: var(--black);
            border: 1px solid var(--dark-gray);
            color: var(--light);
            text-decoration: none;
            font-size: 0.875rem;
            cursor: pointer;
            transition: all 0.3s ease;

            &:hover,
            &.active {
                background-color: var(--primary);
                color: var(--white);
                border-color: var(--primary);
            }

            &.disabled {
                opacity: 0.5;
                pointer-events: none;
            }
        }
    }
}

/* Custom slider-like checkboxes for Admin Panel and Profile views */
.admin-table-container input[type="checkbox"],
.profile input[type="checkbox"] {
    appearance: none;
    width: 2.5rem;
    height: 1.5rem;
    border-radius: .75rem;
    border: 2px solid transparent;
    background-image:
        linear-gradient(var(--dark), var(--blue-dark)),
        conic-gradient(var(--warning), var(--success),
            var(--primary),
            var(--primary),
            var(--primary),
            var(--secondary),
            var(--secondary),
            var(--secondary),
            var(--warning),
            var(--warning));
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    position: relative;
    display: inline-block;
    cursor: pointer;
    flex-shrink: 0;

    &::after {
        content: "\f058";
        font-family: 'fontawesome';
        font-size: 1rem;
        color: var(--gray);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-100%, -50%);
        transition: 300ms ease all;
    }

    &:checked::after {
        transform: translate(0%, -50%);
        color: var(--success);
    }
}