/* ═══════════════════════════════════════════
   Project Builder — Premium Styles
   ═══════════════════════════════════════════ */

.pb-section { padding:var(--space-12) 0 var(--space-8); position:relative; min-height:100vh; overflow:hidden; }
.pb-section .container { position:relative; z-index:1; }
.pb-ambient-glow { position:absolute; top:12%; left:50%; transform:translate(-50%,-50%); width:800px; height:800px; background:radial-gradient(circle,rgba(111,251,255,0.04) 0%,transparent 60%); pointer-events:none; z-index:0; }
body.light-theme .pb-ambient-glow { background:radial-gradient(circle,rgba(111,107,232,0.05) 0%,transparent 60%); }

/* ── Header ── */
.pb-header { text-align:center; margin-bottom:var(--space-8); animation:pbFadeUp .8s var(--ease-out-expo) both; }
.pb-header h1 { font-size:clamp(1.8rem,3.5vw,2.8rem); margin-bottom:var(--space-2); letter-spacing:var(--tracking-tight); }
.pb-header p { color:var(--text-secondary); font-size:1.05rem; max-width:560px; margin:0 auto; line-height:var(--leading-relaxed); }
.pb-header-badge { display:inline-flex; align-items:center; gap:.5rem; padding:.45rem 1.1rem; border-radius:var(--radius-full); background:rgba(111,251,255,0.08); border:1px solid rgba(111,251,255,0.2); margin-bottom:var(--space-3); font-family:var(--font-heading); font-size:.78rem; font-weight:600; color:var(--primary-neon); text-transform:uppercase; letter-spacing:var(--tracking-wider); }
.pb-header-badge i { width:14px; height:14px; }
body.light-theme .pb-header-badge { background:rgba(111,107,232,0.06); color:#6f6be8; border-color:rgba(111,107,232,0.15); }
.pb-gradient-text { background:linear-gradient(135deg,var(--primary-neon),#34d399,var(--primary-neon)); background-size:200% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:pbGrad 4s ease infinite; }
@keyframes pbGrad { 0%,100%{background-position:0% center} 50%{background-position:200% center} }
@keyframes pbFadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }

/* ── Layout ── */
.pb-layout { display:grid; grid-template-columns:1fr 1.1fr; gap:var(--space-5); align-items:start; }

/* ── Panels ── */
.pb-panel { background:rgba(15,15,25,0.55); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid var(--card-border); border-radius:var(--radius-xl); padding:var(--space-5); position:relative; overflow:hidden; }
.pb-catalog-panel { animation:pbFadeUp .8s var(--ease-out-expo) .1s both; }
.pb-staging-panel { animation:pbFadeUp .8s var(--ease-out-expo) .25s both; }
body.light-theme .pb-panel { background:rgba(255,255,255,0.82); border-color:rgba(17,24,39,0.06); box-shadow:0 1px 0 rgba(255,255,255,0.72) inset,0 12px 36px rgba(15,23,42,0.06); }
.pb-panel-glow { position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,rgba(111,251,255,0.5),var(--primary-neon)); opacity:.7; }
body.light-theme .pb-panel-glow { opacity:.35; }

/* ── Panel Headers ── */
.pb-panel-header { display:flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-4); padding-bottom:var(--space-3); border-bottom:1px solid var(--card-border); }
.pb-panel-icon { width:36px; height:36px; border-radius:var(--radius-md); background:rgba(255,255,255,0.04); border:1px solid var(--card-border); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pb-panel-icon i { width:18px; height:18px; color:var(--primary-neon); }
body.light-theme .pb-panel-icon { background:rgba(111,107,232,0.06); border-color:rgba(111,107,232,0.12); }
.pb-panel-header h2 { font-size:1.1rem; font-weight:700; letter-spacing:var(--tracking-tight); margin:0; }
.pb-panel-sub { font-size:.73rem; color:var(--text-muted); letter-spacing:var(--tracking-wide); }

/* ── Search ── */
.pb-search-wrapper { position:relative; margin-bottom:var(--space-3); }
.pb-search-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--text-muted); pointer-events:none; }
.pb-search { width:100%; padding:.8rem .8rem .8rem 2.5rem; background:rgba(255,255,255,0.03); border:1px solid var(--card-border); border-radius:var(--radius-md); color:var(--text-primary); font-family:var(--font-body); font-size:.9rem; outline:none; transition:border-color .25s,box-shadow .25s; }
.pb-search:focus { border-color:var(--primary-neon); box-shadow:0 0 0 3px var(--primary-neon-glow); }
body.light-theme .pb-search { background:rgba(255,255,255,0.9); border-color:rgba(17,24,39,0.1); }

