/* ==================================================
   OTALEX · Sales Associate v2
   ================================================== */

.seller-page{
    width:100%;
}

.seller-store-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:18px;

    margin-bottom:16px;
}

.seller-store-head h1{
    margin:0;

    font-size:29px;
    letter-spacing:-.04em;
}

.seller-store-head p{
    margin:6px 0 0;

    color:var(--muted);

    font-size:11px;
}

.seller-role-pill{
    flex-shrink:0;

    padding:7px 10px;

    border-radius:999px;

    background:#eeecff;
    color:#5949d4;

    font-size:9px;
    font-weight:900;
}


/* --------------------------------------------------
   Department selector
   -------------------------------------------------- */

.seller-department-setup{
    margin-bottom:14px;

    padding:17px;

    border:1px solid #e4e0ff;
    border-radius:17px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f7f5ff
        );
}

.seller-department-setup h2{
    margin:0 0 5px;

    font-size:15px;
}

.seller-department-setup p{
    margin:0 0 14px;

    color:var(--muted);

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

.seller-department-options{
    display:flex;
    flex-wrap:wrap;

    gap:8px;
}

.seller-department-chip{
    min-height:37px;

    padding:0 12px;

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

    background:#fff;

    color:#4b566b;

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

.seller-department-chip.selected{
    border-color:#7568f4;

    background:#eeecff;

    color:#5949d4;
}

.seller-department-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:10px;

    margin-top:14px;
}

.seller-department-current{
    display:flex;
    flex-wrap:wrap;
    align-items:center;

    gap:7px;

    margin-bottom:14px;
}

.seller-department-current-label{
    margin-right:3px;

    color:var(--muted);

    font-size:9px;
    font-weight:750;
}

.seller-small-chip{
    display:inline-flex;
    align-items:center;

    min-height:27px;

    padding:0 9px;

    border-radius:999px;

    background:#eef0f5;

    color:#465168;

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

.seller-change-dept{
    min-height:27px;

    padding:0 9px;

    border:0;
    border-radius:999px;

    background:#fff;

    color:var(--accent);

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


/* --------------------------------------------------
   Lookup / scanner
   -------------------------------------------------- */

.seller-lookup{
    margin-bottom:16px;

    padding:15px;

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

    background:#fff;
}

.seller-lookup-title{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    margin-bottom:10px;
}

.seller-lookup-title strong{
    font-size:12px;
}

.seller-lookup-title span{
    color:var(--muted);

    font-size:9px;
}

.seller-search-row{
    display:grid;

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

    gap:8px;
}

.seller-search-row input{
    width:100%;
    min-width:0;
    height:46px;

    padding:0 13px;

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

    background:#fff;

    color:var(--ink);
}

.seller-search-button,
.seller-scan-button{
    min-height:46px;

    padding:0 15px;

    border-radius:11px;

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

.seller-search-button{
    border:0;

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

.seller-scan-button{
    border:1px solid #d7d2ff;

    background:#f3f1ff;
    color:#5b4cdc;
}

.seller-scan-button b{
    margin-right:5px;

    font-size:14px;
}


/* --------------------------------------------------
   Task overview
   -------------------------------------------------- */

.seller-task-summary{
    display:grid;

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

    gap:10px;

    margin-bottom:14px;
}

.seller-task-summary-card{
    padding:12px 13px;

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

    background:#fff;
}

.seller-task-summary-card span{
    display:block;

    margin-bottom:4px;

    color:var(--muted);

    font-size:9px;
}

.seller-task-summary-card strong{
    font-size:19px;
}

.seller-task-summary-card.urgent strong{
    color:#d9514e;
}

.seller-task-summary-card.active strong{
    color:#6557f5;
}

.seller-task-summary-card.done strong{
    color:#168562;
}

.seller-section-head{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    margin:20px 0 10px;
}

.seller-section-head h2{
    margin:0;

    font-size:15px;
}

.seller-section-head span{
    color:var(--muted);

    font-size:9px;
}

.seller-task-list{
    display:flex;
    flex-direction:column;

    gap:10px;
}

.seller-task{
    position:relative;

    padding:15px;

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

    background:#fff;

    overflow:hidden;
}

.seller-task:before{
    content:"";

    position:absolute;

    left:0;
    top:0;
    bottom:0;

    width:4px;
}

.seller-task.priority-high:before{
    background:#e0645e;
}

.seller-task.priority-medium:before{
    background:#e0ad42;
}

.seller-task.priority-low:before{
    background:#43bd8f;
}

.seller-task.completed{
    opacity:.58;
}

.seller-task.completed:before{
    background:#43bd8f;
}

.seller-task-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;

    gap:12px;

    margin-bottom:11px;
}

.seller-task-product{
    min-width:0;
}

.seller-task-product strong{
    display:block;

    margin-bottom:4px;

    font-size:13px;
}

.seller-task-product span{
    display:block;

    color:var(--muted);

    font-size:9px;
}

.seller-task-priority{
    flex-shrink:0;

    padding:4px 7px;

    border-radius:999px;

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

    text-transform:uppercase;
}

.seller-task-priority.high{
    background:#fff0ef;
    color:#b8433f;
}

.seller-task-priority.medium{
    background:#fff4df;
    color:#94620d;
}

.seller-task-priority.low{
    background:#e8f8f2;
    color:#107056;
}

.seller-task-department{
    display:inline-flex;
    align-items:center;

    min-height:24px;

    margin-bottom:9px;
    padding:0 8px;

    border-radius:999px;

    background:#f1f3f7;

    color:#626d81;

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

.seller-action-title{
    margin-bottom:5px;

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

    color:var(--ink);
}

.seller-action-instruction{
    max-width:720px;

    color:#485368;

    font-size:11px;
    line-height:1.55;
}

.seller-task-source{
    margin-top:10px;

    color:var(--muted);

    font-size:8px;
}

.seller-confirmation{
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:8px;

    margin-top:13px;
    padding-top:12px;

    border-top:1px solid #eef1f5;
}

.seller-confirmation input,
.seller-confirmation select{
    min-width:120px;
    height:37px;

    padding:0 10px;

    border:1px solid #ccd4e0;
    border-radius:9px;

    background:#fff;

    font-size:10px;
}

.seller-task-button{
    min-height:37px;

    padding:0 12px;

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

    background:#fff;

    color:var(--ink);

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

.seller-task-button.primary{
    border-color:transparent;

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

.seller-task-button.done{
    border-color:#bee8d9;

    background:#ebf8f3;
    color:#107056;
}

.seller-empty{
    padding:30px 15px;

    border:1px dashed #d8dde7;
    border-radius:15px;

    text-align:center;

    color:var(--muted);

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


/* --------------------------------------------------
   Product results
   -------------------------------------------------- */

.seller-results{
    display:flex;
    flex-direction:column;

    gap:8px;

    margin-top:12px;
}

.seller-result{
    width:100%;

    display:grid;

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

    gap:12px;

    align-items:center;

    padding:13px;

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

    background:#fff;

    color:var(--ink);

    text-align:left;
}

.seller-result:hover{
    border-color:#c9c3ff;
}

.seller-result-title{
    min-width:0;
}

.seller-result-title strong{
    display:block;

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

    font-size:11px;
}

.seller-result-title span{
    display:block;

    margin-top:4px;

    color:var(--muted);

    font-size:9px;
}

.seller-result-price{
    flex-shrink:0;

    font-size:12px;
    font-weight:900;
}


/* --------------------------------------------------
   Seller product detail
   -------------------------------------------------- */

.seller-product{
    margin-top:14px;

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

    background:#fff;

    overflow:hidden;
}

.seller-product-head{
    padding:17px;

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

    background:
        linear-gradient(
            145deg,
            #fff,
            #f8f8fc
        );
}

.seller-product-head h2{
    margin:0 0 7px;

    font-size:19px;
    letter-spacing:-.025em;
}

.seller-product-price{
    font-size:17px;
    font-weight:900;
}

.seller-own-stock{
    display:grid;

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

    gap:14px;

    align-items:center;

    padding:18px;

    background:#f2f0ff;

    border-bottom:1px solid #dedaff;
}

.seller-own-stock span{
    display:block;

    color:#6b62a3;

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

.seller-own-stock strong{
    display:block;

    margin-top:4px;

    font-size:16px;
}

.seller-own-stock-qty{
    font-size:32px !important;
    line-height:1;

    color:#5547d1;
}

.seller-product-section{
    padding:16px;

    border-bottom:1px solid #edf0f4;
}

.seller-product-section:last-child{
    border-bottom:0;
}

.seller-product-section h3{
    margin:0 0 11px;

    font-size:12px;
}

.seller-other-stores{
    display:flex;
    flex-direction:column;
}

.seller-store-stock-row{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    padding:8px 0;

    border-bottom:1px solid #eef1f5;

    font-size:10px;
}

.seller-store-stock-row:last-child{
    border-bottom:0;
}

.seller-store-stock-row span{
    color:#4b566b;
}

.seller-store-stock-row strong{
    font-size:11px;
}

.seller-movement-row{
    display:grid;

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

    gap:10px;

    padding:7px 0;

    border-bottom:1px solid #eef1f5;

    font-size:9px;
}

.seller-movement-row:last-child{
    border-bottom:0;
}

.seller-movement-row span{
    color:var(--muted);
}

.seller-movement-row strong{
    min-width:45px;

    text-align:right;

    font-size:10px;
}

.seller-movement-delta{
    min-width:42px;

    text-align:right;

    font-weight:900;
}

.seller-movement-delta.up{
    color:#168562;
}

.seller-movement-delta.down{
    color:#d9514e;
}


/* --------------------------------------------------
   Scanner overlay
   -------------------------------------------------- */

.seller-scanner-overlay{
    position:fixed;
    inset:0;

    z-index:10000;

    display:flex;
    flex-direction:column;

    background:#07101f;

    color:#fff;
}

.seller-scanner-head{
    min-height:64px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    padding:
        env(safe-area-inset-top)
        16px
        0;

    background:#07101f;
}

.seller-scanner-head strong{
    font-size:13px;
}

.seller-scanner-close{
    width:40px;
    height:40px;

    border:1px solid rgba(255,255,255,.16);
    border-radius:12px;

    background:rgba(255,255,255,.08);

    color:#fff;

    font-size:20px;
}

.seller-scanner-body{
    position:relative;

    flex:1;

    display:grid;
    place-items:center;

    overflow:hidden;
}

.seller-scanner-video{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
}

.seller-scanner-shade{
    position:absolute;
    inset:0;

    background:
        rgba(3,8,17,.28);
}

.seller-scanner-frame{
    position:relative;
    z-index:2;

    width:min(82vw,460px);
    height:190px;

    border:2px solid rgba(255,255,255,.92);
    border-radius:20px;

    box-shadow:
        0 0 0 9999px
        rgba(0,0,0,.28);
}

.seller-scanner-line{
    position:absolute;

    left:8%;
    right:8%;
    top:50%;

    height:2px;

    background:#7d72ff;

    box-shadow:
        0 0 12px
        rgba(125,114,255,.9);

    animation:
        sellerScanLine
        1.6s
        ease-in-out
        infinite alternate;
}

@keyframes sellerScanLine{

    from{
        transform:translateY(-55px);
    }

    to{
        transform:translateY(55px);
    }
}

.seller-scanner-message{
    position:absolute;

    z-index:3;

    left:20px;
    right:20px;
    bottom:
        calc(
            22px +
            env(safe-area-inset-bottom)
        );

    padding:12px 14px;

    border-radius:13px;

    background:
        rgba(8,16,31,.78);

    backdrop-filter:blur(8px);

    text-align:center;

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


/* --------------------------------------------------
   Responsive
   -------------------------------------------------- */

@media(max-width:820px){

    .seller-store-head{
        display:block;
    }

    .seller-role-pill{
        display:inline-flex;

        margin-top:9px;
    }

    .seller-search-row{
        grid-template-columns:
            minmax(0,1fr)
            52px;
    }

    .seller-search-button{
        grid-column:
            1 / -1;
    }

    .seller-scan-button{
        padding:0;

        font-size:0;
    }

    .seller-scan-button b{
        margin:0;

        font-size:18px;
    }
}

@media(max-width:520px){

    .seller-task-summary{
        gap:7px;
    }

    .seller-task-summary-card{
        padding:10px;
    }

    .seller-task-summary-card strong{
        font-size:17px;
    }

    .seller-task{
        padding:13px;
    }

    .seller-action-title{
        font-size:13px;
    }

    .seller-confirmation{
        display:grid;
        grid-template-columns:1fr;
    }

    .seller-confirmation input,
    .seller-confirmation select,
    .seller-task-button{
        width:100%;
    }

    .seller-own-stock{
        padding:15px;
    }

    .seller-own-stock-qty{
        font-size:28px !important;
    }
}

@media(prefers-reduced-motion:reduce){

    .seller-scanner-line{
        animation:none;
    }
}