:root{
    --dark:#1f1f1f;
    --accent:#008744;
    --accent-dark:#006d37;
    --text-light:#fff;
    --text-dark:#000;
    --svg-bg:#DBA85C;
}
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
body{background:linear-gradient(135deg,#101820,#1f2a37);color:var(--text-light);font-family:'Roboto',sans-serif;padding:5px;animation:fadeIn .5s ease}
body.urgent-bg{background:linear-gradient(135deg,#58181F,#420d15);transition:background 2s ease;}
.product{width:100%;max-width:350px;background-color:#222;border:1px solid #444;border-radius:12px;padding:8px;display:flex;gap:8px;position:relative;color:var(--text-light);box-shadow:0 6px 20px rgba(0,0,0,.4);margin:5px;}
.product.added{background:linear-gradient(145deg,var(--accent-dark),#00904b);animation:pop .3s ease forwards;}
.thumbnail-area{position:relative;width:134px;height:134px;flex-shrink:0;}
.svgBox{width:100%;height:100%;background:var(--svg-bg);border-radius:8px;display:flex;justify-content:center;align-items:center;overflow:hidden;margin:-3px 3px 3px -3px;}
.svgBox svg{width:100%;height:100%;object-fit:contain;}
.svgBox img{width:100%;height:100%;object-fit:contain;}
.numpad{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(20,20,20,.85);backdrop-filter:blur(5px);border-radius:8px;padding:5px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);gap:5px;opacity:0;transform:scale(.8);transform-origin:center;pointer-events:none;transition:opacity .25s ease-out,transform .25s ease-out;z-index:10;}
.numpad.visible{opacity:1;transform:scale(1);pointer-events:auto;}
.numpad button{background-color:#444;color:var(--text-light);border:none;border-radius:5px;font-size:1.2em;font-weight:700;cursor:pointer;transition:background-color .2s,transform .1s;}
.numpad button:active{transform:scale(.95);}
.numpad .numpad-action-btn{background-color:#dc3545;}
.numpad .numpad-confirm-btn{background-color:#28a745;}

#atelierTable .qtyWrap .numpad{
    top:auto;
    bottom:calc(100% + 6px);
    left:50%;
    transform:translateX(-50%) scale(.8);
    width:100%;
    height:auto;
    z-index:9999;
}
#transferTable{width:100%;max-width:350px;margin:0 auto 20px;border-collapse:separate;border-spacing:0 4px;background:var(--dark);border-radius:8px;overflow:visible;box-shadow:0 4px 12px rgba(0,0,0,.2);}
#transferTable th,#transferTable td{border:1px solid #444;padding:8px 6px;text-align:center;color:var(--text-light);background:#242424;}
#transferTable th{background:#333;}
#transferTable .previewCell{width:64px;}
#transferTable .modelDesc{font-size:0.7em;display:block;}
#transferTable .qtyWrap{position:relative;overflow:visible;}
#stockTable .qtyWrap,.stockTable .qtyWrap{position:relative;overflow:visible;}
#stockTable .qtyWrap .numpad,
.stockTable .qtyWrap .numpad{
    top:auto;
    bottom:calc(100% + 6px);
    left:50%;
    transform:translateX(-50%);
    width:256px;
    height:256px;
    z-index:9999;
}
#transferTable .stockHint{font-size:0.6em;display:block;color:#ccc;margin-top:2px;}
.blockedInfo{font-size:0.6em;color:#ffdf00;margin-top:2px;}
.stockBtn{
    font-size:0.6em;
    display:block;
    color:#ccc;
    margin:5px auto;
    background:#444;
    border:1px solid #666;
    border-radius:4px;
    padding:2px 4px;
    cursor:pointer;
}
.main-content-area{flex-grow:1;display:flex;flex-direction:column;justify-content:space-between;}
.top-section{display:flex;gap:8px;}
.bottom-actions-section{display:flex;gap:8px;align-items:center;}
.price-pills{display:flex;flex-direction:column;gap:4px;}
.price-pills .pill{width:35px;height:20px;display:flex;align-items:center;justify-content:center;background-color:#ffc107;color:#111;font-size:.8em;font-weight:700;border-radius:4px;cursor:pointer;transition:transform .1s,box-shadow .2s;}
.price-pills .pill:hover{transform:scale(1.05);box-shadow:0 2px 5px rgba(0,0,0,.3);}
.product-info-wrapper{flex-grow:1;}
.product-header{line-height:1.2;text-align:right;border-bottom:1px solid #444;padding-bottom:4px;}
.product-code{font-size:1.2em;font-weight:700;margin:0;}
.product-name{font-size:.8em;color:#ccc;}
.text-lines{font-size:.6em;line-height:1.4;padding-top:4px;}
.text-lines p{margin:0;}
.text-lines p:nth-child(1),
.text-lines p:nth-child(2){color:#ccc;}
.text-lines p:nth-child(3){color:#ffc107;}
.text-success{color:#28a745;}
.text-danger{color:#dc3545;}
.quantity-selector{display:flex;align-items:center;background-color:#1e1e1e;border-radius:6px;box-shadow:inset 0 1px 3px rgba(0,0,0,.5);height:32px;}
.quantity-selector button{width:28px;height:100%;border:none;background-color:transparent;color:var(--text-light);font-size:1.5em;font-weight:bold;cursor:pointer;transition:background-color .2s;}
.quantity-selector button:hover{background-color:rgba(255,255,255,.1);}
.quantity-selector .btn-minus{color:#dc3545;}
.quantity-selector .btn-plus{color:#28a745;}
.quantity-input{width:40px;height:100%;background-color:#3a3a3a;border:none;color:var(--text-light);text-align:center;font-size:1.1em;font-weight:700;-moz-appearance:textfield;cursor:pointer;}
.quantity-input::-webkit-outer-spin-button,.quantity-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.quantity-input:focus{outline:none;}
.addBtn{flex-grow:1;height:32px;border:2px solid #28a745;background:#28a745;color:#fff;font-size:1em;font-weight:700;border-radius:6px;cursor:pointer;transition:all .2s ease-in-out;text-transform:uppercase;}
.addBtn:hover{background-color:#2e8f49;box-shadow:0 0 15px rgba(40,167,69,.6);transform:translateY(-1px);}
.addBtn.deleteMode{background:#dc3545;border-color:#dc3545;}
.addBtn.deleteMode:hover{background-color:#c82333;box-shadow:0 0 15px rgba(220,53,69,.6);}
.gallery{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}
.gallery.grouped{display:flex;flex-direction:column;align-items:stretch;gap:10px;}
.gallery.grouped .products{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}
.gallery.grouped h3{width:100%;text-align:center;margin:10px 0;}
.gallery.grouped .product-code{margin:0;}

#titleBox{
    width:100%;
    max-width:350px;
    margin:0 auto 10px;
    border:1px solid #fff;
    text-align:center;
    font-size:1em;
    padding:4px 0;
    border-radius:8px;
    box-shadow:0 4px 8px rgba(0,0,0,.5);
}

.stockCard{grid-template-columns:150px 1fr;}
.stockCard .details{display:flex;flex-direction:column;justify-content:center;gap:6px;}

/* Preview for items in order table */
.orderPreview{width:64px;height:64px;background:var(--svg-bg);border-radius:6px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.orderPreview svg{width:100%;height:100%;object-fit:contain;}
.orderPreview img{width:100%;height:100%;object-fit:contain;}
.prodCell{display:flex;flex-wrap:wrap;gap:4px;}
.prodItem{display:flex;flex-direction:column;align-items:center;background:#333;padding:4px;border-radius:6px;}
.prodItem .prodCode{font-size:12px;font-weight:700;margin-top:2px;}
.prodItem .prodQty{font-size:12px;font-weight:bold;color:#ff0;}
.prodItem .stockInfo{font-size:9px;line-height:10px;text-align:center;margin-top:2px;}

/* Order table styling */
#orderTable{width:100%;max-width:350px;margin:0 auto 20px;border-collapse:separate;border-spacing:0 4px;background:var(--dark);border-radius:8px;overflow:visible;box-shadow:0 4px 12px rgba(0,0,0,.2);}
#orderTable th,#orderTable td{border:1px solid #444;padding:8px 6px;text-align:center;color:var(--text-light);background:#242424;}
#orderTable th{background:#333;color:var(--text-light);}
#orderTable .previewCell{width:64px;}
#orderTable .qtyWrap{position:relative;overflow:visible;}
#orderTable .qtyWrap .numpad{
    top:auto;
    bottom:calc(100% + 6px);
    left:50%;
    transform:translateX(-50%);
    width:128px;
    height:128px;
    z-index:9999;
}

/* Atelier transfer table styling */
#atelierTable{width:100%;max-width:350px;margin:0 auto 20px;border-collapse:separate;border-spacing:0 4px;background:var(--dark);border-radius:8px;overflow:visible;box-shadow:0 4px 12px rgba(0,0,0,.2);}
#atelierTable th,#atelierTable td{border:1px solid #444;padding:8px 6px;text-align:center;color:var(--text-light);background:#242424;}
#atelierTable th{background:#333;}
#atelierTable .previewCell{width:64px;}
#atelierTable .modelDesc{font-size:0.7em;display:block;}
#atelierTable .qtyWrap{position:relative;overflow:visible;}

/* Quantity input inside the order table */
#orderTable .qtyInput{
    width:40px;
    height:40px;
    font-size:20px;
    font-weight:700;
    text-align:center;
    border-radius:6px;
    background:#d1d1d1;
    color:#000;
}
#orderTable .qtyInput::-webkit-inner-spin-button,
#orderTable .qtyInput::-webkit-outer-spin-button{margin:0;}

.removeBtn{background:#ff6b6b;color:var(--text-light);border:none;padding:4px 8px;border-radius:4px;cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,.3);transition:transform .2s;}
#sendOrder{
    display:block;
    margin:10px auto;
    padding:10px 20px;
    background:var(--accent);
    color:var(--text-light);
    border:none;
    border-radius:6px;
    font-size:18px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 3px 6px rgba(0,0,0,.4);
    width:100%;
    max-width:350px;
}
#sendReport{display:block;margin:10px auto;padding:15px 30px;background:var(--accent);color:var(--text-light);border:none;border-radius:6px;font-size:22px;font-weight:800;cursor:pointer;box-shadow:0 4px 8px rgba(0,0,0,.5);width:100%;max-width:350px;}
#sendTransfer{display:block;margin:10px auto;padding:15px 30px;background:var(--accent);color:var(--text-light);border:none;border-radius:6px;font-size:22px;font-weight:800;cursor:pointer;box-shadow:0 4px 8px rgba(0,0,0,.5);width:100%;max-width:350px;}
.simple-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);display:flex;justify-content:center;align-items:center;z-index:15000;}
.simple-modal-content{background:#fff;color:#000;padding:20px;border-radius:8px;text-align:center;}
.modal-btn{padding:10px 20px;margin:5px;border:none;border-radius:6px;font-size:1em;font-weight:700;cursor:pointer}

#deadlineSection{
    margin:10px auto;
    width:100%;
    max-width:350px;
    text-align:center;
}
.notes-section{
    margin:10px auto;
    width:100%;
    max-width:350px;
    text-align:center;
}
.notes-section h3{
    margin-bottom:6px;
}
.notes-section textarea{
    width:100%;
    max-width:100%;
    background:#242424;
    color:#fff;
    border:1px solid #555;
    border-radius:6px;
    padding:6px;
}
.modern-date{
    width:220px;
    padding:6px 8px;
    background:#242424;
    color:#fff;
    border:1px solid #555;
    border-radius:6px;
}
#urgentContainer{
    margin-top:8px;
    padding:6px;
    border-radius:6px;
}
#urgentContainer.urgent-active{
    border:2px solid red;
}
.urgent-msg{
    background:none;
    color:#ff0;
    font-size:0.8em;
    margin-top:4px;
}
.modal-modify{background:#e67e22;color:#fff;}
.modal-send{background:#28a745;color:#fff;}
.modal-cancel{background:#6c757d;color:#fff;}
/* Modal product info */
#qtyModal .modal-product{margin-bottom:10px;}
#qtyModal .modal-thumb{width:256px;height:256px;margin:0 auto;}
#qtyModal .modal-thumb .svgBox{width:100%;height:100%;background:var(--svg-bg);border-radius:8px;}
#qtyModal .modal-thumb img{width:100%;height:100%;object-fit:contain;}
#qtyModal .modal-sku{font-weight:700;margin-top:5px;}
#qtyModal .modal-desc{font-size:0.5em;color:#ccc;}
#qtyModal .modal-warning{color:red;font-weight:700;margin-top:4px;}
#qtyModal .quantity-selector{margin:0 auto;}
#orderList{width:100%;border-collapse:separate;border-spacing:0 4px;background:var(--dark);margin-top:20px}
#orderList th,#orderList td{border:1px solid #444;padding:6px;color:var(--text-light);background:#242424;text-align:center}
.btnEdit{background:#3498db;color:#fff;padding:4px 8px;border-radius:4px;text-decoration:none;transition:transform .2s;display:inline-block;width:80px;margin:2px;text-align:center}
.btnEdit:active{transform:scale(.95)}
.cancelBtn{background:#c0392b;color:#fff;padding:4px 8px;border:none;border-radius:4px;display:inline-block;width:80px;margin:2px;cursor:pointer;text-align:center}
.cancelBtn:active{transform:scale(.95)}
.actionBtns{display:flex;flex-direction:column;align-items:center;gap:6px}
.actionBtns .btn{min-width:90px}
.btnOrange{background:#e67e22;color:#fff;padding:4px 8px;border-radius:4px;text-decoration:none;transition:transform .2s}
.btnOrange:active{transform:scale(.95)}
button{transition:transform .2s}
button:active{transform:scale(.95)}
.btnModify{background:var(--accent-dark);color:#fff;border:none;padding:4px 8px;border-radius:4px;cursor:pointer}
.btnDelete{background:#c0392b;color:#fff;border:none;padding:4px 8px;border-radius:4px;cursor:pointer}
.deleteOptions{display:flex;flex-direction:column;gap:6px}
.inactiv{color:#ff6b6b;}

/* Status buttons in orders list */
.statusBtns{display:flex;flex-direction:column;align-items:center}
.statusBtn{color:#fff;border:2px solid transparent;padding:4px 6px;margin:2px;border-radius:4px;cursor:pointer;min-width:110px;text-align:center}
.statusBtn[data-status="primita"]{background:#3498db}
.statusBtn[data-status="in productie"]{background:#e67e22}
.statusBtn[data-status="finalizata"]{background:#27ae60}
.statusBtn[data-status="livrata"]{background:#8e44ad}
.statusBtn[data-status="anulata"]{background:#c0392b}
.statusBtn.active{border-color:#fff;box-shadow:0 0 4px #fff}
.statusMsg{font-size:12px;color:#0f0;animation:fadeOut 2s forwards}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}

/* Dark theme table */
.dark-table{background-color:var(--dark);color:var(--text-light);border-collapse:separate;border-spacing:0 4px;}
.dark-table th,.dark-table td{border:1px solid #444;background:#242424;padding:8px;color:var(--text-light);text-align:center;vertical-align:middle;}
.dark-table th{background:#333;}
.dark-table tbody tr{transition:background .3s ease;}
.dark-table tbody tr:hover{background:#333;}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@keyframes pop{from{transform:scale(.95);}to{transform:scale(1);}}

/* Profile page */
.profile-card{background:#242424;padding:20px;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.4);width:360px;margin:20px auto;text-align:center;animation:fadeIn .5s ease;}
.profile-card h2,.profile-card h3{text-align:center;margin-bottom:20px;}
.profile-card .btn{box-shadow:0 2px 4px rgba(0,0,0,.3);}

/* Orders table adjustments */
.order-info{font-size:.63em}
.status-cell .order-status{margin-bottom:6px}

/* Login page */
.login-card{
    background:#242424;
    padding:20px;
    border-radius:8px;
    box-shadow:0 4px 12px rgba(0,0,0,.4);
    width:100%;
    max-width:400px;
    margin:auto;
    animation:fadeIn .5s ease;
}

/* Pages list table */
.pages-table td,.pages-table th{
    padding:6px 12px;
}

/* Stock editing inputs */
.stockInput{
    width:63px;
    height:34px;
    font-size:20px;
    font-weight:700;
    text-align:center;
    border:2px solid transparent;
    border-radius:6px;
    color:#fff;
}
.stockInput.modified{
    border-color:red;
}
.model-desc{
    font-size:12px;
}
.stockMsg{font-size:12px;color:#0f0;}

/* Filter buttons on stock report */
.filterBtn{
    background:#3498db;
    color:#fff;
    border:none;
    padding:6px 12px;
    margin:2px;
    border-radius:4px;
    cursor:pointer;
    font-weight:700;
    box-shadow:0 2px 4px rgba(0,0,0,.3);
}
.filterBtn.active{
    background:var(--accent);
}

.dark-table tr.rowDeficit td{
    background:#5a1313;
}
.dark-table tr.rowSurplus td{
    background:#143d14;
}
.dark-table tr.totalRow td{
    background:#333;
    font-weight:bold;
}
.dark-table tr.categoryRow th{
    background:#444;
    font-weight:bold;
}
.dark-table tr.subtotalRow td{
    background:#2a2a2a;
    font-weight:bold;
}

#queueTable{width:100%;margin:0 auto;}
#queueTable .qtyCell{font-size:20px;font-weight:700;}
#queueTable .editQtyInput{width:10ch;font-size:18px;}
#queueTable .statusSelect,#queueTable .statusSelect+button{font-size:12px;}
#queueTable .statusInfo{font-size:14px;}
.prioritySelect{font-size:12px;}

/* Container for desktop-only pages */
.desktop-container{
    width:100%;
    max-width:1880px;
    margin:0 auto;
}

/* Fade out table rows */
.fade-hide{
    opacity:0;
    height:0!important;
    margin:0!important;
    transition:opacity .4s ease,height .4s ease,margin .4s ease;
    overflow:hidden;
}


/* Stock necesar comenzi table */
.necesar-table{table-layout:fixed;}
.necesar-table th:nth-child(1),.necesar-table td:nth-child(1){width:120px;}
.necesar-table th:nth-child(2),.necesar-table td:nth-child(2){width:70px;}
.necesar-table th:nth-child(3),.necesar-table td:nth-child(3),
.necesar-table th:nth-child(4),.necesar-table td:nth-child(4),
.necesar-table th:nth-child(5),.necesar-table td:nth-child(5),
.necesar-table th:nth-child(6),.necesar-table td:nth-child(6),
.necesar-table th:nth-child(7),.necesar-table td:nth-child(7),
.necesar-table th:nth-child(8),.necesar-table td:nth-child(8){width:70px;}
.necesar-table th:nth-child(9),.necesar-table td:nth-child(9){width:250px;}
.necesar-table th:nth-child(10),.necesar-table td:nth-child(10){width:90px;}
.afterCell.negVal{background:#5a1313;color:yellow;font-weight:bold;}
.zeroStock{border:2px solid red;}
.negRow{outline:1px solid red;}
.necesar-table thead th{position:sticky;top:0;background:#333;z-index:2;}
.prodBtn{font-size:0.8em;display:block;color:#fff;margin:5px auto;background:#ff8800;border:1px solid #ff8800;border-radius:4px;padding:4px 8px;cursor:pointer;}
.necesar-table .qtyWrap{position:relative;overflow:visible;}
.necesar-table .qtyWrap .numpad{
    top:calc(100% + 6px);
    bottom:auto;
    left:50%;
    transform:translateX(-50%);
    width:128px;
    height:128px;
    z-index:9999;
}