/* ==========================================================================
   Interactive layer — modals, forms, wizards, detail panels
   ========================================================================== */

/* ---- Modal ---- */
.modal-root{position:fixed; inset:0; z-index:80; display:none}
.modal-root.open{display:block}
.modal-overlay{position:absolute; inset:0; background:rgba(20,18,16,.55); opacity:0; transition:.25s var(--ease)}
.modal-root.open .modal-overlay{opacity:1}
.modal{
  position:absolute; inset-block-start:50%; inset-inline-start:50%; transform:translate(50%,-46%);
  width:min(640px,calc(100vw - 36px)); max-height:90vh; background:var(--surface); border-radius:var(--r-xl);
  box-shadow:var(--sh-lg); display:flex; flex-direction:column; opacity:0; transition:.28s var(--ease);
}
[dir="rtl"] .modal{transform:translate(50%,-46%)}
[dir="ltr"] .modal{inset-inline-start:50%; transform:translate(-50%,-46%)}
.modal-root.open .modal{opacity:1; transform:translate(50%,-50%)}
[dir="ltr"] .modal-root.open .modal{transform:translate(-50%,-50%)}
.modal.lg{width:min(880px,calc(100vw - 36px))}
.modal.sm{width:min(440px,calc(100vw - 36px))}
.modal__head{display:flex; align-items:center; gap:14px; padding:22px 26px; border-bottom:1px solid var(--line)}
.modal__head .mh-ic{width:46px; height:46px; border-radius:13px; display:grid; place-items:center; flex-shrink:0}
.modal__head .mh-ic svg{width:22px; height:22px}
.modal__head .x svg{width:18px; height:18px}
.autofill .af-h svg{width:15px; height:15px}
.modal__head h3{font-size:18px; font-weight:800}
.modal__head p{font-size:13px; color:var(--ink-500); margin-top:2px}
.modal__head .x{margin-inline-start:auto; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:var(--ink-400); background:var(--surface-2); border:1px solid var(--line); transition:.15s}
.modal__head .x:hover{background:var(--danger-bg); color:var(--danger)}
.modal__head .x svg{width:18px;height:18px}
.modal__body{padding:24px 26px; overflow-y:auto}
.modal__foot{display:flex; gap:10px; justify-content:flex-start; padding:18px 26px; border-top:1px solid var(--line); background:var(--surface-2); border-radius:0 0 var(--r-xl) var(--r-xl)}
.modal__foot .spacer{flex:1}

