/* ==========================================================================
   TABLE STYLES
   APM IT Manager Dashboard
   Light "banking style" table — hairline borders, no zebra striping,
   tabular numerals, flat status chips.
   ========================================================================== */

.table-section {
    width: 100%;
}

.table-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.table-card-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--color-border);
}

.table-card-header h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text-main);
}

.table-responsive {
    overflow-x: auto;
}

.team-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
    font-variant-numeric: tabular-nums;
}

.team-table thead th {
    text-align: left;
    padding: 12px 24px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
    background: #f8fafc;
    border-bottom: 1px solid var(--color-border);
}

.team-table tbody td {
    padding: 13px 24px;
    font-size: 0.88rem;
    color: var(--color-text-main);
    border-bottom: 1px solid var(--color-border);
}

.team-table tbody tr {
    transition: background 0.15s ease;
}

.team-table tbody tr:hover {
    background: #f8fafc;
}

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

.engineer-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.engineer-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-blue-accent), var(--color-primary-dark));
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* Status badges */
.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-badge.active {
    background: #ecfdf5;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.status-badge.away {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}

.status-badge.offline {
    background: #f1f5f9;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

/* Utilization mini progress bar */
.utilization-bar {
    position: relative;
    width: 100px;
    height: 8px;
    border-radius: 999px;
    background: #f1f5f9;
    overflow: hidden;
}

.utilization-bar-fill {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-blue-accent), var(--color-primary));
}