/* Scoped styles for BPH Cell Interface */
.bphci-container {
    margin: 0;
    padding: 0;
    background-color: #001e31;
    color: #FFFFFF; /* White text for all elements except ticker-tape and buttons */
    font-family: 'Blackcaps', sans-serif;
    overflow: hidden;
    width: 1280px;
    height: 800px;
}

/* Ticker Tape Container */
.bphci-container .ticker-tape {
    width: 100%;
    padding: 10px 0;
    background-color: #00d084; /* Default color, overridden by PHP */
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    color: #000000; /* Black text for ticker-tape */
}

/* Ticker Content */
.bphci-container .ticker-content {
    display: inline-block;
    padding-left: 100%; /* Start off-screen */
    animation: ticker-scroll 20s linear infinite;
    font-size: 35px;
    color: #000000; /* Black text for ticker-tape */
}

/* Ticker Scroll Animation */
@keyframes ticker-scroll {
    0% {
        transform: translateX(100%); /* Start from the right */
    }
    100% {
        transform: translateX(-100%); /* Move to the left */
    }
}

/* Content Container */
.bphci-container .content {
    display: flex;
    margin-top: 10px;
    align-items: center; /* Vertically center the content */
}

/* Part Image */
.bphci-container .part-image {
    width: 500px;
    height: auto;
    margin-right: 20px; /* Add some spacing between the image and the data */
}

/* Data Container */
.bphci-container .data {
    flex: 1; /* Allow the data container to take up remaining space */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center the text */
    align-items: flex-start; /* Align text to the left */
}

/* MO Number and Part Number */
.bphci-container .mo-number,
.bphci-container .part-number {
    width: 100%; /* Ensure these elements take up full width */
    text-align: center; /* Center the text horizontally */
    margin: 5px 0; /* Reduce margin for tighter spacing */
    line-height: 1.2; /* Reduce line height */
}

/* Font Sizes for Data Elements */
.bphci-container .mo-number {
    font-size: 60px; /* Adjust as needed */
}

.bphci-container .part-number {
    font-size: 70px; /* Adjust as needed */
}

.bphci-container .material,
.bphci-container .colorant,
.bphci-container .pieces-per-box,
.bphci-container .mold-number {
    font-size: 35px; /* Adjust as needed */
    margin: 5px 0; /* Reduce margin for tighter spacing */
    line-height: 1.0; /* Reduce line height */
}

/* Progress Bar Container */
.bphci-container .progress-bar {
    margin-top: 20px;
    text-align: center;
    width: 80%; /* Set width to 80% of the page */
    margin-left: auto; /* Center the progress bar horizontally */
    margin-right: auto;
}

/* Progress Text */
.bphci-container .progress-text {
    font-size: 50px; /* Adjust as needed */
    margin: 5px 0; /* Reduce margin for tighter spacing */
    line-height: 1.0; /* Reduce line height */
}

/* Progress Bar */
.bphci-container .progress {
    width: 100%; /* Progress bar fills the 80% container */
    height: 40px; /* Double the height (previously 20px) */
    background-color: #ccc;
    position: relative;
    border-radius: 20px; /* Rounded corners */
    overflow: hidden; /* Ensure the inner div respects the border radius */
}

.bphci-container .progress div {
    height: 100%;
    background-color: #00d084;
    border-radius: 20px; /* Rounded corners for the fill */
}

.bphci-container .progress.infinite {
    background: repeating-linear-gradient(-45deg, #00d084, #00d084 10px, #001e31 15px, #001e31 25px);
    animation: zebra 1s linear infinite;
}

/* Zebra Stripe Animation */
@keyframes zebra {
    from { background-position: 0 0; }
    to { background-position: 70px 0; } /* Adjusted for smooth animation */
}

.bphci-container .buttons {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}

.bphci-container button {
    padding: 20px 40px; /* Triple the padding (previously 10px 20px) */
    border: none;
    color: #000000; /* Black text for buttons */
    font-family: 'Blackcaps', sans-serif;
    cursor: pointer;
    font-size: 32px; /* Triple the font size (previously 12px) */
    border-radius: 10px;
}

/* Refresh Button - disabled - add <button id="refresh-page">⟳</button> to bphpci.php to enable */
.bphci-container #refresh-page {
    padding: 30px; /* Square button */
    width: 40px; /* Fixed width */
    height: 60px; /* Fixed height */
    font-size: 36px; /* Match other buttons */
    background-color: #0073e6; /* Blue color for refresh button */
    margin-left: 20px; /* Add spacing between Fault Found and Refresh buttons */
}

.bphci-container #reprint-label { background-color: #fcb900; }
.bphci-container #print-next-label { background-color: #00d084; }
.bphci-container #fault-found { background-color: #cf2e2e; }

.bphci-container .no-mo {
    text-align: center;
    margin-top: 300px;
    font-size: 80px;
}