/* CCS FAB Core — Gang Sheet Builder (from Code Snippet #25). The brand colour comes from :root vars printed by the module. */
/* ========== GSB RESET & CONTAINER ========== */
.gsb-builder{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif!important;max-width:1400px!important;margin:0 auto!important;padding:20px!important;color:#333!important}
.gsb-builder *{box-sizing:border-box!important}
.gsb-builder a{color:var(--gsb-primary)!important;text-decoration:none!important}
.gsb-builder a:hover{color:var(--gsb-primary)!important;opacity:0.8!important}
.gsb-layout{display:grid!important;grid-template-columns:1fr 270px!important;gap:20px!important}
@media(max-width:900px){.gsb-layout{grid-template-columns:1fr!important}}

/* ========== SHEET SIZE SELECTOR ========== */
.gsb-size-selector{background:#fff!important;border:1px solid #ddd!important;border-radius:12px!important;padding:20px!important;margin-bottom:20px!important;box-shadow:0 2px 4px rgba(0,0,0,0.05)!important}
.gsb-size-selector h3{margin:0 0 15px 0!important;font-size:16px!important;font-weight:600!important;color:#222!important}
.gsb-size-row{display:flex!important;gap:15px!important;flex-wrap:wrap!important;align-items:flex-end!important}
.gsb-size-field{flex:1!important;min-width:120px!important}
.gsb-size-field label{display:block!important;font-size:13px!important;font-weight:500!important;color:#555!important;margin-bottom:6px!important}
.gsb-size-field select,.gsb-size-field input{width:100%!important;padding:10px 12px!important;border:1px solid #ccc!important;border-radius:6px!important;font-size:14px!important;background:#fff!important;color:#333!important}
.gsb-size-field select:focus,.gsb-size-field input:focus{outline:none!important;border-color:var(--gsb-primary)!important}
.gsb-auto-btn{padding:10px 16px!important;background:var(--gsb-primary)!important;color:#fff!important;border:none!important;border-radius:6px!important;cursor:pointer!important;font-size:14px!important;font-weight:500!important;white-space:nowrap!important;transition:all 0.2s!important}
.gsb-auto-btn:hover{opacity:0.9!important;transform:translateY(-1px)!important}

/* ========== CANVAS AREA ========== */
.gsb-canvas-wrap{background:#e9ecef!important;border-radius:12px!important;padding:20px!important;position:relative!important}
.gsb-toolbar{display:flex!important;gap:8px!important;margin-bottom:15px!important;flex-wrap:wrap!important}
.gsb-toolbar button{padding:8px 14px!important;border:1px solid #aaa!important;background:#fff!important;border-radius:6px!important;cursor:pointer!important;font-size:13px!important;font-weight:500!important;color:#333!important;transition:all 0.2s!important}
.gsb-toolbar button:hover{background:#f5f5f5!important;border-color:#666!important;color:#000!important}
.gsb-toolbar button:focus{outline:none!important;box-shadow:0 0 0 2px var(--gsb-primary-40)!important}

/* Canvas with rulers */
.gsb-canvas-outer{position:relative!important;display:inline-block!important}
.gsb-ruler-corner{position:absolute!important;top:0!important;left:0!important;width:30px!important;height:25px!important;background:#555!important;z-index:10!important;border-radius:4px 0 0 0!important}
.gsb-ruler-top{position:absolute!important;top:0!important;left:30px!important;height:25px!important;background:#666!important;overflow:hidden!important;z-index:10!important}
.gsb-ruler-left{position:absolute!important;top:25px!important;left:0!important;width:30px!important;background:#666!important;overflow:hidden!important;z-index:10!important}
.gsb-ruler-mark{position:absolute!important;color:#fff!important;font-size:10px!important;font-weight:500!important;font-family:monospace!important}
.gsb-ruler-top .gsb-ruler-mark{bottom:2px!important}
.gsb-ruler-left .gsb-ruler-mark{right:4px!important}
.gsb-ruler-tick{position:absolute!important;background:#999!important}
.gsb-ruler-top .gsb-ruler-tick{bottom:0!important;width:1px!important}
.gsb-ruler-left .gsb-ruler-tick{right:0!important;height:1px!important}

.gsb-canvas-container{background:#fff!important;border:2px solid #ddd!important;border-radius:8px!important;overflow:auto!important;position:relative!important;max-height:700px!important;margin-left:30px!important;margin-top:25px!important;margin-right:20px!important}
.gsb-canvas-container canvas{display:block!important;max-width:none!important}

/* Custom scrollbar */
.gsb-canvas-container::-webkit-scrollbar{width:12px!important;height:12px!important}
.gsb-canvas-container::-webkit-scrollbar-track{background:#f0f0f0!important;border-radius:10px!important;margin:4px!important}
.gsb-canvas-container::-webkit-scrollbar-thumb{background:var(--gsb-primary-80)!important;border-radius:10px!important;border:3px solid #f0f0f0!important}
.gsb-canvas-container::-webkit-scrollbar-thumb:hover{background:var(--gsb-primary)!important}
.gsb-canvas-container::-webkit-scrollbar-corner{background:#f0f0f0!important}
.gsb-canvas-info{display:flex!important;justify-content:space-between!important;align-items:center!important;margin-top:15px!important;font-size:13px!important;color:#555!important}

/* ========== SIDEBAR ========== */
.gsb-sidebar{display:flex!important;flex-direction:column!important;gap:20px!important}
.gsb-card{background:#fff!important;border:1px solid #ddd!important;border-radius:12px!important;padding:20px!important;box-shadow:0 2px 4px rgba(0,0,0,0.05)!important}
.gsb-card h3{margin:0 0 15px 0!important;font-size:16px!important;font-weight:600!important;display:flex!important;align-items:center!important;gap:8px!important;color:#222!important}

/* ========== UPLOAD ZONE ========== */
.gsb-upload-zone{border:2px dashed #bbb!important;border-radius:8px!important;padding:30px 20px!important;text-align:center!important;cursor:pointer!important;transition:all 0.2s!important;background:#fafafa!important}
.gsb-upload-zone:hover{border-color:var(--gsb-primary)!important;background:#f0f7ff!important}
.gsb-upload-zone.dragover{border-color:var(--gsb-primary)!important;background:#e8f4ff!important}
.gsb-upload-zone input{display:none!important}
.gsb-upload-icon{font-size:36px!important;margin-bottom:10px!important}
.gsb-upload-text{color:#666!important;font-size:14px!important}

/* ========== IMAGE LIST ========== */
.gsb-image-list{max-height:240px!important;overflow-y:auto!important;margin-top:15px!important}
.gsb-image-item{display:flex!important;align-items:center!important;gap:10px!important;padding:10px!important;background:#f5f5f5!important;border-radius:6px!important;margin-bottom:8px!important}
.gsb-image-item img{width:48px!important;height:48px!important;object-fit:contain!important;background:#fff!important;border-radius:4px!important;border:1px solid #ddd!important;flex-shrink:0!important}
.gsb-image-item .info{flex:1!important;min-width:0!important}
.gsb-image-item .name{font-size:12px!important;font-weight:500!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;color:#333!important}
.gsb-image-item .size{font-size:11px!important;color:#666!important}
.gsb-image-item .max-size{font-size:10px!important;color:#16a34a!important;font-weight:500!important}
.gsb-image-item .actions{display:flex!important;gap:5px!important;flex-shrink:0!important}
.gsb-image-item .add-btn{width:28px!important;height:28px!important;border:none!important;border-radius:4px!important;cursor:pointer!important;font-size:18px!important;line-height:1!important;padding:0!important;background:var(--gsb-primary)!important;color:#fff!important}
.gsb-image-item .add-btn:hover{opacity:0.85!important}
.gsb-image-item .del-btn{width:28px!important;height:28px!important;border:none!important;border-radius:4px!important;cursor:pointer!important;font-size:16px!important;line-height:1!important;padding:0!important;background:#fecaca!important;color:#dc2626!important}
.gsb-image-item .del-btn:hover{background:#fca5a5!important}

/* ========== QTY MODAL ========== */
.gsb-qty-modal-overlay{display:none!important;position:fixed!important;inset:0!important;background:rgba(0,0,0,0.55)!important;z-index:999999!important;align-items:center!important;justify-content:center!important}
.gsb-qty-modal-overlay.active{display:flex!important}
.gsb-qty-modal{background:#fff!important;border-radius:14px!important;padding:24px!important;max-width:340px!important;width:90%!important;box-shadow:0 20px 60px rgba(0,0,0,0.3)!important}
.gsb-qty-modal h4{margin:0 0 16px 0!important;font-size:16px!important;font-weight:700!important;color:#222!important}
.gsb-qty-modal-preview{display:flex!important;gap:12px!important;align-items:center!important;margin-bottom:18px!important;padding:12px!important;background:#f8fafc!important;border-radius:8px!important;border:1px solid #e5e7eb!important}
.gsb-qty-modal-thumb{width:64px!important;height:64px!important;object-fit:contain!important;background:#fff!important;border-radius:6px!important;border:1px solid #ddd!important;flex-shrink:0!important}
.gsb-qty-modal-thumb-svg{width:64px!important;height:64px!important;background:#f0f0f0!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:6px!important;border:1px solid #ddd!important;font-size:28px!important;flex-shrink:0!important}
.gsb-qty-modal-name{font-size:13px!important;font-weight:600!important;color:#333!important;word-break:break-all!important}
.gsb-qty-modal-size{font-size:11px!important;color:#666!important;margin-top:3px!important}
.gsb-qty-modal-printsize{font-size:11px!important;color:#16a34a!important;font-weight:500!important;margin-top:2px!important}
.gsb-qty-modal-input-row{display:flex!important;align-items:center!important;gap:12px!important;margin-bottom:18px!important}
.gsb-qty-modal-input-row label{font-size:14px!important;font-weight:600!important;color:#333!important;white-space:nowrap!important}
.gsb-qty-modal-number{width:80px!important;padding:8px 10px!important;border:2px solid #e5e7eb!important;border-radius:6px!important;font-size:18px!important;text-align:center!important;font-weight:600!important;color:#222!important}
.gsb-qty-modal-number:focus{outline:none!important;border-color:var(--gsb-primary)!important}
.gsb-qty-modal-hint{font-size:12px!important;color:#888!important}
.gsb-qty-modal-btns{display:flex!important;gap:8px!important}
.gsb-qty-modal-confirm{flex:1!important;padding:11px!important;background:var(--gsb-primary)!important;color:#fff!important;border:none!important;border-radius:7px!important;font-size:14px!important;font-weight:600!important;cursor:pointer!important}
.gsb-qty-modal-confirm:hover{opacity:0.9!important}
.gsb-qty-modal-cancel{padding:11px 14px!important;background:#f3f4f6!important;color:#555!important;border:1px solid #ddd!important;border-radius:7px!important;font-size:14px!important;cursor:pointer!important}
.gsb-qty-modal-cancel:hover{background:#e5e7eb!important}

/* ========== SELECTED IMAGE CONTROLS ========== */
.gsb-selected{display:none!important;padding:15px!important;background:var(--gsb-primary-15)!important;border:1px solid var(--gsb-primary-40)!important;border-radius:8px!important;margin-bottom:15px!important}
.gsb-selected.active{display:block!important}
.gsb-selected-title{font-weight:600!important;margin-bottom:10px!important;font-size:13px!important;color:#333!important}
.gsb-size-inputs{display:flex!important;align-items:center!important;gap:8px!important;margin-bottom:12px!important}
.gsb-size-inputs label{font-size:13px!important;color:#555!important;font-weight:500!important}
.gsb-size-inputs input{width:70px!important;padding:8px!important;border:1px solid #ccc!important;border-radius:4px!important;font-size:13px!important;background:#fff!important;color:#333!important}
.gsb-size-inputs input:focus{outline:none!important;border-color:var(--gsb-primary)!important}

/* ========== QUALITY INDICATOR ========== */
.gsb-quality-indicator{margin:12px 0!important;padding:12px!important;background:#f8fafc!important;border-radius:6px!important;border:1px solid #e5e7eb!important}
.gsb-quality-label{font-size:12px!important;color:#666!important;margin-bottom:6px!important}
.gsb-quality-bar{height:10px!important;background:#e5e7eb!important;border-radius:5px!important;overflow:hidden!important}
.gsb-quality-fill{height:100%!important;border-radius:5px!important;transition:all 0.3s!important;width:0%!important}
.gsb-quality-fill.good{background:#22c55e!important}
.gsb-quality-fill.ok{background:#eab308!important}
.gsb-quality-fill.bad{background:#ef4444!important}
.gsb-quality-text{font-size:13px!important;font-weight:600!important;margin-top:8px!important;text-align:right!important}
.gsb-quality-text.good{color:#16a34a!important}
.gsb-quality-text.ok{color:#ca8a04!important}
.gsb-quality-text.bad{color:#dc2626!important}
.gsb-quality-warning{background:#fef2f2!important;border:1px solid #fecaca!important;color:#dc2626!important;padding:10px!important;border-radius:6px!important;font-size:12px!important;margin-top:10px!important}

.gsb-dup-btn{width:100%!important;padding:10px!important;background:var(--gsb-primary)!important;color:#fff!important;border:none!important;border-radius:6px!important;cursor:pointer!important;font-weight:500!important;font-size:13px!important;margin-top:8px!important}
.gsb-dup-btn:hover{opacity:0.9!important}

/* ========== PRICING ========== */
.gsb-pricing{background:linear-gradient(135deg,#f8fafc,#f1f5f9)!important;border:1px solid #e2e8f0!important}
.gsb-price-row{display:flex!important;justify-content:space-between!important;padding:10px 0!important;font-size:14px!important;border-bottom:1px solid #e5e7eb!important}
.gsb-price-row .label{color:#555!important}
.gsb-price-row .value{font-weight:600!important;color:#333!important}
.gsb-price-total{display:flex!important;justify-content:space-between!important;padding:15px 0!important;font-size:22px!important;font-weight:700!important}
.gsb-price-total .label{color:var(--gsb-primary)!important}
.gsb-price-total .value{color:var(--gsb-primary)!important}

/* ========== ADD TO CART BUTTON ========== */
.gsb-add-cart{width:100%!important;padding:16px!important;background:var(--gsb-primary)!important;color:#fff!important;border:none!important;border-radius:8px!important;font-size:16px!important;font-weight:600!important;cursor:pointer!important;transition:all 0.2s!important}
.gsb-add-cart:hover{opacity:0.9!important;transform:translateY(-1px)!important}
.gsb-add-cart:disabled{background:#9ca3af!important;color:#fff!important;cursor:not-allowed!important;transform:none!important;opacity:1!important}
.gsb-export-status{font-size:12px!important;color:#666!important;text-align:center!important;margin-top:8px!important;min-height:18px!important}

/* ========== SAVED SHEETS ========== */
.gsb-saved-sheets{background:#f8fafc!important}
.gsb-save-controls{display:flex!important;gap:8px!important;margin-bottom:15px!important}
.gsb-save-controls input{flex:1!important;padding:10px!important;border:1px solid #ccc!important;border-radius:6px!important;font-size:13px!important}
.gsb-save-btn{padding:10px 16px!important;background:var(--gsb-primary)!important;color:#fff!important;border:none!important;border-radius:6px!important;cursor:pointer!important;font-size:13px!important;font-weight:500!important;white-space:nowrap!important}
.gsb-save-btn:hover{opacity:0.9!important}
.gsb-new-btn{width:100%!important;padding:10px!important;background:#fff!important;color:var(--gsb-primary)!important;border:1px dashed var(--gsb-primary)!important;border-radius:6px!important;cursor:pointer!important;font-size:13px!important;font-weight:500!important;margin-bottom:15px!important}
.gsb-new-btn:hover{background:var(--gsb-primary-10)!important}
.gsb-saved-list{max-height:250px!important;overflow-y:auto!important}
.gsb-saved-item{display:flex!important;align-items:center!important;gap:10px!important;padding:10px!important;background:#fff!important;border:1px solid #e5e7eb!important;border-radius:6px!important;margin-bottom:8px!important}
.gsb-saved-item:hover{border-color:var(--gsb-primary)!important}
.gsb-saved-item img{width:60px!important;height:45px!important;object-fit:contain!important;background:#f5f5f5!important;border-radius:4px!important;border:1px solid #ddd!important}
.gsb-saved-item .gsb-saved-info{flex:1!important;min-width:0!important}
.gsb-saved-item .gsb-saved-name{font-size:13px!important;font-weight:500!important;color:#333!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.gsb-saved-item .gsb-saved-meta{font-size:11px!important;color:#888!important}
.gsb-saved-item .gsb-saved-actions{display:flex!important;gap:4px!important}
.gsb-saved-item button{padding:6px 10px!important;border:none!important;border-radius:4px!important;cursor:pointer!important;font-size:11px!important;font-weight:500!important}
.gsb-saved-item .gsb-load-btn{background:var(--gsb-primary)!important;color:#fff!important}
.gsb-saved-item .gsb-delete-btn{background:#fee!important;color:#c00!important}
.gsb-no-saved{color:#888!important;font-size:13px!important;text-align:center!important;padding:20px!important}
.gsb-loading{color:#888!important;font-size:13px!important;text-align:center!important}

/* ========== EXTRA OVERRIDES ========== */
.gsb-builder input[type="number"]{-moz-appearance:textfield!important}
.gsb-builder input::-webkit-outer-spin-button,.gsb-builder input::-webkit-inner-spin-button{-webkit-appearance:none!important;margin:0!important}

/* ========== MOBILE NOTICE ========== */
.gsb-mobile-notice{display:none!important;background:linear-gradient(135deg,#fef3c7,#fde68a)!important;border:1px solid #f59e0b!important;border-radius:8px!important;padding:12px 15px!important;margin-bottom:15px!important;font-size:13px!important;color:#92400e!important}
.gsb-mobile-notice strong{color:#78350f!important}

/* ========== ADMIN NOTICE ========== */
.gsb-admin-notice{display:none;background:linear-gradient(135deg,#dbeafe,#bfdbfe)!important;border:1px solid #3b82f6!important;border-radius:8px!important;padding:12px 15px!important;margin-bottom:15px!important;font-size:13px!important;color:#1e40af!important}
.gsb-admin-notice strong{color:#1e3a8a!important}
.gsb-admin-notice.active{display:block!important}

/* ========== MOBILE RESPONSIVE ========== */
@media(max-width:768px){
    .gsb-mobile-notice{display:block!important}
    .gsb-layout{grid-template-columns:1fr!important;gap:20px!important}
    .gsb-builder{padding:10px!important}
    .gsb-size-selector{padding:15px!important}
    .gsb-size-row{flex-direction:column!important;gap:10px!important}
    .gsb-size-field{width:100%!important}
    .gsb-auto-btn{width:100%!important;padding:12px!important}
    .gsb-toolbar{gap:6px!important}
    .gsb-toolbar button{padding:10px 12px!important;font-size:12px!important;flex:1 1 auto!important;min-width:0!important}
    .gsb-canvas-wrap{padding:10px!important;overflow-x:auto!important}
    .gsb-canvas-outer{min-width:fit-content!important}
    .gsb-canvas-container{max-height:400px!important;margin-left:30px!important;margin-top:25px!important;margin-right:5px!important;touch-action:pan-x pan-y pinch-zoom!important}
    .gsb-canvas-info{flex-direction:column!important;gap:5px!important;align-items:flex-start!important;font-size:12px!important}
    .gsb-card{padding:15px!important}
    .gsb-card h3{font-size:15px!important}
    .gsb-upload-zone{padding:20px 15px!important}
    .gsb-upload-icon{font-size:28px!important}
    .gsb-upload-text{font-size:13px!important}
    .gsb-image-list{max-height:150px!important}
    .gsb-image-item{padding:8px!important}
    .gsb-image-item img{width:40px!important;height:40px!important}
    .gsb-image-item button{width:36px!important;height:36px!important;font-size:18px!important}
    .gsb-selected{padding:12px!important}
    .gsb-size-inputs{flex-wrap:wrap!important}
    .gsb-size-inputs input{width:60px!important;padding:10px 8px!important}
    .gsb-dup-btn{padding:12px!important}
    .gsb-price-row{font-size:13px!important;padding:8px 0!important}
    .gsb-price-total{font-size:20px!important;padding:12px 0!important}
    .gsb-add-cart{padding:14px!important;font-size:15px!important}
    .gsb-save-controls{flex-direction:column!important}
    .gsb-save-controls input{width:100%!important}
    .gsb-save-btn{width:100%!important}
    .gsb-saved-list{max-height:180px!important}
    .gsb-saved-item{padding:8px!important}
    .gsb-saved-item img{width:50px!important;height:38px!important}
    .gsb-saved-item button{padding:8px 12px!important;font-size:12px!important}
}

@media(max-width:480px){
    .gsb-toolbar button{padding:8px 6px!important;font-size:11px!important}
    .gsb-canvas-container{max-height:350px!important}
    .gsb-size-inputs label{font-size:12px!important}
    .gsb-size-inputs input{width:55px!important}
}