/* شاشة تفصيل الثياب v28.1 — القياسات يسار الثوب بعمودين، ومساحة أوسع للخيارات المصورة يمينًا. */
#tailoringOrderModal .to-measurement-layout{
  width:100%;height:100%;min-height:0;display:grid;
  grid-template-columns:minmax(208px,.78fr) minmax(250px,1.22fr);
  align-items:stretch;gap:10px;direction:ltr;
}
#tailoringOrderModal .to-measure-side{
  min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  align-content:center;gap:6px;direction:rtl;grid-column:1;
}
#tailoringOrderModal .to-measure-side .to-callout,
#tailoringOrderModal .to-measure-side .to-callout-cluster{
  position:relative!important;inset:auto!important;width:auto!important;min-width:0;
  padding:5px!important;border:1px solid var(--line)!important;border-radius:9px!important;
  background:var(--surface)!important;box-shadow:none!important;backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;transform:none!important;
}
#tailoringOrderModal .to-measure-side .to-callout-cluster{grid-column:1/-1}
#tailoringOrderModal .to-measure-side .to-callout:focus-within,
#tailoringOrderModal .to-measure-side .to-callout-cluster:focus-within,
#tailoringOrderModal .to-measure-side .to-measure-card-active{
  border-color:var(--brand)!important;background:var(--brand-tint)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 13%,transparent)!important;
}
#tailoringOrderModal .to-measure-side .to-callout label,
#tailoringOrderModal .to-measure-side .field-mini label{
  display:block;margin:0 0 3px;font-size:calc(10.5/14*var(--app-font-size));
  color:var(--ink-soft);font-weight:800;white-space:normal;line-height:1.25;
}
#tailoringOrderModal .to-measure-side :is(.to-callout input,.field-mini input){
  width:100%!important;height:28px!important;min-height:28px!important;padding:2px 5px!important;
  border:1px solid var(--line);border-radius:8px;background:var(--surface-raised);
  font-size:calc(12/14*var(--app-font-size));text-align:center;
}
#tailoringOrderModal .to-measure-side .to-callout-cluster-title{
  margin:0 0 6px;font-size:calc(11/14*var(--app-font-size));font-weight:900;color:var(--brand-dark);text-align:center;
}
#tailoringOrderModal .to-measure-side .to-measure-group-title{
  grid-column:1/-1;margin:1px 0 -1px;padding:3px 6px;border-radius:7px;
  background:var(--brand-tint);color:var(--brand-dark);font-size:calc(10.5/14*var(--app-font-size));
  font-weight:900;text-align:center;line-height:1.2;
}
#tailoringOrderModal .to-measure-side .to-callout-cluster-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
#tailoringOrderModal .to-diagram-canvas{
  grid-column:2;
  position:relative!important;display:block!important;width:100%!important;height:100%!important;
  min-height:360px;max-width:none!important;aspect-ratio:auto!important;container-type:normal!important;
  overflow:hidden;border:1px solid color-mix(in srgb,var(--brand) 16%,var(--line));border-radius:16px;
  background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--brand-tint) 45%,#fff),#fff 66%);
}
#tailoringOrderModal .to-diagram-canvas>img{
  position:absolute!important;inset:4% 18%!important;width:64%!important;height:92%!important;
  max-width:none!important;object-fit:contain!important;margin:0!important;
  filter:drop-shadow(0 12px 18px rgba(15,23,42,.16))!important;
}
#tailoringOrderModal .to-diagram-svg{display:block!important;position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
#tailoringOrderModal .to-point-dot{
  display:block!important;position:absolute;z-index:3;width:12px!important;height:12px!important;min-height:12px!important;
  padding:0!important;margin:-6px!important;border:2px solid var(--ink-faint)!important;border-radius:50%;
  background:var(--surface)!important;cursor:pointer;
}
#tailoringOrderModal .to-point-dot.to-dot-active{background:var(--brand)!important;border-color:var(--brand)!important}

