:root {
    --babypink: #fba7e2;
    --lightblue: #6ba8b2;
    --lightGrayBg: #fafafa;
    --grayBg: #EBEBEB;
    --lightTxt: #3C4858;
    --lightGrayTxt: #999999;
    --boxShadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Sidebar */

.sidebar {
    width: 15%;
}

.menuItem {
    justify-content: center;
}

.menuItemLogo {
    width: 25px;
}

.menuItemTitle {
    display: none;
}

.bottomMenu a {
    display: none;
}

.loggedInImg:hover {
    cursor: pointer
}

.loggedInUser {
    display: none;
}

/* Dashboard */

.dashboardTopRow {
    flex-direction: column;
    margin: 10px 0 10px 5%;
}

.dashboardTopItem {
    width: 90%;
    margin: 15px 0;
}

.privacyStatement {
    padding-left: 70px;
    bottom: 8px;
}

/* Media Index */

/* Page Layout - Stacks Elements for Mobile */
.pageRow {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px;
    width: 100%;
}

/* Buttons & Inputs - Full Width for Better Accessibility */
.hrefBtn {
    display: block;
    padding: 12px;
    border: none;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    width: 100%;
    transition: background 0.3s ease;
}

input, select, button {
    padding: 10px;
    font-size: 16px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.pageTitle {
    margin: 10px 0;
}

/* Make sure buttons stay visible and stacked properly */
.pageLeftBtns, .pageRightBtns {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin: 10px 0;
}

.pageLeftBtns a, .pageRightBtns a {
    margin: 0;
}

/* Buttons are now always visible */
.pageRightBtns {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.pageRightBtns a {
    margin: 0;
}

/* Input and Form Adjustments */
input, select {
    padding: 10px;
    font-size: 16px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid #ccc;
}

/* Users */

/* Table Styles */
.usersTable {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
}

    /* Hide Table Headers on Mobile */
    .usersTable thead {
        display: none;
    }

    /* Mobile-First Table Rows */
    .usersTable tbody {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

        .usersTable tbody tr {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding: 15px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .usersTable tbody tr:hover {
            color: black;
            background-color: transparent;
        }

        /* Mobile-Optimized Table Cells */
        .usersTable tbody td {
            display: flex;
            align-items: center;
            width: 100%;
            padding: 5px 0;
            font-size: 14px;
        }

            /* Convert Table Headers into Labels on Mobile */
            .usersTable tbody td::before {
                content: attr(data-label);
                font-weight: bold;
                margin-right: auto;
            }

/* User Options Icons */
.usersOptions {
    display: flex;
    justify-content: center;
    width: 100%;
}

    .usersOptions a {
        font-size: 18px;
        margin: 0 5px;
        text-decoration: none;
    }

/* Screens */

.screensDiv {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}