/* ---- Forms ---- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px 18px}
.form-grid .full{grid-column:1 / -1}
.fld{display:flex; flex-direction:column; gap:7px}
.fld > label{font-size:13px; font-weight:700; color:var(--ink-700)}
.fld > label .req{color:var(--brand-600)}
.fld input, .fld select, .fld textarea{
  width:100%; padding:11px 13px; border:1.5px solid var(--line-strong); border-radius:11px;
  font-family:inherit; font-size:14px; background:var(--surface-2); color:var(--ink); transition:.16s var(--ease);
}
.fld textarea{resize:vertical; min-height:78px}
.fld input:focus, .fld select:focus, .fld textarea:focus{outline:none; border-color:var(--brand); background:#fff; box-shadow:0 0 0 4px var(--brand-50)}
.fld .hint{font-size:11.5px; color:var(--ink-400)}
.fld.err input, .fld.err select{border-color:var(--danger); background:var(--danger-bg)}
.fld .err-msg{font-size:11.5px; color:var(--danger); font-weight:600; display:none}
.fld.err .err-msg{display:block}

.dropzone{
  border:2px dashed var(--line-strong); border-radius:var(--r); padding:26px; text-align:center; cursor:pointer;
  background:var(--surface-2); transition:.18s var(--ease); color:var(--ink-500);
}
.dropzone:hover{border-color:var(--brand-300); background:var(--brand-50); color:var(--brand-600)}
.dropzone.drag{border-color:var(--brand); background:var(--brand-50); color:var(--brand-700)}
.dropzone .dz-ic{width:50px; height:50px; border-radius:14px; background:#fff; display:grid; place-items:center; margin:0 auto 12px; color:var(--brand-600); box-shadow:var(--sh-sm)}
.dropzone .dz-ic svg{width:24px;height:24px}
.dropzone b{color:var(--brand-700)}

/* ---- Stepper (wizard) ---- */
.steps{display:flex; align-items:center; margin-bottom:24px}
.steps .st{display:flex; align-items:center; gap:9px; flex:1}
.steps .st .n{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:13px; background:var(--surface-2); border:2px solid var(--line-strong); color:var(--ink-400); flex-shrink:0; transition:.2s}
.steps .st .t{font-size:13px; font-weight:700; color:var(--ink-400)}
.steps .st .bar{flex:1; height:2.5px; background:var(--line-strong); margin:0 6px; border-radius:3px}
.steps .st.done .n{background:var(--ok); border-color:var(--ok); color:#fff}
.steps .st.done .bar{background:var(--ok)}
.steps .st.active .n{background:var(--molten); border-color:transparent; color:#fff; box-shadow:var(--sh-brand)}
.steps .st.active .t{color:var(--brand-700)}

/* ---- Selectable cards (customer/template picker) ---- */
.pick-list{display:flex; flex-direction:column; gap:10px; max-height:340px; overflow-y:auto; padding:2px}
.pick{
  display:flex; align-items:center; gap:13px; padding:13px 15px; border:1.6px solid var(--line); border-radius:14px;
  cursor:pointer; transition:.15s var(--ease); background:var(--surface);
}
.pick:hover{border-color:var(--brand-300); background:var(--brand-50)}
.pick.sel{border-color:var(--brand); background:var(--brand-50); box-shadow:0 0 0 3px var(--brand-50)}
.pick .pradio{width:20px; height:20px; border-radius:50%; border:2px solid var(--line-strong); flex-shrink:0; position:relative; transition:.15s}
.pick.sel .pradio{border-color:var(--brand)}
.pick.sel .pradio::after{content:""; position:absolute; inset:3px; border-radius:50%; background:var(--molten)}
.pick .pmeta{flex:1}
.pick .pmeta .tt{font-weight:700; font-size:14px}
.pick .pmeta .mt{font-size:12px; color:var(--ink-400)}
.pick .pthumb{width:44px; height:44px; border-radius:11px; background:var(--surface-2); border:1px solid var(--line); display:grid; place-items:center; color:var(--ink-300)}

/* ---- Auto-filled readonly block ---- */
.autofill{background:var(--molten-soft); border:1px solid var(--brand-100); border-radius:var(--r); padding:16px 18px; margin-bottom:18px}
.autofill .af-h{font-size:12px; font-weight:800; color:var(--brand-700); margin-bottom:10px; display:flex; align-items:center; gap:7px}
.autofill .af-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.autofill .af-i .k{font-size:11.5px; color:var(--ink-500)}
.autofill .af-i .v{font-size:14px; font-weight:700}

/* ---- Live quantity validation widget ---- */
.qty-meter{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; margin-bottom:6px}
.qty-meter .qm-row{display:flex; justify-content:space-between; align-items:center; padding:6px 0; font-size:13.5px}
.qty-meter .qm-row .k{color:var(--ink-500)}
.qty-meter .qm-row .v{font-weight:800}
.qty-meter .qm-track{height:9px; background:var(--line); border-radius:10px; overflow:hidden; margin:8px 0}
.qty-meter .qm-fill{height:100%; background:var(--molten); border-radius:10px; transition:.3s var(--ease)}
.qty-meter.over .qm-fill{background:var(--danger)}
.qty-warn{display:none; align-items:center; gap:8px; background:var(--danger-bg); color:var(--danger); padding:10px 13px; border-radius:11px; font-size:13px; font-weight:700; margin-top:10px}
.qty-warn.show{display:flex}
.qty-warn svg{width:18px;height:18px}

/* ---- Detail panel ---- */
.detail-hero{display:flex; align-items:center; gap:18px; padding:22px; background:var(--molten-soft); border-radius:var(--r-lg); margin-bottom:18px}
.detail-hero .dh-ic{width:60px; height:60px; border-radius:17px; background:#fff; display:grid; place-items:center; color:var(--brand-600); box-shadow:var(--sh-sm)}
.detail-hero .dh-ic svg{width:28px;height:28px}
.detail-hero .dh-c .code{font-size:12px; color:var(--brand-700); font-weight:700}
.detail-hero .dh-c h2{font-size:22px; font-weight:800; margin:2px 0 6px}
.detail-hero .dh-side{margin-inline-start:auto; text-align:center}
.detail-hero .dh-side .big{font-size:30px; font-weight:800; line-height:1}
.detail-hero .dh-side .lbl{font-size:12px; color:var(--ink-500); margin-top:4px}

/* gallery */
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.gallery .gimg{aspect-ratio:1; border-radius:13px; background:var(--surface-2); border:1px solid var(--line); display:grid; place-items:center; color:var(--ink-300)}
.gallery .gimg svg{width:30px;height:30px}

/* ---- Finishing stage checklist ---- */
.stage-list{display:flex; flex-direction:column; gap:10px}
.stage-row{display:flex; align-items:center; gap:14px; padding:12px 16px; border:1.6px solid var(--line); border-radius:14px; background:var(--surface); transition:.15s var(--ease)}
.stage-row.on{border-color:var(--ok); background:var(--ok-bg)}
.stage-toggle{cursor:pointer; flex-shrink:0}
.stage-toggle input{display:none}
.stage-toggle .sc-box{width:30px; height:30px; border-radius:9px; border:2px solid var(--line-strong); display:grid; place-items:center; color:transparent; transition:.15s var(--ease)}
.stage-toggle .sc-box svg{width:18px; height:18px}
.stage-row.on .sc-box{background:var(--ok); border-color:var(--ok); color:#fff}
.stage-row .sc-name{flex:1; font-weight:800; font-size:15px}
.stage-row .sc-name small{color:var(--ink-400); font-weight:600; font-size:11.5px}
.stage-row .sc-qty{display:flex; align-items:center; gap:8px}
.stage-row .sc-qty > span{font-size:12px; color:var(--ink-500); font-weight:600}
.stage-row .sc-qty .fld{width:96px}
.stage-row .sc-qty .fld input{padding:8px 10px; text-align:center}

.toggle-wrap{display:flex; gap:8px; flex-wrap:wrap}
.toggle{padding:9px 15px; border-radius:11px; border:1.6px solid var(--line-strong); background:var(--surface); font-weight:700; font-size:13px; cursor:pointer; transition:.15s}
.toggle:hover{border-color:var(--brand-300)}
.toggle.on{background:var(--molten); color:#fff; border-color:transparent}

/* ---- Generic searchable select (combo) — used for every entity picker ---- */
.ssel{position:relative}
.ssel input.ssel-q{
  width:100%; padding:11px 36px 11px 13px; border:1.5px solid var(--line-strong); border-radius:11px;
  font-family:inherit; font-size:14px; background:var(--surface-2); color:var(--ink); transition:.16s var(--ease); cursor:pointer;
}
.ssel input.ssel-q:focus{outline:none; border-color:var(--brand); background:#fff; box-shadow:0 0 0 4px var(--brand-50); cursor:text}
.ssel .ssel-caret{position:absolute; inset-inline-end:12px; top:50%; transform:translateY(-50%); color:var(--ink-400); pointer-events:none}
.ssel .ssel-caret svg{width:16px;height:16px}
.ssel-list{
  position:absolute; top:calc(100% + 6px); inset-inline:0; background:var(--surface); border:1px solid var(--line-strong);
  border-radius:13px; box-shadow:var(--sh-lg); max-height:230px; overflow-y:auto; z-index:60; display:none; padding:6px;
}
.ssel-list.show{display:block}
.ssel-item{padding:9px 12px; border-radius:9px; cursor:pointer; font-size:13.5px; font-weight:600}
.ssel-item:hover, .ssel-item.hi{background:var(--brand-50); color:var(--brand-700)}
.ssel-item .ssel-sub{font-size:11.5px; color:var(--ink-400); font-weight:500; margin-top:1px}
.ssel-item:hover .ssel-sub, .ssel-item.hi .ssel-sub{color:var(--brand-600)}
.ssel-empty{padding:14px 12px; color:var(--ink-400); font-size:13px; text-align:center}
.ssel-sep{padding:5px 12px 3px; font-size:11px; font-weight:800; color:var(--ink-400); letter-spacing:.4px; border-top:1px solid var(--border); margin-top:4px; pointer-events:none; user-select:none}
.ssel-sep:first-child{border-top:none; margin-top:0}

/* ---- Quotation line items ---- */
.qitems-head, .qitem-row{display:grid; grid-template-columns:2.2fr 1.4fr 70px 110px 110px 32px; gap:8px; align-items:center}
.qitems-head{padding:0 4px 8px; font-size:11.5px; font-weight:700; color:var(--ink-500)}
.qitem-row{margin-bottom:8px}
.qitem-row input, .qitem-row select{
  width:100%; padding:9px 10px; border:1.5px solid var(--line-strong); border-radius:10px; font-family:inherit; font-size:13.5px; background:var(--surface-2);
}
.qitem-row input:focus, .qitem-row select:focus{outline:none; border-color:var(--brand); background:#fff}
.qitem-row input.qitem-total{background:var(--brand-50); color:var(--brand-700); font-weight:800; text-align:center; border-color:var(--brand-100)}
.qitem-del{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--danger-bg); color:var(--danger); cursor:pointer; flex-shrink:0}
.qitem-del svg{width:15px;height:15px}
.qtotals{margin-top:14px; padding:16px 18px; background:var(--surface-2); border-radius:var(--r); border:1px solid var(--line)}
.qtotals .qt-row{display:flex; justify-content:space-between; padding:5px 0; font-size:13.5px; color:var(--ink-500)}
.qtotals .qt-row.grand{border-top:1px dashed var(--line-strong); margin-top:6px; padding-top:10px; font-size:16px; font-weight:800; color:var(--ink)}
.qtotals .qt-row .v{font-weight:700; color:var(--ink)}
.qtotals .qt-row.grand .v{color:var(--brand-700)}

@media (max-width:600px){
  .form-grid{grid-template-columns:1fr}
  .autofill .af-grid{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .steps .st .t{display:none}
  .qitems-head{display:none}
  .qitem-row{grid-template-columns:1fr; background:var(--surface-2); padding:10px; border-radius:11px}
}

@media (max-width:600px){
  .form-grid{grid-template-columns:1fr}
  .autofill .af-grid{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .steps .st .t{display:none}
}

/* ---- Multi-Filter Select ---- */
.mfs-wrap{ position:relative; display:inline-flex }
.mfs-btn{
  display:flex; align-items:center; gap:6px; padding:7px 12px;
  background:var(--surface); border:1.5px solid var(--line);
  border-radius:10px; font-size:13px; color:var(--ink-600);
  cursor:pointer; white-space:nowrap; transition:.15s; min-width:130px; max-width:220px;
  font-family:inherit;
}
.mfs-btn:hover{ border-color:var(--brand-300); background:var(--brand-50) }
.mfs-btn.has-val{ border-color:var(--brand); background:var(--brand-50); color:var(--brand-700); font-weight:700 }
.mfs-btn .mfs-label{ flex:1; text-align:end; overflow:hidden; text-overflow:ellipsis }
.mfs-btn .mfs-badge{
  background:var(--brand); color:#fff; border-radius:20px;
  font-size:11px; font-weight:800; padding:1px 7px; flex-shrink:0;
}
.mfs-btn .mfs-caret{ width:14px; height:14px; opacity:.5; flex-shrink:0; transition:.2s }
.mfs-btn.open .mfs-caret{ transform:rotate(180deg) }
.mfs-drop{
  position:absolute; top:calc(100% + 6px); inset-inline-start:0;
  min-width:220px; max-width:300px; width:max-content;
  background:var(--surface); border:1.5px solid var(--line);
  border-radius:14px; box-shadow:var(--sh-lg);
  z-index:120; display:none; flex-direction:column; overflow:hidden;
}
.mfs-drop.open{ display:flex }
.mfs-search-wrap{ padding:10px 10px 6px; border-bottom:1px solid var(--line) }
.mfs-search-wrap input{
  width:100%; padding:7px 10px; border:1.5px solid var(--line);
  border-radius:9px; font-size:13px; background:var(--surface-2);
  font-family:inherit; color:var(--ink-700); outline:none;
}
.mfs-search-wrap input:focus{ border-color:var(--brand) }
.mfs-actions{ display:flex; gap:6px; padding:6px 10px; border-bottom:1px solid var(--line) }
.mfs-actions button{
  font-size:11.5px; padding:3px 10px; border-radius:7px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--ink-500); cursor:pointer; font-family:inherit;
  transition:.12s;
}
.mfs-actions button:hover{ background:var(--brand-50); color:var(--brand-700); border-color:var(--brand-300) }
.mfs-list{ max-height:220px; overflow-y:auto; padding:6px 4px }
.mfs-item{
  display:flex; align-items:center; gap:8px; padding:7px 10px;
  border-radius:9px; cursor:pointer; font-size:13px; transition:.12s;
}
.mfs-item:hover{ background:var(--brand-50) }
.mfs-item input[type=checkbox]{ accent-color:var(--brand); width:15px; height:15px; flex-shrink:0 }
.mfs-item.checked{ background:var(--brand-50); font-weight:600; color:var(--brand-700) }
.mfs-empty{ padding:14px; text-align:center; color:var(--ink-400); font-size:13px }

/* ---- filterSelect: searchable single-select for filter bars ---- */
.fsel-wrap{ position:relative; display:inline-block; min-width:130px }
.fsel-btn{
  display:flex; align-items:center; gap:6px;
  border:1.5px solid var(--border); border-radius:10px;
  padding:7px 10px; background:var(--surface); cursor:pointer;
  transition:.15s; min-width:100%
}
.fsel-btn:focus-within{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-50) }
.fsel-btn.has-val{ border-color:var(--brand); background:var(--brand-50) }
.fsel-ic{ width:14px; height:14px; color:var(--ink-400); flex-shrink:0 }
.fsel-q{
  border:none; outline:none; background:transparent;
  font:inherit; font-size:13px; color:var(--ink);
  width:100%; min-width:60px; flex:1
}
.fsel-q::placeholder{ color:var(--ink-500) }
.fsel-arrow{ width:12px; height:12px; flex-shrink:0; color:var(--ink-400); transition:.2s }
.fsel-wrap.open .fsel-arrow{ transform:rotate(180deg) }
.fsel-drop{
  display:none; position:absolute; top:calc(100% + 4px); right:0;
  min-width:100%; width:max-content; max-width:280px;
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.13);
  z-index:300; max-height:230px; overflow-y:auto; padding:4px
}
.fsel-wrap.open .fsel-drop{ display:block }
.fsel-item{
  padding:8px 13px; border-radius:8px; cursor:pointer;
  font-size:13px; color:var(--ink); white-space:nowrap
}
.fsel-item:hover{ background:var(--brand-50); color:var(--brand-700) }
.fsel-item.sel{ background:var(--brand-50); color:var(--brand); font-weight:700 }
.fsel-empty{ padding:10px 13px; font-size:13px; color:var(--ink-400) }

/* ---- Lightbox ---- */
#lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(10,8,6,.92);
  display:none; align-items:center; justify-content:center;
}
#lightbox.open{ display:flex }
#lightbox .lb-img-wrap{
  position:relative; max-width:min(900px,90vw); max-height:88vh;
  display:flex; align-items:center; justify-content:center;
}
#lightbox .lb-img-wrap img{
  max-width:100%; max-height:88vh;
  border-radius:12px;
  object-fit:contain;
  box-shadow:0 8px 40px rgba(0,0,0,.6);
  transition:opacity .22s ease;
}
#lightbox .lb-img-wrap img.fading{ opacity:0 }
#lightbox .lb-arrow{
  position:fixed; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.25);
  color:#fff; display:grid; place-items:center; cursor:pointer;
  transition:.18s;
}
#lightbox .lb-arrow:hover{ background:var(--brand); border-color:var(--brand) }
#lightbox .lb-arrow svg{ width:22px; height:22px; pointer-events:none }
#lightbox .lb-prev{ left:20px }
#lightbox .lb-next{ right:20px }
#lightbox .lb-arrow.hidden{ opacity:0; pointer-events:none }
#lightbox .lb-counter{
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.75); font-size:14px; font-weight:600;
  background:rgba(0,0,0,.45); padding:6px 18px; border-radius:20px;
  letter-spacing:.04em;
}
#lightbox .lb-close{
  position:fixed; top:20px; right:20px;
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.25);
  color:#fff; display:grid; place-items:center; cursor:pointer; transition:.18s;
}
#lightbox .lb-close:hover{ background:var(--danger); border-color:var(--danger) }
#lightbox .lb-close svg{ width:18px; height:18px }
/* thumbnail cursor hint */
.thumb img{ cursor:zoom-in }
.gimg img{ cursor:zoom-in }