/* ===== QR Code Generator Page CSS ===== */

/* QR page body */
body.qr-page{background:#f7f8fb}

/* QR page header */
.site-header-qr{min-height:96px}
body.qr-page .site-header-qr{
  background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 40%,#16a34a 100%);
  border-radius:14px;padding:14px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  color:#fff;position:relative;overflow:hidden;
  box-shadow:0 6px 24px rgba(79,70,229,.30);margin-bottom:14px
}
body.qr-page .site-header-qr::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 0%,rgba(255,255,255,.14),transparent 50%);pointer-events:none}
body.qr-page .site-header-qr-left,body.qr-page .site-header-qr .header-actions{position:relative;z-index:1}
body.qr-page .site-header-qr h1{margin:0;color:#fff;font-size:22px;font-weight:900;letter-spacing:-.4px}
body.qr-page .site-header-qr p{margin:4px 0 0;color:rgba(255,255,255,.82);font-size:13px}
body.qr-page .header-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}
body.qr-page .barcode-link,body.qr-page .qr-link{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 10px;border-radius:8px;border:0;background:linear-gradient(180deg,#22c55e,#16a34a);color:#fff;font-weight:900;font-size:12px;text-decoration:none;box-shadow:0 3px 10px rgba(34,197,94,.22);transition:all .2s;cursor:pointer}
body.qr-page .barcode-link:hover,body.qr-page .qr-link:hover{background:linear-gradient(180deg,#4ade80,#22c55e);transform:translateY(-1px)}

/* QR page layout */
.qr-3col{display:grid;grid-template-columns:320px minmax(0,1fr) 300px;gap:16px;padding:18px}
.qr-col{display:flex;flex-direction:column;gap:14px}

/* QR compact controls */
.qr-compact-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.qr-color-label{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:#475569;white-space:nowrap}
.qr-color-label input[type="color"]{width:28px;height:28px;padding:1px;border:1px solid #d4d9e3;border-radius:6px;cursor:pointer;margin:0}
.qr-inline-label{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:#475569;white-space:nowrap}
.qr-inline-label select{padding:4px 6px;border-radius:6px;border:1px solid #d4d9e3;font-size:12px;margin:0}

/* QR editor */
.qr-editor-wrap{margin-top:10px}
.qr-editor-stage{
  position:relative;display:inline-block;max-height:350px;
  border:2px solid #c7d2fe;border-radius:12px;overflow:hidden;
  background:repeating-conic-gradient(#f8fafc 0% 25%,#eef2ff 0% 50%) 50%/14px 14px;
  user-select:none;touch-action:none;max-width:100%
}
.qr-editor-stage img{display:block;max-width:100%;max-height:320px;height:auto;pointer-events:none;user-select:none}
.qr-editor-qr{
  position:absolute;border:2px dashed #6366f1;border-radius:4px;cursor:grab;
  touch-action:none;z-index:2;box-shadow:0 2px 12px rgba(99,102,241,.2)
}
.qr-editor-qr:active{cursor:grabbing;border-color:#4338ca;box-shadow:0 4px 20px rgba(99,102,241,.35)}
.qr-editor-qr canvas{display:block;width:100%;height:100%;pointer-events:none}
.qr-editor-qr-handle{
  position:absolute;right:-5px;bottom:-5px;width:16px;height:16px;
  background:#6366f1;border:2px solid #fff;border-radius:3px;cursor:nwse-resize;
  z-index:3;box-shadow:0 1px 4px rgba(0,0,0,.2);touch-action:none
}
.qr-editor-qr-handle:hover{background:#4338ca;transform:scale(1.15)}
.qr-editor-info{font-size:11px;font-weight:700;color:#6366f1;margin-top:6px;min-height:16px}

/* QR frame */
.qr-frame-section{margin-top:4px}
.qr-frame-resize-wrap{position:relative;display:inline-block;margin-top:8px;width:100%;min-width:100px;max-width:100%}
.qr-frame-preview{
  min-height:80px;max-height:300px;width:100%;height:100%;
  border:1px dashed #d4d9e3;border-radius:10px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:repeating-conic-gradient(#f8fafc 0% 25%,#f0f4f8 0% 50%) 50%/12px 12px;
  color:#94a3b8;font-size:12px;font-weight:700
}
.qr-frame-preview img{width:100%;height:100%;max-height:300px;object-fit:contain;pointer-events:none;user-select:none}
.qr-frame-resize-handle{
  display:none;position:absolute;right:-6px;bottom:-6px;width:18px;height:18px;
  background:linear-gradient(135deg,transparent 40%,#6366f1 40%,#6366f1 50%,transparent 50%,transparent 60%,#6366f1 60%,#6366f1 70%,transparent 70%,transparent 80%,#6366f1 80%);
  border-radius:0 0 6px 0;cursor:nwse-resize;z-index:5;touch-action:none
}
.qr-frame-resize-wrap.has-frame .qr-frame-resize-handle{display:block}
.qr-frame-resize-wrap.has-frame .qr-frame-preview{border:2px solid #c7d2fe;cursor:default}
.qr-frame-resize-wrap.resizing .qr-frame-preview{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.15)}
.qr-frame-size-info{font-size:11px;font-weight:700;color:#6366f1;margin-top:4px;min-height:16px}
#qrFinalCanvas{border-radius:10px;border:1px solid #e2e8f0;box-shadow:0 4px 16px rgba(0,0,0,.06)}

/* QR template panel */
.qr-template-panel{margin-top:14px;border:1px solid #dbe2ef;border-radius:16px;padding:12px;background:#f8fafc}
#qrTemplateCanvas{width:100%;max-width:420px;aspect-ratio:1/1;display:block;margin:0 auto 12px;background:#fff;border:1px solid #e2e8f0;border-radius:14px;box-shadow:0 10px 24px rgba(15,23,42,.08)}
.qr-template-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.qr-selected-info{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:#475569}

/* QR picker modal */
.qr-picker-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(15,23,42,.55);z-index:9999;padding:18px}
.qr-picker-modal.active{display:flex}
.qr-picker-box{width:min(860px,96vw);max-height:86vh;overflow:auto;background:#fff;border-radius:18px;box-shadow:0 24px 60px rgba(15,23,42,.25);padding:14px}
.qr-picker-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;border-bottom:1px solid #e5e7eb;padding-bottom:10px}
.qr-picker-head h3{margin:0;font-size:18px;color:#0f172a}
.qr-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px}
.qr-picker-item{border:none;border-radius:0;background:transparent;padding:0;cursor:pointer;transition:opacity .15s;position:relative;box-shadow:none}
.qr-picker-item::before{display:none}
.qr-picker-item:hover{opacity:.75}
.qr-picker-item.active{opacity:.6}
.qr-picker-item img{width:100%;aspect-ratio:1/1;object-fit:contain;display:block;border:none;border-radius:0;background:transparent}
.qr-picker-item span{display:none}
.qr-picker-upload{grid-column:1/-1;padding:10px;border:1px dashed #93c5fd;border-radius:12px;background:#f8fbff;text-align:center}
.qr-upload-btn{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;padding:9px 14px;border-radius:10px;background:linear-gradient(180deg,#22c55e,#16a34a);color:#fff!important;font-weight:900!important;font-size:13px!important;cursor:pointer;box-shadow:0 4px 14px rgba(34,197,94,.22)}
.qr-upload-btn:hover{background:linear-gradient(180deg,#4ade80,#22c55e)}

/* SVG color controls */
.qr-svg-color-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:8px}
.qr-svg-color-control{font-size:11px;align-items:center;gap:6px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:6px 8px}
.qr-svg-color-control input[type="color"]{width:28px;height:24px;padding:0;border:1px solid #cbd5e1;border-radius:6px;background:#fff;cursor:pointer}

/* QR samples scrollbar */
#qrSamplesRow::-webkit-scrollbar{height:6px}
#qrSamplesRow::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}

/* QR page button overrides */
body.qr-page #generateQrBtn{background:linear-gradient(135deg,#22c55e,#16a34a)!important;color:#fff!important;border:none!important;font-weight:800!important;box-shadow:0 2px 10px rgba(34,197,94,.22),inset 0 1px 0 rgba(255,255,255,.18)!important;border-radius:10px!important;transition:all .2s!important}
body.qr-page #generateQrBtn:hover{background:linear-gradient(135deg,#4ade80,#22c55e)!important;transform:translateY(-1px)!important;box-shadow:0 4px 18px rgba(34,197,94,.32),inset 0 1px 0 rgba(255,255,255,.18)!important}
body.qr-page #generateDataMatrixFromQrBtn,body.qr-page #generateDataMatrixBtn{background:linear-gradient(135deg,#6366f1,#8b5cf6)!important;color:#fff!important;border:none!important;font-weight:800!important;box-shadow:0 2px 10px rgba(99,102,241,.22),inset 0 1px 0 rgba(255,255,255,.15)!important;border-radius:10px!important;transition:all .2s!important}
body.qr-page #generateDataMatrixFromQrBtn:hover,body.qr-page #generateDataMatrixBtn:hover{background:linear-gradient(135deg,#818cf8,#a78bfa)!important;transform:translateY(-1px)!important;box-shadow:0 4px 18px rgba(99,102,241,.32),inset 0 1px 0 rgba(255,255,255,.15)!important}
body.qr-page #downloadQrBtn,body.qr-page #downloadQrSvgBtn{background:linear-gradient(135deg,#ef4444,#dc2626)!important;color:#fff!important;border:none!important;font-weight:800!important;box-shadow:0 2px 10px rgba(239,68,68,.22),inset 0 1px 0 rgba(255,255,255,.15)!important;border-radius:10px!important;transition:all .2s!important}
body.qr-page #downloadQrBtn:hover,body.qr-page #downloadQrSvgBtn:hover{background:linear-gradient(135deg,#f87171,#ef4444)!important;transform:translateY(-1px)!important;box-shadow:0 4px 18px rgba(239,68,68,.32),inset 0 1px 0 rgba(255,255,255,.15)!important}

/* QR canvas presentation */
body.qr-page #qrTemplateCanvas{border:1.5px solid #e0e4ea!important;border-radius:16px!important;box-shadow:0 4px 16px rgba(0,0,0,.04),0 12px 40px rgba(0,0,0,.04)!important;transition:box-shadow .25s!important}
body.qr-page #qrTemplateCanvas:hover{box-shadow:0 4px 16px rgba(0,0,0,.06),0 16px 48px rgba(0,0,0,.07)!important}

/* QR file upload */
body.qr-page #qrFrameInput{display:block;width:100%;padding:11px 14px;border:1.5px dashed #c7d2fe;border-radius:12px;background:linear-gradient(135deg,#fafaff,#f5f3ff);color:#475569;font-size:12px;font-weight:600;cursor:pointer;transition:border-color .2s,background .2s}
body.qr-page #qrFrameInput:hover{border-color:#818cf8;background:linear-gradient(135deg,#f5f3ff,#ede9fe)}

/* QR template/icon/clear buttons */
body.qr-page #openTemplatePickerBtn,body.qr-page #openIconPickerBtn,body.qr-page #clearTemplateIconBtn{background:#fff!important;color:#475569!important;border:1.5px solid #e0e4ea!important;border-radius:10px!important;font-weight:700!important;box-shadow:0 1px 3px rgba(0,0,0,.04)!important;transition:all .2s!important}
body.qr-page #openTemplatePickerBtn:hover,body.qr-page #openIconPickerBtn:hover,body.qr-page #clearTemplateIconBtn:hover{border-color:#818cf8!important;color:#4338ca!important;background:#fafaff!important;transform:translateY(-1px)!important;box-shadow:0 3px 12px rgba(99,102,241,.1)!important}

/* QR page general overrides */
body.qr-page .site-header{background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 40%,#16a34a 100%)}
body.qr-page .site-header>div:first-child{position:relative;z-index:1}
body.qr-page button{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;padding:9px 14px;border-radius:10px;font-weight:800;font-size:13px;cursor:pointer;transition:all .2s}
body.qr-page button.btn-light{background:#fff!important;color:#475569!important;border:1.5px solid #e0e4ea!important;box-shadow:0 1px 3px rgba(0,0,0,.04)!important}
body.qr-page button.btn-light:hover{background:#fafaff!important;color:#4338ca!important;border-color:#818cf8!important;box-shadow:0 3px 12px rgba(99,102,241,.1)!important;transform:translateY(-1px)}
body.qr-page .section-head button.btn-light{width:auto!important;min-width:70px}
body.qr-page input,body.qr-page select,body.qr-page textarea{font:inherit}

/* Responsive */
@media(max-width:1100px){.qr-3col{grid-template-columns:1fr 1fr}}
@media(max-width:768px){
  .qr-3col{grid-template-columns:1fr;padding:10px}
  body.qr-page .site-header-qr{flex-direction:column;text-align:center;padding:14px}
  body.qr-page .site-header-qr h1{font-size:18px}
  body.qr-page .header-actions{justify-content:center}
  body.qr-page .barcode-link,body.qr-page .qr-link{padding:6px 9px!important;font-size:11px!important}
}
@media(max-width:600px){
  .qr-template-actions{flex-direction:column}
  .qr-template-actions button{width:100%}
  .qr-picker-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
}