/* OTALEX · WeShoes Inventory Manager */

.ws-inv-results{
    display:flex;
    flex-direction:column;
    gap:7px;
    margin-top:10px;
}

.ws-inv-result{
    display:grid;
    grid-template-columns:
        58px
        minmax(0,1fr)
        auto;
    gap:10px;
    align-items:center;

    width:100%;
    padding:9px;

    border:1px solid var(--line);
    border-radius:12px;

    background:#fff;
    color:var(--ink);

    text-align:start;
}

.ws-inv-result-image{
    display:flex;
    align-items:center;
    justify-content:center;

    width:58px;
    height:58px;

    overflow:hidden;

    border:1px solid #edf0f4;
    border-radius:10px;
}

.ws-inv-result-image img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.ws-inv-result-copy{
    min-width:0;
}

.ws-inv-result-copy strong{
    display:block;

    font-size:10px;
    line-height:1.35;
}

.ws-inv-result-copy span{
    display:block;

    margin-top:3px;

    font-size:9px;
    color:var(--ink);
}

.ws-inv-result-copy small{
    display:block;

    margin-top:3px;

    font-size:8px;
    color:var(--muted);
}


.ws-inv-product{
    margin:13px 0;

    overflow:hidden;

    border:1px solid var(--line);
    border-radius:17px;

    background:#fff;
}

.ws-inv-product-image{
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    height:280px;

    padding:12px 16px;

    border-bottom:
        1px solid #edf0f4;

    background:#fff;
}

.ws-inv-product-image img{
    width:100%;
    height:100%;

    object-fit:contain;
}

.ws-inv-product-copy{
    padding:15px 16px;
}

.ws-inv-product-copy h2{
    margin:0 0 10px;

    font-size:17px;
    line-height:1.35;
}

.ws-inv-meta{
    display:flex;
    flex-direction:column;
    gap:5px;

    font-size:9px;
    color:var(--muted);
}

.ws-inv-meta strong{
    color:var(--ink);
}

.ws-inv-blind{
    margin-top:14px;

    padding:10px 12px;

    border:1px solid #ddd9ff;
    border-radius:11px;

    background:#f6f4ff;

    color:#5146c7;

    font-size:9px;
    line-height:1.45;
}

.ws-inv-count-label{
    display:block;

    margin-top:16px;
    margin-bottom:6px;

    font-size:10px;
    font-weight:800;
}

.ws-inv-count-row{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap:8px;
}

.ws-inv-count-input{
    width:100%;
    min-width:0;

    height:52px;

    padding:0 14px;

    border:2px solid #dce1eb;
    border-radius:12px;

    background:#fff;

    font-size:22px;
    font-weight:900;

    text-align:center;
}

.ws-inv-count-input:focus{
    outline:none;
    border-color:var(--accent);
}

.ws-inv-save{
    min-width:120px;

    padding:0 17px;

    border:0;
    border-radius:12px;

    background:var(--navy);
    color:#fff;

    font-weight:850;
}

.ws-inv-save:disabled{
    opacity:.55;
}


.ws-inv-save-result{
    display:grid;
    grid-template-columns:
        repeat(3,1fr);

    border-top:
        1px solid var(--line);

    background:#fafbfe;
}

.ws-inv-save-result > div{
    display:flex;
    flex-direction:column;
    align-items:center;

    gap:3px;

    padding:12px 8px;
}

.ws-inv-save-result span{
    font-size:8px;
    color:var(--muted);
}

.ws-inv-save-result strong{
    font-size:17px;
}

.ws-inv-save-result
strong.positive{
    color:var(--green);
}

.ws-inv-save-result
strong.negative{
    color:#b04b45;
}


.ws-inv-count-item{
    display:grid;
    grid-template-columns:
        50px
        minmax(0,1fr)
        auto;

    gap:9px;
    align-items:center;

    padding:9px 0;

    border-bottom:
        1px solid #edf0f4;
}

.ws-inv-count-item:last-child{
    border-bottom:0;
}

.ws-inv-count-thumb{
    display:flex;
    align-items:center;
    justify-content:center;

    width:50px;
    height:50px;

    overflow:hidden;

    border:1px solid #edf0f4;
    border-radius:9px;
}

.ws-inv-count-thumb img{
    width:100%;
    height:100%;

    object-fit:contain;
}

.ws-inv-count-product{
    min-width:0;
}

.ws-inv-count-product strong{
    display:block;

    overflow:hidden;

    font-size:9px;

    white-space:nowrap;
    text-overflow:ellipsis;
}

.ws-inv-count-product span,
.ws-inv-count-product small{
    display:block;

    margin-top:2px;

    color:var(--muted);
    font-size:8px;
}

.ws-inv-count-values{
    display:flex;
    align-items:center;

    gap:8px;

    font-size:11px;
}

.ws-inv-count-values b{
    min-width:30px;

    text-align:end;
}

.ws-inv-count-values
b.positive{
    color:var(--green);
}

.ws-inv-count-values
b.negative{
    color:#b04b45;
}

.ws-inv-complete-summary{
    display:flex;
    align-items:baseline;

    gap:6px;

    margin-top:12px;
}

.ws-inv-complete-summary strong{
    font-size:24px;
}


@media(max-width:520px){

    .ws-inv-product-image{
        height:300px;
    }

    .ws-inv-count-row{
        grid-template-columns:1fr;
    }

    .ws-inv-save{
        height:48px;
        width:100%;
    }

    .ws-inv-save-result{
        grid-template-columns:
            repeat(3,1fr);
    }
}

/* WeShoes Inventory UX v2 */

.ws-inv-product.saved
.ws-inv-blind,

.ws-inv-product.saved
.ws-inv-count-label,

.ws-inv-product.saved
.ws-inv-count-row{
    display:none;
}

.ws-inv-after-save{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;

    padding:13px 16px 15px;

    border-top:
        1px solid #edf0f4;

    background:#fff;
}

.ws-inv-saved-message{
    color:var(--green);

    font-size:10px;
    font-weight:850;
}

.ws-inv-next{
    min-height:42px;

    padding:0 18px;

    border:0;
    border-radius:11px;

    background:var(--navy);
    color:#fff;

    font-size:10px;
    font-weight:850;
}


/* Recent counts: Counted / System / Difference */

.ws-inv-count-values{
    display:grid;

    grid-template-columns:
        repeat(3,auto);

    gap:12px;

    align-items:center;
}

.ws-inv-count-values > div{
    display:flex;
    flex-direction:column;
    align-items:flex-end;

    gap:2px;
}

html[dir="rtl"]
.ws-inv-count-values > div{
    align-items:flex-start;
}

.ws-inv-count-values small{
    color:var(--muted);

    font-size:7px;
    font-weight:500;
}

.ws-inv-count-values strong,
.ws-inv-count-values b{
    min-width:0;

    font-size:10px;
    font-weight:850;

    text-align:inherit;
}


@media(max-width:520px){

    .ws-inv-after-save{
        display:block;
    }

    .ws-inv-next{
        width:100%;

        margin-top:10px;
    }

    .ws-inv-count-item{
        grid-template-columns:
            46px
            minmax(0,1fr);
    }

    .ws-inv-count-values{
        grid-column:
            1 / -1;

        grid-template-columns:
            repeat(3,1fr);

        gap:6px;

        padding:
            7px
            0
            2px;
    }

    .ws-inv-count-values > div,
    html[dir="rtl"]
    .ws-inv-count-values > div{
        align-items:center;
    }
}