@media (min-width:1200px){
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact>.modal-box{
    width:min(1880px,97vw)!important;max-width:min(1880px,97vw)!important;height:min(1040px,96vh)!important;
    max-height:96vh!important;padding:12px 20px!important;overflow:auto!important;grid-template-rows:auto minmax(0,1fr) auto auto!important;
  }
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact .v197-tailoring-body{
    display:grid!important;grid-template-columns:minmax(370px,.93fr) minmax(620px,1.5fr) minmax(250px,.57fr)!important;
    grid-template-rows:auto repeat(4,minmax(0,auto))!important;gap:8px!important;overflow:visible!important;align-content:start!important;
  }
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact .v197-tailoring-customer{
    grid-column:1/-1!important;grid-row:1!important;
  }
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact .v197-tailoring-style{
    grid-column:1!important;grid-row:2/6!important;display:block!important;overflow:visible!important;min-height:0!important;
  }
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact .v197-tailoring-core{
    grid-column:2!important;grid-row:2/6!important;display:flex!important;min-width:0!important;min-height:0!important;
    overflow:visible!important;padding:0!important;align-items:stretch!important;
  }
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact .v197-tailoring-core>.to-section-block{
    width:100%!important;height:auto!important;min-height:0!important;padding:8px 10px!important;
  }
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact #toMeasurementsGrid{
    display:flex!important;min-height:460px!important;
  }
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact #toMeasurementsGrid .to-diagram-stage{
    width:100%!important;height:auto!important;min-height:460px!important;
  }
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact :is(.v197-tailoring-piece,.v197-tailoring-responsible,.v197-tailoring-materials,.v197-tailoring-finance){
    grid-column:3!important;min-height:0!important;overflow:visible!important;margin:0!important;padding:7px 10px!important;
  }
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact .v197-tailoring-piece{grid-row:2!important}
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact .v197-tailoring-responsible{grid-row:3!important}
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact .v197-tailoring-materials{grid-row:4!important}
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact .v197-tailoring-finance{grid-row:5!important}
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact #toMenStyleSection>div[style*="gap:28px"]{
    display:grid!important;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr)!important;gap:6px!important;align-items:start!important;
  }
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact #toMenStyleSection>div[style*="gap:28px"]>div{min-width:0!important}
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact #toMenStyleSection .vop-row{
    display:grid!important;grid-template-columns:repeat(auto-fit,minmax(64px,1fr))!important;gap:6px!important;
    overflow:visible!important;flex-wrap:wrap!important;padding:0!important;
  }
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact #vopCollarBand{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact #vopSleeve{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact #vopButtons{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact #toMenStyleSection .vop-item{
    width:auto!important;min-width:0!important;max-width:none!important;
    min-height:0!important;padding:3px!important;
  }
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact #toMenStyleSection .vop-icon{height:46px!important;margin-bottom:2px!important}
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact #vopButtons .vop-icon{height:78px!important}
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact #vopCollarBand .vop-icon,
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact #vopSleeve .vop-icon{height:50px!important}
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact #toMenStyleSection .vop-label{height:14px!important;min-height:14px!important;overflow:hidden!important;font-size:calc(8.5/14*var(--app-font-size))!important;line-height:1!important;white-space:nowrap!important;gap:2px!important;margin-bottom:1px!important}
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact #toMenStyleSection .vop-input{
    height:22px!important;min-height:22px!important;padding:1px 3px!important;font-size:calc(9.5/14*var(--app-font-size))!important;
  }
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact #toMenStyleSection .vop-label input[type="checkbox"],
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact #vopStitch .vop-simple-check{
    width:10px!important;height:10px!important;min-width:10px!important;min-height:10px!important;flex:0 0 10px!important;
  }
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact #toMenStyleSection div[style*="font-weight:800"]{margin-top:5px!important;margin-bottom:3px!important}
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact :is(.v197-tailoring-piece,.v197-tailoring-responsible,.v197-tailoring-finance) :is(input:not([type="checkbox"]):not([type="radio"]),select,button){
    height:29px!important;min-height:29px!important;padding:3px 6px!important;font-size:calc(10.5/14*var(--app-font-size))!important;
  }
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact :is(.v197-tailoring-piece,.v197-tailoring-responsible,.v197-tailoring-finance) .field label{
    font-size:calc(9/14*var(--app-font-size))!important;margin-bottom:2px!important;
  }
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact .v197-tailoring-piece .to-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important}
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact .v197-tailoring-finance .to-grid-3{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important}
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact #vopStitch{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important;flex-wrap:nowrap!important}
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact #vopStitch .vop-stitch-btn{width:auto!important;min-width:0!important;height:30px!important;min-height:30px!important;padding:3px 4px!important;font-size:calc(9.5/14*var(--app-font-size))!important}
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact #toMaterialsList{
    height:auto!important;min-height:58px!important;max-height:none!important;overflow:visible!important;
  }
}

@media (min-width:1200px) and (max-width:1450px){
  #tailoringOrderModal .to-measurement-layout{grid-template-columns:minmax(200px,.78fr) minmax(248px,1.22fr);gap:7px}
  #tailoringOrderModal .to-measure-side{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
  #tailoringOrderModal .to-measure-side .to-callout-cluster{grid-column:1/-1}
  #tailoringOrderModal .to-measure-side .to-callout-cluster-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact .v197-tailoring-body{
    grid-template-columns:minmax(340px,.92fr) minmax(540px,1.48fr) minmax(220px,.6fr)!important;
  }
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact #toMenStyleSection .vop-item{padding:4px!important}
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact #vopButtons .vop-icon{height:70px!important}
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact #vopCollarBand .vop-icon,
  body.ui-v19.erp-responsive-v20 #tailoringOrderModal.v197-tailoring-men-fullscreen.erp-tailoring-compact #vopSleeve .vop-icon{height:46px!important}
}

@media (max-width:1199px){
  #tailoringOrderModal .to-measurement-layout{grid-template-columns:1fr;gap:10px}
  #tailoringOrderModal .to-diagram-canvas{min-height:520px;grid-row:1}
  #tailoringOrderModal .to-measure-side{grid-template-columns:repeat(2,minmax(0,1fr));align-content:start}
  #tailoringOrderModal .to-measure-side-left{grid-row:3}
  #tailoringOrderModal .to-measure-side-right{grid-row:2}
}

@media (max-width:620px){
  #tailoringOrderModal .to-diagram-canvas{min-height:430px}
  #tailoringOrderModal .to-measure-side{grid-template-columns:1fr}
  #tailoringOrderModal .to-measure-side .to-callout-cluster-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}