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

            .kpi-row {
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                gap: 12px;
                margin: 14px 0 20px;
            }

            .kpi-card {
                background: var(--surface);
                border: 1px solid var(--line);
                border-left: 4px solid var(--steel);
                border-radius: 10px;
                padding: 0.9rem 1rem;
                box-shadow: 0 4px 20px rgba(0,0,0,0.4);
            }

            .kpi-card-warning {
                border-left-color: var(--status-yellow);
            }

            .kpi-card-danger {
                border-left-color: var(--status-red);
            }

            .kpi-label {
                font-family: 'Oswald', sans-serif;
                font-size: 0.72rem;
                text-transform: uppercase;
                letter-spacing: 0.03em;
                color: var(--ink-muted);
                margin-bottom: 0.3rem;
            }

            .kpi-value {
                font-family: 'IBM Plex Mono', monospace;
                font-size: 1.8rem;
                font-weight: 600;
                color: var(--ink);
            }

            @media (max-width: 1200px) {
                .kpi-row {
                    grid-template-columns: repeat(2, 1fr);
                }
            }
        

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

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

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

                #attentionTable 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;
                }

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

            .risk-badge {
                display: inline-block;
                padding: 0.2rem 0.6rem;
                border-radius: 999px;
                font-family: 'Oswald', sans-serif;
                font-size: 0.68rem;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.03em;
            }

                .risk-badge.overdue {
                    background: var(--status-red-tint);
                    color: var(--status-red);
                }

                .risk-badge.at-risk {
                    background: var(--status-yellow-tint);
                    color: var(--status-yellow);
                }

            .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);
                }
        

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

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

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

                #staffWorkloadTable 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;
                }

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

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

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