.chart-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.chart-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow-x: auto;
}

/* D3 Chart specific styles */
.axis path,
.axis line {
    fill: none;
    stroke: #333;
    shape-rendering: crispEdges;
}

.axis text {
    font-size: 11px;
}

.gridline {
    stroke: lightgrey;
    stroke-opacity: 0.7;
    shape-rendering: crispEdges;
}

.bar-label {
    font-size: 10px;
    text-anchor: start;
}

.chart-title {
    font-size: 1.5em;
    font-weight: bold;
    text-anchor: middle;
}
 /* Table styles */
.styled-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 11px;
}
.styled-table th, .styled-table td {
    border: 1px solid #ddd;
    padding: 6px;
    text-align: center;
}
.styled-table th {
    background-color: #a0dce8;
    color: black;
    font-size: 12px;
}
.styled-table td {
    background-color: #f0f8ff;
}
.win-highlight {
    background-color: #d4edda !important; /* Light green for win */
}
.styled-table .team-cell {
    color: white;
    font-weight: bold;
}