/* ============================================================
   Tables, Badges, Pagination
   Per design guidelines: dense but readable
   ============================================================ */

/* --- Tables --- */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
    border-collapse: collapse;
}

thead th {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    text-align: left;
    padding: 10px 12px;
    border-bottom: 2px solid var(--border-default);
    background: var(--bg-subtle);
}

tbody td {
    font-size: 13px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-default);
    color: var(--text-primary);
}

tbody tr {
    transition: background var(--duration-fast) var(--ease-out);
}

tbody tr:hover {
    background: var(--bg-subtle);
}

/* --- Badges & Tags --- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: var(--radius-sm);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.badge-active {
    background: var(--status-green-bg);
    color: var(--status-green);
}

.badge-disabled {
    background: var(--bg-subtle);
    color: var(--text-muted);
}

.badge-tcp {
    background: var(--status-pending-bg);
    color: var(--status-pending);
}

.badge-udp {
    background: var(--status-amber-bg);
    color: var(--status-amber);
}

.badge-tls {
    background: var(--status-green-bg);
    color: var(--status-green);
}

.badge-admin {
    background: var(--status-maint-bg);
    color: var(--status-maint);
}

.badge-user {
    background: var(--status-pending-bg);
    color: var(--status-pending);
}

/* --- Actions cell --- */
.actions-cell {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: nowrap;
}

/* --- Pagination --- */
.pagination {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-lg);
    flex-wrap: wrap;
}

/* --- Responsive Tables --- */
@media (max-width: 768px) {
    .table-wrapper {
        margin: 0 -1px;
    }

    .table-wrapper table {
        min-width: 580px;
    }

    thead th {
        font-size: 10px;
        padding: 8px;
    }

    tbody td {
        font-size: 12px;
        padding: 8px;
    }

    .badge {
        font-size: 10px;
        padding: 1px 5px;
    }
}

@media (max-width: 480px) {
    .table-wrapper table {
        min-width: 500px;
    }

    thead th {
        padding: 6px;
    }

    tbody td {
        padding: 6px;
    }
}