/* ── Category Filters ── */
.pb-filters { display:flex; gap:.5rem; margin-bottom:var(--space-4); flex-wrap:wrap; }
.pb-filter { padding:.4rem .9rem; border-radius:var(--radius-full); border:1px solid var(--card-border); background:transparent; color:var(--text-secondary); font-family:var(--font-heading); font-size:.78rem; font-weight:600; cursor:pointer; transition:all .25s var(--ease-premium); letter-spacing:var(--tracking-wide); }
.pb-filter:hover { border-color:rgba(111,251,255,0.3); color:var(--text-primary); }
.pb-filter.active { background:var(--primary-neon); color:var(--bg-primary); border-color:var(--primary-neon); box-shadow:0 0 12px var(--primary-neon-glow); }
body.light-theme .pb-filter.active { background:#6f6be8; color:#fff; border-color:#6f6be8; box-shadow:0 4px 12px rgba(111,107,232,0.2); }

/* ── Product Grid ── */
.pb-product-grid { display:grid; grid-template-columns:1fr; gap:var(--space-2); max-height:520px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.08) transparent; }
.pb-product-grid::-webkit-scrollbar { width:6px; }
.pb-product-grid::-webkit-scrollbar-track { background:transparent; }
.pb-product-grid::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.08); border-radius:var(--radius-full); }

