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

            .flow-diagram-card {
                padding: 1.2rem 1.5rem;
                margin-bottom: 1.5rem;
            }

            /* Grid, bukan senarai satu lajur menegak - kad flow ikut susunan baca
               (kiri-ke-kanan, atas-ke-bawah) dan guna PENUH lebar page yang ada,
               supaya tak banyak ruang kosong sebelah kanan dan page tak jadi
               terlalu tinggi/banyak scroll ke bawah. Nombor pada setiap kad (1,2,3..)
               kekal tunjuk urutan proses sebenar walaupun susun-atur dia grid. */
            .flow-timeline {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 1rem;
            }

            @media (max-width: 1250px) {
                .flow-timeline {
                    grid-template-columns: repeat(3, 1fr);
                }
            }

            @media (max-width: 900px) {
                .flow-timeline {
                    grid-template-columns: repeat(2, 1fr);
                }
            }

            @media (max-width: 560px) {
                .flow-timeline {
                    grid-template-columns: 1fr;
                }
            }

            .flow-stage {
                background: var(--surface-sunken);
                border: 1px solid var(--line);
                border-top: 3px solid var(--steel);
                border-radius: 10px;
                padding: 0.9rem 1rem;
                display: flex;
                flex-direction: column;
                gap: 0.5rem;
                transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
            }

                .flow-stage:hover {
                    transform: translateY(-3px);
                    box-shadow: 0 8px 22px rgba(0,0,0,0.4);
                    border-top-color: var(--status-yellow);
                }

                /* Warna aksen atas kad berselang-seli ikut kumpulan 4 - sekadar variasi
                   visual supaya "cantik", bukan makna teknikal apa-apa. */
                .flow-stage:nth-child(4n+1) { border-top-color: var(--status-blue); }
                .flow-stage:nth-child(4n+2) { border-top-color: var(--status-violet); }
                .flow-stage:nth-child(4n+3) { border-top-color: var(--status-yellow); }
                .flow-stage:nth-child(4n+4) { border-top-color: var(--status-green); }

            .flow-stage-header {
                display: flex;
                align-items: center;
                gap: 0.55rem;
            }

            .flow-stage-number {
                flex-shrink: 0;
                width: 26px;
                height: 26px;
                border-radius: 50%;
                background: var(--steel);
                color: #FFFFFF;
                font-family: 'Oswald', sans-serif;
                font-weight: 700;
                font-size: 0.8rem;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .flow-stage-icon {
                flex-shrink: 0;
                font-size: 1.25rem;
                line-height: 1;
            }

            .flow-stage-title {
                font-family: 'Oswald', sans-serif;
                font-weight: 600;
                font-size: 0.88rem;
                letter-spacing: 0.02em;
                text-transform: uppercase;
                color: #FFFFFF;
            }

            .flow-stage-list {
                margin: 0;
                padding-left: 1.1rem;
                color: var(--ink-muted);
                font-size: 0.78rem;
                line-height: 1.5;
            }


            /* Grid, bukan flex+overflow-x - dulu setiap column FIXED 220px lebar,
               jadi 6 column tu lebih lebar dari page (6 x 220px+) dan terpaksa
               scroll ke kanan untuk nampak semua. Sekarang column stretch guna
               PENUH lebar yang ada dan letak SEBELAH-MENYEBELAH (ikut bilangan
               lajur yang muat), bukan perlu scroll mendatar. */
            .kanban-board {
                display: grid;
                grid-template-columns: repeat(6, 1fr);
                gap: 12px;
            }

            @media (max-width: 1300px) {
                .kanban-board {
                    grid-template-columns: repeat(3, 1fr);
                }
            }

            @media (max-width: 700px) {
                .kanban-board {
                    grid-template-columns: repeat(2, 1fr);
                }
            }

            @media (max-width: 480px) {
                .kanban-board {
                    grid-template-columns: 1fr;
                }
            }

            .kanban-column {
                background: var(--surface);
                border: 1px solid var(--line);
                border-radius: 10px;
                box-shadow: 0 4px 20px rgba(0,0,0,0.4);
                display: flex;
                flex-direction: column;
            }

            .kanban-column-header {
                background: var(--steel-dark);
                color: #FFFFFF;
                font-family: 'Oswald', sans-serif;
                font-weight: 500;
                letter-spacing: 0.03em;
                text-transform: uppercase;
                font-size: 0.76rem;
                padding: 0.7rem 0.8rem;
                border-radius: 10px 10px 0 0;
                border-bottom: 1px solid var(--steel);
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .kanban-column-count {
                background: var(--steel);
                color: #FFFFFF;
                border-radius: 999px;
                padding: 0.15rem 0.6rem;
                font-size: 0.72rem;
            }

            .kanban-column-body {
                padding: 0.7rem;
                max-height: 65vh;
                overflow-y: auto;
            }

            .kanban-card {
                background: var(--surface-sunken);
                border: 1px solid var(--line);
                border-left: 3px solid var(--steel);
                border-radius: 8px;
                padding: 0.75rem 0.9rem;
                margin-bottom: 0.6rem;
                font-size: 0.85rem;
                color: var(--ink);
                cursor: pointer;
            }

                .kanban-card:hover {
                    background: var(--steel-tint);
                }

            .kanban-card-projectno {
                font-weight: 600;
                font-size: 0.95rem;
                color: #FFFFFF;
            }

            .kanban-card-name {
                color: var(--ink-muted);
                font-size: 0.78rem;
                margin-top: 0.25rem;
                line-height: 1.5;
            }

            .kanban-card-empty {
                color: var(--ink-muted);
                font-size: 0.82rem;
                text-align: center;
                padding: 1.2rem 0;
            }