.container01 {
    width: 98%;
    position: relative;
    left: 1%;
    top: 15%;
    border: 3px solid white;
    box-sizing: border-box;
    padding: 0px; /* space for inner cells so they don't touch edge */
    overflow: hidden; /* <-- this is key */
    
    
}

.container01 .row{
    margin: 0 ;
}

@media (max-width: 600px) {
    .btn.nav-buttons {
      margin-bottom: 10px; /* space between vertically stacked buttons */
    }
  }
.header{
    background-color: #2775BE !important;
}
.editable{
    color :aqua;
    background-color: #2a3845  !important;
    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.02), inset 0px 0px 3px 2px rgba(0, 0, 0, 0.3);

}
.status-col {
    min-width: 55px;
    max-width: 55px;
    width: 55px;
    padding: 0; /* optional: removes inner space */
}
.row {
    height: 40px;
    justify-content: space-between; /* Even spacing */
    display: flex;
    width: 100%;
    box-sizing: border-box;
    
}
.col {
    text-align: center;
    border-right: 1px solid #1b1b1f;
    border-bottom: 1px solid #1b1b1f;
    /*height: 30px;  Fixed height */
    display: flex;
    align-items: center;  /* Centers vertically */
    justify-content: center; /* Centers horizontally */
    overflow: hidden; /* Prevents resizing issues */
}
.status-indicator {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    max-width: 20px; /* Prevents stretching */
    max-height: 20px;
    display: inline-block;
    background-color: #2E3C4A; /* Default off */
    border: 1px solid white;
}
.status-indicator.active {
    background-color: green; /* Active */
}

.text-box {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap; /* Ensures proper text wrapping */
    width: 100%;
    height: 100%;
    font-size: clamp(6px, 14px, 18px);
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal; /* Ensures text can break into multiple lines */
    background-color:  #252526;
}