.team-crest { width: 44px; height: 44px; flex: 0 0 44px; object-fit: contain; }
.team-crest-lg { width: 96px; height: 96px; object-fit: contain; }
.metric-icon { width: 48px; height: 48px; flex: 0 0 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: .25rem !important; }
.football-icon {
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.75rem;
}

.football-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 2rem 0;
    position: relative;
    background: linear-gradient(135deg, #eef1f7 0%, #f3f3f9 48%, #e7ecf4 100%);
}
.football-auth-overlay { position: absolute; inset: 0; opacity: .45; background-image: radial-gradient(rgba(64,81,137,.15) 1px, transparent 1px); background-size: 24px 24px; }
.football-auth-brand {
    min-height: 510px;
    background-image:
        linear-gradient(180deg, rgba(3, 12, 22, .38), rgba(3, 12, 22, .8)),
        url('../images/login-background.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.football-auth .form-label { color: #495057; font-size: .8125rem; font-weight: 500; }
.football-auth .form-control { min-height: 42px; font-size: .875rem; }
.football-auth .form-control:focus { border-color: #a6b0cf; box-shadow: 0 0 0 .2rem rgba(64,81,137,.12); }
.football-auth-card { border: 0; border-radius: .25rem; box-shadow: 0 5px 10px rgba(30,32,37,.12); }
.football-error-card { width: min(620px, calc(100vw - 2rem)); }
.table thead,
.table thead.table-light {
    --vz-table-bg: var(--vz-primary);
    --vz-table-color: #fff;
    --vz-table-border-color: rgba(255, 255, 255, .2);
}

.table thead th,
.table thead.table-light th {
    background-color: var(--vz-primary) !important;
    border-color: rgba(255, 255, 255, .2) !important;
    color: #fff !important;
}

.table thead th.table-sortable {
    cursor: pointer;
    padding-right: 2rem;
    position: relative;
    user-select: none;
}

.table thead th.table-sortable:focus-visible {
    box-shadow: inset 0 0 0 2px #fff;
    outline: 0;
}

.table-sort-indicator {
    font-size: 1rem;
    opacity: .7;
    position: absolute;
    right: .65rem;
    top: 50%;
    transform: translateY(-50%);
}

.table thead th[aria-sort="ascending"] .table-sort-indicator,
.table thead th[aria-sort="descending"] .table-sort-indicator {
    opacity: 1;
}
