Digital Highway PMC Dashboard 

body {
font-family: ‘Inter’, sans-serif;
background-color: #f3f4f6; /* Light gray background */
}
.card {
background-color: #ffffff;
border-radius: 0.75rem; /* Rounded corners */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
padding: 1.5rem;
}
.progress-bar-container {
background-color: #e5e7eb; /* Light gray for the track */
border-radius: 0.5rem;
height: 1.5rem;
overflow: hidden;
}
.progress-bar {
background-color: #22c55e; /* Green for progress */
height: 100%;
border-radius: 0.5rem;
width: 0%; /* Initial width */
transition: width 0.5s ease-in-out;
}
.kanban-column {
background-color: #f9fafb; /* Lighter background for columns */
border-radius: 0.5rem;
padding: 1rem;
min-height: 150px; /* Ensure columns have some height */
}
.kanban-item {
background-color: #ffffff;
border-radius: 0.5rem;
padding: 0.75rem;
margin-bottom: 0.75rem;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.graph-container {
width: 100%;
overflow-x: auto; /* Allows horizontal scrolling if graph is wide */
padding-bottom: 1rem; /* Space for potential scrollbar */
}
.earned-value-graph svg {
display: block;
margin: auto;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
background-color: #fcfcfc;
}
.graph-legend span {
display: inline-flex;
align-items: center;
margin-right: 1rem;
font-size: 0.9rem;
color: #4b5563;
}
.graph-legend span::before {
content: ”;
width: 1.25rem;
height: 0.25rem;
border-radius: 9999px; /* Pill shape */
margin-right: 0.5rem;
display: inline-block;
}
.legend-pv::before { background-color: #3b82f6; } /* Blue */
.legend-ev::before { background-color: #22c55e; } /* Green */
.legend-ac::before { background-color: #ef4444; } /* Red */