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


:root {
   --primary-color: #007bff;
   --background-color: #ffffff
   --text-color: #000000;
   --alt-text-color: #ffffff;
   --header-color: #007bff;
   --header-hover-color: #2c92ff;
   --table-hover-bg: #f5f5f5;
   --even-row-bg: #f2f2f2;
   --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}


.dark-mode {
    --primary-color: #61dafb;
    --background-color: #1e1e1e;
    --text-color: #e0e0e0;
    --alt-text-color: #e0e0e0;
    --header-color: #333333;
    --header-hover-color: #444444;
    --table-hover-bg: #464646;
    --even-row-bg: #2e2e2e;
    --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
 }



html {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: Roboto, sans-serif;
    padding: 20px;
    background-color: var(--background-color);
    color: var(--text-color);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto;
}

.container {
    width: 1000px;
    height: 600px;
    position: relative;
    top: -25px;

}


.h1 {
    margin-bottom: 10px;
}


.spinner i {
    position: absolute;
    top: 45%;
    left: 48%;
    font-size: 2rem;
    color: var(--primary-color);
}

/* Table */

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    box-shadow: var(--box-shadow);
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 20px;
}


th, td {
    padding: 12px;
    text-align: left;
}

th {
    background-color: var(--header-color);
    color: var(--alt-text-color);
}


th:hover {
    background-color: var(--header-hover-color);
}


td {
    font-size: 0.9rem;
}

.name-column,
.username-column,
.country-column {
    width: 200px;
}


tr:not(:last-child) {
    border-bottom: 1px solid #e0e0e0;
}


tr:hover {
    background-color: var(--table-hover-bg);
}



/* Pagination */
.pagination {
    text-align: center;
    height: 55px;
}

.pagination button {
    background-color: transparent;
    border: none;
    padding: 10px;
    cursor: pointer;
    color: var(--primary-color);
}


.pagination button:disabled {
    color: #ccc;
    cursor: default;
}
 
.pagination i {
    font-size: 1.1rem;
}


.pagination span {
    font-size: 1rem;
    cursor: default;
    margin: 0 10px;
}


.theme-toggle {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 1rem;
    color: var(--primary-color);
    cursor: pointer;
    transition: color 0.3s;
}


.theme-toggle:hover {
    color: var(--text-color);
}

/* Responsive Table of Mobile */
@media (max-width: 1000px) {
    body {
        overflow: auto;
        align-items: flex-start;
        padding-top: 50px;
    }
    table,
    thead,
    tbody,
    th,
    td,
    tr {
        display: block;
    }

    thead tr {
        display: none;
    }

    tr:nth-child(even) {
        background-color:  var(--even-row-bg);
    }

    tr:nth-child(even):hover {
        background-color:  var(--table-hover-bg);
    }

    td {
        position: relative;
        padding-left: 100px;
        text-align: right;
    }

    td:not(:last-of-type) {
        border-bottom: 1px solid #e0e0e0;
    }

    td::before {
        content: attr(data-label);
        position: absolute;
        left: 15px;
        font-weight: bold;
    }
}