/* Common Table Styles - Applied to all tables */

/* Table container */
.accounts-table-container,
.users-table-container,
.servers-table-container,
.admin-table-container {
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

/* Table base styles */
.accounts-table,
.users-table,
.servers-table,
.admin-table {
    width: 100%;
    border-collapse: collapse;
}

/* Table header */
.accounts-table thead,
.users-table thead,
.servers-table thead,
.admin-table thead {
    background: #000000;
    color: white;
}

.accounts-table th,
.users-table th,
.servers-table th,
.admin-table th {
    padding: 5px 6px;
    text-align: left;
    font-weight: 600;
    font-size: 0.8em; /* Fixed header size for all platforms */
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.accounts-table th:first-child,
.users-table th:first-child,
.servers-table th:first-child,
.admin-table th:first-child {
    padding-left: 12px;
}

/* Table body */
.accounts-table tbody tr,
.users-table tbody tr,
.servers-table tbody tr,
.admin-table tbody tr {
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s;
    cursor: pointer;
}

.accounts-table tbody tr:hover,
.users-table tbody tr:hover,
.servers-table tbody tr:hover,
.admin-table tbody tr:hover {
    background-color: #fffde7;
}

.accounts-table td,
.users-table td,
.servers-table td,
.admin-table td {
    padding: 4px 6px;
    font-size: 1.425em; /* Default for mobile/tablet - will be overridden by JavaScript for desktop */
    white-space: nowrap;
}

.accounts-table td:first-child,
.users-table td:first-child,
.servers-table td:first-child,
.admin-table td:first-child {
    padding-left: 12px;
    font-weight: 600;
    color: #333;
}

/* Utility classes */
.positive {
    color: #00b894;
    font-weight: 600;
}

.negative {
    color: #d63031;
    font-weight: 600;
}

.neutral {
    color: #666;
}

/* Responsive table */
@media screen and (max-width: 1200px) {
    .accounts-table,
    .users-table,
    .servers-table,
    .admin-table {
        font-size: 0.9em;
    }

    /* Keep the same padding as desktop for wide row spacing */
}

@media screen and (max-width: 768px) {
    .accounts-table-container,
    .users-table-container,
    .servers-table-container,
    .admin-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 10px;
    }

    .accounts-table,
    .users-table,
    .servers-table,
    .admin-table {
        min-width: 100%;
        font-size: 0.75em;
        display: table;
    }

    /* Keep the same padding as desktop (20px 6px) for wide row spacing on mobile */
    /* Font size is controlled by JavaScript, not overridden here */

    .accounts-table th:first-child,
    .users-table th:first-child,
    .servers-table th:first-child,
    .admin-table th:first-child,
    .accounts-table td:first-child,
    .users-table td:first-child,
    .servers-table td:first-child,
    .admin-table td:first-child {
        padding-left: 6px;
        /* Removed sticky positioning as requested */
        /* position: sticky; */
        /* left: 0; */
        /* background: white; */
        /* z-index: 1; */
    }

    .accounts-table thead th:first-child,
    .users-table thead th:first-child,
    .servers-table thead th:first-child,
    .admin-table thead th:first-child {
        background: #000000;
    }

    .accounts-table tbody tr:hover td:first-child,
    .users-table tbody tr:hover td:first-child,
    .servers-table tbody tr:hover td:first-child,
    .admin-table tbody tr:hover td:first-child {
        background-color: #fffde7;
    }
}

/* Force inputs and selects inside tables to inherit font-size to prevent JS compounding */
table input,
table select,
.broker-table input,
.broker-table select,
.accounts-table input,
.accounts-table select {
    font-size: inherit !important;
    font-family: inherit;
    height: auto;
    padding: 2px 4px;
}