/* Purchase Order page (Views/PurchaseOrders/Index.cshtml) - auto-extracted dari <style> block dalam .cshtml, supaya senang cari/edit CSS berasingan dari markup. */

            .po-tabs {
                display: flex;
                flex-wrap: wrap;
                gap: 4px;
                border-bottom: 2px solid var(--steel-tint);
                margin: 8px 0 12px;
            }

            .po-tab {
                background: transparent;
                border: none;
                padding: 8px 14px;
                font-family: 'Oswald', sans-serif;
                font-size: 0.72rem;
                text-transform: uppercase;
                letter-spacing: 0.03em;
                color: var(--ink);
                opacity: 0.65;
                cursor: pointer;
                border-bottom: 3px solid transparent;
                transition: opacity 0.12s ease, border-color 0.12s ease;
            }

                .po-tab:hover {
                    opacity: 1;
                }

                .po-tab.active {
                    opacity: 1;
                    color: #FFFFFF;
                    border-bottom-color: var(--steel);
                    font-weight: 600;
                }
        

                    #ProjectNo {
                        color: white;
                        text-transform: uppercase;
                    }
                    #PProjectNoList {
                        color:white;
                    }
                

                    #ProjectName {
                        color:white;
                        text-transform: uppercase;
                    }
                

                    #Customer {
                        color:white;
                        text-transform: uppercase;
                    }
                

                    #PoNumber {
                        color: white;
                        text-transform: uppercase;
                    }
                

                    #DesignerPart {
                        color: white;
                        text-transform: uppercase;
                    }
                

                    #DesignerName {
                        color:white;
                        text-transform: uppercase;
                    }
                

                    #PartNumber {
                        color: white;
                        text-transform: uppercase;
                    }
                

                    #BrandName {
                        color: white;
                        text-transform: uppercase;
                    }
                

                    #SupplierName {
                        color:white;
                        text-transform: uppercase;
                    }
                

                    #Price {
                        color:white;
                    }
                    #Price::placeholder {
                        color:white;
                    }
                

                    #Unit {
                        color:white;
                    }
                    #Unit::placeholder {
                        color:white;
                    }
                    #Unit::-webkit-inner-spin-button {
                        filter: invert(1);
                        opacity: 1;
                        cursor: pointer;
                    }
                

                    #TotalPrice {
                        color:white;
                    }
                

                    #DesignerOrderDate {
                        color: white;
                    }

                    #DesignerOrderDate::-webkit-calendar-picker-indicator {
                        filter: invert(1);
                        cursor: pointer;
                    }
                

                    #PurchaseOrderDate {
                        color:white;
                    }
                    #PurchaseOrderDate::-webkit-calendar-picker-indicator {
                        filter: invert(1);
                        cursor: pointer;
                    }
                

                    #TargetReceivedDate {
                        color:white;
                    }
                    #TargetReceivedDate::-webkit-calendar-picker-indicator {
                        filter: invert(1);
                        cursor: pointer;
                    }
                

                    #PoStatus {
                        color:white;
                    }
                

                    #Note {
                        color:white;
                    }
                    #Note::placeholder {
                        color:white;
                    }
                

            .table-scroll-purchaseproject {
                max-height: 500px;
                overflow-y: auto;
            }

            #summaryTable th,
            #summaryTable td {
                border: 1px solid var(--line);
            }

            #summaryTable {
                width: 100%;
                border-collapse: collapse;
                font-size: 0.82rem;
            }

                #summaryTable thead th {
                    position: sticky;
                    top: 0;
                    background: var(--steel-dark);
                    color: #FFFFFF;
                    font-family: 'Oswald', sans-serif;
                    font-weight: 500;
                    letter-spacing: 0.03em;
                    text-transform: uppercase;
                    font-size: 0.72rem;
                    padding: 0.6rem 0.6rem;
                    text-align: left;
                    border-color: var(--steel);
                    z-index: 2;
                }

                #summaryTable tbody td {
                    padding: 0.5rem 0.6rem;
                    vertical-align: middle;
                    color: var(--ink);
                }

                #summaryTable tbody tr {
                    cursor: pointer;
                    transition: background-color 0.12s ease;
                }

                    #summaryTable tbody tr:hover {
                        background: var(--steel-tint);
                    }

                    #summaryTable tbody tr.is-selected {
                        outline: 2px solid var(--steel);
                        outline-offset: -2px;
                    }

            .po-detail-row td {
                padding: 0 !important;
                background: rgba(0,0,0,0.15);
            }

            .po-detail-inner {
                width: 100%;
                border-collapse: collapse;
                font-size: 0.78rem;
            }

                .po-detail-inner th, .po-detail-inner td {
                    padding: 0.4rem 0.6rem;
                    border: 1px solid var(--line);
                    color: var(--ink);
                }

                .po-detail-inner th {
                    text-align: left;
                    font-weight: 600;
                    background: rgba(255,255,255,0.06);
                }

            .po-detail-footer td {
                background: blue;
                border-top: 2px solid var(--steel);
            }
    

            .table-scroll-purchasemonth {
                max-height: 500px;
                overflow-y: auto;
            }

            #monthlyBreakdownTable th,
            #monthlyBreakdownTable td {
                border: 1px solid var(--line);
            }

            #monthlyBreakdownTable {
                width: 100%;
                border-collapse: collapse;
                font-size: 0.82rem;
            }

                #monthlyBreakdownTable thead th {
                    position: sticky;
                    top: 0;
                    background: var(--steel-dark);
                    color: #FFFFFF;
                    font-family: 'Oswald', sans-serif;
                    font-weight: 500;
                    letter-spacing: 0.03em;
                    text-transform: uppercase;
                    font-size: 0.72rem;
                    padding: 0.6rem 0.6rem;
                    text-align: left;
                    border-color: var(--steel);
                    z-index: 2;
                }

                #monthlyBreakdownTable tbody td {
                    padding: 0.5rem 0.6rem;
                    vertical-align: middle;
                    color: var(--ink);
                }

                #monthlyBreakdownTable tbody tr {
                    cursor: pointer;
                    transition: background-color 0.12s ease;
                }

                    #monthlyBreakdownTable tbody tr:hover {
                        background: var(--steel-tint);
                    }

                    #monthlyBreakdownTable tbody tr.is-selected {
                        outline: 2px solid var(--steel);
                        outline-offset: -2px;
                    }