/* Root container (optional) to ensure full width) */
#traffic-page-container {
    width: 100%;
    box-sizing: border-box;
}

.traffic-haed-container{
    width: 100%;
    height: 4.5vh; 
    display: flex;
    flex-direction: row;
    align-items: center; 
    justify-content:space-evenly;  
    background-color: var(--div-head-first-background-color);
    gap: 2px;
    padding-left: 2px;
    border: var(--div-border);
    border-radius: 5px;
    box-sizing: border-box; 
}

.traffic-control-container{
    width: auto;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center; 
    justify-content:center;
    gap: 5px;
}

.traffic-control-label {
    /* font-weight: 600; */
    /* display: inline-block; */
    /* margin-bottom: 6px; */
    font-size: 130%;
    color: var(--text-color);
    font-weight: bold;
}

.traffic-graphs-container {
    width: 99.7%;
    height: 90vh;
    /*display: block;   ← Allows scroll without flex limits */
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    border: var(--div-border);
    border-radius: 5px;
    overflow-x: auto;
    overflow-y: auto; /* In case height overflows */
    background-color: var(--primary-background-color);
    box-sizing: border-box;
}

/* traffic-tree-column section (for pies) */
.traffic-tree-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2.5px;
    padding: 0 2px; 
    box-sizing: border-box;
}

/* Graph card */
.traffic-graph-box {
    border: 2px solid #ccc;        /* border around each graph */
    border-radius: 10px;
    padding: 4px 4px;
    margin: 2px 2px;              /* spacing around graphs */
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.traffic-graph-box h4 {
    margin: 8px 0 6px;
}

/* Make graphs responsive */
.traffic-graph-box .dash-graph {
    width: 100%;
}

/* Small screens: stack controls & pies vertically */
@media (max-width: 900px) {
    .traffic-controls-row,
    .traffic-tree-col {
    grid-template-columns: 1fr;  /* stack */
  }
}