/* ═══════════════════════════════════════════════════════════════
   Network Monitor v5.0 — Tables CSS
   Data tables, filters, sorting
   ═══════════════════════════════════════════════════════════════ */

/* ── Table Wrapper ── */
.tw, .tW {
    background: var(--b1);
    border: 1px solid var(--br0);
    border-radius: var(--r);
    overflow: hidden;
}

/* ── Table Scroll ── */
.ts {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 520px;
}

/* ── Table ── */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10px;
}

thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 8px 10px;
    text-align: left;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--t3);
    background: var(--b2);
    border-bottom: 1px solid var(--br0);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: color var(--transition);
}

thead th:hover {
    color: var(--t1);
}

thead th::after {
    content: '';
    display: inline-block;
    width: 0;
    margin-left: 4px;
    vertical-align: middle;
    opacity: 0;
    transition: opacity var(--transition);
}

thead th.asc::after {
    content: '\25B2';
    opacity: .6;
    font-size: 7px;
}

thead th.desc::after {
    content: '\25BC';
    opacity: .6;
    font-size: 7px;
}

tbody td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--br0);
    color: var(--t1);
    font-family: var(--m);
    font-size: 10px;
    white-space: nowrap;
    vertical-align: middle;
}

tbody tr {
    transition: background var(--transition);
}

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

tbody tr:last-child td {
    border-bottom: none;
}

/* ── Risky Row ── */
tbody tr.rk {
    background: var(--rd);
    border-left: 2px solid var(--red);
}

tbody tr.rk:hover {
    background: rgba(244, 63, 94, .12);
}

tbody tr.rk td:first-child {
    padding-left: 8px;
}

/* ── Filter Bar ── */
.fb {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--b2);
    border-bottom: 1px solid var(--br0);
    flex-wrap: wrap;
}

.fb select {
    padding: 5px 24px 5px 8px;
    border-radius: var(--rs);
    border: 1px solid var(--br0);
    background: var(--b3);
    color: var(--t1);
    font-family: var(--f);
    font-size: 10px;
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238b9bb4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: border-color var(--transition);
}

.fb select:focus {
    border-color: var(--blue);
}

.fb input {
    padding: 5px 10px;
    border-radius: var(--rs);
    border: 1px solid var(--br0);
    background: var(--b3);
    color: var(--t1);
    font-family: var(--f);
    font-size: 10px;
    outline: none;
    flex: 1;
    min-width: 120px;
    transition: border-color var(--transition);
}

.fb input:focus {
    border-color: var(--blue);
}

.fb input::placeholder {
    color: var(--t3);
}

.fb .inf {
    font-size: 9px;
    color: var(--t3);
    margin-left: auto;
    white-space: nowrap;
}

/* ── Risky Toggle Button ── */
.bt {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: var(--rs);
    border: 1px solid var(--br0);
    background: var(--b3);
    color: var(--t2);
    font-family: var(--f);
    font-size: 9px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
}

.bt:hover {
    border-color: var(--br2);
}

.bt.on {
    border-color: var(--red);
    background: var(--rd);
    color: var(--red);
}

/* ── Standalone Filter Input ── */
.fi {
    padding: 5px 10px;
    border-radius: var(--rs);
    border: 1px solid var(--br0);
    background: var(--b3);
    color: var(--t1);
    font-family: var(--f);
    font-size: 10px;
    outline: none;
    transition: border-color var(--transition);
}
.fi:focus { border-color: var(--blue); }
.fi::placeholder { color: var(--t3); }

/* ── General Info Label ── */
.inf {
    font-size: 9px;
    color: var(--t3);
    white-space: nowrap;
}

/* ── Users Table ── */
.users-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10px;
}

.users-table thead th {
    padding: 8px 12px;
    text-align: left;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--t3);
    background: var(--b2);
    border-bottom: 1px solid var(--br0);
}

.users-table tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--br0);
    color: var(--t1);
    font-size: 10px;
    vertical-align: middle;
}

.users-table tbody tr:hover {
    background: var(--bh);
}

.users-table tbody tr:last-child td {
    border-bottom: none;
}