/* Table Styles */
.booking-dashboard-table {
    width: 100%;
    border-collapse: collapse;
    margin: 50px auto;
    font-size: 14px;
}
.booking-dashboard-table th, .booking-dashboard-table td {
    padding: 12px 15px;
    border: 1px solid #ddd;
    text-align: center;
}
.booking-dashboard-table th {
    background-color: #f4f4f4;
    font-weight: bold;
    color: #333;
}
.booking-dashboard-table tr:nth-child(even) {
    background-color: #f9f9f9;
}
.booking-dashboard-column-title {
    font-weight: bold;
    text-align: left;
    background-color: #f4f4f4;
}
.buddyc-dashboard-item {
    font-weight: normal;
    color: #333;
}

/* Charts row */
.charts-row {
    display: flex;
    width: 100%; /* Full width of the container */
    flex-wrap: wrap; /* Allows containers to wrap onto new lines */
    gap: 10px; /* Space between containers */
    justify-content: center; /* Center the items horizontally */
}

/* Chart container */
.chart-container {
    box-sizing: border-box; /* Ensures padding and borders are included in the width/height */
    flex: 1 1 calc(33.333% - 20px); /* Default width for most items */
    min-width: 300px; /* Minimum width to allow responsive behavior */
    display: flex; /* Use flexbox layout */
    flex-direction: column; /* Stack child elements vertically */
    align-items: center; /* Center content horizontally */
    position: relative; /* Ensure correct positioning for child elements */
}

/* Adjust width for taller containers */
.chart-container.pie {
    flex: 1 1 calc(25% - 400px); /* Reduce width for taller items */
    min-width: 250px; /* Adjust minimum width for responsiveness */
}

/* Adjust width for last container on each row */
.chart-container:last-child {
    margin-right: 0; /* Remove right margin for the last container */
}

/* Specific styling for tall items */
.buddyc-canvas {
    width: 100%; /* Make canvas take full width of its container */
    height: 100%; /* Make canvas take full height of its container */
    object-fit: contain; /* Adjusts the canvas size to fit its container */
}

.buddyc-chart {
    margin: 20px 10px;
    height: 100%;
}

.buddyc-chart h3 {
    margin-left: 20px;
}

/* Add max-height check to identify "tall" items */
@media (min-height: 600px) {
    .chart-container.tall-item {
        flex: 1 1 calc(25% - 20px); /* Narrower width for taller items */
    }
}

/* Key Metric Styling */
.buddyc-dashboard-key-metric {
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center items horizontally */
    padding: 10px; /* Space inside the container */
    margin: 20px auto; /* Space outside the container */
    margin-bottom: 50px;
    border: 1px solid #ddd; /* Light border around the container */
    border-radius: 5px; /* Rounded corners */
    background-color: #f9f9f9; /* Light background color */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    font-size: 16px; /* Font size for the text */
    font-weight: bold; /* Make the text bold */
    color: #333; /* Text color */
    width: 75%;
}

.buddyc-dashboard-key-metric span {
    display: block; /* Make the span take full width */
}

.buddyc-overview-content {
    max-width: 800px;
    margin: auto;
}