/* ========================================
RESPONSIVE PERFORMANCE TABLE STYLES
Mobile: LatestResults1.jsx (card layout)
Desktop: LatestResults5.jsx (table layout)
======================================== */
/* Platform Icons */
.sp-player-platform-icon {
display: inline-block;
width: 16px;
height: 16px;
vertical-align: middle;
margin-right: 6px;
}
/* Performance Stat Icons with Multipliers */
.sp-performance-stat-icon {
display: inline-block;
vertical-align: middle;
width: 18px;
height: 18px;
}
.sp-performance-stat-multiplier {
font-size: 0.875em;
font-weight: 600;
margin-left: 2px;
}
/* ========================================
MOBILE STYLES (= 768px)
Table layout from LatestResults5.jsx
======================================== */
@media (min-width: 768px) {
/* Table wrapper with rounded corners */
.sp-table-wrapper {
border-radius: 24px;
overflow: hidden;
background: #f5f5f5;
}
.table-responsive {
border-radius: 24px;
overflow-x: auto;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.1);
}
/* Enhanced table styling */
.sp-event-performance {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 14px;
margin: 0;
background: #f5f5f5;
}
/* Table header styling - like LatestResults5 */
.sp-event-performance thead {
background: #f5f5f5;
}
.sp-event-performance thead th {
padding: 14px 12px;
font-weight: 600;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
text-align: left;
border: none;
color: #333;
white-space: nowrap;
}
.sp-event-performance thead th.data-number {
text-align: center;
width: 50px;
padding-left: 24px;
}
.sp-event-performance thead th.data-name {
min-width: 180px;
}
/* Center align stat columns */
.sp-event-performance thead th[class^="data-"]:not(.data-number):not(.data-name):not(.data-position) {
text-align: center;
}
/* Table body styling */
.sp-event-performance tbody {
background: #fff;
}
.sp-event-performance tbody tr {
border-bottom: 1px solid #f0f0f0;
background: #fff;
}
/* First row rounded corners */
.sp-event-performance tbody tr:first-child td:first-child {
border-top-left-radius: 24px;
}
.sp-event-performance tbody tr:first-child td:last-child {
border-top-right-radius: 24px;
}
.sp-event-performance tbody tr:hover {
background-color: #fafafa;
}
.sp-event-performance tbody td {
padding: 14px 12px;
vertical-align: middle;
border: none;
background: #fff;
}
.sp-event-performance tbody td.data-number {
text-align: center;
font-weight: 700;
opacity: 0.6;
font-size: 13px;
padding-left: 24px;
}
.sp-event-performance tbody td.data-name {
font-weight: 600;
min-width: 180px;
white-space: nowrap;
}
.sp-event-performance tbody td.data-position {
font-size: 13px;
opacity: 0.7;
min-width: 100px;
}
/* Center align stat cells */
.sp-event-performance tbody td[class^="data-"]:not(.data-name):not(.data-position):not(.data-number) {
text-align: center;
}
/* Table footer styling */
.sp-event-performance tfoot {
background: #f9f9f9;
border-top: 2px solid #e0e0e0;
}
.sp-event-performance tfoot td {
padding: 14px 12px;
font-weight: 700;
border: none;
}
/* Hover effect on stats */
.sp-event-performance tbody tr:hover td {
background-color: #fafafa;
}
}
/* ========================================
COMMON STYLES (All Breakpoints)
======================================== */
/* Substitution indicators */
.sub-in, .sub-out {
display: inline-block;
padding: 2px 6px;
font-size: 11px;
border-radius: 3px;
margin-left: 6px;
font-weight: 600;
}
.sub-in {
background-color: #4caf50;
color: white;
}
.sub-out {
background-color: #f44336;
color: white;
}
/* Star ratings */
.sp-event-stars {
margin-left: 6px;
}
.sp-event-star {
color: #ffc107;
font-size: 14px;
}
/* Checkbox styling */
.sp-checkbox {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid #4caf50;
border-radius: 3px;
background-color: #4caf50;
position: relative;
}
.sp-checkbox::after {
content: '✓';
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
font-weight: bold;
}
/* Small position text for icons mode */
.sp-player-position {
font-size: 12px;
opacity: 0.6;
font-weight: normal;
margin-left: 6px;
}
/* ========================================
RESPONSIVE PERFORMANCE TABLE STYLES
Mobile: LatestResults1.jsx (card layout)
Desktop: LatestResults5.jsx (table layout)
======================================== */
/* Platform Icons */
.sp-player-platform-icon {
display: inline-block;
width: 16px;
height: 16px;
vertical-align: middle;
margin-right: 6px;
}
/* Performance Stat Icons with Multipliers */
.sp-performance-stat-icon {
display: inline-block;
vertical-align: middle;
width: 18px;
height: 18px;
}
.sp-performance-stat-multiplier {
font-size: 0.875em;
font-weight: 600;
margin-left: 2px;
}
/* ========================================
MOBILE STYLES (= 768px)
Table layout from LatestResults5.jsx
======================================== */
@media (min-width: 768px) {
/* Table wrapper with rounded corners */
.sp-table-wrapper {
border-radius: 24px;
overflow: hidden;
background: #f5f5f5;
}
.table-responsive {
border-radius: 24px;
overflow-x: auto;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.1);
}
/* Enhanced table styling */
.sp-event-performance {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 14px;
margin: 0;
background: #f5f5f5;
}
/* Table header styling - like LatestResults5 */
.sp-event-performance thead {
background: #f5f5f5;
}
.sp-event-performance thead th {
padding: 14px 12px;
font-weight: 600;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
text-align: left;
border: none;
color: #333;
white-space: nowrap;
}
.sp-event-performance thead th.data-number {
text-align: center;
width: 50px;
padding-left: 24px;
}
.sp-event-performance thead th.data-name {
min-width: 180px;
}
/* Center align stat columns */
.sp-event-performance thead th[class^="data-"]:not(.data-number):not(.data-name):not(.data-position) {
text-align: center;
}
/* Table body styling */
.sp-event-performance tbody {
background: #fff;
}
.sp-event-performance tbody tr {
border-bottom: 1px solid #f0f0f0;
background: #fff;
}
/* First row rounded corners */
.sp-event-performance tbody tr:first-child td:first-child {
border-top-left-radius: 24px;
}
.sp-event-performance tbody tr:first-child td:last-child {
border-top-right-radius: 24px;
}
.sp-event-performance tbody tr:hover {
background-color: #fafafa;
}
.sp-event-performance tbody td {
padding: 14px 12px;
vertical-align: middle;
border: none;
background: #fff;
}
.sp-event-performance tbody td.data-number {
text-align: center;
font-weight: 700;
opacity: 0.6;
font-size: 13px;
padding-left: 24px;
}
.sp-event-performance tbody td.data-name {
font-weight: 600;
min-width: 180px;
white-space: nowrap;
}
.sp-event-performance tbody td.data-position {
font-size: 13px;
opacity: 0.7;
min-width: 100px;
}
/* Center align stat cells */
.sp-event-performance tbody td[class^="data-"]:not(.data-name):not(.data-position):not(.data-number) {
text-align: center;
}
/* Table footer styling */
.sp-event-performance tfoot {
background: #f9f9f9;
border-top: 2px solid #e0e0e0;
}
.sp-event-performance tfoot td {
padding: 14px 12px;
font-weight: 700;
border: none;
}
/* Hover effect on stats */
.sp-event-performance tbody tr:hover td {
background-color: #fafafa;
}
}
/* ========================================
COMMON STYLES (All Breakpoints)
======================================== */
/* Substitution indicators */
.sub-in, .sub-out {
display: inline-block;
padding: 2px 6px;
font-size: 11px;
border-radius: 3px;
margin-left: 6px;
font-weight: 600;
}
.sub-in {
background-color: #4caf50;
color: white;
}
.sub-out {
background-color: #f44336;
color: white;
}
/* Star ratings */
.sp-event-stars {
margin-left: 6px;
}
.sp-event-star {
color: #ffc107;
font-size: 14px;
}
/* Checkbox styling */
.sp-checkbox {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid #4caf50;
border-radius: 3px;
background-color: #4caf50;
position: relative;
}
.sp-checkbox::after {
content: '✓';
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
font-weight: bold;
}
/* Small position text for icons mode */
.sp-player-position {
font-size: 12px;
opacity: 0.6;
font-weight: normal;
margin-left: 6px;
}
Match Stats
Match Played
Possession Won
Goals
Assists
Saves
Clean Sheet
Match Rating
Man of The Match
Red Cards
Tackles Won
Interceptions
Shots On Target
Key Passes
| 12 | 11 |
| 5 | 34 |
| 0 | 1 |
| 0 | 2 |
| 0 | 0 |
| 1 | 6 |
| 0 | 0 |
| 0 | 1 |
| 0 | 0 |
| 5 | 15 |
| 0 | 21 |
| 0 | 2 |
| 0 | 5 |
Details
| Date | Time | League | Season | Match Day | Full Time |
|---|---|---|---|---|---|
| March 20, 2025 | 9:30 PM | ACL Division 1 East | D1 East – Season 44 | Match Day 19 | 90' |


MEX_Huber
Siica x
Nv_Zay