/* =====================================================
   BARCODE SCANNER
   MAIN STYLES
===================================================== */


:root{


    --scanner-bg:#ffffff;

    --scanner-card:#1b1b1b;

    --scanner-border:#333333;

    --scanner-border-light:#2d2d2d;

    --scanner-text:#ffffff;

    --scanner-muted:#bdbdbd;

    --scanner-accent:#4f46e5;

    --scanner-success:#10b981;

    --scanner-warning:#f59e0b;

    --scanner-danger:#ef4444;


}





/* =====================================================
   INPUTS
===================================================== */


input,
select,
textarea{


    width:100%;

    padding:12px;

    border-radius:8px;

    border:1px solid var(--scanner-border);

    background:#202020;

    color:#fff;

    font-size:15px;

    box-sizing:border-box;


}



input:focus,
select:focus,
textarea:focus{


    outline:none;

    border-color:var(--scanner-accent);

    box-shadow:

        0 0 0 3px rgba(79,70,229,.2);


}





label{


    display:block;

    margin-top:15px;

    margin-bottom:8px;

    font-weight:600;


}




/* =====================================================
   SETTINGS GROUP
===================================================== */


.settings-group{


    margin-top:22px;

    padding:18px;

    border-radius:12px;

    border:1px solid var(--scanner-border-light);


}



.settings-group h3{


    margin:0 0 16px;

    font-size:16px;


}



.help-text{


    color:var(--scanner-muted);

    font-size:13px;

    margin-top:10px;


}





/* =====================================================
   DROP ZONE
===================================================== */


.drop-zone{


    margin-top:15px;

    min-height:130px;

    border:2px dashed #444;

    border-radius:12px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:8px;

    cursor:pointer;

    color:#ccc;

    transition:.25s;


}



.drop-zone:hover{


    border-color:var(--scanner-accent);

    background:#202020;


}



.drop-zone strong{


    font-size:16px;


}



.drop-zone span{


    font-size:13px;

    color:#999;


}





/* =====================================================
   OPTIONS
===================================================== */


.settings-option{


    display:flex;

    align-items:center;

    gap:10px;

    margin:14px 0;

    cursor:pointer;


}



.settings-option input{


    width:auto;

    accent-color:var(--scanner-accent);


}




/* =====================================================
   BUTTONS
===================================================== */


.btn-group{


    display:flex;

    flex-direction:column;

    gap:10px;

    margin-top:25px;


}



button{


    padding:12px 15px;

    border:none;

    border-radius:8px;

    background:var(--scanner-accent);

    color:#fff;

    font-size:15px;

    cursor:pointer;

    transition:.2s;


}



button:hover{


    transform:translateY(-2px);


}



button.secondary{


    background:#252525;

    border:1px solid #333;


}



button:disabled{


    opacity:.5;

    cursor:not-allowed;

    transform:none;


}





/* =====================================================
   PREVIEW AREA
===================================================== */


.scanner-preview-container{

    margin-top:20px;

    background:#f5f7fb;

    border:1px solid #d9e2ec;

    border-radius:16px;

    padding:20px;

    min-height:650px;

    display:flex;

}



.scanner-viewport{

    width:100%;
    height:520px;

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

    overflow:auto;

    background:#eef2f7;
    border:2px dashed #d7dce5;
    border-radius:14px;

    padding:20px;

    position:relative;

}

#previewCanvas{


    max-width:100%;

    height:auto;

    background:#fff;

    border-radius:8px;


}





/* =====================================================
   EMPTY STATE
===================================================== */


.empty-state{


    position:absolute;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    gap:10px;

    color:#888;


}



.empty-state strong{


    color:#ccc;

    font-size:18px;


}



.empty-state span{


    font-size:14px;


}



.hidden{


    display:none !important;


}





/* =====================================================
   PROGRESS
===================================================== */


.progress-container{


    margin-top:20px;

    padding:15px;

    background:#202020;

    border-radius:10px;

    border:1px solid #333;


}



.progress-header{


    display:flex;

    justify-content:space-between;

    margin-bottom:10px;

    color:#ccc;


}



.progress-bar{


    height:10px;

    background:#333;

    border-radius:10px;

    overflow:hidden;


}



