@import '_content/ABChatAndTasks.Components/ABChatAndTasks.Components.rv67vn1icn.bundle.scp.css';

/* /Components/Account/Pages/BarcodeLogin.razor.rz.scp.css */
/* ── Container ── */
.barcode-login-container[b-uq2akidt58] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%);
}

/* ── Card ── */
.barcode-login-card[b-uq2akidt58] {
    background: #fff;
    border-radius: 1.25rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    width: 100%;
    max-width: 420px;
    padding: 0 2rem 2rem;
    text-align: center;
    overflow: hidden;
}

.barcode-accent-strip[b-uq2akidt58] {
    height: 4px;
    background: linear-gradient(135deg, #009244 0%, #c1d11c 100%);
    margin: 0 -2rem 2rem;
}

/* ── Scan area ── */
.barcode-scan-area[b-uq2akidt58] {
    position: relative;
    padding: 2rem 0 1.5rem;
    cursor: default;
    outline: none;
    border-radius: 1rem;
    transition: background 0.2s;
}

    .barcode-scan-area:focus-within[b-uq2akidt58] {
        background: rgba(0, 146, 68, 0.03);
    }

.scan-hidden-input[b-uq2akidt58] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: none;
    background: transparent;
    z-index: 1;
    font-size: 16px;
}

.scan-icon-wrapper[b-uq2akidt58] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    margin-bottom: 1.25rem;
}

.scan-icon[b-uq2akidt58] {
    font-size: 2.8rem;
    color: #009244;
    z-index: 1;
    position: relative;
}

.scan-ring[b-uq2akidt58] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #009244;
    opacity: 0.3;
    animation: ring-pulse-b-uq2akidt58 2.2s ease-out infinite;
}

@keyframes ring-pulse-b-uq2akidt58 {
    0% {
        transform: scale(0.7);
        opacity: 0.5;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.scan-title[b-uq2akidt58] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.35rem;
}

.scan-subtitle[b-uq2akidt58] {
    font-size: 0.9rem;
    color: #94a3b8;
    margin: 0;
}

/* ── Alert ── */
.barcode-alert[b-uq2akidt58] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.88rem;
    margin-bottom: 1rem;
}

.barcode-alert-error[b-uq2akidt58] {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.barcode-alert i[b-uq2akidt58] {
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* ── Footer ── */
.barcode-footer[b-uq2akidt58] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.barcode-divider[b-uq2akidt58] {
    width: 100%;
    height: 1px;
    background: #e2e8f0;
    margin-bottom: 0.25rem;
}

/* ── Manual entry panel ── */
.manual-entry-panel[b-uq2akidt58] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.manual-code-input[b-uq2akidt58] {
    flex: 1;
    padding: 0.65rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 0.75rem;
    font-size: 1rem;
    color: #1e293b;
    background: #f8fafc;
    outline: none;
    text-align: center;
    letter-spacing: 0.1em;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .manual-code-input:focus[b-uq2akidt58] {
        border-color: #009244;
        box-shadow: 0 0 0 3px rgba(0, 146, 68, 0.1);
        background: #fff;
    }

    .manual-code-input[b-uq2akidt58]::placeholder {
        color: #cbd5e1;
        letter-spacing: normal;
    }

.manual-submit-btn[b-uq2akidt58] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 0.75rem;
    background: #009244;
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.2s;
}

    .manual-submit-btn:hover[b-uq2akidt58] {
        background: #007a38;
    }

.manual-cancel-btn[b-uq2akidt58] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 2px solid #e2e8f0;
    border-radius: 0.75rem;
    background: #fff;
    color: #64748b;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

    .manual-cancel-btn:hover[b-uq2akidt58] {
        border-color: #cbd5e1;
        color: #334155;
    }

/* ── Manual entry button ── */
.barcode-manual-btn[b-uq2akidt58] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #94a3b8;
    font-size: 0.85rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.4rem 0.75rem;
    border-radius: 0.5rem;
    transition: color 0.2s;
}

    .barcode-manual-btn:hover[b-uq2akidt58] {
        color: #64748b;
    }

/* ── Back link ── */
.barcode-back-link[b-uq2akidt58] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #64748b;
    text-decoration: none;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.2s;
}

    .barcode-back-link:hover[b-uq2akidt58] {
        color: #334155;
        background: #f1f5f9;
    }
/* /Components/Account/Pages/Login.razor.rz.scp.css */
/* ── Container ── */
.login-container[b-tj3weoh2zd] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%);
}

/* ── Card ── */
.login-card[b-tj3weoh2zd] {
    background: #fff;
    border-radius: 1.25rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    width: 100%;
    max-width: 420px;
    padding: 0 2rem 2rem;
    overflow: hidden;
}

.login-accent-strip[b-tj3weoh2zd] {
    height: 4px;
    background: linear-gradient(135deg, #009244 0%, #c1d11c 100%);
    margin: 0 -2rem 0;
}

/* ── Header ── */
.login-header[b-tj3weoh2zd] {
    margin-bottom: 1.25rem;
}

.login-options[b-tj3weoh2zd] {
    display: flex;
    gap: 0;
}

.login-option[b-tj3weoh2zd] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem 0.5rem 1rem;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: background 0.2s, border-color 0.2s;
    cursor: default;
}

.login-option-active[b-tj3weoh2zd] {
    border-bottom-color: #009244;
    background: rgba(0, 146, 68, 0.03);
}

.login-option-link[b-tj3weoh2zd] {
    cursor: pointer;
    color: inherit;
    border-bottom-color: transparent;
}

    .login-option-link:hover[b-tj3weoh2zd] {
        background: rgba(0, 146, 68, 0.05);
        border-bottom-color: #c1d11c;
    }

.login-option-icon[b-tj3weoh2zd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #009244, #c1d11c);
    color: #fff;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.login-option-icon-alt[b-tj3weoh2zd] {
    background: linear-gradient(135deg, #475569, #64748b);
}

.login-option-link:hover .login-option-icon-alt[b-tj3weoh2zd] {
    background: linear-gradient(135deg, #009244, #c1d11c);
}

.login-option-title[b-tj3weoh2zd] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}

.login-option-sub[b-tj3weoh2zd] {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 0.15rem;
    line-height: 1.2;
}

/* ── Alert ── */
.login-alert[b-tj3weoh2zd] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.88rem;
    margin-bottom: 1.25rem;
}

.login-alert-error[b-tj3weoh2zd] {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.login-alert i[b-tj3weoh2zd] {
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* ── Form fields ── */
.login-field[b-tj3weoh2zd] {
    margin-bottom: 1.15rem;
}

.login-label[b-tj3weoh2zd] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.4rem;
}

    .login-label i[b-tj3weoh2zd] {
        font-size: 0.9rem;
    }

[b-tj3weoh2zd] .login-input {
    width: 100%;
    padding: 0.85rem 1.1rem;
    border: 2px solid #e2e8f0;
    border-radius: 0.75rem;
    font-size: 1.05rem;
    font-weight: 500;
    color: #1e293b;
    background: #f8fafc;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    box-sizing: border-box;
}

[b-tj3weoh2zd] .login-input:focus {
    border-color: #009244;
    box-shadow: 0 0 0 3px rgba(0, 146, 68, 0.1);
    background: #fff;
}

[b-tj3weoh2zd] .login-input::placeholder {
    color: #cbd5e1;
    font-weight: 400;
}

[b-tj3weoh2zd] .login-validation {
    color: #dc2626;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

/* ── Remember me ── */
.login-remember[b-tj3weoh2zd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.88rem;
    color: #64748b;
}

[b-tj3weoh2zd] .login-checkbox {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    accent-color: #009244;
    cursor: pointer;
}

/* ── Submit ── */
.login-submit[b-tj3weoh2zd] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.8rem;
    background: linear-gradient(135deg, #009244, #c1d11c);
    color: #fff;
    border: none;
    border-radius: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s;
}

    .login-submit:hover[b-tj3weoh2zd] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 146, 68, 0.35);
    }

    .login-submit:active[b-tj3weoh2zd] {
        transform: translateY(0);
    }
/* /Components/Layout/ChatLayout.razor.rz.scp.css */
.chat-page-layout[b-5scq9flq16] {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
/* /Components/Layout/EmptyLayout.razor.rz.scp.css */
.page[b-v7a1shmgt9] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-v7a1shmgt9] {
    flex: 1;
}

.sidebar[b-v7a1shmgt9] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-v7a1shmgt9] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-v7a1shmgt9]  a, .top-row[b-v7a1shmgt9]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

        .top-row[b-v7a1shmgt9]  a:hover, .top-row[b-v7a1shmgt9]  .btn-link:hover {
            text-decoration: underline;
        }

        .top-row[b-v7a1shmgt9]  a:first-child {
            overflow: hidden;
            text-overflow: ellipsis;
        }

@media (max-width: 640.98px) {
    .top-row[b-v7a1shmgt9] {
        justify-content: space-between;
    }

        .top-row[b-v7a1shmgt9]  a, .top-row[b-v7a1shmgt9]  .btn-link {
            margin-left: 0;
        }
}

@media (min-width: 641px) {
    .page[b-v7a1shmgt9] {
        flex-direction: row;
    }

    .sidebar[b-v7a1shmgt9] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-v7a1shmgt9] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

        .top-row.auth[b-v7a1shmgt9]  a:first-child {
            flex: 1;
            text-align: right;
            width: 0;
        }

    .top-row[b-v7a1shmgt9], article[b-v7a1shmgt9] {

    }
}

#blazor-error-ui[b-v7a1shmgt9] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-v7a1shmgt9] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-xbenczuqqi] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-xbenczuqqi] {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
}

.sidebar[b-xbenczuqqi] {
    background: linear-gradient(180deg, #022c32 0%, #1e4c53 100%);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
}

.top-row[b-xbenczuqqi] {
    background: linear-gradient(135deg, #022c32 0%, #1e4c53 100%);
    border-bottom: 2px solid #009244;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.top-row[b-xbenczuqqi]  a, .top-row[b-xbenczuqqi]  .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
    text-decoration: none;
    color: #ffffff;
    font-weight: 500;
}

.top-row[b-xbenczuqqi]  a:hover, .top-row[b-xbenczuqqi]  .btn-link:hover {
    color: #c1d11c;
    text-decoration: none;
}

.top-row[b-xbenczuqqi]  a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-row[b-xbenczuqqi]  button.nav-link {
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
    margin-left: 1.5rem;
    padding: 0;
    font-weight: 500;
}

.top-row[b-xbenczuqqi]  button.nav-link:hover { color: #c1d11c; }

@media (max-width: 640.98px) {
    .top-row[b-xbenczuqqi] { justify-content: space-between; }
    .top-row[b-xbenczuqqi]  a, .top-row[b-xbenczuqqi]  .btn-link, .top-row[b-xbenczuqqi]  button.nav-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-xbenczuqqi] {
        flex-direction: row;
        min-height: 100vh;
    }

    .sidebar[b-xbenczuqqi] {
        width: 230px;
        min-width: 230px;
        flex-shrink: 0;
        height: 100vh;
        position: sticky;
        top: 0;
        z-index: 10;
        display: flex;
        flex-direction: column;
        /* overflow: hidden — to wymusza że scrollowanie jest na .nav-scrollable, nie na sidebarze
           (inaczej DWA pionowe scrollbary nakładają się obok siebie). */
        overflow: hidden;
    }

    /* ── Collapsed sidebar ── */
    .page.sidebar-collapsed .sidebar[b-xbenczuqqi] {
        position: fixed;
        top: 0;
        left: 0;
        width: 62px;
        min-width: 62px;
        height: 100vh;
        z-index: 1050;
        overflow: hidden;
        transition: width 0.25s ease;
    }

    .page.sidebar-collapsed > main[b-xbenczuqqi] {
        margin-left: 62px;
    }

    .page.sidebar-collapsed .sidebar:hover[b-xbenczuqqi] {
        width: 230px;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
    }

    main[b-xbenczuqqi] {
        flex: 1;
        min-width: 0;
        max-width: calc(100vw - 230px);
        overflow-x: hidden;
        /* height: 100vh ZDJĘTE — blokowało sticky sidebar przy długich stronach
           (parent .page nie mógł rosnąć wraz z content). Teraz main rośnie naturalnie,
           sidebar pozostaje sticky w ramach całej wysokości .page. */
    }

    .top-row[b-xbenczuqqi] {
        position: sticky;
        top: 0;
        z-index: 1;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    .top-row.auth[b-xbenczuqqi]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }
}

#blazor-error-ui[b-xbenczuqqi] {
    color-scheme: light only;
    background: #fff3cd;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-xbenczuqqi] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.delivery-submenu[b-46bxthhyhg], .deposits-submenu[b-46bxthhyhg], .inventory-submenu[b-46bxthhyhg], .windykacja-submenu[b-46bxthhyhg], .products-submenu[b-46bxthhyhg], .tasks-submenu[b-46bxthhyhg], .locations-submenu[b-46bxthhyhg], .settings-submenu[b-46bxthhyhg], .tools-submenu[b-46bxthhyhg], .info-submenu[b-46bxthhyhg], .issues-submenu[b-46bxthhyhg], .production-submenu[b-46bxthhyhg], .orders-submenu[b-46bxthhyhg], .leave-submenu[b-46bxthhyhg], .documents-submenu[b-46bxthhyhg], .pallets-submenu[b-46bxthhyhg] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

    .delivery-submenu.show[b-46bxthhyhg], .deposits-submenu.show[b-46bxthhyhg], .inventory-submenu.show[b-46bxthhyhg], .windykacja-submenu.show[b-46bxthhyhg], .products-submenu.show[b-46bxthhyhg], .tasks-submenu.show[b-46bxthhyhg], .locations-submenu.show[b-46bxthhyhg], .settings-submenu.show[b-46bxthhyhg], .tools-submenu.show[b-46bxthhyhg], .info-submenu.show[b-46bxthhyhg], .issues-submenu.show[b-46bxthhyhg], .production-submenu.show[b-46bxthhyhg], .orders-submenu.show[b-46bxthhyhg], .leave-submenu.show[b-46bxthhyhg], .documents-submenu.show[b-46bxthhyhg], .pallets-submenu.show[b-46bxthhyhg] {
        max-height: 2000px;
        transition: max-height 0.3s ease-in;
    }

.nav-link:hover[b-46bxthhyhg] {
    background-color: rgba(255, 255, 255, 0.08);
}
.navbar-toggler[b-46bxthhyhg] {
    appearance: none;
    cursor: pointer;
    width: 2.6rem;
    height: 2rem;
    color: white;
    position: absolute;
    top: 0.4rem;
    right: 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}
.navbar-toggler:hover[b-46bxthhyhg] {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

    .navbar-toggler:checked[b-46bxthhyhg] {
        background-color: rgba(0, 146, 68, 0.3);
        border-color: #009244;
    }

.top-row[b-46bxthhyhg] {
    background: linear-gradient(135deg, #022c32 0%, #1e4c53 100%);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border-bottom: 1px solid rgba(0,146,68,0.55);
    padding: 0.3rem 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

/* Wiersz 1: rzad ikon (toggle | spacer | dzwonek | motyw) */
.top-bar-icons[b-46bxthhyhg] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 1.85rem;
}
.top-bar-spacer[b-46bxthhyhg] { flex: 1 1 auto; }

/* Przelacznik motywu jasny/ciemny — kompaktowy, w gornym rzedzie */
.theme-toggle-btn[b-46bxthhyhg] {
    width: 1.85rem;
    height: 1.85rem;
    flex-shrink: 0;
    background: rgba(255,255,255,0.1);
    /* 0,18 dawalo obrys o kontrascie 1,65:1 wzgledem naglowka — guzik nie mial widocznej
       krawedzi, wiec wygladal jak ikona wrzucona w pasek, a nie jak cos do klikniecia. */
    border: 1px solid rgba(255,255,255,0.5);
    color: #fff;
    font-size: 0.95rem;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.theme-toggle-btn:hover[b-46bxthhyhg] { background: rgba(255,255,255,0.22); color: #c1d11c; }
.theme-toggle-btn .bi[b-46bxthhyhg] { margin-right: 0; }

.navbar-brand[b-46bxthhyhg] {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff !important;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    transition: color 0.2s ease;
    padding-left: 0.1rem;
    line-height: 1.1;
}
.navbar-brand:hover[b-46bxthhyhg] { color: #c1d11c !important; }
.brand-icon[b-46bxthhyhg] {
    width: 1.4rem;
    height: 1.4rem;
    object-fit: contain;
    flex-shrink: 0;
}

.bi[b-46bxthhyhg] {
    display: inline-block;
    width: 1.25rem;
    /* 0.75rem zabieralo tyle miejsca, ze najdluzsze podpisy w menu ("Inwentaryzacja - raporty",
       "Dokumenty pracownikow", "Windykacja sadowa (61+)") lapaly wielokropek przy 230 px paska. */
    margin-right: 0.55rem;
    font-size: 1.2rem;
}


/* Notification bell wrapper */
.notification-bell-wrapper[b-46bxthhyhg] {
    display: flex;
    align-items: center;
    margin: 0;
    z-index: 1000;
}
/* Zmniejsz dzwonek powiadomien w kompaktowym pasku (renderuje sie tylko gdy sa nieprzeczytane) */
.notification-bell-wrapper[b-46bxthhyhg]  .notification-bell-link { font-size: 1.05rem; padding: 0.15rem 0.3rem; }
/* Telefon: dzwonek mial 26x30 px — za maly cel dotyku w gornym pasku. */
@media (max-width: 640.98px) {
    .notification-bell-wrapper[b-46bxthhyhg]  .notification-bell-link {
        padding: 0.35rem 0.5rem;
        font-size: 1.15rem;
    }
}
.notification-bell-wrapper[b-46bxthhyhg]  .notification-badge { padding: 0.1rem 0.3rem; font-size: 0.6rem; min-width: 14px; }

@media (max-width: 640px) {
    /* Mobile: pelna szerokosc — wszystko w JEDNEJ linii (nazwa firmy + ikony). */
    .top-row[b-46bxthhyhg] { flex-direction: row; align-items: center; gap: 0.5rem; }
    .navbar-brand[b-46bxthhyhg] { order: -1; flex: 1 1 auto; min-width: 0; }
    .navbar-brand span[b-46bxthhyhg] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* Hamburger (.navbar-toggler) jest absolutnie w prawym gornym rogu —
       odsuwamy ikony, zeby motyw/dzwonek NIE wchodzily na niego, + wiekszy odstep miedzy nimi. */
    .top-bar-icons[b-46bxthhyhg] { flex: 0 0 auto; gap: 0.7rem; padding-right: 3.4rem; }
    .theme-toggle-btn[b-46bxthhyhg] { width: 2.1rem; height: 2.1rem; }
}

.nav-item[b-46bxthhyhg] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-46bxthhyhg] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-46bxthhyhg] {
        padding-bottom: 1rem;
    }

    .nav-item[b-46bxthhyhg]  .nav-link {
        /* Razem z wezszym marginesem ikony daje ~10 px wiecej na podpis — dlugie pozycje
           menu miescily sie co do piksela i byly ucinane wielokropkiem. */
        padding: 0 0.5rem;
        /* line-height musi pomieścić descendery (y, g, p, q) przy font-size 0.9rem.
           14px było za małe — text był obcinany na dolnej krawędzi nav-linka. */
        line-height: 1.4;
        font-weight: 600;
        color: #ffffff;
        background: none;
        border: none;
        border-radius: 8px;
        height: 3rem;
        display: flex;
        align-items: center;
        width: 100%;
        position: relative;
        overflow: hidden;
        transition: background-color 0.15s ease, color 0.15s ease;
        text-decoration: none;
    }

    .nav-item[b-46bxthhyhg]  .nav-link::before {
        content: '';
        position: absolute;
        left: 0; top: 0;
        height: 100%; width: 0;
        background: linear-gradient(90deg, #009244 0%, #c1d11c 100%);
        transition: width 0.3s ease;
        border-radius: 8px 0 0 8px;
    }

    .nav-item[b-46bxthhyhg]  .nav-link:hover::before { width: 4px; }

    /* Aktywna pozycja: wyroznia ja tlo + limonkowy pasek z lewej. Grubszy font byl trzecim
       sygnalem, a jednoczesnie rozpychal najdluzsze podpisy tak, ze lapaly wielokropek
       WLASNIE na swoim ekranie (np. „Inwentaryzacja — raporty"). Zostaje 600 jak reszta,
       a 4 px paska odejmujemy z lewego wciecia, zeby tekst nie tracil miejsca. */
    .nav-item[b-46bxthhyhg]  a.active {
        background: linear-gradient(90deg, rgba(0,146,68,0.32) 0%, rgba(193,209,28,0.18) 100%);
        color: #ffffff;
        font-weight: 600;
        border-left: 4px solid #c1d11c;
        padding-left: calc(0.5rem - 4px);
    }

    .nav-item[b-46bxthhyhg]  .nav-link:hover {
        background-color: rgba(255,255,255,0.08);
        color: #ffffff;
    }

.nav-scrollable[b-46bxthhyhg] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-46bxthhyhg] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-46bxthhyhg] {
        display: none;
    }

    .nav-scrollable[b-46bxthhyhg] {
        /* Never collapse the sidebar for wide screens */
        display: block;
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 4.5rem);
        overflow-y: auto;
        overflow-x: hidden;

        /* Custom scrollbar styles */
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
    }
    
    /* Webkit scrollbar styles (Chrome, Safari, Edge) */
    .nav-scrollable[b-46bxthhyhg]::-webkit-scrollbar {
        width: 6px;
    }
    
    .nav-scrollable[b-46bxthhyhg]::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 3px;
    }
    
    .nav-scrollable[b-46bxthhyhg]::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.25);
        border-radius: 3px;
        transition: background 0.2s ease;
    }

    .nav-scrollable[b-46bxthhyhg]::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.45);
    }
}

/* Sidebar toggle button */
.sidebar-toggle-btn[b-46bxthhyhg] {
    background: none;
    border: none;
    color: white;
    font-size: 1.05rem;
    cursor: pointer;
    padding: 0.15rem 0.3rem;
    margin: 0;
    border-radius: 6px;
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-toggle-btn:hover[b-46bxthhyhg] {
    background-color: rgba(255, 255, 255, 0.15);
}

.sidebar-toggle-btn .bi[b-46bxthhyhg] {
    margin-right: 0;
}

@media (min-width: 641px) {
    .sidebar-toggle-btn[b-46bxthhyhg] {
        display: flex;
    }
}

/* ── User info sections ── */
.user-info-collapsed[b-46bxthhyhg] {
    display: none;
}

.user-info-full[b-46bxthhyhg] {
    display: block;
}

.user-badge-line[b-46bxthhyhg] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-badge-line .bi[b-46bxthhyhg] {
    margin-right: 0.25rem;
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* nav-text: always visible by default */
.nav-text[b-46bxthhyhg] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Submenu header styling (expanded) ── */
.submenu-header[b-46bxthhyhg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.submenu-icon-wrap[b-46bxthhyhg] {
    display: flex;
    align-items: center;
    min-width: 0;
}

.submenu-chevron[b-46bxthhyhg] {
    flex-shrink: 0;
}

/* ── Nav wrapper ── */
.nav-wrapper[b-46bxthhyhg] {
    width: 100%;
    height: 100%;
}

/* ── Collapsed state (class-based, disabled on hover) ── */
.nav-wrapper.collapsed:not(:hover) .top-row[b-46bxthhyhg] {
    padding: 0 !important;
    justify-content: center;
}

.nav-wrapper.collapsed:not(:hover) .navbar-brand[b-46bxthhyhg] {
    display: none;
}

.nav-wrapper.collapsed:not(:hover) .notification-bell-wrapper[b-46bxthhyhg] {
    display: none;
}

.nav-wrapper.collapsed:not(:hover) .theme-toggle-btn[b-46bxthhyhg] {
    display: none;
}

.nav-wrapper.collapsed:not(:hover) .top-bar-spacer[b-46bxthhyhg] {
    display: none;
}

.nav-wrapper.collapsed:not(:hover) .top-bar-icons[b-46bxthhyhg] {
    justify-content: center;
    padding-right: 0;
}

.nav-wrapper.collapsed:not(:hover) .sidebar-toggle-btn[b-46bxthhyhg] {
    margin-right: 0;
}

/* User info: hide full, show collapsed */
.nav-wrapper.collapsed:not(:hover) .user-info-full[b-46bxthhyhg] {
    display: none;
}

.nav-wrapper.collapsed:not(:hover) .user-info-collapsed[b-46bxthhyhg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.3rem 0;
}

/* Hide all text labels */
.nav-wrapper.collapsed:not(:hover) .nav-text[b-46bxthhyhg] {
    display: none !important;
}

/* Center icons in nav items */
.nav-wrapper.collapsed:not(:hover) .nav-item[b-46bxthhyhg] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.nav-wrapper.collapsed:not(:hover) .nav-item[b-46bxthhyhg]  .nav-link {
    justify-content: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Submenu headers: center the icon */
.nav-wrapper.collapsed:not(:hover) .submenu-header[b-46bxthhyhg] {
    justify-content: center;
}

/* Icons: remove right margin when collapsed */
.nav-wrapper.collapsed:not(:hover) .bi[b-46bxthhyhg] {
    margin-right: 0;
    font-size: 1.25rem;
}

/* Hide all submenus when collapsed */
.nav-wrapper.collapsed:not(:hover) .delivery-submenu[b-46bxthhyhg],
.nav-wrapper.collapsed:not(:hover) .deposits-submenu[b-46bxthhyhg],
.nav-wrapper.collapsed:not(:hover) .inventory-submenu[b-46bxthhyhg],
.nav-wrapper.collapsed:not(:hover) .windykacja-submenu[b-46bxthhyhg],
.nav-wrapper.collapsed:not(:hover) .products-submenu[b-46bxthhyhg],
.nav-wrapper.collapsed:not(:hover) .tasks-submenu[b-46bxthhyhg],
.nav-wrapper.collapsed:not(:hover) .locations-submenu[b-46bxthhyhg],
.nav-wrapper.collapsed:not(:hover) .settings-submenu[b-46bxthhyhg],
.nav-wrapper.collapsed:not(:hover) .tools-submenu[b-46bxthhyhg],
.nav-wrapper.collapsed:not(:hover) .issues-submenu[b-46bxthhyhg],
.nav-wrapper.collapsed:not(:hover) .production-submenu[b-46bxthhyhg],
.nav-wrapper.collapsed:not(:hover) .orders-submenu[b-46bxthhyhg],
.nav-wrapper.collapsed:not(:hover) .documents-submenu[b-46bxthhyhg],
.nav-wrapper.collapsed:not(:hover) .leave-submenu[b-46bxthhyhg],
.nav-wrapper.collapsed:not(:hover) .pallets-submenu[b-46bxthhyhg] {
    display: none !important;
}

/* Logout button centered */
.nav-wrapper.collapsed:not(:hover) .nav-item form button.nav-link[b-46bxthhyhg] {
    justify-content: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Fix scrollable area */
.nav-wrapper.collapsed:not(:hover) .nav-scrollable[b-46bxthhyhg] {
    overflow-x: hidden;
}

/* Mobile scrollbar styles */
@media (max-width: 640px) {
    .nav-scrollable[b-46bxthhyhg] {
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
    }
    
    .nav-scrollable[b-46bxthhyhg]::-webkit-scrollbar {
        width: 4px;
    }
    
    .nav-scrollable[b-46bxthhyhg]::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .nav-scrollable[b-46bxthhyhg]::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.25);
        border-radius: 2px;
    }
    
    .nav-scrollable[b-46bxthhyhg]::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.45);
    }
}

/* ── Poziom menu widoczny po rozwinięciu ──────────────────────────────────────
   Pozycja podmenu miała dokładnie to samo tło co pozycja najwyższego poziomu —
   samo wcięcie o pół centymetra nic nie mówiło i rozwinięta grupa czytała się
   jak jedna długa lista. Rozwinięta grupa dostaje własne, wciśnięte tło i
   limonkowy pasek z lewej: widać, gdzie grupa się zaczyna i gdzie kończy.
   Selektor łapie WSZYSTKIE grupy naraz (delivery-, orders-, tasks-, …), więc
   nowa grupa dostaje to samo bez dopisywania jej tutaj. */
[class*="-submenu"][b-46bxthhyhg] {
    background: rgba(0, 0, 0, 0.16);
    box-shadow: inset 3px 0 0 rgba(193, 209, 28, 0.35);
    border-radius: 0 8px 8px 0;
}

/* Najechanie w podmenu musi być mocniejsze niż na poziomie wyżej — inaczej ginie
   na ciemniejszym tle grupy. */
[class*="-submenu"] .nav-item[b-46bxthhyhg]  .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.14);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-sawo9fcgs6],
.components-reconnect-repeated-attempt-visible[b-sawo9fcgs6],
.components-reconnect-failed-visible[b-sawo9fcgs6],
.components-pause-visible[b-sawo9fcgs6],
.components-resume-failed-visible[b-sawo9fcgs6] {
    display: none !important;
}

.components-reconnect-reload-visible[b-sawo9fcgs6] {
    display: none !important;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-sawo9fcgs6] {
    display: flex !important;
}

#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-sawo9fcgs6] {
    display: flex !important;
}

#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-sawo9fcgs6] {
    display: flex !important;
}

#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-sawo9fcgs6] {
    display: flex !important;
}

#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-sawo9fcgs6] {
    display: flex !important;
}

#components-reconnect-modal.components-reconnect-show-reload .components-reconnect-reload-visible[b-sawo9fcgs6] {
    display: inline-flex !important;
}

#components-reconnect-modal[b-sawo9fcgs6] {
    background-color: var(--surface, #fff);
    width: min(90%, 20rem);
    margin: auto;
    padding: 1.5rem;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: display 0.3s allow-discrete, overlay 0.3s allow-discrete;
    animation: fadeOut-b-sawo9fcgs6 0.3s both;
}

#components-reconnect-modal[open][b-sawo9fcgs6] {
    animation: slideUp-b-sawo9fcgs6 0.3s cubic-bezier(.05, .89, .25, 1.02),
               fadeIn-b-sawo9fcgs6 0.2s ease-in-out;
    animation-fill-mode: both;
}

#components-reconnect-modal[b-sawo9fcgs6]::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
    animation: fadeIn-b-sawo9fcgs6 0.2s ease-in-out;
}

@keyframes slideUp-b-sawo9fcgs6 {
    from {
        transform: translateY(15px) scale(0.98);
    }
    to {
        transform: translateY(0) scale(1);
    }
}

@keyframes fadeIn-b-sawo9fcgs6 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut-b-sawo9fcgs6 {
    from { opacity: 1; }
    to { opacity: 0; }
}

.components-reconnect-container[b-sawo9fcgs6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.components-reconnect-first-attempt-visible[b-sawo9fcgs6],
.components-reconnect-repeated-attempt-visible[b-sawo9fcgs6],
.components-reconnect-failed-visible[b-sawo9fcgs6],
.components-pause-visible[b-sawo9fcgs6],
.components-resume-failed-visible[b-sawo9fcgs6] {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.components-reconnect-icon-wrapper[b-sawo9fcgs6] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--global-palette1) 0%, var(--global-palette2) 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.components-reconnect-icon-wrapper.warning[b-sawo9fcgs6] {
    background: linear-gradient(135deg, #ffa726 0%, #ff9800 100%);
}

.components-reconnect-icon-wrapper.error[b-sawo9fcgs6] {
    background: linear-gradient(135deg, #ef5350 0%, #e53935 100%);
}

.components-reconnect-icon-wrapper.info[b-sawo9fcgs6] {
    background: linear-gradient(135deg, #42a5f5 0%, #1e88e5 100%);
}

.components-reconnect-icon[b-sawo9fcgs6] {
    font-size: 1.5rem;
    color: white;
}

.components-reconnect-container h3[b-sawo9fcgs6] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text, #212529);
}

.components-reconnect-container p[b-sawo9fcgs6] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted, #6c757d);
}

.components-reconnect-container p strong[b-sawo9fcgs6] {
    color: var(--text, #212529);
}

.components-reconnect-buttons[b-sawo9fcgs6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

#components-reconnect-modal button[b-sawo9fcgs6] {
    border: 0;
    background: linear-gradient(135deg, var(--global-palette1) 0%, var(--global-palette2) 100%);
    color: white;
    padding: 0.65rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
}

#components-reconnect-modal button.btn-secondary[b-sawo9fcgs6] {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
}

#components-reconnect-modal button:hover[b-sawo9fcgs6] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

#components-reconnect-modal button:active[b-sawo9fcgs6] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

@media (max-width: 576px) {
    #components-reconnect-modal[b-sawo9fcgs6] {
        width: 85%;
        padding: 1.25rem;
    }

    .components-reconnect-icon-wrapper[b-sawo9fcgs6] {
        width: 45px;
        height: 45px;
    }

    .components-reconnect-icon[b-sawo9fcgs6] {
        font-size: 1.3rem;
    }

    .components-reconnect-container h3[b-sawo9fcgs6] {
        font-size: 1rem;
    }
}
/* /Components/Pages/Admin/LeaveRequests.razor.rz.scp.css */
.req-wrap[b-db01m4l59b] {
    padding: 1rem 1.5rem;
}

.req-pageheader[b-db01m4l59b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.req-pageheader h3[b-db01m4l59b] { color: var(--text, #0f172a); }

.req-tabs[b-db01m4l59b] {
    display: inline-flex;
    background: var(--surface-3, #f1f5f9);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 999px;
    padding: 3px;
}
.req-tab[b-db01m4l59b] {
    border: none;
    background: transparent;
    color: var(--text-secondary, #475569);
    padding: 0.35rem 1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.req-tab.active[b-db01m4l59b] {
    background: linear-gradient(135deg, var(--global-palette1, #009244), var(--global-palette6, #16a085));
    color: #fff;
}
.req-tab-count[b-db01m4l59b] {
    background: #f0ad4e;
    color: #3a2a00;
    border-radius: 999px;
    padding: 0 0.4rem;
    font-size: 0.72rem;
    font-weight: 800;
}
.req-tab.active .req-tab-count[b-db01m4l59b] { background: #fff; color: var(--global-palette1, #009244); }

.req-empty[b-db01m4l59b] {
    border: 1px dashed var(--border-strong, #cbd5e1);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    color: var(--text-muted, #64748b);
    background: var(--surface-2, #f8fafc);
}
.req-empty i[b-db01m4l59b] { font-size: 1.6rem; display: block; margin-bottom: 0.4rem; color: var(--global-palette1, #009244); }

.req-list[b-db01m4l59b] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.req-card[b-db01m4l59b] {
    display: flex;
    gap: 0.9rem;
    /* tlo + obwodka = subtelny tint koloru rodzaju urlopu (--kind inline z LeaveDisplay.KindColor); lewy pasek nadal niesie status */
    background: color-mix(in srgb, var(--kind, var(--border-strong)) 9%, var(--surface, #fff));
    border: 1px solid color-mix(in srgb, var(--kind, var(--border-strong)) 28%, var(--border, #e2e8f0));
    border-left: 4px solid var(--border-strong, #cbd5e1);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    align-items: flex-start;
}
.req-card.status-pending[b-db01m4l59b] { border-left-color: #f0ad4e; }
.req-card.status-approved[b-db01m4l59b] { border-left-color: var(--global-palette1, #009244); }
.req-card.status-rejected[b-db01m4l59b] { border-left-color: #dc3545; }
.req-card.status-cancelled[b-db01m4l59b] { border-left-color: var(--text-faint, #94a3b8); }
/* dark: mocniejszy tint, by kolor rodzaju byl widoczny na ciemnym tle (tylko tlo — lewy pasek statusu zostaje) */
[data-theme="dark"] .req-card[b-db01m4l59b] {
    background: color-mix(in srgb, var(--kind, var(--border-strong)) 24%, var(--surface));
}

.req-kind[b-db01m4l59b] {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    color: #fff;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.req-card-main[b-db01m4l59b] { flex: 1 1 auto; min-width: 0; }
.req-card-top[b-db01m4l59b] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.req-emp[b-db01m4l59b] {
    font-weight: 700;
    color: var(--text, #0f172a);
}
.req-range[b-db01m4l59b] {
    font-size: 0.85rem;
    color: var(--text-secondary, #475569);
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.req-days[b-db01m4l59b] {
    background: var(--surface-3, #f1f5f9);
    border-radius: 6px;
    padding: 0 0.4rem;
    font-weight: 700;
    color: var(--text, #0f172a);
}
.req-kindlabel[b-db01m4l59b] { color: var(--text-muted, #64748b); }
.req-note[b-db01m4l59b] {
    font-size: 0.84rem;
    color: var(--text-secondary, #475569);
    margin-top: 0.35rem;
}

.req-conflict[b-db01m4l59b] {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    border-radius: 8px;
    padding: 0.35rem 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.req-conflict.ok[b-db01m4l59b] {
    background: color-mix(in srgb, var(--global-palette1, #009244) 10%, transparent);
    color: var(--text-secondary, #2f6f4f);
}
.req-conflict.warn[b-db01m4l59b] {
    background: rgba(240, 173, 78, 0.16);
    color: var(--text, #7a5200);
}
.conflict-chip[b-db01m4l59b] {
    background: var(--surface, #fff);
    border: 1px solid var(--border-strong, #cbd5e1);
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
    font-weight: 600;
    color: var(--text, #0f172a);
}

.req-decision[b-db01m4l59b] {
    font-size: 0.78rem;
    color: var(--text-muted, #64748b);
    margin-top: 0.35rem;
}

.req-actions[b-db01m4l59b] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .req-card[b-db01m4l59b] { flex-wrap: wrap; }
    .req-actions[b-db01m4l59b] { flex-direction: row; width: 100%; }
}

/* Rozbicie zaległego urlopu na roczniki pochodzenia — „z 2024: 3, z 2025: 8".
   Chipy, a nie jedna linia tekstu, bo rocznik i liczba mają się czytać osobno. */
.lv-roczniki[b-db01m4l59b] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0.2rem 0 0.35rem;
}

.lv-rocznik[b-db01m4l59b] {
    font-size: 0.74rem;
    line-height: 1.1;
    padding: 0.14rem 0.42rem;
    border-radius: 999px;
    border: 1px solid var(--border, rgba(128, 128, 128, 0.45));
    color: var(--text-muted, #64748b);
    white-space: nowrap;
}

.lv-rocznik strong[b-db01m4l59b] { color: var(--text, #0f172a); }

/* Stan „kliknij ponownie, żeby skasować" — przycisk ma wyglądać inaczej niż przed chwilą,
   bo to jedyny sygnał, że drugie kliknięcie naprawdę usuwa dni. */
.lv-zeruj-potwierdz[b-db01m4l59b] {
    outline: 2px solid #b3261e;
    outline-offset: 2px;
    font-weight: 700;
}
/* /Components/Pages/Admin/LogViewer.razor.rz.scp.css */
.log-message-full[b-ym7n3ot5sp] {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: monospace;
    font-size: 0.85em;
    line-height: 1.4;
}

.exception-preview[b-ym7n3ot5sp] {
    font-family: monospace;
    font-size: 0.9em;
}

.log-table tbody tr[b-ym7n3ot5sp] {
    vertical-align: top;
}

.spin[b-ym7n3ot5sp] {
    animation: spin 1s linear infinite;
}

@@keyframes spin {
    from[b-ym7n3ot5sp] {
        transform: rotate(0deg);
    }

    to[b-ym7n3ot5sp] {
        transform: rotate(360deg);
    }
}

.table tbody tr.log-error[b-ym7n3ot5sp] {
    background-color: rgba(220, 53, 69, 0.1) !important;
}

.table tbody tr.log-warning[b-ym7n3ot5sp] {
    background-color: rgba(255, 193, 7, 0.1) !important;
}

.table tbody tr.log-fatal[b-ym7n3ot5sp] {
    background-color: rgba(220, 53, 69, 0.2) !important;
}

.card.card-error[b-ym7n3ot5sp] {
    border-left: 4px solid #dc3545;
}

.card.card-warning[b-ym7n3ot5sp] {
    border-left: 4px solid #ffc107;
}

.card.card-fatal[b-ym7n3ot5sp] {
    border-left: 4px solid #dc3545;
    background-color: rgba(220, 53, 69, 0.1);
}

/* Datetime-local input styling */
input[type="datetime-local"][b-ym7n3ot5sp] {
    font-size: 0.9em;
}
/* /Components/Pages/Admin/ManageLocations.razor.rz.scp.css */
/* Ikony Bootstrap Icons używane na stronie ManageLocations */
.bi-plus-circle[b-rnf9r58vw3] {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

.bi-magic[b-rnf9r58vw3] {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    margin-right: 0.25rem;
}

.bi-arrow-clockwise[b-rnf9r58vw3] {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

.bi-pencil[b-rnf9r58vw3] {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

.bi-trash[b-rnf9r58vw3] {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

.bi-save[b-rnf9r58vw3] {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

.bi-exclamation-triangle-fill[b-rnf9r58vw3] {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    vertical-align: -0.125em;
    margin-right: 0.5rem;
}

.bi-gear[b-rnf9r58vw3] {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    margin-right: 0.25rem;
}

/* Nakładka z paskiem postępu generowania etykiet */
.label-progress-overlay[b-rnf9r58vw3] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1080;
}

.label-progress-box[b-rnf9r58vw3] {
    background: var(--surface, #fff);
    color: var(--text, #16202e);
    border-radius: 14px;
    padding: 1.4rem 1.6rem;
    width: min(440px, 90vw);
    box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .45);
}

.label-progress-title[b-rnf9r58vw3] {
    font-weight: 700;
    margin-bottom: 0.85rem;
}

.label-progress-sub[b-rnf9r58vw3] {
    margin-top: 0.6rem;
    font-size: 0.82rem;
    color: var(--text-muted, #6b7689);
}

[data-theme="dark"] .label-progress-box[b-rnf9r58vw3] {
    background: var(--surface);
    color: var(--text);
}

/* Pasek narzędzi (poza zielonym hero — czytelne kolory na jasnym tle, pogrupowane) */
.loc-toolbar[b-rnf9r58vw3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    padding: 0.55rem 0.7rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

.loc-tb-group[b-rnf9r58vw3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.loc-tb-end[b-rnf9r58vw3] {
    margin-left: auto;
}

.loc-tb-sep[b-rnf9r58vw3] {
    align-self: stretch;
    width: 1px;
    background: var(--border, #e2e8f0);
    margin: 0.15rem 0.3rem;
}

.loc-toolbar .btn[b-rnf9r58vw3] {
    border-radius: 8px;
    font-size: 0.83rem;
    font-weight: 500;
    white-space: nowrap;
    padding: 0.42rem 0.8rem;
}

[data-theme="dark"] .loc-toolbar[b-rnf9r58vw3] {
    background: var(--surface);
    border-color: var(--border);
}

@media (max-width: 820px) {
    .loc-tb-sep[b-rnf9r58vw3] { display: none; }
    .loc-tb-end[b-rnf9r58vw3] { margin-left: 0; }
}

/* Kontekstowy pasek zaznaczenia (nad tabelą, tylko gdy coś zaznaczono) */
.loc-selbar[b-rnf9r58vw3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    background: #e0e7ff;
    border: 1px solid #c7d2fe;
    border-radius: 10px;
    padding: 0.5rem 0.85rem;
    margin-bottom: 0.9rem;
}

.loc-selbar-info[b-rnf9r58vw3] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
    color: #3730a3;
}

    .loc-selbar-info .bi[b-rnf9r58vw3] {
        color: #4338ca;
    }

.loc-selbar-actions[b-rnf9r58vw3] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.loc-selbar .btn[b-rnf9r58vw3] {
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
}

[data-theme="dark"] .loc-selbar[b-rnf9r58vw3] {
    background: rgba(99, 102, 241, .16);
    border-color: rgba(99, 102, 241, .4);
}

    [data-theme="dark"] .loc-selbar-info[b-rnf9r58vw3] {
        color: #c7d2fe;
    }

        [data-theme="dark"] .loc-selbar-info .bi[b-rnf9r58vw3] {
            color: #a5b4fc;
        }

.manage-locations-header[b-rnf9r58vw3] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.manage-locations-header h3[b-rnf9r58vw3] {
    margin: 0;
}

.manage-locations-actions[b-rnf9r58vw3] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.manage-locations-actions .btn[b-rnf9r58vw3] {
    white-space: nowrap;
}

/* Animacje dla alertów */
.alert[b-rnf9r58vw3] {
    animation: slideDown-b-rnf9r58vw3 0.3s ease-out;
}

@keyframes slideDown-b-rnf9r58vw3 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
    transform: translateY(0);
    }
}

/* Styl dla modali */
.modal.show[b-rnf9r58vw3] {
    animation: fadeIn-b-rnf9r58vw3 0.15s ease-in;
}

@keyframes fadeIn-b-rnf9r58vw3 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-dialog[b-rnf9r58vw3] {
    animation: slideUp-b-rnf9r58vw3 0.3s ease-out;
}

@keyframes slideUp-b-rnf9r58vw3 {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
      opacity: 1;
    }
}

/* Responsywność dla małych ekranów */
@media (max-width: 768px) {
    .table-responsive[b-rnf9r58vw3] {
        font-size: 0.875rem;
    }

    .manage-locations-actions[b-rnf9r58vw3] {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .manage-locations-actions .btn[b-rnf9r58vw3] {
        width: 100%;
    }
    
    .btn-group-sm > .btn[b-rnf9r58vw3] {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
}

/* Hover efekty dla wierszy tabeli */
.table-hover tbody tr:hover[b-rnf9r58vw3] {
    background-color: rgba(0, 0, 0, 0.025);
    cursor: pointer;
}

/* Statystyki - karty */
.card[b-rnf9r58vw3] {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card:hover[b-rnf9r58vw3] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Spinner loading */
.spinner-border[b-rnf9r58vw3] {
    animation: spinner-border-b-rnf9r58vw3 0.75s linear infinite;
}

@keyframes spinner-border-b-rnf9r58vw3 {
    to {
        transform: rotate(360deg);
    }
}
/* /Components/Pages/Admin/MyLeave.razor.rz.scp.css */
.leave-wrap[b-guhxf5rhii] {
    padding: 1rem 1.5rem;
}

.leave-pageheader[b-guhxf5rhii] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.leave-pageheader h3[b-guhxf5rhii] {
    color: var(--text, #0f172a);
}

/* ===== Sygnatura: licznik urlopu ===== */
.allowance-card[b-guhxf5rhii] {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 16px;
    padding: 1.5rem 1.75rem;
    display: grid;
    grid-template-columns: minmax(180px, auto) 1fr;
    gap: 1.5rem 2.5rem;
    align-items: center;
    box-shadow: var(--shadow-sm, 0 2px 4px rgba(0,0,0,0.05));
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.allowance-card[b-guhxf5rhii]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--global-palette1, #009244), var(--global-palette2, #c1d11c));
}

.allowance-eyebrow[b-guhxf5rhii] {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted, #64748b);
    margin-bottom: 0.25rem;
}
.allowance-figure[b-guhxf5rhii] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.allowance-number[b-guhxf5rhii] {
    font-size: 3.25rem;
    font-weight: 800;
    line-height: 1;
    color: var(--global-palette1, #009244);
    font-variant-numeric: tabular-nums;
}
.allowance-unit[b-guhxf5rhii] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary, #475569);
}

.allowance-gauge[b-guhxf5rhii] {
    height: 14px;
    border-radius: 999px;
    background: var(--surface-3, #f1f5f9);
    overflow: hidden;
    border: 1px solid var(--border, #e2e8f0);
}
.allowance-gauge-fill[b-guhxf5rhii] {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--global-palette1, #009244), var(--global-palette6, #16a085));
    transition: width 0.4s ease;
    min-width: 2px;
}
.allowance-stats[b-guhxf5rhii] {
    margin-top: 0.6rem;
    font-size: 0.85rem;
    color: var(--text-secondary, #475569);
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    align-items: center;
}
.allowance-stats strong[b-guhxf5rhii] { color: var(--text, #0f172a); }
.allowance-stats .dot[b-guhxf5rhii] { color: var(--text-faint, #94a3b8); }

/* ===== Lista wniosków ===== */
.leave-section-label[b-guhxf5rhii] {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text-muted, #64748b);
    margin: 0.5rem 0 0.6rem;
}

.leave-empty[b-guhxf5rhii] {
    border: 1px dashed var(--border-strong, #cbd5e1);
    border-radius: 12px;
    padding: 1.75rem;
    text-align: center;
    color: var(--text-muted, #64748b);
    background: var(--surface-2, #f8fafc);
}
.leave-empty i[b-guhxf5rhii] { font-size: 1.5rem; display: block; margin-bottom: 0.4rem; }

.leave-timeline[b-guhxf5rhii] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.leave-item[b-guhxf5rhii] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    /* tlo + obwodka = subtelny tint koloru rodzaju urlopu (--kind inline z LeaveDisplay.KindColor); lewy pasek nadal niesie status */
    background: color-mix(in srgb, var(--kind, var(--border-strong)) 9%, var(--surface, #fff));
    border: 1px solid color-mix(in srgb, var(--kind, var(--border-strong)) 28%, var(--border, #e2e8f0));
    border-left: 4px solid var(--border-strong, #cbd5e1);
    border-radius: 12px;
    padding: 0.7rem 0.9rem;
}
.leave-item.status-pending[b-guhxf5rhii] { border-left-color: #f0ad4e; }
.leave-item.status-approved[b-guhxf5rhii] { border-left-color: var(--global-palette1, #009244); }
.leave-item.status-rejected[b-guhxf5rhii] { border-left-color: #dc3545; }
.leave-item.status-cancelled[b-guhxf5rhii] { border-left-color: var(--text-faint, #94a3b8); }
/* dark: mocniejszy tint, by kolor rodzaju byl widoczny na ciemnym tle (tylko tlo — lewy pasek statusu zostaje) */
[data-theme="dark"] .leave-item[b-guhxf5rhii] {
    background: color-mix(in srgb, var(--kind, var(--border-strong)) 24%, var(--surface));
}

.leave-item-kind[b-guhxf5rhii] {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.leave-item-body[b-guhxf5rhii] { flex: 1 1 auto; min-width: 0; }
.leave-item-top[b-guhxf5rhii] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.leave-item-range[b-guhxf5rhii] {
    font-weight: 700;
    color: var(--text, #0f172a);
}
.leave-item-meta[b-guhxf5rhii] {
    font-size: 0.83rem;
    color: var(--text-secondary, #475569);
    margin-top: 0.15rem;
}
.leave-item-meta strong[b-guhxf5rhii] { color: var(--text, #0f172a); }
.leave-item-note[b-guhxf5rhii] { color: var(--text-muted, #64748b); font-style: italic; margin-left: 0.3rem; }
.leave-item-decision[b-guhxf5rhii] {
    font-size: 0.8rem;
    color: var(--text-muted, #64748b);
    margin-top: 0.3rem;
}

.newreq-summary[b-guhxf5rhii] {
    background: var(--surface-2, #f8fafc);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    padding: 0.5rem 0.7rem;
    font-size: 0.85rem;
    color: var(--text-secondary, #475569);
}

@media (max-width: 640px) {
    .allowance-card[b-guhxf5rhii] { grid-template-columns: 1fr; gap: 1rem; }
}
/* /Components/Pages/Admin/OccupiedLocations.razor.rz.scp.css */
.occupied-container .calculation-hint[b-olzg1foka3] {
    border-left: 4px solid #0d6efd;
    background: linear-gradient(90deg, rgba(13,110,253,0.08), rgba(13,110,253,0.02));
}

.occupied-container .filter-card[b-olzg1foka3] {
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.occupied-container .occupied-table-card[b-olzg1foka3] {
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.occupied-container .occupied-table thead th[b-olzg1foka3] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-2);
}

.occupied-container .occupied-table tbody tr:hover[b-olzg1foka3] {
    background-color: rgba(13,110,253,0.06);
}

.occupied-container .occupied-summary[b-olzg1foka3] {
    font-weight: 500;
}

.occupied-container .occupied-filter-row[b-olzg1foka3] {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(420px, 1fr) 140px;
    gap: 12px;
}

.occupied-container .occupied-filter-search[b-olzg1foka3],
.occupied-container .occupied-filter-chips[b-olzg1foka3],
.occupied-container .occupied-filter-action[b-olzg1foka3] {
    min-width: 0;
}

.occupied-container .occupied-toggles[b-olzg1foka3] {
    min-height: 40px;
    align-items: center;
    flex-wrap: nowrap;
}

.occupied-container .status-toggles[b-olzg1foka3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.occupied-container .status-toggle[b-olzg1foka3] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.occupied-container .occupied-filter-action[b-olzg1foka3] {
    display: flex;
    flex-direction: column;
}

.occupied-container .occupied-filter-action .form-label[b-olzg1foka3] {
    margin-bottom: 0.4rem;
}

.occupied-container .status-toggle:hover[b-olzg1foka3] {
    border-color: #009244;
    background: rgba(0, 146, 68, 0.04);
}

.occupied-container .status-toggle.active[b-olzg1foka3] {
    border-color: #009244;
    background: rgba(0, 146, 68, 0.1);
    color: #009244;
}

.occupied-container .status-toggle input[type="checkbox"][b-olzg1foka3] {
    display: none;
}

.occupied-container .status-toggle .toggle-dot[b-olzg1foka3] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
    transition: background 0.15s;
}

.occupied-container .status-toggle.active .toggle-dot[b-olzg1foka3] {
    background: #009244;
}

.occupied-container .occupied-qty[b-olzg1foka3] {
    font-size: 1rem;
    color: #198754;
}

/* Ile z tego miejsca ktos wlasnie niesie w koszyku. Stoi obok ilosci, a nie zamiast niej:
   liczba glowna mowi, co zostalo na polce, a ta tlumaczy, gdzie podziala sie reszta. */
.occupied-container .occupied-basket[b-olzg1foka3] {
    display: inline-block;
    margin-left: .4rem;
    padding: .05rem .4rem;
    border-radius: 6px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--global-palette2, #c1d11c);
    background: rgba(193, 209, 28, 0.14);
    white-space: nowrap;
}

.occupied-container .products-table-card[b-olzg1foka3] {
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border-radius: 12px;
    overflow: hidden;
}

.occupied-container .products-table thead th[b-olzg1foka3] {
    white-space: nowrap;
}

.occupied-container .occupied-search-btn[b-olzg1foka3] {
    height: 40px;
    font-weight: 600;
    border-radius: 10px;
    background: linear-gradient(135deg, #009244, #0bb35b);
    border: 0;
    box-shadow: 0 2px 8px rgba(0, 146, 68, 0.25);
}

.occupied-container .occupied-search-btn:hover[b-olzg1foka3] {
    background: linear-gradient(135deg, #0bb35b, #009244);
}

@media (max-width: 991.98px) {
    .occupied-container .occupied-filter-row[b-olzg1foka3] {
        grid-template-columns: 1fr;
    }

    .occupied-container .occupied-toggles[b-olzg1foka3] {
        flex-wrap: wrap;
    }

    .occupied-container .occupied-filter-action .form-label[b-olzg1foka3] {
        display: none;
    }
}
/* /Components/Pages/Admin/Settings.razor.rz.scp.css */
/* =============================================
   Settings Page — Custom Design System
   Colors: #009244 (green), #c1d11c (lime), var(--text) (dark)
   ============================================= */

/* ===== Page Header ===== */
.settings-header[b-ipzlv8r7kr] {
    background: linear-gradient(135deg, #009244 0%, #c1d11c 100%);
    border-radius: 16px;
    padding: 1.5rem 2rem;
    margin-bottom: 1.75rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.settings-header h3[b-ipzlv8r7kr] {
    margin: 0;
    font-weight: 700;
    font-size: 1.4rem;
}

.settings-header .header-sub[b-ipzlv8r7kr] {
    font-size: 0.88rem;
    opacity: 0.85;
    font-weight: 400;
}

/* ===== Section Cards ===== */
.settings-section[b-ipzlv8r7kr] {
    background: var(--surface);
    border: none;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    margin-bottom: 1.25rem;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.settings-section:hover[b-ipzlv8r7kr] {
    box-shadow: 0 4px 20px rgba(0,0,0,0.09);
}

/* ===== Section Header ===== */
.section-header[b-ipzlv8r7kr] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--border);
}

.section-icon[b-ipzlv8r7kr] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fff;
    flex-shrink: 0;
}

.section-icon.green[b-ipzlv8r7kr]   { background: linear-gradient(135deg, #009244, #00b359); }
.section-icon.blue[b-ipzlv8r7kr]    { background: linear-gradient(135deg, #0d6efd, #3d8bfd); }
.section-icon.purple[b-ipzlv8r7kr]  { background: linear-gradient(135deg, #6f42c1, #8b5cf6); }
.section-icon.orange[b-ipzlv8r7kr]  { background: linear-gradient(135deg, #fd7e14, #f59e0b); }
.section-icon.teal[b-ipzlv8r7kr]    { background: linear-gradient(135deg, #0dcaf0, #20c997); }
.section-icon.red[b-ipzlv8r7kr]     { background: linear-gradient(135deg, #dc3545, #ef4444); }
.section-icon.indigo[b-ipzlv8r7kr]  { background: linear-gradient(135deg, #6610f2, #7c3aed); }
.section-icon.lime[b-ipzlv8r7kr]    { background: linear-gradient(135deg, #84cc16, #a3e635); }
.section-icon.cyan[b-ipzlv8r7kr]    { background: linear-gradient(135deg, #06b6d4, #22d3ee); }
.section-icon.slate[b-ipzlv8r7kr]   { background: linear-gradient(135deg, #475569, #64748b); }

.section-title[b-ipzlv8r7kr] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    line-height: 1.2;
}

.section-subtitle[b-ipzlv8r7kr] {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0;
    font-weight: 400;
}

.section-body[b-ipzlv8r7kr] {
    padding: 1.25rem 1.5rem;
}

/* ===== Toggle Grid ===== */
.toggle-grid[b-ipzlv8r7kr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem;
}

.toggle-tile[b-ipzlv8r7kr] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    transition: all 0.15s ease;
    cursor: pointer;
}

.toggle-tile:hover[b-ipzlv8r7kr] {
    border-color: #b8d4c8;
    background: #f0faf5;
}

.toggle-tile.active[b-ipzlv8r7kr] {
    border-color: #009244;
    background: rgba(0, 146, 68, 0.06);
}

.toggle-tile .form-check-input[b-ipzlv8r7kr] {
    width: 2.75em;
    height: 1.4em;
    margin-top: 0.15rem;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 2em;
    transition: all 0.15s ease;
}

.toggle-tile .form-check-input:checked[b-ipzlv8r7kr] {
    background-color: #009244;
    border-color: #009244;
}

.toggle-tile .form-check-input:focus[b-ipzlv8r7kr] {
    box-shadow: 0 0 0 3px rgba(0, 146, 68, 0.15);
    border-color: #009244;
}

.toggle-label[b-ipzlv8r7kr] {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text);
    line-height: 1.3;
}

.toggle-desc[b-ipzlv8r7kr] {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.3;
    margin-top: 0.15rem;
}

/* ===== Form Controls ===== */
.section-body .form-label[b-ipzlv8r7kr] {
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
}

.section-body .form-control[b-ipzlv8r7kr],
.section-body .form-select[b-ipzlv8r7kr] {
    border-radius: 10px;
    border: 1.5px solid var(--border);
    font-size: 0.9rem;
    padding: 0.55rem 0.85rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.section-body .form-control:focus[b-ipzlv8r7kr],
.section-body .form-select:focus[b-ipzlv8r7kr] {
    border-color: #009244;
    box-shadow: 0 0 0 3px rgba(0, 146, 68, 0.12);
}

.section-body .form-text[b-ipzlv8r7kr] {
    font-size: 0.78rem;
    color: var(--text-faint);
}

.section-body .input-group .form-control[b-ipzlv8r7kr] {
    border-radius: 0 10px 10px 0;
}

.section-body .input-group .form-control-color[b-ipzlv8r7kr] {
    border-radius: 10px 0 0 10px;
    border-right: none;
}

/* ===== Alert overrides inside sections ===== */
.section-body .alert[b-ipzlv8r7kr] {
    border-radius: 10px;
    font-size: 0.88rem;
    border: none;
}

/* ===== Sticky Save Bar ===== */
.save-bar[b-ipzlv8r7kr] {
    position: sticky;
    bottom: 0;
    z-index: 100;
    background: var(--surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    border-radius: 14px 14px 0 0;
    padding: 0.85rem 1.5rem;
    margin: 1rem -12px 0 -12px;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.06);
}

.btn-save-main[b-ipzlv8r7kr] {
    background: linear-gradient(135deg, #009244 0%, #00b359 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 0.65rem 2rem;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 2px 8px rgba(0, 146, 68, 0.3);
}

.btn-save-main:hover[b-ipzlv8r7kr] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 146, 68, 0.4);
}

.btn-save-main:active[b-ipzlv8r7kr] {
    transform: translateY(0);
}

/* ===== Highlight ===== */
.highlight-setting[b-ipzlv8r7kr] {
    animation: highlight-pulse-b-ipzlv8r7kr 2s ease-in-out 3;
    padding: 8px;
    border: 1.5px solid #ffc107 !important;
    border-radius: 10px;
    background: rgba(255, 193, 7, 0.05);
}

@keyframes highlight-pulse-b-ipzlv8r7kr {
    0%, 100% { background-color: rgba(255, 193, 7, 0.05); }
    50% { background-color: rgba(255, 193, 7, 0.2); }
}

/* ===== Badge close ===== */
.badge .btn-close-white[b-ipzlv8r7kr] {
    filter: brightness(0) invert(1);
    opacity: 0.8;
    transition: opacity 0.2s;
}

.badge .btn-close-white:hover[b-ipzlv8r7kr] {
    opacity: 1;
}

/* ===== Folder browser ===== */
.folder-item[b-ipzlv8r7kr] {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    cursor: pointer;
}

.folder-item:hover[b-ipzlv8r7kr] {
    background: #e2f3e8;
}

.folder-item:last-child[b-ipzlv8r7kr] {
    border-bottom: none;
}

/* ===== Subsection divider ===== */
.section-divider[b-ipzlv8r7kr] {
    border: none;
    height: 1px;
    background: var(--border);
    margin: 0.75rem 0;
}

/* ===== Link buttons inside sections ===== */
.section-body .btn-outline-primary[b-ipzlv8r7kr] {
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* ===== List group overrides (deposit warehouses) ===== */
.section-body .list-group-item[b-ipzlv8r7kr] {
    border-radius: 8px !important;
    border: 1px solid var(--border);
    margin-bottom: 0.35rem;
}

/* ===== Responsive ===== */
@media (max-width: 576px) {
    .settings-header[b-ipzlv8r7kr] {
        padding: 1.25rem 1.25rem;
        border-radius: 12px;
    }
    .section-body[b-ipzlv8r7kr] {
        padding: 1rem;
    }
    .toggle-grid[b-ipzlv8r7kr] {
        grid-template-columns: 1fr;
    }
    .save-bar[b-ipzlv8r7kr] {
        margin: 1rem -8px 0 -8px;
        padding: 0.75rem 1rem;
    }
}

/* ===== Settings Layout — TOC + Main ===== */
.settings-layout[b-ipzlv8r7kr] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.settings-toc[b-ipzlv8r7kr] {
    flex: 0 0 220px;
    position: sticky;
    top: 80px;
    align-self: flex-start;
    background: var(--surface);
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    padding: 1rem 0.75rem;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

.settings-toc-title[b-ipzlv8r7kr] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: 0 0.75rem 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.5rem;
}

.settings-toc-nav[b-ipzlv8r7kr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings-toc-nav a[b-ipzlv8r7kr] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s ease;
}

.settings-toc-nav a i[b-ipzlv8r7kr] {
    color: #009244;
    font-size: 0.95rem;
    width: 18px;
    text-align: center;
}

.settings-toc-nav a:hover[b-ipzlv8r7kr] {
    background: #f0f9f3;
    color: #009244;
}

.settings-main[b-ipzlv8r7kr] {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 991.98px) {
    .settings-layout[b-ipzlv8r7kr] {
        flex-direction: column;
    }
    .settings-toc[b-ipzlv8r7kr] {
        position: static;
        max-height: none;
        flex: 1 1 auto;
        width: 100%;
    }
    .settings-toc-nav[b-ipzlv8r7kr] {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .settings-toc-nav a[b-ipzlv8r7kr] {
        flex: 0 0 auto;
    }
    /* .settings-layout ma align-items:flex-start — po zlamaniu na kolumne dziecko dostaje
       szerokosc WLASNEJ tresci, nie rodzica, wiec sekcje ustawien rozpychaly strone poza
       ekran telefonu (poziomy pasek przewijania przy 390 px). TOC dostal juz width:100%,
       glowna kolumna byla pominieta. */
    .settings-main[b-ipzlv8r7kr] {
        width: 100%;
        align-self: stretch;
    }
}

/* ===== Full-width override for Settings page ===== */
[b-ipzlv8r7kr] .settings-page,
.settings-page[b-ipzlv8r7kr] {
    max-width: 100% !important;
    width: 100%;
}
/* /Components/Pages/Admin/UserManagement.razor.rz.scp.css */
/* UserManagement Component Styles
   Visual language aligned with /admin/settings (Settings.razor.css):
   gradient page header, white rounded soft-shadow section cards. */

.user-management-container[b-z2pp0zjk4h] {
    padding: 0.5rem 0 2rem 0;
}

/* ===== Page Header (matches .settings-header) ===== */
.user-management-header[b-z2pp0zjk4h] {
    background: linear-gradient(135deg, #009244 0%, #c1d11c 100%);
    border-radius: 16px;
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.user-management-header h3[b-z2pp0zjk4h] {
    margin: 0;
    font-weight: 700;
    font-size: 1.4rem;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.user-management-header h3 i[b-z2pp0zjk4h] {
    font-size: 1.3rem;
    opacity: 0.95;
}

.btn-add-user[b-z2pp0zjk4h] {
    background: var(--surface);
    background-image: none;
    border: none;
    color: #009244;
    padding: 0.6rem 1.25rem;
    border-radius: 999px;
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-add-user:hover[b-z2pp0zjk4h] {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    color: #009244;
    background: #f0faf5;
}

/* ===== Section Card (matches .settings-section) ===== */
.users-card[b-z2pp0zjk4h] {
    background: var(--surface);
    border: none;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
    margin-bottom: 1.25rem;
}

.users-card:hover[b-z2pp0zjk4h] {
    box-shadow: 0 4px 20px rgba(0,0,0,0.09);
}

/* ===== Card / Section Header (matches .section-header) ===== */
.session-card-header[b-z2pp0zjk4h] {
    padding: 1.1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--surface-2);
    background: transparent;
}

.session-card-header h5[b-z2pp0zjk4h] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

/* Icon "blob" before card title — same look as .section-icon in Settings */
.session-card-header h5 > i.bi[b-z2pp0zjk4h] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fff;
    background: linear-gradient(135deg, #009244, #00b359);
    flex-shrink: 0;
}

/* ===== Tables ===== */
.users-table[b-z2pp0zjk4h] {
    margin-bottom: 0;
}

.users-table thead[b-z2pp0zjk4h] {
    background: var(--surface-2);
}

.users-table thead th[b-z2pp0zjk4h] {
    border: none;
    padding: 0.85rem 1rem;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

.users-table tbody tr[b-z2pp0zjk4h] {
    transition: background-color 0.15s ease;
    border-bottom: 1px solid var(--border);
}

.users-table tbody tr:hover[b-z2pp0zjk4h] {
    background-color: var(--surface-2);
}

.users-table tbody td[b-z2pp0zjk4h] {
    padding: 1rem;
    vertical-align: middle;
}

/* ===== Refresh / utility buttons inside card headers ===== */
.btn-refresh-sessions[b-z2pp0zjk4h] {
    border: none;
    color: #fff;
    background-image: var(--gradient-primary);
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.btn-refresh-sessions:hover:enabled[b-z2pp0zjk4h] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-refresh-sessions:disabled[b-z2pp0zjk4h] {
    opacity: .75;
}

.force-logout-modal-content[b-z2pp0zjk4h] {
    border: none;
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
}

.force-logout-modal-header[b-z2pp0zjk4h] {
    border-bottom: 1px solid var(--surface-3);
}

.force-logout-session-meta[b-z2pp0zjk4h] {
    margin-top: .75rem;
    padding: .75rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: .9rem;
}

.session-legend[b-z2pp0zjk4h] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1.25rem;
    margin-bottom: 1.25rem;
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.session-legend-title[b-z2pp0zjk4h] {
    font-weight: 600;
    color: var(--text-secondary);
    margin-right: .25rem;
}

.session-legend-item[b-z2pp0zjk4h],
.session-activity-badge[b-z2pp0zjk4h] {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: .2rem .55rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .2px;
}

.session-legend-item[b-z2pp0zjk4h] {
    border: 1px solid transparent;
    cursor: pointer;
    transition: box-shadow .15s ease, border-color .15s ease;
}

.session-legend-item:hover[b-z2pp0zjk4h] {
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.session-legend-item.active[b-z2pp0zjk4h] {
    border-color: var(--text);
    box-shadow: 0 0 0 2px rgba(15, 23, 42, .15);
}

.activity-all[b-z2pp0zjk4h] {
    background: var(--border);
    color: var(--text-secondary);
}

.activity-2[b-z2pp0zjk4h] {
    background: #dcfce7;
    color: #166534;
}

.activity-5[b-z2pp0zjk4h] {
    background: #dbeafe;
    color: #1d4ed8;
}

.activity-15[b-z2pp0zjk4h] {
    background: #fef3c7;
    color: #92400e;
}

.activity-20[b-z2pp0zjk4h] {
    background: #fee2e2;
    color: #b91c1c;
}

.session-row.activity-2 td[b-z2pp0zjk4h] {
    background-color: #dcfce7 !important;
}

.session-row.activity-5 td[b-z2pp0zjk4h] {
    background-color: #dbeafe !important;
}

.session-row.activity-15 td[b-z2pp0zjk4h] {
    background-color: #fef3c7 !important;
}

.session-row.activity-20 td[b-z2pp0zjk4h] {
    background-color: #fee2e2 !important;
}


/* ============================================
   Edit Settings Modal — sectioned cards
   (matches .settings-section / .section-header from /admin/settings)
   ============================================ */

[b-z2pp0zjk4h] .modal-body-sectioned {
    background: var(--app-bg);
    padding: 1.25rem;
}

[b-z2pp0zjk4h] .user-settings-section {
    background: var(--surface);
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    margin-bottom: 1rem;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

[b-z2pp0zjk4h] .user-settings-section:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.09);
}

[b-z2pp0zjk4h] .user-settings-section:last-child {
    margin-bottom: 0;
}

[b-z2pp0zjk4h] .user-section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--surface-2);
}

[b-z2pp0zjk4h] .user-section-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: #fff;
    flex-shrink: 0;
    background: linear-gradient(135deg, #6c757d, #adb5bd);
}

[b-z2pp0zjk4h] .user-section-icon.green   { background: linear-gradient(135deg, #009244, #00b359); }
[b-z2pp0zjk4h] .user-section-icon.blue    { background: linear-gradient(135deg, #0d6efd, #3d8bfd); }
[b-z2pp0zjk4h] .user-section-icon.purple  { background: linear-gradient(135deg, #6f42c1, #8b5cf6); }
[b-z2pp0zjk4h] .user-section-icon.orange  { background: linear-gradient(135deg, #fd7e14, #f59e0b); }
[b-z2pp0zjk4h] .user-section-icon.teal    { background: linear-gradient(135deg, #0dcaf0, #20c997); }
[b-z2pp0zjk4h] .user-section-icon.red     { background: linear-gradient(135deg, #dc3545, #ef4444); }
[b-z2pp0zjk4h] .user-section-icon.indigo  { background: linear-gradient(135deg, #6610f2, #7c3aed); }
[b-z2pp0zjk4h] .user-section-icon.lime    { background: linear-gradient(135deg, #84cc16, #a3e635); }

[b-z2pp0zjk4h] .user-section-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    line-height: 1.2;
}

[b-z2pp0zjk4h] .user-section-body {
    padding: 1.1rem 1.25rem;
}

[b-z2pp0zjk4h] .user-section-body > .mb-4:last-child,
[b-z2pp0zjk4h] .user-section-body > .row:last-child,
[b-z2pp0zjk4h] .user-section-body > .settings-grid:last-child {
    margin-bottom: 0 !important;
}
/* Dark mode: ciemne warianty heat-mapy sesji (jasne pastele bylyby nieczytelne na ciemnym) */
[data-theme="dark"] .session-row.activity-2 td[b-z2pp0zjk4h]  { background-color: rgba(34,197,94,0.14) !important; }
[data-theme="dark"] .session-row.activity-5 td[b-z2pp0zjk4h]  { background-color: rgba(59,130,246,0.14) !important; }
[data-theme="dark"] .session-row.activity-15 td[b-z2pp0zjk4h] { background-color: rgba(245,158,11,0.14) !important; }
[data-theme="dark"] .session-row.activity-20 td[b-z2pp0zjk4h] { background-color: rgba(220,53,69,0.14) !important; }
[data-theme="dark"] .activity-2[b-z2pp0zjk4h]  { background: rgba(34,197,94,0.16); color: #7bdba0; }
[data-theme="dark"] .activity-5[b-z2pp0zjk4h]  { background: rgba(59,130,246,0.16); color: #93b8f5; }
[data-theme="dark"] .activity-15[b-z2pp0zjk4h] { background: rgba(245,158,11,0.16); color: #ffce7a; }
[data-theme="dark"] .activity-20[b-z2pp0zjk4h] { background: rgba(220,53,69,0.16); color: #f1a7ad; }

/* Kolumna „Ostatnie logowanie" — data + zdanie po ludzku pod spodem */
.login-when-cell[b-z2pp0zjk4h] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.login-when[b-z2pp0zjk4h] {
    line-height: 1.25;
    white-space: nowrap;
}

.login-when-ago[b-z2pp0zjk4h] {
    font-size: 0.75rem;
    color: var(--text-muted, #8a929c);
}
/* /Components/Pages/Admin/VacationCalendar.razor.rz.scp.css */
.vac-wrap[b-e2cly7tblm] {
    padding: 1rem 1.25rem;
}

.vac-header[b-e2cly7tblm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.vac-monthnav[b-e2cly7tblm] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.vac-monthlabel[b-e2cly7tblm] {
    min-width: 150px;
    text-align: center;
    font-weight: 600;
    text-transform: capitalize;
    color: #fff;
}

.info-banner[b-e2cly7tblm] {
    background: color-mix(in srgb, var(--global-palette1, #009244) 9%, transparent);
    border-left: 4px solid var(--global-palette1, #009244);
    padding: 0.55rem 0.8rem;
    border-radius: 6px;
    font-size: 0.88rem;
    margin-bottom: 0.6rem;
    color: var(--text, #1d2433);
}

.vac-legend[b-e2cly7tblm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-secondary, #475569);
}

.vac-legend-item[b-e2cly7tblm] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.vac-tablewrap[b-e2cly7tblm] {
    overflow-x: auto;
    border: 1px solid var(--border, #e2e7ec);
    border-radius: 10px;
    background: var(--surface, #fff);
}

.cal-table[b-e2cly7tblm] {
    border-collapse: collapse;
    width: max-content;
    min-width: 100%;
    font-size: 0.78rem;
    color: var(--text, #0f172a);
}

.cal-table th[b-e2cly7tblm],
.cal-table td[b-e2cly7tblm] {
    border: 1px solid var(--border, #e6e9ee);
    text-align: center;
    padding: 0;
}

.cal-name-col[b-e2cly7tblm] {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--surface, #fff);
    text-align: left !important;
    padding: 0.3rem 0.6rem !important;
    min-width: 178px;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.cal-name-col.selectable[b-e2cly7tblm] {
    cursor: pointer;
    user-select: none;
}

.cal-emp-name[b-e2cly7tblm] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-emp-pos[b-e2cly7tblm] {
    font-size: 0.66rem;
    color: var(--text-muted, #8a929c);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 1.05rem;   /* wyrównanie do nazwiska (za kropką koloru) */
}

/* Podświetlony pracownik: zielona ramka dookoła całego wiersza + mocniejszy tint (ustawiany inline).
   Ramkę dajemy na komórki, nie na <tr> — przy border-collapse tylko to renderuje się wszędzie tak samo. */
.cal-row.selected > td[b-e2cly7tblm] {
    border-top: 2px solid var(--global-palette1, #009244);
    border-bottom: 2px solid var(--global-palette1, #009244);
}

.cal-row.selected > td:first-child[b-e2cly7tblm] {
    border-left: 2px solid var(--global-palette1, #009244);
}

.cal-row.selected > td:last-child[b-e2cly7tblm] {
    border-right: 2px solid var(--global-palette1, #009244);
}

.cal-row.selected > td.weekend[b-e2cly7tblm] {
    /* weekend nie może przykryć podświetlenia własnym szarym tłem */
    background: transparent;
}

.cal-emp-dot[b-e2cly7tblm] {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 0.4rem;
    vertical-align: middle;
    flex-shrink: 0;
}

.cal-day-head[b-e2cly7tblm] {
    min-width: 30px;
    padding: 0.15rem 0 !important;
    line-height: 1.05;
}

.cal-daynum[b-e2cly7tblm] {
    font-weight: 600;
}

.cal-dow[b-e2cly7tblm] {
    font-size: 0.62rem;
    color: var(--text-muted, #8a929c);
    text-transform: uppercase;
}

.cal-cell[b-e2cly7tblm] {
    width: 30px;
    height: 30px;
    background: transparent;   /* przezroczyste → widać kolor wiersza (tint pracownika) przez całą szerokość */
}

.cal-cell.editable[b-e2cly7tblm] {
    cursor: pointer;
}

.cal-cell.editable:hover[b-e2cly7tblm] {
    background: color-mix(in srgb, var(--global-palette1, #009244) 14%, var(--surface, #fff));
}

.weekend[b-e2cly7tblm] {
    /* półprzezroczyste → nadal odróżnia weekend, ale kolor wiersza pracownika prześwituje */
    background: color-mix(in srgb, var(--surface-3, #f1f5f9) 60%, transparent);
}

.today[b-e2cly7tblm] {
    outline: 2px solid var(--global-palette1, #009244);
    outline-offset: -2px;
}

.cal-capacity-row th[b-e2cly7tblm] {
    background: var(--surface-2, #f8fafc);
    color: var(--text, #0f172a);
    font-weight: 600;
}

.cal-cap[b-e2cly7tblm] {
    color: var(--global-palette1, #009244);
    font-weight: 700;
}

.cal-sum-col[b-e2cly7tblm] {
    min-width: 44px;
    padding: 0.2rem 0.4rem !important;
    font-weight: 600;
    background: transparent;   /* widać kolor wiersza także na kolumnie sumy */
}

/* Rozliczenie urlopu siedzi w przyklejonej kolumnie z nazwiskiem — przy 31 kolumnach dni osobna
   kolumna z prawej wymagałaby przewijania siatki na sam koniec, żeby cokolwiek zobaczyć. */
.cal-emp-leave[b-e2cly7tblm] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.66rem;
    line-height: 1.4;
    padding-left: 1.05rem;
    white-space: nowrap;
}

.leave-mini-label[b-e2cly7tblm] {
    color: var(--text-muted, #8a929c);
}

.leave-used[b-e2cly7tblm] {
    font-weight: 600;
    color: var(--text-secondary, #475569);
}

.leave-pill[b-e2cly7tblm] {
    display: inline-block;
    min-width: 22px;
    padding: 0 5px;
    border-radius: 9px;
    font-weight: 700;
    font-size: 0.66rem;
    line-height: 1.5;
    text-align: center;
    color: #fff;
}

.leave-pill.leave-ok[b-e2cly7tblm] {
    background: #2e7d32;
}

.leave-pill.leave-low[b-e2cly7tblm] {
    background: #ef6c00;
}

.leave-pill.leave-empty[b-e2cly7tblm] {
    background: #c62828;
}

.leave-pill.leave-unlimited[b-e2cly7tblm] {
    background: #546e7a;
}

.leave-pill.leave-none[b-e2cly7tblm] {
    background: transparent;
    color: var(--text-muted, #8a929c);
}

.cal-badge[b-e2cly7tblm] {
    display: inline-block;
    min-width: 22px;
    padding: 2px 4px;
    border-radius: 6px;
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.2;
}

.cal-badge.cal-present[b-e2cly7tblm] {
    background: transparent;
    color: var(--text-muted, #8a929c);
}

/* ===== Okno „Skład zespołu" =====
   Cały wiersz jest przyciskiem: na telefonie łatwiej trafić w wiersz niż w mały przełącznik. */
.vac-pick-lead[b-e2cly7tblm] {
    max-width: 62ch;
    margin: 0 0 0.75rem;
    font-size: 0.88rem;
    color: var(--text-secondary, #475569);
}

.vac-pick-count[b-e2cly7tblm] {
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    color: var(--text, #0f172a);
}

.vac-pick-list[b-e2cly7tblm] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border, #e2e7ec);
    border-radius: 10px;
    overflow: hidden;
}

.vac-pick-row[b-e2cly7tblm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.55rem 0.8rem;
    border: 0;
    border-bottom: 1px solid var(--border, #e6e9ee);
    border-left: 4px solid var(--global-palette1, #009244);
    background: var(--surface, #fff);
    color: var(--text, #0f172a);
    text-align: left;
    cursor: pointer;
}

.vac-pick-row:last-child[b-e2cly7tblm] {
    border-bottom: 0;
}

.vac-pick-row:hover[b-e2cly7tblm] {
    background: color-mix(in srgb, var(--global-palette1, #009244) 8%, var(--surface, #fff));
}

.vac-pick-row:focus-visible[b-e2cly7tblm] {
    outline: 2px solid var(--global-palette1, #009244);
    outline-offset: -2px;
}

.vac-pick-row.off[b-e2cly7tblm] {
    border-left-color: var(--border, #cbd5e1);
    background: var(--surface-2, #f8fafc);
}

.vac-pick-who[b-e2cly7tblm] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.vac-pick-name[b-e2cly7tblm] {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vac-pick-row.off .vac-pick-name[b-e2cly7tblm] {
    color: var(--text-muted, #8a929c);
}

.vac-pick-pos[b-e2cly7tblm] {
    font-size: 0.72rem;
    color: var(--text-muted, #8a929c);
}

.vac-pick-state[b-e2cly7tblm] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--global-palette1, #009244);
}

.vac-pick-state .bi[b-e2cly7tblm] {
    font-size: 1.35rem;
    line-height: 1;
}

.vac-pick-row.off .vac-pick-state[b-e2cly7tblm] {
    color: var(--text-muted, #8a929c);
}
/* /Components/Pages/Delivery/ContinueDelivery.razor.rz.scp.css */
/* =============================================
   ContinueDelivery — Scanning Page
   ============================================= */

.delivery-scan-page[b-1hvizu4r2x] {
    padding-top: 1rem;
    max-width: 900px;
}

/* Na desktopie strona bierze całą dostępną szerokość. Sztywne 900px zaciskało kartę dostawy
   niezależnie od monitora — tabela pozycji nie mieściła się i dostawała poziomy pasek przewijania
   (ucinało kolumnę ILOŚĆ). Węższy layout zostaje na telefonie i tablecie. */
@media (min-width: 992px) {
    .delivery-scan-page[b-1hvizu4r2x] {
        max-width: none;
    }
}

/* ===== Scanning Header ===== */
.scan-header[b-1hvizu4r2x] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0;
}

.scan-header-info[b-1hvizu4r2x] {
    flex: 1;
    min-width: 0;
}

.scan-header-title[b-1hvizu4r2x] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.scan-header-meta[b-1hvizu4r2x] {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

.scan-header-actions[b-1hvizu4r2x] {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
}

.scan-header-actions .btn[b-1hvizu4r2x] {
    border-radius: 10px;
    font-size: 0.88rem;
    padding: 0.4rem 0.75rem;
}

/* ===== Section Card (edit form) ===== */
.section-card[b-1hvizu4r2x] {
    background: var(--surface);
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    overflow: hidden;
}

.section-card-header[b-1hvizu4r2x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--surface-2);
}

.section-card-title[b-1hvizu4r2x] {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text);
    margin: 0;
}

.section-card-body[b-1hvizu4r2x] {
    padding: 1.1rem;
}

/* ===== Form ===== */
.form-grid[b-1hvizu4r2x] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

@media (min-width: 576px) {
    .form-grid[b-1hvizu4r2x] {
        grid-template-columns: 1fr 1fr;
    }
}

.form-field[b-1hvizu4r2x] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.form-label-modern[b-1hvizu4r2x] {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-muted);
}

.form-control-modern[b-1hvizu4r2x] {
    border-radius: 10px;
    border: 1.5px solid var(--border);
    padding: 0.55rem 0.85rem;
    font-size: 0.92rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-control-modern:focus[b-1hvizu4r2x] {
    border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

/* ===== Autocomplete Dropdown ===== */
.autocomplete-dropdown[b-1hvizu4r2x] {
    position: absolute;
    width: 100%;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-top: none;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
}

.autocomplete-item[b-1hvizu4r2x] {
    padding: 0.6rem 0.85rem;
    cursor: pointer;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--surface-2);
    transition: background 0.1s;
}

.autocomplete-item:last-child[b-1hvizu4r2x] {
    border-bottom: none;
}

.autocomplete-item:hover[b-1hvizu4r2x] {
    background: var(--surface-3);
}

/* ===== Responsive ===== */
@media (max-width: 576px) {
    .delivery-scan-page[b-1hvizu4r2x] {
        padding-top: 0.5rem;
    }

    .scan-header-title[b-1hvizu4r2x] {
        font-size: 1rem;
    }

    .scan-header-actions .btn[b-1hvizu4r2x] {
        padding: 0.35rem 0.55rem;
        font-size: 0.82rem;
    }

    .section-card[b-1hvizu4r2x] {
        border-radius: 10px;
    }

    .section-card-header[b-1hvizu4r2x] {
        padding: 0.7rem 0.85rem;
    }

    .section-card-body[b-1hvizu4r2x] {
        padding: 0.85rem;
    }
}
/* /Components/Pages/Delivery/CreateDelivery.razor.rz.scp.css */
/* =============================================
   CreateDelivery — Mobile-First
   ============================================= */

.delivery-create-page[b-tdty363ofb] {
    padding-top: 1rem;
    max-width: 800px;
}

/* ===== Section Card ===== */
.section-card[b-tdty363ofb] {
    background: var(--surface);
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    overflow: hidden;
}

.section-card-header[b-tdty363ofb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--surface-2);
}

.section-card-title[b-tdty363ofb] {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text);
    margin: 0;
}

.section-card-body[b-tdty363ofb] {
    padding: 1.1rem;
}

.btn-ghost[b-tdty363ofb] {
    background: none;
    border: none;
    color: var(--text-muted);
    padding: 0.3rem 0.5rem;
    border-radius: 8px;
    transition: background 0.12s;
}

.btn-ghost:hover[b-tdty363ofb] {
    background: var(--surface-2);
    color: var(--text);
}

/* ===== In-Progress List ===== */
.inprogress-list[b-tdty363ofb] {
    display: flex;
    flex-direction: column;
}

.inprogress-item[b-tdty363ofb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.1rem;
    cursor: pointer;
    transition: background 0.1s;
    border-bottom: 1px solid var(--app-bg);
    gap: 0.75rem;
}

.inprogress-item:last-child[b-tdty363ofb] {
    border-bottom: none;
}

.inprogress-item:hover[b-tdty363ofb] {
    background: var(--surface-2);
}

.inprogress-item:active[b-tdty363ofb] {
    background: var(--surface-2);
}

.inprogress-item-info[b-tdty363ofb] {
    flex: 1;
    min-width: 0;
}

.inprogress-item-number[b-tdty363ofb] {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inprogress-item-meta[b-tdty363ofb] {
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inprogress-item-action[b-tdty363ofb] {
    color: #0d6efd;
    font-size: 1.25rem;
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity 0.12s;
}

.inprogress-item:hover .inprogress-item-action[b-tdty363ofb] {
    opacity: 1;
}

/* ===== Form ===== */
.form-grid[b-tdty363ofb] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

@media (min-width: 576px) {
    .form-grid[b-tdty363ofb] {
        grid-template-columns: 1fr 1fr;
    }
}

.form-field[b-tdty363ofb] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.form-label-modern[b-tdty363ofb] {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-muted);
}

.form-control-modern[b-tdty363ofb] {
    border-radius: 10px;
    border: 1.5px solid var(--border);
    padding: 0.55rem 0.85rem;
    font-size: 0.92rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-control-modern:focus[b-tdty363ofb] {
    border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

.btn-create[b-tdty363ofb] {
    width: 100%;
    border-radius: 12px;
    padding: 0.7rem;
    font-weight: 600;
    font-size: 0.95rem;
    margin-top: 0.5rem;
}

/* ===== Autocomplete Dropdown ===== */
.autocomplete-dropdown[b-tdty363ofb] {
    position: absolute;
    width: 100%;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-top: none;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
}

.autocomplete-item[b-tdty363ofb] {
    padding: 0.6rem 0.85rem;
    cursor: pointer;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--surface-2);
    transition: background 0.1s;
}

.autocomplete-item:last-child[b-tdty363ofb] {
    border-bottom: none;
}

.autocomplete-item:hover[b-tdty363ofb] {
    background: var(--surface-3);
}

/* ===== Scanning Header ===== */
.scan-header[b-tdty363ofb] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem 0;
}

.scan-header-info[b-tdty363ofb] {
    flex: 1;
    min-width: 0;
}

.scan-header-title[b-tdty363ofb] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scan-header-meta[b-tdty363ofb] {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

.scan-header-actions[b-tdty363ofb] {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}

.scan-header-actions .btn[b-tdty363ofb] {
    border-radius: 10px;
    font-size: 0.88rem;
    padding: 0.4rem 0.85rem;
}

/* ===== Responsive ===== */
@media (max-width: 576px) {
    .delivery-create-page[b-tdty363ofb] {
        padding-top: 0.5rem;
    }

    .section-card[b-tdty363ofb] {
        border-radius: 10px;
    }

    .section-card-header[b-tdty363ofb] {
        padding: 0.7rem 0.85rem;
    }

    .section-card-body[b-tdty363ofb] {
        padding: 0.85rem;
    }

    .inprogress-item[b-tdty363ofb] {
        padding: 0.65rem 0.85rem;
    }

    .scan-header-title[b-tdty363ofb] {
        font-size: 1rem;
    }

    .scan-header-actions .btn[b-tdty363ofb] {
        padding: 0.35rem 0.65rem;
        font-size: 0.82rem;
    }
}
/* /Components/Pages/Delivery/DeliveryPZCreationModal.razor.rz.scp.css */
/* DeliveryPZCreationModal Component Styles */

.products-table-card[b-jwqhowefi6] {
    background: var(--surface);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.products-table[b-jwqhowefi6] {
    margin-bottom: 0;
}

    .products-table thead[b-jwqhowefi6] {
        background-image: var(--gradient-header);
        color: white;
    }

        .products-table thead th[b-jwqhowefi6] {
            border: none;
            padding: 1rem;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.85rem;
            letter-spacing: 0.5px;
            white-space: nowrap;
        }

    .products-table tbody tr[b-jwqhowefi6] {
        transition: all 0.2s ease;
        border-bottom: 1px solid var(--border);
    }

        .products-table tbody tr:hover[b-jwqhowefi6] {
            background-color: var(--global-palette-light) !important;
        }

    .products-table tbody td[b-jwqhowefi6] {
        padding: 0.75rem;
        vertical-align: middle;
        transition: background-color 0.2s ease;
    }

    .products-table tfoot[b-jwqhowefi6] {
        background: var(--surface-2);
        font-weight: 600;
    }

        .products-table tfoot th[b-jwqhowefi6] {
            padding: 0.75rem;
            border-top: 2px solid var(--border);
        }

.sticky-top[b-jwqhowefi6] {
    position: sticky;
    top: 0;
    z-index: 10;
}

.table-active[b-jwqhowefi6] {
    background-color: var(--global-palette-light) !important;
}
/* /Components/Pages/Delivery/DeliveryReports.razor.rz.scp.css */
/* DeliveryReports Component Styles */

.products-container[b-819vpevx11] {
    background: var(--global-palette-light);
    min-height: 100vh;
    padding: 2rem 0;
}

.filter-card[b-819vpevx11] {
    background: var(--surface);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    margin-bottom: 2rem;
    overflow: hidden;
}

.filter-card-body[b-819vpevx11] {
    padding: 2rem;
}

.products-table-card[b-819vpevx11] {
    background: var(--surface);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    margin-bottom: 2rem;
}

.products-table[b-819vpevx11] {
    margin-bottom: 0;
}

    .products-table thead[b-819vpevx11] {
        background-image: var(--gradient-header);
        color: white;
    }

        .products-table thead th[b-819vpevx11] {
            border: none;
            padding: 1rem;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.85rem;
            letter-spacing: 0.5px;
            white-space: nowrap;
        }

    .products-table tbody tr[b-819vpevx11] {
        transition: background-color 0.2s ease;
        border-bottom: 1px solid var(--border);
    }

        .products-table tbody tr:hover td[b-819vpevx11] {
            background-color: var(--global-palette-light) !important;
        }

    .products-table tbody td[b-819vpevx11] {
        padding: 1rem;
        vertical-align: middle;
        transition: background-color 0.2s ease;
    }

/* Badges */
.badge-modern[b-819vpevx11] {
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.85rem;
    display: inline-block;
}

.badge-warning[b-819vpevx11] {
    background: linear-gradient(135deg, #ffc107 0%, #ffb300 100%);
    color: #000;
}

.badge-success[b-819vpevx11] {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.badge-info[b-819vpevx11] {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    color: white;
}

/* Buttons */
.btn-action[b-819vpevx11] {
    padding: 0.5rem 0.75rem;
    border: none;
    border-radius: 6px;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    margin: 0;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .btn-action:hover[b-819vpevx11] {
        transform: none;
        box-shadow: none;
    }

    .btn-action i[b-819vpevx11] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

/* Kanon soft-tinted (2026-06-26): podgląd=niebieski, export=zielony, edytuj=niebieski, usuń=czerwony */
.btn-action-view[b-819vpevx11] { background: #e8effe; color: #1d4ed8; }
.btn-action-view:hover[b-819vpevx11] { background: #d7e4fd; color: #1d4ed8; }

.btn-action-success[b-819vpevx11] { background: #e9f7ef; color: #15803d; }
.btn-action-success:hover[b-819vpevx11] { background: #d6f0e0; color: #15803d; }

.btn-action-info[b-819vpevx11] { background: #e8effe; color: #1d4ed8; }
.btn-action-info:hover[b-819vpevx11] { background: #d7e4fd; color: #1d4ed8; }

.btn-action-warning[b-819vpevx11] { background: #fef3e2; color: #b45309; }
.btn-action-warning:hover[b-819vpevx11] { background: #fde6c4; color: #b45309; }

.btn-action-edit[b-819vpevx11] { background: #e8effe; color: #1d4ed8; }
.btn-action-edit:hover[b-819vpevx11] { background: #d7e4fd; color: #1d4ed8; }

.btn-action-delete[b-819vpevx11] { background: #fdeceb; color: #b91c1c; }
.btn-action-delete:hover[b-819vpevx11] { background: #fbdad7; color: #b91c1c; }

/* Form controls */
.form-control-modern[b-819vpevx11],
.form-select[b-819vpevx11] {
    border-radius: 8px;
    border: 2px solid var(--border);
    padding: 0.65rem 1rem;
    transition: all 0.2s ease;
}

    .form-control-modern:focus[b-819vpevx11],
    .form-select:focus[b-819vpevx11] {
        border-color: var(--global-palette1);
        box-shadow: 0 0 0 0.2rem rgba(0, 146, 68, 0.15);
    }

.form-label-modern[b-819vpevx11] {
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-modern[b-819vpevx11] {
    border-radius: 8px;
    padding: 0.65rem 1.5rem;
    font-weight: 600;
    transition: all 0.2s ease;
    border: none;
}

    .btn-modern:hover[b-819vpevx11] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

.btn-outline-primary.btn-modern[b-819vpevx11] {
    border: 2px solid var(--global-palette1);
    color: var(--global-palette1);
    background: var(--surface);
}

    .btn-outline-primary.btn-modern:hover[b-819vpevx11] {
        background: var(--global-palette1);
        color: white;
    }

/* Alerts */
.alert-modern[b-819vpevx11] {
    border-radius: var(--border-radius);
    padding: 1rem 1.25rem;
    border: none;
    box-shadow: var(--shadow-sm);
}

    .alert-modern i[b-819vpevx11] {
        margin-right: 0.5rem;
    }

/* Card */
.card-modern[b-819vpevx11] {
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    border: none;
    transition: all 0.2s ease;
}

    .card-modern:hover[b-819vpevx11] {
        box-shadow: var(--shadow-lg);
        transform: translateY(-2px);
    }

/* Modal */
.modal-backdrop-modern[b-819vpevx11] {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

.modal-modern .modal-content[b-819vpevx11] {
    border-radius: var(--border-radius);
    border: none;
    box-shadow: var(--shadow-lg);
}

.modal-modern .modal-header[b-819vpevx11] {
    background: linear-gradient(135deg, #f8f9fa 0%, var(--border) 100%);
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    border-bottom: 2px solid var(--border);
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .products-table-card[b-819vpevx11] {
        background: transparent;
        box-shadow: none;
        padding: 0;
    }

    .products-table[b-819vpevx11] {
        display: block;
    }

        .products-table thead[b-819vpevx11] {
            display: none;
        }

        .products-table tbody[b-819vpevx11] {
            display: block;
        }

            .products-table tbody tr[b-819vpevx11] {
                display: block;
                background: var(--surface);
                margin-bottom: 0.75rem;
                border-radius: 8px;
                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                padding: 0.75rem;
                border: none;
            }

                .products-table tbody tr:hover[b-819vpevx11] {
                    transform: none;
                }

            .products-table tbody td[b-819vpevx11] {
                display: block;
                padding: 0.25rem 0;
                border: none;
                text-align: left;
            }
}
/* /Components/Pages/Delivery/DeliveryScanningComponent.razor.rz.scp.css */
/* =============================================
   DeliveryScanningComponent — Mobile-First
   ============================================= */

/* ===== Alerts ===== */
.alert-scan[b-y6klny6j4r] {
    border: none;
    border-radius: 12px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.65rem 1rem;
}

.alert-scan .btn-close[b-y6klny6j4r] {
    font-size: 0.6rem;
    padding: 0.5rem;
}

/* ===== Mode Toggle ===== */
.mode-toggle-card[b-y6klny6j4r] {
    margin-bottom: 0.75rem;
}

.toggle-tile-scan[b-y6klny6j4r] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.toggle-tile-scan:hover[b-y6klny6j4r] {
    border-color: #b8d4c8;
    background: var(--surface-3);
}

.toggle-tile-scan.active[b-y6klny6j4r] {
    border-color: #009244;
    background: rgba(0, 146, 68, 0.06);
}

.toggle-tile-scan .form-check-input[b-y6klny6j4r] {
    width: 2.75em;
    height: 1.4em;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 2em;
}

.toggle-tile-scan .form-check-input:checked[b-y6klny6j4r] {
    background-color: #009244;
    border-color: #009244;
}

.toggle-tile-scan .form-check-input:focus[b-y6klny6j4r] {
    box-shadow: 0 0 0 3px rgba(0, 146, 68, 0.15);
}

.toggle-label-scan[b-y6klny6j4r] {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
}

.toggle-desc-scan[b-y6klny6j4r] {
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* ===== Scanned Product Card ===== */
.scanned-product-card[b-y6klny6j4r] {
    background: var(--surface);
    border: 2px solid #0d6efd;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: 0 2px 12px rgba(13, 110, 253, 0.12);
}

.scanned-product-header[b-y6klny6j4r] {
    background: linear-gradient(135deg, #0d6efd, #3d8bfd);
    color: #fff;
    padding: 0.6rem 1rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.scanned-product-body[b-y6klny6j4r] {
    padding: 1rem;
}

.scanned-product-info[b-y6klny6j4r] {
    margin-bottom: 0.75rem;
}

.scanned-product-name[b-y6klny6j4r] {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text);
    margin-bottom: 0.25rem;
}

.scanned-product-codes[b-y6klny6j4r] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.scanned-product-fields[b-y6klny6j4r] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.field-group[b-y6klny6j4r] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.field-label[b-y6klny6j4r] {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-muted);
}

.field-group .form-control[b-y6klny6j4r],
.field-group .form-select[b-y6klny6j4r] {
    border-radius: 10px;
    border: 1.5px solid var(--border);
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
}

.field-group .form-control:focus[b-y6klny6j4r] {
    border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
}

.netto-calc[b-y6klny6j4r] {
    background: var(--surface-2);
    border-radius: 10px;
    padding: 0.6rem 0.75rem;
}

.netto-row[b-y6klny6j4r] {
    display: flex;
    gap: 0.5rem;
}

.vat-select[b-y6klny6j4r] {
    max-width: 90px;
    flex-shrink: 0;
}

.btn-add-item[b-y6klny6j4r] {
    width: 100%;
    border-radius: 12px;
    padding: 0.6rem;
    font-weight: 600;
    font-size: 0.95rem;
}

/* Tablet+ layout for scanned product fields */
@media (min-width: 576px) {
    .scanned-product-fields[b-y6klny6j4r] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem;
    }

    .netto-calc[b-y6klny6j4r] {
        grid-column: 1 / -1;
    }
}

/* ===== Items Header ===== */
.items-section[b-y6klny6j4r] {
    background: var(--surface);
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    overflow: hidden;
}

.items-header[b-y6klny6j4r] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--surface-2);
    gap: 0.5rem;
}

.items-title[b-y6klny6j4r] {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text);
    margin: 0;
}

.items-summary[b-y6klny6j4r] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.summary-badge[b-y6klny6j4r] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    background: var(--surface-2);
    padding: 0.2rem 0.65rem;
    border-radius: 8px;
}

.summary-qty[b-y6klny6j4r] {
    background: #e8f5e9;
    color: #2e7d32;
}

/* ===== Items Table ===== */
.items-table-wrap[b-y6klny6j4r] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.items-table[b-y6klny6j4r] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.88rem;
}

.items-table thead[b-y6klny6j4r] {
    position: sticky;
    top: 0;
    z-index: 2;
}

.items-table thead th[b-y6klny6j4r] {
    background: var(--surface-2);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 0.6rem 0.75rem;
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
    user-select: none;
}

.items-table tbody tr[b-y6klny6j4r] {
    transition: background 0.1s;
}

.items-table tbody tr:hover[b-y6klny6j4r] {
    background: var(--surface-2);
}

.items-table tbody td[b-y6klny6j4r] {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--surface-2);
    vertical-align: middle;
    color: var(--text);
}

.items-table tbody tr:last-child td[b-y6klny6j4r] {
    border-bottom: none;
}

.items-table tfoot td[b-y6klny6j4r] {
    padding: 0.7rem 0.75rem;
    border-top: 2px solid var(--border);
    background: var(--surface-2);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Column sizing */
.col-name[b-y6klny6j4r] { min-width: 140px; }
.col-code[b-y6klny6j4r] { white-space: nowrap; }
.col-sku[b-y6klny6j4r]  { white-space: nowrap; color: var(--text-muted); }
.col-qty[b-y6klny6j4r]  { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.col-price[b-y6klny6j4r] { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 90px; }
.col-time[b-y6klny6j4r] { text-align: center; white-space: nowrap; color: var(--text-faint); font-size: 0.82rem; }
.col-actions[b-y6klny6j4r] { text-align: center; width: 44px; }

/* Cell styles */
.cell-name[b-y6klny6j4r] {
    font-weight: 600;
    display: block;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Na desktopie jest miejsce na pełne nazwy — 280px ucinało je wielokropkiem nawet na szerokim
   monitorze. Limit zostaje (żeby jeden ekstremalnie długi towar nie rozpychał tabeli), ale wyższy. */
@media (min-width: 992px) {
    .cell-name[b-y6klny6j4r] {
        max-width: 520px;
    }
}

/* Code shown under name on mobile only */
.cell-code-mobile[b-y6klny6j4r] {
    display: none;
}

.items-table code[b-y6klny6j4r] {
    font-size: 0.8rem;
    background: var(--code-bg);
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    color: var(--text-secondary);
}

/* Price editing */
.price-value[b-y6klny6j4r] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s;
    white-space: nowrap;
}

.price-value:hover[b-y6klny6j4r] {
    background: var(--border);
}

.price-value.no-price[b-y6klny6j4r] {
    color: var(--text-faint);
    font-style: italic;
}

.price-edit-icon[b-y6klny6j4r] {
    font-size: 0.6rem;
    opacity: 0;
    transition: opacity 0.12s;
    color: var(--text-faint);
}

.price-value:hover .price-edit-icon[b-y6klny6j4r] {
    opacity: 0.7;
}

.price-edit-inline[b-y6klny6j4r] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.price-edit-inline .form-control[b-y6klny6j4r] {
    width: 85px;
    font-size: 0.82rem;
    padding: 0.2rem 0.45rem;
    border-radius: 8px;
    text-align: right;
}

.price-edit-inline .btn[b-y6klny6j4r] {
    padding: 0.15rem 0.4rem;
    border-radius: 8px;
    font-size: 0.78rem;
    line-height: 1;
}

/* Remove button */
.btn-remove[b-y6klny6j4r] {
    border-radius: 8px;
    font-size: 0.78rem;
    padding: 0.25rem 0.5rem;
    opacity: 0.5;
    transition: opacity 0.12s;
}

.items-table tbody tr:hover .btn-remove[b-y6klny6j4r] {
    opacity: 1;
}

/* ===== Empty State ===== */
.empty-state[b-y6klny6j4r] {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--text-muted);
}

.empty-icon[b-y6klny6j4r] {
    font-size: 3rem;
    opacity: 0.3;
    display: block;
    margin-bottom: 0.75rem;
}

.empty-state h5[b-y6klny6j4r] {
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.empty-state p[b-y6klny6j4r] {
    font-size: 0.88rem;
    margin: 0;
}

/* ===== Floating Manual Entry ===== */
.floating-button[b-y6klny6j4r] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(13, 110, 253, 0.3);
    border: none;
}

.manual-entry-panel[b-y6klny6j4r] {
    padding: 0.75rem;
    background: var(--surface);
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 300px;
}

.manual-entry-panel .form-control[b-y6klny6j4r] {
    border-radius: 10px;
    flex: 1;
}

.manual-entry-panel .btn[b-y6klny6j4r] {
    border-radius: 10px;
    flex-shrink: 0;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .items-table[b-y6klny6j4r] {
        font-size: 0.82rem;
    }

    .items-table thead th[b-y6klny6j4r] {
        font-size: 0.68rem;
        padding: 0.45rem 0.4rem;
    }

    .items-table tbody td[b-y6klny6j4r] {
        padding: 0.45rem 0.4rem;
    }

    /* Hide separate code, SKU, time columns */
    .col-code[b-y6klny6j4r],
    .col-sku[b-y6klny6j4r],
    .col-time[b-y6klny6j4r] {
        display: none;
    }

    /* Show code inline under name */
    .cell-code-mobile[b-y6klny6j4r] {
        display: block;
        margin-top: 0.15rem;
    }

    .cell-code-mobile code[b-y6klny6j4r] {
        font-size: 0.72rem;
    }

    .cell-name[b-y6klny6j4r] {
        max-width: 140px;
        font-size: 0.82rem;
    }

    .col-price[b-y6klny6j4r] {
        min-width: 70px;
    }

    .col-actions[b-y6klny6j4r] {
        width: 36px;
    }

    .btn-remove[b-y6klny6j4r] {
        padding: 0.15rem 0.35rem;
        font-size: 0.72rem;
        opacity: 1;
    }

    .price-edit-inline .form-control[b-y6klny6j4r] {
        width: 65px;
        font-size: 0.78rem;
    }

    .manual-entry-panel[b-y6klny6j4r] {
        min-width: auto;
        width: calc(100vw - 40px);
    }

    .items-section[b-y6klny6j4r] {
        border-radius: 10px;
    }

    .items-header[b-y6klny6j4r] {
        padding: 0.65rem 0.75rem;
    }
}

@media (max-width: 400px) {
    .cell-name[b-y6klny6j4r] {
        max-width: 100px;
    }
}
}
/* /Components/Pages/Delivery/PZAcceptanceList.razor.rz.scp.css */
/* ===== Page Container ===== */
.products-container[b-qgeejh94c5] {
    background: var(--surface-2);
    min-height: 100vh;
    padding: 1.5rem 0;
}

/* ===== Header ===== */
.pz-list-header[b-qgeejh94c5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ===== Filter Card ===== */
.filter-card[b-qgeejh94c5] {
    background: var(--surface);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    overflow: hidden;
}

.filter-card-body[b-qgeejh94c5] {
    padding: 1rem 1.25rem;
}

.form-label-modern[b-qgeejh94c5] {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.form-control-modern[b-qgeejh94c5] {
    border-radius: 10px;
}

.btn-modern[b-qgeejh94c5] {
    border-radius: 10px;
    padding: 0.45rem 1rem;
    font-weight: 500;
    font-size: 0.9rem;
}

/* ===== Tab Navigation ===== */
.task-tabs[b-qgeejh94c5] {
    display: flex;
    gap: 0.35rem;
    background: var(--surface-2);
    border-radius: 12px;
    padding: 0.3rem;
    margin-bottom: 1.25rem;
}

.task-tab[b-qgeejh94c5] {
    flex: 1;
    text-align: center;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.92rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.task-tab:hover[b-qgeejh94c5] {
    background: rgba(0, 146, 68, 0.08);
    color: #009244;
}

.task-tab.active[b-qgeejh94c5] {
    background: var(--surface);
    color: #009244;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    font-weight: 600;
}

/* ===== Task Cards ===== */
.task-card[b-qgeejh94c5] {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
    overflow: hidden;
    background: var(--surface);
}

.task-card:hover[b-qgeejh94c5] {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    transform: translateY(-1px);
}

.priority-strip[b-qgeejh94c5] {
    width: 5px;
    min-height: 100%;
    flex-shrink: 0;
    border-radius: 4px 0 0 4px;
}

.priority-low[b-qgeejh94c5]    { background: #198754; }
.priority-normal[b-qgeejh94c5] { background: #0d6efd; }
.priority-high[b-qgeejh94c5]   { background: #ffc107; }
.priority-critical[b-qgeejh94c5] { background: #dc3545; }

.task-card-body[b-qgeejh94c5] {
    padding: 1rem 1.25rem;
    flex: 1;
    min-width: 0;
}

.task-title[b-qgeejh94c5] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.task-description[b-qgeejh94c5] {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.task-meta[b-qgeejh94c5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.task-meta-item[b-qgeejh94c5] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.task-meta-item i[b-qgeejh94c5] {
    font-size: 0.85rem;
    opacity: 0.7;
}

.task-card-chevron[b-qgeejh94c5] {
    display: flex;
    align-items: center;
    padding: 0 1rem;
    color: #adb5bd;
    font-size: 1.2rem;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.task-card:hover .task-card-chevron[b-qgeejh94c5] {
    color: #009244;
}

/* ===== Pill & Modern Buttons ===== */
.btn-pill[b-qgeejh94c5] {
    border-radius: 20px;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
}

.btn-modern[b-qgeejh94c5] {
    border-radius: 10px;
    padding: 0.45rem 1rem;
    font-weight: 500;
    font-size: 0.9rem;
}

/* ===== Alert Modern ===== */
.alert-modern[b-qgeejh94c5] {
    border-radius: 12px;
    border: none;
    font-size: 0.92rem;
    padding: 1rem 1.25rem;
}

/* ===== View Chips ===== */
.view-chip-toggle[b-qgeejh94c5] {
    display: inline-flex;
    gap: 0.4rem;
    background: var(--surface-3);
    border-radius: 999px;
    padding: 0.25rem;
}

.view-chip[b-qgeejh94c5] {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.view-chip:hover[b-qgeejh94c5] {
    background: var(--surface-3);
    color: var(--text);
}

.view-chip.active[b-qgeejh94c5] {
    background: linear-gradient(135deg, #009244, #00b253);
    color: #fff;
    box-shadow: 0 3px 12px rgba(0,146,68,0.28);
}

/* ===== Filter Panel ===== */
.filter-panel[b-qgeejh94c5] {
    border-radius: 14px;
}

.form-label-elegant[b-qgeejh94c5] {
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.01em;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
}

.form-control-elegant[b-qgeejh94c5] {
    border-radius: 10px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
}

.form-control-elegant:focus[b-qgeejh94c5] {
    border-color: #009244;
    box-shadow: 0 0 0 0.2rem rgba(0, 146, 68, 0.14);
}

/* ===== Full View Styles ===== */
.full-view-table-wrap[b-qgeejh94c5] {
    border-radius: 12px;
}

.full-view-table-wrap table thead th[b-qgeejh94c5] {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    white-space: nowrap;
    border-bottom-width: 1px;
}

.full-view-table-wrap table tbody tr:hover[b-qgeejh94c5] {
    background-color: var(--surface-3);
}

.full-view-table-wrap .form-check-input[b-qgeejh94c5] {
    width: 1.1rem;
    height: 1.1rem;
    cursor: pointer;
}

.grouped-items-wrap[b-qgeejh94c5] {
    border-top: 1px solid var(--border);
}

.grouped-items-table thead th[b-qgeejh94c5] {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.grouped-items-table tbody tr:hover[b-qgeejh94c5] {
    background-color: var(--surface);
}

.grouped-items-table .badge[b-qgeejh94c5] {
    font-weight: 500;
}

@media (max-width: 576px) {
    .task-tab[b-qgeejh94c5] {
        font-size: 0.82rem;
        padding: 0.5rem 0.5rem;
    }

    .task-card-body[b-qgeejh94c5] {
        padding: 0.75rem 1rem;
    }

    .task-actions[b-qgeejh94c5] {
        padding: 0.75rem 0.75rem 0.75rem 0;
    }

    .task-title[b-qgeejh94c5] {
        font-size: 0.95rem;
    }
}

@media (max-width: 992px) {
    .full-view-table-wrap table[b-qgeejh94c5] {
        min-width: 860px;
    }

    .grouped-items-table[b-qgeejh94c5] {
        min-width: 980px;
    }
}

/* /Components/Pages/Delivery/PZAcceptanceReports.razor.rz.scp.css */
/* PZAcceptanceReports - reuses global product/delivery styles */

.products-container[b-j7neya8x5s] {
    background: var(--surface-2);
    min-height: 100vh;
    padding: 1.5rem 0;
}

.filter-card[b-j7neya8x5s] {
    background: var(--surface);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.filter-card-body[b-j7neya8x5s] {
    padding: 1.25rem;
}

.form-label-modern[b-j7neya8x5s] {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.form-control-modern[b-j7neya8x5s] {
    border-radius: 10px;
}

.btn-modern[b-j7neya8x5s] {
    border-radius: 10px;
    padding: 0.45rem 1rem;
    font-weight: 500;
    font-size: 0.9rem;
}

.alert-modern[b-j7neya8x5s] {
    border-radius: 12px;
    border: none;
    font-size: 0.92rem;
    padding: 1rem 1.25rem;
}

.products-table-card[b-j7neya8x5s] {
    background: var(--surface);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    overflow: hidden;
    margin-bottom: 1rem;
}

.products-table[b-j7neya8x5s] {
    margin-bottom: 0;
}

.products-table thead th[b-j7neya8x5s] {
    background: var(--surface-2);
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border);
    padding: 0.75rem 1rem;
    white-space: nowrap;
}

.products-table tbody td[b-j7neya8x5s] {
    padding: 0.65rem 1rem;
    vertical-align: middle;
    font-size: 0.88rem;
}

.products-table tbody tr:hover[b-j7neya8x5s] {
    background: var(--surface-3);
}

.btn-action[b-j7neya8x5s] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: none;
    background: #eef1f6;
    color: #475569;
    font-size: 0.85rem;
    transition: background .15s ease, color .15s ease;
}

.btn-action:hover[b-j7neya8x5s] { background: #e2e6ee; }

/* Kanon soft-tinted (2026-06-26): podgląd=niebieski, usuń=czerwony */
.btn-action-view[b-j7neya8x5s] { background: #e8effe; color: #1d4ed8; }
.btn-action-view:hover[b-j7neya8x5s] { background: #d7e4fd; color: #1d4ed8; }
.btn-action-delete[b-j7neya8x5s] { background: #fdeceb; color: #b91c1c; }
.btn-action-delete:hover[b-j7neya8x5s] { background: #fbdad7; color: #b91c1c; }

.card-modern[b-j7neya8x5s] {
    border: none;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: box-shadow 0.2s;
}

.card-modern:hover[b-j7neya8x5s] {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

/* Active filter ring on stat badges */
.ring-active[b-j7neya8x5s] {
    outline: 3px solid rgba(0,0,0,0.35);
    outline-offset: 2px;
}
/* /Components/Pages/Deposits/DepositDocumentsToProcess.razor.rz.scp.css */
/* DepositDocumentsToProcess Component Styles */

.deposit-documents-container[b-pb4bahggjw] {
    min-height: 100vh;
    background: var(--global-palette-light);
    padding: 2rem 0;
}

.deposit-documents-header[b-pb4bahggjw] {
    background: var(--surface);
    border-radius: var(--border-radius);
    padding: 2rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.deposit-documents-header h3[b-pb4bahggjw] {
    margin: 0;
    color: var(--text);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.deposit-documents-header h3 i[b-pb4bahggjw] {
    font-size: 1.75rem;
    color: var(--global-palette1);
}

.deposit-documents-header p[b-pb4bahggjw] {
    margin: 0.5rem 0 0 0;
}

/* Filter Card */
.filter-card[b-pb4bahggjw] {
    background: var(--surface);
    border-radius: var(--border-radius);
    padding: 0;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.filter-card-body[b-pb4bahggjw] {
    padding: 1.5rem;
}

.form-label-modern[b-pb4bahggjw] {
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-label-modern i[b-pb4bahggjw] {
    color: var(--global-palette1);
}

.form-control-modern[b-pb4bahggjw],
.form-select[b-pb4bahggjw] {
    border: 2px solid var(--border);
    border-radius: var(--border-radius);
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
}

.form-control-modern:focus[b-pb4bahggjw],
.form-select:focus[b-pb4bahggjw] {
    border-color: var(--global-palette1);
    box-shadow: 0 0 0 3px rgba(0, 146, 68, 0.1);
}

/* Features Checkbox List */
.features-checkbox-list[b-pb4bahggjw] {
    max-height: 300px;
    overflow-y: auto;
    padding: 1rem;
    background: var(--surface-2);
    border-radius: var(--border-radius);
    border: 2px solid var(--border);
}

.features-checkbox-list .form-check[b-pb4bahggjw] {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.features-checkbox-list .form-check:hover[b-pb4bahggjw] {
    background-color: var(--surface);
}

.features-checkbox-list .form-check-input[b-pb4bahggjw] {
    border: 2px solid var(--border-strong);
    border-radius: 4px;
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
    margin-top: 0.125rem;
}

.features-checkbox-list .form-check-input:checked[b-pb4bahggjw] {
    background-color: var(--global-palette1);
    border-color: var(--global-palette1);
}

.features-checkbox-list .form-check-input:focus[b-pb4bahggjw] {
    border-color: var(--global-palette1);
    box-shadow: 0 0 0 3px rgba(0, 146, 68, 0.1);
}

.features-checkbox-list .form-check-label[b-pb4bahggjw] {
    margin-left: 0.5rem;
    cursor: pointer;
    color: var(--text);
    font-weight: 500;
}

/* Summary Cards */
.documents-summary[b-pb4bahggjw] {
    margin-bottom: 1.5rem;
}

.summary-card[b-pb4bahggjw] {
    background: var(--surface);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.summary-card i[b-pb4bahggjw] {
    font-size: 2.5rem;
    color: var(--global-palette1);
}

.summary-card div[b-pb4bahggjw] {
    display: flex;
    flex-direction: column;
}

.summary-card strong[b-pb4bahggjw] {
    font-size: 1.75rem;
    color: var(--text);
    font-weight: 700;
}

.summary-card span[b-pb4bahggjw] {
    color: var(--text-muted);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Document Cards */
.document-card[b-pb4bahggjw] {
    background: var(--surface);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.document-card:hover[b-pb4bahggjw] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.document-header[b-pb4bahggjw] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.document-header h5[b-pb4bahggjw] {
    margin: 0 0 0.75rem 0;
    color: var(--text);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.document-header h5 i[b-pb4bahggjw] {
    color: var(--global-palette1);
}

.document-meta[b-pb4bahggjw] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.document-notes[b-pb4bahggjw] {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: var(--surface-2);
    border-left: 4px solid var(--global-palette1);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.document-notes i[b-pb4bahggjw] {
    color: var(--global-palette1);
    margin-right: 0.5rem;
}

/* Badges */
.badge-modern[b-pb4bahggjw] {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.badge-info[b-pb4bahggjw] {
    background: #bee3f8;
    color: #2c5282;
}

.badge-secondary[b-pb4bahggjw] {
    background: #e2e8f0;
    color: var(--text-secondary);
}

.badge-primary[b-pb4bahggjw] {
    background: #d6bcfa;
    color: #553c9a;
}

.badge-location[b-pb4bahggjw] {
    background: #fef5e7;
    color: #b7791f;
}

.badge-feature[b-pb4bahggjw] {
    background: #d1fae5;
    color: #065f46;
}

/* Buttons */
.btn-modern[b-pb4bahggjw] {
    border-radius: var(--border-radius);
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    border: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-primary.btn-modern[b-pb4bahggjw] {
    background: var(--global-palette1);
    color: white;
}

.btn-primary.btn-modern:hover:not(:disabled)[b-pb4bahggjw] {
    background: #007a38;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-success.btn-modern[b-pb4bahggjw] {
    background: var(--global-palette2);
    color: #14171c; /* tlo stale (lime) -> tekst zawsze ciemny, niezaleznie od motywu */
}

.btn-success.btn-modern:hover:not(:disabled)[b-pb4bahggjw] {
    background: #a8b916;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-modern:disabled[b-pb4bahggjw] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Alerts */
.alert-modern[b-pb4bahggjw] {
    border-radius: var(--border-radius);
    border: none;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
}

.alert-modern i[b-pb4bahggjw] {
    font-size: 1.25rem;
}

.alert-danger.alert-modern[b-pb4bahggjw] {
    background: #fed7d7;
    color: #9b2c2c;
}

.alert-success.alert-modern[b-pb4bahggjw] {
    background: #c6f6d5;
    color: #22543d;
}

.alert-info.alert-modern[b-pb4bahggjw] {
    background: #bee3f8;
    color: #2c5282;
}

.alert-warning.alert-modern[b-pb4bahggjw] {
    background: #fef5e7;
    color: #b7791f;
}

/* Table */
.documents-positions-table[b-pb4bahggjw] {
    border-radius: var(--border-radius);
    overflow: hidden;
    margin-top: 1rem;
}

.documents-positions-table thead[b-pb4bahggjw] {
    background: var(--gradient-primary);
    color: white;
}

.documents-positions-table thead th[b-pb4bahggjw] {
    border: none;
    padding: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.documents-positions-table tbody tr[b-pb4bahggjw] {
    border-bottom: 1px solid var(--border);
    transition: background-color 0.2s ease;
}

.documents-positions-table tbody tr:hover[b-pb4bahggjw] {
    background-color: var(--surface-2);
}

.documents-positions-table tbody td[b-pb4bahggjw] {
    padding: 0.875rem 1rem;
    vertical-align: middle;
}

/* Responsive */
@media (max-width: 768px) {
    .documents-container[b-pb4bahggjw] {
        padding: 1rem 0;
    }

    .document-header[b-pb4bahggjw] {
        flex-direction: column;
    }

    .summary-card[b-pb4bahggjw] {
        text-align: center;
        flex-direction: column;
    }

    .summary-card i[b-pb4bahggjw] {
        font-size: 2rem;
    }
}
/* /Components/Pages/Deposits/DepositProcessModal.razor.rz.scp.css */
/* DepositProcessModal Component Styles */

.modal.show.d-block[b-gdchv6ufrv] {
    display: block;
}

.modal-dialog.modal-xl[b-gdchv6ufrv] {
    max-width: 1200px;
}

.modal-content[b-gdchv6ufrv] {
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
}

.modal-header[b-gdchv6ufrv] {
    background: var(--gradient-primary);
    color: white;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.modal-header .btn-close[b-gdchv6ufrv] {
    filter: brightness(0) invert(1);
}

.modal-body[b-gdchv6ufrv] {
    max-height: 70vh;
    overflow-y: auto;
}

.modal-body .table[b-gdchv6ufrv] {
    margin-bottom: 0;
}

.modal-body .table thead[b-gdchv6ufrv] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface);
}

.modal-body .table-success[b-gdchv6ufrv] {
    background-color: rgba(198, 246, 213, 0.3);
}

.modal-body .table-warning[b-gdchv6ufrv] {
    background-color: rgba(254, 245, 231, 0.5);
}

.modal-footer[b-gdchv6ufrv] {
    border-top: 2px solid var(--border);
}
/* /Components/Pages/Deposits/PriceList.razor.rz.scp.css */
/* PriceList Component Styles */

.pricelist-container[b-n9h90vndrc] {
    background: var(--global-palette-light);
    min-height: 100vh;
    padding: 2rem 0;
}

.pricelist-header[b-n9h90vndrc] {
    background: var(--surface);
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    margin-bottom: 2rem;
}

    .pricelist-header h3[b-n9h90vndrc] {
        margin: 0;
        font-weight: 700;
        background-image: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.filter-card[b-n9h90vndrc] {
    background: var(--surface);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    margin-bottom: 2rem;
    overflow: hidden;
}

.filter-card-body[b-n9h90vndrc] {
    padding: 2rem;
}

.pricelist-table-card[b-n9h90vndrc] {
    background: var(--surface);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    margin-bottom: 2rem;
}

.pricelist-table[b-n9h90vndrc] {
    margin-bottom: 0;
}

    .pricelist-table thead[b-n9h90vndrc] {
        background-image: var(--gradient-header);
        color: white;
    }

        .pricelist-table thead th[b-n9h90vndrc] {
            border: none;
            padding: 1rem;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.85rem;
            letter-spacing: 0.5px;
            white-space: nowrap;
        }

    .pricelist-table tbody tr[b-n9h90vndrc] {
        transition: all 0.2s ease;
        border-bottom: 1px solid var(--border);
    }

        .pricelist-table tbody tr:hover[b-n9h90vndrc] {
            transform: scale(1.002);
        }

            .pricelist-table tbody tr:hover td[b-n9h90vndrc] {
                background-color: var(--global-palette-light) !important;
            }

    .pricelist-table tbody td[b-n9h90vndrc] {
        padding: 1rem;
        vertical-align: middle;
        transition: background-color 0.2s ease;
    }

.badge-supplier[b-n9h90vndrc] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-weight: 600;
}

.badge-supplier-sku[b-n9h90vndrc] {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-weight: 600;
}

.badge-price[b-n9h90vndrc] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1rem;
}

.product-info-box[b-n9h90vndrc] {
    background: var(--global-palette-light);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.list-group-item[b-n9h90vndrc] {
    border: 1px solid var(--border);
    margin-bottom: 0.5rem;
    border-radius: 6px !important;
}

/* Inline price editing */
.price-display-cell[b-n9h90vndrc] {
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s ease;
    min-height: 38px;
    display: flex;
    align-items: center;
}

    .price-display-cell:hover[b-n9h90vndrc] {
        background-color: var(--surface-2);
        box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.2);
    }

.price-edit-cell[b-n9h90vndrc] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.price-input[b-n9h90vndrc] {
    flex: 1;
    max-width: 120px;
    font-weight: 600;
    border: 2px solid #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

    .price-input:focus[b-n9h90vndrc] {
        border-color: #0d6efd;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.3);
    }

.price-actions[b-n9h90vndrc] {
    display: flex;
    gap: 0.25rem;
}

    .price-actions .btn[b-n9h90vndrc] {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
        line-height: 1;
    }

/* Responsive table for mobile */
@media (max-width: 768px) {
    .pricelist-table-card[b-n9h90vndrc] {
        background: transparent;
        box-shadow: none;
        padding: 0;
    }

    .pricelist-table[b-n9h90vndrc] {
        display: block;
    }

        .pricelist-table thead[b-n9h90vndrc] {
            display: none;
        }

        .pricelist-table tbody[b-n9h90vndrc] {
            display: block;
        }

            .pricelist-table tbody tr[b-n9h90vndrc] {
                display: block;
                background: var(--surface);
                margin-bottom: 0.75rem;
                border-radius: 8px;
                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                padding: 1rem;
                border: none;
            }

                .pricelist-table tbody tr:hover[b-n9h90vndrc] {
                    transform: none;
                }

            .pricelist-table tbody td[b-n9h90vndrc] {
                display: block;
                padding: 0.5rem 0;
                border: none;
                text-align: left;
            }

                .pricelist-table tbody td[b-n9h90vndrc]::before {
                    content: attr(data-label);
                    font-weight: 600;
                    margin-right: 0.5rem;
                    color: var(--text-muted);
                }

    .price-input[b-n9h90vndrc] {
        max-width: 100%;
    }

    .price-edit-cell[b-n9h90vndrc] {
        flex-direction: column;
        align-items: stretch;
    }

    .price-actions[b-n9h90vndrc] {
        width: 100%;
    }

        .price-actions .btn[b-n9h90vndrc] {
            flex: 1;
        }
}
/* /Components/Pages/Finance/CollectionConfig.razor.rz.scp.css */
.nav-tabs .nav-link[b-er4oiwfij5] {
    border-radius: 0;
    min-width: 150px;
}

/* Inactive tab colors - muted versions */
.tab-yellow[b-er4oiwfij5] {
    background-color: rgba(255, 193, 7, 0.3) !important;
    border-color: rgba(255, 193, 7, 0.5) !important;
}

.tab-orange[b-er4oiwfij5] {
    background-color: rgba(253, 126, 20, 0.3) !important;
    border-color: rgba(253, 126, 20, 0.5) !important;
}

.tab-red[b-er4oiwfij5] {
    background-color: rgba(220, 53, 69, 0.3) !important;
    border-color: rgba(220, 53, 69, 0.5) !important;
}

.tab-dark[b-er4oiwfij5] {
    background-color: rgba(33, 37, 41, 0.3) !important;
    border-color: rgba(33, 37, 41, 0.5) !important;
}

/* Active tab colors - full intensity */
.tab-yellow.active[b-er4oiwfij5] {
    background-color: #ffc107 !important;
    color: black !important;
    border-color: #ffc107 !important;
}

.tab-orange.active[b-er4oiwfij5] {
    background-color: #fd7e14 !important;
    /* ciemny tekst — biały na pomarańczu miał kontrast ~2.3 */
    color: #1a1a2e !important;
    border-color: #fd7e14 !important;
}

.tab-red.active[b-er4oiwfij5] {
    background-color: #dc3545 !important;
    color: white !important;
    border-color: #dc3545 !important;
}

.tab-dark.active[b-er4oiwfij5] {
    background-color: #212529 !important;
    color: white !important;
    border-color: #212529 !important;
}

/* Dark mode (audyt 2026-06-10): nieaktywne taby — jasny tekst motywu na tintach .tab-*;
   aktywne ODZYSKUJĄ pełne kolory etapów. Bez tego globalny override z app.css
   ([data-theme] .nav-tabs .nav-link.active → ciemne tło !important) wygrywał z kolorem taba,
   a scoped „color: black !important" zostawał — czarny tekst na ciemnym tle (kontrast ~1). */
[data-theme="dark"] .nav-tabs .nav-link:not(.active)[b-er4oiwfij5] { color: var(--text) !important; }
[data-theme="dark"] .nav-tabs .nav-link.tab-yellow.active[b-er4oiwfij5] { background-color: #ffc107 !important; color: #1a1a2e !important; }
[data-theme="dark"] .nav-tabs .nav-link.tab-orange.active[b-er4oiwfij5] { background-color: #fd7e14 !important; color: #1a1a2e !important; }
[data-theme="dark"] .nav-tabs .nav-link.tab-red.active[b-er4oiwfij5] { background-color: #dc3545 !important; color: #fff !important; }
[data-theme="dark"] .nav-tabs .nav-link.tab-dark.active[b-er4oiwfij5] { background-color: #212529 !important; color: #fff !important; }
/* /Components/Pages/Finance/CollectionTabs.razor.rz.scp.css */
.nav-tabs .nav-link[b-kek38xtb1m] {
    border-radius: 0;
    min-width: 150px;
}

/* Inactive tab colors - muted versions */
.tab-yellow[b-kek38xtb1m] {
    background-color: rgba(255, 193, 7, 0.3) !important;
    border-color: rgba(255, 193, 7, 0.5) !important;
}

.tab-orange[b-kek38xtb1m] {
    background-color: rgba(253, 126, 20, 0.3) !important;
    border-color: rgba(253, 126, 20, 0.5) !important;
}

.tab-red[b-kek38xtb1m] {
    background-color: rgba(220, 53, 69, 0.3) !important;
    border-color: rgba(220, 53, 69, 0.5) !important;
}

.tab-dark[b-kek38xtb1m] {
    background-color: rgba(33, 37, 41, 0.3) !important;
    border-color: rgba(33, 37, 41, 0.5) !important;
}

/* Active tab colors - full intensity */
.tab-yellow.active[b-kek38xtb1m] {
    background-color: #ffc107 !important;
    color: black !important;
    border-color: #ffc107 !important;
}

.tab-orange.active[b-kek38xtb1m] {
    background-color: #fd7e14 !important;
    /* ciemny tekst — biały na pomarańczu miał kontrast ~2.3 */
    color: #1a1a2e !important;
    border-color: #fd7e14 !important;
}

.tab-red.active[b-kek38xtb1m] {
    background-color: #dc3545 !important;
    color: white !important;
    border-color: #dc3545 !important;
}

.tab-dark.active[b-kek38xtb1m] {
    background-color: #212529 !important;
    color: white !important;
    border-color: #212529 !important;
}

.table-orange th[b-kek38xtb1m] {
    background-color: #fd7e14 !important;
    color: white;
}

.bg-orange[b-kek38xtb1m] {
    background-color: #fd7e14 !important;
}

.btn-orange[b-kek38xtb1m] {
    background-color: #fd7e14;
    border-color: #fd7e14;
    color: white;
}

.btn-orange:hover[b-kek38xtb1m] {
    background-color: #e96b02;
    border-color: #e96b02;
    color: white;
}

.sortable-header[b-kek38xtb1m] {
    cursor: pointer;
    user-select: none;
}

.sortable-header:hover[b-kek38xtb1m] {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Dark mode (audyt 2026-06-10): nieaktywne taby — jasny tekst motywu na tintach .tab-*;
   aktywne ODZYSKUJĄ pełne kolory etapów. Bez tego globalny override z app.css
   ([data-theme] .nav-tabs .nav-link.active → ciemne tło !important) wygrywał z kolorem taba,
   a scoped „color: black !important" zostawał — czarny tekst na ciemnym tle (kontrast ~1). */
[data-theme="dark"] .nav-tabs .nav-link:not(.active)[b-kek38xtb1m] { color: var(--text) !important; }
[data-theme="dark"] .nav-tabs .nav-link.tab-yellow.active[b-kek38xtb1m] { background-color: #ffc107 !important; color: #1a1a2e !important; }
[data-theme="dark"] .nav-tabs .nav-link.tab-orange.active[b-kek38xtb1m] { background-color: #fd7e14 !important; color: #1a1a2e !important; }
[data-theme="dark"] .nav-tabs .nav-link.tab-red.active[b-kek38xtb1m] { background-color: #dc3545 !important; color: #fff !important; }
[data-theme="dark"] .nav-tabs .nav-link.tab-dark.active[b-kek38xtb1m] { background-color: #212529 !important; color: #fff !important; }
/* /Components/Pages/Inventory/InventoryReports.razor.rz.scp.css */
/* InventoryReports Component Styles */

.products-container[b-zflcrpfnbv] {
    background: var(--global-palette-light);
    min-height: 100vh;
    padding: 2rem 0;
}

/* Page Header */
.products-header[b-zflcrpfnbv] {
    background: var(--surface);
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    margin-bottom: 2rem;
}

    .products-header h3[b-zflcrpfnbv] {
        margin: 0;
        font-weight: 700;
        background-image: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

        .products-header h3 i[b-zflcrpfnbv] {
            margin-right: 0.5rem;
        }

/* Filter Card */
.filter-card[b-zflcrpfnbv] {
    background: var(--surface);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    margin-bottom: 2rem;
    overflow: hidden;
}

.filter-card-body[b-zflcrpfnbv] {
    padding: 2rem;
}

/* Main Table Card */
.products-table-card[b-zflcrpfnbv] {
    background: var(--surface);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    margin-bottom: 2rem;
}

.products-table[b-zflcrpfnbv] {
    margin-bottom: 0;
}

    .products-table thead[b-zflcrpfnbv] {
        background-image: var(--gradient-header);
        color: white;
    }

        .products-table thead th[b-zflcrpfnbv] {
            border: none;
            padding: 1rem;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.85rem;
            letter-spacing: 0.5px;
            white-space: nowrap;
        }

    .products-table tbody tr[b-zflcrpfnbv] {
        transition: all 0.2s ease;
        border-bottom: 1px solid var(--border);
    }

        .products-table tbody tr:hover[b-zflcrpfnbv] {
            transform: scale(1.005);
        }

            .products-table tbody tr:hover td[b-zflcrpfnbv] {
                background-color: var(--global-palette-light) !important;
            }

    .products-table tbody td[b-zflcrpfnbv] {
        padding: 1rem;
        vertical-align: middle;
        transition: background-color 0.2s ease;
    }

/* Modern Badges */
.badge-modern[b-zflcrpfnbv] {
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.85rem;
    display: inline-block;
}

.badge-warning[b-zflcrpfnbv] {
    background: linear-gradient(135deg, #ffc107 0%, #ffb300 100%);
    color: #000;
}

.badge-success[b-zflcrpfnbv] {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.badge-info[b-zflcrpfnbv] {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    color: white;
}

/* Action Buttons */
.btn-action[b-zflcrpfnbv] {
    padding: 0.5rem 0.75rem;
    border: none;
    border-radius: 6px;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    margin: 0 0.1rem;
}

    .btn-action:hover[b-zflcrpfnbv] {
        transform: none;
        box-shadow: none;
    }

/* Kanon soft-tinted (2026-06-26): edytuj=niebieski, usuń=czerwony */
.btn-action-edit[b-zflcrpfnbv] { background: #e8effe; color: #1d4ed8; }
.btn-action-edit:hover[b-zflcrpfnbv] { background: #d7e4fd; color: #1d4ed8; }

.btn-action-delete[b-zflcrpfnbv] { background: #fdeceb; color: #b91c1c; }
.btn-action-delete:hover[b-zflcrpfnbv] { background: #fbdad7; color: #b91c1c; }

/* Form Controls */
.form-control-modern[b-zflcrpfnbv],
.form-select[b-zflcrpfnbv] {
    border-radius: 8px;
    border: 2px solid var(--border);
    padding: 0.65rem 1rem;
    transition: all 0.2s ease;
}

    .form-control-modern:focus[b-zflcrpfnbv],
    .form-select:focus[b-zflcrpfnbv] {
        border-color: var(--global-palette1);
        box-shadow: 0 0 0 0.2rem rgba(0, 146, 68, 0.15);
    }

.form-label-modern[b-zflcrpfnbv] {
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-modern[b-zflcrpfnbv] {
    border-radius: 8px;
    padding: 0.65rem 1.5rem;
    font-weight: 600;
    transition: all 0.2s ease;
    border: none;
}

    .btn-modern:hover[b-zflcrpfnbv] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

.btn-outline-primary.btn-modern[b-zflcrpfnbv] {
    border: 2px solid var(--global-palette1);
    color: var(--global-palette1);
    background: var(--surface);
}

    .btn-outline-primary.btn-modern:hover[b-zflcrpfnbv] {
        background: var(--global-palette1);
        color: white;
    }

/* Alerts */
.alert-modern[b-zflcrpfnbv] {
    border-radius: var(--border-radius);
    padding: 1rem 1.25rem;
    border: none;
    box-shadow: var(--shadow-sm);
}

    .alert-modern i[b-zflcrpfnbv] {
        margin-right: 0.5rem;
    }

/* Card Modern */
.card-modern[b-zflcrpfnbv] {
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    border: none;
    transition: all 0.2s ease;
}

    .card-modern:hover[b-zflcrpfnbv] {
        box-shadow: var(--shadow-lg);
        transform: translateY(-2px);
    }

/* Inventory Details Modal */
.modal-fullscreen .modal-content[b-zflcrpfnbv] {
    border-radius: 0;
}

.modal-fullscreen .modal-header[b-zflcrpfnbv] {
    background: linear-gradient(135deg, var(--global-palette1) 0%, #007a38 100%);
    color: white;
    padding: 1.25rem 1.5rem;
    border-bottom: none;
}

.modal-fullscreen .modal-title[b-zflcrpfnbv] {
    font-weight: 700;
}

.modal-fullscreen .btn-close[b-zflcrpfnbv] {
    filter: brightness(0) invert(1);
}

/* Inventory Details Table */
.inventory-details-card[b-zflcrpfnbv] {
    border: none;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

    .inventory-details-card .card-header[b-zflcrpfnbv] {
        background: linear-gradient(135deg, #f8f9fa 0%, var(--border) 100%);
        border-bottom: 2px solid var(--border);
        padding: 1rem 1.25rem;
    }

        .inventory-details-card .card-header h6[b-zflcrpfnbv] {
            margin: 0;
            font-weight: 700;
            color: var(--text);
        }

/* Sortable table headers */
.table-sortable thead th[b-zflcrpfnbv] {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

    .table-sortable thead th:hover[b-zflcrpfnbv] {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .table-sortable thead th .bi[b-zflcrpfnbv] {
        opacity: 0.6;
        transition: opacity 0.2s ease;
    }

    .table-sortable thead th:hover .bi[b-zflcrpfnbv] {
        opacity: 1;
    }

    .table-sortable thead th .bi-sort-up[b-zflcrpfnbv],
    .table-sortable thead th .bi-sort-down[b-zflcrpfnbv] {
        opacity: 1;
    }

/* Expandable rows */
.cursor-pointer[b-zflcrpfnbv] {
    cursor: pointer;
}

    .cursor-pointer:hover[b-zflcrpfnbv] {
        background-color: rgba(0, 123, 255, 0.08) !important;
    }

/* Location details row */
.location-detail-row[b-zflcrpfnbv] {
    background-color: var(--surface-2);
    font-size: 0.8rem;
}

    .location-detail-row td[b-zflcrpfnbv] {
        padding: 0.4rem 0.5rem !important;
    }

/* Statistics summary */
.stats-summary[b-zflcrpfnbv] {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-radius: var(--border-radius);
    padding: 1rem 1.5rem;
    border: none;
}

    .stats-summary h6[b-zflcrpfnbv] {
        color: #1565c0;
        font-weight: 700;
        margin-bottom: 0.75rem;
    }

/* Round badges */
.round-badge[b-zflcrpfnbv] {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    color: white;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Export button */
.btn-export[b-zflcrpfnbv] {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border: none;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.2s ease;
}

    .btn-export:hover:not(:disabled)[b-zflcrpfnbv] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
        color: white;
    }

    .btn-export:disabled[b-zflcrpfnbv] {
        opacity: 0.6;
        transform: none;
    }

/* Difference highlighting */
.diff-positive[b-zflcrpfnbv] {
    color: #28a745;
    font-weight: 700;
}

.diff-negative[b-zflcrpfnbv] {
    color: #dc3545;
    font-weight: 700;
}

.diff-zero[b-zflcrpfnbv] {
    color: var(--text-muted);
}

/* Row with difference */
.row-has-difference[b-zflcrpfnbv] {
    background-color: #fff3cd !important;
}

    .row-has-difference:hover[b-zflcrpfnbv] {
        background-color: #ffe69c !important;
    }

/* Responsive Mobile */
@media (max-width: 768px) {
    .products-table-card[b-zflcrpfnbv] {
        background: transparent;
        box-shadow: none;
        padding: 0;
    }

    .products-table[b-zflcrpfnbv] {
        display: block;
    }

        .products-table thead[b-zflcrpfnbv] {
            display: none;
        }

        .products-table tbody[b-zflcrpfnbv] {
            display: block;
        }

            .products-table tbody tr[b-zflcrpfnbv] {
                display: block;
                background: var(--surface);
                margin-bottom: 0.75rem;
                border-radius: 8px;
                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                padding: 0.75rem;
                border: none;
            }

                .products-table tbody tr:hover[b-zflcrpfnbv] {
                    transform: none;
                }

            .products-table tbody td[b-zflcrpfnbv] {
                display: block;
                padding: 0.25rem 0;
                border: none;
                text-align: left;
            }

    .filter-card-body[b-zflcrpfnbv] {
        padding: 1rem;
    }

    .modal-fullscreen .modal-header[b-zflcrpfnbv] {
        padding: 1rem;
    }
}
/* /Components/Pages/Inventory/InventoryScanPage.razor.rz.scp.css */
/* InventoryScanPage Styles - używa tych samych stylów co LocationScanner */

.home-container[b-d1btturv8s] {
    padding: 0.5rem;
    max-width: 100%;
    min-height: calc(100vh - 3.5rem);
    background: var(--global-palette-light);
}

.welcome-screen[b-d1btturv8s] {
    text-align: center;
    padding: 2rem 1rem;
    background: var(--surface);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
}

.welcome-icon[b-d1btturv8s] {
    font-size: 4rem;
    background-image: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.75rem;
}

.welcome-title[b-d1btturv8s] {
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.25rem;
    font-size: 1.1rem;
}

.welcome-text[b-d1btturv8s] {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.product-card[b-d1btturv8s] {
    background: var(--surface);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.product-header[b-d1btturv8s] {
    background-image: var(--gradient-header);
    padding: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #ffffff;
}

.product-header .stock-item[b-d1btturv8s],
.product-header .stock-label[b-d1btturv8s],
.product-header .stock-value[b-d1btturv8s],
.product-header .stock-unit[b-d1btturv8s],
.product-header .product-name[b-d1btturv8s],
.product-header .product-codes[b-d1btturv8s],
.product-header strong[b-d1btturv8s] {
    color: #ffffff !important;
}

.product-header .stock-item[b-d1btturv8s] {
    border-color: rgba(255,255,255,0.45);
}

.product-header .badge-sku[b-d1btturv8s] {
    color: var(--global-palette1) !important;
}

.product-image[b-d1btturv8s] {
    width: 60px;
    height: 60px;
    object-fit: contain;
    background: var(--surface);
    border-radius: 6px;
    padding: 0.15rem;
    cursor: pointer;
    transition: transform 0.2s ease;
}

    .product-image:active[b-d1btturv8s] {
        transform: scale(0.95);
    }

.product-info[b-d1btturv8s] {
    flex: 1;
    min-width: 0;
}

.product-name[b-d1btturv8s] {
    color: white;
    font-weight: 700;
    font-size: 0.95rem;
    margin: 0 0 0.35rem 0;
    word-wrap: break-word;
    line-height: 1.2;
}

.product-codes[b-d1btturv8s] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.product-details[b-d1btturv8s] {
    padding: 0.75rem;
}

.detail-row[b-d1btturv8s] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
}

    .detail-row:last-child[b-d1btturv8s] {
        border-bottom: none;
    }

.detail-label[b-d1btturv8s] {
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 85px;
    font-size: 0.85rem;
}

.detail-value[b-d1btturv8s] {
    flex: 1;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    font-size: 0.85rem;
}

.form-section[b-d1btturv8s] {
    margin-top: 0.75rem;
    padding: 0 0.75rem;
}

.form-label-modern[b-d1btturv8s] {
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.35rem;
    font-size: 0.85rem;
    display: block;
}

    .form-label-modern i[b-d1btturv8s] {
        color: var(--global-palette1);
        margin-right: 0.35rem;
    }

.form-control-lg[b-d1btturv8s] {
    padding: 0.75rem 1rem;
    font-size: 1rem;
}

.action-buttons[b-d1btturv8s] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0 0.75rem 0.75rem 0.75rem;
}

.btn-action[b-d1btturv8s] {
    flex: 1;
    min-width: 0;
    padding: 0.75rem 0.5rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border: none;
    min-height: 48px;
    white-space: nowrap;
}

    .btn-action:active[b-d1btturv8s] {
        transform: scale(0.95);
    }

.btn-bclose[b-d1btturv8s] {
    background-color: #e74c3c;
    color: white;
}

    .btn-bclose:hover[b-d1btturv8s], .btn-bclose:active[b-d1btturv8s] {
        background-color: #c0392b;
    }

.btn-save[b-d1btturv8s] {
    background-image: var(--gradient-primary);
    color: white;
}

    .btn-save:hover[b-d1btturv8s], .btn-save:active[b-d1btturv8s] {
        background-color: var(--global-palette1);
    }

.floating-actions[b-d1btturv8s] {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 1040;
}

.btn-floating[b-d1btturv8s] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-image: var(--gradient-primary);
    color: white;
    border: none;
    box-shadow: var(--shadow-lg);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

    .btn-floating:active[b-d1btturv8s] {
        transform: scale(0.9);
    }

.manual-entry-panel[b-d1btturv8s] {
    background: var(--surface);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 0.75rem;
    display: flex;
    gap: 0.5rem;
    min-width: 260px;
}

    .manual-entry-panel input[b-d1btturv8s] {
        flex: 1;
    }

    .manual-entry-panel button[b-d1btturv8s] {
        min-width: 44px;
    }

@media (min-width: 768px) {
    .home-container[b-d1btturv8s] {
        padding: 1.5rem;
        max-width: 600px;
        margin: 0 auto;
    }

    .product-image[b-d1btturv8s] {
        width: 70px;
        height: 70px;
    }

    .product-name[b-d1btturv8s] {
        font-size: 1.05rem;
    }

    .product-header[b-d1btturv8s] {
        padding: 1rem;
    }

    .product-details[b-d1btturv8s] {
        padding: 1rem;
    }

    .detail-row[b-d1btturv8s] {
        padding: 0.6rem 0;
    }

    .form-section[b-d1btturv8s] {
        padding: 0 1rem;
    }

    .action-buttons[b-d1btturv8s] {
        padding: 0 1rem 1rem 1rem;
    }
}
/* /Components/Pages/Issues/IssueRoutes.razor.rz.scp.css */
/* ============================================
   Wydania — Trasy (IssueRoutes)
   Spójne z paletą AB: --global-palette1..6 z app.css
   ============================================ */

.routes-page[b-3ynyr86ebt] {
    /* Animacja wejścia w stylu apki */
    animation: fadeIn 0.4s ease-in;
    overflow-x: hidden; /* defensive — wąskie viewporty z pełną tabelą nie wypychają main */
}

/* ---------- Hero ---------- */
.routes-hero[b-3ynyr86ebt] {
    background: linear-gradient(135deg, var(--global-palette4, #022c32) 0%, var(--global-palette5, #1e4c53) 100%);
    padding: 1.5rem 1.75rem;
}

.routes-hero h1[b-3ynyr86ebt] {
    font-size: 1.5rem;
    font-weight: 700;
}

.hero-stats[b-3ynyr86ebt] {
    display: flex;
    gap: 1.5rem;
}

.hero-stat[b-3ynyr86ebt] {
    text-align: center;
    color: var(--text); /* theme-aware — blok stoi na tle strony (nie w ciemnym hero), białe etykiety ginęły w light mode */
    min-width: 80px;
}

.hero-stat .stat-num[b-3ynyr86ebt] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--global-palette2, #c1d11c);
    line-height: 1;
}

.hero-stat .stat-lbl[b-3ynyr86ebt] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.85;
    margin-top: 0.25rem;
}

/* ---------- Toolbar ---------- */
.routes-toolbar[b-3ynyr86ebt] {
    background: var(--surface);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    box-shadow: var(--card-shadow, 0 2px 8px rgba(0,0,0,0.08));
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.toolbar-actions[b-3ynyr86ebt], .toolbar-filters[b-3ynyr86ebt] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.toolbar-actions .modern-btn[b-3ynyr86ebt] {
    padding: 0.55rem 1rem;
    font-size: 0.82rem;
}

/* Toggle "Podgląd jako pakowacz" — wyróżniony, ale nie konkurujący z primary actions */
.view-toggle[b-3ynyr86ebt] {
    margin-left: auto;
    font-size: 0.78rem !important;
}

/* Bar podglądu pakowacza — żółty info-banner zamiast normalnego toolbara */
.packer-preview-bar[b-3ynyr86ebt] {
    flex: 1;
    background: linear-gradient(135deg, #fff3cd 0%, #ffeeba 100%);
    border-left: 4px solid #f0b400;
    border-radius: 6px;
    padding: 0.55rem 0.85rem;
    color: #856404;
    align-items: center;
    gap: 0.75rem;
}

.packer-preview-bar .packer-preview-info[b-3ynyr86ebt] {
    flex: 1;
    font-size: 0.88rem;
    color: #856404;
}

.packer-preview-bar .packer-preview-info .bi[b-3ynyr86ebt] {
    margin-right: 0.35rem;
}

.filter-label[b-3ynyr86ebt] {
    font-size: 0.85rem;
    color: var(--global-palette6, #4a6a6e);
    font-weight: 600;
}

.date-pills[b-3ynyr86ebt] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    background: var(--surface-3);
    border-radius: 6px;
    padding: 0.25rem;
}

.date-pill[b-3ynyr86ebt] {
    border: none;
    background: transparent;
    padding: 0.35rem 0.85rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--global-palette3, #111317);
    transition: all 0.2s ease;
}

.date-pill:hover[b-3ynyr86ebt] {
    background: rgba(0,146,68,0.1);
}

.date-pill.active[b-3ynyr86ebt] {
    background: var(--global-palette1, #009244);
    color: white;
    box-shadow: 0 2px 4px rgba(0,146,68,0.3);
}

.date-input[b-3ynyr86ebt] {
    padding: 0.4rem 0.6rem !important;
    width: 150px !important;
    font-size: 0.85rem !important;
}

.icon-btn[b-3ynyr86ebt] {
    background: var(--surface-3);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--global-palette5, #1e4c53);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.icon-btn:hover:not(:disabled)[b-3ynyr86ebt] {
    background: var(--global-palette1, #009244);
    color: white;
}

.icon-btn:disabled[b-3ynyr86ebt] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ---------- Grid kart tras ---------- */
.routes-grid[b-3ynyr86ebt] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 1rem;
}

.route-card[b-3ynyr86ebt] {
    background: var(--surface);
    border-radius: 10px;
    box-shadow: var(--card-shadow, 0 2px 8px rgba(0,0,0,0.08));
    overflow: hidden;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    border-top: 4px solid var(--global-palette6, #4a6a6e);
}

.route-card:hover[b-3ynyr86ebt] {
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.route-card.status-planned[b-3ynyr86ebt]    { border-top-color: var(--global-palette5, #1e4c53); }
.route-card.status-in-progress[b-3ynyr86ebt]{ border-top-color: var(--global-palette2, #c1d11c); }
.route-card.status-completed[b-3ynyr86ebt]  { border-top-color: var(--global-palette1, #009244); }
.route-card.status-cancelled[b-3ynyr86ebt]  { border-top-color: #dc3545; }

.route-card-head[b-3ynyr86ebt] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.85rem 1rem 0.5rem;
    gap: 0.5rem;
}

.route-name[b-3ynyr86ebt] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--global-palette3, #111317);
    line-height: 1.2;
}

.route-date[b-3ynyr86ebt] {
    margin-top: 0.25rem;
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.date-badge[b-3ynyr86ebt] {
    background: var(--surface-3);
    color: var(--global-palette3, #111317);
    padding: 0.15rem 0.55rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.date-badge.today[b-3ynyr86ebt] {
    background: var(--global-palette1, #009244);
    color: white;
}

.day-label[b-3ynyr86ebt] {
    font-size: 0.75rem;
    color: var(--global-palette6, #4a6a6e);
    text-transform: uppercase;
    font-weight: 600;
}

.status-pill[b-3ynyr86ebt] {
    padding: 0.25rem 0.7rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.status-pill.status-planned[b-3ynyr86ebt]    { background: rgba(30,76,83,0.12);  color: var(--global-palette5, #1e4c53); }
.status-pill.status-in-progress[b-3ynyr86ebt]{ background: rgba(193,209,28,0.20);color: #6a7700; }
.status-pill.status-completed[b-3ynyr86ebt]  { background: rgba(0,146,68,0.15);  color: var(--global-palette1, #009244); }
.status-pill.status-cancelled[b-3ynyr86ebt]  { background: rgba(220,53,69,0.15); color: #b91c1c; }

.route-card-body[b-3ynyr86ebt] {
    padding: 0 1rem 0.75rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.route-vehicle[b-3ynyr86ebt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--global-palette5, #1e4c53);
}

.route-vehicle .reg-plate[b-3ynyr86ebt] {
    background: var(--surface-3);
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
    font-family: monospace;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    margin-left: auto;
}

.route-weight .weight-text[b-3ynyr86ebt] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    flex-wrap: wrap;
}

.route-weight .docs-count[b-3ynyr86ebt] {
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--global-palette6, #4a6a6e);
}

.weight-bar[b-3ynyr86ebt] {
    margin-top: 0.4rem;
    height: 8px;
    background: var(--surface-3);
    border-radius: 6px;
    overflow: hidden;
}

.weight-bar-fill[b-3ynyr86ebt] {
    height: 100%;
    border-radius: 6px;
    transition: width 0.4s ease;
}

.weight-bar-fill.ok[b-3ynyr86ebt]    { background: linear-gradient(90deg, var(--global-palette1, #009244), var(--global-palette2, #c1d11c)); }
.weight-bar-fill.warn[b-3ynyr86ebt]  { background: linear-gradient(90deg, #f0b400, #f08000); }
.weight-bar-fill.over[b-3ynyr86ebt]  { background: linear-gradient(90deg, #dc3545, #b91c1c); }

.route-docs[b-3ynyr86ebt] {
    border-top: 1px dashed var(--border);
    padding-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.docs-empty[b-3ynyr86ebt] {
    font-size: 0.8rem;
    color: var(--global-palette6, #4a6a6e);
    font-style: italic;
}

.doc-row-mini[b-3ynyr86ebt] {
    display: grid;
    grid-template-columns: 28px 1fr 1.2fr auto;
    gap: 0.4rem;
    font-size: 0.83rem;
    align-items: baseline;
    padding: 0.15rem 0;
}

.doc-row-mini .doc-order[b-3ynyr86ebt] {
    color: var(--global-palette6, #4a6a6e);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.doc-row-mini .doc-num[b-3ynyr86ebt] {
    font-weight: 600;
    color: var(--global-palette3, #111317);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-row-mini .doc-name[b-3ynyr86ebt] {
    color: var(--global-palette6, #4a6a6e);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-row-mini .doc-weight[b-3ynyr86ebt] {
    background: var(--surface-3);
    padding: 0.05rem 0.4rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--global-palette5, #1e4c53);
    white-space: nowrap;
}

.docs-more[b-3ynyr86ebt] {
    font-size: 0.75rem;
    color: var(--global-palette6, #4a6a6e);
    font-style: italic;
    margin-top: 0.15rem;
    padding-left: 32px;
}

.route-card-foot[b-3ynyr86ebt] {
    border-top: 1px solid var(--border);
    padding: 0.6rem 1rem;
    background: var(--surface-2);
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.route-card-foot .modern-btn[b-3ynyr86ebt] {
    flex: 1;
    padding: 0.5rem 0.75rem;
    font-size: 0.82rem;
}

/* ---------- Empty state ---------- */
.empty-state[b-3ynyr86ebt] {
    background: var(--surface);
    border-radius: 10px;
    padding: 3rem 1.5rem;
    text-align: center;
    box-shadow: var(--card-shadow, 0 2px 8px rgba(0,0,0,0.08));
}

.empty-icon[b-3ynyr86ebt] {
    font-size: 4rem;
    color: var(--global-palette6, #4a6a6e);
    opacity: 0.5;
    margin-bottom: 1rem;
}

.empty-state h3[b-3ynyr86ebt] {
    color: var(--global-palette3, #111317);
    margin-bottom: 0.5rem;
}

.empty-state p[b-3ynyr86ebt] {
    color: var(--global-palette6, #4a6a6e);
    max-width: 480px;
    margin: 0 auto;
}

.empty-state-small[b-3ynyr86ebt] {
    padding: 1.5rem;
    text-align: center;
    color: var(--global-palette6, #4a6a6e);
    font-style: italic;
}

/* ---------- Details modal — tabs ---------- */
.details-tabs[b-3ynyr86ebt] {
    display: flex;
    border-bottom: 2px solid var(--border);
    background: var(--surface-2);
    overflow-x: auto;
}

.details-tab[b-3ynyr86ebt] {
    border: none;
    background: transparent;
    padding: 0.85rem 1.1rem;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--global-palette6, #4a6a6e);
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.details-tab:hover[b-3ynyr86ebt] {
    color: var(--global-palette1, #009244);
    background: rgba(0,146,68,0.04);
}

.details-tab.active[b-3ynyr86ebt] {
    color: var(--global-palette1, #009244);
    border-bottom-color: var(--global-palette1, #009244);
    background: var(--surface);
}

.tab-count[b-3ynyr86ebt] {
    background: var(--surface-3);
    padding: 0.05rem 0.45rem;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    margin-left: 0.15rem;
}

.details-tab.active .tab-count[b-3ynyr86ebt] {
    background: var(--global-palette1, #009244);
    color: white;
}

.details-content[b-3ynyr86ebt] {
    padding: 1rem 1.25rem;
    min-height: 250px;
}

/* ---------- Weight summary (theme-aware: tokeny appki → dobry kontrast w light I dark) ---------- */
.weight-summary[b-3ynyr86ebt] {
    background: var(--surface-2, #f3f6f9);
    color: var(--text, #1d2433);
    border: 1px solid var(--border, #e2e7ec);
    border-left: 4px solid var(--global-palette1, #009244);
    border-radius: 8px;
    padding: 0.85rem 1.1rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.weight-summary.over[b-3ynyr86ebt] {
    background: rgba(220, 53, 69, 0.12);
    border-color: rgba(220, 53, 69, 0.35);
    border-left-color: #dc3545;
}

.weight-summary .weight-big[b-3ynyr86ebt] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-heading, #111317);
    margin: 0 0.4rem;
}

/* ---------- Segment typu trasy (jeden wybór zamiast 2 checkboxów) ---------- */
.route-type-seg[b-3ynyr86ebt] {
    display: inline-flex;
    border: 1px solid var(--border, #d8dee6);
    border-radius: 8px;
    overflow: hidden;
}
.rt-seg[b-3ynyr86ebt] {
    border: none;
    background: var(--surface, #fff);
    color: var(--text-muted, #6c757d);
    padding: 0.4rem 0.7rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.rt-seg + .rt-seg[b-3ynyr86ebt] {
    border-left: 1px solid var(--border, #d8dee6);
}
.rt-seg:hover[b-3ynyr86ebt] {
    background: var(--surface-3, #f1f5f9);
}
.rt-seg.active[b-3ynyr86ebt] {
    background: linear-gradient(135deg, var(--global-palette1, #009244), var(--global-palette6, #16a085));
    color: #fff;
}

/* ---------- Order list (kolejność dostaw) ---------- */
.order-list[b-3ynyr86ebt] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.order-item[b-3ynyr86ebt] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--global-palette1, #009244);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    transition: all 0.15s ease;
    cursor: pointer;
}
.order-item.is-selected[b-3ynyr86ebt] {
    border-color: var(--global-palette1, #009244);
    background: #f1f8f4;
    box-shadow: inset 0 0 0 1px var(--global-palette1, #009244);
}
.order-check[b-3ynyr86ebt] { margin: 0; display: flex; align-items: center; cursor: pointer; }
.order-check .form-check-input[b-3ynyr86ebt] { width: 1.35rem; height: 1.35rem; cursor: pointer; }
.order-seq[b-3ynyr86ebt] {
    font-size: 1.2rem; font-weight: 700; color: var(--global-palette1, #009244);
    font-variant-numeric: tabular-nums; min-width: 1.6rem; text-align: center; flex: 0 0 auto;
}
.order-main[b-3ynyr86ebt] { flex: 1 1 auto; min-width: 0; }
.order-tags[b-3ynyr86ebt] { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.35rem; }
.order-collected-by[b-3ynyr86ebt] { font-size: 0.74rem; color: #6b7480; margin-top: 0.28rem; }
.order-collected-by strong[b-3ynyr86ebt] { color: inherit; font-weight: 700; }
.order-tag[b-3ynyr86ebt] {
    background: #eef3f0; color: #2b3440; border: 1px solid #d6e2da;
    border-radius: 999px; padding: 0.12rem 0.55rem; font-size: 0.74rem; font-weight: 500;
}
.order-tag.pick-done[b-3ynyr86ebt] { background: #e4f6ea; color: #1a7a41; border-color: #b7e4c6; }
.order-tag.pick-partial[b-3ynyr86ebt] { background: #fff4e0; color: #8a5a00; border-color: #f3d9a6; }
.order-tag.pick-none[b-3ynyr86ebt] { background: #f0f2f4; color: #6b7480; border-color: #dde2e7; }
:global([data-theme="dark"]) .order-tag.pick-done[b-3ynyr86ebt] { background: rgba(46,160,90,.18); color: #6ee7a8; border-color: rgba(46,160,90,.45); }
:global([data-theme="dark"]) .order-tag.pick-partial[b-3ynyr86ebt] { background: rgba(224,168,0,.16); color: #f2c66b; border-color: rgba(224,168,0,.42); }
:global([data-theme="dark"]) .order-tag.pick-none[b-3ynyr86ebt] { background: rgba(148,163,184,.14); color: #aab4c0; border-color: rgba(148,163,184,.32); }
.order-side[b-3ynyr86ebt] { display: flex; align-items: center; gap: 0.55rem; flex: 0 0 auto; margin-left: auto; }
.order-remove[b-3ynyr86ebt] { white-space: nowrap; }
/* pasek akcji zbierania (tryb nośnika + zaznacz + zbieraj) */
.route-pick-bar[b-3ynyr86ebt] { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.65rem 0.75rem; background: #f2f8f4; border: 1px solid #cfe6da; border-radius: 10px; }
.route-pick-mode[b-3ynyr86ebt] { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.route-pick-mode-lbl[b-3ynyr86ebt] { font-size: 0.86rem; font-weight: 600; color: #2b3440; }
.pick-mode-toggle[b-3ynyr86ebt] { display: inline-flex; border: 1px solid #cfe6da; border-radius: 8px; overflow: hidden; background: #fff; }
.pick-mode-chip[b-3ynyr86ebt] { border: 0; background: #fff; padding: 8px 16px; font-size: 0.9rem; font-weight: 600; color: #495057; cursor: pointer; white-space: nowrap; }
.pick-mode-chip.active[b-3ynyr86ebt] { background: #159152; color: #fff; }
.route-pick-actions[b-3ynyr86ebt] { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.route-pick-cta[b-3ynyr86ebt] { margin-left: auto; }

.order-item:hover[b-3ynyr86ebt] {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.order-num[b-3ynyr86ebt] {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--global-palette1, #009244);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.order-arrows[b-3ynyr86ebt] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.arrow-btn[b-3ynyr86ebt] {
    background: var(--surface-3);
    border: none;
    width: 28px;
    height: 22px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--global-palette5, #1e4c53);
    transition: all 0.15s ease;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.arrow-btn:hover:not(:disabled)[b-3ynyr86ebt] {
    background: var(--global-palette1, #009244);
    color: white;
}

.arrow-btn:disabled[b-3ynyr86ebt] {
    opacity: 0.3;
    cursor: not-allowed;
}

.order-info[b-3ynyr86ebt] {
    min-width: 0;
}

.order-doc-num[b-3ynyr86ebt] {
    font-weight: 600;
    color: var(--global-palette3, #111317);
    font-size: 0.95rem;
}

.order-contractor[b-3ynyr86ebt] {
    color: var(--global-palette6, #4a6a6e);
    font-size: 0.85rem;
}

.order-meta[b-3ynyr86ebt] {
    font-size: 0.75rem;
    color: var(--global-palette6, #4a6a6e);
    margin-top: 0.15rem;
}

.weight-badge[b-3ynyr86ebt] {
    background: var(--surface-3);
    padding: 0.3rem 0.65rem;
    border-radius: 6px;
    font-weight: 700;
    color: var(--global-palette5, #1e4c53);
    font-size: 0.85rem;
    white-space: nowrap;
}

.weight-badge.no-data[b-3ynyr86ebt] {
    color: var(--global-palette6, #4a6a6e);
    font-style: italic;
    font-weight: 500;
}

/* ---------- DARK MODE zbierania z trasy (pick view) — bez tego zaznaczony wiersz robił się BIAŁY, a teksty znikały ---------- */
:global([data-theme="dark"]) .order-item.is-selected[b-3ynyr86ebt] { background: #12241d !important; box-shadow: inset 0 0 0 1px var(--global-palette1, #009244); }
:global([data-theme="dark"]) .order-doc-num[b-3ynyr86ebt] { color: var(--text, #e8edf2); }
:global([data-theme="dark"]) .order-contractor[b-3ynyr86ebt] { color: var(--text-muted, #aeb8c2); }
:global([data-theme="dark"]) .order-tag[b-3ynyr86ebt] { background: rgba(148,163,184,.14); color: #c7d0da; border-color: rgba(148,163,184,.30); }
:global([data-theme="dark"]) .weight-badge[b-3ynyr86ebt] { background: var(--surface-3, #2a323c) !important; color: #b8e0c9 !important; }
:global([data-theme="dark"]) .weight-badge.no-data[b-3ynyr86ebt] { color: #93a8a0 !important; }
:global([data-theme="dark"]) .route-pick-bar[b-3ynyr86ebt] { background: var(--surface-2, #232a33) !important; border-color: var(--border, #3a434e) !important; }
:global([data-theme="dark"]) .route-pick-mode-lbl[b-3ynyr86ebt] { color: var(--text, #e8edf2) !important; }
:global([data-theme="dark"]) .pick-mode-toggle[b-3ynyr86ebt] { background: var(--surface-3, #2a323c) !important; border-color: var(--border, #3a434e) !important; }
:global([data-theme="dark"]) .pick-mode-chip[b-3ynyr86ebt] { background: var(--surface-3, #2a323c) !important; color: #c7d0da !important; }
:global([data-theme="dark"]) .pick-mode-chip.active[b-3ynyr86ebt] { background: #159152 !important; color: #fff !important; }
:global([data-theme="dark"]) .order-collected-by[b-3ynyr86ebt] { color: #93a8a0; }

/* ---------- Add doc list ---------- */
.search-row[b-3ynyr86ebt] {
    margin-bottom: 0.85rem;
}

.search-row .modern-input[b-3ynyr86ebt] {
    width: 100%;
}

.available-list[b-3ynyr86ebt] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.available-row[b-3ynyr86ebt] {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 0.75rem;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.65rem 0.85rem;
    transition: all 0.2s ease;
}

.available-row:hover[b-3ynyr86ebt] {
    border-color: var(--global-palette1, #009244);
    box-shadow: 0 2px 6px rgba(0,146,68,0.1);
}

.available-row.was-removed[b-3ynyr86ebt] {
    border-left: 4px solid #f0b400;
    background: linear-gradient(90deg, #fffbea 0%, var(--surface) 30%);
}

.avail-removed-badge[b-3ynyr86ebt] {
    margin-top: 0.4rem;
    font-size: 0.78rem;
    color: #856404;
    background: #fff3cd;
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    border-left: 3px solid #ffc107;
    line-height: 1.4;
}

.avail-removed-badge .bi[b-3ynyr86ebt] {
    margin-right: 0.25rem;
}

.avail-num[b-3ynyr86ebt] {
    font-weight: 600;
    color: var(--global-palette3, #111317);
}

.avail-contractor[b-3ynyr86ebt] {
    font-size: 0.85rem;
    color: var(--global-palette6, #4a6a6e);
}

.avail-meta[b-3ynyr86ebt] {
    display: flex;
    gap: 0.3rem;
    flex-direction: column;
    align-items: flex-end;
}

/* ---------- Vehicle / Route def cards ---------- */
.vehicle-list[b-3ynyr86ebt], .route-def-list[b-3ynyr86ebt] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.vehicle-card[b-3ynyr86ebt], .route-def-card[b-3ynyr86ebt] {
    background: var(--surface);
    border-radius: 8px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--global-palette1, #009244);
    padding: 0.85rem;
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 0.85rem;
    align-items: center;
}

.vehicle-card.inactive[b-3ynyr86ebt], .route-def-card.inactive[b-3ynyr86ebt] {
    opacity: 0.55;
    border-left-color: var(--global-palette6, #4a6a6e);
}

.vehicle-icon[b-3ynyr86ebt], .def-icon[b-3ynyr86ebt] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--global-palette4, #022c32), var(--global-palette5, #1e4c53));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.vehicle-fields[b-3ynyr86ebt], .def-fields[b-3ynyr86ebt] {
    min-width: 0;
}

.vehicle-actions[b-3ynyr86ebt], .def-actions[b-3ynyr86ebt] {
    display: flex;
    gap: 0.3rem;
    flex-direction: column;
}

.info-grid[b-3ynyr86ebt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.5rem 1rem;
    margin-top: 1rem;
}

.info-grid div[b-3ynyr86ebt] {
    padding: 0.4rem 0;
    border-bottom: 1px dashed var(--border);
    font-size: 0.9rem;
    color: var(--global-palette3, #111317);
}

/* ---------- btn-sm tweak for modern-btn (toolbar inline) ---------- */
.btn-sm[b-3ynyr86ebt] {
    padding: 0.4rem 0.75rem !important;
    font-size: 0.78rem !important;
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
    .routes-hero[b-3ynyr86ebt] {
        padding: 1rem;
    }
    .routes-hero h1[b-3ynyr86ebt] { font-size: 1.2rem; }
    .hero-stats[b-3ynyr86ebt] {
        gap: 0.85rem;
        width: 100%;
        justify-content: space-between;
    }
    .routes-grid[b-3ynyr86ebt] {
        grid-template-columns: 1fr;
    }
    .toolbar-actions .modern-btn[b-3ynyr86ebt] {
        flex: 1 1 calc(50% - 0.25rem);
        font-size: 0.78rem;
        padding: 0.5rem 0.6rem;
    }
    .order-item[b-3ynyr86ebt] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .order-side[b-3ynyr86ebt] {
        width: 100%;
        justify-content: space-between;
        margin-left: 0;
    }
    .route-pick-cta[b-3ynyr86ebt] { margin-left: 0; width: 100%; justify-content: center; }
    .available-row[b-3ynyr86ebt] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    .avail-meta[b-3ynyr86ebt] {
        flex-direction: row;
        align-items: center;
    }
    .vehicle-card[b-3ynyr86ebt], .route-def-card[b-3ynyr86ebt] {
        grid-template-columns: 1fr;
    }
    .vehicle-icon[b-3ynyr86ebt], .def-icon[b-3ynyr86ebt] {
        margin: 0 auto;
    }
    .vehicle-actions[b-3ynyr86ebt], .def-actions[b-3ynyr86ebt] {
        flex-direction: row;
        justify-content: flex-end;
    }
}

/* ===== Dark mode (audyt 2026-06-10): teksty w kolorach palette5/6 (ciemny morski)
   były nieczytelne na ciemnym tle — remap na tokeny motywu / jaśniejsze odcienie. ===== */
[data-theme="dark"] .day-label[b-3ynyr86ebt],
[data-theme="dark"] .filter-label[b-3ynyr86ebt],
[data-theme="dark"] .route-weight .docs-count[b-3ynyr86ebt],
[data-theme="dark"] .docs-empty[b-3ynyr86ebt],
[data-theme="dark"] .doc-row-mini .doc-order[b-3ynyr86ebt],
[data-theme="dark"] .doc-row-mini .doc-name[b-3ynyr86ebt],
[data-theme="dark"] .docs-more[b-3ynyr86ebt],
[data-theme="dark"] .empty-icon[b-3ynyr86ebt] {
    color: var(--text-secondary);
}
[data-theme="dark"] .route-vehicle[b-3ynyr86ebt],
[data-theme="dark"] .route-vehicle .reg-plate[b-3ynyr86ebt],
[data-theme="dark"] .doc-row-mini .doc-weight[b-3ynyr86ebt],
[data-theme="dark"] .icon-btn[b-3ynyr86ebt] {
    color: var(--text);
}
[data-theme="dark"] .status-pill.status-planned[b-3ynyr86ebt] { background: rgba(122, 178, 186, .18); color: #9fc7cd; }
[data-theme="dark"] .status-pill.status-in-progress[b-3ynyr86ebt] { background: rgba(193, 209, 28, .2); color: #d3e34c; }
[data-theme="dark"] .status-pill.status-cancelled[b-3ynyr86ebt] { background: rgba(220, 53, 69, .2); color: #f87171; }
[data-theme="dark"] .packer-preview-bar[b-3ynyr86ebt] { background: rgba(240, 180, 41, .14); color: var(--text); }
[data-theme="dark"] .packer-preview-bar .packer-preview-info[b-3ynyr86ebt] { color: var(--text); }

/* ===== Wybór ekranu: kafelki Edycja / Pakowanie ===== */
.routes-tiles[b-3ynyr86ebt] { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 6px; }
.route-tile[b-3ynyr86ebt] {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    flex: 1 1 260px; max-width: 360px; min-height: 150px;
    text-align: left; cursor: pointer; text-decoration: none;
    background: var(--surface); border: 1px solid var(--border, #dee2e6); border-radius: 14px;
    padding: 20px 22px; transition: border-color .15s, box-shadow .15s, transform .1s;
}
.route-tile:hover[b-3ynyr86ebt], .route-tile:focus[b-3ynyr86ebt] { text-decoration: none; }
.route-tile:hover[b-3ynyr86ebt] { border-color: #159152; box-shadow: 0 8px 24px rgba(21,145,82,.16); transform: translateY(-2px); }
.route-tile-ico[b-3ynyr86ebt] { font-size: 2rem; color: #159152; }
.route-tile-title[b-3ynyr86ebt] { font-size: 1.25rem; font-weight: 700; color: var(--text, #2b3440); }
.route-tile-sub[b-3ynyr86ebt] { font-size: .9rem; color: var(--text-muted, #6c757d); }
/* /Components/Pages/Issues/IssueWarehouse.razor.rz.scp.css */
/* ===== Page Container ===== */
.products-container[b-7c067i3nrz] {
    background: var(--surface-2);
    min-height: 100vh;
    padding: 1.5rem 0;
}

/* ===== Header ===== */
.pz-list-header[b-7c067i3nrz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ===== Filter Card ===== */
.filter-card[b-7c067i3nrz] {
    background: var(--surface);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    overflow: hidden;
}

.filter-card-body[b-7c067i3nrz] {
    padding: 1rem 1.25rem;
}

.form-label-modern[b-7c067i3nrz] {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.form-control-modern[b-7c067i3nrz] {
    border-radius: 10px;
}

.btn-modern[b-7c067i3nrz] {
    border-radius: 10px;
    padding: 0.45rem 1rem;
    font-weight: 500;
    font-size: 0.9rem;
}

/* ===== Tab Navigation ===== */
.task-tabs[b-7c067i3nrz] {
    display: flex;
    gap: 0.35rem;
    background: var(--surface-2);
    border-radius: 12px;
    padding: 0.3rem;
    margin-bottom: 1.25rem;
}

.task-tab[b-7c067i3nrz] {
    flex: 1;
    text-align: center;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.92rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.task-tab:hover[b-7c067i3nrz] {
    background: rgba(0, 146, 68, 0.08);
    color: #009244;
}

.task-tab.active[b-7c067i3nrz] {
    background: var(--surface);
    color: #009244;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    font-weight: 600;
}

/* ===== Task Cards ===== */
.task-card[b-7c067i3nrz] {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
    overflow: hidden;
    background: var(--surface);
}

.task-card:hover[b-7c067i3nrz] {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    transform: translateY(-1px);
}

.priority-strip[b-7c067i3nrz] {
    width: 5px;
    min-height: 100%;
    flex-shrink: 0;
    border-radius: 4px 0 0 4px;
}

.priority-low[b-7c067i3nrz]    { background: #198754; }
.priority-normal[b-7c067i3nrz] { background: #0d6efd; }
.priority-high[b-7c067i3nrz]   { background: #ffc107; }
.priority-critical[b-7c067i3nrz] { background: #dc3545; }

.task-card-body[b-7c067i3nrz] {
    padding: 1rem 1.25rem;
    flex: 1;
    min-width: 0;
}

.task-title[b-7c067i3nrz] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.task-description[b-7c067i3nrz] {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.task-meta[b-7c067i3nrz] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.task-meta-item[b-7c067i3nrz] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.task-meta-item i[b-7c067i3nrz] {
    font-size: 0.85rem;
    opacity: 0.7;
}

.task-card-chevron[b-7c067i3nrz] {
    display: flex;
    align-items: center;
    padding: 0 1rem;
    color: #adb5bd;
    font-size: 1.2rem;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.task-card:hover .task-card-chevron[b-7c067i3nrz] {
    color: #009244;
}

/* ===== Pill & Modern Buttons ===== */
.btn-pill[b-7c067i3nrz] {
    border-radius: 20px;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
}

.btn-modern[b-7c067i3nrz] {
    border-radius: 10px;
    padding: 0.45rem 1rem;
    font-weight: 500;
    font-size: 0.9rem;
}

/* ===== Alert Modern ===== */
.alert-modern[b-7c067i3nrz] {
    border-radius: 12px;
    border: none;
    font-size: 0.92rem;
    padding: 1rem 1.25rem;
}

/* ===== View Chips ===== */
.view-chip-toggle[b-7c067i3nrz] {
    display: inline-flex;
    gap: 0.4rem;
    background: var(--surface-3);
    border-radius: 999px;
    padding: 0.25rem;
}

.view-chip[b-7c067i3nrz] {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.view-chip:hover[b-7c067i3nrz] {
    background: var(--surface-3);
    color: var(--text);
}

.view-chip.active[b-7c067i3nrz] {
    background: linear-gradient(135deg, #009244, #00b253);
    color: var(--surface);
    box-shadow: 0 3px 12px rgba(0,146,68,0.28);
}

/* ===== Filter Panel ===== */
.filter-panel[b-7c067i3nrz] {
    border-radius: 14px;
}

.form-label-elegant[b-7c067i3nrz] {
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.01em;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
}

.form-control-elegant[b-7c067i3nrz] {
    border-radius: 10px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
}

.form-control-elegant:focus[b-7c067i3nrz] {
    border-color: #009244;
    box-shadow: 0 0 0 0.2rem rgba(0, 146, 68, 0.14);
}

/* ===== Full View Styles ===== */
.full-view-table-wrap[b-7c067i3nrz] {
    border-radius: 12px;
}

.full-view-table-wrap table thead th[b-7c067i3nrz] {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    white-space: nowrap;
    border-bottom-width: 1px;
}

.full-view-table-wrap table tbody tr:hover[b-7c067i3nrz] {
    background-color: var(--surface-3);
}

.full-view-table-wrap .form-check-input[b-7c067i3nrz] {
    width: 1.1rem;
    height: 1.1rem;
    cursor: pointer;
}

.grouped-items-wrap[b-7c067i3nrz] {
    border-top: 1px solid var(--border);
}

.grouped-items-table thead th[b-7c067i3nrz] {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.grouped-items-table tbody tr:hover[b-7c067i3nrz] {
    background-color: var(--surface);
}

.grouped-items-table .badge[b-7c067i3nrz] {
    font-weight: 500;
}

@media (max-width: 576px) {
    .task-tab[b-7c067i3nrz] {
        font-size: 0.82rem;
        padding: 0.5rem 0.5rem;
    }

    .task-card-body[b-7c067i3nrz] {
        padding: 0.75rem 1rem;
    }

    .task-actions[b-7c067i3nrz] {
        padding: 0.75rem 0.75rem 0.75rem 0;
    }

    .task-title[b-7c067i3nrz] {
        font-size: 0.95rem;
    }
}

@media (max-width: 992px) {
    .full-view-table-wrap table[b-7c067i3nrz] {
        min-width: 860px;
    }

    .grouped-items-table[b-7c067i3nrz] {
        min-width: 980px;
    }
}

/* /Components/Pages/LocationScanner.razor.rz.scp.css */
/* LocationScanner Component Styles (Mobile-First) */

.home-container[b-iurl1i7o2q] {
    padding: 0.5rem;
    max-width: 100%;
    min-height: calc(100vh - 3.5rem);
    background: var(--global-palette-light);
}

/* Welcome Screen */
.welcome-screen[b-iurl1i7o2q] {
    text-align: center;
    padding: 2rem 1rem;
    background: var(--surface);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
}

.welcome-icon[b-iurl1i7o2q] {
    font-size: 4rem;
    background-image: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.75rem;
}

.welcome-title[b-iurl1i7o2q] {
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.25rem;
    font-size: 1.1rem;
}

.welcome-text[b-iurl1i7o2q] {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Product Card */
.product-card[b-iurl1i7o2q] {
    background: var(--surface);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.product-header[b-iurl1i7o2q] {
    background-image: var(--gradient-header);
    padding: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #ffffff;
}

.product-header .stock-item[b-iurl1i7o2q],
.product-header .stock-label[b-iurl1i7o2q],
.product-header .stock-value[b-iurl1i7o2q],
.product-header .stock-unit[b-iurl1i7o2q],
.product-header .product-name[b-iurl1i7o2q],
.product-header .product-codes[b-iurl1i7o2q],
.product-header strong[b-iurl1i7o2q] {
    color: #ffffff !important;
}

.product-header .stock-item[b-iurl1i7o2q] {
    border-color: rgba(255,255,255,0.45);
}

.product-header .badge-sku[b-iurl1i7o2q] {
    color: var(--global-palette1) !important;
}

.product-image[b-iurl1i7o2q] {
    width: 60px;
    height: 60px;
    object-fit: contain;
    background: var(--surface);
    border-radius: 6px;
    padding: 0.15rem;
    cursor: pointer;
    transition: transform 0.2s ease;
}

    .product-image:active[b-iurl1i7o2q] {
        transform: scale(0.95);
    }

.product-info[b-iurl1i7o2q] {
    flex: 1;
    min-width: 0;
}

.product-name[b-iurl1i7o2q] {
    color: white;
    font-weight: 700;
    font-size: 0.95rem;
    margin: 0 0 0.35rem 0;
    word-wrap: break-word;
    line-height: 1.2;
}

.product-codes[b-iurl1i7o2q] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* Product Stock in Header */
.product-stock[b-iurl1i7o2q] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.stock-item[b-iurl1i7o2q] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    font-size: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

    .stock-item i[b-iurl1i7o2q] {
        font-size: 0.9rem;
        opacity: 0.9;
    }

    .stock-item .stock-label[b-iurl1i7o2q] {
        font-weight: 500;
    }

    .stock-item .stock-value[b-iurl1i7o2q] {
        font-weight: 700;
        font-size: 0.95rem;
    }

    .stock-item .stock-unit[b-iurl1i7o2q] {
        font-size: 0.75rem;
    }

    .stock-item.stock-available[b-iurl1i7o2q] {
        background: rgba(255, 255, 255, 0.25);
    }

    .stock-item.stock-reserved[b-iurl1i7o2q] {
        background: rgba(255, 255, 255, 0.15);
    }

@media (min-width: 768px) {
    .product-stock[b-iurl1i7o2q] {
        gap: 0.75rem;
        margin-top: 0.65rem;
    }

    .stock-item[b-iurl1i7o2q] {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
    }

        .stock-item .stock-value[b-iurl1i7o2q] {
            font-size: 1rem;
        }
}

/* Product Details */
.product-details[b-iurl1i7o2q] {
    padding: 0.75rem;
}

.detail-row[b-iurl1i7o2q] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
}

    .detail-row:last-child[b-iurl1i7o2q] {
        border-bottom: none;
    }

    .detail-row.highlight[b-iurl1i7o2q] {
        background: var(--global-palette-light);
        margin: 0 -0.75rem;
        padding: 0.5rem 0.75rem;
    }

.detail-label[b-iurl1i7o2q] {
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 85px;
    font-size: 0.85rem;
}

.detail-value[b-iurl1i7o2q] {
    flex: 1;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    font-size: 0.85rem;
}

/* Form Section */
.form-section[b-iurl1i7o2q] {
    margin-top: 0.75rem;
    padding: 0 0.75rem;
}

.form-label-modern[b-iurl1i7o2q] {
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.35rem;
    font-size: 0.85rem;
    display: block;
}

    .form-label-modern i[b-iurl1i7o2q] {
        color: var(--global-palette1);
        margin-right: 0.35rem;
    }

.form-control-lg[b-iurl1i7o2q] {
    padding: 0.75rem 1rem;
    font-size: 1rem;
}

/* Size Selector */
.size-selector[b-iurl1i7o2q] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.size-button[b-iurl1i7o2q] {
    flex: 1;
    padding: 0.75rem;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-muted);
    transition: all 0.2s ease;
    cursor: pointer;
    min-height: 50px;
}

    .size-button:active[b-iurl1i7o2q] {
        transform: scale(0.95);
    }

    .size-button.selected[b-iurl1i7o2q] {
        background-image: var(--gradient-primary);
        color: white;
        border-color: var(--global-palette1);
        box-shadow: var(--shadow-md);
    }

/* Action Buttons */
.action-buttons[b-iurl1i7o2q] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0 0.75rem 0.75rem 0.75rem;
}

.btn-action[b-iurl1i7o2q] {
    flex: 1;
    min-width: 0;
    padding: 0.75rem 0.5rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border: none;
    min-height: 48px;
    white-space: nowrap;
}

/* Responsive: 2 rows for 4 buttons on small screens */
@media (max-width: 576px) {
    .action-buttons[b-iurl1i7o2q] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* When there are only 2-3 buttons, keep them in one row */
    .action-buttons:has(.btn-action:nth-child(4))[b-iurl1i7o2q] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .action-buttons:not(:has(.btn-action:nth-child(4)))[b-iurl1i7o2q] {
        display: flex;
        flex-wrap: nowrap;
    }
    
    .action-buttons:not(:has(.btn-action:nth-child(4))) .btn-action[b-iurl1i7o2q] {
        flex: 1;
    }
}

    .btn-action:active[b-iurl1i7o2q] {
        transform: scale(0.95);
    }

.btn-bclose[b-iurl1i7o2q] {
    background-color: #e74c3c;
    color: white;
}

    .btn-bclose:hover[b-iurl1i7o2q], .btn-bclose:active[b-iurl1i7o2q] {
        background-color: #c0392b;
    }

.btn-save[b-iurl1i7o2q] {
    background-image: var(--gradient-primary);
    color: white;
}

    .btn-save:hover[b-iurl1i7o2q], .btn-save:active[b-iurl1i7o2q] {
        background-color: var(--global-palette1);
    }

.btn-print[b-iurl1i7o2q] {
    background-color: #3498db;
    color: white;
}

    .btn-print:hover[b-iurl1i7o2q], .btn-print:active[b-iurl1i7o2q] {
        background-color: #2980b9;
    }

.btn-assign[b-iurl1i7o2q] {
    width: 100%;
    background-color: #f39c12;
    color: white;
    margin-top: 0.5rem;
}

    .btn-assign:hover[b-iurl1i7o2q], .btn-assign:active[b-iurl1i7o2q] {
        background-color: #e67e22;
    }

.btn-add-ean[b-iurl1i7o2q] {
    background-color: transparent;
    border: 1px solid var(--global-palette1);
    color: var(--global-palette1);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    transition: all 0.2s ease;
    margin-left: 0.5rem;
}

    .btn-add-ean:active[b-iurl1i7o2q] {
        background-color: var(--global-palette1);
        color: white;
    }

/* Floating Actions */
.floating-actions[b-iurl1i7o2q] {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 1040;
}

.btn-floating[b-iurl1i7o2q] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-image: var(--gradient-primary);
    color: white;
    border: none;
    box-shadow: var(--shadow-lg);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

    .btn-floating:active[b-iurl1i7o2q] {
        transform: scale(0.9);
    }

.manual-entry-panel[b-iurl1i7o2q] {
    background: var(--surface);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 0.75rem;
    display: flex;
    gap: 0.5rem;
    min-width: 260px;
}

    .manual-entry-panel input[b-iurl1i7o2q] {
        flex: 1;
    }

    .manual-entry-panel button[b-iurl1i7o2q] {
        min-width: 44px;
    }

    /* Responsive Adjustments */
@media (min-width: 768px) {
    .home-container[b-iurl1i7o2q] {
        padding: 1.5rem;
        max-width: 600px;
        margin: 0 auto;
    }

    .product-image[b-iurl1i7o2q] {
        width: 70px;
        height: 70px;
    }

    .product-name[b-iurl1i7o2q] {
        font-size: 1.05rem;
    }

    .product-header[b-iurl1i7o2q] {
        padding: 1rem;
    }

    .product-details[b-iurl1i7o2q] {
        padding: 1rem;
    }

    .detail-row[b-iurl1i7o2q] {
        padding: 0.6rem 0;
    }

    .form-section[b-iurl1i7o2q] {
        padding: 0 1rem;
    }

    .action-buttons[b-iurl1i7o2q] {
        padding: 0 1rem 1rem 1rem;
    }
}

/* Landscape Mode */
@media (orientation: landscape) and (max-height: 500px) {
    .home-container[b-iurl1i7o2q] {
        padding: 0.35rem;
    }

    .product-card[b-iurl1i7o2q] {
        margin-bottom: 0.35rem;
    }

    .product-header[b-iurl1i7o2q] {
        padding: 0.5rem;
    }

    .product-image[b-iurl1i7o2q] {
        width: 50px;
        height: 50px;
    }

    .product-name[b-iurl1i7o2q] {
        font-size: 0.85rem;
    }

    .product-details[b-iurl1i7o2q] {
        padding: 0.5rem;
    }

    .detail-row[b-iurl1i7o2q] {
        padding: 0.35rem 0;
    }

    .form-section[b-iurl1i7o2q] {
        margin-top: 0.5rem;
        padding: 0 0.5rem;
    }

    .action-buttons[b-iurl1i7o2q] {
        margin-top: 0.5rem;
        padding: 0 0.5rem 0.5rem 0.5rem;
        gap: 0.35rem;
    }

    .btn-action[b-iurl1i7o2q] {
        padding: 0.5rem 0.35rem;
        min-height: 40px;
        font-size: 0.8rem;
    }

    .size-button[b-iurl1i7o2q] {
        padding: 0.5rem;
        min-height: 40px;
        font-size: 1rem;
    }

    .detail-label[b-iurl1i7o2q] {
        font-size: 0.75rem;
    }

    .detail-value[b-iurl1i7o2q] {
        font-size: 0.75rem;
    }
}

/* Small Screens */
@media (max-width: 300px) {
    .action-buttons[b-iurl1i7o2q] {
        flex-direction: column;
    }

    .btn-action[b-iurl1i7o2q] {
        width: 100%;
    }

    .size-selector[b-iurl1i7o2q] {
        flex-direction: row;
    }

    .detail-label[b-iurl1i7o2q] {
        min-width: 75px;
        font-size: 0.8rem;
    }

    .detail-value[b-iurl1i7o2q] {
        font-size: 0.8rem;
    }

    .product-name[b-iurl1i7o2q] {
        font-size: 0.9rem;
    }

    .product-header[b-iurl1i7o2q] {
        padding: 0.6rem;
    }

    .product-image[b-iurl1i7o2q] {
        width: 55px;
        height: 55px;
    }
}

/* ===== Location View ===== */
.location-view-card[b-iurl1i7o2q] {
    background: var(--surface);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.location-view-header[b-iurl1i7o2q] {
    background-image: var(--gradient-header);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #ffffff;
}

.location-view-header *[b-iurl1i7o2q],
.location-view-header strong[b-iurl1i7o2q],
.location-view-header .badge[b-iurl1i7o2q] {
    color: #ffffff !important;
}

.location-view-icon[b-iurl1i7o2q] {
    font-size: 1.75rem;
    opacity: 0.9;
    flex-shrink: 0;
}

.location-view-title[b-iurl1i7o2q] {
    flex: 1;
    min-width: 0;
}

.location-view-title h5[b-iurl1i7o2q] {
    margin: 0;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 0.5px;
    word-break: break-all;
}

.location-view-count[b-iurl1i7o2q] {
    font-size: 0.82rem;
    opacity: 0.85;
}

.location-view-header .btn[b-iurl1i7o2q] {
    color: white;
    border-color: rgba(255,255,255,0.4);
    flex-shrink: 0;
}

.location-view-header .btn:hover[b-iurl1i7o2q] {
    background: rgba(255,255,255,0.15);
}

.location-view-empty[b-iurl1i7o2q] {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--text-faint);
}

.location-view-empty i[b-iurl1i7o2q] {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.location-view-empty p[b-iurl1i7o2q] {
    margin: 0;
    font-size: 0.9rem;
}

.location-view-section-header[b-iurl1i7o2q] {
    padding: 0.6rem 1rem;
    background: var(--surface-2);
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.location-view-list[b-iurl1i7o2q] {
    padding: 0;
}

.location-product-item[b-iurl1i7o2q] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s ease;
}

.location-product-item:last-child[b-iurl1i7o2q] {
    border-bottom: none;
}

.location-product-item:active[b-iurl1i7o2q] {
    background: #f0f7ff;
}

.location-product-thumb[b-iurl1i7o2q] {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 8px;
    background: var(--app-bg);
    flex-shrink: 0;
}

.location-product-thumb-placeholder[b-iurl1i7o2q] {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.location-product-info[b-iurl1i7o2q] {
    flex: 1;
    min-width: 0;
}

.location-product-name[b-iurl1i7o2q] {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text);
    line-height: 1.25;
    margin-bottom: 0.2rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.location-product-codes[b-iurl1i7o2q] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.location-product-codes .badge[b-iurl1i7o2q] {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.15rem 0.4rem;
}

.location-product-extra-qty[b-iurl1i7o2q] {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

.location-product-stock[b-iurl1i7o2q] {
    text-align: right;
    flex-shrink: 0;
}

.stock-badge[b-iurl1i7o2q] {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text);
}

.stock-unit[b-iurl1i7o2q] {
    display: block;
    font-size: 0.72rem;
    color: var(--text-faint);
}

.location-product-arrow[b-iurl1i7o2q] {
    color: #ccc;
    font-size: 0.9rem;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .location-product-item:hover[b-iurl1i7o2q] {
        background: #f0f7ff;
    }

    .location-product-thumb[b-iurl1i7o2q],
    .location-product-thumb-placeholder[b-iurl1i7o2q] {
        width: 52px;
        height: 52px;
    }
}
/* /Components/Pages/Orders/OrderBoard.razor.rz.scp.css */
/* ============================================================================
   Tablica hali — ekran do powieszenia na telewizorze albo starym monitorze.

   Czyta sie ja z drugiego konca hali, wiec: ciemne tlo, ogromne cyfry, zero
   ozdobnikow. Tablica jest ciemna ZAWSZE, takze gdy aplikacja chodzi w motywie
   jasnym — to nie jest przeoczenie, tylko decyzja: ekran wisi w hali, gdzie
   biala plama sciany razi, a nikt do niego nie podchodzi, zeby przelaczyc motyw.
   Dlatego tlo i kolor tekstu sa tu ustawione JAWNIE i nie zaleza od gospodarza.

   Kolory bierzemy mimo to ze zmiennych palety — z wyjatkiem palette3, ktora w
   ciemnym motywie zamienia sie w kolor tekstu i na stalym ciemnym tle bylaby
   pulapka. Uzywamy 1, 2, 4, 5 i 6, bo te sa takie same w obu motywach.

   Warstwa: tablica przykrywa cala aplikacje (position: fixed) — menu boczne
   siedzi na 1000, guziki skanowania na 1075, wiec 2000 wystarcza. Modale
   (10000) i komunikaty (10500) zostaja NAD tablica i to jest w porzadku.
   ============================================================================ */

.ob-screen[b-b1cotkiyjn] {
    position: fixed;
    inset: 0;
    z-index: 2000;

    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: clamp(.35rem, 1.2vh, 1rem);
    padding: clamp(.5rem, 1.4vh, 1.3rem) clamp(.7rem, 1.4vw, 1.8rem);

    background: linear-gradient(150deg, var(--global-palette4) 0%, var(--global-palette5) 100%);
    color: var(--text-light);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    overflow: hidden;

    /* Jedyny kolor spoza palety: alarm. Ten sam odcien, co kafel braku na ekranie
       statystyk — zeby „brak" wygladal wszedzie tak samo. */
    --ob-alarm: #f59e0b;
}

/* ── Pasek gorny ─────────────────────────────────────────────────────────── */

.ob-top[b-b1cotkiyjn] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
}

.ob-title[b-b1cotkiyjn] {
    font-size: clamp(.9rem, 2.2vh, 1.5rem);
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--global-palette2);
    white-space: nowrap;
}

.ob-top-right[b-b1cotkiyjn] {
    display: flex;
    align-items: baseline;
    gap: clamp(.6rem, 1.4vw, 1.6rem);
    min-width: 0;
}

.ob-day[b-b1cotkiyjn] {
    font-size: clamp(.7rem, 1.6vh, 1.05rem);
    opacity: .55;
    white-space: nowrap;
}

/* Znacznik „dane z" — po wejsciu ma byc od razu widac, czy tablica zyje,
   czy wisi na nim wczorajszy obrazek. */
.ob-stamp[b-b1cotkiyjn] {
    font-size: clamp(.7rem, 1.6vh, 1.05rem);
    opacity: .55;
    letter-spacing: .04em;
    white-space: nowrap;
}

/* Wyjscie jest jedyna interakcja na tym ekranie. Celowo ledwie widoczne: ma
   ratowac kogos, kto wszedl tu przez pomylke, a nie zapraszac do klikania. */
.ob-exit[b-b1cotkiyjn] {
    font-size: clamp(.65rem, 1.4vh, .9rem);
    color: var(--text-light);
    opacity: .28;
    text-decoration: none;
    white-space: nowrap;
}

    .ob-exit:hover[b-b1cotkiyjn],
    .ob-exit:focus[b-b1cotkiyjn] {
        opacity: .85;
        color: var(--global-palette2);
        text-decoration: none;
    }

/* ── Cztery wielkie liczby ───────────────────────────────────────────────── */

.ob-tiles[b-b1cotkiyjn] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(.35rem, .9vw, 1rem);
}

.ob-tile[b-b1cotkiyjn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .1rem;
    min-width: 0;
    padding: clamp(.35rem, 1.2vh, 1rem) .5rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
    border-top: 5px solid rgba(255, 255, 255, .25);
    text-align: center;
}

    .ob-tile.is-waiting[b-b1cotkiyjn] { border-top-color: var(--global-palette6); }
    .ob-tile.is-picked[b-b1cotkiyjn] { border-top-color: var(--global-palette2); }
    .ob-tile.is-packed[b-b1cotkiyjn] { border-top-color: var(--global-palette1); }
    .ob-tile.is-calm[b-b1cotkiyjn] { border-top-color: var(--global-palette6); }

    .ob-tile.is-warn[b-b1cotkiyjn] {
        border-top-color: var(--ob-alarm);
        background: rgba(245, 158, 11, .12);
    }

/* Cyfra skalowana wysokoscia ekranu, nie szerokoscia: przy 1366x768 to
   wysokosc jest ciasna, a nie szerokosc. */
.ob-num[b-b1cotkiyjn] {
    font-size: clamp(1.8rem, 9vh, 6rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
}

.ob-cap[b-b1cotkiyjn] {
    font-size: clamp(.75rem, 2.2vh, 1.35rem);
    font-weight: 600;
    letter-spacing: .06em;
}

.ob-hint[b-b1cotkiyjn] {
    font-size: clamp(.6rem, 1.4vh, .9rem);
    opacity: .5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.ob-tile.is-warn .ob-num[b-b1cotkiyjn] { color: var(--ob-alarm); }

/* ── Panele (slupki, ranking) ────────────────────────────────────────────── */

.ob-panel[b-b1cotkiyjn] {
    display: flex;
    flex-direction: column;
    gap: clamp(.2rem, .7vh, .55rem);
    min-height: 0;
}

.ob-panel-title[b-b1cotkiyjn] {
    font-size: clamp(.65rem, 1.5vh, .95rem);
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .5;
}

/* Pusty dzien: jedno zdanie zamiast rzedu slupkow o zerowej wysokosci —
   pusta tablica ma wygladac na pusta, a nie na zepsuta. */
.ob-empty[b-b1cotkiyjn] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: clamp(2.5rem, 8vh, 5rem);
    padding: .5rem 1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
    font-size: clamp(.85rem, 2.2vh, 1.4rem);
    opacity: .55;
    text-align: center;
}

/* ── Slupki godzinowe ────────────────────────────────────────────────────── */

.ob-bars[b-b1cotkiyjn] {
    display: flex;
    align-items: stretch;
    gap: clamp(2px, .5vw, 10px);
    flex: 1 1 auto;
    min-height: 0;
}

.ob-slot[b-b1cotkiyjn] {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    gap: 2px;
}

.ob-bar-val[b-b1cotkiyjn] {
    font-size: clamp(.6rem, 1.7vh, 1.05rem);
    font-weight: 700;
    text-align: center;
    color: var(--global-palette2);
    min-height: 1.15em;
    line-height: 1.15;
}

/* Tor slupka jest kontenerem POZYCJONOWANYM, a sam slupek lezy w nim absolutnie.
   Procent wysokosci liczony wzgledem takiego rodzica dziala w kazdej przegladarce;
   procent na elemencie flex bywa liczony wzgledem „auto" i slupek znika. */
.ob-bar-track[b-b1cotkiyjn] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 7px 7px 0 0;
    background: rgba(255, 255, 255, .05);
}

.ob-bar[b-b1cotkiyjn] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 7px 7px 0 0;
    background: linear-gradient(180deg, var(--global-palette2) 0%, var(--global-palette1) 100%);
}

.ob-bar-hour[b-b1cotkiyjn] {
    font-size: clamp(.6rem, 1.5vh, .95rem);
    text-align: center;
    opacity: .5;
    line-height: 1.2;
}

.ob-slot.is-past .ob-bar-track[b-b1cotkiyjn] { box-shadow: none; }

.ob-slot.is-now .ob-bar-track[b-b1cotkiyjn] {
    box-shadow: inset 0 0 0 2px rgba(193, 209, 28, .55);
}

.ob-slot.is-now .ob-bar-hour[b-b1cotkiyjn] {
    opacity: 1;
    font-weight: 700;
    color: var(--global-palette2);
}

/* ── Ranking zmiany ──────────────────────────────────────────────────────── */

.ob-crew-list[b-b1cotkiyjn] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(.2rem, .6vh, .5rem) clamp(.5rem, 1.2vw, 1.4rem);
}

.ob-crew-row[b-b1cotkiyjn] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "place person total"
        "place detail total";
    align-items: center;
    column-gap: clamp(.35rem, .8vw, .9rem);
    min-width: 0;
    padding: clamp(.15rem, .5vh, .45rem) clamp(.35rem, .8vw, .8rem);
    border-radius: 10px;
    background: rgba(255, 255, 255, .05);
    border-left: 5px solid rgba(255, 255, 255, .12);
}

.ob-place[b-b1cotkiyjn] {
    grid-area: place;
    width: 1.5em;
    text-align: center;
    font-size: clamp(.9rem, 2.6vh, 1.6rem);
    font-weight: 800;
    opacity: .4;
    line-height: 1;
}

.ob-person[b-b1cotkiyjn] {
    grid-area: person;
    min-width: 0;
    font-size: clamp(.85rem, 2.4vh, 1.5rem);
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ob-person-detail[b-b1cotkiyjn] {
    grid-area: detail;
    min-width: 0;
    font-size: clamp(.58rem, 1.4vh, .88rem);
    opacity: .5;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ob-person-total[b-b1cotkiyjn] {
    grid-area: total;
    font-size: clamp(1.05rem, 3.4vh, 2.2rem);
    font-weight: 800;
    line-height: 1;
    color: var(--global-palette2);
}

/* Pierwsza trojka wyrozniona. Bez zlota i medali — sam kolor krawedzi i numeru. */
.ob-crew-row.is-top1[b-b1cotkiyjn] {
    background: rgba(255, 255, 255, .11);
    border-left-color: var(--global-palette2);
}

    .ob-crew-row.is-top1 .ob-place[b-b1cotkiyjn] {
        opacity: .95;
        color: var(--global-palette2);
    }

.ob-crew-row.is-top2[b-b1cotkiyjn] {
    background: rgba(255, 255, 255, .08);
    border-left-color: var(--global-palette1);
}

    .ob-crew-row.is-top2 .ob-place[b-b1cotkiyjn] { opacity: .7; }

.ob-crew-row.is-top3[b-b1cotkiyjn] {
    background: rgba(255, 255, 255, .07);
    border-left-color: var(--global-palette6);
}

    .ob-crew-row.is-top3 .ob-place[b-b1cotkiyjn] { opacity: .6; }

.ob-crew-row.is-rest[b-b1cotkiyjn] { opacity: .82; }

/* ── Waskie i niskie ekrany ──────────────────────────────────────────────────
   Stary monitor 1366x768 obsluguje sama siatka clamp(). Ponizej 1100 px robi
   sie ciasno na cztery kolumny liczb i dwie kolumny ludzi — schodzimy nizej. */

@media (max-width: 1100px) {
    .ob-tiles[b-b1cotkiyjn] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ob-crew-list[b-b1cotkiyjn] { grid-template-columns: minmax(0, 1fr); }
    .ob-day[b-b1cotkiyjn] { display: none; }
}

@media (max-height: 700px) {
    .ob-hint[b-b1cotkiyjn] { display: none; }
    .ob-panel-title[b-b1cotkiyjn] { letter-spacing: .1em; }
}
/* /Components/Pages/Orders/OrderCarriers.razor.rz.scp.css */
/* ── Tablica „Co jest w wózkach" ─────────────────────────────────────────────
   Jeden wózek = jedna karta. Kod nośnika jest tu tym, czego szuka oko, więc jest
   największy; postęp stoi po prawej, bo to on decyduje, czy zwolnienie boli. */
.cb-card[b-90h623eaya] {
    border: 1px solid var(--border, #dee2e6);
    border-left: 4px solid var(--global-palette1, #009244);
    border-radius: 12px;
    padding: .85rem .9rem;
    margin-bottom: .8rem;
    background: var(--surface, #fff);
}

/* Wózek stojący od kilku godzin bez domknięcia — to on zwykle jest porzucony. */
.cb-stale[b-90h623eaya] {
    border-left-color: #f0ad4e;
    background: var(--surface-2, #f8f9fa);
}

.cb-head[b-90h623eaya] {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    flex-wrap: wrap;
}

.cb-code[b-90h623eaya] {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.1;
}

.cb-code i[b-90h623eaya] {
    color: var(--global-palette1, #009244);
}

.cb-meta[b-90h623eaya] {
    flex: 1 1 220px;
    min-width: 0;
}

.cb-who[b-90h623eaya] {
    font-size: .95rem;
    font-weight: 600;
}

.cb-mode[b-90h623eaya] {
    font-size: .83rem;
    color: var(--text-muted, #6c757d);
}

.cb-dot[b-90h623eaya] {
    margin: 0 .3rem;
    opacity: .6;
}

.cb-progress[b-90h623eaya] {
    flex: 0 0 auto;
    text-align: right;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.cb-progress-num[b-90h623eaya] {
    display: block;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--global-palette1, #009244);
}

.cb-progress-of[b-90h623eaya] {
    font-size: .78rem;
    color: var(--text-muted, #6c757d);
}

.cb-orders[b-90h623eaya] {
    margin-top: .7rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.cb-order[b-90h623eaya] {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .38rem .55rem;
    border: 1px solid var(--border, #dee2e6);
    border-radius: 9px;
    background: var(--surface-2, #f8f9fa);
}

.cb-basket[b-90h623eaya] {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--global-palette1, #009244);
    color: #fff;
    font-weight: 800;
}

.cb-order-main[b-90h623eaya] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.cb-kh[b-90h623eaya] {
    font-size: .8rem;
    color: var(--text-muted, #6c757d);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-order-qty[b-90h623eaya] {
    flex: 0 0 auto;
    font-size: .78rem;
    color: var(--text-muted, #6c757d);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Zwolnienie jest destrukcyjne — stoi za kreską i pyta drugi raz. */
.cb-actions[b-90h623eaya] {
    margin-top: .8rem;
    padding-top: .7rem;
    border-top: 1px dashed var(--border, #dee2e6);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.cb-actions-note[b-90h623eaya] {
    font-size: .8rem;
    color: var(--text-muted, #6c757d);
}

.cb-confirm[b-90h623eaya] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.cb-confirm-q[b-90h623eaya] {
    font-weight: 700;
}

.cb-confirm-w[b-90h623eaya] {
    font-size: .87rem;
    color: var(--text-secondary, #555);
}

.cb-confirm-btns[b-90h623eaya] {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.cb-confirm-btns .btn[b-90h623eaya] {
    flex: 1 1 auto;
    min-height: 44px;
}

@media (max-width: 768px) {
    .cb-order-qty[b-90h623eaya] {
        flex-basis: 100%;
        text-align: left;
        padding-left: 2.15rem;
    }
}
/* /Components/Pages/Orders/OrderHistoryPanel.razor.rz.scp.css */
/* ── Historia obsługi zamówienia ─────────────────────────────────────────────
   Oś czasu, nie tabela. Kolory trzymamy w zmiennych zdefiniowanych na samym
   panelu, żeby tryb ciemny był jednym blokiem niżej, a nie przepisaniem stylu. */
.oh-panel[b-a4dhat3cat] {
    --oh-ok: var(--global-palette1, #009244);
    --oh-brak: #b8620d;
    --oh-zmiana: var(--global-palette5, #1e4c53);
    --oh-przerwa: var(--text-faint, #94a3b8);
    --oh-koniec: var(--global-palette6, #4a6a6e);
    --oh-start: var(--global-palette2, #0d6efd);
    --oh-linia: var(--border, #e2e8f0);

    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px solid var(--border, #e2e8f0);
}

[data-theme="dark"] .oh-panel[b-a4dhat3cat] {
    --oh-brak: #f0ad4e;
    --oh-zmiana: #7fb3bd;
    --oh-koniec: #9fb8bc;
    --oh-start: #7aa7ff;
}

/* ── nagłówek ─────────────────────────────────────────────────────────────── */
.oh-head[b-a4dhat3cat] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: .7rem;
}

.oh-title[b-a4dhat3cat] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-heading, #111317);
}

.oh-title i[b-a4dhat3cat] {
    color: var(--oh-ok);
    margin-right: .35rem;
}

.oh-count[b-a4dhat3cat] {
    font-size: .8rem;
    color: var(--text-muted, #64748b);
}

/* ── stany: wczytywanie i pustka ──────────────────────────────────────────── */
.oh-loading[b-a4dhat3cat] {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .9rem 0;
    color: var(--text-muted, #64748b);
    font-size: .9rem;
}

.oh-empty[b-a4dhat3cat] {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .9rem 1rem;
    border: 1px dashed var(--border-strong, #cbd5e1);
    border-radius: 12px;
    background: var(--surface-2, #f8fafc);
}

.oh-empty i[b-a4dhat3cat] {
    font-size: 1.5rem;
    color: var(--text-faint, #94a3b8);
    flex: 0 0 auto;
}

.oh-empty-title[b-a4dhat3cat] {
    font-weight: 600;
    color: var(--text, #0f172a);
}

.oh-empty-sub[b-a4dhat3cat] {
    font-size: .87rem;
    color: var(--text-muted, #64748b);
}

/* ── podsumowanie ─────────────────────────────────────────────────────────── */
.oh-summary[b-a4dhat3cat] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .55rem;
    margin-bottom: .9rem;
}

.oh-tile[b-a4dhat3cat] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
    padding: .55rem .7rem;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    background: var(--surface-2, #f8fafc);
}

.oh-tile-wide[b-a4dhat3cat] {
    grid-column: span 2;
    border-left: 4px solid var(--oh-ok);
}

.oh-tile-label[b-a4dhat3cat] {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-muted, #64748b);
}

.oh-tile-value[b-a4dhat3cat] {
    font-size: 1.18rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--text-heading, #111317);
}

.oh-tile-people[b-a4dhat3cat] {
    font-size: .95rem;
    font-weight: 600;
    color: var(--text, #0f172a);
    overflow-wrap: anywhere;
}

.oh-tile-note[b-a4dhat3cat] {
    font-size: .88rem;
    font-style: italic;
    color: var(--text-muted, #64748b);
}

.oh-warn[b-a4dhat3cat] {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .8rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--oh-brak);
}

/* ── oś czasu ─────────────────────────────────────────────────────────────── */
.oh-timeline[b-a4dhat3cat] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.oh-step[b-a4dhat3cat] {
    position: relative;
    display: grid;
    grid-template-columns: 1.6rem 4.4rem 1fr;
    align-items: start;
    gap: .1rem .55rem;
    padding: .3rem 0 .45rem;
}

/* Kreska między krokami: od dołu kółka do następnego kółka. Ostatni krok jej nie ma,
   bo nic po nim nie następuje — a wisząca kreska sugeruje, że coś jeszcze będzie. */
.oh-step:not(:last-child)[b-a4dhat3cat]::before {
    content: "";
    position: absolute;
    left: .77rem;
    top: 1.75rem;
    bottom: -.15rem;
    width: 2px;
    background: var(--oh-linia);
}

.oh-mark[b-a4dhat3cat] {
    grid-column: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: 2px solid currentColor;
    background: var(--surface, #fff);
    font-size: .78rem;
    line-height: 1;
    flex: 0 0 auto;
}

.oh-time[b-a4dhat3cat] {
    grid-column: 2;
    padding-top: .22rem;
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--text-muted, #64748b);
}

.oh-body[b-a4dhat3cat] {
    grid-column: 3;
    min-width: 0;
    padding-top: .12rem;
}

.oh-what[b-a4dhat3cat] {
    font-size: .93rem;
    line-height: 1.35;
    color: var(--text, #0f172a);
    overflow-wrap: anywhere;
}

.oh-what strong[b-a4dhat3cat] {
    font-weight: 700;
    /* Razor zjada odstep miedzy nazwiskiem a opisem — bez tego czyta sie „Wojcikpobranie 6 szt.". */
    margin-right: .35em;
}

.oh-unknown[b-a4dhat3cat] {
    color: var(--text-muted, #64748b);
    font-weight: 600;
}

.oh-gap[b-a4dhat3cat] {
    display: inline-block;
    margin-left: .4rem;
    padding: .05rem .4rem;
    border-radius: 999px;
    background: var(--surface-3, #f1f5f9);
    font-size: .76rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--text-muted, #64748b);
}

.oh-detail[b-a4dhat3cat] {
    margin-top: .1rem;
    font-size: .82rem;
    line-height: 1.3;
    color: var(--text-muted, #64748b);
    overflow-wrap: anywhere;
}

/* ── odcienie kroków ──────────────────────────────────────────────────────── */
/* „start" to wzięcie zamówienia do pracy — pierwszy krok każdego przejścia przez czyjeś ręce.
   Osobny odcień od „ok" (pobranie z półki), bo to nie jest praca przy towarze, tylko jej początek. */
.oh-start .oh-mark[b-a4dhat3cat] { color: var(--oh-start); }
.oh-ok .oh-mark[b-a4dhat3cat] { color: var(--oh-ok); }
.oh-brak .oh-mark[b-a4dhat3cat] { color: var(--oh-brak); }
.oh-zmiana .oh-mark[b-a4dhat3cat] { color: var(--oh-zmiana); }
.oh-przerwa .oh-mark[b-a4dhat3cat] { color: var(--oh-przerwa); }

.oh-koniec .oh-mark[b-a4dhat3cat] {
    color: var(--oh-koniec);
    border-color: var(--oh-koniec);
    background: var(--oh-koniec);
}

.oh-koniec .oh-mark i[b-a4dhat3cat] {
    color: var(--surface, #fff);
}

.oh-brak .oh-what[b-a4dhat3cat],
.oh-koniec .oh-what[b-a4dhat3cat] {
    font-weight: 600;
}

/* ── telefon: godzina nad opisem, nie obok ────────────────────────────────── */
@media (max-width: 560px) {
    .oh-summary[b-a4dhat3cat] {
        grid-template-columns: 1fr 1fr;
    }

    .oh-tile-wide[b-a4dhat3cat] {
        grid-column: span 2;
    }

    .oh-step[b-a4dhat3cat] {
        grid-template-columns: 1.6rem 1fr;
    }

    .oh-time[b-a4dhat3cat] {
        grid-column: 2;
        padding-top: .2rem;
        font-size: .78rem;
    }

    .oh-body[b-a4dhat3cat] {
        grid-column: 2;
        padding-top: .05rem;
    }

    .oh-gap[b-a4dhat3cat] {
        margin-left: .3rem;
    }
}

@media (max-width: 380px) {
    .oh-summary[b-a4dhat3cat] {
        grid-template-columns: 1fr;
    }

    .oh-tile-wide[b-a4dhat3cat] {
        grid-column: span 1;
    }
}
/* /Components/Pages/Orders/OrderPack.razor.rz.scp.css */
/* ── Stanowisko pakowania ─────────────────────────────────────────────────────────
   Ekran ma trzy stany i ani jednego pola do wpisywania kodu: czekanie na skan,
   wozek (kafle) i otwarte zamowienie (stol). Wszystkie kolory ida przez tokeny
   motywu (--surface/--text/--border), wiec ciemny motyw dziala bez osobnych regul. */

/* ── 1) Czekanie na skan ───────────────────────────────────────────────────────── */

.pk-idle[b-e1s8bgtm37] {
    max-width: 46rem;
    margin: 3rem auto 2rem;
    text-align: center;
}

.pk-idle-mark[b-e1s8bgtm37] {
    font-size: 5rem;
    line-height: 1;
    color: var(--global-palette1);
    opacity: .85;
    animation: pkPuls-b-e1s8bgtm37 2.4s ease-in-out infinite;
}

@keyframes pkPuls-b-e1s8bgtm37 {
    0%, 100% { opacity: .55; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.04); }
}

.pk-idle-title[b-e1s8bgtm37] {
    margin-top: 1rem;
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-heading);
}

.pk-idle-sub[b-e1s8bgtm37] {
    margin: .4rem auto 0;
    max-width: 34rem;
    color: var(--text-muted);
    font-size: 1rem;
}

.pk-idle-stats[b-e1s8bgtm37] {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.pk-stat[b-e1s8bgtm37] {
    color: var(--text-secondary);
    font-size: .95rem;
}

    .pk-stat b[b-e1s8bgtm37] {
        color: var(--global-palette1);
        font-size: 1.15rem;
    }

/* Gotowe przegrody regalu: to jest WEZWANIE do skanu, nie ozdoba stanu spoczynku,
   wiec ma wygladac na cel, a nie na plakietke informacyjna. */
.pk-bins[b-e1s8bgtm37] {
    margin-top: 1.75rem;
    padding: .9rem 1rem;
    border: 1px solid var(--global-palette1);
    border-radius: .6rem;
    background: color-mix(in srgb, var(--global-palette1) 8%, transparent);
}

.pk-bins-lead[b-e1s8bgtm37] {
    color: var(--text-secondary);
    font-size: .9rem;
    margin-bottom: .6rem;
}

.pk-bins-row[b-e1s8bgtm37] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
}

.pk-bin[b-e1s8bgtm37] {
    display: inline-flex;
    align-items: baseline;
    gap: .4rem;
    padding: .35rem .7rem;
    border-radius: .4rem;
    background: var(--surface);
    border: 1px solid var(--border);
}

    .pk-bin b[b-e1s8bgtm37] {
        font-size: 1.05rem;
        letter-spacing: .02em;
        color: var(--global-palette1);
    }

.pk-bin-no[b-e1s8bgtm37] {
    font-size: .82rem;
    color: var(--text-muted);
}

/* Jedyne wejscie do podgladu kolejki na calym ekranie pakowania — a stalo w --text-muted,
   czyli 4,36:1 przy wymaganych 4,5:1 (zmierzone straznikiem abwms-kontrast-pakowania).
   Roznica jest niewielka, ale to jest odnosnik, ktorego sie SZUKA, a nie taki, ktory sam
   wpada w oko: pol progu nizej znaczy, ze ktos go po prostu nie znajdzie.
   --text-secondary daje 7,55:1 w jasnym i 9,54:1 w ciemnym, tym samym jednym tokenem. */
.pk-link[b-e1s8bgtm37] {
    margin-top: 1.75rem;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: .88rem;
    text-decoration: underline;
    cursor: pointer;
}

    /* Zielen marki na jasnym tle to 3,71:1, a na ciemnym 4,44:1 — w obu za malo na napis.
       Najechanie ma podkreslac, ze to dziala, a nie gasic czytelnosc. */
    .pk-link:hover[b-e1s8bgtm37],
    .pk-link:focus-visible[b-e1s8bgtm37] {
        color: var(--text);
        text-decoration-thickness: 2px;
    }

.pk-queue[b-e1s8bgtm37] {
    margin-top: .75rem;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    max-height: 24rem;
    overflow-y: auto;
}

.pk-queue-note[b-e1s8bgtm37] {
    padding: .5rem .9rem;
    background: var(--surface-3);
    color: var(--text-muted);
    font-size: .8rem;
}

.pk-queue-empty[b-e1s8bgtm37] {
    padding: 1.25rem;
    color: var(--text-muted);
}

.pk-queue-row[b-e1s8bgtm37] {
    display: grid;
    grid-template-columns: 8rem 1fr 9rem 8rem;
    gap: .75rem;
    align-items: baseline;
    padding: .55rem .9rem;
    border-top: 1px solid var(--border);
    font-size: .88rem;
    color: var(--text);
}

.pk-queue-no[b-e1s8bgtm37] { font-weight: 700; }
.pk-queue-cust[b-e1s8bgtm37] { color: var(--text-secondary); }
.pk-queue-meta[b-e1s8bgtm37] { color: var(--text-muted); font-size: .82rem; }

/* ── 2) Wozek: kafle zamiast listy do klikania ─────────────────────────────────── */

.pk-prompt[b-e1s8bgtm37] {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1.1rem 1.4rem;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 5px solid var(--global-palette1);
    box-shadow: var(--card-shadow);
}

    .pk-prompt.narrow[b-e1s8bgtm37] {
        border-left-color: var(--global-palette2);
    }

.pk-prompt-mark[b-e1s8bgtm37] {
    font-size: 2.4rem;
    line-height: 1;
    color: var(--global-palette1);
}

.pk-prompt-title[b-e1s8bgtm37] {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-heading);
}

.pk-prompt-sub[b-e1s8bgtm37] {
    color: var(--text-muted);
    font-size: .92rem;
    margin-top: .1rem;
}

.pk-tiles[b-e1s8bgtm37] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: .75rem;
    margin-top: 1rem;
}

.pk-tile[b-e1s8bgtm37] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
    padding: .8rem .9rem;
    min-height: 7.4rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    border-top: 4px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

    .pk-tile:hover[b-e1s8bgtm37] {
        transform: translateY(-2px);
        box-shadow: var(--hover-shadow);
        border-top-color: var(--global-palette1);
    }

    .pk-tile.hit[b-e1s8bgtm37] {
        border-top-color: var(--global-palette2);
        box-shadow: 0 0 0 2px var(--global-palette2) inset;
    }

    .pk-tile.dim[b-e1s8bgtm37] {
        opacity: .32;
    }

    .pk-tile.done[b-e1s8bgtm37] {
        opacity: .55;
        border-top-color: var(--global-palette1);
        cursor: default;
    }

.pk-tile-slot[b-e1s8bgtm37] {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--global-palette1);
}

.pk-tile-no[b-e1s8bgtm37] {
    font-size: 1.18rem;
    font-weight: 800;
    color: var(--text-heading);
}

.pk-tile-cust[b-e1s8bgtm37] {
    font-size: .86rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Zdjecia na kaflu wozka. To samo zrodlo co miniatury pozycji (ProductImages) — kafel pokazuje
   jednak CALE zamowienie, wiec miesci do trzech miniatur, a reszte zbiera w "+N". */
.pk-tile-photos[b-e1s8bgtm37] {
    display: flex;
    gap: .3rem;
    margin-top: .45rem;
    flex-wrap: nowrap;
}

.pk-tile-photo[b-e1s8bgtm37] {
    flex: 0 0 auto;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface-3);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .pk-tile-photo img[b-e1s8bgtm37] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.pk-tile-more[b-e1s8bgtm37] {
    font-size: .8rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.pk-tile-noimg[b-e1s8bgtm37] {
    color: var(--text-muted);
    font-size: 1.05rem;
}

.pk-tile-meta[b-e1s8bgtm37] {
    margin-top: auto;
    font-size: .8rem;
    color: var(--text-muted);
}

.pk-dots[b-e1s8bgtm37] {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-top: 1rem;
    padding: .6rem .9rem;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.pk-dots-row[b-e1s8bgtm37] {
    display: inline-flex;
    gap: .35rem;
}

.pk-dot[b-e1s8bgtm37] {
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--border-strong);
}

    .pk-dot.on[b-e1s8bgtm37] { background: var(--global-palette1); }

.pk-dots-text[b-e1s8bgtm37] {
    color: var(--text-muted);
    font-size: .86rem;
}

/* ── 3) Otwarte zamowienie: stol ───────────────────────────────────────────────── */

.pk-order-bar[b-e1s8bgtm37] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .75rem 1rem;
    border-radius: 12px 12px 0 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-bottom: 0;
}

.pk-order-doc[b-e1s8bgtm37] {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-heading);
}

.pk-order-cust[b-e1s8bgtm37] {
    margin-left: .75rem;
    color: var(--text-secondary);
}

.pk-order-where[b-e1s8bgtm37] {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

.pk-cols[b-e1s8bgtm37] {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
}

.pk-col[b-e1s8bgtm37] {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: .9rem 1rem 1.2rem;
}

    .pk-col:first-child[b-e1s8bgtm37] { border-radius: 0 0 0 12px; border-right: 0; }

.pk-col-box[b-e1s8bgtm37] {
    border-radius: 0 0 12px 0;
    background: var(--surface-2);
    display: flex;
    flex-direction: column;
}

.pk-col-title[b-e1s8bgtm37] {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: .6rem;
}

.pk-loading[b-e1s8bgtm37] {
    padding: 1rem;
    color: var(--text-muted);
}

/* Wiersz pozycji: gotowa karta ze zdjeciem + awaryjne akcje obok. */
.pk-line[b-e1s8bgtm37] {
    display: flex;
    align-items: center;
    gap: .4rem;
}

    .pk-line[b-e1s8bgtm37]  .pz-item-card {
        flex: 1;
        min-width: 0;
    }

    .pk-line.hot[b-e1s8bgtm37]  .pz-item-card {
        box-shadow: 0 0 0 2px var(--global-palette1);
    }

.pk-line-acts[b-e1s8bgtm37] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

/* Prawa kolumna: co powstaje, a nie co ma wejsc. */
.pk-progress[b-e1s8bgtm37] { margin-bottom: .9rem; }

.pk-progress-bar[b-e1s8bgtm37] {
    height: 10px;
    border-radius: 999px;
    background: var(--surface-3);
    overflow: hidden;
}

    .pk-progress-bar span[b-e1s8bgtm37] {
        display: block;
        height: 100%;
        background: linear-gradient(90deg, var(--global-palette1), var(--global-palette2));
        transition: width .18s ease;
    }

.pk-progress-text[b-e1s8bgtm37] {
    margin-top: .35rem;
    font-size: .86rem;
    color: var(--text-secondary);
}

.pk-last[b-e1s8bgtm37] {
    display: flex;
    gap: .9rem;
    align-items: center;
    padding: .9rem;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    min-height: 7.5rem;
}

.pk-last-photo img[b-e1s8bgtm37] {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 10px;
    cursor: zoom-in;
    background: var(--surface-3);
}

.pk-last-noimg[b-e1s8bgtm37] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 10px;
    background: var(--surface-3);
    color: var(--text-faint);
    font-size: 2rem;
}

.pk-last-info[b-e1s8bgtm37] { min-width: 0; }

.pk-last-name[b-e1s8bgtm37] {
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}

.pk-last-count[b-e1s8bgtm37] {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.05;
    color: var(--global-palette1);
}

.pk-last-hint[b-e1s8bgtm37] {
    font-size: .86rem;
    color: var(--text-muted);
}

.pk-last-empty[b-e1s8bgtm37] {
    color: var(--text-muted);
    font-size: .95rem;
}

.pk-label[b-e1s8bgtm37] {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .9rem;
    padding: .55rem .8rem;
    border-radius: 10px;
    background: var(--surface-3);
    font-size: .86rem;
}

.pk-label-key[b-e1s8bgtm37] { color: var(--text-muted); }
.pk-label-val[b-e1s8bgtm37] { color: var(--text-secondary); font-weight: 600; text-align: right; }

.pk-close[b-e1s8bgtm37] {
    margin-top: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    padding: 1.1rem 1rem;
    border: 0;
    border-radius: 12px;
    background: var(--surface-3);
    color: var(--text-faint);
    cursor: not-allowed;
}

    .pk-close.ready[b-e1s8bgtm37] {
        background: linear-gradient(135deg, var(--global-palette1), #00b34f);
        color: #fff;
        cursor: pointer;
        box-shadow: var(--card-shadow);
    }

    .pk-close.ready:hover[b-e1s8bgtm37] { box-shadow: var(--hover-shadow); }

.pk-close-main[b-e1s8bgtm37] {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.pk-close-sub[b-e1s8bgtm37] {
    font-size: .82rem;
    opacity: .9;
}

/* ── Komunikaty ────────────────────────────────────────────────────────────────── */

/* ── Ekran zamykający ──────────────────────────────────────────────────────────
   Po spakowaniu zostawał cienki pasek nad kolejką — czyli najważniejsza informacja
   stanowiska przelatywała niezauważona. To jest ten sam komunikat, tylko wielkości
   tego, co mówi: co spakowano, ile sztuk, która przegroda zwolniona, co ze sklepem. */
.pk-done[b-e1s8bgtm37] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    margin-bottom: .85rem;
    border-radius: 14px;
    background: var(--surface, #fff);
    border: 2px solid var(--global-palette1, #009244);
    box-shadow: 0 6px 20px rgba(0, 146, 68, .14);
}

.pk-done-ico[b-e1s8bgtm37] {
    font-size: 2.2rem;
    line-height: 1;
    color: var(--global-palette1, #009244);
    flex: 0 0 auto;
}

.pk-done-main[b-e1s8bgtm37] { flex: 1 1 auto; min-width: 0; }

.pk-done-title[b-e1s8bgtm37] {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--global-palette1, #009244);
}

.pk-done-label[b-e1s8bgtm37] {
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.pk-done-facts[b-e1s8bgtm37] {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.1rem;
    margin-top: .2rem;
    font-size: .95rem;
    color: var(--text-secondary, #495057);
}

.pk-done-shop[b-e1s8bgtm37] {
    margin-top: .35rem;
    font-size: .9rem;
    color: var(--text-secondary, #495057);
}

.pk-done-side[b-e1s8bgtm37] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
}

/* Odliczanie ma być widoczne kątem oka, a nie czytane — stąd jedna duża cyfra. */
.pk-done-count[b-e1s8bgtm37] {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--global-palette1, #009244);
    border: 2px solid var(--global-palette1, #009244);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
    .pk-done[b-e1s8bgtm37] { flex-wrap: wrap; }
    .pk-done-side[b-e1s8bgtm37] { flex-direction: row; width: 100%; justify-content: space-between; }
}

.pk-alert[b-e1s8bgtm37] {
    display: flex;
    align-items: center;
    margin: 1rem 0 0;
    padding: .7rem .95rem;
    border-radius: 10px;
    font-size: .92rem;
    border-left: 4px solid var(--border-strong);
    background: var(--surface-3);
    color: var(--text);
}

    .pk-alert.bad[b-e1s8bgtm37] { border-left-color: #dc3545; background: rgba(220, 53, 69, .12); }
    .pk-alert.good[b-e1s8bgtm37] { border-left-color: var(--global-palette1); background: rgba(0, 146, 68, .12); }
    .pk-alert.warn[b-e1s8bgtm37] { border-left-color: #f59e0b; background: rgba(245, 158, 11, .14); }
    .pk-alert.info[b-e1s8bgtm37] { border-left-color: var(--global-palette6); background: rgba(74, 106, 110, .12); }

/* ── Wezsze okno: stol sklada sie do jednej kolumny ────────────────────────────── */

@media (max-width: 1100px) {
    .pk-cols[b-e1s8bgtm37] { grid-template-columns: minmax(0, 1fr); }
    .pk-col:first-child[b-e1s8bgtm37] { border-radius: 0; border-right: 1px solid var(--border); }
    .pk-col-box[b-e1s8bgtm37] { border-radius: 0 0 12px 12px; }
    .pk-queue-row[b-e1s8bgtm37] { grid-template-columns: 1fr 1fr; }
    .pk-idle-title[b-e1s8bgtm37] { font-size: 2rem; }
}

/* Podpis przy pozycji bez kodu kreskowego (uslugi: koszt dostawy, pakowanie na prezent).
   Skanera nie ma do czego przylozyc, a paczka bez tej pozycji sie nie zamknie. */
.pk-line-nocode[b-e1s8bgtm37] {
    font-size: .75rem;
    color: var(--bs-warning-text-emphasis, #7a5b00);
    background: rgba(255, 193, 7, .14);
    border-radius: 6px;
    padding: .15rem .45rem;
    white-space: nowrap;
    align-self: center;
}


/* ── Usługi na dokumencie ────────────────────────────────────────────────────
   Widoczne, ale wyraźnie POZA paczką: bez zdjęcia, bez licznika, bez przycisków. */
.pk-services[b-e1s8bgtm37] {
    margin-top: 1rem;
    padding: .7rem .8rem;
    border: 1px dashed var(--border, #dee2e6);
    border-radius: 10px;
    background: var(--surface-2, #f8f9fa);
}

.pk-services-title[b-e1s8bgtm37] {
    font-weight: 600;
    font-size: .9rem;
    color: var(--text-secondary, #555);
    margin-bottom: .4rem;
}

.pk-service[b-e1s8bgtm37] {
    display: flex;
    justify-content: space-between;
    gap: .8rem;
    padding: .22rem 0;
    font-size: .9rem;
}

.pk-service-qty[b-e1s8bgtm37] {
    color: var(--text-muted, #6c757d);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pk-services-note[b-e1s8bgtm37] {
    margin-top: .35rem;
    font-size: .8rem;
    color: var(--text-muted, #6c757d);
}


/* ── „Spakuj wszystko" ───────────────────────────────────────────────────────
   Skrót, nie główna droga: mały, spokojny przycisk nad listą, a potwierdzenie
   rozwija się w miejscu, żeby pytanie stało dokładnie tam, gdzie się kliknęło. */
.pk-all[b-e1s8bgtm37] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: .7rem;
}

.pk-all-note[b-e1s8bgtm37] {
    font-size: .8rem;
    color: var(--text-muted, #6c757d);
}

.pk-all-confirm[b-e1s8bgtm37] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    padding: .7rem .8rem;
    border: 1px solid var(--border, #dee2e6);
    border-left: 4px solid #f0ad4e;
    border-radius: 10px;
    background: var(--surface-2, #f8f9fa);
}

.pk-all-q[b-e1s8bgtm37] {
    font-weight: 700;
}

.pk-all-w[b-e1s8bgtm37] {
    font-size: .87rem;
    color: var(--text-secondary, #555);
}

.pk-all-btns[b-e1s8bgtm37] {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.pk-all-btns .btn[b-e1s8bgtm37] {
    flex: 1 1 auto;
    min-height: 44px;
}

/* ── Kolektor (390 px) ──────────────────────────────────────────────────────────
   Stol pakowania DZIALA na telefonie, ale ukladem byl pisany pod 1280: naglowek z
   czterema przyciskami zjadal pol ekranu, a pole roboczej pracy — licznik i domkniecie
   paczki — lezalo pod zgieciem. Pakujacy z regalem w drugiej rece nie ma jak przewijac.

   Naprawiamy UKLAD, nie robimy drugiego ekranu: jedno pakowanie, jedna logika. */

@media (max-width: 640px) {

    /* „Ta paczka" idzie NA GORE: to tam sie patrzy przy kazdym skanie. Lista pozycji
       jest pomocnicza — sprawdza sie ja rzadziej niz licznik. */
    .pk-cols[b-e1s8bgtm37] {
        display: flex;
        flex-direction: column;
    }

    .pk-col-box[b-e1s8bgtm37] { order: -1; border-radius: 12px 12px 0 0; }
    .pk-col:first-child[b-e1s8bgtm37] { border-radius: 0 0 12px 12px; }

    /* Naglowek zjadal pol pierwszego ekranu czterema przyciskami w slupku. */
    .page-header[b-e1s8bgtm37] { padding: .7rem .85rem; }

    .page-header h3[b-e1s8bgtm37] { font-size: 1.15rem; }

    .page-header .btn[b-e1s8bgtm37] {
        padding: .3rem .55rem;
        font-size: .82rem;
    }
}

/* ── Wybor gabarytu przy domykaniu paczki ───────────────────────────────────────
   Przyciski sa duze, bo klika sie je z rekami zajetymi karonem — nie mysza po liscie. */
.pk-gabaryty[b-e1s8bgtm37] {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.pk-gabaryt[b-e1s8bgtm37] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
    min-width: 11rem;
    padding: .7rem .9rem;
    border: 2px solid var(--border);
    border-radius: .6rem;
    background: var(--surface);
    cursor: pointer;
    text-align: left;
}

    .pk-gabaryt:hover[b-e1s8bgtm37] {
        border-color: var(--global-palette1);
        background: color-mix(in srgb, var(--global-palette1) 8%, var(--surface));
    }

.pk-gabaryt-kod[b-e1s8bgtm37] {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--global-palette1);
    line-height: 1.1;
}

.pk-gabaryt-nazwa[b-e1s8bgtm37] { font-size: .92rem; }

.pk-gabaryt-wym[b-e1s8bgtm37] {
    font-size: .78rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* ── Podpowiedz z historii: „Zwykle: K3 — 23 razy” ──────────────────────────────
   To jest INFORMACJA, ktora da sie kliknac, a nie wybor zrobiony za czlowieka. Stad
   akcent na palette2 (limonka) zamiast palette1: palette1 znaczy tu „najechales” i
   „glowna akcja”, wiec staly zielony kontur czytalby sie jak „juz zaznaczone”.
   Limonka jest za jasna na tekst (na bialym wychodzi ~1.7:1), wiec niesie tylko
   obwodke i tlo — litery zawsze ida tokenem motywu i dzialaja w obu trybach. */
.pk-gabaryt-hint[b-e1s8bgtm37] {
    display: flex;
    align-items: center;
    gap: .85rem;
    width: 100%;
    margin-bottom: .9rem;
    padding: .65rem .9rem;
    border: 2px solid var(--global-palette2);
    border-radius: .6rem;
    background: color-mix(in srgb, var(--global-palette2) 14%, var(--surface));
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: background .12s ease;
}

    .pk-gabaryt-hint:hover[b-e1s8bgtm37] {
        background: color-mix(in srgb, var(--global-palette2) 26%, var(--surface));
    }

.pk-gabaryt-hint-ico[b-e1s8bgtm37] {
    flex: 0 0 auto;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--global-palette1);
}

.pk-gabaryt-hint-txt[b-e1s8bgtm37] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pk-gabaryt-hint-main[b-e1s8bgtm37] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-heading);
}

.pk-gabaryt-hint-sub[b-e1s8bgtm37] {
    font-size: .8rem;
    color: var(--text-muted);
}

.pk-gabaryt-hint-name[b-e1s8bgtm37] {
    margin-left: auto;
    padding-left: .75rem;
    font-size: .85rem;
    color: var(--text-secondary);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ten sam gabaryt na siatce dostaje PODPIS, a nie ptaszek: nic nie jest wybrane,
   dopoki ktos nie kliknie. */
.pk-gabaryt.zwykle[b-e1s8bgtm37] {
    border-color: var(--global-palette2);
}

.pk-gabaryt-zwykle[b-e1s8bgtm37] {
    margin-top: .2rem;
    padding: .1rem .4rem;
    border-radius: 4px;
    background: color-mix(in srgb, var(--global-palette2) 32%, transparent);
    color: var(--text);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

@media (max-width: 640px) {
    .pk-gabaryt-hint[b-e1s8bgtm37] {
        flex-wrap: wrap;
    }

    .pk-gabaryt-hint-name[b-e1s8bgtm37] {
        margin-left: 0;
        padding-left: 0;
        width: 100%;
        text-align: left;
    }
}

/* ── Paczka zostawiona w połowie ──────────────────────────────────────────────
   Stoi na ekranie startowym, nad komunikatami: pierwsze, co pakujący widzi po
   powrocie, ma być jego własna niedokończona robota, a nie prośba o skan. */
.pk-resume[b-e1s8bgtm37] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
    max-width: 42rem;
    margin: 1rem auto 0;
    padding: .85rem 1rem;
    border: 1px solid var(--global-palette1, #009244);
    border-left: 5px solid var(--global-palette1, #009244);
    border-radius: 8px;
    background: var(--surface, #fff);
}

.pk-resume-title[b-e1s8bgtm37] {
    font-size: 1.05rem;
    font-weight: 600;
}

.pk-resume-sub[b-e1s8bgtm37] {
    font-size: .9rem;
    color: var(--text-secondary, #6c757d);
    margin-top: .15rem;
}

/* ── OSTATNIO SPAKOWANE: wejscie do podgladu na ekranie startowym ──────────────
   Panel zamykajacy ucieka po pieciu sekundach, a pytanie „czy dobrze to zlozylem"
   pada minute pozniej. To wejscie zostaje, dopoki nie domknie sie nastepna paczka.
   Wyglada spokojniej niz pasek zaczetej paczki (obramowanie, nie kolor marki),
   bo tamten jest ROBOTA DO DOKONCZENIA, a ten tylko zaproszeniem do zerkniecia. */
.pk-last[b-e1s8bgtm37] {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    max-width: 42rem;
    margin: 1rem auto 0;
    padding: .7rem .9rem;
    border: 1px dashed var(--border, rgba(0, 0, 0, .2));
    border-radius: 8px;
    background: var(--surface, #fff);
    color: inherit;
    text-align: left;
    cursor: pointer;
}

    .pk-last:hover[b-e1s8bgtm37] {
        border-color: var(--global-palette1, #009244);
    }

.pk-last-ico[b-e1s8bgtm37] {
    font-size: 1.3rem;
    color: var(--global-palette1, #009244);
    flex: 0 0 auto;
}

.pk-last-txt[b-e1s8bgtm37] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.pk-last-title[b-e1s8bgtm37] {
    font-size: .98rem;
}

.pk-last-sub[b-e1s8bgtm37] {
    font-size: .85rem;
    color: var(--text-secondary, #6c757d);
}

.pk-last-go[b-e1s8bgtm37] {
    flex: 0 0 auto;
    color: var(--text-secondary, #6c757d);
}

/* ── PODGLAD SPAKOWANEJ PACZKI ────────────────────────────────────────────────
   Okno jest ZAWSZE tylko do czytania, wiec nie ma tu ani jednego akcentu akcji:
   zielony zostaje wylacznie na plakietce „Spakowane", zeby nie zapraszal do klikania. */
.pk-peek[b-e1s8bgtm37] {
    max-width: 44rem;
}

.pk-peek-head[b-e1s8bgtm37] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .5rem;
}

.pk-peek-nr[b-e1s8bgtm37] {
    font-size: 1.25rem;
    font-weight: 700;
}

.pk-peek-facts[b-e1s8bgtm37] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    font-size: .9rem;
    color: var(--text-secondary, #6c757d);
    margin-bottom: .85rem;
}

.pk-peek-lines[b-e1s8bgtm37] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.pk-peek-line[b-e1s8bgtm37] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding: .45rem .6rem;
    border: 1px solid var(--border, rgba(0, 0, 0, .12));
    border-radius: 6px;
}

    /* Brak zgloszony przy zbieraniu ma byc widoczny takze tutaj: to jest pierwsze
       miejsce, w ktorym pakujacy moze sie zorientowac, ze paczka wyszla niepelna. */
    .pk-peek-line.brak[b-e1s8bgtm37] {
        border-color: var(--bs-warning, #ffc107);
    }

.pk-peek-name[b-e1s8bgtm37] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.pk-peek-qty[b-e1s8bgtm37] {
    flex: 0 0 auto;
    font-weight: 600;
    white-space: nowrap;
}

.pk-peek-short[b-e1s8bgtm37] {
    display: block;
    font-weight: 400;
    font-size: .82rem;
    color: var(--bs-warning-text-emphasis, #997404);
}

@media (max-width: 640px) {
    .pk-peek-line[b-e1s8bgtm37] {
        flex-direction: column;
        align-items: flex-start;
        gap: .2rem;
    }
}

/* ── Zdjęcie paczki ──────────────────────────────────────────────────────────
   Stoi w pytaniu o gabaryt, czyli w ostatniej chwili, gdy karton jest otwarty.
   Wygląda jak duży, pojedynczy cel dla palca w rękawicy — nie jak pole formularza. */
.pk-foto[b-e1s8bgtm37] {
    margin: .25rem 0 1rem;
}

/* Samo pole pliku jest brzydkie i różne w każdej przeglądarce; klika się etykietę. */
.pk-foto-input[b-e1s8bgtm37] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.pk-foto-btn[b-e1s8bgtm37] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    padding: .6rem 1rem;
    border: 1px dashed var(--border, rgba(0,0,0,.25));
    border-radius: 12px;
    background: var(--surface-2, rgba(128,128,128,.06));
    color: var(--text, #212529);
    font-weight: 600;
    cursor: pointer;
}

    .pk-foto-btn:hover[b-e1s8bgtm37],
    .pk-foto-input:focus-visible + .pk-foto-btn[b-e1s8bgtm37] {
        border-color: var(--global-palette1, #009244);
        color: var(--global-palette1, #009244);
    }

.pk-foto-hint[b-e1s8bgtm37] {
    margin-top: .35rem;
    font-size: .82rem;
    color: var(--text-secondary, #6c757d);
    text-align: center;
}

/* Miniatury w podglądzie „co pojechało w tej paczce". */
.pk-peek-foty[b-e1s8bgtm37] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .75rem 0;
}

.pk-peek-foto img[b-e1s8bgtm37] {
    width: 92px;
    height: 92px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--border, rgba(0,0,0,.12));
    display: block;
}
/* /Components/Pages/Orders/OrderPackCart.razor.rz.scp.css */
/* ── Wozek mobilny ────────────────────────────────────────────────────────────────
   Ekran pisany NAJPIERW na telefon (390x844), bo tu sie z niego korzysta - w alejce,
   jedna reka, w rekawicy. Na duzym ekranie kafle rozkladaja sie szerzej, ale uklad
   zostaje ten sam. Kolory ida przez tokeny motywu (--surface/--text/--border),
   wiec ciemny motyw dziala bez osobnych regul. */

.mc-page[b-cwhhdr5ig6] {
    max-width: 64rem;
}

/* Naglowek na telefonie musi oddac miejsce tresci. */
@media (max-width: 640px) {
    .mc-header h3[b-cwhhdr5ig6] {
        font-size: 1.15rem;
        margin-bottom: .1rem;
    }

    .mc-header .page-sub[b-cwhhdr5ig6] {
        font-size: .78rem;
    }
}

/* ── 1) Czekanie na skan ───────────────────────────────────────────────────────── */

.mc-idle[b-cwhhdr5ig6] {
    max-width: 34rem;
    margin: 1.5rem auto 2rem;
    text-align: center;
}

.mc-idle-mark[b-cwhhdr5ig6] {
    font-size: 4.4rem;
    line-height: 1;
    color: var(--global-palette1);
    animation: mcPuls-b-cwhhdr5ig6 2.4s ease-in-out infinite;
}

@keyframes mcPuls-b-cwhhdr5ig6 {
    0%, 100% { opacity: .55; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.04); }
}

.mc-idle-title[b-cwhhdr5ig6] {
    margin-top: .75rem;
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-heading);
}

.mc-idle-sub[b-cwhhdr5ig6] {
    margin: .35rem auto 0;
    max-width: 26rem;
    color: var(--text-muted);
    font-size: .92rem;
}

/* Regula trybu powiedziana ZANIM ktos zeskanuje zly wozek. */
.mc-rule[b-cwhhdr5ig6] {
    display: flex;
    align-items: flex-start;
    gap: .3rem;
    text-align: left;
    margin: 1.25rem 0 0;
    padding: .8rem .95rem;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 5px solid var(--global-palette2);
    color: var(--text-secondary);
    font-size: .88rem;
    line-height: 1.45;
}

    .mc-rule b[b-cwhhdr5ig6] { color: var(--text-heading); }

    .mc-rule > i[b-cwhhdr5ig6] { color: var(--global-palette2); }

.mc-idle-stats[b-cwhhdr5ig6] {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-top: 1.1rem;
}

.mc-stat[b-cwhhdr5ig6] {
    color: var(--text-secondary);
    font-size: .9rem;
}

    .mc-stat b[b-cwhhdr5ig6] {
        color: var(--global-palette1);
        font-size: 1.1rem;
    }

.mc-label-note[b-cwhhdr5ig6] {
    margin-top: 1rem;
    padding: .55rem .8rem;
    border-radius: 10px;
    background: var(--surface-3);
    color: var(--text-muted);
    font-size: .82rem;
}

    .mc-label-note.on[b-cwhhdr5ig6] {
        background: rgba(255, 193, 7, .16);
        color: var(--text);
    }

/* ── 2) Wozek: kafle koszykow ──────────────────────────────────────────────────── */

.mc-prompt[b-cwhhdr5ig6] {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .85rem 1rem;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 5px solid var(--global-palette1);
    box-shadow: var(--card-shadow);
}

    .mc-prompt.narrow[b-cwhhdr5ig6] {
        border-left-color: var(--global-palette2);
    }

.mc-prompt-mark[b-cwhhdr5ig6] {
    font-size: 2rem;
    line-height: 1;
    color: var(--global-palette1);
}

.mc-prompt-title[b-cwhhdr5ig6] {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-heading);
}

.mc-prompt-sub[b-cwhhdr5ig6] {
    color: var(--text-muted);
    font-size: .84rem;
    margin-top: .1rem;
}

.mc-dots[b-cwhhdr5ig6] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: .75rem 0 .25rem;
    flex-wrap: wrap;
}

.mc-dots-row[b-cwhhdr5ig6] {
    display: inline-flex;
    gap: .3rem;
}

.mc-dot[b-cwhhdr5ig6] {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--border-strong);
}

    .mc-dot.on[b-cwhhdr5ig6] { background: var(--global-palette1); }

.mc-dots-text[b-cwhhdr5ig6] {
    color: var(--text-muted);
    font-size: .84rem;
}

.mc-tiles[b-cwhhdr5ig6] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
    margin-top: .5rem;
}

@media (min-width: 720px) {
    .mc-tiles[b-cwhhdr5ig6] {
        grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    }
}

.mc-tile[b-cwhhdr5ig6] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .35rem;
    padding: .6rem .65rem;
    min-height: 7rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    border-top: 4px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

    .mc-tile:hover[b-cwhhdr5ig6] {
        transform: translateY(-2px);
        box-shadow: var(--hover-shadow);
        border-top-color: var(--global-palette1);
    }

    .mc-tile.hit[b-cwhhdr5ig6] {
        border-top-color: var(--global-palette2);
        box-shadow: 0 0 0 2px var(--global-palette2) inset;
    }

    .mc-tile.dim[b-cwhhdr5ig6] { opacity: .3; }

    .mc-tile.done[b-cwhhdr5ig6] {
        opacity: .55;
        border-top-color: var(--global-palette1);
        cursor: default;
    }

/* Numer koszyka jest tozsamoscia paczki - dlatego jest najwiekszy na kaflu. */
.mc-tile-slot[b-cwhhdr5ig6] {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--global-palette1);
}

.mc-tile-body[b-cwhhdr5ig6] {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    min-width: 0;
}

.mc-tile-photo[b-cwhhdr5ig6] {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .mc-tile-photo img[b-cwhhdr5ig6] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.mc-noimg[b-cwhhdr5ig6] {
    color: var(--text-muted);
    font-size: 1.1rem;
}

.mc-tile-text[b-cwhhdr5ig6] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mc-tile-no[b-cwhhdr5ig6] {
    font-size: .98rem;
    font-weight: 800;
    color: var(--text-heading);
}

.mc-tile-cust[b-cwhhdr5ig6],
.mc-tile-meta[b-cwhhdr5ig6] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.mc-tile-cust[b-cwhhdr5ig6] {
    font-size: .8rem;
    color: var(--text-secondary);
}

.mc-tile-meta[b-cwhhdr5ig6] {
    font-size: .76rem;
    color: var(--text-muted);
}

/* ── 3) Odmowa: zamowienie, ktore tu nie wchodzi ───────────────────────────────── */

.mc-refuse[b-cwhhdr5ig6] {
    max-width: 34rem;
    margin: 1.5rem auto;
    text-align: center;
}

.mc-refuse-mark[b-cwhhdr5ig6] {
    font-size: 3.4rem;
    line-height: 1;
    color: var(--bs-warning, #ffc107);
}

.mc-refuse-title[b-cwhhdr5ig6] {
    margin-top: .5rem;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-heading);
}

.mc-refuse-what[b-cwhhdr5ig6] {
    margin-top: .25rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--global-palette1);
}

.mc-refuse-why[b-cwhhdr5ig6] {
    margin: .6rem auto 0;
    max-width: 28rem;
    color: var(--text-secondary);
    font-size: .95rem;
    line-height: 1.5;
}

.mc-refuse-acts[b-cwhhdr5ig6] {
    display: flex;
    justify-content: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

.mc-refuse-list[b-cwhhdr5ig6] {
    margin-top: 1.5rem;
    text-align: left;
}

    .mc-refuse-list.boxed[b-cwhhdr5ig6] {
        margin-top: 1rem;
        padding: .75rem .9rem;
        border-radius: 12px;
        background: rgba(255, 193, 7, .12);
        border: 1px solid var(--border);
        border-left: 5px solid var(--bs-warning, #ffc107);
    }

.mc-refuse-list-title[b-cwhhdr5ig6] {
    font-weight: 700;
    color: var(--text-heading);
    font-size: .9rem;
    margin-bottom: .4rem;
}

.mc-refuse-row[b-cwhhdr5ig6] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .4rem;
    padding: .4rem 0;
    border-top: 1px solid var(--border);
    font-size: .84rem;
}

.mc-refuse-no[b-cwhhdr5ig6] {
    font-weight: 800;
    color: var(--text-heading);
}

.mc-refuse-slot[b-cwhhdr5ig6] {
    color: var(--global-palette1);
    font-size: .78rem;
    text-transform: uppercase;
}

.mc-refuse-reason[b-cwhhdr5ig6] {
    color: var(--text-secondary);
    flex: 1 1 12rem;
}

.mc-refuse-link[b-cwhhdr5ig6] {
    display: inline-block;
    margin-top: .6rem;
    font-size: .85rem;
    color: var(--global-palette1);
}

/* ── 4) Otwarty koszyk: jeden wielki komunikat ─────────────────────────────────── */

.mc-item[b-cwhhdr5ig6] {
    max-width: 34rem;
    margin: .5rem auto 2rem;
}

/* To jest odpowiedz na pytanie "skad wiem, ze to cale zamowienie": numer koszyka. */
.mc-item-slot[b-cwhhdr5ig6] {
    text-align: center;
    font-size: 2.6rem;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--global-palette1);
    line-height: 1.1;
}

.mc-item-order[b-cwhhdr5ig6] {
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: .75rem;
}

.mc-item-cust[b-cwhhdr5ig6] {
    font-weight: 400;
    color: var(--text-secondary);
}

.mc-step[b-cwhhdr5ig6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.mc-step-btn[b-cwhhdr5ig6] {
    width: 4rem;
    height: 4rem;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-heading);
    font-size: 1.5rem;
    cursor: pointer;
}

    .mc-step-btn:disabled[b-cwhhdr5ig6] { opacity: .35; cursor: default; }

    .mc-step-btn:not(:disabled):hover[b-cwhhdr5ig6] {
        border-color: var(--global-palette1);
        color: var(--global-palette1);
    }

.mc-step-val[b-cwhhdr5ig6] {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--text-heading);
    min-width: 6rem;
    text-align: center;
}

    .mc-step-val small[b-cwhhdr5ig6] {
        display: block;
        font-size: .8rem;
        font-weight: 400;
        color: var(--text-muted);
    }

.mc-step-hint[b-cwhhdr5ig6] {
    margin-top: .4rem;
    text-align: center;
    color: var(--text-muted);
    font-size: .8rem;
}

.mc-confirm[b-cwhhdr5ig6] {
    display: block;
    width: 100%;
    margin-top: 1.25rem;
    padding: 1rem;
    border: 0;
    border-radius: 14px;
    background: var(--surface-3);
    color: var(--text-muted);
    cursor: not-allowed;
}

    .mc-confirm.ready[b-cwhhdr5ig6] {
        background: linear-gradient(135deg, var(--global-palette1), var(--global-palette2));
        color: #fff;
        cursor: pointer;
        box-shadow: var(--card-shadow);
    }

.mc-confirm-main[b-cwhhdr5ig6] {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.mc-confirm-sub[b-cwhhdr5ig6] {
    display: block;
    font-size: .82rem;
    opacity: .85;
    margin-top: .1rem;
}

/* ── Komunikaty ────────────────────────────────────────────────────────────────── */

.mc-alert[b-cwhhdr5ig6] {
    display: flex;
    align-items: flex-start;
    gap: .1rem;
    margin-top: .85rem;
    padding: .7rem .9rem;
    border-radius: 10px;
    font-size: .88rem;
    line-height: 1.4;
    text-align: left;
}

    .mc-alert.bad[b-cwhhdr5ig6] {
        background: rgba(220, 53, 69, .14);
        color: var(--text);
        border-left: 4px solid var(--bs-danger, #dc3545);
    }

    .mc-alert.good[b-cwhhdr5ig6] {
        background: rgba(25, 135, 84, .14);
        color: var(--text);
        border-left: 4px solid var(--global-palette1);
    }
/* /Components/Pages/Orders/OrderPick.razor.rz.scp.css */
/* Kolektor: jedno miejsce, jeden towar, jedna liczba. Reszta świata znika.
   Wszystko czyta tokeny motywu, więc ciemny tryb działa bez osobnych reguł. */

.op-wrap[b-00napsx35c] {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--surface, #fff);
}

/* ── Pasek postępu ── */
.op-top[b-00napsx35c] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .6rem .9rem;
    border-bottom: 1px solid var(--border, rgba(0,0,0,.08));
}

/* Powrot to zwykly odnosnik, wiec bez min-height mial wysokosc tekstu (~20 px) - w rekawicy
   roboczej to za malo. 48 px to minimum z wytycznych Androida i z WCAG 2.2 AAA; szerokosci
   nie wymuszamy, bo tekst "Zamowienia" i tak daje jej wiecej. */
.op-back[b-00napsx35c] {
    color: var(--text-secondary, #6c757d);
    text-decoration: none;
    font-size: .95rem;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding-right: .3rem;
}

.op-progress[b-00napsx35c] {
    flex: 1 1 auto;
    text-align: right;
}

.op-progress-text[b-00napsx35c] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text, #212529);
}

    /* Sama liczba przystanku ma być tym, co widać z odległości ręki — reszta to podpis. */
    .op-progress-text strong[b-00napsx35c] {
        font-size: 1.35rem;
        color: var(--global-palette1, #009244);
    }

/* Przystanki są policzalne, więc pokazujemy je jako kropki, nie jako ciągły pasek. */
.op-dots[b-00napsx35c] {
    display: flex;
    gap: 3px;
    justify-content: flex-end;
    margin-top: 4px;
}

/* Kropka przystanku jeszcze nieodwiedzonego — jak kratka wyzej, ma byc widoczna,
   bo „ile zostalo" czyta sie z liczby kropek, nie z liczby na pasku. */
.op-dot[b-00napsx35c] {
    width: 12px;
    height: 8px;
    border-radius: 3px;
    background: rgba(128, 128, 128, .2);
    outline: 1px solid rgba(128, 128, 128, .75);
    outline-offset: -1px;
}

    .op-dot.is-done[b-00napsx35c] { background: var(--global-palette1, #009244); }
    .op-dot.is-now[b-00napsx35c] { background: var(--global-palette2, #66b032); width: 22px; }

/* „Jeszcze 180 m, około 12 minut" — pod licznikiem przystanku.
   Świadomie drugoplanowe: to jest orientacja, a nie polecenie. Ale nie szare do niewidoczności,
   bo czyta się je w ruchu, często w rękawicy i przy złym świetle. */
.op-left[b-00napsx35c] {
    font-size: .82rem;
    line-height: 1.2;
    color: var(--text-secondary, #6c757d);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* To samo zdanie w arkuszu całej trasy — tam jest miejsce, więc bez przycinania. */
.op-left-sheet[b-00napsx35c] {
    font-size: .95rem;
    color: var(--global-palette1, #009244);
    font-weight: 600;
}

/* Trasa dłuższa niż kilkanaście przystanków: jeden pasek zamiast kropek, których nikt nie policzy. */
.op-bar[b-00napsx35c] {
    height: 8px;
    border-radius: 4px;
    background: rgba(128, 128, 128, .2);
    outline: 1px solid rgba(128, 128, 128, .75);
    outline-offset: -1px;
    margin-top: 6px;
    overflow: hidden;
}

    .op-bar span[b-00napsx35c] {
        display: block;
        height: 100%;
        background: var(--global-palette1, #009244);
        transition: width .2s ease;
    }

/* ── Karta przystanku ── */
.op-card[b-00napsx35c] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.2rem 1rem 7rem;
    gap: .35rem;
}

.op-goto[b-00napsx35c] {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .8rem;
    color: var(--text-secondary, #6c757d);
}

/* Kod miejsca czytany z odległości wyciągniętej ręki — i NAJWIĘKSZY na karcie.
   Do tej pory największa była ilość (6rem przy 3.2rem kodu), czyli ekran krzyczał ILE
   do człowieka, który idzie przez halę i potrzebuje najpierw GDZIE. Ilość zostaje duża,
   ale schodzi na drugie miejsce — czyta się ją dopiero, gdy stoi się przy półce. */
.op-location[b-00napsx35c] {
    font-size: clamp(2.6rem, 17vw, 4.6rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: .02em;
    word-break: break-all;
    color: var(--global-palette1, #009244);
}

/* Zdjecie obok nazwy: czlowiek rozpoznaje towar wzrokiem szybciej, niz czyta symbol. */
.op-product[b-00napsx35c] {
    margin-top: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    text-align: left;
}

.op-product-text[b-00napsx35c] {
    min-width: 0;
}

.op-photo[b-00napsx35c] {
    flex: 0 0 auto;
    position: relative;
    width: 5rem;
    height: 5rem;
    padding: 0;
    border-radius: 10px;
    /* Kafelek ze zdjeciem JEST przyciskiem — po kliknieciu powieksza zdjecie. Obrys z tokenu
       --border mial 1,23:1 wzgledem tla, czyli prakticznie go nie bylo, i kafelek nie odrozniel
       sie od tla ekranu. Ten sam szary 128/90 %, co przy liczniku sztuk i przy powodach braku:
       jedna krawedz dla wszystkiego, co sie klika. */
    border: 1px solid rgba(128, 128, 128, .9);
    background: var(--surface-2, #f5f7f6);
    overflow: hidden;
}

    .op-photo img[b-00napsx35c] {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

.op-photo-zoom[b-00napsx35c] {
    position: absolute;
    right: 2px;
    bottom: 2px;
    font-size: .65rem;
    line-height: 1;
    padding: 2px 3px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
}

/* Brak zdjecia ma wygladac na decyzje, a nie na zepsuty obrazek. */
.op-photo-none[b-00napsx35c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    font-size: .62rem;
    color: var(--text-secondary, #6c757d);
    border-style: dashed;
}

    .op-photo-none > .bi[b-00napsx35c] {
        font-size: 1.3rem;
        opacity: .6;
    }

/* Powiekszenie na cala szerokosc ekranu — na telefonie miniatura nie wystarczy. */
.op-photo-modal[b-00napsx35c] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(0, 0, 0, .82);
}

    .op-photo-modal img[b-00napsx35c] {
        max-width: 100%;
        max-height: 100%;
        border-radius: 10px;
        background: #fff;
    }

.op-photo-close[b-00napsx35c] {
    position: absolute;
    top: .6rem;
    right: .8rem;
    width: 2.4rem;
    height: 2.4rem;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
}

/* Do ktorego koszyka wozka trafia ten towar — bez tego skan wozka nie ma dalszego ciagu. */
/* Do czego wkładam towar. Numer koszyka jest tu JEDYNĄ liczbą, po której magazynier pozna,
   czy trafił we właściwe miejsce — a pomyłkę widać dopiero przy pakowaniu, gdy w koszyku leży
   cudze zamówienie. Dlatego podpis zostaje drobny, a sama cyfra jest duża. */
.op-basket[b-00napsx35c] {
    margin-top: .7rem;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: .1rem .45rem;
    padding: .35rem .9rem;
    border-radius: 999px;
    border: 1px solid var(--global-palette1, #009244);
    background: rgba(0, 146, 68, .1);
    font-size: .875rem;
}

.op-basket-label[b-00napsx35c] {
    color: var(--text-secondary, #495057);
}

.op-basket-no[b-00napsx35c] {
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
    color: var(--global-palette1, #009244);
    font-variant-numeric: tabular-nums;
}

    /* Kod pojemnika albo wózka to nie jedna cyfra, tylko „K-01" — tego samego rozmiaru
       nie da się zmieścić w pigułce na telefonie. */
    .op-basket-no.kod[b-00napsx35c] {
        font-size: 1.35rem;
        letter-spacing: .01em;
    }

    /* Kod nosnika nie ma sie lamac w polowie — to jest napis z etykiety. */
    .op-basket strong[b-00napsx35c] {
        white-space: nowrap;
    }

.op-basket-cart[b-00napsx35c] {
    color: var(--text-secondary, #6c757d);
    font-size: .8rem;
}

.op-product-name[b-00napsx35c] {
    font-size: 1.05rem;
    font-weight: 600;
}

.op-product-codes[b-00napsx35c] {
    margin-top: .35rem;
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

.op-ean[b-00napsx35c] {
    font-family: ui-monospace, monospace;
    font-size: .85rem;
    color: var(--text-secondary, #6c757d);
}

/* ── Ile już mam z ilu ──────────────────────────────────────────────────────────
   Postęp SZTUK, nie przystanków. Stoi nad ilością, bo to jest pytanie, które
   magazynier zadaje sobie przy każdym sięgnięciu na półkę: „która to już?".
   Rozmiar celowo bliski ilości — mniejszy ginął, a to był cały problem. */
.op-pieces[b-00napsx35c] {
    margin-top: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.op-pieces-count[b-00napsx35c] {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    font-variant-numeric: tabular-nums;
}

.op-pieces-now[b-00napsx35c] {
    font-size: clamp(2.8rem, 15vw, 4.2rem);
    font-weight: 800;
    line-height: 1;
    color: var(--global-palette1, #009244);
}

.op-pieces-sep[b-00napsx35c] {
    font-size: 1.15rem;
    color: var(--text-secondary, #6c757d);
}

.op-pieces-all[b-00napsx35c] {
    font-size: clamp(1.9rem, 10vw, 2.8rem);
    font-weight: 700;
    line-height: 1;
}

.op-pieces-unit[b-00napsx35c] {
    font-size: 1rem;
    color: var(--text-secondary, #6c757d);
    margin-left: .15rem;
}

/* Kratki: jedna sztuka = jedno pole. Sześć pól czyta się bez czytania liczby. */
.op-pieces-boxes[b-00napsx35c] {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

/* Kratka PUSTA niesie tyle samo informacji, co pelna: mowi „tej sztuki jeszcze nie masz".
   Na tokenach --surface-2 i --border wychodzila prawie biala na bialym (1,2:1), wiec przy
   dwoch sztukach ekran pokazywal dwie niewidzialne plamki i nie mowil nic. To ten sam blad,
   ktory wyszedl wczesniej na pasku zapelnienia miejsca — dlatego tu ta sama poprawka. */
.op-piece-box[b-00napsx35c] {
    flex: 0 0 auto;
    width: 2.2rem;
    height: 1.1rem;
    border-radius: 4px;
    background: rgba(128, 128, 128, .2);
    border: 1px solid rgba(128, 128, 128, .9);
}

    .op-piece-box.full[b-00napsx35c] {
        background: var(--global-palette1, #009244);
        border-color: var(--global-palette1, #009244);
    }

    /* Sztuka trzymana w ręce, jeszcze niezapisana — widać, że liczy się dopiero po potwierdzeniu. */
    .op-piece-box.hand[b-00napsx35c] {
        background: repeating-linear-gradient(45deg,
            var(--global-palette1, #009244) 0 4px,
            transparent 4px 8px);
        border-color: var(--global-palette1, #009244);
    }

.op-pieces-bar[b-00napsx35c] {
    height: .8rem;
    border-radius: 999px;
    background: var(--surface-2, rgba(128,128,128,.18));
    overflow: hidden;
}

.op-pieces-fill[b-00napsx35c] {
    height: 100%;
    background: var(--global-palette1, #009244);
    transition: width .18s ease-out;
}

.op-pieces-done .op-pieces-now[b-00napsx35c] {
    color: var(--global-palette1, #009244);
}

.op-pieces-done .op-pieces-count[b-00napsx35c]::after {
    content: "¹3";
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--global-palette1, #009244);
    margin-left: .3rem;
}

/* Ilość jest większa od nazwy towaru — magazynier potrzebuje „ile", nazwa tylko potwierdza. */
.op-qty[b-00napsx35c] {
    margin-top: 1.2rem;
    display: flex;
    align-items: baseline;
    gap: .4rem;
}

.op-qty-num[b-00napsx35c] {
    font-size: clamp(2.8rem, 15vw, 4.2rem);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.op-qty-unit[b-00napsx35c] {
    font-size: 1.2rem;
    color: var(--text-secondary, #6c757d);
}

/* Numer zamówienia w podpisie ilości: podpis zostaje szary, ale SAM NUMER musi dać się
   przeczytać — to po nim człowiek rozpoznaje, czego dotyczy przystanek. */
.op-order-no[b-00napsx35c] {
    font-weight: 700;
    color: var(--text, #212529);
}

/* Drugi numer tego samego zamowienia — z systemu handlowego. Stoi obok numeru ze sklepu,
   plakietka, zeby bylo widac, ze to OSOBNY numer, a nie ciag dalszy poprzedniego. */
.op-order-erp[b-00napsx35c] {
    margin-left: .4rem;
    padding: .05rem .35rem;
    border-radius: .25rem;
    border: 1px solid rgba(128, 128, 128, .55);
    font-size: .8em;
    font-weight: 600;
    white-space: nowrap;
    color: var(--text, #212529);
}

.op-qty-for[b-00napsx35c],
.op-more[b-00napsx35c] {
    font-size: .85rem;
    color: var(--text-secondary, #6c757d);
}

.op-msg[b-00napsx35c] {
    margin-top: 1rem;
    padding: .6rem .9rem;
    border-radius: 10px;
    font-weight: 600;
    max-width: 90%;
}

    .op-msg.op-msg-ok[b-00napsx35c] {
        background: rgba(0, 146, 68, .12);
        color: var(--global-palette1, #009244);
    }

    .op-msg.op-msg-warn[b-00napsx35c] {
        background: rgba(245, 158, 11, .15);
        color: #b45309;
    }

    /* Pomyłka ma wyglądać jak pomyłka. Bursztyn czyta się jak „uważaj", a zeskanowanie
       nie tego towaru to nie ostrzeżenie — to STOP. Kolor tekstu inny w każdym motywie,
       bo ciemna czerwień na ciemnym tle gaśnie, a jasna na białym jest nieczytelna. */
    .op-msg.op-msg-bad[b-00napsx35c] {
        background: rgba(220, 38, 38, .14);
        color: #b91c1c;
        border: 1px solid rgba(220, 38, 38, .55);
        animation: op-msg-blysk-b-00napsx35c .4s ease-out 1;
    }

[data-theme="dark"] .op-msg.op-msg-bad[b-00napsx35c] {
    background: rgba(248, 113, 113, .18);
    color: #fca5a5;
}

/* JEDNO mignięcie, nie miganie w kółko: błąd jest jedynym momentem, w którym system każe
   spojrzeć na ekran — reszta ma iść w ciemno, na dźwięk i wibrację. */
@keyframes op-msg-blysk-b-00napsx35c {
    0% { transform: scale(1); background: rgba(220, 38, 38, .38); }
    100% { transform: scale(1); background: rgba(220, 38, 38, .14); }
}

@media (prefers-reduced-motion: reduce) {
    .op-msg.op-msg-bad[b-00napsx35c] { animation: none; }
}

/* ── Pasek kciuka: przyklejony do dołu, z zapasem na pasek systemowy telefonu ── */
.op-actions[b-00napsx35c] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    /* Po lewej stoi zgloszenie braku, po prawej potwierdzenie pobrania - dwie akcje, ktorych
       sie nie cofa. Przy 9,6 px odstepu kola wyjatku odstepowego z WCAG 2.2 (srednica 24 px)
       nachodza na siebie, czyli sasiedztwo jest za ciasne. 16 px rozdziela je uczciwie. */
    gap: 1rem;
    /* Skrot "Zbierz wszystko" bierze cala szerokosc i staje NAD dwoma glownymi przyciskami. */
    flex-wrap: wrap;
    padding: .7rem .8rem calc(.7rem + env(safe-area-inset-bottom));
    background: var(--surface, #fff);
    border-top: 1px solid var(--border, rgba(0,0,0,.08));
    z-index: 20;
}

.op-btn-short[b-00napsx35c] {
    flex: 0 0 34%;
    min-height: 62px;
    font-size: 1rem;
    font-weight: 600;
}

/* Zielen marki na bialym napisie daje 4,04:1 przy wymaganych 4,5:1 — zmierzone, nie ocenione.
   To jest GLOWNA akcja ekranu, wiec akurat ona nie moze byc o wlos pod progiem. Bierzemy
   ciemniejszy odcien tej samej zieleni (ten sam, ktory sluzy juz za najechanie): 5,47:1.
   Kod miejsca nad przyciskiem zostaje w kolorze marki, wiec ekran nic nie traci na tozsamosci. */
.op-btn-ok[b-00napsx35c] {
    flex: 1 1 auto;
    min-height: 62px;
    font-size: 1.1rem;
    font-weight: 700;
    background: #007a38;
    border-color: #007a38;
    color: #fff;
}

    .op-btn-ok:hover[b-00napsx35c],
    .op-btn-ok:focus-visible[b-00napsx35c] {
        background: #00632d;
        border-color: #00632d;
        color: #fff;
    }

/* ── Arkusz zgłoszenia braku ── */
.op-sheet[b-00napsx35c] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1060;
    background: var(--surface, #fff);
    border-radius: 18px 18px 0 0;
    padding: 1.1rem 1rem calc(1.1rem + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 30px rgba(0,0,0,.18);
}

/* Przyciski powodow sa obrysowe, wiec obrys jest JEDYNA rzecza, po ktorej widac, gdzie sie
   zaczynaja i koncza. Bootstrapowy #6c757d na ciemnym tle daje 1,55:1 — pomiar pokazal piec
   przyciskow, ktore w ciemnym motywie zlewaly sie w jedna plachte. Szary 128 przy 90 %
   krycia wychodzi ponad 3:1 na obu tlach naraz, wiec nie trzeba dwoch regul na dwa motywy. */
.op-reason[b-00napsx35c] {
    display: block;
    width: 100%;
    min-height: 58px;
    margin-bottom: .5rem;
    font-size: 1.02rem;
    font-weight: 600;
    border: 1px solid rgba(128, 128, 128, .9);
    color: var(--text, #0f172a);
    background: transparent;
}

    .op-reason:hover[b-00napsx35c],
    .op-reason:focus-visible[b-00napsx35c] {
        background: var(--surface-2, #f1f4f3);
        color: var(--text, #0f172a);
    }

/* Ostrzezenie, ktore da sie przeczytac w hali.
   Do 14.09 te przyciski byly Bootstrapowym btn-outline-warning: bursztynowy napis #ffc107
   na bialym tle to 1,63:1 przy wymaganych 4,5:1. Wlasciciel zglosil to ze zrzutu, a straznik
   abwms-kontrast-zbierania potwierdzil liczba. Zostaje ostrzezeniem — ten sam bursztyn — ale
   jako WYPELNIENIE z ciemnym napisem: 11,1:1, i tyle samo w obu motywach, bo kolor nie zalezy
   juz od tego, co lezy pod spodem. */
.op-ostrzezenie[b-00napsx35c] {
    background: #ffc107;
    border: 1px solid #b98900;
    color: #241900;
    font-weight: 700;
}

    .op-ostrzezenie:hover[b-00napsx35c],
    .op-ostrzezenie:focus-visible[b-00napsx35c] {
        background: #ffcd39;
        border-color: #b98900;
        color: #241900;
    }

    .op-ostrzezenie:disabled[b-00napsx35c] {
        background: #ffc107;
        color: #241900;
        opacity: .5;
    }

/* Wyjscie z arkusza. Bylo Bootstrapowym odnosnikiem: niebieski #0a58ca na ciemnym tle
   to 2,45:1, czyli w nocnym motywie slowo „Anuluj" praktycznie znikalo. */
.op-sheet-cancel[b-00napsx35c] {
    width: 100%;
    min-height: 48px;
    color: var(--text-secondary, #475569);
    font-weight: 600;
    text-decoration: none;
    background: transparent;
    border: none;
}

    .op-sheet-cancel:hover[b-00napsx35c],
    .op-sheet-cancel:focus-visible[b-00napsx35c] {
        color: var(--text, #0f172a);
        text-decoration: underline;
    }

/* ── Arkusz „to nie ten koszyk" ──────────────────────────────────────────────
   Ostrzeżenie ma dwie równorzędne odpowiedzi, więc wygląda jak wybór, a nie jak błąd:
   powód u góry, dwa koszyki obok siebie jako fakty, dopiero pod nimi decyzja. */
.op-sheet-warn[b-00napsx35c] {
    border-top: 4px solid #f0ad4e;
}

.op-warn-head[b-00napsx35c] {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    margin-bottom: .9rem;
}

.op-warn-head i[b-00napsx35c] {
    font-size: 1.7rem;
    color: #f0ad4e;
    line-height: 1.1;
}

.op-warn-head h5[b-00napsx35c] {
    margin: 0 0 .15rem;
    font-weight: 700;
}

.op-warn-head p[b-00napsx35c] {
    margin: 0;
    color: var(--text-secondary, #555);
    font-size: .95rem;
}

.op-warn-facts[b-00napsx35c] {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    margin-bottom: 1rem;
}

.op-warn-fact[b-00napsx35c] {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .7rem;
    border: 1px solid var(--border, #dee2e6);
    border-radius: 12px;
    background: var(--surface-2, #f8f9fa);
}

.op-warn-num[b-00napsx35c] {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
}

.op-warn-fact-ok .op-warn-num[b-00napsx35c] {
    background: var(--global-palette1, #009244);
}

.op-warn-fact-bad .op-warn-num[b-00napsx35c] {
    background: #b0b5bb;
}

.op-warn-fact-text[b-00napsx35c] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.op-warn-fact-text strong[b-00napsx35c] {
    font-size: .95rem;
}

.op-warn-fact-text span[b-00napsx35c] {
    font-size: .85rem;
    color: var(--text-muted, #6c757d);
}

.op-warn-main[b-00napsx35c] {
    display: block;
    width: 100%;
    min-height: 62px;
    font-size: 1.05rem;
    font-weight: 700;
}

/* Wyjście awaryjne stoi ZA kreską i niżej: ma być dostępne, ale nie ma wyglądać
   na równorzędny przycisk obok głównej odpowiedzi. */
.op-warn-alt[b-00napsx35c] {
    margin-top: 1rem;
    padding-top: .85rem;
    border-top: 1px dashed var(--border, #dee2e6);
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.op-warn-alt-label[b-00napsx35c] {
    font-size: .9rem;
    font-weight: 600;
    color: var(--text-secondary, #555);
}

.op-warn-alt-btn[b-00napsx35c] {
    min-height: 52px;
    font-weight: 600;
}

.op-warn-alt-note[b-00napsx35c] {
    font-size: .8rem;
    color: var(--text-muted, #6c757d);
}

/* ── Ekran końca trasy ── */
.op-done[b-00napsx35c] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem 1.2rem;
    gap: .5rem;
}

.op-done-icon[b-00napsx35c] {
    font-size: 4rem;
    color: var(--global-palette1, #009244);
    line-height: 1;
}

/* Przelacznik Prowadzenie | Mapa — ten sam plan trasy, dwa sposoby patrzenia. */
.op-viewtoggle[b-00napsx35c] {
    display: inline-flex;
    border: 1px solid var(--border, rgba(255, 255, 255, .25));
    border-radius: 999px;
    overflow: hidden;
    flex: 0 0 auto;
}

    .op-viewtoggle button[b-00napsx35c] {
        border: 0;
        background: transparent;
        color: inherit;
        /* Przy waskim ekranie z przycisku zostaje sama ikona, wiec bez wymuszonego rozmiaru
           robil sie kwadracik ~34 px - ponizej 44 px z WCAG 2.2 AAA i ponizej 48 dp Androida.
           Przelacznik widoku klika sie w rekawicy, wiec dostaje pelne 48x48. */
        min-width: 48px;
        min-height: 48px;
        padding: .35rem .8rem;
        font-size: .85rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .35rem;
        cursor: pointer;
    }

        .op-viewtoggle button.active[b-00napsx35c] {
            background: var(--global-palette1, #009244);
            color: #fff;
        }

/* Na waskim ekranie zostaja same ikony — nazwa trybu zjadalaby pasek postepu. */
@media (max-width: 560px) {
    .op-toggle-label[b-00napsx35c] { display: none; }
}

/* ── Telefon: karta przystanku zaczyna sie tam, gdzie konczy sie pasek postepu ──────────
   Karta byla wysrodkowana w pionie, wiec przy 390x844 nad napisem "Idz do" stal pas
   164 px pustego tla, a lista pozycji i tak nie miescila sie w kadrze. Na kolektorze pusty
   pas nie niesie zadnej informacji — tresc idzie do gory.
   Tla nie skracamy: .op-wrap dalej ma 100dvh, zeby biala plaszczyzna siegala pod pasek
   kciuka — inaczej nad przyciskami pojawia sie szary pas strony. */
@media (max-width: 991.98px) {
    .op-card[b-00napsx35c] {
        justify-content: flex-start;
        padding-top: .5rem;
    }
}

.op-map[b-00napsx35c] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Pasek pod mapa: dokad teraz i skrot z powrotem do prowadzenia. */
.op-map-now[b-00napsx35c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border, rgba(0, 0, 0, .1));
    background: var(--surface, #fff);
}

.op-map-now-cap[b-00napsx35c] {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted, #6c757d);
}

.op-map-now-loc[b-00napsx35c] {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--global-palette1, #009244);
}

/* ── Kolektor kontra monitor ───────────────────────────────────────────────────
   Na telefonie ekran zbierania ma pokazywac JEDNA rzecz: dokad isc i ile wziac.
   Na monitorze te same dane zajmowaly jedna trzecia szerokosci, a reszta byla pusta —
   wiec dopiero od szerokosci laptopa dokladamy kolumne z kontekstem. */
.op-body[b-00napsx35c] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.op-main[b-00napsx35c] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Panel boczny NIE ISTNIEJE na kolektorze — nie jest schowany, tylko go nie ma. */
.op-side[b-00napsx35c] { display: none; }

@media (min-width: 992px) {
    .op-body[b-00napsx35c] {
        flex-direction: row;
        align-items: stretch;
        gap: 1.25rem;
        padding: 0 1.25rem;
    }

    .op-side[b-00napsx35c] {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        flex: 0 0 20rem;
        padding: 1.25rem 0;
        overflow-y: auto;
    }
}

.op-side-block[b-00napsx35c] {
    border: 1px solid var(--border, rgba(0, 0, 0, .1));
    border-radius: 10px;
    background: var(--surface, #fff);
    padding: .85rem 1rem;
}

.op-side-cap[b-00napsx35c] {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted, #6c757d);
    margin-bottom: .5rem;
}

.op-side-stops[b-00napsx35c] {
    list-style: none;
    counter-reset: stop;
    margin: 0;
    padding: 0;
}

    .op-side-stops li[b-00napsx35c] {
        counter-increment: stop;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: .75rem;
        padding: .35rem 0 .35rem 1.9rem;
        position: relative;
        border-bottom: 1px solid var(--border, rgba(0, 0, 0, .06));
    }

        .op-side-stops li:last-child[b-00napsx35c] { border-bottom: 0; }

        /* Numer przystanku jako licznik — kolejnosc jest tu informacja, nie ozdoba. */
        .op-side-stops li[b-00napsx35c]::before {
            content: counter(stop);
            position: absolute;
            left: 0;
            top: .35rem;
            width: 1.4rem;
            height: 1.4rem;
            border-radius: 50%;
            font-size: .72rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--surface-2, #eef1f0);
            color: var(--text-muted, #6c757d);
        }

        .op-side-stops li.is-now[b-00napsx35c]::before {
            background: var(--global-palette1, #009244);
            color: #fff;
        }

        .op-side-stops li.is-done[b-00napsx35c]::before {
            content: "\2713";
            background: transparent;
            color: var(--global-palette1, #009244);
        }

        .op-side-stops li.is-done .op-side-loc[b-00napsx35c] {
            text-decoration: line-through;
            opacity: .55;
        }

        .op-side-stops li.is-now .op-side-loc[b-00napsx35c] {
            font-weight: 700;
            color: var(--global-palette1, #009244);
        }

.op-side-loc[b-00napsx35c] { font-variant-numeric: tabular-nums; }

.op-side-qty[b-00napsx35c] {
    font-size: .82rem;
    color: var(--text-muted, #6c757d);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.op-side-orders[b-00napsx35c] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

    .op-side-orders li[b-00napsx35c] {
        font-size: .82rem;
        padding: .15rem .5rem;
        border-radius: 999px;
        background: var(--surface-2, #eef1f0);
        color: var(--text-muted, #6c757d);
        font-variant-numeric: tabular-nums;
    }

/* Cofnięcie ostatniego pobrania. Celowo NIEDUŻE i nie na pasku kciuka: to wyjście awaryjne,
   a nie czynność, którą się robi co przystanek. Ma być pod ręką, gdy jest potrzebne,
   i niewidoczne dla oka, gdy nie jest. */
.op-cofnij[b-00napsx35c] {
    margin-top: .5rem;
    padding: .35rem .8rem;
    border-radius: 999px;
    border: 1px dashed var(--border, rgba(0, 0, 0, .28));
    background: none;
    color: var(--text-secondary, #6c757d);
    font-size: .85rem;
    /* Guziki skanowania stoja na stale w prawym dolnym rogu i ich kolumna siega wysoko nad pasek
       kciuka — wyzej niz pas zarezerwowany na dole strony. Pigulka cofniecia jest ostatnim
       elementem karty i wpadala wprost pod nie: zmierzone 46 x 12 px zakrycia na ekranie 430 px,
       czyli kciuk celujacy w „Cofnij" trafial w lupke. Zwezamy pigulke o szerokosc tej kolumny
       (zostaje wysrodkowana, dluzszy napis sie zawija), zamiast przesuwac guziki: guziki naleza
       do dwudziestu ekranow skanujacych, a pigulka do jednego. */
    max-width: calc(100% - 8rem);
}

    .op-cofnij:disabled[b-00napsx35c] {
        opacity: .5;
    }

/* Licznik przystanków jest przyciskiem — wygląda jak tekst, bo nim był. */
.op-progress-btn[b-00napsx35c] {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

/* Środek licznika też jest przyciskiem: otwiera pole do wpisania liczby. */
.op-counter-mid-btn[b-00napsx35c] {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.op-counter-input[b-00napsx35c] {
    font-size: 2rem;
    font-weight: 800;
    text-align: center;
    font-variant-numeric: tabular-nums;
    max-width: 7rem;
}

/* Podgląd całej trasy na telefonie. */
.op-trasa[b-00napsx35c] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 55vh;
    overflow-y: auto;
}

    .op-trasa li[b-00napsx35c] {
        display: flex;
        align-items: center;
        gap: .5rem;
        /* Prawy margines robi miejsce pływającym przyciskom skanowania: siedzą na z-index 1075,
           czyli ŚWIADOMIE ponad arkuszami (ołówek ma działać także w oknie liczenia), więc nie
           schowamy ich warstwą. Zamiast walczyć z tą decyzją, po prostu nie wpuszczamy pod nie
           treści — inaczej ilości przy trzech środkowych przystankach są nieczytelne. */
        padding: .55rem 4.25rem .55rem .35rem;
        border-bottom: 1px solid var(--border, rgba(0, 0, 0, .08));
    }

    .op-trasa li.is-done .op-trasa-loc[b-00napsx35c] {
        text-decoration: line-through;
        opacity: .55;
    }

    .op-trasa li.is-now[b-00napsx35c] {
        background: rgba(0, 146, 68, .1);
        border-radius: 8px;
        font-weight: 700;
    }

.op-trasa-loc[b-00napsx35c] {
    font-variant-numeric: tabular-nums;
    font-size: 1.05rem;
}

.op-trasa-qty[b-00napsx35c] {
    margin-left: auto;
    color: var(--text-secondary, #6c757d);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Pytanie „ile wziąłeś" w arkuszu braku. Oddzielone linią, bo to osobna decyzja od powodu:
   najpierw człowiek mówi ILE ma w ręku, dopiero potem CZEMU nie ma reszty. */
.op-short-qty[b-00napsx35c] {
    padding-bottom: .75rem;
    margin-bottom: .25rem;
    border-bottom: 1px solid var(--border, rgba(0, 0, 0, .12));
}

/* „— wybor konczy zgloszenie": piec powodow wyglada identycznie i zaden nie jest glowny,
   wiec nic na ekranie nie mowilo, ktore klikniecie zamyka szuflade. Jedynym wyrozniónym
   elementem bylo „Anuluj" na dole. Zdanie jest tansze niz przerabianie hierarchii przyciskow. */
.op-short-cap-hint[b-00napsx35c] {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.op-short-cap[b-00napsx35c] {
    font-size: .85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-secondary, #6c757d);
    margin-bottom: .35rem;
}

.op-short-qty .op-qty-num[b-00napsx35c] {
    font-size: 2.6rem;
}

/* ── Licznik dla towaru bez kodu ─────────────────────────────────────

   Przyciski są duże, bo klika je kciuk w rękawicy, a nie mysz. */
.op-counter[b-00napsx35c] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: .35rem 0 .1rem;
}

.op-counter-btn[b-00napsx35c] {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 14px;
    /* Obrys z tokenu --border (1,23:1) sprawial, ze plusik i minus wygladaly jak dwie plamy
       na tle, a nie jak przyciski. Ten sam szary 128/90 %, co przy powodach braku. */
    border: 1px solid rgba(128, 128, 128, .9);
    background: var(--surface-2, #f1f4f3);
    color: inherit;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

    .op-counter-btn:disabled[b-00napsx35c] {
        opacity: .35;
    }

    .op-counter-btn:active:not(:disabled)[b-00napsx35c] {
        background: var(--global-palette1, #009244);
        border-color: var(--global-palette1, #009244);
        color: #fff;
    }

.op-counter-mid[b-00napsx35c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 6rem;
}

.op-counter-of[b-00napsx35c] {
    font-size: .8rem;
    color: var(--text-muted, #6c757d);
}

/* Skoki pod licznikiem: +5, +10 i „wszystkie N". Pole liczbowe jest drogą dla dowolnej liczby,
   ale zabiera trzy ruchy (otwórz, wpisz, zatwierdź) — przy dziesięciu sztukach jeden skok jest
   szybszy. Wysokość 44 px, bo to guziki pomocnicze, a nie główna akcja ekranu. */
.op-skoki[b-00napsx35c] {
    display: flex;
    gap: .4rem;
    justify-content: center;
    flex-wrap: wrap;
    margin: .1rem 0 .5rem;
}

.op-skok[b-00napsx35c] {
    min-height: 44px;
    min-width: 60px;
    padding: 0 .85rem;
    border-radius: 10px;
    border: 1px solid var(--border, rgba(0,0,0,.14));
    background: var(--surface, #fff);
    color: var(--text, #212529);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

    .op-skok:disabled[b-00napsx35c] {
        opacity: .4;
        cursor: default;
    }

    .op-skok-max[b-00napsx35c] {
        font-weight: 600;
        color: var(--global-palette1, #009244);
        border-color: var(--global-palette1, #009244);
    }

/* To zdanie jest jedyną informacją, że wolno skanować — a było najmniejszym tekstem na ekranie.
   Magazynier trzyma kolektor na wyciągnięcie ręki i w rękawicy: 0,8 rem szarego tekstu nie da
   się z tej odległości przeczytać, więc nowy naciskał przycisk i nigdy nie skanował. */
.op-counter-hint[b-00napsx35c] {
    text-align: center;
    font-size: .95rem;
    line-height: 1.35;
    color: var(--text-secondary, #495057);
    margin-bottom: .45rem;
    max-width: 24rem;
}

    .op-counter-hint i[b-00napsx35c] {
        color: var(--global-palette1, #009244);
    }

/* Domknięcie całego przystanku — pod paskiem kciuka, żeby nie konkurowało z główną akcją. */
.op-btn-all[b-00napsx35c] {
    /* Wlasny wiersz na gorze paska: order -1 stawia go przed "Brak" i "Zbierz",
       a 100 % bazy laman wiersz, wiec te dwa zostaja razem pod spodem. */
    flex: 1 0 100%;
    order: -1;
    margin: 0 0 .1rem;
    min-height: 48px;
    /* Ten skrot pokazuje sie TYLKO na przystanku z kilkoma pozycjami, wiec dlugo umykal
       pomiarowi — w ciemnym motywie jego obrys mial 1,55:1 i przycisk nie mial widocznej
       krawedzi.

       Obrys jest ZIELONY, a tlo przezroczyste. Poprzednio przycisk mial szare wypelnienie
       i szara krawedz, czyli dokladnie te dwie rzeczy, ktorymi ta aplikacja mowi „nieaktywny" —
       a on jest jak najbardziej aktywny i oszczedza najwiecej klikniec na calej trasie.
       Zlapane przy przejsciu sciezki na telefonie 16.09.2026: „nie wiem, czy moge to kliknac".
       Napis zostaje ciemny (kontrast tekstu 4,5:1), zielona jest tylko krawedz i ikona. */
    background: transparent;
    border: 1px solid var(--global-palette1, #009244);
    color: var(--text, #0f172a);
}

.op-btn-all i[b-00napsx35c] {
    color: var(--global-palette1, #009244);
}


/* Co dokładnie bierzemy na tym przystanku — pod kodem miejsca, drobnym drukiem. */
.op-map-now-what[b-00napsx35c] {
    font-size: .82rem;
    color: var(--text-muted, #6c757d);
    margin-top: .1rem;
}

/* Oddanie zamówienia do puli — na kolektorze tej kolumny nie ma w ogóle, więc tam ta sama
   czynność stoi w arkuszu „Cała trasa". */
.op-side-orders li[b-00napsx35c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
}

.op-side-give[b-00napsx35c] {
    border: 0;
    background: none;
    color: var(--text-muted, #6c757d);
    padding: 0 .2rem;
    line-height: 1;
    border-radius: 5px;
}

    .op-side-give:hover:not(:disabled)[b-00napsx35c] {
        color: #ef4444;
        background: rgba(239, 68, 68, .12);
    }

/* Wprost do kartonu — jedno zdanie u góry karty, żeby nikt nie szukał koszyka. */
.op-tobox[b-00napsx35c] {
    display: inline-block;
    margin-bottom: .5rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: rgba(0, 146, 68, .12);
    border: 1px solid var(--global-palette1, #009244);
    font-size: .8rem;
}

/* ── Zbieranie halami: wybór odcinka ──────────────────────────────────────────
   Kafel hali ma być czytelny z odległości ręki na wózku, a stan (wolna / cudza /
   już na regale) rozpoznawalny bez czytania. */

.op-legs[b-00napsx35c] {
    padding: 1rem;
    max-width: 46rem;
    margin: 0 auto;
}

.op-leg[b-00napsx35c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--border, rgba(0, 0, 0, .12));
    background: var(--surface, #fff);
    margin-bottom: .6rem;
}

    .op-leg.is-taken[b-00napsx35c] { opacity: .65; }

    .op-leg.is-done[b-00napsx35c] {
        background: rgba(0, 146, 68, .10);
        border-color: var(--global-palette1, #009244);
    }

.op-leg-name[b-00napsx35c] {
    font-size: 1.15rem;
    font-weight: 700;
    display: flex;
    align-items: center;
}

.op-leg-dot[b-00napsx35c] {
    display: inline-block;
    width: .85rem;
    height: .85rem;
    border-radius: 50%;
    margin-right: .5rem;
    border: 1px solid rgba(0, 0, 0, .15);
}

.op-leg-sub[b-00napsx35c] {
    font-size: .85rem;
    color: var(--text-muted, #6c757d);
}

/* ── Lokalizacja zapasowa: marsz w glab magazynu to inna czynnosc niz siegniecie po
   towar z polki pobraniowej. Tint alfa zamiast twardego koloru tla, zeby czytalo sie
   tak samo w jasnym i ciemnym; kolor tekstu dziedziczony, bo bursztyn na ciemnym tle
   gasnie. ── */
.op-reserve[b-00napsx35c] {
    display: inline-flex;
    align-items: center;
    margin-top: .45rem;
    padding: .28rem .7rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, .16);
    border: 1px solid rgba(245, 158, 11, .75);
    font-size: .85rem;
    font-weight: 600;
    color: inherit;
}

    .op-reserve .bi[b-00napsx35c] {
        color: #f59e0b;
    }

/* Ten sam znacznik w bocznej liscie trasy - maly, zeby nie rozpychal wiersza. */
.op-side-reserve[b-00napsx35c] {
    margin-left: .35rem;
    padding: 0 .35rem;
    border-radius: 4px;
    background: rgba(245, 158, 11, .16);
    border: 1px solid rgba(245, 158, 11, .6);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Przerwanie zbierania: wyjscie awaryjne. Ma byc znalezione, gdy ktos go szuka,
   i NIE ma przyciagac palca przy zwyklej pracy - stad brak tla i przygaszony czerwony. */
/* Koniec arkusza trasy. Kreska i odstep to nie ozdoba: pod nia lezy jedyna rzecz w tym
   arkuszu, ktorej nie da sie cofnac, a nad nia - lista, po ktorej czlowiek wlasnie wodzil
   palcem. Wyjscie („Zamknij") stoi NIZEJ, bo dol ekranu to strefa kciuka i tam ma lezec
   ruch bezpieczny, a nie ten nieodwracalny. */
.op-trasa-koniec[b-00napsx35c] {
    margin-top: 1.1rem;
    padding-top: .7rem;
    border-top: 1px solid var(--border, rgba(0,0,0,.08));
    text-align: center;
}

.op-przerwij[b-00napsx35c] {
    color: var(--bs-danger, #dc3545);
    text-decoration: none;
    opacity: .75;
    font-size: .9rem;
}

.op-przerwij:hover[b-00napsx35c] {
    opacity: 1;
    text-decoration: underline;
}

/* Zaznaczenie "zmien status przy braku" - stoi pod powodami braku, wiec musi byc
   wyraznie oddzielone, zeby nie wygladalo na kolejny powod do klikniecia. */
.op-short-status[b-00napsx35c] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    font-size: .95rem;
}

.op-short-status input[b-00napsx35c] {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
}

/* ── „Ktoś tu już był" ────────────────────────────────────────────────────────
   Pas u góry trasy, nie kafel przy pozycji: dotyczy CAŁEGO zamówienia, a zbieracz
   ma go przeczytać raz, zanim ruszy, a nie przy każdej półce.

   Bursztyn, nie czerwień — drugie zbieranie bywa dokładnie tym, co ma się stać
   (towar wrócił z pakowania, koszyk się wywrócił). Czerwień mówiłaby „stój",
   a to jest „wiedz, zanim pójdziesz".

   Kolory z rgba() nad tłem strony, więc w ciemnym motywie pas przyciemnia się
   razem z nim, zamiast świecić białą plamą. */
.op-seen[b-00napsx35c] {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    margin: .6rem .9rem 0;
    padding: .7rem .85rem;
    border-radius: .6rem;
    border: 1px solid rgba(214, 158, 46, .55);
    background: rgba(214, 158, 46, .12);
}

.op-seen-icon[b-00napsx35c] {
    font-size: 1.25rem;
    line-height: 1.2;
    color: #b7791f;
    flex: 0 0 auto;
}

.op-seen-body[b-00napsx35c] {
    min-width: 0;
    flex: 1 1 auto;
}

.op-seen-head[b-00napsx35c] {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: .25rem;
}

/* Numer i opis w jednym wierszu na szerokim ekranie, jeden pod drugim na telefonie —
   bez tego długi opis („3 pobrania, 1 brak, ostatnio 19.09 o 22:14 — Magdalena")
   wypychał numer zamówienia poza kartę. */
.op-seen-row[b-00napsx35c] {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .5rem;
    font-size: .92rem;
    line-height: 1.45;
}

.op-seen-order[b-00napsx35c] {
    font-weight: 600;
    white-space: nowrap;
}

.op-seen-what[b-00napsx35c] {
    color: var(--text-secondary, #6c757d);
    min-width: 0;
    overflow-wrap: anywhere;
}

.op-seen-hint[b-00napsx35c] {
    margin-top: .35rem;
    font-size: .85rem;
    color: var(--text-secondary, #6c757d);
}

.op-card-baskets .op-qty-for[b-00napsx35c] { display: none; }
@media (max-width: 600px) {
    .op-card-baskets .op-goto[b-00napsx35c] { display: none; }
    .op-card-baskets .op-location[b-00napsx35c] { font-size: 2.8rem; }
    .op-card-baskets .op-product[b-00napsx35c] { margin-top: .35rem; gap: .55rem; }
    .op-card-baskets .op-photo[b-00napsx35c] { width: 3.25rem; height: 3.25rem; }
    .op-card-baskets .op-photo-none[b-00napsx35c] { font-size: .55rem; }
    .op-card-baskets .op-product-name[b-00napsx35c] { font-size: 1rem; }
}

/* Mobile scanner tools occupy a row instead of covering destination quantities. */
.op-scan-tools[b-00napsx35c] { display: contents; }
@media (max-width: 600px) {
    .op-scan-tools[b-00napsx35c] { display: block; padding: .4rem .8rem; border-bottom: 1px solid var(--border-color); }
    .op-wrap .op-scan-tools[b-00napsx35c]  .pz-floating-actions {
        position: static; flex-direction: row; justify-content: flex-end; align-items: center;
        inset: auto; z-index: auto;
    }
    .op-scan-tools[b-00napsx35c]  .pz-manual-entry-panel { width: 100%; }
    .op-scan-tools[b-00napsx35c]  .pz-manual-entry-panel .form-control { min-width: 0; flex: 1; }
}
/* /Components/Pages/Orders/OrderPickDestinations.razor.rz.scp.css */
.pick-destinations[b-i1a282tlf8] { margin-top: .8rem; }
.pick-destinations-heading[b-i1a282tlf8] { display: flex; gap: .4rem; align-items: center; margin-bottom: .6rem; }
.pick-destinations-list[b-i1a282tlf8] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .55rem; }
.pick-destination[b-i1a282tlf8] { display: flex; align-items: center; gap: .65rem; padding: .7rem; border: 1px solid var(--border-color); border-radius: .55rem; background: var(--surface, var(--bg-light)); }
.pick-destination.is-next[b-i1a282tlf8] { border: 2px solid var(--global-palette1); padding: calc(.7rem - 1px); }
.pick-destination.is-done[b-i1a282tlf8] { opacity: .65; }
.pick-destination-number[b-i1a282tlf8] { display: inline-flex; align-items: center; gap: .2rem; min-width: 2.5rem; justify-content: center; font-size: 1.7rem; color: var(--global-palette1); font-weight: 700; }
.pick-destination-number i[b-i1a282tlf8] { font-size: 1rem; }
.pick-destination-detail[b-i1a282tlf8] { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pick-destination-detail strong[b-i1a282tlf8], .pick-destination-detail span[b-i1a282tlf8] { display: block; }
.pick-destination-detail span[b-i1a282tlf8] { font-size: .8rem; color: var(--text-secondary, var(--global-palette6)); }
.pick-destination-rule[b-i1a282tlf8] { margin-top: .15rem; }
.pick-destination-quantity[b-i1a282tlf8] { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pick-destination-quantity small[b-i1a282tlf8] { display: block; font-size: .75rem; text-align: right; font-weight: 400; }
.pick-destinations-hint[b-i1a282tlf8] { margin-top: .65rem; color: var(--text-secondary, var(--global-palette6)); font-size: .85rem; line-height: 1.45; }

@media (max-width: 600px) {
    .pick-destinations-list[b-i1a282tlf8] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; }
    .pick-destination[b-i1a282tlf8] { flex-wrap: wrap; gap: .25rem; padding: .5rem; }
    .pick-destination.is-next[b-i1a282tlf8] { padding: calc(.5rem - 1px); }
    .pick-destination-number[b-i1a282tlf8] { min-width: 1.7rem; font-size: 1.3rem; }
    .pick-destination-detail[b-i1a282tlf8] { flex: 1 1 calc(100% - 2rem); }
    .pick-destination-detail strong[b-i1a282tlf8] { font-size: .85rem; }
    .pick-destination-detail span[b-i1a282tlf8] { font-size: .7rem; }
    .pick-destination-quantity[b-i1a282tlf8] { width: 100%; display: flex; justify-content: flex-end; align-items: baseline; gap: .3rem; font-size: 1rem; }
    .pick-destination-quantity small[b-i1a282tlf8] { font-size: .7rem; }
    .pick-destinations-hint[b-i1a282tlf8] { font-size: .75rem; }
}
/* /Components/Pages/Orders/OrderPickProductProgress.razor.rz.scp.css */
.pick-product-progress[b-ndu1vaond2] { width: min(100%, 42rem); margin: .8rem auto; text-align: left; }
.pick-progress-caption[b-ndu1vaond2] { display: flex; align-items: center; justify-content: center; gap: .45rem; color: var(--text-secondary, var(--global-palette6)); }
.pick-progress-count[b-ndu1vaond2] { display: flex; justify-content: center; align-items: baseline; gap: .55rem; color: var(--text, var(--global-palette3)); font-size: clamp(2.8rem, 8vw, 4.2rem); font-weight: 650; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pick-progress-count strong[b-ndu1vaond2] { color: var(--global-palette1); }
.pick-progress-slash[b-ndu1vaond2] { color: var(--text-secondary, var(--global-palette6)); font-weight: 400; }
.pick-progress-unit[b-ndu1vaond2] { font-size: 1.1rem; font-weight: 400; }
.pick-progress-track[b-ndu1vaond2] { height: .4rem; overflow: hidden; border-radius: 1rem; background: var(--border-color); margin: .65rem auto; width: min(100%, 22rem); }
.pick-progress-track > span[b-ndu1vaond2] { display: block; height: 100%; background: var(--global-palette1); transition: width .15s ease; }
.pick-progress-remaining[b-ndu1vaond2], .pick-progress-short[b-ndu1vaond2] { text-align: center; color: var(--text-secondary, var(--global-palette6)); font-size: .95rem; }
.pick-progress-pending[b-ndu1vaond2] { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; padding: .85rem 1rem; background: var(--surface, var(--bg-light)); border: 2px solid var(--global-palette1); border-radius: .65rem; }
.pick-progress-pending > i[b-ndu1vaond2] { color: var(--global-palette1); font-size: 1.65rem; }
.pick-progress-pending > div[b-ndu1vaond2] { flex: 1; min-width: 0; }
.pick-progress-pending strong[b-ndu1vaond2], .pick-progress-pending span[b-ndu1vaond2] { display: block; }
.pick-progress-pending span[b-ndu1vaond2] { font-size: .95rem; color: var(--text-secondary, var(--global-palette6)); margin-top: .2rem; }
@media (prefers-reduced-motion: reduce) { .pick-progress-track > span[b-ndu1vaond2] { transition: none; } }

@media (max-width: 600px) {
    .pick-progress-pending[b-ndu1vaond2] { flex-wrap: wrap; gap: .5rem; }
    .pick-progress-pending > div[b-ndu1vaond2] { flex-basis: calc(100% - 5rem); }
    .pick-progress-pending > button[b-ndu1vaond2] { width: 100%; }
}

@media (max-width: 600px) {
    .pick-product-progress[b-ndu1vaond2] { margin: .45rem auto; }
    .pick-progress-count[b-ndu1vaond2] { font-size: 2.8rem; line-height: 1.1; }
    .pick-progress-caption[b-ndu1vaond2] { font-size: .85rem; }
    .pick-progress-pending[b-ndu1vaond2] { padding: .5rem .65rem; margin-top: .5rem; }
    .pick-progress-pending span[b-ndu1vaond2] { font-size: .85rem; }
}
/* /Components/Pages/Orders/OrderPutWall.razor.rz.scp.css */
/* Regał kompletacyjny — ekran przy regale, obsługiwany skanem, oglądany z odległości metra. */

.pw-scan[b-8n46uwcp2t] {
    max-width: 46rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem;
    border-radius: 14px;
    border: 1px solid var(--border, rgba(0, 0, 0, .09));
    background: var(--surface, #fff);
    text-align: center;
}

.pw-scan-icon[b-8n46uwcp2t] {
    font-size: 2.4rem;
    color: var(--global-palette1, #009244);
    line-height: 1;
}

.pw-scan-lead[b-8n46uwcp2t] {
    margin-top: .6rem;
    font-size: 1.05rem;
    font-weight: 600;
}

/* Wskazanie przegrody: to jest jedyna rzecz, którą magazynier ma zobaczyć z odległości. */
.pw-needs[b-8n46uwcp2t] {
    margin-top: 1rem;
}

.pw-needs-lead[b-8n46uwcp2t] {
    font-size: .9rem;
    color: var(--text-muted, #6c757d);
    margin-bottom: .5rem;
}

.pw-need[b-8n46uwcp2t] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: .7rem .9rem;
    border-radius: 10px;
    background: rgba(0, 146, 68, .12);
    border: 1px solid var(--global-palette1, #009244);
    margin-bottom: .4rem;
}

.pw-need-bin[b-8n46uwcp2t] {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .02em;
}

.pw-need-qty[b-8n46uwcp2t] {
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pw-need-order[b-8n46uwcp2t] {
    font-size: .8rem;
    color: var(--text-muted, #6c757d);
}

/* Podgląd regału — układ przegród, żeby było widać, ile jeszcze wejdzie. */
.pw-wall[b-8n46uwcp2t] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: .45rem;
}

.pw-bin[b-8n46uwcp2t] {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .55rem .7rem;
    border-radius: 9px;
    border: 1px solid var(--border, rgba(0, 0, 0, .1));
    background: var(--surface-2, #f5f7f6);
    min-height: 4rem;
}

    /* Stan przegrody rzutem oka: zajęta, kompletna, czeka na inną halę, zamknięta mimo braku.
       „Czeka na halę 3" to jedyna rzecz, którą regał sortujący wie, a zwykły regał nie. */
    .pw-bin.is-busy[b-8n46uwcp2t] {
        background: rgba(13, 110, 253, .10);
        border-color: #0d6efd;
    }

    .pw-bin.is-complete[b-8n46uwcp2t] {
        background: rgba(0, 146, 68, .16);
        border-color: var(--global-palette1, #009244);
    }

    .pw-bin.is-waiting[b-8n46uwcp2t] {
        background: rgba(253, 126, 20, .16);
        border-color: #fd7e14;
    }

    .pw-bin.is-short[b-8n46uwcp2t] {
        background: rgba(220, 53, 69, .14);
        border-color: #dc3545;
    }

    /* Przegroda wskazana do potwierdzenia — miga, żeby było ją widać z metra. */
    .pw-bin.is-target[b-8n46uwcp2t],
    .pw-need.is-target[b-8n46uwcp2t] {
        outline: 3px solid var(--global-palette1, #009244);
        outline-offset: 2px;
        animation: pw-blink-b-8n46uwcp2t 1s ease-in-out infinite;
    }

@keyframes pw-blink-b-8n46uwcp2t {
    0%, 100% { outline-color: var(--global-palette1, #009244); }
    50% { outline-color: transparent; }
}

.pw-bin-code[b-8n46uwcp2t] {
    font-weight: 700;
    font-size: .95rem;
}

.pw-bin-state[b-8n46uwcp2t],
.pw-bin-cap[b-8n46uwcp2t] {
    font-size: .74rem;
    color: var(--text-muted, #6c757d);
}

.pw-bin-order[b-8n46uwcp2t] {
    font-size: .8rem;
    font-weight: 600;
}

@media (max-width: 768px) {
    .pw-need-bin[b-8n46uwcp2t] { font-size: 1.6rem; }
    .pw-wall[b-8n46uwcp2t] { grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); }
}

/* Tryb przenoszenia zamówienia między przegrodami (D7). Pasek jest wyraźny z premedytacją:
   w tym trybie skan przegrody znaczy co innego niż zwykle, więc człowiek musi wiedzieć,
   w czym jest. */
.pw-move-bar[b-8n46uwcp2t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: color-mix(in srgb, var(--global-palette2) 14%, var(--surface));
    border: 1px solid var(--global-palette2);
    border-radius: 10px;
    padding: 0.6rem 0.9rem;
    margin-bottom: 0.75rem;
}

.pw-move-hint[b-8n46uwcp2t] {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Przycisk „przenies" stoi w KAZDEJ zajetej przegrodzie, wiec na pelnym regale jest ich
   kilkanascie naraz. Na tokenie --border-strong jego obrys mial 1,2-1,4:1 przy wymaganych 3:1
   (zmierzone straznikiem abwms-kontrast-regalu) — czyli siatka przegrod pokazywala kilkanascie
   napisow bez widocznych krawedzi i nie bylo wiadomo, ktory z nich jest przyciskiem.
   Staly szary tu NIE wystarcza (wychodzil 2,8-2,97:1), bo kazdy kafel przegrody ma wlasny
   odcien tla zaleznie od stanu — wolna, zajeta, gotowa. Obrys wiazemy wiec z kolorem NAPISU:
   napis jest dobierany tak, zeby bylo go widac na tym kafelku, wiec obrys dziedziczy ten sam
   zapas kontrastu, jakikolwiek by ten kafelek nie byl. */
.pw-bin-move[b-8n46uwcp2t] {
    margin-top: 0.35rem;
    background: none;
    border: 1px solid currentColor;
    border-radius: 6px;
    font-size: 0.72rem;
    padding: 0.1rem 0.4rem;
    color: var(--text-secondary);
}

/* Powód wyboru przegrody (D6). Cicho, pod spodem — to wyjaśnienie, nie polecenie;
   polecenie stoi wyżej i ma być tym, co czyta się pierwsze. */
.pw-needs-why[b-8n46uwcp2t] {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

/* Wyjscie z regalu do stolu pakowania. Zielen marki pod bialym napisem daje 4,04:1 przy
   wymaganych 4,5:1 — ta sama poprawka, co przy „Zbierz N szt." na kolektorze: ciemniejszy
   odcien tej samej zieleni, 5,47:1. Trzy ekrany operatora maja wtedy te sama glowna akcje. */
.pw-head .btn-gradient-success[b-8n46uwcp2t],
.page-header .btn-gradient-success[b-8n46uwcp2t] {
    background: #007a38;
    border-color: #007a38;
    color: #fff;
}

    .pw-head .btn-gradient-success:hover[b-8n46uwcp2t],
    .page-header .btn-gradient-success:hover[b-8n46uwcp2t] {
        background: #00632d;
        border-color: #00632d;
        color: #fff;
    }
/* /Components/Pages/Orders/OrderPutWallConfig.razor.rz.scp.css */
/* Podgląd siatki regału — układ 1:1 z meblem, żeby kod na ekranie stał tam, gdzie przegroda w hali. */

.pwc-grid[b-ybk0ivd4ut] {
    display: grid;
    grid-template-columns: repeat(var(--pwc-cols, 6), minmax(4.5rem, 1fr));
    gap: .35rem;
}

.pwc-slot[b-ybk0ivd4ut] {
    padding: .45rem .35rem;
    border-radius: 8px;
    border: 1px solid var(--border, rgba(0, 0, 0, .12));
    background: var(--surface-2, #f5f7f6);
    text-align: center;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .pwc-grid[b-ybk0ivd4ut] {
        grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
    }
}
/* /Components/Pages/Orders/Orders.razor.rz.scp.css */
/* Moduł „Zamówienia" — style tylko dla listy.
   Do app.css trafią dopiero, gdy będą używane na trzecim ekranie (wzorzec .pw-* i .ddrawer). */

/* Liczniki w nagłówku są jednocześnie skrótami do filtrów, więc muszą wyglądać na klikalne. */
.ord-counters[b-jzgg4ld2b6] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem;
}

.ord-counter[b-jzgg4ld2b6] {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed rgba(255, 255, 255, .45);
    padding-bottom: 1px;
}

    .ord-counter:hover[b-jzgg4ld2b6] {
        color: inherit;
        border-bottom-style: solid;
    }

.ord-counter-sep[b-jzgg4ld2b6] {
    opacity: .5;
}

/* Liczby czytane z odległości: cyfry o stałej szerokości, żeby kolumny się nie chwiały. */
.ord-num[b-jzgg4ld2b6] {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 1.05em;
}

/* Tor statusu — segmenty budowane z PRAWDZIWYCH statusów klienta, nie ze stałej w kodzie. */
.ord-track[b-jzgg4ld2b6] {
    display: flex;
    gap: 2px;
    align-items: center;
}

.ord-seg[b-jzgg4ld2b6] {
    flex: 1 1 auto;
    height: 8px;
    border-radius: 2px;
    background: var(--surface-2, #e9ecef);
    /* Obrys, żeby jasny segment nie znikał na jasnym tle, a ciemny na ciemnym. */
    outline: 1px solid var(--border, rgba(0, 0, 0, .08));
    outline-offset: -1px;
}

    .ord-seg.is-on[b-jzgg4ld2b6] {
        background: var(--global-palette1, #009244);
    }

/* Pasek akcji na telefonie: bez tego trzy przyciski wchodzą pod pływające guziki skanowania
   w prawym dolnym rogu i ostatni z nich jest nieklikalny. Zawijamy i zostawiamy im miejsce. */
@media (max-width: 768px) {
    .mp-action-bar[b-jzgg4ld2b6] {
        left: .5rem;
        right: 4.75rem;              /* zapas na pływające guziki skanowania */
        transform: none;
        flex-wrap: wrap;
        justify-content: center;
        gap: .4rem;
        padding-bottom: calc(.6rem + env(safe-area-inset-bottom));
    }

        .mp-action-bar .btn[b-jzgg4ld2b6] {
            flex: 1 1 auto;
            min-width: 8.5rem;
        }
}

/* Pasek doboru partii — glowne wejscie do pracy, wiec ma byc widoczny bez szukania. */
.ord-pickbar[b-jzgg4ld2b6] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    margin-bottom: .85rem;
    border-radius: 12px;
    border: 1px solid var(--border, rgba(0, 0, 0, .09));
    background: var(--surface, #fff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.ord-pickbar-lead[b-jzgg4ld2b6] {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    min-width: 16rem;
    flex: 1 1 22rem;
}

    .ord-pickbar-lead > .bi[b-jzgg4ld2b6] {
        font-size: 1.5rem;
        color: var(--global-palette1, #009244);
        line-height: 1.2;
    }

.ord-pickbar-title[b-jzgg4ld2b6] {
    font-weight: 700;
    font-size: 1.05rem;
}

.ord-pickbar-sub[b-jzgg4ld2b6] {
    color: var(--text-muted, #6c757d);
    font-size: .875rem;
}

.ord-pickbar-form[b-jzgg4ld2b6] {
    display: flex;
    align-items: flex-end;
    gap: .6rem;
    flex-wrap: wrap;
}

    .ord-pickbar-form > div:first-child[b-jzgg4ld2b6] { min-width: 15rem; }
    .ord-pickbar-form .form-label[b-jzgg4ld2b6] { margin-bottom: .2rem; font-size: .8rem; }

/* Zbieranie bez wozka: druga droga, wiec wchodzi ponizej paska i nie konkuruje o wzrok. */
.ord-pickbar-hand[b-jzgg4ld2b6] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    width: 100%;
    padding-top: .75rem;
    margin-top: .25rem;
    border-top: 1px dashed var(--border, rgba(0, 0, 0, .12));
}

    .ord-pickbar-hand input[b-jzgg4ld2b6] {
        width: 5.5rem;
    }

.ord-pickbar-hand-cap[b-jzgg4ld2b6] {
    font-size: .875rem;
    color: var(--text-muted, #6c757d);
}

/* Wybrany kurier (B5). Ten sam uklad co pasek "bez wozka" - to jest ta sama polka decyzji. */
.ord-pickbar-carrier[b-jzgg4ld2b6] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    width: 100%;
    padding-top: .75rem;
    margin-top: .25rem;
    border-top: 1px dashed var(--border, rgba(0, 0, 0, .12));
}

/* Na telefonie pasek zajmuje calą szerokość — magazynier klika kciukiem, nie myszą. */
@media (max-width: 768px) {
    .ord-pickbar-form[b-jzgg4ld2b6] { width: 100%; }
    .ord-pickbar-form > div:first-child[b-jzgg4ld2b6] { flex: 1 1 100%; width: auto; min-width: 0; }
    .ord-pickbar-form > .btn[b-jzgg4ld2b6] { width: 100%; }
    .ord-pickbar-hand input[b-jzgg4ld2b6] { flex: 1 1 4rem; width: auto; }
    .ord-pickbar-hand > .btn[b-jzgg4ld2b6] { width: 100%; }
    .ord-pickbar-carrier > .btn-outline-success[b-jzgg4ld2b6] { width: 100%; }
}

/* ── Skan nosnika ─────────────────────────────────────────────── */

.ord-scan-hint[b-jzgg4ld2b6] {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .85rem 1rem;
    margin-bottom: .85rem;
    border-radius: 10px;
    background: var(--surface-2, #f5f7f6);
}

    .ord-scan-hint > .bi[b-jzgg4ld2b6] {
        font-size: 1.6rem;
        color: var(--global-palette1, #009244);
        animation: ord-scan-pulse-b-jzgg4ld2b6 1.6s ease-in-out infinite;
    }

@keyframes ord-scan-pulse-b-jzgg4ld2b6 {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

.ord-scan-hint-title[b-jzgg4ld2b6] { font-weight: 700; }

.ord-scan-hint-sub[b-jzgg4ld2b6] {
    font-size: .875rem;
    color: var(--text-muted, #6c757d);
}

.ord-scan-cap[b-jzgg4ld2b6] {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted, #6c757d);
    margin-bottom: .4rem;
}

.ord-carrier-list[b-jzgg4ld2b6] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    max-height: 40vh;
    overflow-y: auto;
}

.ord-carrier[b-jzgg4ld2b6] {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    padding: .6rem .8rem;
    border-radius: 10px;
    border: 1px solid var(--border, rgba(0, 0, 0, .12));
    background: var(--surface, #fff);
    color: inherit;
    text-align: left;
}

    .ord-carrier:hover:not(:disabled)[b-jzgg4ld2b6] {
        border-color: var(--global-palette1, #009244);
        background: rgba(0, 146, 68, .07);
    }

    .ord-carrier:disabled[b-jzgg4ld2b6] { opacity: .55; }

.ord-carrier-icon[b-jzgg4ld2b6] {
    font-size: 1.3rem;
    color: var(--global-palette1, #009244);
}

.ord-carrier-main[b-jzgg4ld2b6] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    flex: 1 1 auto;
}

.ord-carrier-code[b-jzgg4ld2b6] { font-weight: 700; }

.ord-carrier-sub[b-jzgg4ld2b6] {
    font-size: .8rem;
    color: var(--text-muted, #6c757d);
}

/* Nosnik partii w oknie propozycji: skad wzial sie limit, ktory przycial partie. */
.ord-batch-carrier[b-jzgg4ld2b6] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .5rem .8rem;
    margin-bottom: .7rem;
    border-radius: 10px;
    border: 1px dashed var(--global-palette1, #009244);
    background: rgba(0, 146, 68, .07);
    font-size: .875rem;
}

    .ord-batch-carrier > .bi[b-jzgg4ld2b6] {
        font-size: 1.15rem;
        color: var(--global-palette1, #009244);
    }

.ord-batch-carrier-code[b-jzgg4ld2b6] { font-weight: 700; }

.ord-batch-carrier-sum[b-jzgg4ld2b6] {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

/* Podsumowanie propozycji: trzy liczby, ktore mowia czy dobor jest dobry. */
.ord-batch-summary[b-jzgg4ld2b6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    padding: .85rem 1rem;
    margin-bottom: .85rem;
    border-radius: 10px;
    background: var(--surface-2, #f5f7f6);
}

.ord-batch-metric[b-jzgg4ld2b6] {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.ord-batch-num[b-jzgg4ld2b6] {
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--global-palette1, #009244);
}

.ord-batch-cap[b-jzgg4ld2b6] {
    font-size: .78rem;
    color: var(--text-muted, #6c757d);
}

.ord-batch-mode[b-jzgg4ld2b6] { margin-left: auto; }

/* Towar czekajacy w strefie przyjec to inny rodzaj braku niz brak na stanie — inny kolor. */
.ord-technical[b-jzgg4ld2b6] {
    color: var(--bs-warning-text-emphasis, #997404);
}

/* ── Obraz pracy ───────────────────────────────────────────────

   Kolor niesie znaczenie, ale liczba NIE jest kolorowana: cyfra zostaje w kolorze tekstu,
   a stan pokazuje tło i pasek z lewej. Dzięki temu ten sam kod działa na jasnym i ciemnym
   motywie bez osobnych nadpisań — tło i pasek są półprzezroczyste, więc kładą się na obu. */

.ord-work[b-jzgg4ld2b6] {
    padding: .9rem 1.15rem 1rem;
    margin-bottom: .85rem;
    border-radius: 12px;
    border: 1px solid var(--border, rgba(0, 0, 0, .09));
    background: var(--surface, #fff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.ord-work-head[b-jzgg4ld2b6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .7rem;
}

.ord-work-title[b-jzgg4ld2b6] {
    font-weight: 700;
    font-size: 1.05rem;
}

.ord-work-meta[b-jzgg4ld2b6] {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    color: var(--text-muted, #6c757d);
}

.ord-work-refresh[b-jzgg4ld2b6] {
    border: 1px solid var(--border, rgba(0, 0, 0, .12));
    background: transparent;
    color: var(--text-muted, #6c757d);
    border-radius: 7px;
    width: 1.85rem;
    height: 1.85rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .ord-work-refresh:hover:not(:disabled)[b-jzgg4ld2b6] {
        color: var(--global-palette1, #009244);
        border-color: var(--global-palette1, #009244);
    }

.ord-work-empty[b-jzgg4ld2b6] {
    color: var(--text-muted, #6c757d);
    font-size: .9rem;
}

.ord-work-grid[b-jzgg4ld2b6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: .55rem;
}

.ord-tile[b-jzgg4ld2b6] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
    text-align: left;
    padding: .6rem .75rem .65rem;
    border: 1px solid var(--border, rgba(0, 0, 0, .09));
    border-left-width: 3px;
    border-radius: 10px;
    background: var(--surface-2, #f5f7f6);
    color: inherit;
    transition: transform .08s ease, box-shadow .12s ease;
}

    .ord-tile:hover[b-jzgg4ld2b6] {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, .10);
    }

    .ord-tile.is-active[b-jzgg4ld2b6] {
        outline: 2px solid var(--global-palette1, #009244);
        outline-offset: -2px;
    }

.ord-tile-num[b-jzgg4ld2b6] {
    font-size: 1.6rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.ord-tile-cap[b-jzgg4ld2b6] {
    font-size: .78rem;
    color: var(--text-muted, #6c757d);
    line-height: 1.25;
}

/* Stany: pasek z lewej i delikatne tło. Bez twardych hexów tekstu — patrz komentarz wyżej. */
.ord-tile.is-lead[b-jzgg4ld2b6] {
    border-left-color: var(--global-palette1, #009244);
    background: rgba(0, 146, 68, .10);
}

.ord-tile.is-good[b-jzgg4ld2b6] {
    border-left-color: #22c55e;
    background: rgba(34, 197, 94, .12);
}

.ord-tile.is-warn[b-jzgg4ld2b6] {
    border-left-color: #f59e0b;
    background: rgba(245, 158, 11, .12);
}

.ord-tile.is-bad[b-jzgg4ld2b6] {
    border-left-color: #ef4444;
    background: rgba(239, 68, 68, .12);
}

/* Druga linia: jak to zebrać. To są podpowiedzi trybu, więc wyglądają lżej niż kafle stanu. */
.ord-work-how[b-jzgg4ld2b6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    margin-top: .7rem;
    padding-top: .7rem;
    border-top: 1px dashed var(--border, rgba(0, 0, 0, .12));
}

.ord-work-how-lead[b-jzgg4ld2b6] {
    font-size: .8rem;
    color: var(--text-muted, #6c757d);
    margin-right: .1rem;
}

.ord-chip[b-jzgg4ld2b6] {
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
    padding: .3rem .65rem;
    border-radius: 999px;
    border: 1px solid var(--border, rgba(0, 0, 0, .12));
    background: var(--surface-2, #f5f7f6);
    color: inherit;
    font-size: .84rem;
}

    .ord-chip b[b-jzgg4ld2b6] {
        font-variant-numeric: tabular-nums;
        font-size: .95rem;
    }

    .ord-chip:hover:not(:disabled)[b-jzgg4ld2b6] {
        border-color: var(--global-palette1, #009244);
    }

    .ord-chip:disabled[b-jzgg4ld2b6] {
        opacity: .5;
    }

    .ord-chip.is-active[b-jzgg4ld2b6] {
        border-color: var(--global-palette1, #009244);
        background: rgba(0, 146, 68, .14);
    }

.ord-chip-sub[b-jzgg4ld2b6] {
    font-size: .76rem;
    color: var(--text-muted, #6c757d);
}

.ord-work-how-tail[b-jzgg4ld2b6] {
    margin-left: auto;
    font-size: .8rem;
    color: var(--text-muted, #6c757d);
}

    .ord-work-how-tail b[b-jzgg4ld2b6] {
        font-variant-numeric: tabular-nums;
        color: inherit;
    }

@media (max-width: 768px) {
    .ord-work-grid[b-jzgg4ld2b6] {
        grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    }

    .ord-work-how-tail[b-jzgg4ld2b6] {
        margin-left: 0;
        flex: 1 1 100%;
    }
}

/* Kafel z zerem gasimy: zero braków to dobra wiadomość, a czerwone tło mówiłoby co innego. */
.ord-tile.is-zero[b-jzgg4ld2b6] {
    background: var(--surface-2, #f5f7f6);
    border-left-color: var(--border, rgba(0, 0, 0, .15));
}

    .ord-tile.is-zero .ord-tile-num[b-jzgg4ld2b6] {
        color: var(--text-muted, #6c757d);
    }

/* ── Trzy okna ────────────────────────────────────────────────────

   Zakładka aktywna ma pełne tło, nie samą kreskę pod spodem — na kolektorze w słońcu
   cienka kreska jest niewidoczna, a magazynier musi wiedzieć, gdzie stoi. */
.ord-tabs[b-jzgg4ld2b6] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .85rem;
}

.ord-tab[b-jzgg4ld2b6] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .95rem;
    border-radius: 10px;
    border: 1px solid var(--border, rgba(0, 0, 0, .12));
    background: var(--surface, #fff);
    color: inherit;
    font-weight: 600;
    font-size: .95rem;
}

    .ord-tab:hover:not(.is-on)[b-jzgg4ld2b6] {
        border-color: var(--global-palette1, #009244);
    }

    .ord-tab.is-on[b-jzgg4ld2b6] {
        background: var(--global-palette1, #009244);
        border-color: var(--global-palette1, #009244);
        color: #fff;
    }

.ord-tab-num[b-jzgg4ld2b6] {
    font-variant-numeric: tabular-nums;
    font-size: .8rem;
    font-weight: 700;
    padding: .05rem .45rem;
    border-radius: 999px;
    background: var(--surface-2, #eef1f0);
    color: var(--text-muted, #6c757d);
}

.ord-tab.is-on .ord-tab-num[b-jzgg4ld2b6] {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* Liczba w ogonie panelu, która jest skrótem — wygląda jak tekst, zachowuje się jak odnośnik. */
.ord-linkish[b-jzgg4ld2b6] {
    border: 0;
    background: none;
    padding: 0;
    color: inherit;
    font: inherit;
    border-bottom: 1px dashed var(--border, rgba(0, 0, 0, .3));
}

    .ord-linkish:hover[b-jzgg4ld2b6] {
        color: var(--global-palette1, #009244);
        border-bottom-style: solid;
    }

@media (max-width: 768px) {
    .ord-tab[b-jzgg4ld2b6] {
        flex: 1 1 auto;
        justify-content: center;
        padding: .55rem .5rem;
    }

        .ord-tab span:not(.ord-tab-num)[b-jzgg4ld2b6] {
            font-size: .9rem;
        }
}

/* Kurier na liście — czytany rzutem oka, więc z ikoną i własnym tłem, nie szarym drobnym drukiem. */
/* Nazwa kuriera w wierszu tabeli. Osobna nazwa klasy, bo .ord-carrier to przycisk na liscie
   nosnikow w modalu - jedna nazwa dla dwoch roznych rzeczy nadpisywala tamten uklad. */
.ord-carrier-chip[b-jzgg4ld2b6] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .1rem .45rem;
    border-radius: 6px;
    background: var(--surface-2, #eef1f0);
    border: 1px solid var(--border, rgba(0, 0, 0, .1));
    font-size: .8rem;
    white-space: nowrap;
}

    .ord-carrier-chip .bi[b-jzgg4ld2b6] {
        opacity: .65;
    }

/* Pasek powrotu do wlasnej, niedokonczonej trasy. Ma bic w oczy mocniej niz karta startu:
   dopoki czlowiek ma cos w reku, to jest jedyna rzecz, ktora powinien nacisnac. */
.ord-resume[b-jzgg4ld2b6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1.15rem;
    margin-bottom: .85rem;
    border-radius: 12px;
    border: 1px solid var(--global-palette1, #009244);
    background: color-mix(in srgb, var(--global-palette1, #009244) 9%, transparent);
}

.ord-resume-lead[b-jzgg4ld2b6] {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 14rem;
    flex: 1 1 18rem;
}

    .ord-resume-lead > .bi[b-jzgg4ld2b6] {
        font-size: 1.5rem;
        color: var(--global-palette1, #009244);
    }

.ord-resume-title[b-jzgg4ld2b6] {
    font-weight: 700;
}

.ord-resume-sub[b-jzgg4ld2b6] {
    font-size: .85rem;
    opacity: .8;
}

@media (max-width: 576px) {
    .ord-resume .btn[b-jzgg4ld2b6] {
        width: 100%;
    }
}
/* Stopka okien tego modulu na telefonie. Wczesniej zawijala sie w rzedzie: w widocznym pasie
   zostawaly „Anuluj" i „Dobierz inaczej", a glowny przycisk „Zbieram te" spadal pod krawedz
   ekranu — czyli jedyna akcja, po ktora czlowiek tu przyszedl, byla niewidoczna.
   Ponizej 640 px ustawiamy przyciski w kolumne, akcja glowna (ostatnia w kodzie) na gorze. */
@media (max-width: 640px) {
    .modal-footer[b-jzgg4ld2b6] {
        flex-direction: column-reverse;
        align-items: stretch;
    }

        .modal-footer .btn[b-jzgg4ld2b6] {
            width: 100%;
        }
}


/* ── Zajety wozek: kto, do czego, co na nim lezy ─────────────────────────────
   Panel zamiast jednego zdania odmowy. Fakty na gorze, wyjscie awaryjne na dole
   i za kreska — zwolnienie kasuje cudza prace, wiec nie ma wygladac jak zwykly guzik. */
.ord-busy[b-jzgg4ld2b6] {
    border: 1px solid var(--border, #dee2e6);
    border-left: 4px solid #f0ad4e;
    border-radius: 12px;
    padding: .8rem .9rem;
    background: var(--surface-2, #f8f9fa);
    margin-bottom: .75rem;
}

.ord-busy-head[b-jzgg4ld2b6] {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
}

.ord-busy-head i[b-jzgg4ld2b6] {
    font-size: 1.5rem;
    color: #f0ad4e;
    line-height: 1.1;
}

.ord-busy-title[b-jzgg4ld2b6] {
    font-weight: 700;
    font-size: 1.02rem;
}

.ord-busy-who[b-jzgg4ld2b6] {
    font-size: .9rem;
    color: var(--text-secondary, #555);
}

.ord-busy-mode[b-jzgg4ld2b6] {
    margin: .55rem 0 .5rem;
    font-size: .85rem;
    color: var(--text-muted, #6c757d);
}

.ord-busy-dot[b-jzgg4ld2b6] {
    margin: 0 .3rem;
    opacity: .6;
}

.ord-busy-qty[b-jzgg4ld2b6] {
    font-weight: 600;
    color: var(--text-secondary, #555);
}

.ord-busy-list[b-jzgg4ld2b6] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.ord-busy-row[b-jzgg4ld2b6] {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .35rem .5rem;
    border-radius: 9px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #dee2e6);
}

.ord-busy-basket[b-jzgg4ld2b6] {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--global-palette1, #009244);
    color: #fff;
    font-weight: 800;
    font-size: .95rem;
}

.ord-busy-order[b-jzgg4ld2b6] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.ord-busy-kh[b-jzgg4ld2b6] {
    font-size: .8rem;
    color: var(--text-muted, #6c757d);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ord-busy-progress[b-jzgg4ld2b6] {
    flex: 0 0 auto;
    font-size: .8rem;
    color: var(--text-muted, #6c757d);
    font-variant-numeric: tabular-nums;
}

.ord-busy-hint[b-jzgg4ld2b6] {
    margin-top: .6rem;
    font-size: .88rem;
    color: var(--text-secondary, #555);
}

.ord-busy-danger[b-jzgg4ld2b6] {
    margin-top: .8rem;
    padding-top: .7rem;
    border-top: 1px dashed var(--border, #dee2e6);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.ord-busy-danger-note[b-jzgg4ld2b6] {
    font-size: .8rem;
    color: var(--text-muted, #6c757d);
}

.ord-busy-confirm[b-jzgg4ld2b6] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.ord-busy-confirm-q[b-jzgg4ld2b6] {
    font-weight: 700;
}

.ord-busy-confirm-w[b-jzgg4ld2b6] {
    font-size: .87rem;
    color: var(--text-secondary, #555);
}

.ord-busy-confirm-btns[b-jzgg4ld2b6] {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.ord-busy-confirm-btns .btn[b-jzgg4ld2b6] {
    flex: 1 1 auto;
    min-height: 44px;
}

/* Warunek wstepny trybu: „Zanim ruszysz: kartony musza miec etykiety".
   CELOWO nie alert-warning: zolty alert w tym oknie znaczy „cos poszlo nie tak",
   a tu nic sie nie zepsulo - trzeba tylko cos przygotowac. Stoi NAD zwijanym
   „Dlaczego te?", bo odpowiada na „czy moge zaczac", a nie na „czemu akurat te". */
.ord-warunek[b-jzgg4ld2b6] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: .9rem;
    padding: .55rem .8rem;
    border-left: 3px solid var(--global-palette1, #009244);
    border-radius: .35rem;
    background: color-mix(in srgb, var(--global-palette1, #009244) 8%, transparent);
    font-size: .88rem;
    line-height: 1.45;
}

.ord-warunek > i[b-jzgg4ld2b6] {
    flex: 0 0 auto;
    margin-top: .12rem;
    color: var(--global-palette1, #009244);
}

/* ── H1: „Dlaczego te?" ────────────────────────────────────────────────────────
   Uzasadnienie doboru bylo akapitem, ktory czytalo sie raz, a ogladalo przy kazdym
   doborze. Przycisk jest celowo cichy — ma byc do znalezienia, a nie do omijania. */
.ord-why[b-jzgg4ld2b6] {
    display: block;
}

.ord-why-btn[b-jzgg4ld2b6] {
    background: none;
    border: 1px solid var(--border, #dee2e6);
    border-radius: 999px;
    padding: .18rem .7rem;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--text-muted, #6c757d);
    cursor: pointer;
    transition: color .12s ease, border-color .12s ease;
}

.ord-why-btn:hover[b-jzgg4ld2b6],
.ord-why-btn:focus-visible[b-jzgg4ld2b6] {
    color: var(--global-palette1, #009244);
    border-color: var(--global-palette1, #009244);
}

/* ── K1: wiek zamówienia i czas do terminu ──────────────────────────────
   Kolor jest tu informacją, nie ozdobą, więc niesie go pasek z lewej i delikatne tło,
   a nie sam kolor liter: czerwony napis potrafi zginąć na ciemnym motywie. Tekst zostaje
   dziedziczony, więc czyta się tak samo w jasnym i ciemnym. */
.ord-age[b-jzgg4ld2b6],
.ord-left[b-jzgg4ld2b6] {
    display: inline-block;
    padding: .1rem .45rem;
    border-radius: 6px;
    border-left: 3px solid transparent;
    font-variant-numeric: tabular-nums;
    font-size: .85rem;
    white-space: nowrap;
}

/* Spokojne: nic się nie dzieje, więc i wyglądać ma jak zwykły drobny druk. */
.ord-age.is-calm[b-jzgg4ld2b6],
.ord-left.is-calm[b-jzgg4ld2b6] {
    color: var(--text-muted, #6c757d);
}

.ord-age.is-warn[b-jzgg4ld2b6],
.ord-left.is-soon[b-jzgg4ld2b6] {
    border-left-color: #f59e0b;
    background: rgba(245, 158, 11, .14);
    font-weight: 600;
}

.ord-age.is-hot[b-jzgg4ld2b6],
.ord-left.is-late[b-jzgg4ld2b6] {
    border-left-color: #ef4444;
    background: rgba(239, 68, 68, .16);
    font-weight: 700;
}

/* Nie znamy daty — myślnik ma być cichy, a nie udawać stanu spokojnego. */
.ord-age.is-none[b-jzgg4ld2b6],
.ord-left.is-none[b-jzgg4ld2b6] {
    color: var(--text-muted, #6c757d);
    opacity: .55;
}

/* Na kolektorze wiersz zamienia się w kartę (TableCards), a te dwie liczby są tam
   najważniejsze — więc nie mogą być mniejsze od reszty karty. */
@media (max-width: 768px) {

    .list-cards .ord-age[b-jzgg4ld2b6],
    .list-cards .ord-left[b-jzgg4ld2b6] {
        font-size: .95rem;
    }
}

/* Na telefonie zbieracz wchodzi tu po JEDNO: zeskanować wózek i iść. Przy 390px panel
   "Co czeka w magazynie" spychał tę jedną rzecz 1,5 ekranu w dół — ktoś nowy nie miał
   szans jej znaleźć. Statystyki są dla kierownika i mogą poczekać pod spodem.
   Na szerokim ekranie kolejność zostaje bez zmian. */
@media (max-width: 768px) {
    .ord-stack[b-jzgg4ld2b6] {
        display: flex;
        flex-direction: column;
    }

    .ord-resume[b-jzgg4ld2b6] {
        order: -2;
    }

    .ord-pickbar[b-jzgg4ld2b6] {
        order: -1;
    }
}

/* Numer dokumentu w propozycji jest JEDNYM numerem, a nie dwoma rzeczami. Na telefonie plakietka
   łamała się po „ZK" i wiersz wyglądał, jakby stały w nim dwa różne oznaczenia. */
.ord-batch-rows .sku-badge[b-jzgg4ld2b6],
.ord-batch-rows .badge-soft[b-jzgg4ld2b6] {
    white-space: nowrap;
}

/* ── WYBOR KATEGORII: wielokrotny, bez <select multiple> ──────────────────────
   Magazyn rzadko mowi „zbieramy detal", a czesto „detal i hurt, bez reklamacji".
   Lista wielokrotnego wyboru w przegladarce wymaga przytrzymania ctrl — w rekawicy
   i na dotyku to nie dziala, wiec robimy wlasna liste z polami wyboru. */
.ord-kat[b-jzgg4ld2b6] {
    position: relative;
}

    /* Przycisk udaje liste rozwijana, zeby pasek doboru zostal jednym rzedem kontrolek. */
    .ord-kat .ord-kategoria[b-jzgg4ld2b6] {
        text-align: left;
        cursor: pointer;
    }

.ord-kat-menu[b-jzgg4ld2b6] {
    position: absolute;
    z-index: 30;
    top: 100%;
    left: 0;
    min-width: 100%;
    max-height: 16rem;
    overflow-y: auto;
    margin-top: .25rem;
    padding: .35rem;
    border: 1px solid var(--border, rgba(0, 0, 0, .18));
    border-radius: 8px;
    background: var(--surface, #fff);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.ord-kat-all[b-jzgg4ld2b6] {
    display: block;
    width: 100%;
    padding: .35rem .5rem;
    border: 0;
    border-bottom: 1px solid var(--border, rgba(0, 0, 0, .12));
    background: none;
    color: inherit;
    text-align: left;
    font-size: .9rem;
    cursor: pointer;
}

.ord-kat-item[b-jzgg4ld2b6] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .5rem;
    border-radius: 6px;
    font-size: .95rem;
    cursor: pointer;
    white-space: nowrap;
}

    .ord-kat-item:hover[b-jzgg4ld2b6],
    .ord-kat-all:hover[b-jzgg4ld2b6] {
        background: var(--surface-2, rgba(0, 0, 0, .04));
    }
/* /Components/Pages/Orders/OrdersSettings.razor.rz.scp.css */
/* Pasek zapisu przyklejony do dołu — ekran ustawień jest długi, a przycisk „Zapisz"
   nie może wymagać przewijania na sam koniec. Ten sam wzorzec co w ustawieniach głównych,
   ale własny arkusz: style izolowane komponentu nie przechodzą między stronami. */
.save-bar[b-hadzy7h0qp] {
    position: sticky;
    bottom: 0;
    z-index: 100;
    background: var(--surface, #fff);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border, rgba(0, 0, 0, .1));
    border-radius: 14px 14px 0 0;
    padding: .85rem 1.5rem;
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .06);
}
/* /Components/Pages/Orders/OrderStats.razor.rz.scp.css */
/* Statystyki: liczby czytane z odległości, reszta cicho w tle. */

.st-scope[b-0gp8v0udhm] {
    margin-bottom: .85rem;
}

.st-tiles[b-0gp8v0udhm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: .55rem;
}

.st-tile[b-0gp8v0udhm] {
    display: flex;
    flex-direction: column;
    padding: .7rem .9rem .75rem;
    border-radius: 10px;
    border: 1px solid var(--border, rgba(0, 0, 0, .09));
    border-left-width: 3px;
    border-left-color: var(--global-palette1, #009244);
    background: var(--surface, #fff);
}

    .st-tile.is-warn[b-0gp8v0udhm] {
        border-left-color: #f59e0b;
        background: rgba(245, 158, 11, .10);
    }

.st-num[b-0gp8v0udhm] {
    font-size: 1.7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.st-cap[b-0gp8v0udhm] {
    font-size: .78rem;
    color: var(--text-muted, #6c757d);
}

/* Własny wiersz podświetlamy delikatnie — to ma pomagać się odnaleźć, nie krzyczeć. */
.st-me[b-0gp8v0udhm] {
    background: rgba(0, 146, 68, .07);
}

/* Powody braków: słupki zamiast samych liczb — proporcje widać rzutem oka. */
.st-bars[b-0gp8v0udhm] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.st-bar-row[b-0gp8v0udhm] {
    display: grid;
    grid-template-columns: minmax(6rem, 11rem) 1fr 2.5rem;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
}

.st-bar-label[b-0gp8v0udhm] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-bar[b-0gp8v0udhm] {
    display: block;
    height: 10px;
    border-radius: 5px;
    background: var(--surface-2, #eef1f0);
    overflow: hidden;
}

.st-bar-fill[b-0gp8v0udhm] {
    display: block;
    height: 100%;
    background: #f59e0b;
}

.st-bar-num[b-0gp8v0udhm] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* Dzień po dniu — mały wykres słupkowy, bez biblioteki. */
.st-days[b-0gp8v0udhm] {
    display: flex;
    align-items: flex-end;
    gap: .35rem;
    height: 8rem;
    overflow-x: auto;
    padding-bottom: .2rem;
}

.st-day[b-0gp8v0udhm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    min-width: 2.2rem;
    flex: 1 1 2.2rem;
}

.st-day-bar[b-0gp8v0udhm] {
    display: block;
    width: 100%;
    max-width: 2rem;
    border-radius: 4px 4px 0 0;
    background: var(--global-palette1, #009244);
}

.st-day-label[b-0gp8v0udhm] {
    font-size: .68rem;
    color: var(--text-muted, #6c757d);
    margin-top: .25rem;
    white-space: nowrap;
}


/* ── Porównanie z poprzednim okresem ─────────────────────────────────────────
   Kolor niesie ocenę, nie tylko kierunek: przy brakach wzrost jest zły. */
.st-compare[b-0gp8v0udhm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .6rem;
    font-size: .85rem;
}

.st-compare-lead[b-0gp8v0udhm] {
    color: var(--text-muted, #6c757d);
}

.st-delta[b-0gp8v0udhm] {
    padding: .12rem .5rem;
    border-radius: 999px;
    background: var(--surface-2, #f1f3f5);
    color: var(--text-secondary, #555);
    font-variant-numeric: tabular-nums;
}

.st-delta.is-good[b-0gp8v0udhm] {
    background: rgba(0, 146, 68, .12);
    color: #007a39;
}

.st-delta.is-bad[b-0gp8v0udhm] {
    background: rgba(200, 60, 40, .12);
    color: #b3382a;
}

/* ── Ile trwa jedno zamówienie ── */
.st-times[b-0gp8v0udhm] {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.st-time[b-0gp8v0udhm] {
    flex: 1 1 110px;
    padding: .6rem .7rem;
    border: 1px solid var(--border, #dee2e6);
    border-radius: 10px;
    background: var(--surface-2, #f8f9fa);
    text-align: center;
}

.st-time-num[b-0gp8v0udhm] {
    display: block;
    font-size: 1.25rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.st-time-cap[b-0gp8v0udhm] {
    font-size: .78rem;
    color: var(--text-muted, #6c757d);
}

/* ── Mapa godzinowa i kalendarz wyników ───────────────────────────────────────
   Jedna skala koloru na oba zestawienia: atrament (--st-ink) mieszany z tłem
   (--st-ink-base) w proporcji podanej ze strony (--st-fill). Tło bierze się
   z tokenów motywu, więc ta sama skala działa w jasnym i w ciemnym — bez
   przezroczystości położonej na białym. */
.st-heat-box[b-0gp8v0udhm],
.st-cal-box[b-0gp8v0udhm] {
    --st-ink: var(--global-palette1, #009244);
    --st-ink-base: var(--surface-2, #f8fafc);
}

[data-theme="dark"] .st-heat-box[b-0gp8v0udhm],
[data-theme="dark"] .st-cal-box[b-0gp8v0udhm] {
    --st-ink-base: var(--surface-3, #262c35);
}

/* Braki i tempo mają skalę odwrotną: więcej = gorzej, więc czerwień, nie zieleń. */
.st-cal-box.is-bad[b-0gp8v0udhm] {
    --st-ink: #c0392b;
}

.st-heat-lead[b-0gp8v0udhm] {
    margin-bottom: .6rem;
    font-size: .9rem;
}

/* Dwadzieścia cztery kolumny nie mieszczą się na telefonie — przewija się siatka,
   nie strona. */
.st-heat-scroll[b-0gp8v0udhm] {
    overflow-x: auto;
    padding-bottom: .25rem;
}

.st-heat[b-0gp8v0udhm] {
    display: grid;
    grid-template-columns: 2.6rem repeat(24, minmax(1.05rem, 1fr));
    gap: 2px;
    min-width: 30rem;
}

.st-heat-corner[b-0gp8v0udhm] {
    display: block;
}

.st-heat-hour[b-0gp8v0udhm] {
    font-size: .62rem;
    color: var(--text-muted, #64748b);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.st-heat-day[b-0gp8v0udhm] {
    display: flex;
    align-items: center;
    font-size: .72rem;
    color: var(--text-muted, #64748b);
}

.st-heat-cell[b-0gp8v0udhm] {
    display: block;
    height: 1.3rem;
    border-radius: 3px;
    background: color-mix(in srgb, var(--st-ink) var(--st-fill, 0%), var(--st-ink-base));
}

/* Pusta godzina ma być dziurą w siatce, a nie jasnym odcieniem — zero i jeden
   nie mogą wyglądać tak samo. */
.st-heat-cell.is-empty[b-0gp8v0udhm] {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--border, #e2e8f0);
}

.st-heat-legend[b-0gp8v0udhm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-top: .6rem;
    font-size: .75rem;
    color: var(--text-muted, #64748b);
}

.st-heat-scale[b-0gp8v0udhm] {
    display: inline-block;
    width: 7rem;
    height: .7rem;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--st-ink-base), var(--st-ink));
}

.st-heat-note[b-0gp8v0udhm] {
    flex: 1 1 18rem;
}

.st-cal-top[b-0gp8v0udhm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-bottom: .8rem;
}

.st-cal-switch[b-0gp8v0udhm] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.st-cal[b-0gp8v0udhm] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.st-cal-head[b-0gp8v0udhm] {
    font-size: .72rem;
    color: var(--text-muted, #64748b);
    text-align: center;
    padding-bottom: .1rem;
}

/* Kafelek nigdy nie dochodzi do pełni koloru (przycina to Nasycenie w kodzie strony):
   stoi na nim liczba, a ta ma zostać czytelna w obu motywach. */
.st-cal-cell[b-0gp8v0udhm] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .2rem;
    min-height: 3.3rem;
    padding: .3rem .4rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--st-ink) var(--st-fill, 0%), var(--st-ink-base));
}

/* Dzień, w którym nikt nie pracował: sama obwódka i kreska. Dzień z wynikiem zero
   jest wypełniony i ma zero — to dwie różne rzeczy. */
.st-cal-cell.is-idle[b-0gp8v0udhm] {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--border, #e2e8f0);
    color: var(--text-faint, #94a3b8);
}

/* Dzień spoza wybranego zakresu — miejsce w siatce, żeby tygodnie się zgadzały. */
.st-cal-cell.is-out[b-0gp8v0udhm] {
    background: none;
    box-shadow: none;
}

.st-cal-date[b-0gp8v0udhm] {
    font-size: .68rem;
    opacity: .85;
    font-variant-numeric: tabular-nums;
}

.st-cal-val[b-0gp8v0udhm] {
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.st-cal-note[b-0gp8v0udhm] {
    margin-top: .55rem;
    font-size: .75rem;
    color: var(--text-muted, #64748b);
}

@media (max-width: 480px) {
    .st-cal-cell[b-0gp8v0udhm] {
        min-height: 2.9rem;
        padding: .25rem .25rem;
    }

    .st-cal-date[b-0gp8v0udhm] {
        font-size: .58rem;
    }

    .st-cal-val[b-0gp8v0udhm] {
        font-size: .9rem;
    }
}

/* Uwaga przy kilogramach: paczki bez wagi w kartotece. Ma być widoczna, ale nie krzykliwa —
   to nie jest błąd, tylko granica tego, co wiemy. */
.st-cap-uwaga[b-0gp8v0udhm] {
    color: var(--bs-warning-text-emphasis, #b26a00);
    font-size: .78em;
}
/* /Components/Pages/Orders/OrdersWizard.razor.rz.scp.css */
/* Nawigacja tego kreatora nie dziedziczy scoped CSS z Ustawień. */
.settings-layout[b-mly0cvqcx0] { display: flex; gap: 1.5rem; align-items: flex-start; }
.settings-toc[b-mly0cvqcx0] { flex: 0 0 190px; position: sticky; top: 80px; align-self: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: .75rem; max-height: calc(100vh - 100px); overflow-y: auto; }
.settings-toc-nav[b-mly0cvqcx0] { display: flex; flex-direction: column; gap: .25rem; }
.settings-toc-nav a[b-mly0cvqcx0] { display: block; padding: .5rem .75rem; border-radius: 8px; color: var(--text-secondary); text-decoration: none; font-weight: 500; }
.settings-toc-nav a:hover[b-mly0cvqcx0] { color: var(--global-palette1); background: var(--surface-3); }
.settings-main[b-mly0cvqcx0] { flex: 1 1 auto; min-width: 0; }
@media (max-width: 991.98px) {
    .settings-layout[b-mly0cvqcx0] { flex-direction: column; }
    .settings-toc[b-mly0cvqcx0] { position: static; max-height: none; flex: 1 1 auto; width: 100%; }
    .settings-toc-nav[b-mly0cvqcx0] { flex-direction: row; flex-wrap: wrap; }
    .settings-main[b-mly0cvqcx0] { width: 100%; align-self: stretch; }
}
/* /Components/Pages/Orders/OrderZones.razor.rz.scp.css */
/* Hale i strefy — lista miejsc bywa długa, więc dostaje własne okno z przewijaniem. */

.oz-dot[b-3ecn92o5dm] {
    display: inline-block;
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    margin-right: .45rem;
    vertical-align: middle;
    border: 1px solid rgba(0, 0, 0, .15);
}

.oz-locations[b-3ecn92o5dm] {
    max-height: 26rem;
    overflow-y: auto;
    border: 1px solid var(--border, rgba(0, 0, 0, .1));
    border-radius: 10px;
}


/* ── „Skąd system wie, na której hali…" — rozwijane wyjaśnienie ──────────────
   Zwinięte domyślnie: wdrożeniowiec czyta je raz, a potem tylko przeszkadza. */
.oz-how-toggle[b-3ecn92o5dm] {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    background: none;
    border: 0;
    padding: 0;
    font-weight: 600;
    text-align: left;
    color: inherit;
}

.oz-how-toggle i[b-3ecn92o5dm] {
    color: var(--global-palette1, #009244);
}

.oz-how-body[b-3ecn92o5dm] {
    margin-top: .7rem;
    font-size: .9rem;
    color: var(--text-secondary, #555);
}

.oz-how-body ul[b-3ecn92o5dm] {
    margin-bottom: .7rem;
    padding-left: 1.2rem;
}

.oz-how-body code[b-3ecn92o5dm] {
    background: var(--surface-2, #f1f3f5);
    padding: .05rem .3rem;
    border-radius: 5px;
}
/* /Components/Pages/Orders/ShelfChecks.razor.rz.scp.css */
/* Półki do sprawdzenia — lista dla kierownika.

   Kolory wyłącznie ze zmiennych motywu, żeby tryb jasny i ciemny wyszły z jednego zestawu reguł.
   Wszystko, co pochodzi z app.css (.data-card, .act-icon, .badge, .table), zostaje nietknięte. */

.sc-badge[b-feor8igfdg] {
    align-self: center;
    font-size: .95rem;
    padding: .5rem .8rem;
}

/* Kod miejsca to najważniejsza rzecz w wierszu — po nim kierownik idzie na halę. */
.sc-loc[b-feor8igfdg] {
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
}

.sc-product[b-feor8igfdg] {
    font-weight: 600;
    line-height: 1.25;
}

.sc-sub[b-feor8igfdg] {
    font-size: .8rem;
    color: var(--text-muted, #64748b);
    line-height: 1.35;
}

.sc-counted[b-feor8igfdg] {
    font-weight: 700;
    color: var(--global-palette1, #009244);
    font-variant-numeric: tabular-nums;
}

.sc-nowrap[b-feor8igfdg] {
    white-space: nowrap;
}

/* Rozliczone zostaje na liście (kierownik ma widzieć, że ktoś się tym zajął), ale przygasa —
   inaczej po tygodniu nie widać, co jeszcze czeka. */
.sc-settled[b-feor8igfdg] {
    opacity: .62;
}

.sc-settled .sc-loc[b-feor8igfdg] {
    font-weight: 600;
}

/* Karty na telefonie: ta sama treść, inny układ. Kod miejsca i wynik liczenia w jednym rzędzie,
   reszta pod spodem — na 390 px szerokości nic innego się nie mieści bez zawijania w połowie słowa. */
.data-card .sc-loc[b-feor8igfdg] {
    font-size: 1.1rem;
}
/* /Components/Pages/Orders/StockComparison.razor.rz.scp.css */
/* Porównanie z Subiektem. Kolor niesie znaczenie: zielony = zgadza się,
   neutralny = różni się, ale wiemy dlaczego, bursztyn = pytanie bez odpowiedzi. */

.por-liczby[b-4csluq1ft9] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.por-kafel[b-4csluq1ft9] {
    flex: 1 1 10rem;
    min-width: 9rem;
    padding: 0.9rem 1rem;
    border-radius: 0.65rem;
    background: var(--global-palette7, rgba(0, 0, 0, .03));
    border: 1px solid var(--global-palette6, rgba(0, 0, 0, .08));
}

.por-kafel-liczba[b-4csluq1ft9] {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.por-kafel-opis[b-4csluq1ft9] {
    font-size: .82rem;
    opacity: .8;
    margin-top: .15rem;
}

.por-kafel.is-ok .por-kafel-liczba[b-4csluq1ft9] { color: var(--global-palette1); }
.por-kafel.is-znane .por-kafel-liczba[b-4csluq1ft9] { opacity: .75; }
.por-kafel.is-pytanie[b-4csluq1ft9] {
    border-color: rgba(255, 193, 7, .55);
    background: rgba(255, 193, 7, .08);
}
.por-kafel.is-pytanie .por-kafel-liczba[b-4csluq1ft9] { color: var(--bs-warning-text-emphasis, #b26a00); }

/* Wiersz z częścią, której nie umiemy nazwać — ma się wyróżniać bez krzyku. */
.por-pytanie[b-4csluq1ft9] { background: rgba(255, 193, 7, .07); }

@media (max-width: 768px) {
    .por-kafel[b-4csluq1ft9] { flex: 1 1 100%; }
}
/* /Components/Pages/Orders/StockOpeningBalance.razor.rz.scp.css */
/* Bilans otwarcia — liczby na górze, tabela pod nimi.
   Kafle są celowo duże: to jest ekran, na którym człowiek podejmuje jedną decyzję,
   a nie przegląda dane. */

.bil-liczby[b-a5nb7rbxd4] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.bil-kafel[b-a5nb7rbxd4] {
    flex: 1 1 10rem;
    min-width: 9rem;
    padding: 0.9rem 1rem;
    border-radius: 0.65rem;
    background: var(--global-palette7, rgba(0, 0, 0, .03));
    border: 1px solid var(--global-palette6, rgba(0, 0, 0, .08));
}

.bil-kafel-liczba[b-a5nb7rbxd4] {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--global-palette1);
}

.bil-kafel-opis[b-a5nb7rbxd4] {
    font-size: .82rem;
    opacity: .8;
    margin-top: .15rem;
}

/* Pozycja, której rachunek nie wychodzi — ma być widoczna, a nie krzykliwa. */
.bil-kafel.is-uwaga .bil-kafel-liczba[b-a5nb7rbxd4] {
    color: var(--bs-warning-text-emphasis, #b26a00);
}

.bil-uwaga[b-a5nb7rbxd4] {
    background: rgba(255, 193, 7, .08);
}

@media (max-width: 768px) {
    .bil-kafel[b-a5nb7rbxd4] {
        flex: 1 1 100%;
    }
}
/* /Components/Pages/Pallets/PalletOrders.razor.rz.scp.css */
/* Przycisk odwołania w stanie „kliknij ponownie, żeby naprawdę odwołać".

   Odwołania nie da się cofnąć z ekranu — zlecenie znika z listy całkowicie, bo odwołane
   są odfiltrowane także z „Zamkniętych". Uzbrojenie musi więc być widać, a nie tylko
   wyczuć z dymka: sam zmieniony glif to za słaby sygnał przy ikonie 32 px. */
.act-icon.po-uzbrojony[b-dho8e17n5g] {
    outline: 2px solid #b3261e;
    outline-offset: 2px;
    font-weight: 700;
}
/* /Components/Pages/Pallets/PalletWork.razor.rz.scp.css */
/* Panel wózkowego. Projektowany pod kolektor 390x844 trzymany w jednej ręce:
   duże cele dotykowe, jedna kolumna, zero tabel. Na komputerze też działa,
   ale to nie jest ekran do siedzenia przy biurku. */

.pw-root[b-mb9s0m9p09] {
    /* Miejsce na przycisk „Zrobione", który stoi przyklejony do dołu ekranu. */
    padding-bottom: 5.5rem;
}

/* ── lista zleceń ─────────────────────────────────────────────────────────── */

.pw-list[b-mb9s0m9p09] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.pw-card[b-mb9s0m9p09] {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--global-palette4);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.pw-card:active[b-mb9s0m9p09] {
    transform: scale(0.985);
}

.pw-card.mine[b-mb9s0m9p09] {
    border-left-color: var(--global-palette1);
    background: color-mix(in srgb, var(--global-palette1) 6%, var(--surface));
}

.pw-card-top[b-mb9s0m9p09] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.pw-card-label[b-mb9s0m9p09] {
    font-weight: 700;
    font-size: 1.05rem;
}

.pw-card-pallets[b-mb9s0m9p09] {
    font-weight: 600;
    color: var(--global-palette1);
    white-space: nowrap;
}

.pw-card-customer[b-mb9s0m9p09] {
    color: var(--text-muted);
    font-size: 0.92rem;
    margin-top: 0.15rem;
    /* Nazwy odbiorców bywają bardzo długie — jedna linia, reszta wielokropkiem. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pw-card-meta[b-mb9s0m9p09] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.pw-badge-mine[b-mb9s0m9p09] {
    background: var(--global-palette1);
    color: #fff;
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    font-size: 0.78rem;
    font-weight: 600;
}

/* ── nagłówek zlecenia ────────────────────────────────────────────────────── */

.pw-head[b-mb9s0m9p09] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0 0.75rem;
}

.pw-head-title[b-mb9s0m9p09] {
    flex: 1;
    min-width: 0;
}

.pw-head-label[b-mb9s0m9p09] {
    font-weight: 700;
    font-size: 1.1rem;
}

.pw-head-customer[b-mb9s0m9p09] {
    color: var(--text-muted);
    font-size: 0.88rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pw-head-pallets[b-mb9s0m9p09] {
    text-align: center;
    line-height: 1;
    flex-shrink: 0;
}

.pw-head-pallets-n[b-mb9s0m9p09] {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--global-palette1);
}

.pw-head-pallets-t[b-mb9s0m9p09] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

/* ── postęp ───────────────────────────────────────────────────────────────── */

.pw-progress-label[b-mb9s0m9p09] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.pw-progress[b-mb9s0m9p09] {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: var(--border);
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.pw-progress-bar[b-mb9s0m9p09] {
    height: 100%;
    background: linear-gradient(90deg, var(--global-palette1), var(--global-palette2));
    transition: width 0.25s ease;
}


/* ── pozycje ──────────────────────────────────────────────────────────────── */

.pw-lines[b-mb9s0m9p09] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pw-line[b-mb9s0m9p09] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.6rem 0.7rem;
}

.pw-line.done[b-mb9s0m9p09] {
    background: color-mix(in srgb, var(--global-palette1) 8%, var(--surface));
    border-color: color-mix(in srgb, var(--global-palette1) 35%, var(--border));
}

.pw-line.done .pw-line-name[b-mb9s0m9p09] {
    text-decoration: line-through;
    opacity: 0.65;
}

.pw-line.service[b-mb9s0m9p09] {
    opacity: 0.7;
}

.pw-check[b-mb9s0m9p09] {
    background: none;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    /* Cel dotykowy nie mniejszy niż 44 px — kciuk w rękawicy nie trafia w ikonkę. */
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    flex-shrink: 0;
}

.pw-line.done .pw-check[b-mb9s0m9p09] {
    color: var(--global-palette1);
}

.pw-line-body[b-mb9s0m9p09] {
    flex: 1;
    min-width: 0;
}

.pw-line-name[b-mb9s0m9p09] {
    font-weight: 600;
    line-height: 1.25;
    word-break: break-word;
}

.pw-line-qty[b-mb9s0m9p09] {
    margin-top: 0.15rem;
    font-size: 0.95rem;
}

.pw-line-qty strong[b-mb9s0m9p09] {
    font-size: 1.05rem;
    color: var(--global-palette1);
}

.pw-line-sku[b-mb9s0m9p09] {
    margin-left: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.pw-line-loc[b-mb9s0m9p09] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.35rem;
}

.pw-loc[b-mb9s0m9p09] {
    font-size: 0.8rem;
    border-radius: 6px;
    padding: 0.1rem 0.45rem;
    white-space: nowrap;
}

.pw-loc.primary[b-mb9s0m9p09] {
    background: var(--global-palette1);
    color: #fff;
    font-weight: 600;
}

.pw-loc.backup[b-mb9s0m9p09] {
    background: var(--border);
    color: var(--text);
}

.pw-loc-none[b-mb9s0m9p09] {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--text-muted);
}

.pw-line-short[b-mb9s0m9p09] {
    margin-top: 0.35rem;
    font-size: 0.82rem;
    color: #b02a37;
}

.pw-short[b-mb9s0m9p09] {
    background: none;
    border: none;
    color: #b02a37;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

/* ── stopka ───────────────────────────────────────────────────────────────── */

.pw-footer[b-mb9s0m9p09] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Zapas z prawej na plywajace guziki (olowek + skan) — bez niego przycisk
       "Zrobione" konczy sie POD nimi i czesc celu dotykowego jest nieklikalna. */
    padding: 0.75rem 5rem calc(0.75rem + env(safe-area-inset-bottom)) 1rem;
    background: var(--surface);
    border-top: 1px solid var(--border);
    z-index: 50;
}

.pw-stepper[b-mb9s0m9p09] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pw-stepper .form-control[b-mb9s0m9p09] {
    font-size: 1.5rem;
    font-weight: 700;
    height: 56px;
}

.pw-stepper .btn[b-mb9s0m9p09] {
    min-width: 56px;
    height: 56px;
    font-size: 1.2rem;
}

/* Ciemny motyw NIE wymaga tu ani jednej reguly: wszystkie kolory ida przez tokeny,
   ktore app.css przedefiniowuje w bloku [data-theme="dark"]. Kazda wlasna regula
   dark byla by trzecim miejscem, ktore trzeba pamietac przy zmianie palety. */
/* /Components/Pages/Setup/SetupWizard.razor.rz.scp.css */
/* Kreator pierwszego uruchomienia (/setup). Kolory z tokenow app.css -> dziala w light i dark. */

.setup-wrap[b-fhuypt1pqy] {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 3rem 1rem;
    background: var(--app-bg);
}

.setup-card[b-fhuypt1pqy] {
    width: 100%;
    max-width: 720px;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--border-radius, 12px);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.setup-brand[b-fhuypt1pqy] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(135deg, var(--global-palette4) 0%, var(--global-palette5) 100%);
    color: #fff;
}

.setup-logo[b-fhuypt1pqy] {
    height: 44px;
    width: auto;
    filter: brightness(0) invert(1);
    flex: 0 0 auto;
}

.setup-title[b-fhuypt1pqy] {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.2;
}

.setup-sub[b-fhuypt1pqy] {
    font-size: .85rem;
    opacity: .85;
    margin-top: .15rem;
}

.setup-steps[b-fhuypt1pqy] {
    list-style: none;
    display: flex;
    gap: .25rem;
    margin: 0;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    flex-wrap: wrap;
}

.setup-steps li[b-fhuypt1pqy] {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    color: var(--text-muted);
    padding: .2rem .55rem;
    border-radius: 999px;
}

.setup-steps li span[b-fhuypt1pqy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--text-secondary);
    font-size: .75rem;
    font-weight: 700;
}

.setup-steps li.active[b-fhuypt1pqy] {
    color: var(--text-heading);
    font-weight: 600;
}

.setup-steps li.active span[b-fhuypt1pqy] {
    background: var(--global-palette1);
    color: #fff;
}

.setup-steps li.done span[b-fhuypt1pqy] {
    background: var(--global-palette2);
    color: var(--global-palette3);
}

.setup-body[b-fhuypt1pqy] {
    padding: 1.5rem 1.75rem 1.75rem;
    color: var(--text);
}

.setup-help[b-fhuypt1pqy] {
    color: var(--text-secondary);
    font-size: .9rem;
    margin-bottom: 1.25rem;
}

.setup-toggle[b-fhuypt1pqy] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    user-select: none;
}

.setup-actions[b-fhuypt1pqy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    margin-top: 1.75rem;
}

.setup-summary[b-fhuypt1pqy] {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.setup-summary li[b-fhuypt1pqy] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem .9rem;
    border-bottom: 1px solid var(--border);
}

.setup-summary li:last-child[b-fhuypt1pqy] {
    border-bottom: none;
}

.setup-summary li span[b-fhuypt1pqy] {
    color: var(--text-muted);
}

.setup-summary li strong[b-fhuypt1pqy] {
    color: var(--text-heading);
    text-align: right;
    word-break: break-all;
}
/* /Components/Pages/SubiektProducts.razor.rz.scp.css */
/* SubiektProducts Component Styles */

.products-container[b-i8oq8r5q9d] {
    background: var(--global-palette-light);
    min-height: 100vh;
    padding: 2rem 0;
}

.products-header[b-i8oq8r5q9d] {
    background: var(--surface);
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    margin-bottom: 2rem;
}

    .products-header h3[b-i8oq8r5q9d] {
        margin: 0;
        font-weight: 700;
        background-image: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.filter-card[b-i8oq8r5q9d] {
    background: var(--surface);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    margin-bottom: 2rem;
    overflow: hidden;
}

.filter-card-body[b-i8oq8r5q9d] {
    padding: 2rem;
}

.products-table-card[b-i8oq8r5q9d] {
    background: var(--surface);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    margin-bottom: 2rem;
}

.products-table[b-i8oq8r5q9d] {
    margin-bottom: 0;
}

    .products-table thead[b-i8oq8r5q9d] {
        background-image: var(--gradient-header);
        color: white;
    }

        .products-table thead th[b-i8oq8r5q9d] {
            border: none;
            padding: 1rem;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.85rem;
            letter-spacing: 0.5px;
            white-space: nowrap;
        }

    .products-table tbody tr[b-i8oq8r5q9d] {
        transition: all 0.2s ease;
        border-bottom: 1px solid var(--border);
    }

        .products-table tbody tr td span[b-i8oq8r5q9d] {
            margin: 1px;
        }

        .products-table tbody tr:hover[b-i8oq8r5q9d] {
            transform: scale(1.005);
        }

            .products-table tbody tr:hover td[b-i8oq8r5q9d] {
                background-color: var(--global-palette-light) !important;
            }

    .products-table tbody td[b-i8oq8r5q9d] {
        padding: 1rem;
        vertical-align: middle;
        transition: background-color 0.2s ease;
    }

.product-image-cell[b-i8oq8r5q9d] {
    padding: 0.5rem !important;
}

.product-thumbnail-wrapper[b-i8oq8r5q9d] {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    border-radius: 8px;
    overflow: hidden;
}

.product-thumbnail[b-i8oq8r5q9d] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.product-info-box[b-i8oq8r5q9d] {
    background: var(--global-palette-light);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.scanning-indicator[b-i8oq8r5q9d] {
    font-size: 3rem;
    background-image: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
    animation: pulse-b-i8oq8r5q9d 1.5s ease-in-out infinite;
}

@keyframes pulse-b-i8oq8r5q9d {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Responsive table for mobile */
@media (max-width: 768px) {
    .products-table-card[b-i8oq8r5q9d] {
        background: transparent;
        box-shadow: none;
        padding: 0;
    }

    .products-table[b-i8oq8r5q9d] {
        display: block;
    }

        .products-table thead[b-i8oq8r5q9d] {
            display: none;
        }

        .products-table tbody[b-i8oq8r5q9d] {
            display: block;
        }

            .products-table tbody tr[b-i8oq8r5q9d] {
                display: block;
                background: var(--surface);
                margin-bottom: 0.75rem;
                border-radius: 8px;
                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                padding: 0.75rem;
                border: none;
            }

                .products-table tbody tr:hover[b-i8oq8r5q9d] {
                    transform: none;
                }

            .products-table tbody td[b-i8oq8r5q9d] {
                display: block;
                padding: 0.25rem 0;
                border: none;
                text-align: left;
            }

                .products-table tbody td[b-i8oq8r5q9d]::before {
                    display: none;
                }

    /* Image at the top, smaller */
    .product-image-cell[b-i8oq8r5q9d] {
        text-align: center !important;
        padding: 0 !important;
        margin-bottom: 0.5rem;
    }

    .product-thumbnail-wrapper[b-i8oq8r5q9d] {
        width: 60px;
        height: 60px;
        margin: 0 auto;
    }

    /* Compact layout */
    .products-table tbody tr[b-i8oq8r5q9d] {
        display: grid;
        grid-template-columns: 60px 1fr auto;
        grid-template-rows: auto auto auto;
        gap: 0.5rem;
        align-items: start;
    }

    /* Image in first column, spanning all rows */
    .product-image-cell[b-i8oq8r5q9d] {
        grid-column: 1;
        grid-row: 1 / 4;
    }

    /* Checkbox - before image */
    .products-table tbody td:nth-child(1)[b-i8oq8r5q9d] {
        grid-column: 1;
        grid-row: 1;
        padding: 0 !important;
        align-self: start;
    }

    /* Image in first column */
    .product-image-cell[b-i8oq8r5q9d] {
        grid-column: 1;
        grid-row: 2 / 5;
    }

    /* Name - second column, first row */
    .products-table tbody td:nth-child(3)[b-i8oq8r5q9d] {
        grid-column: 2;
        grid-row: 1;
        font-weight: 600;
        font-size: 0.9rem;
        padding: 0 !important;
    }

    /* Symbol/SKU - second column, second row */
    .products-table tbody td:nth-child(4)[b-i8oq8r5q9d] {
        grid-column: 2;
        grid-row: 2;
        padding: 0 !important;
    }

        .products-table tbody td:nth-child(4) .badge[b-i8oq8r5q9d] {
            font-size: 0.7rem;
            padding: 0.15rem 0.4rem;
        }

    /* EAN - second column, third row */
    .products-table tbody td:nth-child(5)[b-i8oq8r5q9d] {
        grid-column: 2;
        grid-row: 3;
        font-size: 0.75rem;
        color: var(--text-muted);
        padding: 0 !important;
    }

    /* Stock + Unit - third column, first row */
    .products-table tbody td:nth-child(6)[b-i8oq8r5q9d],
    .products-table tbody td:nth-child(7)[b-i8oq8r5q9d] {
        grid-column: 3;
        grid-row: 1;
        text-align: right;
        font-size: 0.85rem;
        padding: 0 !important;
    }

    .products-table tbody td:nth-child(7)[b-i8oq8r5q9d] {
        display: none;
    }

    .products-table tbody td:nth-child(6)[b-i8oq8r5q9d]::after {
        content: attr(data-unit);
        margin-left: 0.25rem;
        font-size: 0.75rem;
        color: var(--text-muted);
    }

    /* Location - third column, second row */
    .products-table tbody td:nth-child(8)[b-i8oq8r5q9d] {
        grid-column: 3;
        grid-row: 2;
        text-align: right;
        padding: 0 !important;
    }

        .products-table tbody td:nth-child(8) .badge[b-i8oq8r5q9d] {
            font-size: 0.7rem;
            padding: 0.15rem 0.4rem;
        }

    /* Size - third column, third row */
    .products-table tbody td:nth-child(9)[b-i8oq8r5q9d] {
        grid-column: 3;
        grid-row: 3;
        text-align: right;
        padding: 0 !important;
    }

        .products-table tbody td:nth-child(9) .badge[b-i8oq8r5q9d] {
            font-size: 0.7rem;
            padding: 0.15rem 0.4rem;
        }

    /* Actions button - below everything */
    .products-table tbody td:nth-child(10)[b-i8oq8r5q9d] {
        grid-column: 1 / 4;
        grid-row: 5;
        text-align: center;
        padding-top: 0.5rem !important;
        border-top: 1px solid var(--border);
        margin-top: 0.5rem;
    }

        .products-table tbody td:nth-child(10) .btn[b-i8oq8r5q9d] {
            width: 100%;
            font-size: 0.85rem;
            padding: 0.4rem;
        }
}
/* /Components/Pages/Tasks/RestockTasks.razor.rz.scp.css */
/* Sortowalne nagłówki tabeli zadań */
.rt-sort[b-urt6z64diw] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color 0.12s ease;
}
.rt-sort:hover[b-urt6z64diw] {
    color: var(--global-palette1);
}

/* ===== Task Cards ===== */
.task-card[b-urt6z64diw] {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
    overflow: hidden;
    background: var(--surface);
}

.task-card:hover[b-urt6z64diw] {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    transform: translateY(-1px);
}

.priority-strip[b-urt6z64diw] {
    width: 5px;
    min-height: 100%;
    flex-shrink: 0;
    border-radius: 4px 0 0 4px;
}

.priority-normal[b-urt6z64diw]   { background: #0d6efd; }
.priority-high[b-urt6z64diw]     { background: #ffc107; }
.priority-critical[b-urt6z64diw] { background: #dc3545; }

.task-card-body[b-urt6z64diw] {
    padding: 1rem 1.25rem;
    flex: 1;
    min-width: 0;
}

.task-title[b-urt6z64diw] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.task-meta[b-urt6z64diw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.task-meta-item[b-urt6z64diw] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.task-meta-item i[b-urt6z64diw] {
    font-size: 0.85rem;
    opacity: 0.7;
}

.task-actions[b-urt6z64diw] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem 1rem 1rem 0;
    justify-content: center;
    flex-shrink: 0;
}

.task-actions[b-urt6z64diw]  .btn {
    font-size: 0.82rem;
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    white-space: nowrap;
}

/* ===== Restock Info ===== */
.restock-info[b-urt6z64diw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.restock-info-item[b-urt6z64diw] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.restock-info-item i[b-urt6z64diw] {
    font-size: 0.9rem;
}

/* ===== Page Header ===== */
.page-header[b-urt6z64diw] {
    background: linear-gradient(135deg, #009244 0%, #c1d11c 100%);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.page-header h3[b-urt6z64diw] {
    margin: 0;
    font-weight: 700;
    font-size: 1.35rem;
}

/* ===== Tab Navigation ===== */
.task-tabs[b-urt6z64diw] {
    display: flex;
    gap: 0.35rem;
    background: var(--surface-2);
    border-radius: 12px;
    padding: 0.3rem;
    margin-bottom: 1.25rem;
}

.task-tab[b-urt6z64diw] {
    flex: 1;
    text-align: center;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.92rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.task-tab:hover[b-urt6z64diw] {
    background: rgba(0, 146, 68, 0.08);
    color: #009244;
}

.task-tab.active[b-urt6z64diw] {
    background: var(--surface);
    color: #009244;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    font-weight: 600;
}

/* ===== Filter Card ===== */
.filter-card[b-urt6z64diw] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.filter-card .form-label[b-urt6z64diw] {
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

.filter-card .form-control[b-urt6z64diw],
.filter-card .form-select[b-urt6z64diw] {
    border-radius: 10px;
    border: 1px solid var(--border);
    font-size: 0.9rem;
    padding: 0.5rem 0.85rem;
}

.filter-card .form-control:focus[b-urt6z64diw],
.filter-card .form-select:focus[b-urt6z64diw] {
    border-color: #009244;
    box-shadow: 0 0 0 3px rgba(0, 146, 68, 0.12);
}

/* ===== Status Toggle Chips ===== */
.status-toggles[b-urt6z64diw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.status-toggle[b-urt6z64diw] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.status-toggle:hover[b-urt6z64diw] {
    border-color: #009244;
    background: rgba(0, 146, 68, 0.04);
}

.status-toggle.active[b-urt6z64diw] {
    border-color: #009244;
    background: rgba(0, 146, 68, 0.1);
    color: #009244;
}

.status-toggle input[type="checkbox"][b-urt6z64diw] {
    display: none;
}

.status-toggle .toggle-dot[b-urt6z64diw] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
    transition: background 0.15s;
}

.status-toggle.active .toggle-dot[b-urt6z64diw] {
    background: #009244;
}

/* ===== Pill buttons ===== */
.btn-pill[b-urt6z64diw] {
    border-radius: 20px;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
}

/* ===== Polished modals ===== */
.modal-modern[b-urt6z64diw]  .modal-content {
    border: none;
    border-radius: 16px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.18);
    overflow: hidden;
}

.modal-modern[b-urt6z64diw]  .modal-header {
    border-bottom: 1px solid var(--border);
    padding: 1.1rem 1.5rem;
}

.modal-modern[b-urt6z64diw]  .modal-footer {
    border-top: 1px solid var(--border);
    padding: 1rem 1.5rem;
}

/* ===== Location Deduction Modal ===== */
.deduction-location-item[b-urt6z64diw] {
    border-radius: 10px !important;
    margin-bottom: 0.35rem;
    border: 1.5px solid var(--border);
    transition: all 0.15s ease;
    padding: 0.75rem 1rem;
}

.deduction-location-item:hover[b-urt6z64diw] {
    border-color: #009244;
    background: rgba(0, 146, 68, 0.04);
}

.deduction-location-item:active[b-urt6z64diw] {
    background: rgba(0, 146, 68, 0.1);
    transform: scale(0.99);
}

.deduction-detail-card[b-urt6z64diw] {
    background: var(--surface-2);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
}

.deduction-detail-row[b-urt6z64diw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
}

.deduction-detail-row + .deduction-detail-row[b-urt6z64diw] {
    border-top: 1px solid var(--border);
}

.deduction-detail-label[b-urt6z64diw] {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.deduction-detail-value[b-urt6z64diw] {
    font-size: 0.95rem;
    color: var(--text);
}
/* /Components/Pages/Tools/BulkEanUpload.razor.rz.scp.css */
/* BulkEanUpload Component Styles */

.products-container[b-lzc9asry9t] {
    background: var(--global-palette-light);
    min-height: 100vh;
    padding: 2rem 0;
}

.filter-card[b-lzc9asry9t] {
    background: var(--surface);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.filter-card-body[b-lzc9asry9t] {
    padding: 2rem;
}

.products-table-card[b-lzc9asry9t] {
    background: var(--surface);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    margin-bottom: 2rem;
}

.products-table[b-lzc9asry9t] {
    margin-bottom: 0;
}

    .products-table thead[b-lzc9asry9t] {
        background-image: var(--gradient-header);
        color: white;
    }

        .products-table thead th[b-lzc9asry9t] {
            border: none;
            padding: 1rem;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.85rem;
            letter-spacing: 0.5px;
            white-space: nowrap;
        }

    .products-table tbody tr[b-lzc9asry9t] {
        transition: all 0.2s ease;
        border-bottom: 1px solid var(--border);
    }

        .products-table tbody tr:hover[b-lzc9asry9t] {
            transform: scale(1.005);
        }

            .products-table tbody tr:hover td[b-lzc9asry9t] {
                background-color: var(--global-palette-light) !important;
            }

    .products-table tbody td[b-lzc9asry9t] {
        padding: 1rem;
        vertical-align: middle;
        transition: background-color 0.2s ease;
    }

/* Badges */
.badge-modern[b-lzc9asry9t] {
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.85rem;
    display: inline-block;
}

.badge-success[b-lzc9asry9t] {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

/* Form controls */
.form-control-modern[b-lzc9asry9t] {
    border-radius: 8px;
    border: 2px solid var(--border);
    padding: 0.65rem 1rem;
    transition: all 0.2s ease;
}

    .form-control-modern:focus[b-lzc9asry9t] {
        border-color: var(--global-palette1);
        box-shadow: 0 0 0 0.2rem rgba(0, 146, 68, 0.15);
    }

/* Buttons */
.btn-modern[b-lzc9asry9t] {
    border-radius: 8px;
    padding: 0.65rem 1.5rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

    .btn-modern:hover[b-lzc9asry9t] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
/* /Components/Pages/WarehouseMapping/WarehouseMappingScanner.razor.rz.scp.css */
/* Mapowanie magazynu — redesign mobile-first wg wzorca ProductEditModal (pem-*).
   Prefiks wm-; scoped do tego komponentu (izolacja). Kolory z palety AB (var(--global-palette*)). */

.wm-page[b-v8g8a5qtbx] {
    max-width: 480px;
    margin: 0 auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ===================== KARTA ===================== */
.wm-card[b-v8g8a5qtbx] {
    background: var(--surface, #fff);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    color: var(--text, #16202e);
    box-shadow: 0 10px 30px -18px rgba(2, 44, 50, .55);
}

/* ===================== NAGŁÓWEK ===================== */
.wm-head[b-v8g8a5qtbx] {
    background-image: var(--gradient-header);
    color: #fff;
    padding: 1rem;
}

    .wm-head.warn[b-v8g8a5qtbx] {
        background-image: linear-gradient(135deg, #b45309 0%, #d97706 100%);
    }

.wm-head-top[b-v8g8a5qtbx] {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
}

.wm-thumb[b-v8g8a5qtbx] {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    border-radius: 14px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aeb8c2;
    overflow: hidden;
}

    .wm-thumb img[b-v8g8a5qtbx] {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 0.15rem;
    }

    .wm-thumb i[b-v8g8a5qtbx] {
        font-size: 1.7rem;
    }

.wm-warn-ico[b-v8g8a5qtbx] {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 14px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    color: #fff;
}

.wm-id[b-v8g8a5qtbx] {
    flex: 1;
    min-width: 0;
}

.wm-name[b-v8g8a5qtbx] {
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.15;
    margin: 0.1rem 0 0.5rem;
    color: #fff;
    word-wrap: break-word;
}

.wm-sub[b-v8g8a5qtbx] {
    font-size: 0.9rem;
    opacity: .92;
    color: #fff;
    word-wrap: break-word;
}

.wm-hcodes[b-v8g8a5qtbx] {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.wm-hcode[b-v8g8a5qtbx] {
    font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", Consolas, monospace;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 7px;
    background: rgba(255,255,255,.16);
    color: #fff;
}

    .wm-hcode.sku[b-v8g8a5qtbx] {
        background: #fff;
        color: var(--global-palette1);
    }

.wm-close[b-v8g8a5qtbx] {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.12);
    border-radius: 12px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.05rem;
}

    .wm-close:active[b-v8g8a5qtbx] {
        transform: scale(0.94);
    }

    .wm-close:hover[b-v8g8a5qtbx] {
        background: rgba(255,255,255,.22);
    }

/* stan (jak pem-wh main) */
.wm-wh[b-v8g8a5qtbx] {
    margin-top: 0.8rem;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px;
    padding: 0.55rem 0.8rem;
}

    .wm-wh.main[b-v8g8a5qtbx] {
        background: rgba(255,255,255,.18);
        border-color: rgba(255,255,255,.3);
    }

.wm-wn[b-v8g8a5qtbx] {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .85;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 600;
}

.wm-wv[b-v8g8a5qtbx] {
    font-weight: 700;
    font-size: 1.25rem;
    margin-top: 0.15rem;
    font-variant-numeric: tabular-nums;
}

.wm-wu[b-v8g8a5qtbx] {
    font-size: 0.75rem;
    font-weight: 600;
    opacity: .85;
    margin-left: 0.15rem;
}

/* ===================== BODY ===================== */
.wm-body[b-v8g8a5qtbx] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* AKTUALNY REGAŁ — wyeksponowany */
.wm-loc[b-v8g8a5qtbx] {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0.85rem 1rem;
    text-align: center;
}

    .wm-loc.empty[b-v8g8a5qtbx] {
        border-style: dashed;
    }

.wm-loc-lab[b-v8g8a5qtbx] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 700;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin-bottom: 0.25rem;
}

    .wm-loc-lab i[b-v8g8a5qtbx] {
        color: var(--global-palette1);
        font-size: 0.95rem;
    }

.wm-loc-val[b-v8g8a5qtbx] {
    font-weight: 800;
    font-size: 1.85rem;
    line-height: 1.05;
    letter-spacing: .01em;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}

    .wm-loc-val.muted[b-v8g8a5qtbx] {
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--text-muted);
    }

/* CTA — sedno: teraz skanuj regał (wielki, kciukiem-dostępny) */
.wm-cta[b-v8g8a5qtbx] {
    position: relative;
    background-image: var(--gradient-header);
    color: #fff;
    border-radius: 16px;
    padding: 1.5rem 1rem;
    text-align: center;
    box-shadow: 0 12px 26px -12px rgba(2, 44, 50, .8);
    overflow: hidden;
}

.wm-cta-ico[b-v8g8a5qtbx] {
    font-size: 3.2rem;
    line-height: 1;
    animation: wm-pulse-b-v8g8a5qtbx 1.8s ease-in-out infinite;
}

.wm-cta-txt[b-v8g8a5qtbx] {
    font-weight: 800;
    font-size: 1.4rem;
    margin-top: 0.45rem;
    letter-spacing: .01em;
}

.wm-cta-sub[b-v8g8a5qtbx] {
    font-size: 0.85rem;
    opacity: .9;
    margin-top: 0.15rem;
}

@keyframes wm-pulse-b-v8g8a5qtbx {
    0%, 100% {
        transform: scale(1);
        opacity: .9;
    }

    50% {
        transform: scale(1.12);
        opacity: 1;
    }
}

/* ===================== STAN C: potwierdzenie ===================== */
.wm-change[b-v8g8a5qtbx] {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

.wm-change-cell[b-v8g8a5qtbx] {
    flex: 1;
    min-width: 0;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0.7rem 0.5rem;
    text-align: center;
}

.wm-change-lab[b-v8g8a5qtbx] {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.wm-change-val[b-v8g8a5qtbx] {
    font-weight: 800;
    font-size: 1.4rem;
    line-height: 1.05;
    word-break: break-word;
    font-variant-numeric: tabular-nums;
}

    .wm-change-val.old[b-v8g8a5qtbx] {
        color: var(--text-muted);
    }

    .wm-change-val.new[b-v8g8a5qtbx] {
        color: var(--global-palette1);
    }

.wm-change-arrow[b-v8g8a5qtbx] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    color: var(--text-muted);
    font-size: 1.3rem;
}

.wm-confirm-actions[b-v8g8a5qtbx] {
    display: flex;
    gap: 0.6rem;
}

.wm-cbtn[b-v8g8a5qtbx] {
    flex: 1;
    min-height: 58px;
    border: 0;
    border-radius: 14px;
    font: inherit;
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: filter .15s ease, transform .1s ease;
}

    .wm-cbtn i[b-v8g8a5qtbx] {
        font-size: 1.2rem;
    }

    .wm-cbtn:active[b-v8g8a5qtbx] {
        transform: scale(0.97);
    }

    .wm-cbtn.yes[b-v8g8a5qtbx] {
        background: var(--global-palette1);
        color: #fff;
        box-shadow: 0 8px 18px -8px rgba(0,146,68,.8);
    }

        .wm-cbtn.yes:hover[b-v8g8a5qtbx] {
            filter: brightness(1.05);
        }

    .wm-cbtn.no[b-v8g8a5qtbx] {
        background: var(--surface-2);
        color: var(--text);
        border: 1.5px solid var(--border);
    }

        .wm-cbtn.no:hover[b-v8g8a5qtbx] {
            filter: brightness(0.97);
        }

/* ===================== STAN A: welcome ===================== */
.wm-welcome[b-v8g8a5qtbx] {
    text-align: center;
    padding: 3rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.wm-welcome-ico[b-v8g8a5qtbx] {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background: var(--global-palette-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.4rem;
    color: var(--global-palette1);
    margin-bottom: 0.7rem;
}

.wm-welcome-title[b-v8g8a5qtbx] {
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--text);
}

.wm-welcome-text[b-v8g8a5qtbx] {
    font-size: 1rem;
    color: var(--text-muted);
    max-width: 22ch;
}

/* ===================== KOMUNIKATY ===================== */
.wm-msg[b-v8g8a5qtbx] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    border-radius: 14px;
    padding: 0.8rem 1rem;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.3;
}

    .wm-msg i[b-v8g8a5qtbx] {
        flex: 0 0 auto;
        font-size: 1.1rem;
        margin-top: 0.05rem;
    }

    .wm-msg span[b-v8g8a5qtbx] {
        min-width: 0;
        word-break: break-word;
    }

    .wm-msg.err[b-v8g8a5qtbx] {
        background: #fdeceb;
        color: #b91c1c;
        border: 1px solid #f5c2c0;
    }

    .wm-msg.ok[b-v8g8a5qtbx] {
        background: #e9f7ef;
        color: #15803d;
        border: 1px solid #b7e4c8;
    }

/* ===================== DARK MODE ===================== */
[data-theme="dark"] .wm-hcode.sku[b-v8g8a5qtbx] {
    background: #fff;
    color: var(--global-palette1);
}

[data-theme="dark"] .wm-msg.err[b-v8g8a5qtbx] {
    background: rgba(239, 68, 68, .16);
    color: #f87171;
    border-color: rgba(239, 68, 68, .35);
}

[data-theme="dark"] .wm-msg.ok[b-v8g8a5qtbx] {
    background: rgba(34, 197, 94, .16);
    color: #4ade80;
    border-color: rgba(34, 197, 94, .35);
}

[data-theme="dark"] .wm-cbtn.no[b-v8g8a5qtbx] {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border);
}

[data-theme="dark"] .wm-change-val.new[b-v8g8a5qtbx] {
    color: #4ade80;
}

[data-theme="dark"] .wm-welcome-ico[b-v8g8a5qtbx] {
    background: rgba(0, 146, 68, .16);
    color: #4ade80;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 360px) {
    .wm-loc-val[b-v8g8a5qtbx] {
        font-size: 1.55rem;
    }

    .wm-change-val[b-v8g8a5qtbx] {
        font-size: 1.15rem;
    }

    .wm-cta-txt[b-v8g8a5qtbx] {
        font-size: 1.25rem;
    }
}
/* /Components/Pages/Warehouse/LocationSpace.razor.rz.scp.css */
/* Pojemność miejsc. Kolor niesie jedno znaczenie: bursztyn = przepełnione. */

.pj-liczby[b-ljz19xqy8p] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.pj-kafel[b-ljz19xqy8p] {
    flex: 1 1 10rem;
    min-width: 9rem;
    padding: .9rem 1rem;
    border-radius: .65rem;
    background: var(--global-palette7, rgba(0, 0, 0, .03));
    border: 1px solid var(--global-palette6, rgba(0, 0, 0, .08));
}

.pj-num[b-ljz19xqy8p] {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--global-palette1);
}

.pj-cap[b-ljz19xqy8p] {
    font-size: .82rem;
    opacity: .8;
    margin-top: .15rem;
}

.pj-kafel.is-alarm[b-ljz19xqy8p] {
    border-color: rgba(255, 193, 7, .55);
    background: rgba(255, 193, 7, .08);
}

.pj-kafel.is-alarm .pj-num[b-ljz19xqy8p] {
    color: var(--bs-warning-text-emphasis, #b26a00);
}

.pj-alarm[b-ljz19xqy8p] { background: rgba(255, 193, 7, .07); }

/* Pasek zapełnienia — czytelny bez czytania liczby. */
/* Tor paska MUSI byc jasniejszy od wypelnienia.
   Pierwsza wersja brala go z --global-palette6, ktory w tym motywie jest ciemny — i puste
   miejsce (0%) wygladalo na ekranie DOKLADNIE tak jak pelne. Zlapane na zrzucie, nie w kodzie. */
.pj-pasek[b-ljz19xqy8p] {
    height: .55rem;
    min-width: 5rem;
    max-width: 10rem;
    border-radius: .3rem;
    background: rgba(127, 127, 127, .18);
    border: 1px solid rgba(127, 127, 127, .28);
    overflow: hidden;
}

.pj-pasek-wypelnienie[b-ljz19xqy8p] {
    height: 100%;
    background: var(--global-palette1);
    transition: width .2s ease;
}

.pj-pasek-wypelnienie.is-alarm[b-ljz19xqy8p] {
    background: var(--bs-warning, #ffc107);
}

@media (max-width: 768px) {
    .pj-kafel[b-ljz19xqy8p] { flex: 1 1 100%; }
}
/* /Components/ProductEditModal.razor.rz.scp.css */
/* ProductEditModal — redesign wg zatwierdzonego wzorca wwwroot/dev/card-redesign/demo-full.html.
   Namespace pem-; kolory mapowane na brand AB (var(--global-palette1) itd.) + warianty dark.
   Sekcje kuwet (pem-table / pem-act) zachowane z poprzedniej iteracji (zgodne z .seg z demo). */

.product-card[b-28rr4xbhjr] {
    background: var(--surface, #fff);
    border-radius: var(--border-radius, 16px);
    overflow: hidden;
    color: var(--text, #16202e);
}

/* ===================== HEADER ===================== */
.pem-head[b-28rr4xbhjr] {
    background-image: var(--gradient-header);
    color: #fff;
    padding: 0.9rem 1rem;
}

.pem-head-top[b-28rr4xbhjr] {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
}

.pem-thumb[b-28rr4xbhjr] {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    border-radius: 13px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aeb8c2;
    overflow: hidden;
    cursor: pointer;
}

    .pem-thumb img[b-28rr4xbhjr] {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 0.15rem;
    }

    .pem-thumb i[b-28rr4xbhjr] {
        font-size: 1.6rem;
    }

.pem-id[b-28rr4xbhjr] {
    flex: 1;
    min-width: 0;
}

.pem-name[b-28rr4xbhjr] {
    font-weight: 700;
    font-size: 1.12rem;
    line-height: 1.15;
    margin: 0.1rem 0 0.5rem;
    color: #fff;
    word-wrap: break-word;
}

.pem-hcodes[b-28rr4xbhjr] {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.pem-hcode[b-28rr4xbhjr] {
    font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", Consolas, monospace;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.18rem 0.5rem;
    border-radius: 7px;
    background: rgba(255,255,255,.16);
    color: #fff;
}

    .pem-hcode.sku[b-28rr4xbhjr] {
        background: #fff;
        color: var(--global-palette1);
    }

.pem-close[b-28rr4xbhjr] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.12);
    border-radius: 9px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .pem-close:hover[b-28rr4xbhjr] {
        background: rgba(255,255,255,.22);
    }

.pem-whs[b-28rr4xbhjr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.8rem;
    max-height: 148px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.35) transparent;
    padding-bottom: 2px;
}

    .pem-whs[b-28rr4xbhjr]::-webkit-scrollbar {
        width: 6px;
    }

    .pem-whs[b-28rr4xbhjr]::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,.30);
        border-radius: 3px;
    }

.pem-wh[b-28rr4xbhjr] {
    flex: 0 0 auto;
    min-width: 0;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 10px;
    padding: 0.3rem 0.55rem;
}

    .pem-wh.main[b-28rr4xbhjr] {
        background: rgba(255,255,255,.18);
        border-color: rgba(255,255,255,.3);
    }

.pem-wn[b-28rr4xbhjr] {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .85;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 600;
}

.pem-srd[b-28rr4xbhjr] {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    margin-top: 0.2rem;
    font-variant-numeric: tabular-nums;
}

.pem-m[b-28rr4xbhjr] {
    font-size: 0.92rem;
    font-weight: 700;
    white-space: nowrap;
}

    .pem-m b[b-28rr4xbhjr] {
        font-weight: 700;
        font-size: 0.66rem;
        opacity: .55;
        margin-right: 2px;
    }

.pem-mr[b-28rr4xbhjr] {
    font-weight: 600;
    opacity: .72;
}

.pem-md[b-28rr4xbhjr] {
    background: rgba(255,255,255,.92);
    color: var(--global-palette1);
    border-radius: 7px;
    padding: 0.02rem 0.34rem;
}

    .pem-md b[b-28rr4xbhjr] {
        color: inherit;
        opacity: .6;
    }

    .pem-md.neg[b-28rr4xbhjr] {
        color: #c0362c;
    }

.pem-wh-legend[b-28rr4xbhjr] {
    flex-basis: 100%;
    font-size: 0.6rem;
    opacity: .7;
    letter-spacing: .03em;
    margin-top: 0.05rem;
}

/* ===================== BODY ===================== */
.pem-body[b-28rr4xbhjr] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pem-sec-title[b-28rr4xbhjr] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 0.55rem;
}

    .pem-sec-title i[b-28rr4xbhjr] {
        color: var(--global-palette1);
        font-size: 0.95rem;
    }

    .pem-sec-title .count[b-28rr4xbhjr] {
        margin-left: auto;
        color: var(--text-muted);
        font-size: 0.7rem;
        letter-spacing: 0;
        font-variant-numeric: tabular-nums;
    }

/* label rows — Lokalizacje / Kody */
.pem-row2[b-28rr4xbhjr] {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 0.6rem;
    align-items: start;
}

    .pem-row2 + .pem-row2[b-28rr4xbhjr] {
        margin-top: 0.65rem;
    }

.pem-lab[b-28rr4xbhjr] {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 600;
    padding-top: 0.35rem;
}

.pem-badges[b-28rr4xbhjr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.pem-bdg[b-28rr4xbhjr] {
    font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", Consolas, monospace;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.22rem 0.5rem;
    border-radius: 8px;
    background: #dbe2ea;
    color: #2c3645;
    font-variant-numeric: tabular-nums;
}

    .pem-bdg.loc-active[b-28rr4xbhjr] {
        background: #1d4ed8;
        color: #fff;
    }

    .pem-bdg.sys[b-28rr4xbhjr] {
        background: #cdd6e1;
        color: #2f3a48;
        font-size: 0.68rem;
    }

    .pem-bdg.ean-main[b-28rr4xbhjr] {
        background: #15803d;
        color: #fff;
    }

    .pem-bdg.ean-add[b-28rr4xbhjr] {
        background: #8fdde9;
        color: #06495b;
    }

.pem-addbtn[b-28rr4xbhjr] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px dashed var(--global-palette1);
    background: #e9f7ef;
    color: #15803d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.95rem;
}

    .pem-addbtn:hover[b-28rr4xbhjr] {
        background: #d6f0e0;
    }

/* Podstawowa lokalizacja — jeden wiersz: etykieta (2 linie) po lewej + pole po prawej */
.pem-primloc[b-28rr4xbhjr] {
    display: flex;
    align-items: stretch;
    gap: 0.7rem;
}

.pem-primloc-label[b-28rr4xbhjr] {
    flex: 0 0 92px;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 1.15;
    color: var(--text-muted);
}

    .pem-primloc-label i[b-28rr4xbhjr] {
        flex: 0 0 auto;
        color: var(--global-palette1);
        font-size: 0.95rem;
    }

.pem-primloc-input.form-control[b-28rr4xbhjr] {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    font-size: 1rem;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 0.55rem 0.8rem;
    background: var(--surface);
    color: var(--text);
}

    .pem-primloc-input.form-control:focus[b-28rr4xbhjr] {
        outline: 0;
        border-color: var(--global-palette1);
        box-shadow: 0 0 0 3px rgba(0,146,68,.14);
    }

[data-theme="dark"] .pem-primloc-input.form-control[b-28rr4xbhjr] {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border);
}

/* Lista lokatorów w modalu nadpisania miejsca */
.pem-occupants[b-28rr4xbhjr] {
    margin: 0 0 0.75rem;
    padding-left: 1.1rem;
    font-size: 0.9rem;
}

    .pem-occupants li + li[b-28rr4xbhjr] {
        margin-top: 0.2rem;
    }

/* „Usuń" przy lokalizacji podstawowej — kanon: kasowanie = trash3 + czerwień */
.pem-primloc-del[b-28rr4xbhjr] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0 0.7rem;
    border: 0;
    border-radius: 12px;
    background: #fdeceb;
    color: #b91c1c;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease;
}

    .pem-primloc-del:hover[b-28rr4xbhjr] {
        background: #fbdad7;
    }

    .pem-primloc-del:focus-visible[b-28rr4xbhjr] {
        outline: 2px solid #b91c1c;
        outline-offset: 2px;
    }

[data-theme="dark"] .pem-primloc-del[b-28rr4xbhjr] {
    background: rgba(239, 68, 68, .16);
    color: #f87171;
}

    [data-theme="dark"] .pem-primloc-del:hover[b-28rr4xbhjr] {
        background: rgba(239, 68, 68, .26);
    }

/* Bardzo wąskie ekrany: zostaje sam kosz, żeby pole lokalizacji nie zjechało do kilku znaków */
@media (max-width: 400px) {
    .pem-primloc-del[b-28rr4xbhjr] {
        padding: 0 0.55rem;
        font-size: 0;
        gap: 0;
    }

        .pem-primloc-del i[b-28rr4xbhjr] {
            font-size: 0.95rem;
        }
}

.pem-calc[b-28rr4xbhjr] {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

    .pem-calc strong[b-28rr4xbhjr] {
        color: var(--text);
        font-variant-numeric: tabular-nums;
    }

    .pem-calc i[b-28rr4xbhjr] {
        color: var(--global-palette1);
    }

/* collapsible (przycisk + body) */
.pem-collapse-btn[b-28rr4xbhjr] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 12px;
    padding: 0.7rem 0.85rem;
    font: inherit;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text);
    cursor: pointer;
    text-align: left;
}

    .pem-collapse-btn > i:first-child[b-28rr4xbhjr] {
        color: var(--global-palette1);
        font-size: 0.95rem;
    }

    .pem-collapse-btn .badge-count[b-28rr4xbhjr] {
        margin-left: auto;
        font-size: 0.68rem;
        font-weight: 700;
        color: var(--text-muted);
        font-variant-numeric: tabular-nums;
    }

    .pem-collapse-btn .chev[b-28rr4xbhjr] {
        color: var(--text-muted);
        transition: transform .2s;
    }

    .pem-collapse-btn .badge-count + .chev[b-28rr4xbhjr] {
        margin-left: 0.5rem;
    }

    .pem-collapse-btn .chev:only-of-type[b-28rr4xbhjr] {
        margin-left: auto;
    }

    .pem-collapse-btn.open .chev[b-28rr4xbhjr] {
        transform: rotate(180deg);
    }

.pem-collapse-body[b-28rr4xbhjr] {
    padding: 0.8rem 0.1rem 0.1rem;
}

/* details (waga / objętość / wymiary) */
.pem-fl[b-28rr4xbhjr] {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    margin: 0 0 0.3rem;
}

    .pem-fl.fl2[b-28rr4xbhjr] {
        margin-top: 0.7rem;
    }

.pem-dims[b-28rr4xbhjr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .pem-dims b[b-28rr4xbhjr] {
        color: var(--text-muted);
    }

.pem-mini[b-28rr4xbhjr] {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
}

/* gabaryt */
.pem-sizes[b-28rr4xbhjr] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pem-size[b-28rr4xbhjr] {
    flex: 1;
    min-width: 54px;
    text-align: center;
    padding: 0.65rem 0.4rem;
    border: 1.5px solid var(--border);
    border-radius: 11px;
    font-weight: 700;
    cursor: pointer;
    background: var(--surface);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    transition: all .15s ease;
}

    .pem-size:active[b-28rr4xbhjr] {
        transform: scale(0.96);
    }

    .pem-size.sel[b-28rr4xbhjr] {
        background: var(--global-palette1);
        color: #fff;
        border-color: var(--global-palette1);
    }

/* tabele (historia / przyjęcia / marketplace) */
.pem-pbox[b-28rr4xbhjr] {
    border: 1px solid var(--border);
    border-radius: 13px;
    overflow: hidden;
}

.pem-scroll[b-28rr4xbhjr] {
    max-height: 220px;
    overflow-y: auto;
}

.pem-tbl[b-28rr4xbhjr] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    margin: 0;
}

    .pem-tbl thead th[b-28rr4xbhjr] {
        text-align: left;
        font-size: 0.62rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--text-muted);
        font-weight: 700;
        padding: 0.5rem 0.6rem;
        background: var(--surface-2);
        border-bottom: 1px solid var(--border);
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .pem-tbl td[b-28rr4xbhjr] {
        padding: 0.5rem 0.6rem;
        border-bottom: 1px solid var(--surface-3);
        vertical-align: middle;
        color: var(--text);
    }

    .pem-tbl tbody tr:last-child td[b-28rr4xbhjr] {
        border-bottom: 0;
    }

    .pem-tbl .num[b-28rr4xbhjr] {
        text-align: right;
        font-variant-numeric: tabular-nums;
        font-weight: 700;
    }

    .pem-tbl tr.clickable[b-28rr4xbhjr] {
        cursor: pointer;
    }

        .pem-tbl tr.clickable:hover td[b-28rr4xbhjr] {
            background: var(--global-palette-light);
        }

.pem-mp-summary[b-28rr4xbhjr] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.55rem;
}

/* dziennik zmian */
.pem-logbtn[b-28rr4xbhjr] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 11px;
    padding: 0.7rem 0.9rem;
    font: inherit;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text);
    cursor: pointer;
    width: 100%;
}

    .pem-logbtn i[b-28rr4xbhjr] {
        color: var(--global-palette1);
    }

/* alert błędu */
.pem-error[b-28rr4xbhjr] {
    border-radius: 12px;
    margin: 0;
}

/* ===================== DOCK ===================== */
.pem-dock[b-28rr4xbhjr] {
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom));
    display: flex;
    gap: 0.5rem;
    position: sticky;
    bottom: 0;
    z-index: 3;
}

.pem-dbtn[b-28rr4xbhjr] {
    height: 46px;
    border-radius: 13px;
    border: 0;
    font: inherit;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: filter .15s ease, transform .1s ease;
}

    .pem-dbtn i[b-28rr4xbhjr] {
        font-size: 1.05rem;
    }

    .pem-dbtn:active[b-28rr4xbhjr] {
        transform: scale(0.97);
    }

    .pem-dbtn.icon[b-28rr4xbhjr] {
        width: 46px;
        flex: 0 0 46px;
    }

    .pem-dbtn.save[b-28rr4xbhjr] {
        flex: 1;
        background: var(--global-palette1);
        color: #fff;
        box-shadow: 0 6px 16px -6px rgba(0,146,68,.7);
    }

        .pem-dbtn.save:hover[b-28rr4xbhjr] {
            filter: brightness(1.05);
        }

    .pem-dbtn.cl[b-28rr4xbhjr] {
        background: #eef1f6;
        color: #475569;
    }

    .pem-dbtn.pr[b-28rr4xbhjr] {
        background: #ede9fe;
        color: #6d28d9;
    }

    .pem-dbtn.re[b-28rr4xbhjr] {
        background: #ffedd5;
        color: #c2410c;
    }

    /* „Zgłoś błąd stanu" — bursztyn, żeby nie mylił się z pomarańczowym „Donieś" obok */
    .pem-dbtn.si[b-28rr4xbhjr] {
        background: #fef3c7;
        color: #b45309;
    }

        .pem-dbtn.cl:hover[b-28rr4xbhjr], .pem-dbtn.pr:hover[b-28rr4xbhjr], .pem-dbtn.re:hover[b-28rr4xbhjr], .pem-dbtn.si:hover[b-28rr4xbhjr] {
            filter: brightness(0.96);
        }

/* ===== Zgłoszenie błędu stanu: lista miejsc do wyboru ===== */
.si-loc-list[b-28rr4xbhjr] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.si-loc[b-28rr4xbhjr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border, #e6e9ef);
    border-radius: 12px;
    cursor: pointer;
    background: var(--surface, #fff);
}

    .si-loc.active[b-28rr4xbhjr] {
        border-color: var(--global-palette1, #009244);
        box-shadow: 0 0 0 2px rgba(0,146,68,.15);
    }

.si-loc-code[b-28rr4xbhjr] {
    font-weight: 700;
    font-size: 0.95rem;
}

.si-loc-kind[b-28rr4xbhjr] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-muted, #64748b);
}

.si-loc-qty[b-28rr4xbhjr] {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--text-muted, #64748b);
    white-space: nowrap;
}

/* ===== Tabela „W kuwetach / nośnikach" + segmentowane akcje (zachowane) ===== */
.pem-table-wrap[b-28rr4xbhjr] {
    border: 1px solid var(--border, #e6e9ef);
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface, #fff);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}

.pem-table[b-28rr4xbhjr] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

    .pem-table thead th[b-28rr4xbhjr] {
        text-align: left;
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--text-muted, #6b7689);
        padding: 0.55rem 0.85rem;
        background: var(--surface-2, #fbfcfd);
        border-bottom: 1px solid var(--border, #eef1f6);
    }

    .pem-table td[b-28rr4xbhjr] {
        padding: 0.55rem 0.85rem;
        border-bottom: 1px solid var(--surface-3, #eef1f6);
        vertical-align: middle;
    }

    .pem-table tbody tr:last-child td[b-28rr4xbhjr] {
        border-bottom: none;
    }

.pem-col-qty[b-28rr4xbhjr] {
    white-space: nowrap;
}

.pem-col-act[b-28rr4xbhjr] {
    text-align: right;
    width: 1%;
    white-space: nowrap;
}

.pem-carrier-name[b-28rr4xbhjr] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: var(--text, #1c2433);
}

    .pem-carrier-name i[b-28rr4xbhjr] {
        color: var(--global-palette1);
    }

.pem-carrier-meta[b-28rr4xbhjr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.3rem;
}

.pem-pill[b-28rr4xbhjr] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.13rem 0.5rem;
    border-radius: 999px;
}

    .pem-pill.pill-ok[b-28rr4xbhjr] {
        background: #e9f7ef;
        color: #15803d;
    }

    .pem-pill.pill-info[b-28rr4xbhjr] {
        background: #e8effe;
        color: #1d4ed8;
    }

.pem-date[b-28rr4xbhjr] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    color: var(--text-muted, #6b7689);
}

.pem-qty-val[b-28rr4xbhjr] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pem-qty-unit[b-28rr4xbhjr] {
    margin-left: 0.15rem;
    font-size: 0.75rem;
    color: var(--text-muted, #6b7689);
}

.pem-qty[b-28rr4xbhjr] {
    width: 78px;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--border, #e6e9ef);
    border-radius: 9px;
    font: inherit;
    text-align: center;
    font-variant-numeric: tabular-nums;
    background: var(--surface, #fff);
    color: var(--text, #1c2433);
    transition: border-color .15s, box-shadow .15s;
}

    .pem-qty:focus[b-28rr4xbhjr] {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
    }

.pem-actions[b-28rr4xbhjr] {
    display: inline-flex;
    gap: 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}

.pem-act[b-28rr4xbhjr] {
    width: 38px;
    height: 32px;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .16s ease, color .16s ease;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .85);
}

    .pem-act:last-child[b-28rr4xbhjr] {
        box-shadow: none;
    }

    .pem-act:focus-visible[b-28rr4xbhjr] {
        outline: 2px solid #2563eb;
        outline-offset: -2px;
        z-index: 1;
    }

.pem-ico[b-28rr4xbhjr] {
    width: 17px;
    height: 17px;
}

.pem-act.ok[b-28rr4xbhjr] {
    background: #e9f7ef;
    color: #15803d;
}

    .pem-act.ok:hover[b-28rr4xbhjr] {
        background: #d6f0e0;
    }

/* edytuj = NIEBIESKI (kanon ikon+kolorów) */
.pem-act.edit[b-28rr4xbhjr] {
    background: #e8effe;
    color: #1d4ed8;
}

    .pem-act.edit:hover[b-28rr4xbhjr] {
        background: #d7e4fd;
    }

.pem-act.del[b-28rr4xbhjr] {
    background: #fdeceb;
    color: #b91c1c;
}

    .pem-act.del:hover[b-28rr4xbhjr] {
        background: #fbdad7;
    }

.pem-act:disabled[b-28rr4xbhjr] {
    background: #fafbfc;
    color: #c2c8d4;
    cursor: not-allowed;
}

.pem-row-error[b-28rr4xbhjr] {
    color: #dc3545;
    font-size: 0.78rem;
    padding-top: 0 !important;
}

/* ===================== DARK MODE ===================== */
[data-theme="dark"] .pem-bdg[b-28rr4xbhjr] {
    background: var(--surface-3);
    color: var(--text);
}

    [data-theme="dark"] .pem-bdg.loc-active[b-28rr4xbhjr] {
        background: #2563eb;
        color: #fff;
    }

    [data-theme="dark"] .pem-bdg.sys[b-28rr4xbhjr] {
        background: rgba(148,163,184,.22);
        color: #cbd5e1;
    }

    [data-theme="dark"] .pem-bdg.ean-main[b-28rr4xbhjr] {
        background: #15803d;
        color: #fff;
    }

    [data-theme="dark"] .pem-bdg.ean-add[b-28rr4xbhjr] {
        background: rgba(45,212,191,.22);
        color: #67e8f9;
    }

[data-theme="dark"] .pem-addbtn[b-28rr4xbhjr] {
    background: rgba(34,197,94,.16);
    color: #4ade80;
    border-color: #15803d;
}

[data-theme="dark"] .pem-size[b-28rr4xbhjr] {
    background: var(--surface-2);
    color: var(--text-muted);
    border-color: var(--border);
}

    [data-theme="dark"] .pem-size.sel[b-28rr4xbhjr] {
        background: var(--global-palette1);
        color: #fff;
    }

[data-theme="dark"] .pem-tbl thead th[b-28rr4xbhjr] {
    background: var(--surface-2);
}

[data-theme="dark"] .pem-scan[b-28rr4xbhjr],
[data-theme="dark"] .pem-collapse-btn[b-28rr4xbhjr],
[data-theme="dark"] .pem-logbtn[b-28rr4xbhjr],
[data-theme="dark"] .pem-dock[b-28rr4xbhjr] {
    background: var(--surface);
    border-color: var(--border);
}

[data-theme="dark"] .pem-dbtn.cl[b-28rr4xbhjr] {
    background: rgba(148,163,184,.18);
    color: #cbd5e1;
}

[data-theme="dark"] .pem-dbtn.pr[b-28rr4xbhjr] {
    background: rgba(139,92,246,.20);
    color: #c4b5fd;
}

[data-theme="dark"] .pem-dbtn.re[b-28rr4xbhjr] {
    background: rgba(234,88,12,.20);
    color: #fdba74;
}

[data-theme="dark"] .pem-dbtn.si[b-28rr4xbhjr] {
    background: rgba(245,158,11,.20);
    color: #fcd34d;
}

[data-theme="dark"] .si-loc[b-28rr4xbhjr] {
    background: var(--surface);
    border-color: var(--border);
}

[data-theme="dark"] .pem-hcode.sku[b-28rr4xbhjr] {
    background: #fff;
    color: var(--global-palette1);
}

[data-theme="dark"] .pem-table-wrap[b-28rr4xbhjr] {
    border-color: var(--border);
    background: var(--surface);
}

[data-theme="dark"] .pem-table thead th[b-28rr4xbhjr] {
    background: var(--surface-2);
    color: var(--text-muted);
    border-color: var(--border);
}

[data-theme="dark"] .pem-table td[b-28rr4xbhjr] {
    border-color: var(--border);
}

[data-theme="dark"] .pem-qty[b-28rr4xbhjr] {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border);
}

[data-theme="dark"] .pem-act[b-28rr4xbhjr] {
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .28);
}

    [data-theme="dark"] .pem-act:last-child[b-28rr4xbhjr] {
        box-shadow: none;
    }

[data-theme="dark"] .pem-act.ok[b-28rr4xbhjr],
[data-theme="dark"] .pem-pill.pill-ok[b-28rr4xbhjr] {
    background: rgba(34, 197, 94, .16);
    color: #4ade80;
}

    [data-theme="dark"] .pem-act.ok:hover[b-28rr4xbhjr] {
        background: rgba(34, 197, 94, .26);
    }

[data-theme="dark"] .pem-act.edit[b-28rr4xbhjr] {
    background: rgba(59, 130, 246, .18);
    color: #93c5fd;
}

    [data-theme="dark"] .pem-act.edit:hover[b-28rr4xbhjr] {
        background: rgba(59, 130, 246, .28);
    }

[data-theme="dark"] .pem-act.del[b-28rr4xbhjr] {
    background: rgba(239, 68, 68, .16);
    color: #f87171;
}

    [data-theme="dark"] .pem-act.del:hover[b-28rr4xbhjr] {
        background: rgba(239, 68, 68, .26);
    }

[data-theme="dark"] .pem-pill.pill-info[b-28rr4xbhjr] {
    background: rgba(59, 130, 246, .18);
    color: #93c5fd;
}

/* ===================== RESPONSIVE ===================== */
@media (min-width: 768px) {
    .pem-head[b-28rr4xbhjr] {
        padding: 1.1rem 1.2rem;
    }

    .pem-name[b-28rr4xbhjr] {
        font-size: 1.2rem;
    }

    .pem-body[b-28rr4xbhjr] {
        padding: 1.2rem;
    }
}

@media (max-width: 360px) {
    .pem-row2[b-28rr4xbhjr] {
        grid-template-columns: 54px 1fr;
    }
}
/* /Components/ReusableComponents/AdditionalLocationsComponent.razor.rz.scp.css */
/* Dodatkowe lokalizacje — kompaktowy „ledger" wg demo karty (demo-full.html). */

.al-wrap[b-cty0g2xj2e] {
    margin: 0;
}

.al-header[b-cty0g2xj2e] {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted, #6b7689);
    margin-bottom: 0.5rem;
}

.al-ledger[b-cty0g2xj2e] {
    border: 1px solid var(--border, #e6e9ef);
    border-radius: 13px;
    overflow: hidden;
    background: var(--surface, #fff);
}

.al-lrow[b-cty0g2xj2e] {
    display: grid;
    grid-template-columns: 1fr 64px auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--surface-3, #eef1f6);
}

    .al-ledger.no-qty .al-lrow[b-cty0g2xj2e] {
        grid-template-columns: 1fr auto;
    }

    .al-lrow:last-child[b-cty0g2xj2e] {
        border-bottom: 0;
    }

    .al-lrow.sys[b-cty0g2xj2e] {
        background: var(--surface-2, #fbfcfd);
    }

.al-loc-in[b-cty0g2xj2e] {
    font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", Consolas, monospace;
    font-weight: 700;
    font-size: 0.82rem;
    border: 1px solid var(--border, #e6e9ef);
    border-radius: 9px;
    padding: 0.42rem 0.55rem;
    width: 100%;
    min-width: 0;
    background: var(--surface, #fff);
    color: var(--text, #16202e);
}

.al-qty-in[b-cty0g2xj2e] {
    font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", Consolas, monospace;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--border, #e6e9ef);
    border-radius: 9px;
    padding: 0.42rem 0.2rem;
    width: 64px;
    background: var(--surface, #fff);
    color: var(--text, #16202e);
}

    .al-loc-in:focus[b-cty0g2xj2e],
    .al-qty-in:focus[b-cty0g2xj2e] {
        outline: 0;
        border-color: var(--global-palette1, #009244);
        box-shadow: 0 0 0 3px rgba(0, 146, 68, .12);
    }

.al-loc-tag[b-cty0g2xj2e] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.al-sysb[b-cty0g2xj2e] {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
    background: #64748b;
    padding: 0.12rem 0.42rem;
    border-radius: 6px;
    flex: 0 0 auto;
}

.al-nm[b-cty0g2xj2e] {
    font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", Consolas, monospace;
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--text, #16202e);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* segmentowane akcje (jak w sekcji kuwet) */
.al-seg[b-cty0g2xj2e] {
    display: inline-flex;
    border-radius: 9px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}

.al-act[b-cty0g2xj2e] {
    width: 34px;
    height: 30px;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .85);
    transition: background .15s ease;
}

    .al-act:last-child[b-cty0g2xj2e] {
        box-shadow: none;
    }

    .al-act:focus-visible[b-cty0g2xj2e] {
        outline: 2px solid #2563eb;
        outline-offset: -2px;
        z-index: 1;
    }

    .al-act.ok[b-cty0g2xj2e],
    .al-act.add[b-cty0g2xj2e] {
        background: #e9f7ef;
        color: #15803d;
    }

        .al-act.ok:hover[b-cty0g2xj2e],
        .al-act.add:hover[b-cty0g2xj2e] {
            background: #d6f0e0;
        }

    .al-act.del[b-cty0g2xj2e] {
        background: #fdeceb;
        color: #b91c1c;
    }

        .al-act.del:hover[b-cty0g2xj2e] {
            background: #fbdad7;
        }

/* flash po zapisie */
.al-lrow.saved-cell-flash[b-cty0g2xj2e] {
    animation: alSavedFlash-b-cty0g2xj2e 1s ease-in-out;
}

@keyframes alSavedFlash-b-cty0g2xj2e {
    0% {
        background-color: rgba(25, 135, 84, .35);
    }

    100% {
        background-color: transparent;
    }
}

/* ===== DARK ===== */
[data-theme="dark"] .al-ledger[b-cty0g2xj2e] {
    background: var(--surface);
    border-color: var(--border);
}

[data-theme="dark"] .al-lrow[b-cty0g2xj2e] {
    border-color: var(--border);
}

    [data-theme="dark"] .al-lrow.sys[b-cty0g2xj2e] {
        background: var(--surface-2);
    }

[data-theme="dark"] .al-loc-in[b-cty0g2xj2e],
[data-theme="dark"] .al-qty-in[b-cty0g2xj2e] {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border);
}

[data-theme="dark"] .al-sysb[b-cty0g2xj2e] {
    background: rgba(148, 163, 184, .5);
    color: #fff;
}

[data-theme="dark"] .al-act[b-cty0g2xj2e] {
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .28);
}

    [data-theme="dark"] .al-act:last-child[b-cty0g2xj2e] {
        box-shadow: none;
    }

    [data-theme="dark"] .al-act.ok[b-cty0g2xj2e],
    [data-theme="dark"] .al-act.add[b-cty0g2xj2e] {
        background: rgba(34, 197, 94, .16);
        color: #4ade80;
    }

        [data-theme="dark"] .al-act.ok:hover[b-cty0g2xj2e],
        [data-theme="dark"] .al-act.add:hover[b-cty0g2xj2e] {
            background: rgba(34, 197, 94, .26);
        }

    [data-theme="dark"] .al-act.del[b-cty0g2xj2e] {
        background: rgba(239, 68, 68, .16);
        color: #f87171;
    }

        [data-theme="dark"] .al-act.del:hover[b-cty0g2xj2e] {
            background: rgba(239, 68, 68, .26);
        }
/* /Components/Shared/LicenseLockScreen.razor.rz.scp.css */
.license-lock-screen[b-k60omdnotf] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background:
        radial-gradient(circle at 10% 20%, rgba(0, 146, 68, 0.2), transparent 35%),
        radial-gradient(circle at 90% 80%, rgba(193, 209, 28, 0.18), transparent 35%),
        linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
}

.license-lock-card[b-k60omdnotf] {
    width: min(700px, 100%);
    background: var(--surface, #ffffff);
    border-radius: 16px;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.35);
    padding: 2rem;
    text-align: center;
}

.license-lock-icon[b-k60omdnotf] {
    width: 72px;
    height: 72px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #fff;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.license-lock-card h1[b-k60omdnotf] {
    margin-bottom: 0.5rem;
    font-size: 1.8rem;
}

.license-lock-reason[b-k60omdnotf] {
    margin-bottom: 1rem;
    color: #334155;
    font-size: 1.05rem;
}

.license-lock-message[b-k60omdnotf] {
    margin: 1rem 0;
    padding: 0.9rem 1rem;
    border: 1px solid #fecaca;
    border-radius: 12px;
    background: #fff1f2;
    color: #991b1b;
    font-weight: 500;
}

.license-lock-help[b-k60omdnotf] {
    margin: 0;
    color: #475569;
}

.license-lock-form[b-k60omdnotf] {
    text-align: left;
    max-width: 520px;
    margin: 0 auto;
}

.license-lock-form .form-label[b-k60omdnotf] {
    font-weight: 600;
    color: #334155;
}

.license-lock-result[b-k60omdnotf] {
    margin-top: 0.9rem;
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    font-size: 0.95rem;
}

.license-lock-result.success[b-k60omdnotf] {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.license-lock-result.error[b-k60omdnotf] {
    border: 1px solid #fecaca;
    background: #fff1f2;
    color: #9f1239;
}
/* /Components/Shared/NotificationBell.razor.rz.scp.css */
.notification-bell-link[b-3yqhjjo9xp] {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-size: 1.5rem;
    color: #fff !important;
    text-decoration: none;
    padding: 0.5rem;
    transition: color 0.2s ease;
}

.notification-bell-link:hover[b-3yqhjjo9xp] {
    color: #f0f0f0 !important;
}

.notification-bell-link .bi[b-3yqhjjo9xp] {
    color: #fff !important;
}

.notification-badge[b-3yqhjjo9xp] {
    position: absolute;
    top: 0;
    right: 0;
    background: #dc3545;
    color: white;
    border-radius: 50%;
    padding: 0.2rem 0.4rem;
    font-size: 0.7rem;
    font-weight: bold;
    min-width: 18px;
    text-align: center;
    line-height: 1;
}
/* /Components/Shared/OrdersUiSection.razor.rz.scp.css */
/* Sekcja „co widzi ten użytkownik na zbieraniu i pakowaniu".
   Dwie kolumny: po lewej przełączniki, po prawej podgląd ekranu na żywo.
   Poniżej 992 px kolumny idą jedna pod drugą — podgląd na końcu, bo to potwierdzenie,
   nie narzędzie. */

.oui[b-ut4sk954n0] {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    overflow: hidden;
}

.oui-head[b-ut4sk954n0] {
    padding: 0.9rem 1.1rem;
    background: linear-gradient(135deg, var(--global-palette4) 0%, var(--global-palette5) 100%);
    color: #fff;
}

.oui-title[b-ut4sk954n0] {
    font-weight: 700;
    font-size: 1.02rem;
}

.oui-sub[b-ut4sk954n0] {
    font-size: 0.85rem;
    opacity: 0.85;
    margin-top: 0.15rem;
}

/* ── gotowe zestawy ───────────────────────────────────────────────────────── */

.oui-presets[b-ut4sk954n0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 1.1rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}

.oui-presets-label[b-ut4sk954n0] {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-right: 0.25rem;
}

.oui-preset[b-ut4sk954n0] {
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    font-size: 0.87rem;
    font-weight: 600;
}

.oui-preset.active[b-ut4sk954n0] {
    background: var(--global-palette1);
    border-color: var(--global-palette1);
    color: #fff;
}

/* ── układ ────────────────────────────────────────────────────────────────── */

.oui-body[b-ut4sk954n0] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 1.1rem;
    padding: 1.1rem;
}

@media (max-width: 991.98px) {
    .oui-body[b-ut4sk954n0] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.oui-group[b-ut4sk954n0] {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0.9rem 0 0.4rem;
}

.oui-group:first-child[b-ut4sk954n0] {
    margin-top: 0;
}

.oui-toggles[b-ut4sk954n0] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

/* ── podgląd ──────────────────────────────────────────────────────────────── */

.oui-preview[b-ut4sk954n0] {
    position: sticky;
    top: 1rem;
    align-self: start;
}

.oui-preview-label[b-ut4sk954n0] {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

.oui-phone[b-ut4sk954n0] {
    border: 2px solid var(--border-strong);
    border-radius: 14px;
    overflow: hidden;
    background: var(--surface-2);
}

.oui-phone-bar[b-ut4sk954n0] {
    background: var(--global-palette4);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4rem 0.6rem;
}

.oui-phone-body[b-ut4sk954n0] {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 220px;
}

.oui-blk[b-ut4sk954n0] {
    border-radius: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--text-secondary);
    padding: 0.35rem 0.5rem;
}

.oui-blk.main[b-ut4sk954n0] {
    background: var(--global-palette1);
    border-color: var(--global-palette1);
    color: #fff;
    font-weight: 600;
    text-align: center;
    padding: 0.5rem;
}

.oui-blk.lead[b-ut4sk954n0] {
    background: color-mix(in srgb, var(--global-palette1) 12%, var(--surface));
    border-color: color-mix(in srgb, var(--global-palette1) 35%, var(--border));
}

.oui-blk.thin[b-ut4sk954n0] {
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
}

.oui-tiles[b-ut4sk954n0] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.25rem;
}

.oui-tiles span[b-ut4sk954n0] {
    height: 30px;
    border-radius: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
}

.oui-rows[b-ut4sk954n0] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.oui-rows span[b-ut4sk954n0] {
    height: 14px;
    border-radius: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
}

/* Zaznaczanie ręczne dokłada kolumnę z polem wyboru — widać to w podglądzie. */
.oui-rows span.sel[b-ut4sk954n0] {
    border-left: 8px solid var(--border-strong);
}

.oui-empty[b-ut4sk954n0] {
    font-size: 0.75rem;
    color: #b02a37;
    text-align: center;
    padding: 1rem 0.5rem;
    line-height: 1.35;
}

.oui-preview-note[b-ut4sk954n0] {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
}

/* ── stopka ───────────────────────────────────────────────────────────────── */

.oui-foot[b-ut4sk954n0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.1rem;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}

.oui-msg[b-ut4sk954n0] {
    font-size: 0.86rem;
    font-weight: 600;
}

.oui-msg.ok[b-ut4sk954n0] { color: var(--global-palette1); }
.oui-msg.bad[b-ut4sk954n0] { color: #b02a37; }

/* ── wybór osób i grup ────────────────────────────────────────────────────── */

.oui-picklist[b-ut4sk954n0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 0.3rem;
    max-height: 240px;
    overflow-y: auto;
}

.oui-pick[b-ut4sk954n0] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.35rem 0.5rem;
    font-size: 0.88rem;
    background: var(--surface);
}

/* ── podglad kolektora ──────────────────────────────────────────────────────
   Drugi telefon w podgladzie pokazuje PRZYSTANEK, nie liste zamowien. Bez niego
   przelaczniki ekranu zbierania byly zestawem suwakow, po ktorych nie widac,
   co sie dzieje — a to wlasnie ten ekran ma byc okrojony.
   Podglad jest schematem, nie kopia: te same rzeczy w tej samej kolejnosci,
   w rozmiarze, ktory miesci sie obok listy przelacznikow. */

.oui-phone-bar[b-ut4sk954n0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    min-height: 1.6rem;
}

.oui-kol-mapa[b-ut4sk954n0] {
    font-size: 0.68rem;
    font-weight: 600;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 5px;
    padding: 0 0.3rem;
}

.oui-kol[b-ut4sk954n0] {
    align-items: center;
    text-align: center;
    background: var(--surface);
}

.oui-kol-goto[b-ut4sk954n0] {
    font-size: 0.6rem;
    letter-spacing: .09em;
    color: var(--text-muted);
}

.oui-kol-loc[b-ut4sk954n0] {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    color: var(--global-palette1);
}

.oui-kol-prod[b-ut4sk954n0] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    text-align: left;
}

.oui-kol-foto[b-ut4sk954n0] {
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 6px;
    background: rgba(128,128,128,.2);
    border: 1px dashed rgba(128,128,128,.9);
}

.oui-kol-txt[b-ut4sk954n0] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.oui-kol-name[b-ut4sk954n0] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text);
}

.oui-kol-codes[b-ut4sk954n0] {
    font-size: 0.66rem;
    color: var(--text-muted);
}

.oui-kol-qty[b-ut4sk954n0] {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
}

    .oui-kol-qty em[b-ut4sk954n0] {
        font-style: normal;
        font-size: 0.75rem;
        font-weight: 400;
        color: var(--text-muted);
    }

.oui-kol-hint[b-ut4sk954n0],
.oui-kol-order[b-ut4sk954n0],
.oui-kol-more[b-ut4sk954n0] {
    font-size: 0.66rem;
    color: var(--text-muted);
    line-height: 1.25;
}

.oui-kol-acts[b-ut4sk954n0] {
    display: flex;
    gap: 0.4rem;
    width: 100%;
    margin-top: auto;
    padding-top: 0.4rem;
}

.oui-kol-brak[b-ut4sk954n0],
.oui-kol-ok[b-ut4sk954n0] {
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.35rem 0.3rem;
    text-align: center;
}

.oui-kol-brak[b-ut4sk954n0] {
    flex: 0 0 34%;
    background: #ffc107;
    border: 1px solid #b98900;
    color: #241900;
}

.oui-kol-ok[b-ut4sk954n0] {
    flex: 1 1 auto;
    background: #007a38;
    color: #fff;
}
/* /Components/Shared/OuiToggle.razor.rz.scp.css */
/* Reguly przelacznika MUSZA byc tutaj, a nie w pliku rodzica.
   Scoped CSS przypisuje atrybut do znacznikow JEDNEGO komponentu — regula
   .oui-tgl napisana u rodzica nie trafi w znaczniki wyrenderowane przez dziecko
   i przelacznik zostaje bez stylu, bez zadnego bledu. */

.oui-tgl[b-r9d6471zti] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    padding: 0.5rem 0.7rem;
    min-height: 48px;
}

.oui-tgl.off[b-r9d6471zti] {
    background: var(--surface-3);
    opacity: 0.75;
}

.oui-tgl-knob[b-r9d6471zti] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--border);
    color: var(--text-muted);
}

.oui-tgl.on .oui-tgl-knob[b-r9d6471zti] {
    background: var(--global-palette1);
    color: #fff;
}

.oui-tgl-text[b-r9d6471zti] {
    flex: 1;
    min-width: 0;
}

.oui-tgl-label[b-r9d6471zti] {
    display: block;
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.2;
}

.oui-tgl-hint[b-r9d6471zti] {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.25;
    margin-top: 0.1rem;
}

.oui-tgl-state[b-r9d6471zti] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    color: var(--text-muted);
}

.oui-tgl.on .oui-tgl-state[b-r9d6471zti] {
    color: var(--global-palette1);
}

/* /Components/Shared/OverlayComponent.razor.rz.scp.css */
.overlay[b-0b31v22dmt] {
    height: 100%;
    width: 100vw;
    position: fixed;
    z-index: 2000;
    top: 0px;
    left: 0px;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.5);
    overflow-x: hidden;
    transition: 0.5s;
}

/* Panel z komunikatem — musi być czytelny także przy dłuższym tekście (np. ostrzeżeniu o starcie Sfery),
   dlatego ma własne tło, ograniczoną szerokość i zawijanie zamiast paska przez całą stronę. */
.overlay-panel[b-0b31v22dmt] {
    max-width: min(560px, 90vw);
    margin: 0 auto;
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
    background: var(--surface-raised, #ffffff);
    color: var(--text, #0f172a);
    box-shadow: 0 18px 48px rgba(0,0,0,0.35);
    text-align: center;
}

.overlay-text[b-0b31v22dmt] {
    margin: 0.75rem 0 0;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
/* /Components/Shared/TaskDependencyGraphView.razor.rz.scp.css */
/* ===== Dependency Graph ===== */

.dep-graph-toolbar[b-1xwtmrev9f] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--border, #e8e8e8);
    background: var(--surface-2, #fafbfc);
    border-radius: 12px 12px 0 0;
}

.dep-graph-zoom-label[b-1xwtmrev9f] {
    font-size: 0.72rem;
    font-weight: 600;
    min-width: 38px;
    text-align: center;
    color: var(--text-secondary, #495057);
}

.dep-graph-scroll[b-1xwtmrev9f] {
    overflow: auto;
    scrollbar-width: thin;
    max-height: 500px;
}

.dep-graph-sizer[b-1xwtmrev9f] {
    position: relative;
}

.dep-graph-canvas[b-1xwtmrev9f] {
    position: relative;
}

.dep-graph-svg[b-1xwtmrev9f] {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 0;
}

/* Edges */
.dep-edge-done[b-1xwtmrev9f] {
    fill: none;
    stroke: #198754;
    stroke-width: 2.5;
}

.dep-edge-active[b-1xwtmrev9f] {
    fill: none;
    stroke: #6610f2;
    stroke-width: 2.5;
    stroke-dasharray: 6 3;
    animation: depEdgePulse 1.5s infinite;
}

.dep-edge-pending[b-1xwtmrev9f] {
    fill: none;
    stroke: #adb5bd;
    stroke-width: 2;
    stroke-dasharray: 4 4;
}

/* Nodes */
.dep-graph-node[b-1xwtmrev9f] {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    z-index: 1;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    padding: 0.4rem 0.3rem;
    border-radius: 10px;
    background: var(--surface, #fff);
    border: 1.5px solid var(--border, #e0e0e0);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.dep-graph-node:hover[b-1xwtmrev9f] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 10;
}

.dep-graph-node-icon[b-1xwtmrev9f] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    margin-bottom: 0.25rem;
}

.dep-node-completed .dep-graph-node-icon[b-1xwtmrev9f] {
    background: linear-gradient(135deg, #198754, #20c997);
}

.dep-node-active .dep-graph-node-icon[b-1xwtmrev9f] {
    background: linear-gradient(135deg, var(--global-palette4), var(--global-palette5));
    animation: depNodePulse 2s infinite;
}

.dep-node-ready .dep-graph-node-icon[b-1xwtmrev9f] {
    background: linear-gradient(135deg, #6c757d, #adb5bd);
}

.dep-node-blocked .dep-graph-node-icon[b-1xwtmrev9f] {
    background: linear-gradient(135deg, #495057, #6c757d);
    opacity: 0.7;
}

.dep-node-cancelled .dep-graph-node-icon[b-1xwtmrev9f] {
    background: linear-gradient(135deg, #dc3545, #e74c3c);
    opacity: 0.6;
}

.dep-graph-node-label[b-1xwtmrev9f] {
    font-size: 0.72rem;
    font-weight: 600;
    text-align: center;
    color: var(--text, #333);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.2;
}

.dep-graph-node-user[b-1xwtmrev9f] {
    font-size: 0.6rem;
    color: var(--text-muted, #6c757d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.dep-graph-node-date[b-1xwtmrev9f] {
    font-size: 0.6rem;
    font-weight: 500;
    margin-top: 0.1rem;
}

@@keyframes depNodePulse {
    0%[b-1xwtmrev9f], 100%[b-1xwtmrev9f] { box-shadow: 0 2px 8px rgba(13, 110, 253, 0.3); }
    50%[b-1xwtmrev9f] { box-shadow: 0 2px 16px rgba(13, 110, 253, 0.6); }
}

@@keyframes depEdgePulse {
    0%[b-1xwtmrev9f], 100%[b-1xwtmrev9f] { opacity: 1; }
    50%[b-1xwtmrev9f] { opacity: 0.5; }
}

@@media (max-width: 576px) {
    .dep-graph-node-label[b-1xwtmrev9f] {
        font-size: 0.62rem;
        max-width: 80px;
    }
    .dep-graph-node-user[b-1xwtmrev9f] {
        font-size: 0.52rem;
        max-width: 80px;
    }
}
/* /Components/Shared/TaskGanttChart.razor.rz.scp.css */
/* ===== Gantt Chart — single scroll container, sticky header ===== */
.gantt-wrapper[b-tfwzy5brze] {
    --label-w: 200px;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 12px;
    overflow: auto;
    max-height: 70vh;
    background: var(--surface, #fff);
    font-size: 0.82rem;
    scrollbar-width: thin;
}

.gantt-table[b-tfwzy5brze] {
    position: relative;
    width: fit-content;
    min-width: 100%;
}

/* ── Rows ── */
.gantt-row[b-tfwzy5brze] {
    display: flex;
}

/* Header row — sticky at top */
.gantt-row-header[b-tfwzy5brze] {
    position: sticky;
    top: 0;
    z-index: 10;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    color: #fff;
}

.gantt-row-header .gantt-cell-label[b-tfwzy5brze] {
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-right: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    padding: 0.6rem 0.75rem;
    height: 52px;
}

/* Label cells */
.gantt-cell-label[b-tfwzy5brze] {
    width: var(--label-w);
    min-width: var(--label-w);
    flex-shrink: 0;
    box-sizing: border-box;
}

/* Task label */
.gantt-task-label[b-tfwzy5brze] {
    padding: 0.35rem 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    cursor: pointer;
    transition: background 0.15s ease;
    border-right: 1px solid var(--border, #e0e0e0);
    background: var(--surface, #fff);
    min-height: 48px;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .gantt-task-label:hover[b-tfwzy5brze] {
        background: var(--surface-2, #f8f9ff);
    }
}

.gantt-task-title[b-tfwzy5brze] {
    min-width: 0;
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.6;
}

.gantt-task-id[b-tfwzy5brze] {
    font-size: 0.65rem;
    color: #adb5bd;
    margin-right: 0.3rem;
}

.gantt-task-user[b-tfwzy5brze] {
    font-size: 0.62rem;
    color: var(--text-muted, #6c757d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.2;
}

/* Stage separator */
.gantt-row-stage[b-tfwzy5brze] {
    background: linear-gradient(135deg, var(--surface-2, #e8e9ed), var(--surface, #f0f1f3));
    border-top: 2px solid #ced4da;
}

.gantt-stage-label[b-tfwzy5brze] {
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    height: 26px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary, #495057);
}

.gantt-stage-label-text[b-tfwzy5brze] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gantt-stage-badge[b-tfwzy5brze] {
    font-size: 0.55rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
    margin-left: 6px;
    letter-spacing: 0;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.gantt-stage-badge-active[b-tfwzy5brze] {
    background: rgba(25, 135, 84, 0.15);
    color: #198754;
}

.gantt-stage-badge-waiting[b-tfwzy5brze] {
    background: rgba(255, 193, 7, 0.25);
    color: #946206;
}

.gantt-row-stage-waiting[b-tfwzy5brze] {
    background: linear-gradient(135deg, #fff8e1, #fff3cd);
    border-top-color: #ffc107;
    opacity: 0.8;
}

.gantt-stage-badge-completed[b-tfwzy5brze] {
    background: rgba(25, 135, 84, 0.15);
    color: #198754;
}

.gantt-row-stage-completed[b-tfwzy5brze] {
    background: linear-gradient(135deg, #e8f5e9, #d7f0da);
    border-top-color: #66bb6a;
}

.gantt-stage-filler[b-tfwzy5brze] {
    flex: 1;
}

/* Task rows */
.gantt-row-task[b-tfwzy5brze] {
    border-top: 1px solid var(--surface-3, #f0f0f0);
}

@media (hover: hover) {
    .gantt-row-task:hover .gantt-task-label[b-tfwzy5brze] {
        background: var(--surface-2, #f8f9ff);
    }

    .gantt-row-task:hover .gantt-timeline[b-tfwzy5brze] {
        background: var(--surface-2, #f8f9ff);
    }
}

.gantt-row-empty .gantt-task-label[b-tfwzy5brze] {
    cursor: default;
}

.gantt-row-empty .gantt-task-label:hover[b-tfwzy5brze] {
    background: var(--surface, #fff);
}

/* Timeline area */
.gantt-timeline[b-tfwzy5brze] {
    position: relative;
    display: flex;
    flex-shrink: 0;
}

/* Day cells */
.gantt-cell-day[b-tfwzy5brze] {
    flex-shrink: 0;
    box-sizing: border-box;
}

.gantt-day-header[b-tfwzy5brze] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0;
    border-right: 1px solid rgba(255,255,255,0.08);
}

.gantt-row-task .gantt-cell-day[b-tfwzy5brze] {
    border-right: 1px solid var(--surface-3, #f0f0f0);
    min-height: 48px;
}

.gantt-day-name[b-tfwzy5brze] {
    font-size: 0.62rem;
    opacity: 0.7;
    text-transform: uppercase;
}

.gantt-day-number[b-tfwzy5brze] {
    font-weight: 700;
    font-size: 0.78rem;
}

.gantt-today[b-tfwzy5brze] {
    background: rgba(13, 110, 253, 0.25);
    border-radius: 4px;
}

.gantt-today-col[b-tfwzy5brze] {
    background: rgba(13, 110, 253, 0.04);
}

/* ── Bars ── */
.gantt-bar[b-tfwzy5brze] {
    position: absolute;
    top: 5px;
    height: 26px;
    border-radius: 6px;
    z-index: 2;
    display: flex;
    align-items: center;
    overflow: hidden;
    transition: opacity 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

@media (hover: hover) {
    .gantt-bar:hover[b-tfwzy5brze] {
        opacity: 0.9;
        box-shadow: 0 3px 12px rgba(0,0,0,0.18);
    }
}

.gantt-bar-inner[b-tfwzy5brze] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    overflow: hidden;
}

.gantt-bar-text[b-tfwzy5brze] {
    font-size: 0.68rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gantt-bar-completed[b-tfwzy5brze] {
    background: linear-gradient(135deg, #198754, #20c997);
}

.gantt-bar-active[b-tfwzy5brze] {
    background: linear-gradient(135deg, var(--global-palette4), var(--global-palette5));
    animation: ganttPulse 2.5s infinite;
}

.gantt-bar-pending[b-tfwzy5brze] {
    background: linear-gradient(135deg, #adb5bd, #ced4da);
}

.gantt-bar-cancelled[b-tfwzy5brze] {
    background: linear-gradient(135deg, #dc3545, #e74c3c);
    opacity: 0.5;
}

/* Draggable bars */
.gantt-bar-draggable[b-tfwzy5brze] {
    cursor: grab;
    touch-action: pan-y;
}

@media (hover: hover) {
    .gantt-bar-draggable:active[b-tfwzy5brze] {
        cursor: grabbing;
    }
}

.gantt-bar-dragging[b-tfwzy5brze] {
    opacity: 0.75;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    z-index: 10 !important;
    transition: none !important;
}

.gantt-bar-resizing[b-tfwzy5brze] {
    opacity: 0.85;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    z-index: 10 !important;
    transition: none !important;
}

/* Resize handle on right edge */
[b-tfwzy5brze] .gantt-resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: col-resize;
    background: rgba(255,255,255,0.15);
    border-left: 2px solid rgba(255,255,255,0.3);
    border-radius: 0 6px 6px 0;
    transition: background 0.15s ease;
}

[b-tfwzy5brze] .gantt-resize-handle:hover {
    background: rgba(255,255,255,0.35);
    border-left-color: rgba(255,255,255,0.6);
}

/* Days badge inside bar */
[b-tfwzy5brze] .gantt-bar-days {
    font-size: 0.58rem;
    font-weight: 700;
    opacity: 0.7;
    color: #fff;
    margin-left: auto;
    padding-right: 10px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Drag overlay — captures pointer events during drag */
.gantt-drag-overlay[b-tfwzy5brze] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    cursor: grabbing;
}

/* Date label shown while dragging — inside sticky header */
.gantt-drag-indicator[b-tfwzy5brze] {
    position: absolute;
    bottom: -20px;
    transform: translateX(-50%);
    background: #1a1a2e;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 20;
    pointer-events: none;
}

/* Today marker */
.gantt-today-marker[b-tfwzy5brze] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #dc3545;
    z-index: 4;
    pointer-events: none;
}

.gantt-today-marker[b-tfwzy5brze]::before {
    content: 'Dziś';
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 0.6rem;
    color: #dc3545;
    font-weight: 700;
    white-space: nowrap;
}

@@keyframes ganttPulse {
    0%[b-tfwzy5brze], 100%[b-tfwzy5brze] { box-shadow: 0 2px 6px rgba(13,110,253,0.3); }
    50%[b-tfwzy5brze] { box-shadow: 0 2px 14px rgba(13,110,253,0.5); }
}

/* Actual completion overlay */
.gantt-actual-overlay[b-tfwzy5brze] {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    pointer-events: none;
}

.gantt-actual-ontime[b-tfwzy5brze] {
    background: rgba(255,255,255,0.25);
    border: 2px solid rgba(255,255,255,0.5);
}

.gantt-actual-overrun[b-tfwzy5brze] {
    background: rgba(220,53,69,0.35);
    border: 2px solid #dc3545;
    border-radius: 6px;
}

.gantt-actual-label[b-tfwzy5brze] {
    font-size: 0.6rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    white-space: nowrap;
    padding: 0 4px;
}

/* Responsive */
@@media (max-width: 768px) {
    .gantt-wrapper[b-tfwzy5brze] {
        --label-w: 50px;
    }
    .gantt-row-header .gantt-cell-label[b-tfwzy5brze] {
        font-size: 0.6rem;
        padding: 0.3rem 0.35rem;
    }
    .gantt-task-label[b-tfwzy5brze] {
        padding: 0.25rem 0.35rem;
    }
    .gantt-task-title[b-tfwzy5brze] {
        font-size: 0.6rem;
    }
    .gantt-task-id[b-tfwzy5brze] {
        display: none;
    }
    .gantt-task-user[b-tfwzy5brze] {
        display: none;
    }
    .gantt-stage-label[b-tfwzy5brze] {
        padding: 0.2rem 0.35rem;
    }
    .gantt-stage-label-text[b-tfwzy5brze] {
        font-size: 0.55rem;
    }
}
/* /Components/Shared/TaskPipelineView.razor.rz.scp.css */
/* ===== Pipeline View (Level-based columns) ===== */

.pipeline-zoom-toolbar[b-gqhw1clohd] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--border, #e8e8e8);
    background: var(--surface-2, #fafbfc);
    border-radius: 12px 12px 0 0;
}

.pipeline-zoom-label[b-gqhw1clohd] {
    font-size: 0.72rem;
    font-weight: 600;
    min-width: 38px;
    text-align: center;
    color: var(--text-secondary, #495057);
}

.pipeline-zoom-scroll[b-gqhw1clohd] {
    overflow: auto;
    scrollbar-width: thin;
    max-height: 500px;
}

.pipeline-view[b-gqhw1clohd] {
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    padding: 1.5rem 0.5rem;
    scrollbar-width: thin;
}

/* A level column — holds 1 or more parallel tasks */
.pipeline-level[b-gqhw1clohd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

/* Visual hint for parallel tasks */
.pipeline-level-multi[b-gqhw1clohd] {
    border: 2px dashed var(--border, #dee2e6);
    border-radius: 14px;
    padding: 0.6rem 0.4rem;
    background: rgba(13, 110, 253, 0.02);
}

.pipeline-step[b-gqhw1clohd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 110px;
    max-width: 160px;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    position: relative;
}

.pipeline-step:hover[b-gqhw1clohd] {
    transform: translateY(-3px);
}

.pipeline-step-icon[b-gqhw1clohd] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 3px 12px rgba(0,0,0,0.12);
    transition: all 0.25s ease;
    z-index: 1;
}

.pipeline-step-completed .pipeline-step-icon[b-gqhw1clohd] {
    background: linear-gradient(135deg, #198754, #20c997);
}

.pipeline-step-active .pipeline-step-icon[b-gqhw1clohd] {
    background: linear-gradient(135deg, var(--global-palette4), var(--global-palette5));
    animation: pipelinePulse 2s infinite;
}

.pipeline-step-ready .pipeline-step-icon[b-gqhw1clohd] {
    background: linear-gradient(135deg, #6c757d, #adb5bd);
}

.pipeline-step-blocked .pipeline-step-icon[b-gqhw1clohd] {
    background: linear-gradient(135deg, #495057, #6c757d);
    opacity: 0.7;
}

.pipeline-step-cancelled .pipeline-step-icon[b-gqhw1clohd] {
    background: linear-gradient(135deg, #dc3545, #e74c3c);
    opacity: 0.6;
}

.pipeline-step-number[b-gqhw1clohd] {
    font-size: 0.9rem;
}

.pipeline-step-label[b-gqhw1clohd] {
    margin-top: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
    color: var(--text, #333);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.2;
}

.pipeline-step-date[b-gqhw1clohd] {
    font-size: 0.68rem;
    color: #198754;
    margin-top: 0.15rem;
    font-weight: 500;
}

/* Connector between levels */
.pipeline-connector[b-gqhw1clohd] {
    display: flex;
    align-items: center;
    min-width: 36px;
    padding: 0 0.15rem;
    position: relative;
}

.pipeline-connector-line[b-gqhw1clohd] {
    height: 3px;
    flex: 1;
    min-width: 20px;
    border-radius: 2px;
    transition: background 0.3s ease;
}

.pipeline-connector-arrow[b-gqhw1clohd] {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    transition: border-left-color 0.3s ease;
}

.pipeline-connector-done .pipeline-connector-line[b-gqhw1clohd] {
    background: linear-gradient(90deg, #198754, #20c997);
}

.pipeline-connector-done .pipeline-connector-arrow[b-gqhw1clohd] {
    border-left: 8px solid #20c997;
}

.pipeline-connector-pending .pipeline-connector-line[b-gqhw1clohd] {
    background: var(--border, #dee2e6);
}

.pipeline-connector-pending .pipeline-connector-arrow[b-gqhw1clohd] {
    border-left: 8px solid var(--border, #dee2e6);
}

@@keyframes pipelinePulse {
    0%[b-gqhw1clohd], 100%[b-gqhw1clohd] { box-shadow: 0 3px 12px rgba(13, 110, 253, 0.3); }
    50%[b-gqhw1clohd] { box-shadow: 0 3px 20px rgba(13, 110, 253, 0.6); }
}

.pipeline-stage-label[b-gqhw1clohd] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted, #6c757d);
    text-align: center;
    margin-bottom: 4px;
}

.pipeline-stage-waiting .pipeline-stage-label[b-gqhw1clohd] {
    color: #e67e22;
}

.pipeline-stage-waiting[b-gqhw1clohd] {
    opacity: 0.55;
    border-color: #f0ad4e !important;
    background: rgba(240, 173, 78, 0.06) !important;
}

.pipeline-level-active[b-gqhw1clohd] {
    border-color: #0d6efd !important;
    background: rgba(13, 110, 253, 0.05) !important;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
}

.pipeline-step-assignee[b-gqhw1clohd] {
    font-size: 0.62rem;
    color: var(--text-muted, #6c757d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

@@media (max-width: 576px) {
    .pipeline-step-label[b-gqhw1clohd] {
        font-size: 0.65rem !important;
        max-width: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .pipeline-step-assignee[b-gqhw1clohd] {
        font-size: 0.55rem;
        max-width: 60px;
    }
    .pipeline-stage-label[b-gqhw1clohd] {
        font-size: 0.6rem;
    }
}
/* /Components/Shared/TaskProcessPopup.razor.rz.scp.css */
/* ===== Process Popup ===== */
.process-popup[b-64idmupco9] {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 64px rgba(0,0,0,0.2);
}

.process-popup-header[b-64idmupco9] {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    color: #fff;
    padding: 1rem 1.5rem;
}

.process-popup-stats[b-64idmupco9] {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.3rem;
}

.process-popup-stats .badge[b-64idmupco9] {
    font-size: 0.68rem;
    font-weight: 500;
}

/* Progress */
.process-progress-bar .progress[b-64idmupco9] {
    background: var(--border, #e9ecef);
}

/* ─── Stages section ─── */
.process-stages-section[b-64idmupco9] {
    border: 1px solid var(--border, #e9ecef);
    border-radius: 12px;
    padding: 1rem;
    background: var(--surface-2, #fafbfc);
}

.process-stage-add-form[b-64idmupco9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface, #fff);
    border: 1px dashed #ced4da;
    border-radius: 8px;
}

.process-stage-block[b-64idmupco9] {
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 10px;
    margin-bottom: 0.75rem;
    background: var(--surface, #fff);
    overflow: hidden;
}

.process-stage-block:last-child[b-64idmupco9] {
    margin-bottom: 0;
}

.process-stage-unassigned[b-64idmupco9] {
    border-style: dashed;
    background: var(--surface-2, #fffdf0);
}

.process-stage-header[b-64idmupco9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(135deg, var(--surface-2, #e8e9ed), var(--surface, #f0f1f3));
    border-bottom: 1px solid var(--border, #e0e0e0);
    font-size: 0.8rem;
    font-weight: 600;
}

.process-stage-name[b-64idmupco9] {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.process-stage-name:hover[b-64idmupco9] {
    background: rgba(0,0,0,0.06);
}

.process-stage-edit-icon[b-64idmupco9] {
    font-size: 0.55rem;
    opacity: 0;
    transition: opacity 0.15s;
}

.process-stage-name:hover .process-stage-edit-icon[b-64idmupco9] {
    opacity: 0.5;
}

.process-stage-count[b-64idmupco9] {
    font-size: 0.62rem;
}

.process-stage-delete-btn[b-64idmupco9] {
    opacity: 0;
    transition: opacity 0.15s;
    padding: 0 4px;
    font-size: 0.65rem;
}

.process-stage-header:hover .process-stage-delete-btn[b-64idmupco9] {
    opacity: 1;
}

/* Task list rows */
.process-task-row[b-64idmupco9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    border-bottom: 1px solid var(--surface-3, #f0f0f0);
    transition: background 0.15s ease;
    font-size: 0.82rem;
}

.process-task-row:hover[b-64idmupco9] {
    background: var(--surface-3, #f0f4ff);
}

.process-task-row:last-child[b-64idmupco9] {
    border-bottom: none;
}

.process-task-id[b-64idmupco9] {
    font-size: 0.7rem;
    color: #adb5bd;
    font-weight: 600;
    flex-shrink: 0;
}

.process-task-title[b-64idmupco9] {
    font-size: 0.82rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.process-stage-select[b-64idmupco9] {
    width: 140px;
    flex-shrink: 0;
    font-size: 0.72rem;
    padding: 2px 6px;
    height: 26px;
}

.process-task-remove-btn[b-64idmupco9] {
    opacity: 0;
    transition: opacity 0.15s;
    padding: 0 4px;
    font-size: 0.6rem;
    flex-shrink: 0;
}

.process-task-row:hover .process-task-remove-btn[b-64idmupco9] {
    opacity: 1;
}

.process-task-meta[b-64idmupco9] {
    font-size: 0.72rem;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Search results */
.process-search-results[b-64idmupco9] {
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.process-search-result[b-64idmupco9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid var(--surface-3, #f0f0f0);
}

.process-search-result:hover[b-64idmupco9] {
    background: #e8f4ff;
}

.process-search-result:last-child[b-64idmupco9] {
    border-bottom: none;
}
/* /Components/Shared/TaskTemplateStagesEditor.razor.rz.scp.css */
/* ===== Stages Editor ===== */
.stages-editor[b-krb0mmjwes] {
    border: 1px solid var(--border, #dee2e6);
    border-radius: 12px;
    background: var(--surface-2, #fafbfc);
    padding: 1rem;
}

.stages-editor-header[b-krb0mmjwes] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.stages-editor-title[b-krb0mmjwes] {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text, #1a1a2e);
}

.stages-editor-subtitle[b-krb0mmjwes] {
    font-size: 0.75rem;
    color: var(--text-muted, #6c757d);
    margin-top: 0.1rem;
}

.stages-empty[b-krb0mmjwes] {
    text-align: center;
    padding: 1.5rem;
    color: var(--text-muted, #6c757d);
    font-size: 0.85rem;
}

/* ===== Mini Pipeline Preview ===== */
.stages-preview[b-krb0mmjwes] {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e9ecef);
    border-radius: 10px;
    padding: 0.75rem;
    margin-bottom: 1rem;
}

.stages-preview-title[b-krb0mmjwes] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #6c757d);
    margin-bottom: 0.5rem;
}

.stages-preview-flow[b-krb0mmjwes] {
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    padding: 0.5rem 0;
    scrollbar-width: thin;
}

.stages-preview-node[b-krb0mmjwes] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    min-width: 70px;
    max-width: 90px;
    padding: 0.4rem 0.3rem;
    border-radius: 8px;
    background: var(--border, #e9ecef);
    font-size: 0.68rem;
    font-weight: 600;
    text-align: center;
    color: var(--text, #333);
    transition: transform 0.15s ease;
}

.stages-preview-root[b-krb0mmjwes] {
    background: linear-gradient(135deg, #ffc107, #ff9800);
    color: #fff;
    min-width: 60px;
}

.stages-preview-inactive[b-krb0mmjwes] {
    opacity: 0.45;
}

.stages-preview-order[b-krb0mmjwes] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #0d6efd;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 700;
}

.stages-preview-label[b-krb0mmjwes] {
    font-size: 0.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 80px;
}

.stages-preview-level[b-krb0mmjwes] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.stages-preview-parallel[b-krb0mmjwes] {
    border: 2px dashed #0d6efd;
    border-radius: 10px;
    padding: 0.35rem;
    background: rgba(13, 110, 253, 0.03);
}

.stages-preview-arrow[b-krb0mmjwes] {
    display: flex;
    align-items: center;
    min-width: 24px;
    padding: 0 0.1rem;
}

.stages-preview-arrow-line[b-krb0mmjwes] {
    height: 2px;
    flex: 1;
    min-width: 12px;
    background: #adb5bd;
}

.stages-preview-arrow-head[b-krb0mmjwes] {
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid #adb5bd;
}

/* ===== Stage Card ===== */
.stage-card[b-krb0mmjwes] {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #dee2e6);
    border-radius: 10px;
    margin-bottom: 0.75rem;
    transition: box-shadow 0.15s ease;
    overflow: hidden;
}

.stage-card:hover[b-krb0mmjwes] {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.stage-card-inactive[b-krb0mmjwes] {
    opacity: 0.6;
}

.stage-card-header[b-krb0mmjwes] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(135deg, var(--surface-2, #f8f9fa), #fff);
    border-bottom: 1px solid var(--surface-3, #f0f0f0);
}

.stage-card-number[b-krb0mmjwes] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--global-palette4), var(--global-palette5));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.82rem;
    flex-shrink: 0;
}

.stage-card-title-area[b-krb0mmjwes] {
    flex: 1;
    min-width: 0;
}

.stage-title-input[b-krb0mmjwes] {
    border: none !important;
    background: transparent !important;
    font-weight: 600;
    font-size: 0.88rem;
    padding: 0.2rem 0.4rem !important;
}

.stage-title-input:focus[b-krb0mmjwes] {
    background: var(--surface-2, #f8f9ff) !important;
    border: 1px solid #0d6efd !important;
    border-radius: 6px;
}

.stage-card-actions[b-krb0mmjwes] {
    display: flex;
    gap: 0.2rem;
    flex-shrink: 0;
}

.btn-icon[b-krb0mmjwes] {
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border, #dee2e6);
    border-radius: 6px;
    background: var(--surface, #fff);
    color: var(--text-muted, #6c757d);
    font-size: 0.78rem;
    transition: all 0.15s ease;
}

.btn-icon:hover[b-krb0mmjwes] {
    background: var(--surface-3, #f0f0f0);
    color: var(--text, #333);
}

.btn-icon-danger:hover[b-krb0mmjwes] {
    background: #fff5f5;
    color: #dc3545;
    border-color: #dc3545;
}

.stage-card-body[b-krb0mmjwes] {
    padding: 0.75rem;
}

/* ===== Dependency Chips ===== */
.stage-dep-section[b-krb0mmjwes] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--surface-2, #f8f9fa);
    border-radius: 8px;
}

.stage-dep-label[b-krb0mmjwes] {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted, #6c757d);
    white-space: nowrap;
    padding-top: 0.2rem;
}

.stage-dep-chips[b-krb0mmjwes] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
}

.stage-dep-chip[b-krb0mmjwes] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--surface-3, #e7f1ff);
    color: #0d6efd;
    border: 1px solid #b6d4fe;
}

.stage-dep-chip-root[b-krb0mmjwes] {
    background: linear-gradient(135deg, #fff3cd, #ffeeba);
    color: #856404;
    border-color: #ffc107;
}

.stage-dep-chip-name[b-krb0mmjwes] {
    font-weight: 400;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stage-dep-chip-remove[b-krb0mmjwes] {
    background: none;
    border: none;
    padding: 0;
    margin-left: 0.1rem;
    color: inherit;
    opacity: 0.5;
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
}

.stage-dep-chip-remove:hover[b-krb0mmjwes] {
    opacity: 1;
}

.stage-dep-add-btn[b-krb0mmjwes] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px dashed #adb5bd;
    background: var(--surface, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    color: var(--text-muted, #6c757d);
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.stage-dep-add-btn:hover[b-krb0mmjwes] {
    border-color: #0d6efd;
    color: #0d6efd;
    background: #f0f7ff;
}

.stage-dep-add-btn[b-krb0mmjwes]::after {
    display: none !important;
}

/* ===== Dependency Picker (Blazor-managed) ===== */
.stage-dep-picker[b-krb0mmjwes] {
    border: 1px solid var(--border, #dee2e6);
    border-radius: 8px;
    background: var(--surface, #fff);
    margin-top: 0.5rem;
    padding: 0.4rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.stage-dep-picker-header[b-krb0mmjwes] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid var(--surface-3, #f0f0f0);
    margin-bottom: 0.3rem;
}

.stage-dep-picker-item[b-krb0mmjwes] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    width: 100%;
    border: none;
    background: none;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    font-size: 0.8rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease;
}

.stage-dep-picker-item:hover[b-krb0mmjwes] {
    background: #f0f7ff;
}

.stage-dep-picker-item.active[b-krb0mmjwes] {
    background: var(--surface-3, #e7f1ff);
    font-weight: 600;
}

.form-label-sm[b-krb0mmjwes] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary, #495057);
    margin-bottom: 0.2rem;
}