/* Product Item */
.pb-product-item { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2); border-radius:var(--radius-md); border:1px solid var(--card-border); background:rgba(255,255,255,0.02); transition:all .25s var(--ease-premium); cursor:default; }
.pb-product-item:hover { border-color:rgba(111,251,255,0.2); background:rgba(255,255,255,0.04); }
body.light-theme .pb-product-item { background:rgba(255,255,255,0.5); }
body.light-theme .pb-product-item:hover { background:rgba(255,255,255,0.7); }
.pb-product-img { width:52px; height:52px; border-radius:var(--radius-sm); overflow:hidden; flex-shrink:0; background:rgba(255,255,255,0.03); }
.pb-product-img img { width:100%; height:100%; object-fit:cover; }
.pb-product-info { flex:1; min-width:0; }
.pb-product-name { font-family:var(--font-heading); font-weight:600; font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pb-product-meta { display:flex; gap:.8rem; font-size:.72rem; color:var(--text-muted); margin-top:2px; }
.pb-product-meta span { white-space:nowrap; }
.pb-add-btn { padding:.4rem .75rem; border-radius:var(--radius-sm); border:1px solid rgba(16,185,129,0.3); background:rgba(16,185,129,0.08); color:#34d399; font-family:var(--font-heading); font-size:.72rem; font-weight:600; cursor:pointer; transition:all .2s; display:flex; align-items:center; gap:.35rem; flex-shrink:0; white-space:nowrap; }
.pb-add-btn:hover { background:rgba(16,185,129,0.2); border-color:rgba(16,185,129,0.5); }
.pb-add-btn i { width:13px; height:13px; }
body.light-theme .pb-add-btn { color:#059669; border-color:rgba(5,150,105,0.25); background:rgba(5,150,105,0.06); }

/* Active state — product already in project */
.pb-add-btn-active { border-color:rgba(111,251,255,0.35); background:rgba(111,251,255,0.1); color:var(--primary-neon); }
.pb-add-btn-active:hover { background:rgba(111,251,255,0.18); border-color:rgba(111,251,255,0.5); }
body.light-theme .pb-add-btn-active { border-color:rgba(111,107,232,0.3); background:rgba(111,107,232,0.08); color:#6f6be8; }
.pb-add-count { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; border-radius:var(--radius-full); background:var(--primary-neon); color:var(--bg-primary); font-size:.65rem; font-weight:700; padding:0 4px; }
body.light-theme .pb-add-count { background:#6f6be8; color:#fff; }
.pb-item-added { border-color:rgba(111,251,255,0.15); }
body.light-theme .pb-item-added { border-color:rgba(111,107,232,0.12); }
.pb-no-results { text-align:center; padding:var(--space-4); color:var(--text-muted); font-size:.88rem; }

/* ═══ STAGING PANEL ═══ */

/* ── Grand Totals Bar ── */
.pb-grand-totals { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-2); padding:var(--space-3); border-radius:var(--radius-lg); background:linear-gradient(135deg,rgba(16,185,129,0.06),rgba(111,251,255,0.04)); border:1px solid rgba(16,185,129,0.15); margin-bottom:var(--space-4); }
body.light-theme .pb-grand-totals { background:linear-gradient(135deg,rgba(16,185,129,0.04),rgba(111,107,232,0.03)); border-color:rgba(16,185,129,0.1); }
.pb-total-item { text-align:center; }
.pb-total-label { display:block; font-size:.65rem; text-transform:uppercase; letter-spacing:var(--tracking-wider); color:var(--text-secondary); font-weight:600; margin-bottom:.25rem; }
.pb-total-value { font-family:var(--font-heading); font-size:1.25rem; font-weight:700; color:var(--text-primary); }
.pb-total-cost { color:#34d399; text-shadow:0 0 12px rgba(52,211,153,0.2); }
body.light-theme .pb-total-cost { color:#059669; text-shadow:none; }

/* ── Add Zone Button ── */
.pb-add-zone-btn { width:100%; padding:.75rem; border-radius:var(--radius-md); border:1px dashed rgba(111,251,255,0.3); background:rgba(111,251,255,0.04); color:var(--primary-neon); font-family:var(--font-heading); font-size:.85rem; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:.5rem; transition:all .25s; margin-bottom:var(--space-3); }
.pb-add-zone-btn:hover { background:rgba(111,251,255,0.1); border-color:rgba(111,251,255,0.5); }
.pb-add-zone-btn i { width:18px; height:18px; }
body.light-theme .pb-add-zone-btn { border-color:rgba(111,107,232,0.3); color:#6f6be8; background:rgba(111,107,232,0.04); }

/* ── Zones Container ── */
.pb-zones { display:flex; flex-direction:column; gap:var(--space-3); margin-bottom:var(--space-4); max-height:480px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.08) transparent; }
.pb-zones::-webkit-scrollbar { width:6px; }
.pb-zones::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.08); border-radius:var(--radius-full); }

/* Empty State */
.pb-empty-state { text-align:center; padding:var(--space-6) var(--space-3); color:var(--text-muted); }
.pb-empty-state i { width:40px; height:40px; margin-bottom:var(--space-2); opacity:.4; }
.pb-empty-state p { font-size:.88rem; }

/* ── Zone Card ── */
.pb-zone { border-radius:var(--radius-lg); border:1px solid var(--card-border); background:rgba(255,255,255,0.02); overflow:hidden; }
body.light-theme .pb-zone { background:rgba(255,255,255,0.5); }
.pb-zone-header { display:flex; align-items:center; justify-content:space-between; padding:var(--space-2) var(--space-3); background:rgba(255,255,255,0.02); border-bottom:1px solid var(--card-border); }
body.light-theme .pb-zone-header { background:rgba(17,24,39,0.02); }
.pb-zone-name { font-family:var(--font-heading); font-weight:700; font-size:.92rem; display:flex; align-items:center; gap:.5rem; }
.pb-zone-name i { width:16px; height:16px; color:var(--primary-neon); }
.pb-zone-actions { display:flex; gap:.35rem; }
.pb-zone-action-btn { width:28px; height:28px; border-radius:var(--radius-sm); border:1px solid var(--card-border); background:transparent; color:var(--text-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.pb-zone-action-btn:hover { border-color:rgba(239,68,68,0.3); color:#f87171; background:rgba(239,68,68,0.08); }
.pb-zone-action-btn i { width:14px; height:14px; }

/* Zone Items */
.pb-zone-items { padding:var(--space-2) var(--space-3); }
.pb-zone-empty { text-align:center; padding:var(--space-3); color:var(--text-muted); font-size:.8rem; font-style:italic; }

/* Zone Item Row */
.pb-zone-item { display:flex; align-items:center; gap:var(--space-2); padding:.6rem 0; border-bottom:1px solid rgba(255,255,255,0.04); }
.pb-zone-item:last-child { border-bottom:none; }
body.light-theme .pb-zone-item { border-color:rgba(17,24,39,0.04); }
.pb-zone-item-name { flex:1; font-size:.82rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pb-zone-item-price { font-family:var(--font-heading); font-size:.82rem; font-weight:600; color:#34d399; white-space:nowrap; min-width:70px; text-align:right; }
body.light-theme .pb-zone-item-price { color:#059669; }

/* Quantity Controls */
.pb-qty-controls { display:flex; align-items:center; gap:.3rem; }
.pb-qty-btn { width:24px; height:24px; border-radius:var(--radius-sm); border:1px solid var(--card-border); background:transparent; color:var(--text-secondary); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:700; transition:all .2s; font-family:var(--font-heading); }
.pb-qty-btn:hover { border-color:var(--primary-neon); color:var(--primary-neon); }
.pb-qty-val { font-family:var(--font-heading); font-size:.82rem; font-weight:700; min-width:20px; text-align:center; }
.pb-zone-item-remove { width:22px; height:22px; border:none; background:transparent; color:var(--text-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:color .2s; }
.pb-zone-item-remove:hover { color:#f87171; }
.pb-zone-item-remove i { width:14px; height:14px; }

/* Zone Footer Totals */
.pb-zone-footer { display:flex; justify-content:space-between; padding:var(--space-2) var(--space-3); background:rgba(255,255,255,0.02); border-top:1px solid var(--card-border); font-family:var(--font-heading); font-size:.78rem; font-weight:600; color:var(--text-secondary); }
body.light-theme .pb-zone-footer { background:rgba(17,24,39,0.02); }
.pb-zone-footer-val { color:#34d399; }
body.light-theme .pb-zone-footer-val { color:#059669; }

/* ── Generate PDF Button ── */
.pb-generate-btn { width:100%; padding:1rem; border-radius:var(--radius-md); border:1px solid rgba(16,185,129,0.4); background:linear-gradient(135deg,rgba(16,185,129,0.15),rgba(111,251,255,0.1)); color:#34d399; font-family:var(--font-heading); font-size:1rem; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:.6rem; transition:all .3s var(--ease-premium); position:relative; overflow:hidden; }
.pb-generate-btn:hover:not(:disabled) { background:linear-gradient(135deg,rgba(16,185,129,0.25),rgba(111,251,255,0.18)); box-shadow:0 0 25px rgba(16,185,129,0.15); transform:translateY(-1px); }
.pb-generate-btn:disabled { opacity:.35; cursor:not-allowed; }
.pb-generate-btn i { width:20px; height:20px; }
body.light-theme .pb-generate-btn { color:#059669; border-color:rgba(5,150,105,0.3); background:linear-gradient(135deg,rgba(5,150,105,0.08),rgba(111,107,232,0.05)); }

/* ── Zone Name Modal ── */
.pb-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); backdrop-filter:blur(4px); z-index:1000; display:flex; align-items:center; justify-content:center; animation:pbFadeIn .2s ease; }
@keyframes pbFadeIn { from{opacity:0} to{opacity:1} }
.pb-modal { background:var(--bg-secondary,#0f0f19); border:1px solid var(--card-border); border-radius:var(--radius-xl); padding:var(--space-5); width:90%; max-width:380px; }
body.light-theme .pb-modal { background:#fff; }
.pb-modal h3 { font-size:1.1rem; margin-bottom:var(--space-3); }
.pb-modal input { width:100%; padding:.8rem 1rem; background:rgba(255,255,255,0.03); border:1px solid var(--card-border); border-radius:var(--radius-md); color:var(--text-primary); font-family:var(--font-heading); font-size:.95rem; outline:none; margin-bottom:var(--space-3); }
.pb-modal input:focus { border-color:var(--primary-neon); }
body.light-theme .pb-modal input { background:rgba(17,24,39,0.04); }
.pb-modal-actions { display:flex; gap:var(--space-2); justify-content:flex-end; }
.pb-modal-btn { padding:.55rem 1.2rem; border-radius:var(--radius-sm); font-family:var(--font-heading); font-size:.82rem; font-weight:600; cursor:pointer; transition:all .2s; }
.pb-modal-btn.cancel { border:1px solid var(--card-border); background:transparent; color:var(--text-secondary); }
.pb-modal-btn.confirm { border:1px solid var(--primary-neon); background:var(--primary-neon); color:var(--bg-primary); }

/* ═══════════════════════════════════════════
   RESPONSIVE — Tablet
   ═══════════════════════════════════════════ */
@media (max-width:900px) {
    .pb-layout { grid-template-columns:1fr; }
    .pb-product-grid { max-height:360px; }
    .pb-zones { max-height:400px; }
    .pb-header h1 { font-size:2rem; }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — Mobile
   ═══════════════════════════════════════════ */
@media (max-width:600px) {
    .pb-section { padding:var(--space-6) 0 var(--space-4); }
    .pb-header { margin-bottom:var(--space-5); }
    .pb-header h1 { font-size:1.5rem; line-height:1.25; }
    .pb-header p { font-size:.88rem; }
    .pb-header-badge { font-size:.68rem; padding:.35rem .8rem; }

    .pb-panel { padding:var(--space-3); border-radius:var(--radius-lg); }
    .pb-panel-header { margin-bottom:var(--space-3); padding-bottom:var(--space-2); gap:var(--space-1); }
    .pb-panel-icon { width:30px; height:30px; }
    .pb-panel-icon i { width:15px; height:15px; }
    .pb-panel-header h2 { font-size:.95rem; }
    .pb-panel-sub { font-size:.66rem; }

    /* Search & Filters */
    .pb-search { padding:.7rem .7rem .7rem 2.3rem; font-size:.85rem; }
    .pb-filters { gap:.4rem; }
    .pb-filter { padding:.35rem .7rem; font-size:.72rem; }

    /* Product list */
    .pb-product-grid { max-height:300px; gap:6px; }
    .pb-product-item { padding:8px; gap:8px; }
    .pb-product-img { width:40px; height:40px; }
    .pb-product-name { font-size:.8rem; }
    .pb-product-meta { gap:.5rem; font-size:.68rem; }
    .pb-add-btn { padding:.35rem .6rem; font-size:.68rem; }
    .pb-add-count { min-width:16px; height:16px; font-size:.6rem; }

    /* Grand totals */
    .pb-grand-totals { grid-template-columns:repeat(3,1fr); gap:var(--space-1); padding:var(--space-2); }
    .pb-total-label { font-size:.58rem; }
    .pb-total-value { font-size:1rem; }

    /* Add zone */
    .pb-add-zone-btn { padding:.6rem; font-size:.8rem; }
    .pb-add-zone-btn i { width:16px; height:16px; }

    /* Zones */
    .pb-zones { max-height:350px; gap:var(--space-2); }
    .pb-zone-header { padding:8px 12px; }
    .pb-zone-name { font-size:.85rem; gap:.4rem; }
    .pb-zone-name i { width:14px; height:14px; }
    .pb-zone-action-btn { width:26px; height:26px; }
    .pb-zone-items { padding:6px 12px; }
    .pb-zone-item { gap:6px; padding:.5rem 0; }
    .pb-zone-item-name { font-size:.78rem; }
    .pb-zone-item-price { font-size:.78rem; min-width:60px; }
    .pb-qty-btn { width:28px; height:28px; font-size:.9rem; }
    .pb-qty-val { font-size:.8rem; }
    .pb-zone-footer { padding:8px 12px; font-size:.72rem; }

    /* Generate PDF */
    .pb-generate-btn { padding:.85rem; font-size:.88rem; gap:.5rem; }
    .pb-generate-btn i { width:18px; height:18px; }

    /* Modal */
    .pb-modal { padding:var(--space-4); }
    .pb-modal h3 { font-size:1rem; }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — Small Mobile (iPhone SE)
   ═══════════════════════════════════════════ */
@media (max-width:400px) {
    .pb-header h1 { font-size:1.3rem; }
    .pb-panel { padding:var(--space-2) 10px; }
    .pb-grand-totals { grid-template-columns:1fr; gap:4px; padding:8px; }
    .pb-total-item { display:flex; justify-content:space-between; align-items:center; text-align:left; }
    .pb-total-label { margin-bottom:0; }
    .pb-total-value { font-size:.95rem; }
    .pb-product-img { width:36px; height:36px; }
    .pb-product-name { font-size:.75rem; }
    .pb-zone-item-name { font-size:.72rem; }
}

/* ═══════════════════════════════════════════
   Touch Devices
   ═══════════════════════════════════════════ */
@media (hover:none) {
    .pb-product-item:hover { border-color:var(--card-border); background:rgba(255,255,255,0.02); }
    .pb-qty-btn { width:32px; height:32px; }
}

@supports (padding: env(safe-area-inset-bottom)) {
    .pb-section { padding-bottom:calc(var(--space-4) + env(safe-area-inset-bottom)); }
}