.left-pane {
    padding: 20px;
    position: relative;
    background-color: #fff; /* Light mode background */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow-y: scroll;  /* Allows scrolling */
    scrollbar-width: none;  /* For Firefox */
    transition: background-color 0.3s, color 0.3s;
}

/* Dark Mode Overrides */
[data-theme="dark"] .left-pane {
    background-color: #2f2f2f; /* Dark background */
    color: #ffffff; /* White text */
}


/* Dashboard Grid Layout */
.dashboard {
    display: grid;
    grid-template-rows: auto auto auto auto;
    grid-template-columns: auto auto auto auto auto auto;
    grid-template-areas:
        /* 'Header Header Header Header Header Header' */
        'MonitoredDevices MonitoredDevices StatusPercentage StatusPercentage DeviceNumber DeviceNumber'
        'StatusPie StatusPie StatusPie NetworkPie NetworkPie NetworkPie'
        'DeviceTypePie DeviceTypePie DeviceTypePie DeviceTypePie DeviceTypePie DeviceTypePie';
    gap: 20px;
    height: 100%;
    transition: background-color 0.3s, color 0.3s;
}

/* Responsive grid layout for smaller screens */
@media (max-width: 1200px) {
    .dashboard {
        grid-template-columns: 1fr 1fr 1fr; /* Switch to 3 columns */
        grid-template-areas:
            'Header Header Header'
            'MonitoredDevices MonitoredDevices StatusPercentage'
            'DeviceNumber DeviceNumber StatusPie'
            'NetworkPie NetworkPie DeviceTypePie';
    }
}

@media (max-width: 768px) {
    .dashboard {
        grid-template-columns: 1fr 1fr; /* Switch to 2 columns */
        grid-template-areas:
            'Header Header'
            'MonitoredDevices MonitoredDevices'
            'StatusPercentage StatusPercentage'
            'DeviceNumber DeviceNumber'
            'StatusPie StatusPie'
            'NetworkPie NetworkPie'
            'DeviceTypePie DeviceTypePie';
    }
}

/* Card Styling */
#item-0, #item-1, #item-2, #item-3, #item-4, #item-5, #item-6 {
    padding: 20px;
    border-radius: 8px;
    color: #333;  /* Dark text for readability in light mode */
    background-color: #f0f0f0; /* Light background color for all cards */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 1.2rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s, color 0.3s;
}

#item-0 h3, #item-1 h3, #item-2 h3, #item-3 h3, #item-4 h3, #item-5 h3, #item-6 h3 {
    font-size: 5.8rem; /* Slightly larger title */
    margin-bottom: 10px;
    margin-top: -40px;
    color: #007bff; /* Accent color for the title in light mode */
}

#item-0 p, #item-1 p, #item-2 p, #item-3 p, #item-4 p, #item-5 p, #item-6 p {
    margin: 5px 0;
    font-size: 1.4rem;
    font-weight: bold;
    color: #555; /* Lighter color for the text */
}

#item-0:hover, #item-1:hover, #item-2:hover, #item-3:hover, #item-4:hover, #item-5:hover, #item-6:hover {
    transform: translateY(-5px);
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
}

/* Dark Mode */
[data-theme="dark"] #item-0, [data-theme="dark"] #item-1, [data-theme="dark"] #item-2, [data-theme="dark"] #item-3,
[data-theme="dark"] #item-4, [data-theme="dark"] #item-5, [data-theme="dark"] #item-6 {
    background-color: #444;  /* Dark background for all cards */
    color: #fff;  /* Light text for readability in dark mode */
    box-shadow: 0px 4px 8px rgba(30, 30, 30, 0.1);
}

[data-theme="dark"] #item-0 h3, [data-theme="dark"] #item-1 h3, [data-theme="dark"] #item-2 h3,
[data-theme="dark"] #item-3 h3, [data-theme="dark"] #item-4 h3, [data-theme="dark"] #item-5 h3,
[data-theme="dark"] #item-6 h3 {
    color: #009a9a; /* Teal color for the title in dark mode */
}

[data-theme="dark"] #item-0 p, [data-theme="dark"] #item-1 p, [data-theme="dark"] #item-2 p,
[data-theme="dark"] #item-3 p, [data-theme="dark"] #item-4 p, [data-theme="dark"] #item-5 p,
[data-theme="dark"] #item-6 p {
    color: #ccc; /* Lighter text color for dark mode */
}

[data-theme="dark"] #item-0:hover, [data-theme="dark"] #item-1:hover, [data-theme="dark"] #item-2:hover,
[data-theme="dark"] #item-3:hover, [data-theme="dark"] #item-4:hover, [data-theme="dark"] #item-5:hover,
[data-theme="dark"] #item-6:hover {
    box-shadow: 0px 8px 16px rgba(80, 80, 80, 0.2);  /* Lighter shadow in dark mode */
}

/* Individual Card Background Colors */
#item-0 { /*background-color: #5b58e7;*/ grid-area: MonitoredDevices; }
#item-1 { /*background-color: #cf9acd;*/ grid-area: StatusPercentage; }
#item-2 { /*background-color: #a788ab;*/ grid-area: DeviceNumber; }
#item-3 { /*background-color: #755c75;*/ grid-area: StatusPie; }
#item-4 { /*background-color: #dafb9b;*/ grid-area: NetworkPie; }
#item-5 { /*background-color: #799bb9;*/ grid-area: DeviceTypePie; }
#item-6 { /*background-color: #959a76;*/ grid-area: Header; }


#item-3 canvas {
    width: 100%;
    max-width: 600px; /* Set a fixed max-width for the pie chart */
    max-height: 600px; /* Set a fixed max-width for the pie chart */
}

#item-4 canvas {
    width: 100%;
    max-width: 600px; /* Set a fixed max-width for the pie chart */
    max-height: 600px; /* Set a fixed max-width for the pie chart */
}

#item-5 canvas {
    width: 100%;
    max-height: 600px; /* Set a fixed max-width for the pie chart */
}