*, *::before, *::after{box-sizing: border-box;margin: 0;padding: 0;} html{height: 100%;scroll-behavior: smooth;} body{font-family: 'Roboto', sans-serif;background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);color: #e0e0ff;line-height: 1.6;display: flex;flex-direction: column;min-height: 100%;font-size: 15px;} ::-webkit-scrollbar{width: 10px;height: 10px;} ::-webkit-scrollbar-track{background: #282a36;border-radius: 5px;} ::-webkit-scrollbar-thumb{background-color: #6272a4;border-radius: 5px;border: 2px solid #282a36;} ::-webkit-scrollbar-thumb:hover{background-color: #bd93f9;} .main-content{flex: 1;padding-top: 20px;padding-bottom: 80px;} .container{max-width: 1600px;margin: 20px auto;padding: 25px;background: rgba(40, 42, 54, 0.92);border-radius: 12px;box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);border: 1px solid #44475a;} .layout-grid{display: grid;grid-template-columns: minmax(400px, 1fr) 2fr;gap: 25px;} .main-header{display: flex;justify-content: space-between;align-items: center;margin-bottom: 30px;padding-bottom: 15px;border-bottom: 1px solid #44475a;} h1{font-family: 'Orbitron', sans-serif;font-size: 2.2rem;font-weight: 700;color: #f8f8f2;display: inline-flex;align-items: center;gap: 10px;text-shadow: 0 0 5px rgba(80, 250, 123, 0.5);} h1 .fa-scissors{color: #50fa7b;} h1 .title-highlight{color: #50fa7b;font-weight: 800;} .pro-edition{font-size: 0.6em;color: #bd93f9;vertical-align: super;margin-left: 5px;font-weight: 500;} .save-status{display: inline-flex;align-items: center;gap: 8px;padding: 5px 12px;border-radius: 15px;font-size: 0.9em;font-weight: 500;transition: all 0.3s ease;} .save-status i{font-size: 1em;} .save-status.unsaved{background-color: rgba(255, 184, 108, 0.15);color: #ffb86c;border: 1px solid #ffb86c;} .save-status.unsaved i{color: #ffb86c;} .save-status.saved{background-color: rgba(139, 233, 253, 0.15);color: #8be9fd;border: 1px solid #8be9fd;} .save-status.saved i{color: #8be9fd;} .card{background: rgba(68, 71, 90, 0.75);padding: 20px;margin-bottom: 20px;border-radius: 8px;box-shadow: inset 0 1px 3px rgba(0,0,0,0.3), 0 2px 5px rgba(0,0,0,0.2);border: 1px solid rgba(189, 147, 249, 0.1);transition: all 0.3s ease;} .card:hover{border-color: rgba(189, 147, 249, 0.3);box-shadow: inset 0 1px 3px rgba(0,0,0,0.3), 0 4px 10px rgba(0,0,0,0.25);} h2{font-family: 'Roboto', sans-serif;font-size: 1.4rem;font-weight: 500;color: #f8f8f2;margin-bottom: 18px;padding-bottom: 8px;border-bottom: 1px solid #6272a4;display: flex;align-items: center;gap: 10px;} h2 .icon-purple{color: #bd93f9;} h2 .icon-cyan{color: #8be9fd;} h2 .icon-pink{color: #ff79c6;} h2 .icon-yellow{color: #f1fa8c;} h2 .icon-secondary{color: #6272a4;} h2 .icon-green{color: #50fa7b;} .icon-error{color: #ff5555;} .icon-warn{color: #ffb86c;} .icon-unplaced{color: #f1fa8c;} .form-row{display: flex;flex-wrap: wrap;gap: 15px;margin-bottom: 15px;} .form-group{flex: 1;min-width: 120px;} .form-group.quantity-group{flex: 0 1 80px;min-width: 70px;} label{display: block;margin-bottom: 6px;font-weight: 500;color: #bd93f9;font-size: 0.9em;} input[type="text"], input[type="number"], select{width: 100%;padding: 10px 12px;background-color: #282a36;border: 1px solid #6272a4;border-radius: 5px;color: #f8f8f2;font-size: 1rem;transition: border-color 0.3s ease, box-shadow 0.3s ease;outline: none;} input[type="checkbox"]{width: auto;margin-right: 8px;vertical-align: middle;cursor: pointer;accent-color: #bd93f9;} .form-group > label[for="allowRotation"]{color: #e0e0ff;display: flex;align-items: center;cursor: pointer;} input[type="text"]:focus, input[type="number"]:focus, select:focus{border-color: #ff79c6;box-shadow: 0 0 0 2px rgba(255, 121, 198, 0.3);} input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button{-webkit-appearance: none;margin: 0;} input[type=number]{-moz-appearance: textfield;} select:disabled{background-color: #44475a !important;color: #6272a4 !important;cursor: not-allowed !important;opacity: 0.7 !important;} .single-piece-input-area{display: flex;align-items: flex-end;gap: 10px;flex-wrap: wrap;} .add-piece-btn{padding: 9px 15px !important;flex-shrink: 0;height: 40px;background-color: #bd93f9;color: #282a36;font-weight: 500;} .add-piece-btn:hover{background-color: #caa9fa;} .pieces-header{display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;} .pieces-header h2{margin-bottom: 0;border-bottom: none;} .small-btn{padding: 5px 10px !important;font-size: 0.8em !important;} #clearAllPiecesBtn{background-color: #ff5555;color: #f8f8f2;} #clearAllPiecesBtn:hover{background-color: #ff7b72;} #clearAllPiecesBtn:disabled{background-color: #6272a4;color: #44475a;} .piece-display-list{max-height: 300px;overflow-y: auto;background-color: rgba(40, 42, 54, 0.7);border: 1px dashed #6272a4;border-radius: 5px;padding: 10px;} .piece-display-item{display: flex;justify-content: space-between;align-items: center;background-color: #44475a;padding: 8px 12px;margin-bottom: 8px;border-radius: 4px;border-left: 4px solid #8be9fd;font-size: 0.95em;transition: background-color 0.2s ease;} .piece-display-item:hover{background-color: #6272a4;} .piece-info span{margin-right: 15px;} .piece-info .dim{color: #f1fa8c;font-weight: 500;} .piece-info .qty{color: #ffb86c;} .piece-info .name{color: #e0e0ff;font-style: italic;font-size: 0.9em;} .remove-piece-btn{background: none;border: none;color: #ff5555;font-size: 1.2em;cursor: pointer;transition: color 0.2s ease, transform 0.2s ease;padding: 2px 5px;line-height: 1;} .remove-piece-btn:hover{color: #ff7b72;transform: scale(1.2);} .button-group{display: flex;flex-wrap: wrap;gap: 10px;margin-bottom: 20px;} .button-group.actions-primary{gap: 15px;} .section-subtitle{font-size: 0.95em;font-weight: 500;color: #8be9fd;margin-top: 15px;margin-bottom: 8px;padding-bottom: 3px;border-bottom: 1px dotted #6272a4;display: block;} .control-button{background-color: #6272a4;color: #f8f8f2;border: none;border-radius: 5px;padding: 10px 18px;font-size: 0.95rem;font-weight: 500;cursor: pointer;display: inline-flex;align-items: center;justify-content: center;gap: 8px;text-align: center;transition: all 0.2s ease-out;box-shadow: 0 2px 4px rgba(0,0,0,0.2);flex-grow: 0;flex-shrink: 0;} .control-button i{line-height: 1;} .control-button:not(:disabled):hover{transform: translateY(-2px);box-shadow: 0 4px 8px rgba(0,0,0,0.3);filter: brightness(1.15);} .control-button:not(:disabled):active{transform: translateY(0px);box-shadow: 0 1px 2px rgba(0,0,0,0.2);filter: brightness(0.95);} .control-button:disabled{background-color: #44475a !important;color: #6272a4 !important;cursor: not-allowed;box-shadow: none;transform: none;filter: none;} .control-button:disabled i{color: #6272a4 !important;} .control-button.optimize{background-color: #50fa7b;color: #282a36;} .control-button.clear{background-color: #ffb86c;color: #282a36;} .control-button.secondary{background-color: #6272a4;color: #f8f8f2;} .control-button.save{background-color: #8be9fd;color: #282a36;} .control-button.load{background-color: #bd93f9;color: #f8f8f2;} .control-button.excel{background-color: #1D8B45;color: #f8f8f2;} .control-button.save-local{background-color: #8be9fd;color: #282a36;} .control-button.load-local{background-color: #ffb86c;color: #282a36;} .control-button.print{background-color: #f1fa8c;color: #282a36;} .control-button.large-btn{padding: 12px 25px;font-size: 1.1rem;flex-grow: 1;} .button-group.actions-secondary{display: grid;grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));gap: 12px;margin-bottom: 20px;align-items: stretch;} .button-group.actions-secondary .control-button, .button-group.actions-secondary label.control-button{width: 100%;height: 100%;margin: 0;padding: 12px 15px;font-size: 0.9rem;display: inline-flex;align-items: center;justify-content: center;} .button-group.actions-output{display: flex;flex-wrap: wrap;gap: 12px;margin-bottom: 20px;align-items: stretch;} .button-group.actions-output .control-button{flex-basis: 0;flex-grow: 1;flex-shrink: 1;padding: 12px 15px;font-size: 0.9rem;min-width: 130px;display: inline-flex;align-items: center;justify-content: center;} .button-group.actions-output .control-button:disabled{flex-grow: 0;min-width: 130px;opacity: 0.7;pointer-events: none;} @media (max-width: 420px){.button-group.actions-secondary{grid-template-columns: 1fr;} .button-group.actions-output .control-button{flex-basis: 100%;}} .label-print-options{margin-top: 15px;padding-top: 12px;border-top: 1px dashed #6272a4;} #labelSheetSelector{margin-top: 5px;} #labelPrintError{margin-top: 8px;} .placeholder-text{color: #6272a4;font-style: italic;text-align: center;padding: 20px;font-size: 0.9em;} .results-card h2{margin-bottom: 10px;} #printImageContainer, #printPieceListContainer, #printLabelsContainer{display: none;width: 100%;} .waste-info-box{background-color: rgba(40, 42, 54, 0.9);border: 1px solid #6272a4;padding: 12px 15px;margin-bottom: 15px;border-radius: 5px;font-size: 0.95em;border-left: 5px solid #50fa7b;line-height: 1.4;} .waste-info-box strong{color: #f1fa8c;} .waste-info-box .value-ok{color: #50fa7b;font-weight: bold;} .waste-info-box .value-warn{color: #ffb86c;font-weight: bold;} .waste-info-box .value-bad{color: #ff5555;font-weight: bold;} .cut-plan-output-area{display: flex;flex-wrap: wrap;gap: 20px;padding: 10px 0;min-height: 200px;position: relative;border-radius: 5px;background: rgba(0, 0, 0, 0.1);padding: 15px;justify-content: center;} .sheet-wrapper{display: flex;flex-direction: column;align-items: center;margin-bottom: 15px;} .sheet-label{font-size: 0.9em;font-weight: 500;color: #8be9fd;margin-bottom: 5px;background: #282a36;padding: 2px 8px;border-radius: 3px;} .sheet-container{border: 2px solid #8be9fd;background-color: rgba(40, 42, 54, 0.6);position: relative;overflow: hidden;box-shadow: 0 0 10px rgba(139, 233, 253, 0.2);} .piece-rectangle{position: absolute;border: 1px solid rgba(248, 248, 242, 0.5);cursor: default;display: flex;align-items: center;justify-content: center;overflow: hidden;transition: all 0.1s ease-in-out;box-sizing: border-box;} .piece-label{font-size: 10px;font-weight: 500;color: #f8f8f2;background-color: rgba(40, 42, 54, 0.75);padding: 1px 3px;border-radius: 2px;white-space: nowrap;text-align: center;position: relative;z-index: 1;} .piece-label .rotated-symbol{color: #ffb86c;font-weight: bold;font-size: 0.9em;margin-left: 2px;} .piece-rectangle.dark-text .piece-label{color: #282a36;background-color: rgba(248, 248, 242, 0.75);} .error-message, .info-message{display: block;padding: 10px 15px;margin-top: 10px;border-radius: 4px;font-size: 0.9em;border: 1px solid transparent;position: relative;padding-left: 35px;line-height: 1.4;} .error-message::before, .info-message::before{font-family: "Font Awesome 6 Free";font-weight: 900;position: absolute;left: 12px;top: 50%;transform: translateY(-50%);font-size: 1.1em;} .error-message{background-color: rgba(255, 85, 85, 0.15);color: #ff8787;border-color: rgba(255, 85, 85, 0.4);} .error-message::before{content: "\f071";color: #ff5555;} .error-message ul, .info-message ul{list-style-position: inside;padding-left: 5px;margin-top: 5px;} .error-message strong, .info-message strong{color: inherit;} .info-message{background-color: rgba(80, 250, 123, 0.1);color: #72f1a6;border-color: rgba(80, 250, 123, 0.4);} .info-message::before{content: "\f05a";color: #50fa7b;} footer{background-color: #1f212b;color: #bd93f9;text-align: center;padding: 15px 0;margin-top: auto;font-size: 0.85em;border-top: 1px solid #44475a;} footer p{margin-bottom: 5px;} footer a{color: #8be9fd;text-decoration: none;transition: color 0.3s ease;margin: 0 8px;} footer a:hover{color: #ff79c6;text-decoration: underline;} @media print{body{background: #ffffff !important;color: #000000 !important;font-size: 10pt;font-family: sans-serif;-webkit-print-color-adjust: exact !important;print-color-adjust: exact !important;} html, body{height: auto;min-height: 0;} @page{margin: 15mm;size: A4 portrait;} *{box-shadow: none !important;text-shadow: none !important;} .container{margin: 0 !important;padding: 0 !important;border: none !important;background: none !important;max-width: 100% !important;width: 100% !important;} .card{border: none !important;padding: 0 !important;background: none !important;box-shadow: none !important;margin-bottom: 10mm !important;page-break-inside: avoid;} a, a:visited{text-decoration: none !important;color: #000 !important;} h2, h3{page-break-after: avoid;} .main-header, footer, .input-column .card:not(.piece-list-card), .input-column .card .form-row, .single-piece-input-area, label, input[type=text], input[type=number], input[type=checkbox], .add-piece-btn, .piece-display-list, .pieces-header #clearAllPiecesBtn, .actions-card, #saveStatus, .results-card #cutPlanOutput, .waste-info-box, .card h2 i, .placeholder-text{display: none !important;} .layout-grid{grid-template-columns: 1fr !important;gap: 0 !important;} .input-column, .results-column{width: 100%;display: block !important;} #resultsSection > h2, .piece-list-card > .pieces-header > h2{display: block !important;font-size: 14pt !important;color: #000 !important;border-bottom: 1px solid #ccc !important;margin-bottom: 8mm !important;padding-bottom: 3mm !important;font-family: sans-serif;font-weight: bold;width: 100% !important;background: none !important;text-align: left !important;} body.printing-plan #printPieceListContainer, body.printing-plan #printLabelsContainer{display: none !important;} body.printing-plan .piece-list-card{display: none !important;} body.printing-plan #resultsSection > h2{display: block !important;} body.printing-plan #printImageContainer{display: block !important;width: 100% !important;margin-top: 0 !important;page-break-before: auto;font-family: sans-serif !important;background: #fff !important;color: #000 !important;} #printImageContainer h3, #printImageContainer p, #printImageContainer .print-info-line{display: block !important;color: #000 !important;font-size: 9pt !important;font-family: sans-serif !important;margin-bottom: 2mm !important;padding: 0 !important;font-weight: normal !important;text-align: left !important;background: none !important;} #printImageContainer h3{font-size: 11pt !important;font-weight: bold !important;margin-bottom: 4mm !important;} #printImageContainer p strong, #printImageContainer .print-info-line strong{font-weight: bold !important;color: #000 !important;} #printImageContainer p small, #printImageContainer .print-info-line small{font-size: 7pt !important;color: #333 !important;} #printImageContainer hr{display: block !important;border: none !important;border-top: 0.5pt solid #ccc !important;margin: 4mm 0 !important;padding: 0 !important;height: 0 !important;width: 100% !important;} #printImageContainer #print-sheets-area{display: flex !important;flex-wrap: wrap !important;justify-content: flex-start !important;gap: 5mm !important;margin-top: 5mm !important;padding: 0 !important;width: 100% !important;} #printImageContainer .sheet-wrapper.print-view{display: block !important;page-break-inside: avoid !important;border: 0.5pt solid #aaa !important;padding: 2mm !important;margin: 0 0 3mm 0 !important;background: #fff !important;width: auto !important;box-shadow: none !important;} #printImageContainer .sheet-label.print-view{display: block !important;font-size: 8pt !important;color: #000 !important;font-weight: bold !important;background: none !important;margin: 0 0 1.5mm 0 !important;padding: 0 !important;text-align: left !important;} #printImageContainer .sheet-container.print-view{display: block !important;border: 0.5pt solid #666 !important;position: relative !important;background: #fdfdfd !important;overflow: hidden !important;margin: 0 !important;padding: 0 !important;box-shadow: none !important;} #printImageContainer .piece-rectangle.print-view{display: flex !important;align-items: center !important;justify-content: center !important;position: absolute !important;border: 0.2pt solid #333 !important;background-color: #eee !important;overflow: hidden !important;box-sizing: border-box !important;box-shadow: none !important;} #printImageContainer .piece-label.print-label{display: block !important;font-size: 6pt !important;line-height: 1.1 !important;font-family: sans-serif !important;font-weight: normal !important;color: #000 !important;background: rgba(255, 255, 255, 0.65) !important;padding: 0 1px !important;margin: 0 !important;text-align: center !important;white-space: nowrap !important;position: relative !important;z-index: 5 !important;} #printImageContainer .piece-label.print-label .rotated-symbol{color: #d10000 !important;font-weight: bold !important;font-size: 1.1em !important;margin-left: 1px !important;display: inline !important;} body.printing-piece-list #printImageContainer, body.printing-piece-list #printLabelsContainer, body.printing-piece-list #resultsSection{display: none !important;} body.printing-piece-list .piece-list-card{display: block !important;margin-bottom: 0 !important;} body.printing-piece-list .piece-list-card > .pieces-header > h2{display: flex !important;align-items: center !important;} body.printing-piece-list #printPieceListContainer{display: block !important;width: 100%;margin: 0;padding: 0;position: static;font-family: sans-serif;} #printPieceListContainer h2, #printPieceListContainer p.print-list-info{color: #000 !important;margin-bottom: 5px;font-size: 9pt;font-family: sans-serif;font-weight: normal;border: none;text-align: left;display: block !important;background: none !important;} #printPieceListContainer h2{font-size: 11pt !important;font-weight: bold !important;margin-bottom: 4mm !important;} #printPieceListContainer p.print-list-info strong{font-weight: bold;} table.print-table{width: 100%;border-collapse: collapse;margin-top: 5mm;font-size: 9pt;font-family: sans-serif;page-break-inside: auto;} table.print-table th, table.print-table td{border: 1px solid #999;padding: 1.5mm 2mm;text-align: left;vertical-align: top;page-break-inside: avoid;word-break: break-word;color: #000 !important;background: #fff !important;} table.print-table th{background-color: #eee !important;font-weight: bold;text-align: center;} table.print-table td:nth-child(1), table.print-table td:nth-child(2), table.print-table td:nth-child(3), table.print-table td:nth-child(4){text-align: center;} table.print-table tr:nth-child(even) td{background-color: #f9f9f9 !important;} table.print-table tfoot td{font-weight: bold !important;background-color: #f0f0f0 !important;border-top: 1px solid #666 !important;} table.print-table caption{caption-side: bottom;margin-top: 3mm;font-style: italic;font-size: 8pt;color: #555;text-align: right;} body.printing-labels #printLabelsContainer{display: flex !important;flex-direction: column !important;justify-content: flex-start !important;align-items: flex-start !important;gap: 3mm !important;width: auto !important;max-width: 100% !important;margin: 0 auto !important;padding: 0 !important;background: #fff !important;color: #000 !important;font-family: sans-serif !important;} body.printing-labels .printable-label{width: 63.5mm !important;height: 37mm !important;display: flex !important;flex-direction: column !important;justify-content: space-between !important;border: 0.2pt solid #999 !important;padding: 1.5mm !important;background: #fff !important;color: #000 !important;font-family: sans-serif !important;font-size: 8pt !important;page-break-inside: avoid !important;box-sizing: border-box !important;overflow: hidden !important;margin: 0 !important;} body.printing-labels .printable-label .label-header{font-size: 6.5pt !important;text-align: center !important;border-bottom: 0.2pt solid #ccc !important;padding-bottom: 0.5mm !important;margin-bottom: 1mm !important;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;flex-shrink: 0;} body.printing-labels .printable-label .label-header .client-name, body.printing-labels .printable-label .label-header .project-name{color: #000 !important;} body.printing-labels .printable-label .label-dims{font-size: 11pt !important;font-weight: bold !important;text-align: center !important;line-height: 1.1 !important;color: #000 !important;flex-grow: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;} body.printing-labels .printable-label .label-dims > div{font-size: 7pt !important;font-weight: normal !important;margin-top: 0.5mm !important;color: #333 !important;} body.printing-labels .printable-label .label-dims .rotated-symbol{color: #cc0000 !important;font-weight: bold !important;font-size: 0.9em !important;margin-left: 2px !important;display: inline !important;} body.printing-labels .printable-label .label-piece-id{font-size: 6pt !important;text-align: right !important;color: #555 !important;margin-top: auto;padding-top: 0.5mm !important;flex-shrink: 0;line-height: 1 !important;}} @media (max-width: 1200px){.container{max-width: 95%;padding: 20px;} .layout-grid{grid-template-columns: minmax(350px, 1.5fr) 2fr;}} @media (max-width: 992px){.layout-grid{grid-template-columns: 1fr;gap: 20px;} .input-column, .results-column{width: 100%;} h1{font-size: 1.8rem;} h2{font-size: 1.2rem;} .main-header{flex-direction: column;align-items: flex-start;gap: 10px;} .control-button.large-btn{padding: 10px 20px;font-size: 1rem;} .piece-display-list{max-height: 250px;}} @media (max-width: 768px){body{font-size: 14px;} .container{padding: 15px;} h1{font-size: 1.6rem;} .form-row{flex-direction: column;gap: 10px;} .form-group{margin-bottom: 10px;} .single-piece-input-area{flex-wrap: wrap;} .single-piece-input-area .form-group{min-width: calc(50% - 10px);flex-basis: calc(50% - 10px);flex-grow: 1;} .add-piece-btn{width: 100%;margin-top: 10px;} .control-button{padding: 9px 15px;font-size: 0.9rem;} .cut-plan-output-area{gap: 25px;} .sheet-container{max-width: 95%;} .sheet-wrapper{width: 100%;}} @media (max-width: 480px){h1{font-size: 1.4rem;} .container{padding: 10px;border-radius: 8px;} .card{padding: 15px;} h2{font-size: 1.1rem;} .main-header{align-items: center;text-align: center;} .save-status{font-size: 0.8em;padding: 4px 8px;} .single-piece-input-area .form-group{min-width: 100%;flex-basis: 100%;} .piece-display-item{font-size: 0.9em;padding: 6px 10px;flex-wrap: wrap;} .piece-info span{margin-right: 10px;margin-bottom: 3px;display: inline-block;} .remove-piece-btn{margin-left: auto;} .piece-label{font-size: 9px;} footer{font-size: 0.75em;padding: 10px 0;} footer a{margin: 0 5px;}}