.progress-fill{


    height:100%;

    width:0%;

    background:var(--scanner-accent);

    transition:.3s;


}






/* =====================================================
   RESULTS TABLE
===================================================== */


.results-table-container{


    margin-top:20px;

    overflow-x:auto;


}



.results-table{


    width:100%;

    border-collapse:collapse;

    background:#202020;


}



.results-table th{


    padding:12px;

    text-align:left;

    border-bottom:1px solid #333;

    color:#aaa;

    font-size:14px;


}



.results-table td{


    padding:12px;

    border-bottom:1px solid #333;

    color:#ddd;

    font-size:14px;


}



.results-table tr:hover{


    background:#252525;


}





/* =====================================================
   STATISTICS
===================================================== */


.barcode-stats{


    margin-top:25px;


}



.stats-row{


    display:grid;

    grid-template-columns:1fr 120px;

    padding:12px 0;

    border-bottom:1px solid #333;


}



.stats-row span{


    color:#bbb;


}



.stats-row strong{


    text-align:right;


}





/* =====================================================
   STATUS
===================================================== */


.status-ready{


    color:var(--scanner-success);


}



.status-working{


    color:var(--scanner-warning);


}



.status-error{


    color:var(--scanner-danger);


}



.status-success{


    color:#22c55e;


}





/* =====================================================
   LOADING EFFECT
===================================================== */


.loading{


    position:relative;

    pointer-events:none;


}



.loading::after{


    content:"";

    width:16px;

    height:16px;

    border:2px solid rgba(255,255,255,.3);

    border-top-color:white;

    border-radius:50%;

    position:absolute;

    right:15px;

    top:50%;

    animation:spin .7s linear infinite;


}



@keyframes spin{


    to{

        transform:translateY(-50%) rotate(360deg);

    }


}






/* =====================================================
   RESPONSIVE
===================================================== */


@media(max-width:1000px){


    .workspace-grid{


        grid-template-columns:1fr;


    }


}




@media(max-width:600px){


    .settings-group{


        padding:14px;


    }



    .stats-row{


        grid-template-columns:1fr 90px;

        font-size:14px;


    }



    .scanner-viewport{


        min-height:250px;

        padding:12px;


    }



}

/* =====================================================
   PREVIEW LIST
===================================================== */

.scanner-preview-list{

    flex:1;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:24px;

    height:610px;

    overflow-y:auto;

}

/* =====================================================
   PREVIEW PAGE
===================================================== */

.preview-page{

    display:flex;

    flex-direction:column;

    align-items:center;

    background:#fff;

    border:1px solid #dce3eb;

    border-radius:16px;

    padding:18px;

    box-shadow:0 8px 24px rgba(0,0,0,.06);

    max-width:100%;

}

.preview-title{

    width:100%;

    text-align:center;

    font-weight:600;

    margin-bottom:15px;

    color:#475569;

}

.preview-page canvas{

    display:block;

    max-width:100%;

    width:auto;

    height:auto;

    border-radius:10px;

    border:1px solid #dce3eb;

    background:#fff;

}

/* =====================================================
   EMPTY PREVIEW
===================================================== */

.preview-placeholder{

    width:100%;

    height:610px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.placeholder-card{

    width:min(420px,100%);

    background:#fff;

    border:2px dashed #cbd5e1;

    border-radius:18px;

    padding:50px 30px;

    text-align:center;

    color:#64748b;

    box-sizing:border-box;

}

.placeholder-card svg{

    color:#94a3b8;

    margin-bottom:18px;

}

.placeholder-card h3{

    margin:0 0 12px;

    color:#334155;

}

.placeholder-card p{

    margin:0;

    line-height:1.6;

    font-size:.95rem;

}

.result-row{

    cursor:pointer;

    transition:.2s;

}

.result-row:hover{

    background:#2d3748;

}

.preview-highlight{

    animation:previewFlash 2s ease;

}

@keyframes previewFlash{

    0%{

        box-shadow:
            0 0 0 5px #3b82f6;

        transform:scale(1.01);

    }

    100%{

        box-shadow:none;

        transform:scale(1);

    }

}