.pass {
    background-color: #d4edda; /* Green */
    color: white;
    text-align: center;
    font-weight: bold;
    padding: 5px;
    border-radius: 5px;
}

.fail {
    background-color: #f8d7da; /* Red */
    color: white;
    text-align: center;
    font-weight: bold;
    padding: 5px;
    border-radius: 5px;
}

.unknown {
    background-color: #C0C0C0; /* Grey */
    color: white;
    text-align: center;
    font-weight: bold;
    padding: 5px;
    border-radius: 5px;
}
/* Full background color for Order Status */
td.green-box {
    background-color: #c8e6c9 !important; /* Light green */
}

td.red-box {
    background-color: #ffcccb !important; /* Light red */
}


.pass-fail.pass {
    background-color: #d4edda;
    color: rgb(0, 0, 0);
}

.pass-fail.fail {
    background-color: #f8d7da;
    color: rgb(0, 0, 0);
}

.pass-fail.pending {
    background-color: #fff3cd;
    color: black;
}
.sticker {
    border: 1px solid black;
    padding: 10px;
    margin: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.small {
    width: 4in;
    height: 2in;
}

.large {
    width: 4in;
    height: 6in;
    text-align: center;
}

.qc-code {
    width: 50px;
}

.lab-logo {
    width: 150px;
}

.contact-info {
    font-size: 12px;
    margin-top: 5px;
}

.centered {
    text-align: center;
}
/* Make the table container scrollable */
.table-container {
    max-height: 500px; /* Adjust the height as needed */
    overflow-y: auto;
    border: 1px solid #ccc;
    position: relative;
}

/* Fix the table header */
.table-container table {
    width: 100%;
    border-collapse: collapse;
}

.table-container thead {
    position: sticky;
    top: 0;
    background-color: white; /* Ensures header visibility */
    z-index: 10;
}
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 14px;
    background-color: #f9f9f9;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #4CAF50;
    color: white;
    font-weight: bold;
}

tr:nth-child(even):not(.light-green):not(.light-red):not(.order-placed):not(.make-starter):not(.growing):not(.crashing):not(.packaged):not(.tagged):not(.boxed):not(.ready):not(.delivered) {
    background-color: #f2f2f2;
}


tr:hover {
    background-color: #ddd;
}

input[type="date"], select {
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    background-color: #007BFF;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 4px;
}

button:hover {
    background-color: #0056b3;
}
.compact-date {
    width: 50px; /* Adjust width to fit within the cell */
    text-align: center;
    cursor: pointer;
    background-color: white;
    border: 1px solid #ccc;
    padding: 5px;
}
/* 🎨 More Distinct Status Colors */
.order-placed { background-color: #f5f5f5; }       /* Light Gray - New and Neutral */
.make-starter  { background-color: #ff6f61; }      /* Vibrant Coral - Action Needed */
.growing       { background-color: #fdd835; }      /* Bright Yellow - Active Phase */
.crashing      { background-color: #ffb300; }      /* Amber - Transition Phase */
.packaged      { background-color: #a1887f; }      /* Taupe - Packed but Not Ready */
.tagged        { background-color: #4fc3f7; }      /* Sky Blue - Tagged for Tracking */
.boxed         { background-color: #0288d1; }      /* Strong Blue - Boxed and Near Complete */
.ready-for-customer { background-color: #388e3c; } /* Green - Ready to Go */
.ready         { background-color: #2e7d32; }      /* Darker Green - Almost There */
.delivered     { background-color: #1b5e20; }      /* Deep Green - Completed */

/* Ensuring text readability */
.order-placed, .make-starter, .growing, .crashing, .packaged, 
.tagged, .boxed, .ready-for-customer, .delivered {
    color: black; /* Dark text for contrast */
    font-weight: bold;
    padding: 5px;
    border-radius: 4px;
}