/* Barcode Labels by Creativewity - frontend styles */
.blcw-app{--blcw-primary:#4A90E2;--blcw-secondary:#7ED321;--blcw-accent:#F5A623;--blcw-bg:#F9FAFB;--blcw-text:#2C3E50;--blcw-border:#E1E8ED;--blcw-muted:#6B7785;font-family:'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--blcw-text);background:var(--blcw-bg);border:1px solid var(--blcw-border);border-radius:8px;display:flex;flex-direction:column;min-height:720px;box-sizing:border-box}
.blcw-app *,.blcw-app *::before,.blcw-app *::after{box-sizing:border-box}
.blcw-app h1,.blcw-app h2,.blcw-app h3,.blcw-app h4{font-family:'Roboto',system-ui,sans-serif;font-weight:700;margin:0 0 12px}
.blcw-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff;border-bottom:1px solid var(--blcw-border);border-radius:8px 8px 0 0;flex-wrap:wrap;gap:12px}
.blcw-brand{display:flex;align-items:center;gap:10px;font-weight:700}
.blcw-logo{font-size:22px;color:var(--blcw-primary)}
.blcw-steps{display:flex;gap:8px}
.blcw-step{background:transparent;border:1px solid var(--blcw-border);padding:8px 14px;border-radius:999px;cursor:pointer;font-size:13px;display:flex;align-items:center;gap:6px;color:var(--blcw-muted)}
.blcw-step span{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--blcw-border);color:#fff;font-size:12px;font-weight:700}
.blcw-step.is-active{border-color:var(--blcw-primary);color:var(--blcw-primary)}
.blcw-step.is-active span{background:var(--blcw-primary)}
.blcw-step.is-done span{background:var(--blcw-secondary)}
.blcw-main{flex:1;padding:20px;overflow:auto}
.blcw-panel{display:none}
.blcw-panel.is-active{display:block}
.blcw-paper-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}
.blcw-paper-card{background:#fff;border:2px solid var(--blcw-border);border-radius:10px;padding:24px;cursor:pointer;text-align:center;transition:all .15s}
.blcw-paper-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.07);transform:translateY(-2px)}
.blcw-paper-card.is-active{border-color:var(--blcw-primary)}
.blcw-paper-icon{font-size:42px;color:var(--blcw-primary);margin-bottom:8px}
.blcw-paper-config{background:#fff;border:1px solid var(--blcw-border);border-radius:10px;padding:18px}
.blcw-template-list{list-style:none;margin:0;padding:0;max-height:380px;overflow:auto;border:1px solid var(--blcw-border);border-radius:6px}
.blcw-template-list li{padding:10px 14px;border-bottom:1px solid var(--blcw-border);cursor:pointer;display:flex;justify-content:space-between;gap:8px}
.blcw-template-list li:hover{background:var(--blcw-bg)}
.blcw-template-list li.is-active{background:#EAF3FC}
.blcw-template-list small{color:var(--blcw-muted)}
.blcw-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.blcw-grid-2 fieldset{border:1px solid var(--blcw-border);border-radius:6px;padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.blcw-grid-2 legend{padding:0 6px;font-weight:700}
.blcw-grid-2 label{display:flex;flex-direction:column;font-size:12px;color:var(--blcw-muted)}
.blcw-grid-2 input,.blcw-grid-2 select{padding:6px 8px;border:1px solid var(--blcw-border);border-radius:4px;font-size:13px;color:var(--blcw-text)}
.blcw-custom-preview{background:var(--blcw-bg);border:1px dashed var(--blcw-border);border-radius:6px;padding:10px;display:flex;align-items:center;justify-content:center;min-height:300px}
#blcw-custom-grid{background:#fff;box-shadow:0 0 0 1px var(--blcw-border)}
#blcw-custom-grid .cell{background:#EAF3FC;border:1px solid var(--blcw-primary);box-sizing:border-box}

.blcw-design-layout{display:grid;grid-template-columns:260px 1fr 240px;gap:16px;min-height:560px}
.blcw-design-left,.blcw-design-right{background:#fff;border:1px solid var(--blcw-border);border-radius:10px;padding:14px;overflow:auto;max-height:640px}
.blcw-add-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.blcw-add-buttons button{padding:10px;border:1px solid var(--blcw-border);background:#fff;border-radius:6px;cursor:pointer;font-size:13px}
.blcw-add-buttons button:hover{background:var(--blcw-bg)}
.blcw-properties{display:flex;flex-direction:column;gap:8px}
.blcw-properties label{display:flex;flex-direction:column;font-size:12px;color:var(--blcw-muted)}
.blcw-properties input,.blcw-properties select,.blcw-properties textarea{padding:6px 8px;border:1px solid var(--blcw-border);border-radius:4px;font-size:13px}
.blcw-design-canvas{background:#fff;border:1px solid var(--blcw-border);border-radius:10px;display:flex;flex-direction:column;overflow:hidden}
.blcw-canvas-toolbar{padding:8px 12px;border-bottom:1px solid var(--blcw-border);display:flex;align-items:center;gap:8px;background:var(--blcw-bg)}
.blcw-canvas-toolbar button{background:#fff;border:1px solid var(--blcw-border);width:28px;height:28px;border-radius:4px;cursor:pointer}
.blcw-canvas-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto;background:repeating-linear-gradient(45deg,#fafafa,#fafafa 10px,#f3f3f3 10px,#f3f3f3 20px)}
.blcw-canvas{background:#fff;box-shadow:0 0 0 1px var(--blcw-border),0 8px 24px rgba(0,0,0,.06);position:relative;transform-origin:center center}
.blcw-canvas .blcw-el{position:absolute;cursor:move;border:1px dashed transparent;padding:2px}
.blcw-canvas .blcw-el.is-selected{border-color:var(--blcw-primary)}
.blcw-canvas .blcw-el .resize-handle{position:absolute;right:-5px;bottom:-5px;width:10px;height:10px;background:var(--blcw-primary);cursor:nwse-resize;border-radius:2px;display:none}
.blcw-canvas .blcw-el.is-selected .resize-handle{display:block}
.blcw-layers{list-style:none;margin:0 0 12px;padding:0;border:1px solid var(--blcw-border);border-radius:6px;max-height:240px;overflow:auto}
.blcw-layers li{padding:6px 10px;border-bottom:1px solid var(--blcw-border);font-size:13px;display:flex;justify-content:space-between;gap:6px;cursor:pointer}
.blcw-layers li.is-selected{background:#EAF3FC}
.blcw-layers li button{background:transparent;border:none;cursor:pointer;color:var(--blcw-muted);padding:0 4px}

.blcw-tabs{display:flex;gap:4px;border-bottom:1px solid var(--blcw-border);margin-bottom:14px}
.blcw-tab{background:transparent;border:none;padding:10px 14px;cursor:pointer;color:var(--blcw-muted);border-bottom:2px solid transparent;font-size:14px}
.blcw-tab.is-active{color:var(--blcw-primary);border-color:var(--blcw-primary);font-weight:700}
.blcw-tab-panel{display:none}
.blcw-tab-panel.is-active{display:block}
.blcw-quick-add{background:#fff;border:1px solid var(--blcw-border);border-radius:10px;padding:14px;margin-bottom:14px}
#blcw-quick-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin-bottom:10px}
#blcw-quick-fields label{display:flex;flex-direction:column;font-size:12px;color:var(--blcw-muted)}
#blcw-quick-fields input{padding:6px 8px;border:1px solid var(--blcw-border);border-radius:4px;font-size:13px}
.blcw-data-grid-wrap{background:#fff;border:1px solid var(--blcw-border);border-radius:10px;padding:14px}
.blcw-grid-toolbar{display:flex;gap:8px;margin-bottom:10px}
.blcw-data-grid{overflow:auto;max-height:420px;border:1px solid var(--blcw-border);border-radius:6px}
.blcw-data-grid table{width:100%;border-collapse:collapse;font-size:13px}
.blcw-data-grid th,.blcw-data-grid td{border:1px solid var(--blcw-border);padding:6px 8px;text-align:left}
.blcw-data-grid thead{background:var(--blcw-bg)}
.blcw-data-grid tbody tr:nth-child(even){background:#fafbfc}
.blcw-data-grid input{width:100%;border:none;background:transparent;padding:2px 4px;font-size:13px}
.blcw-data-grid input:focus{outline:1px solid var(--blcw-primary);background:#fff}
.blcw-data-grid input.is-invalid{outline:1px solid #e74c3c;background:#fdecea}
.blcw-data-grid .row-del{cursor:pointer;color:#e74c3c;background:transparent;border:none;font-size:16px}

.blcw-dropzone{margin-top:14px;border:2px dashed var(--blcw-primary);border-radius:10px;padding:36px;text-align:center;background:#fff;cursor:pointer}
.blcw-dropzone.is-drag{background:#EAF3FC}
.blcw-muted{color:var(--blcw-muted);font-size:12px}
#blcw-import-preview{margin-top:14px}

.blcw-footer{padding:14px 20px;border-top:1px solid var(--blcw-border);background:#fff;border-radius:0 0 8px 8px;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.blcw-footer-actions{display:flex;gap:8px}
.blcw-btn{font-family:inherit;font-size:14px;border-radius:6px;padding:9px 16px;cursor:pointer;border:1px solid transparent;font-weight:600;transition:all .15s}
.blcw-btn-primary{background:var(--blcw-primary);color:#fff}
.blcw-btn-primary:hover{background:#357ab8}
.blcw-btn-secondary{background:#fff;color:var(--blcw-primary);border-color:var(--blcw-primary)}
.blcw-btn-secondary:hover{background:#EAF3FC}
.blcw-btn-ghost{background:transparent;color:var(--blcw-muted)}
.blcw-btn-ghost:hover{background:var(--blcw-bg)}

.blcw-modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:99999;padding:20px}
.blcw-modal[hidden]{display:none}
.blcw-modal-inner{background:#fff;width:90vw;max-width:1100px;height:88vh;border-radius:10px;display:flex;flex-direction:column;overflow:hidden}
.blcw-modal-inner header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--blcw-border)}
.blcw-modal-inner header button{background:transparent;border:none;font-size:24px;cursor:pointer;color:var(--blcw-muted)}
.blcw-modal-inner footer{padding:12px 18px;border-top:1px solid var(--blcw-border);display:flex;justify-content:flex-end;gap:8px}
#blcw-preview-pages{flex:1;overflow:auto;padding:20px;background:var(--blcw-bg);display:flex;flex-direction:column;gap:20px;align-items:center}
.blcw-preview-page{background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.1);position:relative}

.blcw-toasts{position:fixed;top:20px;right:20px;display:flex;flex-direction:column;gap:8px;z-index:100000}
.blcw-toast{background:#fff;border-left:4px solid var(--blcw-primary);padding:10px 14px;border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.12);font-size:13px;min-width:200px;animation:blcw-in .2s ease-out}
.blcw-toast.is-error{border-color:#e74c3c}
.blcw-toast.is-success{border-color:var(--blcw-secondary)}
.blcw-toast.is-warning{border-color:var(--blcw-accent)}
@keyframes blcw-in{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}

@media (max-width:900px){
.blcw-design-layout{grid-template-columns:1fr}
.blcw-paper-cards{grid-template-columns:1fr}
.blcw-grid-2{grid-template-columns:1fr}
.blcw-steps{order:3;width:100%;justify-content:center;flex-wrap:wrap}
}